/* WRV_BOOKING_WIZARD_1_2_164
   Progressive-enhancement wizard layer for the booking form. The form still works
   without JS; this only activates when wrv-booking-wizard.js adds .wrv-wiz-on. */

/* Progress header */
.wrv-wiz-progress{
  display:flex;
  align-items:center;
  gap:0;
  margin:0 0 26px;
  padding:0;
  list-style:none;
  counter-reset:wizstep;
}
.wrv-wiz-progress li{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1 1 0;
  min-width:0;
  position:relative;
  color:#7c8b81;
  font-weight:600;
  font-size:14px;
}
.wrv-wiz-progress li .wrv-wiz-dot{
  flex:0 0 auto;
  width:34px;height:34px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#e8efe9;
  color:#5b6b60;
  font-weight:700;
  font-size:15px;
  border:2px solid transparent;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.wrv-wiz-progress li .wrv-wiz-label{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* connector line between steps */
.wrv-wiz-progress li:not(:last-child)::after{
  content:"";
  flex:1 1 auto;
  height:2px;
  background:#e2e8e3;
  margin:0 10px;
  min-width:14px;
}
.wrv-wiz-progress li.is-active{ color:#163a24; }
.wrv-wiz-progress li.is-active .wrv-wiz-dot{
  background:#245f37;color:#fff;border-color:#245f37;
}
.wrv-wiz-progress li.is-done{ color:#245f37; }
.wrv-wiz-progress li.is-done .wrv-wiz-dot{
  background:#dff1e4;color:#245f37;border-color:#bfe3cb;
}
.wrv-wiz-progress li.is-done .wrv-wiz-dot::before{ content:"\2713"; }
.wrv-wiz-progress li.is-done .wrv-wiz-dot span{ display:none; }

/* Panes: when wizard is on, only the active step-card shows */
.wrv-wiz-on .wrv-step-card{ display:none; }
.wrv-wiz-on .wrv-step-card.wrv-wiz-active{
  display:block;
  animation:wrvWizFade .25s ease;
}
@keyframes wrvWizFade{ from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:none;} }

/* Nav buttons */
.wrv-wiz-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:8px 0 12px;
  padding:18px 0 0;
}
.wrv-wiz-nav .wrv-wiz-spacer{ flex:1 1 auto; }
.wrv-wiz-btn{
  appearance:none;
  border:0;
  border-radius:14px;
  padding:14px 26px;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:52px;
}
.wrv-wiz-btn.next,.wrv-wiz-btn.submit{
  background:#245f37;color:#fff;
  box-shadow:0 12px 26px rgba(36,95,55,.22);
}
.wrv-wiz-btn.next:hover,.wrv-wiz-btn.submit:hover{ background:#1d4e2d; }
.wrv-wiz-btn.back{
  background:#eef3ef;color:#2c4636;
}
.wrv-wiz-btn.back:hover{ background:#e2ebe4; }

/* Hide the original single submit row while the wizard drives submission */
.wrv-wiz-on .booking-form > .wrv-actions{ display:none; }

/* ---- Add-ons as clean cards ---- */
.wrv-wiz-on .wrv-addons-list,
.wrv-addons-list.wrv-addon-cardgrid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:16px;
}
.wrv-addon-cardgrid .wrv-addon{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:12px !important;
  margin:0 !important;
  padding:18px !important;
  border:1px solid #dfeae3 !important;
  border-radius:18px !important;
  background:#fff !important;
  box-shadow:0 10px 26px rgba(15,23,42,.05);
}
.wrv-addon-cardgrid .wrv-addon .wrv-addon-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.wrv-addon-cardgrid .wrv-addon strong{
  font-size:16px;
  color:#102618;
  line-height:1.2;
}
.wrv-addon-cardgrid .wrv-addon .wrv-addon-price{
  font-weight:700;
  color:#245f37;
  white-space:nowrap;
  font-size:15px;
}
.wrv-addon-cardgrid .wrv-addon .wrv-addon-note{
  color:#5d6c62;
  font-size:13.5px;
  line-height:1.45;
  margin:0;
}
.wrv-addon-cardgrid .wrv-addon select{
  width:100% !important;
  min-height:48px !important;
  border-radius:12px !important;
  margin-top:auto;
}
.wrv-addon-cardgrid .wrv-addon .wrv-addon-multi{ margin-top:auto; }

@media(max-width:760px){
  .wrv-wiz-progress li .wrv-wiz-label{ display:none; }
  .wrv-wiz-progress li{ flex:0 0 auto; }
  .wrv-wiz-progress li:not(:last-child)::after{ min-width:18px; }
  .wrv-wiz-btn{ padding:13px 20px; font-size:15px; }
}

/* WRV_PAYMENT_DOT_1_2_174: trailing non-navigable Payment step on the progress bar */
.wrv-wiz-progress li.wrv-wiz-payment-dot .wrv-wiz-dot{
  background:#eef3ef;
  color:#245f37;
  border:2px dashed #bcd8c6;
}

/* WRV_TERMS_CHECKBOX_FIX_1_2_175: the agreement & SMS opt-in checkboxes are inside
   .booking-form label, which the base stylesheet forces to flex-direction:column and
   stretches inputs to min-height:52px !important. Force these specific checkbox rows
   back to an inline (checkbox + text on one line) layout with a normal 18px box. */
.booking-form label.confirm-box,
.booking-form label.wrv-sms-optin,
.booking-form label.wrv-sms-optin-row{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:10px !important;
}
.booking-form label.confirm-box input[type="checkbox"],
.booking-form label.wrv-sms-optin input[type="checkbox"]{
  flex:0 0 auto !important;
  width:18px !important;
  height:18px !important;
  min-height:0 !important;
  min-width:18px !important;
  margin:0 !important;
  accent-color:#245f37;
}
.booking-form label.confirm-box > span{ flex:1 1 auto; }

/* WRV_SUBMIT_DECLUTTER_1_2_176: merge the "Review before submitting" summary, the
   action buttons, and the (hidden) submit status into one clean bordered section
   instead of separate stacked boxes. */
.booking-form .wrv-submit-review{
  margin:14px 0 0 !important;
  border-bottom:0 !important;
  border-bottom-left-radius:0 !important;
  border-bottom-right-radius:0 !important;
}
.booking-form .wrv-submit-review + .wrv-actions{
  margin:0 0 0 0 !important;
  border:1px solid #d7e8db !important;
  border-top:0 !important;
  border-top-left-radius:0 !important;
  border-top-right-radius:0 !important;
  border-bottom-left-radius:16px !important;
  border-bottom-right-radius:16px !important;
  background:#f8fcf9 !important;
  box-shadow:none !important;
  padding:16px 15px !important;
}
/* the submit status, when shown, tucks inside the same visual block */
.booking-form .wrv-actions + .wrv-submit-status{
  margin-top:12px !important;
}
