/* Agadir Burger × World Cup 2026 — red / white / American blue. swh display font. */
@font-face {
  font-family: "swh";
  src: url("/fonts/swh.woff2") format("woff2"),
       url("/fonts/swh.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --red: #e60005;          /* Agadir brand red */
  --blue: #0a3161;         /* American-flag navy */
  --blue-tint: #eaf0fb;    /* light blue wash */
  --ink: #15151a;
  --paper: #ffffff;
  --muted: #444444;
  --line: #e7e7e7;
  --radius: 14px;
  --maxw: 980px;
  /* Site palette is locked to red + white + blue only (owner direction
     2026-05-20). No yellow / no other accent colours anywhere. */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Global design decision (owner, 2026-05-21): the whole site is square —
   no rounded corners on anything. One !important rule overrides every
   scattered border-radius (cards, panels, images, inputs, the circular
   Google icon + accessibility FAB, status pills) and auto-squares any
   component added later. */
*, *::before, *::after { border-radius: 0 !important; }

body {
  font-family: "Rubik", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color: var(--blue);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: "swh", "Rubik", system-ui, sans-serif;
  letter-spacing: .01em;
  line-height: 1.05;
  text-transform: uppercase;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }
section { padding: 54px 0; }
a { color: var(--blue); }

/* ---- Top bar -------------------------------------------------------------*/
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--red); color: #fff;
  border-bottom: 4px solid var(--blue);
}
.topbar .wrap {
  display: flex; align-items: center; gap: 16px;
  min-height: 60px;
}
.brand {
  font-family: "swh", sans-serif; font-size: 26px; color: #fff;
  text-decoration: none; letter-spacing: .02em; display: flex; align-items: center;
}
.brand img { height: 42px; width: auto; display: block; }
.nav { display: flex; gap: 14px; margin-inline-start: auto; align-items: center; flex-wrap: wrap; }
.nav a:not(.btn) { color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; }
.nav a:not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; }

/* Primary button: red on white surfaces */
.btn,
.nav a.btn {
  display: inline-block; border: 0; cursor: pointer;
  background: var(--red); color: #fff; font-weight: 800;
  padding: 11px 20px; border-radius: 0; font-size: 15px;
  text-decoration: none; font-family: inherit;
}
.btn:hover, .nav a.btn:hover { filter: brightness(1.06); color: #fff; }
/* On the red header / hero, invert to a white pill with red text */
.topbar .btn, .hero .btn {
  background: #fff; color: var(--red);
}
.topbar .btn:hover, .hero .btn:hover { background: #f1f1f1; color: var(--red); }
.btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.lang-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.btn.ghost { background: transparent; color: #fff; border: 2px solid #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.gbtn { display: inline-flex; align-items: center; gap: 10px; }
.gicon { flex: 0 0 auto; background: #fff; border-radius: 50%;
  padding: 3px; box-sizing: content-box; display: block; }
.lang-btn {
  background: transparent; color: #fff; border: 1.5px solid #fff;
  border-radius: 0; padding: 6px 12px; font-weight: 700; cursor: pointer;
  font-family: inherit;
}
.lang-btn:hover, .lang-btn:focus { background: #fff; color: var(--red); }
.authbox { display: flex; align-items: center; gap: 8px; }
.authbox .acct {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px; max-width: 170px;
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.30);
  font-size: 13px;
}
.authbox .acct:hover { background: rgba(255,255,255,.18); }
.authbox .acct .acct-name {
  /* Outer wrapper — just bidi isolation; truncation lives on the
     inner <bdi> so text-overflow resolves relative to the content's
     direction, not the parent RTL. Previously had max-width +
     overflow + text-overflow on this outer element, which caused
     CSS to clip the JS-pre-truncated name a SECOND time with its
     own ellipsis on the visual right ("…MOTO ASSE…" double-ellipsis
     bug). */
  unicode-bidi: isolate;
}
.authbox .acct .acct-name-inner {
  display: inline-block; max-width: 100px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  vertical-align: bottom;
}
.authbox .acct svg { flex: 0 0 auto; opacity: .85; }
/* Avatar: 26px square (site enforces border-radius:0 globally so we
   keep it square, not a circle). Photo or initial letter, both
   contained the same way to stop letter-spacing or alt-text from
   nudging the box. */
.acct-avatar {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: rgba(255,255,255,.22);
  font-size: 13px; font-weight: 800; color: #fff;
  letter-spacing: 0; line-height: 1;
  object-fit: cover; overflow: hidden;
}
.acct-avatar.acct-initial { background: rgba(0,0,0,.20); }

/* ---- Hero ---------------------------------------------------------------*/
/* Split editorial hero: solid red message panel + crisp, un-washed photo */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: clamp(440px, 66vh, 660px);
  background: var(--red);
  border-bottom: 5px solid var(--blue);
}
.hero-copy {
  display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start; gap: 16px;
  padding: clamp(34px, 5vw, 76px);
  color: #fff;
  border-inline-end: 6px solid var(--blue);
}
.hero-copy .tagline {
  display: inline-block;
  color: var(--red); background: #fff;
  font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  font-size: clamp(18px, 2.4vw, 26px);
  padding: 10px 20px; border-radius: 0;
}
.hero-copy .hero-dates {
  display: inline-block; align-self: flex-start;
  color: #fff; background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.45);
  font-weight: 700; font-size: clamp(13px, 1.25vw, 16px);
  padding: 6px 12px; border-radius: 0;
}
@media (max-width: 640px) {
  .hero-copy .hero-dates { align-self: center; }
}

/* ---- Prize ladder + dates/cities chips in the hero ------------------- */
/* The prize panel is the visual anchor of the hero — three tiered
   prizes the visitor can win, including a GUARANTEED reward at the
   bottom rung (Carlsberg pitcher on first visit) which is the
   strongest possible conversion trigger.
   Design language: clean editorial card, white surface on the red hero
   for high contrast and a premium magazine feel. No competing colors —
   the only accents are the existing brand red (tier labels) and navy
   (section eyebrow). Hierarchy is achieved through typographic weight,
   letter-spacing, and hairline dividers, not through color noise. */
.hero-prizes {
  align-self: stretch; max-width: 100%;
  background: #fff; color: var(--ink);
  border-radius: 16px;
  padding: clamp(16px, 1.9vw, 22px) clamp(18px, 2vw, 24px);
  box-shadow:
    0 12px 32px -8px rgba(0, 0, 0, .25),
    0 4px 10px -2px rgba(0, 0, 0, .12);
  display: flex; flex-direction: column;
}
.hero-prizes-title {
  /* Eyebrow / kicker label — small, uppercase, navy, letter-spaced.
     Sets the editorial tone without stealing eye-attention from the
     prize content itself. */
  margin: 0 0 12px;
  font-size: clamp(11.5px, 1.05vw, 13px);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
}
.hero-prizes ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
}
.hero-prizes li {
  /* Each row: icon column + content column, separated by a hairline
     divider from the row above. Grid with logical columns auto-flips
     for the RTL Hebrew direction so the emoji always sits on the
     "leading" side of the text. */
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid #ececec;
}
.hero-prizes li:first-child { border-top: 0; padding-top: 4px; }
.hero-prizes li:last-child  { padding-bottom: 2px; }
.hero-prizes li .li-icon {
  font-size: clamp(20px, 2.1vw, 24px);
  line-height: 1;
  align-self: center;
}
.hero-prizes li .li-body {
  display: flex; flex-direction: column; gap: 3px;
  font-size: clamp(13.5px, 1.5vw, 16px);
  line-height: 1.32;
  color: #2a2a30;
}
/* Tier label — red, slight letter-spacing, weight 900. Sits above the
   prize description as a small "category" indicator. */
.hero-prizes li .li-body b {
  display: block;
  font-weight: 900;
  color: var(--red);
  font-size: clamp(12.5px, 1.2vw, 14.5px);
  letter-spacing: .02em;
  line-height: 1.2;
  text-transform: uppercase;
}
.hero-copy .hero-dates-strong {
  display: inline-flex; align-items: baseline; gap: 8px;
  align-self: flex-start;
  background: #fff; color: var(--red);
  border-radius: 8px;
  font-weight: 700; font-size: clamp(15px, 1.7vw, 19px);
  padding: 8px 14px;
}
.hero-copy .hero-dates-strong b { font-weight: 900; }
.hero-copy .hero-cities {
  display: inline-block; align-self: flex-start; max-width: 100%;
  color: #fff; background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 8px;
  font-weight: 600; font-size: clamp(13px, 1.35vw, 16px);
  padding: 8px 14px;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .hero-copy .hero-dates-strong, .hero-copy .hero-cities {
    align-self: center; text-align: center;
  }
}
.hero-copy h1 {
  font-size: clamp(30px, 4.2vw, 60px); color: #fff;
  line-height: 1.1; margin: 2px 0;
  text-wrap: balance;
}
.hero-copy p {
  font-size: clamp(16px, 1.35vw, 20px); max-width: 46ch;
  opacity: .96; margin-bottom: 6px;
}
.hero-cta { align-self: flex-start; font-size: 17px; padding: 14px 28px; }
.hero-photo {
  background-color: var(--ink);
  background-image: url("/img/hero.jpg");
  background-image: image-set(url("/img/hero.webp") type("image/webp"),
                              url("/img/hero.jpg") type("image/jpeg"));
  background-size: cover; background-position: center; background-repeat: no-repeat;
}

/* ---- Rules / cards ------------------------------------------------------*/
.section-title { font-size: clamp(28px, 5vw, 44px); color: var(--blue); margin-bottom: 28px; }

/* "How it works" — 3 process steps + 2 prize steps. Counter resets at
   the body level so step 4 and 5 keep numbering across the two grids. */
.howto-body { counter-reset: s; }
.steps { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.steps + .steps { margin-top: 12px; }
.steps.prizes { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.step {
  position: relative;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 14px;
  padding: 18px 18px 16px;
}
.step::after {
  counter-increment: s; content: counter(s);
  position: absolute; top: 8px; inset-inline-end: 14px;
  font-family: "swh", sans-serif; font-size: 44px;
  color: rgba(255,255,255,.28); line-height: 1; pointer-events: none;
}
.step h3 {
  font-size: 19px; color: #fff;
  text-transform: none; letter-spacing: 0;
  margin-bottom: 6px; padding-inline-end: 38px;
}
.step p { color: rgba(255,255,255,.94); font-size: 15px; line-height: 1.55; }
.step p b { color: #fff; font-weight: 800; }
.step.win {
  background: var(--red);
  border-color: var(--red);
}
/* Belt-and-suspenders: lock the prize-card text colors to white so
   no future cascade can land red-on-red. The general .step p / .step
   p b rules above already do this via inheritance, but UX reviewers
   keep flagging it — explicit overrides make the intent unmissable. */
.step.win p, .step.win p b, .step.win h3 { color: #fff; }
.step.win::after { color: rgba(255,255,255,.55); }

/* "How it works" — branded ball image beside the rules */
.howto {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: 34px; align-items: start;
}
.howto-img {
  margin: 0;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: 0 14px 34px rgba(10,49,97,.12);
  background-color: var(--ink);
  background-image: url("/img/wc.jpg");
  background-image: image-set(url("/img/wc.webp") type("image/webp"),
                              url("/img/wc.jpg") type("image/jpeg"));
  background-size: cover; background-position: center; background-repeat: no-repeat;
  position: sticky; top: 84px;
  /* Portrait slot matched to the delivered poster's exact ratio
     (1561x1999) so it fills edge-to-edge with no bars and no cropping. */
  aspect-ratio: 1561 / 1999;
}
.howto-body .section-title { margin-bottom: 22px; }
@media (max-width: 820px) {
  .howto { grid-template-columns: 1fr; gap: 18px; }
  .howto-img {
    position: static;
    max-width: 380px; width: 100%; margin: 0 auto;
  }
}

/* Final-at-Nahalat-Binyamin band — branded ball */
.showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 36px; align-items: center;
}
.showcase-body { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.showcase-body .section-title { margin-bottom: 0; }
.showcase-lead { font-size: clamp(16px, 1.5vw, 20px); color: var(--blue); max-width: 46ch; }
.showcase-img {
  margin: 0; border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: 0 14px 34px rgba(10,49,97,.12);
  background-color: #eef0ee;
  background-image: url("/img/ball.jpg");
  background-image: image-set(url("/img/ball.webp") type("image/webp"),
                              url("/img/ball.jpg") type("image/jpeg"));
  background-size: cover; background-position: center; background-repeat: no-repeat;
  min-height: clamp(280px, 40vw, 480px);
}
@media (max-width: 820px) {
  .showcase { grid-template-columns: 1fr; gap: 18px; }
  .showcase-img { order: -1; min-height: 200px; height: 52vw; }
  .showcase-body { align-items: center; text-align: center; }
}

/* Colored full-width section bands -------------------------------------- */
.band-blue { background: var(--blue); color: #fff; }
.band-blue .section-title { color: #fff; }
.band-blue .howto-img {
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}

.band-red { background: var(--red); color: #fff; }
.band-red .section-title { color: #fff; }
.band-red .showcase-lead { color: #fff; }
.band-red .btn { background: #fff; color: var(--red); }
.band-red .btn:hover { background: #f1f1f1; color: var(--red); }
.band-red .showcase-img {
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}

/* "GOAL" band — branded ball in the net. Heading sits at the TOP so it
   doesn't cover the Agadir logo on the ball, which is mid-frame. */
.goal-band {
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(10,49,97,.80) 0%, rgba(10,49,97,.30) 35%, rgba(10,49,97,.10) 60%, rgba(10,49,97,.55) 100%),
    url("/img/ball-in-net.jpg");
  background-image:
    linear-gradient(rgba(10,49,97,.80) 0%, rgba(10,49,97,.30) 35%, rgba(10,49,97,.10) 60%, rgba(10,49,97,.55) 100%),
    image-set(url("/img/ball-in-net.webp") type("image/webp"),
              url("/img/ball-in-net.jpg") type("image/jpeg"));
  background-size: cover; background-position: center; background-repeat: no-repeat;
  min-height: clamp(360px, 50vw, 560px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 34px 22px 64px;
  border-top: 5px solid var(--red); border-bottom: 5px solid var(--red);
  text-align: center; color: #fff;
}
.goal-band-text { max-width: 780px; }
.goal-band h2 {
  color: #fff; font-size: clamp(40px, 8vw, 80px); margin-bottom: 10px;
  letter-spacing: .01em;
  text-shadow: 0 4px 22px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.7);
}
.goal-band p {
  color: #fff; font-size: clamp(16px, 1.7vw, 20px); max-width: 60ch; margin: 0 auto;
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
}

.branches { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 12px; }
.branch-chip {
  background: var(--red); color: #fff; border: 0; border-radius: 0;
  padding: 18px 14px 14px; text-align: center; font-weight: 800; font-size: 18px;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.branch-chip .bc-name { display: block; }
.branch-chip .bc-addr {
  display: block; font-weight: 500; font-size: 13px;
  color: rgba(255,255,255,.85); line-height: 1.35;
  margin-bottom: 4px;
}
.branch-chip .bc-actions {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
}
.branch-chip .bc-actions a {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; text-decoration: none;
  padding: 4px; line-height: 0;
  transition: transform 120ms;
}
.branch-chip .bc-actions a:hover { transform: translateY(-2px) scale(1.05); }
.branch-chip .bc-actions a:focus-visible {
  outline: 2px solid #fff; outline-offset: 3px;
}
.branch-chip .bc-actions img {
  display: block; flex-shrink: 0; height: 32px; width: auto;
}

.prize-box {
  background: var(--ink); color: #fff; border-radius: 20px;
  padding: 40px 28px; text-align: center;
  border-top: 6px solid var(--red); border-bottom: 6px solid var(--blue);
}
.prize-box h2 { color: #fff; font-size: clamp(28px,6vw,52px); }
.prize-box p { font-size: 19px; margin-top: 12px; }

/* Featured-ball video (signed-in or out — manual play, controls visible) */
.video-section {
  background: #fff;
  padding: 36px 18px;
  text-align: center;
}
.video-section video {
  width: 100%; max-width: 880px;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(10,49,97,.18);
  display: block; margin: 0 auto;
  background: var(--ink);
}

/* ---- Closing party band -------------------------------------------------*/
.party {
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.74)),
    url("/img/party.jpg");
  background-image:
    linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.74)),
    image-set(url("/img/party.webp") type("image/webp"),
              url("/img/party.jpg") type("image/jpeg"));
  background-size: cover; background-position: center; background-repeat: no-repeat;
  min-height: clamp(360px, 54vw, 640px);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 18px 54px;
  border-top: 5px solid var(--red);
  border-bottom: 5px solid var(--blue);
}
.party-cap { text-align: center; max-width: 760px; }
.party-cap h2 {
  color: #fff; font-size: clamp(28px, 5.4vw, 52px); margin-bottom: 20px;
  text-shadow: 0 3px 16px rgba(0,0,0,.6), 0 2px 4px rgba(0,0,0,.6);
}
.party-cap .btn { background: #fff; color: var(--red); }
.party-cap .btn:hover { background: #f1f1f1; color: var(--red); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
.btn-wa, .party-cap .btn-wa {
  background: #25D366; color: #fff;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-wa:hover, .party-cap .btn-wa:hover { background: #1eb558; color: #fff; }
.btn-wa svg { flex: 0 0 auto; }
.share-more { margin-top: 14px; }

/* "Track live" hint under the prize steps (sits on the navy band) */
.track-live {
  margin-top: 18px; text-align: center; font-size: 14px;
  color: rgba(255,255,255,.92);
}
.track-live a {
  color: #fff; font-weight: 800; text-decoration: underline;
  text-underline-offset: 4px; margin-inline-start: 8px; white-space: nowrap;
}
.track-live a:hover { opacity: .85; }

/* ---- Forms / panel ------------------------------------------------------*/
.panel {
  border: 1px solid var(--line); border-radius: 20px; padding: 28px;
  background: #fff; box-shadow: 0 10px 30px rgba(10,49,97,.08);
}
.panel.tinted { background: #f5f8ff; }

/* Visual grouping inside the signup form: 'Match' fields vs 'Team' fields */
.form-group {
  margin-bottom: 20px; padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.form-group:last-of-type { border-bottom: 0; padding-bottom: 0; }
.form-head {
  font-family: "swh", "Rubik", system-ui, sans-serif;
  font-size: clamp(20px, 2.4vw, 24px);
  color: var(--red); text-transform: none; letter-spacing: 0;
  margin-bottom: 14px; line-height: 1;
}

.field { margin-bottom: 16px; }
.field label {
  display: block; font-weight: 700; margin-bottom: 7px; font-size: 14px;
  color: var(--blue); letter-spacing: .01em;
}
.field input, .field select {
  width: 100%; padding: 13px 15px; border: 1.5px solid #c9c9c9;
  border-radius: 10px; font-size: 16px; font-family: inherit; background: #fff;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.field input:focus, .field select:focus {
  outline: none; border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(230,0,5,.18);
}
.field select:disabled { background: #f1f1f1; color: #888; }
/* Team details locked state — returning users see their saved info
   pre-filled and read-only by default. Click 'Edit' to unlock. */
.field input.locked {
  background: var(--blue-tint); color: var(--blue);
  cursor: default; border-color: var(--blue);
}
.field input.locked:focus { box-shadow: none; }
.form-head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.form-head-row .form-head { margin-bottom: 0; }
.form-head-action {
  background: transparent; color: var(--blue);
  border: 1.5px solid var(--blue);
  padding: 6px 14px; font-size: 13px; font-weight: 800;
  cursor: pointer; font-family: inherit;
}
.form-head-action:hover { background: var(--blue); color: #fff; }
.form-head-row + .form-locked-note { margin-top: 8px; }
.form-locked-note {
  background: var(--blue-tint); color: var(--blue);
  border-inline-start: 4px solid var(--blue);
  padding: 9px 13px; font-size: 13px; line-height: 1.5;
  margin-bottom: 12px;
}

/* Signup date picker — calendar grid with availability per night */
.date-cal-wrap { margin-top: 4px; }
.date-cal {
  display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
}
.date-cal-cell {
  background: #fff;
  border: 1.5px solid #d6deea;
  padding: 8px 4px;
  text-align: center;
  cursor: pointer;
  font-family: inherit; color: var(--blue);
  min-height: 62px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
  transition: border-color .12s ease, background-color .12s ease, transform .06s ease;
  -webkit-tap-highlight-color: transparent;
}
.date-cal-cell:hover:not(.disabled) {
  border-color: var(--red); background: #fff5f5;
}
.date-cal-cell.selected {
  background: var(--red); color: #fff; border-color: var(--red);
  box-shadow: 0 4px 12px rgba(230,0,5,.3);
}
.date-cal-cell.disabled {
  background: #f3f4f6; color: #9aa3af;
  border-color: #e6e9ef; cursor: not-allowed;
}
/* 'Already booked by me' — distinct from 'full' (grey) and 'past'
   (grey). Blue tint says 'this is your booking, you can't book it
   again' rather than 'this is unavailable'. */
.date-cal-cell.mine {
  background: var(--blue-tint); color: var(--blue);
  border-color: var(--blue); opacity: .9;
  cursor: not-allowed;
}
.date-cal-cell.mine .cell-stat { color: var(--blue); font-weight: 800; }
.date-cal-cell .cell-date { font-weight: 800; font-size: 15px; line-height: 1; }
.date-cal-cell .cell-stat {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
}
.date-cal-cell.selected .cell-stat { color: rgba(255,255,255,.92); }
.cal-hint {
  color: var(--muted); padding: 14px 4px; font-size: 14px; text-align: center;
}

/* Tappable time-slot grid (mobile-first) */
.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px; margin-top: 4px;
}
.slot-hint { grid-column: 1 / -1; color: var(--muted); font-size: 14px; padding: 10px 2px; }
.slot-btn {
  font-family: inherit; font-weight: 800; font-size: 16px;
  padding: 14px 6px; border-radius: 0; cursor: pointer;
  background: #fff; color: var(--blue); border: 2px solid #d6deea;
  display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.1;
  -webkit-tap-highlight-color: transparent; transition: transform .04s ease;
}
.slot-btn small { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.slot-btn:hover:not(:disabled) { border-color: var(--blue); }
.slot-btn:active:not(:disabled) { transform: scale(.97); }
.slot-btn.sel { background: var(--red); color: #fff; border-color: var(--red); }
.slot-btn:disabled { background: #f3f4f6; color: #9aa3af; border-color: #e9ecf1; cursor: not-allowed; }
.slot-btn:disabled small { color: #9aa3af; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .grid2 { grid-template-columns: 1fr; } }

/* ---- Mobile ------------------------------------------------------------- */
@media (max-width: 640px) {
  section { padding: 38px 0; }
  /* Two-row mobile header so the 'Leaderboard' link can never sit next
     to the red 'Register' CTA (where a thumb-tap on the link was
     landing on the button instead, and people thought clicking the
     leaderboard took them to signup):
       Row 1: brand + bar-end (Register CTA + language toggle)
       Row 2: nav links (Home · Leaderboard · auth chip), full width */
  .topbar .wrap { flex-wrap: wrap; gap: 6px 12px; padding: 9px 14px; min-height: 0; }
  .brand img { height: 30px; }
  .topbar .nav {
    order: 2; flex-basis: 100%; width: 100%; margin: 0;
    position: static; display: flex; flex-direction: row;
    gap: 8px 16px; flex-wrap: wrap;
    justify-content: flex-end; align-items: center;
    background: transparent; padding: 6px 0 0; border: 0; box-shadow: none;
    border-top: 1px solid rgba(255,255,255,.22);
  }
  .topbar .nav a:not(.btn) { font-size: 14px; padding: 4px 0; width: auto; }
  .bar-end { order: 1; gap: 8px; flex-wrap: wrap; }
  .nav .btn { padding: 8px 15px; font-size: 13px; }
  /* Mobile: replace the 'Register' pill in the top bar with the Google
     sign-in (or signed-in account chip). Registration CTAs appear all
     over the page; the top should offer the action the user can't get
     elsewhere — signing in. */
  .bar-end .nav-signup-btn { display: none; }
  .bar-end #navIn {
    background: #fff; color: var(--red); border-color: #fff;
    font-weight: 800; padding: 8px 13px; font-size: 13px;
  }
  .authbox .acct { max-width: 130px; font-size: 12px; padding: 6px 10px; }
  .lang-btn { padding: 5px 11px; font-size: 13px; }
  .hamb { display: none !important; }
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hero-photo { order: -1; min-height: 230px; height: 38vw; }
  .hero-copy {
    border-inline-end: 0; border-top: 6px solid var(--blue);
    align-items: center; text-align: center; padding: 32px 20px 38px;
  }
  .hero-copy p { font-size: 16px; margin-inline: auto; }
  .hero-cta { align-self: center; }
  .panel { padding: 18px; }
  .prize-box { padding: 30px 18px; }
  .step { padding: 16px 16px 14px; }
  .step h3 { font-size: 17px; }
  .step p { font-size: 14px; }
  .panel form .btn { width: 100%; text-align: center; }
  .panel { overflow-x: auto; }
  table { min-width: 380px; }
  th, td { padding: 10px 8px; }
}

/* Lock the form while the booking is being written to Firestore so the
   user can't double-tap or change fields mid-submit. */
#regForm.submitting { opacity: .55; pointer-events: none; filter: saturate(.7); }

/* Confirmation modal shown immediately after a successful booking write */
.modal {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
}
.modal.hidden { display: none !important; }
.modal-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,.6);
  animation: modalFadeIn .15s ease;
}
.modal-card {
  position: relative; background: #fff;
  max-width: 460px; width: 100%;
  padding: 32px 28px 26px;
  border-top: 6px solid var(--red);
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
  text-align: center;
  animation: modalRise .22s ease;
}
@keyframes modalFadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes modalRise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.modal-icon {
  width: 64px; height: 64px; margin: 0 auto 8px;
  background: var(--red); color: #fff;
  font-family: "swh", sans-serif; font-size: 38px; line-height: 64px;
}
.modal-title {
  font-family: "swh", "Rubik", system-ui, sans-serif;
  font-size: clamp(22px, 4vw, 28px); color: var(--red);
  margin-bottom: 14px; text-transform: none; letter-spacing: 0; line-height: 1.2;
}
.modal-details {
  font-size: 17px; color: var(--ink); font-weight: 800;
  background: var(--blue-tint);
  padding: 12px 16px; margin-bottom: 12px;
  border-inline-start: 4px solid var(--blue);
}
.modal-note { font-size: 14px; color: var(--muted); margin-bottom: 24px; line-height: 1.5; }
.team-no-block {
  margin: 6px auto 14px; padding: 14px 16px; max-width: 320px;
  background: var(--red); color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  box-shadow: 0 2px 8px rgba(230, 0, 5, 0.25);
}
.team-no-block.hidden { display: none; }
.team-no-lbl { font-size: 14px; font-weight: 700; letter-spacing: 0.4px; opacity: 0.95; }
.team-no-pill {
  font-size: 38px; font-weight: 900; letter-spacing: 2px;
  font-family: "Courier New", monospace; line-height: 1;
}
.team-no-hint { font-size: 12px; opacity: 0.9; margin: 0; line-height: 1.4; }
.team-no-inline {
  display: inline-block; padding: 1px 7px; margin-inline-end: 6px;
  background: var(--red); color: #fff; font-weight: 800;
  font-family: "Courier New", monospace; font-size: 13px; letter-spacing: 1px;
  vertical-align: 2px;
}
/* Per-team colored #NNN badge — background color is set inline by
   renderTeamLabel() based on the team's number, so each team's badge
   reads at a glance in match lists, blackboards, and standings. */
.team-badge {
  display: inline-block; padding: 1px 7px; margin-inline-end: 4px;
  color: #fff; font-weight: 800;
  font-family: "Courier New", monospace; font-size: 12px; letter-spacing: 1px;
  vertical-align: 1px; line-height: 1.45;
}
/* Scoring panel: score input sits right next to its team, so each
   side is visually one unit. Winner side gets a gold tint and 🏆 — live
   while typing, and after save in the played-matches list. */
.score-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  line-height: 1.6;
}
.score-row.played { font-size: 15px; }
.score-side {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  border: 2px solid transparent;
  transition: background 120ms, border-color 120ms;
}
.score-input {
  width: 52px; text-align: center;
  font-weight: 800; font-size: 18px; padding: 6px 4px;
  font-family: "Courier New", monospace;
}
.score-num {
  display: inline-block; min-width: 28px; text-align: center;
  font-weight: 900; font-size: 22px;
  font-family: "Courier New", monospace; color: var(--blue);
}
.vs-mid {
  color: var(--muted); font-size: 13px; font-weight: 700;
  padding: 0 4px;
}
.score-side.winner {
  background: #fef3c7;            /* amber-100 */
  border-color: #f59e0b;          /* amber-500 */
  font-weight: 800;
}
.score-side.winner::after {
  content: " 🏆"; margin-inline-start: 4px;
}
/* Leaderboard tab strip — used on the public /leaderboard and on the
   admin standings panel. Each tab is a flat pill that flips to the
   brand blue when active. Wraps to multiple rows on narrow screens. */
.lb-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 14px 0 6px;
}
.lb-tab {
  padding: 7px 14px; border: 2px solid var(--blue);
  background: transparent; color: var(--blue);
  font-weight: 700; font-size: 14px;
  cursor: pointer; font-family: inherit;
  transition: background 120ms, color 120ms;
}
.lb-tab.on { background: var(--blue); color: #fff; }
.lb-tab:hover:not(.on) { background: rgba(10, 49, 97, 0.08); }
/* Per-restaurant champion row — soft golden tint + bold text so the
   Coca-Cola mini-fridge winner pops out of the table. */
tr.rest-champ {
  background: linear-gradient(90deg, rgba(254, 243, 199, 0.6), rgba(254, 243, 199, 0));
  font-weight: 800;
}

/* Match history on /signup. Summary tiles + per-match cards with
   W/L coloring. Mobile collapses to 2-col grid (date row underneath). */
.mm-summary {
  display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap;
}
.mm-stat {
  flex: 1 1 90px; min-width: 90px;
  background: var(--blue-tint, #eef3fb);
  padding: 10px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border-inline-start: 3px solid var(--blue);
}
.mm-stat b {
  font-size: 22px; font-weight: 900; color: var(--blue);
  font-family: "Courier New", monospace;
}
.mm-stat span { font-size: 12px; color: #6b7280; }
.mm-stat.mm-stat-win { border-color: #16a34a; }
.mm-stat.mm-stat-win b { color: #16a34a; }
.mm-stat.mm-stat-loss { border-color: #9ca3af; }
.mm-list { display: flex; flex-direction: column; gap: 6px; }
.mm-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 10px; align-items: center;
  padding: 8px 12px;
  border-inline-start: 3px solid #d1d5db;
}
.mm-row-win { border-color: #16a34a; background: #f0fdf4; }
.mm-row-loss { border-color: #9ca3af; background: #f9fafb; }
.mm-result {
  font-weight: 800; font-size: 12px; letter-spacing: 0.5px;
  padding: 3px 8px; min-width: 40px; text-align: center;
}
.mm-row-win .mm-result { background: #16a34a; color: #fff; }
.mm-row-loss .mm-result { background: #9ca3af; color: #fff; }
.mm-score b {
  font-size: 18px; font-weight: 900;
  font-family: "Courier New", monospace; color: var(--blue);
}
.mm-opp { font-size: 14px; }
.mm-meta { font-size: 12px; color: #6b7280; white-space: nowrap; }
@media (max-width: 540px) {
  .mm-row { grid-template-columns: auto 1fr; grid-template-rows: auto auto; }
  .mm-result { grid-row: 1 / 3; align-self: center; }
  .mm-opp, .mm-score { grid-column: 2; }
  .mm-meta { grid-column: 1 / 3; font-size: 11px; }
}

/* Public /stats wall — counter grid + hero-stats row + leader lists.
   The big counters scale up on wide viewports; everything stacks
   gracefully on mobile (auto-fit on the grids). */
.stat-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-bottom: 22px;
}
.stat-card {
  background: var(--blue-tint, #eef3fb);
  padding: 18px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border-block-start: 4px solid var(--blue);
  text-align: center;
}
.stat-card.big {
  background: var(--blue);
  color: #fff;
  border-color: var(--red);
}
.stat-card.big .stat-num { color: #fff; }
.stat-card.big .stat-lbl { color: rgba(255,255,255,0.9); }
.stat-num {
  font-size: 42px; font-weight: 900;
  font-family: "Courier New", monospace; color: var(--blue);
  line-height: 1;
}
.stat-lbl {
  font-size: 13px; font-weight: 700; letter-spacing: 0.3px;
  color: #6b7280;
}
.stat-row {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-bottom: 22px;
}
.stat-hero {
  background: #fff; padding: 16px;
  border-inline-start: 4px solid var(--red);
}
.stat-hero-body {
  margin-top: 8px; font-size: 16px; line-height: 1.6;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.stat-score {
  font-family: "Courier New", monospace; font-size: 20px;
  font-weight: 900; color: var(--red);
  padding: 0 4px;
}
.stat-meta {
  font-size: 12px; color: #6b7280; margin-inline-start: 6px;
  white-space: nowrap;
}
.stat-leaders {
  background: #fff; padding: 16px; margin-bottom: 12px;
  border-inline-start: 4px solid #f59e0b;
}
.stat-leader-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 0;
  border-block-end: 1px solid #f3f4f6;
}
.stat-leader-row:last-child { border-block-end: 0; }
.stat-rest-name {
  font-weight: 700; min-width: 130px;
}

/* Final-night bracket. Stage-by-stage stacked layout — clean and
   readable on every viewport. Champion banner sits above when the
   final is decided. Used by both /bracket and the embed inside
   /admin#final. */
.bracket-stage {
  margin-bottom: 18px;
}
.bracket-stage-title {
  color: var(--blue);
  font-size: 16px; font-weight: 800;
  margin: 0 0 8px;
  letter-spacing: 0.3px;
}
.bracket-final-title {
  color: var(--red);
  font-size: 18px;
}
.bracket-stage-cards {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.bracket-card {
  background: #fff;
  border: 2px solid #d1d5db;
  padding: 4px;
  display: flex; flex-direction: column;
}
.bracket-card.bracket-final {
  border-color: var(--red);
  box-shadow: 0 2px 12px rgba(230,0,5,0.15);
}
.bracket-card.pending { background: #f9fafb; }
.bc-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 12px;
  border-block-end: 1px solid #f3f4f6;
}
.bracket-card .bc-row:last-child { border-block-end: 0; }
.bc-row.winner {
  background: #fef3c7;
  border-inline-start: 3px solid #f59e0b;
  font-weight: 800;
}
.bc-row.winner::after {
  content: "🏆"; margin-inline-start: 4px;
}
.bc-team {
  flex: 1; font-size: 15px;
  display: flex; align-items: center; gap: 6px;
}
.bc-score {
  font-family: "Courier New", monospace;
  font-size: 22px; font-weight: 900;
  color: var(--blue); min-width: 36px;
  text-align: center;
}
.bc-row.winner .bc-score { color: #f59e0b; }
.bracket-champ-banner {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #fff;
  padding: 26px 20px; margin-bottom: 22px;
  text-align: center;
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.4);
}
.bracket-trophy { font-size: 48px; line-height: 1; }
.bracket-champ-lbl {
  font-size: 14px; font-weight: 700; letter-spacing: 1px;
  margin-top: 6px; opacity: 0.95;
}
.bracket-champ-team {
  font-size: 26px; font-weight: 900; margin: 8px 0;
  display: flex; justify-content: center; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.bracket-champ-score {
  font-family: "Courier New", monospace;
  font-size: 20px; font-weight: 800; opacity: 0.9;
}
/* The mini bracket embedded inside /admin#final stays compact —
   smaller cards, no champion-banner shadow drama (the admin view
   has its own champ-banner block for that). */
.bracket-mini .bracket-card { font-size: 14px; }
.bracket-mini .bracket-stage-title { font-size: 14px; }

/* Match wrapper around each bracket card — adds the date/time meta
   pill on top and the status pill at the bottom. */
.bracket-match {
  display: flex; flex-direction: column; gap: 6px;
}
.bm-meta {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; flex-wrap: wrap;
  font-size: 12px; font-weight: 700;
  padding: 0 2px;
}
.bm-stage {
  color: var(--blue); letter-spacing: 0.5px;
}
.bracket-match-final .bm-stage { color: var(--red); }
.bm-when {
  color: #6b7280; font-weight: 600;
  font-family: "Courier New", monospace;
}
.bm-status {
  font-size: 12px; font-weight: 800; letter-spacing: 0.4px;
  padding: 5px 10px; align-self: flex-start;
}
.bm-status-pending {
  background: #f3f4f6; color: #6b7280;
}
.bm-status-played {
  background: #fef3c7; color: #b45309;
}

/* Vertical connector between stages — a chevron-like ↓ that signals
   the winner of one stage flows into the next. */
.bracket-flow {
  display: flex; flex-direction: column; gap: 22px;
}
.bracket-arrow {
  text-align: center; font-size: 28px; line-height: 1;
  color: var(--blue); opacity: 0.4;
  margin: -4px 0;
}

.bracket-no-third {
  background: #f9fafb; border-inline-start: 3px solid #d1d5db;
  padding: 12px 14px; color: #6b7280; font-style: italic;
}
/* Skeleton cards (Final placeholder before SFs decide it) — same
   geometry as a real card, but the placeholder team labels are
   italic + muted so a spectator can see at a glance that those rows
   will get filled in. */
.bracket-card.pending .bc-placeholder {
  font-style: italic; color: #6b7280; font-weight: 600;
}
.bracket-match-skeleton .bracket-card { background: #fafafa; }

/* Carlsberg — official sponsor. Three presentations:
   .brand-sponsor — topbar slot, white card next to the Agadir logo.
     Sits right beside the brand so the partnership is the first
     thing anyone sees, and the white pill keeps the green wordmark
     legible against the red topbar.
   .sponsor-mark — quiet footer mention, always-on, ~22px tall.
   The Carlsberg SVG uses the brand green (#3a8758) inline, so no
   CSS color override needed. */
.brand-sponsor {
  display: inline-flex; align-items: center;
  text-decoration: none; line-height: 0;
}
/* Carlsberg logo bumped ~10% (28→31px, 22→24px on mobile) per the
   sponsor's preference for a slightly larger lockup. */
.brand-sponsor img {
  height: 31px; width: auto; display: block;
}
@media (max-width: 480px) {
  .brand-sponsor img { height: 24px; }
}
.sponsor-mark {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 14px;
}
/* Sponsor activation: the Carlsberg logo carries the message on its
   own — owner asked to drop the "ספונסר רשמי" / "Official Sponsor"
   caption. Span stays in the DOM (keeps the i18n hook for future
   reuse) but display:none takes it off the page. */
.sponsor-mark .sponsor-lbl { display: none; }
.sponsor-mark img {
  height: 31px; width: auto; display: block;
}
.modal-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.modal-actions .btn { flex: 1 1 160px; padding: 12px 18px; font-size: 15px; }
.modal-actions .btn.ghost {
  background: transparent; color: var(--blue);
  border: 1.5px solid var(--blue);
}
.modal-actions .btn.ghost:hover { background: var(--blue); color: #fff; }

.msg { padding: 12px 14px; border-radius: 10px; font-weight: 700; margin: 12px 0; display: none; }
.msg.ok { background: #e7f7ec; color: #1d7a3a; display: block; }
.msg.err { background: #fdeaea; color: #c01622; display: block; }
.note { color: var(--muted); font-size: 13px; }

/* Home: slim 'your next match' banner above the hero (signed-in only) */
.home-next-match {
  background: var(--blue); color: #fff;
  padding: 12px 22px; text-align: center;
  font-size: 15px; font-weight: 700;
  border-bottom: 4px solid var(--red);
}
.home-next-match a {
  color: #fff; text-decoration: underline;
  text-underline-offset: 3px; font-weight: 800;
  margin-inline-start: 10px; white-space: nowrap;
}

/* /signup page — brand hero band at top */
.signup-hero {
  background: var(--red);
  color: #fff;
  padding: 38px 18px 32px;
  border-bottom: 5px solid var(--blue);
  text-align: center;
}
.signup-hero-inner {
  max-width: 760px; display: flex; flex-direction: column;
  align-items: center; gap: 14px;
}
.signup-h1 {
  color: #fff; font-size: clamp(28px, 5vw, 46px);
  line-height: 1.05; margin: 0;
}
.signup-hero .hero-dates {
  display: inline-block; color: #fff;
  background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.45);
  font-weight: 700; font-size: clamp(13px, 1.25vw, 16px);
  padding: 6px 14px; border-radius: 0;
}
.signup-body { padding-top: 32px; }

/* Signup page: 5-step recap above the form */
.recap {
  list-style: none; padding: 0; margin: 0 0 26px;
  display: grid; gap: 8px;
}
.recap li {
  display: flex; align-items: center; gap: 12px;
  background: var(--blue-tint);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--blue);
  border-radius: 10px;
  padding: 10px 14px; font-size: 15px; color: var(--blue);
  line-height: 1.45;
}
.recap li b {
  flex: 0 0 28px; height: 28px; border-radius: 50%;
  background: var(--blue); color: #fff;
  font-family: "swh", sans-serif; font-size: 16px;
  display: grid; place-items: center; font-weight: normal;
}
.recap li.win { background: #ffe6e6; border-color: var(--red); border-inline-start-color: var(--red); }
.recap li.win b { background: var(--red); }
.recap li span { flex: 1; }

/* Signup: social proof pill — sits above the personal panel */
.social-proof {
  text-align: center; padding: 10px 16px; margin: 0 0 14px;
  background: var(--blue); color: #fff;
  border-top: 3px solid var(--red); border-bottom: 3px solid var(--red);
  border-radius: 12px; font-weight: 700; font-size: 15px;
}
.social-proof b { font-family: "swh", sans-serif; font-size: 22px; color: #fff; margin: 0 4px; }

/* Signup: personal panel (next-match + rank cards, signed-in only) */
.personal-panel { display: grid; gap: 10px; margin-bottom: 18px; }
.personal-card {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 16px;
}
.personal-card.next-match { border-inline-start: 5px solid var(--red); }
.personal-card.rank-card  { border-inline-start: 5px solid var(--blue); }
.personal-card .pc-text { flex: 1 1 60%; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.personal-card .pc-label {
  font-size: 12px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
}
.personal-card .pc-value { font-size: 15px; color: var(--ink); font-weight: 600; }
.personal-card .pc-cta {
  background: var(--blue); color: #fff; padding: 8px 14px; font-size: 13px;
}
.personal-card .pc-cta:hover { background: var(--blue); color: #fff; filter: brightness(1.12); }
.personal-card .pc-link {
  color: var(--blue); font-weight: 800; text-decoration: underline;
  text-underline-offset: 3px; font-size: 14px; white-space: nowrap;
}

.signin-card { text-align: center; padding: 36px 26px; border-top: 4px solid var(--red); }
.signin-card p { font-size: 16px; color: var(--blue); }
.signin-card .btn { font-size: 16px; padding: 13px 28px; }

/* Signup form: bigger submit so it doesn't get lost at the bottom */
#regForm .btn[type="submit"] {
  width: 100%; padding: 14px 22px; font-size: 17px;
  margin-top: 6px;
}
.userline { display: flex; align-items: center; gap: 10px; justify-content: space-between;
  background: var(--blue-tint); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin-bottom: 18px; }
.userline .who { font-weight: 700; font-size: 14px; }
/* Sign-out button sits on a light .userline background, so override the
   white-on-transparent .lang-btn base (designed for the red header). */
.userline #signoutBtn {
  background: var(--red); color: #fff; border: 0; font-weight: 800;
  padding: 8px 16px;
}
.userline #signoutBtn:hover,
.userline #signoutBtn:focus { background: var(--red); color: #fff; filter: brightness(1.06); }

/* ---- Tables -------------------------------------------------------------*/
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 12px; text-align: start; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
tr.qualifier td {
  background: #ffe6e6; font-weight: 800; color: var(--ink);
}
tr.qualifier td:first-child { border-inline-start: 5px solid var(--red); }
tr.qline td { border-bottom: 3px solid var(--blue); }
.badge { background: var(--blue); color: #fff; font-weight: 800; font-size: 12px;
  border-radius: 999px; padding: 3px 10px; }
.pill { font-size: 12px; font-weight: 800; border-radius: 999px; padding: 3px 10px; }
.pill.pending { background: #fff3d6; color: #92670a; }
.pill.table_reserved { background: #e7f7ec; color: #1d7a3a; }
.pill.cancelled { background: #eee; color: #777; }

footer { background: var(--ink); color: #cfcfcf; text-align: center; padding: 26px; font-size: 13px;
  border-top: 5px solid var(--red); }
/* Gender-neutral disclaimer — lives at the bottom of the 'How it works'
   band (where the masculine-form copy is densest), not in the footer. */
.gender-note {
  margin-top: 16px; font-size: 12px;
  color: rgba(255,255,255,.72);
  font-style: italic; text-align: center;
}

/* ===== Accessibility widget ============================================ */
/* Page text size is driven by the A−/A/A+ buttons via `zoom` on every
   top-level body child except the widget. We use `zoom` (not `font-size
   on <html>`) because the rest of the stylesheet sizes things in px,
   so a html-font-size change would have no visible effect. The widget
   itself stays at default size so it never grows off-screen. */
body > *:not(.a11y-fab):not(.a11y-panel) { zoom: var(--a11y-font-scale, 1); }

.a11y-fab {
  position: fixed; bottom: 18px; inset-inline-end: 18px;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--blue); color: #fff; border: 2px solid #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.32);
  display: grid; place-items: center; cursor: pointer; z-index: 1000;
  padding: 0;
}
.a11y-fab:hover { filter: brightness(1.1); }
.a11y-fab:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.a11y-panel {
  position: fixed; bottom: 80px; inset-inline-end: 18px;
  width: 290px; max-width: calc(100vw - 36px);
  max-height: calc(100vh - 110px); overflow-y: auto;
  background: #fff; color: var(--ink);
  border: 2px solid var(--blue); border-radius: 16px;
  padding: 14px 14px 12px;
  box-shadow: 0 14px 36px rgba(0,0,0,.32); z-index: 1001;
  font-family: "Rubik", system-ui, sans-serif;
}
.a11y-panel.hidden { display: none; }
.a11y-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.a11y-head h2 {
  font-family: "Rubik", system-ui, sans-serif; font-size: 17px;
  color: var(--blue); text-transform: none; letter-spacing: 0; font-weight: 800;
}
.a11y-close {
  background: none; border: 0; font-size: 26px; line-height: 1;
  cursor: pointer; color: var(--blue); padding: 0 6px;
}
.a11y-close:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.a11y-row {
  display: flex; align-items: center; justify-content: space-between;
  margin: 6px 0 10px; font-size: 14px; gap: 8px;
}
.a11y-grp { display: flex; gap: 6px; }
.a11y-grp button {
  font-family: inherit; padding: 6px 10px; min-width: 38px;
  border: 1.5px solid var(--blue); background: #fff; color: var(--blue);
  border-radius: 0; cursor: pointer; font-weight: 700; font-size: 14px;
}
.a11y-grp button:hover { background: var(--blue-tint); }
.a11y-grp button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.a11y-toggle {
  display: block; width: 100%; text-align: start; font-family: inherit;
  padding: 9px 12px; margin: 4px 0;
  background: #fff; color: var(--ink); border: 1.5px solid var(--line);
  border-radius: 0; font-size: 14px; font-weight: 600; cursor: pointer;
}
.a11y-toggle:hover { border-color: var(--blue); }
.a11y-toggle.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.a11y-toggle:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.a11y-reset {
  display: block; width: 100%; margin-top: 8px; padding: 9px;
  background: var(--red); color: #fff; border: 0; border-radius: 0;
  font-family: inherit; font-weight: 800; font-size: 14px; cursor: pointer;
}
.a11y-reset:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.a11y-foot {
  margin-top: 10px; text-align: center; font-size: 13px;
}
.a11y-foot a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }

/* ---- state classes applied to <body> ---- */
body.a11y-high-contrast { background: #000 !important; color: #fff !important; }
body.a11y-high-contrast .topbar,
body.a11y-high-contrast .hero,
body.a11y-high-contrast .band-blue,
body.a11y-high-contrast .band-red,
body.a11y-high-contrast .party,
body.a11y-high-contrast .goal-band,
body.a11y-high-contrast footer,
body.a11y-high-contrast .panel,
body.a11y-high-contrast section { background: #000 !important; color: #fff !important; }
body.a11y-high-contrast *:not(.a11y-fab):not(.a11y-fab *):not(.a11y-panel):not(.a11y-panel *) {
  background-color: transparent !important; color: #fff !important;
  border-color: #fff !important;
}
body.a11y-high-contrast a:not(.btn):not(.brand),
body.a11y-high-contrast .btn,
body.a11y-high-contrast .lang-btn { color: #ff0 !important; border-color: #ff0 !important; }

/* Apply greyscale to every top-level page child EXCEPT the widget
   itself; filter on <body> propagates to descendants, so the widget
   would also turn grey and become hard to spot. */
body.a11y-greyscale > *:not(.a11y-fab):not(.a11y-panel) { filter: grayscale(1); }

body.a11y-links a:not(.btn):not(.brand):not(.a11y-foot a) {
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  font-weight: 800 !important;
}

body.a11y-readable,
body.a11y-readable h1,
body.a11y-readable h2,
body.a11y-readable h3,
body.a11y-readable .display,
body.a11y-readable .brand,
body.a11y-readable .hero-copy h1,
body.a11y-readable .section-title,
body.a11y-readable .goal-band h2,
body.a11y-readable .party-cap h2,
body.a11y-readable .a11y-fab,
body.a11y-readable .a11y-panel * {
  font-family: Arial, "Open Sans", "Segoe UI", system-ui, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.a11y-pause-anim *,
body.a11y-pause-anim *::before,
body.a11y-pause-anim *::after {
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
  transition: none !important;
}

@media (max-width: 520px) {
  .a11y-fab { width: 46px; height: 46px; bottom: 14px; inset-inline-end: 14px; }
  .a11y-panel { bottom: 68px; inset-inline-end: 14px; width: calc(100vw - 28px); }
}
footer .brand { font-size: 20px; justify-content: center; color: #fff; }
footer .brand img { height: 36px; margin-bottom: 6px; }
footer a, .footlinks a { color: #fff; text-decoration: underline; }
footer a:hover { color: #fff; opacity: .8; }
.hidden { display: none !important; }

/* Audit log: muted-blue inline span for the extracted detail (team
   labels + score + slot) so it sits visibly within the "what" cell
   without competing with the bold action label that precedes it. */
.audit-detail {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-inline-start: 6px;
}

/* ---- Landing-page arrival animation -----------------------------------
   Triggered once per session by /js/landing-animation.js when the user
   first lands on the home page. Confetti pieces fall from above the
   viewport while a foosball ball drops in, bounces twice, and fades
   out. Whole overlay is pointer-events:none so the page is clickable
   throughout. */
.landing-fx {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  top: -20px; left: 0;
  animation: confetti-fall ease-in forwards;
  will-change: transform, opacity;
}
@keyframes confetti-fall {
  0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate(var(--dx, 0), 110vh) rotate(var(--rot, 720deg));
         opacity: 0; }
}
.landing-ball {
  position: absolute;
  width: 64px; height: 64px;
  /* Site has border-radius:0 !important globally, so the rounded ball
     uses clip-path instead. Same visual outcome, different property. */
  clip-path: circle(50%);
  /* The actual Agadir-branded foosball photo, square-cropped tight on
     the ball so clip-path:circle(50%) shows exactly the ball with the
     "AGADIR BURGER" wordmark visible as it rotates. */
  background: url("/img/ball-icon.png") center / cover no-repeat;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.42));
  top: -80px;
  transform: translateX(-50%);
  animation: ball-drop 2.7s cubic-bezier(.5, 0, .5, 1) forwards;
  will-change: top, transform, opacity;
}
@keyframes ball-drop {
  /* drop in, first impact, ~half-height bounce, second impact, fade */
  0%   { top: -80px;             transform: translateX(-50%) rotate(0);                    opacity: 1; }
  38%  { top: calc(var(--land, 50vh) - 32px); transform: translateX(-50%) rotate(calc(var(--rot, 1080deg) * 0.33)); }
  46%  { top: calc(var(--land, 50vh) - 32px); transform: translateX(-50%) rotate(calc(var(--rot, 1080deg) * 0.38)); }
  62%  { top: calc(var(--land, 50vh) - 32px - 22vh); transform: translateX(-50%) rotate(calc(var(--rot, 1080deg) * 0.57)); }
  74%  { top: calc(var(--land, 50vh) - 32px); transform: translateX(-50%) rotate(calc(var(--rot, 1080deg) * 0.74)); }
  82%  { top: calc(var(--land, 50vh) - 32px - 10vh); transform: translateX(-50%) rotate(calc(var(--rot, 1080deg) * 0.83)); }
  92%  { top: calc(var(--land, 50vh) - 32px); transform: translateX(-50%) rotate(calc(var(--rot, 1080deg) * 0.94)); opacity: 1; }
  100% { top: calc(var(--land, 50vh) - 32px); transform: translateX(-50%) rotate(var(--rot, 1080deg));               opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-fx { display: none !important; }
}

/* ---- Consent + legal pages ---------------------------------------------*/
.consent {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; font-weight: 600; margin: 6px 0 4px; cursor: pointer;
}
.consent input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--red); }
.consent-links { margin: 0 0 16px 28px; }
.consent-links a { font-weight: 700; }

.legal { max-width: 820px; }
.legal h1 { margin-bottom: 6px; }
.legal h2 {
  font-family: "swh", "Rubik", system-ui, sans-serif; color: var(--blue);
  font-size: 22px; margin: 28px 0 8px; text-transform: none;
}
.legal p, .legal li { color: var(--ink); font-size: 16px; line-height: 1.7; }
.legal ul { margin: 6px 0 6px 1.1em; padding-inline-start: 1.1em; list-style: disc; }
.legal li { margin-bottom: 6px; }
.legal .muted { color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.legal b { color: var(--blue); }

/* ---- Admin panel -------------------------------------------------------- */
.admin-tag {
  font-family: "swh", sans-serif; color: #fff; background: rgba(255,255,255,.15);
  letter-spacing: .1em;
  border: 1.5px solid rgba(255,255,255,.7); border-radius: 7px;
  padding: 4px 11px; font-size: 14px;
}
.admin-wrap { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
.admin-nav { display: flex; flex-direction: column; gap: 5px; position: sticky; top: 80px; }
.anav {
  font-family: inherit; text-align: start; cursor: pointer;
  background: #fff; color: var(--blue); border: 1.5px solid var(--line);
  border-radius: 0; padding: 11px 14px;
  padding-inline-start: 42px;          /* room for the icon at the start edge */
  font-weight: 700; font-size: 15px;
  position: relative;
  transition: background-color .12s ease, border-color .12s ease,
              transform .08s ease, box-shadow .12s ease;
}
/* Sidebar icons — clean line SVGs (Lucide / Material style), masked to
   currentColor so they inherit the button text colour (navy when idle,
   white when the tab is active). 20px square, anchored to the inline-
   start edge of each .anav button. */
.anav::before {
  content: "";
  position: absolute; inset-inline-start: 13px; top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px; pointer-events: none;
  background-color: currentColor;
  -webkit-mask: var(--anav-icon) center / contain no-repeat;
          mask: var(--anav-icon) center / contain no-repeat;
}
.anav[data-tab="dashboard"]    { --anav-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='9'/><rect x='14' y='3' width='7' height='5'/><rect x='14' y='12' width='7' height='9'/><rect x='3' y='16' width='7' height='5'/></svg>"); }
.anav[data-tab="reservations"] { --anav-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='8' y='2' width='8' height='4' rx='1'/><path d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/><path d='M9 12h6'/><path d='M9 16h6'/></svg>"); }
.anav[data-tab="schedule"]     { --anav-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><path d='M16 2v4'/><path d='M8 2v4'/><path d='M3 10h18'/><path d='m9 16 2 2 4-4'/></svg>"); }
.anav[data-tab="scoring"]      { --anav-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 2 8 8h8z'/><path d='m8 8-5 4 5 4'/><path d='m16 8 5 4-5 4'/><path d='m8 16 4 6 4-6'/></svg>"); }
.anav[data-tab="standings"]    { --anav-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/><path d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/><path d='M4 22h16'/><path d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/><path d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/><path d='M18 2H6v7a6 6 0 0 0 12 0V2Z'/></svg>"); }
.anav[data-tab="managers"]     { --anav-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='7' width='20' height='14' rx='2'/><path d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/></svg>"); }
.anav[data-tab="employees"]    { --anav-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>"); }
.anav[data-tab="restaurants"]  { --anav-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 11v9a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-9'/><path d='M2 8h20l-2-5H4Z'/><path d='M9 8v-5'/><path d='M15 8v-5'/></svg>"); }
.anav[data-tab="users"]        { --anav-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>"); }
.anav[data-tab="final"]        { --anav-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><circle cx='12' cy='12' r='6'/><circle cx='12' cy='12' r='2'/></svg>"); }
.anav[data-tab="audit"]        { --anav-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><path d='M14 2v6h6'/><path d='M16 13H8'/><path d='M16 17H8'/><path d='M10 9H8'/></svg>"); }
.anav[data-tab="manual"]       { --anav-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/><path d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/></svg>"); }
.anav:hover { background: var(--blue-tint); border-color: var(--blue); }
.anav.on {
  background: var(--red); color: #fff; border-color: var(--red);
  box-shadow: 0 6px 18px rgba(230,0,5,.32);
}
.admin-main { min-width: 0; }
.admin-userbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fff; border: 1px solid var(--line);
  border-inline-start: 4px solid var(--red);
  border-radius: 12px; padding: 11px 16px; margin-bottom: 18px;
  box-shadow: 0 4px 14px rgba(10,49,97,.05);
}
.who-pill { font-weight: 700; font-size: 13px; color: var(--blue);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-tag { white-space: nowrap; }

.admin-burger { display: none; }
.admin-scrim { display: none; }

@media (max-width: 820px) {
  .admin-wrap { grid-template-columns: 1fr; gap: 14px; }
  .admin-burger {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--red); color: #fff; border: 0; border-radius: 0;
    padding: 11px 16px; font-weight: 800; font-size: 15px; cursor: pointer;
    font-family: inherit;
  }
  /* Off-canvas drawer replaces the horizontal tab scroll */
  .admin-nav {
    position: fixed; top: 0; bottom: 0; left: 0;
    width: 274px; max-width: 85vw; z-index: 210;
    background: #fff; box-shadow: 0 0 44px rgba(0,0,0,.4);
    padding: 20px 14px; gap: 8px; overflow-y: auto;
    transform: translateX(-112%); transition: transform .25s ease;
  }
  .admin-nav.open { transform: translateX(0); }
  .anav { padding: 14px 16px; padding-inline-start: 46px; font-size: 16px; }
  .admin-scrim {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45);
    z-index: 200; opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  .admin-scrim.on { opacity: 1; pointer-events: auto; }
  .admin-userbar { flex-wrap: wrap; }
}

/* Admin: staff management */
.staff-add { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.staff-add input, .staff-add select, .staff-search,
.staff-act select {
  padding: 9px 11px; border: 1.5px solid #c9c9c9; border-radius: 9px;
  font-size: 15px; font-family: inherit; background: #fff; color: var(--blue);
}
.staff-add input { flex: 1 1 200px; }
.staff-search { width: 100%; margin: 0; }
.staff-filters {
  display: flex; gap: 8px; margin: 0 0 14px; flex-wrap: wrap;
  align-items: stretch;
}
.staff-filters .staff-search { flex: 1 1 220px; min-width: 0; }
.staff-role-filter {
  flex: 0 0 auto; min-width: 160px;
  padding: 9px 11px; border: 1.5px solid #c9c9c9; border-radius: 0;
  font-size: 15px; font-family: inherit; background: #fff; color: var(--blue);
}
/* Collapsible 'Add by email' form — search/browse is the primary
   action, adding by email is for users who haven't signed in yet. */
.staff-add-fold {
  margin-top: 16px; padding: 10px 14px;
  background: var(--blue-tint); border: 1px solid var(--line);
}
.staff-add-fold > summary {
  cursor: pointer; font-weight: 800; color: var(--blue);
  font-size: 14px; list-style: none; user-select: none;
}
.staff-add-fold > summary::-webkit-details-marker { display: none; }
.staff-add-fold > summary::before {
  content: "▸"; display: inline-block; margin-inline-end: 6px;
  transition: transform .15s ease;
}
.staff-add-fold[open] > summary::before { transform: rotate(90deg); }
.staff-add-fold[open] .staff-add { margin-top: 12px; }
.staff-add-fold .staff-add { margin-bottom: 0; }
.staff-act { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.btn.sm { padding: 7px 12px; font-size: 13px; }
.btn.sm.ghost { background: #fff; color: var(--blue); border: 1.5px solid var(--line); }
.staff-act select { font-size: 13px; padding: 7px 9px; }
#staffList td { vertical-align: middle; }
#staffList td .note { font-weight: 400; }

/* Admin: overview dashboard */
.kpi-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.kpi {
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--red);
  border-radius: 14px; padding: 18px 16px;
  background: #fff; box-shadow: 0 8px 22px rgba(10,49,97,.06); text-align: center;
  transition: transform .12s ease, box-shadow .12s ease;
}
.kpi:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(10,49,97,.12); }
.kpi-n {
  font-family: "swh", sans-serif; font-size: clamp(30px, 4.2vw, 44px);
  color: var(--red); line-height: 1;
}
.kpi-l { color: var(--blue); font-weight: 700; font-size: 13px; margin-top: 8px;
  text-transform: uppercase; letter-spacing: .04em; }

/* Admin Dashboard: 'Action needed' banner — restaurants with pending regs */
.action-needed {
  background: #fff5f5; border: 2px solid var(--red);
  border-inline-start: 5px solid var(--red);
  padding: 14px 18px; margin-bottom: 16px;
}
.action-needed-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.action-needed-head .action-icon { font-size: 22px; line-height: 1; }
.action-needed-head h3 {
  color: var(--red); font-size: 17px; margin: 0;
  font-family: "Rubik", system-ui, sans-serif; font-weight: 800;
  text-transform: none; letter-spacing: 0;
}
.action-needed-head h3 b { font-family: "swh", "Rubik", sans-serif; font-size: 22px; }
.action-needed-list {
  display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.action-rest {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: #fff;
  border: 1.5px solid var(--red); cursor: pointer;
  font-family: inherit; font-size: 15px; color: var(--ink);
  text-align: start;
  transition: background-color .12s ease, color .12s ease, transform .06s ease;
}
.action-rest:hover { background: var(--red); color: #fff; transform: translateY(-1px); }
.action-rest .rest-name { flex: 1; font-weight: 800; min-width: 0; }
.action-rest .rest-count {
  background: var(--red); color: #fff;
  padding: 2px 9px; font-size: 13px; font-weight: 800;
  font-family: "swh", sans-serif;
}
.action-rest:hover .rest-count { background: #fff; color: var(--red); }
.action-rest .rest-arrow { font-size: 13px; font-weight: 800; white-space: nowrap; }

.action-clear {
  background: var(--blue-tint); color: var(--blue);
  border-inline-start: 4px solid var(--blue);
  padding: 11px 16px; margin-bottom: 16px;
  font-weight: 700; font-size: 15px;
}

/* Admin: reservations calendar (visual date picker across the tournament) */
.res-cal-bar { margin: 6px 0 14px; }
.res-cal-all { margin-bottom: 8px; }
.res-cal {
  display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
}
.res-cal-cell {
  background: #f8f9fb;
  border: 1px solid var(--line);
  padding: 8px 4px;
  text-align: center;
  cursor: pointer;
  font-family: inherit; color: var(--ink);
  min-height: 56px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
  transition: border-color .12s ease, background-color .12s ease, transform .06s ease;
}
.res-cal-cell:hover { border-color: var(--blue); background: var(--blue-tint); }
.res-cal-cell.selected {
  background: var(--blue); color: #fff; border-color: var(--blue);
  box-shadow: 0 4px 10px rgba(10,49,97,.3);
}
.res-cal-cell.has-pending:not(.selected) {
  border-inline-start: 4px solid var(--red);
  background: #fff5f5;
}
.res-cal-cell.empty { color: var(--muted); }
.res-cal-cell.empty .cell-date { opacity: .55; }
.res-cal-cell .cell-date { font-weight: 800; font-size: 14px; line-height: 1; }
.res-cal-cell .cell-stats { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
.res-cal-cell .dot {
  display: inline-block; padding: 1px 6px; min-width: 18px;
  font-weight: 800; font-size: 11px; line-height: 1.4;
}
.res-cal-cell .dot.pending { background: var(--red); color: #fff; }
.res-cal-cell .dot.confirmed { background: var(--blue); color: #fff; }
.res-cal-cell.selected .dot { filter: brightness(1.2); }
.res-cal-cell.selected .dot.confirmed { background: #fff; color: var(--blue); }
.res-cal-cell.selected .dot.pending { background: #fff; color: var(--red); }

/* Admin: reservations panel section headings (pending vs handled) */
.res-group-head {
  font-family: "swh", "Rubik", system-ui, sans-serif;
  font-size: 18px; font-weight: 800;
  margin: 22px 0 10px; padding: 9px 14px;
  text-transform: none; letter-spacing: 0;
  border-inline-start: 4px solid currentColor;
}
.res-group-head:first-of-type { margin-top: 0; }
.res-group-head.res-pending {
  color: var(--red);
  background: #ffe6e6;
}
.res-group-head.res-handled {
  color: var(--blue);
  background: var(--blue-tint);
}

/* Admin: staff guide / manual panel */
.manual { max-width: 780px; }
.manual h3 {
  color: var(--red); font-family: "swh", "Rubik", system-ui, sans-serif;
  font-size: 22px; margin: 26px 0 8px; text-transform: none; letter-spacing: 0;
  line-height: 1.15;
}
.manual h3:first-of-type { margin-top: 0; }
.manual h3 small { font-size: 14px; color: var(--blue); font-family: inherit; font-weight: 600; margin-inline-start: 6px; }
.manual p { color: var(--ink); font-size: 15px; line-height: 1.65; margin: 8px 0; }
.manual ul, .manual ol { margin: 6px 0 12px; padding-inline-start: 22px; }
.manual li { color: var(--ink); font-size: 15px; line-height: 1.6; margin-bottom: 6px; }
.manual li ul { margin-top: 4px; margin-bottom: 4px; }
.manual code {
  background: var(--blue-tint); padding: 2px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
}
.manual b { color: var(--blue); }
.manual-intro {
  background: var(--blue-tint); padding: 14px 16px;
  border-inline-start: 4px solid var(--blue); margin-bottom: 22px;
  color: var(--ink); line-height: 1.6;
}

/* Admin: section heading style — slim red rule below */
.admin-main > h2.section-title,
.admin-main #panel > h2.section-title {
  position: relative; padding-bottom: 10px; margin-bottom: 18px;
  font-size: clamp(24px, 3.4vw, 34px);
}
.admin-main > h2.section-title::after,
.admin-main #panel > h2.section-title::after {
  content: ""; position: absolute; inset-inline-start: 0; bottom: 0;
  width: 56px; height: 4px; background: var(--red); border-radius: 2px;
}
.dash-2col {
  display: grid; gap: 16px; margin-top: 16px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 720px) { .dash-2col { grid-template-columns: 1fr; } }

/* Footer Agadir badge emblem */
.foot-badge {
  height: 72px; width: auto; display: block; margin: 0 auto 12px;
  border-radius: 14px;
}

/* Header 'Admin' shortcut for staff — distinct navy so staff don't
   miss it among the other red pills in the bar. Higher specificity
   (`.topbar .authbox .admin-link`) beats the topbar's default
   white-pill-with-red-text rule for .btn. */
.topbar .authbox .admin-link,
.authbox .admin-link {
  background: var(--blue); color: #fff;
  border: 0; padding: 8px 16px;
  font-size: 14px; font-weight: 800;
  white-space: nowrap;
}
.topbar .authbox .admin-link:hover,
.authbox .admin-link:hover {
  background: var(--blue); color: #fff; filter: brightness(1.15);
}
@media (max-width: 640px) {
  .topbar .authbox .admin-link,
  .authbox .admin-link { padding: 7px 13px; font-size: 13px; }
}

/* ---- Header hamburger menu ---------------------------------------------- */
.navtog { position: absolute; opacity: 0; width: 1px; height: 1px;
  overflow: hidden; pointer-events: none; }
.bar-end { display: flex; align-items: center; gap: 12px; }
.hamb { display: none; }
.topbar .wrap { position: relative; }
.topbar .nav { margin-inline-start: 22px; }       /* desktop: links after logo */
.bar-end { margin-inline-start: auto; }            /* actions to the far end */

/* Mobile dropdown nav was here — removed. With only 2 nav links + the
   register CTA + language toggle, an always-visible inline header
   reads better than a hamburger drop-down that hides them. The earlier
   @media (max-width: 640px) block now carries the mobile header rules. */

/* "My registrations" cards */
.myreg-list { display: grid; gap: 10px; }
.myreg-card {
  border: 1px solid var(--line); border-left: 5px solid var(--blue);
  border-radius: 12px; padding: 12px 14px; background: #fff;
}
html[dir="rtl"] .myreg-card { border-left: 1px solid var(--line); border-right: 5px solid var(--blue); }
.myreg-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.myreg-rest { font-weight: 800; color: var(--blue); font-size: 16px; }
.myreg-when { color: var(--muted); font-size: 14px; margin-top: 4px; }

/* ===== Admin: mobile-friendly ============================================ */
@media (max-width: 760px) {
  .admin-wrap { gap: 12px; }
  .admin-userbar { flex-direction: column; align-items: stretch; gap: 8px; text-align: center; }
  .admin-userbar .who-pill { white-space: normal; }
  /* Preserve the icon reservation — `padding: ...` shorthand would
     otherwise clobber the desktop `padding-inline-start: 46px`, making
     the emoji icon overlap the Hebrew label. */
  .anav { font-size: 14px; padding: 11px 16px; padding-inline-start: 46px; }

  /* Interactive list tables (no <thead>) -> stacked cards */
  .admin-main table:not(:has(thead)) { display: block; }
  .admin-main table:not(:has(thead)) tbody,
  .admin-main table:not(:has(thead)) tr { display: block; }
  .admin-main table:not(:has(thead)) tr {
    border: 1px solid var(--line); border-inline-start: 5px solid var(--blue);
    border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: #fff;
  }
  .admin-main table:not(:has(thead)) td {
    display: block; border: 0; padding: 3px 0; text-align: start;
  }
  .admin-main table:not(:has(thead)) td.staff-act { margin-top: 8px; }

  /* Read-only tables with <thead> -> horizontal scroll, keep headers */
  .admin-main table:has(thead) { display: block; overflow-x: auto;
    -webkit-overflow-scrolling: touch; }

  /* Touch-friendly controls everywhere in admin */
  .admin-main input, .admin-main select {
    font-size: 16px; min-height: 44px; width: 100%;
  }
  .staff-add { flex-direction: column; }
  .staff-add input, .staff-add select, .staff-add .btn,
  .staff-search, #rPick, #sDate, #dWrap select, #sDWrap select,
  .staff-act, .staff-act select, .staff-act input, .staff-act .btn {
    width: 100%;
  }
  .staff-act { display: flex; flex-direction: column; gap: 8px; }
  .admin-main .btn, .admin-main .btn.sm {
    min-height: 44px; display: flex; align-items: center;
    justify-content: center; font-size: 15px;
  }
  .grid2 { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

/* Sign-out buttons in admin sit on light backgrounds — the .lang-btn
   base (white text/border) is invisible there. Make them visible. */
.admin-userbar #signoutBtn,
#denied #signoutBtn2 {
  background: var(--red); color: #fff; border: 0; font-weight: 800;
  padding: 9px 18px;
}
.admin-userbar #signoutBtn:hover,
#denied #signoutBtn2:hover { filter: brightness(1.06); color: #fff; }
@media (max-width: 760px) {
  .admin-userbar #signoutBtn { width: 100%; min-height: 44px; }
}

/* Admin: Final mode */
.seed-list { margin: 6px 0 6px 1.2em; padding-inline-start: 1.2em; }
.seed-list li { font-size: 16px; margin: 4px 0; color: var(--blue); }
.champ-banner {
  background: #ffe6e6; border: 2px solid var(--red); border-radius: 14px;
  padding: 16px; text-align: center; font-weight: 800; color: var(--ink);
  font-size: 18px; margin-bottom: 16px;
}
.champ-banner b { font-size: 22px; color: var(--red); }
.mk-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 10px; margin-bottom: 6px; flex-wrap: wrap;
}