/* =====================================================================
   ONEEM — Immersive WHMCS Client Theme
   Parallax • 3D • Monochrome (Black & White) Dark/Light experience
   Loaded AFTER theme.min.css so it can override the Twenty-One base.
   Colour + typography are driven by CSS custom properties so the
   Admin "Style Manager" can override them via oneem-generated.css.
   ===================================================================== */

/* ---------- 1. Design tokens ---------------------------------------- */
:root {
    /* Accent (admin-overridable) */
    --oi-accent:        #ffffff;
    --oi-accent-2:      #b8b8b8;
    --oi-accent-rgb:    255, 255, 255;
    --oi-radius:        18px;
    --oi-radius-sm:     10px;
    --oi-ease:          cubic-bezier(.22, 1, .36, 1);
    --oi-font:          "Inter", "Segoe UI", system-ui, sans-serif;
    --oi-font-display:  "Space Grotesk", "Inter", "Segoe UI", system-ui, sans-serif;
    --oi-shadow:        0 24px 60px -20px rgba(0,0,0,.55);
    --oi-header-h:      76px;
}

/* DARK (default) — near-black canvas, white ink */
:root,
:root[data-theme="dark"] {
    --oi-bg:        #060608;
    --oi-bg-2:      #0d0d11;
    --oi-surface:   rgba(255,255,255,.045);
    --oi-surface-2: rgba(255,255,255,.08);
    --oi-border:    rgba(255,255,255,.10);
    --oi-ink:       #f5f6f8;
    --oi-ink-soft:  rgba(245,246,248,.66);
    --oi-ink-faint: rgba(245,246,248,.40);
    --oi-glass:     rgba(12,12,16,.62);
    --oi-grid:      rgba(255,255,255,.05);
    color-scheme:   dark;
}

/* LIGHT — white canvas, black ink */
:root[data-theme="light"] {
    --oi-accent:    #0a0a0a;
    --oi-accent-2:  #4a4a4a;
    --oi-accent-rgb: 10,10,10;
    --oi-bg:        #f4f4f6;
    --oi-bg-2:      #ffffff;
    --oi-surface:   rgba(10,10,12,.035);
    --oi-surface-2: rgba(10,10,12,.06);
    --oi-border:    rgba(10,10,12,.10);
    --oi-ink:       #0b0b0d;
    --oi-ink-soft:  rgba(11,11,13,.66);
    --oi-ink-faint: rgba(11,11,13,.42);
    --oi-glass:     rgba(255,255,255,.72);
    --oi-grid:      rgba(10,10,12,.05);
    --oi-shadow:    0 24px 60px -22px rgba(10,10,20,.22);
    color-scheme:   light;
}

/* ---------- 2. Base canvas ----------------------------------------- */
body.primary-bg-color,
body {
    background: var(--oi-bg) !important;
    color: var(--oi-ink);
    font-family: var(--oi-font) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* clip (not hidden) prevents full-bleed h-scroll WITHOUT breaking position:sticky */
    overflow-x: clip;
    transition: background .5s var(--oi-ease), color .5s var(--oi-ease);
}
/* Force the premium font over Twenty-One's Open Sans everywhere */
body, p, a, span, div, li, td, th, label, input, select, textarea, button,
.btn, .nav-link, .form-control, .card, .panel, .breadcrumb {
    font-family: var(--oi-font);
}
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .oi-hero h1, .oi-section__head h2,
.oi-pagehead__title, .card-title, .panel-title, legend, .navbar-brand {
    font-family: var(--oi-font-display) !important;
    letter-spacing: -.02em;
}

/* animated aurora / grid backdrop fixed behind everything */
.oi-backdrop {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(60vw 60vw at 15% -10%, rgba(var(--oi-accent-rgb),.10), transparent 60%),
        radial-gradient(50vw 50vw at 110% 20%, rgba(var(--oi-accent-rgb),.06), transparent 55%);
    overflow: hidden;
}
.oi-backdrop::before {
    content: ""; position: absolute; inset: -2px;
    background-image:
        linear-gradient(var(--oi-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--oi-grid) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
    animation: oi-grid-drift 24s linear infinite;
}
@keyframes oi-grid-drift { to { transform: translateY(46px); } }

.oi-orb {
    position: fixed; border-radius: 50%; z-index: 0; pointer-events: none;
    filter: blur(60px); opacity: .5; mix-blend-mode: screen;
    background: radial-gradient(circle at 30% 30%, rgba(var(--oi-accent-rgb),.5), transparent 70%);
    animation: oi-float 18s ease-in-out infinite;
}
:root[data-theme="light"] .oi-orb { mix-blend-mode: multiply; opacity: .12; }
.oi-orb.o1 { width: 420px; height: 420px; top: -120px; left: -80px; }
.oi-orb.o2 { width: 320px; height: 320px; top: 30%; right: -100px; animation-delay: -6s; }
@keyframes oi-float {
    0%,100% { transform: translate3d(0,0,0) scale(1); }
    50%     { transform: translate3d(30px,-40px,0) scale(1.08); }
}
/* perf: blurred orbs are GPU-heavy — skip on small screens */
@media (max-width: 820px) {
    .oi-orb { display: none; }
    .oi-backdrop::before { animation: none; }
}
/* perf: below-the-fold custom sections render lazily */
.oi-custom-section { content-visibility: auto; contain-intrinsic-size: auto 480px; }

/* keep real content above the backdrop */
#header, #main-body, .page-header, section, .footer, .oi-page { position: relative; z-index: 1; }

/* ---------- 2b. Full-bleed: escape Twenty-One's #main-body .container
   The homepage sections are rendered inside a max-width container.
   These rules let the immersive sections span the full viewport width
   while their inner .container keeps the content aligned. -------------- */
.oi-hero,
.oi-section {
    left: 50%;
    right: 50%;
    width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* ---------- 3. Header / nav glassmorphism -------------------------- */
.header, #header {
    position: sticky; top: 0; z-index: 1000;
    background: var(--oi-glass) !important;
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
    border-bottom: 1px solid var(--oi-border);
    box-shadow: none;
    transition: background .4s var(--oi-ease), border-color .4s;
}
.header.oi-shrink { box-shadow: var(--oi-shadow); }
.navbar, .navbar-primary { background: transparent !important; }
.navbar .nav-link, .navbar-nav .nav-link { color: var(--oi-ink-soft) !important; position: relative; }
.navbar .nav-link:hover, .navbar-nav .nav-link:hover { color: var(--oi-ink) !important; }
.navbar-nav .nav-link::after {
    content: ""; position: absolute; left: .9rem; right: .9rem; bottom: 6px; height: 2px;
    background: var(--oi-accent); border-radius: 2px;
    transform: scaleX(0); transform-origin: left; transition: transform .35s var(--oi-ease);
}
.navbar-nav .nav-link:hover::after { transform: scaleX(1); }

/* ---- 3b. Premium header polish ----------------------------------- */
.header { padding: .2rem 0; }
.header .navbar { padding-top: .6rem; padding-bottom: .6rem; }
.navbar-brand { font-family: var(--oi-font-display); font-weight: 800; font-size: 1.3rem; color: var(--oi-ink) !important; letter-spacing: -.02em; }
.navbar-brand img { max-height: 42px; width: auto; }
.header .topbar { background: transparent !important; border-bottom: 1px solid var(--oi-border); }
.header .topbar .btn, .header .btn-active-client { color: var(--oi-ink-soft) !important; }
/* nav items as subtle pills */
.navbar-nav .nav-item > .nav-link { border-radius: 100px; padding: .5rem 1rem; transition: background .25s, color .25s; }
.navbar-nav .nav-item > .nav-link:hover { background: var(--oi-surface); }
.navbar-nav .nav-item.active > .nav-link, .navbar-nav .nav-link.active { background: var(--oi-surface-2); color: var(--oi-ink) !important; }
/* account / secondary dropdown */
.navbar .dropdown-menu { margin-top: .5rem; padding: .5rem; }
/* header search box */
.header .search input, .header .navbar-search input, .header input[type="search"] {
    background: var(--oi-surface) !important; border: 1px solid var(--oi-border) !important;
    border-radius: 100px !important; color: var(--oi-ink) !important;
}
.header .search input::placeholder { color: var(--oi-ink-faint); }
/* mobile toggler */
.navbar-toggler { border: 1px solid var(--oi-border); border-radius: 10px; color: var(--oi-ink); }
.navbar-toggler-icon { filter: var(--oi-toggler-filter, none); }
/* active-client banner (when logged in) */
.active-client .input-group-text, .btn-active-client { background: var(--oi-surface) !important; border-color: var(--oi-border) !important; }

/* ---- 3c. Premium single-row navbar ------------------------------- */
.oi-navbar { padding: .55rem 0; }
.oi-navbar .navbar-brand { display: flex; align-items: center; margin-right: 2rem; }
.oi-navbar .navbar-brand img.logo-img { max-height: 40px; width: auto; }
.oi-navbar #nav { gap: .1rem; }
.oi-navbar .navbar-nav .nav-link { font-weight: 600; font-size: .95rem; }
/* right utility cluster */
.oi-nav-utils { gap: .1rem; }
.oi-nav-utils .nav-link { width: 42px; height: 42px; display: grid !important; place-items: center; border-radius: 50%; color: var(--oi-ink-soft) !important; transition: background .2s, color .2s; padding: 0 !important; }
.oi-nav-utils .nav-link:hover { background: var(--oi-surface); color: var(--oi-ink) !important; }
.oi-nav-utils .cart-btn { position: relative; }
.oi-nav-utils .cart-btn .badge { position: absolute; top: 2px; right: 2px; background: var(--oi-accent) !important; color: var(--oi-bg) !important; font-size: .62rem; padding: .2em .4em; border-radius: 100px; }
.oi-burger { font-size: 1.1rem; }
/* small button variant */
.oi-btn--sm { padding: .5rem 1.1rem !important; font-size: .88rem !important; }
/* account (secondary) nav on the right */
.oi-nav-account .nav-link { font-weight: 600; }
.oi-nav-account .dropdown-menu { right: 0; left: auto; }
/* expandable search bar */
.oi-searchbar { background: var(--oi-surface); border: 1px solid var(--oi-border); border-radius: 100px; padding: .3rem .3rem .3rem 1.2rem; }
.oi-searchbar .form-control { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--oi-ink) !important; }
.oi-searchbar .form-control::placeholder { color: var(--oi-ink-faint); }
.oi-searchbar .oi-btn { border-radius: 100px; padding: .5rem .9rem; }
/* mobile: stack nicely */
@media (max-width: 1199.98px) {
    .oi-navbar #mainNavbar { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--oi-border); }
    .oi-navbar .navbar-nav .nav-link { padding: .6rem .2rem; }
    .oi-nav-account { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--oi-border); }
}

/* ---------- 4. Theme toggle (floating) ----------------------------- */
.oi-theme-toggle {
    position: fixed; right: 22px; bottom: 22px; z-index: 1050;
    width: 54px; height: 54px; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    color: var(--oi-ink); font-size: 20px;
    background: var(--oi-glass); border: 1px solid var(--oi-border);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: var(--oi-shadow);
    transition: transform .5s var(--oi-ease), background .4s;
}
.oi-theme-toggle:hover { transform: translateY(-3px) rotate(-18deg); }
.oi-theme-toggle .fa-sun  { display: none; }
:root[data-theme="light"] .oi-theme-toggle .fa-sun  { display: block; }
:root[data-theme="light"] .oi-theme-toggle .fa-moon { display: none; }

/* ---------- 5. Hero (parallax) ------------------------------------- */
.oi-hero {
    position: relative; min-height: 78vh; display: flex; align-items: center;
    padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem);
    perspective: 1200px; overflow: hidden;
}
.oi-hero__inner { position: relative; z-index: 2; }
.oi-eyebrow {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .4rem .9rem; border-radius: 100px; font-size: .74rem;
    letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
    color: var(--oi-ink-soft); background: var(--oi-surface); border: 1px solid var(--oi-border);
}
.oi-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--oi-accent);
    box-shadow: 0 0 0 0 rgba(var(--oi-accent-rgb),.6); animation: oi-pulse 2.4s infinite; }
@keyframes oi-pulse { 70%{ box-shadow:0 0 0 10px rgba(var(--oi-accent-rgb),0);} 100%{box-shadow:0 0 0 0 rgba(var(--oi-accent-rgb),0);} }

.oi-hero h1 {
    font-family: var(--oi-font-display); font-weight: 800; line-height: 1.02;
    font-size: clamp(2.6rem, 6.4vw, 5.4rem); letter-spacing: -.03em; margin: 1.2rem 0;
    background: linear-gradient(180deg, var(--oi-ink) 30%, var(--oi-ink-faint));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.oi-hero p.lead { font-size: clamp(1.02rem,1.6vw,1.28rem); color: var(--oi-ink-soft); max-width: 40ch; }

/* floating 3D glass panels in the hero */
.oi-hero__stage { position: relative; height: 100%; transform-style: preserve-3d; }
.oi-card3d {
    position: relative; border-radius: var(--oi-radius); padding: 1.4rem;
    background: linear-gradient(160deg, var(--oi-surface-2), var(--oi-surface));
    border: 1px solid var(--oi-border); box-shadow: var(--oi-shadow);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transform-style: preserve-3d; will-change: transform;
}
.oi-card3d .fa, .oi-card3d .fas, .oi-card3d .far { transform: translateZ(40px); }
.oi-float-el { animation: oi-float 8s ease-in-out infinite; }

/* ---------- 6. Buttons --------------------------------------------- */
.btn.oi-btn, a.oi-btn {
    --_bg: var(--oi-accent); --_fg: var(--oi-bg);
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .85rem 1.6rem; border-radius: 100px; font-weight: 700; border: 0;
    color: var(--_fg); background: var(--_bg); position: relative; overflow: hidden;
    transition: transform .4s var(--oi-ease), box-shadow .4s;
    box-shadow: 0 10px 30px -10px rgba(var(--oi-accent-rgb),.5);
}
.btn.oi-btn:hover { transform: translateY(-3px); color: var(--_fg); }
.btn.oi-btn::after {
    content:""; position:absolute; inset:0; background: linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35),transparent 70%);
    transform: translateX(-120%); transition: transform .7s var(--oi-ease);
}
.btn.oi-btn:hover::after { transform: translateX(120%); }
.btn.oi-btn--ghost { background: transparent; color: var(--oi-ink); border: 1px solid var(--oi-border); box-shadow:none; }
.btn.oi-btn--ghost:hover { background: var(--oi-surface); color: var(--oi-ink); }

/* ---------- 7. Sections + reveal-on-scroll ------------------------- */
.oi-section { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.oi-section__head { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.oi-section__head h2 {
    font-family: var(--oi-font-display); font-weight: 800; letter-spacing: -.02em;
    font-size: clamp(1.9rem, 3.6vw, 3rem); color: var(--oi-ink);
}
.oi-section__head p { color: var(--oi-ink-soft); font-size: 1.08rem; }

[data-oi-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--oi-ease), transform .8s var(--oi-ease); }
[data-oi-reveal].is-in { opacity: 1; transform: none; }
[data-oi-reveal][data-delay="1"]{ transition-delay:.08s } [data-oi-reveal][data-delay="2"]{ transition-delay:.16s }
[data-oi-reveal][data-delay="3"]{ transition-delay:.24s } [data-oi-reveal][data-delay="4"]{ transition-delay:.32s }

/* ---------- 8. Feature / product cards (tilt) ---------------------- */
.oi-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); }
.oi-tile {
    position: relative; padding: 1.8rem; border-radius: var(--oi-radius);
    background: var(--oi-surface); border: 1px solid var(--oi-border);
    transform-style: preserve-3d; transition: transform .3s var(--oi-ease), border-color .3s, background .3s;
    overflow: hidden;
}
.oi-tile::before {
    content:""; position:absolute; inset:0; opacity:0; transition:opacity .4s;
    background: radial-gradient(400px circle at var(--mx,50%) var(--my,50%), rgba(var(--oi-accent-rgb),.10), transparent 45%);
}
.oi-tile:hover { border-color: rgba(var(--oi-accent-rgb),.35); background: var(--oi-surface-2); }
.oi-tile:hover::before { opacity: 1; }
.oi-tile__icon {
    width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
    font-size: 22px; color: var(--oi-accent); background: var(--oi-surface-2);
    border: 1px solid var(--oi-border); margin-bottom: 1.1rem; transform: translateZ(30px);
}
.oi-tile h3 { font-size: 1.2rem; font-weight: 700; color: var(--oi-ink); transform: translateZ(20px); }
.oi-tile p  { color: var(--oi-ink-soft); margin: 0; transform: translateZ(12px); }

/* ---------- 9. Stat counters --------------------------------------- */
.oi-stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 1rem; }
.oi-stat { text-align: center; padding: 1.4rem; border-radius: var(--oi-radius);
    background: var(--oi-surface); border: 1px solid var(--oi-border); }
.oi-stat .num { font-size: clamp(2rem,4vw,3rem); font-weight: 800; color: var(--oi-ink); letter-spacing: -.02em; }
.oi-stat .lbl { color: var(--oi-ink-soft); text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; }

/* ---------- 10. Domain search bar ---------------------------------- */
.oi-domain { max-width: 640px; margin: 2rem auto 0; }
.oi-domain .input-group { background: var(--oi-surface); border: 1px solid var(--oi-border);
    border-radius: 100px; padding: .35rem .35rem .35rem 1.3rem; box-shadow: var(--oi-shadow); }
.oi-domain input.form-control { background: transparent!important; border:0!important; color: var(--oi-ink)!important; box-shadow:none!important; }
.oi-domain input.form-control::placeholder { color: var(--oi-ink-faint); }

/* ---------- 11. Cards / panels used across client area ------------- */
.card, .panel, .well {
    background: var(--oi-surface) !important; border: 1px solid var(--oi-border) !important;
    border-radius: var(--oi-radius) !important; color: var(--oi-ink);
}
.card-header, .panel-heading { background: transparent !important; border-color: var(--oi-border) !important; color: var(--oi-ink); }
a { color: var(--oi-accent); }
:root[data-theme="dark"] a { color: #dfe3ea; }
.text-muted, .text-secondary { color: var(--oi-ink-soft) !important; }
hr { border-color: var(--oi-border); }
.table { color: var(--oi-ink); }
.table td, .table th { border-color: var(--oi-border) !important; }

/* ---------- 11b. Safety net: neutralise stray Twenty-One light boxes -- */
.bg-white, .bg-light, .panel-default, .well, .box, .content-box, .gray-bg {
    background: var(--oi-surface) !important;
    color: var(--oi-ink) !important;
    border-color: var(--oi-border) !important;
}
.text-dark, .text-black { color: var(--oi-ink) !important; }
.oi-btn * { color: inherit; }

/* ---------- 12. Premium Footer ------------------------------------- */
.oi-footer {
    background: var(--oi-bg-2) !important; border-top: 1px solid var(--oi-border);
    color: var(--oi-ink-soft); margin-top: 5rem; padding: 3.5rem 0 1.5rem;
    position: relative; overflow: hidden;
}
.oi-footer::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--oi-accent-rgb),.5), transparent);
}
.oi-footer__top {
    display: grid; gap: 2rem; grid-template-columns: 1.6fr 1fr 1fr 1fr;
    padding-bottom: 2.5rem; border-bottom: 1px solid var(--oi-border);
}
.oi-footer__logo { font-family: var(--oi-font-display); font-weight: 800; font-size: 1.5rem; color: var(--oi-ink); letter-spacing: -.02em; }
.oi-footer__blurb { color: var(--oi-ink-soft); margin: .8rem 0 1.2rem; max-width: 34ch; font-size: .92rem; }
.oi-footer__col h5 { color: var(--oi-ink); font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; margin-bottom: 1rem; }
.oi-footer__col a { display: block; color: var(--oi-ink-soft) !important; padding: .3rem 0; font-size: .92rem; transition: color .2s, transform .2s; }
.oi-footer__col a:hover { color: var(--oi-ink) !important; transform: translateX(3px); }
.oi-footer__social { display: flex; gap: .6rem; }
.oi-footer__social li, .oi-footer__social .list-inline-item { margin: 0 !important; }
.oi-footer__social a {
    width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
    background: var(--oi-surface); border: 1px solid var(--oi-border); color: var(--oi-ink-soft) !important;
    transition: transform .25s var(--oi-ease), background .25s, color .25s;
}
.oi-footer__social a:hover { transform: translateY(-3px); background: var(--oi-accent); color: var(--oi-bg) !important; }
.oi-footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 1.5rem; }
.oi-footer__bottom .copyright { color: var(--oi-ink-faint); font-size: .86rem; }
.oi-footer__badge { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--oi-ink-soft); }
.oi-footer__badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #1fbe6b; box-shadow: 0 0 0 0 rgba(31,190,107,.5); animation: oi-pulse 2.4s infinite; }
@media (max-width: 860px) { .oi-footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .oi-footer__top { grid-template-columns: 1fr; } }

/* ---------- 13. Scrollbar + misc ----------------------------------- */
::selection { background: rgba(var(--oi-accent-rgb),.28); color: var(--oi-ink); }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb { background: var(--oi-surface-2); border-radius: 20px; border: 3px solid var(--oi-bg); }
*::-webkit-scrollbar-track { background: var(--oi-bg); }

/* progress bar on scroll */
.oi-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0;
    background: linear-gradient(90deg, var(--oi-accent), var(--oi-accent-2)); z-index: 2000; transition: width .1s linear; }

/* =====================================================================
   14. FULL COMPONENT COVERAGE — every inner client-area page
   ===================================================================== */

/* ---- 14.1 Page header band (master-breadcrumb + title) ------------ */
.master-breadcrumb {
    background: var(--oi-bg-2);
    border-bottom: 1px solid var(--oi-border);
    padding: 1.4rem 0;
    margin-bottom: 2rem;
}
.master-breadcrumb .breadcrumb {
    background: transparent; margin: 0; padding: 0;
    max-width: 1140px; margin-left: auto; margin-right: auto; padding: 0 15px;
}
.breadcrumb-item, .breadcrumb-item.active { color: var(--oi-ink-faint); }
.breadcrumb-item a { color: var(--oi-ink-soft); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--oi-ink-faint); }
#main-body .page-header,
.page-header { border-bottom: 1px solid var(--oi-border); }
#main-body h1, #main-body h2, #main-body h3,
#main-content h1, #main-content h2, #main-content h3 { color: var(--oi-ink); }

/* ---- 14.2 Forms --------------------------------------------------- */
.form-control, .custom-select, .form-select,
textarea, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="url"], input[type="search"], select {
    background-color: var(--oi-surface) !important;
    border: 1px solid var(--oi-border) !important;
    color: var(--oi-ink) !important;
    border-radius: var(--oi-radius-sm) !important;
    transition: border-color .25s, box-shadow .25s, background .25s;
}
.form-control:focus, .custom-select:focus, textarea:focus, select:focus,
input:focus {
    background-color: var(--oi-surface-2) !important;
    border-color: rgba(var(--oi-accent-rgb), .55) !important;
    box-shadow: 0 0 0 3px rgba(var(--oi-accent-rgb), .14) !important;
    color: var(--oi-ink) !important;
    outline: none;
}
.form-control::placeholder, textarea::placeholder { color: var(--oi-ink-faint) !important; }
label, .control-label, .form-group > label { color: var(--oi-ink-soft); font-weight: 600; }
.form-control[readonly], .form-control:disabled { background: var(--oi-surface) !important; opacity: .6; }
.field-icon, .input-group-text {
    background: var(--oi-surface-2) !important; border: 1px solid var(--oi-border) !important;
    color: var(--oi-ink-soft) !important;
}
.input-group > .form-control { border-radius: var(--oi-radius-sm) !important; }
/* select2 (WHMCS dropdowns) */
.select2-container--default .select2-selection--single,
.select2-dropdown, .select2-search__field {
    background: var(--oi-surface) !important; border-color: var(--oi-border) !important; color: var(--oi-ink) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--oi-ink) !important; }
.select2-results__option { color: var(--oi-ink); }
.select2-results__option--highlighted { background: rgba(var(--oi-accent-rgb),.2) !important; }
/* checkbox / radio + custom controls */
.custom-control-label::before { background: var(--oi-surface); border-color: var(--oi-border); }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--oi-accent); border-color: var(--oi-accent); }
.form-check-input:checked { background-color: var(--oi-accent); border-color: var(--oi-accent); }

/* ---- 14.3 Buttons (all Bootstrap variants) ------------------------ */
.btn-primary {
    background: var(--oi-accent) !important; border-color: var(--oi-accent) !important;
    color: var(--oi-bg) !important; border-radius: 100px; font-weight: 700;
    box-shadow: 0 8px 22px -10px rgba(var(--oi-accent-rgb), .5);
}
.btn-primary:hover, .btn-primary:focus { filter: brightness(1.06); color: var(--oi-bg) !important; transform: translateY(-1px); }
.btn-default, .btn-secondary, .btn-light {
    background: var(--oi-surface) !important; border: 1px solid var(--oi-border) !important;
    color: var(--oi-ink) !important; border-radius: 100px;
}
.btn-default:hover, .btn-secondary:hover, .btn-light:hover { background: var(--oi-surface-2) !important; color: var(--oi-ink) !important; }
.btn-outline-primary {
    color: var(--oi-ink) !important; border: 1px solid var(--oi-border) !important;
    background: transparent !important; border-radius: 100px;
}
.btn-outline-primary:hover { background: var(--oi-accent) !important; color: var(--oi-bg) !important; border-color: var(--oi-accent) !important; }
.btn-link { color: var(--oi-accent) !important; }
.btn-success { background: #1fbe6b !important; border-color:#1fbe6b !important; color:#04160c !important; border-radius:100px; }
.btn-danger  { background: #ef4d5a !important; border-color:#ef4d5a !important; color:#fff !important; border-radius:100px; }
.btn-warning { background: #f5b544 !important; border-color:#f5b544 !important; color:#231803 !important; border-radius:100px; }
.btn-info    { background: #43b6e8 !important; border-color:#43b6e8 !important; color:#031017 !important; border-radius:100px; }
.btn { transition: transform .25s var(--oi-ease), filter .25s, background .25s; }

/* ---- 14.4 Alerts -------------------------------------------------- */
.alert { border-radius: var(--oi-radius); border: 1px solid var(--oi-border); background: var(--oi-surface); color: var(--oi-ink); }
.alert-success { border-left: 4px solid #1fbe6b; }
.alert-danger  { border-left: 4px solid #ef4d5a; }
.alert-warning { border-left: 4px solid #f5b544; }
.alert-info    { border-left: 4px solid #43b6e8; }

/* ---- 14.5 Badges / labels ---------------------------------------- */
.badge { border-radius: 100px; font-weight: 600; padding: .35em .7em; }
.badge-primary, .label-primary { background: var(--oi-accent); color: var(--oi-bg); }
.badge-secondary { background: var(--oi-surface-2); color: var(--oi-ink); }
.badge-success, .label-success { background: rgba(31,190,107,.16); color:#37d98a; }
.badge-danger, .label-danger { background: rgba(239,77,90,.16); color:#ff8a93; }
.badge-warning, .label-warning { background: rgba(245,181,68,.16); color:#f7c877; }
.badge-info, .label-info { background: rgba(67,182,232,.16); color:#7fd0f2; }

/* status pill helpers WHMCS uses */
.label-active, .status-active { background: rgba(31,190,107,.16) !important; color:#37d98a !important; }
.label-pending, .status-pending { background: rgba(245,181,68,.16) !important; color:#f7c877 !important; }

/* ---- 14.6 Tables + DataTables ------------------------------------ */
.table thead th { border-bottom: 1px solid var(--oi-border) !important; color: var(--oi-ink-soft); text-transform: uppercase; font-size: .74rem; letter-spacing: .06em; }
.table-striped tbody tr:nth-of-type(odd) { background: var(--oi-surface); }
.table-hover tbody tr:hover { background: var(--oi-surface-2); }
.table a { color: var(--oi-ink); font-weight: 600; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input { background: var(--oi-surface) !important; border:1px solid var(--oi-border) !important; color: var(--oi-ink) !important; }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper label { color: var(--oi-ink-soft) !important; }

/* ---- 14.7 Pagination --------------------------------------------- */
.page-link { background: var(--oi-surface); border-color: var(--oi-border); color: var(--oi-ink); }
.page-link:hover { background: var(--oi-surface-2); color: var(--oi-ink); }
.page-item.active .page-link { background: var(--oi-accent); border-color: var(--oi-accent); color: var(--oi-bg); }
.page-item.disabled .page-link { background: var(--oi-surface); color: var(--oi-ink-faint); }

/* ---- 14.8 Client-area sidebar nav -------------------------------- */
.sidebar .list-group, .sidebar-menu { border-radius: var(--oi-radius); overflow: hidden; }
.list-group-item {
    background: var(--oi-surface) !important; border-color: var(--oi-border) !important; color: var(--oi-ink);
}
.list-group-item a, .sidebar a { color: var(--oi-ink-soft); }
.list-group-item.active, .list-group-item:hover { background: var(--oi-surface-2) !important; color: var(--oi-ink) !important; }
.list-group-item.panel-title, .sidebar .panel-heading { color: var(--oi-ink); font-weight: 700; }

/* ---- 14.9 Nav tabs / pills --------------------------------------- */
.nav-tabs { border-bottom: 1px solid var(--oi-border); }
.nav-tabs .nav-link { color: var(--oi-ink-soft); border: 0; border-bottom: 2px solid transparent; background: transparent; }
.nav-tabs .nav-link.active { color: var(--oi-ink); background: transparent; border-bottom-color: var(--oi-accent); }
.nav-pills .nav-link { color: var(--oi-ink-soft); border-radius: 100px; }
.nav-pills .nav-link.active { background: var(--oi-accent); color: var(--oi-bg); }

/* ---- 14.10 Dropdowns / modals / popovers ------------------------- */
.dropdown-menu {
    background: var(--oi-glass) !important; border: 1px solid var(--oi-border) !important;
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-radius: var(--oi-radius-sm); box-shadow: var(--oi-shadow);
}
.dropdown-item { color: var(--oi-ink-soft); }
.dropdown-item:hover { background: var(--oi-surface-2); color: var(--oi-ink); }
.dropdown-divider { border-color: var(--oi-border); }
.modal-content { background: var(--oi-bg-2); border: 1px solid var(--oi-border); border-radius: var(--oi-radius); color: var(--oi-ink); }
.modal-header, .modal-footer { border-color: var(--oi-border); }
.popover, .tooltip-inner { background: var(--oi-bg-2); color: var(--oi-ink); border: 1px solid var(--oi-border); }
.close, .btn-close { color: var(--oi-ink); text-shadow: none; opacity: .7; }

/* ---- 14.11 Progress / misc --------------------------------------- */
.progress { background: var(--oi-surface-2); border-radius: 100px; }
.progress-bar { background: var(--oi-accent); }
.jumbotron { background: var(--oi-surface); border: 1px solid var(--oi-border); border-radius: var(--oi-radius); }
.well { box-shadow: none; }
code, pre, kbd { background: var(--oi-surface-2); color: var(--oi-ink); border-radius: 6px; }

/* ---- 14.12 Announcement / promo bar (admin-controlled) ----------- */
.oi-announce {
    position: relative; z-index: 1001;
    background: linear-gradient(90deg, var(--oi-accent), var(--oi-accent-2));
    color: var(--oi-bg); text-align: center; padding: .6rem 1rem; font-weight: 600; font-size: .9rem;
}
.oi-announce a { color: var(--oi-bg); text-decoration: underline; }
.oi-announce .oi-announce-close { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); cursor: pointer; opacity: .8; background: none; border: 0; color: inherit; font-size: 18px; }

/* ---- 14.13 Custom builder sections ------------------------------- */
.oi-custom-section { padding: clamp(3rem, 7vw, 6rem) 0; }
.oi-custom-section .container { position: relative; z-index: 1; }
.oi-cta {
    text-align: center; padding: clamp(2.5rem,6vw,4.5rem) 1.5rem; border-radius: var(--oi-radius);
    background: linear-gradient(160deg, var(--oi-surface-2), var(--oi-surface)); border: 1px solid var(--oi-border);
}
.oi-cta h2 { font-weight: 800; letter-spacing: -.02em; color: var(--oi-ink); }
.oi-cta p { color: var(--oi-ink-soft); }

/* ---- 14.14 Auth pages (login / register) ------------------------- */
body.oi-auth #main-body { display: flex; align-items: center; min-height: 80vh; padding: 3rem 0; }
body.oi-auth #main-body > .container { width: 100%; }
body.oi-auth .card {
    background: var(--oi-glass) !important;
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border: 1px solid var(--oi-border) !important; box-shadow: var(--oi-shadow) !important;
    border-radius: var(--oi-radius) !important;
}
body.oi-auth .card-body { padding: 2.2rem; }
/* accent top strip on the auth card */
body.oi-auth .card::before {
    content: ""; display: block; height: 4px; width: 54px; border-radius: 4px;
    background: var(--oi-accent); margin-bottom: 1.4rem;
}

/* =====================================================================
   15. WHMCS-SPECIFIC PAGE COMPONENTS (dashboard, lists, panels)
   ===================================================================== */

/* ---- 15.1 Immersive page-header band (all inner pages) ----------- */
.oi-pagehead {
    padding: 2.4rem 0 1.4rem;
    background:
        radial-gradient(60vw 20vw at 20% -40%, rgba(var(--oi-accent-rgb),.08), transparent 60%),
        var(--oi-bg-2);
    margin-bottom: 2.2rem;
}
.oi-pagehead__title {
    font-family: var(--oi-font-display); font-weight: 800; letter-spacing: -.02em;
    font-size: clamp(1.6rem, 3vw, 2.5rem); color: var(--oi-ink); margin: 0 0 .5rem;
    line-height: 1.1;
}
.oi-pagehead .breadcrumb { padding: 0; }

/* ---- 15.1b Premium dashboard welcome hero ------------------------ */
.oi-dash-hero {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
    padding: clamp(1.6rem, 4vw, 2.6rem); border-radius: var(--oi-radius); margin-bottom: 1.6rem;
    background:
        radial-gradient(50vw 30vw at 90% -30%, rgba(var(--oi-accent-rgb),.14), transparent 60%),
        linear-gradient(160deg, var(--oi-surface-2), var(--oi-surface));
    border: 1px solid var(--oi-border); position: relative; overflow: hidden;
}
.oi-dash-hero h1 { font-family: var(--oi-font-display); font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.5rem,3vw,2.1rem); color: var(--oi-ink); margin: .7rem 0 .3rem; }
.oi-dash-hero p { color: var(--oi-ink-soft); margin: 0; }
.oi-dash-hero__actions { display: flex; gap: .6rem; flex-wrap: wrap; }

/* ---- 15.2 Client dashboard stat tiles ---------------------------- */
.tiles { margin-bottom: 2rem !important; }
.tiles .row.no-gutters { gap: 1rem 0; }
.tile {
    display: block; position: relative; overflow: hidden;
    background: var(--oi-surface) !important; border: 1px solid var(--oi-border) !important;
    border-radius: var(--oi-radius) !important; padding: 1.5rem !important; margin: .5rem !important;
    color: var(--oi-ink) !important; text-decoration: none !important;
    transition: transform .3s var(--oi-ease), border-color .3s, background .3s;
}
.tile:hover { transform: translateY(-4px); border-color: rgba(var(--oi-accent-rgb),.4) !important; background: var(--oi-surface-2) !important; }
.tile > i, .tile .fa, .tile .fas, .tile .far { color: var(--oi-accent); font-size: 1.6rem; margin-bottom: .6rem; opacity: .9; }
.tile .stat { font-size: clamp(1.8rem,3vw,2.4rem); font-weight: 800; color: var(--oi-ink); letter-spacing: -.02em; line-height: 1; }
.tile .title { color: var(--oi-ink-soft); text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; margin-top: .3rem; }
.tile .highlight {
    position: absolute; left: 0; right: 0; bottom: 0; height: 3px; opacity: .9;
    background: var(--oi-accent) !important;
}
/* neutralise WHMCS bright tile colours -> monochrome accent */
.tile .highlight.bg-color-blue, .tile .highlight.bg-color-green,
.tile .highlight.bg-color-orange, .tile .highlight.bg-color-red { background: var(--oi-accent) !important; }

/* ---- 15.3 Panels / cards on dashboard & inner pages -------------- */
.panel, .card { box-shadow: none !important; }
.panel-heading, .card-header { font-weight: 700; }
.home-panels .panel, .clientarea-panel { border-radius: var(--oi-radius) !important; }
.account-overview-panel, .btn-panel { background: var(--oi-surface) !important; border: 1px solid var(--oi-border) !important; border-radius: var(--oi-radius) !important; }

/* ---- 15.4 Service / domain / invoice status labels --------------- */
.textgreen, .text-success { color: #37d98a !important; }
.textred, .text-danger { color: #ff8a93 !important; }
.textorange, .text-warning { color: #f7c877 !important; }
.status-badge, .label {
    border-radius: 100px; font-weight: 600; padding: .3em .8em; display: inline-block;
}

/* ---- 15.5 Product details header (service overview) -------------- */
.domain-header, .product-details-header, #order-standard_cart .product-info {
    background: linear-gradient(160deg, var(--oi-surface-2), var(--oi-surface)) !important;
    border: 1px solid var(--oi-border) !important; border-radius: var(--oi-radius) !important;
    color: var(--oi-ink);
}

/* ---- 15.6 Invoice view ------------------------------------------- */
.invoice-container, .invoice { background: var(--oi-surface) !important; border: 1px solid var(--oi-border) !important; border-radius: var(--oi-radius) !important; color: var(--oi-ink); }
.invoice-items table thead { background: var(--oi-surface-2); }

/* ---- 15.7 Support tickets --------------------------------------- */
.ticket-reply, .ticket-message, .supportticketsreply {
    background: var(--oi-surface) !important; border: 1px solid var(--oi-border) !important;
    border-radius: var(--oi-radius) !important; color: var(--oi-ink);
}
.ticket-reply.staff, .toggle-container.highlight { border-left: 3px solid var(--oi-accent) !important; }

/* ---- 15.8 Knowledgebase / announcements list -------------------- */
.kbarticle, .announcement-item, .kb-category {
    background: var(--oi-surface); border: 1px solid var(--oi-border);
    border-radius: var(--oi-radius); padding: 1.2rem 1.4rem; margin-bottom: 1rem;
    transition: transform .25s var(--oi-ease), border-color .25s;
}
.kbarticle:hover, .announcement-item:hover, .kb-category:hover { transform: translateY(-2px); border-color: rgba(var(--oi-accent-rgb),.35); }

/* ---- 15.9 Contact page form ------------------------------------- */
.contact-form .form-group, #contactForm .form-group { margin-bottom: 1.1rem; }

/* ---- 15.10 Empty states / help blocks --------------------------- */
.text-center.empty, .no-results, .alert.text-center { border-radius: var(--oi-radius); }

/* =====================================================================
   16. ORDER FORM / CART (works with any order-form template)
   ===================================================================== */
.products .product, .product.clearfix, .cart-product, .package {
    background: var(--oi-surface) !important; border: 1px solid var(--oi-border) !important;
    border-radius: var(--oi-radius) !important; color: var(--oi-ink);
    transition: transform .3s var(--oi-ease), border-color .3s, background .3s;
}
.products .product:hover, .package:hover { transform: translateY(-4px); border-color: rgba(var(--oi-accent-rgb),.4) !important; background: var(--oi-surface-2) !important; }
.product .product-desc, .product .feature-value, .package .desc { color: var(--oi-ink-soft); }
.product .price, .product .font-size-36, .package .price, .cycle, .amount {
    color: var(--oi-ink) !important; font-weight: 800; letter-spacing: -.02em;
}
.product .product-pricing .price { background: none; }
.header-lined, .cart-body h1, .cart-body h2, .cart-body h3, #order-standard_cart h1 { color: var(--oi-ink); }
.header-lined:after { background: var(--oi-border); }
.btn-order-now, .order-button, #btnCompleteProductConfig {
    background: var(--oi-accent) !important; color: var(--oi-bg) !important; border: 0 !important;
    border-radius: 100px !important; font-weight: 700;
    box-shadow: 0 10px 30px -10px rgba(var(--oi-accent-rgb), .5);
}
.btn-order-now:hover, .order-button:hover { transform: translateY(-2px); filter: brightness(1.05); }
.cart-sidebar, .order-summary, .summary-container, #ordersummary, .sidebar-content {
    background: var(--oi-surface) !important; border: 1px solid var(--oi-border) !important;
    border-radius: var(--oi-radius) !important; color: var(--oi-ink);
}
.cart-sidebar a, .order-summary a, #ordersummary a { color: var(--oi-accent); }
.order-summary .total, #ordersummary .total { color: var(--oi-ink); font-weight: 800; }
.item-content, .summary-item, .cart-item { border-color: var(--oi-border) !important; color: var(--oi-ink); }
.cart-body .form-control, .checkout .form-control, #frmCheckout .form-control {
    background: var(--oi-surface) !important; border: 1px solid var(--oi-border) !important;
    color: var(--oi-ink) !important; border-radius: var(--oi-radius-sm) !important;
}
.gateway-item, .payment-methods label, .paymentgw {
    background: var(--oi-surface) !important; border: 1px solid var(--oi-border) !important;
    border-radius: var(--oi-radius-sm) !important; color: var(--oi-ink);
}
.gateway-item.selected, .paymentgw.selected { border-color: var(--oi-accent) !important; }
.domain-checker-availability, .domain-search-result {
    background: var(--oi-surface) !important; border: 1px solid var(--oi-border) !important;
    border-radius: var(--oi-radius) !important; color: var(--oi-ink);
}

/* =====================================================================
   17. PREMIUM ORDER / CART — pricing cards, sidebar, summary, checkout
   ===================================================================== */
#order-standard_cart { position: relative; }
#order-standard_cart .header-lined { border: 0; margin-bottom: 2rem; }
#order-standard_cart .header-lined h1 { font-family: var(--oi-font-display); font-weight: 800; letter-spacing: -.02em; }

/* --- product as a premium pricing card --- */
.products .row-eq-height { display: flex; flex-wrap: wrap; }
.products .col-md-6 { display: flex; margin-bottom: 1.5rem; }
.products .product {
    display: flex; flex-direction: column; width: 100%; height: 100%;
    padding: 2rem !important; position: relative; overflow: hidden;
    background: linear-gradient(165deg, var(--oi-surface-2), var(--oi-surface)) !important;
    border: 1px solid var(--oi-border) !important; border-radius: var(--oi-radius) !important;
    transition: transform .35s var(--oi-ease), border-color .35s, box-shadow .35s;
}
.products .product::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--oi-accent), var(--oi-accent-2));
    transform: scaleX(0); transform-origin: left; transition: transform .4s var(--oi-ease);
}
.products .product:hover { transform: translateY(-6px); border-color: rgba(var(--oi-accent-rgb),.4) !important; box-shadow: var(--oi-shadow) !important; }
.products .product:hover::before { transform: scaleX(1); }
.products .product > header {
    font-family: var(--oi-font-display); font-size: 1.35rem; font-weight: 800;
    color: var(--oi-ink); letter-spacing: -.02em; margin-bottom: .4rem;
}
.products .product .product-desc { color: var(--oi-ink-soft); flex: 1; margin-bottom: 1rem; }
.products .product .product-desc > p { margin-bottom: 1rem; }
.products .product .product-desc ul { list-style: none; padding: 0; margin: 0; }
.products .product .product-desc ul li {
    position: relative; padding: .4rem 0 .4rem 1.7rem; border-bottom: 1px solid var(--oi-border); font-size: .92rem;
}
.products .product .product-desc ul li:last-child { border-bottom: 0; }
.products .product .product-desc ul li::before {
    content: "\f00c"; font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-weight: 900;
    position: absolute; left: 0; top: .45rem; color: var(--oi-accent); font-size: .8rem;
}
.products .product .feature-value { font-weight: 700; color: var(--oi-ink); }
.products .product > footer { margin-top: auto; }
.products .product .product-pricing {
    padding: 1.1rem 0; margin-top: .5rem; border-top: 1px solid var(--oi-border);
    color: var(--oi-ink-soft); font-size: .82rem; text-align: left;
}
.products .product .product-pricing .price {
    display: block; font-family: var(--oi-font-display); font-size: 2.4rem; font-weight: 800;
    color: var(--oi-ink); letter-spacing: -.03em; line-height: 1; margin-bottom: .2rem; background: none;
}
.products .product .btn-order-now, .products .product .btn-success {
    display: block; width: 100%; text-align: center; padding: .85rem 1rem !important;
    font-size: .98rem !important; border-radius: 100px !important;
    background: var(--oi-accent) !important; color: var(--oi-bg) !important; border: 0 !important;
    box-shadow: 0 10px 26px -12px rgba(var(--oi-accent-rgb), .55);
}
.products .product .btn-order-now:hover { transform: translateY(-2px); filter: brightness(1.05); }

/* --- category sidebar as premium pills --- */
.cart-sidebar .list-group-item, .sidebar-categories a {
    background: var(--oi-surface) !important; border: 1px solid var(--oi-border) !important;
    border-radius: 100px !important; margin-bottom: .5rem !important; color: var(--oi-ink-soft) !important;
    transition: background .25s, color .25s, transform .2s;
}
.cart-sidebar .list-group-item:hover, .sidebar-categories a:hover { transform: translateX(3px); color: var(--oi-ink) !important; }
.cart-sidebar .list-group-item.active, .sidebar-categories a.active {
    background: var(--oi-accent) !important; color: var(--oi-bg) !important; border-color: var(--oi-accent) !important;
}

/* --- view cart: summary + line items --- */
.summary-container, .order-summary, #ordersummary {
    background: var(--oi-surface) !important; border: 1px solid var(--oi-border) !important;
    border-radius: var(--oi-radius) !important; padding: 1.4rem !important;
}
.summary-container .item, .order-summary .item, #ordersummary .item {
    border-bottom: 1px solid var(--oi-border) !important; padding: .7rem 0; color: var(--oi-ink);
}
.summary-container .total, .order-summary .total, .cart-total {
    color: var(--oi-ink); font-weight: 800; font-size: 1.15rem; border-top: 2px solid var(--oi-border);
}
.view-cart-items table, .cart-items table { color: var(--oi-ink); }
.view-cart-items .item-content, .cart-item { border-color: var(--oi-border) !important; }
.promo, .promotion-code, .apply-promo {
    background: var(--oi-surface-2) !important; border: 1px dashed var(--oi-border) !important;
    border-radius: var(--oi-radius-sm) !important; color: var(--oi-ink);
}
/* checkout proceed buttons */
.checkout-btn, #btnCompleteOrder, .btn-checkout, #checkout {
    background: var(--oi-accent) !important; color: var(--oi-bg) !important; border: 0 !important;
    border-radius: 100px !important; font-weight: 700; padding: .9rem 2rem !important;
    box-shadow: 0 12px 30px -12px rgba(var(--oi-accent-rgb), .55);
}

/* --- 17b2. Domain register / transfer pages ------------------------ */
.domain-checker-container { margin-bottom: 2rem; }
.domain-checker-bg {
    background: radial-gradient(60% 120% at 50% -20%, rgba(var(--oi-accent-rgb),.12), transparent 60%),
                linear-gradient(165deg, var(--oi-surface-2), var(--oi-surface)) !important;
    border: 1px solid var(--oi-border) !important;
    border-radius: var(--oi-radius) !important;
    padding: clamp(1.6rem, 4vw, 2.8rem) !important;
    box-shadow: var(--oi-shadow);
}
.domain-checker-bg .input-group-box,
.domain-checker-bg .input-group {
    background: var(--oi-bg-2); border: 1px solid var(--oi-border);
    border-radius: 100px; padding: .35rem .35rem .35rem 1.2rem; box-shadow: none;
}
.domain-checker-bg .form-control {
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    color: var(--oi-ink) !important; font-size: 1.05rem;
}
.domain-checker-bg .btn-primary,
.domain-checker-bg .domain-check-availability {
    border-radius: 100px !important; padding: .7rem 1.6rem !important; font-weight: 700;
}
.domain-checker-bg textarea { background: var(--oi-bg-2) !important; border: 1px solid var(--oi-border) !important; color: var(--oi-ink) !important; border-radius: var(--oi-radius-sm) !important; }
/* spotlight TLD cards */
.spotlight-tlds-container, .spotlight-tlds { background: transparent !important; }
.spotlight-tld-container {
    background: var(--oi-surface) !important; border: 1px solid var(--oi-border) !important;
    border-radius: var(--oi-radius-sm) !important; transition: transform .25s var(--oi-ease), border-color .25s;
}
.spotlight-tld-container:hover { transform: translateY(-3px); border-color: rgba(var(--oi-accent-rgb),.4) !important; }
.spotlight-tld { color: var(--oi-ink) !important; font-family: var(--oi-font-display); font-weight: 800 !important; }
.spotlight-tld-container .domain-price, .spotlight-tld-container .price { color: var(--oi-ink-soft) !important; }
/* lookup results */
.domain-lookup-result, .domain-checker-result-headline { color: var(--oi-ink); }
.domain-checker-available { color: #37d98a !important; }
.domain-checker-unavailable { color: #ff8a93 !important; }
.domain-lookup-result .domain-suggestion, .suggested-domains .domain-suggestion,
.domain-suggestions li, .suggested-domains li {
    background: var(--oi-surface) !important; border: 1px solid var(--oi-border) !important;
    border-radius: var(--oi-radius-sm) !important; color: var(--oi-ink);
    margin-bottom: .5rem; transition: border-color .2s, background .2s;
}
.domain-suggestions li:hover, .suggested-domains li:hover { background: var(--oi-surface-2) !important; border-color: rgba(var(--oi-accent-rgb),.35) !important; }
.domain-suggestion-pricing, .domain-price { color: var(--oi-ink) !important; font-weight: 700; }
.tld-row { border-color: var(--oi-border) !important; color: var(--oi-ink); }
.tld-row:nth-child(odd) { background: var(--oi-surface); }
.domain-lookup-loader { color: var(--oi-ink-soft); }
/* transfer card */
#frmDomainTransfer .panel, #frmDomainTransfer .card {
    background: linear-gradient(165deg, var(--oi-surface-2), var(--oi-surface)) !important;
    border: 1px solid var(--oi-border) !important; border-radius: var(--oi-radius) !important;
    box-shadow: var(--oi-shadow) !important;
}
#frmDomainTransfer .panel-title, #frmDomainTransfer .card-title { color: var(--oi-ink); font-family: var(--oi-font-display); font-weight: 800; }

/* --- 17c. View-cart page (line items + totals + checkout) ---------- */
.view-cart-items, .view-cart-items-header {
    background: var(--oi-surface) !important; border: 1px solid var(--oi-border) !important;
    border-radius: var(--oi-radius) !important; color: var(--oi-ink); overflow: hidden;
}
.view-cart-items-header { background: var(--oi-surface-2) !important; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; color: var(--oi-ink-soft); }
.view-cart-items .item-group, .cart-item {
    border-bottom: 1px solid var(--oi-border) !important; padding: 1rem 1.2rem !important;
    transition: background .2s;
}
.view-cart-items .item-group:hover { background: var(--oi-surface-2) !important; }
.item-title { font-family: var(--oi-font-display); font-weight: 700; color: var(--oi-ink); }
.item-domain { color: var(--oi-ink-soft); font-size: .9rem; }
.item-price { font-weight: 800; color: var(--oi-ink); letter-spacing: -.01em; }
.item-qty input, .item-qty select { max-width: 80px; }
.subtotal, .recurring-charges {
    background: var(--oi-surface) !important; border: 1px solid var(--oi-border) !important;
    border-radius: var(--oi-radius-sm) !important; color: var(--oi-ink); padding: .9rem 1.1rem;
}
.total-due-today, .total-due-today-padded {
    background: linear-gradient(160deg, var(--oi-surface-2), var(--oi-surface)) !important;
    border: 1px solid rgba(var(--oi-accent-rgb),.4) !important; border-radius: var(--oi-radius) !important;
    color: var(--oi-ink) !important; font-weight: 800; font-size: 1.15rem; padding: 1rem 1.2rem !important;
}
.checkout-buttons { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: flex-end; margin-top: 1.2rem; }
.checkout-buttons .btn { border-radius: 100px !important; }
.empty-cart, .cart-empty { text-align: center; padding: 3rem 1rem; color: var(--oi-ink-soft); }

/* --- 17b. Rebuilt premium pricing grid (.oi-order / .oi-plan) ------ */
.oi-order-head { text-align: center; margin: 0 auto 2.5rem; max-width: 720px; }
.oi-order-head h1 { font-family: var(--oi-font-display); font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.8rem,3.4vw,2.7rem); color: var(--oi-ink); }
.oi-order-tagline { color: var(--oi-ink-soft); font-size: 1.08rem; }
.oi-cats { margin-bottom: 1.5rem; }
.oi-pricing { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); align-items: stretch; }
.oi-plan {
    position: relative; display: flex; flex-direction: column; padding: 2rem 1.8rem;
    background: linear-gradient(165deg, var(--oi-surface-2), var(--oi-surface));
    border: 1px solid var(--oi-border); border-radius: var(--oi-radius);
    transition: transform .35s var(--oi-ease), border-color .35s, box-shadow .35s;
}
.oi-plan:hover { transform: translateY(-6px); border-color: rgba(var(--oi-accent-rgb),.4); box-shadow: var(--oi-shadow); }
.oi-plan--featured { border-color: rgba(var(--oi-accent-rgb),.55); box-shadow: 0 0 0 1px rgba(var(--oi-accent-rgb),.25), var(--oi-shadow); }
.oi-plan__badge {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--oi-accent); color: var(--oi-bg); font-size: .7rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .08em; padding: .35rem .9rem; border-radius: 100px; white-space: nowrap;
}
.oi-plan__name { font-family: var(--oi-font-display); font-size: 1.3rem; font-weight: 800; color: var(--oi-ink); margin-bottom: .8rem; }
.oi-plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem; margin-bottom: .3rem; }
.oi-plan__from { width: 100%; font-size: .78rem; color: var(--oi-ink-faint); text-transform: uppercase; letter-spacing: .08em; }
.oi-plan__amount { font-family: var(--oi-font-display); font-size: 2.6rem; font-weight: 800; color: var(--oi-ink); letter-spacing: -.03em; line-height: 1; }
.oi-plan__cycle { color: var(--oi-ink-soft); font-size: .9rem; }
.oi-plan__setup, .oi-plan__stock { font-size: .8rem; color: var(--oi-ink-faint); margin-top: .3rem; }
.oi-plan__desc { color: var(--oi-ink-soft); margin: 1.1rem 0; flex: 1; }
.oi-plan__features { list-style: none; padding: 0; margin: 0; }
.oi-plan__features li { position: relative; padding: .45rem 0 .45rem 1.7rem; border-bottom: 1px solid var(--oi-border); font-size: .92rem; }
.oi-plan__features li:last-child { border-bottom: 0; }
.oi-plan__features li::before {
    content: "\f00c"; font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free";
    font-weight: 900; position: absolute; left: 0; top: .5rem; color: var(--oi-accent); font-size: .8rem;
}
.oi-plan__features .feature-value { font-weight: 700; color: var(--oi-ink); }
.oi-plan__cta {
    display: block; text-align: center; margin-top: auto; padding: .9rem 1rem;
    background: var(--oi-accent); color: var(--oi-bg) !important; font-weight: 700; text-decoration: none !important;
    border-radius: 100px; box-shadow: 0 10px 26px -12px rgba(var(--oi-accent-rgb), .55);
    transition: transform .3s var(--oi-ease), filter .3s;
}
.oi-plan__cta:hover { transform: translateY(-2px); filter: brightness(1.06); color: var(--oi-bg) !important; }
.oi-plan--featured .oi-plan__cta { box-shadow: 0 14px 34px -12px rgba(var(--oi-accent-rgb), .7); }
@media (max-width: 991px) { .oi-order .cart-sidebar { margin-bottom: 1.5rem; } }

/* =====================================================================
   18. FAQ, TESTIMONIALS, BACK-TO-TOP, RTL
   ===================================================================== */

/* ---- 18.1 FAQ accordion ------------------------------------------- */
.oi-faq { display: flex; flex-direction: column; gap: .8rem; }
.oi-faq__item {
    background: var(--oi-surface); border: 1px solid var(--oi-border);
    border-radius: var(--oi-radius-sm); overflow: hidden;
    transition: border-color .25s, background .25s;
}
.oi-faq__item[open] { border-color: rgba(var(--oi-accent-rgb),.4); background: var(--oi-surface-2); }
.oi-faq__item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    cursor: pointer; list-style: none; padding: 1.1rem 1.3rem;
    font-weight: 700; color: var(--oi-ink); font-family: var(--oi-font-display);
}
.oi-faq__item summary::-webkit-details-marker { display: none; }
.oi-faq__item summary i { transition: transform .3s var(--oi-ease); color: var(--oi-ink-faint); flex: 0 0 auto; }
.oi-faq__item[open] summary i { transform: rotate(180deg); color: var(--oi-accent); }
.oi-faq__answer { padding: 0 1.3rem 1.2rem; color: var(--oi-ink-soft); line-height: 1.7; }

/* ---- 18.2 Testimonials -------------------------------------------- */
.oi-quote {
    display: flex; flex-direction: column; margin: 0; padding: 1.8rem;
    background: var(--oi-surface); border: 1px solid var(--oi-border);
    border-radius: var(--oi-radius); transition: transform .3s var(--oi-ease), border-color .3s;
}
.oi-quote:hover { transform: translateY(-4px); border-color: rgba(var(--oi-accent-rgb),.35); }
.oi-quote__mark { color: var(--oi-accent); opacity: .5; font-size: 1.4rem; margin-bottom: .8rem; }
.oi-quote blockquote { color: var(--oi-ink); font-size: 1.02rem; line-height: 1.7; margin: 0 0 1.2rem; flex: 1; border: 0; padding: 0; }
.oi-quote figcaption { display: flex; align-items: center; gap: .8rem; }
.oi-quote__avatar {
    width: 44px; height: 44px; border-radius: 50%; flex: 0 0 44px;
    display: grid; place-items: center; font-weight: 800; font-size: 1.1rem;
    background: var(--oi-accent); color: var(--oi-bg);
}
.oi-quote figcaption strong { display: block; color: var(--oi-ink); font-size: .95rem; }
.oi-quote figcaption em { display: block; color: var(--oi-ink-faint); font-style: normal; font-size: .82rem; }

/* ---- 18.3 Back-to-top --------------------------------------------- */
.oi-top {
    position: fixed; right: 22px; bottom: 88px; z-index: 1049;
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--oi-border);
    display: grid; place-items: center; cursor: pointer; font-size: 15px;
    color: var(--oi-ink); background: var(--oi-glass);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    opacity: 0; pointer-events: none; transform: translateY(8px);
    transition: opacity .3s, transform .3s var(--oi-ease);
}
.oi-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.oi-top:hover { transform: translateY(-3px); }

/* ---- 18.3b Blog ---------------------------------------------------- */
.oi-post-card { display: flex; flex-direction: column; }
.oi-post-card__cover {
    height: 160px; margin: -1.8rem -1.8rem 1.2rem; border-radius: var(--oi-radius) var(--oi-radius) 0 0;
    background-size: cover; background-position: center;
}
.oi-post-card__date { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--oi-ink-faint); margin-bottom: .5rem; }
.oi-post-card p { flex: 1; }
.oi-post-card__more { color: var(--oi-accent); font-weight: 700; font-size: .9rem; margin-top: .8rem; }
.oi-post__cover { height: clamp(200px, 34vw, 380px); border-radius: var(--oi-radius); background-size: cover; background-position: center; margin: 1.2rem 0 2rem; border: 1px solid var(--oi-border); }
.oi-post__body { color: var(--oi-ink-soft); font-size: 1.06rem; line-height: 1.85; }
.oi-post__body h2, .oi-post__body h3 { color: var(--oi-ink); font-family: var(--oi-font-display); margin: 1.8rem 0 .8rem; }
.oi-post__body img { max-width: 100%; border-radius: var(--oi-radius-sm); }
.oi-post__body blockquote { border-left: 3px solid var(--oi-accent); padding-left: 1.2rem; color: var(--oi-ink); font-style: italic; }
.oi-post__body pre { padding: 1rem 1.2rem; border-radius: var(--oi-radius-sm); overflow-x: auto; }
.oi-post__body a { text-decoration: underline; }
/* categories filter + tags */
.oi-blog-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.oi-chip {
    display: inline-flex; align-items: center; padding: .45rem 1rem; border-radius: 100px;
    font-size: .85rem; font-weight: 700; text-decoration: none !important;
    color: var(--oi-ink-soft) !important; background: var(--oi-surface); border: 1px solid var(--oi-border);
    transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.oi-chip:hover { transform: translateY(-2px); color: var(--oi-ink) !important; border-color: rgba(var(--oi-accent-rgb),.4); }
.oi-chip.is-active { background: var(--oi-accent); color: var(--oi-bg) !important; border-color: var(--oi-accent); }
.oi-post-card__meta { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.oi-post-card__cat {
    display: inline-block; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
    color: var(--oi-accent) !important; background: rgba(var(--oi-accent-rgb),.12);
    padding: .2rem .6rem; border-radius: 100px; text-decoration: none !important;
}
:root[data-theme="dark"] .oi-post-card__cat { color: #dfe3ea !important; }
.oi-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.oi-tag {
    font-size: .78rem; color: var(--oi-ink-soft) !important; text-decoration: none !important;
    background: var(--oi-surface-2); border: 1px solid var(--oi-border); border-radius: 100px; padding: .2rem .7rem;
    transition: color .2s, border-color .2s;
}
.oi-tag:hover { color: var(--oi-ink) !important; border-color: rgba(var(--oi-accent-rgb),.4); }
/* blog top bar: filter + search */
.oi-blog-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.oi-blog-top .oi-blog-filter { margin-bottom: 0; }
.oi-blog-search { display: flex; align-items: center; gap: .5rem; background: var(--oi-surface); border: 1px solid var(--oi-border); border-radius: 100px; padding: .1rem .3rem .1rem 1rem; min-width: 220px; }
.oi-blog-search i { color: var(--oi-ink-faint); }
.oi-blog-search input { background: transparent; border: 0; outline: none; color: var(--oi-ink); padding: .5rem .3rem; width: 100%; }
.oi-blog-search input::placeholder { color: var(--oi-ink-faint); }

/* ---- 18.5 MarketConnect promos ------------------------------------ */
.mc-promo {
    background: linear-gradient(160deg, var(--oi-surface-2), var(--oi-surface)) !important;
    border: 1px solid var(--oi-border) !important; border-radius: var(--oi-radius) !important;
    color: var(--oi-ink) !important; overflow: hidden; margin-bottom: 1rem;
    transition: border-color .25s, transform .25s var(--oi-ease);
}
.mc-promo:hover { border-color: rgba(var(--oi-accent-rgb),.4) !important; }
.mc-promo .header { color: var(--oi-ink) !important; }
.mc-promo .headline { font-family: var(--oi-font-display); font-weight: 800; color: var(--oi-ink) !important; }
.mc-promo .tagline { color: var(--oi-ink-soft) !important; }
.mc-promo .price { color: var(--oi-ink) !important; font-weight: 800; }
.mc-promo .body { color: var(--oi-ink-soft) !important; border-top: 1px solid var(--oi-border); }
.mc-promo .body ul li i, .mc-promo .fa-check { color: var(--oi-accent) !important; }
.mc-promo .btn-add, .mc-promo .btn {
    background: var(--oi-accent) !important; color: var(--oi-bg) !important; border: 0 !important;
    border-radius: 100px !important; font-weight: 700;
}
.mc-promo .btn-add:hover { filter: brightness(1.06); }
.mc-promo .icon img { border-radius: var(--oi-radius-sm); }
.mc-promo .expander .fa-chevron-right, .mc-promo .rotate { color: var(--oi-ink-faint) !important; }
.marketconnect-product, .mc-landing, .mc-ssl, .mc-spamexperts, .mc-weebly {
    background: var(--oi-surface) !important; border: 1px solid var(--oi-border) !important;
    border-radius: var(--oi-radius) !important; color: var(--oi-ink);
}

/* ---- 18.6 Premium cart summary (viewcart) ------------------------- */
#order-standard_cart .cart-sidebar { position: sticky; top: 90px; }
.summary-container, #ordersummary {
    background: linear-gradient(160deg, var(--oi-surface-2), var(--oi-surface)) !important;
    border: 1px solid var(--oi-border) !important; border-radius: var(--oi-radius) !important;
    padding: 1.5rem !important; box-shadow: var(--oi-shadow);
}
.summary-container h2, .summary-container h3, #ordersummary h2, #ordersummary h3 {
    font-family: var(--oi-font-display); font-weight: 800; color: var(--oi-ink); font-size: 1.15rem;
}
.summary-container .cart-total, #ordersummary .cart-total { font-size: 1.3rem; }
.promotion-code, .promo-code, .apply-promo-code {
    background: var(--oi-surface) !important; border: 1px dashed var(--oi-border) !important;
    border-radius: var(--oi-radius-sm) !important; padding: .9rem !important;
}

/* ---- 18.3c Cookie consent banner ---------------------------------- */
.oi-cookie {
    position: fixed; left: 18px; right: 18px; bottom: 18px; z-index: 1055;
    max-width: 640px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap;
    padding: 1rem 1.3rem; border-radius: var(--oi-radius);
    background: var(--oi-glass); border: 1px solid var(--oi-border);
    -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
    box-shadow: var(--oi-shadow); color: var(--oi-ink);
    opacity: 0; transform: translateY(16px); transition: opacity .4s var(--oi-ease), transform .4s var(--oi-ease);
}
.oi-cookie.is-in { opacity: 1; transform: none; }
.oi-cookie__msg { flex: 1; min-width: 200px; font-size: .9rem; color: var(--oi-ink-soft); line-height: 1.5; }
.oi-cookie__link { color: var(--oi-accent) !important; text-decoration: underline; white-space: nowrap; }
:root[data-theme="dark"] .oi-cookie__link { color: #dfe3ea !important; }
.oi-cookie__btns { display: flex; gap: .5rem; align-items: center; }
.oi-cookie__decline {
    background: transparent; border: 1px solid var(--oi-border); color: var(--oi-ink-soft);
    border-radius: 100px; padding: .55rem 1.1rem; font-weight: 600; cursor: pointer; font-size: .88rem;
    transition: background .2s, color .2s;
}
.oi-cookie__decline:hover { background: var(--oi-surface); color: var(--oi-ink); }
.oi-cookie__accept {
    background: var(--oi-accent); border: 0; color: var(--oi-bg);
    border-radius: 100px; padding: .55rem 1.3rem; font-weight: 700; cursor: pointer; font-size: .88rem;
    box-shadow: 0 8px 20px -10px rgba(var(--oi-accent-rgb), .5); transition: transform .25s var(--oi-ease), filter .2s;
}
.oi-cookie__accept:hover { transform: translateY(-1px); filter: brightness(1.05); }
@media (max-width: 520px) { .oi-cookie { flex-direction: column; align-items: stretch; text-align: center; } .oi-cookie__btns { justify-content: center; } }

/* ---- 18.4 RTL (Arabic) -------------------------------------------- */
html[dir="rtl"] body { text-align: right; }
html[dir="rtl"] .oi-theme-toggle { right: auto; left: 22px; }
html[dir="rtl"] .oi-top { right: auto; left: 22px; bottom: 88px; }
html[dir="rtl"] .navbar-nav .nav-link::after { transform-origin: right; }
html[dir="rtl"] .oi-footer__col a:hover { transform: translateX(-3px); }
html[dir="rtl"] .cart-sidebar .list-group-item:hover { transform: translateX(-3px); }
html[dir="rtl"] .oi-plan__features li,
html[dir="rtl"] .products .product .product-desc ul li { padding: .45rem 1.7rem .45rem 0; }
html[dir="rtl"] .oi-plan__features li::before,
html[dir="rtl"] .products .product .product-desc ul li::before { left: auto; right: 0; }
html[dir="rtl"] .oi-announce .oi-announce-close { right: auto; left: 14px; }
html[dir="rtl"] .oi-hero h1, html[dir="rtl"] .oi-section__head h2 { letter-spacing: 0; }
html[dir="rtl"] .oi-chip:hover, html[dir="rtl"] .oi-post-card__more { }
html[dir="rtl"] .oi-post-card__more i { transform: scaleX(-1); }
html[dir="rtl"] .oi-dash-hero { text-align: right; }

/* =====================================================================
   19. CLIENT-AREA PREMIUM (services, tickets, domains, account, invoice)
   ===================================================================== */

/* ---- 19.1 Cards everywhere: lift + premium header ----------------- */
#main-body .card {
    background: var(--oi-surface) !important; border: 1px solid var(--oi-border) !important;
    border-radius: var(--oi-radius) !important; overflow: hidden;
}
#main-body .card > .card-header,
#main-body .card > .card-body > h2:first-child { font-family: var(--oi-font-display); }
.card-header { background: var(--oi-surface-2) !important; border-bottom: 1px solid var(--oi-border) !important; font-weight: 700; }

/* ---- 19.2 Service details ----------------------------------------- */
.product-details-tab, #productDetailsContainer .nav-tabs { margin-bottom: 1.4rem; }
/* the service hero / summary block */
.domain-header, .product-details-header, .service-header {
    background: radial-gradient(60% 130% at 85% -20%, rgba(var(--oi-accent-rgb),.12), transparent 60%),
                linear-gradient(160deg, var(--oi-surface-2), var(--oi-surface)) !important;
    border: 1px solid var(--oi-border) !important; border-radius: var(--oi-radius) !important;
    padding: 1.6rem 1.8rem !important; color: var(--oi-ink); margin-bottom: 1.4rem;
}
/* management action buttons (sidebar btn-block list) */
.list-group .btn-block, .service-actions .btn-block, .sidebar .btn-block { margin-bottom: .55rem; }
.btn-block {
    text-align: left; border-radius: var(--oi-radius-sm) !important; font-weight: 600;
    padding: .7rem 1rem !important;
}
.btn-block i, .btn-block .fa { margin-right: .5rem; color: var(--oi-accent); }
/* usage bars on service details */
.progress { height: 10px; border-radius: 100px; background: var(--oi-surface-2); overflow: hidden; }
.progress-bar { background: linear-gradient(90deg, var(--oi-accent), var(--oi-accent-2)) !important; border-radius: 100px; }
.usage-billing .progress, .product-usage .progress { margin: .4rem 0 1rem; }

/* ---- 19.3 Support ticket conversation (chat bubbles) -------------- */
.ticket-reply {
    background: var(--oi-surface) !important; border: 1px solid var(--oi-border) !important;
    border-radius: var(--oi-radius) !important; padding: 1.2rem 1.4rem !important; margin-bottom: 1rem;
    position: relative;
}
.ticket-reply .posted-by, .ticket-reply .reply-header {
    display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem;
    padding-bottom: .7rem; border-bottom: 1px solid var(--oi-border); font-weight: 600; color: var(--oi-ink);
}
.ticket-reply .message, .ticket-reply .reply-content { color: var(--oi-ink-soft); line-height: 1.7; }
/* staff replies: accent-tinted, offset to the side */
.ticket-reply.staff {
    background: linear-gradient(160deg, rgba(var(--oi-accent-rgb),.08), var(--oi-surface)) !important;
    border-color: rgba(var(--oi-accent-rgb),.3) !important; border-left: 3px solid var(--oi-accent) !important;
}
.ticket-reply.staff .posted-by::before {
    content: "\f508"; font-family: "Font Awesome 6 Pro","Font Awesome 6 Free"; font-weight: 900;
    color: var(--oi-accent); margin-right: .2rem;
}
.ticket-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1.2rem 0; }
.ticket-actions .btn { border-radius: 100px !important; }
.ticket-status, .status-open, .status-answered, .status-closed { border-radius: 100px; padding: .3em .9em; font-weight: 700; }

/* ---- 19.4 Data tables (domains, services, invoices, emails) ------- */
.table-container, .table-list-container {
    background: var(--oi-surface); border: 1px solid var(--oi-border);
    border-radius: var(--oi-radius); overflow: hidden;
}
.table-list, table.table {
    margin: 0; color: var(--oi-ink);
}
.table-list thead th, table.table thead th {
    background: var(--oi-surface-2); border: 0 !important; color: var(--oi-ink-soft);
    text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; font-weight: 700; padding: .9rem 1rem;
}
.table-list tbody td, table.table tbody td { border-color: var(--oi-border) !important; padding: .9rem 1rem; vertical-align: middle; }
.table-list tbody tr, table.table tbody tr { transition: background .18s; }
.table-list tbody tr:hover, table.table tbody tr:hover { background: var(--oi-surface-2); }
.table-list .btn-group .btn, .table .btn-group .btn { border-radius: 100px !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important; border: 1px solid var(--oi-border) !important; color: var(--oi-ink) !important; background: var(--oi-surface) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--oi-accent) !important; color: var(--oi-bg) !important; border-color: var(--oi-accent) !important; }

/* ---- 19.5 Account details / forms (tabbed) ----------------------- */
.clientareadetails .card, .account-page .card { margin-bottom: 1.2rem; }
.form-group.row > label.control-label, .col-form-label { color: var(--oi-ink-soft); font-weight: 600; }
.nav-tabs .nav-item .nav-link, .nav.nav-tabs > li > a {
    font-weight: 600; color: var(--oi-ink-soft);
}
/* vertical tab navigation (account uses list-group tabs on some pages) */
.list-group-tabs .list-group-item.active, .nav-list-tabs .active {
    background: var(--oi-accent) !important; color: var(--oi-bg) !important; border-color: var(--oi-accent) !important;
}

/* ---- 19.6 Invoice view / payment --------------------------------- */
.invoice, .invoice-container, #invoice, .payment-summary {
    background: var(--oi-surface) !important; border: 1px solid var(--oi-border) !important;
    border-radius: var(--oi-radius) !important; color: var(--oi-ink);
}
.cc-payment-form .card, .invoice-payment .card { background: linear-gradient(160deg, var(--oi-surface-2), var(--oi-surface)) !important; }
.invoice .invoice-header, .invoice h1 { font-family: var(--oi-font-display); font-weight: 800; }
.invoice-status, .paid, .unpaid, .cancelled, .refunded {
    display: inline-block; border-radius: 100px; padding: .35em 1em; font-weight: 700; letter-spacing: .02em;
}
.paid, .invoice-status-paid { background: rgba(31,190,107,.16) !important; color: #37d98a !important; }
.unpaid, .invoice-status-unpaid { background: rgba(245,181,68,.16) !important; color: #f7c877 !important; }
.cancelled, .refunded { background: var(--oi-surface-2) !important; color: var(--oi-ink-soft) !important; }
.invoice-items-table th { background: var(--oi-surface-2); }

/* ---- 19.7 Affiliates / addfunds / quotes ------------------------- */
.affiliate-stats, .affiliates-summary { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 1rem; }
.affiliate-stat, .addfunds-panel, .quote-summary {
    background: var(--oi-surface); border: 1px solid var(--oi-border); border-radius: var(--oi-radius); padding: 1.4rem;
}
.affiliate-link input, .referral-link input { background: var(--oi-surface-2) !important; }

/* ---- 19.8 Generic: page section headings inside client area ------ */
#main-body h2.h2, #main-body .clientarea-title { font-family: var(--oi-font-display); font-weight: 800; letter-spacing: -.01em; color: var(--oi-ink); }
#main-body .alert { border-radius: var(--oi-radius); }
.select-payment-method .payment-method-item, .payment-methods .method {
    background: var(--oi-surface) !important; border: 1px solid var(--oi-border) !important; border-radius: var(--oi-radius-sm) !important;
}
.select-payment-method .payment-method-item.selected { border-color: var(--oi-accent) !important; }

/* =====================================================================
   20. REBUILT CLIENT-AREA CARDS (services, domains, invoices)
   ===================================================================== */
.oi-cardgrid { display: grid; gap: 1.3rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* shared card scaffolding */
.oi-svc-card, .oi-dom-card {
    display: flex; flex-direction: column; text-decoration: none !important; color: inherit;
    padding: 1.5rem !important; cursor: pointer;
}
.oi-svc-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.oi-svc-card__icon {
    width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
    background: var(--oi-surface-2); border: 1px solid var(--oi-border); color: var(--oi-accent); font-size: 1.15rem;
}
.oi-svc-card__name, .oi-dom-card__name {
    font-family: var(--oi-font-display); font-weight: 800; font-size: 1.15rem; color: var(--oi-ink) !important;
    margin: 0 0 .3rem; text-decoration: none !important; letter-spacing: -.01em; word-break: break-word;
}
.oi-svc-card__domain, .oi-dom-card__renew { color: var(--oi-ink-soft); font-size: .88rem; margin-bottom: .3rem; }
.oi-svc-card__domain i, .oi-dom-card__renew i { color: var(--oi-ink-faint); }
.oi-svc-card__meta { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 1rem 0; padding: 1rem 0; border-top: 1px solid var(--oi-border); border-bottom: 1px solid var(--oi-border); }
.oi-svc-card__label { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--oi-ink-faint); margin-bottom: .2rem; }
.oi-svc-card__val { color: var(--oi-ink); font-weight: 700; font-size: .95rem; }
.oi-svc-card__val small { color: var(--oi-ink-soft); font-weight: 400; }
.oi-svc-card__cta { margin-top: auto; color: var(--oi-accent); font-weight: 700; font-size: .9rem; display: inline-flex; align-items: center; gap: .4rem; text-decoration: none !important; }
:root[data-theme="dark"] .oi-svc-card__cta { color: #dfe3ea; }
.oi-svc-card:hover .oi-svc-card__cta i, .oi-dom-card:hover .oi-svc-card__cta i { transform: translateX(3px); }
.oi-svc-card__cta i { transition: transform .25s var(--oi-ease); }
.oi-dom-card__check input { width: 18px; height: 18px; cursor: pointer; }

/* status badges (WHMCS .label.status) */
.label.status, .status.label { display: inline-block; border-radius: 100px; padding: .32em .85em; font-weight: 700; font-size: .72rem; letter-spacing: .02em; text-transform: capitalize; }
.status-active, .status-paid, .label-active { background: rgba(31,190,107,.16) !important; color: #37d98a !important; }
.status-pending, .status-unpaid { background: rgba(245,181,68,.16) !important; color: #f7c877 !important; }
.status-terminated, .status-cancelled, .status-suspended, .status-expired, .status-fraud, .status-overdue { background: rgba(239,77,90,.16) !important; color: #ff8a93 !important; }
.status-completed, .status-refunded, .status-collections { background: var(--oi-surface-2) !important; color: var(--oi-ink-soft) !important; }

/* domain bulk-action toolbar */
.oi-domain-actions .btn { border-radius: 100px !important; margin-right: .4rem; }

/* invoice list rows */
.oi-inv-list { display: flex; flex-direction: column; gap: .7rem; }
.oi-inv-row {
    display: grid; grid-template-columns: 2fr 1.3fr 1fr 1fr auto; align-items: center; gap: 1rem;
    padding: 1rem 1.3rem; text-decoration: none !important; color: inherit;
    background: var(--oi-surface); border: 1px solid var(--oi-border); border-radius: var(--oi-radius);
    transition: transform .25s var(--oi-ease), border-color .25s, background .25s;
}
.oi-inv-row:hover { transform: translateX(4px); border-color: rgba(var(--oi-accent-rgb),.4); background: var(--oi-surface-2); }
.oi-inv-row__num { display: flex; align-items: center; gap: .8rem; }
.oi-inv-row__hash { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--oi-surface-2); border: 1px solid var(--oi-border); color: var(--oi-accent); flex: 0 0 42px; }
.oi-inv-row__num strong { display: block; color: var(--oi-ink); font-weight: 700; }
.oi-inv-row__num small { color: var(--oi-ink-faint); font-size: .78rem; }
.oi-inv-row__due span:last-child { color: var(--oi-ink); font-weight: 600; }
.oi-inv-row__total { font-family: var(--oi-font-display); font-weight: 800; font-size: 1.1rem; color: var(--oi-ink); }
.oi-inv-row__go { color: var(--oi-ink-faint); }
@media (max-width: 640px) {
    .oi-inv-row { grid-template-columns: 1fr auto; }
    .oi-inv-row__due, .oi-inv-row__go { display: none; }
}

/* ticket rows (4 columns) + unread */
.oi-ticket-row { grid-template-columns: 2fr 1.3fr 1fr auto; }
.oi-ticket-row.is-unread { border-color: rgba(var(--oi-accent-rgb),.45); }
.oi-ticket-row .ticket-subject.unread { font-weight: 800; }
.oi-unread-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--oi-accent); margin-right: .5rem; vertical-align: middle; }
@media (max-width: 640px) { .oi-ticket-row { grid-template-columns: 1fr auto; } }

/* empty states */
.oi-empty { grid-column: 1 / -1; text-align: center; padding: 3.5rem 1.5rem; background: var(--oi-surface); border: 1px dashed var(--oi-border); border-radius: var(--oi-radius); color: var(--oi-ink-soft); }
.oi-empty .oi-tile__icon { color: var(--oi-accent); }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    [data-oi-reveal] { opacity: 1; transform: none; }
}
/* master animation kill-switch (admin toggle writes .oi-no-motion on <html>) */
.oi-no-motion *, .oi-no-motion *::before, .oi-no-motion *::after { animation: none !important; transition: none !important; }
.oi-no-motion [data-oi-reveal] { opacity: 1 !important; transform: none !important; }