/* =============================================
 * CHECKOUT PAGE
 * ============================================= */

.checkout-page { padding: 24px 0 80px; }
.checkout-page__title { font-family: 'Montserrat', sans-serif; font-size: 32px; font-weight: 600; color: var(--brand-dark); margin: 0 0 32px; }
@media (max-width: 768px) { .checkout-page__title { font-size: 26px; } }

.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; }
@media (max-width: 991px) { .checkout-layout { grid-template-columns: 1fr; } }

/* Main */
.checkout-main { min-width: 0; }

/* Sections */
.checkout-section { background: #fff; border: 1px solid var(--brand-border); border-radius: 16px; padding: 32px; margin-bottom: 24px; }
@media (max-width: 768px) { .checkout-section { padding: 24px; } }
.checkout-section__title { font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 600; color: var(--brand-dark); margin: 0 0 24px; }

/* Fields */
.checkout-field-group { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .checkout-field-group { grid-template-columns: 1fr; } }
.checkout-field--full { grid-column: 1 / -1; }

.checkout-label { display: block; font-size: 13px; font-weight: 600; color: var(--brand-text); margin-bottom: 8px; }
.checkout-label .required { color: var(--brand-muted); font-weight: 400; }
.checkout-input { width: 100%; height: 48px; padding: 0 16px; font-family: inherit; font-size: 15px; color: var(--brand-text); background: #fff; border: 1px solid var(--brand-border); border-radius: 10px; outline: none; transition: border-color var(--transition), box-shadow var(--transition); box-sizing: border-box; }
.checkout-input:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(31,41,39,0.08); }
.checkout-input.is-error { border-color: #c0392b; }
.checkout-textarea { width: 100%; min-height: 100px; padding: 14px 16px; font-family: inherit; font-size: 15px; color: var(--brand-text); background: #fff; border: 1px solid var(--brand-border); border-radius: 10px; outline: none; resize: vertical; transition: border-color var(--transition), box-shadow var(--transition); box-sizing: border-box; line-height: 1.6; }
.checkout-textarea:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(31,41,39,0.08); }
.checkout-textarea.is-error { border-color: #c0392b; }
.field-error { display: block; font-size: 12px; color: #c0392b; margin-top: 6px; line-height: 1.4; }

/* Payment */
.payment-options { display: flex; flex-direction: column; gap: 12px; }
.payment-card { display: flex; align-items: flex-start; gap: 14px; padding: 20px; border: 2px solid var(--brand-border); border-radius: 12px; cursor: pointer; transition: all var(--transition); }
.payment-card:hover { border-color: #d0d4d2; }
.payment-card.is-selected { border-color: var(--brand-primary); background: rgba(31,41,39,0.03); }
.payment-card input[type="radio"] { margin-top: 3px; accent-color: var(--brand-primary); }
.payment-card__content { flex: 1; }
.payment-card__title { display: block; font-size: 15px; font-weight: 600; color: var(--brand-dark); margin-bottom: 4px; }
.payment-card__desc { display: block; font-size: 13px; color: var(--brand-muted); line-height: 1.5; }

/* Summary sidebar */
.checkout-summary { background: var(--brand-soft); border-radius: 16px; padding: 28px; position: sticky; top: 100px; }
@media (max-width: 991px) { .checkout-summary { position: static; } }
.checkout-summary__title { font-size: 18px; font-weight: 600; color: var(--brand-dark); margin: 0 0 20px; }

.checkout-summary__items { display: flex; flex-direction: column; gap: 14px; }
.checkout-summary__item { display: flex; align-items: center; gap: 12px; }
.checkout-summary__thumb { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: var(--brand-soft); flex-shrink: 0; }
.checkout-summary__item-info { flex: 1; min-width: 0; }
.checkout-summary__item-name { display: block; font-size: 13px; font-weight: 500; color: var(--brand-dark); line-height: 1.4; }
.checkout-summary__item-options { display: block; font-size: 12px; color: var(--brand-primary); font-weight: 500; margin-top: 2px; }
.checkout-summary__item-qty { font-size: 12px; color: var(--brand-muted); }
.checkout-summary__item-price { font-size: 14px; font-weight: 600; color: var(--brand-dark); white-space: nowrap; }

.checkout-summary__divider { border: none; border-top: 1px solid var(--brand-border); margin: 16px 0; }
.checkout-summary__row { display: flex; justify-content: space-between; font-size: 14px; color: var(--brand-muted); margin-bottom: 10px; }
.checkout-summary__row--total { font-size: 18px; font-weight: 600; color: var(--brand-dark); margin-bottom: 0; }

.checkout-submit { display: flex; width: 100%; justify-content: center; align-items: center; height: 50px; margin-top: 24px; background: var(--brand-dark); color: #fff; border: none; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; text-decoration: none; transition: all var(--transition); }
.checkout-submit:hover { background: var(--brand-primary); transform: translateY(-1px); }

.checkout-submit-mobile { display: none; width: 100%; justify-content: center; align-items: center; height: 50px; margin-top: 24px; background: var(--brand-dark); color: #fff; border: none; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; text-decoration: none; transition: all var(--transition); }
@media (max-width: 991px) { .checkout-submit-mobile { display: flex; } .checkout-submit { display: none; } }

.checkout-back { display: block; text-align: center; margin-top: 16px; font-size: 13px; color: var(--brand-muted); text-decoration: underline; }
.checkout-back:hover { color: var(--brand-text); }

/* ─── Order Success ─── */
.order-success { padding: 56px 0 80px; }
.order-success__inner { max-width: 820px; margin: 0 auto; }
.order-success__header { text-align: center; margin-bottom: 48px; }
.order-success__icon { width: 64px; height: 64px; border-radius: 50%; background: #d4edda; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 28px; color: #155724; }
.order-success__title { font-family: 'Montserrat', sans-serif; font-size: 32px; font-weight: 600; color: var(--brand-dark); margin: 0 0 8px; }
.order-success__code { font-size: 18px; color: var(--brand-primary); font-weight: 600; margin: 0 0 12px; }
.order-success__msg { font-size: 15px; color: var(--brand-muted); margin: 0; line-height: 1.7; }

.order-success__details { background: #fff; border: 1px solid var(--brand-border); border-radius: 16px; padding: 32px; margin-bottom: 24px; }
.order-success__details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .order-success__details-grid { grid-template-columns: 1fr; } }
.order-success__detail-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--brand-muted); margin-bottom: 4px; }
.order-success__detail-value { font-size: 15px; font-weight: 500; color: var(--brand-text); margin: 0; }

.order-success__bank { background: #fff; border: 1px solid var(--brand-border); border-radius: 16px; padding: 28px; margin-bottom: 24px; }
.order-success__bank h3 { font-size: 16px; font-weight: 600; margin: 0 0 16px; }
.order-success__bank-info { display: flex; flex-direction: column; gap: 10px; }
.order-success__bank-row { display: flex; gap: 8px; font-size: 14px; color: var(--brand-text); }
.order-success__bank-label { font-weight: 600; min-width: 120px; color: var(--brand-muted); }
.order-success__bank-value { font-weight: 500; }
.order-success__bank-copy { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 8px; font-size: 11px; background: var(--brand-soft); border: 1px solid var(--brand-border); border-radius: 4px; cursor: pointer; color: var(--brand-text); }

.order-success__items { background: #fff; border: 1px solid var(--brand-border); border-radius: 16px; padding: 32px; }
.order-success__items h3 { font-size: 16px; font-weight: 600; margin: 0 0 16px; }
.order-success__item { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--brand-border); }
.order-success__item:last-child { border-bottom: none; padding-bottom: 0; }
.order-success__item-img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; background: var(--brand-soft); flex-shrink: 0; }
.order-success__item-info { flex: 1; min-width: 0; }
.order-success__item-name { font-size: 14px; font-weight: 500; color: var(--brand-dark); }
.order-success__item-options { font-size: 12px; color: var(--brand-primary); font-weight: 500; margin-top: 2px; }
.order-success__item-sku { font-size: 12px; color: var(--brand-muted); margin-top: 1px; }
.order-success__item-meta { font-size: 12px; color: var(--brand-muted); }
.order-success__item-price { font-size: 14px; font-weight: 600; color: var(--brand-dark); white-space: nowrap; }

.order-success__totals { padding: 16px 0 0; }
.order-success__total-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--brand-muted); margin-bottom: 8px; }
.order-success__total-row--grand { font-size: 18px; font-weight: 600; color: var(--brand-dark); padding-top: 8px; border-top: 1px solid var(--brand-border); }

.order-success__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }

/* ─── Order Tracking ─── */
.order-tracking { padding: 40px 0 80px; }
.order-tracking__inner { max-width: 520px; margin: 0 auto; }
.order-tracking__title { font-family: 'Montserrat', sans-serif; font-size: 28px; font-weight: 600; color: var(--brand-dark); margin: 0 0 8px; text-align: center; }
.order-tracking__desc { font-size: 15px; color: var(--brand-muted); text-align: center; margin-bottom: 32px; line-height: 1.7; }
.order-tracking__card { background: #fff; border: 1px solid var(--brand-border); border-radius: 16px; padding: 32px; }
@media (max-width: 430px) { .order-tracking__card { padding: 24px; } }
.order-tracking__field { margin-bottom: 20px; }
.order-tracking__label { display: block; font-size: 13px; font-weight: 600; color: var(--brand-text); margin-bottom: 8px; }
.order-tracking__input { width: 100%; height: 48px; padding: 0 16px; font-family: inherit; font-size: 15px; color: var(--brand-text); background: #fff; border: 1px solid var(--brand-border); border-radius: 10px; outline: none; transition: border-color var(--transition); box-sizing: border-box; }
.order-tracking__input:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(31,41,39,0.08); }
.order-tracking__input.is-error { border-color: #c0392b; }

/* Status Timeline */
.order-status { display: flex; justify-content: center; gap: 0; margin: 32px 0; padding: 0; list-style: none; position: relative; }
.order-status li { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; }
.order-status li .status-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--brand-border); margin-bottom: 8px; position: relative; z-index: 1; }
.order-status li .status-label { font-size: 11px; color: var(--brand-muted); text-align: center; line-height: 1.3; }
.order-status li.is-active .status-dot { background: var(--brand-primary); }
.order-status li.is-active .status-label { color: var(--brand-dark); font-weight: 600; }
.order-status li.is-done .status-dot { background: var(--brand-primary); }
.order-status li.is-done .status-label { color: var(--brand-muted); }
.order-status::before { content: ''; position: absolute; top: 7px; left: 10%; right: 10%; height: 2px; background: var(--brand-border); z-index: 0; }
.order-status li.is-done ~ li::before { background: var(--brand-primary); }

/* ═══════════════════════════════════════════════════════
   ORDER SUCCESS — ACTION BUTTONS
   ═══════════════════════════════════════════════════════ */

.order-success__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 40px;
    padding-bottom: 48px;
}

.order-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 24px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1;
    text-decoration: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

/* Primary — dark solid */
.order-action-btn--primary {
    min-width: 185px;
    background: var(--brand-dark, #111827);
    color: #fff;
    border: 1px solid var(--brand-dark, #111827);
}
.order-action-btn--primary:hover {
    background: var(--brand-primary, #b49064);
    border-color: var(--brand-primary, #b49064);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.order-action-btn--primary:active {
    transform: translateY(0);
}
.order-action-btn--primary:focus-visible {
    outline: 2px solid var(--brand-primary, #b49064);
    outline-offset: 2px;
}

/* Secondary — outline */
.order-action-btn--secondary {
    min-width: 170px;
    background: transparent;
    color: var(--brand-text, #333);
    border: 1px solid var(--brand-border, #d0d0ce);
}
.order-action-btn--secondary:hover {
    background: #f7f7f5;
    border-color: #b0b0ae;
    color: var(--brand-text, #333);
}
.order-action-btn--secondary:focus-visible {
    outline: 2px solid var(--brand-text, #333);
    outline-offset: 2px;
}

/* Mobile: stack full width */
@media (max-width: 576px) {
    .order-success__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .order-action-btn {
        width: 100%;
        min-width: 0;
    }
}