/* =============================================================================
   CAMPAIGN DESIGN STYLES — RENAULT LEASING (freesbe)
   style.css holds the locked machinery. Everything design-side lives here.

   Sizing: vw. Desktop = Figma px / 19.2 (1920 frame).
           Mobile  = Figma px / 3.75 (375 frame), inside @media (max-width:768px).

   The skeleton's mobile rules hang off body.mobile (UA sniff). Where a mobile
   rule has to beat one of those, the selector is written `X, .mobile X` inside
   the media query so it works both on a real device and in a resized browser.
   ========================================================================== */

/* ============================ PALETTE ============================ */
:root {
  /* shared skeleton tokens — re-themed from the Figma */
  --brand-accent: #efdf00;
  --brand-accent-ink: #1a1a1a;
  --panel-bg: #000000;
  --panel-ink: #ffffff;
  --page-bg: #ffffff;
  --page-ink: #1a1a1a;
  --field-line: #d9d9d6;
  --error-ink: rgb(203, 0, 0);

  /* campaign tokens */
  --freesbe-teal: #00d6d1;
  --usp-bg: #f5f5f5;
  --hairline: #d9d9d6;
  --ink: #1a1a1a;
  --field-bg: #ffffff;
  --muted-ink: #5a5a5a;

  /* type ramp */
  --f-regular: "NouvelRAH-Regular", sans-serif;
  --f-semibold: "NouvelRAH-Semibold", sans-serif;
  --f-bold: "NouvelRAH-Bold", sans-serif;
  --f-extrabold: "NouvelR-Extrabold", sans-serif;

  --panel-w: 25vw;
  --gutter: 3.3333vw; /* 64px */
}


/* ========================= PAGE SCAFFOLD =========================
   Desktop: the lead panel is fixed at 25vw on the left, so the design
   column (1440 of 1920 in the Figma) is offset by the same amount. */
html {
  scroll-behavior: smooth;
}

body {
  direction: rtl;
  background: var(--page-bg);
  color: var(--page-ink);
  overflow-x: hidden;
}

#campaign-main {
  min-height: 0;
  margin-left: var(--panel-w);
  width: calc(100vw - var(--panel-w));
  overflow: hidden;
}

.wrapper_accessibility {
  margin-left: var(--panel-w);
  width: calc(100vw - var(--panel-w));
  box-sizing: border-box;
  display: block;
  padding: 0;
  background: var(--page-bg);
}


/* ======================= SCROLL REVEALS =======================
   Mirrors the Figma prototype: sections fade + rise as they enter.

   The hidden start state is opt-in: campaign.js puts `js-reveal` on <html>
   only once it is about to run the observer. If JS never runs, errors, or the
   page is rendered without scrolling, the content stays plainly visible
   instead of being stranded at opacity 0. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(2.4vw);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.js-reveal .reveal[data-delay="1"] { transition-delay: 0.1s; }
.js-reveal .reveal[data-delay="2"] { transition-delay: 0.2s; }
.js-reveal .reveal[data-delay="3"] { transition-delay: 0.3s; }
.js-reveal .reveal[data-delay="4"] { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal,
  .js-reveal .reveal[data-delay] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ============================== FOOTER ==============================
   Figma desktop: row A 1440x77 (accessibility link + leasing disclaimer),
   row B 1440x70 (the two rating scales + "לפרטים: renault.co.il").
   Both rows are a centred group with 40px gaps (row A content 995..1404,
   row B content 867..1533 — both centred on the 1440 column), and the
   vertical rhythm is 32 / 35 / 20 / 28 / 32 = 147.
   Mobile: the same two rows stacked, right-aligned inside the gutter. */
.foot__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.0833vw; /* 40 */
  box-sizing: border-box;
  padding: 0 var(--gutter);
  min-height: 1.8229vw; /* 35 */
}

/* Figma puts the leasing note to the right of the accessibility link */
.foot__row--a {
  flex-direction: row-reverse;
  padding-top: 1.6667vw; /* 32 */
}

.foot__row--b {
  min-height: 1.4583vw; /* 28 */
  margin-top: 1.0417vw; /* 20 */
  padding-bottom: 1.6667vw; /* 32 */
  flex-wrap: wrap;
}

/* icon on the left of the label, per Figma (icon x=216, label x=261) */
a.accessibility {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 0.5208vw; /* 10 */
  font-family: var(--f-regular);
  font-size: 0.8333vw; /* 16 */
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
}

a.accessibility img {
  width: 1.8229vw; /* 35 */
  height: 1.8229vw;
  display: block;
}

a.accessibility:hover {
  text-decoration: underline;
}

.mispatit {
  font-family: var(--f-regular);
  font-size: 0.8333vw; /* 16 */
  line-height: 1;
  color: var(--ink);
  margin: 0;
  text-align: left;
  text-decoration: underline;
}

/* ---- rating scales ----
   Figma group 218x28 = label 98 + 10 + four 20x28 cells with 10px gaps.
   Desktop lists the pollution scale first (right), so the row runs reversed;
   mobile stacks them in document order (safety on top). */
.foot__ratings {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 2.0833vw; /* 40 */
  flex-wrap: wrap;
}

.foot__rating {
  display: flex;
  align-items: center;
  gap: 0.5208vw; /* 10 */
}

.foot__rating-label {
  font-family: var(--f-regular);
  font-size: 0.8333vw; /* 16 */
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}

.foot__cells {
  display: flex;
  direction: ltr;
  align-items: center;
  gap: 0.5208vw; /* 10 */
}

.foot__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.0417vw; /* 20 */
  height: 1.4583vw; /* 28 */
  border-radius: 0.1042vw; /* 2 */
  font-family: var(--f-bold);
  font-weight: 700;
  font-size: 0.6771vw; /* 13 */
  line-height: 1;
  color: #ffffff;
  flex: 0 0 auto;
}

.foot__details {
  font-family: var(--f-regular);
  font-size: 0.8333vw; /* 16 */
  line-height: 1;
  color: var(--ink);
  text-align: left;
}

.foot__details bdi {
  text-decoration: underline;
}

/* bigger close button on the shared popup (style.css ships it at 1.2vw) */
.popUp .close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5vw;
  height: 2.5vw;
  top: 0.4167vw;
  left: 0.4167vw;
  font-family: var(--f-bold);
  font-size: 1.6667vw;
  line-height: 1;
  color: var(--ink);
}

/* dimmer behind .popUp — the shell ships the div unstyled */
.btn-disabled {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999998;
  background: rgba(0, 0, 0, 0.6);
}


/* ============================================================================
   LEAD FORM — RESTYLE ONLY.
   Markup, field names, validation and the submission pipeline are untouched;
   this block only re-skins the panel to the Figma (teal header bar, black
   panel, white pill fields, yellow pill CTA).
   ========================================================================== */
.form {
  background: var(--panel-bg);
  color: var(--panel-ink);
  overflow-y: auto;
  scrollbar-width: none;
}

.form::-webkit-scrollbar {
  display: none;
}

/* teal freesbe header bar — logoWrapper 480x52 in the Figma */
.form .top_bunner {
  background: var(--freesbe-teal);
  height: 2.7083vw; /* 52 */
  padding: 0;
  box-sizing: border-box;
}

/* Figma "Logo Freesbe" — 70x20 */
.form .top_bunner img.freesbe_logo {
  width: 3.6458vw; /* 70 */
  height: 1.0417vw; /* 20 */
}

/* FormCol: 32px side padding inside the 480 panel => 416 content column */
.form-content {
  padding: 2.5vw var(--form-pad, 1.6667vw) 2.0833vw; /* 48 / 32 */
  box-sizing: border-box;
  width: 100%;
}

/* Desktop Figma: the panel runs teal strip -> heading directly. There is NO
   Renault diamond in the desktop lead panel, so it is hidden here and re-shown
   in the mobile breakpoint, where the Figma DOES carry it. */
.form .form_logo {
  display: none;
  width: 2.5vw; /* 48 */
  margin: 0 auto;
}

.form__title {
  gap: 0.2604vw; /* 5 */
  padding: 0.2604vw 0 0;
}

.form__title h2.top {
  font-family: var(--f-bold);
  font-weight: 700;
  font-size: 1.4583vw; /* 28 */
  line-height: 1.25; /* 35 */
  letter-spacing: 0;
}

.form__title h3.top2 {
  font-family: var(--f-regular);
  font-weight: 400;
  font-size: 1.1458vw; /* 22 */
  line-height: 1.25; /* 27.5 */
}

/* sits at the top of fieldCol, right-aligned, yellow asterisk */
.form__must {
  font-family: var(--f-regular);
  font-size: 0.9375vw; /* 18 */
  line-height: 1.3333; /* 24 */
  text-align: right;
  margin-top: 1.25vw; /* 24 */
}

.form__must .req {
  color: var(--brand-accent);
}

/* Figma FormCol stacks everything 24 apart: fieldCol's own gap is 24, and the
   consent block and the submit button each sit 24 below the block above them.
   One gap value covers all three, so the children carry no extra margins. */
.form__fields {
  gap: 1.25vw; /* 24 */
  padding-top: 1.25vw; /* 24 — TextCol ends at 284, fieldCol starts at 308 */
}

/* --- white pill field boxes — Figma fieldCol 416x215 = 3x56 + 2x24 ---
   The pill carries no padding or border of its own: the control inside is the
   pill. That makes the input's own box the full 416x56 — flush with the 416
   submit CTA on both edges — and gives it a border it can actually paint red
   in the error state (colouring a 0-width border is a no-op). */
.form .field:not(.field-checkbox) {
  background: var(--field-bg);
  height: 2.9167vw; /* 56px */
  border: 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0;
  overflow: hidden;
}

/* the invalid state lives at the very end of this file — see FIELD ERROR STATE */

.form .field select,
.form .field input:not([type="checkbox"]) {
  margin-top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  /* the pill's text inset lives here, on the control; the 2px border is taken
     off so the text still starts exactly 24 in, level with the floating label */
  padding: 0 calc(1.25vw - 2px);
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--f-regular);
  font-size: 0.8333vw;
  line-height: 1.375;
  color: var(--ink);
  background: transparent;
  text-align: right;
  direction: rtl;
}

.form .field select.place {
  font-size: 0.8333vw;
  margin-top: 0;
  color: var(--ink);
  cursor: pointer;
  /* chevron */
  background-image: linear-gradient(45deg, transparent 50%, #1a1a1a 50%),
    linear-gradient(135deg, #1a1a1a 50%, transparent 50%);
  background-position: calc(0.35vw) 50%, calc(0.7vw) 50%;
  background-size: 0.35vw 0.35vw, 0.35vw 0.35vw;
  background-repeat: no-repeat;
}

.form .field select option {
  background: #ffffff;
  color: var(--ink);
  font-size: 0.8333vw;
}

.form .field input::placeholder {
  color: #6b6b6b;
}

/* floating label inside the white pill */
.form .field:not(.field-checkbox) label {
  position: absolute;
  right: 1.25vw;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--f-regular);
  font-size: 0.8333vw;
  line-height: 1.375;
  color: var(--ink);
  pointer-events: none;
  transition: all 0.2s ease;
}

.form .field:not(.field-checkbox) label.activeAnimation {
  top: 0.5vw;
  transform: none;
  font-size: 0.625vw;
  color: #6b6b6b;
}

.form .field:not(.field-checkbox) label.activeAnimation + input {
  padding-top: 0.9vw;
}

.form .error,
.form .success {
  left: 1.25vw;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7292vw;
}

.form .success {
  color: #12a150;
}

/* --- consent block — the 24 above it comes from .form__fields' gap --- */
.form .extra-info {
  margin-top: 0;
}

.form .extra-info .privacy-text {
  font-family: var(--f-regular);
  font-size: 0.7292vw;
  line-height: 1.3;
}

.form .field.field-checkbox {
  top: 0;
  margin-top: 0.8333vw;
}

.form .field.field-checkbox label {
  top: 0;
  gap: 0.625vw;
  align-items: flex-start;
}

.form .checkbox-title {
  font-family: var(--f-regular);
  font-size: 0.7292vw;
  line-height: 1.3;
}

.form .field .checkbox-v {
  width: 0.9375vw;
  height: 0.9375vw;
  top: 0.1vw;
  border: 1px solid var(--panel-ink);
}

.form .field input[type="checkbox"]:checked + .checkbox-v::after {
  inset: 0.125vw;
  background: var(--brand-accent);
}

/* --- yellow pill CTA — Figma Submit Button 416x64 --- */
.form .send-btn {
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
  font-family: var(--f-semibold);
  font-weight: 600;
  font-size: 1.0417vw; /* 20 */
  line-height: 1.3;
  height: 3.3333vw; /* 64 */
  border-radius: 999px;
  margin-top: 0; /* the 24 above comes from .form__fields' gap */
  gap: 0.625vw;
  letter-spacing: 0;
}

.form .send-btn .txt-send-button {
  font-family: var(--f-semibold);
  font-weight: 600;
}

.form .send-btn::after {
  content: "";
  width: 1.0417vw;
  height: 1.0417vw;
  background: url("./images/icons/icon-arrow.svg") no-repeat center / contain;
  flex: 0 0 auto;
}

.form .send-btn:hover {
  filter: brightness(1.06);
}

/* in flight: the arrow becomes a spinner and the button stops responding */
.form .send-btn.is-loading {
  cursor: progress;
  filter: none;
}

.form .send-btn.is-loading::after {
  background: none;
  border: 0.1563vw solid rgba(26, 26, 26, 0.25);
  border-top-color: var(--brand-accent-ink);
  border-radius: 50%;
  box-sizing: border-box;
  animation: send-spin 0.7s linear infinite;
}

@keyframes send-spin {
  to {
    transform: rotate(360deg);
  }
}

/* failure message under the CTA */
.form__status {
  display: none;
  margin: 0.625vw 0 0;
  font-family: var(--f-regular);
  font-size: 0.8333vw; /* 16 */
  line-height: 1.375;
  text-align: center;
  /* the panel is black, so the #cb0000 field red would be unreadable here */
  color: #ff6b6b;
}

.form__status.active {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .form .send-btn.is-loading::after {
    animation-duration: 2s;
  }
}

/* --- thank-you panel --- */
.tnx .form_logo {
  width: 3.3333vw;
  margin-top: 6vw;
}

.tnx__title {
  font-family: var(--f-bold);
  font-size: 1.875vw;
  line-height: 1.2;
}


/* ============================================================================
   MOBILE  (Figma 375 frame)
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --gutter: 4.2667vw; /* 16px */
  }

  #campaign-main,
  .mobile #campaign-main {
    margin-left: 0;
    width: 100%;
  }

  /* Bottom padding clears the fixed CTA bar (70) plus the home-indicator inset,
     so the last footer line `לפרטים: renault.co.il` is never hidden behind it. */
  .wrapper_accessibility,
  .mobile .wrapper_accessibility {
    margin-left: 0;
    width: 100%;
    display: block;
    padding: 5.3333vw var(--gutter)
      calc(24vw + env(safe-area-inset-bottom, 0px));
    position: relative;
    z-index: 1;
  }

  /* ---- footer rows stack and align right ---- */
  .foot__row,
  .mobile .foot__row {
    display: block;
    padding: 0;
    min-height: 0;
    text-align: right;
  }

  .foot__row--b,
  .mobile .foot__row--b {
    padding-bottom: 0;
    margin-top: 5.3333vw; /* 20 */
  }

  a.accessibility,
  .mobile .accessibility {
    gap: 2.1333vw;
    font-size: 3.7333vw; /* 14 */
  }

  a.accessibility img,
  .mobile .accessibility img {
    width: 6.4vw;
    height: 6.4vw;
  }

  .mispatit,
  .mobile .mispatit {
    font-size: 3.2vw; /* 12 */
    text-align: right;
    margin-top: 2.1333vw;
  }

  .foot__ratings,
  .mobile .foot__ratings {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3.2vw; /* 12 */
  }

  .foot__rating,
  .mobile .foot__rating {
    gap: 2.1333vw; /* 8 */
  }

  .foot__rating-label,
  .mobile .foot__rating-label {
    font-size: 3.2vw; /* 12 */
  }

  .foot__cells,
  .mobile .foot__cells {
    gap: 2.6667vw; /* 10 */
  }

  .foot__cell,
  .mobile .foot__cell {
    width: 5.3333vw; /* 20 */
    height: 7.4667vw; /* 28 */
    font-size: 3.2vw; /* 12 */
  }

  .foot__details,
  .mobile .foot__details {
    display: block;
    text-align: right;
    font-size: 3.2vw; /* 12 */
    margin-top: 3.2vw;
  }

  .js-reveal .reveal {
    transform: translateY(6vw);
  }

  /* ---- shared popup close button ---- */
  .popUp .close,
  .mobile .popUp .close {
    width: 9.6vw;
    height: 9.6vw;
    top: 1.6vw;
    left: 1.6vw;
    font-size: 6.4vw;
  }

  /* ---- visibility utilities without the UA class ---- */
  .only_desktop,
  .mobile .only_desktop {
    display: none;
  }

  .only_mobile,
  .mobile .only_mobile {
    display: block;
  }

  /* ---- lead panel: slide-up sheet ----
     visibility (not just the transform) is what takes the closed drawer out of
     the page: a transform-only offset still paints over the sections in a
     full-page capture, a print, or any height:auto context. */
  .form,
  .mobile .form {
    width: 100%;
    height: 100%;
    max-height: 100%;
    transform: translateY(105%);
    visibility: hidden;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
      visibility 0s linear 0.5s;
    padding: 0;
    overflow-y: auto;
    z-index: 999999;
    box-sizing: border-box;
  }

  .form.active,
  .mobile .form.active {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
      visibility 0s linear 0s;
  }

  .close_form,
  .mobile .close_form {
    top: 4.2667vw;
    left: 4.2667vw;
    font-size: 5.3333vw;
    line-height: 1;
    color: var(--panel-ink);
  }

  .form-content,
  .mobile .form-content {
    padding: 13.3333vw 4.2667vw 12vw;
  }

  /* the mobile Figma DOES show the Renault diamond above the heading */
  .form .form_logo,
  .mobile .form .form_logo {
    display: block;
    width: 12.8vw;
  }

  .form__title,
  .mobile .form__title {
    gap: 2.1333vw;
    padding: 4.2667vw 0 0;
  }

  .form__title h2.top,
  .mobile .form__title h2.top {
    font-size: 6.4vw;
    line-height: 1.15;
  }

  .form__title h3.top2,
  .mobile .form__title h3.top2 {
    font-size: 4.2667vw;
    line-height: 1.25;
  }

  .form__must,
  .mobile .form__must {
    font-size: 3.4667vw;
    margin-top: 3.2vw;
  }

  .form__fields,
  .mobile .form__fields {
    gap: 3.2vw;
    padding: 5.3333vw 0 0;
  }

  .form .field:not(.field-checkbox),
  .mobile .form .field:not(.field-checkbox) {
    height: 14.9333vw; /* 56px */
    border-radius: 999px;
    padding: 0;
  }

  /* same as desktop: the control is the pill, so it spans the full field width
     and owns the border that turns red on error */
  .form .field select,
  .form .field input:not([type="checkbox"]),
  .mobile .form .field select,
  .mobile .form .field input:not([type="checkbox"]) {
    margin-top: 0;
    font-size: 4.2667vw;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 calc(5.3333vw - 2px);
    border: 2px solid transparent;
    border-radius: 999px;
  }

  .form .field select.place,
  .mobile .form .field select.place {
    font-size: 4.2667vw;
    background-position: 1.6vw 50%, 3.0667vw 50%;
    background-size: 1.6vw 1.6vw, 1.6vw 1.6vw;
  }

  .form .field select option,
  .mobile .form .field select option {
    font-size: 4.2667vw;
  }

  .form .field:not(.field-checkbox) label,
  .mobile .form .field:not(.field-checkbox) label {
    right: 5.3333vw;
    top: 50%;
    transform: translateY(-50%);
    font-size: 4.2667vw;
  }

  .form .field:not(.field-checkbox) label.activeAnimation,
  .mobile .form .field:not(.field-checkbox) label.activeAnimation {
    top: 1.8667vw;
    transform: none;
    font-size: 3.2vw;
  }

  .form .field:not(.field-checkbox) label.activeAnimation + input,
  .mobile .form .field:not(.field-checkbox) label.activeAnimation + input {
    padding-top: 4.2667vw;
  }

  .form .error,
  .form .success,
  .mobile .form .error,
  .mobile .form .success {
    left: 5.3333vw;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3.2vw;
  }

  /* desktop zeroes this because its 24 comes from the gap; mobile's gap is 12,
     so the 8 is put back here rather than inherited away */
  .form .extra-info,
  .mobile .form .extra-info {
    margin-top: 2.1333vw; /* 8 */
  }

  .form .extra-info .privacy-text,
  .mobile .form .extra-info .privacy-text {
    font-size: 3.4667vw;
  }

  .form .checkbox-title,
  .mobile .form .checkbox-title {
    font-size: 3.4667vw;
  }

  .form .field .checkbox-v,
  .mobile .form .field .checkbox-v {
    width: 4.2667vw;
    height: 4.2667vw;
    top: 0.5vw;
  }

  .form .field input[type="checkbox"]:checked + .checkbox-v::after,
  .mobile .form .field input[type="checkbox"]:checked + .checkbox-v::after {
    inset: 0.8vw;
  }

  .form .field.field-checkbox label,
  .mobile .form .field.field-checkbox label {
    gap: 2.6667vw;
  }

  .form .send-btn,
  .mobile .form .send-btn {
    font-size: 4.8vw;
    height: 14.9333vw;
    padding: 0;
    margin-top: 6.4vw;
    gap: 2.1333vw;
    border-radius: 999px;
  }

  .form .send-btn::after,
  .mobile .form .send-btn::after {
    width: 4.2667vw;
    height: 4.2667vw;
  }

  /* ---- thank-you ---- */
  .tnx,
  .mobile .tnx {
    width: 100%;
  }

  .tnx .form_logo,
  .mobile .tnx .form_logo {
    width: 18.6667vw;
    margin-top: 30vw;
  }

  .tnx__title,
  .mobile .tnx__title {
    font-size: 7.4667vw;
    margin-top: 8vw;
  }

  /* ---- sticky CTA bar: white bar, 375x70, two 167x54 pills ----
     DOM order is [callUs, testDrive]; the Figma puts the black phone pill on
     the LEFT and the teal pill on the RIGHT, so the row runs LTR. */
  /* The bar is 70 tall in the Figma: 8 + 54 pill + 8. That 8 is expressed as
     real padding rather than centring inside a fixed height, so the iOS home
     indicator inset can be ADDED below it — squeezing the inset into a fixed
     70 would slide the pills up and clip them. */
  .cta,
  .mobile .cta {
    position: fixed;
    display: flex;
    direction: ltr;
    align-items: center;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 18.6667vw; /* 70 */
    padding: 2.1333vw var(--gutter)
      calc(2.1333vw + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    gap: 2.1333vw; /* 8 */
    background: #ffffff;
    box-shadow: 0 -0.5333vw 2.1333vw rgba(0, 0, 0, 0.08);
    z-index: 99999;
  }

  .cta a,
  .mobile .cta a {
    flex: 1 1 0;
    height: 14.4vw; /* 54 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.1333vw;
    padding: 0;
    border-radius: 999px;
    font-family: var(--f-semibold);
    font-weight: 600;
    font-size: 4.2667vw; /* 16 */
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    direction: rtl;
    box-sizing: border-box;
  }

  .cta .callUs,
  .mobile .cta .callUs {
    background: var(--panel-bg);
    color: var(--panel-ink);
    border: 0;
  }

  .cta .callUs::before,
  .mobile .cta .callUs::before {
    content: "";
    width: 5.3333vw;
    height: 5.3333vw;
    top: 0;
    left: 0;
    background: url("./images/icons/icon-form-1.svg") no-repeat center / contain;
    position: static;
    flex: 0 0 auto;
  }

  .cta .testDrive,
  .mobile .cta .testDrive {
    background: var(--freesbe-teal);
    color: var(--brand-accent-ink);
  }

  .cta .testDrive::before,
  .mobile .cta .testDrive::before {
    content: "";
    width: 5.3333vw;
    height: 5.3333vw;
    top: 0;
    left: 0;
    background: url("./images/icons/icon-form-2.svg") no-repeat center / contain;
    position: static;
    flex: 0 0 auto;
  }

  /* Invisible twin of the ::before icon on the far side, so the label —
     not the icon+label group — sits on the pill's centre line. */
  .cta a::after,
  .mobile .cta a::after {
    content: "";
    width: 5.3333vw;
    height: 5.3333vw;
    flex: 0 0 auto;
  }

  .cta .callUs span,
  .cta .testDrive span,
  .mobile .cta .callUs span,
  .mobile .cta .testDrive span {
    width: auto;
    text-align: center;
  }

  /* ---- cookie banner ----
     The sticky CTA owns the bottom 70 (+ the iOS inset) and paints above this
     banner, so pinning the banner to 0 buries its copy and its controls. It is
     lifted to sit directly on top of the bar instead. */
  .cookie-banner,
  .mobile .cookie-banner {
    width: 100%;
    bottom: calc(18.6667vw + env(safe-area-inset-bottom, 0px)); /* 70 */
    padding: 3.2vw 4.2667vw;
    box-sizing: border-box;
    align-items: flex-start;
  }

  /* Third-party WhatsApp bubble (injected into <body> by the carasso layer at
     bottom:20px). The sticky bar has a higher stacking order and would clip
     its lower edge, so it is raised clear of the bar. */
  .carasso_layer_whatsapp_icon {
    bottom: calc(21.3333vw + env(safe-area-inset-bottom, 0px)) !important; /* 80 */
  }

  .cookie-banner__content p,
  .mobile .cookie-banner__content p {
    font-size: 2.9333vw;
  }

  .cookie-banner__close,
  .mobile .cookie-banner__close {
    width: 7.4667vw;
    height: 7.4667vw;
    font-size: 4vw;
    margin-right: 3.2vw;
  }
}


/* ============================================================================
   FIELD ERROR STATE — last in the file on purpose.
   The pill's resting `border: 2px solid transparent` is declared twice, once
   for desktop and again inside the mobile media query. An equally specific
   colour override placed earlier would be undone at one of the two
   breakpoints, which is how the previous attempt ended up inert. Source order
   settles it for both without reaching for !important.
   ========================================================================== */
.form .field:not(.field-checkbox).is-invalid {
  box-shadow: inset 0 0 0 2px var(--error-ink);
}

.form .field input[aria-invalid="true"],
.form .field select[aria-invalid="true"] {
  border-color: var(--error-ink);
}


/* ============================================================================
   PRINT — the overlays are fixed, full-viewport panels. Print and any other
   paged context has no viewport to pin them to, so they would otherwise be
   stamped across the first page on top of the real content.
   ========================================================================== */
@media print {
  .form,
  .tnx,
  .cta,
  .cookie-banner {
    display: none !important;
  }

  /* Reveals are driven by an IntersectionObserver, which never fires for
     content that was never scrolled into view. Without this, printing a
     freshly loaded page yields blank sections. */
  .reveal,
  .reveal[data-delay],
  .js-reveal .reveal,
  .js-reveal .reveal[data-delay] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}