/* ===================== BACK LINK ===================== */
.back-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.85rem;
  color: var(--text-muted);
  transition: color .2s var(--ease);
}
.back-link svg{ width:16px; height:16px; flex-shrink:0; transition: transform .2s var(--ease); }
.back-link:hover{ color: var(--gold-light); }
.back-link:hover svg{ transform: translateX(-3px); }

/* In the tight account-page header, keep only the arrow on narrow screens —
   the auth pages' standalone back-link has room to keep its label. */
@media (max-width: 420px){
  .header-inner .back-link span{ display:none; }
}

/* ===================== HEADER CART / ACCOUNT ===================== */
.icon-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px; height:38px;
  background:none;
  border:1px solid var(--border);
  border-radius:50%;
  color: var(--gold-light);
  cursor:pointer;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.icon-btn:hover{ background: rgba(201,162,39,0.12); transform: translateY(-1px); }
.icon-btn svg{ width:18px; height:18px; }
.cart-badge{
  position:absolute;
  top:-6px; right:-6px;
  min-width:18px; height:18px;
  padding: 0 4px;
  border-radius:999px;
  background: var(--gold);
  color:#1a1408;
  font-size:.68rem;
  font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.cart-badge[hidden]{ display:none; }

body.no-scroll{ overflow:hidden; }

/* ===================== CART DRAWER ===================== */
.cart-drawer{
  position:fixed; inset:0; z-index:200;
  visibility:hidden;
  pointer-events:none;
}
.cart-drawer.is-open{ visibility:visible; pointer-events:auto; }
.cart-drawer-overlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
  opacity:0;
  transition: opacity .3s var(--ease);
}
.cart-drawer.is-open .cart-drawer-overlay{ opacity:1; }
.cart-panel{
  position:absolute; top:0; right:0;
  width: min(420px, 92vw);
  height:100%;
  background: var(--bg-alt);
  border-left:1px solid var(--border);
  display:flex; flex-direction:column;
  transform: translateX(100%);
  transition: transform .35s var(--ease);
  box-shadow: -20px 0 60px rgba(0,0,0,.5);
}
.cart-drawer.is-open .cart-panel{ transform: translateX(0); }
.cart-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 24px;
  border-bottom:1px solid var(--border);
}
.cart-header h3{ margin:0; color: var(--gold-light); font-size:1.1rem; }
.cart-header button{
  background:none; border:none; color: var(--text-muted);
  font-size:1.6rem; line-height:1; cursor:pointer;
}
.cart-items{ flex:1; overflow-y:auto; padding: 10px 24px; }
.cart-item{
  display:flex; align-items:center; justify-content:space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.cart-item-info{ display:flex; flex-direction:column; gap:4px; }
.cart-item-name{ font-size:.9rem; color: var(--cream); }
.cart-item-price{ font-size:.8rem; color: var(--gold-light); }
.cart-item-qty{ display:flex; align-items:center; gap:10px; }
.qty-btn{
  width:26px; height:26px;
  border-radius:50%;
  border:1px solid var(--border);
  background: var(--bg-card);
  color: var(--gold-light);
  cursor:pointer;
  font-size:1rem;
  line-height:1;
}
.qty-btn:hover{ background: var(--gold); color:#1a1408; }
.cart-empty{ text-align:center; padding: 40px 0; font-size:.9rem; }
.cart-footer{ padding: 20px 24px 28px; border-top:1px solid var(--border); }
.cart-total-row{
  display:flex; justify-content:space-between; align-items:center;
  font-family: var(--font-display);
  color: var(--cream);
  font-size:1.1rem;
  margin-bottom: 16px;
}
.cart-total-row span:last-child{ color: var(--gold-light); }
.cart-auth-notice{ font-size:.85rem; text-align:center; margin-bottom: 14px; }
.cart-auth-actions{ display:flex; gap:10px; justify-content:center; margin-top:10px; }
.checkout-form{ display:flex; flex-direction:column; gap:12px; }
.checkout-form label{ display:flex; flex-direction:column; gap:6px; font-size:.8rem; color: var(--text-muted); }
/* an explicit `display` on these overrides the UA [hidden]{display:none} rule,
   so it must be restored explicitly wherever JS toggles the hidden attribute */
.checkout-form[hidden],
.checkout-form label[hidden]{ display:none; }
.checkout-form select,
.checkout-form input,
.checkout-form textarea{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .7em .8em;
  color: var(--cream);
  font-family: var(--font-body);
  font-size:.9rem;
}
.checkout-form button:disabled{ opacity:.5; cursor:not-allowed; }

.payment-choice{ display:flex; flex-direction:column; gap:8px; }
.payment-choice-label{ font-size:.8rem; color: var(--text-muted); }
.payment-option{
  display:flex; align-items:center; gap:10px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .7em .9em;
  cursor:pointer;
  font-size:.88rem;
  color: var(--cream);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.payment-option:has(input:checked){ border-color: var(--gold); background: rgba(201,162,39,0.08); }
.payment-option input{ accent-color: var(--gold); width:16px; height:16px; flex-shrink:0; }

/* ===================== MENU: dynamic dish cards ===================== */
.dish-card .btn-mini[disabled]{ opacity:.5; cursor:not-allowed; }
.menu-empty-state{ text-align:center; padding: 40px 0; color: var(--text-muted); }

/* ===================== AUTH PAGES ===================== */
.auth-section{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding: 120px 24px 60px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(111,31,29,0.3), transparent 55%),
    linear-gradient(160deg, #0d0b0a 0%, #17110d 60%, #0d0b0a 100%);
}
.auth-wrap{
  width:100%; max-width: 420px;
  display:flex; flex-direction:column; gap:16px;
}
.auth-card{
  width:100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 36px 32px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.auth-card .brand{ justify-content:center; margin-bottom: 24px; }
.auth-card h1{ text-align:center; font-size:1.5rem; color: var(--cream); margin-bottom:.3em; }
.auth-card .auth-sub{ text-align:center; font-size:.85rem; margin-bottom: 24px; }
.auth-form{ display:flex; flex-direction:column; gap:14px; }
.auth-form label{ display:flex; flex-direction:column; gap:6px; font-size:.8rem; color: var(--text-muted); }
.auth-form input{
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .8em .9em;
  color: var(--cream);
  font-family: var(--font-body);
  font-size:.95rem;
}
.auth-form input:focus{ outline:none; border-color: var(--gold); }
.auth-error{
  background: rgba(111,31,29,.35);
  border: 1px solid var(--red);
  color: var(--cream);
  border-radius: var(--radius);
  padding: .7em 1em;
  font-size:.85rem;
  display:none;
}
.auth-error.is-visible{ display:block; }
.auth-footer{ text-align:center; margin-top: 20px; font-size:.85rem; }
.auth-footer a{ color: var(--gold-light); }

/* ===================== ACCOUNT PAGE ===================== */
.account-section{ padding: 140px 0 100px; min-height:100vh; }
.account-header{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; margin-bottom: 40px; }
.account-header h1{ font-size:1.8rem; color: var(--cream); margin:0; }
.account-user{ font-size:.9rem; }
.account-user strong{ color: var(--gold-light); }
.order-card{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 22px 24px;
  margin-bottom: 18px;
}
.order-card-head{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom: 12px; }
.payment-badge{
  display:inline-block;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  padding:.3em .7em;
  border-radius:999px;
  border:1px solid var(--border);
  color: var(--text-muted);
  white-space:nowrap;
}
.payment-badge.payment-pending{ color:#e3c565; border-color:#e3c565; }
.payment-badge.payment-paid{ color:#7fd18a; border-color:#7fd18a; }
.payment-badge.payment-failed{ color: var(--red); border-color: var(--red); }
.order-id{ color: var(--gold-light); font-family: var(--font-display); }
/* ---- Order status tracker (Domino's-tracker-style stepper) ---- */
.order-tracker{ margin: 4px 0 20px; }
.tracker-row{ display:flex; align-items:center; }
.tracker-dot{
  width:12px; height:12px; flex-shrink:0;
  border-radius:50%;
  background: var(--bg-alt);
  border: 2px solid var(--border);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.tracker-dot.is-done, .tracker-dot.is-active{ background: var(--gold); border-color: var(--gold); }
.tracker-dot.is-active{ box-shadow: 0 0 0 4px rgba(201,162,39,.22); }
.tracker-line{ flex:1; height:2px; background: var(--border); margin: 0 2px; }
.tracker-line.is-done{ background: var(--gold); }
.tracker-labels{ display:flex; justify-content:space-between; margin-top:7px; }
.tracker-labels span{ font-size:.66rem; color: var(--text-muted); text-transform:uppercase; letter-spacing:.03em; }
.tracker-labels span.is-done, .tracker-labels span.is-active{ color: var(--gold-light); }
.order-tracker-cancelled{
  color: var(--red);
  font-size:.85rem;
  font-weight:600;
  margin: 4px 0 20px;
}

.order-items-list{ font-size:.88rem; margin-bottom: 10px; }
.order-items-list div{ display:flex; justify-content:space-between; padding: 3px 0; }
.order-card-footer{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:6px; }
.order-total{ font-family: var(--font-display); color: var(--gold-light); font-size:1.05rem; }
.account-empty{ text-align:center; padding: 60px 0; color: var(--text-muted); }