:root{
    --gold:#A38C55;
    --gold-dark:#8c7645;
    --light:#E8DCC2;
    --cream:#fbf7ee;
    --dark:#553f0d;
    --text:#2f2818;
    --white:#ffffff;
    --danger:#d9534f;
    --success:#2f8f5b;
}

*{box-sizing:border-box;}
body{
    margin:0;
    font-family:Arial, sans-serif;
    background:linear-gradient(135deg, var(--gold), var(--light));
    color:var(--text);
    min-height:100vh;
}

.title{text-align:center;color:white;margin:28px 0 14px;letter-spacing:1px;}
.steps{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:10px;color:white;font-weight:bold;}
.step{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,0.24);}
.step.active{background:var(--dark);}
.line{width:70px;height:2px;background:rgba(255,255,255,0.55);}

.checkout-container{display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;gap:25px;padding:20px 20px 40px;}
.box{background:rgba(255,255,255,0.94);padding:25px;width:340px;border-radius:16px;box-shadow:0 12px 35px rgba(0,0,0,0.12);color:var(--text);border:1px solid rgba(85,63,13,0.10);}
.box h2{margin-top:0;color:var(--dark);}
.hidden{display:none;}

input{width:100%;padding:12px;margin:8px 0;border-radius:10px;border:1px solid #d6c8a6;transition:0.3s;background:white;}
input:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px rgba(163,140,85,0.18);}
.address-option{display:flex;gap:10px;padding:12px;border:1px solid #ddd;border-radius:12px;margin-bottom:10px;cursor:pointer;transition:0.3s;background:white;}
.address-option:hover{background:var(--cream);}
.address-option input{width:auto;accent-color:var(--gold);}
.new-address{margin-top:10px;}

.payment-option{display:flex;align-items:center;gap:10px;margin:12px 0;cursor:pointer;font-weight:bold;padding:10px;border-radius:12px;background:var(--cream);}
.payment-option input{width:auto;accent-color:var(--gold);transform:scale(1.15);}
.card-info{margin:10px 0 15px 25px;}
.mini-text{color:#6b5b34;margin-top:-5px;font-size:13px;}

.summary-line,.summary-total{display:flex;justify-content:space-between;margin:10px 0;gap:12px;}
.item-line{font-size:14px;color:#6b5b34;border-bottom:1px solid #eee;padding-bottom:8px;}
.summary-total{font-size:18px;font-weight:bold;padding-top:10px;border-top:1px solid #e4d7bd;}
.delivery{color:var(--gold-dark);font-weight:bold;margin-top:10px;}
.place-order,.secondary-btn{width:100%;padding:14px;margin-top:15px;border:none;border-radius:10px;cursor:pointer;font-size:16px;font-weight:bold;transition:0.3s;}
.place-order{background:var(--gold);color:white;}
.secondary-btn{background:var(--light);color:var(--dark);}
.place-order:hover,.secondary-btn:hover{transform:translateY(-2px);filter:brightness(0.97);}
.button-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.checkout-message{font-weight:bold;min-height:18px;}
.checkout-message.success{color:var(--success);}
.checkout-message.error{color:var(--danger);}

#navbar{position:relative;top:0;left:0;width:100%;height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:linear-gradient(135deg, var(--gold), var(--light));box-shadow:0 2px 10px rgba(0,0,0,0.1);z-index:1000;}
.nav-left a{text-decoration:none;color:white;font-weight:bold;transition:0.3s;}
.nav-left a:hover{color:var(--dark);}
.logo{position:absolute;left:50%;transform:translateX(-50%);}
.logo img{height:50px;}

@media(max-width:760px){.box{width:100%;}.button-row{grid-template-columns:1fr;}.line{width:35px;}}

/* ══════════════════════════════════════════════════════
   ADDRESS MODAL  (new in v2)
   ══════════════════════════════════════════════════════ */

/* Prevent body scroll while modal is open */
body.modal-open { overflow: hidden; }

/* Dark overlay */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.52);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: fadeInOverlay 0.2s ease;
}
.modal-overlay.hidden { display: none; }

@keyframes fadeInOverlay {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Modal card */
.modal-box {
    background: #fff;
    border-radius: 18px;
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    animation: slideUpModal 0.25s ease;
}

@keyframes slideUpModal {
    from { transform: translateY(28px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 14px;
    border-bottom: 1px solid #e4d7bd;
}
.modal-header h3 {
    margin: 0;
    color: var(--dark);
    font-size: 18px;
}
.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #9b8860;
    line-height: 1;
    padding: 0 4px;
    transition: color 0.2s;
}
.modal-close:hover { color: var(--danger); }

.modal-body {
    padding: 16px 24px;
}
.modal-body input {
    margin: 7px 0;
}

.save-check-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
}
.save-check-label input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: var(--gold);
}

.modal-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 14px 24px 20px;
    border-top: 1px solid #e4d7bd;
}
.modal-cancel-btn,
.modal-confirm-btn {
    margin-top: 0 !important;
}

/* ── Add New Address button ─────────────────────────────── */
.add-address-btn {
    width: 100%;
    padding: 11px;
    margin: 10px 0 6px;
    border: 2px dashed var(--gold);
    border-radius: 10px;
    background: transparent;
    color: var(--gold-dark);
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.25s;
}
.add-address-btn:hover {
    background: var(--cream);
    border-color: var(--gold-dark);
}

/* ── Selected new address confirmation card ─────────────── */
.address-option--selected {
    border: 2px solid var(--gold) !important;
    background: var(--cream) !important;
}
.address-selected-badge {
    font-size: 12px;
    font-weight: bold;
    color: var(--success);
    margin-bottom: 4px;
}

/* ── Section label above saved addresses ───────────────── */
.section-label {
    font-size: 12px;
    font-weight: bold;
    color: var(--gold-dark);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0 0 8px;
}

/* ══════════════════════════════════════════════════════
   ORDER SUMMARY — per-item rows  (new in v2)
   ══════════════════════════════════════════════════════ */

.summary-item {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}
.summary-item:last-child {
    border-bottom: none;
}
.summary-item-name {
    font-weight: bold;
    font-size: 14px;
    color: var(--dark);
    margin-bottom: 4px;
}
.summary-item-details {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.summary-item-meta {
    font-size: 13px;
    color: #7a6540;
    background: #f3ead8;
    padding: 2px 8px;
    border-radius: 999px;
}
.summary-item-subtotal {
    font-size: 13px;
    font-weight: bold;
    color: var(--dark);
    margin-left: auto;
}
.summary-divider {
    height: 1px;
    background: #e4d7bd;
    margin: 12px 0;
}