/* ======================================================
   QRMenu — app.css (mobile-first, clean & modern)
   Works alongside Tailwind; styles key components & polish.
   ====================================================== */

/* ---------- Design Tokens ---------- */
:root{
  --bg: #ffffff;
  --surface: #ffffff;
  --text: #0f172a;         /* slate-900 */
  --muted: #64748b;        /* slate-500 */
  --brand: #10b981;        /* emerald-500/600 mix */
  --brand-2: #4f46e5;      /* indigo-600 */
  --danger: #ef4444;
  --border: #e5e7eb;       /* slate-200 */
  --shadow-1: 0 1px 2px rgba(0,0,0,.04), 0 6px 14px rgba(2,6,23,.08);
  --radius: 16px;
  --radius-lg: 22px;
  --radius-sm: 12px;
}

/* ---------- Base ---------- */
*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html,body{ height:100%; background:var(--bg); color:var(--text); }
a{ color:inherit; text-decoration:none; }
span{font-weight: bold;}
img{ display:block; max-width:100%; }

/* Better focus for accessibility */
:focus-visible{ outline: 2px solid var(--brand-2); outline-offset: 2px; border-radius: 10px; }

/* Scrollbar hide util (also inlined in minimal css) */
.no-scrollbar::-webkit-scrollbar{ display:none; }
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }

/* Clamp utilities for non-TW contexts */
.line-clamp-1{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ---------- Header & Category Strip ---------- */
header.sticky{
  backdrop-filter: saturate(180%) blur(8px);
}
header .category-strip a,
header .category-chip,
.flex.gap-2.overflow-x-auto a{
  background:#fff;
  border:1px solid var(--border);
  border-radius:999px;
  box-shadow: var(--shadow-1);
  transition: transform .15s ease, box-shadow .2s ease;
}
header .category-strip a:hover,
.flex.gap-2.overflow-x-auto a:hover{
  transform: translateY(-1px);
  box-shadow: 0 3px 14px rgba(2,6,23,.12);
}

/* ---------- Product Cards ---------- */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.card .price{
  color: var(--brand);
  font-weight: 700;
}

/* add-to-cart (icon-only) hover micro-interactions */
.add-to-cart svg{
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
  background:#fff;
}
.add-to-cart:hover svg{
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(16,185,129,.25);
  background: rgba(16,185,129,.06);
}

/* ---------- Bottom Bar ---------- */
nav.fixed.bottom-0{
  backdrop-filter: saturate(180%) blur(10px);
  padding-bottom: env(safe-area-inset-bottom);
}
/* Middle cart FAB */
#cartBtn{
  width: 60px; height: 60px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(2,6,23,.18), inset 0 -1px 0 rgba(2,6,23,.04);
  border: 1px solid var(--border);
  transition: transform .12s ease;
}
#cartBtn:active{ transform: translateY(1px) scale(.98); }
#cartCount{
  font-weight:700;
  box-shadow: 0 2px 8px rgba(16,185,129,.6);
}

/* Bump animation when item added (toggle .cart-bump on #cartBtn) */
@keyframes bump {
  0%{ transform: scale(1); }
  30%{ transform: scale(1.12); }
  60%{ transform: scale(0.96); }
  100%{ transform: scale(1); }
}
#cartBtn.cart-bump{ animation: bump .32s ease; }

/* ---------- Cart Drawer ---------- */
#cartDrawer{ will-change: transform; }
#cartDrawer .drawer-backdrop{
  position: absolute; inset:0; background: rgba(0,0,0,.4);
}
#cartDrawer .drawer-panel{
  position:absolute; left:0; right:0; bottom:0;
  background:#fff; border-top-left-radius:24px; border-top-right-radius:24px;
  box-shadow: 0 -6px 24px rgba(2,6,23,.12);
  animation: slideUp .22s ease;
}
@keyframes slideUp{
  from{ transform: translateY(14px); opacity: .7; }
  to{ transform: translateY(0); opacity: 1; }
}

/* Cart item rows */
#cartItems .row{
  display:flex; align-items:center; gap:.5rem; padding:.35rem 0; border-bottom:1px dashed var(--border);
}
#cartItems .row:last-child{ border-bottom:0; }

/* Outside (delivery) address form */
#outsideForm textarea{
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  resize: vertical;
  min-height: 88px;
}

/* ---------- Buttons ---------- */
.btn{
  appearance:none; border:0; cursor:pointer;
  padding:.65rem 1rem; border-radius:14px; font-weight:600; font-size:.95rem;
}
.btn--primary{ background: var(--brand); color:#fff; }
.btn--primary:hover{ filter: brightness(0.98); }
.btn--accent{ background: var(--brand-2); color:#fff; }
.btn--ghost{ background:#fff; border:1px solid var(--border); }

/* ---------- Toast (optional) ---------- */
#toast{
  position: fixed; left: 50%; bottom: calc(72px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: #111827; color: #fff;
  padding:.6rem .8rem; border-radius: 12px; font-size:.9rem;
  box-shadow: var(--shadow-1); z-index: 60; display:none;
}

/* ---------- Skeletons (optional) ---------- */
.skeleton{ position:relative; overflow:hidden; background:#f3f4f6; border-radius:12px; }
.skeleton::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.8) 40%, rgba(255,255,255,0) 80%);
  transform: translateX(-100%);
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer{ 100%{ transform: translateX(100%); } }

/* ---------- Small polish ---------- */
.shadow-1{ box-shadow: var(--shadow-1); }
.border-soft{ border:1px solid var(--border); border-radius: var(--radius); }
.badge{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.28rem .6rem; border:1px solid var(--border); border-radius:999px; font-size:.75rem; color:var(--muted);
}

/* ---------- Print tweaks for slips ---------- */
@media print{
  nav.fixed.bottom-0, header.sticky, .noprint{ display:none !important; }
}

/* ---------- Helper IDs from current HTML ---------- */
/* Ensure clickable targets feel responsive */
button, .add-to-cart{ touch-action: manipulation; }

/* Make product images rounded and consistent when missing Tailwind classes */
.product-img{
  width: 80px; height: 80px; border-radius: 14px; object-fit: cover;
}

/* Ensure content spacing in max-w-md container */
.max-w-md > main{ padding-bottom: 2rem; }

.cat-chip.is-active{
  border-color: var(--brand);
  background: rgba(16,185,129,.08);
  color: #065f46; /* emerald-900 */
}

/* --- SweetAlert varyasyon chip'leri --- */
.swal-variant-grid{ display:flex; flex-wrap:wrap; gap:8px; }
.var-chip{
  appearance:none; border:1px solid var(--border); background:#fff; color:var(--text);
  padding:8px 12px; border-radius:9999px; font-size:13px; line-height:1;
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.var-chip:hover{ transform: translateY(-1px); box-shadow: var(--shadow-1); }
.var-chip.is-selected{
  border-color: var(--brand);
  background: rgba(16,185,129,.08);
  color: #065f46; /* emerald-900 */
  box-shadow: 0 2px 8px rgba(16,185,129,.25);
}

/* --- Marquee (kayan yazı) --- */
:root { --marquee-speed: 14s; } /* hızı buradan değiştir */
.marquee { 
  position: relative; overflow: hidden;
  /* kenarlarda yumuşak maske */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track{
  display: inline-flex; align-items: center; gap: 1.5rem;
  white-space: nowrap; will-change: transform;
  animation: marquee var(--marquee-speed) linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state: paused; } /* üzerine gelince durur */
@keyframes marquee{
  0%   { transform: translateX(20%); }
  100% { transform: translateX(-100%); } /* içerik iki kere yazıldığı için -50%’de loop */
}

/* =======================
   Dark Mode Overrides
   ======================= */
html[data-theme="dark"]{
  --bg: #0b1220;          /* koyu arka plan */
  --surface: #0f172a;     /* slate-900 */
  --text: #e5e7eb;        /* slate-200 */
  --muted: #94a3b8;       /* slate-400 */
  --brand: #34d399;       /* emerald-400/500 */
  --brand-2: #818cf8;     /* indigo-400/500 */
  --danger: #f87171;
  --border: #1f2937;      /* slate-800 */
  --shadow-1: 0 1px 2px rgba(0,0,0,.35), 0 8px 20px rgba(0,0,0,.45);
}

html[data-theme="dark"] body,
html[data-theme="dark"] header.sticky,
html[data-theme="dark"] .card,
html[data-theme="dark"] .border-soft,
html[data-theme="dark"] .add-to-cart svg,
html[data-theme="dark"] #cartBtn{
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

html[data-theme="dark"] .flex.gap-2.overflow-x-auto a,
html[data-theme="dark"] header .category-strip a,
html[data-theme="dark"] .badge,
html[data-theme="dark"] .btn--ghost{
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

html[data-theme="dark"] #cartBtn{
  box-shadow: 0 10px 24px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,255,255,.04);
}
html[data-theme="dark"] #cartDrawer .drawer-panel{
  background: var(--surface);
  box-shadow: 0 -6px 24px rgba(0,0,0,.5);
}
html[data-theme="dark"] .skeleton{ background:#0b1220; }