/* =============================================================================
   Freesbe / Renault campaign skeleton — base stylesheet.

   Contains ONLY machinery: fonts, reset, palette variables, and the styles for
   the always-present chrome (cookie banner, lead form, thank-you panel,
   accessibility footer, mobile CTA bar, spec popup).

   Put campaign design in a SEPARATE stylesheet (campaign.css) and link it after
   this one. Do not add design sections to this file.

   Sizing convention across all Freesbe pages: vw units, with a `.mobile` body
   class (set by the UA sniff in index.php) driving the mobile scale.
   Desktop rules are unprefixed; mobile rules are prefixed `.mobile `.
   ========================================================================== */

/* ============================== FONTS ==============================
   Renault corporate (NouvelR / NouvelRAH) + Hebrew (FbReforma, fbpractica).
   Files live in ./fonts. Keep these declarations as-is.
   ================================================================== */
@font-face {
  font-family: "NouvelRAH-Regular";
  src: url("./fonts/NouvelRAH-Regular.eot");
  src:
    url("./fonts/NouvelRAH-Regular.woff2") format("woff2"),
    url("./fonts/NouvelRAH-Regular.woff") format("woff"),
    url("./fonts/NouvelRAH-Regular.ttf") format("truetype"),
    url("./fonts/NouvelRAH-Regular.svg") format("svg");
  font-display: swap;
}

@font-face {
  font-family: "NouvelRAH-Semibold";
  src: url("./fonts/NouvelRAH-Semibold.eot");
  src:
    url("./fonts/NouvelRAH-Semibold.woff2") format("woff2"),
    url("./fonts/NouvelRAH-Semibold.woff") format("woff"),
    url("./fonts/NouvelRAH-Semibold.ttf") format("truetype"),
    url("./fonts/NouvelRAH-Semibold.svg") format("svg");
  font-display: swap;
}

@font-face {
  font-family: "NouvelRAH-Bold";
  src: url("./fonts/NouvelRAH-Bold.eot");
  src:
    url("./fonts/NouvelRAH-Bold.woff2") format("woff2"),
    url("./fonts/NouvelRAH-Bold.woff") format("woff"),
    url("./fonts/NouvelRAH-Bold.ttf") format("truetype"),
    url("./fonts/NouvelRAH-Bold.svg") format("svg");
  font-display: swap;
}

@font-face {
  font-family: "NouvelR-Light";
  src: url("./fonts/NouvelR-Light.eot");
  src:
    url("./fonts/NouvelR-Light.woff2") format("woff2"),
    url("./fonts/NouvelR-Light.woff") format("woff"),
    url("./fonts/NouvelR-Light.ttf") format("truetype"),
    url("./fonts/NouvelR-Light.svg") format("svg");
  font-display: swap;
}

@font-face {
  font-family: "NouvelR-Semibold";
  src: url("./fonts/NouvelR-Semibold.eot");
  src:
    url("./fonts/NouvelR-Semibold.woff2") format("woff2"),
    url("./fonts/NouvelR-Semibold.woff") format("woff"),
    url("./fonts/NouvelR-Semibold.ttf") format("truetype"),
    url("./fonts/NouvelR-Semibold.svg") format("svg");
  font-display: swap;
}

@font-face {
  font-family: "NouvelR-Bold";
  src: url("./fonts/NouvelR-Bold.eot");
  src:
    url("./fonts/NouvelR-Bold.woff2") format("woff2"),
    url("./fonts/NouvelR-Bold.woff") format("woff"),
    url("./fonts/NouvelR-Bold.ttf") format("truetype"),
    url("./fonts/NouvelR-Bold.svg") format("svg");
  font-display: swap;
}

@font-face {
  font-family: "NouvelR-Extrabold";
  src: url("./fonts/NouvelR-Extrabold.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "FbReforma-Mediumwebfont";
  src: url("./fonts/FbReforma-Mediumwebfont.eot");
  src:
    url("./fonts/FbReforma-Mediumwebfont.woff2") format("woff2"),
    url("./fonts/FbReforma-Mediumwebfont.woff") format("woff"),
    url("./fonts/FbReforma-Mediumwebfont.ttf") format("truetype"),
    url("./fonts/FbReforma-Mediumwebfont.svg") format("svg");
  font-display: swap;
}

@font-face {
  font-family: "fbreformaen-regular-webfont";
  src: url("./fonts/fbreformaen-regular-webfont.eot");
  src:
    url("./fonts/fbreformaen-regular-webfont.woff2") format("woff2"),
    url("./fonts/fbreformaen-regular-webfont.woff") format("woff"),
    url("./fonts/fbreformaen-regular-webfont.ttf") format("truetype"),
    url("./fonts/fbreformaen-regular-webfont.svg") format("svg");
  font-display: swap;
}

@font-face {
  font-family: "fbpractica-regular";
  src: url("./fonts/fbpractica-regularwebfont.eot");
  src:
    url("./fonts/fbpractica-regularwebfont.woff") format("woff"),
    url("./fonts/fbpractica-regularwebfont.ttf") format("truetype"),
    url("./fonts/fbpractica-regularwebfont.svg") format("svg");
  font-display: swap;
}

@font-face {
  font-family: "fbpractica-bold";
  src: url("./fonts/fbpractica-boldwebfont.eot");
  src:
    url("./fonts/fbpractica-boldwebfont.woff") format("woff"),
    url("./fonts/fbpractica-boldwebfont.ttf") format("truetype"),
    url("./fonts/fbpractica-boldwebfont.svg") format("svg");
  font-display: swap;
}

@font-face {
  font-family: "fbpractica-light";
  src: url("./fonts/fbpractica-lightwebfont.eot");
  src:
    url("./fonts/fbpractica-lightwebfont.woff") format("woff"),
    url("./fonts/fbpractica-lightwebfont.ttf") format("truetype"),
    url("./fonts/fbpractica-lightwebfont.svg") format("svg");
  font-display: swap;
}


/* ============================ PALETTE ============================
   PER-CAMPAIGN: override these in campaign.css (or edit here).
   Values below are deliberately neutral placeholders, NOT a real campaign's
   colours. The form/CTA read --brand-accent, so set that first.
   ================================================================ */
:root {
  --brand-accent: #00d6d1;      /* primary CTA / button fill */
  --brand-accent-ink: #000000;  /* text on top of the accent */
  --panel-bg: #000000;          /* lead form + thank-you panel background */
  --panel-ink: #ffffff;         /* text inside those panels */
  --page-bg: #ffffff;
  --page-ink: #1a1a1a;
  --field-line: lightgray;      /* input underline */
  --error-ink: rgb(203, 0, 0);
}

/* ==== Israeli regulatory safety / pollution rating scales ====
   LOCKED — these are the government-mandated colour scales shown on every
   vehicle page. Never re-theme them to fit a campaign palette. */
html {
  direction: rtl;
  scroll-behavior: smooth;

  --pollution-1: #1a582c;
  --pollution-2: #146634;
  --pollution-3: #0e7d3e;
  --pollution-4: #129346;
  --pollution-5: #23a348;
  --pollution-6: #3eaf49;
  --pollution-7: #98c93c;
  --pollution-8: #f9d324;
  --pollution-9: #fdbd3c;
  --pollution-10: #f89938;
  --pollution-11: #e67524;
  --pollution-12: #dc5f26;
  --pollution-13: #e02225;
  --pollution-14: #c52026;
  --pollution-15: #a41d20;
  --safety-0: #c00000;
  --safety-1: #e46c0b;
  --safety-2: #ffc000;
  --safety-3: #33af8a;
  --safety-4: #31859d;
  --safety-5: #268cca;
  --safety-6: #0170c1;
  --safety-7: #0373fb;
  --safety-8: #124aff;
  --safety-13: #e02225;
}

.pollution_1  { background-color: var(--pollution-1); }
.pollution_2  { background-color: var(--pollution-2); }
.pollution_3  { background-color: var(--pollution-3); }
.pollution_4  { background-color: var(--pollution-4); }
.pollution_5  { background-color: var(--pollution-5); }
.pollution_6  { background-color: var(--pollution-6); }
.pollution_7  { background-color: var(--pollution-7); }
.pollution_8  { background-color: var(--pollution-8); }
.pollution_9  { background-color: var(--pollution-9); }
.pollution_10 { background-color: var(--pollution-10); }
.pollution_11 { background-color: var(--pollution-11); }
.pollution_12 { background-color: var(--pollution-12); }
.pollution_13 { background-color: var(--pollution-13); }
.pollution_14 { background-color: var(--pollution-14); }
.pollution_15 { background-color: var(--pollution-15); }

.safety_0  { background-color: var(--safety-0); }
.safety_1  { background-color: var(--safety-1); }
.safety_2  { background-color: var(--safety-2); }
.safety_3  { background-color: var(--safety-3); }
.safety_4  { background-color: var(--safety-4); }
.safety_5  { background-color: var(--safety-5); }
.safety_6  { background-color: var(--safety-6); }
.safety_7  { background-color: var(--safety-7); }
.safety_8  { background-color: var(--safety-8); }

.safety-container,
.pollution-container {
  display: inline-flex !important;
  direction: ltr !important;
  margin: 0 0.1vw;
}


/* ============================= RESET ============================= */
* {
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  scroll-behavior: smooth;
  font-family: "NouvelRAH-Regular", sans-serif;
  text-decoration: none;
}

body {
  font-family: "NouvelRAH-Regular", sans-serif;
  background-color: var(--page-bg);
  color: var(--page-ink);
}

li {
  list-style-type: none;
}

.privacyLink {
  color: white;
  cursor: pointer;
  text-decoration: revert;
}

/* Empty <main> placeholder — remove the min-height once real sections land. */
#campaign-main {
  min-height: 40vh;
}


/* ====================== VISIBILITY UTILITIES ======================
   Depends on the body.mobile class from index.php. */
.only_desktop {
  display: block;
}

.mobile .only_desktop {
  display: none;
}

.only_mobile {
  display: none;
}

.mobile .only_mobile {
  display: block;
}


/* ========================= COOKIE BANNER ========================= */
.cookie-banner {
  width: 68.2vw;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  padding: 0.8vw 3vw;
  direction: rtl;
}

.cookie-banner__content p {
  font-family: "NouvelRAH-Regular", sans-serif;
  font-size: calc(0.6vw + 6px);
  color: #1a1a1a;
  line-height: 1.5;
  margin: 0;
}

.cookie-banner__content a {
  color: #1a1a1a;
  text-decoration: underline;
}

.cookie-banner__close {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid #1a1a1a;
  color: #1a1a1a;
  font-size: calc(0.6vw + 10px);
  width: 2.2vw;
  height: 2.2vw;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 2vw;
}

.mobile .cookie-banner {
  width: 100%;
  padding: 3vw 4vw;
  align-items: flex-start;
  box-sizing: border-box;
}

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

.mobile .cookie-banner__close {
  width: 7vw;
  height: 7vw;
  font-size: 4vw;
  margin-right: 3vw;
}


/* =========================== LEAD FORM ===========================
   Slide-in panel on mobile, fixed side panel on desktop. */
.form {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100vh;
  background-color: var(--panel-bg);
  color: var(--panel-ink);
  z-index: 2;
  width: 25vw;
}

.form.hide {
  display: none;
}

.mobile .form {
  width: 100%;
  transform: translateY(240vw);
  transition: all 1s ease;
  padding: 4.2vw;
  height: auto;
  overflow-y: scroll;
  padding-bottom: 21vw;
  padding-top: 21vw;
  z-index: 999999;
  box-sizing: border-box;
}

.mobile .form.active {
  transform: translateY(0);
}

.top_bunner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1vw 0;
}

.top_bunner img {
  width: 8vw;
}

.mobile .top_bunner img {
  width: 30vw;
}

.close_form {
  position: absolute;
  top: 5vw;
  left: 5vw;
  font-size: 5vw;
  color: var(--panel-ink);
  cursor: pointer;
  z-index: 2;
}

.form-content {
  padding: 1.05vw 1.57vw;
}

.form_logo {
  display: block;
  width: 6vw;
  margin: 0 auto;
}

.mobile .form_logo {
  width: 22vw;
}

.form__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5vw;
  padding: 1vw 0 0 0;
  text-align: center;
}

.form__title h2,
.form__title h3 {
  font-weight: normal;
}

.form__title h2 {
  font-size: 1.3vw;
  font-family: "NouvelRAH-Bold", sans-serif;
}

.form__title h3 {
  font-size: 0.9vw;
}

.mobile .form__title h2 {
  font-size: 6vw;
}

.mobile .form__title h3 {
  font-size: 4vw;
}

.form__must {
  font-size: 0.7vw;
}

.mobile .form__must {
  font-size: 3.2vw;
}

.form__fields {
  display: flex;
  flex-direction: column;
  gap: 1.05vw;
  width: 100%;
}

.mobile .form__fields {
  padding: 6.05vw 0;
  gap: 6.05vw;
}

.field:not(.field-checkbox) {
  display: block;
  background-color: var(--panel-bg);
  padding: 0;
  width: 100%;
  height: 3.44vw;
  border-bottom: 1px solid var(--field-line);
  position: relative;
}

.mobile .field:not(.field-checkbox) {
  height: 14.44vw;
  border-radius: unset;
  border-bottom: 2px solid var(--field-line);
}

.field select,
.field input:not([type="checkbox"]) {
  margin-top: -1vw;
  display: block;
  border: 0;
  font-size: 0.83vw;
  width: 100%;
  height: 4.5vw;
  outline: none;
  appearance: none;
  border-radius: 0;
  padding: 1vw 0 0 0;
  background-color: transparent;
  color: var(--panel-ink);
  text-align: right;
}

.field select.place {
  font-size: 1vw;
  margin-top: 0;
}

.mobile .field select,
.mobile .field input:not([type="checkbox"]) {
  margin-top: 4.5vw;
  font-size: 4.83vw;
  height: auto;
  padding: 1vw 0 0 0;
}

.field select option {
  background-color: var(--panel-bg);
  color: var(--panel-ink);
  padding: 1vw;
  font-size: 1vw;
}

.mobile .field select option {
  font-size: 4vw;
}

select option[value=""] {
  display: none;
}

label {
  position: absolute;
  right: 0;
  top: 2.2vw;
  font-size: 0.94vw;
}

.mobile label {
  position: absolute;
  right: 0;
  top: 8.3vw;
  font-size: 4.8vw;
}

/* --- validation feedback --- */
.error,
.success {
  color: var(--error-ink);
  position: absolute;
  z-index: 1;
  left: 1vw;
  top: 2.2vw;
  display: none;
  font-size: 0.94vw;
}

.mobile .error,
.mobile .success {
  left: 5vw;
  top: 8.2vw;
  font-size: 3.5vw;
}

.success {
  left: 2vw;
  top: 1.2vw;
  font-size: 1vw;
  color: var(--panel-ink);
}

.mobile .success {
  top: 3.2vw;
  font-size: 4.5vw;
  color: var(--panel-ink);
}

.success.active,
.error.active {
  display: block;
}

/* --- consent block --- */
.extra-info .privacy-text {
  font-size: 0.7vw;
  line-height: 1.4;
}

.mobile .extra-info .privacy-text {
  font-size: 3.2vw;
}

.extra-info .privacy-text .url,
.checkbox-title a {
  color: var(--panel-ink);
  text-decoration: underline;
}

.field.field-checkbox,
.field.field-checkbox label {
  position: relative;
  top: 0.5vw;
}

.field.field-checkbox label {
  display: flex;
  align-items: baseline;
  gap: 1vw;
}

.checkbox-title {
  font-size: 0.8vw;
}

.mobile .checkbox-title {
  font-size: 3.5vw;
}

.field .checkbox-v {
  width: 1vw;
  height: 1vw;
  background-color: transparent;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  padding: 0;
  border: 1px solid var(--panel-ink);
  top: 0.5vw;
}

.mobile .field .checkbox-v {
  width: 4vw;
  height: 4vw;
  top: 1vw;
}

.field input[type="checkbox"] {
  display: none;
}

.field input[type="checkbox"]:checked + .checkbox-v::after {
  content: "";
  position: absolute;
  inset: 0.15vw;
  background-color: var(--brand-accent);
}

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

/* --- submit --- */
.send-btn {
  color: var(--brand-accent-ink);
  font-size: 0.94vw;
  cursor: pointer;
  -webkit-appearance: none;
  height: 3.13vw;
  width: 100%;
  padding: 0;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--brand-accent);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all 0.3s ease-out;
  letter-spacing: 0.02vw;
  margin-top: 2vw;
  border: none;
}

.send-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.mobile .send-btn {
  font-size: 5.94vw;
  border-radius: unset;
  height: 5.13vw;
  padding: 7vw;
  margin-top: 8vw;
}


/* ======================== THANK-YOU PANEL ======================== */
.tnx {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100vh;
  background-color: var(--panel-bg);
  color: var(--panel-ink);
  width: 25vw;
  display: none;
  z-index: 999999;
}

.mobile .tnx {
  width: 100%;
}

.tnx.active {
  display: block;
}

.tnx .form_logo {
  margin-top: 3vw;
}

.tnx__title {
  font-size: 1.8vw;
  line-height: 1;
  margin-bottom: 2vw;
  text-align: center;
  margin-top: 4vw;
}

.mobile .tnx__title {
  font-size: 7vw;
  margin-top: 30vw;
}


/* ==================== ACCESSIBILITY / LEGAL ==================== */
.wrapper_accessibility {
  width: 50%;
  padding: 1vw;
  display: flex;
  flex-direction: column;
  gap: 1.1vw;
}

.mobile .wrapper_accessibility {
  width: 95%;
  position: relative;
  z-index: 999;
}

a.accessibility {
  color: var(--page-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.4vw;
}

a.accessibility img {
  width: 1vw;
  height: 1vw;
}

.mobile .accessibility {
  align-self: self-start;
}

.mobile .accessibility img {
  width: 5vw;
  height: 5vw;
}

/* Legal / phase text injected from the model data endpoint */
.mispatit {
  font-size: 0.6vw;
  line-height: 1.4;
}

.mobile .mispatit {
  font-size: 2.8vw;
}


/* ======================= MOBILE CTA BAR =======================
   .callUs href is rewritten per utm_content by maskyoo.js, and hidden outside
   call-centre hours by handle_c2c1.js. */
.mobile .cta {
  position: fixed;
  display: flex;
  bottom: -0.2vw;
  width: 100%;
  height: 15.7vw;
  z-index: 999999;
  font-size: 4.8vw;
}

.mobile .cta a {
  text-decoration: none;
  color: var(--panel-ink);
  flex: 1;
  padding: 0 2vw 0;
  font-size: 4.2vw;
  line-height: 1;
  text-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile .cta .callUs {
  background: var(--panel-bg);
  color: var(--panel-ink);
  display: none;
  border-right: 3px solid var(--brand-accent);
  border-left: 3px solid var(--brand-accent);
  border-bottom: 3px solid var(--brand-accent);
  box-sizing: content-box;
}

.mobile .cta .callUs::before {
  content: "";
  width: 7vw;
  height: 18vw;
  /* media server (media-base.php): images/ no longer ships with the code, and
     CSS cannot read a PHP constant — same for envelope_icon2.svg below. */
  background: url(https://media.renault.co.il/ao/images/phone_icon.svg);
  position: relative;
  top: 5.8vw;
  left: 0;
  background-repeat: no-repeat;
}

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

.mobile .cta .testDrive::before {
  content: "";
  width: 10vw;
  height: 15.8vw;
  background: url(https://media.renault.co.il/ao/images/envelope_icon2.svg);
  position: relative;
  top: 5.6vw;
  left: 2vw;
  background-repeat: no-repeat;
}

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


/* ===================== SPEC / LEGAL POPUP ===================== */
.popUp {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999999;
  background: #fff;
  max-width: 90vw;
  max-height: 90vh;
}

.popUp img {
  display: block;
  max-width: 90vw;
  max-height: 85vh;
}

.popUp .close {
  position: absolute;
  top: 0.5vw;
  left: 0.5vw;
  cursor: pointer;
  font-size: 1.2vw;
  color: #000;
  z-index: 1;
}

.mobile .popUp .close {
  font-size: 5vw;
  top: 2vw;
  left: 2vw;
}