/* --- Checkout Page (Dark Theme Alignment) --- */

.checkout-main {
    padding-top: 150px; /* Adjust for fixed header */
    padding-bottom: 8rem;
    background: var(--color-bg, #14100e);
    color: var(--color-text, #f5f2ef);
}

.checkout-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.checkout-container h1 {
    text-align: center;
    font-size: 2.8rem;
    margin-bottom: 4rem;
    color: var(--color-text, #f5f2ef);
    font-family: 'Montserrat','Poppins',sans-serif;
    letter-spacing: .5px;
}

.checkout-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3.5rem;
}

.checkout-form h2, .order-summary h2 {
    font-size: 1.55rem;
    margin-bottom: 1.5rem;
    color: var(--color-text, #f5f2ef);
    border-bottom: 2px solid rgba(255,255,255,.08);
    padding-bottom: .75rem;
    font-weight: 600;
    font-family: 'Montserrat','Poppins',sans-serif;
    letter-spacing: .4px;
}

.form-group {
    margin-bottom: 1.35rem;
    position: relative;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: rgba(255,255,255,.85);
    font-family: 'Poppins','Montserrat',sans-serif;
    font-size: .8rem;
    letter-spacing: .3px;
}

.form-group input {
    width: 100%;
    padding: 0.75rem .85rem;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.06);
    color: #fff;
    border-radius: 10px;
    font-size: .95rem;
    outline: none;
    transition: border-color .25s, background .25s;
    font-family: 'Poppins','Roboto',sans-serif;
}
.form-group input:focus { border-color: var(--color-accent,#c89f68); background: rgba(255,255,255,.1); }
.form-group input.error { border-color: #e74c3c; background-color: rgba(231,76,60,.12); }

.form-row { display: flex; gap: 1.1rem; }
.form-row .form-group { flex: 1; }

.error-message { color: #e74c3c; font-size: 0.75rem; margin-top: 0.35rem; display: none; }

.btn-place-order {
    position: relative;
    width: 100%;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg,#c89f68,#b67e3c);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 1.05rem;
    cursor: pointer;
    font-weight: 600;
    letter-spacing: .5px;
    box-shadow: 0 6px 20px -8px rgba(0,0,0,.5);
    transition: transform .3s, box-shadow .3s, filter .3s;
    font-family: 'Montserrat','Poppins',sans-serif;
}
.btn-place-order:hover { transform: translateY(-2px); box-shadow: 0 10px 28px -10px rgba(0,0,0,.6); filter: brightness(1.05); }
.btn-place-order:disabled { cursor: not-allowed; opacity: .65; }
.btn-place-order .btn-spinner { display: none; font-size: 1.3rem; }
.btn-place-order.loading .btn-text { visibility: hidden; opacity: 0; }
.btn-place-order.loading .btn-spinner { display: inline-block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* Order Summary */
.order-summary {
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(4px);
    padding: 1.75rem 1.5rem 1.9rem;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    box-shadow: 0 8px 24px -10px rgba(0,0,0,.5);
}

.summary-item { display: flex; align-items: center; margin-bottom: 1.35rem; }
.summary-item img { width: 56px; height: 56px; border-radius: 8px; margin-right: 0.9rem; object-fit: cover; box-shadow: 0 4px 12px -4px rgba(0,0,0,.6); }

.total-line { display:flex; justify-content:space-between; font-size:.85rem; margin:.45rem 0; color:rgba(255,255,255,.85); }
.total-line.grand-total { font-size:.95rem; font-weight:600; letter-spacing:.4px; }

/* Payment methods */
.payment-methods { display: flex; gap: 1rem; margin: 1rem 0 1.3rem; flex-wrap:wrap; }
.pm-option {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 10px;
    padding: 0.55rem 1rem .6rem;
    cursor: pointer;
    font-size: .75rem;
    font-weight: 600;
    color: #fff;
    transition: background .25s, border-color .25s;
    letter-spacing: .3px;
}
.pm-option:hover { background: rgba(255,255,255,.15); }
.pm-option input { accent-color: var(--color-accent,#c89f68); }
#mobile-money-fields.hidden { display:none; }

.providers { display:flex; gap:.6rem; flex-wrap:wrap; }
.provider-option {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    padding: 0.4rem 0.75rem 0.45rem;
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .3px;
    color: #fff;
}

.help-text { color: rgba(255,255,255,.6); font-size: 0.7rem; margin-top: -0.35rem; font-style: italic; }

/* Confirmation Modal */
.confirmation-modal {
    position: fixed; top:0; left:0; width:100%; height:100%; background-color: rgba(0,0,0,0.6);
    display:flex; align-items:center; justify-content:center; z-index:2000; opacity:0; visibility:hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.confirmation-modal.show { opacity:1; visibility:visible; }
.confirmation-content {
    background: linear-gradient(145deg,#201a16,#2e241f);
    padding: 2.5rem 3.25rem;
    border-radius: 18px;
    text-align: center;
    box-shadow: 0 14px 40px -10px rgba(0,0,0,.7);
    transform: scale(0.9);
    transition: transform 0.3s ease;
    border: 1px solid rgba(255,255,255,.08);
}
.confirmation-modal.show .confirmation-content { transform: scale(1); }
.confirmation-icon { font-size: 4.25rem; color: #2ecc71; margin-bottom: 1.25rem; filter: drop-shadow(0 4px 16px rgba(46,204,113,.35)); }
.confirmation-content h2 { font-size: 2.1rem; color:#fff; margin-bottom:.75rem; border-bottom:none; font-family:'Montserrat','Poppins',sans-serif; letter-spacing:.8px; }
.confirmation-content p { color:rgba(255,255,255,.75); font-size:.85rem; margin-bottom:1.25rem; }

/* Responsive */
@media (max-width: 980px) {
    .checkout-grid { grid-template-columns: 1fr; gap: 2.25rem; }
    .checkout-container h1 { font-size: 2.3rem; }
    .checkout-form h2, .order-summary h2 { font-size:1.4rem; }
}