/* ══════════════════════════════════════════════════════════════
   WHMCS compatibility bridge
   ══════════════════════════════════════════════════════════════

   We style with Tailwind, but we load WHMCS's scripts.min.js because it
   owns the WHMCS.* namespace the payment path depends on. That bundle
   ships Bootstrap 4 JS, while our stylesheet is Bootstrap 3.

   The two disagree on exactly one thing that matters: the visible-state
   class. BS3 CSS keys off `.in`, BS4 JS applies `.show`. Without this
   file, modals open in the DOM and stay invisible.

   Keep this file small. It bridges behaviour only — all appearance comes
   from Tailwind tokens.
   ══════════════════════════════════════════════════════════════ */

/* ─── Modals ─────────────────────────────────────────────────── */

/* BS4 JS sets display via inline style then adds .show for the transition. */
.modal.fade .modal-dialog {
    transform: translate(0, -25%);
    transition: transform .3s ease-out;
}
.modal.show .modal-dialog,
.modal.in .modal-dialog {
    transform: translate(0, 0);
}
.modal.fade { opacity: 1; }
.modal.fade .modal-content { opacity: 0; transition: opacity .15s linear; }
.modal.show .modal-content,
.modal.in .modal-content { opacity: 1; }

/* BS4 puts the backdrop at .show; BS3 CSS expects .in */
.modal-backdrop.show { opacity: .5; }

/* BS4 markup uses .modal-dialog-centered / .modal-dialog-scrollable */
.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 60px);
}
.modal-dialog-scrollable .modal-content { max-height: calc(100vh - 60px); overflow: hidden; }
.modal-dialog-scrollable .modal-body { overflow-y: auto; }

/* Dark surface for every modal, driven by our tokens rather than Bootstrap's. */
.modal-content {
    background-color: #0a0a0a;
    border: 1px solid #191919;
    border-radius: 12px;
    color: #ffffff;
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .8);
}
.modal-header,
.modal-footer {
    border-color: #151515;
    padding: 16px 20px;
}
.modal-body { padding: 20px; color: #adadad; }
.modal-title { color: #ffffff; font-weight: 600; font-size: 16px; }
.modal-header .close,
.modal-header .btn-close {
    color: #808080;
    opacity: 1;
    text-shadow: none;
    background: transparent;
    border: 0;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.modal-header .close:hover,
.modal-header .btn-close:hover { color: #ffffff; }

/* ─── Tabs ───────────────────────────────────────────────────── */

/* BS4 requires BOTH .active and .show on a fading pane; BS3 only .active. */
.tab-content > .tab-pane.active { display: block; }
.tab-content > .tab-pane.fade.active,
.tab-content > .tab-pane.fade.show { opacity: 1; }

/* ─── Dropdowns ──────────────────────────────────────────────── */

/* BS4 JS toggles .show on the menu; BS3 CSS toggles .open on the parent. */
.dropdown-menu.show { display: block; }
.dropdown-menu {
    background-color: #0a0a0a;
    border: 1px solid #191919;
    border-radius: 10px;
    padding: 6px;
}
.dropdown-menu > li > a,
.dropdown-menu .dropdown-item {
    color: #adadad;
    padding: 8px 12px;
    border-radius: 7px;
    display: block;
    text-decoration: none;
}
.dropdown-menu > li > a:hover,
.dropdown-menu .dropdown-item:hover {
    background-color: #151515;
    color: #ffffff;
}

/* ─── Collapse ───────────────────────────────────────────────── */

/* BS4 uses .collapse.show where BS3 uses .collapse.in */
.collapse.show { display: block; }
tr.collapse.show { display: table-row; }
tbody.collapse.show { display: table-row-group; }

/* ─── Tooltips & popovers ────────────────────────────────────── */

.tooltip.show { opacity: .95; }
.tooltip-inner {
    background-color: #151515;
    color: #ffffff;
    border-radius: 7px;
    font-size: 12px;
    padding: 6px 10px;
}
.popover {
    background-color: #0a0a0a;
    border: 1px solid #191919;
    border-radius: 10px;
    color: #adadad;
}
.popover-header,
.popover-title {
    background-color: #0e0e0e;
    border-bottom-color: #151515;
    color: #ffffff;
    font-size: 13px;
}
.popover-body { padding: 10px 12px; color: #adadad; }

/* ─── Utility aliases (BS4 names against a BS3 sheet) ────────── */

.float-left  { float: left  !important; }
.float-right { float: right !important; }
.sr-only,
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* BS4's unprefixed grid columns, which BS3 has no equivalent for. */
.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,
.col-7,.col-8,.col-9,.col-10,.col-11,.col-12 {
    position: relative;
    float: left;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}
.col-1  { width: 8.333333%; }
.col-2  { width: 16.666667%; }
.col-3  { width: 25%; }
.col-4  { width: 33.333333%; }
.col-5  { width: 41.666667%; }
.col-6  { width: 50%; }
.col-7  { width: 58.333333%; }
.col-8  { width: 66.666667%; }
.col-9  { width: 75%; }
.col-10 { width: 83.333333%; }
.col-11 { width: 91.666667%; }
.col-12 { width: 100%; }

@media (max-width: 767px) {
    .col-1,.col-2,.col-3,.col-4,.col-5,.col-6,
    .col-7,.col-8,.col-9,.col-10,.col-11 { width: 100%; float: none; }
}

/* ─── iCheck ─────────────────────────────────────────────────── */

/* twenty-one/js/scripts.min.js ships the real iCheck plugin. It wraps every
   checkbox/radio in <div class="icheckbox_square-blue|iradio_square-blue"> and
   hides the native input (opacity:0). The cart's pricing chain rides on its
   synthetic ifChecked/ifUnchecked events (recalctotals), so iCheck STAYS — we
   only replace the blue.png sprite skin with a token-native control.

   This is the SINGLE canonical definition. It previously existed here AND in
   elixirnode.css, and this copy applied `filter: invert(1) hue-rotate(180deg)`
   on top of the finished control — turning the white tick and radio dot BLACK
   and the resting border into a near-white ring. That was the actual cause of
   "bare circles, can't tell what's selected".

   !important is load-order, not paranoia: orderforms/standard_cart/css/all.min.css
   arrives via {$headoutput} AFTER this file at identical specificity.
   NO #order-standard_cart arms on the base rule — an ID arm would outrank the
   .checked state rule below and the purple fill would never paint in the cart.
   flex:0 0 18px is load-bearing: the wrapper is a flex item inside our tw-flex
   labels and would otherwise squash to a ~12px sliver. */
.icheckbox_square-blue,
.iradio_square-blue {
    display: inline-block !important;
    position: relative !important;
    box-sizing: border-box !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    flex: 0 0 18px !important;
    margin: 0 2px 0 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    background: #050505 !important;
    background-image: none !important;   /* kill blue.png */
    background-size: auto !important;    /* kill the @2x HiDPI override */
    border: 1.5px solid #666666 !important;  /* 3.45:1 on #0a0a0a — WCAG 1.4.11 */
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: background-color .15s, border-color .15s !important;
}

.iradio_square-blue { border-radius: 50% !important; }

.icheckbox_square-blue.hover,
.iradio_square-blue.hover {
    border-color: #a932c6 !important;
    background: rgba(169, 50, 198, .12) !important;
    background-image: none !important;
}

.icheckbox_square-blue.checked,
.iradio_square-blue.checked {
    background: #a932c6 !important;
    background-image: none !important;
    border-color: #a932c6 !important;
}

/* drawn tick — font-independent, always centred */
.icheckbox_square-blue.checked::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important; left: 50% !important;
    width: 4px !important; height: 8px !important;
    border: solid #ffffff !important;
    border-width: 0 2px 2px 0 !important;
    border-radius: 0 !important;
    transform: translate(-50%, -60%) rotate(45deg) !important;
}

.iradio_square-blue.checked::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important; left: 50% !important;
    width: 8px !important; height: 8px !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* Keyboard focus — the real input is opacity:0, so :focus-visible on it is
   invisible. iCheck mirrors focus onto the wrapper as .focus. */
.icheckbox_square-blue.focus,
.iradio_square-blue.focus {
    outline: 2px solid #a932c6 !important;
    outline-offset: 2px !important;
}

.icheckbox_square-blue.disabled,
.iradio_square-blue.disabled {
    opacity: .45 !important;
    cursor: default !important;
    border-color: #333333 !important;
    background-image: none !important;
}
.icheckbox_square-blue.checked.disabled,
.iradio_square-blue.checked.disabled {
    background: #4a4a4a !important;
    border-color: #4a4a4a !important;
}

/* Opted-out controls render native. The class sits ON the input in all four
   usages, so a descendant selector here would never match. */
input.no-icheck[type="radio"],
input.no-icheck[type="checkbox"] {
    accent-color: #a932c6;
    width: 16px;
    height: 16px;
}

/* ─── Focus ──────────────────────────────────────────────────── */

/* elixirnode.css clears outlines globally. Restore a real, visible focus
   indicator for keyboard users — WCAG 2.1 SC 2.4.7. */
:focus-visible {
    outline: 2px solid #a932c6 !important;
    outline-offset: 2px !important;
}
.modal:focus,
.modal-content:focus { outline: none !important; }

/* ─── Mobile list tables → cards ─────────────────────────────────
   Below 768px a 6-column table pushes Status and the action link off
   screen, so a customer on a phone cannot see whether they owe anything
   without scrolling sideways. Each row becomes a stacked card instead.
   Cells carry data-label, which becomes the field heading.

   DataTables keeps working — it only toggles row visibility, and the
   `display` values below are scoped so its own show/hide still applies. */
@media (max-width: 767px) {
    .xn-cards thead {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }
    .xn-cards,
    .xn-cards tbody { display: block; width: 100%; }

    .xn-cards tbody tr {
        display: block;
        background: #0c0c0c;
        border: 1px solid #191919 !important;
        border-radius: 12px;
        padding: 4px 2px;
        margin-bottom: 10px;
    }

    .xn-cards tbody td {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: auto !important;
        padding: 7px 14px !important;
        text-align: right !important;
        border: 0 !important;
    }

    /* Field heading, from data-label */
    .xn-cards tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        text-align: left;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: #808080;
    }
    /* Cells with no label (the action column) span the full width */
    .xn-cards tbody td[data-label=""]::before { content: none; }
    .xn-cards tbody td[data-label=""] {
        justify-content: flex-end;
        border-top: 1px solid #151515 !important;
        margin-top: 4px;
        padding-top: 10px !important;
    }

    /* First cell is the card title — larger, no label, left aligned */
    .xn-cards tbody td:first-child {
        justify-content: flex-start;
        text-align: left !important;
        padding-top: 12px !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid #151515 !important;
        margin-bottom: 4px;
    }
    .xn-cards tbody td:first-child::before { content: none; }

    /* The wrapper no longer needs to scroll sideways */
    .xn-cards-wrap { overflow-x: visible !important; }
}

/* ─── iCheck on visually-hidden inputs ──────────────────────────
   Some controls are deliberately hidden so a styled element stands in for
   them — the checkout gateway pills use `.payment-methods.tw-sr-only` with a
   `<span>` pill as the visible affordance.

   iCheck does not know that. It wraps the input in its own div, and that
   wrapper is NOT sr-only, so a stray radio circle floats next to every pill.

   Hide the wrapper, not the input: iCheck still runs and still fires the
   ifChecked events the cart's gateway show/hide and recalctotals depend on. */
/* The ID-scoped sizing rules in elixirnode.css are (1,1,0); a bare class
   selector here would be (0,2,0) and lose. Match their scope to outrank them. */
#order-standard_cart .iradio_square-blue:has(> input.tw-sr-only),
#order-standard_cart .icheckbox_square-blue:has(> input.tw-sr-only),
#order-standard_cart .iradio_square-blue:has(> input.payment-methods),
#order-standard_cart .icheckbox_square-blue:has(> input.payment-methods),
.iradio_square-blue:has(> input.tw-sr-only),
.icheckbox_square-blue:has(> input.tw-sr-only),
.iradio_square-blue:has(> input.payment-methods),
.icheckbox_square-blue:has(> input.payment-methods) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    flex: 0 0 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    background: none !important;
}

/* The pill itself carries the selected state. */
.xn-gateway-label { user-select: none; }
#order-standard_cart label:has(> input.payment-methods:checked) .xn-gateway-label,
#order-standard_cart label:has(> .iradio_square-blue.checked > input.payment-methods) .xn-gateway-label,
label:has(> input.payment-methods:checked) .xn-gateway-label,
label:has(> .iradio_square-blue.checked > input.payment-methods) .xn-gateway-label {
    background: rgba(169, 50, 198, .15) !important;
    border-color: #a932c6 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 1px rgba(169, 50, 198, .35);
}
label:has(> input.payment-methods:focus-visible) .xn-gateway-label,
label:has(> .iradio_square-blue > input.payment-methods:focus-visible) .xn-gateway-label {
    outline: 2px solid #a932c6;
    outline-offset: 2px;
}

/* ─── Cart surround (transition bridge) ─────────────────────────
   templates/orderforms/standard_cart/ is SHARED — not part of any theme, and
   selected by its own WHMCS setting. Our rebuilt cart is dark, but the old
   live theme paints cart pages on a white body, so the cards would float on
   white for real customers.

   Scoped with :has(#order-standard_cart) so ONLY cart pages are touched — every
   other page of the old theme is untouched, and on the new theme (already dark)
   these are no-ops.

   Remove together with the head.tpl bridge once elixirnode-eshxn is active. */
body:has(#order-standard_cart) {
    background: #080808 !important;
    color: #adadad;
}
body:has(#order-standard_cart) #main-body,
body:has(#order-standard_cart) .primary-content,
body:has(#order-standard_cart) .container,
body:has(#order-standard_cart) .row { background: transparent !important; }

body:has(#order-standard_cart) #main-body { border: 0 !important; }

/* breadcrumb / page-title strip. The full-width wrapper is nav.master-breadcrumb
   (Bootstrap #e9ecef); without it you get white slivers either side of the strip. */
body:has(#order-standard_cart) .master-breadcrumb,
body:has(#order-standard_cart) .breadcrumb,
body:has(#order-standard_cart) #breadcrumb,
body:has(#order-standard_cart) .header-lined,
body:has(#order-standard_cart) .bg-light {
    background: #0a0a0a !important;
    border-color: #191919 !important;
}
body:has(#order-standard_cart) .breadcrumb a,
body:has(#order-standard_cart) .breadcrumb li,
body:has(#order-standard_cart) .breadcrumb span { color: #808080 !important; }

/* ─── DataTables pagination ──────────────────────────────────────
   Our per-page rules targeted .paginate_button, which in the DataTables
   Bootstrap pager is the <li>. The white tile and blue link are painted on the
   inner <a>, so they survived — leaving the brightest pixels on the page. */
.dataTables_paginate .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 !important; }
.dataTables_paginate .pagination > li > a,
.dataTables_paginate .pagination > li > span {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #adadad !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    margin: 0 !important;
    transition: background-color .15s, border-color .15s, color .15s;
}
.dataTables_paginate .pagination > li > a:hover {
    background: #0e0e0e !important;
    border-color: #191919 !important;
    color: #ffffff !important;
}
.dataTables_paginate .pagination > .active > a,
.dataTables_paginate .pagination > .active > span,
.dataTables_paginate .pagination > .active > a:hover {
    background: #a932c6 !important;
    border-color: #a932c6 !important;
    color: #ffffff !important;
}
.dataTables_paginate .pagination > .disabled > a,
.dataTables_paginate .pagination > .disabled > span {
    color: #444444 !important;
    background: transparent !important;
    border-color: transparent !important;
}
@media (max-width: 640px) {
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate { float: none !important; text-align: center !important; }
    .dataTables_wrapper .dataTables_info { margin-bottom: 12px; }
}

/* ─── Native checkboxes / radios ─────────────────────────────────
   Anything WHMCS injects without .icheck-button renders as a solid white
   browser control — white squares punched into a black card. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: #a932c6;
    background-color: #050505;
    border: 1px solid #191919;
    border-radius: 4px;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}
input[type="radio"] { border-radius: 50%; }

/* ─── Gateway-injected card fields ───────────────────────────────
   The gateway writes its own markup into #paymentGatewayInput, which our
   scoped styles never reached: left-hand labels, three mismatched widths and
   a lighter grey than the rest of the form, on the page where a customer
   types a card number. */
#paymentGatewayInput .form-group,
#paymentGatewayInput .row { display: block !important; margin-bottom: 16px !important; }
#paymentGatewayInput label,
#paymentGatewayInput .control-label,
#paymentGatewayInput .col-form-label {
    display: block !important;
    float: none !important;
    width: auto !important;
    text-align: left !important;
    color: #adadad !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 0 0 6px 0 !important;
    margin: 0 !important;
}
#paymentGatewayInput .form-control,
#paymentGatewayInput input[type="text"],
#paymentGatewayInput input[type="tel"],
#paymentGatewayInput input[type="number"],
#paymentGatewayInput select,
#paymentGatewayInput .StripeElement {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    background: #050505 !important;
    border: 1px solid #191919 !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    box-shadow: none !important;
}
#paymentGatewayInput .form-control:focus,
#paymentGatewayInput .StripeElement--focus {
    border-color: #a932c6 !important;
    box-shadow: 0 0 0 2px rgba(169, 50, 198, .2) !important;
}
#paymentGatewayInput [class*="col-"] { width: 100% !important; max-width: 100% !important; float: none !important; padding-left: 0 !important; padding-right: 0 !important; }
#paymentGatewayInput { padding-bottom: 12px; }

/* Invoice amount column: fixed widths squeezed the description into a
   one-word-per-line ribbon on a 360px screen. */
.xn-invoice-summary .xn-amt-col { width: auto; }
@media (min-width: 640px) { .xn-invoice-summary .xn-amt-col { width: 150px; } }