/* ──────────────────────────────────────────────────────────────────────────
   Marketing service-nav — sits on the RIGHT of the existing WHMCS logo row
   (#header .container). Self-contained, scoped under .tns-mkt so it never
   collides with WHMCS's Bootstrap 3. Colours resolved from the marketing
   site's compiled CSS. The logo is WHMCS's own — this adds only the nav.

   NOTE: the NAV band, the PANEL content AND the mobile (<992px) collapse are 1:1
   ports of the marketing structure (app.scss nav-item/underline, _mega-menu.scss
   caret + mobile rules, BS5 .nav-link box / .navbar-toggler / .navbar-collapse)
   and keep marketing's rem/em verbatim: WHMCS root is 16px
   (custom.css html{font-size:1rem}), so 1rem = 16px and the values match exactly.
   ────────────────────────────────────────────────────────────────────────── */

.tns-mkt,
.tns-mkt * { box-sizing: border-box; }

/* Anchor the nav to the logo row without disturbing the logo's own flow.
   .tns-mkt-row = the logo-row container only (header.tpl adds the class) — the
   topBar's .container also sits inside section#header and must stay untouched. */
#header .container.tns-mkt-row { position: relative; z-index: 1; }

/* ── Sticky headroom header (lg+) — port of marketing's .site-header + stickyHeader.js.
      #header wraps the dark .topBar and the white .tns-mkt-band and travels as one unit.
      Default (pre-JS) is position:sticky, so the server HTML paints in-flow reserving its
      own full height — identical to the server markup, NO load jump. marketing-header.js
      measures that height into #tns-mkt-spacer and switches #header to position:fixed
      (.is-detached, same footprint). On scroll it slides away/back (.is-hidden) and compacts
      once hidden (.is-shrunk); a constant full-height spacer + a fixed, off-screen resize
      keep it jump-free. Desktop-only — below 992px #header is a plain in-flow header (the
      mobile block further down still targets #header .container.tns-mkt-row through it). */
@media (min-width: 992px) {
    #header {
        position: sticky;
        top: 0;
        z-index: 1030;      /* marketing header z-index — below BS3 modals (1040+) */
    }
    /* Detached (JS): out of flow, pinned to the viewport top. #tns-mkt-spacer now reserves
       the height, so switching sticky → fixed keeps the exact same footprint. Transition +
       will-change live here (not on plain #header), 1:1 with marketing's .site-header.is-detached
       — .4s, and the permanent will-change layer keeps the header device-pixel-snapped. */
    #header.is-detached {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        transition: transform .4s ease, box-shadow .4s ease;
        will-change: transform;
    }
    /* Headroom slide-away/back — always at FULL size (compact is applied later, off-screen).
       The extra -40px lifts the box-shadow + bottom border fully clear of the viewport top;
       at a plain -100% the header's bottom edge lands at y=0 and its shadow/border bleed back
       into view while hidden. */
    #header.is-hidden { transform: translateY(calc(-100% - 40px)); }

    /* One-frame transition kill for the instant mid-page-refresh compact and for re-measuring. */
    #header.no-anim,
    #header.no-anim .tns-mkt-band,
    #header.no-anim .tns-mkt-band .logo img { transition: none !important; }

    #tns-mkt-spacer { height: 0; }   /* JS sets it to the measured #header height while detached */

    #header .tns-mkt-band {
        background: #fff;
        transition: box-shadow .4s ease, padding .35s ease;   /* shadow .4s = marketing's wrapper; padding .35s = its .navbar */
    }
    /* Subtle base drop shadow, only once scrolled past the top (is-scrolled, JS toggles it at
       40px) — that's when the floating header needs to read as a separate component. At the very
       top, in-flow first paint, and mobile stay flush, no shadow. Lighter than the shrunk state's
       shadow (which deepens further on scroll); the box-shadow transition above animates between. */
    #header.is-scrolled .tns-mkt-band { box-shadow: 0 2px 10px rgba(9, 11, 15, .10); }
    #header .tns-mkt-band .logo img { transition: width .35s ease, margin .35s ease; }

    /* Shrunk state — marketing app.scss header.header-shrunk: drop shadow + smaller logo.
       Now driven by .is-shrunk on the #header wrapper (was .tns-mkt-shrunk on the band). */
    #header.is-shrunk .tns-mkt-band {
        box-shadow: 0 2px 20px rgba(9, 11, 15, .14);
        border-top: 1px solid rgba(9, 11, 15, .08);
        padding: .2rem 0;   /* must stay .2rem (3.1875px effective), matching marketing's
                               header.header-shrunk .navbar padding-y — a 3px integer made the
                               shrunk band 0.375px shorter than marketing, landing the centered
                               nav text 0.1875px off and re-rasterizing it at browser zoom */
    }
    #header.is-shrunk .tns-mkt-band .logo img {
        width: 160px;       /* marketing shrinks the brand 228 → 160 */
        margin-top: 5px;
        margin-bottom: 5px;
    }
    #header.is-shrunk a.tns-mkt-link::after,
    #header.is-shrunk button.tns-mkt-mega-toggle::before {
        margin: 0 auto -17px auto;
    }

    /* Mega-panel drop point per header state. Marketing anchors its panel to the navbar
       container's bottom, which rides the logo/padding shrink; ours is li-anchored, so the
       constant differs per state (derivation in the .tns-mkt-panel rule below): compact
       li bottom is 95.8125 and marketing's compact panel top is 117.0625 → +21.25px (exact,
       16/64). The .35s top transition mirrors the li's own ride on the band's padding/logo
       transitions, so an open panel follows the shrink smoothly like marketing's does. */
    #header .tns-mkt-panel { transition: top .35s ease; }
    #header.is-shrunk .tns-mkt-panel { top: calc(100% + 21.25px); }
}

.tns-mkt {
    position: absolute;
    right: 12px;
    top: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    font-family: inherit;
}

/* ── Nav list — 1:1 with marketing: plain flex row of natural-height items,
      vertically centred in the header row by .tns-mkt's align-items:center
      (standing in for marketing's navbar-container centring). */
.tns-mkt-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
/* = marketing .navbar-nav .nav-item (app.scss:821): padding + font props live here. */
.tns-mkt-item {
    position: relative;
    padding: 0 10px;
    font-weight: 600;
    text-transform: uppercase;
}

/* = BS5 .nav-link: block, .5rem padding, inherited line-height 1.6 → 41.6px box. */
.tns-mkt-link {
    position: relative;
    display: block;
    padding: .5rem;
    background: none;
    border: 0;
    font-family: Arial, Helvetica, sans-serif;   /* matches marketing site's actual rendering */
    font-size: 16px;
    line-height: 1.6;
    font-weight: inherit;
    text-transform: inherit;
    color: #222d3a;
    text-decoration: none;
    cursor: pointer;
    transition: color .15s ease-in-out;
}
.tns-mkt-link:hover,
.tns-mkt-link:focus,
.tns-mkt-link[aria-expanded="true"] { color: #15579c; text-decoration: none; outline: none; }

.tns-mkt-link:focus-visible {
    outline: 1px auto -webkit-focus-ring-color;
}

/* Animated underline (desktop) — marketing verbatim (app.scss:848-901): bar sits on
   a::after for anchor items and button::before for mega toggles (whose ::after is the
   caret); bottom:0 + margin-bottom:-37px pulls it 37px below the link box so it hugs
   the header band's bottom edge. */
@media (min-width: 992px) {
    a.tns-mkt-link::after,
    button.tns-mkt-mega-toggle::before {
        content: "";
        background-color: #15579c;
        width: 0;
        height: 4px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 auto -37px auto;
        transition: width .2s ease;
    }
    a.tns-mkt-link:hover::after,
    button.tns-mkt-mega-toggle:hover::before,
    button.tns-mkt-mega-toggle[aria-expanded="true"]::before { width: 100%; }
}

/* Dropdown caret — on the button's own ::after, marketing verbatim (_mega-menu.scss:26). */
.tns-mkt-mega-toggle::after {
    content: "";
    display: inline-block;
    margin: 0 0 0 .3em;
    vertical-align: .15em;
    border-top: .35em solid currentColor;
    border-right: .3em solid transparent;
    border-left: .3em solid transparent;
    transition: transform .2s ease;
}
.tns-mkt-mega-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

/* ── Mega panel ────────────────────────────────────────────────────────── */
.tns-mkt-panel {
    display: none;
    position: absolute;
    top: calc(100% + 31.140625px);      /* The li is the offset parent, so 100% = link bottom AND the
                                           panel stays centred on THIS trigger (matching marketing,
                                           which centres its dropdown on the trigger — measured
                                           panel-centre 753.58 on both). Marketing's panel top is its
                                           navbar-container bottom = viewport y 140.671875 (full
                                           header); our li bottom is 109.53125, so the offset must be
                                           exactly 31.140625px (9/64 — on the LayoutUnit grid). A
                                           round 31px left the panel 0.14px high, re-rasterizing the
                                           panel text (.mega-item-desc, first items, price sup) vs
                                           marketing at browser zoom. The compact-state offset is
                                           different — see the #header.is-shrunk override in the
                                           lg media block. Desktop only — the mobile block below
                                           makes the panel position:static. */
    right: calc((100% - 577px) / 2);   /* centers the 577px panel on the trigger item */
    z-index: 1000;
    /* Pinned to a fixed 577px because the centering formula above depends on this exact width,
       and the marketing panel content fits within it (two 260px cards + divider ≈ 529px content
       area at 1.5rem padding). If future content ever needs to be wider, bump this AND the
       centering formula together — or switch to escape-to-container centering:
       .tns-mkt-has-mega { position: static } @≥992px + left: 50%; transform: translateX(-50%). */
    width: 577px;
    padding: 1.5rem;                   /* marketing .mega-panel-desktop */
    background-color: #fff;
    border-radius: 1rem;               /* marketing */
    box-shadow: 0 8px 32px rgba(9, 11, 15, .18);
    text-transform: none;
    line-height: 1.6;                  /* marketing $line-height-base (WHMCS body is 1.428) */
}
.tns-mkt-panel.is-open { display: block; }

/* ── Panel content — copied 1:1 from the marketing site (_mega-menu.scss / app.scss),
      scoped under .tns-mkt-panel so the generic Bootstrap-5 utility names further down
      can't collide with WHMCS's Bootstrap 3 globals. rem/em port verbatim now that WHMCS
      root is 16px (custom.css html{font-size:1rem}). ────────────────────────────────── */

/* Two-column card row (Găzduire / Domenii) */
.tns-mkt-panel .hosting-panel-body,
.tns-mkt-panel .domain-panel-body { display: flex; align-items: stretch; }
.tns-mkt-panel .hosting-col-main,
.tns-mkt-panel .hosting-col-aside,
.tns-mkt-panel .domain-col-main,
.tns-mkt-panel .domain-col-aside { flex: 1; min-width: 200px; }
.tns-mkt-panel .hosting-panel-vdivider,
.tns-mkt-panel .domain-panel-vdivider {
    width: 1px;
    background-color: #e9ecef;
    flex-shrink: 0;
    align-self: stretch;
}

/* Card */
.tns-mkt-panel .mega-item {
    display: block;
    position: relative;
    min-width: 200px;
    max-width: 260px;
    padding: 1rem;
    border-radius: .5rem;
    text-decoration: none;
    transition: background-color .15s ease;
}
.tns-mkt-panel .mega-item:hover { background-color: #e7f1fb; text-decoration: none; }
.tns-mkt-panel .hosting-col-main .mega-item,
.tns-mkt-panel .hosting-col-aside .mega-item,
.tns-mkt-panel .domain-col-main .mega-item,
.tns-mkt-panel .domain-col-aside .mega-item { text-align: center; }
.tns-mkt-panel .mega-item-title {
    font-size: .875rem;
    font-weight: 700;
    color: #222d3a;
    margin-bottom: .25rem;
}
/* Card title is a Bootstrap-default underlined link; override WHMCS global a{color:#058}. */
.tns-mkt-panel .mega-item-title a { color: #222d3a; text-decoration: underline; }
.tns-mkt-panel .mega-item-desc {
    font-size: .78rem;
    color: #333e4b;
    font-weight: 400;
    line-height: 1.4;   /* was 1.05rem (absolute 16.8px); marketing _mega-menu.scss:171 uses unitless 1.4 */
    margin: 0;
    max-width: 250px;
}
/* Full-card click target (marketing .card-link-overlay). */
.tns-mkt-panel .card-link-overlay { position: absolute; inset: 0; z-index: 1; }

/* Dividers — 80%-width centered grey rule (overrides BS3 hr margins/colour). */
.tns-mkt-panel .mega-panel-divider {
    border: 0;
    border-top: 1px solid #e9ecef;
    width: 80%;
    margin: 0 auto;
}

/* Section label + section wrapper */
.tns-mkt-panel .mega-section-label {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #333e4b;
    margin-bottom: .5rem;
    text-align: center;
}
.tns-mkt-panel .mega-panel-section { margin-top: .75rem; }

/* Feature columns */
.tns-mkt-panel .features-head {
    display: block;
    font-family: Arial, Helvetica, sans-serif;   /* WHMCS six puts Raleway on h1-h6; marketing heads are Arial */
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #333e4b;
    margin-top: 0;          /* kill BS3 h4{margin-top:10px} leak — marketing head is mt:0 (adds 10px/col otherwise) */
    margin-bottom: .2rem;
    text-align: center;
}
/* Feature links compute dark (#222d3a) on marketing, not the blue link colour; underline
   only on hover. Overrides WHMCS global a{color:#058} + a:hover. */
.tns-mkt-panel .features-title {
    font-size: .865rem;
    font-weight: 300;
    color: #222d3a;
    text-decoration: none;
    transition: color .2s linear;
}
.tns-mkt-panel .features-title:hover { text-decoration: underline; text-underline-offset: 5px; }
.tns-mkt-panel .features-title svg { flex-shrink: 0; }

/* TLD price grid */
.tns-mkt-panel .domain-tld-grid { display: flex; gap: .5rem; }
.tns-mkt-panel .domain-tld-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .5rem .25rem;
    border-radius: .5rem;
    border: 1px solid #98c3f1;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}
.tns-mkt-panel .domain-tld-item:hover { background-color: #e7f1fb; border-color: #15579c; }
.tns-mkt-panel .domain-tld-ext {
    font-size: 1rem;
    font-weight: 700;
    color: #222d3a;
    line-height: 1.2;
}
.tns-mkt-panel .domain-tld-price {
    font-size: .9rem;
    font-weight: 600;
    color: #15579c;
    white-space: nowrap;
}
/* = marketing $sub-sup-font-size: 0.6em (em → scales with the price's own font-size:
   14.4px × .6 = 8.64px). BS3's sup{top:-.5em} then also matches marketing's raise
   automatically, since it resolves against this same font-size. */
.tns-mkt-panel .domain-tld-price sup { font-size: .6em; }

/* ── Scoped Bootstrap-5 utilities the marketing markup relies on ─────────────────────
      Defined under .tns-mkt-panel only, so page-level .row/.col/.d-flex on normal WHMCS
      pages stay untouched. Declarations copied from the compiled marketing app.css;
      !important kept (as Bootstrap does) to reliably beat WHMCS's Bootstrap 3. */
.tns-mkt-panel .row {
    --g: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(-.5 * var(--g));
    margin-left: calc(-.5 * var(--g));
}
/* Kill WHMCS Bootstrap-3's clearfix (.row:before/:after { display:table }) — inside our
   flex row those pseudos become zero-width flex ITEMS, each eating one `gap` and insetting
   the columns (4px/side on gap-1, 8px/side on gap-2). BS5 rows have no clearfix. */
.tns-mkt-panel .row::before,
.tns-mkt-panel .row::after { content: none; }
.tns-mkt-panel .row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--g) * .5);
    padding-left: calc(var(--g) * .5);
}
.tns-mkt-panel .col { flex: 1 0 0%; }
.tns-mkt-panel .d-flex { display: flex !important; }
.tns-mkt-panel .flex-column { flex-direction: column !important; }
.tns-mkt-panel .justify-content-start { justify-content: flex-start !important; }
.tns-mkt-panel .justify-content-center { justify-content: center !important; }
.tns-mkt-panel .align-items-start { align-items: flex-start !important; }
.tns-mkt-panel .align-items-center { align-items: center !important; }
.tns-mkt-panel .gap-1 { gap: .25rem !important; }
.tns-mkt-panel .gap-2 { gap: .5rem !important; }
.tns-mkt-panel .mx-1 { margin-right: .25rem !important; margin-left: .25rem !important; }
.tns-mkt-panel .mt-3 { margin-top: 1rem !important; }
.tns-mkt-panel .mb-0 { margin-bottom: 0 !important; }
.tns-mkt-panel .mb-2 { margin-bottom: .5rem !important; }
.tns-mkt-panel .mb-3 { margin-bottom: 1rem !important; }
.tns-mkt-panel .my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.tns-mkt-panel .px-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
.tns-mkt-panel .py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
.tns-mkt-panel .pt-1 { padding-top: .25rem !important; }
.tns-mkt-panel .pb-2 { padding-bottom: .5rem !important; }
.tns-mkt-panel .rounded { border-radius: .5rem !important; }
.tns-mkt-panel .bg-primary { background-color: #15579c !important; }
.tns-mkt-panel .text-white { color: #fff !important; }
.tns-mkt-panel .fw-light { font-weight: 300 !important; }
.tns-mkt-panel .x-small { font-size: .75rem; line-height: 1rem; }

/* ── Hamburger toggle (mobile) — BS5 .navbar-toggler m-1 clone, values from the
      compiled marketing app.css (padding/font/border/radius 5px = $navbar-toggler-
      border-radius; color/border resolve from --bs-emphasis-color-rgb: 0,0,0). ── */
.tns-mkt-toggle {
    display: none;
    margin: .25rem;                       /* m-1 */
    padding: .25rem .75rem;
    font-family: Arial, Helvetica, sans-serif;  /* marketing body font — WHMCS's Open Sans has
                                                   different metrics, nudging the icon */
    font-size: 1.25rem;
    line-height: 1;
    color: rgba(0, 0, 0, .65);            /* --bs-navbar-color */
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, .15); /* --bs-navbar-toggler-border-color */
    border-radius: 5px;
    cursor: pointer;
    transition: box-shadow .15s ease-in-out;
}
.tns-mkt-toggle:focus {
    outline: 0;
    box-shadow: 0 0 0 .25rem;             /* --bs-navbar-toggler-focus-width, currentColor */
}
/* = BS5 reboot svg{vertical-align:middle} — BS3 has no such rule, so without this the
   icon rides the text baseline and lands ~2.5px higher than on marketing. */
.tns-mkt-toggle svg { vertical-align: middle; }

/* ── TopBar prefs switcher (language • currency) — marketing .prefs-switcher port
      (app.scss:130-190 + compiled BS5 .dropdown-menu). Lives in the dark topBar;
      resets WHMCS BS3's label/input defaults inside the menu. ─────────────── */
.topBar li.tns-prefs { position: relative; }

.tns-prefs-toggle {
    background: transparent;
    border: 0;
    color: #fff;
    font-family: inherit;
    font-size: 13px;                      /* $font-size-xs */
    font-weight: inherit;
    padding: 0 5px;
    line-height: 1.4;
    box-shadow: none;
    cursor: pointer;
}
.tns-prefs-toggle:hover,
.tns-prefs-toggle[aria-expanded="true"] {
    text-decoration: underline;
    text-underline-offset: 5px;           /* $underline-offset */
}
/* BS5 .dropdown-toggle caret, with marketing's tweaks (margin .35em, valign middle)
   and the global expanded-rotation (app.scss:65-66). */
.tns-prefs-toggle::after {
    content: "";
    display: inline-block;
    margin-left: .35em;
    vertical-align: middle;
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-left: .3em solid transparent;
    transition: transform .2s ease;
}
.tns-prefs-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

/* = BS5 .dropdown-menu.dropdown-menu-end.p-0 + marketing .prefs-menu. The topBar's
   z-index:3 stacking context keeps the menu above the header sections below. */
.tns-prefs-menu {
    display: none;
    position: absolute;
    top: calc(100% + .125rem);            /* --bs-dropdown-spacer */
    right: 0;                             /* dropdown-menu-end */
    z-index: 1000;
    min-width: 16rem;
    padding: 0;                           /* p-0 — sections carry their own */
    margin: 0;
    font-size: 13px;
    font-weight: 700;                     /* marketing body is bold — menu inherits it */
    line-height: 1.6;                     /* marketing $line-height-base (WHMCS body is 1.428) */
    text-align: left;
    white-space: normal;                  /* reset topBar's nowrap */
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .175);
    border-radius: .5rem;                 /* --bs-border-radius (customised) */
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}
.tns-prefs-menu.is-open { display: block; }

.tns-prefs-menu .prefs-cols { display: flex; padding: .75rem; }
.tns-prefs-menu .prefs-col { flex: 1 1 0; }
/* = BS5 .vr with marketing's opacity/margin (prefs-cols .vr). */
.tns-prefs-menu .vr {
    display: inline-block;
    align-self: stretch;
    width: 1px;
    min-height: 1em;
    background-color: currentColor;
    opacity: .15;
    margin: 0 .5rem;
}
.tns-prefs-menu .prefs-col-head {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6c757d;                       /* $primary-muted */
    margin-bottom: .4rem;
}
.tns-prefs-menu .prefs-opt {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0;                            /* reset BS3 label{margin-bottom:5px} */
    padding: .25rem .35rem;
    border-radius: .25rem;
    cursor: pointer;
    color: #222d3a;
    font-weight: inherit;                 /* = 700 — marketing labels inherit the bold body */
}
.tns-prefs-menu .prefs-opt:hover { background: rgba(21, 87, 156, .08); }
.tns-prefs-menu .prefs-opt input {
    margin: 0;                            /* reset BS3 input[type=radio]{margin:4px 0 0} */
    cursor: pointer;
}
.tns-prefs-menu .prefs-foot {
    border-top: 1px solid rgba(9, 11, 15, .08);
    padding: .6rem .75rem;
}
.tns-prefs-menu .prefs-apply {
    width: 100%;
    border: 0;
    border-radius: .25rem;
    background: #15579c;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;   /* buttons don't inherit line-height; marketing's does via body */
    padding: .4rem .5rem;
    cursor: pointer;
}
.tns-prefs-menu .prefs-apply:hover { background: #124c89; } /* shade(#15579c, 12%) */

/* ── Mobile / narrow (< 992px) — 1:1 with marketing's collapsed navbar ───
      Marketing: .navbar is a flex-wrap row (brand + toggler on row 1); the
      .navbar-collapse is flex-basis:100%, wraps to row 2 IN FLOW and pushes the
      page down (no floating card). The mega panel becomes a static accordion
      stripped to a plain link list (_mega-menu.scss:78-138). ─────────────── */
@media (max-width: 991.98px) {
    /* TopBar = marketing's .top-nav below lg: the breadcrumb disappears entirely
       (marketing: d-none d-lg-flex — WHMCS's hidden-xs only covers <768px) and the
       portal links centre across the full bar width (app.scss:110-115). */
    .topBar .breadcrumb { display: none; }
    .topBar ul.top-nav {
        width: 100%;
        justify-content: center;
        margin-left: 0;
    }
    /* With the links centred, the end-aligned prefs menu would hang off the left
       viewport edge; marketing's Popper flips it to start-alignment here — mirror that. */
    .tns-prefs-menu { right: auto; left: 0; }

    /* The logo-row container becomes marketing's navbar row. 12px gutter = BS5
       container padding-x at all widths (WHMCS BS3 would give 15px under 768);
       .5rem vertical = BS5 .navbar padding-y, which lives OUTSIDE the flex rows —
       so the wrapped menu row starts flush under the logo image and the 8px
       breathing room ends up below the open menu, exactly like marketing. */
    #header .container.tns-mkt-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding: .5rem 12px;
    }
    /* Kill WHMCS BS3's clearfix here: inside the flex row the .container:before/:after
       pseudos become zero-width flex ITEMS at both ends, and with space-between THEY
       take the edge positions, squeezing logo and toggler ~48px inward. */
    #header .container.tns-mkt-row::before,
    #header .container.tns-mkt-row::after { content: none; }
    /* = marketing .navbar-brand d-flex align-items-center py-0 my-0: flexing the
       anchor removes the inline-baseline descender (~5px) under the image, and the
       img margins move onto the container padding above (custom.css sets 8/8 for
       the desktop band — this file loads after custom.css, so these win here). */
    #header .logo { display: flex; align-items: center; }
    section#header .logo img { margin-top: 0; margin-bottom: 0; }
    /* Dissolve the wrapper: toggler + <ul> become flex items of the container,
       mirroring marketing's brand/toggler/collapse SIBLING structure. The desktop
       absolute positioning becomes moot. */
    .tns-mkt { display: contents; }

    .tns-mkt-toggle { display: block; }

    /* = .navbar-collapse: full-width second row, in normal flow. */
    .tns-mkt-nav {
        display: none;
        position: static;
        flex-basis: 100%;
        width: 100%;
        flex-direction: column;
    }
    .tns-mkt-nav.is-open { display: flex; }
    /* = Bootstrap .collapsing (height animated by JS between 0 and scrollHeight). */
    .tns-mkt-nav.tns-mkt-collapsing {
        display: flex;
        flex-direction: column;
        flex-basis: 100%;
        width: 100%;
        height: 0;
        overflow: hidden;
        transition: height .35s ease;
    }

    /* Items keep the base padding:0 10px / fw600 / uppercase — no separators,
       exactly like marketing. Links = collapsed BS5 nav-link: padding .5rem 0. */
    .tns-mkt-link { padding: .5rem 0; }

    /* ── Panels become static accordions, content adapted to a simple link list. */
    .tns-mkt-panel {
        position: static;
        display: none;
        width: auto;
        max-width: none;
        box-shadow: none;
        border-radius: 0;
        padding: 0;   /* items carry their own padding */
    }
    .tns-mkt-panel.is-open { display: block; }

    /* Marketing hides everything but the item links on mobile: descriptions,
       the "Servicii incluse…" footer, dividers, the TLD/price section. */
    .tns-mkt-panel .mega-item-desc,
    .tns-mkt-panel .mega-panel-footer,
    .tns-mkt-panel .mega-panel-divider,
    .tns-mkt-panel .mega-panel-section,
    .tns-mkt-panel .hosting-panel-vdivider,
    .tns-mkt-panel .domain-panel-vdivider { display: none; }

    .tns-mkt-panel .hosting-panel-body,
    .tns-mkt-panel .domain-panel-body { flex-direction: column; }

    .tns-mkt-panel .mega-item {
        min-width: 0;
        max-width: none;
        padding: .375rem 1rem;
        border-radius: 0;
    }
    .tns-mkt-panel .mega-item-title { font-weight: 400; text-align: left; }
    .tns-mkt-panel .hosting-col-main .mega-item,
    .tns-mkt-panel .hosting-col-aside .mega-item,
    .tns-mkt-panel .domain-col-main .mega-item,
    .tns-mkt-panel .domain-col-aside .mega-item { text-align: left; }
}