/* ================================================================
   BudgetMein — Shared Design System
   ----------------------------------------------------------------
   Single source of truth for design tokens, resets, and reusable
   component styles used by BOTH index.html (login/signup) and
   menu.html (ordering app). Linked before each page's own <style>
   block, so:
     - page-specific layout (nav, cart sidebar, hero carousel, split
       login screen, PWA banner, splash screen, etc.) stays exactly
       where it already lived and is untouched by this file
     - the :root token list and base reset that used to be duplicated
       in both files now live here once
     - new premium-polish rules (spacing/shadow scale, input focus
       rings, button press feedback, fade-in / add-to-cart pulse
       animations) apply everywhere automatically via plain element
       selectors, with no markup changes required
   No functional/JS behaviour depends on anything in this file.
   ================================================================ */

/* Fonts are loaded by <link> in each page's <head> (non-blocking). An @import here
   made this file wait on a second network hop before first paint. */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root{
  /* ---- Canonical palette (orange/red primary, dark-navy secondary,
     warm-gold accent, neutral grays — same brand palette the app
     already used, just named consistently) ---- */
  --color-primary:       #FF4500;
  --color-primary-dark:  #CC3700;
  --color-primary-light: #FF6B3D;
  --color-secondary:     #1A1A2E;
  --color-accent:        #FFD700;
  --color-bg:            #F8F8F8;
  --color-surface:       #FFFFFF;
  --color-text:          #1A1A2E;
  --color-text-muted:    #7B8094;
  --color-text-light:    #ABAEC5;
  --color-border:        #E5E5EF;
  --color-success:       #28A745;
  --color-error:         #C0392B;
  --color-warning:       #DD6B20;

  /* ---- Spacing scale (4px base unit) ---- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px;

  /* ---- Radius scale ---- */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-pill:999px;

  /* ---- Shadow scale ---- */
  --sh-sm:0 2px 10px rgba(16,24,40,.06);
  --sh-md:0 8px 24px rgba(16,24,40,.10);
  --sh-lg:0 20px 60px rgba(16,24,40,.14);
  --sh-btn:0 8px 24px rgba(255,69,0,.32);

  /* ---- Motion ---- */
  --ease:cubic-bezier(.4,0,.2,1);
  --tr-fast:all .18s var(--ease);
  --tr:all .25s var(--ease);

  /* ---- Fonts ---- */
  --font-display:'Baloo 2',cursive;
  --font-body:'Poppins',sans-serif;

  /* ---- Back-compat aliases -------------------------------------
     menu.html and index.html each already reference their own
     variable names hundreds of times (--p/--pd/--n/--g/--bg/--w/
     --tx/--mu/--bd/--ok/--er/--fl/--fb in menu.html; --primary/
     --secondary/--accent/--text-dark/--radius-lg/--shadow-card/etc
     in index.html). Rather than touching every one of those call
     sites, both alias sets are defined here so all existing CSS
     keeps working unchanged, from one token source. ---------------- */
  --p:var(--color-primary);           --pd:var(--color-primary-dark);
  --n:var(--color-secondary);         --g:var(--color-accent);
  --bg:var(--color-bg);               --w:var(--color-surface);
  --tx:var(--color-text);             --mu:var(--color-text-muted);
  --bd:var(--color-border);           --ok:var(--color-success);
  --er:var(--color-error);            --fl:var(--font-display);
  --fb:var(--font-body);              --tr-legacy:all .25s ease;

  --primary:var(--color-primary);             --primary-dark:var(--color-primary-dark);
  --primary-light:var(--color-primary-light); --secondary:var(--color-secondary);
  --secondary-light:#25253E;                  --accent:var(--color-accent);
  --white:var(--color-surface);               --text-dark:var(--color-text);
  --text-muted:var(--color-text-muted);       --text-light:var(--color-text-light);
  --border:var(--color-border);               --error:var(--color-error);
  --success:var(--color-success);             --warning:var(--color-warning);
  --input-bg:#FAFAFE;                         --shadow-card:var(--sh-lg);
  --shadow-btn:var(--sh-btn);                 --radius-lg:var(--r-lg);
  --radius-md:var(--r-md);                    --radius-sm:var(--r-sm);
  --transition:var(--tr);                     --font-logo:var(--font-display);
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-anchor:none}
body{
  font-family:var(--font-body);
  background:var(--color-bg);
  color:var(--color-text);
  overflow-x:hidden;
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
  /* App-like touch behaviour, not a webpage's: no long-press text
     selection (which on Android pops up the "search/translate this"
     bar), no long-press image save/share menu, no double-tap-to-zoom.
     Form fields opt back into normal text selection below. */
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  touch-action:manipulation;
}
button,a,label{user-select:none;-webkit-user-select:none}
img{max-width:100%;display:block;-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none}
input,textarea,select,[contenteditable="true"]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
h1,h2,h3{font-family:var(--font-display);color:var(--color-text)}

/* ============================================================
   4. BUTTON SYSTEM
   ----------------------------------------------------------------
   Plain-element rules so every existing button in the app — addbtn,
   orderbtn, ncart, cpill, hc-cta, etc. — automatically gets smooth
   transitions, a press/scale-down tap state, and a visible focus
   ring for keyboard users, with zero markup changes. Component-
   specific rules (already defined per class in each page's own
   <style>) keep taking priority via higher selector specificity.
   ============================================================ */
button{transition:var(--tr-fast)}
button:active:not(:disabled){transform:scale(.96)}
button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}

/* Optional utility classes for any NEW buttons going forward */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:700;font-size:.88rem;
  border:none;border-radius:var(--r-pill);padding:12px 22px;cursor:pointer;
  background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));
  color:#fff;box-shadow:var(--sh-btn);transition:var(--tr);
}
.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 28px rgba(255,69,0,.4)}
.btn:active:not(:disabled){transform:scale(.96)}
.btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.btn-outline{background:transparent;color:var(--color-primary);border:1.5px solid var(--color-primary);box-shadow:none}
.btn-outline:hover:not(:disabled){background:rgba(255,69,0,.06)}

/* Secondary — solid dark-navy fill, for the "next most important"
   action next to a .btn primary (e.g. "Cancel & keep editing"). */
.btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:700;font-size:.88rem;
  border:none;border-radius:var(--r-pill);padding:12px 22px;cursor:pointer;
  background:var(--color-secondary);color:#fff;box-shadow:var(--sh-sm);transition:var(--tr);
}
.btn-secondary:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn-secondary:active:not(:disabled){transform:scale(.96)}
.btn-secondary:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}

/* Text-only — lowest-emphasis action (e.g. "Skip", "Not now"), no
   fill/border so it sits quietly next to a .btn/.btn-secondary pair. */
.btn-text{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:var(--font-body);font-weight:600;font-size:.86rem;
  border:none;background:transparent;box-shadow:none;
  padding:12px 14px;cursor:pointer;color:var(--color-primary);
  border-radius:var(--r-md);transition:var(--tr-fast);
}
.btn-text:hover:not(:disabled){background:rgba(255,69,0,.06)}
.btn-text:active:not(:disabled){transform:scale(.96)}
.btn-text:disabled{opacity:.5;cursor:not-allowed}

@media(max-width:640px){
  .btn,.btn-secondary,.btn-block-mobile{width:100%}
}

/* ============================================================
   5. INPUT SYSTEM
   ----------------------------------------------------------------
   Deliberately excludes checkbox/radio/range so it never distorts
   those controls, and never sets `width` so it can't fight any
   existing flex/grid layout an input already sits in (e.g. the nav
   search bar). Anything more specific already defined per-page
   (like .nsearch input, .prof-field-input) still wins as-is.
   ============================================================ */
input:not([type=checkbox]):not([type=radio]):not([type=range]),
select,textarea{
  font-family:var(--font-body);
  border:1.5px solid var(--color-border);
  border-radius:var(--r-md);
  padding:12px 14px;
  font-size:.9rem;
  color:var(--color-text);
  background:var(--color-surface);
  transition:var(--tr-fast);
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,
select:focus,textarea:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 4px rgba(255,69,0,.12);
}
input::placeholder,textarea::placeholder{color:var(--color-text-light)}

/* ============================================================
   6. ANIMATIONS
   ============================================================ */
/* Fade-in used for product cards as they render, and available for
   any other content block by adding class="fade-in". */
@keyframes bmFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:bmFadeIn .4s var(--ease) both}
/* Stagger the first few cards in each product grid so the whole
   section doesn't pop in as one flat block. */
.mgrid>.fade-in:nth-child(1){animation-delay:.02s}
.mgrid>.fade-in:nth-child(2){animation-delay:.06s}
.mgrid>.fade-in:nth-child(3){animation-delay:.10s}
.mgrid>.fade-in:nth-child(4){animation-delay:.14s}
.mgrid>.fade-in:nth-child(n+5){animation-delay:.16s}

/* Quick "pop" feedback — used on the cart badge whenever an item is
   added (see the small renderCart() hook in menu.html). */
@keyframes bmPulse{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1)}}
.bm-pulse{animation:bmPulse .38s var(--ease)}

/* ============================================================
   7. PROFILE SIDEBAR TABS
   ----------------------------------------------------------------
   Tab-switcher pills for the pSidebar (Profile / Addresses /
   Orders / Rewards — see #pSidebar in menu.html). Panel visibility is
   toggled purely via the .active class by pTabSwitch() in
   menu.html; this file only supplies the pill look/active-state
   styling and panel show/hide, matching the existing pill patterns
   already used in the sidebar (.addr-save, .prof-edit-btn).
   ============================================================ */
.ptabs{
  display:flex;
  gap:8px;
  padding:2px 0 16px;
  flex-shrink:0;
  /* four tabs: never squeeze the labels — scroll sideways on tiny screens */
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.ptabs::-webkit-scrollbar{display:none}
.ptab-btn{
  flex:1 0 auto;
  white-space:nowrap;
  border:1.5px solid var(--bd);
  background:var(--w);
  color:var(--mu);
  font-family:var(--fb);
  font-size:.8rem;
  font-weight:700;
  padding:9px 10px;
  border-radius:var(--r-pill);
  cursor:pointer;
  text-align:center;
  transition:var(--tr-fast);
}
.ptab-btn:hover:not(.active){
  border-color:var(--p);
  color:var(--p);
}
.ptab-btn.active{
  background:var(--p);
  border-color:var(--p);
  color:#fff;
  box-shadow:var(--sh-btn);
}
.ptab-panel{display:none}
.ptab-panel.active{display:block}

/* ============================================================
   8. SAFE-AREA & MOBILE TOUCH FOUNDATION
   ----------------------------------------------------------------
   BudgetMein is used almost entirely on phones inside a PWA/standalone
   shell, so content must never sit under the notch or the gesture bar.
   These are additive utilities — nothing here changes layout unless a
   class/rule below is actually referenced, so existing fixed headers/
   footers in index.html and menu.html are unaffected until later parts
   opt them in.
   ============================================================ */
:root{
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  /* Minimum comfortable touch target per Android/iOS HIG guidance */
  --tap-min:44px;
}
/* Opt-in helpers for later parts: a fixed top bar adds .bm-safe-top,
   a fixed bottom bar / bottom-nav adds .bm-safe-bottom. */
.bm-safe-top{padding-top:calc(var(--safe-t) + var(--sp-3))}
.bm-safe-bottom{padding-bottom:calc(var(--safe-b) + var(--sp-3))}

/* Every existing button/addbtn/orderbtn etc keeps its own sizing, but
   we guarantee a minimum tappable height globally so no button
   introduced (now or later) ends up smaller than a comfortable tap
   target on mobile, without forcing visual size changes on desktop.
   min-height only (never width) so it never breaks compact/inline
   buttons already laid out in flex rows. */
@media(max-width:768px){
  button,.btn,[role="button"]{min-height:var(--tap-min)}
}

/* ============================================================
   9. LOADING / EMPTY / ERROR / SUCCESS STATES
   ----------------------------------------------------------------
   Generic, opt-in presentational classes so any screen (menu grid,
   orders list, address list, etc.) can show a polished state without
   each page reinventing its own markup/CSS. Purely additive: nothing
   existing references these class names yet, so nothing changes
   until a later part starts using them.
   ============================================================ */

/* --- Skeleton loading shimmer (for cards/rows while data loads) --- */
.bm-skel{
  position:relative;overflow:hidden;
  background:#EDEDF4;border-radius:var(--r-md);
}
.bm-skel::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-100%);
  animation:bmShimmer 1.4s infinite;
}
@keyframes bmShimmer{100%{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){
  .bm-skel::after{animation:none}
}

/* --- Small inline spinner (buttons in a loading state, inline
   fetches) — pairs with the [data-loading] button state below. --- */
.bm-spinner{
  width:16px;height:16px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  animation:bmSpin .7s linear infinite;
  display:inline-block;flex-shrink:0;
}
.bm-spinner--dark{border-color:rgba(26,26,46,.15);border-top-color:var(--color-primary)}
@keyframes bmSpin{to{transform:rotate(360deg)}}

/* Any .btn (or plain button) can be flipped into a loading state from
   JS with btn.dataset.loading='1' — label stays in the DOM (screen-
   reader friendly) but is visually hidden in favour of the spinner,
   and clicks are inert while it's on. */
.btn[data-loading="1"],button[data-loading="1"]{
  color:transparent!important;pointer-events:none;position:relative;
}
.btn[data-loading="1"]::before,button[data-loading="1"]::before{
  content:'';position:absolute;left:50%;top:50%;width:18px;height:18px;
  margin:-9px 0 0 -9px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;
  animation:bmSpin .7s linear infinite;
}

/* --- Empty state (no orders yet, empty cart, no search results) --- */
.bm-empty{
  text-align:center;padding:var(--sp-8) var(--sp-5);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
}
.bm-empty__icon{font-size:2.6rem;line-height:1;margin-bottom:var(--sp-2);opacity:.85}
.bm-empty__title{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--color-text)}
.bm-empty__desc{font-size:.85rem;color:var(--color-text-muted);max-width:320px;line-height:1.55}

/* --- Inline error / success banners (form-level or section-level
   feedback, distinct from the per-field .field-error already used in
   index.html) --- */
.bm-banner{
  display:flex;align-items:flex-start;gap:var(--sp-2);
  border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);
  font-size:.83rem;line-height:1.5;font-weight:500;
}
.bm-banner--error{background:#FEF2F2;color:#B42318;border:1px solid #FECACA}
.bm-banner--success{background:#F0FFF4;color:#166534;border:1px solid #86EFAC}
.bm-banner--info{background:#EBF5FB;color:#1A5276;border:1px solid #BFE0F5}
.bm-banner--warning{background:#FFF9E6;color:#92400E;border:1px solid #FDE68A}

/* ============================================================
   10. GENERIC CARD & BUTTON-SIZE UTILITIES
   ----------------------------------------------------------------
   Opt-in only — every existing page-specific card class (.mcard,
   offer cards, etc, wherever they live in menu.html) keeps its own
   styling untouched. These give any NEW card/button in this or later
   parts a consistent starting point instead of one-off inline styles.
   ============================================================ */
.card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
  padding:var(--sp-4);
  transition:var(--tr-fast);
}
.card--interactive{cursor:pointer}
.card--interactive:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.card--interactive:active{transform:translateY(0) scale(.99)}

/* Small action-button variant (quantity steppers, chip-style actions) */
.btn-sm{
  padding:7px 14px;font-size:.78rem;border-radius:var(--r-pill);
  min-height:36px;
}

/* Icon-only round button (close buttons, back buttons) — 44px touch
   target by default. */
.btn-icon{
  width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:none;background:var(--color-bg);color:var(--color-text);
  cursor:pointer;transition:var(--tr-fast);flex-shrink:0;
}
.btn-icon:hover:not(:disabled){background:var(--color-border)}
.btn-icon:active:not(:disabled){transform:scale(.92)}

/* Disabled-state clarity across the new .btn-sm/.btn-icon set, on top
   of the opacity rule already defined per-.btn above */
.btn-sm:disabled,.btn-icon:disabled{opacity:.5;cursor:not-allowed}