/* =========================================================
   COCKTAILS — NEON DESIGN TOKENS
   Single theme: 80s Miami / Synthwave
   ========================================================= */
:root{
  /* Colors */
  --c-bg:            #05030d;
  --c-bg-soft:       #0b0718;
  --c-surface:       #120a22;
  --c-surface-2:     #1a0f2e;
  --c-surface-3:     #22143d;
  --c-border:        rgba(255, 71, 203, 0.28);
  --c-border-strong: rgba(255, 71, 203, 0.55);
  --c-hairline:      rgba(92, 246, 255, 0.22);

  --c-text:          #f4efff;
  --c-text-muted:    #b8a7d9;
  --c-text-dim:      #6f6090;

  --c-primary:       #ff3ec8;   /* magenta */
  --c-primary-deep:  #b01f8d;
  --c-accent:        #4ff5ff;   /* cyan */
  --c-accent-2:      #ff9a3c;   /* sunset orange */
  --c-success:       #39ff9a;   /* CTA neon green */
  --c-warning:       #ffde3c;
  --c-danger:        #ff4d6d;

  /* Fonts */
  --f-display: "Audiowide", "Monoton", system-ui, sans-serif;
  --f-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Spacing (8pt base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 48px;

  /* Glows + shadows */
  --shadow-card:   0 10px 40px rgba(79,245,255,0.08), 0 0 0 1px rgba(255,62,200,0.18);
  --glow-magenta:  0 0 18px rgba(255,62,200,0.55), 0 0 2px rgba(255,62,200,0.9);
  --glow-cyan:     0 0 18px rgba(79,245,255,0.55), 0 0 2px rgba(79,245,255,0.9);
  --glow-green:    0 0 22px rgba(57,255,154,0.7), 0 0 4px rgba(57,255,154,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  min-height:100vh;
  font-family:var(--f-body);
  color:var(--c-text);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }
input{ font-family:inherit; }

/* Scene backdrop (used on DS + app) */
.neon-scene{
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255,62,200,0.18), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(79,245,255,0.14), transparent 60%),
    linear-gradient(180deg, #05030d 0%, #0b0718 50%, #150525 100%);
  position:relative;
}
.neon-scene::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px);
  opacity:.6;
}

/* ============ TYPOGRAPHY ============ */
.meta{
  font-family:var(--f-mono); font-size:11px; color:var(--c-text-dim);
  letter-spacing:.16em; text-transform:uppercase;
}
.section-title{
  font-family:"Audiowide",sans-serif;
  font-size:18px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--c-text); text-shadow:0 0 10px rgba(79,245,255,0.4);
  display:flex; align-items:center; gap:12px; margin:0;
}
.section-title::before{
  content:""; width:28px; height:1px; background:var(--c-primary);
}
.neon-title{
  font-family:"Audiowide",sans-serif;
  letter-spacing:.06em; text-transform:uppercase;
  text-shadow:0 0 10px rgba(255,62,200,0.6), 0 0 28px rgba(255,62,200,0.4);
}

/* ============ SURFACE + CARDS ============ */
.surface{
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-md);
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:0 22px; height:56px; min-height:44px;
  border-radius:var(--r-pill);
  font-weight:600; font-size:15px; letter-spacing:.04em;
  transition:transform .15s, box-shadow .2s;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn:disabled,
.btn[disabled]{
  opacity:.4; cursor:not-allowed; transform:none; filter:none; pointer-events:none;
}
.btn-primary{
  background: linear-gradient(180deg, #39ff9a, #19b267);
  color:#051a0e;
  box-shadow: var(--glow-green), inset 0 1px 0 rgba(255,255,255,0.3);
}
.btn-ghost{
  background:rgba(0,0,0,0.35); color:var(--c-text-muted);
  border:1px solid var(--c-border); font-size:13px; height:48px;
}
.btn .badge{
  background:rgba(0,0,0,0.28); color:inherit; border-radius:999px;
  min-width:28px; height:28px; padding:0 10px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-size:13px; font-weight:700;
}

/* ============ PILLS (categories) ============ */
.pill{
  flex-shrink:0; height:44px; padding:0 18px;
  border-radius:var(--r-pill); background:transparent;
  color:var(--c-text-muted); border:1px solid var(--c-border);
  font-size:14px; font-weight:500; letter-spacing:.02em;
  transition:all .2s; min-height:44px;
}
.pill:hover{ color:var(--c-text); border-color:var(--c-border-strong); }
.pill.active{
  background: linear-gradient(180deg, rgba(255,62,200,0.15), rgba(79,245,255,0.06));
  color:#fff; border-color:var(--c-primary);
  box-shadow: 0 0 14px rgba(255,62,200,0.55), inset 0 0 8px rgba(255,62,200,0.25);
  text-shadow: 0 0 6px rgba(255,62,200,0.5);
}

/* ============ SEARCH ============ */
.search{ position:relative; flex:1; display:flex; align-items:center; }
.search svg{ position:absolute; left:16px; width:18px; height:18px; color:var(--c-text-dim); }
.search input{
  width:100%; height:52px; padding:0 18px 0 48px;
  border-radius:var(--r-md); background:var(--c-surface); color:var(--c-text);
  border:1px solid var(--c-border); font-size:15px; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.search input::placeholder{ color:var(--c-text-dim); }
.search input:focus{
  border-color:var(--c-accent);
  box-shadow:0 0 0 3px rgba(79,245,255,0.18), 0 0 14px rgba(79,245,255,0.3);
}

/* ============ INGREDIENT CHIP ============ */
.ing-chip{
  position:relative;
  min-height:56px; padding:8px 12px;
  display:flex; align-items:center; gap:10px;
  border-radius:var(--r-md);
  background:var(--c-surface); border:1px solid var(--c-border);
  color:var(--c-text); text-align:left;
  transition:all .18s;
}
.ing-chip:hover{ border-color:var(--c-border-strong); transform:translateY(-1px); }
.ing-chip .icon{
  width:40px; height:40px; flex-shrink:0;
  display:grid; place-items:center;
  border-radius:8px;
  background:var(--c-surface-3);
  color:var(--c-primary);
}
.ing-chip.mixer .icon{ color:var(--c-accent); }
.ing-chip .icon svg{ width:24px; height:24px; }
.ing-chip .label{ font-size:14px; font-weight:600; line-height:1.15; color:var(--c-text); }

.ing-chip.active{
  background: linear-gradient(160deg, rgba(255,62,200,0.16), rgba(79,245,255,0.05));
  border-color:var(--c-primary);
  box-shadow: 0 0 14px rgba(255,62,200,0.5), inset 0 0 8px rgba(255,62,200,0.2);
}
.ing-chip.active .icon{
  background:var(--c-primary); color:#0b0718;
  box-shadow:0 0 10px rgba(255,62,200,0.7);
}
.ing-chip.mixer.active{
  background: linear-gradient(160deg, rgba(79,245,255,0.16), rgba(255,62,200,0.04));
  border-color:var(--c-accent);
  box-shadow: 0 0 14px rgba(79,245,255,0.5), inset 0 0 8px rgba(79,245,255,0.18);
}
.ing-chip.mixer.active .icon{
  background:var(--c-accent); color:#02131a;
  box-shadow:0 0 10px rgba(79,245,255,0.7);
}

/* ============ COCKTAIL CARD ============ */
.cocktail-card{
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:var(--r-lg); overflow:hidden; text-align:left;
  transition:transform .2s, box-shadow .2s, border-color .2s;
  display:flex; flex-direction:column; cursor:pointer;
}
.cocktail-card:hover{
  transform:translateY(-3px); border-color:var(--c-accent);
  box-shadow: 0 0 18px rgba(79,245,255,0.35), 0 10px 30px rgba(0,0,0,0.6);
}
.cocktail-card .thumb{ height:130px; position:relative; overflow:hidden; }
.cocktail-card .thumb::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.5));
}
.cocktail-card .thumb::before{
  content:""; position:absolute; inset:0; z-index:1;
  background: radial-gradient(circle at 50% 50%, transparent 55%, rgba(255,62,200,0.18));
}
.cocktail-card .tag{
  position:absolute; top:10px; left:10px; z-index:2;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  padding:4px 8px; border-radius:4px; background:rgba(0,0,0,0.55);
  color:var(--c-accent); border:1px solid rgba(79,245,255,0.5);
  text-shadow:0 0 6px rgba(79,245,255,0.6);
}
.cocktail-card .body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; }
.cocktail-card .cat{
  font-family:var(--f-mono); font-size:10px; color:var(--c-text-dim);
  letter-spacing:.18em; text-transform:uppercase;
}
.cocktail-card .name{
  font-family:"Inter",sans-serif; font-weight:700; font-size:18px;
  color:var(--c-text); line-height:1.1; letter-spacing:.01em;
}
.cocktail-card .desc{
  font-size:12px; color:var(--c-text-muted); line-height:1.4; min-height:32px;
}

/* ============ PLATE PLACEHOLDERS ============ */
.plate-mojito    { background: radial-gradient(ellipse at 50% 30%, #d7f0c1, #89c06e 40%, #2d6c3d 80%, #10351c); }
.plate-negroni   { background: radial-gradient(ellipse at 50% 25%, #ffa488, #d7372c 45%, #7a1b19 85%, #2a0707); }
.plate-margarita { background: radial-gradient(ellipse at 50% 25%, #fff2b9, #e8d16a 40%, #88751b 85%, #2e280a); }
.plate-espresso  { background: radial-gradient(ellipse at 50% 25%, #ddb07c, #6b3a1d 45%, #2a150a 85%, #0d0604); }
.plate-daiquiri  { background: radial-gradient(ellipse at 50% 25%, #f5f3dc, #dcd29d 45%, #6d6636 85%, #221d06); }
.plate-sour      { background: radial-gradient(ellipse at 50% 25%, #fff3c6, #dfa563 45%, #7b4a1e 85%, #1f1107); }
.plate-pina      { background: radial-gradient(ellipse at 50% 25%, #fff6dc, #f3daa3 45%, #7e6933 85%, #221a06); }
.plate-overlay{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 50% 85%, rgba(0,0,0,0.4), transparent 40%),
    repeating-linear-gradient(120deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 10px);
}

/* ============ DS-PAGE SWATCH ============ */
.swatch{
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:var(--r-md); padding:14px; display:flex; flex-direction:column; gap:10px;
}
.swatch .chip{
  height:72px; border-radius:var(--r-sm); border:1px solid rgba(255,255,255,0.08);
}
.swatch .meta-row{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--f-mono); font-size:11px; color:var(--c-text); letter-spacing:.04em;
}
.swatch .meta-row .val{ color:var(--c-text-dim); }

/* ============ FOCUS-VISIBLE STYLES ============ */
/* Keyboard-only focus indicators. :focus (mouse) stays clean via :focus-visible. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 3px;
}
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
.btn:focus-visible,
.pill:focus-visible,
.ing-chip:focus-visible,
.g-chip:focus-visible,
.g-cat-btn:focus-visible,
.g-menu-item:focus-visible,
.g-icon-btn:focus-visible {
  outline: 2px solid var(--c-success);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(57, 255, 154, 0.3);
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
}

/* ============ TOAST / FLASH NOTIFICATIONS ============ */
/* Global toast stack used by both admin and guest layouts. */
.flash-stack { pointer-events: none; }
.flash-stack .flash { pointer-events: auto; }
.flash {
  position: fixed; top: 20px; right: 20px; z-index: 80;
  padding: 14px 44px 14px 20px;
  border-radius: var(--r-md);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  font-size: 14px; max-width: 360px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  display: flex; align-items: flex-start; gap: 12px;
}
.flash.success {
  border-color: var(--c-success);
  box-shadow: 0 0 14px rgba(57, 255, 154, 0.3);
}
.flash.error {
  border-color: var(--c-danger);
  box-shadow: 0 0 14px rgba(255, 77, 109, 0.3);
}
.flash .msg { flex: 1; }
.flash-close {
  position: absolute; top: 8px; right: 8px;
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--c-text-dim);
  display: grid; place-items: center;
  cursor: pointer; border: 0;
  transition: color .15s, background .15s;
}
.flash-close:hover {
  color: var(--c-text);
  background: var(--c-surface-2);
}

/* iOS safe-area: shift toast stack below notch in guest PWA */
@supports (padding: env(safe-area-inset-top)) {
  .flash {
    top: calc(20px + env(safe-area-inset-top));
    right: calc(20px + env(safe-area-inset-right));
  }
}