/* =========================================================
   Radio-Streams WHMCS theme overrides
   Brand color: #ff7721
   ========================================================= */

:root{
    --rs-orange: #ff7721;
    --rs-orange-hover: #e56612;
}

/* ---------------------------------------------------------
   1) Order form (bestelproces) buttons
   --------------------------------------------------------- */
#order-standard_cart .btn-success,
#order-standard_cart .btn-primary,
#order-standard_cart .btn-order-now,
#order-standard_cart .btn-checkout,
#order-standard_cart .btn-continue {
    background-color: var(--rs-orange) !important;
    border-color: var(--rs-orange) !important;
}

#order-standard_cart .btn-success:hover,
#order-standard_cart .btn-primary:hover,
#order-standard_cart .btn-order-now:hover,
#order-standard_cart .btn-checkout:hover,
#order-standard_cart .btn-continue:hover {
    background-color: var(--rs-orange-hover) !important;
    border-color: var(--rs-orange-hover) !important;
}

/* ---------------------------------------------------------
   2) Primary buttons site-wide (donkerblauw -> oranje)
   --------------------------------------------------------- */
.btn-primary,
.btn-info {
    background-color: var(--rs-orange) !important;
    border-color: var(--rs-orange) !important;
}

.btn-primary:hover,
.btn-info:hover {
    background-color: var(--rs-orange-hover) !important;
    border-color: var(--rs-orange-hover) !important;
}

/* ---------------------------------------------------------
   3) Primary background elements (badges/highlights)
   --------------------------------------------------------- */
.bg-primary,
.badge-primary {
    background-color: var(--rs-orange) !important;
}

/* ---------------------------------------------------------
   4) Active/selected items (menu & lists)
   --------------------------------------------------------- */
.list-group-item.active,
.list-group-item.active:hover,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--rs-orange) !important;
    border-color: var(--rs-orange) !important;
}

/* Navbar link hover/active (accent kleur) */
.navbar-main .nav-link:hover,
.navbar-main .nav-link.active,
.navbar-main .active > .nav-link {
    color: var(--rs-orange) !important;
}

/* ---------------------------------------------------------
   5) Links (blauw -> oranje)
   --------------------------------------------------------- */
a {
    color: var(--rs-orange);
}

a:hover,
a:focus {
    color: var(--rs-orange-hover);
}

/* =========================================================
   Hoofdmenu (navbar) oranje maken
   ========================================================= */

/* Achtergrond van de bovenste balk */
.navbar-main,
.navbar-main .navbar-collapse {
    background-color: #ff7721 !important;
}

/* Menu links */
.navbar-main .nav-link {
    color: #ffffff !important;
}

/* Hover / actieve link */
.navbar-main .nav-link:hover,
.navbar-main .nav-item.active .nav-link,
.navbar-main .nav-link.active {
    color: #ffffff !important;
    background-color: #e56612 !important;
}

/* Dropdown menu */
.navbar-main .dropdown-menu {
    border-top: 3px solid #ff7721;
}

.navbar-main .dropdown-item:hover {
    background-color: #ff7721;
    color: #ffffff;
}

/* ---------------------------------------------------------
   6) Twenty-One "accent" cards (blauwe accent rand)
   --------------------------------------------------------- */
.card-accent-blue {
    border-top-color: var(--rs-orange) !important;
}

/* Optional: tiles highlight (als je die gebruikt) */
.tile .highlight {
    background-color: var(--rs-orange) !important;
}
/* Outline primary buttons (zoals "Blader door producten") */
.btn-outline-primary {
    color: #ff7721 !important;
    border-color: #ff7721 !important;
}

.btn-outline-primary:hover {
    background-color: #ff7721 !important;
    border-color: #ff7721 !important;
    color: #ffffff !important;
}