/* Shared-ride page. Layers on styles.css and reuses its :root tokens, so this
   page reads as the same product as the booking flow and the border page.
   Logical properties throughout (inset-inline, margin-inline, text-align:
   start) so the Hebrew RTL variant needs no mirrored rules. */

.rs { background: var(--bg); color: var(--ink); }
.rs-wrap { max-width: 900px; margin: 0 auto; padding: 0 20px; }

.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;
}

/* Honeypot: hidden but real — not display:none and not type=hidden, both of
   which bots skip. Hidden without being moved off-canvas. The obvious `inset-inline-start:
   -9999px` is an RTL trap: it resolves to `right: -9999px` on the Hebrew page,
   which is 9999px past the right edge and makes the whole document scroll
   sideways. Clipping in place hides it just as well, is still a real focusable
   input a bot will fill, and cannot affect layout in either direction. */
.hp, .dirradio {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Chrome ------------------------------------------------------------- */
.rs-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 0; flex-wrap: wrap;
}
.rs-top .brand-148 { color: var(--primary); font-weight: 700; }
.rs-top-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rs-wa {
  display: inline-flex; align-items: center; gap: 8px; color: var(--ink);
  font-weight: 600; font-size: 14.5px; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 9px 15px;
}
.rs-wa:hover { border-color: var(--primary); color: var(--primary-dark); }
.rs-lang {
  font-size: 14px; color: var(--mute); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 12px;
}
.rs-lang:hover { color: var(--ink); border-color: var(--ink); }

.rs-foot {
  border-top: 1px solid var(--line); margin-top: 40px;
  padding: 24px 0 calc(60px + env(safe-area-inset-bottom, 0px));
  color: var(--mute); font-size: 13.5px;
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
}
.rs-foot a { color: var(--mute); }
.rs-foot a:hover { color: var(--ink); }

/* --- Hero --------------------------------------------------------------- */
.rs-hero { padding: 24px 0 8px; }
.rs-kicker {
  display: inline-block; background: var(--accent-soft); color: var(--primary-dark);
  font-weight: 600; font-size: 13.5px; padding: 5px 12px; border-radius: 999px;
}
.rs-hero h1 {
  font-size: clamp(27px, 4.4vw, 42px); letter-spacing: -0.02em;
  line-height: 1.12; margin: 10px 0 12px;
}
.rs-lead { font-size: 17px; color: #3c3026; line-height: 1.65; max-width: 720px; margin: 0 0 14px; }
.rs-note {
  background: var(--accent-soft); border: 1px solid #F3D9A4;
  border-radius: var(--radius-sm); padding: 11px 15px;
  font-size: 14px; color: #6B4A12; line-height: 1.55; max-width: 720px; margin: 0;
}
.rs-jump { margin: 16px 0 0; }
.rs-cta-sm {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 600;
  font-size: 15px; color: var(--primary-dark);
  border-bottom: 1px solid color-mix(in oklab, var(--primary) 40%, transparent);
}

/* --- Flash messages ----------------------------------------------------- */
.rs-flash {
  border-radius: var(--radius-sm); padding: 13px 16px; font-size: 15px;
  margin: 20px 0 0; border: 1px solid var(--line); background: var(--surface);
}
.rs-flash-ok { border-color: #9FD8A8; background: #F1FAF2; color: #1F5C2C; }
.rs-flash-err { border-color: #E7B4A0; background: #FDF2EE; color: #9A3412; }

/* --- Sections ----------------------------------------------------------- */
.rs-section { padding: 30px 0; border-top: 1px solid var(--line); margin-top: 30px; }
.rs-section h2 { font-size: 23px; letter-spacing: -0.01em; margin: 0 0 6px; }
.rs-sub { color: var(--mute); font-size: 15px; margin: 0 0 18px; max-width: 680px; }
.rs-prose p { color: #3c3026; line-height: 1.7; font-size: 15.5px; max-width: 760px; margin: 12px 0 0; }

/* --- Steps -------------------------------------------------------------- */
.rs-steps {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; gap: 14px; grid-template-columns: 1fr;
}
@media (min-width: 720px) { .rs-steps { grid-template-columns: repeat(3, 1fr); } }
.rs-step {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm);
}
.rs-step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--accent-soft); color: var(--primary-dark);
  font-weight: 700; font-size: 14px; margin-bottom: 10px;
}
.rs-step b { display: block; margin-bottom: 5px; }
.rs-step span:not(.rs-step-n) { color: var(--mute); font-size: 14.5px; line-height: 1.55; }

/* --- Form --------------------------------------------------------------- */
.rs-form {
  /* Containing block for the clipped radios and honeypot above, so neither can
     resolve its position against the viewport and drag the page wider. */
  position: relative;
  display: grid; gap: 16px; max-width: 620px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 20px; box-shadow: var(--shadow-sm); margin-top: 4px;
}
/* align-content:start, not the default stretch: a field with a hint under
   it is taller than one without, and stretching grew the neighbouring
   input to match instead of leaving it its own height. */
.rs-field { display: grid; gap: 6px; align-content: start; }
.rs-field > label { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.rs-grid-2 { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .rs-grid-2 { grid-template-columns: 1fr; } }
.rs-hint { font-size: 12.5px; color: var(--mute); line-height: 1.4; }
.rs-submit { justify-self: start; margin-top: 2px; }
@media (max-width: 520px) { .rs-submit { justify-self: stretch; width: 100%; } }
.rs-consent { font-size: 12.5px; color: var(--mute); line-height: 1.5; margin: 0; max-width: 520px; }

/* --- Direction toggle --------------------------------------------------- */
/* A car heading to Uman is no use to someone leaving, so this is the first
   thing the form asks. Built on two radios so it works, and swaps every field
   label below it, with no JavaScript at all — see the note in the template. */
.rs-seg-label { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.rs-seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 4px;
}
.rs-seg-item {
  display: flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 8px 12px; border-radius: calc(var(--radius-sm) - 3px);
  font-size: 15px; font-weight: 600; color: var(--mute);
  cursor: pointer; user-select: none; transition: color .12s, background .12s;
}
.rs-seg-item:hover { color: var(--ink); }
#rs-dir-to:checked ~ .rs-field .rs-seg-item[for="rs-dir-to"],
#rs-dir-from:checked ~ .rs-field .rs-seg-item[for="rs-dir-from"] {
  background: var(--surface); color: var(--primary-dark); box-shadow: var(--shadow-sm);
}
/* The radio is off-screen, so its focus ring has to be drawn on the label or
   a keyboard user cannot see where they are. */
#rs-dir-to:focus-visible ~ .rs-field .rs-seg-item[for="rs-dir-to"],
#rs-dir-from:focus-visible ~ .rs-field .rs-seg-item[for="rs-dir-from"] {
  outline: 2px solid var(--primary); outline-offset: 1px;
}

/* Both label texts are always in the DOM; the checked radio decides which one
   is shown. `~ *` reaches every following sibling of the radio, so this covers
   the labels wherever they are nested inside the form. */
#rs-dir-to:checked ~ * .dir-from,
#rs-dir-from:checked ~ * .dir-to { display: none; }

/* The four fields copied straight off a boarding pass, set apart as a stub.
   The notch is drawn with two small circles cut from the border on the inline
   edges — the one flourish on the page, and it is the subject's own shape. */
.rs-stub {
  border: 1px dashed color-mix(in oklab, var(--primary) 34%, var(--line));
  border-radius: var(--radius); padding: 16px;
  margin: 0; display: grid; gap: 14px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent-soft) 34%, transparent), transparent 120px);
}
.rs-stub-legend {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primary-dark);
  padding: 0 8px; margin-inline-start: 4px;
}
/* Flight code and landing time in the data face, matched to the reference
   codes and wait figures elsewhere on the site. */
.rs-mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
#rs-flight { text-transform: uppercase; }

/* --- FAQ ---------------------------------------------------------------- */
.rs-faq { margin: 12px 0 0; }
.rs-faq dt { font-weight: 600; margin: 16px 0 5px; }
.rs-faq dd { margin: 0; color: #3c3026; line-height: 1.65; font-size: 15.5px; max-width: 760px; }

/* --- Closing CTA -------------------------------------------------------- */
.rs-cta {
  display: inline-flex; align-items: center; gap: 10px; background: var(--primary);
  color: #fff; font-weight: 600; font-size: 16px; padding: 13px 24px;
  border-radius: var(--radius); box-shadow: var(--shadow-md);
}
.rs-cta:hover { background: var(--primary-dark); }

/* --- Success panel (JS path) -------------------------------------------- */
/* Replaces the form in place after a fetch submit, so the visitor is not sent
   through a full page load to be told "got it". */
.rs-done {
  display: grid; gap: 10px; justify-items: start; max-width: 620px;
  background: var(--surface); border: 1px solid #9FD8A8;
  border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm);
}
.rs-done-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: #E6F5E9; color: #1F5C2C;
}
.rs-done h3 { margin: 0; font-size: 19px; }
.rs-done p { margin: 0; color: #3c3026; line-height: 1.6; font-size: 15.5px; }

/* --- Controls ----------------------------------------------------------- */
/* Safari zooms the page when a focused control's font-size is under 16px, which
   here would fire on every field. Pin them and normalise the native select
   chrome, which otherwise renders inconsistently on iOS. */
.rs-form input,
.rs-form select,
.rs-form textarea {
  font-size: 16px;
  min-height: 46px;
  width: 100%;
  padding: 11px 14px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--surface);
}
.rs-form textarea { min-height: 84px; line-height: 1.5; resize: vertical; }
.rs-form input:focus-visible,
.rs-form select:focus-visible,
.rs-form textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
}
.rs-form input::placeholder,
.rs-form textarea::placeholder { color: color-mix(in oklab, var(--mute) 72%, transparent); }
/* One symmetric SVG chevron rather than two composed gradient halves: the
   gradient pair only forms a triangle in one direction, and mirroring it for
   RTL renders a sliver. */
.rs-form select {
  padding-inline-end: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%236B5A4D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 12px 8px;
  background-repeat: no-repeat;
  background-position: right 14px center;
}
[dir="rtl"] .rs-form select { background-position: left 14px center; }
/* Safari renders date/time inputs at their intrinsic width and leaves them
   short of the field; force them to fill it like every other control. */
.rs-form input[type="date"],
.rs-form input[type="time"] { min-width: 0; }

@media (max-width: 380px) {
  .rs-wrap { padding: 0 14px; }
}