/* ==========================================================================
   POT Portal — UNIFIED SITE CHROME
   Header + footer cloned from the cinematic website (pot-site.css), rendered
   from live {$potChrome} data. Loaded after pot-portal.css so it wins over the
   older nexus-header styling. Reuses the --pot-* tokens.
   ========================================================================== */

/* shared shell width (matches the site's 1320px container) */
.pot-chrome-header .pot-shell,
.pot-context-bar .pot-shell { max-width: 1320px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }

/* ---- page-transition progress bar ---- */
#potProgress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 4000;
    background: var(--pot-grad); box-shadow: 0 0 10px rgba(255,138,0,.55);
    opacity: 0; transition: width .25s ease, opacity .3s ease; pointer-events: none;
}
#potProgress.on { opacity: 1; }

/* ===================== header ===================== */
#header.pot-chrome-header {
    position: sticky; top: 0; z-index: 1030;
    background: rgba(10,5,22,.72);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--pot-line);
    box-shadow: 0 1px 0 rgba(255,170,80,.14);
}
/* When a modal is open, the glass header's backdrop-filter would otherwise
   composite over the modal's top edge. Drop it below the modal + kill the blur
   while the modal is open so the popup is never hidden behind the header. */
body.modal-open #header.pot-chrome-header {
    z-index: 1 !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
/* The language modal is wrapped in a <form> that an older rule made
   position:relative;z-index:1 — that stacking context trapped the modal BELOW
   the body-level backdrop. Neutralise the wrapper so the modal stacks normally. */
.pot-lang-form { position: static !important; z-index: auto !important; }
/* Centre the language/localisation modal in the viewport (was top-anchored, which
   left a big dimmed area and made it feel unclickable) + pin it above the backdrop. */
.modal-localisation { z-index: 1060 !important; }
.modal-localisation .modal-dialog { display: flex; align-items: center; min-height: calc(100% - 3.5rem); margin-top: 1.75rem; margin-bottom: 1.75rem; }

/* utility strip (notifications / active client / masquerade) */
.pot-chrome-header .pot-utility { border-bottom: 1px solid var(--pot-line); background: rgba(0,0,0,.22); font-size: 12.5px; }
.pot-chrome-header .pot-utility .pot-shell { display: flex; align-items: center; min-height: 36px; }
.pot-chrome-header .pot-utility .btn { color: var(--pot-dim); background: transparent; border: 0; font-size: 12.5px; box-shadow: none; }
.pot-chrome-header .pot-utility .btn:hover { color: var(--pot-orange-bright); }
.pot-chrome-header .pot-utility .input-group-text { background: transparent; border: 0; color: var(--pot-faint); padding: 0 8px; }
.pot-chrome-header .pot-utility .btn-active-client { color: var(--pot-text); }

/* main site bar */
.pot-sitebar .pot-shell { display: flex; align-items: center; gap: 22px; min-height: 64px; }
.pot-brand { display: flex; align-items: center; flex: 0 0 auto; }
.pot-brand-logo { max-height: 42px; width: auto; display: block; }
.pot-sitenav { flex: 1 1 auto; min-width: 0; }
.pot-sitenav-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.pot-nav-item { position: relative; }
.pot-nav-item > a {
    display: flex; align-items: center; gap: 5px; padding: 10px 13px;
    color: var(--pot-dim); text-decoration: none; font-size: 14.5px; font-weight: 500;
    border-radius: 9px; transition: color .18s, background .18s; white-space: nowrap;
}
.pot-nav-item > a:hover { color: var(--pot-orange-bright); }
.pot-caret { font-size: 10px; opacity: .7; }

/* dropdowns (dark glass, matching site) */
.pot-subnav {
    position: absolute; top: calc(100% + 6px); left: 0; min-width: 212px;
    list-style: none; margin: 0; padding: 8px;
    background: rgba(13,7,32,.97); border: 1px solid var(--pot-line-2);
    border-radius: 0 0 14px 14px;
    box-shadow: 0 22px 55px rgba(0,0,0,.55), 0 0 0 1px rgba(255,170,80,.12);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s; z-index: 1050;
}
.pot-nav-item.has-children:hover > .pot-subnav,
.pot-nav-item.has-children:focus-within > .pot-subnav,
.pot-account.has-children:hover > .pot-subnav,
.pot-account.has-children:focus-within > .pot-subnav { opacity: 1; visibility: visible; transform: translateY(0); }
.pot-subnav li a { display: flex; align-items: center; gap: 9px; padding: 9px 12px; color: var(--pot-dim); text-decoration: none; font-size: 13.5px; border-radius: 8px; transition: .16s; white-space: nowrap; }
.pot-subnav li a:hover { color: var(--pot-orange-bright); background: rgba(255,138,0,.08); }
.pot-subnav-right { left: auto; right: 0; }
.pot-sub-sep { border-top: 1px solid var(--pot-line); margin-top: 6px; padding-top: 6px; }

/* tools cluster */
.pot-tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-inline-start: auto; }
.pot-tool { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 0; color: var(--pot-dim); cursor: pointer; font-size: 14px; padding: 8px; border-radius: 9px; transition: .18s; }
.pot-tool:hover { color: var(--pot-orange-bright); }
.pot-tool-lbl { font-size: 13px; }
.pot-search { display: flex; align-items: center; background: var(--pot-glass); border: 1px solid var(--pot-line); border-radius: 999px; overflow: hidden; }
.pot-search-btn { background: transparent; border: 0; color: var(--pot-faint); padding: 7px 10px; cursor: pointer; }
.pot-search-input { background: transparent; border: 0; outline: 0; color: var(--pot-text); font-size: 13px; width: 0; padding: 0; transition: width .25s, padding .25s; }
.pot-search:focus-within .pot-search-input, .pot-search:hover .pot-search-input { width: 158px; padding-right: 12px; }
.pot-cart { position: relative; }
#cartItemCount.pot-cart-badge { position: absolute; top: -3px; right: -5px; background: var(--pot-grad); color: #3a1d00; font-size: 10px; font-weight: 700; min-width: 17px; height: 17px; line-height: 17px; text-align: center; border-radius: 999px; padding: 0 4px; text-shadow: none; }
.pot-login-btn { background: var(--pot-grad); color: #fff; font-weight: 600; font-size: 14px; padding: 8px 18px; border-radius: 999px; text-decoration: none; text-shadow: 0 1px 2px rgba(74,42,0,.5); box-shadow: 0 8px 24px rgba(216,150,20,.3); white-space: nowrap; }
.pot-login-btn:hover { color: #fff; transform: translateY(-1px); }
.pot-account { position: relative; }
.pot-account-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--pot-line-2); border-radius: 999px; padding: 5px 12px 5px 6px; color: var(--pot-text); text-decoration: none; font-size: 13.5px; }
.pot-account-btn:hover { color: var(--pot-text); border-color: var(--pot-orange); }
.pot-ava { width: 24px; height: 24px; border-radius: 50%; background: var(--pot-grad); display: grid; place-items: center; color: #3a1d00; font-size: 11px; }
.pot-burger { display: none; background: transparent; border: 0; color: var(--pot-dim); font-size: 18px; padding: 8px; cursor: pointer; }

/* ===================== context bar (WHMCS account nav) ===================== */
.pot-context-bar { background: rgba(13,7,32,.55); border-bottom: 1px solid var(--pot-line); }
.pot-context-bar .pot-shell { display: flex; }
.pot-context-bar .navbar-nav { display: flex; flex-direction: row; flex-wrap: wrap; gap: 2px; list-style: none; margin: 0; padding: 0; }
/* the context bar keeps the .main-navbar-wrapper class (so pot-nav-icons.js
   decorates it) but that brings a 40px item gap meant for the old wide menu —
   tighten it so the tabs sit close like the site nav. */
.pot-context-bar.main-navbar-wrapper .navbar-nav { gap: 4px !important; }
.pot-context-bar .navbar-nav > li { position: relative; }
.pot-context-bar .navbar-nav > li > a, .pot-context-bar .nav-link {
    display: flex; align-items: center; gap: 8px; padding: 12px 14px;
    color: var(--pot-dim); font-size: 13.5px; text-decoration: none;
    border-bottom: 2px solid transparent; transition: .18s; background: transparent;
}
.pot-context-bar .navbar-nav > li > a:hover, .pot-context-bar .nav-link:hover { color: var(--pot-orange-bright); }
.pot-context-bar .navbar-nav > li.active > a, .pot-context-bar .navbar-nav > li > a.active { color: var(--pot-text); border-bottom-color: var(--pot-orange); }
.pot-context-bar .pot-nav-ic, .pot-context-bar .pot-nav-svg { width: 17px; height: 17px; display: inline-flex; }
/* context-bar dropdowns match the site header dropdowns (.pot-subnav): dark glass,
   rounded, comfortable item spacing (were cramped as WHMCS default .dropdown-menu) */
.pot-context-bar .dropdown-menu {
    background: rgba(13,7,32,.97) !important; border: 1px solid var(--pot-line-2) !important;
    border-radius: 14px !important; padding: 8px !important; min-width: 224px;
    box-shadow: 0 22px 55px rgba(0,0,0,.55), 0 0 0 1px rgba(255,170,80,.12) !important;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.pot-context-bar .dropdown-menu > li > a,
.pot-context-bar .dropdown-menu .dropdown-item,
.pot-context-bar .dropdown-menu a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px !important; margin: 0; border-radius: 8px;
    color: var(--pot-dim) !important; font-size: 13.5px; line-height: 1.35; white-space: nowrap;
}
.pot-context-bar .dropdown-menu a:hover,
.pot-context-bar .dropdown-menu .dropdown-item:hover { color: var(--pot-orange-bright) !important; background: rgba(255,138,0,.08) !important; }
.pot-context-bar .dropdown-menu .divider, .pot-context-bar .dropdown-menu .dropdown-divider { border-top: 1px solid var(--pot-line); margin: 6px 4px; }

/* ===================== mobile ===================== */
/* Visibility is driven by Bootstrap's collapse (.collapse / .show) toggled by
   the burger — do NOT set an unconditional display:none (that kept the panel
   hidden even after BS added .show). Just hide it on desktop. */
@media (min-width: 992px) { #mainNavbar.pot-mobile { display: none !important; } }
@media (max-width: 991px) {
    .pot-sitenav { display: none; }
    .pot-tools .pot-search.d-none { display: none !important; }
    .pot-burger { display: inline-flex; }
    .pot-context-bar { display: none; }
    .pot-mobile.collapse:not(.show) { display: none; }
    .pot-mobile.collapse.show { display: block; }
    .pot-mobile { padding: 6px 0 16px; border-top: 1px solid var(--pot-line); background: rgba(10,5,22,.92); }
    .pot-mobile .pot-shell { max-width: 100%; padding-left: 22px; padding-right: 22px; }
    .pot-mobile-nav { list-style: none; margin: 0; padding: 0; }
    .pot-mobile-nav > li > a { display: block; padding: 12px 2px; color: var(--pot-text); text-decoration: none; font-size: 15px; border-bottom: 1px solid var(--pot-line); }
    .pot-mobile-nav ul { list-style: none; margin: 0; padding: 2px 0 8px 14px; }
    .pot-mobile-nav ul li a { display: block; padding: 8px 2px; color: var(--pot-faint); font-size: 14px; text-decoration: none; }
    .pot-mobile-nav ul li a:hover, .pot-mobile-nav > li > a:hover { color: var(--pot-orange-bright); }
    .pot-mobile-sep { margin-top: 8px; border-top: 1px solid var(--pot-line-2); padding-top: 4px; }
    .pot-search-mobile { margin: 10px 0 4px; }
    .pot-search-mobile .pot-search-input { width: 100%; padding: 9px 12px; }
}

/* ===================== footer ===================== */
.pot-chrome-footer { position: relative; z-index: 5; border-top: 1px solid var(--pot-line); margin-top: 64px; padding: 50px 0 0; background: linear-gradient(180deg, transparent, rgba(13,7,32,.65)); }
.pot-footer-in { max-width: 1320px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 38px; }
.pot-fbrand { display: flex; align-items: center; gap: 12px; font-family: 'Space Grotesk','Inter',sans-serif; font-weight: 700; font-size: 20px; color: var(--pot-text); }
.pot-fmk { width: 32px; height: 36px; background: var(--pot-grad); clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); display: grid; place-items: center; font-size: 14px; color: #3a1d00; font-weight: 700; box-shadow: 0 0 18px rgba(255,138,0,.45); }
.pot-ftag { color: var(--pot-faint); font-size: 13.5px; margin-top: 13px; line-height: 1.65; max-width: 320px; }
.pot-fpill { display: inline-flex; align-items: center; gap: 8px; margin-top: 15px; font-family: 'JetBrains Mono',monospace; font-size: 12px; color: var(--pot-amber); border: 1px solid var(--pot-line-2); border-radius: 999px; padding: 7px 14px; background: rgba(255,138,0,.06); }
.pot-fdot { width: 7px; height: 7px; border-radius: 50%; background: var(--pot-green); box-shadow: 0 0 10px var(--pot-green); }
.pot-fcol h5 { font-family: 'JetBrains Mono',monospace; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--pot-orange); margin: 0 0 15px; }
.pot-fcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pot-fcol ul a { color: var(--pot-dim); text-decoration: none; font-size: 14px; transition: .18s; }
.pot-fcol ul a:hover { color: var(--pot-orange-bright); }
.pot-foot-bottom { max-width: 1320px; margin: 40px auto 0; padding: 20px 40px 30px; border-top: 1px solid var(--pot-line); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--pot-faint); font-family: 'JetBrains Mono',monospace; font-size: 12.5px; }
.pot-foot-legal a { color: var(--pot-faint); text-decoration: none; }
.pot-foot-legal a:hover { color: var(--pot-orange-bright); }
.pot-foot-soc { display: flex; gap: 10px; }
.pot-foot-soc a { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--pot-line-2); display: grid; place-items: center; color: var(--pot-dim); background: var(--pot-glass); }
.pot-foot-soc a:hover { color: var(--pot-orange-bright); border-color: var(--pot-orange); }
.pot-foot-soc svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; }
@media (max-width: 991px) { .pot-footer-in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 576px) { .pot-footer-in { grid-template-columns: 1fr; padding: 0 22px; } .pot-foot-bottom { padding: 20px 22px 30px; justify-content: center; text-align: center; } }

/* hide the old default footer if anything renders it */
#footer.footer:not(.pot-chrome-footer) { display: none; }

/* footer brand uses the site's live logo mark (synced) instead of the CSS hexagon */
.pot-fmk-img { width: 36px; height: 36px; object-fit: contain; flex: 0 0 auto; }

/* ============================================================================
   INJECTED SITE FOOTER  (.px-footer "trust footer")
   The bridge injects the website's real footer markup; these rules are ported
   from the site (pot-site.css) so it renders identically in the client area.
   --px-* tokens are aliased to our --pot-* palette so colours stay in sync.
   ========================================================================== */
.px-footer {
    --px-text: var(--pot-text); --px-dim: var(--pot-dim); --px-faint: var(--pot-faint);
    --px-amber: var(--pot-amber); --px-orange: var(--pot-orange); --px-orange-br: var(--pot-orange-bright);
    --px-line: var(--pot-line); --px-line2: var(--pot-line-2); --px-glass: var(--pot-glass);
    --px-grad: var(--pot-grad);
    --px-disp: 'Space Grotesk','Inter',sans-serif; --px-mono: 'JetBrains Mono',monospace;
    position: relative; z-index: 5; border-top: 1px solid var(--px-line);
    margin-top: 64px; padding: 50px 0 0; overflow: hidden;
    background: linear-gradient(180deg, transparent, rgba(13,7,32,.65));
    color: var(--px-dim);
}
.px-footer::before {
    content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
    width: min(640px, 80%); height: 2px; opacity: .7;
    background: linear-gradient(90deg, transparent, var(--px-orange-br), transparent);
}
.px-footer-in { max-width: 1320px; margin: 0 auto; padding: 0 40px; }
.px-footer-in.px-footer-trust { display: grid; grid-template-columns: 1.5fr 1fr; gap: 54px; align-items: center; }
/* brand column */
.px-footer .fbrand { display: flex; align-items: center; gap: 12px; font-family: var(--px-disp); font-weight: 700; font-size: 23px; color: var(--px-text); }
.px-footer .fmk-img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.px-footer .ftag { color: var(--px-faint); font-size: 14.5px; margin-top: 14px; line-height: 1.65; max-width: 360px; }
.px-footer .fpill { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-family: var(--px-mono); font-size: 12px; color: var(--px-amber); border: 1px solid var(--px-line2); border-radius: 999px; padding: 7px 14px; background: rgba(255,138,0,.06); }
.px-footer .fdot { width: 7px; height: 7px; border-radius: 50%; background: #37e08a; box-shadow: 0 0 10px #37e08a; }
.px-footer .px-foot-soc { display: flex; gap: 10px; margin-top: 24px; }
.px-footer .px-foot-soc a { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--px-line2); display: grid; place-items: center; color: var(--px-dim); background: var(--px-glass); transition: .18s; }
.px-footer .px-foot-soc a:hover { color: var(--px-orange-br); border-color: var(--px-orange); }
.px-footer .px-foot-soc svg { width: 17px; height: 17px; }
/* trust card */
.px-footer .fcol-trust { display: flex; flex-direction: column; align-items: flex-end; }
.px-footer .ftrust-card { width: 100%; max-width: 400px; border: 1px solid var(--px-line2); border-radius: 18px; padding: 22px 24px; background: linear-gradient(150deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); box-shadow: 0 18px 50px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.10); }
.px-footer .ftrust-head { display: flex; align-items: center; gap: 10px; font-family: var(--px-mono); font-size: 12.5px; letter-spacing: .4px; color: var(--px-amber); margin-bottom: 16px; }
.px-footer .ftrust-head svg { width: 17px; height: 17px; flex: none; color: var(--px-orange-br); }
.px-footer .fpay-row { display: flex; flex-wrap: wrap; gap: 9px; }
.px-footer .fpm { height: 30px; display: inline-flex; border-radius: 6px; overflow: hidden; border: 1px solid rgba(255,255,255,.55); box-shadow: 0 2px 7px rgba(0,0,0,.4); transition: transform .18s; }
.px-footer .fpm:hover { transform: translateY(-2px); }
.px-footer .fpm svg { height: 30px; width: auto; display: block; }
.px-footer .ftrust-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--px-line); }
.px-footer .fssl img { display: block; height: auto; max-width: 152px; }
.px-footer .fbadge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--px-mono); font-size: 12px; color: var(--px-dim); }
.px-footer .fbadge svg { width: 17px; height: 17px; color: var(--pot-green); }
/* bottom bar */
.px-footer .px-foot-bottom { max-width: 1320px; margin: 42px auto 0; padding: 20px 40px 30px; border-top: 1px solid var(--px-line); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--px-faint); font-family: var(--px-mono); font-size: 12.5px; }
.px-footer .px-foot-bottom a { color: var(--px-faint); text-decoration: none; }
.px-footer .px-foot-bottom a:hover { color: var(--px-orange-br); }
/* responsive */
@media (max-width: 991px) {
    .px-footer-in.px-footer-trust { grid-template-columns: 1fr; gap: 30px; }
    .px-footer .fcol-trust { align-items: stretch; }
    .px-footer .ftrust-card { max-width: none; padding: 20px; }
}
@media (max-width: 575px) {
    .px-footer-in { padding: 0 22px; }
    .px-footer .px-foot-bottom { padding: 20px 22px 30px; justify-content: center; text-align: center; }
}
/* RTL (site uses body.rtl; client area uses html[dir=rtl]) */
html[dir="rtl"] .px-footer { direction: rtl; text-align: right; }
html[dir="rtl"] .px-footer .fcol-trust { align-items: flex-start; }
html[dir="rtl"] .px-footer .ftag { max-width: 360px; }