/* =============================================
   SHAWARMA CLASSIC — COMPONENTS
   #FFFFFF · #E94E1B · #EF7D00 ONLY
   ============================================= */

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:12px 26px;
  border-radius:var(--r-sm); font-size:14px; font-weight:700;
  letter-spacing:.3px; cursor:pointer; border:2px solid transparent;
  transition:all var(--dur-fast); text-decoration:none; white-space:nowrap;
}
.btn img { width:16px; height:16px; object-fit:contain; flex-shrink:0; }

/* Primary — brand red fill */
.btn-primary { background:var(--brand); color:#fff; border-color:var(--brand); }
.btn-primary:hover { background:var(--brand-dark); border-color:var(--brand-dark); transform:translateY(-2px); box-shadow:var(--shadow-brand); }

/* Accent — orange fill */
.btn-accent { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-accent:hover { background:var(--accent-dark); border-color:var(--accent-dark); transform:translateY(-2px); box-shadow:var(--shadow-accent); }

/* Ghost — red border on white */
.btn-ghost { background:transparent; color:var(--brand); border-color:var(--brand); }
.btn-ghost:hover { background:var(--brand); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-brand); }

/* Ghost on colored bg (brand or accent surfaces) */
.btn-ghost-light { background:transparent; color:#fff; border-color:rgba(255,255,255,0.55); }
.btn-ghost-light:hover { background:rgba(255,255,255,0.20); border-color:#fff; transform:translateY(-2px); }

/* White fill — on brand/accent surfaces */
.btn-white { background:#fff; color:var(--brand); border-color:#fff; }
.btn-white:hover { background:var(--accent); color:#fff; border-color:var(--accent); transform:translateY(-2px); }

/* Ghost brand (outlined, for use on bg-section) */
.btn-ghost-brand { background:transparent; color:var(--brand); border-color:rgba(233,78,27,0.40); }
.btn-ghost-brand:hover { background:var(--brand-soft); border-color:var(--brand); transform:translateY(-2px); }

.btn-lg { padding:15px 34px; font-size:15px; }
.btn-sm { padding:8px 16px; font-size:12px; }

/* ── SECTION HEADINGS ── */
.section-eyebrow {
  display:flex; align-items:center; gap:10px;
  font-size:11px; font-weight:700; letter-spacing:3px;
  text-transform:uppercase; color:var(--brand); margin-bottom:12px;
}
.section-eyebrow::before {
  content:''; display:block; width:24px; height:2px;
  background:var(--brand); border-radius:2px; flex-shrink:0;
}
.section-title {
  font-size:clamp(28px,4.5vw,52px);
  font-weight:900; line-height:1.05; color:var(--ink);
}
.section-divider {
  width:44px; height:3px; background:var(--brand);
  border-radius:3px; margin-block:14px;
}

/* ── FORM ELEMENTS ── */
.form-group  { margin-bottom:16px; }
.form-label  { display:block; font-size:12px; font-weight:700; color:var(--ink); margin-bottom:6px; letter-spacing:.3px; }
.form-input  {
  width:100%; padding:10px 14px;
  background:var(--bg-input);
  border:2px solid rgba(26,8,0,0.12);
  border-radius:var(--r-sm);
  font-size:14px; color:var(--ink);
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast);
  appearance:none;
}
.form-input:focus       { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-mid); }
.form-input::placeholder { color:var(--ink-40); }
textarea.form-input     { resize:vertical; min-height:100px; }
select.form-input       { cursor:pointer; background-image:url('../images/icons/chevron-down.svg'); background-repeat:no-repeat; background-position:inset-inline-end 12px center; background-size:14px; padding-inline-end:36px; }

/* ── BADGE ── */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:var(--r-full);
  font-size:11px; font-weight:700;
}
.badge-open     { background:rgba(239,125,0,0.10); color:var(--accent-dark); border:1px solid rgba(239,125,0,0.25); }
.badge-delivery { background:var(--brand-soft); color:var(--brand); border:1px solid rgba(233,78,27,0.20); }
.badge-new      { background:#fff; color:var(--brand); border:2px solid var(--brand); }
.badge-hot      { background:var(--brand); color:#fff; }

/* ── IMAGE SLOT ── */
.img-slot { position:relative; overflow:hidden; background:var(--bg-warm); }
.img-slot img { width:100%; height:100%; object-fit:cover; display:block; }
.img-slot-fallback {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
  background:var(--bg-section);
}
.img-slot-emoji  { font-size:44px; }
.img-slot-label  { font-size:11px; font-weight:600; color:var(--ink-40); letter-spacing:.5px; text-align:center; padding-inline:12px; }

/* Pattern overlay for image placeholders */
.img-pattern {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(233,78,27,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233,78,27,0.05) 1px, transparent 1px);
  background-size:28px 28px;
}

/* ── TOAST ── */
.toast {
  position:fixed; bottom:28px; left:50%;
  transform:translateX(-50%) translateY(70px);
  background:var(--brand); color:#fff;
  padding:12px 24px; border-radius:var(--r-full);
  font-size:13px; font-weight:700;
  z-index:9999; pointer-events:none;
  transition:transform .4s var(--ease); white-space:nowrap;
  box-shadow:var(--shadow-brand);
}
.toast.show { transform:translateX(-50%) translateY(0); }

/* ── CUSTOM CURSOR ── */
.cursor {
  position:fixed; width:9px; height:9px;
  background:var(--brand); border-radius:50%;
  pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .2s, height .2s;
}
.cursor-ring {
  position:fixed; width:32px; height:32px;
  border:1.5px solid rgba(233,78,27,0.45); border-radius:50%;
  pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%);
  transition:all .15s ease;
}
.cursor.expanded       { width:16px; height:16px; }
.cursor-ring.expanded  { width:52px; height:52px; border-color:rgba(233,78,27,0.28); }
@media (hover:none) { .cursor,.cursor-ring { display:none; } }

/* ── BACK TO TOP ── */
.back-to-top {
  position:fixed; bottom:28px; inset-inline-end:24px; z-index:400;
  width:42px; height:42px; background:var(--brand);
  border:2px solid rgba(255,255,255,0.35); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-brand);
  opacity:0; transform:translateY(12px);
  transition:all var(--dur-med) var(--ease); pointer-events:none;
}
.back-to-top img { width:18px; height:18px; filter:brightness(0) invert(1); }
.back-to-top.visible { opacity:1; pointer-events:all; transform:translateY(0); }
.back-to-top:hover   { background:var(--brand-dark); transform:translateY(-3px); }

/* ── GUEST COUNTER ── */
.guest-counter {
  display:flex; align-items:center;
  background:var(--bg-input); border:2px solid rgba(26,8,0,0.12);
  border-radius:var(--r-sm); overflow:hidden;
}
.counter-btn {
  width:42px; height:44px; display:flex;
  align-items:center; justify-content:center;
  font-size:20px; color:var(--ink-60); font-weight:700;
  transition:all var(--dur-fast);
}
.counter-btn:hover { background:var(--brand-soft); color:var(--brand); }
.counter-value {
  flex:1; text-align:center; font-size:15px; font-weight:800;
  color:var(--ink); background:none; border:none; outline:none;
}

/* ── MODAL ── */
.modal-backdrop {
  position:fixed; inset:0; background:rgba(26,8,0,0.50);
  backdrop-filter:blur(6px); z-index:800;
  opacity:0; pointer-events:none; transition:opacity var(--dur-med);
}
.modal-backdrop.open { opacity:1; pointer-events:all; }
.modal {
  position:fixed; inset:0; z-index:810;
  display:flex; align-items:center; justify-content:center;
  padding:var(--gutter); pointer-events:none;
}
.modal-card {
  background:var(--bg); border:var(--border); border-radius:var(--r-xl);
  max-width:480px; width:100%; overflow:hidden;
  box-shadow:var(--shadow-lg);
  transform:scale(.93) translateY(16px); opacity:0;
  transition:all var(--dur-med) var(--ease);
}
.modal-backdrop.open + .modal { pointer-events:all; }
.modal-backdrop.open + .modal .modal-card { transform:scale(1) translateY(0); opacity:1; }
.modal-img-slot { width:100%; height:200px; background:var(--bg-warm); overflow:hidden; }
.modal-img-slot img { width:100%; height:100%; object-fit:cover; display:block; }
.modal-body   { padding:24px; }
.modal-title  { font-size:22px; font-weight:900; color:var(--ink); margin-bottom:6px; }
.modal-desc   { font-size:13px; color:var(--ink-60); line-height:1.65; margin-bottom:16px; }
.modal-tags   { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:20px; }
.modal-tag    { padding:4px 10px; border-radius:var(--r-full); background:var(--brand-soft); font-size:11px; font-weight:600; color:var(--brand); border:1px solid rgba(233,78,27,0.15); }
.modal-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 24px 24px; }
.modal-price  { font-size:26px; font-weight:900; color:var(--accent); }
.modal-close  {
  position:absolute; top:12px; inset-inline-end:12px;
  width:34px; height:34px; border-radius:50%;
  background:var(--brand-soft); display:flex; align-items:center;
  justify-content:center; color:var(--brand); font-size:18px; font-weight:700;
  transition:background var(--dur-fast), color var(--dur-fast);
}
.modal-close:hover { background:var(--brand); color:#fff; }