/* =============================================================================
   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;
  /* NouvelR-Extrabold is the LATIN cut only — its cmap carries no Hebrew, so a
     Hebrew run in an 800 slot (the hero h1) used to drop straight to the system
     sans. NouvelRAH-Bold is the heaviest Hebrew face we were shipped, so it
     picks those glyphs up; the Latin model names still get the real extrabold. */
  --f-extrabold: "NouvelR-Extrabold", "NouvelRAH-Bold", 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 ==============================
   The footer is a component now — see components/footer/footer.css.
   The only thing that stays here is the wrapper the shell renders it into. */
.wrapper_accessibility {
  background: var(--page-bg);
}

/* 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);
}

/* The spec sheets the regulatory strip now opens are drawn edge-to-edge, so on
   mobile the close button landed straight on the "רמת האבזור הבטיחותי" header
   cell and ate half the word. Give it a band of its own above the sheet.
   The button itself is repositioned in the mobile section further down, where
   .popUp .close already had a block — one place, not two. */
@media (max-width: 768px) {
  .popUp,
  .mobile .popUp {
    box-sizing: border-box;
    padding-top: 10.6667vw; /* 40 */
  }

  /* 85vh + the new band would overflow a short phone; trim to fit. */
  .popUp .popUpPic,
  .mobile .popUp .popUpPic {
    max-height: 78vh;
  }
}


/* ============================================================================
   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 lead panel: teal strip -> 48px Renault diamond -> heading. */
.form .form_logo {
  display: block;
  width: 2.5vw; /* 48 */
  height: auto;
  margin: 0 auto 0.8333vw; /* 16 */
}

.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):not(.is-enhanced) {
  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;
}

/* --- showroom chooser — Figma "בחר אולם תצוגה" + two chip rows (4 then 5) ---
   PROGRESSIVE ENHANCEMENT, on purpose. The markup ships the skeleton's own
   <select class="place"> as the default control: it is what script.js reads,
   validates (validatePlaceSelect) and sends as `agency`. campaign.js only adds
   .is-enhanced once the chips are successfully bound to that select, and that
   class is what swaps the pill for the chips. If the script never runs the
   select stays visible and the form stays submittable — the chips can never be
   the reason a lead is lost. */
.showroom__label,
.showroom__chips {
  display: none;
}

/* The .mobile twin is not cosmetic duplication: style.css ships
   `.mobile .field:not(.field-checkbox) { height: 14.44vw; border-bottom: 2px }`,
   which at 0,3,0 outranks `.field-showroom.is-enhanced` at 0,2,0 no matter the
   file order. On a real phone that clamped this block to one 56px pill, so the
   wrapped chip rows spilled 78px over the marketing-consent checkbox and the
   pill's bottom border drew a white line straight through them. Matching the
   specificity is what releases the height again. */
.field-showroom.is-enhanced,
.mobile .field-showroom.is-enhanced {
  display: block;
  position: relative;
  background: transparent;
  border: 0;
  border-radius: 0;
  height: auto;
  padding: 0;
  overflow: visible;
}

/* kept in the DOM and still the submitted control — just taken out of view */
.field-showroom.is-enhanced select.place {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  clip: rect(0 0 0 0);
}

.field-showroom.is-enhanced .showroom__label {
  display: block;
  font-family: var(--f-semibold);
  font-weight: 600;
  font-size: 0.9375vw; /* 18 */
  line-height: 1.3333; /* 24 */
  color: var(--panel-ink);
  text-align: right;
  margin-bottom: 0.625vw; /* 12 */
}

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

.field-showroom.is-enhanced .showroom__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.4167vw; /* 8 */
}

.showroom__chip {
  flex: 0 0 auto;
  border: 0;
  margin: 0;
  padding: 0.3125vw 0.8333vw; /* 6 / 16 */
  border-radius: 999px;
  background: var(--field-bg);
  color: var(--ink);
  font-family: var(--f-semibold);
  font-weight: 600;
  font-size: 0.7292vw; /* 14 */
  line-height: 1.5714; /* 22 */
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.showroom__chip:hover {
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
}

.showroom__chip.is-selected {
  background: var(--brand-accent);
  color: var(--brand-accent-ink);
}

/* the absolute .error/.success of style.css assume a 56px pill; this block is
   taller and variable, so the message flows under the chips instead */
.field-showroom.is-enhanced .error {
  position: static;
  display: none;
  margin-top: 0.4167vw; /* 8 */
  font-size: 0.7292vw; /* 14 */
  line-height: 1.5714;
  text-align: right;
}

.field-showroom.is-enhanced .error.active {
  display: block;
}

/* the yellow chip already reads as "chosen" — the ✓ would double up */
.field-showroom.is-enhanced .success {
  display: none;
}

.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;
  /* Absolute on the client's media server, like every other image on the page
     (media-base.php). CSS cannot read the MEDIA_BASE constant, so the host is
     written out here and in the two .cta icons below — change them together. */
  background: url("https://media.renault.co.il/ao/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 is never hidden behind it. The footer's own
     type and spacing live in components/footer/footer.css. */
  .wrapper_accessibility,
  .mobile .wrapper_accessibility {
    margin-left: 0;
    width: 100%;
    display: block;
    padding: 0 0 calc(24vw + env(safe-area-inset-bottom, 0px));
    position: relative;
    z-index: 1;
  }

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

  /* ---- shared popup close button ----
     Sits inside the 40 band the popup now reserves above the sheet (see the
     .popUp rule near the top), so 2 + 36 = 38 keeps it clear of the image. */
  .popUp .close,
  .mobile .popUp .close {
    width: 9.6vw; /* 36 */
    height: 9.6vw;
    top: 0.5333vw; /* 2 */
    left: 1.6vw; /* 6 */
    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):not(.is-enhanced),
  .mobile .form .field:not(.field-checkbox):not(.is-enhanced) {
    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;
  }

  /* ---- showroom chooser (mobile) — same two wrapped rows of chips ---- */
  .field-showroom.is-enhanced .showroom__label,
  .mobile .field-showroom.is-enhanced .showroom__label {
    font-size: 4.2667vw; /* 16 */
    line-height: 1.5; /* 24 */
    margin-bottom: 3.2vw; /* 12 */
  }

  .field-showroom.is-enhanced .showroom__chips,
  .mobile .field-showroom.is-enhanced .showroom__chips {
    gap: 2.1333vw; /* 8 */
  }

  .showroom__chip,
  .mobile .showroom__chip {
    padding: 1.6vw 4.2667vw; /* 6 / 16 */
    font-size: 3.7333vw; /* 14 */
    line-height: 1.5714; /* 22 */
  }

  .field-showroom.is-enhanced .error,
  .mobile .field-showroom.is-enhanced .error {
    margin-top: 2.1333vw;
    font-size: 3.7333vw;
  }

  .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("https://media.renault.co.il/ao/images/icons/icon-form__mobile.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("https://media.renault.co.il/ao/images/icons/icon-form__mobile-2.svg") no-repeat center / contain;
    position: static;
    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;
  }
}


/* ============================================================================
   FLOATING WHATSAPP BUBBLE — site-wide chrome, no Figma frame draws it.
   Asked for by the PM: a bubble on the right, sitting just above the cookie
   banner. That banner is fixed to bottom:0, its height changes with how the
   copy wraps at each width, and it disappears once dismissed — so the lift is
   measured into --wa-lift by campaign.js instead of being hard-coded. With no
   JS the fallback is 0 and the bubble simply rests near the bottom edge.
   z-index stays well under the banner's 9999 so it can never cover the close
   button, and right:3vw matches the banner's own side padding.
   ========================================================================== */
.whatsapp-float {
  position: fixed;
  right: 3vw;
  bottom: calc(var(--wa-lift, 0px) + 1vw);
  z-index: 9990;
  width: 2.9167vw;   /* 56 at 1920 */
  height: 2.9167vw;
  min-width: 44px;   /* stays tappable on short/zoomed viewports */
  min-height: 44px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

.whatsapp-float:hover {
  transform: scale(1.06);
}

.whatsapp-float img {
  display: block;
  width: 55%;
  height: 55%;
}

@media (max-width: 768px) {

  .whatsapp-float,
  .mobile .whatsapp-float {
    right: 4.2667vw;
    bottom: calc(var(--wa-lift, 0px) + 2.1333vw);
    width: 14.9333vw;   /* 56 at 375 */
    height: 14.9333vw;
  }
}


/* ============================================================================
   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):not(.is-enhanced).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,
  .whatsapp-float {
    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;
  }
}