/* ===== Pangeya Visual Theme v3 ===== */
:root {
    --bs-body-bg: #080b12 !important;
    --bs-body-color: #eef2f8 !important;
    --bs-border-color: #223049 !important;
    --bs-link-color: #4f8cff !important;
    --bs-link-hover-color: #22d3ee !important;

    --bg: #080b12;
    --bg-rgb: 8, 11, 18;
    --surface: #0e1420;
    --surface-rgb: 14, 20, 32;
    --surface-2: #16202f;
    --surface-2-rgb: 22, 32, 47;
    --surface-3: #1d2941;
    --surface-3-rgb: 29, 41, 65;
    --border: #223049;
    --border-strong: #31435f;
    --text: #eef2f8;
    --text-muted: #93a2bd;
    --accent: #4f8cff;
    --accent-rgb: 79, 140, 255;
    --accent-2: #22d3ee;
    --accent-2-rgb: 34, 211, 238;
    --gold: #ffb020;
    --gold-rgb: 255, 176, 32;
    --gold-soft: rgba(var(--gold-rgb), .14);
    --success: #10b981;
    --success-rgb: 16, 185, 129;
    --danger: #ef4444;
    --warning: #ffb020;
    --focus-ring: 0 0 0 3px rgba(var(--accent-rgb), .35);
    --glow-accent: 0 18px 46px rgba(var(--accent-rgb), .28);
    --glow-gold: 0 12px 30px rgba(var(--gold-rgb), .2);
    --shadow: 0 18px 48px rgba(0, 0, 0, .28);
    --shadow-lg: 0 26px 70px rgba(0, 0, 0, .38);
}

html,
body {
    background:
        radial-gradient(circle at 16% 0%, rgba(var(--accent-rgb), .16), transparent 34rem),
        radial-gradient(circle at 86% 12%, rgba(var(--accent-2-rgb), .10), transparent 30rem),
        linear-gradient(180deg, #0a0f1a 0%, var(--bg) 42%, #05070c 100%) !important;
    color: var(--text) !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .75), transparent 78%);
}

.container > .my-3 > .card,
.card,
.exchange-widget,
.contact-info-frame,
.affiliate-program-card,
.discount-program-card,
.user-orders-page,
.user-order-page,
.shadow-sm,
.bg-light,
.modal-content {
    background: linear-gradient(180deg, rgba(var(--surface-2-rgb), .94), rgba(var(--surface-rgb), .98)) !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    border-radius: 22px !important;
    box-shadow: var(--shadow) !important;
    color: var(--text) !important;
}

.card-header,
.page-header,
.exchange-widget-header,
.affiliate-program-header,
.discount-program-header {
    background:
        linear-gradient(135deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-2-rgb), .12)),
        linear-gradient(180deg, rgba(var(--surface-3-rgb), .92), rgba(var(--surface-2-rgb), .92)) !important;
    border-bottom: 1px solid rgba(var(--accent-rgb), .22) !important;
    color: var(--text) !important;
    letter-spacing: .01em;
}

.card-body,
.modal-body,
.form-text,
.text-muted,
small,
.small {
    color: var(--text-muted) !important;
}

h1, h2, h3, h4, h5, h6,
.card-title,
.hero-title,
.exchange-label,
.form-label,
.exchange-info-label,
.custom-select-value {
    color: var(--text) !important;
}

a,
.agreement-link {
    color: var(--accent) !important;
}

a:hover,
.agreement-link:hover {
    color: var(--accent-2) !important;
}

.form-control,
.form-select,
.form-check-input,
.input-group-text,
.custom-select-trigger,
.exchange-numeric-input,
textarea {
    background: rgba(var(--surface-2-rgb), .94) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

.form-control::placeholder,
.custom-select-search-input::placeholder,
textarea::placeholder {
    color: rgba(147, 162, 189, .78) !important;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.custom-select-trigger:focus,
.exchange-numeric-input:focus,
textarea:focus {
    border-color: rgba(var(--accent-rgb), .72) !important;
    box-shadow: var(--focus-ring), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
    outline: none !important;
}

.btn-hero,
.btn-accent,
.btn-hero-glass,
.btn-kyc-primary,
#balance-manager-submit-btn,
button[type="submit"].btn,
a.btn-hero {
    background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    color: #ffffff !important;
    box-shadow: var(--glow-accent) !important;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, filter .16s ease !important;
}

.btn-hero:hover,
.btn-accent:hover,
.btn-hero-glass:hover,
.btn-kyc-primary:hover,
#balance-manager-submit-btn:hover,
button[type="submit"].btn:hover,
a.btn-hero:hover {
    filter: saturate(1.12) brightness(1.04) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 24px 62px rgba(var(--accent-rgb), .34) !important;
}

.btn-hero:active,
.btn-accent:active,
.btn-hero-glass:active,
.btn-kyc-primary:active,
#balance-manager-submit-btn:active,
button[type="submit"].btn:active,
a.btn-hero:active {
    transform: translateY(0) scale(.99) !important;
}

.btn-hero:disabled,
.btn-hero[disabled],
.btn-accent:disabled,
.btn-accent[disabled] {
    opacity: .58 !important;
    filter: grayscale(.25) !important;
    box-shadow: none !important;
}

.btn-dark,
.btn-outline-secondary,
.btn-secondary {
    background: rgba(var(--surface-2-rgb), .9) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

.btn-dark:hover,
.btn-outline-secondary:hover,
.btn-secondary:hover {
    border-color: rgba(var(--accent-rgb), .55) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 30px rgba(var(--accent-rgb), .18) !important;
}

.hero-section {
    background:
        radial-gradient(circle at 12% 12%, rgba(var(--accent-rgb), .30), transparent 32rem),
        radial-gradient(circle at 86% 24%, rgba(var(--gold-rgb), .13), transparent 25rem),
        linear-gradient(135deg, rgba(var(--surface-3-rgb), .96), rgba(var(--surface-rgb), .98)) !important;
    border: 1px solid rgba(var(--accent-rgb), .2) !important;
    box-shadow: var(--shadow-lg) !important;
}

.text-gradient-brand,
.hero-title {
    background: linear-gradient(135deg, #ffffff 0%, #bcd3ff 42%, var(--accent-2) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

.exchange-widget,
.exchange-tab-content {
    background:
        linear-gradient(180deg, rgba(var(--surface-2-rgb), .97), rgba(var(--surface-rgb), .99)) !important;
    border: 1px solid rgba(var(--accent-rgb), .16) !important;
    box-shadow: var(--shadow-lg) !important;
}

.exchange-tabs,
.exchange-tabs-wrapper {
    background: rgba(var(--bg-rgb), .34) !important;
    border: 1px solid rgba(255, 255, 255, .06) !important;
    border-radius: 18px !important;
    padding: .35rem !important;
}

.exchange-tab-btn,
.select-filter-btn {
    background: rgba(var(--surface-2-rgb), .72) !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    color: var(--text-muted) !important;
    border-radius: 14px !important;
    transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease !important;
}

.exchange-tab-btn:hover,
.select-filter-btn:hover {
    border-color: rgba(var(--accent-rgb), .42) !important;
    color: var(--text) !important;
    transform: translateY(-1px) !important;
}

.exchange-tab-btn.active,
.exchange-tab-btn[aria-selected="true"],
.select-filter-btn.active,
.select-filter-btn.selected {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), .96), rgba(var(--accent-2-rgb), .86)) !important;
    border-color: rgba(255, 255, 255, .25) !important;
    color: #fff !important;
    box-shadow: 0 14px 34px rgba(var(--accent-rgb), .28) !important;
}

.exchange-block {
    position: relative;
    overflow: visible !important;
    isolation: isolate;
    background:
        radial-gradient(280px 140px at 8% 0%, rgba(var(--accent-rgb), .18), transparent 58%),
        linear-gradient(180deg, rgba(29, 41, 65, .96), rgba(16, 24, 38, .98)) !important;
    border: 1px solid rgba(var(--accent-rgb), .28) !important;
    border-radius: 20px !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 18px 42px rgba(0, 0, 0, .34) !important;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

.exchange-block::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 28%);
}

.row > .col-lg-5:first-of-type .exchange-block {
    background:
        radial-gradient(280px 140px at 8% 0%, rgba(var(--accent-rgb), .26), transparent 58%),
        linear-gradient(180deg, rgba(32, 46, 74, .98), rgba(16, 24, 38, .98)) !important;
    border-color: rgba(var(--accent-rgb), .34) !important;
}

.row > .col-lg-5:last-of-type .exchange-block {
    background:
        radial-gradient(280px 140px at 92% 0%, rgba(var(--gold-rgb), .16), transparent 58%),
        linear-gradient(180deg, rgba(36, 40, 52, .98), rgba(18, 22, 32, .98)) !important;
    border-color: rgba(255, 176, 32, .28) !important;
}

.exchange-block::before {
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .42), rgba(var(--gold-rgb), .28), transparent) !important;
}

.exchange-block:hover,
.exchange-block:focus-within,
.exchange-block:has(.custom-select-trigger.active),
.exchange-block:has(.custom-select-dropdown.active) {
    border-color: rgba(var(--accent-rgb), .72) !important;
    box-shadow: var(--focus-ring), 0 22px 52px rgba(0, 0, 0, .36) !important;
    transform: translateY(-2px) !important;
}

.row > .col-lg-5:last-of-type .exchange-block:hover,
.row > .col-lg-5:last-of-type .exchange-block:focus-within {
    border-color: rgba(255, 176, 32, .55) !important;
}

.exchange-block .exchange-label {
    display: inline-flex !important;
    align-items: center;
    width: fit-content;
    padding: .28rem .7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    color: #d7e4ff !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.row > .col-lg-5:last-of-type .exchange-block .exchange-label {
    color: #ffe7b0 !important;
    border-color: rgba(255, 176, 32, .22);
    background: rgba(255, 176, 32, .08);
}

.exchange-block .custom-select-trigger,
.exchange-block .exchange-amount input,
.exchange-block .exchange-numeric-input {
    background: rgba(8, 12, 20, .72) !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

@media (max-width: 768px) {
    .exchange-block,
    .exchange-block:hover,
    .exchange-block:active,
    .exchange-block:focus {
        background:
            radial-gradient(280px 140px at 8% 0%, rgba(var(--accent-rgb), .18), transparent 58%),
            linear-gradient(180deg, rgba(29, 41, 65, .96), rgba(16, 24, 38, .98)) !important;
        border-color: rgba(var(--accent-rgb), .28) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 16px 34px rgba(0, 0, 0, .3) !important;
        transform: none !important;
    }

    .row > .col-lg-5:last-of-type .exchange-block,
    .row > .col-lg-5:last-of-type .exchange-block:hover {
        background:
            radial-gradient(280px 140px at 92% 0%, rgba(var(--gold-rgb), .16), transparent 58%),
            linear-gradient(180deg, rgba(36, 40, 52, .98), rgba(18, 22, 32, .98)) !important;
        border-color: rgba(255, 176, 32, .28) !important;
    }
}

.exchange-block .exchange-amount input,
.exchange-numeric-input {
    font-size: clamp(1.35rem, 2.4vw, 2rem) !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    caret-color: var(--gold) !important;
}

.custom-select-trigger {
    min-height: 58px;
    border-radius: 16px !important;
}

.custom-select-trigger.active,
.custom-select-trigger[aria-expanded="true"] {
    background: rgba(var(--surface-3-rgb), .96) !important;
    border-color: rgba(var(--accent-rgb), .72) !important;
    box-shadow: var(--focus-ring) !important;
}

.custom-select-arrow,
.custom-select-trigger .custom-select-arrow {
    color: var(--accent) !important;
    transition: transform .16s ease, color .16s ease !important;
}

.custom-select-trigger.active .custom-select-arrow,
.custom-select-trigger[aria-expanded="true"] .custom-select-arrow {
    color: var(--gold) !important;
    transform: rotate(180deg) !important;
}

.custom-select-dropdown {
    background: rgba(var(--surface-rgb), .98) !important;
    border: 1px solid rgba(var(--accent-rgb), .32) !important;
    border-radius: 18px !important;
    box-shadow: var(--shadow-lg) !important;
    backdrop-filter: blur(16px) !important;
}

.custom-select-search {
    background: rgba(var(--bg-rgb), .38) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
}

.custom-select-search-input {
    background: rgba(var(--surface-2-rgb), .96) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

.custom-select-option {
    position: relative;
    color: var(--text) !important;
    background: transparent !important;
    transition: background .14s ease, color .14s ease, transform .14s ease !important;
}

.custom-select-option::before {
    content: "";
    position: absolute;
    left: 0;
    top: .45rem;
    bottom: .45rem;
    width: 3px;
    border-radius: 999px;
    background: transparent;
    transition: background .14s ease;
}

.custom-select-option:hover,
.custom-select-option.highlighted,
.custom-select-option.active,
.custom-select-option.selected {
    background: rgba(var(--surface-3-rgb), .92) !important;
    color: #fff !important;
}

.custom-select-option:hover::before,
.custom-select-option.highlighted::before,
.custom-select-option.active::before,
.custom-select-option.selected::before {
    background: linear-gradient(180deg, var(--accent), var(--gold));
}

.custom-select-icon,
.currency-icon,
.exchange-info-icon {
    box-shadow: 0 8px 20px rgba(0, 0, 0, .22) !important;
}

.exchange-rate,
.reserve-value,
.timer-value,
.exchange-info-value,
.rate-value,
[data-role="rate"],
[data-role="reserve"] {
    color: var(--gold) !important;
    font-weight: 700 !important;
}

.exchange-info-item,
.stat-card,
.info-card,
.option-card,
.options-grid .form-check,
.trustpilot-review-banner,
.alert,
.table-responsive,
.contact-info-card {
    background: rgba(var(--surface-2-rgb), .84) !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    border-radius: 18px !important;
    color: var(--text) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .18) !important;
}

.alert-secondary,
.alert-info {
    background: rgba(var(--accent-rgb), .12) !important;
    border-color: rgba(var(--accent-rgb), .26) !important;
    color: var(--text) !important;
}

.alert-warning {
    background: rgba(var(--gold-rgb), .13) !important;
    border-color: rgba(var(--gold-rgb), .36) !important;
    color: #ffe1a3 !important;
}

.table,
.table-striped,
.table-bordered {
    --bs-table-bg: transparent !important;
    --bs-table-color: var(--text) !important;
    --bs-table-border-color: rgba(255, 255, 255, .08) !important;
    color: var(--text) !important;
}

.table thead th,
.table th,
.affiliate-table-head,
.discount-table-head {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), .2), rgba(var(--accent-2-rgb), .12)) !important;
    color: var(--text) !important;
    border-color: rgba(var(--accent-rgb), .2) !important;
}

.table td {
    background: rgba(var(--surface-rgb), .58) !important;
    border-color: rgba(255, 255, 255, .07) !important;
    color: var(--text) !important;
}

.page-header {
    padding: 1.35rem 1.5rem;
    border-radius: 22px !important;
    box-shadow: var(--shadow) !important;
}

.exchange-info-item {
    padding: 1rem 1.1rem;
}

.exchange-info-label {
    color: var(--text-muted) !important;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.exchange-info-value {
    color: var(--gold) !important;
    font-size: 1.06rem;
}

.options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .85rem;
}

.options-grid .form-check,
.option-card {
    padding: 1rem 1.1rem !important;
    transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease !important;
}

.options-grid .form-check:hover,
.option-card:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--accent-rgb), .44) !important;
}

.options-grid .form-check:has(.form-check-input:checked),
.option-card.active,
.option-card.selected {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), .18), rgba(var(--gold-rgb), .10)) !important;
    border-color: rgba(var(--gold-rgb), .58) !important;
    box-shadow: var(--glow-gold) !important;
}

.form-check-input:checked {
    background-color: var(--gold) !important;
    border-color: var(--gold) !important;
}

.form-check-label {
    color: var(--text) !important;
}

.badge,
.status-badge,
.discount-program-note,
.affiliate-program-note {
    border-radius: 999px !important;
}

.badge.bg-warning,
.text-warning,
.discount-program-note,
.affiliate-program-note {
    color: var(--gold) !important;
}

@media (max-width: 767.98px) {
    .hero-section,
    .exchange-widget,
    .card,
    .page-header {
        border-radius: 18px !important;
    }

    .exchange-tab-btn,
    .select-filter-btn {
        min-height: 42px;
    }

    .custom-select-trigger {
        min-height: 54px;
    }

    .options-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}
/* ===== Exchange Page Focus Layer ===== */
.exchange-currency-block {
    height: 100%;
    padding: 1.25rem;
    background:
        linear-gradient(180deg, rgba(var(--surface-2-rgb), .92), rgba(var(--surface-rgb), .96)) !important;
    border: 1px solid rgba(var(--accent-rgb), .15) !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 42px rgba(0, 0, 0, .22) !important;
}

.exchange-currency-header {
    display: flex;
    align-items: center;
    color: var(--text) !important;
}

.exchange-currency-header img,
.custom-select-icon img,
.currency-icon img {
    border: 1px solid rgba(255, 255, 255, .14) !important;
    background: rgba(255, 255, 255, .06) !important;
}

.exchange-info-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

@media (min-width: 768px) {
    .exchange-info-pair .exchange-info-item {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .45rem;
        padding: .8rem .85rem;
        min-width: 0;
        white-space: nowrap;
    }

    .exchange-info-pair .exchange-info-label {
        font-size: .62rem;
        margin-bottom: 0;
        letter-spacing: .035em;
    }

    .exchange-info-pair .exchange-info-value {
        font-size: .78rem;
        line-height: 1.2;
    }
}

.exchange-notification {
    background: rgba(var(--accent-rgb), .12) !important;
    border: 1px solid rgba(var(--accent-rgb), .28) !important;
    border-radius: 16px !important;
    color: var(--text) !important;
}

.option-card-highlight {
    border-color: rgba(var(--gold-rgb), .44) !important;
    background: linear-gradient(135deg, rgba(var(--gold-rgb), .12), rgba(var(--surface-2-rgb), .92)) !important;
}

.option-card > .form-check {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.option-card-highlight .badge,
.option-card .badge,
.bg-accent-soft,
.text-accent {
    background: rgba(var(--gold-rgb), .14) !important;
    border: 1px solid rgba(var(--gold-rgb), .32) !important;
    color: var(--gold) !important;
}

.option-card:has(.form-check-input:checked) .form-check-label::after {
    content: "";
    display: inline-flex;
    width: .55rem;
    height: .55rem;
    margin-left: .55rem;
    border-radius: 999px;
    background: var(--gold);
    box-shadow: 0 0 0 4px rgba(var(--gold-rgb), .14);
    vertical-align: middle;
}

.agreement-link {
    border-bottom: 1px solid rgba(var(--accent-rgb), .26) !important;
    text-decoration: none !important;
}

.agreement-link:hover {
    border-bottom-color: rgba(var(--gold-rgb), .68) !important;
}

.exchange-summary,
#exchange-success-details,
.lets-transaction-address-card {
    background: linear-gradient(135deg, rgba(var(--surface-2-rgb), .94), rgba(var(--surface-rgb), .97)) !important;
    border: 1px solid rgba(var(--accent-rgb), .22) !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .22) !important;
}

#modal-send-amount,
#modal-receive-amount,
#modal-exchange-rate,
#success-transaction-id {
    color: var(--gold) !important;
}

#rate-refresh-indicator {
    background: linear-gradient(135deg, rgba(var(--surface-2-rgb), .95), rgba(var(--surface-rgb), .94)) !important;
    border: 1px solid rgba(var(--gold-rgb), .28) !important;
    box-shadow: var(--glow-gold) !important;
}

#rate-refresh-indicator .rate-refresh-countdown,
#rate-refresh-indicator [id*="countdown"] {
    color: var(--gold) !important;
}

#exchange-form .col-lg-2 #rate-refresh-indicator {
    max-width: 190px;
    margin: .75rem auto 0;
    justify-content: center;
}

.exchange-inline-rate {
    width: 100%;
    max-width: 190px;
    margin: 1rem auto 0;
    padding: .75rem .7rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    border: 1px solid rgba(var(--gold-rgb), .28);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(var(--surface-2-rgb), .94), rgba(var(--surface-rgb), .9));
    box-shadow: 0 16px 38px rgba(0, 0, 0, .24), 0 0 22px rgba(var(--gold-rgb), .08);
    text-align: center;
}

.exchange-inline-rate.is-empty {
    opacity: .72;
}

.exchange-inline-rate__label {
    color: var(--text-muted);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.exchange-inline-rate__value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    color: var(--gold);
    font-family: 'SF Mono', 'Roboto Mono', monospace;
    font-size: .82rem;
    font-weight: 800;
    line-height: 1.25;
}

.exchange-inline-rate__equals {
    color: var(--text-muted);
    font-weight: 600;
}

@media (max-width: 991.98px) {
    .exchange-inline-rate {
        max-width: 320px;
        margin-top: 1.25rem;
    }
}

/* Fiat "Обменять" button: green on every breakpoint so it stands out from
   the blue/gold theme. Applies on mobile too (outside the media query
   below, which only handles desktop positioning/sizing). Colors now come
   from the shared .btn-confirm-exchange rule (see bottom of file) so every
   exchange-confirmation button on the site — this one, the direction-page
   order form, the final order-confirmation page, and the LetsExchange modal
   — always match. */
#exchange-form .exchange-widget[data-exchange-type="fiat"] #exchange-submit-button:hover {
    box-shadow: 0 22px 48px rgba(var(--success-rgb), .48) !important;
}

/* Desktop only: float the fiat "Обменять" button into the gutter between the
   Send/Receive blocks, directly under the rate widget / refresh countdown
   stack, with the same 12px gap those two already use between each other.
   Narrower than the gutter (176px vs 190px) so it never touches the Send or
   Receive blocks. Mobile keeps the original stacked button below both blocks
   (no changes below the 992px breakpoint). */
@media (min-width: 992px) {
    #exchange-form .exchange-widget[data-exchange-type="fiat"] .row.align-items-center.g-4 {
        position: relative;
    }

    #exchange-form .exchange-widget[data-exchange-type="fiat"] .row.align-items-center.g-4 > .col-12.order-lg-5 {
        margin-top: 0;
    }

    #exchange-form .exchange-widget[data-exchange-type="fiat"] #exchange-submit-button {
        position: absolute;
        top: 464px;
        left: 50%;
        z-index: 6;
        width: auto;
        max-width: 176px;
        padding: .55rem .75rem;
        font-size: .85rem;
        white-space: nowrap;
        transform: translateX(-50%);
    }

    #exchange-form .exchange-widget[data-exchange-type="fiat"] #exchange-submit-button:hover {
        transform: translateX(-50%) translateY(-2px) !important;
    }

    #exchange-form .exchange-widget[data-exchange-type="fiat"] #exchange-submit-button:active {
        transform: translateX(-50%) translateY(0) scale(.99) !important;
    }
}

@media (max-width: 767.98px) {
    .exchange-info-pair {
        grid-template-columns: 1fr;
    }

    .exchange-currency-block {
        padding: 1rem;
    }
}

.telegram-channel-banner {
    background:
        radial-gradient(480px 180px at 10% 12%, rgba(42, 171, 238, 0.28), transparent 64%),
        radial-gradient(380px 160px at 94% 88%, rgba(255, 176, 32, 0.16), transparent 58%),
        linear-gradient(135deg, rgba(8, 16, 28, 0.96), rgba(10, 22, 38, 0.94)) !important;
    border: 1px solid rgba(42, 171, 238, 0.28) !important;
    border-radius: 22px !important;
    box-shadow: 0 22px 56px rgba(3, 8, 20, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.home-news {
    background:
        radial-gradient(420px 180px at 8% 0%, rgba(var(--accent-rgb), 0.16), transparent 62%),
        linear-gradient(180deg, rgba(var(--surface-2-rgb), 0.96), rgba(var(--surface-rgb), 0.98)) !important;
    border: 1px solid rgba(var(--accent-rgb), 0.18) !important;
    border-radius: 22px !important;
    box-shadow: 0 22px 56px rgba(3, 8, 20, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

#exchange-form #send-select-dropdown,
#exchange-form #receive-select-dropdown,
#exchange-form #send-select-dropdown.active,
#exchange-form #send-select-dropdown:not(.active),
#exchange-form #receive-select-dropdown.active,
#exchange-form #receive-select-dropdown:not(.active) {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    flex-direction: column !important;
    pointer-events: auto !important;
    z-index: 2 !important;
    height: auto !important;
    min-height: 220px !important;
    max-height: none !important;
}

#exchange-form #send-select-trigger .custom-select-arrow,
#exchange-form #receive-select-trigger .custom-select-arrow {
    display: none !important;
}

#exchange-form .custom-select-wrapper--inline,
.custom-select-wrapper--inline {
    display: flex !important;
    flex-direction: column;
    gap: 0.75rem;
    height: auto !important;
    overflow: visible !important;
}

#exchange-form .custom-select-wrapper--inline .custom-select-trigger,
.custom-select-wrapper--inline .custom-select-trigger {
    order: 1;
    cursor: default !important;
}

#exchange-form .custom-select-wrapper--inline .custom-select-arrow,
.custom-select-wrapper--inline .custom-select-arrow {
    display: none !important;
}

#exchange-form .custom-select-wrapper--inline .exchange-amount,
.custom-select-wrapper--inline .exchange-amount {
    order: 2;
    margin-top: 0 !important;
}

#exchange-form .custom-select-wrapper--inline .custom-select-dropdown,
#exchange-form .custom-select-wrapper--inline .custom-select-dropdown.active,
#exchange-form .custom-select-wrapper--inline .custom-select-dropdown:not(.active),
.custom-select-wrapper--inline .custom-select-dropdown,
.custom-select-wrapper--inline .custom-select-dropdown.active,
.custom-select-wrapper--inline .custom-select-dropdown:not(.active) {
    order: 3;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    flex-direction: column !important;
    pointer-events: auto !important;
    z-index: 2 !important;
    height: auto !important;
    min-height: 220px !important;
    max-height: none !important;
    overflow: hidden !important;
    touch-action: pan-y !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 10px 24px rgba(0, 0, 0, .18) !important;
    background: rgba(8, 12, 20, .55) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 16px !important;
}

#exchange-form .custom-select-wrapper--inline .custom-select-dropdown:not(.active) *,
.custom-select-wrapper--inline .custom-select-dropdown:not(.active) * {
    visibility: visible !important;
    pointer-events: auto !important;
}

.custom-select-wrapper--inline .custom-select-filters {
    position: relative !important;
    top: auto !important;
}

.custom-select-wrapper--inline .custom-select-options {
    max-height: 240px !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
}

.exchange-block:has(.custom-select-wrapper--inline .custom-select-dropdown.active) {
    transform: none !important;
}

.exchange-block:has(.custom-select-wrapper--inline):hover,
.exchange-block:has(.custom-select-wrapper--inline):focus-within {
    transform: translateY(-2px) !important;
}

@media (max-width: 768px) {
    .custom-select-wrapper--inline .custom-select-options {
        max-height: 200px !important;
        padding-bottom: 0.75rem !important;
    }
}

/* ===== Shared "confirm exchange" button color ===============================
   Any button that finalizes/confirms an exchange must always be green so it
   reads as the primary "go" action everywhere on the site, regardless of
   which page/flow it lives on: the homepage fiat widget, the direction page
   order-creation form, the final order-confirmation page, and the
   LetsExchange partner modal. Add class="btn-confirm-exchange" to a button
   to opt it into this rule. */
.btn-confirm-exchange {
    background: linear-gradient(135deg, var(--success), #059669) !important;
    border-color: rgba(255, 255, 255, .2) !important;
    box-shadow: 0 16px 36px rgba(var(--success-rgb), .4) !important;
}

.btn-confirm-exchange:hover {
    box-shadow: 0 22px 48px rgba(var(--success-rgb), .48) !important;
}

/* main.css defines ".exchange-widget .btn-hero" (2 classes) with its own
   forced black background — higher specificity than the plain
   ".btn-confirm-exchange" rule above, so inside the homepage exchange
   widgets (fiat/swap/bridge/dex tabs) it was silently winning and turning
   the button black again on every breakpoint. Re-declare the green colors
   with matching "3 classes" specificity so this always wins there too. */
.exchange-widget .btn-hero.btn-confirm-exchange {
    background: linear-gradient(135deg, var(--success), #059669) !important;
    border-color: rgba(255, 255, 255, .2) !important;
    box-shadow: 0 16px 36px rgba(var(--success-rgb), .4) !important;
}

.exchange-widget .btn-hero.btn-confirm-exchange:hover {
    background: linear-gradient(135deg, var(--success), #059669) !important;
    border-color: rgba(255, 255, 255, .2) !important;
    box-shadow: 0 22px 48px rgba(var(--success-rgb), .48) !important;
}

/* ===== Popular exchange directions (homepage) ================================
   Data-driven shortlist placed right under the fiat exchange widget, on both
   desktop and mobile. Pairs were chosen from real order-history frequency
   (see git history / changelog for the analysis); slugs, names and icons are
   still resolved live from te_directions()/te_currencies() at render time so
   a card can never point at a disabled direction or show a stale icon. Plain
   <a href="/exchange/{slug}"> links — no JS required to "select" a
   direction, the existing /exchange/{slug} route already pre-fills it. */
.popular-directions {
    margin-top: 1.75rem;
}

.popular-directions__header {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1rem;
}

.popular-directions__header svg {
    color: var(--gold);
    flex-shrink: 0;
}

.popular-directions__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}

.popular-directions__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .85rem;
}

.popular-direction-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--surface-rgb), .95), rgba(var(--surface-2-rgb), .9));
    border: 1px solid rgba(var(--accent-rgb), .14);
    text-decoration: none !important;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.popular-direction-card:hover,
.popular-direction-card:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(var(--success-rgb), .45);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .3);
}

.popular-direction-card__pair {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-shrink: 0;
}

.popular-direction-card__icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    object-fit: contain;
}

.popular-direction-card__arrow {
    color: var(--text-muted);
    flex-shrink: 0;
    display: flex;
}

.popular-direction-card__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.popular-direction-card__label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.popular-direction-card__cta {
    font-size: .72rem;
    color: var(--success);
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .popular-directions__grid {
        grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    }

    .popular-direction-card__cta {
        display: none;
    }
}

/* Priority exchange: extra terms open on hover on desktop and push the page down. */
@media (min-width: 769px) {
    .urgent-rate-note__extra {
        display: none;
        position: static;
        margin-top: .55rem;
        padding: .75rem .9rem;
        background: rgba(16, 24, 38, .98);
        border: 1px solid rgba(var(--gold-rgb), .38);
        border-radius: 12px;
        color: var(--text);
        line-height: 1.45;
    }

    #fast-exchange-option:hover .urgent-rate-note__extra,
    #fast-exchange-option:focus-within .urgent-rate-note__extra {
        display: block;
    }
}

@media (max-width: 768px) {
    .urgent-rate-note__extra {
        display: block;
        position: static;
        margin-top: .4rem;
        line-height: 1.45;
    }
}
/* ===== Grid & symmetry layer (2026-11-04) =====
   Fixes layout drift on the exchange form:
   - currency header: icon and title share one centre line (global `.card-body h*` / `.card-body img`
     mobile margins used to push the title down 20px and the icon 12px);
   - info tiles: label above value, value never wraps, tile count adapts to the real block width;
   - additional options: heading on one line, fee badge pinned to the card's right edge.
   Specificity is raised on purpose to beat the legacy `!important` rules in main.css and
   dark-theme-critical.php; nothing here changes colours of other components. */

/* --- currency header ------------------------------------------------------ */
.exchange-currency-block .exchange-currency-header {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.exchange-currency-block .exchange-currency-header > img {
    flex: 0 0 auto;
    width: 32px;
    height: 32px !important;
    margin: 0 !important;
}

.exchange-currency-block .exchange-currency-header > h5 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere;
}

/* --- info tiles ------------------------------------------------------------ */
.exchange-currency-block .exchange-info-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: .75rem;
}

.exchange-currency-block .exchange-info-pair > .exchange-info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    min-width: 0;
    padding: .75rem .65rem;
    text-align: center;
    white-space: normal;
}

.exchange-currency-block .exchange-info-pair .exchange-info-label {
    margin: 0;
    font-size: .68rem;
    line-height: 1.2;
    letter-spacing: .06em;
    text-wrap: balance;
}

.exchange-currency-block .exchange-info-pair .exchange-info-value {
    max-width: 100%;
    font-size: clamp(.8rem, 3.4vw, .9rem);
    line-height: 1.25;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* --- additional options: heading ------------------------------------------- */
.options-heading {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin: 0 0 1rem !important;
    font-size: .8125rem !important;
    font-weight: 700;
    line-height: 1.2 !important;
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text-muted) !important;
}

.options-heading > svg {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 2rem;
    height: 2rem;
    margin: 0 !important;
    padding: .45rem;
    border: 1px solid rgba(147, 162, 189, .3);
    border-color: color-mix(in srgb, var(--text-muted) 30%, transparent);
    border-radius: .65rem;
    background: rgba(147, 162, 189, .1);
    background: color-mix(in srgb, var(--text-muted) 10%, transparent);
    color: var(--text-muted);
}

.options-heading::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(147, 162, 189, .3), transparent);
    background: linear-gradient(90deg, color-mix(in srgb, var(--text-muted) 30%, transparent), transparent);
}

/* --- additional options: card rows ------------------------------------------ */
.option-card > .form-check:not(#z):not(#z) {
    align-items: flex-start !important;
    gap: .75rem !important;
}

.option-card .form-check-input:not(#z):not(#z):not(#z):not(#z) {
    margin-top: .08rem !important;
}

.options-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)) !important;
}

.options-grid > .option-card {
    min-width: 0;
}

.option-card .form-check-label:not(#z):not(#z) {
    display: flex !important;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .4rem .75rem;
    min-width: 0;
    line-height: 1.4;
}

.option-card .option-card__title {
    flex: 1 1 7rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* The fee badge is pinned to the right edge of the card; it only drops under the title
   when the title would otherwise be squeezed below ~7rem. */
.option-card .form-check-label .badge {
    flex: 0 0 auto;
    align-self: flex-start;
    min-width: 5.25rem;
    margin: 0 0 0 auto !important;
    padding: .35rem .6rem !important;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.option-card > .small {
    padding-left: 2rem;
}

/* selected-state dot moves from the label (now a flex row) to the title text */
.option-card:has(.form-check-input:checked) .form-check-label::after {
    display: none;
}

.option-card:has(.form-check-input:checked) .option-card__title::after {
    content: "";
    display: inline-block;
    width: .55rem;
    height: .55rem;
    margin-left: .55rem;
    border-radius: 999px;
    background: var(--gold);
    box-shadow: 0 0 0 4px rgba(var(--gold-rgb), .14);
    vertical-align: middle;
}


/* Options: calm selected state (2026-11-04) */
/* The inner form-check row must not become a second glowing rectangle when ticked. */
.option-card > .form-check:has(.form-check-input:checked):not(#z):not(#z):not(#z):not(#z) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* No dot next to the title; selection is shown by the checkbox and a quiet card border. */
.option-card:has(.form-check-input:checked) .option-card__title::after,
.option-card:has(.form-check-input:checked) .form-check-label::after {
    content: none !important;
    display: none !important;
}

.option-card:has(.form-check-input:checked):not(#z):not(#z) {
    border-color: rgba(var(--accent-rgb), .5) !important;
    box-shadow: none !important;
}