/* ================================================================
   Customer Payment Cash — Cash Payment View & Success Screen
   Views: views/customer/payment-cash.php

   All rules scoped under their parent ID to prevent bleed:
     #bim-payment-cash-view   → font reset only
                                (store selection / instructions live in
                                 customer-checkout-stepper.css § Step 3-Cash)
     #bim-payment-success-view → payment confirmed screen
   ================================================================ */

/* ── Font Reset ─────────────────────────────────────────────────── */
#bim-payment-cash-view,
#bim-payment-cash-view h1,
#bim-payment-cash-view h2,
#bim-payment-cash-view h3,
#bim-payment-cash-view h4,
#bim-payment-cash-view h5,
#bim-payment-cash-view h6 {
    font-family: var(--bim-font);
}

/* ================================================================
   Success Screen — Payment Confirmation
   ================================================================ */

/* ── Modal Shell ────────────────────────────────────────────────── */
#bim-payment-success-view,
#bim-payment-success-view h1,
#bim-payment-success-view h2,
#bim-payment-success-view h3,
#bim-payment-success-view h4,
#bim-payment-success-view h5,
#bim-payment-success-view h6 {
    font-family: var(--bim-font);
}

#bim-payment-success-view {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

#bim-payment-success-view > .bim-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

#bim-payment-success-view > .bim-modal-content {
    position: relative;
    z-index: 1;
    width: 94vw;
    max-width: 480px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bim-surface);
    border-radius: var(--bim-radius-lg);
    box-shadow: var(--bim-shadow-lg);
    padding: 0;
    margin: 0;
    animation: bimSlideUp 0.3s ease-out;
}

/* ── Centered success hero ─────────────────────────────────────── */
#bim-payment-success-view .bim-success-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bim-space-2);
    padding-bottom: var(--bim-space-1);
}

#bim-payment-success-view .bim-success-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--bim-success-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

#bim-payment-success-view .bim-success-checkmark {
    width: 36px;
    height: 36px;
    background: var(--bim-success);
    border-radius: 50%;
    padding: 8px;
    box-sizing: border-box;
}

#bim-payment-success-view .bim-success-checkmark-circle {
    display: none;
}

#bim-payment-success-view .bim-success-checkmark-check {
    stroke: #fff;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 0;
}

#bim-payment-success-view .bim-success-title {
    font-size: var(--bim-text-xl);
    font-weight: 800;
    color: var(--bim-text-primary);
    margin: 0;
    text-align: center;
    text-transform: none;
    font-style: normal;
}

/* ── Body ──────────────────────────────────────────────────────── */
#bim-payment-success-view .bim-success-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: var(--bim-space-4) var(--bim-space-4) var(--bim-space-3);
    gap: var(--bim-space-3);
}

/* ── Payment summary group (receipt + remaining balance) ────────── */
#bim-payment-success-view .bim-payment-summary-group {
    border-radius: var(--bim-radius-lg);
    border: 1.5px solid var(--bim-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    background: #fff;
}

/* ── Receipt card ──────────────────────────────────────────────── */
#bim-payment-success-view .bim-receipt-card {
    background: #fff;
    overflow: hidden;
}

/* Divider between receipt and remaining balance */
#bim-payment-success-view .bim-payment-summary-group #bim-success-remaining {
    border-top: 1px solid var(--bim-border-light);
}

/* ── Payment Summary ───────────────────────────────────────────── */
#bim-payment-success-view #bim-success-summary {
    display: flex;
    flex-direction: column;
    gap: 0;
}

#bim-payment-success-view .bim-success-amount-hero {
    text-align: center;
    padding: var(--bim-space-3) var(--bim-space-4);
    border-bottom: 1px solid var(--bim-border-light);
}

#bim-payment-success-view .bim-success-amount-eyebrow {
    display: block;
    font-size: var(--bim-text-xs);
    font-weight: 500;
    color: var(--bim-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--bim-space-2);
}

#bim-payment-success-view .bim-success-amount-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bim-space-1);
}

#bim-payment-success-view .bim-success-amount-usd {
    font-size: var(--bim-text-xl);
    font-weight: 900;
    color: var(--bim-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

#bim-payment-success-view .bim-success-amount-bob {
    font-size: var(--bim-text-sm);
    font-weight: 600;
    color: var(--bim-text-muted);
    font-variant-numeric: tabular-nums;
}

/* 4-col meta grid */
#bim-payment-success-view .bim-success-meta-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

#bim-payment-success-view .bim-success-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--bim-space-2);
    border-right: 1px solid var(--bim-border-light);
}

#bim-payment-success-view .bim-success-meta-item:last-child {
    border-right: none;
}

#bim-payment-success-view .bim-success-meta-label {
    font-size: var(--bim-text-xs);
    font-weight: 500;
    color: var(--bim-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

#bim-payment-success-view .bim-success-meta-value {
    font-size: var(--bim-text-sm);
    font-weight: 700;
    color: var(--bim-text-primary);
    line-height: 1.3;
}

/* ── Remaining Balance Notice ──────────────────────────────────── */
#bim-payment-success-view #bim-success-remaining {
    width: 100%;
}

#bim-payment-success-view .bim-success-remaining-card {
    display: flex;
    align-items: flex-start;
    gap: var(--bim-space-2);
    padding: var(--bim-space-3) var(--bim-space-4);
    background: #fffbeb;
}

#bim-payment-success-view .bim-success-remaining-card .material-symbols-outlined {
    font-size: 20px;
    color: var(--bim-warning-dark);
    flex-shrink: 0;
    margin-top: 1px;
}

#bim-payment-success-view .bim-success-remaining-text {
    flex: 1;
}

#bim-payment-success-view .bim-success-remaining-label {
    font-size: var(--bim-text-sm);
    font-weight: 700;
    color: var(--bim-warning-dark);
    margin-bottom: var(--bim-space-1);
}

#bim-payment-success-view .bim-success-remaining-amounts {
    display: flex;
    align-items: baseline;
    gap: var(--bim-space-2);
}

#bim-payment-success-view .bim-success-remaining-usd {
    font-size: var(--bim-text-base);
    font-weight: 800;
    color: var(--bim-text-primary);
    font-variant-numeric: tabular-nums;
}

#bim-payment-success-view .bim-success-remaining-bob {
    font-size: var(--bim-text-xs);
    font-weight: 600;
    color: var(--bim-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Messages ──────────────────────────────────────────────────── */
#bim-payment-success-view .bim-success-message {
    display: flex;
    flex-direction: column;
    gap: var(--bim-space-1);
    border-radius: var(--bim-radius-lg);
    border: 1px solid var(--bim-border-light);
    box-shadow: none;
    background: #fff;
    padding: var(--bim-space-4);
}

#bim-payment-success-view .bim-success-lead {
    font-size: var(--bim-text-base);
    font-weight: 600;
    color: var(--bim-text-primary);
    margin: 0;
}

#bim-payment-success-view .bim-success-text {
    font-size: var(--bim-text-sm);
    color: var(--bim-text-muted);
    margin: 0;
    line-height: 1.5;
}

/* ── Store Card (Cash) ─────────────────────────────────────────── */
#bim-payment-success-view .bim-success-store-card {
    width: 100%;
    text-align: left;
    background: var(--bim-success-light);
    border: 1px solid var(--bim-success-border);
    border-radius: var(--bim-radius);
    padding: var(--bim-space-3) var(--bim-space-4);
    margin-top: var(--bim-space-3);
}

#bim-payment-success-view .bim-success-store-card:empty {
    display: none;
}

#bim-payment-success-view .bim-success-store-name {
    display: flex;
    align-items: center;
    gap: var(--bim-space-2);
    font-size: var(--bim-text-sm);
    font-weight: 700;
    color: var(--bim-success-dark);
    margin-bottom: var(--bim-space-1);
}

#bim-payment-success-view .bim-success-store-name .material-symbols-outlined {
    font-size: 18px;
}

#bim-payment-success-view .bim-success-store-address {
    display: flex;
    align-items: center;
    gap: var(--bim-space-2);
    font-size: var(--bim-text-sm);
    color: var(--bim-text-secondary);
}

#bim-payment-success-view .bim-success-store-address .material-symbols-outlined {
    font-size: 14px;
    color: var(--bim-text-muted);
}

/* ── Next Steps Card ───────────────────────────────────────────── */
#bim-payment-success-view .bim-success-next-steps {
    border-radius: var(--bim-radius-lg);
    border: 1px solid var(--bim-border-light);
    box-shadow: none;
    background: #fff;
    padding: var(--bim-space-3);
}

#bim-payment-success-view .bim-steps-header {
    display: flex;
    align-items: center;
    gap: var(--bim-space-2);
    margin-bottom: var(--bim-space-2);
}

#bim-payment-success-view .bim-steps-icon {
    font-size: 18px;
    color: var(--bim-text-secondary);
}

#bim-payment-success-view .bim-steps-title {
    font-size: var(--bim-text-sm);
    font-weight: 700;
    color: var(--bim-text-primary);
    margin: 0;
    text-transform: none;
    font-style: normal;
}

#bim-payment-success-view .bim-success-steps-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--bim-space-2);
}

#bim-payment-success-view .bim-success-step {
    display: flex;
    align-items: center;
    gap: var(--bim-space-3);
}

#bim-payment-success-view .bim-step-number {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #6b7280;
    color: #fff;
    font-size: var(--bim-text-xs);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#bim-payment-success-view .bim-step-text {
    font-size: var(--bim-text-sm);
    color: var(--bim-text-secondary);
    line-height: 1.4;
}

/* ── Footer ────────────────────────────────────────────────────── */
#bim-payment-success-view .bim-modal-footer-center {
    display: flex;
    justify-content: center;
    padding: var(--bim-space-3) var(--bim-space-4);
    border-top: 1px solid var(--bim-border-light);
    flex-shrink: 0;
}

/* ── Responsive ≤ 480px ────────────────────────────────────────── */
@media (max-width: 480px) {
    #bim-payment-success-view > .bim-modal-content {
        width: 100%;
        max-width: 100%;
        min-height: 100vh;
        border-radius: 0;
        margin: 0;
    }

    #bim-payment-success-view .bim-success-body {
        padding: var(--bim-space-4) var(--bim-space-4) var(--bim-space-3);
        padding-bottom: env(safe-area-inset-bottom, var(--bim-space-3));
    }

    #bim-payment-success-view .bim-success-meta-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    #bim-payment-success-view .bim-success-meta-item:nth-child(2) {
        border-right: none;
    }

    #bim-payment-success-view .bim-success-meta-item:nth-child(1),
    #bim-payment-success-view .bim-success-meta-item:nth-child(2) {
        border-bottom: 1px solid var(--bim-border-light);
    }

    #bim-payment-success-view .bim-success-remaining-card {
        padding: var(--bim-space-3);
    }

    #bim-payment-success-view .bim-modal-footer-center .bim-btn {
        width: 100%;
    }
}

@media (max-width: 400px) {
    #bim-payment-success-view .bim-success-meta-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}