/* ============================================================
   SmartShopper Enterprise — Page-specific styles
   (Cart, Checkout, Product Detail, Loyalty / Golden Card)
   ============================================================ */

/* ---------- Cart ---------- */
.free-delivery-banner { display:flex; align-items:center; gap:.6rem; background:rgba(22,163,93,.1); color:var(--primary); font-size:.875rem; font-weight:600; border-radius:16px; padding:.75rem 1rem; margin-bottom:1.5rem; }
.cart-layout { display:flex; flex-direction:column; gap:1.5rem; }
@media (min-width:1024px){ .cart-layout{ flex-direction:row; } }
.cart-items { flex:1; min-width:0; display:flex; flex-direction:column; gap:.75rem; }
.cart-item { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:1rem; display:flex; align-items:flex-start; gap:1rem; }
.cart-item .media { width:5rem; height:5rem; border-radius:16px; overflow:hidden; background:#f9fafb; flex-shrink:0; }
.cart-item .media img { width:100%; height:100%; object-fit:cover; }
.cart-item .body { flex:1; min-width:0; }
.cart-item .row-top { display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; }
.cart-item .row-top h3 { font-size:.875rem; font-weight:700; margin:0; }
.cart-item .remove-btn { background:none; border:none; color:#9ca3af; padding:.375rem; border-radius:12px; flex-shrink:0; }
.cart-item .remove-btn:hover { background:#f3f4f6; }
.cart-item .unit { font-size:.75rem; color:var(--text-secondary); margin:.15rem 0; }
.cart-item .row-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:.75rem; gap:.5rem; flex-wrap:wrap; }
.cart-item .price { font-weight:800; font-size:1rem; }

.cart-summary { width:100%; }
@media (min-width:1024px){ .cart-summary{ width:24rem; flex-shrink:0; } }
.summary-box { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:1.25rem; }
.coupon-row { display:flex; gap:.5rem; margin-bottom:.75rem; }
.coupon-row input { flex:1; min-width:0; padding:.65rem .75rem; font-size:.875rem; background:#f9fafb; border:1px solid var(--border); border-radius:12px; }
html.dark .coupon-row input { background:var(--border); }
.coupon-msg { font-size:.75rem; color:var(--primary); margin:0 0 .5rem; }
.summary-lines { border-top:1px solid var(--border); padding-top:.75rem; margin-top:.75rem; display:flex; flex-direction:column; gap:.5rem; font-size:.875rem; }
.summary-lines .line { display:flex; justify-content:space-between; }
.summary-lines .discount { color:var(--primary); }
.summary-lines .total { font-weight:800; font-size:1rem; border-top:1px solid var(--border); padding-top:.5rem; display:flex; justify-content:space-between; }
.summary-lines .total .val { color:var(--primary); }

/* ---------- Checkout ---------- */
.checkout-steps { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin-bottom:2rem; gap:.25rem; }
.checkout-step { display:flex; align-items:center; gap:.5rem; background:none; border:none; }
.step-circle { width:2rem; height:2rem; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:.875rem; font-weight:800; background:#e5e7eb; color:#6b7280; }
.step-circle.done, .step-circle.current { background:var(--primary); color:#fff; }
.step-circle.current { box-shadow:0 0 0 4px rgba(22,163,93,.25); }
.step-label { font-size:.875rem; font-weight:600; color:var(--text-secondary); }
.step-label.active { color:var(--text-primary); }
.step-divider { width:3rem; height:2px; background:#e5e7eb; margin-inline:.5rem; }
.step-divider.done { background:var(--primary); }
.checkout-layout { display:flex; flex-direction:column; gap:1.5rem; }
@media (min-width:1024px){ .checkout-layout{ flex-direction:row; } }
.checkout-main { flex:1; background:var(--card); border:1px solid var(--border); border-radius:16px; padding:1.5rem; min-width:0; }
.checkout-aside { width:100%; }
@media (min-width:1024px){ .checkout-aside{ width:20rem; flex-shrink:0; } }
.address-box { padding:1rem; border:2px solid var(--primary); background:rgba(22,163,93,.05); border-radius:16px; margin-bottom:1rem; }
.option-row { display:flex; align-items:center; gap:.75rem; padding:1rem; border-radius:16px; border:1px solid var(--border); margin-bottom:.5rem; cursor:pointer; }
.option-row.selected { border-color:var(--primary); background:rgba(22,163,93,.05); }
.option-row .ic { padding:.5rem; border-radius:12px; }
.payment-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; margin-bottom:1rem; }
.payment-tile { display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:1rem; border-radius:16px; border:1px solid var(--border); background:var(--card); }
.payment-tile.selected { border-color:var(--primary); background:rgba(22,163,93,.05); }
.order-success { max-width:32rem; margin-inline:auto; text-align:center; padding:4rem 1rem; }
.order-success .ic-wrap { width:5rem; height:5rem; background:rgba(22,163,93,.1); border-radius:24px; display:flex; align-items:center; justify-content:center; margin:0 auto 1.5rem; color:var(--primary); }

/* ---------- Product Detail ---------- */
.product-back-btn{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1rem;padding:.65rem 1rem;border:1px solid var(--border);border-radius:14px;background:var(--card);color:var(--text-primary);font-weight:800;box-shadow:0 8px 24px rgba(15,23,42,.06);transition:.2s ease}.product-back-btn:hover{color:var(--primary);border-color:var(--primary);transform:translateY(-1px)}html[dir="ltr"] .product-back-btn span{transform:rotate(180deg)}
.product-detail-backbar{display:flex;direction:ltr;justify-content:flex-start;width:100%}.product-detail-backbar .product-back-btn{direction:rtl}
.product-detail-grid { display:grid; grid-template-columns:1fr; gap:2rem; margin-bottom:2rem; }
@media (min-width:1024px){ .product-detail-grid{ grid-template-columns:1fr 1fr; } }
.gallery-main { position:relative; aspect-ratio:1/1; background:#fff; border:1px solid var(--border); border-radius:24px; overflow:hidden; padding:10px; }
.gallery-main img { width:100%; height:100%; object-fit:contain; object-position:center; border-radius:16px; }
.detail-title { font-size:1.5rem; font-weight:800; margin:.5rem 0; }
@media (min-width:1024px){ .detail-title{ font-size:1.875rem; } }
.detail-price-row { display:flex; align-items:flex-end; gap:.75rem; margin:1.25rem 0; flex-wrap:wrap; }
.detail-price { font-size:1.875rem; font-weight:800; }
.detail-price small { font-size:1.125rem; font-weight:400; }
.detail-old-price { font-size:1.125rem; text-decoration:line-through; color:var(--text-secondary); }
.detail-save-badge { font-size:.875rem; font-weight:700; color:var(--offer-red); background:rgba(225,45,57,.1); padding:.25rem .5rem; border-radius:8px; }
.detail-info-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; margin-bottom:1.25rem; }
.detail-actions-row { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; flex-wrap:wrap; }
.qty-stepper-lg { display:flex; align-items:center; gap:.5rem; background:#f3f4f6; border-radius:16px; padding:.25rem; }
html.dark .qty-stepper-lg { background:var(--border); }
.qty-stepper-lg button { width:2.25rem; height:2.25rem; border-radius:12px; border:none; background:transparent; display:flex; align-items:center; justify-content:center; }
.qty-stepper-lg button:hover { background:#fff; }
.qty-stepper-lg .val { width:2.5rem; text-align:center; font-weight:800; }
.wishlist-toggle-btn { width:100%; padding:.75rem; border-radius:16px; border:1px solid var(--border); background:var(--card); font-weight:700; font-size:.875rem; display:flex; align-items:center; justify-content:center; gap:.5rem; }
.wishlist-toggle-btn.active { border-color:var(--offer-red); color:var(--offer-red); background:rgba(225,45,57,.05); }
.detail-tabs { border:1px solid var(--border); border-radius:16px; margin-bottom:2rem; background:var(--card); overflow:hidden; }
.detail-tabs .tabs-head { display:flex; border-bottom:1px solid var(--border); overflow-x:auto; }
.detail-tabs .tabs-head button { padding:.75rem 1.5rem; font-size:.875rem; font-weight:600; color:var(--text-secondary); background:none; border:none; white-space:nowrap; border-bottom:2px solid transparent; }
.detail-tabs .tabs-head button.active { color:var(--primary); border-color:var(--primary); }
.detail-tabs .tab-panel { padding:1.5rem; }
.spec-row { display:flex; justify-content:space-between; padding:.75rem; background:#f9fafb; border-radius:12px; font-size:.875rem; }
html.dark .spec-row { background:var(--border); }

/* ---------- Loyalty / Golden Card ---------- */
.loyalty-hero { position:relative; overflow:hidden; background:linear-gradient(135deg,var(--gold),var(--gold-dark)); border-radius:24px; padding:2rem; margin-bottom:2rem; color:#fff; }
@media (min-width:1024px){ .loyalty-hero{ padding:2.5rem; } }
.loyalty-hero .badge { display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.2); border-radius:999px; padding:.35rem .75rem; font-size:.75rem; font-weight:800; margin-bottom:.75rem; }
.loyalty-hero h1 { font-size:1.875rem; font-weight:800; margin:0 0 .25rem; }
.loyalty-hero .card-no { font-family:monospace; font-size:.875rem; color:rgba(255,255,255,.7); }
.loyalty-stats { display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:1rem; }
.loyalty-stats .stat small { display:block; font-size:.7rem; color:rgba(255,255,255,.6); }
.loyalty-stats .stat b { font-size:1.5rem; font-weight:800; }
.tier-grid { display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:640px){ .tier-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .tier-grid{ grid-template-columns:repeat(4,1fr); } }
.tier-card { position:relative; overflow:hidden; border-radius:16px; padding:1.25rem; color:#fff; }
.tier-card.current { box-shadow:0 0 0 4px var(--gold); }
.tier-badge-current { position:absolute; top:.75rem; left:.75rem; background:rgba(255,255,255,.2); border-radius:8px; padding:.15rem .5rem; font-size:.65rem; font-weight:800; }
.tier-card h3 { font-size:1.125rem; font-weight:800; margin:.75rem 0 .25rem; }
.tier-card .range { font-size:.75rem; color:rgba(255,255,255,.7); margin-bottom:.75rem; }
.tier-card ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.35rem; }
.tier-card li { display:flex; align-items:center; gap:.4rem; font-size:.75rem; color:rgba(255,255,255,.85); }
.tier-silver { background:linear-gradient(135deg,#9ca3af,#6b7280); }
.tier-gold { background:linear-gradient(135deg,var(--gold),var(--gold-dark)); }
.tier-platinum { background:linear-gradient(135deg,#c084fc,#7c3aed); }
.tier-diamond { background:linear-gradient(135deg,#22d3ee,#2563eb); }
.reward-grid { display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:640px){ .reward-grid{ grid-template-columns:repeat(3,1fr); } }
.reward-card { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:1.25rem; }
.reward-card .ic { font-size:2.25rem; display:block; margin-bottom:.75rem; }
.reward-points { color:var(--gold-dark); font-weight:800; font-size:.875rem; }
.history-list { background:var(--card); border:1px solid var(--border); border-radius:16px; }
.history-item { display:flex; align-items:center; gap:1rem; padding:1rem 1.25rem; border-bottom:1px solid var(--border); }
.history-item:last-child { border-bottom:none; }
.history-item .ic { width:2.5rem; height:2.5rem; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.history-item .ic.earn { background:rgba(22,163,93,.1); color:var(--primary); }
.history-item .ic.redeem { background:rgba(225,45,57,.1); color:var(--offer-red); }
.history-item .body { flex:1; }
.history-item .body p { margin:0; font-size:.875rem; font-weight:600; }
.history-item .body small { font-size:.7rem; color:var(--text-secondary); }
.history-item .pts { font-weight:800; font-size:.875rem; }
.history-item .pts.earn { color:var(--primary); }
.history-item .pts.redeem { color:var(--offer-red); }


/* ============================================================
   SmartShopper 10.21.3 — Cart & Checkout premium refresh
   ============================================================ */
.checkout-steps{
  max-width:620px;margin:0 auto 2rem;padding:.65rem 1rem;
  background:var(--card);border:1px solid var(--border);border-radius:20px;
  box-shadow:0 8px 30px rgba(15,23,42,.04)
}
.step-circle{width:2.35rem;height:2.35rem}
.step-divider{flex:1;max-width:74px}
.checkout-layout{align-items:flex-start;gap:1.25rem}
.checkout-main{
  border-radius:22px;padding:1.8rem;border-color:rgba(15,23,42,.09);
  box-shadow:0 12px 34px rgba(15,23,42,.055)
}
.checkout-aside{position:sticky;top:92px}
.checkout-summary-card{
  border-radius:22px;padding:1.35rem;box-shadow:0 12px 34px rgba(15,23,42,.055);
  border-color:rgba(15,23,42,.09)
}
.checkout-summary-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:1rem}
.checkout-summary-head>div{display:flex;align-items:center;gap:.6rem}
.checkout-summary-head h3{margin:0;font-size:1.12rem}
.checkout-summary-head small{background:#f1f5f3;color:#5f6f65;padding:.35rem .6rem;border-radius:999px;font-weight:700}
.checkout-summary-card .summary-lines{gap:.72rem;padding-top:1rem}
.checkout-summary-card .summary-lines .line{align-items:center;color:var(--text-secondary)}
.checkout-summary-card .summary-lines .line strong{color:var(--text-primary);font-weight:750}
.checkout-summary-card .summary-lines .line strong.free{color:var(--primary)}
.checkout-summary-card .summary-lines .total{margin-top:.35rem;padding-top:.9rem;font-size:1.05rem}
.checkout-summary-card .summary-lines .total .val{font-size:1.28rem}
.checkout-security-note{margin-top:1rem;padding:.75rem;border-radius:12px;background:rgba(22,163,93,.065);color:#4f6757;font-size:.72rem;line-height:1.65}

.checkout-section-head{display:flex;gap:.9rem;align-items:center;margin-bottom:1.35rem}
.checkout-title-icon{width:48px;height:48px;border-radius:15px;background:rgba(22,163,93,.1);display:grid;place-items:center;font-size:1.45rem;flex:0 0 auto}
.checkout-section-head h2{margin:0 0 .2rem;font-size:1.45rem}
.checkout-section-head p{margin:0;color:var(--text-secondary);font-size:.86rem}

.delivery-choice-grid{display:grid;gap:.85rem}
.delivery-choice-card{
  position:relative;display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:1rem;
  padding:1.15rem 1.2rem;border:1.5px solid var(--border);border-radius:18px;background:var(--card);
  cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,background .18s ease
}
.delivery-choice-card:hover{border-color:rgba(22,163,93,.45);transform:translateY(-1px);box-shadow:0 8px 22px rgba(15,23,42,.055)}
.delivery-choice-card.selected{border-color:var(--primary);background:rgba(22,163,93,.045);box-shadow:0 0 0 3px rgba(22,163,93,.075)}
.delivery-choice-card input{position:absolute;opacity:0;pointer-events:none}
.delivery-choice-radio{width:22px;height:22px;border:2px solid #c8d1cc;border-radius:50%;display:grid;place-items:center}
.delivery-choice-radio span{width:10px;height:10px;border-radius:50%;background:transparent}
.delivery-choice-card.selected .delivery-choice-radio{border-color:var(--primary)}
.delivery-choice-card.selected .delivery-choice-radio span{background:var(--primary)}
.delivery-choice-icon{width:48px;height:48px;border-radius:14px;background:#f4f7f5;display:grid;place-items:center;font-size:1.35rem}
.delivery-choice-card.selected .delivery-choice-icon{background:rgba(22,163,93,.11)}
.delivery-choice-content{min-width:0}
.delivery-choice-top{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.delivery-choice-top strong{font-size:.98rem}
.delivery-badge{font-size:.67rem;font-weight:800;color:var(--primary);background:rgba(22,163,93,.1);padding:.22rem .48rem;border-radius:999px}
.delivery-choice-content p{margin:.28rem 0;color:var(--text-secondary);font-size:.8rem}
.delivery-choice-content small{display:block;color:#6b7d71;font-size:.69rem}
.delivery-choice-price{text-align:end;min-width:82px}
.delivery-choice-price strong{font-size:1.1rem;color:var(--primary)}
.delivery-choice-price small{display:block;color:var(--text-secondary)}
.delivery-choice-price .free-price{display:inline-block;color:var(--primary);font-weight:850;background:rgba(22,163,93,.1);padding:.38rem .6rem;border-radius:10px}
.checkout-actions{display:grid;grid-template-columns:minmax(130px,.35fr) minmax(220px,1fr);gap:.75rem;margin-top:1.15rem}
.checkout-actions .btn{min-height:48px;border-radius:14px;font-weight:800}
.checkout-next-btn span{margin-inline-start:.35rem}

.cart-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.15rem}
.cart-page-head .page-title{margin:0}
.cart-page-head p{margin:.3rem 0 0;color:var(--text-secondary);font-size:.85rem}
.cart-count-chip{background:rgba(22,163,93,.1);color:var(--primary);font-size:.78rem;font-weight:800;padding:.45rem .7rem;border-radius:999px;white-space:nowrap}
.cart-item{border-radius:20px;padding:1.1rem;transition:.18s ease;box-shadow:0 5px 18px rgba(15,23,42,.025)}
.cart-item:hover{border-color:rgba(22,163,93,.28);box-shadow:0 10px 26px rgba(15,23,42,.05)}
.cart-item .media{width:5.5rem;height:5.5rem;border-radius:16px}
.cart-summary .summary-box{border-radius:22px;box-shadow:0 12px 34px rgba(15,23,42,.05)}
.qty-stepper{border:1px solid var(--border);background:#f8faf9}
.free-delivery-banner{border:1px solid rgba(22,163,93,.14)}

html.dark .checkout-summary-head small,
html.dark .delivery-choice-icon,
html.dark .qty-stepper{background:rgba(255,255,255,.06)}
html.dark .checkout-security-note{color:#c4d8cb}

@media(max-width:760px){
  .checkout-main{padding:1rem;border-radius:18px}
  .checkout-steps{padding:.55rem .7rem;overflow-x:auto;justify-content:flex-start}
  .step-divider{min-width:30px}
  .delivery-choice-card{grid-template-columns:auto auto 1fr;padding:.9rem;gap:.7rem}
  .delivery-choice-price{grid-column:3/4;text-align:start;min-width:0}
  .checkout-actions{grid-template-columns:1fr}
  .checkout-next-btn{order:-1}
  .cart-page-head{align-items:flex-start}
  .checkout-aside{position:static}
}


/* 10.21.4 — geolocation, distance pricing and coverage */
.checkout-location-box{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;margin:.25rem 0 1rem;border:1px solid rgba(22,163,93,.22);background:rgba(22,163,93,.045);border-radius:16px}
.checkout-location-box>div{display:flex;flex-direction:column;gap:.25rem}
.checkout-location-box strong{font-size:.88rem}
.checkout-location-box small{color:var(--text-secondary);line-height:1.5}
.checkout-location-box .location-ok{border-color:var(--primary);color:var(--primary);background:rgba(22,163,93,.08)}
.delivery-coverage-alert{display:flex;gap:.8rem;align-items:flex-start;padding:1rem;border-radius:16px;margin-bottom:.8rem;border:1px solid}
.delivery-coverage-alert .coverage-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;flex:0 0 auto;font-weight:900}
.delivery-coverage-alert strong{display:block;margin-bottom:.22rem}
.delivery-coverage-alert p{margin:.1rem 0;font-size:.8rem;line-height:1.6}
.delivery-coverage-alert small{font-size:.72rem;line-height:1.5}
.delivery-coverage-alert.out{background:#fff5f5;border-color:#fecaca;color:#991b1b}
.delivery-coverage-alert.out .coverage-icon{background:#fee2e2}
.delivery-coverage-alert.warn{background:#fffbeb;border-color:#fde68a;color:#92400e}
.delivery-coverage-alert.warn .coverage-icon{background:#fef3c7}
.delivery-coverage-alert.covered{background:#f0fdf4;border-color:#bbf7d0;color:#166534}
.delivery-coverage-alert.covered .coverage-icon{background:#dcfce7}
.delivery-pricing-rule{display:flex;align-items:center;gap:.7rem;padding:.72rem .9rem;margin-bottom:1rem;border:1px dashed rgba(22,163,93,.3);border-radius:14px;background:#fbfdfc}
.delivery-pricing-rule>span{font-size:1.2rem}
.delivery-pricing-rule>div{display:flex;flex-direction:column;gap:.15rem}
.delivery-pricing-rule strong{font-size:.8rem}
.delivery-pricing-rule small{color:var(--text-secondary);font-size:.69rem}
html.dark .delivery-coverage-alert.out{background:rgba(127,29,29,.18);color:#fecaca}
html.dark .delivery-coverage-alert.warn{background:rgba(120,53,15,.18);color:#fde68a}
html.dark .delivery-coverage-alert.covered{background:rgba(20,83,45,.2);color:#bbf7d0}
html.dark .delivery-pricing-rule{background:rgba(255,255,255,.025)}
@media(max-width:700px){.checkout-location-box{align-items:stretch;flex-direction:column}.checkout-location-box .btn{width:100%}}


/* 10.21.5 — VAT inclusive, delivery offers, interactive map, refined payment icons */
.checkout-map-panel{border:1px solid rgba(22,163,93,.18);border-radius:18px;overflow:hidden;margin:.25rem 0 1rem;background:var(--card)}
.checkout-map-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1rem}
.checkout-map-head>div{display:flex;flex-direction:column;gap:.2rem}
.checkout-map-head strong{font-size:.9rem}
.checkout-map-head small{color:var(--text-secondary);font-size:.72rem}
.checkout-map{height:300px;width:100%;background:#eef3ef;border-top:1px solid var(--border);border-bottom:1px solid var(--border);z-index:1}
.nearest-branch-preview{display:flex;align-items:center;gap:.75rem;padding:.85rem 1rem;background:rgba(22,163,93,.045)}
.nearest-branch-icon{width:36px;height:36px;border-radius:11px;background:rgba(22,163,93,.1);display:grid;place-items:center}
.nearest-branch-preview>div:nth-child(2){display:flex;flex-direction:column;gap:.08rem;min-width:0;flex:1}
.nearest-branch-preview small{color:var(--text-secondary);font-size:.67rem}
.nearest-branch-preview strong{font-size:.82rem}
.nearest-branch-preview #nearest-branch-distance{font-size:.7rem;color:var(--primary);font-weight:800}
.nearest-delivery-preview{text-align:end!important;flex:0 0 auto!important}
.nearest-delivery-preview strong{font-size:.92rem;color:var(--primary)}
.nearest-delivery-preview strong.out-of-coverage{color:#b91c1c}
.delivery-offer-chip{display:inline-block;margin-inline-start:.35rem;background:#fff3cd;color:#8a5a00;padding:.16rem .42rem;border-radius:999px;font-size:.62rem;font-weight:850}
.delivery-coverage-alert del{opacity:.58;margin-inline-end:.3rem}
.delivery-choice-price del{display:block;color:var(--text-secondary);font-size:.72rem}
.vat-included-note{margin-top:.55rem;padding:.55rem .65rem;border-radius:10px;background:rgba(22,163,93,.055);color:#617267;font-size:.68rem;line-height:1.55}

.payment-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
.payment-tile{min-height:92px;padding:.85rem;border-radius:15px;justify-content:center;cursor:pointer}
.payment-mini-icon{height:24px;min-width:32px;padding:0 .45rem;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:900;line-height:1;background:#eff4f1;color:#163d29;border:1px solid #dce7e0}
.payment-mini-icon-mada{font-size:.7rem;color:#155e75;background:#ecfeff;border-color:#cffafe}
.payment-mini-icon-apple{font-size:.58rem;background:#111827;color:#fff;border-color:#111827}
.payment-mini-icon-cash{font-size:.58rem;background:#ecfdf5;color:#047857;border-color:#d1fae5}
.payment-tile.selected .payment-mini-icon{box-shadow:0 0 0 2px rgba(22,163,93,.12)}
.payment-tile span:last-child{font-size:.72rem!important}

@media(max-width:700px){
  .checkout-map-head{align-items:stretch;flex-direction:column}
  .checkout-map-head .btn{width:100%}
  .checkout-map{height:260px}
  .nearest-branch-preview{flex-wrap:wrap}
  .nearest-delivery-preview{width:100%;text-align:start!important;padding-inline-start:48px}
}


/* 10.21.6 — cart product image fix */
.cart-item .cart-product-media{
  width:7rem;
  height:7rem;
  padding:.35rem;
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cart-item .cart-product-media img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:14px;
}
@media(max-width:700px){
  .cart-item .cart-product-media{width:5.75rem;height:5.75rem}
}


/* 10.21.7 — Checkout address form layout */
.checkout-address-head{margin-bottom:1.25rem}
.checkout-address-form{width:100%}
.checkout-address-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem 1.1rem;
  margin-bottom:1.15rem;
}
.checkout-field{
  display:flex;
  flex-direction:column;
  gap:.45rem;
  min-width:0;
}
.checkout-field label{
  display:block;
  font-size:.82rem;
  line-height:1.35;
  font-weight:800;
  color:var(--text-primary);
}
.checkout-field .form-input{
  width:100%;
  min-width:0;
  height:48px;
  padding:.72rem .9rem;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--card);
  color:var(--text-primary);
  font-size:.9rem;
  line-height:1.2;
  box-sizing:border-box;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.checkout-field .form-input::placeholder{
  color:#9aa4a0;
  opacity:1;
}
.checkout-field .form-input:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(22,163,93,.10);
}
.checkout-address-form .checkout-map-panel{
  clear:both;
  width:100%;
  margin-top:.25rem;
}
.checkout-address-form > .btn-block{
  min-height:50px;
  border-radius:14px;
  font-weight:850;
  margin-top:.9rem;
}
html[dir="rtl"] .checkout-field input[dir="ltr"]{
  text-align:left;
}
@media(max-width:760px){
  .checkout-address-grid{
    grid-template-columns:1fr;
    gap:.85rem;
  }
  .checkout-field .form-input{
    height:46px;
  }
}


/* 10.21.8 — Location permission UX */
.location-modal-open{overflow:hidden}
.ss-location-modal[hidden]{display:none!important}
.ss-location-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:18px}
.ss-location-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(3px)}
.ss-location-modal-dialog{
  position:relative;z-index:1;width:min(470px,100%);background:var(--card);color:var(--text-primary);
  border:1px solid var(--border);border-radius:22px;padding:1.5rem;text-align:center;
  box-shadow:0 24px 70px rgba(15,23,42,.24)
}
.ss-location-modal-close{
  position:absolute;top:.7rem;inset-inline-end:.7rem;width:34px;height:34px;border:0;border-radius:10px;
  background:#f1f5f3;color:#617067;font-size:1.25rem;cursor:pointer
}
.ss-location-permission-icon{
  width:64px;height:64px;margin:0 auto .9rem;border-radius:20px;display:grid;place-items:center;
  background:rgba(22,163,93,.1);font-size:1.8rem
}
.ss-location-modal-dialog h3{margin:.2rem 0 .55rem;font-size:1.25rem}
.ss-location-modal-dialog>p{margin:0 auto .9rem;max-width:390px;color:var(--text-secondary);font-size:.84rem;line-height:1.8}
.ss-location-privacy-note{
  margin:.8rem 0;padding:.7rem .8rem;border-radius:12px;background:rgba(22,163,93,.065);
  color:#50665a;font-size:.72rem;line-height:1.6
}
.ss-location-permission-help{
  margin:.8rem 0;padding:.8rem;border:1px solid #fed7aa;border-radius:12px;background:#fff7ed;color:#9a3412;text-align:start
}
.ss-location-permission-help strong{display:block;font-size:.8rem;margin-bottom:.25rem}
.ss-location-permission-help span{display:block;font-size:.72rem;line-height:1.65}
.ss-location-modal-actions{display:grid;gap:.65rem;margin-top:1rem}
.ss-location-modal-actions .btn{min-height:46px;border-radius:13px;font-weight:800}
html.dark .ss-location-modal-close{background:rgba(255,255,255,.08)}
html.dark .ss-location-privacy-note{color:#c5d7cc}
html.dark .ss-location-permission-help{background:rgba(154,52,18,.14);color:#fed7aa;border-color:rgba(251,146,60,.3)}
@media(max-width:600px){
  .ss-location-modal{align-items:flex-end;padding:10px}
  .ss-location-modal-dialog{border-radius:22px 22px 16px 16px;padding:1.35rem 1rem 1rem}
}


/* 10.21.9 — Fulfillment method is the first checkout step */
.fulfillment-first-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.fulfillment-first-card{
  position:relative;display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:.9rem;
  min-height:138px;padding:1.2rem;border:1.5px solid var(--border);border-radius:20px;background:var(--card);
  cursor:pointer;transition:.18s ease
}
.fulfillment-first-card:hover{transform:translateY(-2px);border-color:rgba(22,163,93,.45);box-shadow:0 12px 28px rgba(15,23,42,.06)}
.fulfillment-first-card.selected{border-color:var(--primary);background:rgba(22,163,93,.045);box-shadow:0 0 0 3px rgba(22,163,93,.07)}
.fulfillment-first-card>input{position:absolute;opacity:0;pointer-events:none}
.fulfillment-radio{width:22px;height:22px;border:2px solid #cbd5ce;border-radius:50%;display:grid;place-items:center}
.fulfillment-radio i{width:10px;height:10px;border-radius:50%;background:transparent}
.fulfillment-first-card.selected .fulfillment-radio{border-color:var(--primary)}
.fulfillment-first-card.selected .fulfillment-radio i{background:var(--primary)}
.fulfillment-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:#f2f7f4;font-size:1.45rem}
.fulfillment-copy{min-width:0}
.fulfillment-copy>div{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.fulfillment-copy strong{font-size:1rem}
.fulfillment-copy p{margin:.35rem 0;color:var(--text-secondary);font-size:.78rem;line-height:1.6}
.fulfillment-copy small{font-size:.68rem;color:#65776c}
.fulfillment-arrow{font-size:1.15rem;color:var(--primary);font-weight:900}
.fulfillment-continue{margin-top:1rem;min-height:50px;border-radius:14px;font-weight:850}

.pickup-branch-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.pickup-branch-card{
  position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;
  padding:1rem;border:1.5px solid var(--border);border-radius:17px;background:var(--card);cursor:pointer
}
.pickup-branch-card>input{position:absolute;opacity:0}
.pickup-branch-card.selected{border-color:var(--primary);background:rgba(22,163,93,.04)}
.pickup-branch-radio{width:20px;height:20px;border:2px solid #cbd5ce;border-radius:50%;display:grid;place-items:center}
.pickup-branch-radio i{width:9px;height:9px;border-radius:50%}
.pickup-branch-card.selected .pickup-branch-radio{border-color:var(--primary)}
.pickup-branch-card.selected .pickup-branch-radio i{background:var(--primary)}
.pickup-branch-card strong{display:block;font-size:.87rem}
.pickup-branch-card p{margin:.2rem 0;color:var(--text-secondary);font-size:.72rem}
.pickup-branch-card small{font-size:.67rem;color:#687a70}

@media(max-width:760px){
  .fulfillment-first-grid,.pickup-branch-grid{grid-template-columns:1fr}
  .fulfillment-first-card{min-height:115px;padding:1rem}
}


/* 10.21.10 — automatic address fill from current location */
.checkout-field .form-input.location-autofilled{
  border-color:rgba(22,163,93,.55);
  background:rgba(22,163,93,.035);
  box-shadow:0 0 0 2px rgba(22,163,93,.055);
}


/* 10.21.11 — permission guide + automatic preflight */
.ss-location-steps{display:grid;gap:.5rem;margin:.9rem 0;text-align:start}
.ss-location-steps>div{display:flex;align-items:flex-start;gap:.55rem;padding:.55rem .65rem;border:1px solid var(--border);border-radius:11px;background:#fafcfb}
.ss-location-steps span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:rgba(22,163,93,.1);color:var(--primary);font-size:.68rem;font-weight:900}
.ss-location-steps p{margin:0;font-size:.72rem;line-height:1.55;color:var(--text-secondary)}
.ss-location-preflight{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;margin:.8rem 0}
.ss-location-preflight>div{display:flex;align-items:flex-start;gap:.45rem;padding:.5rem .55rem;border-radius:10px;text-align:start}
.ss-location-preflight>div.ok{background:#f0fdf4;color:#166534}
.ss-location-preflight>div.fail{background:#fff7ed;color:#9a3412}
.ss-location-preflight>div>span{font-weight:900}
.ss-location-preflight p{margin:0;font-size:.68rem;line-height:1.45}
.ss-location-preflight p strong{display:block}
.ss-location-preflight p small{display:block;margin-top:.15rem}
.ss-location-permission-help ol{margin:.45rem 0 0;padding-inline-start:1.3rem}
.ss-location-permission-help li{margin:.25rem 0;font-size:.72rem;line-height:1.5}
.ss-location-permission-waiting{display:flex;align-items:center;gap:.65rem;margin:.8rem 0;padding:.7rem .8rem;border-radius:12px;background:#eff6ff;color:#1d4ed8;text-align:start}
.ss-location-permission-waiting>div{display:flex;flex-direction:column;gap:.12rem}
.ss-location-permission-waiting strong{font-size:.76rem}
.ss-location-permission-waiting small{font-size:.66rem;line-height:1.5}
.ss-location-spinner{width:24px;height:24px;border-radius:50%;border:3px solid #bfdbfe;border-top-color:#2563eb;animation:sslocspin .8s linear infinite;flex:0 0 auto}
@keyframes sslocspin{to{transform:rotate(360deg)}}
html.dark .ss-location-steps>div{background:rgba(255,255,255,.03)}
@media(max-width:600px){.ss-location-preflight{grid-template-columns:1fr}}


/* 10.21.12 — blocked location state */
#verify-location-permission{
  border-color:#f59e0b;
  color:#92400e;
  background:#fffbeb;
}
#verify-location-permission:hover{
  background:#fef3c7;
}
.ss-location-permission-help + .ss-location-modal-actions{
  margin-top:.75rem;
}


/* 10.21.13 — fulfillment card selection + compact location permission dialog */
.fulfillment-first-card{
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.fulfillment-first-card,
.fulfillment-first-card *{
  cursor:pointer;
}
.fulfillment-first-card:focus-visible{
  outline:3px solid rgba(22,163,93,.22);
  outline-offset:2px;
}
.fulfillment-first-card input[type="radio"]{
  position:absolute!important;
  opacity:0!important;
  pointer-events:none!important;
}
.fulfillment-first-card.selected .fulfillment-radio{
  border-color:var(--primary)!important;
}
.fulfillment-first-card.selected .fulfillment-radio i{
  background:var(--primary)!important;
}

/* Compact permission message */
.ss-location-modal-dialog{
  width:min(410px,calc(100vw - 24px))!important;
  max-height:min(86vh,620px);
  overflow:auto;
  padding:1rem!important;
  border-radius:18px!important;
}
.ss-location-permission-icon{
  width:48px!important;
  height:48px!important;
  border-radius:15px!important;
  margin-bottom:.55rem!important;
  font-size:1.35rem!important;
}
.ss-location-modal-dialog h3{
  font-size:1.05rem!important;
  margin:.1rem 0 .35rem!important;
}
.ss-location-modal-dialog>p{
  font-size:.73rem!important;
  line-height:1.6!important;
  margin-bottom:.55rem!important;
}
.ss-location-privacy-note{
  margin:.5rem 0!important;
  padding:.5rem .6rem!important;
  font-size:.65rem!important;
}
.ss-location-steps{
  gap:.35rem!important;
  margin:.55rem 0!important;
}
.ss-location-steps>div{
  padding:.4rem .5rem!important;
}
.ss-location-steps span{
  width:19px!important;
  height:19px!important;
  font-size:.6rem!important;
}
.ss-location-steps p{
  font-size:.65rem!important;
  line-height:1.4!important;
}
.ss-location-preflight{
  gap:.3rem!important;
  margin:.5rem 0!important;
}
.ss-location-preflight>div{
  padding:.38rem .45rem!important;
}
.ss-location-preflight p{
  font-size:.61rem!important;
}
.ss-location-permission-help{
  margin:.5rem 0!important;
  padding:.55rem!important;
}
.ss-location-permission-help li{
  font-size:.64rem!important;
  margin:.15rem 0!important;
}
.ss-location-modal-actions{
  gap:.45rem!important;
  margin-top:.6rem!important;
}
.ss-location-modal-actions .btn{
  min-height:40px!important;
  font-size:.75rem!important;
  border-radius:11px!important;
}
.ss-location-permission-waiting{
  margin:.5rem 0!important;
  padding:.5rem .6rem!important;
}
@media(max-width:600px){
  .ss-location-modal{
    padding:8px!important;
  }
  .ss-location-modal-dialog{
    width:100%!important;
    max-height:88vh;
    padding:.85rem!important;
    border-radius:18px 18px 12px 12px!important;
  }
}


/* 10.21.15 — pickup branch card selection */
.pickup-branch-card{
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.pickup-branch-card,
.pickup-branch-card *{
  cursor:pointer;
}
.pickup-branch-card:focus-visible{
  outline:3px solid rgba(22,163,93,.22);
  outline-offset:2px;
}
.pickup-branch-card input[type="radio"]{
  position:absolute!important;
  opacity:0!important;
  pointer-events:none!important;
}
.pickup-branch-card.selected{
  border-color:var(--primary)!important;
  background:rgba(22,163,93,.045)!important;
  box-shadow:0 0 0 3px rgba(22,163,93,.065);
}
.pickup-branch-card.selected .pickup-branch-radio{
  border-color:var(--primary)!important;
}
.pickup-branch-card.selected .pickup-branch-radio i{
  background:var(--primary)!important;
}

/* 10.22.0 — customer order self-service and login location permission */
.order-live-panel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem;margin:.8rem 0;padding:.75rem;border-radius:14px;background:rgba(22,163,93,.045);border:1px solid rgba(22,163,93,.12)}
.order-live-panel>div{display:flex;flex-direction:column;gap:.15rem}.order-live-panel small{color:var(--text-secondary);font-size:.66rem}.order-live-panel b{font-size:.76rem}
.order-edit-box{margin-top:.7rem;border:1px solid var(--border);border-radius:12px;padding:.55rem .7rem}.order-edit-box summary{cursor:pointer;font-weight:800;font-size:.75rem}.order-edit-form{display:grid;grid-template-columns:1fr 1fr auto;gap:.55rem;align-items:end;margin-top:.65rem}.order-edit-form label{font-size:.7rem;font-weight:700}.order-edit-form input,.order-edit-form select{display:block;width:100%;margin-top:.25rem;padding:.55rem;border:1px solid var(--border);border-radius:9px;background:var(--card);color:var(--text-primary)}
.customer-notification-list{display:grid;gap:.55rem}.customer-notification-list article{border:1px solid var(--border);border-radius:12px;padding:.7rem}.customer-notification-list article b{font-size:.78rem}.customer-notification-list article p{margin:.25rem 0;color:var(--text-secondary);font-size:.72rem}.customer-notification-list article small{font-size:.62rem;color:var(--text-secondary)}
.profile-location-modal{position:fixed;inset:0;z-index:99999;background:rgba(15,23,42,.56);display:grid;place-items:center;padding:14px}.profile-location-card{width:min(390px,100%);background:var(--card);border:1px solid var(--border);border-radius:20px;padding:1.1rem;text-align:center;box-shadow:0 24px 70px rgba(15,23,42,.25)}.profile-location-icon{width:50px;height:50px;display:grid;place-items:center;margin:0 auto .55rem;border-radius:15px;background:rgba(22,163,93,.1);font-size:1.4rem}.profile-location-card h3{margin:.2rem 0 .4rem;font-size:1.05rem}.profile-location-card p{margin:0 0 .6rem;font-size:.74rem;color:var(--text-secondary);line-height:1.7}.profile-location-status{margin:.55rem 0;padding:.55rem;border-radius:10px;background:rgba(22,163,93,.055);font-size:.68rem;line-height:1.55}.profile-location-card .btn{width:100%;margin-top:.45rem}
@media(max-width:760px){.order-live-panel{grid-template-columns:repeat(2,minmax(0,1fr))}.order-edit-form{grid-template-columns:1fr}.profile-location-modal{align-items:end;padding:8px}.profile-location-card{border-radius:20px 20px 12px 12px}}