/* =========================================================
   RESTO — QR Table Ordering styles
   Loaded together with ../assets/css/base.css
   ========================================================= */

body.qr-body{ padding-bottom: 92px; }

.qr-header{
  position: sticky; top:0; z-index: 400;
  background: rgba(246,237,224,.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-line);
  padding: 14px 0;
}
.qr-header-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.qr-brand{ display:flex; align-items:center; gap:10px; }
.qr-brand .mark{
  width:38px; height:38px; border-radius:50%; background: var(--color-primary); color:#FFF6E8;
  display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:800;
  border: 2px solid var(--color-gold); flex:none; object-fit:cover;
}
.table-badge{
  font-family: var(--font-mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.05em;
  background: var(--color-ink); color: var(--color-bg);
  padding: 7px 13px; border-radius: var(--radius-pill);
}

.qr-intro{ padding: 18px 0 6px; }
.qr-intro h1{ font-size:1.5rem; }
.qr-intro p{ font-size:.9rem; color: var(--color-ink-soft); }

.qty-stepper{
  display:flex; align-items:center; gap:10px;
  margin-top:10px;
}
.qty-stepper button{
  width:32px; height:32px; border-radius:50%; border:1px solid var(--color-line);
  background: var(--color-card); font-size:1.1rem; line-height:1; font-weight:700; color: var(--color-ink);
  display:flex; align-items:center; justify-content:center;
}
.qty-stepper button:disabled{ opacity:.35; }
.qty-stepper .qty-val{ font-family: var(--font-mono); font-weight:700; min-width:18px; text-align:center; }
.item-card.in-cart{ border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(181,81,43,.15); }

/* Sticky cart bar */
.cart-bar{
  position: fixed; left:0; right:0; bottom:0; z-index: 700;
  background: var(--color-ink); color:#FFF6E8;
  padding: 14px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  box-shadow: 0 -8px 24px rgba(0,0,0,.18);
  transform: translateY(110%);
  transition: transform .25s ease;
}
.cart-bar.visible{ transform: translateY(0); }
.cart-bar .count{
  width:26px;height:26px;border-radius:50%;background: var(--color-gold); color: var(--color-ink);
  font-family: var(--font-mono); font-weight:700; font-size:.78rem;
  display:flex;align-items:center;justify-content:center;
}
.cart-bar .info{ display:flex; align-items:center; gap:10px; font-weight:700; }
.cart-bar .sub{ font-family: var(--font-mono); font-size:.85rem; opacity:.85; }

/* Cart drawer (bottom sheet) */
.cart-overlay{
  position: fixed; inset:0; background: rgba(42,31,23,.55); z-index: 800;
  opacity:0; visibility:hidden; transition: opacity .2s ease;
}
.cart-overlay.open{ opacity:1; visibility:visible; }
.cart-drawer{
  position: fixed; left:0; right:0; bottom:0; z-index: 810;
  background: var(--color-bg); border-radius: 22px 22px 0 0;
  max-height: 82vh; overflow-y:auto;
  padding: 22px 20px 24px;
  transform: translateY(100%); transition: transform .25s ease;
}
.cart-drawer.open{ transform: translateY(0); }
.cart-drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.cart-drawer-head h3{ margin:0; font-size:1.2rem; }
.cart-drawer-head button{ background:none; border:none; font-size:1.4rem; color: var(--color-ink-soft); }
.cart-line{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--color-line); }
.cart-line .name{ flex:1; font-weight:700; font-size:.92rem; }
.cart-line .line-price{ font-family: var(--font-mono); font-size:.86rem; color: var(--color-primary-d); white-space:nowrap; }
.cart-empty{ text-align:center; padding:30px 10px; color: var(--color-ink-soft); }
.cart-total-row{ display:flex; justify-content:space-between; align-items:center; padding-top:16px; margin-top:6px; font-weight:800; font-size:1.05rem; }
.cart-total-row .v{ font-family: var(--font-mono); color: var(--color-primary-d); }
.cart-note{ font-size:.78rem; color: var(--color-ink-soft); margin: 10px 0 18px; }