/* ======================================================
   MTBG Booking Form – Global Stylesheet (SINGLE FILE)
   - Includes totals-table styles + booking fields + tiles
   ====================================================== */

/* ======================================================
   0) Global design tokens
   ====================================================== */

:root{
  --booking-bg-dark: #0f1115;
  --booking-bg-tile: rgba(0,0,0,.18);

  --booking-text-primary: #ffffff;
  --booking-text-secondary: rgba(255,255,255,.85);
  --booking-text-muted: rgba(255,255,255,.45);

  --booking-border-light: rgba(255,255,255,.16);
  --booking-border-hover: rgba(255,255,255,.26);
  --booking-border-divider: rgba(255,255,255,.10);

  --booking-accent-green: #19c37d;
  --booking-accent-green-strong: #00d26a;
  --booking-accent-green-soft: rgba(25,195,125,.22);

  --booking-accent-yellow: #ffd84d;
  --booking-accent-red: #ff5353;

  --booking-shadow-inset: inset 0 0 0 1px rgba(0,0,0,.35);
  --booking-shadow-badge: 0 6px 18px rgba(0,0,0,.35);
}


.mtbg-booking__heading {width:100%; margin-bottom:20px}
.mtbg-booking__heading h2 {color:var(--booking-text-primary)!important;font-family: londrina solid;text-align:center;font-weight: 500;margin:0px!important;}
/* ======================================================
   1) Botiga / Woo layout normalization
   ====================================================== */

form.cart .botiga-single-addtocart-wrapper .quantity{display:none;}
.wapf-wrapper{margin:0!important;}
.product-gallery-summary div+.botiga-single-addtocart-wrapper{margin-top:0!important;}
.product-gallery-summary div+.botiga-single-addtocart-wrapper{gap:0;}

form.cart .botiga-single-addtocart-wrapper{
  flex-wrap:wrap;
}

/* Totals mounts should span full width */
form.cart #mtbg_tours_totals_ui,
form.cart #mtbg_rentals_totals_ui{
  flex:0 0 100%!important;
  width:100%!important;
  max-width:100%!important;
}

form.cart #mtbg_tours_totals_ui .mtbg-totals-box,
form.cart #mtbg_rentals_totals_ui .mtbg-totals-box{
  width:100%!important;
  max-width:100%!important;
}

/* Totals + hint must take the whole row */
form.cart #mtbg_rental_days_hint,
form.cart #mtbg_rentals_totals_ui{
  flex:0 0 100%!important;
  width:100%!important;
  max-width:100%!important;
}

/* Make sure the box itself is full width */
form.cart #mtbg_rentals_totals_ui .mtbg-totals-box{
  width:100%!important;
  max-width:100%!important;
}

/* Hide native add-to-cart controls (we use our Book Now flow) */
form.cart .botiga-single-addtocart-wrapper .quantity,
form.cart .botiga-single-addtocart-wrapper .single_add_to_cart_button{
  display:none;
  flex:0 0 100%!important;
  width:100%!important;
  max-width:100%!important;
}

form.cart .botiga-single-addtocart-wrapper .single_add_to_cart_button{
  margin-top:12px;
}

/* ======================================================
   2) Hide WAPF totals UI (keep pricing logic active)
   ====================================================== */

.wapf-product-totals,
.wapf-product-totals-wrapper{
  display:none;
}

/* ======================================================
   3) Totals box
   ====================================================== */

.mtbg_rentals_totals_ui{width:100%;}
.mtbg-totals-box,
.mtbg_rentals_totals_ui{
  width:100%;
  max-width:100%;
  display:block;
  overflow:hidden;
}

/* ======================================================
   4) Totals rows layout
   ====================================================== */

.mtbg-totals-rows{
  display:block;
  width:100%;
}

.mtbg-totals-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  padding:5px 0;
}

.mtbg-totals-row:last-child{
  margin-bottom:10px;
  border-bottom:none;
}

.mtbg-totals-row span:first-child{
  flex:1 1 auto;
  min-width:0;
  line-height:1.2;
  color:var(--booking-text-secondary);
}

.mtbg-totals-row span:last-child{
  flex:0 0 auto;
  line-height:1.2;
  color:var(--booking-text-primary);
  text-align:right;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

/* Row variants */
.mtbg-totals-row--days-discount span{
  color:#94ffcc;
}

.mtbg-totals-row--last-minute span{
  color:var(--booking-accent-red);
}

.mtbg-totals-row--early-bird span{
  color:var(--booking-accent-yellow);
}

.mtbg-totals-row--italic span{
  font-style:italic;
}

/* ======================================================
   5) Totals footer
   ====================================================== */

.mtbg-totals-footer{
  border-top:1px solid var(--booking-border-divider);
  text-align:center;
  padding-top:10px;
}

.mtbg-footer-label{
  font-style:italic;
  font-size:18px;
  font-weight:700;
  color:var(--booking-text-primary);
}

.mtbg-footer-total{
  font-size:28px;
  font-weight:800;
  color:var(--booking-accent-green);
}

.mtbg-footer-original-total{
  color:var(--booking-text-muted);
  margin-right:8px;
  font-size:16px;
  text-decoration:line-through;
}

.mtbg-footer-final-total{
  color:var(--booking-accent-green);
}

.mtbg-footer-pp-single{
  margin-top:6px;
  font-size:1.125rem;
  color:var(--booking-text-secondary);
}

/* Mobile footer tweak */
@media (max-width:520px){
  .mtbg-footer-total{font-size:26px;}
}

/* Validation */
.mtbg-tours-validation{
  text-align:center;
  display:block;
  color:var(--booking-accent-red);
  font-style:italic;
  font-weight:500;
}

/* ======================================================
   6) Booking fields (shared: delivery + future selects)
   ====================================================== */

.booking-row{display:block; margin:20px 0px}
.booking-row.booking-row-2{display:flex;gap:14px;}

.booking-field{display:block;}
.booking-field.booking-field-half{flex:1 1 50%;min-width:0;}

.booking-label{
  display:inline-block;
  margin:0 0 8px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--booking-text-primary);
}

.booking-label .required,
.booking-label .asterisk,
.booking-label span[aria-hidden="true"],
.booking-label span{
  color:var(--booking-accent-green);
}

.booking-select{
  width:100%;
  height:46px;
  padding:0 14px;
  border-radius:8px;
  border:2px solid var(--booking-border-light);
  background:var(--booking-bg-tile)!important;
  color:#fff;
  font-size:14px;
  line-height:46px;
  outline:none;

  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;

  box-shadow:var(--booking-shadow-inset);
}

.booking-select:hover{
  border-color:var(--booking-border-hover);
}

.booking-select:focus,
.booking-select:focus-visible{
color:var(--booking-text-primary);
  border-color:var(--booking-accent-green);
  box-shadow:0 0 0 3px var(--booking-accent-green-soft), var(--booking-shadow-inset);
}

.booking-select:disabled{opacity:.55;cursor:not-allowed;}

@media (max-width:640px){
  .booking-row.booking-row-2{flex-direction:column;}
}

/* ======================================================
   7) Booking tiles (shared: sizes + future tile selectors)
   ====================================================== */

.booking-tiles{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin:20px 0px;
  width:100%;
}

.booking-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;

  border:2px solid rgba(255,255,255,.18);
  border-radius:12px;
  background:var(--booking-bg-tile);

  height:86px;
  padding:10px 8px;

  overflow:visible;
  isolation:isolate;
}

.booking-tile.is-active{
  border-color:var(--booking-accent-green-strong);
  box-shadow:0 0 0 2px rgba(0,210,106,.15) inset;
}

.booking-tile-title{
  font-weight:900;
  letter-spacing:.6px;
  font-size:16px;
  line-height:1.05;
  color:#fff;
  margin:0;
  pointer-events:none;
}

.booking-tile-sub{
  margin-top:6px;
  font-size:12px;
  line-height:1.15;
  opacity:.85;
  color:#fff;
  pointer-events:none;
  max-width:100%;
}

/* Invisible native select overlay */
.booking-tile-select{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  -webkit-appearance:auto;
  appearance:auto;
  border:0;
  background:transparent;
  cursor:pointer;
}

/* Badge */
.booking-badge{
  position:absolute;
  top:-12px;
  right:-12px;

  display:none;
  align-items:center;
  justify-content:center;

  width:26px;
  height:26px;
  border-radius:999px;

  background:var(--booking-accent-green-strong);
  color:#032b16;
  font-weight:900;
  font-size:13px;

  box-shadow:var(--booking-shadow-badge);
  z-index:3;
}

/* JS toggles this so CSS controls visibility (no inline styles) */
.booking-tile.has-badge .booking-badge{
  display:inline-flex;
}