/* ===============================
   PAYMENT PAGE (TikLIVE THEME)
================================= */

.payment-page {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* ===== CARD ===== */
.payment-card {
    background: linear-gradient(180deg, rgba(20,39,56,0.98), rgba(12,24,35,0.95));
    border: 1px solid rgba(116,216,255,0.16);
    border-radius: 22px;
    box-shadow: 0 16px 38px rgba(0,0,0,0.30);
    overflow: hidden;
    color: #f2fbff;
}

.payment-card-body {
    padding: 2rem;
}

.payment-title {
    font-weight: 800;
    margin-bottom: .5rem;
}

.payment-subtitle {
    color: #abc4d0;
}

/* ===== SUMMARY ===== */
.payment-summary {
    background: linear-gradient(180deg, rgba(25,46,64,0.76), rgba(18,33,46,0.72));
    border: 1px solid rgba(116,216,255,0.16);
    border-radius: 16px;
    padding: 1rem 1.25rem;
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}

.payment-label {
    color: #abc4d0;
    font-size: .85rem;
}

.payment-value {
    font-weight: 800;
}

.payment-price {
    color: #74d8ff;
    font-weight: 900;
    font-size: 2rem;
    text-shadow: 0 0 18px rgba(116,216,255,0.16);
}

/* ===== QR CONTAINER ===== */
.payment-qr-container {
    display: inline-block;
    width: 100%;
    max-width: 360px;
}

/* HEADER */
.payment-qr-header {
    background: linear-gradient(135deg, #1b3448, #2a5f86);
    padding: 10px 18px;
    border-radius: 18px 18px 0 0;
    border: 1px solid rgba(116,216,255,0.2);
    border-bottom: none;
    text-align: center;
    box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}

    .payment-qr-header img {
        height: 36px;
        object-fit: contain;
    }

/* QR BOX */
.payment-qr-box {
    padding: 1.2rem;
    border-radius: 0 0 20px 20px;
    background: linear-gradient( 180deg, rgba(255,255,255,0.92), rgba(245,250,255,0.96) );
    border: 1px solid rgba(116,216,255,0.25);
    box-shadow: 0 14px 30px rgba(0,0,0,0.28), 0 0 0 1px rgba(255,255,255,0.08) inset, 0 0 20px rgba(116,216,255,0.12);
    backdrop-filter: blur(6px);
}

    .payment-qr-box img {
        display: block;
        margin: 0 auto;
        border-radius: 12px;
    }

/* ===== COUNTDOWN ===== */
.payment-countdown-box {
    margin-top: 1rem;
    border-radius: 16px;
    background: linear-gradient( 180deg, rgba(25,46,64,0.85), rgba(18,33,46,0.8) );
    border: 1px solid rgba(116,216,255,0.18);
    color: #f2fbff;
    padding: .9rem 1rem;
}

.payment-countdown-time {
    font-size: 1.4rem;
    font-weight: 900;
    color: #74d8ff;
}

.payment-countdown-box.is-warning .payment-countdown-time {
    color: #ffd86e;
}

.payment-countdown-box.is-expired .payment-countdown-time {
    color: #ff819b;
}

/* ===== STATUS ===== */
.payment-status-box {
    border-radius: 16px;
    border: 1px solid rgba(116,216,255,0.15);
    background: linear-gradient( 180deg, rgba(25,46,64,0.8), rgba(18,33,46,0.75) );
    color: #f2fbff;
}

    .payment-status-box.status-success {
        border-color: rgba(73,240,194,0.28);
    }

    .payment-status-box.status-danger {
        border-color: rgba(255,129,155,0.26);
    }

    .payment-status-box.status-warning {
        border-color: rgba(255,216,110,0.28);
    }

/* ===== BUTTON ===== */
.payment-btn-back {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: .72rem 1.18rem;
    border-radius: 999px;
    border: 1px solid rgba(116,216,255,0.22);
    background: linear-gradient(135deg, #20384d, #325975);
    color: #eaf8ff;
    font-weight: 800;
    text-decoration: none;
    transition: all .2s ease;
}

    .payment-btn-back:hover {
        transform: translateY(-1px);
        background: linear-gradient(135deg, #26445d, #3b6786);
    }

/* ===== RESPONSIVE ===== */
@media (max-width: 767.98px) {
    .payment-card-body {
        padding: 1.25rem;
    }

    .payment-price {
        font-size: 1.7rem;
    }

    .payment-qr-container {
        max-width: 300px;
    }
}