/* =========================================================
   1. VARIABLES — brand colors, fonts, shared values
   Edit these to change the look of the whole site at once.
========================================================= */
:root{
  --black:#000000;
  --black-soft:#0d0d0d;
  --red:#ff401f;
  --red-deep:#c22e14;
  --yellow:#f7c62b;
  --yellow-deep:#e0a800;
  --cream:#f4d0a8;
  --white:#ffffff;
  --line: rgba(244,208,168,0.16);
  --shadow: 0 18px 40px rgba(0,0,0,0.5);
  --radius: 14px;
  --maxw: 1180px;

  /* Type system: big headings / buttons+important text / body text */
  --font-heading: 'Bebas Neue', 'Noto Sans Ethiopic', sans-serif;
  --font-button: 'Montserrat', 'Noto Sans Ethiopic', sans-serif;
  --font-body: 'Inter', 'Noto Sans Ethiopic', sans-serif;
  --font-receipt: 'Space Mono', monospace; /* used only inside the order ticket */
}

/* =========================================================
   2. RESET & BASE TYPOGRAPHY
========================================================= */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--black);
  color:var(--cream);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:var(--font-heading);
  letter-spacing:0.01em;
  text-transform:uppercase;
  margin:0;
}
.mono{ font-family:var(--font-button); }
a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.section-pad{ padding:88px 0; position:relative; }

/* Decorative dot texture (echoes the sesame seeds on the logo) */
.dotfield{
  background-image: radial-gradient(var(--yellow) 1.6px, transparent 1.6px);
  background-size: 22px 22px;
  opacity:0.10;
  position:absolute; inset:0; pointer-events:none;
}

/* Section labels ("● FULL MENU" style eyebrow text) */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-button); font-size:12.5px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--yellow); margin-bottom:14px;
  text-shadow:0 1px 8px rgba(0,0,0,0.65);
}
.eyebrow::before{content:"●"; color:var(--red); font-size:10px;}

/* Language visibility toggle (controlled by html[data-lang]) */
html[data-lang="en"] .am-only{ display:none !important; }
html[data-lang="am"] .en-only{ display:none !important; }

/* =========================================================
   3. BUTTONS
========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-button); font-weight:700; text-transform:uppercase;
  letter-spacing:0.04em; font-size:14px; padding:14px 26px; border-radius:999px;
  border:2px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
  text-decoration:none;
}
.btn:active{ transform:scale(0.97); }
.btn-primary{ background:var(--yellow); color:var(--black); }
.btn-primary:hover{ box-shadow:0 8px 0 var(--yellow-deep); transform:translateY(-4px); }
.btn-outline{ background:transparent; border-color:var(--cream); color:var(--cream); }
.btn-outline:hover{ background:var(--cream); color:var(--black); }
.btn-red{ background:var(--red); color:var(--white); }
.btn-red:hover{ box-shadow:0 8px 0 var(--red-deep); transform:translateY(-4px); }
.btn[disabled]{ opacity:0.4; cursor:not-allowed; }
.btn[disabled]:hover{ box-shadow:none; transform:none; }
.btn-small{ padding:9px 16px; font-size:11.5px; }

/* =========================================================
   4. HEADER / NAVIGATION
========================================================= */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(19,17,16,0.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 24px; max-width:var(--maxw); margin:0 auto; gap:16px;
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-badge{
  width:42px; height:42px; border-radius:50%; background:var(--yellow);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  border:2px solid var(--black); position:relative; overflow:hidden;
}
.brand-badge span{ font-family:var(--font-heading); font-size:11px; color:var(--red); transform:rotate(-8deg); }
.brand-name{ font-family:var(--font-heading); font-size:17px; line-height:1.05; color:var(--cream); }
.brand-name b{ color:var(--red); }
.brand-name em{ font-style:normal; color:var(--yellow); }
nav.links{ display:flex; gap:26px; align-items:center; }
nav.links a{
  text-decoration:none; color:var(--cream); font-size:14px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.03em; opacity:0.85; transition:opacity .15s, color .15s;
}
nav.links a:hover{ opacity:1; color:var(--yellow); }
.header-actions{ display:flex; align-items:center; gap:10px; }
.lang-toggle{
  display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden;
  font-family:var(--font-button); font-size:12px; font-weight:700;
}
.lang-toggle button{
  background:transparent; color:var(--cream); border:none; padding:7px 12px; cursor:pointer;
}
.lang-toggle button.active{ background:var(--yellow); color:var(--black); }
#tiktok-open{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%; background:var(--black-soft);
  border:1px solid var(--line); color:var(--cream); text-decoration:none;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
#tiktok-open:hover{ background:var(--yellow); color:var(--black); transform:translateY(-2px); }
#cart-open{
  position:relative; background:var(--red); color:var(--white); border:none;
  width:42px; height:42px; border-radius:50%; cursor:pointer; font-size:17px;
}
#cart-count{
  position:absolute; top:-4px; right:-4px; background:var(--yellow); color:var(--black);
  font-family:var(--font-button); font-size:10px; font-weight:700; border-radius:999px;
  min-width:18px; height:18px; display:flex; align-items:center; justify-content:center; padding:0 3px;
}
.burger-menu-btn{ display:none; background:none; border:none; color:var(--cream); font-size:26px; cursor:pointer; }

.hero .eyebrow{ text-shadow:0 1px 8px rgba(0,0,0,0.6); }

/* =========================================================
   5. HERO
========================================================= */
.hero{
  padding:70px 0 60px; overflow:hidden; position:relative;
  background-color: var(--black); /* shows briefly before the video loads */
}
.hero-video-wrap{
  position:absolute; inset:0; z-index:0; overflow:hidden;
}
.hero-video{
  width:100%; height:100%; object-fit:cover; display:block;
  /* left unedited on purpose — no filters/overlay on the clip itself */
}
.hero .dotfield{ z-index:1; }
.hero .wrap.hero-grid{ position:relative; z-index:2; max-width:none; margin:0; padding-left:6vw; padding-right:24px; }

.hero-grid{
  display:grid; grid-template-columns:1fr; gap:0; align-items:center;
  position:relative; z-index:2; max-width:720px; text-align:left;
}
.hero h1{ font-size:clamp(50px,7.5vw,92px); font-weight:700; -webkit-text-stroke:1.3px currentColor; letter-spacing:0.005em; line-height:0.94; color:var(--cream); text-align:left; text-shadow:0 2px 22px rgba(0,0,0,0.85), 0 1px 4px rgba(0,0,0,0.9); }
.hero h1 .hl-red{ color:var(--red); -webkit-text-stroke:1.6px var(--black); }
.hero h1 .hl-yellow{ color:var(--yellow); -webkit-text-stroke:1.3px var(--black); }
.hero-sub{ font-size:17px; color:rgba(244,208,168,0.95); max-width:460px; margin:18px 0 30px; text-shadow:0 1px 12px rgba(0,0,0,0.85); }
.hero-sub .am{ display:block; margin-top:6px; font-size:15px; opacity:0.9; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-meta{ display:flex; gap:26px; margin-top:34px; flex-wrap:wrap; }
.hero-meta div{ font-family:var(--font-button); font-size:12.5px; color:var(--cream); opacity:0.95; text-shadow:0 1px 10px rgba(0,0,0,0.85); }
.hero-meta b{ display:block; color:var(--yellow); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:4px; text-shadow:0 1px 10px rgba(0,0,0,0.85); }

/* =========================================================
   6b. MID-PAGE BLURRED BACKGROUND
   Wraps Menu + Builder + About + Location. The image is blurred
   and darkened so text placed on top stays easy to read.
   Swap pizza-bg.jpg (same filename) to change the photo.
========================================================= */
.mid-bg{
  position:relative;
  overflow:hidden;
  isolation:isolate; /* keeps the blur contained to this wrapper */
}
.mid-bg::before{
  content:"";
  position:absolute;
  inset:-24px; /* slightly oversized so the blurred edge never shows */
  background-image:url('pizza-bg.jpg');
  background-size:cover;
  background-position:center;
  filter:blur(6px);
  transform:scale(1.06);
  z-index:-2;
}
.mid-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.42); /* just enough to keep text readable, photo stays visible */
  z-index:-1;
}

/* =========================================================
   6. MENU SECTION
========================================================= */
.menu-section{ background:transparent; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 44px; }
.section-head h2{ font-size:clamp(32px,4.4vw,48px); color:var(--cream); text-shadow:0 2px 14px rgba(0,0,0,0.7); }
.section-head h2 span{ color:var(--red); }
.section-head p{ color:rgba(244,208,168,0.85); margin-top:12px; font-size:15.5px; text-shadow:0 1px 8px rgba(0,0,0,0.65); }
.tabs{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:40px;
}
.tab-btn{
  font-family:var(--font-button); font-size:12.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.04em; padding:10px 18px; border-radius:999px; border:1px solid var(--line);
  background:transparent; color:var(--cream); cursor:pointer; transition:all .15s ease;
}
.tab-btn.active, .tab-btn:hover{ background:var(--yellow); color:var(--black); border-color:var(--yellow); }
.menu-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.menu-card{
  background:var(--black); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px; display:flex; flex-direction:column; gap:6px; position:relative; overflow:hidden;
}
.menu-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--red);
}
.menu-card-top{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.menu-card-name{ font-family:var(--font-heading); font-size:16px; color:var(--cream); letter-spacing:0.01em; }
.menu-card-name .am{ display:block; font-family:'Noto Sans Ethiopic'; font-size:13px; font-weight:600; color:var(--yellow); text-transform:none; margin-top:2px; }
.menu-card-price{ font-family:var(--font-button); font-weight:700; color:var(--yellow); font-size:15px; white-space:nowrap; }
.menu-card-desc{ font-size:13px; color:rgba(244,208,168,0.65); }
.size-row{ display:flex; gap:10px; font-family:var(--font-button); font-size:12px; flex-wrap:wrap; margin-top:4px;}
.size-btn{
  border:1px solid var(--line); background:var(--black-soft); color:var(--cream); border-radius:8px;
  padding:6px 10px; cursor:pointer; font-family:var(--font-button); font-size:11.5px;
}
.size-btn b{ color:rgba(244,208,168,0.55); font-weight:400; margin-right:3px; }
.size-btn.selected{ background:var(--yellow); color:var(--black); border-color:var(--yellow); }
.size-btn.selected b{ color:rgba(0,0,0,0.55); }
.menu-card-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:8px; gap:10px; }
.menu-note{
  margin-top:34px; text-align:center; font-family:var(--font-button); font-size:12.5px; color:rgba(244,208,168,0.55);
}

/* =========================================================
   7. BUILD-YOUR-OWN-BURGER
========================================================= */
.builder-section{ background:transparent; position:relative; }
.builder-grid{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:flex-start; }
.builder-group{ margin-bottom:26px; }
.builder-group h4{
  font-family:var(--font-button); font-size:12.5px; text-transform:uppercase; letter-spacing:0.14em;
  color:var(--yellow); margin-bottom:12px;
}
.chip-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.base-grid{ grid-template-columns:1fr; max-height:340px; overflow-y:auto; padding-right:4px; }
.chip{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  border:1px solid var(--line); border-radius:10px; padding:12px 14px; cursor:pointer;
  background:var(--black-soft); transition:border-color .15s, background .15s;
}
.chip:hover{ border-color:var(--yellow); }
.chip.selected{ border-color:var(--yellow); background:rgba(247,198,43,0.1); }
.chip input{ accent-color:var(--yellow); width:16px; height:16px; flex-shrink:0; }
.chip-label{ font-size:13.5px; color:var(--cream); flex:1; }
.chip-label .am{ display:block; font-size:11.5px; color:rgba(244,208,168,0.55); }
.chip-label .desc{ display:block; font-size:11px; color:rgba(244,208,168,0.45); margin-top:2px; }
.chip-price{ font-family:var(--font-button); font-size:12.5px; color:var(--yellow); white-space:nowrap; }

/* Order-ticket / receipt signature element */
.ticket{
  background:var(--cream); color:var(--black); border-radius:6px; padding:26px 24px 30px;
  font-family:'Space Mono',monospace; font-size:13.5px; position:relative;
  box-shadow:var(--shadow);
  background-image:
    repeating-linear-gradient(to bottom, transparent, transparent 27px, rgba(0,0,0,0.05) 28px);
}
.ticket::before, .ticket::after{
  content:""; position:absolute; left:0; right:0; height:12px; background:var(--black);
  -webkit-mask: radial-gradient(circle 6px, transparent 98%, black 100%) repeat-x; mask: radial-gradient(circle 6px, transparent 98%, black 100%) repeat-x;
  -webkit-mask-size:16px 16px; mask-size:16px 16px;
}
.ticket::before{ top:-6px; }
.ticket::after{ bottom:-6px; }
.ticket-head{ text-align:center; margin-bottom:12px; }
.ticket-head .star{ letter-spacing:0.3em; font-size:11px; color:var(--red); font-weight:700; }
.ticket-head .name{ font-family:var(--font-heading); font-size:22px; margin-top:4px; letter-spacing:0.03em; }
.ticket-head .meta{ font-size:10.5px; color:#555; margin-top:4px; }
.ticket hr{ border:none; border-top:1px dashed #999; margin:12px 0; }
.ticket-line{ display:flex; justify-content:space-between; gap:10px; padding:3px 0; }
.ticket-line.extra{ color:#333; }
.ticket-empty{ color:#777; font-style:italic; font-size:12.5px; padding:6px 0; }
.ticket-total{ display:flex; justify-content:space-between; font-weight:700; font-size:16px; margin-top:6px; }
.ticket-foot{ text-align:center; margin-top:16px; font-size:10.5px; color:#666; }
.builder-add-btn{ width:100%; margin-top:18px; }

/* =========================================================
   8. ABOUT SECTION
========================================================= */
.about-section{ background:transparent; }
.about-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center; }
.about-badge{
  width:100%; aspect-ratio:1/1; max-width:340px; margin:0 auto; border-radius:50%;
  background:repeating-conic-gradient(var(--red) 0 10deg, var(--yellow) 10deg 20deg);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow);
}
.about-badge-inner{
  width:76%; aspect-ratio:1/1; border-radius:50%; background:var(--black);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px;
}
.about-badge-inner .yr{ font-family:var(--font-heading); font-size:34px; color:var(--yellow); }
.about-badge-inner .txt{ font-family:var(--font-button); font-size:10.5px; letter-spacing:0.12em; color:var(--cream); text-transform:uppercase; margin-top:4px; }
.about-text h2{ font-size:clamp(28px,4vw,42px); margin-bottom:16px; color:var(--cream); }
.about-text h2 span{ color:var(--red); }
.about-text p{ color:rgba(244,208,168,0.75); font-size:15.5px; margin-bottom:14px; }
.about-text p.am{ font-size:14.5px; opacity:0.8; }
.feature-list{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px; }
.feature-list li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--cream); }
.feature-list li::before{ content:"●"; color:var(--red); margin-top:4px; font-size:8px; }

/* =========================================================
   9. LOCATION SECTION
========================================================= */
.location-section{ background:transparent; }
.location-grid{ display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:stretch; }
.info-card{
  background:var(--black-soft); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px; display:flex; flex-direction:column; gap:20px; justify-content:center;
}
.info-row{ display:flex; gap:14px; align-items:flex-start; }
.info-row .ico{
  width:38px; height:38px; border-radius:50%; background:var(--red); color:var(--white);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:16px;
}
.info-row h5{ font-family:var(--font-heading); font-size:14px; letter-spacing:0.02em; color:var(--yellow); margin-bottom:3px; text-transform:uppercase; }
.info-row p{ margin:0; font-size:14.5px; color:rgba(244,208,168,0.85); }
.info-row p.am{ font-size:13px; opacity:0.65; margin-top:2px; }
.map-frame{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); min-height:340px; }
.map-frame iframe{ width:100%; height:100%; min-height:340px; border:0; filter:grayscale(0.25) contrast(1.05); }

/* =========================================================
   10. FOOTER
========================================================= */
footer{ background:var(--black); border-top:1px solid var(--line); padding:50px 0 26px; }
.footer-grid{ display:grid; grid-template-columns:1.2fr 0.8fr 0.8fr; gap:40px; margin-bottom:36px; }
.footer-brand p{ color:rgba(244,208,168,0.65); font-size:13.5px; margin-top:12px; max-width:280px; }
footer h6{ font-family:var(--font-button); font-size:12px; text-transform:uppercase; letter-spacing:0.12em; color:var(--yellow); margin-bottom:14px; }
footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:9px; }
footer ul a{ text-decoration:none; color:rgba(244,208,168,0.75); font-size:13.5px; }
footer ul a:hover{ color:var(--yellow); }
.social-row{ display:flex; align-items:center; gap:10px; margin-top:6px; }
.social-row a{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line); display:flex;
  align-items:center; justify-content:center; text-decoration:none; font-size:14px; color:var(--cream);
  flex-shrink:0; transition:background .15s ease, color .15s ease;
}
.social-row a:hover{ background:var(--yellow); color:var(--black); }
.social-row .social-handle{
  width:auto; height:auto; border-radius:0; border:none; padding:0;
  font-family:var(--font-button); font-size:13px; color:rgba(244,208,168,0.75);
}
.social-row .social-handle:hover{ background:none; color:var(--yellow); }
.footer-bottom{ border-top:1px solid var(--line); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12px; color:rgba(244,208,168,0.5); font-family:var(--font-button); }

/* =========================================================
   11. CART DRAWER
========================================================= */
#cart-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:90; opacity:0; pointer-events:none; transition:opacity .2s ease; }
#cart-overlay.open{ opacity:1; pointer-events:auto; }
#cart-drawer{
  position:fixed; top:0; right:0; height:100%; width:min(400px,92vw); background:var(--cream); color:var(--black);
  z-index:91; transform:translateX(100%); transition:transform .25s ease; display:flex; flex-direction:column;
}
#cart-drawer.open{ transform:translateX(0); }
.cart-head{ display:flex; justify-content:space-between; align-items:center; padding:20px 22px; border-bottom:1px solid rgba(0,0,0,0.1); }
.cart-head h3{ font-size:18px; }
.cart-head button{ background:none; border:none; font-size:22px; cursor:pointer; color:var(--black); }
.cart-items{ flex:1; overflow-y:auto; padding:14px 22px; }
.cart-item{ display:flex; justify-content:space-between; gap:10px; padding:14px 0; border-bottom:1px solid rgba(0,0,0,0.08); }
.cart-item-name{ font-weight:700; font-size:14px; }
.cart-item-sub{ font-size:12px; color:#666; margin-top:3px; max-width:230px; }
.cart-item-price{ font-family:var(--font-button); font-weight:700; font-size:13.5px; white-space:nowrap; }
.cart-item-remove{ background:none; border:none; color:var(--red); font-size:11px; font-family:var(--font-button); cursor:pointer; margin-top:6px; padding:0; text-decoration:underline; }
.cart-empty{ text-align:center; color:#888; padding:60px 20px; font-size:14px; }
.cart-foot{ padding:20px 22px; border-top:1px solid rgba(0,0,0,0.1); }
.cart-total-row{ display:flex; justify-content:space-between; font-family:var(--font-button); font-weight:700; font-size:16px; margin-bottom:14px; }
.cart-foot .btn{ width:100%; margin-bottom:10px; }
.cart-hint{ font-size:11.5px; color:#777; text-align:center; margin-top:4px; }

/* =========================================================
   11b. SIGN IN BUTTON (header) + ACCOUNT MODAL
========================================================= */
#auth-open{
  display:flex; align-items:center; justify-content:center;
  height:42px; padding:0 16px; border-radius:999px; background:var(--black-soft);
  border:1px solid var(--line); color:var(--cream); cursor:pointer;
  font-family:var(--font-button); font-size:12.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.03em; transition:background .15s ease, color .15s ease;
  white-space:nowrap;
}
#auth-open:hover{ background:var(--yellow); color:var(--black); }
#auth-open.signed-in{ background:var(--yellow); color:var(--black); border-color:var(--yellow); }

#auth-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.65); z-index:95; opacity:0; pointer-events:none; transition:opacity .2s ease; }
#auth-overlay.open{ opacity:1; pointer-events:auto; }
#auth-modal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-46%); z-index:96;
  width:min(420px, 92vw); background:var(--cream); color:var(--black); border-radius:var(--radius);
  padding:30px 26px; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
  box-shadow:var(--shadow);
}
#auth-modal.open{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%); }
#auth-modal h3{ font-size:18px; margin-bottom:6px; }
.auth-sub{ font-size:13px; color:#555; margin:0 0 18px; }
#auth-close{
  position:absolute; top:14px; right:16px; background:none; border:none; font-size:22px;
  cursor:pointer; color:var(--black); line-height:1;
}
#auth-form{ display:flex; flex-direction:column; gap:14px; }
#auth-form label{ display:flex; flex-direction:column; gap:6px; font-family:var(--font-button); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color:#444; }
#auth-form input{
  font-family:var(--font-body); font-size:14px; padding:11px 12px; border-radius:8px;
  border:1px solid rgba(0,0,0,0.15); background:var(--white); color:var(--black);
}
#auth-form input:focus{ outline:2px solid var(--red); outline-offset:1px; }
#auth-logout{ color:var(--black); border-color:rgba(0,0,0,0.25); }
#auth-logout:hover{ background:var(--black); color:var(--cream); }

/* =========================================================
   12. TOAST (small confirmation popup)
========================================================= */
.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); z-index:120;
  background:var(--black); color:var(--yellow); font-family:var(--font-button); font-size:13px;
  padding:12px 20px; border-radius:999px; border:1px solid var(--yellow); opacity:0; transition:all .25s ease; pointer-events:none;
  max-width:88vw; text-align:center;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* =========================================================
   13. RESPONSIVE — tablets (≤ 880px)
========================================================= */
@media (max-width: 880px){
  nav.links, .lang-toggle{ display:none; }
  .burger-menu-btn{ display:block; }
  .hero-grid, .builder-grid, .about-grid, .location-grid, .footer-grid{ grid-template-columns:1fr; }
  .menu-grid{ grid-template-columns:1fr; }
  .chip-grid{ grid-template-columns:1fr; }
  .section-pad{ padding:64px 0; }
  nav.links.mobile-open{
    display:flex; position:absolute; top:100%; left:0; right:0; background:var(--black-soft);
    flex-direction:column; padding:18px 24px; border-top:1px solid var(--line); gap:16px; z-index:60;
  }
}

/* =========================================================
   14. RESPONSIVE — small phones (≤ 480px)
========================================================= */
@media (max-width: 480px){
  .wrap{ padding:0 16px; }
  .section-pad{ padding:48px 0; }
  .hero{ padding:48px 0 40px; }
  .hero-ctas{ flex-direction:column; align-items:stretch; }
  .hero-ctas .btn{ width:100%; }
  .hero-meta{ gap:16px; }
  .nav-inner{ padding:10px 16px; }
  .brand-name{ font-size:14px; }
  .brand-badge{ width:36px; height:36px; }
  .ticket{ padding:20px 16px 24px; font-size:12.5px; }
  #cart-drawer{ width:100vw; }
  .menu-card{ padding:16px; }
  .about-badge{ max-width:220px; }
  #auth-open{ padding:0 10px; font-size:11px; height:36px; }
  #tiktok-open, #cart-open{ width:36px; height:36px; }
  .header-actions{ gap:6px; }
}