/* ============================================================================
   POT PORTAL — Cinematic client-area theme layer for WHMCS "twenty-one"
   Loaded after dark.theme.min.css (wins the cascade). Internal testing only.
   Harmonized with the POT website: deep space dark, glassmorphism, brand gradient.
   Authored with logical properties (margin-inline / text-align:start) for RTL.
   ========================================================================== */

:root {
    --pot-orange:        #ff8a00;
    --pot-orange-bright: #ffb43d;
    --pot-amber:         #ffcf6b;
    --pot-plum:          #7b34d6;
    --pot-crimson:       #cc1f3c;
    --pot-green:         #23c483;

    --pot-bg:      #070310;
    --pot-bg2:     #0d0720;
    --pot-panel:   #140b26;
    --pot-panel2:  #1b1033;

    --pot-text:  #fbf6ff;
    --pot-dim:   #b9aed3;
    --pot-faint: #827798;

    --pot-line:      rgba(255,170,80,.14);
    --pot-line-2:    rgba(255,170,80,.30);
    --pot-glass:     rgba(255,255,255,.05);

    --pot-grad: linear-gradient(120deg, #d68f12 0%, #f0aa30 50%, #ffce6b 100%);
    --pot-card: linear-gradient(160deg, #140b26, #0d0720);

    --pot-radius:    14px;
    --pot-radius-lg: 20px;
    --pot-shadow:    0 6px 24px rgba(0,0,0,.4);
    --pot-shadow-lg: 0 30px 80px rgba(0,0,0,.55), 0 0 60px rgba(240,170,48,.18);
    --pot-btn-shadow: 0 10px 30px rgba(216,150,20,.42), inset 0 1px 0 rgba(255,255,255,.25);
    --pot-ease: .22s cubic-bezier(.2,.7,.3,1);
}

/* ---------------------------------------------------------------- base ---- */
body.primary-bg-color,
body {
    background: var(--pot-bg) !important;
    color: var(--pot-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    position: relative;
}

/* ambient cinematic background — fixed glow orbs behind everything */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(60vw 60vw at 12% -8%, rgba(240,170,48,.28), transparent 60%),
        radial-gradient(48vw 48vw at 96% 4%, rgba(255,138,0,.16), transparent 60%),
        radial-gradient(60vw 50vw at 50% 120%, rgba(240,170,48,.16), transparent 60%),
        linear-gradient(180deg, var(--pot-bg), var(--pot-bg2));
}
body > * { position: relative; z-index: 1; }

h1, h2, h3, h4, h5, h6,
.font-size-36, .font-size-30, .font-size-18 {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    color: var(--pot-text);
    letter-spacing: -.01em;
}
code, pre, kbd, samp { font-family: 'JetBrains Mono', monospace; }

a { color: var(--pot-orange-bright); transition: color var(--pot-ease); }
a:hover { color: var(--pot-amber); text-decoration: none; }

hr { border-color: var(--pot-line); }
.text-muted, .small.text-muted, .field-help-text { color: var(--pot-faint) !important; }

/* --------------------------------------------------------------- header --- */
.header { background: transparent; }

.topbar {
    background: rgba(13,7,32,.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--pot-line);
}
.topbar .btn,
.topbar .input-group-text,
.topbar .btn-active-client { color: var(--pot-dim); background: transparent; border: 0; }
.topbar .btn-active-client { font-weight: 600; color: var(--pot-text); }
.topbar .btn:hover { color: var(--pot-orange-bright); }
.topbar .btn-return-to-admin { color: var(--pot-amber); }

.navbar.navbar-light {
    background: rgba(7,3,16,.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--pot-line);
}
.navbar-brand .logo-img { max-height: 42px; width: auto; }

/* knowledgebase search in topbar/navbar */
.navbar .search .form-control,
.navbar .search .btn {
    background: var(--pot-glass);
    border: 1px solid var(--pot-line);
    color: var(--pot-text);
}
.navbar .search .form-control::placeholder { color: var(--pot-faint); }
.navbar .search .btn { color: var(--pot-orange-bright); }

/* cart pill */
.cart-btn {
    background: var(--pot-glass) !important;
    border: 1px solid var(--pot-line) !important;
    border-radius: 999px !important;
    color: var(--pot-text) !important;
    transition: all var(--pot-ease);
}
.cart-btn:hover { border-color: var(--pot-orange) !important; color: var(--pot-orange-bright) !important; transform: translateY(-1px); }
.cart-btn .badge,
#cartItemCount { background: var(--pot-grad); color: #fff; }

/* ----- main navigation bar (the icon-driven menu) ----- */
.main-navbar-wrapper {
    background: rgba(20,11,38,.66);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--pot-line);
}
#nav .nav-item,
.main-navbar-wrapper .navbar-nav > li > a,
.main-navbar-wrapper .navbar-nav > li {
    color: var(--pot-dim);
}
.main-navbar-wrapper .navbar-nav > li > a {
    position: relative;
    padding-block: 14px;
    font-weight: 500;
    color: var(--pot-dim);
    transition: color var(--pot-ease);
}
.main-navbar-wrapper .navbar-nav > li > a i { color: var(--pot-orange); transition: color var(--pot-ease); }
.main-navbar-wrapper .navbar-nav > li > a:hover,
.main-navbar-wrapper .navbar-nav > li.active > a,
.main-navbar-wrapper .navbar-nav > li.current > a { color: var(--pot-text); }
.main-navbar-wrapper .navbar-nav > li > a::after {
    content: "";
    position: absolute;
    inset-inline: 12px;
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background: var(--pot-grad);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--pot-ease);
}
.main-navbar-wrapper .navbar-nav > li > a:hover::after,
.main-navbar-wrapper .navbar-nav > li.active > a::after { transform: scaleX(1); }
.pot-nav-icon { color: var(--pot-orange); opacity: .9; }
/* bespoke gradient line-icons for the top nav (injected by pot-nav-icons.js) */
.main-navbar-wrapper .navbar-nav > li > a .pot-nav-ic { display: inline-flex; align-items: center; vertical-align: -4px; margin-inline-end: 8px; }
.pot-nav-svg { width: 19px; height: 19px; display: block; }

/* ---- stacking fix: the header (with its dropdowns) must paint ABOVE the
   page content. backdrop-filter on the nav + the blanket z-index:1 on body
   children otherwise let #main-body paint over open dropdowns. ---- */
#header, .header { z-index: 1030; }
#main-body, .master-breadcrumb { z-index: 1; }

/* dropdown menus — solid, elevated, properly padded */
.dropdown-menu {
    z-index: 1050;
    background: var(--pot-panel2);
    border: 1px solid var(--pot-line-2);
    border-radius: var(--pot-radius);
    box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.35);
    overflow: hidden;
    padding: 6px;
    margin-top: 8px;
    min-width: 214px;
}
.dropdown-menu .dropdown-item,
.dropdown-menu a { color: var(--pot-dim); }
/* WHMCS nests <a.dropdown-item> inside <li.dropdown-item>; give the inner link
   the real padding/hover and neutralise the wrapper + its py-0 utility. */
.dropdown-menu li.dropdown-item { padding: 0; background: transparent; }
.dropdown-menu a.dropdown-item { padding: 9px 12px !important; border-radius: 9px; }
.dropdown-menu .dropdown-item:hover,
.dropdown-menu a.dropdown-item:hover { background: var(--pot-glass); color: var(--pot-orange-bright); }
.dropdown-divider { border-color: var(--pot-line); margin: 6px 4px; }

/* breadcrumb */
.master-breadcrumb {
    background: transparent;
    border-bottom: 1px solid var(--pot-line);
}
.master-breadcrumb .breadcrumb-item,
.master-breadcrumb .breadcrumb-item a { color: var(--pot-faint); }
.master-breadcrumb .breadcrumb-item.active { color: var(--pot-text); }
.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--pot-faint); }

/* ---------------------------------------------------- quick-action hero --- */
.pot-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 8px;
}
.pot-action {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: var(--pot-radius-lg);
    background: var(--pot-card);
    border: 1px solid var(--pot-line);
    color: var(--pot-text) !important;
    box-shadow: var(--pot-shadow);
    transition: transform var(--pot-ease), border-color var(--pot-ease), box-shadow var(--pot-ease);
    overflow: hidden;
}
.pot-action:hover {
    transform: translateY(-3px);
    border-color: var(--pot-line-2);
    box-shadow: var(--pot-shadow-lg);
}
.pot-action-icon {
    position: relative;
    flex: 0 0 auto;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: rgba(255,138,0,.12);
    border: 1px solid var(--pot-line-2);
    font-size: 20px;
    color: var(--pot-orange-bright);
}
.pot-action-text {
    flex: 1 1 auto;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
}
.pot-action-go { color: var(--pot-faint); transition: transform var(--pot-ease), color var(--pot-ease); }
.pot-action:hover .pot-action-go { color: var(--pot-orange-bright); transform: translateX(4px); }
.pot-action-badge {
    position: absolute;
    top: -6px; inset-inline-end: -6px;
    min-width: 20px; height: 20px;
    padding: 0 6px;
    display: grid; place-items: center;
    border-radius: 999px;
    background: var(--pot-crimson);
    color: #fff; font-size: 11px; font-weight: 700;
    box-shadow: 0 0 0 2px var(--pot-panel);
}
.pot-action-primary {
    background:
        linear-gradient(160deg, rgba(240,170,48,.22), rgba(255,138,0,.12)),
        var(--pot-card);
    border-color: var(--pot-line-2);
}
.pot-action-primary .pot-action-icon {
    background: var(--pot-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--pot-btn-shadow);
}

/* ----------------------------------------------------- dashboard tiles --- */
.tiles .tile {
    background: var(--pot-card);
    border: 1px solid var(--pot-line);
    border-radius: var(--pot-radius-lg);
    color: var(--pot-text);
    box-shadow: var(--pot-shadow);
    transition: transform var(--pot-ease), border-color var(--pot-ease);
    overflow: hidden;
    margin: 8px;
}
.tiles .row.no-gutters { margin: -8px; }
.tiles .tile:hover { transform: translateY(-3px); border-color: var(--pot-line-2); }
.tiles .tile i { color: var(--pot-orange); }
.tiles .tile .stat { font-family: 'Space Grotesk', sans-serif; color: var(--pot-text); font-weight: 700; }
.tiles .tile .title { color: var(--pot-dim); }
.tiles .tile .highlight { opacity: .9; height: 4px; }
.bg-color-blue  { background: #3a7bd5 !important; }
.bg-color-green { background: var(--pot-green)  !important; }
.bg-color-red   { background: var(--pot-crimson)!important; }
.bg-color-gold  { background: var(--pot-orange) !important; }

/* --------------------------------------------------------- cards/panels --- */
.card, .panel {
    background: var(--pot-card) !important;
    border: 1px solid var(--pot-line) !important;
    border-radius: var(--pot-radius-lg) !important;
    box-shadow: var(--pot-shadow);
    color: var(--pot-text);
}
.card-header, .panel-heading {
    background: transparent !important;
    border-bottom: 1px solid var(--pot-line) !important;
    color: var(--pot-text);
}
.card-title { color: var(--pot-text); }
.card-footer { background: transparent !important; border-top: 1px solid var(--pot-line) !important; }
.card-accent-orange, [class*="card-accent-"] { border-top: 3px solid var(--pot-orange) !important; }

.list-group-item {
    background: transparent !important;
    border-color: var(--pot-line) !important;
    color: var(--pot-dim) !important;
}
.list-group-item-action:hover { background: var(--pot-glass) !important; color: var(--pot-orange-bright) !important; }
.list-group-item.active { background: var(--pot-glass) !important; color: var(--pot-text) !important; border-inline-start: 3px solid var(--pot-orange) !important; }

.well, .secondary-cart-sidebar .order-summary, .panel-default {
    background: var(--pot-card);
    border: 1px solid var(--pot-line);
    border-radius: var(--pot-radius-lg);
}

/* --------------------------------------------------------------- panels --- */
.sidebar .panel,
.sidebar .list-group { background: var(--pot-card) !important; }
.sidebar .list-group-item.active { color: var(--pot-text) !important; }

/* ---- Sitejet Builder homepage panel: contain + space the preview image ----
   The core nexus template gives #sitejetPromoImage an uncapped size + a light
   #ddd border, so the preview rendered large and crowded the panel below it.
   Cap its height, theme the border/radius, and add bottom padding to the panel
   so it never butts up against the next section. */
#sitejetPromoImage {
    width: 100%;
    height: auto;
    max-height: 185px;
    object-fit: cover;
    border: 1px solid var(--pot-line) !important;
    border-radius: var(--pot-radius);
    box-shadow: var(--pot-shadow);
}
.card:has(#sitejetPromoImage) { padding-bottom: 8px; }
.card-body:has(#sitejetPromoImage) { padding-bottom: 22px; }

/* ---- Product-details status hero card --------------------------------------
   WHMCS paints this whole card by service status (active = solid green), which
   clashes hard with the dark/brand theme. Replace it with the cinematic brand
   card: subtle gradient glow, gradient top accent, gradient-filled product icon
   — and convey status with a slim accent footer + dot, never a full colour bleed. */
.product-status {
    position: relative;
    background:
        radial-gradient(130% 120% at 50% -10%, rgba(255,138,0,.16), transparent 62%),
        var(--pot-card) !important;
    border: 1px solid var(--pot-line-2) !important;
    border-radius: var(--pot-radius-lg);
    box-shadow: var(--pot-shadow-lg);
    padding: 22px 20px 0 !important;
    overflow: hidden;
}
.product-status::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--pot-grad);
}
.product-status .product-icon { padding: 4px 0; }
/* absolute size — fa-stack inherits a large em context, so em-based sizing
   blows the disc up; keep it a calm ~100px */
.product-status .fa-stack { font-size: 50px !important; line-height: 2em !important; height: 2em; width: 2em; margin-bottom: 2px; }
.product-status .fa-stack-1x, .product-status .fa-stack-2x { line-height: inherit !important; }
.product-status .fa-circle {
    background: var(--pot-grad);
    -webkit-background-clip: text; background-clip: text;
    color: transparent !important;
    filter: drop-shadow(0 5px 14px rgba(255,138,0,.32));
}
.product-status .fa-inverse { color: #fff !important; }
.product-status h3 {
    font-family: 'Space Grotesk','Inter',sans-serif; font-weight: 700;
    color: var(--pot-text) !important; margin-top: 8px; font-size: 21px;
}
.product-status h4 { color: var(--pot-dim) !important; font-weight: 500; }
/* status footer — themed bar, colour only on the label + dot */
.product-status .product-status-text {
    margin: 22px -22px 0; padding: 13px;
    text-align: center; font-weight: 600; font-size: 13px;
    letter-spacing: .05em; text-transform: uppercase;
    border-top: 1px solid var(--pot-line);
    background: rgba(255,255,255,.03) !important;
    color: var(--pot-dim) !important;
}
.product-status .product-status-text::before {
    content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    margin-inline-end: 8px; vertical-align: middle;
    background: currentColor; box-shadow: 0 0 8px currentColor;
}
.product-status-active     .product-status-text { color: var(--pot-green) !important; }
.product-status-pending    .product-status-text { color: var(--pot-orange-bright) !important; }
.product-status-suspended  .product-status-text,
.product-status-fraud      .product-status-text { color: var(--pot-crimson) !important; }
.product-status-terminated .product-status-text,
.product-status-cancelled  .product-status-text { color: var(--pot-faint) !important; }

/* -------------------------------------------------------------- buttons --- */
.btn {
    border-radius: 12px;
    font-weight: 600;
    transition: transform var(--pot-ease), box-shadow var(--pot-ease), background var(--pot-ease), color var(--pot-ease), border-color var(--pot-ease);
}
.btn-primary, .btn-success, .btn-order-now, .btn-checkout {
    background: var(--pot-grad) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: var(--pot-btn-shadow);
}
.btn-primary:hover, .btn-success:hover, .btn-order-now:hover, .btn-checkout:hover {
    transform: translateY(-2px);
    color: #fff !important;
    box-shadow: 0 14px 36px rgba(216,150,20,.55), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-default, .btn-secondary {
    background: var(--pot-glass) !important;
    border: 1px solid var(--pot-line-2) !important;
    color: var(--pot-text) !important;
}
.btn-default:hover, .btn-secondary:hover { border-color: var(--pot-orange-bright) !important; color: var(--pot-orange-bright) !important; }
.btn-info { background: rgba(240,170,48,.85) !important; border: 0 !important; color: #fff !important; }
.btn-warning { background: var(--pot-amber) !important; border: 0 !important; color: #2a1500 !important; }
.btn-danger { background: var(--pot-crimson) !important; border: 0 !important; color: #fff !important; }
.btn-link { color: var(--pot-orange-bright); }
.btn-link:hover { color: var(--pot-amber); }
.btn.disabled, .btn:disabled { opacity: .5; }

/* ---------------------------------------------------------------- forms --- */
.form-control, .custom-select, textarea, .field.form-control {
    background: rgba(7,3,16,.55) !important;
    border: 1px solid var(--pot-line) !important;
    color: var(--pot-text) !important;
    border-radius: 10px !important;
}
.form-control::placeholder { color: var(--pot-faint) !important; }
.form-control:focus, .custom-select:focus {
    border-color: var(--pot-orange) !important;
    box-shadow: 0 0 0 .2rem rgba(255,138,0,.18) !important;
    background: rgba(7,3,16,.75) !important;
}
label, .control-label { color: var(--pot-dim); font-weight: 500; }
.prepend-icon .field-icon { color: var(--pot-faint); }
.input-group-text, .input-group-prepend .btn, .input-group-append .btn {
    background: var(--pot-glass);
    border: 1px solid var(--pot-line);
    color: var(--pot-dim);
}
.custom-control-label::before { background: rgba(7,3,16,.6); border-color: var(--pot-line-2); }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--pot-orange); border-color: var(--pot-orange); }

/* --------------------------------------------------------------- tables --- */
.table { color: var(--pot-text); }
.table thead th { border-bottom: 1px solid var(--pot-line-2); color: var(--pot-dim); font-family: 'Space Grotesk', sans-serif; }
.table td, .table th { border-top: 1px solid var(--pot-line); }
.table-hover tbody tr:hover { background: var(--pot-glass); }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,.02); }

/* --------------------------------------------------------------- alerts --- */
.alert { border-radius: var(--pot-radius); border: 1px solid transparent; }
.alert-success { background: rgba(35,196,131,.12); border-color: rgba(35,196,131,.4); color: #b8f5dc; }
.alert-info    { background: rgba(240,170,48,.14); border-color: rgba(240,170,48,.4); color: #e3d4ff; }
.alert-warning { background: rgba(255,207,107,.12); border-color: rgba(255,207,107,.4); color: var(--pot-amber); }
.alert-danger  { background: rgba(204,31,60,.14);  border-color: rgba(204,31,60,.45); color: #ffc2cc; }

.badge { border-radius: 999px; }
.label-info { background: #3a7bd5; }

/* -------------------------------------------------------- modals/popover --- */
.modal-content {
    background: var(--pot-panel2);
    border: 1px solid var(--pot-line-2);
    border-radius: var(--pot-radius-lg);
    box-shadow: var(--pot-shadow-lg);
    color: var(--pot-text);
}
/* Bootstrap floats .modal-dialog to the TOP by default; centre every modal
   vertically (remove-item confirm, language picker, ajax dialogs) so it sits in
   the middle of the viewport over the dimmed backdrop. */
.modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100% - 3.5rem);
}
.modal-dialog > .modal-content { width: 100%; }
/* `body > * { z-index: 1 }` (above, so #main-body sits under the nav dropdowns)
   makes #main-body a stacking context that TRAPS Bootstrap modals (z-1050) beneath
   the body-level .modal-backdrop (z-1040): the modal renders dimmed AND unclickable.
   While a modal is open, drop that stacking context so the modal rises above the
   backdrop and is interactive. Dropdowns aren't a concern while a modal is open. */
body.modal-open #main-body { z-index: auto !important; }

/* The public site keeps everything inside ONE centred container. Order-form / cart
   pages render FULL-WIDTH ($skipMainBodyContainer → no .container), which looks
   unbalanced beside the 1320px header/footer shell. Constrain that full-width
   content to the same 1320px shell (40px inset cancels the .row -15px gutter so the
   columns line up with the header) → balanced & aligned like po-trade.com. Pages
   that DO use .container are excluded and unchanged. */
#main-body > div:not(.container) { max-width: 1320px; margin-inline: auto; padding-inline: 40px; }
@media (max-width: 991px) { #main-body > div:not(.container) { padding-inline: 22px; } }
.modal-header, .modal-footer { border-color: var(--pot-line); }
.close { color: var(--pot-text); opacity: .7; text-shadow: none; }
.close:hover { opacity: 1; color: var(--pot-orange-bright); }
.popover { background: var(--pot-panel2); border: 1px solid var(--pot-line-2); color: var(--pot-text); }
.popover .arrow::after { border-bottom-color: var(--pot-panel2); border-top-color: var(--pot-panel2); }

/* ----------------------------------------------------------- nav-tabs ---- */
.nav-tabs { border-bottom: 1px solid var(--pot-line-2); }
.nav-tabs .nav-link { color: var(--pot-dim); border: 0; }
.nav-tabs .nav-link:hover { color: var(--pot-orange-bright); border: 0; }
.nav-tabs .nav-link.active {
    background: transparent;
    color: var(--pot-text);
    border: 0;
    border-bottom: 2px solid var(--pot-orange);
}

/* --------------------------------------------------- domain search hero --- */
#domain-checker, .domain-search, .jumbotron {
    background: var(--pot-card) !important;
    border: 1px solid var(--pot-line);
    border-radius: var(--pot-radius-lg);
}

/* --------------------------------------------------------------- footer --- */
footer, .footer {
    background: linear-gradient(180deg, transparent, rgba(13,7,32,.65));
    border-top: 1px solid var(--pot-line);
    color: var(--pot-faint);
}
footer a, .footer a { color: var(--pot-dim); }
footer a:hover, .footer a:hover { color: var(--pot-orange-bright); }

/* --------------------------------------------------------- misc polish ---- */
.header-lined { border-bottom: 1px solid var(--pot-line); }
.sub-heading span.primary-bg-color,
.sub-heading .primary-bg-color {
    background: var(--pot-grad) !important;
    color: #fff !important;
    border-radius: 8px;
    padding: 6px 14px;
    font-family: 'Space Grotesk', sans-serif;
}
.well, .panel-addon { border-radius: var(--pot-radius); }
.text-success { color: var(--pot-green) !important; }
.text-danger  { color: #ff7a86 !important; }

/* keep ambient bg from washing out cart/inputs on small screens */
@media (max-width: 768px) {
    .pot-actions { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .pot-actions { grid-template-columns: 1fr; }
}

/* ============================================================================
   PREMIUM MOTION & POLISH LAYER
   Cinematic entrance choreography, living background, and micro-interactions.
   Fully gated behind prefers-reduced-motion for accessibility.
   ========================================================================== */

/* living aurora — the ambient background slowly breathes */
body::before { animation: pot-drift 26s ease-in-out infinite alternate; }
@keyframes pot-drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(0,-2%,0) scale(1.06); } }

/* entrance: surfaces rise + fade in on load (staggered for the hero) */
.pot-actions .pot-action,
.tiles [class*="col-"] .tile,
.client-home-cards .card { animation: pot-rise .6s cubic-bezier(.2,.7,.3,1) both; }
@keyframes pot-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.pot-actions .pot-action:nth-child(1) { animation-delay: .04s; }
.pot-actions .pot-action:nth-child(2) { animation-delay: .10s; }
.pot-actions .pot-action:nth-child(3) { animation-delay: .16s; }
.pot-actions .pot-action:nth-child(4) { animation-delay: .22s; }
.tiles [class*="col-"]:nth-child(1) .tile { animation-delay: .10s; }
.tiles [class*="col-"]:nth-child(2) .tile { animation-delay: .16s; }
.tiles [class*="col-"]:nth-child(3) .tile { animation-delay: .22s; }
.tiles [class*="col-"]:nth-child(4) .tile { animation-delay: .28s; }

/* light sheen sweeps across action cards on hover */
.pot-action::after {
    content: ""; position: absolute; top: 0; inset-inline-start: -60%;
    width: 40%; height: 100%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.10), transparent);
    transform: skewX(-18deg); transition: inset-inline-start .6s ease;
}
.pot-action:hover::after { inset-inline-start: 130%; }

/* primary CTAs get a slow shimmer so the main action always draws the eye */
.btn-primary, .btn-success, .btn-order-now, .btn-checkout { position: relative; overflow: hidden; }
.btn-primary::after, .btn-success::after, .btn-order-now::after, .btn-checkout::after {
    content: ""; position: absolute; top: 0; inset-inline-start: -60%;
    width: 40%; height: 100%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
    transform: skewX(-18deg); animation: pot-sweep 3.4s ease-in-out infinite;
}
@keyframes pot-sweep { 0% { inset-inline-start: -60%; } 55%, 100% { inset-inline-start: 140%; } }

/* refined details: selection, focus rings, custom scrollbar */
::selection { background: rgba(255,138,0,.30); color: #fff; }
:focus-visible { outline: 2px solid var(--pot-orange); outline-offset: 2px; border-radius: 6px; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--pot-bg2); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #d11a35, #ff8f1a); border-radius: 999px; border: 3px solid var(--pot-bg2); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--pot-crimson), var(--pot-orange)); }

@media (prefers-reduced-motion: reduce) {
    body::before,
    .pot-actions .pot-action, .tiles [class*="col-"] .tile, .client-home-cards .card,
    .btn-primary::after, .btn-success::after, .btn-order-now::after, .btn-checkout::after { animation: none !important; }
    .pot-action::after { display: none; }
}

/* ============================================================================
   MOBILE / RESPONSIVE
   The nexus base is already responsive; these tune the POT additions so nothing
   overflows or crowds on small screens.
   ========================================================================== */
@media (max-width: 991px) {
    html, body { max-width: 100%; overflow-x: hidden; }   /* guard against stray horizontal scroll (sidebar is static here, so sticky is unaffected) */
    .font-size-36 { font-size: 28px !important; }
    .font-size-30 { font-size: 22px !important; }
}
@media (max-width: 768px) {
    .font-size-36 { font-size: 25px !important; }
    .pot-action { padding: 15px 16px; gap: 12px; }
    .pot-action .pot-action-icon { width: 42px; height: 42px; font-size: 18px; }
    .pot-action-text { font-size: 15px; }
    .tiles .tile { padding: 14px; margin: 6px; }
    .tiles .row.no-gutters { margin: -6px; }
    .tiles .tile .stat { font-size: 27px; }
    .navbar-brand .logo-img { max-height: 36px; }
    /* mobile nav: items stack full-width in the collapse; tidy the active underline */
    .main-navbar-wrapper .navbar-nav > li > a { padding-block: 11px; }
    .main-navbar-wrapper .navbar-nav > li > a::after { inset-inline: 0; bottom: 2px; }
}
@media (max-width: 480px) {
    .pot-actions { grid-template-columns: 1fr; }
    .font-size-36 { font-size: 22px !important; }
    .card-body, .panel-body { padding: 14px; }
}

/* ============================================================================
   FIX: nexus theme.min.css light leaks on a few client-area pages
   (register, product details, upgrade, form-alerts) — hardcoded #fff/#efefef.
   ========================================================================== */
#registration .field, #registration .form-control {
    background: rgba(7,3,16,.55) !important; color: var(--pot-text) !important; border-color: var(--pot-line) !important;
}
#registration .field[disabled], #registration .form-control[disabled],
#registration .field[readonly], #registration .form-control[readonly] { background: rgba(7,3,16,.3) !important; }
#registration .field-icon i { color: var(--pot-faint) !important; }
div.product-details-tab-container { background: var(--pot-card) !important; border-color: var(--pot-line) !important; }
div.product-details div.product-icon { background: rgba(255,138,0,.12) !important; color: var(--pot-orange-bright) !important; }
.upgrade .products .product, .upgrade .product-to-be-upgraded { background: var(--pot-card) !important; border-color: var(--pot-line) !important; }
.upgrade .products .product .header { background: linear-gradient(120deg, #d11a35, #ff8f1a) !important; color: #fff !important; }
.alert:has(form) { background: var(--pot-card) !important; border-color: var(--pot-line) !important; color: var(--pot-text) !important; }

/* ============================================================================
   FIX: language / currency chooser modal (#modalChooseLanguage) — nexus renders
   it grey (#3e3e3e) with light-grey option pills. Theme it to match.
   ========================================================================== */
.modal-localisation .modal-content, #modalChooseLanguage .modal-content {
    background: var(--pot-panel2) !important; border: 1px solid var(--pot-line-2) !important;
    color: var(--pot-text) !important; box-shadow: var(--pot-shadow-lg) !important; border-radius: var(--pot-radius-lg) !important;
}
.modal-localisation .modal-header, .modal-localisation .modal-footer { border-color: var(--pot-line) !important; }
.modal-localisation h1, .modal-localisation h2, .modal-localisation h3, .modal-localisation h4,
.modal-localisation .modal-title, .modal-localisation label { color: var(--pot-text) !important; }
.modal-localisation .item, #modalChooseLanguage .item {
    background: var(--pot-glass) !important; border: 1px solid var(--pot-line) !important;
    color: var(--pot-text) !important; border-radius: 12px !important; transition: all var(--ease, .22s);
}
.modal-localisation .item:hover, #modalChooseLanguage .item:hover {
    border-color: var(--pot-line-2) !important; color: var(--pot-orange-bright) !important; transform: translateY(-1px);
}
.modal-localisation .item.active, #modalChooseLanguage .item.active {
    background: linear-gradient(160deg, rgba(240,170,48,.30), rgba(255,138,0,.16)) !important;
    border-color: var(--pot-orange) !important; color: #fff !important; box-shadow: 0 0 0 1px var(--pot-orange) inset !important;
}
.modal-localisation .close { color: var(--pot-text) !important; opacity: .8; }

/* gold-gradient text legibility: white text + dark brown shadow (matches site .px-btn-pri) */
.btn-primary,.btn-success,.btn-order-now,.btn-checkout,#btnCompleteOrder,#btnCompleteProductConfig,.sub-heading .primary-bg-color,#cartItemCount,.pot-action-primary .pot-action-icon{text-shadow:0 1px 2px rgba(74,42,0,.6),0 0 8px rgba(74,42,0,.22)}

/* ============================================================ register page ===
   Modernize the legacy bits: ToS acceptance, password-strength meter, generate btn.
   CSS-only (update-safe — clientregister.tpl not overridden). */

/* ---- Terms-of-Service acceptance: branded card + custom checkbox ---- */
.form-check:has(input.accepttos) {
    display: inline-block; max-width: 620px; margin: 0 auto;
    padding: 16px 24px; border: 1px solid var(--pot-line-2); border-radius: 14px;
    background: var(--pot-card); box-shadow: var(--pot-shadow);
    color: var(--pot-text); font-size: 15px; font-weight: 500; line-height: 1.5;
    cursor: pointer; text-align: start; transition: border-color .2s, background .2s, box-shadow .2s;
}
.form-check:has(input.accepttos):hover { border-color: var(--pot-orange); }
.form-check:has(input.accepttos:checked) { border-color: var(--pot-orange); background: radial-gradient(130% 130% at 0 0, rgba(255,138,0,.12), transparent 60%), var(--pot-card); }
.form-check:has(input.accepttos:focus-visible) { box-shadow: 0 0 0 3px rgba(255,138,0,.28); }
input.accepttos {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    /* Bootstrap's .form-check-input is position:absolute with a negative left
       margin → it overlapped the text (and absolute blockified its display).
       Pull it back into normal inline flow. */
    position: static !important; float: none !important;
    display: inline-block !important; vertical-align: middle;
    width: 23px; height: 23px; min-width: 23px; margin: 0 !important; margin-inline-end: 12px !important;
    border: 2px solid var(--pot-line-2); border-radius: 7px; background: var(--pot-glass);
    cursor: pointer; transition: .18s;
}
input.accepttos:hover { border-color: var(--pot-orange); }
input.accepttos:checked {
    border-color: transparent;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 15px no-repeat, var(--pot-grad);
    box-shadow: 0 4px 14px rgba(216,150,20,.4);
}
input.accepttos:focus-visible { outline: none; }
.form-check:has(input.accepttos) a { color: var(--pot-orange-bright); font-weight: 600; text-decoration: none; }
.form-check:has(input.accepttos) a:hover { text-decoration: underline; }

/* ---- password-strength meter: dark rounded track + semantic fill (was a white bar) ---- */
.password-strength-meter .progress { background: var(--pot-glass) !important; border: 1px solid var(--pot-line); border-radius: 999px; height: 9px; overflow: hidden; box-shadow: none; }
.password-strength-meter .progress-bar { border-radius: 999px; transition: width .3s ease, background .3s; background: var(--pot-grad); }
.password-strength-meter .progress-bar.bg-danger  { background: var(--pot-crimson) !important; }
.password-strength-meter .progress-bar.bg-warning { background: #e6a417 !important; }
.password-strength-meter .progress-bar.bg-success { background: var(--pot-green) !important; }
.password-strength-meter .progress-bar.bg-striped { background-image: none; }

/* ---- generate-password: themed glass button ---- */
.btn.generate-password { background: var(--pot-glass); border: 1px solid var(--pot-line-2); color: var(--pot-text); border-radius: 10px; font-weight: 600; transition: .18s; }
.btn.generate-password:hover { border-color: var(--pot-orange); color: var(--pot-orange-bright); background: rgba(255,138,0,.08); }

/* ---- language switcher: drop the country flags (show language names only).
   Scoped to the modal so the phone-number field's .iti-flag is untouched.
   pot-portal.css only loads in the preview theme, so the live site is unaffected. */
#modalChooseLanguage .iti-flag,
#modalChooseLanguage .item .iti-flag,
#modalChooseLanguage .item [class*="flag"] { display: none !important; }
#modalChooseLanguage .item { gap: 0; }

/* ---- production hardening ----------------------------------------------- */
/* Readable plain alerts even on browsers without :has() (the :has(form) rule
   above only styles modern engines; this baseline covers the rest without
   touching the coloured alert variants). */
.alert:not(.alert-success):not(.alert-danger):not(.alert-warning):not(.alert-info) {
    background: var(--pot-card); color: var(--pot-text); border-color: var(--pot-line);
}
/* product-status gradient icon must not vanish in forced-colors/high-contrast */
@media (forced-colors: active), print {
    .product-status .fa-circle { -webkit-text-fill-color: currentColor !important; background: none !important; color: var(--pot-orange); }
}

/* ============================================================ server status ===
   Cinematic network-status page (serverstatus.tpl) — HTTP-only "Status". */
.pot-status { max-width: 1120px; margin: 0 auto; }

/* overall live banner */
.pot-status-banner {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 20px;
    padding: 24px 28px; margin-bottom: 26px;
    border: 1px solid var(--pot-line-2); border-radius: var(--pot-radius-lg);
    background: radial-gradient(130% 150% at 0 0, rgba(35,196,131,.14), transparent 60%), var(--pot-card);
    box-shadow: var(--pot-shadow-lg); transition: background .45s ease;
}
.pot-status-banner[data-state="checking"] { background: radial-gradient(130% 150% at 0 0, rgba(255,138,0,.12), transparent 60%), var(--pot-card); }
.pot-status-banner[data-state="down"]     { background: radial-gradient(130% 150% at 0 0, rgba(204,31,60,.16), transparent 60%), var(--pot-card); }
.pot-status-banner::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent); transform: translateX(-100%); animation: potScan 4.5s ease-in-out infinite; }
@keyframes potScan { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }

.pot-status-orb { position: relative; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(35,196,131,.12); }
.pot-status-orb-core { width: 18px; height: 18px; border-radius: 50%; background: var(--pot-green); box-shadow: 0 0 18px var(--pot-green); transition: background .3s, box-shadow .3s; }
.pot-status-orb::before, .pot-status-orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--pot-green); opacity: 0; animation: potPing 2.4s ease-out infinite; }
.pot-status-orb::after { animation-delay: 1.2s; }
@keyframes potPing { 0% { transform: scale(.45); opacity: .7; } 80%, 100% { transform: scale(1.5); opacity: 0; } }
.pot-status-banner[data-state="checking"] .pot-status-orb { background: rgba(255,138,0,.14); }
.pot-status-banner[data-state="checking"] .pot-status-orb-core { background: var(--pot-orange); box-shadow: 0 0 18px var(--pot-orange); }
.pot-status-banner[data-state="checking"] .pot-status-orb::before, .pot-status-banner[data-state="checking"] .pot-status-orb::after { border-color: var(--pot-orange); }
.pot-status-banner[data-state="down"] .pot-status-orb { background: rgba(204,31,60,.14); }
.pot-status-banner[data-state="down"] .pot-status-orb-core { background: var(--pot-crimson); box-shadow: 0 0 18px var(--pot-crimson); }
.pot-status-banner[data-state="down"] .pot-status-orb::before, .pot-status-banner[data-state="down"] .pot-status-orb::after { border-color: var(--pot-crimson); }

.pot-status-banner-txt { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.pot-status-headline { font-family: 'Space Grotesk','Inter',sans-serif; font-weight: 700; font-size: 24px; color: var(--pot-text); }
.pot-status-sub { color: var(--pot-faint); font-size: 13px; margin-top: 3px; }
.pot-status-meter { flex: 0 0 auto; font-family: 'JetBrains Mono',monospace; font-size: 20px; font-weight: 600; color: var(--pot-text); border: 1px solid var(--pot-line-2); border-radius: 999px; padding: 8px 18px; background: var(--pot-glass); }

/* status card grid */
.pot-status-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.pot-st-card {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 13px;
    padding: 16px 18px; border: 1px solid var(--pot-line); border-radius: var(--pot-radius);
    background: var(--pot-card); box-shadow: var(--pot-shadow);
    transition: transform var(--pot-ease), border-color var(--pot-ease), box-shadow var(--pot-ease);
    animation: potStRise .5s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes potStRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pot-st-card:hover { transform: translateY(-3px); border-color: var(--pot-line-2); box-shadow: var(--pot-shadow-lg); }
.pot-st-card::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 3px; background: var(--pot-faint); transition: background .3s; }
.pot-st-card[data-state="up"]::before { background: var(--pot-green); }
.pot-st-card[data-state="down"]::before { background: var(--pot-crimson); }
.pot-st-card[data-state="checking"]::before { background: var(--pot-orange); }

.pot-st-dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; background: var(--pot-faint); position: relative; }
.pot-st-card[data-state="up"] .pot-st-dot { background: var(--pot-green); box-shadow: 0 0 10px var(--pot-green); }
.pot-st-card[data-state="up"] .pot-st-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--pot-green); opacity: 0; animation: potPing 2.6s ease-out infinite; }
.pot-st-card[data-state="down"] .pot-st-dot { background: var(--pot-crimson); box-shadow: 0 0 10px var(--pot-crimson); }
.pot-st-card[data-state="checking"] .pot-st-dot { background: var(--pot-orange); animation: potBlink 1s steps(2,start) infinite; }
@keyframes potBlink { 50% { opacity: .3; } }

.pot-st-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.pot-st-name { font-weight: 600; color: var(--pot-text); font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pot-st-label { font-family: 'JetBrains Mono',monospace; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--pot-faint); margin-top: 3px; }
.pot-st-card[data-state="up"] .pot-st-label { color: var(--pot-green); }
.pot-st-card[data-state="down"] .pot-st-label { color: var(--pot-crimson); }
.pot-st-card[data-state="checking"] .pot-st-label { color: var(--pot-orange-bright); }

.pot-st-badge { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: var(--pot-faint); background: var(--pot-glass); border: 1px solid var(--pot-line); }
.pot-st-card[data-state="up"] .pot-st-badge { color: var(--pot-green); border-color: rgba(35,196,131,.4); }
.pot-st-card[data-state="down"] .pot-st-badge { color: var(--pot-crimson); border-color: rgba(204,31,60,.4); }

@media (prefers-reduced-motion: reduce) {
    .pot-status-banner::after, .pot-status-orb::before, .pot-status-orb::after,
    .pot-st-dot::after, .pot-st-card[data-state="checking"] .pot-st-dot, .pot-st-card { animation: none; }
}
@media (max-width: 575px) { .pot-status-banner { flex-wrap: wrap; gap: 14px; } .pot-status-meter { margin-inline-start: auto; } }

/* ============================================================ sidebar widgets ===
   Modernize the WHMCS sidebar panels (View / Support / action filters). */
.sidebar .card-sidebar,
.sidebar .panel {
    background: var(--pot-card) !important;
    border: 1px solid var(--pot-line) !important;
    border-radius: var(--pot-radius-lg) !important;
    box-shadow: var(--pot-shadow) !important;
    overflow: hidden;
    margin-bottom: 16px;
}
.sidebar .card-sidebar > .card-header,
.sidebar .panel-heading {
    background: rgba(255,255,255,.025) !important;
    border-bottom: 1px solid var(--pot-line) !important;
    padding: 14px 18px !important;
    position: relative;
    display: flex; align-items: center;
}
.sidebar .card-sidebar > .card-header::before {
    content: ""; position: absolute; inset-inline-start: 0; top: 13px; bottom: 13px;
    width: 3px; border-radius: 0 3px 3px 0; background: var(--pot-grad);
}
.sidebar .card-header .card-title,
.sidebar .panel-title {
    font-family: 'Space Grotesk','Inter',sans-serif; font-weight: 600; font-size: 16px;
    color: var(--pot-text); margin: 0; padding-inline-start: 10px; flex: 1 1 auto;
}
.sidebar .card-header [class*="fa-"] { color: var(--pot-faint); font-size: 13px; transition: color var(--pot-ease), transform var(--pot-ease); }
.sidebar .card-header:hover [class*="fa-"] { color: var(--pot-orange-bright); }

.sidebar .list-group { padding: 7px !important; background: transparent !important; }
.sidebar .list-group-item {
    background: transparent !important;
    border: 0 !important;
    color: var(--pot-dim) !important;
    border-radius: 11px !important;
    padding: 11px 14px !important;
    position: relative;
    transition: background var(--pot-ease), color var(--pot-ease), transform var(--pot-ease);
}
.sidebar .sidebar-menu-item-wrapper { display: flex; align-items: center; gap: 11px; width: 100%; }
.sidebar .list-group-item [class*="fa-"] {
    color: var(--pot-orange); width: 18px; text-align: center; font-size: 15px; flex: 0 0 auto;
    transition: color var(--pot-ease);
}
.sidebar .list-group-item-action:hover {
    background: var(--pot-glass) !important; color: var(--pot-text) !important; transform: translateX(3px);
}
.sidebar .list-group-item-action:hover [class*="fa-"] { color: var(--pot-orange-bright); }

/* active item — gradient bar + tinted bg + glow */
.sidebar .list-group-item.active,
.sidebar .list-group-item-action.active {
    background: linear-gradient(90deg, rgba(255,138,0,.16), rgba(255,138,0,.02)) !important;
    color: var(--pot-text) !important;
}
.sidebar .list-group-item.active::before,
.sidebar .list-group-item-action.active::before {
    content: ""; position: absolute; inset-inline-start: 0; top: 7px; bottom: 7px;
    width: 3px; border-radius: 0 3px 3px 0; background: var(--pot-grad); box-shadow: 0 0 12px rgba(255,138,0,.55);
}
.sidebar .list-group-item.active [class*="fa-"],
.sidebar .list-group-item-action.active [class*="fa-"] { color: var(--pot-orange-bright); }

/* count badges (Open / Scheduled / Resolved) -> mono glass pills */
.sidebar .list-group-item .badge {
    margin-inline-start: auto;
    background: var(--pot-glass) !important;
    color: var(--pot-dim) !important;
    border: 1px solid var(--pot-line);
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 12px;
    padding: 3px 10px; min-width: 28px; text-align: center; line-height: 1.5;
}
.sidebar .list-group-item-action:hover .badge { border-color: var(--pot-line-2); color: var(--pot-text) !important; }
.sidebar .list-group-item .badge.badge-danger  { background: rgba(204,31,60,.18) !important; color: #ff8095 !important; border-color: rgba(204,31,60,.4); }
.sidebar .list-group-item .badge.badge-warning { background: rgba(230,164,23,.18) !important; color: var(--pot-amber) !important; border-color: rgba(230,164,23,.4); }