:root{
  --sc-ink:#0b0b0c;
  --sc-muted:rgba(0,0,0,.62);
  --sc-line:rgba(17,17,17,.12);
  --sc-gold:#BF9C60;
  --sc-blue:#5185a8;
  --sc-radius:18px;
}

/* kill old spacing pushing the form */
.booking-form{ margin-top:0 !important; }
.form-options{ padding:0 !important; }

.sc-wrap{ padding:18px 0 44px; }
.sc-max{ max-width: 920px; margin: 0 auto; }

.sc-shell{
  background:#fff;
  border:1px solid var(--sc-line);
  border-radius: var(--sc-radius);
  overflow:hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
}

.sc-hero{
  padding:16px;
  background: linear-gradient(135deg, rgba(191,156,96,.18), rgba(81,133,168,.10));
  border-bottom:1px solid var(--sc-line);
}
@media (min-width: 992px){ .sc-hero{ padding:18px 22px; } }

.sc-hero h2{
  margin:0 0 6px;
  font-size:18px;
  line-height:1.2;
  color:var(--sc-ink);
}
.sc-hero p{
  margin:0;
  color:var(--sc-muted);
  font-size:13.5px;
  line-height:1.45;
  max-width:760px;
}
.sc-badges{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.sc-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border:1px solid var(--sc-line);
  background: rgba(255,255,255,.75);
  border-radius:999px;
  font-size:12px;
  color:rgba(0,0,0,.72);
}
.sc-dot{ width:7px;height:7px;border-radius:99px;background:var(--sc-gold);display:inline-block; }

.sc-body{ padding:14px; }
@media (min-width: 992px){ .sc-body{ padding:18px 22px; } }

.sc-panel{
  border:1px solid var(--sc-line);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}
.sc-panel-head{
  padding:14px 16px 12px;
  border-bottom:1px solid var(--sc-line);
  background: rgba(0,0,0,.02);
}
.sc-panel-head h3{ margin:0; font-size:14px; color:var(--sc-ink); }
.sc-panel-head small{
  display:block;
  margin-top:5px;
  color:var(--sc-muted);
  font-size:12px;
  line-height:1.35;
}
.sc-panel-body{ padding:18px 16px 16px; }
@media (min-width: 992px){ .sc-panel-body{ padding:20px 18px 18px; } }

.sc-alert{
  background: rgba(220,53,69,.08);
  border:1px solid rgba(220,53,69,.22);
  border-radius:14px;
  padding:12px 14px;
  margin-bottom:14px;
}
.sc-alert ul{ margin:0; padding-left:18px; }

/* ============================
   ✅ Inputs + stable errors
   ============================ */

/* Reserve a fixed space UNDER each field so page doesn't jump */
.sc-field{
  position:relative;
  padding-bottom:18px; /* reserved slot for error */
}

.sc-field label{
  display:block;
  margin:8px 0 8px;
  font-weight:700;
  font-size:12.5px;
  color: rgba(0,0,0,.80);
}

.sc-field .form-control,
.sc-field input[type="text"],
.sc-field input[type="email"],
.sc-field input[type="tel"],
.sc-field select,
.sc-field textarea{
  width:100%;
  border-radius:12px;
  border:1px solid var(--sc-line);
  background:#fff;
  padding:12px 12px;
  box-sizing:border-box;
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease;
  color: rgba(0,0,0,.86);
}

.sc-field textarea{ min-height:110px; resize:vertical; }

.sc-field .form-control:focus,
.sc-field input:focus,
.sc-field select:focus,
.sc-field textarea:focus{
  border-color: rgba(81,133,168,.55);
  box-shadow: 0 0 0 4px rgba(81,133,168,.14);
}

/* Validator inserts <label class="error"> ... */
.sc-field label.error,
.sc-field .invalid-feedback,
.sc-field span.invalid-feedback,
.sc-field .help-block,
.sc-field small.error{
  position:absolute;
  left:20px;
  bottom:0;
  margin:0 !important;
  padding:0 !important;
  font-size:13px;
  line-height:1.2;
  color:#dc3545;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

/* Select placeholder clarity */
select.sc-select{
  padding:12px 12px;
  min-height:46px;
  line-height:1.25;
  color: rgba(0,0,0,.86);
}
select.sc-select.is-empty{ color: rgba(0,0,0,.48) !important; }
select.sc-select option[value=""],
select.sc-select option[value="0"]{ color: rgba(0,0,0,.55); }

.countryCode{
  width:100%;
  margin:0;
  padding:12px 12px;
  border:1px solid var(--sc-line);
  border-radius:12px;
  font-size:14px;
  box-sizing:border-box;
  -webkit-appearance:none;
  background:#fff;
}

.form_date .add-on{ display:none; }

/* ============================
   Trip options
   ============================ */
.sc-switches{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.sc-switch{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--sc-line);
  border-radius:14px;
  background: rgba(0,0,0,.015);
  cursor:pointer;
  user-select:none;
  margin:0;
  transition: box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.sc-switch input{ transform: translateY(-1px); }
.sc-switch.is-active{
  border-color: rgba(191,156,96,.85);
  background: rgba(191,156,96,.10);
  box-shadow: 0 0 0 4px rgba(191,156,96,.12);
}

/* ============================
   ✅ Car tiles (NO DISPLACEMENT)
   ============================ */

/* IMPORTANT: reserve an error slot for the car group too */
#carTypeTiles{
  position:relative;
  padding-bottom:18px; /* space for car_type error label */
}

.sc-car-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 820px){
  .sc-car-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px){
  .sc-car-grid{ grid-template-columns: 1fr; }
}

/* If validator injects an error label into the grid, take it OUT of layout */
#carTypeTiles > label.error{
  position:absolute !important;
  left:0;
  bottom:0;
  width:100%;
  margin:0 !important;
  padding:0 !important;
  color:#dc3545;
  font-size:13px;
  line-height:1.2;
}

/* HARD LOCKED tile */
.sc-car{
  border:1px solid var(--sc-line);
  border-radius:14px;
  background:#fff;
  padding:12px 14px;
  margin:0;

  height:92px;        /* fixed always */
  overflow:hidden;    /* image/text cannot expand box */

  cursor:pointer;
  user-select:none;

  display:grid;
  grid-template-columns: 18px minmax(0,1fr) 120px; /* give title more space */
  align-items:center;
  column-gap:12px;

  transition: box-shadow .12s ease, border-color .12s ease;
}

.sc-car input{
  margin:0;
  width:14px;
  height:14px;
}

/* Title: show up to 2 lines (no ugly truncation) */
.sc-car-title{
  font-weight:800;
  font-size:13px;
  color: rgba(0,0,0,.82);
  line-height:1.15;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-word;
}

/* If you accidentally have TWO titles, hide the second one (after image) */
.sc-car .sc-car-title + img + .sc-car-title{
  display:none !important;
}

.sc-car img{
  width:120px;
  height:70px;
  object-fit:contain;
  justify-self:end;
  align-self:center;
  display:block;
  pointer-events:none;
}

.sc-car.is-active{
  border-color: rgba(191,156,96,.85);
  box-shadow: 0 0 0 4px rgba(191,156,96,.14);
}

/* If validator adds .error to label.sc-car, don't let it break grid */
label.sc-car,
label.sc-car.error,
.sc-car.error{
  display:grid !important;
  grid-template-columns: 18px minmax(0,1fr) 120px !important;
  align-items:center !important;
  column-gap:12px !important;
  height:92px !important;
  overflow:hidden !important;
}

/* ============================
   Child seat alignment
   ============================ */
.sc-child-row{
  display:grid;
  grid-template-columns: 1fr 240px;
  gap:12px;
  align-items:stretch;
}
@media (max-width: 768px){
  .sc-child-row{ grid-template-columns: 1fr; }
}
.sc-child-block{
  display:flex;
  flex-direction:column;
}
.sc-child-label-spacer{
  height:20px;
  margin-bottom:8px;
}
.sc-child-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--sc-line);
  border-radius:14px;
  background: rgba(0,0,0,.015);
  cursor:pointer;
  user-select:none;
  margin:0;
  min-height:46px;
}
.sc-child-toggle input{ transform: translateY(-1px); margin:0; }
.sc-child-toggle.is-active{
  border-color: rgba(191,156,96,.85);
  background: rgba(191,156,96,.10);
  box-shadow: 0 0 0 4px rgba(191,156,96,.12);
}

/* Button */
.sc-btn{
  border:0;
  border-radius:14px;
  padding:12px 16px;
  font-weight:800;
  cursor:pointer;
  width:100%;
  background: var(--sc-blue);
  color:#fff;
  box-shadow: 0 12px 20px rgba(81,133,168,.18);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
@media (min-width: 768px){
  .sc-btn{ width:auto; min-width:280px; }
}

/* =========================================================
   FINAL FIX: VALIDATION WITHOUT LAYOUT JUMP / OVERLAP
   Works with JsValidation / jquery validate injected labels
   ========================================================= */

/* 1) Every field reserves space for an error line */
#booking-form .sc-field{
  position: relative;
  padding-bottom: 22px; /* reserved error space */
}

/* 2) Base error label style (override theme/plugin absolute weirdness) */
#booking-form label.error{
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 2px;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  width: 100% !important;

  font-size: 12px !important;
  line-height: 1.25 !important;
  color: #dc3545 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  z-index: 2;
  pointer-events: none;
}

/* 3) If validator outputs bootstrap-like invalid-feedback */
#booking-form .invalid-feedback,
#booking-form span.invalid-feedback,
#booking-form .help-block,
#booking-form small.error{
  position: absolute !important;
  margin: 0 !important;
  display: block !important;

  font-size: 12px !important;
  line-height: 1.25 !important;
  color: #dc3545 !important;
  z-index: 2;
  pointer-events: none;
}

/* 4) Rows that contain 2 inputs inside one sc-field (Phone + Time)
      Reserve and pin error under EACH column, not the whole field */
#booking-form .sc-field .row > [class^="col"]{
  position: relative;
  padding-bottom: 18px; /* reserve inside each column */
}

#booking-form .sc-field .row > [class^="col"] label.error,
#booking-form .sc-field .row > [class^="col"] .invalid-feedback,
#booking-form .sc-field .row > [class^="col"] span.invalid-feedback,
#booking-form .sc-field .row > [class^="col"] .help-block,
#booking-form .sc-field .row > [class^="col"] small.error{
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 !important;
}

/* 5) Important: DO NOT treat interactive labels (tiles/switches) like errors */
#booking-form label.sc-car,
#booking-form label.sc-switch,
#booking-form label.sc-child-toggle{
  position: static !important;
  padding-bottom: 0 !important;
}

#booking-form label.sc-car.error,
#booking-form label.sc-switch.error,
#booking-form label.sc-child-toggle.error{
  position: static !important;
}

/* =========================================================
   CAR TILES: stable + titles readable
   ========================================================= */

#booking-form .sc-car-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 820px){
  #booking-form .sc-car-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px){
  #booking-form .sc-car-grid{ grid-template-columns: 1fr; }
}

#booking-form .sc-car{
  border: 1px solid var(--sc-line);
  border-radius: 14px;
  background: #fff;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  margin: 0;

  height: 92px;
  overflow: hidden;

  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 140px; /* radio | title | image */
  align-items: center;
  column-gap: 12px;

  transition: box-shadow .12s ease, border-color .12s ease;
}

#booking-form .sc-car input{
  margin: 0;
  width: 14px;
  height: 14px;
}

#booking-form .sc-car-title{
  font-weight: 800;
  font-size: 13px;
  color: rgba(0,0,0,.82);
  line-height: 1.15;

  /* allow 2 lines (no ugly S.. / V..) */
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#booking-form .sc-car img{
  width: 140px;
  height: 70px;
  object-fit: contain;
  justify-self: end;
  pointer-events: none;
  display: block;
}

@media (max-width: 820px){
  #booking-form .sc-car{
    grid-template-columns: 18px minmax(0, 1fr) 120px;
  }
  #booking-form .sc-car img{
    width: 120px;
  }
}

#booking-form .sc-car.is-active{
  border-color: rgba(191,156,96,.85);
  box-shadow: 0 0 0 4px rgba(191,156,96,.14);
}

/* Validator sometimes adds class error to the LABEL tile */
#booking-form label.sc-car,
#booking-form label.sc-car.error{
  display: grid !important;
  height: 92px !important;
  overflow: hidden !important;
}