:root {
    --gateway-bg: #f6f8fb;
    --gateway-panel: #ffffff;
    --gateway-panel-subtle: #eef6f3;
    --gateway-border: #d8e1df;
    --gateway-ink: #14201f;
    --gateway-muted: #62706e;
    --gateway-green: #127c64;
    --gateway-cyan: #0a7f9f;
    --gateway-amber: #a56800;
    --gateway-rose: #b9325a;
    --gateway-shadow: 0 18px 46px rgba(20, 32, 31, .08);
}

body {
    background: var(--gateway-bg);
    color: var(--gateway-ink);
}

.mainContent,
.content-wrapper,
.public-page-wrap {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(246, 248, 251, 0) 240px),
        var(--gateway-bg);
}

.tile,
.modal-content,
.dropdown-menu {
    border-color: var(--gateway-border);
    box-shadow: var(--gateway-shadow);
}

.tile {
    border-radius: 8px;
}

.btn-primary,
.btcpay-pills .btcpay-pill.active {
    background: var(--gateway-green);
    border-color: var(--gateway-green);
}

.btn-primary:hover,
.btn-primary:focus {
    background: #0f6d58;
    border-color: #0f6d58;
}

.btcpay-pills {
    gap: .5rem;
}

.btcpay-pills .btcpay-pill {
    min-height: 2.35rem;
    border-color: var(--gateway-border);
    border-radius: 999px;
}

.payment-method,
.store-wallet-balance,
.dashboard-card,
.list-group-item {
    border-color: var(--gateway-border);
}

#Checkout .tile {
    width: min(100%, 31rem);
}

#Checkout #AmountDue {
    color: var(--gateway-ink);
}

#Checkout .qr-container {
    border: 1px solid var(--gateway-border);
    border-radius: 8px;
    background: var(--gateway-panel);
    box-shadow: 0 12px 30px rgba(18, 124, 100, .1);
}

.stablecoin-checkout .stablecoin-rail {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}

.stablecoin-checkout .badge {
    border: 1px solid var(--gateway-border);
    border-radius: 999px;
    font-weight: 600;
}

.stablecoin-checkout .form-floating {
    width: 100%;
    border: 1px solid var(--gateway-border);
    border-radius: 8px;
    background: var(--gateway-panel-subtle);
}

.stablecoin-checkout .form-control-plaintext {
    padding-left: 1rem;
    padding-right: 1rem;
}

.stablecoin-fingerprint {
    padding: .85rem;
    border: 1px solid rgba(18, 124, 100, .22);
    border-radius: 8px;
    background: rgba(18, 124, 100, .08);
    text-align: left;
}

.stablecoin-fingerprint span,
.stablecoin-fingerprint small {
    display: block;
    color: var(--gateway-muted);
    font-size: .78rem;
    font-weight: 700;
}

.stablecoin-fingerprint strong {
    display: block;
    margin-top: .15rem;
    color: var(--gateway-ink);
    font-size: 1.05rem;
    overflow-wrap: anywhere;
}

.badge.bg-primary-subtle {
    background: rgba(18, 124, 100, .12) !important;
    color: var(--gateway-green) !important;
}

.badge.bg-secondary-subtle {
    background: rgba(10, 127, 159, .12) !important;
    color: var(--gateway-cyan) !important;
}

.badge.bg-info-subtle {
    background: rgba(165, 104, 0, .13) !important;
    color: var(--gateway-amber) !important;
}

.alert-danger,
.badge-expired {
    border-color: rgba(185, 50, 90, .28);
}

.gateway-setup {
    max-width: 72rem;
}

.gateway-setup-hero {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--gateway-border);
    border-radius: 8px;
    background: linear-gradient(135deg, #101615, #1c2b29 52%, #193d39);
    color: #f6fbfa;
    box-shadow: var(--gateway-shadow);
}

.gateway-setup-brand,
.gateway-setup-summary,
.gateway-step-heading,
.gateway-lightning-strip,
.gateway-privy-actions,
.gateway-wallet-line,
.gateway-privy-account,
.gateway-passkey-gate,
.gateway-inline-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.gateway-setup-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 8px;
    background: #23c79d;
    color: #08211b;
    font-weight: 800;
    font-size: 1.5rem;
    box-shadow: 0 12px 28px rgba(35, 199, 157, .22);
}

.gateway-eyebrow {
    margin-bottom: .2rem;
    color: var(--gateway-muted);
    font-size: .73rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}

.gateway-setup-hero .gateway-eyebrow {
    color: rgba(246, 251, 250, .66);
}

.gateway-setup-hero h3,
.gateway-step h3 {
    margin: 0;
}

.gateway-setup-summary {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.gateway-setup-summary > div {
    min-width: 7.5rem;
    padding: .75rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    background: rgba(255, 255, 255, .07);
}

.gateway-setup-summary span,
.gateway-setup-summary small {
    display: block;
}

.gateway-setup-summary span {
    font-size: 1.35rem;
    font-weight: 800;
}

.gateway-setup-summary small {
    color: rgba(246, 251, 250, .7);
}

.gateway-step {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--gateway-border);
    border-radius: 8px;
    background: var(--gateway-panel);
    box-shadow: 0 12px 34px rgba(20, 32, 31, .05);
}

.gateway-step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: rgba(10, 127, 159, .13);
    color: var(--gateway-cyan);
    font-weight: 800;
}

.gateway-step-done .gateway-step-index {
    background: rgba(18, 124, 100, .14);
    color: var(--gateway-green);
}

.gateway-step-body {
    min-width: 0;
}

.gateway-step-heading {
    justify-content: space-between;
    margin-bottom: 1rem;
}

.gateway-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5rem;
    min-height: 2rem;
    padding: .35rem .7rem;
    border: 1px solid var(--gateway-border);
    border-radius: 999px;
    background: var(--gateway-bg);
    color: var(--gateway-muted);
    font-size: .8rem;
    font-weight: 700;
}

.gateway-status-ready {
    border-color: rgba(18, 124, 100, .2);
    background: rgba(18, 124, 100, .12);
    color: var(--gateway-green);
}

.gateway-privy-card {
    padding: 1rem;
    border: 1px solid var(--gateway-border);
    border-radius: 8px;
    background: var(--gateway-panel-subtle);
}

.gateway-privy-card-muted {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.gateway-glow-card {
    margin-top: .85rem;
}

.gateway-glow-actions {
    display: grid;
    gap: .85rem;
}

.gateway-glow-restore {
    border-top: 1px solid var(--gateway-border);
    padding-top: .85rem;
}

.gateway-glow-restore summary {
    color: var(--gateway-muted);
    cursor: pointer;
    font-weight: 700;
}

.gateway-glow-restore textarea {
    margin-top: .65rem;
    resize: vertical;
}

.gateway-glow-recovery {
    margin-top: .85rem;
    padding: .75rem;
    border: 1px solid rgba(165, 104, 0, .22);
    border-radius: 8px;
    background: rgba(165, 104, 0, .08);
}

.gateway-glow-recovery span,
.gateway-glow-recovery strong {
    display: block;
}

.gateway-glow-recovery span {
    color: var(--gateway-muted);
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}

.gateway-glow-recovery strong {
    margin-top: .25rem;
    font-family: var(--btcpay-font-monospace, monospace);
    overflow-wrap: anywhere;
}

.gateway-privy-status {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .85rem;
    color: var(--gateway-muted);
    font-size: .85rem;
    font-weight: 700;
}

.gateway-dot {
    width: .6rem;
    height: .6rem;
    border-radius: 999px;
    background: var(--gateway-amber);
}

.gateway-dot-ready {
    background: var(--gateway-green);
}

.gateway-flow-error {
    margin-bottom: .85rem;
    padding: .65rem .75rem;
    border: 1px solid rgba(185, 50, 90, .24);
    border-radius: 8px;
    background: rgba(185, 50, 90, .08);
    color: var(--gateway-rose);
    font-size: .875rem;
}

.gateway-privy-actions {
    flex-wrap: wrap;
}

.gateway-privy-account {
    align-items: stretch;
    flex-wrap: wrap;
    margin-bottom: .85rem;
}

.gateway-passkey-gate {
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: .85rem;
    padding: .85rem;
    border: 1px solid rgba(10, 127, 159, .18);
    border-radius: 8px;
    background: rgba(10, 127, 159, .08);
}

.gateway-privy-account > div,
.gateway-wallet-line > div,
.gateway-passkey-gate > div,
.gateway-lightning-strip > div {
    min-width: 0;
    flex: 1 1 12rem;
}

.gateway-privy-account span,
.gateway-wallet-line span,
.gateway-passkey-gate span,
.gateway-lightning-strip span {
    display: block;
    color: var(--gateway-muted);
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}

.gateway-privy-account strong,
.gateway-wallet-line strong,
.gateway-passkey-gate strong,
.gateway-lightning-strip strong {
    display: block;
    overflow-wrap: anywhere;
}

.gateway-wallet-line {
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px solid var(--gateway-border);
}

.gateway-link-button {
    margin-top: .75rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--gateway-muted);
    font-size: .85rem;
}

.gateway-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: .5rem;
    border: 2px solid rgba(18, 124, 100, .2);
    border-top-color: var(--gateway-green);
    border-radius: 999px;
    animation: gateway-spin .8s linear infinite;
}

@keyframes gateway-spin {
    to {
        transform: rotate(360deg);
    }
}

.gateway-details {
    margin-top: 1rem;
    border: 1px solid var(--gateway-border);
    border-radius: 8px;
    background: var(--gateway-panel);
}

.gateway-details > summary {
    padding: .85rem 1rem;
    color: var(--gateway-muted);
    cursor: pointer;
    font-weight: 700;
}

.gateway-manual-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 0 1rem 1rem;
}

.gateway-manual-wallet {
    grid-column: 1 / -1;
}

.gateway-lightning-strip {
    align-items: stretch;
    flex-wrap: wrap;
    padding: 1rem;
    border: 1px solid var(--gateway-border);
    border-radius: 8px;
    background: var(--gateway-panel-subtle);
}

.gateway-small-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

.gateway-small-list span {
    padding: .35rem .55rem;
    border: 1px solid var(--gateway-border);
    border-radius: 999px;
    background: var(--gateway-bg);
    color: var(--gateway-muted);
    font-size: .8rem;
}

.gateway-rail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: .65rem;
}

.gateway-rail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 4.25rem;
    gap: .75rem;
    padding: .85rem;
    border: 1px solid var(--gateway-border);
    border-radius: 8px;
    background: var(--gateway-bg);
    cursor: pointer;
}

.gateway-rail input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.gateway-rail span,
.gateway-rail strong,
.gateway-rail small {
    display: block;
    min-width: 0;
}

.gateway-rail small {
    color: var(--gateway-muted);
}

.gateway-rail em {
    flex: 0 0 auto;
    min-width: 3.2rem;
    padding: .25rem .45rem;
    border-radius: 999px;
    background: rgba(10, 127, 159, .11);
    color: var(--gateway-cyan);
    font-size: .75rem;
    font-style: normal;
    font-weight: 800;
    text-align: center;
}

.gateway-rail input:checked + span + em {
    background: rgba(18, 124, 100, .13);
    color: var(--gateway-green);
}

.gateway-rail:has(input:checked) {
    border-color: rgba(18, 124, 100, .28);
    background: rgba(18, 124, 100, .08);
}

.gateway-inline-actions {
    justify-content: flex-end;
    margin-top: 1rem;
}

.gateway-operator-details {
    margin-bottom: 2rem;
}

.gateway-operator-inner {
    padding: 0 1rem 1rem;
}

@media (max-width: 575.98px) {
    #Checkout .tile {
        border-radius: 0;
        box-shadow: none;
    }

    .btcpay-pills .btcpay-pill {
        flex: 1 1 calc(50% - .5rem);
        min-width: 8.5rem;
        text-align: center;
    }

    .gateway-setup-hero,
    .gateway-step,
    .gateway-lightning-strip,
    .gateway-privy-card-muted {
        display: block;
    }

    .gateway-setup-brand {
        margin-bottom: 1rem;
    }

    .gateway-setup-summary {
        justify-content: stretch;
    }

    .gateway-setup-summary > div {
        flex: 1 1 calc(50% - .5rem);
        min-width: 0;
    }

    .gateway-step-index {
        margin-bottom: .75rem;
    }

    .gateway-step-heading,
    .gateway-wallet-line {
        align-items: flex-start;
    }

    .gateway-manual-grid {
        grid-template-columns: 1fr;
    }

    .gateway-lightning-strip .btn {
        width: 100%;
        margin-top: .75rem;
    }

    .gateway-rail-grid {
        grid-template-columns: 1fr;
    }
}
