/* "Neon Soi" shared design tokens — Pattaya bar-strip-at-night, not the
   barbershop theme this file started as a copy of. Linked before each
   page's own stylesheet, so a page can still override a value locally.
   Variable names are unchanged from the old barbershop copy on purpose —
   nothing downstream had to be renamed, only the values. */
:root{
  --ink:#0a0e15;          /* was #0e0c0a — cool night-blue, not shop-wood brown */
  --panel:#131a22;        /* was #171311 */
  --panel-2:#0e141c;      /* raised-over-raised — hero/header bands */
  --line:#223040;         /* was #2a221d */
  --line-soft:rgba(255,255,255,.06);
  --amber:#e8a23d;        /* kept, demoted from "the accent" to a single job: the verified/claimed badge */
  --amber-soft:rgba(232,162,61,.16);
  --pink:#ff3d78;         /* primary accent — signage energy */
  --pink-soft:rgba(255,61,120,.16);
  --cyan:#2fe0d0;         /* secondary accent — active/selected state only */
  --cyan-soft:rgba(47,224,208,.14);
  --cream:#f3efe7;        /* was #f3ece1 */
  --muted:#8b96a6;        /* was #9b8e7e — cooler grey-blue, not warm grey */
  --green:#5fb87a;
  --blue:#5a9bd4;
  --blue-soft:rgba(90,155,212,.16);
  --red:#c9504a;
  --radius:14px;          /* was 10px — slightly softer corner */
  --radius-lg:20px;
  --shadow-1:0 2px 10px rgba(0,0,0,.35);
  --shadow-2:0 18px 44px rgba(0,0,0,.5);
}

/* daylight variant, not a literal invert — "Beach Road at noon": warm sand
   ground, same two accents deepened for contrast. Opt in per-page with
   `data-theme="light"` on <html> (no page does yet — dark is the product's
   real identity, this exists so a future light toggle has somewhere to go). */
:root[data-theme="light"]{
  --ink:#f7f1e4; --panel:#ffffff; --panel-2:#fbf6ea; --line:#e7dcc3; --line-soft:rgba(30,20,10,.06);
  --amber:#b9781e; --amber-soft:rgba(185,120,30,.14);
  --pink:#d61e63; --pink-soft:rgba(214,30,99,.10);
  --cyan:#0f8f85; --cyan-soft:rgba(15,143,133,.12);
  --cream:#211a10; --muted:#7c7362;
  --shadow-1:0 2px 8px rgba(30,20,10,.08); --shadow-2:0 18px 40px rgba(30,20,10,.12);
}

/* visually hidden but still reachable by screen readers — for a <label> whose
   text is redundant on screen (e.g. a placeholder already shows it visibly)
   but still needs to exist for assistive tech. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* shared confirmation toast (paired with toast() in shared.js). One style for
   every page and every message — success and error alike. */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--green);
  color:var(--ink);font-weight:600;padding:13px 22px;border-radius:30px;z-index:60;
  opacity:0;transition:opacity .3s;pointer-events:none}
.toast.show{opacity:1}

/* shared primary button — recolored from amber to pink so every page's main
   call-to-action (submit claim, search, claim-this-bar) uses the new accent. */
.btn{
  display:inline-block;cursor:pointer;border:none;border-radius:var(--radius);
  font-weight:700;font-family:inherit;font-size:14px;
  padding:11px 20px;text-decoration:none;line-height:1.2;
  transition:filter .15s,transform .1s,box-shadow .15s;
  background:var(--pink);color:#fff;
  box-shadow:0 4px 14px var(--pink-soft);
}
.btn:hover{filter:brightness(1.08);box-shadow:0 6px 20px var(--pink-soft)}
.btn:active{transform:scale(.98);box-shadow:0 2px 8px var(--pink-soft)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* shared card shell — the static panel look (background/border/radius/
   shadow) used by every page's `.card`. Each page keeps its own padding/
   layout locally. NOTE: `.row` used to share this rule too, but `.row` is
   only ever used AS A FLEX LAYOUT WRAPPER NESTED INSIDE `.card` (admin.html's
   candidate/claim/ad rows) — never standalone — so bundling it in here just
   drew a second little card-box floating inside the outer card. Removed
   28 Jul 2026; `.row`'s flex layout rule lives in admin.html's own <style>. */
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-1);
}

/* shared visible focus ring for every text input/textarea sitewide — a
   border-color swap alone is too weak a signal (WCAG 2.4.7), so pair it with
   a soft outer glow. One rule here instead of four near-identical copies in
   claim.css/advertise.css/add-your-bar.css/manage.css. */
input:focus, textarea:focus{
  outline:none;border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-soft);
}

/* shared label/input/hint shape for the "form card" pages (claim, advertise,
   add-your-bar, manage) — scoped to .formcard so it can't leak into
   admin.html or find-a-bar.html, which have their own input styling and
   would otherwise pick up an unstyled bare `label`/`input` rule. Replaces
   four near-identical copies that used to live in claim.css/advertise.css/
   add-your-bar.css/manage.css. Each page still owns its own .card padding/
   margin locally — this only covers the field typography inside it. */
.formcard label{display:block;font-size:12.5px;color:var(--muted);margin:14px 0 5px}
.formcard label:first-child{margin-top:0}
.formcard input, .formcard textarea{width:100%;box-sizing:border-box;background:var(--ink);
  border:1px solid var(--line);border-radius:8px;color:var(--cream);font-family:inherit;
  font-size:14px;padding:10px 12px;transition:border-color .15s}
.formcard textarea{resize:vertical;min-height:70px}
.formcard .hint{font-size:11.5px;color:var(--muted);margin-top:6px}

/* file inputs (advertise/recommend-a-bar/add-your-bar/manage photo upload)
   otherwise render the OS's native light grey button, which clashes hard
   against the dark card. Restyle the button part to match .btn's pink. */
.formcard input[type="file"]{padding:8px 10px;color:var(--muted);cursor:pointer}
.formcard input[type="file"]::file-selector-button,
.formcard input[type="file"]::-webkit-file-upload-button{
  margin-right:12px;padding:8px 14px;border:none;border-radius:8px;
  background:var(--pink);color:#fff;font-weight:700;font-family:inherit;font-size:13px;
  cursor:pointer;transition:filter .15s;
}
.formcard input[type="file"]:hover::file-selector-button,
.formcard input[type="file"]:hover::-webkit-file-upload-button{filter:brightness(1.08)}
.formcard .hint a{color:var(--pink)}
