/* Supreme Servers: WHMCS client area and cart (child of Twenty-One).
   Colors and fonts match www.supremeservers.com. Only this file and the logo change; every page layout stays Twenty-One. */
@font-face{font-family:"Open Sauce Sans";src:url(../fonts/open-sauce-sans-400.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Open Sauce Sans";src:url(../fonts/open-sauce-sans-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Open Sauce Sans";src:url(../fonts/open-sauce-sans-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Open Sauce Sans";src:url(../fonts/open-sauce-sans-800.woff2) format("woff2");font-weight:800;font-display:swap}
:root{--ss-navy:#042260;--ss-red:#AB0B1B;--ss-red-dk:#8E0916;--ss-sky:#0099CC;--ss-deep:#007DA7;--ss-night:#02123A;--ss-ink:#212529;--ss-slate:#4A5568;--ss-mist:#F2F2F2}

/* Type */
body{font-family:"Open Sauce Sans","Open Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--ss-ink);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.h1,.h2,.h3,.h4{font-family:"Open Sauce Sans","Open Sans",sans-serif;color:var(--ss-navy);font-weight:800;letter-spacing:-.01em}
a{color:var(--ss-deep)}a:hover{color:var(--ss-navy)}
:focus-visible{outline:3px solid var(--ss-sky);outline-offset:2px}

/* Header: light top bar, white logo bar, navy menu (as on the website) */
header.header .topbar{background:var(--ss-mist);color:var(--ss-slate)}
header.header .topbar .btn,header.header .topbar a{color:var(--ss-ink)}
header.header .topbar .btn:hover{color:var(--ss-navy)}
header.header .navbar-light{background:#fff;border-bottom:1px solid #e6e9ef}
/* New logo: shown automatically with this theme, replacing the old logo WHMCS has in /assets/img/logo.png (that file is left untouched, so switching back to Six shows the old one). */
header.header .logo-img{content:url(../img/logo.png);height:42px;width:auto;max-width:240px}
header.header .main-navbar-wrapper{background:var(--ss-navy)}
header.header .main-navbar-wrapper .navbar-nav .nav-link{color:#fff;font-weight:600}
header.header .main-navbar-wrapper .navbar-nav .nav-link:hover,header.header .main-navbar-wrapper .navbar-nav .active>.nav-link{color:var(--ss-sky)}
header.header .main-navbar-wrapper .dropdown-menu{border:0;border-radius:8px;box-shadow:0 12px 30px rgba(4,34,96,.18)}
header.header .main-navbar-wrapper .dropdown-item:hover{background:var(--ss-mist);color:var(--ss-navy)}
header.header .cart-btn .badge-info,.badge-info{background:var(--ss-red)}
.master-breadcrumb{background:var(--ss-mist)}
.master-breadcrumb .breadcrumb a{color:var(--ss-navy)}

/* Buttons: navy primary, red for the main action (order, checkout, pay) */
.btn{border-radius:8px;font-weight:600}
.btn-primary{background:var(--ss-navy);border-color:var(--ss-navy)}
.btn-primary:hover,.btn-primary:focus,.btn-primary:not(:disabled):not(.disabled):active{background:var(--ss-night);border-color:var(--ss-night)}
.btn-success,.btn-order-now,#order-standard_cart .btn-checkout,#btnCompleteOrder,.btn-checkout{background:var(--ss-red);border-color:var(--ss-red);color:#fff}
.btn-success:hover,.btn-success:focus,#order-standard_cart .btn-checkout:hover,#btnCompleteOrder:hover{background:var(--ss-red-dk);border-color:var(--ss-red-dk);color:#fff}
.btn-default,.btn-outline-primary{border-color:var(--ss-navy);color:var(--ss-navy);background:#fff}
.btn-default:hover,.btn-outline-primary:hover{background:var(--ss-navy);color:#fff}
.form-control:focus{border-color:var(--ss-sky);box-shadow:0 0 0 .2rem rgba(0,153,204,.2)}
.custom-control-input:checked~.custom-control-label::before{background:var(--ss-navy);border-color:var(--ss-navy)}

/* Cards and sidebar */
.card{border-radius:10px;border-color:#e3e7ee}
.card-sidebar .card-header{background:#fff}
.card-sidebar .card-title{color:var(--ss-navy);font-weight:700}
.list-group-item.active,.card-sidebar .list-group-item.active{background:var(--ss-navy);border-color:var(--ss-navy)}
.tiles .tile .stat{color:var(--ss-navy)}
.tiles .tile .highlight.bg-color-blue{background:var(--ss-navy)!important}
.tiles .tile .highlight.bg-color-green{background:var(--ss-sky)!important}
.tiles .tile .highlight.bg-color-red{background:var(--ss-red)!important}
.nav-tabs .nav-link.active{color:var(--ss-navy);font-weight:600}
.page-item.active .page-link{background:var(--ss-navy);border-color:var(--ss-navy)}
.label-success,.status-active{background:#2f7a4f}

/* Cart and checkout (standard_cart order form) */
#order-standard_cart .header-lined h1{color:var(--ss-navy)}
#order-standard_cart .order-summary{background:var(--ss-navy);border-bottom-color:var(--ss-navy);border-radius:10px}
#order-standard_cart .order-summary h2{font-weight:700}
#order-standard_cart .summary-container{background:#f6f8fb}
#order-standard_cart .total-due-today .amt{color:var(--ss-navy);font-weight:800}
#order-standard_cart .product-info{background:#f6f8fb;border-color:#e3e7ee;border-radius:8px}
#order-standard_cart .product-info .product-title{color:var(--ss-navy);font-weight:700}
#order-standard_cart .sub-heading span,#order-standard_cart .sub-heading-borderless span{color:var(--ss-navy);font-weight:700}
#order-standard_cart .field-container,#order-standard_cart .view-cart-items-header{border-radius:8px}
#order-standard_cart .view-cart-items-header{background:var(--ss-navy)}
#order-standard_cart .products .product header{background:var(--ss-navy);color:#fff}
#order-standard_cart .products .product .price{color:var(--ss-navy)}
#order-standard_cart .panel-addon-selected{border-color:var(--ss-sky)}
#order-standard_cart .panel-addon-selected .panel-add{background:var(--ss-sky)}

/* Footer: deep navy like the website */
footer.footer{background:var(--ss-night);color:rgba(255,255,255,.75)}
footer.footer a,footer.footer .nav-link{color:#fff}
footer.footer a:hover{color:var(--ss-sky)}
footer.footer .btn{color:#fff;border-color:rgba(255,255,255,.4)}
footer.footer .copyright{color:rgba(255,255,255,.6)}

/* "Supreme Comparison" order form (the store's existing custom plan comparison page, child of standard_cart).
   Its own style sheet uses pink/purple; these rules bring it to the brand colors. Layout unchanged. */
div#order-supreme_comparison .product-group-headline{color:var(--ss-navy);font-weight:800}
div#order-supreme_comparison .product-group-tagline{color:var(--ss-slate)}
div#order-supreme_comparison .featured-product-background{background:var(--ss-navy)!important}
div#order-supreme_comparison .featured-product{color:#fff}
div#order-supreme_comparison .price-area{background-color:#eef2f8;color:var(--ss-ink)}
div#order-supreme_comparison .price{color:var(--ss-navy);font-weight:800}
div#order-supreme_comparison .order-now{background:var(--ss-red)!important;border-radius:8px}
div#order-supreme_comparison .order-now:hover{background:var(--ss-red-dk)!important}
div#order-supreme_comparison .price-area a,div#order-supreme_comparison .order-now a{color:#fff}
div#order-supreme_comparison .includes-features .head-area{background:var(--ss-navy)!important;border-radius:8px 8px 0 0}
div#order-supreme_comparison .head-area span{color:#fff;font-weight:700}
div#order-supreme_comparison .price-table{border-color:#e3e7ee}

/* ===== Update 2 (Nov 3): colour fixes after the first install =====
   The order form style sheets load after this file, so cart rules start with "body" to win. */

/* Menu bar: white links on navy (this WHMCS version's menu links have no .nav-link class) */
header.header .main-navbar-wrapper .navbar-nav>li>a,
header.header .main-navbar-wrapper .navbar-nav>li>a.dropdown-toggle,
header.header .main-navbar-wrapper .navbar-nav .nav-link{color:#fff!important;font-weight:600;opacity:1}
header.header .main-navbar-wrapper .navbar-nav>li>a:hover,
header.header .main-navbar-wrapper .navbar-nav>li.active>a,
header.header .main-navbar-wrapper .navbar-nav>li.show>a{color:#7FD3EE!important}
header.header .main-navbar-wrapper .navbar-toggler{color:#fff;border-color:rgba(255,255,255,.4)}
header.header .main-navbar-wrapper .dropdown-menu a{color:var(--ss-ink)!important;font-weight:400}
header.header .main-navbar-wrapper .dropdown-menu a:hover{background:var(--ss-mist);color:var(--ss-navy)!important}

/* Breadcrumb: one light band, no second grey box inside it */
.master-breadcrumb{background:#fff;border-bottom:1px solid #e6e9ef}
.master-breadcrumb .breadcrumb{background:transparent;padding-left:0;padding-right:0;margin:0}
.master-breadcrumb .breadcrumb-item,.master-breadcrumb .breadcrumb-item.active{color:var(--ss-slate)}
.master-breadcrumb .breadcrumb-item a{color:var(--ss-navy)}

/* Page background: same light grey as the website sections */
body.primary-bg-color,body{background-color:#F5F7FA}
section#main-body{background:transparent}

/* Store product lists (Modern and Boxes order forms): website font and colours */
body #order-modern,body #order-modern .product .name,body #order-modern .product .pricing,body #order-modern .product .description{font-family:"Open Sauce Sans","Open Sans",system-ui,sans-serif}
body #order-modern .product{border:1px solid #e3e7ee;border-radius:12px;background:#fff;box-shadow:0 8px 24px -16px rgba(4,34,96,.35)}
body #order-modern .product:hover{border-color:var(--ss-sky)}
body #order-modern .product .name{color:var(--ss-navy);font-weight:800}
body #order-modern .product .pricing{color:var(--ss-slate)}
body #order-modern .product span.pricing{color:var(--ss-navy);font-weight:800}
body #order-modern .product .description{color:var(--ss-ink)}
body #order-boxes .fields-container{border-top:4px solid var(--ss-navy);border-bottom:1px solid #e3e7ee;border-radius:10px;overflow:hidden;background:#fff}
body #order-boxes .fields-container .field-row:nth-child(odd){background:#fff;color:var(--ss-ink)}
body #order-boxes .fields-container .field-row:nth-child(even){background:#F5F7FA;color:var(--ss-ink)}
body #order-boxes .fields-container .field-row strong{color:var(--ss-navy)}
body #order-modern .btn-success,body #order-boxes .btn-primary{background:var(--ss-red);border-color:var(--ss-red);color:#fff}
body #order-modern .btn-success:hover,body #order-boxes .btn-primary:hover{background:var(--ss-red-dk);border-color:var(--ss-red-dk)}

/* Cart and checkout (standard_cart) */
body #order-standard_cart .order-summary{background:var(--ss-navy);border-bottom-color:var(--ss-navy);border-radius:10px 10px 0 0}
body #order-standard_cart .order-summary h2{color:#fff}
body #order-standard_cart .summary-container{background:#fff;border:1px solid #e3e7ee;border-top:0}
body #order-standard_cart .product-info{background:#fff;border:1px solid #e3e7ee;border-radius:10px}
body #order-standard_cart .product-info .product-title{color:var(--ss-navy);font-weight:800}
body #order-standard_cart .sub-heading span,body #order-standard_cart .sub-heading-borderless span{color:var(--ss-navy);font-weight:700;background:#F5F7FA}
body #order-standard_cart .view-cart-items-header{background:var(--ss-navy);color:#fff}
body #order-standard_cart .total-due-today .amt{color:var(--ss-navy);font-weight:800}
body #order-standard_cart #btnCompleteProductConfig,body #order-standard_cart #checkout,body #order-standard_cart .btn-checkout,body #order-standard_cart #btnCompleteOrder{background:var(--ss-red);border-color:var(--ss-red);color:#fff}
body #order-standard_cart #btnCompleteProductConfig:hover,body #order-standard_cart #checkout:hover,body #order-standard_cart .btn-checkout:hover,body #order-standard_cart #btnCompleteOrder:hover{background:var(--ss-red-dk);border-color:var(--ss-red-dk)}
body .card-sidebar .card-header{background:#fff;border-bottom:1px solid #e3e7ee}
body .card-sidebar .card-title,body .card-sidebar .card-title i{color:var(--ss-navy)}

/* Count badges (Knowledgebase etc.) navy; only the cart count stays red */
body .badge-info{background:var(--ss-navy)}
body header.header .cart-btn .badge-info,body header.header .cart-btn .badge{background:var(--ss-red)}