/* ══════════════════════════════════════════════════════════════
   MotoWorks shopping cart — shared styles

   Used by every page that sells something (piese.html,
   echipament.html). The markup and behaviour live in cart.js;
   this file only dresses them.

   Colour tokens (--red, --card, --border, ...) come from the host
   page's :root, so the cart inherits each page's palette instead
   of hardcoding one. --green falls back below because the parts
   page defines it but others may not.
   ══════════════════════════════════════════════════════════════ */

:root { --cart-green: var(--green, #16a34a); }

/* ── HEADER CART BUTTON ── */
.cart-icon-btn { background:none; border:none; cursor:pointer; position:relative; padding:6px 8px; display:flex; align-items:center; }
.cart-icon-emoji { font-size:1.5rem; line-height:1; }
.cart-badge { background:var(--red); color:#000; font-size:.62rem; font-weight:700; border-radius:50%; width:17px; height:17px; display:flex; align-items:center; justify-content:center; position:absolute; top:1px; right:1px; }
.cart-badge[data-count="0"] { display:none; }

/* ── DRAWER ── */
.cart-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:300; }
.cart-overlay.active { display:block; }

.cart-drawer { position:fixed; top:0; right:0; width:360px; max-width:95vw; height:100vh; height:100dvh; background:var(--surface); border-left:1px solid var(--border); z-index:301; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .3s ease; }
.cart-drawer.open { transform:translateX(0); }

.cart-header { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--border); flex-shrink:0; }
.cart-header h3 { font-family:'Oswald',sans-serif; font-size:1.2rem; font-weight:700; color:var(--red); letter-spacing:.06em; text-transform:uppercase; }
.cart-close { background:none; border:none; color:var(--muted); font-size:1.8rem; cursor:pointer; line-height:1; transition:color .2s; }
.cart-close:hover { color:var(--red); }

.cart-items { flex:1; overflow-y:auto; padding:16px 20px; display:flex; flex-direction:column; gap:14px; }

.cart-item { display:flex; gap:12px; align-items:flex-start; background:var(--card); border:1px solid var(--border); border-radius:9px; padding:12px; }
.cart-item-img { width:56px; height:56px; object-fit:contain; background:#141414; border-radius:6px; flex-shrink:0; }
.cart-item-img-ph { width:56px; height:56px; border-radius:6px; flex-shrink:0; background:#141414; display:flex; align-items:center; justify-content:center; font-size:1.4rem; opacity:.4; }
.cart-item-info { flex:1; min-width:0; }
.cart-item-name { font-size:.82rem; font-weight:600; color:#fff; margin-bottom:2px; }
.cart-item-brand { font-size:.7rem; color:var(--muted); margin-bottom:6px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
/* Chosen size, shown next to the brand so a jersey in M and one in XL are
   distinguishable at a glance in the drawer. */
.cart-item-size {
  font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#e8e8e8; background:#242424; border:1px solid #3a3a3a;
  padding:1px 6px; border-radius:4px;
}
.cart-item-price { font-size:.92rem; font-weight:700; color:var(--red); }
.cart-item-actions { display:flex; align-items:center; gap:8px; margin-top:7px; }
.qty-btn { background:var(--border); border:none; color:#fff; width:24px; height:24px; border-radius:5px; font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; font-family:inherit; }
.qty-btn:hover { background:var(--red); color:#000; }
.qty-val { font-size:.82rem; font-weight:700; color:#fff; min-width:18px; text-align:center; }
.cart-item-remove { background:none; border:none; color:var(--muted); font-size:.8rem; cursor:pointer; margin-left:auto; align-self:center; transition:color .18s; flex-shrink:0; padding:4px; }
.cart-item-remove:hover { color:#ef4444; }

.cart-empty { flex:1; display:none; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--muted); font-size:.9rem; }

.cart-footer { padding:16px 20px; border-top:1px solid var(--border); flex-shrink:0; }
.cart-total { display:flex; justify-content:space-between; align-items:center; font-size:1rem; font-weight:700; margin-bottom:14px; }
.cart-total span:first-child { color:var(--muted); }
.cart-total span:last-child { color:var(--red); font-size:1.2rem; }
.cart-checkout-btn { width:100%; background:var(--cart-green); color:#fff; border:none; padding:14px; border-radius:8px; font-size:.95rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; font-family:inherit; transition:background .18s; }
.cart-checkout-btn:hover { background:#15803d; }

/* ── SHIPPING SELECTOR ── */
.cart-shipping { padding:12px 20px; border-top:1px solid var(--border); flex-shrink:0; display:none; }
.shipping-title { font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:9px; }
.shipping-opt { display:flex; align-items:center; gap:10px; cursor:pointer; padding:9px 11px; border-radius:7px; border:1.5px solid var(--border); margin-bottom:7px; transition:border-color .18s; }
.shipping-opt:last-of-type { margin-bottom:0; }
.shipping-opt:hover { border-color:#444; }
.shipping-opt:has(input:checked) { border-color:var(--red); }
.shipping-opt input[type=radio] { accent-color:var(--red); width:15px; height:15px; flex-shrink:0; cursor:pointer; }
.shipping-opt-label { display:flex; justify-content:space-between; flex:1; align-items:center; pointer-events:none; }
.shipping-opt-name { font-size:.84rem; font-weight:600; color:#ccc; }
.shipping-opt-price { font-size:.8rem; font-weight:700; color:var(--red); }
.pickup-locations { display:none; flex-direction:column; margin-top:0; background:var(--card); border:1.5px solid var(--border); border-top:none; border-radius:0 0 7px 7px; overflow:hidden; }
.pickup-locations.visible { display:flex; }
/* when locations are visible, remove bottom-radius from the Ridicare option */
.shipping-opt:has(+ .pickup-locations.visible) { border-radius:7px 7px 0 0; border-bottom-color:transparent; }
.pickup-loc-opt { display:flex; align-items:center; gap:10px; padding:9px 14px 9px 22px; cursor:pointer; transition:background .15s; border-top:1px solid var(--border); }
.pickup-loc-opt:first-child { border-top:none; }
.pickup-loc-opt:hover { background:rgba(255,255,255,.04); }
.pickup-loc-opt:has(input:checked) { background:rgba(255,198,26,.06); }
.pickup-loc-opt input[type=radio] { accent-color:var(--red); width:14px; height:14px; flex-shrink:0; cursor:pointer; }
.pickup-loc-icon { width:14px; height:14px; flex-shrink:0; fill:#888; transition:fill .15s; }
.pickup-loc-opt:has(input:checked) .pickup-loc-icon { fill:var(--red); }
.pickup-loc-text { font-size:.78rem; color:#aaa; line-height:1.45; flex:1; }
.pickup-loc-opt:has(input:checked) .pickup-loc-text { color:#ddd; }
.pickup-loc-map { font-size:.7rem; color:#555; text-decoration:none; flex-shrink:0; transition:color .15s; }
.pickup-loc-map:hover { color:var(--red); text-decoration:underline; }
.pickup-loc-error { font-size:.75rem; color:#ef4444; padding:7px 14px; display:none; }
.pickup-loc-error.visible { display:block; }

/* ── FOOTER BREAKDOWN ── */
.cart-row-subtotal, .cart-row-shipping { display:flex; justify-content:space-between; align-items:center; font-size:.82rem; margin-bottom:6px; }
.cart-row-subtotal span:first-child, .cart-row-shipping span:first-child { color:var(--muted); }
.cart-row-subtotal span:last-child, .cart-row-shipping span:last-child { color:#ccc; font-weight:600; }
.cart-row-tva { display:flex; justify-content:space-between; align-items:center; font-size:.75rem; margin:-8px 0 10px; }
.cart-row-tva span:first-child { color:#5f5f5f; }
.cart-row-tva span:last-child { color:#8a8a8a; font-weight:600; }

/* ── CHECKOUT OVERLAY ── */
.checkout-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.88); z-index:400; justify-content:center; align-items:center; padding:20px; }
.checkout-overlay.active { display:flex; }
.checkout-modal { background:var(--surface); border:1px solid var(--border); border-radius:16px; width:100%; max-width:480px; max-height:90vh; max-height:90dvh; overflow-y:auto; display:flex; flex-direction:column; -webkit-overflow-scrolling:touch; }
.checkout-header { display:flex; align-items:center; gap:8px; padding:16px 20px; border-bottom:1px solid var(--border); flex-shrink:0; }
.checkout-back { background:none; border:none; color:var(--muted); font-size:1.3rem; cursor:pointer; padding:2px 8px 2px 0; line-height:1; transition:color .18s; }
.checkout-back:hover { color:#fff; }
.checkout-header h3 { flex:1; font-family:'Oswald',sans-serif; font-size:1.1rem; font-weight:700; color:var(--red); text-transform:uppercase; letter-spacing:.06em; margin:0; }
.checkout-close { background:none; border:none; color:var(--muted); font-size:1.8rem; cursor:pointer; line-height:1; transition:color .2s; }
.checkout-close:hover { color:var(--red); }

.checkout-step { padding:20px; }
.co-group { margin-bottom:14px; }
.co-group label { display:block; font-size:.82rem; font-weight:600; color:var(--text); margin-bottom:5px; }
.co-group input { width:100%; background:var(--card); border:1.5px solid var(--border); color:#fff; padding:11px 13px; border-radius:8px; font-size:.9rem; font-family:inherit; outline:none; transition:border-color .2s; }
.co-group input:focus { border-color:var(--red); }
.co-group input::placeholder { color:#555; }
.co-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.co-row-street { display:grid; grid-template-columns:2.2fr 1fr; gap:12px; }

/* Address sections (livrare / facturare) */
.co-section { margin:18px 0 4px; }
.co-section:first-child { margin-top:4px; }
.co-section-title {
  display:flex; align-items:center; gap:10px;
  font-family:'Oswald',sans-serif; font-size:.78rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--red);
  margin-bottom:12px;
}
.co-section-title::after { content:''; flex:1; height:1px; background:var(--border); }

/* "same as delivery" checkbox */
.co-check {
  display:flex; align-items:flex-start; gap:11px;
  background:var(--card); border:1.5px solid var(--border); border-radius:9px;
  padding:12px 14px; margin:16px 0 4px; cursor:pointer; transition:border-color .2s;
}
.co-check:hover { border-color:#3a3a3a; }
.co-check input { width:17px; height:17px; accent-color:var(--red); cursor:pointer; flex-shrink:0; margin-top:1px; }
.co-check-text { font-size:.85rem; color:var(--text); line-height:1.35; }
.co-check-text small { display:block; color:var(--muted); font-size:.74rem; margin-top:3px; }

/* Mandatory terms acceptance */
.co-terms { margin:18px 0 6px; }
.co-terms.co-terms-invalid { border-color:#e24b4a; background:rgba(226,75,74,.06); }
.co-terms-link {
  color:var(--red); text-decoration:underline; text-underline-offset:2px;
  cursor:pointer; font-weight:600;
}
.co-terms-link:hover { color:#fff; }
.co-terms-error { display:none; color:#e24b4a; font-size:.76rem; margin:6px 2px 0; }
.co-terms-error.visible { display:block; }

/* Inline validation */
.co-group input.co-invalid { border-color:#e24b4a; }
.co-field-error { display:none; font-size:.72rem; color:#e24b4a; margin-top:4px; }
.co-field-error.visible { display:block; }

.co-next-btn { width:100%; background:var(--red); color:#000; border:none; padding:13px; border-radius:8px; font-size:.92rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; font-family:inherit; transition:background .18s; margin-top:6px; }
.co-next-btn:hover { background:var(--red-dk); }

.co-order-summary { background:var(--card); border:1px solid var(--border); border-radius:9px; padding:12px 14px; margin-bottom:16px; }
.co-sum-row { display:flex; justify-content:space-between; align-items:center; font-size:.82rem; color:var(--muted); margin-bottom:4px; }
.co-sum-row:last-child { margin-bottom:0; border-top:1px solid var(--border); padding-top:8px; margin-top:6px; font-size:.9rem; font-weight:700; color:#fff; }
.co-sum-row span:last-child { color:var(--red); }

#stripePaymentElement { margin-bottom:14px; min-height:200px; }
.payment-message { font-size:.82rem; color:#ef4444; margin-bottom:10px; min-height:1.1em; line-height:1.4; }
.co-pay-btn { width:100%; background:var(--cart-green); color:#fff; border:none; padding:14px; border-radius:8px; font-size:.95rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; font-family:inherit; transition:background .18s; display:flex; align-items:center; justify-content:center; gap:10px; }
.co-pay-btn:hover:not(:disabled) { background:#15803d; }
.co-pay-btn:disabled { background:#2a2a2a; color:#555; cursor:not-allowed; }
.co-spinner { width:18px; height:18px; border:2.5px solid rgba(255,255,255,.2); border-top-color:#fff; border-radius:50%; animation:coSpin .7s linear infinite; flex-shrink:0; }
@keyframes coSpin { to { transform:rotate(360deg); } }

/* ── TERMS READER ── */
.terms-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.9);
  z-index:500; justify-content:center; align-items:center; padding:20px;
}
.terms-overlay.active { display:flex; }
.terms-modal {
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  width:100%; max-width:660px; max-height:88vh; max-height:88dvh;
  display:flex; flex-direction:column; overflow:hidden;
}
.terms-head {
  display:flex; align-items:center; gap:10px; padding:16px 22px;
  border-bottom:1px solid var(--border); flex-shrink:0;
}
.terms-head h3 {
  flex:1; margin:0; font-family:'Oswald',sans-serif; font-size:1.1rem;
  font-weight:700; color:var(--red); text-transform:uppercase; letter-spacing:.06em;
}
.terms-close { background:none; border:none; color:var(--muted); font-size:1.8rem; line-height:1; cursor:pointer; transition:color .2s; }
.terms-close:hover { color:var(--red); }
.terms-body {
  padding:20px 22px 26px; overflow-y:auto; -webkit-overflow-scrolling:touch;
  font-size:.86rem; line-height:1.6; color:var(--text);
}
.terms-body h4 {
  font-family:'Oswald',sans-serif; font-size:.95rem; font-weight:700;
  color:#fff; text-transform:uppercase; letter-spacing:.05em;
  margin:22px 0 8px; padding-bottom:5px; border-bottom:1px solid var(--border);
}
.terms-body h4:first-child { margin-top:0; }
.terms-body p  { margin:0 0 10px; color:#c9c9c9; }
.terms-body ul { margin:0 0 12px; padding-left:20px; color:#c9c9c9; }
.terms-body li { margin-bottom:6px; }
.terms-body strong { color:#fff; }
.terms-body a { color:var(--red); }
.terms-updated { font-size:.75rem; color:var(--muted); margin-top:20px; font-style:italic; }
.terms-accept-btn {
  width:100%; background:var(--red); color:#000; border:none; padding:13px;
  border-radius:8px; font-size:.9rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; cursor:pointer; font-family:inherit; margin-top:22px;
}

/* ── PAYMENT SUCCESS ── */
.pay-success-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.88); z-index:500; justify-content:center; align-items:center; padding:20px; }
.pay-success-overlay.active { display:flex; }
.pay-success-card { background:var(--surface); border:1px solid var(--cart-green); border-radius:16px; padding:40px 30px; text-align:center; max-width:380px; width:100%; }
.pay-success-icon { font-size:3.5rem; margin-bottom:16px; }
.pay-success-card h3 { font-family:'Oswald',sans-serif; font-size:1.5rem; color:var(--cart-green); text-transform:uppercase; margin-bottom:8px; }
.pay-success-card p { color:var(--muted); margin-bottom:24px; font-size:.9rem; line-height:1.5; }
.pay-success-btn { background:var(--cart-green); color:#fff; border:none; padding:12px 36px; border-radius:8px; font-size:.95rem; font-weight:700; cursor:pointer; font-family:inherit; transition:background .18s; }
.pay-success-btn:hover { background:#15803d; }

/* ── RESPONSIVE ── */
@media (max-width:600px) {
  .terms-overlay { padding:0; }
  .terms-modal { height:100dvh; max-height:100dvh; border-radius:0; }
  .terms-body { padding:16px 16px 24px; font-size:.82rem; }
}
@media (max-width:520px) {
  .co-row, .co-row-street { grid-template-columns:1fr; }
}
@media (max-width:500px) {
  .checkout-overlay { padding:0; }
  .checkout-modal { height:100dvh; max-height:100dvh; border-radius:0; }
}
@media (max-width:380px) {
  .checkout-step { padding:14px; }
}