/* ============================================================
   Component styles, lifted out of the .vue files.

   They were never scoped — 33 of the 35 blocks had no `scoped`
   attribute, so vue-style-loader was injecting them globally at
   runtime anyway, just later in the cascade than any stylesheet
   could reach. That is why theme.css had to shout !important to
   win. Here they are ordinary CSS, in a file that loads last, so
   the cascade is the same today and can be reasoned about
   tomorrow.

   Colours still hardcoded here are the next pass; use tokens.
   ============================================================ */

/* ---------- Bonus.vue (was scoped; every class is namespaced bns-*/bonus-page) ---------- */
.bonus-page {
    padding: 4px 0 24px;
}

/* ---------- Section ---------- */
.bns-section {
    margin-bottom: 30px;
}
.bns-section:last-of-type {
    margin-bottom: 8px;
}

/* ---------- Section header ---------- */
.bns-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 2px 16px;
}
.bns-head__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
    background: var(--grad-brand, linear-gradient(135deg, #2e6be6, #19d08a));
    color: var(--primary-ink);
    font-size: 1.0625rem;
    box-shadow: 0 10px 24px -10px var(--primary-a70);
}
.bns-head__title {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    color: var(--text, var(--ink));
    line-height: 1.2;
}

/* ---------- Grid ---------- */
.bns-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}

/* ---------- Card ---------- */
.bns-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
    background: var(--card, var(--navy-800));
    border: 1px solid var(--border, var(--blue-300-a16));
    box-shadow: var(--shadow-card, 0 18px 40px -20px rgba(0, 0, 0, 0.85));
    transition: transform 0.25s ease, box-shadow 0.25s ease,
        border-color 0.25s ease;
}
.bns-card:hover {
    transform: translateY(-6px);
    border-color: var(--border-strong, var(--blue-300-a30));
    box-shadow: 0 26px 50px -22px rgba(0, 0, 0, 0.9),
        var(--shadow-blue-glow, 0 10px 38px -8px rgba(46, 107, 230, 0.5));
}

/* ---------- Media ---------- */
.bns-card__media {
    position: relative;
    overflow: hidden;
    background: var(--card-2, var(--accent-ink));
}
.bns-card__media img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.4s ease;
}
.bns-card:hover .bns-card__media img {
    transform: scale(1.05);
}

/* ---------- Body ---------- */
.bns-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 16px 16px 18px;
    text-align: center;
}
.bns-card__title {
    margin: 0 0 6px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text, var(--ink));
    line-height: 1.25;
}
.bns-card__desc {
    margin: 0 0 14px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-soft, #aebae0);
}

/* ---------- Warning chip ---------- */
.bns-warn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: center;
    margin: 0 0 14px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--gold-400, #ffd66b);
    background: var(--accent-400-a10);
    border: 1px solid var(--accent-400-a28);
}
.bns-warn i {
    color: var(--gold-400, #ffd66b);
}

/* ---------- Buttons ---------- */
.bns-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: auto;
}
.bns-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    margin-top: auto;
    padding: 11px 16px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.15s ease, background 0.2s ease,
        border-color 0.2s ease, box-shadow 0.2s ease;
}
.bns-actions .bns-btn {
    margin-top: 0;
}
.bns-btn:active {
    transform: translateY(1px);
}
.bns-btn--cta {
    /* The ink that reads on the accent, not the one that matches the colour
       this label used to be. The literal here was a near-black green, so the
       colour mapper filed it under the green ramp — correct about its hue and
       wrong about the only thing that mattered, which is that it sits on
       --grad-cta. Once the accent stopped being gold it fell to 1.92:1. */
    color: var(--accent-ink);
    background: var(--grad-cta, linear-gradient(135deg, #19d08a, #11b679));
    box-shadow: var(--shadow-glow, 0 10px 38px -8px rgba(25, 208, 138, 0.45));
}
.bns-btn--cta:hover {
    filter: brightness(1.06);
}
.bns-btn--ghost {
    color: var(--text, var(--ink));
    background: var(--surface-2, rgba(255, 255, 255, 0.06));
    border-color: var(--border-strong, var(--blue-300-a30));
}
.bns-btn--ghost:hover {
    background: var(--card-hover, #112063);
    border-color: var(--blue-400, #5b91f5);
    color: var(--primary-ink);
}

/* ---------- Responsive ---------- */
@media (max-width: 575.98px) {
    .bns-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .bns-head__title {
        font-size: 1.1875rem;
    }
    .bns-card__title {
        font-size: 1.125rem;
    }
}

/* ---------- RegisterWizard.vue ---------- */
/* vue-form-wizard ships a light default skin (imported globally in app.js);
   these #register-wizard-scoped rules map it onto the sbo14k dark theme,
   pulling colours from the brand tokens. The active step circle and the
   progress bar are coloured via the wizard's :color prop (theme primary). */

/* ----- header ----- */
#register-wizard .wizard-title {
    color: var(--text);
    font-weight: 700;
}
#register-wizard .category {
    color: var(--text-dim);
}

/* ----- progress track behind the step circles ----- */
#register-wizard .wizard-progress-with-circle {
    background-color: var(--wash-2);
}

/* ----- step circles ----- */
/* inactive circles get a themed surface; the active/checked circle keeps the
   inline brand colour from :color, so no !important on background/border. */
#register-wizard .wizard-icon-circle {
    background-color: var(--card);
    border-color: var(--border-strong);
    color: var(--text-dim);
    box-shadow: var(--shadow-card);
}
#register-wizard .wizard-icon-circle .wizard-icon {
    color: var(--text-dim);
}
#register-wizard .wizard-icon-circle.checked .wizard-icon {
    color: var(--primary-ink);
}

/* ----- step labels ----- */
#register-wizard .stepTitle {
    margin-top: 12px;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--text-soft);
}
#register-wizard .stepTitle.active {
    color: var(--text);
}

/* ----- content / fields ----- */
#register-wizard .wizard-tab-content {
    padding-top: 22px;
}
#register-wizard .form-group {
    margin-bottom: 18px;
}
#register-wizard .form-group label {
    display: inline-block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--text-soft);
}
#register-wizard .form-group .form-text {
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--text-dim);
}

/* ----- terms acceptance: framed box so it reads as a distinct consent field ----- */
#register-wizard .terms-box {
    margin-top: 4px;
    padding: 13px 15px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--wash);
    transition: border-color 0.2s ease, background 0.2s ease;
}
/* highlight the frame once the box is ticked (needs :has — modern browsers) */
#register-wizard .terms-box:hover {
    border-color: var(--blue-400);
}
#register-wizard .terms-box:has(.custom-control-input:checked) {
    border-color: var(--accent-500);
    background: var(--accent-500-a8);
}

/* ----- checkboxes ----- */
#register-wizard .form-group .custom-checkbox {
    margin-bottom: 0;
}
#register-wizard .form-group .custom-checkbox .custom-control-label {
    color: var(--text-soft);
    font-size: 0.875rem;
    font-weight: 500;
    padding-left: 8px;
}
#register-wizard .form-group .custom-checkbox .custom-control-label a {
    color: var(--accent-500);
    font-weight: 600;
}
#register-wizard .form-group .custom-checkbox .custom-control-label a:hover {
    color: var(--accent-400);
    text-decoration: underline;
}
/* theme the checkbox control itself so it's visible on the dark frame */
#register-wizard .custom-control-label::before {
    background-color: var(--navy-900);
    border: 1px solid var(--border-strong);
}
#register-wizard .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--primary);
    border-color: var(--primary);
}
#register-wizard .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem var(--primary-a25);
}

/* ----- footer buttons ----- */
#register-wizard .wizard-footer-left {
    display: none;
}
#register-wizard .wizard-footer-right,
#register-wizard .wizard-footer-left {
    float: none;
    width: 100%;
}
#register-wizard .btn-auth {
    border-radius: var(--radius);
    font-weight: 600;
    letter-spacing: 0.3px;
}
#register-wizard .btn-auth i {
    margin: 0 6px;
}
#register-wizard .btn-auth:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ----- "already have an account" link ----- */
#register-wizard .btn-link {
    margin-top: 14px;
    color: var(--text-soft);
    text-decoration: none;
}
#register-wizard .btn-link:hover {
    color: var(--accent-400);
    text-decoration: none;
}
/* ---------- AttachSlip.vue ---------- */
.dropdown-menu.show .b-calendar-inner {
    min-width: 320px;
}
#modal-slip #fileInput {
    display: none;
}

.mx-datepicker input[readonly] {
    background-color: white;
}

/* ---------- BankWithdraw.vue ---------- */
#modal-bank-withdraw .badge {
    *font-size: initial;
}
.bank-label {
    font-size: 0.8125rem;
    color: var(--ink-on-lit-soft);
}
.bank-value {
    font-size: 0.8125rem;
}
/* ---------- CryptoWithdraw.vue ---------- */
.table-withdraw-crypto td {
    border-top: 0;
    border-bottom: 1px solid var(--border-lit);
    padding: 0.5rem 0.75rem;
}
.crypto-label {
    font-size: 0.8125rem;
    color: var(--ink-on-lit-soft);
}
.crypto-value {
    font-size: 0.8125rem;
}

/* ---------- Kyc.vue ---------- */
.img-preview {
    width: 100%;
    margin-bottom: 10px;
}
#modal-kyc #fileInput {
    display: none;
}
/* ---------- Pay2CoinDeposit.vue ---------- */
body > div[id^="modal-"] > div[id^="modal-"] {
    padding-bottom: 100px;
}

#modal-pay2coin .crypto-select-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    background: var(--surface-lit);
    border: 1px solid var(--border-lit);
    color: var(--ink-on-lit);
    font-weight: 400;
    padding: 0.375rem 0.75rem;
    height: calc(1.5em + 0.75rem + 2px);
}

#modal-pay2coin .crypto-select-toggle:hover,
#modal-pay2coin .crypto-select-toggle:focus,
#modal-pay2coin .show > .crypto-select-toggle {
    background: var(--surface-lit);
    color: var(--ink-on-lit);
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem var(--primary-a25);
}

#modal-pay2coin .crypto-select-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    color: var(--ink-on-lit);
}

#modal-pay2coin .crypto-select-caret {
    margin-left: 8px;
    font-size: 0.75rem;
    color: var(--ink-on-lit-soft);
    transition: transform 0.15s ease;
}

#modal-pay2coin .show > .crypto-select-toggle .crypto-select-caret {
    transform: rotate(180deg);
}

.crypto-select-menu {
    max-height: 240px;
    overflow-y: auto;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    z-index: 1060;
}

.crypto-select-menu .dropdown-item {
    padding: 0.5rem 1rem;
}

.crypto-select-menu .dropdown-item.active {
    background: var(--surface-lit-2);
    color: var(--blue-600);
    font-weight: 600;
}

.crypto-deposit-card {
    background: linear-gradient(180deg, var(--surface-lit) 0%, var(--surface-lit-2) 100%);
    border: 1px solid var(--border-lit);
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.crypto-deposit-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.crypto-currency-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent-100);
    color: var(--accent-600);
    border: 1px solid var(--accent-300);
    font-weight: 600;
    font-size: 0.8125rem;
    padding: 4px 10px;
    border-radius: 999px;
}

.crypto-network-badge {
    display: inline-flex;
    align-items: center;
    background: var(--surface-lit-2);
    color: var(--blue-600);
    border: 1px solid var(--blue-100);
    font-weight: 600;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.3px;
}

.crypto-amount-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface-lit-2);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
}

.crypto-amount-label {
    font-size: 0.8125rem;
    color: var(--ink-on-lit-soft);
}

.crypto-amount-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink-on-lit-strong);
}

.crypto-qr-wrapper {
    text-align: center;
    margin-bottom: 16px;
}

.crypto-qr-frame {
    display: inline-block;
    background: var(--surface-lit);
    padding: 10px;
    border-radius: 12px;
    border: 1px solid var(--border-lit);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.crypto-qr-image {
    display: block;
    width: 200px;
    height: 200px;
}

.crypto-qr-hint {
    margin: 10px 0 0;
    font-size: 0.75rem;
    color: var(--ink-on-lit-soft);
}

.crypto-qr-hint i {
    margin-right: 4px;
}

.crypto-address-block {
    margin-bottom: 16px;
}

.crypto-address-label {
    display: block;
    font-size: 0.75rem;
    color: var(--ink-on-lit-soft);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.crypto-address-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-lit);
    border: 1px dashed var(--border-lit);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.crypto-address-box:hover {
    border-color: var(--primary);
    background: var(--surface-lit-2);
}

.crypto-address-text {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--ink-on-lit-strong);
    word-break: break-all;
    line-height: 1.4;
}

.crypto-copy-btn {
    border: none;
    background: linear-gradient(135deg, var(--primary) 0%, var(--green-500) 100%);
    color: var(--primary-ink);
    border-radius: 8px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.crypto-copy-btn:hover {
    background: linear-gradient(135deg, var(--blue-600) 0%, var(--green-600) 100%);
}

.crypto-notice-list {
    list-style: none;
    padding: 12px 14px;
    margin: 0;
    background: var(--accent-100);
    border: 1px solid var(--accent-200);
    border-radius: 10px;
}

.crypto-notice-list li {
    font-size: 0.75rem;
    color: var(--accent-700);
    line-height: 1.6;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.crypto-notice-list li + li {
    margin-top: 6px;
}

.crypto-notice-list li i {
    margin-top: 3px;
    flex-shrink: 0;
}

.crypto-notice-list strong {
    color: var(--accent-700);
}

/* ---------- QrDeposit.vue ---------- */
.vld-overlay.is-full-page{
        z-index: 9999;
    }
    .thbanks{
            font-size: 2.5em;
    }
    .deposit-box{
        border: 3px dashed var(--muted);
        padding: 16px 16px;
        font-size: 1rem;
    }
    #modal-qr .badge {
    font-size: 100%;
}

/* ---------- Progress.vue ---------- */
.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1em;
}
.flex-container .progress {
    position: absolute;
    top: 5.5em;
    left: 0;
    height: 10px;
    margin: 0;
    box-shadow: none;
    background-color: var(--surface-lit-2);
    width: 100%;
    /* background: none; */
}
.flex-container .progress .progress-bar {
    background-color: var(--green-500);
    margin-left: 5em;
}
.flex-container .step {
    text-align: center;
    z-index: 2;
}
.flex-container .step .step-number {
    background-color: var(--surface-lit-2);
    padding: 0.25em;
    color: white;
    border-radius: 2em;
    background-size: 0% 0%;
    background-position: center;
    background-image: radial-gradient(
        circle at center,
        var(--blue-600) 50%,
        transparent 50%
    );
    background-repeat: no-repeat;
    width: 35px;
    height: 35px;
    text-align: center;
    padding-top: 4px;
    font-size: 0.9375rem;
}
.flex-container .step.current .step-number {
    background-size: 200% 200%;
    transition: all 0.4s 0.5s;
}
.flex-container .step.done .step-number {
    background-color: var(--primary);
}
.flex-container .step .step-label {
    padding: 5px 0;
    width: 40px;
    text-align: center;
    white-space: nowrap;
    overflow: visible;
}

/* ---------- History.vue ----------
   The tab strip used to be a flat block of --green-600 with the active tab
   marked by rgba(0,0,0,.2) over it — two greens, a colour this theme reserves
   for money-positive amounts, sitting at the top of a navy and gold page and
   shouting louder than anything else on it. It is a segmented control now, and
   the selected segment carries the brand primary, which is what navigation
   should be wearing on a page whose gold is spoken for by the deposit button.

   The old strip also used margin-bottom: -20px with a matching
   padding-top: 30px !important on the panel below, to fake one surface out of
   two. They are one surface now, so both are gone. */
.history-panel {
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%);
    box-shadow: var(--shadow-card);
}

.history-tabs {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 8px;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: var(--wash);
}
.history-tabs .nav-item {
    flex: 1 1 0;
    margin: 0;
}

.history-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-soft);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
        box-shadow 0.2s ease;
}
.history-tab:hover,
.history-tab:focus {
    color: var(--text);
    background: var(--wash-2);
    border-color: var(--border);
    text-decoration: none;
}
/* The plugin puts `active` on the anchor; nav-link.active is bootstrap's own
   selector for it, so this has to out-specify that rather than sit beside it. */
.history-tabs .nav-link.history-tab.active {
    color: var(--primary-ink);
    background: var(--grad-brand);
    border-color: transparent;
    box-shadow: 0 8px 20px -10px var(--primary-a70),
        0 1px 0 rgba(255, 255, 255, 0.14) inset;
}

.history-tab__icon {
    font-size: 0.9375rem;
    opacity: 0.8;
}
.history-tabs .nav-link.history-tab.active .history-tab__icon {
    opacity: 1;
}

/* The number of rows behind each tab. It is on screen already — the tables are
   loaded before any of them is opened — and it was the one thing the strip had
   room for and did not say. */
.history-tab__count {
    min-width: 22px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--wash-2);
    color: var(--text-dim);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.5;
}
.history-tabs .nav-link.history-tab.active .history-tab__count {
    background: rgba(0, 0, 0, 0.22);
    color: var(--primary-ink);
}

.history-body {
    padding: 18px 16px 8px;
}

/* Empty is the state this page is in most of the time — fourteen days is a
   short window — so it gets a shape rather than one grey sentence adrift in a
   panel sized for ten rows. */
.history-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 34px 16px 38px;
    text-align: center;
}
.history-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--wash-2);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 1.375rem;
}
.history-empty__title {
    margin: 0;
    color: var(--text-soft);
    font-size: 1rem;
}

/* The rows themselves: hairlines instead of bootstrap's striping, which put a
   pale wash over every other row of a dark table. */
.history-body .table {
    margin-bottom: 0;
}
.history-body .table td,
.history-body .table th {
    border-top: 0;
    border-bottom: 1px solid var(--border);
    padding: 12px 8px;
    vertical-align: middle;
}
.history-body .table tbody tr:last-child td {
    border-bottom: 0;
}
.history-body .table thead th {
    border-bottom: 1px solid var(--border-strong);
    color: var(--text-dim);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.history-body .list-right p {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}
.history-body .list-right small {
    color: var(--text-dim);
}

@media (max-width: 575.98px) {
    .history-tabs {
        gap: 4px;
        padding: 6px;
    }
    .history-tab {
        gap: 6px;
        padding: 10px 4px;
        font-size: 0.875rem;
    }
    .history-tab__icon {
        font-size: 0.8125rem;
    }
    .history-body {
        padding: 14px 10px 6px;
    }
}

/* The detail column, which base.css draws with margin-bottom: -10px on every
   line to pull them together. That was tuned for a table with no row padding;
   with hairlines and 12px cells it reads as one run-on block, and the strong
   tags sit flush against their labels with no space after the colon. */
.history-body .list-left h5 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 5px;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}
.history-body .list-left p {
    margin: 0 0 2px;
    color: var(--text-dim);
    font-size: 0.8125rem;
    line-height: 1.45;
}
.history-body .list-left p strong {
    margin-left: 4px;
    color: var(--text-soft);
    font-weight: 600;
}
.history-body .list-left p:last-child {
    margin-bottom: 0;
}