/* CAR RENTAL PAPHOS — BOOKING UI v7
   Original Motors structure/layout preserved. Visual changes only. */
body[class*="stm-template-car_rental"]{
  --crp-orange:#ff7a00;
  --crp-orange-hover:#e86f00;
  --crp-black:#111315;
  --crp-ink:#17262d;
  --motors-default-base-color:#ff7a00;
  --motors-base-color:#ff7a00;
  --mvl-primary-color:#ff7a00;
  --motors-accent-color:#ff7a00;
}

/* Reservation hero: requested image + very light dark overlay */
body[class*="stm-template-car_rental"] .stm-fullwidth-with-parallax-bg{
  background-image:linear-gradient(rgba(0,0,0,.16),rgba(0,0,0,.16)),url('https://carrentalpaphos.com/wp-content/uploads/2026/08/paphos-rent-car.png') !important;
  background-size:cover !important;
  background-position:center center !important;
}
body[class*="stm-template-car_rental"] .stm_wizard_title{color:#fff !important;text-shadow:0 2px 10px rgba(0,0,0,.25)!important;}

/* TOP STEPS — keep original dimensions/layout. White panels, dark header, orange number box */
body[class*="stm-template-car_rental"] .stm_nav_wizard_step .inner,
body[class*="stm-template-car_rental"] .stm_nav_wizard_step .content{
  background:#fff !important;
  color:var(--crp-ink) !important;
}
body[class*="stm-template-car_rental"] .stm_nav_wizard_step .top,
body[class*="stm-template-car_rental"] .stm_nav_wizard_step .inner.current .top{
  background:var(--crp-black) !important;
  color:#fff !important;
}
body[class*="stm-template-car_rental"] .stm_nav_wizard_step .top label{color:#fff !important;}
body[class*="stm-template-car_rental"] .stm_nav_wizard_step .top .num,
body[class*="stm-template-car_rental"] .stm_nav_wizard_step .inner.current .top .num{
  background:var(--crp-orange) !important;
  color:#111 !important;
}
body[class*="stm-template-car_rental"] .stm_nav_wizard_step .content,
body[class*="stm-template-car_rental"] .stm_nav_wizard_step .content div,
body[class*="stm-template-car_rental"] .stm_nav_wizard_step .content span{color:var(--crp-ink) !important;}
body[class*="stm-template-car_rental"] .stm_nav_wizard_step .content h5{color:var(--crp-ink) !important;}
body[class*="stm-template-car_rental"] .stm_nav_wizard_step .inner.current .content{background:#fff !important;}

/* STEP 1 VEHICLES — original Motors card stays white; only site accents change */
body[class*="stm-template-car_rental"] .stm_single_class_car,
body[class*="stm-template-car_rental"] .stm_single_class_car .first,
body[class*="stm-template-car_rental"] .stm_single_class_car .first .image,
body[class*="stm-template-car_rental"] .stm_single_class_car .second,
body[class*="stm-template-car_rental"] .stm_single_class_car .top,
body[class*="stm-template-car_rental"] .stm_single_class_car .stm_rent_prices,
body[class*="stm-template-car_rental"] .stm_single_class_car .stm_rent_price{
  background:#fff !important;
}
body[class*="stm-template-car_rental"] .stm_single_class_car h1,
body[class*="stm-template-car_rental"] .stm_single_class_car h2,
body[class*="stm-template-car_rental"] .stm_single_class_car h3,
body[class*="stm-template-car_rental"] .stm_single_class_car h4,
body[class*="stm-template-car_rental"] .stm_single_class_car h5,
body[class*="stm-template-car_rental"] .stm_single_class_car .title,
body[class*="stm-template-car_rental"] .stm_single_class_car .total,
body[class*="stm-template-car_rental"] .stm_single_class_car .woocommerce-Price-amount,
body[class*="stm-template-car_rental"] .stm_single_class_car .amount{color:var(--crp-ink)!important;}
body[class*="stm-template-car_rental"] .stm_single_class_car .s_title,
body[class*="stm-template-car_rental"] .stm_single_class_car .single_info,
body[class*="stm-template-car_rental"] .stm_single_class_car .single_info span,
body[class*="stm-template-car_rental"] .stm_single_class_car .period,
body[class*="stm-template-car_rental"] .stm_single_class_car .period *{color:#526168!important;}
body[class*="stm-template-car_rental"] .stm_single_class_car .single_info i,
body[class*="stm-template-car_rental"] .stm_single_class_car .infos i{color:var(--crp-orange)!important;}

/* CTAs throughout booking */
body[class*="stm-template-car_rental"] .stm_single_class_car .stm_rent_price .pay a,
body[class*="stm-template-car_rental"] .stm_single_class_car a.stm-button,
body[class*="stm-template-car_rental"] .stm_single_class_car .button,
body[class*="stm-template-car_rental"] .stm_rental_options_archive .stm-add-to-cart a,
body[class*="stm-template-car_rental"] .stm_rent_order_info .stm_rent_order_info_btn,
body[class*="stm-template-car_rental"] #place_order,
body[class*="stm-template-car_rental"] .checkout-button,
body[class*="stm-template-car_rental"] button.button,
body[class*="stm-template-car_rental"] input.button{
  background:var(--crp-orange)!important;
  border-color:var(--crp-orange)!important;
  color:#fff!important;
}
body[class*="stm-template-car_rental"] .stm_single_class_car .stm_rent_price .pay a:hover,
body[class*="stm-template-car_rental"] .stm_single_class_car a.stm-button:hover,
body[class*="stm-template-car_rental"] .stm_single_class_car .button:hover,
body[class*="stm-template-car_rental"] .stm_rental_options_archive .stm-add-to-cart a:hover,
body[class*="stm-template-car_rental"] #place_order:hover,
body[class*="stm-template-car_rental"] button.button:hover{
  background:var(--crp-orange-hover)!important;
  border-color:var(--crp-orange-hover)!important;
}

/* Add-ons / summary: preserve native layout, use restrained brand accents */
body[class*="stm-template-car_rental"] .stm_rental_options_archive .stm_rental_option{background:#fff!important;}
body[class*="stm-template-car_rental"] .stm_rental_options_archive .stm_rental_option .title h4{color:var(--crp-ink)!important;}
body[class*="stm-template-car_rental"] .stm_rent_order_info .title,
body[class*="stm-template-car_rental"] .stm_rent_order_info h4{border-color:var(--crp-orange)!important;}
body[class*="stm-template-car_rental"] .stm_rent_order_info .estimated-total,
body[class*="stm-template-car_rental"] .stm_rent_order_info .estimated_total{border-color:var(--crp-orange)!important;}
body[class*="stm-template-car_rental"] .stm_rent_order_info .estimated-total .price,
body[class*="stm-template-car_rental"] .stm_rent_order_info .estimated_total .price{color:var(--crp-orange)!important;}

/* Checkout stays native/light; only CTA and focus accents are branded */
body[class*="stm-template-car_rental"] .woocommerce-checkout input:focus,
body[class*="stm-template-car_rental"] .woocommerce-checkout select:focus,
body[class*="stm-template-car_rental"] .woocommerce-checkout textarea:focus{border-color:var(--crp-orange)!important;outline-color:var(--crp-orange)!important;}

/* No width/grid/flex/spacing/responsive overrides: Motors remains responsible for layout. */

/* =========================================================
   V8 — WIZARD CARDS + CTA CORRECTIONS
   Exact request: preserve Motors layout, improve only visual skin.
   ========================================================= */

/* Three step cards: white body, black header, orange number blocks. */
body[class*="stm-template-car_rental"] .stm-fullwidth-with-parallax-bg .stm_nav_wizard_step .inner{
  background:#fff !important;
  border:0 !important;
  box-shadow:0 10px 26px rgba(0,0,0,.12) !important;
  overflow:visible !important;
}
body[class*="stm-template-car_rental"] .stm-fullwidth-with-parallax-bg .stm_nav_wizard_step .top,
body[class*="stm-template-car_rental"] .stm-fullwidth-with-parallax-bg .stm_nav_wizard_step .inner.current .top,
body[class*="stm-template-car_rental"] .stm-fullwidth-with-parallax-bg .stm_nav_wizard_step .inner.passed .top{
  background:#111315 !important;
  color:#fff !important;
  cursor:default !important;
}
body[class*="stm-template-car_rental"] .stm-fullwidth-with-parallax-bg .stm_nav_wizard_step .top .number,
body[class*="stm-template-car_rental"] .stm-fullwidth-with-parallax-bg .stm_nav_wizard_step .inner.current .top .number,
body[class*="stm-template-car_rental"] .stm-fullwidth-with-parallax-bg .stm_nav_wizard_step .inner.passed .top .number{
  background:#ff7a00 !important;
  color:#111315 !important;
}
body[class*="stm-template-car_rental"] .stm-fullwidth-with-parallax-bg .stm_nav_wizard_step .top .number span,
body[class*="stm-template-car_rental"] .stm-fullwidth-with-parallax-bg .stm_nav_wizard_step .inner.passed .top .number span{
  display:block !important;
  color:#111315 !important;
  font-weight:800 !important;
}
/* Never replace step 1 with the passed/check icon; always show 1 / 2 / 3. */
body[class*="stm-template-car_rental"] .stm-fullwidth-with-parallax-bg .stm_nav_wizard_step .inner.passed .top .number:after{
  display:none !important;
  content:none !important;
}
body[class*="stm-template-car_rental"] .stm-fullwidth-with-parallax-bg .stm_nav_wizard_step .top label{
  color:#fff !important;
  cursor:default !important;
}
body[class*="stm-template-car_rental"] .stm-fullwidth-with-parallax-bg .stm_nav_wizard_step .content,
body[class*="stm-template-car_rental"] .stm-fullwidth-with-parallax-bg .stm_nav_wizard_step .inner.current .content{
  background:#fff !important;
  color:#17262d !important;
}
body[class*="stm-template-car_rental"] .stm-fullwidth-with-parallax-bg .stm_nav_wizard_step .inner.current .content:after{
  border-top-color:#fff !important;
}

/* Orange CTA corrections, including the actual Motors Continue link. */
body[class*="stm-template-car_rental"] .stm_rent_accept,
body[class*="stm-template-car_rental"] a.stm_rent_accept,
body[class*="stm-template-car_rental"] .stm-add-to-cart a,
body[class*="stm-template-car_rental"] .stm_rent_price .pay a,
body[class*="stm-template-car_rental"] #place_order{
  background:#ff7a00 !important;
  border-color:#ff7a00 !important;
  color:#111315 !important;
}
body[class*="stm-template-car_rental"] .stm_rent_accept:hover,
body[class*="stm-template-car_rental"] a.stm_rent_accept:hover,
body[class*="stm-template-car_rental"] .stm-add-to-cart a:hover,
body[class*="stm-template-car_rental"] .stm_rent_price .pay a:hover,
body[class*="stm-template-car_rental"] #place_order:hover{
  background:#e86f00 !important;
  border-color:#e86f00 !important;
  color:#111315 !important;
}

/* =========================================================
   V9 — WIZARD CARD HEIGHT ONLY
   Keep every V8 visual/functionality change exactly as-is.
   The only change: stop the 3 step cards from stretching to
   the bottom of the hero. Keep a visible image gap below.
   ========================================================= */
@media (min-width:1024px){
  body[class*="stm-template-car_rental"] .stm-fullwidth-with-parallax-bg .container .row{
    align-items:flex-start !important;
  }
  body[class*="stm-template-car_rental"] .stm-fullwidth-with-parallax-bg .container .row > div .stm_nav_wizard_step,
  body[class*="stm-template-car_rental"] .stm-fullwidth-with-parallax-bg .container .row > div .stm_nav_wizard_step .inner{
    height:auto !important;
  }
  body[class*="stm-template-car_rental"] .stm-fullwidth-with-parallax-bg .container .row > div .stm_nav_wizard_step .content,
  body[class*="stm-template-car_rental"] .stm-fullwidth-with-parallax-bg .container .row > div .stm_nav_wizard_step .inner.current .content{
    height:206px !important;
    min-height:206px !important;
    box-sizing:border-box !important;
  }
}