/* ============================================
   Riwayat Pemesanan — daftar riwayat, hanya baca
   ============================================ */

.riwayat-header {
    margin: 8px 0 20px;
}

.riwayat-header h2 {
    margin: 0 0 2px;
    font-size: 20px;
    font-weight: 700;
    color: var(--bk-text, #111827);
}

.riwayat-header p {
    margin: 0;
    font-size: 14px;
    color: var(--bk-text-faint, #9CA3AF);
}

.riwayat-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.riwayat-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
    gap: 12px 30px;
    padding: 14px 18px;
    background-color: var(--surface-color);
    border: 1px solid var(--bk-border, #E5E7EB);
    border-radius: var(--radius-card, 16px);
    box-shadow: var(--shadow-card, 0 2px 8px rgba(16, 24, 40, 0.06));
}

.riwayat-airline {
    flex: 0 0 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.riwayat-airline img {
    width: 100%;
    max-width: 56px;
    height: auto;
    object-fit: contain;
}

.riwayat-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.riwayat-route {
    font-size: 14px;
    font-weight: 600;
    color: var(--bk-text, #111827);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.riwayat-meta {
    font-size: 12px;
    color: var(--bk-text-muted, #6B7280);
}

.riwayat-amount {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 700;
    color: var(--bk-text, #111827);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.riwayat-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.riwayat-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.riwayat-status--paid {
    background-color: var(--bk-success-bg, #E8F5E9);
    color: var(--bk-success-text, #1B5E20);
}

.riwayat-status--pending {
    background-color: var(--bk-warning-bg, #FEF3C7);
    color: var(--bk-warning-text, #D97706);
}

.riwayat-status--failed {
    background-color: var(--bk-neutral-bg, #F3F4F6);
    color: var(--bk-neutral-text, #6B7280);
}

.riwayat-status--verifying {
    background-color: var(--blue-soft-bg, #EFF6FF);
    color: var(--blue-text, #1D4ED8);
}

/* ---------- Pembayaran & transfer per pesanan ---------- */

.riwayat-pay {
    flex: 1 0 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 12px;
    margin-left: 86px; /* sejajar dengan kolom rute (logo 56px + gap 30px) */
    border-top: 1px dashed var(--bk-border, #E5E7EB);
    font-size: 13px;
    color: var(--bk-text-muted, #6B7280);
}

.riwayat-paid b,
.riwayat-tf-amount {
    color: var(--bk-text, #111827);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.riwayat-tf-head {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bk-text-faint, #9CA3AF);
}

.riwayat-tf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
}

.riwayat-tf-date {
    min-width: 96px;
}

.riwayat-tf-sub {
    font-weight: 400;
    color: var(--bk-text-muted, #6B7280);
}

.riwayat-tf-status {
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.riwayat-tf-status--approved {
    background-color: var(--bk-success-bg, #E8F5E9);
    color: var(--bk-success-text, #1B5E20);
}

.riwayat-tf-status--submitted {
    background-color: var(--blue-soft-bg, #EFF6FF);
    color: var(--blue-text, #1D4ED8);
}

.riwayat-tf-status--rejected {
    background-color: var(--red-bg, #FEE2E2);
    color: var(--red-text, #B91C1C);
}

.riwayat-tf-note {
    flex-basis: 100%;
    font-size: 12px;
    color: var(--red-text, #B91C1C);
}

.riwayat-tf-more summary {
    cursor: pointer;
    font-size: 12px;
    color: var(--bk-accent-blue, #3283e7);
}

.riwayat-tf-more[open] summary {
    margin-bottom: 6px;
}

.riwayat-tf-more .riwayat-tf + .riwayat-tf {
    margin-top: 6px;
}

.riwayat-loading {
    padding: 32px 20px;
    text-align: center;
    color: var(--bk-text-faint, #9CA3AF);
    font-size: 14px;
}

.riwayat-empty {
    padding: 48px 20px;
    text-align: center;
    color: var(--bk-text-faint, #9CA3AF);
}

.riwayat-empty h3 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
    color: var(--bk-text-secondary, #374151);
}

.riwayat-empty p {
    margin: 0 0 16px;
    font-size: 14px;
}

.riwayat-empty button {
    padding: 9px 18px;
    background: var(--bk-accent-blue, #3283e7);
    border: none;
    border-radius: 6px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.riwayat-empty button:hover {
    background: var(--bk-accent-blue-hover, #206ac7);
}

/* ---------- Ponsel (≤640px) ---------- */
@media (max-width: 640px) {
    .riwayat-row {
        flex-wrap: wrap;
        padding: 14px;
    }

    .riwayat-airline {
        flex: 0 0 40px;
    }

    .riwayat-main {
        flex: 1 1 calc(100% - 56px);
    }

    .riwayat-amount {
        margin-left: 56px;
    }

    .riwayat-status {
        margin-left: auto;
    }

    .riwayat-pay {
        margin-left: 0;
    }
}