/* ===== Lead form rail (desktop) / modal (mobile) ===== */
/* Figma: the navy rail is a 430px column spanning the FULL page height, with the
   form sitting at its top in normal flow. It must never be viewport-height with an
   inner scroller — that clips the submit CTA on standard laptop heights. */
.form-rail{
  flex:0 0 var(--rail-w);
  width:var(--rail-w);
  align-self:stretch;
  background:var(--navy);
  z-index:60;
}
.form-rail__inner{background:var(--navy)}

/* The form follows the scroll on desktop so it stays reachable down the page.
   The form is ~943px tall: on short viewports (e.g. 1366x768) it does not fit,
   so the sticky box is capped at the viewport height and scrolls internally —
   that keeps the submit CTA reachable instead of clipping it off-screen.
   100vh is divided by --page-zoom for the same reason as .page in base.css. */
@media (min-width:1025px){
  .form-rail__inner{
    position:sticky;top:0;
    max-height:calc(100vh / var(--page-zoom,1));
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:var(--gold) var(--navy);
  }
}
.form-rail__brand{
  height:67px;background:var(--teal);
  display:flex;align-items:center;justify-content:center;
}
.form-rail__brand img{width:120px;height:35px}
.form-rail__model{
  height:62px;background:var(--navy);
  display:flex;align-items:center;justify-content:center;
}
.form-rail__model img{width:245px;height:30px}
.form-rail__close{display:none}

.lead-form{padding:16px 24px 48px;color:var(--white)}
.lead-form__headline{
  font-size:28px;line-height:36px;font-weight:300;text-align:center;
  padding:0 8px;
}
.lead-form__sub{
  font-size:16px;line-height:16px;font-weight:700;text-align:center;
  margin-top:5px;
}
.lead-form__fields{margin-top:32px;display:flex;flex-direction:column;gap:22px}

.field label{
  display:block;
  font-family:var(--font-brand);
  font-size:14px;line-height:20px;font-weight:400;color:var(--white);
}
.field input[type=text],
.field input[type=tel],
.field input[type=email]{
  display:block;width:100%;height:48px;margin-top:4px;
  background:var(--white);border:1px solid var(--white);border-radius:8px;
  padding:0 16px;
  font-family:var(--font-brand);font-size:16px;line-height:24px;font-weight:400;
  color:var(--navy);
}
/* Chrome forces direction:ltr on tel inputs, which parks the Hebrew placeholder
   on the left. Put it back to RTL so נייד starts on the right like the other
   fields; the digits themselves are a numeric run and still read left-to-right. */
.field input[type=tel]{direction:rtl}
.field input::placeholder{color:var(--placeholder);opacity:1}
.field input:focus{outline:2px solid var(--gold);outline-offset:1px}
.field.has-error input{border-color:var(--pollution)}
.field__err{
  display:block;min-height:0;font-size:13px;line-height:18px;font-weight:400;
  color:#ff8a8a;
}
.field.has-error .field__err{min-height:18px}

.halls__title{font-size:20px;line-height:28px;font-weight:700;color:var(--white)}
.halls__list{display:flex;flex-wrap:wrap;gap:20px 12px;margin-top:12px}
.hall{
  height:40px;padding:0 20px;border-radius:999px;
  border:1px solid var(--gold);background:transparent;color:var(--white);
  font-size:16px;line-height:24px;font-weight:400;
  transition:background .2s ease,color .2s ease;
}
.hall:hover{background:rgba(176,165,145,.2)}
.hall.is-active{background:var(--gold);color:var(--navy)}
.halls.has-error .hall{border-color:var(--pollution)}

.lead-form__privacy{
  margin-top:11px;
  font-size:14px;line-height:16px;font-weight:400;color:var(--white);
}
.lead-form__consent{
  display:flex;align-items:flex-start;gap:8px;margin-top:32px;
  font-size:14px;line-height:16px;font-weight:300;color:var(--white);
  cursor:pointer;
}
.lead-form__consent input{
  flex:0 0 16px;width:16px;height:16px;margin:1px 0 0;
  appearance:none;-webkit-appearance:none;
  background:var(--white);border:1px solid var(--placeholder);border-radius:2px;
  cursor:pointer;position:relative;
}
.lead-form__consent input:checked::after{
  content:'';position:absolute;inset:0;
  background:url('../../images/figma/icons/checkbox-mark.svg') center/10px 8px no-repeat;
}
.lead-form a{color:inherit;text-decoration:underline}

.lead-form__cta{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:48px;margin-top:32px;border-radius:8px;
  background:var(--gold);color:var(--navy);
  font-family:var(--font-brand);font-size:16px;line-height:16px;font-weight:300;
  transition:filter .2s ease;
}
.lead-form__cta:hover{filter:brightness(1.06)}
.lead-form__cta img{width:10px;height:16px}
.lead-form__cta[disabled]{opacity:.6;cursor:default}

/* Submit failure feedback — a submit must always resolve to a visible outcome. */
.lead-form__error{
  display:none;margin-top:12px;text-align:center;
  font-size:14px;line-height:20px;font-weight:400;color:#ff8a8a;
}
.lead-form__error.is-on{display:block}

/* Thank-you state */
.form-thanks{display:none;padding:64px 24px;text-align:center;color:var(--white)}
.form-thanks.is-on{display:block}
.form-thanks h2{font-size:28px;line-height:36px;font-weight:300}
.form-thanks p{margin-top:12px;font-size:16px;line-height:24px;font-weight:300}
.lead-form.is-hidden{display:none}

/* ===== Mobile: rail becomes a modal ===== */
@media (max-width:1024px){
  .form-rail{
    position:fixed;inset:0;width:100%;height:100%;flex:none;
    z-index:120;overflow-y:auto;
    display:none;
  }
  .form-rail.is-open{display:block}
  .form-rail__brand{height:54px}
  .form-rail__brand img{width:103px;height:30px}
  .form-rail__model{height:54px}
  .form-rail__model img{width:171px;height:21px}
  .form-rail__close{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:62px;left:12px;width:36px;height:36px;
    border-radius:50%;color:var(--white);font-size:26px;line-height:1;z-index:2;
  }
  .lead-form{padding:16px 16px 56px}
  .lead-form__headline{font-size:22px;line-height:28px}
  .lead-form__sub{font-size:15px;line-height:20px}
  .halls__list{gap:12px 10px}
  .hall{height:38px;padding:0 16px;font-size:15px}
}