/* =============================================================================
   Ticket2Go - request form, visual layer (Or, 2026-09-05)

   Loaded AFTER the page's own <style>, so everything here is an override and the
   form's logic and markup are untouched. Kept in its own file for the same
   reason: the page was ported from another site by a script, and a redesign
   living inside that HTML would be lost the next time anything is regenerated.

   The design idea: the form used to be a dark panel floating on a darker void.
   It now sits inside a real stadium - a full house at the Emirates, brightened
   from the site's own hero photo - and every surface is glass, so the crowd is
   visible THROUGH the form rather than behind it. A person filling this in is
   being shown the thing they are buying.
   ========================================================================== */

:root {
  --glass: rgba(14, 19, 33, 0.72);
  --glass-strong: rgba(11, 15, 27, 0.86);
  --glass-line: rgba(246, 211, 101, 0.22);
  --gold-glow: rgba(246, 211, 101, 0.35);
}

/* ---------------------------------------------------------------- the scene */

.bg-scene {
  background:
    /* The scrim is heavy on purpose. Or asked for a DARK background so the text
       never competes with the photo: the stadium is atmosphere behind the form,
       not a picture the form sits on. The image itself is already pushed to a
       mean of 20/255, and this keeps the top and bottom - where the heading and
       the buttons live - darker still. */
    linear-gradient(
      180deg,
      rgba(4, 6, 14, 0.94) 0%,
      rgba(4, 6, 14, 0.80) 22%,
      rgba(4, 6, 14, 0.70) 48%,
      rgba(4, 6, 14, 0.82) 76%,
      rgba(4, 6, 14, 0.96) 100%
    ),
    url('/request/stadium.webp') center 38% / cover no-repeat,
    var(--dark-1);
  background-attachment: scroll, fixed, scroll;
}

/* A soft vignette pulls the eye to the centre column without darkening the
   photo itself. */
.bg-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 78% 62% at 50% 45%, transparent 0%, rgba(4, 6, 14, 0.40) 100%);
}

/* --------------------------------------------------------- the floodlights */

/* Two slow beams raking across the top, the way a stadium's lights catch dust.
   Purely decorative: aria-hidden by virtue of being a pseudo-element, and gone
   entirely for anyone who asked for less motion. */
.form-container::before {
  content: '';
  position: fixed;
  top: -22vh;
  left: 50%;
  width: 140vw;
  height: 60vh;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  background:
    conic-gradient(from 205deg at 28% 0%, transparent 0deg, rgba(246, 211, 101, 0.10) 6deg, transparent 14deg),
    conic-gradient(from 155deg at 72% 0%, transparent 0deg, rgba(255, 255, 255, 0.07) 5deg, transparent 12deg);
  animation: beam-sway 14s ease-in-out infinite alternate;
}

@keyframes beam-sway {
  from { transform: translateX(-50%) rotate(-1.6deg); opacity: 0.75; }
  to   { transform: translateX(-50%) rotate(1.6deg);  opacity: 1; }
}

/* ------------------------------------------------------------- the heading */

.form-header {
  padding: 30px 0 6px;
}

.form-header img {
  height: 68px;
  /* Or asked for air between the mark and the title: the logo used to sit 12px
     off the heading and the two read as one lump. */
  margin-bottom: 26px;
  filter: drop-shadow(0 6px 30px rgba(246, 211, 101, 0.45));
}

.form-header h1 {
  font-size: clamp(2rem, 7vw, 2.9rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  background: linear-gradient(100deg, #fff5d6 0%, var(--gold-1) 38%, var(--gold-2) 68%, #fff5d6 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: title-sheen 7s ease-in-out infinite;
  text-shadow: none;
}

/* The gradient drifts rather than sits, so the title reads as lit metal. */
@keyframes title-sheen {
  0%, 100% { background-position: 0% center; }
  50%      { background-position: 100% center; }
}

/* A thin gold rule under the heading, wider than a divider and narrower than
   the column - it gives the header a floor to stand on. */
.form-header h1::after {
  content: '';
  display: block;
  width: 86px;
  height: 2px;
  margin: 18px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-1), transparent);
}

.form-header p {
  margin-top: 14px;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.72);
}

/* ------------------------------------------------------------ glass panels */

/* Every surface the form draws is now translucent over the photo. The blur is
   what makes it readable: without it, crowd detail shows through the text. */
.choice-card,
.pill,
.league-card,
.text-input,
.date-text-input,
.date-input-row,
.cal-popup,
.input-group textarea {
  background: var(--glass) !important;
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 10px 34px -14px rgba(0, 0, 0, 0.85);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.22s, box-shadow 0.22s, background 0.22s;
}

.choice-card:hover,
.pill:hover,
.league-card:hover {
  transform: translateY(-3px);
  border-color: var(--glass-line);
  box-shadow: 0 18px 44px -16px rgba(0, 0, 0, 0.9), 0 0 0 1px var(--glass-line) inset;
}

.choice-card.selected,
.pill.selected,
.league-card.selected {
  background: linear-gradient(160deg, rgba(246, 211, 101, 0.16), rgba(12, 16, 28, 0.72)) !important;
  border-color: var(--gold-1);
  box-shadow: 0 0 0 1px var(--gold-1) inset, 0 14px 40px -14px var(--gold-glow);
}

/* Inputs get the gold treatment on focus rather than a browser outline. */
.text-input:focus,
.date-text-input:focus,
.input-group textarea:focus {
  border-color: var(--gold-1);
  box-shadow: 0 0 0 3px rgba(246, 211, 101, 0.18);
  outline: none;
}

/* ---------------------------------------------------------- the step frame */

/* The active step floats as one glass card, so the wizard reads as a single
   object moving through stages rather than loose controls on a photo. */
.step.active {
  background: var(--glass-strong);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 26px;
  padding: 30px 22px 26px;
  box-shadow:
    0 30px 70px -28px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;

  /*
   * Stated explicitly, not inherited from the page's own rule.
   *
   * The base .step is opacity:0 / translateX(60px) and only .step.active brings
   * it back, through `transition: all 0.45s`. This override adds background,
   * border-radius, box-shadow and backdrop-filter to that same selector, so all
   * of them joined the "all" transition - and the active step was arriving at
   * opacity 0 and staying there. Declaring the visible state here means the step
   * is visible from the moment it is active, whatever the transition does.
   */
  opacity: 1;
  transform: none;
}

/*
 * There is deliberately NO entrance animation on the step.
 *
 * One was here and it broke the form completely: a .step goes from display:none
 * to display:flex in the same frame that it gains .active, and a keyframe
 * animation started in that frame never advances in Chromium - it reports
 * playState "running" and sits on its first keyframe forever. With fill-mode
 * "both" holding opacity:0, every step after the first was present, correct and
 * invisible. Clicking worked; the form just appeared dead.
 *
 * This is the second time today the same trap has bitten (the site footer's
 * league groups were the first). The lesson both times: do not animate an
 * element on the frame it stops being display:none. The card already reads as
 * arriving because its content changes - it does not need the movement.
 */

/* ------------------------------------------------------------- the progress */

.progress-segment {
  height: 6px;
  background: rgba(255, 255, 255, 0.12);
}

.progress-segment.active {
  box-shadow: 0 0 16px rgba(246, 211, 101, 0.55);
}

/* ---------------------------------------------------------------- buttons */

.btn-next,
.btn-submit,
.btn-email {
  box-shadow: 0 14px 34px -12px var(--gold-glow);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s, filter 0.2s;
}

.btn-next:hover,
.btn-submit:hover,
.btn-email:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 46px -14px var(--gold-glow);
  filter: brightness(1.06);
}

.btn-next:active,
.btn-submit:active,
.btn-email:active {
  transform: translateY(0);
}

/* ------------------------------------------------------------ small screens */

@media (max-width: 640px) {
  .form-header { padding-top: 30px; }
  .form-header img { height: 66px; margin-bottom: 24px; }
  .step.active { padding: 24px 16px 22px; border-radius: 22px; }
  /* The photo is fixed on desktop for parallax; on iOS a fixed background is
     both janky and expensive, so it scrolls with the page there. */
  .bg-scene { background-attachment: scroll, scroll, scroll; }
}

/* ---------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  .form-container::before,
  .form-header h1,
  .step.active,
  .form-header img {
    animation: none !important;
  }
  .choice-card,
  .pill,
  .league-card,
  .btn-next,
  .btn-submit,
  .btn-email {
    transition: none !important;
  }
}

/* --------------------------------------------------------- viewport height */

/*
 * iOS counts 100vh as the full screen INCLUDING the space behind the address
 * bar, so a column sized that way is taller than what the visitor can actually
 * see and the top of it can start out of reach. dvh is the visible height and
 * follows the toolbar as it collapses.
 */
.form-container {
  min-height: 100dvh;
  padding-top: 0;
}

@supports not (min-height: 100dvh) {
  .form-container { min-height: 100vh; }
}


/*
 * The page transitions `all`, which now includes backdrop-filter and a large
 * box-shadow on every step change - expensive, and the reason the compositor
 * could leave a step stranded mid-transition. Only the two properties that
 * actually need to move are animated.
 */
.step {
  transition-property: opacity, transform;
  transition-duration: 0.42s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================ how it works */

/*
 * Sits between the heading and the wizard because the question a first-time
 * visitor has is not "which event" but "what am I actually starting here" -
 * the form asks for a phone number three screens later, and this is what earns
 * it. Three steps rather than a paragraph: it is scanned, not read.
 */
.how-it-works {
  position: relative;
  z-index: 1;
  max-width: 520px;
  /* Compact on purpose: this sits between the heading and the wizard, and a
     tall card here pushes the first question off a laptop screen. */
  margin: 18px auto 20px;
  padding: 16px 18px 13px;
  border-radius: 22px;
  background: rgba(12, 16, 28, 0.58);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 46px -22px rgba(0, 0, 0, 0.9);
  text-align: right;
}

.how-it-works h2 {
  margin: 0 0 12px;
  font-size: 1.02rem;
  font-weight: 900;
  color: var(--gold-1);
  letter-spacing: -0.01em;
}

.hiw-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.hiw-steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* The number is the only gold thing in the list, so the eye lands on the
   sequence before it reads any of the words. */
.hiw-num {
  flex: 0 0 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 900;
  color: #0f172a;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
  box-shadow: 0 4px 14px -4px var(--gold-glow);
}

.hiw-body {
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.74);
}

.hiw-body strong {
  display: block;
  color: #fff;
  font-weight: 800;
  margin-bottom: 1px;
}

.hiw-note {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.52);
}

/* ---------------------------------------------------- the floating buttons */

/* The WhatsApp button used to position itself. Both now sit in one centred row
   so neither has to know where the other is. */
.float-bar {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 10px;
}

.float-bar .wa-float {
  position: static;
  transform: none;
  left: auto;
  bottom: auto;
}

.float-bar .wa-float:hover {
  transform: translateY(-2px);
}

/* Deliberately quieter than the WhatsApp button: leaving is not the action this
   page wants, it is only the one it should not trap anyone out of. */
.site-float {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 18px;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--gold-1);
  background: rgba(12, 16, 28, 0.72);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border: 1px solid rgba(246, 211, 101, 0.34);
  box-shadow: 0 10px 28px -12px rgba(0, 0, 0, 0.9);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s, background 0.2s;
}

.site-float svg { width: 18px; height: 18px; }

.site-float:hover {
  transform: translateY(-2px);
  border-color: var(--gold-1);
  background: rgba(20, 26, 42, 0.85);
}

/* ------------------------------------------------------------ the logo link */

.home-mark {
  display: inline-block;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-mark:hover { transform: translateY(-2px) scale(1.02); }

.home-mark:focus-visible {
  outline: 2px solid var(--gold-1);
  outline-offset: 8px;
  border-radius: 12px;
}

@media (max-width: 640px) {
  .how-it-works { margin: 20px auto 24px; padding: 18px 16px 15px; border-radius: 18px; }
  .float-bar { bottom: 22px; gap: 8px; }
  .site-float { padding: 11px 15px; font-size: 0.86rem; }
}

@media (prefers-reduced-motion: reduce) {
  .home-mark, .site-float, .float-bar .wa-float { transition: none !important; }
}

/* ==================================================== the language switch */

/*
 * Matches the pill in the site header - same shape, same weight, same restraint
 * - but placed in the page's own top corner because this page has no header to
 * live in. Fixed, so it stays reachable while the wizard scrolls.
 */
.lang-switch {
  position: fixed;
  top: 16px;
  inset-inline-start: 16px;
  z-index: 210;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(12, 16, 28, 0.66);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.9);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s, color 0.2s;
}

.lang-switch svg { width: 15px; height: 15px; opacity: 0.85; }

.lang-switch:hover {
  transform: translateY(-1px);
  color: var(--gold-1);
  border-color: rgba(246, 211, 101, 0.45);
}

.lang-switch:focus-visible {
  outline: 2px solid var(--gold-1);
  outline-offset: 3px;
}

/* In English the whole document flips to ltr, and the parts that were written
   right-aligned by hand have to follow. */
html[dir='ltr'] .how-it-works { text-align: left; }
html[dir='ltr'] .form-header { text-align: center; }

@media (max-width: 640px) {
  .lang-switch { top: 12px; inset-inline-start: 12px; min-height: 34px; padding: 0 12px; font-size: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lang-switch { transition: none !important; }
}

/* ========================================================== the type system */

/*
 * Two faces, declared in fonts.css and applied here (Or, 2026-09-05: "פונט
 * מודרני יותר ומרשים").
 *
 * The page used Heebo, which the whole site uses - a good workhorse and a
 * completely anonymous one. This page is not the site: it is a single-purpose
 * conversion page with its own dark stadium, and it can carry a voice of its
 * own without breaking anything.
 *
 * Rubik for everything that is read, Secular One for everything that is
 * announced. Both are geometric Hebrew faces built on the same skeleton, so the
 * pairing reads as one designed system rather than as two fonts that happened
 * to be installed.
 */
:root {
  --font-body: 'Rubik Variable', 'Heebo Variable', 'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-display: 'Secular One', 'Rubik Variable', 'Heebo Variable', system-ui, Arial, sans-serif;
}

body,
.text-input,
.date-text-input,
.input-group textarea,
.lang-switch,
button,
input,
textarea,
select {
  font-family: var(--font-body);
}

/* Rubik's default figures are proportional; in a step counter and a date field
   that makes the numbers jump as they change. */
.step-counter,
.date-text-input,
.hiw-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ---- what gets announced ------------------------------------------------ */

.form-header h1 {
  font-family: var(--font-display);
  font-weight: 400; /* Secular One ships one weight, and it is already heavy. */
  /* The -0.02em set for Heebo crowds Secular One, whose Hebrew is wider by
     design - at display size it turned into touching letterforms. */
  letter-spacing: 0;
  font-size: clamp(2.1rem, 7.4vw, 3.15rem);
  line-height: 1.12;
}

.question-label,
.how-it-works h2,
.success-screen h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

.question-label {
  font-size: clamp(1.28rem, 4.6vw, 1.6rem);
  line-height: 1.25;
}

/* ---- what is read ------------------------------------------------------- */

/* Rubik at 500 is the weight that reads as "confident label" without shouting;
   at 400 next to a Secular One heading it looked unfinished. */
.choice-title,
.pill,
.hiw-body strong,
.summary-label {
  font-weight: 500;
  letter-spacing: 0.005em;
}

.btn-next,
.btn-submit,
.btn-email,
.wa-float,
.site-float,
.home-mark {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.question-sub,
.form-header p {
  font-weight: 300;
}

/* ================================================ progress reads right-to-left */

/*
 * The bar was hard-coded `direction: ltr`, inherited from the form's first life
 * on the old domain - so on a Hebrew page the segments filled from the LEFT,
 * away from the direction the visitor is reading and away from the side the
 * "המשך" button sits on (Or, 2026-09-05).
 *
 * `inherit` rather than a flat `rtl`: the page flips to dir=ltr in English, and
 * a progress bar that fills leftwards in an English document would be the same
 * bug pointing the other way.
 */
.progress-bar {
  direction: inherit;
}

/* Each segment's own gradient has to turn around with the bar, or the gold runs
   backwards inside every filled block. */
html[dir='rtl'] .progress-segment.active {
  background: linear-gradient(270deg, var(--gold-1), var(--gold-2));
}

/* Same for the sheen that sweeps along a filled segment. */
html[dir='rtl'] .progress-segment.active::after {
  animation-direction: reverse;
}

/* ============================================ the floating pair, on a phone */

/*
 * Or, 2026-09-05: "כפתורי וואטסאפ ואתר הבית מסתירים את הכפתורים האחרים בטופס".
 *
 * The bar was centred - `left: 50%` - which on a phone is the exact column the
 * wizard's own "המשך" and "חזרה" live in, so it sat on top of them. On a desktop
 * there is enough height that the two never meet, which is why this only ever
 * showed up on a phone.
 *
 * Three changes, and the first one is the fix; the other two are what stop it
 * coming back in a different form:
 *
 *   1. Out of the centre column entirely, into the corner the page does not use.
 *      The language pill sits inset-inline-START at the top, so the bar takes
 *      inset-inline-END at the bottom - opposite corner, both hands, either
 *      direction, since these are logical properties and the page flips to LTR
 *      in English.
 *   2. Icon-only circles. Two labelled pills is a lot of furniture for a page
 *      whose whole job is the form behind them; as 46px circles they read as
 *      what they are - always-available shortcuts, not part of the wizard.
 *   3. Bottom padding on the column, so the LAST control can always scroll clear
 *      of them. Moving the bar alone would have left the final "שלח בקשה" under
 *      it at the end of the flow, which is the worst possible place to hide a
 *      button.
 */
/*
 * `(pointer: coarse)` as well as the phone width, added 2026-09-08.
 *
 * The reasoning below is about a SINGLE-COLUMN FORM AND A FINGER, and neither
 * of those stops being true on a tablet - but the rule was gated on 640px, so
 * every iPad went back to a fixed centred bar. Measured on the live wizard:
 * scrolled to the end of a step it covered 1 control at 744x1133 and NINE at
 * 1024x768 and 1194x834, among them both "המשך" and "← חזרה". Landscape is the
 * worst case because the visible height is short enough that most steps reach
 * their scroll end with the buttons right where the bar sits.
 *
 * A pointer query rather than another width: what makes the overlay
 * undodgeable is the finger, and a desk with a mouse still has the room the
 * centred bar was designed for.
 */
@media (max-width: 640px), (pointer: coarse) {
  /*
   * The decisive change: on a phone the pair stops floating at all.
   *
   * Moving them from the centre to a corner only SHRANK the problem. The wizard's
   * buttons are full-width - x 14..361 on a 375px screen - so a fixed element in
   * either bottom corner still covers their left ~46px, and measuring every
   * control in all 11 steps found 44 such overlaps. A fixed overlay on a
   * single-column form cannot be positioned out of the way; there is no "out of
   * the way" on a phone.
   *
   * `position: static` puts them back in the document, where they already sit in
   * the markup: a row of their own above the header. Zero overlap, by
   * construction rather than by tuning. They scroll away with the page, which is
   * the honest cost - but the last step carries its own full-size
   * "שלח בקשה ב-WhatsApp", so the channel is never more than one screen away.
   *
   * The desktop layout is untouched: there the centred bar has the room it needs.
   */
  .float-bar {
    position: static;
    inset: auto;
    transform: none;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 14px 14px 0;
    z-index: auto;
  }

  /* Smaller than the desktop pills - they are a header now, not a call to
     action - but they keep their labels, because a row of their own has room
     for words and an unlabelled house icon is a guess. */
  .float-bar .wa-float,
  .float-bar .site-float {
    padding: 9px 15px;
    font-size: 0.82rem;
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.9);
  }

  /* index.html carries an older `@media (max-width: 480px)` rule that strips the
     WhatsApp label and rounds it to a circle - written when it was a lone
     bottom-corner bubble. In a header row the two should read as a matched pair,
     so the label comes back and the pill shape with it. */
  .float-bar .wa-float span { display: inline; }
  .float-bar .wa-float { border-radius: 50px; }

  .float-bar .wa-float svg { width: 17px; height: 17px; }
  .float-bar .site-float svg { width: 16px; height: 16px; }

  /* The header used to start at the top of the page; it now follows the row. */
  .form-container {
    padding-top: 6px;
    min-height: calc(100vh - 62px);
  }
}

/* While a field is focused the keyboard is up, the bar is unreachable anyway,
   and it is the moment the visitor most wants the form to itself. CSS-only: no
   state to get out of sync with the wizard. Browsers without :has() simply keep
   today's behaviour, which is now non-overlapping regardless. */
.float-bar {
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

body:has(:is(input, textarea, select):focus) .float-bar {
  opacity: 0;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .float-bar { transition: none !important; }
}

/* ================================== the floating pair, on a desk: a clear lane */

/*
 * Or, 2026-09-14: "כפתור הוואטסאפ וכפתור לאתר בית מפריעים לכפתור ההמשך וחזרה.
 * מקם אותם יותר למטה וצור הפרדה כדי שלא יתנגשו אחד בשני".
 *
 * Measured before the change: scrolled to the end of a step, "← חזרה" sat 11px
 * UNDER the bar on almost every step at 1100-1440px wide, and on the match step
 * at Or's own 1985x990. The page ended 40px below the last control and the bar
 * stood 32px up and 46px tall, so the end of the page was inside the bar.
 *
 * Three parts, each closing a different way back in:
 *   1. Lower: 14px from the bottom instead of 32px.
 *   2. A lane the form never enters: the page ends --float-clear below its last
 *      control, so at the end of every step there is air between "חזרה" and
 *      the bar. The step watcher in form.js lands a new step above the lane too.
 *   3. While scrolling, a control can still pass the bar mid-way; for those
 *      moments the bar steps aside (form.js, __floatGuard) and comes back once
 *      the control is clear. It measures the bar's resting box, not its moved
 *      one, so it cannot flicker.
 *
 * Only where the bar is fixed: the phone and touch layout above puts the pair in
 * its own row and none of this applies there.
 */
:root {
  --float-bottom: 14px;
  --float-clear: 96px;
}

@media (min-width: 641px) and (pointer: fine), (min-width: 641px) and (pointer: none) {
  .float-bar {
    bottom: calc(var(--float-bottom) + env(safe-area-inset-bottom, 0px));
  }

  .form-container {
    padding-bottom: calc(var(--float-clear) + env(safe-area-inset-bottom, 0px));
  }

  .float-bar.is-yielding {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 18px);
  }

  .float-bar {
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .float-bar.is-yielding { transform: translate(-50%, 0); }
}

/* ------------------------------------------------- text direction in English */

/*
 * `.text-input` was hard-coded `text-align: right`, which is correct in Hebrew and
 * wrong the moment the page flips to dir=ltr - English text and English
 * placeholders sat against the right edge (Or, 2026-09-05).
 *
 * `start` is the logical value: it resolves to right under dir=rtl and left under
 * dir=ltr, so one declaration is correct in both and there is no second rule to
 * keep in sync. The phone field keeps its inline `text-align: center`, which is
 * deliberate and wins over this.
 */
.text-input,
.input-group textarea {
  text-align: start;
}

/* Language menu (three languages, 2026-09-07).
   The summary keeps the old .lang-switch look, so nothing about the button
   moved; the list below it is new. The current language is hidden by <html
   lang>, which form.js keeps in step - one rule, no per-language JS. */
.lang-menu { position: absolute; top: 16px; inset-inline-start: 16px; z-index: 30; }
.lang-menu > summary { position: static; list-style: none; cursor: pointer; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-list {
  position: absolute; inset-inline-start: 0; top: calc(100% + 6px);
  min-width: 148px; margin: 0; padding: 4px; list-style: none;
  background: #fff; border: 1px solid #e7e3d7; border-radius: 12px;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,0.35);
}
.lang-opt {
  display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px;
  background: none; font: inherit; font-weight: 700; text-align: start;
  color: #1a1a1f; cursor: pointer;
}
.lang-opt:hover, .lang-opt:focus-visible { background: #faf9f5; color: #7a5418; }
html[lang="he"] .lang-list li[data-lang="he"],
html[lang="en"] .lang-list li[data-lang="en"],
html[lang="ar"] .lang-list li[data-lang="ar"] { display: none; }
/* Arabic needs a face with Arabic glyphs; the form ships its own fonts.css. */
html[lang="ar"] body,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] .step-q {
  font-family: "Cairo Variable", "Segoe UI", Tahoma, Arial, sans-serif;
  line-height: 1.75;
}