/* ==========================================================
   checkout.css — Chỉ dùng cho trang checkout.html.
   Dùng lại biến màu và nút bấm của styles.css để trang thanh
   toán trông liền mạch với landing page (khách đang trả tiền,
   giao diện lạ mắt làm họ nghi ngờ và bỏ giữa chừng).
   ========================================================== */

.checkout-body {
    background: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-sans);
    min-height: 100vh;
}

.checkout-wrap {
    max-width: 520px;
    margin: 0 auto;
    padding: 24px 16px 64px;
}

.checkout-back {
    display: inline-block;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 16px;
    transition: var(--transition);
}
.checkout-back:hover { color: var(--text-main); }

/* --- Thẻ chính ------------------------------------------ */
.checkout-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
}
.checkout-card-success {
    border-color: var(--success);
    background: linear-gradient(180deg, var(--success-bg), var(--bg-card));
    text-align: center;
}

.checkout-badge {
    display: inline-block;
    background: var(--primary-glow);
    color: var(--text-main);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.checkout-title {
    font-size: 1.6rem;
    line-height: 1.25;
    margin: 0 0 8px;
}
.checkout-sub {
    color: var(--text-subtext);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 20px;
}

/* --- Giá ------------------------------------------------- */
.checkout-price {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}
.checkout-price-old {
    color: var(--text-muted);
    text-decoration: line-through;
    font-size: 1rem;
}
.checkout-price-now {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    font-family: var(--font-mono);
}

/* --- Form ------------------------------------------------ */
.checkout-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin: 16px 0 6px;
}
.checkout-input {
    width: 100%;
    background: var(--bg-card-alt);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-size: 1rem;
    font-family: inherit;
    padding: 12px 14px;
    transition: var(--transition);
}
.checkout-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}
.checkout-input::placeholder { color: var(--text-muted); }

.checkout-hint {
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.5;
    margin: 6px 0 0;
}
.checkout-hint.center { text-align: center; margin-top: 10px; }

.checkout-error {
    background: var(--danger-glow);
    border: 1px solid var(--danger);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-size: 0.875rem;
    padding: 10px 12px;
    margin: 14px 0 0;
}

.checkout-note {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-align: center;
    margin: 16px 0 0;
}

.checkout-warn {
    background: var(--warning-bg);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius-sm);
    color: var(--text-subtext);
    font-size: 0.85rem;
    line-height: 1.6;
    padding: 12px 14px;
    margin: 18px 0;
}
.checkout-warn b { color: var(--text-main); }

/* --- Mã QR ----------------------------------------------- */
.qr-box {
    display: flex;
    justify-content: center;
    background: #ffffff;      /* nền trắng để app ngân hàng quét được */
    border-radius: var(--radius-md);
    padding: 12px;
    margin-bottom: 20px;
}
.qr-image {
    width: 100%;
    max-width: 320px;
    height: auto;
    display: block;
}

/* --- Bảng thông tin ngân hàng ---------------------------- */
.bank-info {
    background: var(--bg-card-alt);
    border-radius: var(--radius-md);
    padding: 4px 14px;
}
.bank-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
}
.bank-row:last-child { border-bottom: none; }
.bank-row-important { background: rgba(99, 102, 241, 0.07); }

.bank-key { color: var(--text-muted); white-space: nowrap; }
.bank-val {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: right;
    word-break: break-all;
}
.bank-val b { font-family: var(--font-mono); color: var(--text-main); }

.copy-btn {
    background: var(--bg-card-hover);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-subtext);
    cursor: pointer;
    font-size: 0.75rem;
    font-family: inherit;
    padding: 4px 9px;
    white-space: nowrap;
    transition: var(--transition);
}
.copy-btn:hover { background: var(--primary); color: #fff; }

/* --- Trạng thái chờ -------------------------------------- */
.wait-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--bg-card-alt);
    border-radius: var(--radius-md);
    padding: 14px;
    font-size: 0.9rem;
    color: var(--text-subtext);
    margin-top: 4px;
}
.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Tôn trọng người dùng đã tắt hiệu ứng chuyển động trong OS */
@media (prefers-reduced-motion: reduce) {
    .spinner { animation: none; border-top-color: var(--primary); }
}

#btnRecheck { margin-top: 14px; }

/* --- Màn thành công -------------------------------------- */
.success-mark { font-size: 3rem; line-height: 1; margin-bottom: 8px; }
.checkout-card-success .btn { margin-top: 18px; }

/* --- Màn hình nhỏ ---------------------------------------- */
@media (max-width: 420px) {
    .checkout-card { padding: 22px 16px; }
    .checkout-title { font-size: 1.35rem; }
    .checkout-price-now { font-size: 1.7rem; }
    .bank-row { flex-direction: column; align-items: flex-start; gap: 4px; }
    .bank-val { text-align: left; }
}

/* ==========================================================
   Danh sách sản phẩm trên trang checkout (thêm ở bước 11)
   ========================================================== */
.product-list { margin-bottom: 22px; }

.product-item {
    display: block; cursor: pointer;
    background: var(--bg-card-alt);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px 16px; margin-bottom: 10px;
    transition: var(--transition);
}
.product-item:hover { border-color: var(--primary); }

/* Ô radio thật vẫn tồn tại cho bàn phím và trình đọc màn hình,
   chỉ giấu khỏi mắt vì cả thẻ đã đóng vai trò nút bấm. */
.product-item input { position: absolute; opacity: 0; pointer-events: none; }
.product-item:has(input:checked) {
    border-color: var(--primary);
    background: var(--bg-card-hover);
    box-shadow: 0 0 0 3px var(--primary-glow);
}
.product-item:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }

.product-top {
    display: flex; justify-content: space-between;
    align-items: baseline; gap: 12px;
}
.product-name { font-weight: 700; font-size: 1rem; }
.product-price {
    font-family: var(--font-mono); font-weight: 800;
    font-size: 1.15rem; color: var(--primary); white-space: nowrap;
}
.product-desc {
    color: var(--text-muted); font-size: 0.82rem;
    line-height: 1.55; margin: 6px 0 0;
}