/* ---------------------------------------------------------------------------
   Oázis nevezés. Az ügyfél kérése: olyan egyszerű legyen, mint a Tally
   űrlap volt. Fehér alap, egy oszlop, rendszerbetű (nincs letöltendő
   betűfájl, gyorsabb), a kategóriák és a méretek Tally színű csempék.
   A márka a logóban és a fekete gombban van, nem a felületben.
   --------------------------------------------------------------------------- */

:root {
  --ink: #37352f;
  --ink-soft: #6b6a66;
  --line: #e9e9e7;
  --field: #d9d9d6;
  --black: #0a0a0a;
  --red: #e11922;
  /* The Halloween Kupa banner: navy ground, pumpkin orange. The orange is the
     design system's autumn accent; the darker one reads on white. */
  --night: #090d1f;
  --night-2: #1a2036;
  --pumpkin: #f28a1e;
  --pumpkin-ink: #c4551a;
  --bad: #c4291f;
  --r: 8px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #fff; color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--ozk-h, 0px);
}
a { color: inherit; }

.hero { background: var(--night); }
.hero-in { max-width: 700px; margin: 0 auto; padding: 16px 20px 20px; text-align: center; }
/* The full lockup, white on the banner's own ground, as the design system
   asks: never the mark alone, never on a plate. */
.hero-logo { display: block; height: 56px; width: auto; margin: 0 auto 14px; }
.cover { border-radius: 14px; overflow: hidden; background: var(--night); }
/* Shown whole, never cropped: the banner carries its own type. */
.cover img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; }

.wrap { max-width: 700px; margin: 0 auto; padding: 0 20px 48px; }

/* Below the banner, not over it: on a phone the overlap would sit on the
   banner's category tags. */

.eyebrow { font-size: 14px; font-weight: 650; color: var(--pumpkin-ink); }
h1 { margin: 0 0 10px; font-size: clamp(32px, 7.4vw, 46px); line-height: 1.08; font-weight: 800; letter-spacing: -.02em; color: #2b2a26; }
.lead { margin: 22px 0 22px; font-size: 18px; line-height: 1.45; }

/* Proof under the lead: how many places are gone, and where they run out.
   Real numbers from /api/helyek, hidden until they arrive. */
.proof { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 18px; }
.proof[hidden] { display: none; }
.proof-item {
  display: inline-block; padding: 7px 12px; border-radius: 99px; white-space: nowrap;
  background: #f4f4f3; font-size: 15px; font-weight: 600; line-height: 1.2;
}
.proof-item b { font-weight: 800; font-variant-numeric: tabular-nums; }
.proof-item.hot { background: #fdeceb; color: var(--bad); }
.proof-item.hot::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; vertical-align: 1px;
  border-radius: 50%; background: currentColor;
}

/* The offer: the one dark block on the page, in the banner's colours, so the
   price and what comes with it read as the thing to look at. */
.offer {
  margin: 4px 0 0; padding: 22px 22px 20px; border-radius: 16px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, var(--night-2) 0%, var(--night) 60%);
}
.offer-head { margin-bottom: 16px; }
.offer-kicker { margin: 0 0 2px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pumpkin); }
.offer-title { margin: 0; font-size: 22px; font-weight: 750; letter-spacing: -.01em; line-height: 1.25; }

/* The price, just above the submit button. */
.price-box { margin: 4px 0 18px; padding: 16px 18px; border-radius: 14px; background: #fbf6f1; border: 1px solid #f0dfcf; }
.price-label { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pumpkin-ink); }
.price-value { margin: 2px 0 0; font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: #2b2a26; }
.price-value span { font-size: 17px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0; }
.price-note { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-soft); }
.gifts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gift {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 12px 13px;
  border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
}
.gift-icon {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  color: var(--pumpkin); background: rgba(242, 138, 30, .14); box-shadow: inset 0 0 0 1px rgba(242, 138, 30, .35);
}
.gift-name { font-size: 15px; font-weight: 650; line-height: 1.25; }

.btn-top { margin-top: 30px; }
.deadline { margin: 14px 0 0; font-size: 14px; color: var(--ink-soft); }

hr { border: 0; border-top: 1px solid var(--line); margin: 34px 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--black); color: #fff; text-decoration: none; border: 0; cursor: pointer;
  font: inherit; font-weight: 650; font-size: 17px; padding: 14px 24px; border-radius: var(--r);
  min-height: 52px; -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: #262626; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid #9cc3f5; outline-offset: 2px; }
.btn[disabled] { opacity: .55; cursor: progress; }
.btn-ghost { background: transparent; color: var(--black); border: 1.5px solid var(--black); margin-top: 22px; }
.btn-ghost:hover { background: #f4f4f3; }

/* The days left, across the top. Real dates only, counted in Budapest time. */
.countdown {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px; text-align: center;
  background: var(--night); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.3;
}
.cd-label { white-space: nowrap; }
.cd-units { display: flex; gap: 6px; }
.cd-unit {
  display: flex; flex-direction: column; align-items: center; min-width: 46px; padding: 4px 6px 3px;
  border-radius: 8px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.cd-unit b { font-size: 18px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; color: #fff; }
.cd-unit small { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--pumpkin); }
.cd-unit.days { background: var(--pumpkin-ink); box-shadow: none; }
.cd-unit.days small { color: rgba(255, 255, 255, .85); }

/* ------------------------------------------------------------------ form */

.form { scroll-margin-top: 110px; }
.q { border: 0; margin: 0 0 28px; padding: 0; min-width: 0; }
.q > label, .q > legend { display: block; padding: 0; margin: 0 0 10px; font-weight: 700; font-size: 19px; line-height: 1.3; }
.req { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #efefee; font-size: 13px; font-weight: 700; vertical-align: 3px; margin-left: 2px; color: var(--ink); }
.hint { margin: -4px 0 10px; font-size: 14px; color: var(--ink-soft); }
.q input[type=text] + .hint, .q input[type=tel] + .hint { margin: 8px 0 0; }

input[type=text], input[type=tel] {
  width: 100%; max-width: 420px; font: inherit; font-size: 16px; color: var(--ink);
  padding: 12px 14px; border: 1px solid var(--field); border-radius: var(--r); background: #fff;
  box-shadow: 0 1px 2px rgba(15, 15, 15, .06); appearance: none;
}
input::placeholder { color: #a7a6a2; }
input[type=text]:focus, input[type=tel]:focus { outline: none; border-color: #6aa2ea; box-shadow: 0 0 0 3px rgba(106, 162, 234, .25); }

/* The tiles are real checkboxes and radios, so they work without JS and with
   a keyboard. The input itself is hidden visually, the label is the target. */
.cat input, .size input, .check input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.cats { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.cat {
  --bg: #f4f4f3; --fg: var(--ink); --bd: #e3e3e1;
  display: block; cursor: pointer; border-radius: var(--r); -webkit-tap-highlight-color: transparent;
}
.cat > span {
  display: block; padding: 11px 14px 11px 44px; position: relative;
  background: var(--bg); color: var(--fg); border: 1.5px solid var(--bd); border-radius: var(--r);
  font-size: 16.5px; line-height: 1.35;
}
.cat-text b { font-weight: 700; margin-right: 4px; }
/* The tick box drawn inside the tile. */
.cat > span::before {
  content: ""; position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px;
  border-radius: 5px; border: 1.5px solid var(--fg); opacity: .45; background: #fff;
}
.cat input:checked + span { border-color: var(--fg); box-shadow: 0 0 0 1px var(--fg); }
.cat input:checked + span::before {
  opacity: 1; background: var(--fg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}
.cat input:focus-visible + span { outline: 3px solid #9cc3f5; outline-offset: 2px; }
/* Places left, under the category name. The fill is the share already taken. */
.cats .cat { min-width: min(100%, 400px); }
.spots { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.spots[hidden] { display: none; }
.spots-track { flex: 1 1 auto; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1px var(--bd); overflow: hidden; }
.spots-fill { display: block; height: 100%; width: 0; background: var(--fg); border-radius: 99px; transition: width .5s ease; }
.spots-label { flex: 0 0 auto; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.spots.low .spots-label { color: var(--bad); }
.cat.full { cursor: not-allowed; }
.cat.full > span { opacity: .55; }

.c1 { --bg: #fbeefa; --fg: #7d2f78; --bd: #f0d0ed; }
.c2 { --bg: #eaf6e8; --fg: #2c6627; --bd: #cfe8cb; }
.c3 { --bg: #fdf3c4; --fg: #6f5b0a; --bd: #f3e39a; }
.c4 { --bg: #fdeceb; --fg: #8c2a24; --bd: #f4cdca; }

.sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.size { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.size span {
  display: block; padding: 12px 16px; border-radius: var(--r); font-size: 17px; font-weight: 500;
  background: #e9f1fd; color: #1d4a86; border: 1.5px solid #c9dbf6;
}
.size input:checked + span { background: #1d4a86; color: #fff; border-color: #1d4a86; font-weight: 700; }
.size input:focus-visible + span { outline: 3px solid #9cc3f5; outline-offset: 2px; }

.checks { display: flex; flex-direction: column; gap: 14px; }
.final { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.final-head { margin: 0 0 2px; font-weight: 700; font-size: 19px; line-height: 1.3; }
.q > .check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; margin: 0; font-size: 16px; font-weight: 400; line-height: 1.4; }
.check::before {
  content: ""; flex: 0 0 22px; height: 22px; margin-top: 1px;
  border: 1.5px solid #bdbcb8; border-radius: 6px; background: #fff;
}
.check:has(input:checked)::before {
  border-color: var(--black);
  background: var(--black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/17px no-repeat;
}
.check:has(input:focus-visible)::before { outline: 3px solid #9cc3f5; outline-offset: 2px; }
.check .req { vertical-align: 1px; }

.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; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.field-err, .form-err { color: var(--bad); font-size: 14.5px; font-weight: 600; margin: 8px 0 0; }
.form-err { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--r); background: #fdeceb; }
.q.bad input[type=text], .q.bad input[type=tel] { border-color: var(--bad); }
.q.bad .cat > span, .q.bad .size span { border-color: #e6a19c; }
.checks .check.bad::before { border-color: var(--bad); }

.fine { margin: 18px 0 0; font-size: 14px; font-style: italic; color: var(--ink-soft); line-height: 1.5; }
.fine a { color: inherit; }

.done { padding: 8px 0; scroll-margin-top: 110px; outline: none; }
.done-mark { font-size: 40px; margin: 0; }
.done h2 { font-size: 30px; line-height: 1.15; margin: 6px 0 10px; letter-spacing: -.01em; }
.done p { font-size: 17px; margin: 0 0 8px; }

/* ------------------------------------------------------------------- faq */

.faq h2 { font-size: 24px; margin: 0 0 12px; letter-spacing: -.01em; }
.faq details, .foot details { border-bottom: 1px solid var(--line); }
.faq summary, .foot summary {
  cursor: pointer; list-style: none; padding: 14px 28px 14px 0; position: relative; font-weight: 650; font-size: 17px;
}
.faq summary::-webkit-details-marker, .foot summary::-webkit-details-marker { display: none; }
.faq summary::after, .foot summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: rotate(45deg);
  transition: transform .15s ease;
}
details[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p { margin: 0 0 14px; }

.contact { margin: 24px 0 0; }
.contact + .contact { margin-top: 6px; }

.foot { margin-top: 44px; font-size: 14px; color: var(--ink-soft); }
.foot summary { font-size: 14px; font-weight: 600; padding: 10px 24px 10px 0; }
.legal p { margin: 0 0 10px; line-height: 1.55; }

@media (max-width: 560px) {
  .wrap { padding: 0 18px 40px; }
  .hero-in { padding: 10px 18px 14px; }
  .hero-logo { height: 46px; margin-bottom: 8px; }
  .cover { border-radius: 12px; }
  .lead { margin: 16px 0 16px; }
  /* One line on a phone: a short label and four tight boxes. */
  .countdown { flex-wrap: nowrap; gap: 10px; padding: calc(6px + env(safe-area-inset-top)) 10px 6px; font-size: 13px; }
  .cd-short { white-space: normal; text-align: left; max-width: 7.5em; line-height: 1.2; }
  .cd-units { gap: 4px; }
  .cd-unit { min-width: 40px; padding: 3px 4px 2px; }
  .cd-unit b { font-size: 16px; }
  .cd-unit small { font-size: 9.5px; }
  .offer { padding: 16px 14px 14px; }
  .offer-title { font-size: 18px; }
  .offer-head { margin-bottom: 12px; }
  .price-value { font-size: 27px; }
  /* Three short tiles side by side, icon over a centred name, so the card
     stays short enough for the button to reach the first screen. */
  .gifts { gap: 6px; }
  .gift { align-items: center; text-align: center; gap: 7px; padding: 10px 6px; }
  .gift-icon { width: 34px; height: 34px; }
  .gift-icon svg { width: 19px; height: 19px; }
  .gift-name { font-size: 13px; }
  .btn-top { margin-top: 16px; }
  /* The proof row costs about 45px of the first screen. It comes back from
     the hero, the lead's margins and the gift card, so the top button still
     clears the cookie bar at 390×664. */
  .lead { font-size: 17px; margin: 12px 0 10px; }
  .hero-logo { height: 40px; margin-bottom: 6px; }
  .proof { gap: 6px; margin: 0 0 12px; }
  .proof-item { font-size: 14px; padding: 6px 10px; }
  .offer { padding: 12px 12px 12px; }
  .offer-kicker { display: none; }
  .offer-head { margin-bottom: 10px; }
  .gift { gap: 5px; padding: 8px 6px; }
  .gift-icon { width: 30px; height: 30px; }
  .gift-icon svg { width: 17px; height: 17px; }
  .btn { width: 100%; }
  .cats { align-items: stretch; }
  .size span { padding: 12px 0; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------- cookie banner
   A consent.js rajzolja. Az elutasítás ugyanolyan súlyú gomb, mint az
   elfogadás: ugyanolyan könnyűnek kell lennie. */

.ozk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; justify-content: center;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -4px 18px rgba(15, 15, 15, .06);
  transform: translateY(100%); transition: transform .24s cubic-bezier(.2, .8, .3, 1);
}
.ozk.ozk-in { transform: translateY(0); }
.ozk[hidden] { display: none; }
.ozk-box { width: 100%; max-width: 700px; display: flex; align-items: center; gap: 12px; }
.ozk-text { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink-soft); }
.ozk-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.ozk-btn {
  font: inherit; font-size: 14px; font-weight: 650; padding: 10px 14px; border-radius: var(--r);
  cursor: pointer; white-space: nowrap; border: 1.5px solid var(--black); -webkit-tap-highlight-color: transparent;
}
.ozk-yes { background: var(--black); color: #fff; }
.ozk-no { background: #fff; color: var(--black); }
.ozk-btn:focus-visible { outline: 3px solid #9cc3f5; outline-offset: 2px; }
/* On a phone the bar is one slim row, so it does not sit on the first
   screen's button. The two choices stay the same size. */
@media (max-width: 560px) {
  .ozk { padding: 7px 12px calc(7px + env(safe-area-inset-bottom)); }
  .ozk-box { gap: 10px; }
  .ozk-text { font-size: 12.5px; line-height: 1.3; }
  .ozk-actions { gap: 6px; }
  .ozk-btn { font-size: 13px; padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) { .ozk { transition: none; } }

.nowrap { white-space: nowrap; }