/* ============================================================
   AfriQ-Emerald - portal.css
   Full AfriQ skin for the client area / order form / cart /
   invoice / ticket pages (stock "twenty-one" Bootstrap-4 markup).
   Loaded AFTER twenty-one's CSS, on portal pages ONLY (header.tpl
   sets aqPortal). Marketing pages never load this file. We restyle
   through CSS only - no client-area templates are modified - so the
   client area matches the AfriQ marketing site without touching
   twenty-one's structure. !important wins over the stock theme.
   ============================================================ */
:root{
  --aq-em:#0e9f52;         /* emerald (primary) */
  --aq-em-d:#0b8544;       /* emerald dark (hover) */
  --aq-em-700:#096b37;
  --aq-em-bright:#21c063;
  --aq-forest:#0b3d2e;     /* deep green */
  --aq-cyan:#22d3c5;
  --aq-ink:#16202e;
  --aq-muted:#5a6675;
  --aq-line:#e4e9f0;
  --aq-surface:#f5f8fb;    /* portal canvas */
  --aq-surface-2:#eaf0f7;
  --aq-card:#ffffff;
  --aq-heading:#0b1220;
  --aq-radius:10px;
  --aq-radius-lg:16px;
  --aq-shadow-sm:0 1px 3px rgba(11,61,46,.08);
  --aq-shadow:0 6px 20px rgba(11,61,46,.10);
  --aq-shadow-lg:0 16px 40px rgba(11,61,46,.16);
  --aq-font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

/* ============================================================
   1. Canvas + typography - make the portal feel like AfriQ
   ============================================================ */
#aq-main{
  position:relative;
  background:
    radial-gradient(1200px 380px at 90% -8%, rgba(14,159,82,.06), transparent 60%),
    var(--aq-surface);
  color:var(--aq-ink);
  font-family:var(--aq-font);
}
/* African geometric wash - kente/mudcloth diamond lattice in emerald.
   Same faint-overlay technique the marketing site uses for its Ankara wash,
   so the client area/order form gets the AfriQ African feel while cards,
   tables and forms stay perfectly legible on top. */
#aq-main::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%230e9f52' stroke-width='1.5'%3E%3Cpath d='M44 5 L83 44 L44 83 L5 44 Z'/%3E%3Cpath d='M44 24 L64 44 L44 64 L24 44 Z'/%3E%3Cpath d='M0 44 L5 44 M83 44 L88 44 M44 0 L44 5 M44 83 L44 88'/%3E%3C/g%3E%3Cg fill='%230e9f52'%3E%3Ccircle cx='44' cy='44' r='2.4'/%3E%3Ccircle cx='0' cy='0' r='1.8'/%3E%3Ccircle cx='88' cy='0' r='1.8'/%3E%3Ccircle cx='0' cy='88' r='1.8'/%3E%3Ccircle cx='88' cy='88' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
  background-size:88px 88px;
}
#aq-main > *{position:relative;z-index:1;}
#aq-main .container,#aq-main .container-fluid{color:var(--aq-ink);}
#aq-main h1,#aq-main h2,#aq-main h3,#aq-main h4,#aq-main h5,#aq-main h6,
#aq-main .h1,#aq-main .h2,#aq-main .h3,#aq-main .h4,#aq-main .h5{
  color:var(--aq-heading);font-family:var(--aq-font);font-weight:700;letter-spacing:-.01em;
}
#aq-main .page-header,#aq-main .pageheader{
  border-bottom:1px solid var(--aq-line)!important;margin-bottom:1.5rem;
}
#aq-main .text-muted,#aq-main .small.text-muted{color:var(--aq-muted)!important;}
#aq-main hr{border-top-color:var(--aq-line);}

/* ---- Links ---- */
#aq-main a{color:var(--aq-em);}
#aq-main a:hover,#aq-main a:focus{color:var(--aq-forest);}

/* ============================================================
   2. Buttons
   ============================================================ */
.btn{border-radius:var(--aq-radius)!important;font-weight:600;}
.btn-primary,.btn-primary:focus,.btn-primary.focus{
  background-color:var(--aq-em)!important;border-color:var(--aq-em)!important;
  color:#fff!important;box-shadow:none!important;
}
.btn-primary:hover,.btn-primary:active,.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle{
  background-color:var(--aq-em-d)!important;border-color:var(--aq-em-d)!important;
}
.btn-outline-primary{color:var(--aq-em)!important;border-color:var(--aq-em)!important;}
.btn-outline-primary:hover{background-color:var(--aq-em)!important;border-color:var(--aq-em)!important;color:#fff!important;}
.btn-success,.btn-success:focus{background-color:var(--aq-forest)!important;border-color:var(--aq-forest)!important;}
.btn-success:hover{background-color:#09301f!important;border-color:#09301f!important;}
.btn-secondary,.btn-default{
  background-color:#fff!important;border-color:var(--aq-line)!important;color:var(--aq-ink)!important;
}
.btn-secondary:hover,.btn-default:hover{background-color:var(--aq-surface-2)!important;border-color:#d5deea!important;}
.btn-checkout,.btn-add-to-cart{background-color:var(--aq-em)!important;border-color:var(--aq-em)!important;color:#fff!important;}
.btn-checkout:hover,.btn-add-to-cart:hover{background-color:var(--aq-em-d)!important;border-color:var(--aq-em-d)!important;}

/* ============================================================
   3. Cards + panels - AfriQ surface language
   ============================================================ */
#aq-main .card,#aq-main .panel{
  background:var(--aq-card)!important;
  border:1px solid var(--aq-line)!important;
  border-radius:var(--aq-radius-lg)!important;
  box-shadow:var(--aq-shadow-sm)!important;
}
#aq-main .card-header,#aq-main .panel-heading{
  background:linear-gradient(180deg,#fbfdfc,#f4f8f6)!important;
  border-bottom:1px solid var(--aq-line)!important;
  color:var(--aq-forest)!important;font-weight:700;
  border-top-left-radius:var(--aq-radius-lg)!important;border-top-right-radius:var(--aq-radius-lg)!important;
}
#aq-main .card-header .card-title,#aq-main .panel-heading .panel-title{color:var(--aq-forest)!important;font-weight:700;}
#aq-main .card-footer,#aq-main .panel-footer{
  background:#fbfdfc!important;border-top:1px solid var(--aq-line)!important;
  border-bottom-left-radius:var(--aq-radius-lg)!important;border-bottom-right-radius:var(--aq-radius-lg)!important;
}
/* colour utilities */
.bg-primary,.primary-bg-color{background-color:var(--aq-forest)!important;}
.text-primary{color:var(--aq-em)!important;}
.badge-primary{background-color:var(--aq-em)!important;}
.border-primary{border-color:var(--aq-em)!important;}

/* ============================================================
   4. LOGIN + REGISTER - branded, CENTERED auth card
   Stock card is `mw-540` with no mx-auto, so it hugs the left of a
   1140px container. We centre it, compact it, and brand it.
   ============================================================ */
.login-form,.registration-form{padding:1.5rem 0 3rem!important;}
.login-form>.card,
.registration-form>.card{
  margin-left:auto!important;margin-right:auto!important;float:none!important;
  border:1px solid var(--aq-line)!important;
  border-radius:var(--aq-radius-lg)!important;
  box-shadow:var(--aq-shadow-lg)!important;
  overflow:hidden;position:relative;
}
/* !important: twenty-one's `.primary-content .card.mw-540` (3 classes) would
   otherwise out-specify these and force 540px. */
.login-form>.card{max-width:460px!important;}          /* login: compact */
.registration-form>.card{max-width:720px!important;}    /* register: wider (more fields) */
/* twenty-one sets .primary-content .card-body{overflow:auto} - that can clip
   focus rings / cause a stray scrollbar inside the auth card. */
.login-form .card-body,.registration-form .card-body{overflow:visible!important;}
/* emerald->cyan accent bar across the top of the auth card */
.login-form>.card::before,
.registration-form>.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:5px;z-index:2;
  background:linear-gradient(90deg,var(--aq-forest),var(--aq-em) 55%,var(--aq-cyan));
}
.login-form .card-body,.registration-form .card-body{padding-top:2.25rem!important;position:relative;}
/* AfriQ eyebrow above the heading - adds brand identity */
.login-form .card-body::before,
.registration-form .card-body::before{
  content:"AfriQ Networks";display:block;
  font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--aq-em);margin-bottom:.5rem;
}
.login-form .card-body .h3,.login-form h6.h3,
.registration-form .card-body .h3{
  color:var(--aq-forest)!important;font-size:1.55rem!important;font-weight:800!important;margin-bottom:.15rem;
}
.login-form .card-body .text-muted,.registration-form .card-body .text-muted{color:var(--aq-muted)!important;}
/* input-group icons -> emerald tiles */
.input-group-merge .input-group-text,
.input-group-prepend .input-group-text{
  background:rgba(14,159,82,.08)!important;border-color:var(--aq-line)!important;color:var(--aq-em)!important;
}
/* make the Login button full-width + prominent (stock is a tiny float-left) */
.login-form .float-left{float:none!important;width:100%;margin-top:.25rem;}
.login-form #login,
.registration-form button[type="submit"]{
  width:100%!important;padding:.75rem 1rem!important;font-size:1rem!important;font-weight:700!important;
  border-radius:var(--aq-radius)!important;
}
/* "Remember me" under the button, left aligned */
.login-form .text-right{text-align:left!important;margin-top:.75rem;}
.login-form .text-right label{color:var(--aq-muted);font-size:.9rem;margin:0;cursor:pointer;}
.btn-reveal-pw{border-color:var(--aq-line)!important;color:var(--aq-muted)!important;background:#fff!important;}
/* captcha row */
.captchaimage img{border:1px solid var(--aq-line);border-radius:8px;max-width:100%;height:auto;}
/* footer (Create account) */
.card-footer.px-md-5{text-align:center;background:#fbfdfc!important;}
.card-footer.px-md-5 a{font-weight:700!important;color:var(--aq-em)!important;}
/* the licensed 'Powered by' line - just tidy its spacing */
.login-form + p,.registration-form + p{margin-top:1.25rem;color:var(--aq-muted);font-size:.82rem;}

/* ============================================================
   5. Forms
   ============================================================ */
.form-control{border-radius:var(--aq-radius)!important;border-color:var(--aq-line);}
.form-control:focus{
  border-color:var(--aq-em)!important;box-shadow:0 0 0 .2rem rgba(14,159,82,.22)!important;
}
.form-control-label,.control-label,label{color:var(--aq-ink);}
.custom-control-input:checked~.custom-control-label::before,
.custom-checkbox .custom-control-input:checked~.custom-control-label::before,
.form-check-input:checked{
  background-color:var(--aq-em)!important;border-color:var(--aq-em)!important;
}
.custom-select:focus{border-color:var(--aq-em)!important;box-shadow:0 0 0 .2rem rgba(14,159,82,.22)!important;}

/* ============================================================
   6. Tables (invoices, products, domains, tickets lists)
   ============================================================ */
#aq-main .table{color:var(--aq-ink);}
#aq-main .table thead th,
#aq-main .table>thead>tr>th{
  background:var(--aq-forest)!important;color:#fff!important;
  border-color:var(--aq-forest)!important;font-weight:600;
  border-top:0!important;vertical-align:middle;
}
#aq-main .table thead th:first-child{border-top-left-radius:10px;}
#aq-main .table thead th:last-child{border-top-right-radius:10px;}
#aq-main .table td,#aq-main .table th{border-color:var(--aq-line)!important;}
#aq-main .table-hover tbody tr:hover{background:rgba(14,159,82,.05)!important;}
#aq-main .table-striped tbody tr:nth-of-type(odd){background:#fafcfb;}
/* datatable wrapper card look */
#aq-main .dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:var(--aq-em)!important;border-color:var(--aq-em)!important;color:#fff!important;border-radius:6px;
}

/* ============================================================
   7. Status labels / badges (Active, Paid, Suspended...)
   ============================================================ */
.label,.badge{font-weight:600;border-radius:999px;padding:.32em .7em;}
.label-success,.badge-success,
.status-active,.status-paid,.status-completed{background-color:var(--aq-em)!important;color:#fff!important;}
.label-info,.badge-info{background-color:#0284c7!important;color:#fff!important;}
.label-warning,.badge-warning,
.status-pending,.status-unpaid{background-color:#d97706!important;color:#fff!important;}
.label-danger,.badge-danger,
.status-suspended,.status-cancelled,.status-terminated,.status-overdue{background-color:#dc2626!important;color:#fff!important;}
.label-default,.badge-secondary{background-color:#64748b!important;color:#fff!important;}

/* ============================================================
   8. Client-area dashboard (clientarea.php home) + nav pills/tabs
   ============================================================ */
.nav-pills .nav-link.active,.nav-pills .show>.nav-link{background-color:var(--aq-em)!important;}
.nav-tabs .nav-link.active{border-bottom:2px solid var(--aq-em)!important;color:var(--aq-em)!important;}
.nav-tabs .nav-link:hover{border-bottom-color:rgba(14,159,82,.4)!important;}
.page-item.active .page-link{background-color:var(--aq-em)!important;border-color:var(--aq-em)!important;}
.page-link{color:var(--aq-em);}
.page-link:hover{color:var(--aq-forest);}
.list-group-item.active{background-color:var(--aq-em)!important;border-color:var(--aq-em)!important;}
/* home panels / feature tiles - lift on hover like marketing cards */
#aq-main .btn-panel,#aq-main .home-panels .panel,#aq-main .panel-feature{
  transition:transform .15s ease,box-shadow .15s ease;
}
#aq-main .btn-panel:hover,#aq-main .home-panels .panel:hover,#aq-main .panel-feature:hover{
  transform:translateY(-2px);box-shadow:var(--aq-shadow)!important;
}
/* stat / summary numbers in emerald */
#aq-main .stat-value,#aq-main .panel-feature .h1,#aq-main .display-4{color:var(--aq-forest)!important;}

/* ============================================================
   9. Sidebar (account menu, actions)
   ============================================================ */
.sidebar .list-group-item.active,
.panel-sidebar .active>a,
.sidebar-menu .active>a{background-color:var(--aq-em)!important;border-color:var(--aq-em)!important;color:#fff!important;}
.sidebar .list-group-item:hover{background:rgba(14,159,82,.06)!important;}
.panel.card.card-sidebar,.panel-sidebar{
  border:1px solid var(--aq-line)!important;border-radius:var(--aq-radius-lg)!important;overflow:hidden;
  box-shadow:var(--aq-shadow-sm)!important;
}
/* Sidebar panel header (order form: Categories / Actions / Currency).
   PREMIUM LIGHT: soft light header + forest title + emerald icon & underline.
   Kept at (1,3,0)/(1,4,0) so it still beats section 3's forest-title rule. */
#aq-main .card-sidebar > .panel-heading,
#aq-main .card-sidebar > .card-header,
#aq-main .panel-sidebar > .panel-heading,
#aq-main .panel-sidebar > .card-header{
  background:linear-gradient(180deg,#fbfdfc,#f4f8f6)!important;
  border-bottom:2px solid var(--aq-em)!important;
}
#aq-main .card-sidebar .panel-heading .panel-title,
#aq-main .panel-sidebar .panel-heading .panel-title{color:var(--aq-forest)!important;font-weight:800;}
#aq-main .card-sidebar .panel-heading .panel-title i,
#aq-main .panel-sidebar .panel-heading .panel-title i{color:var(--aq-em)!important;}

/* ============================================================
   10. Alerts
   ============================================================ */
.alert{border-radius:var(--aq-radius)!important;border-width:1px;}
.alert-primary{background-color:rgba(14,159,82,.10)!important;border-color:rgba(14,159,82,.28)!important;color:var(--aq-forest)!important;}
.alert-success{background-color:rgba(14,159,82,.10)!important;border-color:rgba(14,159,82,.28)!important;color:var(--aq-em-700)!important;}
.alert-info{background-color:rgba(2,132,199,.08)!important;border-color:rgba(2,132,199,.25)!important;color:#075985!important;}

/* ============================================================
   11. Invoices + totals
   ============================================================ */
.total-due-today,.total-due-today-padded{color:var(--aq-forest)!important;font-weight:700!important;}
.total-due-today .price,.total-due-today-padded .price{color:var(--aq-em)!important;}
.price{color:var(--aq-forest);}
.invoice-header,.invoice .invoice-title{color:var(--aq-forest)!important;}

/* ============================================================
   12. Order form / cart / domain checker (standard_cart)
   ============================================================ */
.view-cart-items-header{border-bottom:2px solid var(--aq-em)!important;}
.view-cart-tabs .nav-link.active{color:var(--aq-em)!important;border-bottom-color:var(--aq-em)!important;}
.text-success,.domain-available,.available{color:var(--aq-em)!important;}
.checkout-progress .active,.order-steps .active,.steps .active{color:var(--aq-em)!important;}
.progress-bar{background-color:var(--aq-em)!important;}
.home-domain-search,.jumbotron.domain-checker,.domain-checker-container{
  background:linear-gradient(135deg,var(--aq-forest) 0%,var(--aq-em) 100%)!important;
}
.domain-checker-bg{
  background:linear-gradient(135deg,var(--aq-forest) 0%,var(--aq-em) 100%)!important;
  border-radius:18px!important;padding:3rem 1.5rem!important;border:0!important;
}
.domain-checker-bg img,.domain-checker-bg svg,.domain-checker-bg [class*="globe"]{
  opacity:.10!important;filter:grayscale(1) brightness(3)!important;
}
.domain-checker-container{border:0!important;border-radius:14px!important;box-shadow:0 18px 50px rgba(11,61,46,.30)!important;}
.domain-checker-container textarea,.domain-checker-container input[type="text"]{border:0!important;box-shadow:none!important;font-size:1rem!important;}
.domain-checker-result-headline{border-bottom:2px solid var(--aq-em)!important;padding-bottom:.5rem!important;margin-bottom:1rem!important;}
.domain-unavailable,.domain-tld-unavailable,.domain-checker-unavailable{color:#9aa0a6!important;}
.domain-price,.domain-pricing .price{color:var(--aq-forest)!important;font-weight:700!important;}
.tld-pricing-header{background:var(--aq-forest)!important;color:#fff!important;border-radius:10px!important;padding:.6rem 0!important;}
.tld-pricing-header *{color:#fff!important;}
.domain-pricing table tr:hover,.tld-row:hover{background:rgba(14,159,82,.06)!important;}
.nav-pills .nav-link,.domain-category-tab{border-radius:999px!important;padding:.35rem .9rem!important;}

/* ============================================================
   13. Client-area menu bar (aq-canav) - renders $primaryNavbar
   ============================================================ */
.aq-canav{background:linear-gradient(90deg,var(--aq-forest),#0a4a37);box-shadow:0 6px 16px rgba(11,61,46,.14);}
.aq-canav__list{display:flex;flex-wrap:wrap;align-items:stretch;list-style:none;margin:0;padding:0;}
.aq-canav__list > li{position:relative;}
.aq-canav__list > li > a{display:flex;align-items:center;gap:.5rem;padding:.9rem 1.15rem;color:rgba(255,255,255,.88)!important;font-weight:600;font-size:.92rem;text-decoration:none;white-space:nowrap;border-bottom:3px solid transparent;transition:background .15s,border-color .15s,color .15s;}
.aq-canav__list > li > a:hover,.aq-canav__list > li.show > a{background:rgba(255,255,255,.09);color:#fff!important;border-bottom-color:var(--aq-em);}
.aq-canav__list > li.active > a,.aq-canav__list > li > a.active{color:#fff!important;background:rgba(14,159,82,.22);border-bottom-color:var(--aq-em);}
.aq-canav__list > li > a i{font-size:.9em;opacity:.85;}
.aq-canav__list > li.dropdown > a::after{content:"";display:inline-block;margin-left:.15rem;border:4px solid transparent;border-top-color:currentColor;opacity:.7;}
.aq-canav .dropdown-menu{border:0;border-radius:10px;box-shadow:0 14px 40px rgba(11,61,46,.22);padding:.4rem 0;margin-top:0;min-width:225px;}
.aq-canav .dropdown-menu .dropdown-item,.aq-canav .dropdown-menu li > a{padding:.58rem 1.1rem!important;color:var(--aq-forest)!important;display:flex!important;align-items:center;gap:.55rem;font-size:.9rem;font-weight:500;}
.aq-canav .dropdown-menu .dropdown-item:hover,.aq-canav .dropdown-menu li > a:hover{background:rgba(14,159,82,.10)!important;color:var(--aq-em)!important;}
.aq-canav .dropdown-menu i{color:var(--aq-em);width:16px;text-align:center;font-size:.9em;}
.aq-canav .dropdown-divider{margin:.3rem 0;border-color:rgba(11,61,46,.08);}
@media (max-width:768px){.aq-canav__list{overflow-x:auto;flex-wrap:nowrap;}.aq-canav__list > li > a{padding:.7rem .95rem;}}

/* ============================================================
   14. ORDER FORM / STORE (standard_cart) - PREMIUM LIGHT AfriQ skin
   White airy plan cards, emerald->cyan top accent, forest headings,
   big tabular pricing, a "Most Popular" highlight, emerald buttons.
   Real markup: .product > header/.product-desc/footer, .product-pricing
   .price, .btn-order-now, .btn-add, .cart-sidebar, .breakdown-price,
   .btn-checkout, .sub-heading>.primary-bg-color.
   ============================================================ */
:root{--aq-navy:#0b1220;--aq-navy-2:#111b30;}

/* ---- store heading + intro ---- */
#aq-main .cart h1,#aq-main .product-group h1,#aq-main .order-form h1{letter-spacing:-.02em;}

/* ---- equal-height product grid ---- */
.row-eq-height{display:flex;flex-wrap:wrap;}
.row-eq-height > [class*="col-"]{display:flex;margin-bottom:1.5rem;}

/* ---- plan card: white, airy, emerald accent (PREMIUM LIGHT) ---- */
#aq-main .product{
  display:flex;flex-direction:column;width:100%;position:relative;overflow:hidden;
  background:#fff;border:1px solid var(--aq-line)!important;
  border-radius:var(--aq-radius-lg);box-shadow:0 1px 3px rgba(11,61,46,.07);
  transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s,border-color .2s;
}
/* emerald->cyan top accent - always visible, intensifies on hover */
#aq-main .product::after{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:3;
  background:linear-gradient(90deg,var(--aq-em),var(--aq-cyan));opacity:.85;transition:opacity .2s;
}
#aq-main .product:hover{transform:translateY(-5px);box-shadow:0 20px 45px rgba(11,61,46,.15);border-color:rgba(14,159,82,.5)!important;}
#aq-main .product:hover::after{opacity:1;}
/* light header - forest plan name, no heavy band */
#aq-main .product > header{
  background:transparent;padding:1.4rem 1.4rem .3rem;border-bottom:0;position:relative;
}
#aq-main .product > header,#aq-main .product > header span[id$="-name"]{
  color:var(--aq-forest)!important;font-size:1.3rem;font-weight:800;letter-spacing:-.01em;
}
/* spec block - emerald rail */
#aq-main .product-desc{padding:.5rem 1.4rem 0;flex:1 1 auto;}
#aq-main .product-desc p{
  margin:0;font-size:.93rem;line-height:1.95;color:var(--aq-ink);
  border-left:3px solid rgba(14,159,82,.3);padding-left:.9rem;
}
#aq-main .product-desc ul{margin:.5rem 0 0;padding-left:1.1rem;}
/* footer: price + button */
#aq-main .product > footer{padding:1.15rem 1.4rem 1.4rem;margin-top:.6rem;}
#aq-main .product-pricing{margin-bottom:.9rem;color:var(--aq-muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;}
#aq-main .product-pricing .price{
  display:inline-block;font-size:1.9rem;font-weight:800;color:var(--aq-forest);
  letter-spacing:-.02em;text-transform:none;font-variant-numeric:tabular-nums;
}
/* order button - full width, emerald */
#aq-main .btn-order-now{
  display:block;width:100%;text-align:center;
  background:var(--aq-em)!important;border-color:var(--aq-em)!important;color:#fff!important;
  font-weight:700!important;padding:.72rem 1rem!important;border-radius:var(--aq-radius)!important;font-size:.98rem!important;
  box-shadow:0 6px 16px rgba(14,159,82,.26);transition:transform .15s,box-shadow .15s,background .15s;
}
#aq-main .btn-order-now:hover{background:var(--aq-em-d)!important;transform:translateY(-2px);box-shadow:0 10px 24px rgba(14,159,82,.36);}
#aq-main .btn-order-now .fa-shopping-cart{margin-right:.4rem;opacity:.9;}

/* ---- "MOST POPULAR" highlight ----
   Featured plan gets an emerald ring + corner ribbon. Targets ONE product by
   ID - change #product172 to the plan you want featured (each card carries
   id="productNN"), or delete this block for no highlight. */
#aq-main #product172{border:2px solid var(--aq-em)!important;box-shadow:0 14px 36px rgba(14,159,82,.18)!important;}
#aq-main #product172::before{
  content:"MOST POPULAR";position:absolute;top:15px;right:-36px;z-index:4;transform:rotate(45deg);
  background:var(--aq-em);color:#fff;font-size:.62rem;font-weight:800;letter-spacing:.08em;
  padding:.28rem 2.8rem;box-shadow:0 4px 10px rgba(14,159,82,.3);
}

/* ---- addon / product cards (DNS Management, ID Protection, ...) ---- */
#aq-main .btn-add{
  width:100%;background:var(--aq-em)!important;border-color:var(--aq-em)!important;color:#fff!important;
  font-weight:700!important;border-radius:0 0 var(--aq-radius) var(--aq-radius)!important;
}
#aq-main .btn-add:hover{background:var(--aq-em-d)!important;border-color:var(--aq-em-d)!important;}

/* ---- section header chips (domain config: "domain.tld", "Nameservers") ----
   Real markup: <div class="sub-heading"><span class="primary-bg-color">..</span>
   Was a dark pill with dark text - force WHITE text + a proper chip. */
#aq-main .sub-heading{border:0!important;text-align:center;margin:1.6rem 0 1rem;}
#aq-main .sub-heading .primary-bg-color{
  display:inline-block;background:var(--aq-em)!important;
  color:#fff!important;padding:.42rem 1.15rem!important;border-radius:999px!important;
  font-size:.9rem!important;font-weight:700!important;letter-spacing:.02em;border:0!important;
  box-shadow:0 4px 12px rgba(14,159,82,.22);
}

/* ---- cart view: order summary sidebar ---- */
#aq-main .cart-sidebar{
  background:var(--aq-card);border:1px solid var(--aq-line);border-radius:var(--aq-radius-lg);
  box-shadow:var(--aq-shadow);overflow:hidden;
}
#aq-main .cart-sidebar .card-header,#aq-main .cart-sidebar h2,#aq-main .cart-sidebar h3{
  background:linear-gradient(180deg,#fbfdfc,#f4f8f6);color:var(--aq-forest)!important;
  border-bottom:2px solid var(--aq-em);padding:1rem 1.25rem;margin:0;font-size:1.05rem;font-weight:800;
}
#aq-main .cart-sidebar .card-header .card-title,
#aq-main .cart-sidebar .card-header .panel-title,
#aq-main .cart-sidebar .card-header i{color:var(--aq-forest)!important;}
#aq-main .breakdown-price,#aq-main .cart-sidebar .price{color:var(--aq-forest)!important;font-weight:700;font-variant-numeric:tabular-nums;}
#aq-main .cart-total,#aq-main .total-due-today .price{color:var(--aq-em)!important;font-size:1.25rem;font-weight:800;}
/* checkout button - the money button */
#aq-main .btn-checkout{
  background:var(--aq-em)!important;border-color:var(--aq-em)!important;color:#fff!important;
  font-weight:800!important;border-radius:var(--aq-radius)!important;padding:.8rem 1rem!important;
  box-shadow:0 8px 20px rgba(14,159,82,.3);
}
#aq-main .btn-checkout:hover:not(.disabled){background:var(--aq-em-d)!important;transform:translateY(-2px);box-shadow:0 12px 28px rgba(14,159,82,.4);}
#aq-main .btn-checkout.disabled{opacity:.55;}
#aq-main .btn-continue-shopping{color:var(--aq-em)!important;font-weight:600;}
#aq-main .view-cart-items-header{border-bottom:2px solid var(--aq-em)!important;}

/* ---- order-form sidebar panels (Categories / Actions / Currency) ---- */
#aq-main .panel-sidebar .list-group-item.active,
#aq-main .card-sidebar .list-group-item.active{
  background:var(--aq-em)!important;border-color:var(--aq-em)!important;color:#fff!important;font-weight:600;
}
#aq-main .panel-sidebar .list-group-item-action:hover,
#aq-main .card-sidebar .list-group-item-action:hover{background:rgba(14,159,82,.07)!important;color:var(--aq-forest)!important;}
#aq-main .panel-sidebar .list-group-item i,#aq-main .card-sidebar .list-group-item i{color:var(--aq-em);}
#aq-main .panel-sidebar .list-group-item.active i,#aq-main .card-sidebar .list-group-item.active i{color:#fff;}

@media (max-width:768px){
  #aq-main .row-eq-height > [class*="col-"]{margin-bottom:1rem;}
  #aq-main .product-pricing .price{font-size:1.5rem;}
}

/* ============================================================
   15. INVOICE VIEW (viewinvoice.tpl) - AfriQ invoice sheet
   NB: invoice tables use <thead><td> (NOT <th>), so the section-6
   rule misses them - target `thead td` explicitly here. The teal
   Ledger bar is `.card-title.bg-info` and the pay panel header is
   `.card-header.bg-success` (both Bootstrap !important).
   ============================================================ */
/* clean white "paper" invoice sheet floating on the African wash */
#aq-main .invoice-container{
  background:#fff;border:1px solid var(--aq-line);border-radius:var(--aq-radius-lg);
  box-shadow:var(--aq-shadow);padding:1.9rem 1.6rem 1.4rem;margin-top:1rem;
}
/* forest headings in the header block */
#aq-main .invoice-header strong,#aq-main .invoice-col strong,#aq-main .invoice-col b,
#aq-main .invoice-header h1,#aq-main .invoice-header h2,#aq-main .invoice-header h3{color:var(--aq-forest);}
/* inner cards go flat so it reads as ONE sheet, not nested boxes */
#aq-main .invoice-container .card{border:0!important;box-shadow:none!important;background:transparent!important;}
/* "Invoice Line Items" header -> soft light bar + emerald underline */
#aq-main .invoice-container .card-header{
  background:linear-gradient(180deg,#fbfdfc,#f4f8f6)!important;border-bottom:2px solid var(--aq-em)!important;border-radius:8px 8px 0 0;
}
#aq-main .invoice-container .card-header .card-title,#aq-main .invoice-container .card-header h3{color:var(--aq-forest)!important;}
/* GREEN pay/amount card header (bg-success) -> AfriQ forest */
#aq-main .card-header.bg-success{
  background:linear-gradient(135deg,var(--aq-forest),#0a4a37)!important;color:#fff!important;border-bottom:2px solid var(--aq-em)!important;
}
/* TEAL "Ledger" bar (bg-info) -> AfriQ forest */
#aq-main .card-title.bg-info{
  background:linear-gradient(135deg,var(--aq-forest),#0a4a37)!important;color:#fff!important;
  letter-spacing:.01em;padding:.55rem .9rem!important;border-radius:8px 8px 0 0!important;
}
/* invoice + ledger table heads (thead uses <td>!) -> forest, white text */
#aq-main .invoice-container .table thead td,
#aq-main .transactions-container .table thead td{
  background:var(--aq-forest)!important;color:#fff!important;border-color:var(--aq-forest)!important;
  font-weight:600!important;border-top:0!important;padding:.6rem .75rem;
}
#aq-main .invoice-container .table thead td strong,
#aq-main .transactions-container .table thead td strong{color:#fff!important;}
#aq-main .invoice-container .table td,#aq-main .transactions-container .table td{border-color:var(--aq-line)!important;}
#aq-main .invoice-container .table tbody tr:hover{background:rgba(14,159,82,.04)!important;}
/* totals: Sub Total / Total / Balance */
#aq-main .total-row{background:#fbfdfc!important;}
#aq-main .total-row strong{color:var(--aq-forest)!important;}
#aq-main .total-row.font-weight-bold{color:var(--aq-em)!important;font-weight:800!important;}
/* status badge */
#aq-main .invoice-status .badge,#aq-main .invoice-status .label{border-radius:999px;padding:.4em .95em;font-weight:700;}
/* pay / print / download buttons -> emerald */
#aq-main .payment-btn-container .btn,#aq-main .invoice-container .btn-success{
  background:var(--aq-em)!important;border-color:var(--aq-em)!important;color:#fff!important;font-weight:700;border-radius:var(--aq-radius)!important;
}
#aq-main .payment-btn-container .btn:hover,#aq-main .invoice-container .btn-success:hover{background:var(--aq-em-d)!important;}
/* print view: drop the sheet chrome on paper */
@media print{#aq-main .invoice-container{border:0;box-shadow:none;padding:0;}}