/* ============================================================
   F1 Booking Flow — Modern Redesign
   single-product-category-booking-ecommerce.css
   ============================================================ */

/* ── Root Tokens ─────────────────────────────────────────── */
:root {
  --booking-navy:        #273248;
  --booking-amber:       #ff4713;
  --booking-amber-light: #ffe3db;
  --booking-amber-dark:  #c9360b;
  --booking-gold-tag-fg: #7a230a;

  --booking-bg:          #f7f7f7;
  --booking-surface:     #ffffff;
  --booking-border:      #c9c9c9;
  --booking-border-soft: #e3e3e3;

  --booking-text-primary:   #282823;
  --booking-text-secondary: #5f5f5f;
  --booking-text-tertiary:  #9f9f9f;

  --booking-radius-sm:  6px;
  --booking-radius-md:  10px;
  --booking-radius-lg:  16px;
  --booking-radius-xl:  20px;

  --booking-shadow-sm:  0 1px 3px rgba(39,50,72,.06), 0 1px 2px rgba(39,50,72,.04);
  --booking-shadow-md:  0 4px 16px rgba(39,50,72,.10), 0 1px 4px rgba(39,50,72,.06);
  --booking-shadow-lg:  0 8px 32px rgba(39,50,72,.14);

  --booking-transition: 0.18s ease;
  --booking-font-body: 'Fira Sans Regular', sans-serif;
  --booking-font-strong: 'Fira Sans Bold', sans-serif;
  --booking-font-display: 'Impact', sans-serif;
  --booking-size-xs: 0.875rem;
  --booking-size-sm: 1rem;
  --booking-size-md: 1.125rem;
  --booking-size-lg: 2rem;
  --booking-size-xl: 2rem;
}
.main-wrapper{
 width: 100%;
  background-color: #fff;
}
/* ── Wrapper ─────────────────────────────────────────────── */
.booking-booking-wrap {
  max-width: 1246px;
  margin: 0 auto;
  font-family: var(--booking-font-body);
  font-size: var(--booking-size-md);
  color: var(--booking-text-primary);
  /* visible: Rezlive guest dropdown extends below the field; hidden clipped it */
  overflow: visible;
}

/* ── Stepper ─────────────────────────────────────────────── */
.booking-stepper {
  display: flex;
  align-items: center;
  padding: 20px 24px 0;
  background: #fff;

  gap: 0;
  
}

.booking-step-item {
  display: flex;
  align-items: center;
  flex: 1;

}

.booking-step-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.booking-step-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  
  font-size: var(--booking-size-sm);
  font-family: var(--booking-font-strong);
  
  letter-spacing: .3px;
  flex-shrink: 0;
  border: 2px solid transparent;
  transition: all var(--booking-transition);
}
.booking-step-circle.done   { background: var(--booking-amber); color: var(--booking-navy); border-color: var(--booking-amber); }
.booking-step-circle.active { background: var(--booking-amber); color:#fff; border-color: var(--booking-amber); box-shadow: 0 0 0 4px rgba(255,164,0,.25); }
.booking-step-circle.idle   { background: var(--booking-surface); color: var(--booking-text-tertiary); border-color: var(--booking-border); }

.booking-step-label {
  font-size: var(--booking-size-xs);
  letter-spacing: .6px;
  text-transform: uppercase;
  white-space: nowrap;
  padding-bottom: 14px;
  color: var(--booking-text-tertiary);
  transition: color var(--booking-transition);
}
.booking-step-label.active-lbl { color: var(--booking-amber); }
.booking-step-label.done-lbl   { color: var(--booking-text-secondary); }

.booking-step-line {
  flex: 1;
  height: 2px;
  background: var(--booking-border-soft);
  margin: 0 6px;
  margin-bottom: 20px;
  transition: background var(--booking-transition);
}
.booking-step-line.filled { background: var(--booking-amber); }

/* ── Panels ──────────────────────────────────────────────── */
.booking-panels {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.booking-panel {
  background: var(--booking-surface);
  border: 1px solid var(--booking-border);
  overflow: visible;

  transition: box-shadow var(--booking-transition);
}
.booking-panel-header {
  padding: 6px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background: var(--booking-surface);
  border-bottom: 1px solid transparent;
  transition: background var(--booking-transition), border-color var(--booking-transition);
  user-select: none;
}
.booking-panel-header:hover { background: #FAFBFC; }
.booking-panel-header.booking-panel-header--locked {
  opacity: 0.7;
  cursor: not-allowed;
}
.booking-panel-header.booking-panel-header--locked:hover {
  background: var(--booking-surface);
}
.booking-panel-header.open-header { 
  border-color: var(--booking-border-soft); 
  background: var(--booking-navy); 
}
.booking-panel-header.open-header .booking-step-badge { background: var(--booking-amber); color: #fff; }
.booking-panel-header.open-header .booking-panel-title { color: #fff; font-size: 16px; }
.booking-panel-header.open-header .booking-panel-subtitle { color: #fff; }
.booking-panel-header.open-header .booking-chevron { color: #fff; }



.booking-panel-header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }

.booking-panel-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.booking-panel-header-payments {
  height: 28px;
  width: auto;
  max-width: min(200px, 42vw);
  object-fit: contain;
  display: block;
  background: #fff;
}

.booking-step-badge {
  width: 28px;
  height: 28px;
  
  background: var(--booking-navy);
  color: #fff;
  
  font-size: 13px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--booking-transition);
}
.booking-step-badge.amber { background: var(--booking-amber); color: var(--booking-navy); }
.booking-step-badge.muted { background: var(--booking-border); color: var(--booking-text-tertiary); }

.booking-panel-title {
  font-size: var(--booking-size-md);
 
  font-family: var(--booking-font-strong);
  color: var(--booking-text-primary);
  line-height: 1.2;
}
.booking-panel-subtitle {
  font-size: var(--booking-size-sm);
  color: var(--booking-text-secondary);
  margin-top: 2px;
}

.booking-chevron {
  width: 18px;
  height: 18px;
  color: var(--booking-text-tertiary);
  transition: transform var(--booking-transition);
  flex-shrink: 0;
}
.booking-chevron.open { transform: rotate(180deg); }

.booking-panel-body {
  padding: 0px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(.4,0,.2,1), padding .35s;
}
.booking-panel-body.open {
  padding: 10px 20px;
  max-height: 1200px;
  /* Let popovers (Rezlive guests/rooms dropdown) paint outside the panel body */
  overflow: visible;
}

/* ── Product Dropdown Row ────────────────────────────────── */
.booking-product-select-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.booking-field-label {
  font-size: var(--booking-size-xs);
 
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--booking-text-secondary);
  margin-bottom: 7px;
}

.booking-styled-select {
  height: 42px;
  border: 1.5px solid var(--booking-border);
  padding: 0 36px 0 14px;

  font-size: 16px;
  font-weight: 700;

  color: var(--booking-text-primary);
  background: var(--booking-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%236B7A94' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  min-width: 240px;
  max-width: 80%;
  transition: border-color var(--booking-transition), box-shadow var(--booking-transition);
}

.booking-styled-select-option {
  font-size: var(--booking-size-md);
  font-weight: 500;
  color: var(--booking-text-primary);
}

.booking-styled-select option {
  font-size: 16px;
  font-weight: 500;
}

.booking-styled-select:focus {
  outline: none;
  border-color: var(--booking-amber);
  box-shadow: 0 0 0 3px rgba(255,164,0,.15);
}

.booking-base-price {
  text-align: right;
  flex-shrink: 0;
}
.booking-base-price .from-label {
  font-size: 11px;
  color: var(--booking-text-secondary);
  margin-bottom: 2px;
}
.booking-base-price .price-value {
  font-family: var(--booking-font-display);
  font-size: var(--booking-size-xl);
  
  color: var(--booking-text-primary);
  line-height: 1;
}

/* ── Inclusions ──────────────────────────────────────────── */
.booking-incl-label {
  font-size: 11px;
 
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--booking-text-secondary);
  margin-bottom: 10px;
}

.booking-incl-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.booking-incl-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--booking-bg);
  font-size: 12px;
  color: var(--booking-text-secondary);
  border: 1px solid var(--booking-border-soft);
}
.booking-incl-dot {
  width: 6px;
  height: 6px;
  background: var(--booking-amber);
  flex-shrink: 0;
}

/* ── Divider ─────────────────────────────────────────────── */
.booking-divider {
  border: none;
  border-top: 1px solid var(--booking-border-soft);
  margin: 4px 0 18px;
}

/* ── Ticket Rows ─────────────────────────────────────────── */
.booking-tickets-label {
  font-size: 11px;
 
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--booking-text-secondary);
  margin-bottom: 12px;
}

.booking-panel-ticket-tab {
  padding: 28px 32px;
}

.booking-ticket-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px solid var(--booking-border-soft);
}
.booking-ticket-row--no-unit-price {
  grid-template-columns: 1fr auto;
}
.booking-ticket-row:last-child { border-bottom: none; }

.booking-ticket-name {
  font-size: var(--booking-size-md);
 
  font-family: var(--booking-font-strong);
  color: var(--booking-text-primary);
  line-height: 1.2;
}
.booking-ticket-desc {
  font-size: var(--booking-size-sm);
  color: var(--booking-text-secondary);
  margin-top: 3px;
}

.booking-ticket-price {
  font-family: var(--booking-font-display);
  font-size: var(--booking-size-lg);
  
  color: var(--booking-text-primary);
  white-space: nowrap;
  letter-spacing: .3px;
  
}

/* ── Quantity Controls ───────────────────────────────────── */
.booking-qty-ctrl { display: flex; align-items: center; gap: 10px; }

.booking-qty-btn {
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--booking-border);
  background: var(--booking-surface);
  color: var(--booking-text-primary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--booking-transition), border-color var(--booking-transition);
  border-radius: 50%;
}
.booking-qty-btn:hover {
  background: var(--booking-navy);
  border-color: var(--booking-navy);
  color: #fff;
}

.booking-qty-val {
  font-size: var(--booking-size-xl);
  font-family: var(--booking-font-strong);
  min-width: 24px;
  text-align: center;
  color: var(--booking-text-primary);
}

/* ── Accommodation Cards ─────────────────────────────────── */
.booking-accom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.booking-accom-card {
  border: 1.5px solid var(--booking-border);
  padding: 16px 14px;
  cursor: pointer;
  transition: border-color var(--booking-transition), background var(--booking-transition), box-shadow var(--booking-transition);
  background: var(--booking-surface);
  position: relative;
}
.booking-accom-card:hover {
  border-color: var(--booking-navy);
  box-shadow: var(--booking-shadow-sm);
}
.booking-accom-card.selected {
  border-color: var(--booking-navy);
  background: #FFFBF3;
  box-shadow: 0 0 0 3px rgba(255,164,0,.12);
}
.booking-accom-card.none-card.selected {
  border-color: var(--booking-navy);
  background: #F5F6F9;
  box-shadow: 0 0 0 3px rgba(39,50,72,.08);
}

.booking-accom-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  border: 2px solid var(--booking-border);
  background: var(--booking-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--booking-transition);
}
.booking-accom-card.selected .booking-accom-check {
  border-color: var(--booking-amber);
  background: var(--booking-amber);
}
.booking-accom-card.none-card.selected .booking-accom-check {
  border-color: var(--booking-navy);
  background: var(--booking-navy);
}
.booking-accom-check svg { display: none; }
.booking-accom-card.selected .booking-accom-check svg { display: block; }

.booking-accom-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  background: var(--booking-bg);
  font-size: 20px;
}
.booking-accom-name {
  font-size: var(--booking-size-sm);
 
  font-family: var(--booking-font-strong);
  color: var(--booking-text-primary);
  line-height: 1.2;
}
.booking-accom-sub {
  font-size: var(--booking-size-sm);
  color: var(--booking-text-secondary);
  margin-top: 3px;
  line-height: 1.4;
}
.booking-accom-price {
  font-size: 13px;
 
  color: var(--booking-amber-dark);
  margin-top: 10px;
}
.booking-accom-price.free { color: #1A7A4A; }

/* ── Summary Box ─────────────────────────────────────────── */
.booking-summary-box {
  background: var(--booking-bg);
  border: 1px solid var(--booking-border);
  padding:0px 20px;
}
.booking-summary-label {
  font-size: var(--booking-size-xs);
 
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--booking-text-secondary);
  margin-bottom: 12px;
}

.booking-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--booking-size-sm);
  padding: 7px 0;
  border-bottom: 1px solid var(--booking-border-soft);
  color: var(--booking-text-secondary);
}
.booking-summary-row:last-child {
  border-bottom: none;
}
.booking-ticket-total-label {
  font-family: var(--booking-font-display);
  font-size: var(--booking-size-lg);
  
  color: var(--booking-text-primary);
  letter-spacing: .3px;
}

.booking-ticket-total {
  font-family: var(--booking-font-display);
  font-size: var(--booking-size-lg);
  color: var(--booking-amber);
}



.booking-step1-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
}

.booking-step1-actions-btns {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.booking-step1-actions-btns .booking-btn {
  width: 100%;
  justify-content: center;
}

.booking-step1-skip-hotel {
  padding: 10px 16px;
}

.booking-total-inline {
  display: flex-row;
  align-items: center;
  gap: 12px;
}

.booking-step1-continue {
  margin-top: 0;
  margin-left: 0;
}



/* ── Buttons ─────────────────────────────────────────────── */
.booking-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;

  font-size: var(--booking-size-sm);
  font-family: var(--booking-font-strong);
 
  cursor: pointer;
  transition: background var(--booking-transition), transform .1s, box-shadow var(--booking-transition);
  text-decoration: none;
}
.booking-btn:active { transform: scale(.98); }

.booking-btn-primary {
  padding: 10px;
  background: var(--booking-amber);
  color: #fff;
  margin-top: 14px;
  letter-spacing: .3px;
  width: auto;
  min-width: 200px;
  margin-left: auto;
  display: inline-flex;
  border-radius: 50px;
  font-size: var(--booking-size-md);
}
.booking-btn-primary:hover {
  background: #1a2235;
  box-shadow: var(--booking-shadow-md);
}

.booking-btn-secondary {
  padding: 10px 16px;
  background: transparent;
  color: var(--booking-navy, #1a2235);
  border: 2px solid var(--booking-navy, #1a2235);
  border-radius: 50px;
  margin-top: 14px;
  letter-spacing: 0.3px;
  width: auto;
  min-width: 200px;
}
.booking-btn-secondary:hover {
  background: rgba(26, 34, 53, 0.06);
}

.booking-btn-amber {
  width: auto;
  min-width: 240px;
  padding: 14px;
  background: var(--booking-amber);
  color: var(--booking-navy);
  margin-top: 14px;
  letter-spacing: .3px; 
  margin-left: auto;
}
.booking-btn-amber:hover {
  background: #e09200;
  box-shadow: var(--booking-shadow-md);
}

/* ── Add to Cart custom ──────────────────────────────────── */
.booking-add-to-cart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  background: var(--booking-navy);
  color: #fff;
  border: none;
  width: 100%;
  font-size: var(--booking-size-sm);
  font-family: var(--booking-font-strong);
 
  cursor: pointer;
  transition: background var(--booking-transition), box-shadow var(--booking-transition);
  white-space: nowrap;
}
.booking-add-to-cart:hover {
  background: var(--booking-amber);
  color: var(--booking-navy);
  box-shadow: var(--booking-shadow-sm);
}

/* ── Continue to Cart link-button ───────────────────────── */
.booking-continue-to-cart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--booking-amber);
  color: var(--booking-navy);
  width: 100%;
  font-size: var(--booking-size-md);
  font-family: var(--booking-font-strong);
  text-decoration: none;
  transition: background var(--booking-transition), box-shadow var(--booking-transition);
  letter-spacing: .2px;
  margin-left: auto;

}
.booking-continue-to-cart:hover {
  background: #e09200;
  box-shadow: var(--booking-shadow-md);
}

/* ── Details panel layout ───────────────────────────────── */
.booking-details-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.booking-details-grid > div {
  min-width: 0;
}

@media (max-width: 700px) {
  .booking-details-grid { grid-template-columns: 1fr; }
}

.booking-product-image {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 4/3;
  overflow: hidden;
  margin-bottom: 16px;
  position: relative;
}
.booking-product-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Bottom gradient so overlay text reads on bright photos (matches package card hero) */
.booking-product-image--with-amenities::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none;
  z-index: 1;
}
.booking-product-amenities-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: rgba(39, 50, 72, 0.95);
  color: #fff;
  padding: 10px 12px 12px;
}
.booking-product-amenities-overlay .booking-product-amenities-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 6px;
  font-family: var(--booking-font-strong);
}
.booking-product-amenities-overlay .booking-product-amenities-list {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.booking-product-amenities-overlay .booking-product-amenity-item {
  flex: 1 1 auto;
  min-width: 56px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.booking-product-amenities-overlay .booking-product-amenity-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.booking-product-amenities-overlay .booking-product-amenity-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.booking-product-amenities-overlay .booking-product-amenity-text {
  font-size: 9px;
  line-height: 1.25;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  max-width: 88px;
}

.booking-product-detail-name {
  font-family: var(--booking-font-display);
  font-size: 2rem;

  color: var(--booking-text-primary);
  margin-bottom: 6px;
  line-height: 1.2;
  letter-spacing: .5px;
}
.booking-product-detail-price {
  font-family: var(--booking-font-display);
  font-size: var(--booking-size-xl);

  color: var(--booking-navy);
  margin: 14px 0;
  letter-spacing: .5px;
}

.booking-details-sidebar {
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.booking-summary-card {
  background: var(--booking-surface);
  border: 0px;
  width: 100%;
}
.booking-summary-head {
  padding: 16px 18px;
  border-bottom: 1px solid var(--booking-border-soft);
  display: flex;
  align-items: center;
  gap: 10px;
}

.booking-summary-head-text { min-width: 0; }
.booking-summary-head-title {
  font-family: var(--booking-font-strong);
  color: var(--booking-text-primary);
  font-size: var(--booking-size-lg);
}
.booking-summary-head-sub {
  color: var(--booking-text-tertiary);
  font-size: var(--booking-size-md);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.booking-sidebar-section {
  padding: 16px 18px;
  border-bottom: 1px solid var(--booking-border-soft);
}
.booking-sidebar-section:last-child { border-bottom: none; }
.booking-sidebar-section-label {
  font-size: var(--booking-size-xs);
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--booking-text-primary);
  margin-bottom: 8px;
}
.booking-sidebar-qty-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.booking-sidebar-qty-val {
  font-size: var(--booking-size-md);
 
  color: var(--booking-text-primary);
}
.booking-sidebar-total-val {
  font-family: var(--booking-font-display);
  font-size: var(--booking-size-lg);
  color: var(--booking-text-primary);
  letter-spacing: .3px;
}

/* ── Cancellation policy ─────────────────────────────────── */
.booking-cancellation-policy {
  background: var(--booking-bg);
  border: 1px solid var(--booking-border-soft);
  
  padding: 14px 16px;
  font-size: 12px;
  color: var(--booking-text-secondary);
  line-height: 1.6;
  margin-top: 12px;
}

/* ── Guest form / Review helpers ─────────────────────────── */
.booking-guest-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.booking-guest-field { display: flex; flex-direction: column; gap: 6px; }
.booking-guest-field--full { grid-column: 1 / -1; }
.booking-input {
  width: 100%;
  background: var(--booking-surface);
  color: var(--booking-text-primary);
  padding: 12px 14px;
  border: 1.5px solid var(--booking-border);
  
  font-size: var(--booking-size-sm);
  outline: none;
}
.booking-input:focus {
  border-color: var(--booking-amber);
  box-shadow: 0 0 0 3px rgba(255, 71, 19, 0.16);
}
.booking-guest-actions { margin-top: 14px; }
.booking-guest-actions .booking-btn { margin-left: auto; }
.booking-guest-error {
  margin-top: 10px;
  padding: 10px 12px;
  
  border: 1px solid rgba(255, 71, 19, 0.35);
  background: rgba(255, 71, 19, 0.08);
  color: var(--booking-text-primary);
  font-size: var(--booking-size-sm);
}
.booking-review-desc { font-size: var(--booking-size-sm); color: var(--booking-text-secondary); line-height: 1.6; margin-top: 10px; }

/* Package inclusions: fallback when product has no image (light list) */
.booking-product-amenities--no-image {
  margin-bottom: 16px;
  padding: 14px 16px;
  background: var(--booking-bg);
  border: 1px solid var(--booking-border-soft);
  border-radius: var(--booking-radius-md);
}
.booking-product-amenities--no-image .booking-product-amenities-label {
  font-size: var(--booking-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--booking-text-tertiary);
  margin-bottom: 10px;
  font-family: var(--booking-font-strong);
}
.booking-product-amenities--no-image .booking-product-amenities-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
}
.booking-product-amenities--no-image .booking-product-amenity-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.booking-product-amenities--no-image .booking-product-amenity-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--booking-amber-light);
  border: 1px solid var(--booking-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.booking-product-amenities--no-image .booking-product-amenity-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.booking-product-amenities--no-image .booking-product-amenity-text {
  font-size: var(--booking-size-sm);
  color: var(--booking-text-primary);
  line-height: 1.3;
}
.booking-review-line { display:flex; justify-content:space-between; gap: 12px; padding: 6px 0; color: var(--booking-text-secondary); font-size: var(--booking-size-md); }
.booking-review-line--muted { opacity: 0.85; font-size: var(--booking-size-sm); }
.booking-review-line--hotel-total {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--booking-border-soft);
  font-family: var(--booking-font-strong);
  color: var(--booking-text-primary);
}
.booking-review-hotel-section {
  margin-top: 4px;
  padding-top: 8px;
}
.booking-review-hotel-heading {
  font-size: var(--booking-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--booking-text-secondary);
  font-family: var(--booking-font-strong);
  margin-bottom: 6px;
}
.booking-review-hotel-details .booking-review-line:last-child { padding-bottom: 2px; }
.booking-review-hotel-placeholder {
  margin: 0;
  font-size: var(--booking-size-md);
  color: var(--booking-text-secondary);
  line-height: 1.5;
}
.booking-review-label { font-size: var(--booking-size-md); color: var(--booking-text-primary); font-family: var(--booking-font-strong); }
.booking-review-highlight { color: var(--booking-amber-dark); font-family: var(--booking-font-display); }
.booking-review-total-wrap {
  background: var(--booking-amber-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
}
.booking-review-total-label {
  text-transform: uppercase;
  font-size: var(--booking-size-md);
  color: var(--booking-amber-dark);
  font-family: var(--booking-font-strong);
}
.booking-review-total-value {
  font-family: var(--booking-font-display);
  font-size: var(--booking-size-lg);
  color: var(--booking-amber-dark);
}
.booking-summary-divider {
  height: 1px;
  background: var(--booking-border-soft);
  margin: 0 18px;
}

@media (max-width: 900px) {
  .booking-details-grid { grid-template-columns: 1fr; }
  .booking-product-image { max-width: 100%; }
}
.booking-review-guest { white-space: pre-line; font-size: var(--booking-size-sm); color: var(--booking-text-secondary); line-height: 1.6; }
.booking-guest-card {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--booking-border);
  border-radius: var(--booking-radius-md);
  background: var(--booking-bg);
  padding: 10px 12px;
}
.booking-guest-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--booking-amber);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--booking-font-strong);
  font-size: 0.8rem;
  flex-shrink: 0;
}
.booking-guest-card-name {
  color: var(--booking-text-primary);
  font-family: var(--booking-font-strong);
  font-size: var(--booking-size-sm);
}
.booking-guest-card-meta {
  display: flex;
  flex-direction: column;
  color: var(--booking-text-secondary);
  font-size: var(--booking-size-xs);
  margin-top: 2px;
}

@media (max-width: 700px) {
  .booking-guest-grid { grid-template-columns: 1fr; }
}

/* ── Sel-tag pills ───────────────────────────────────────── */
.booking-sel-tag {
  display: inline-block;
  background: var(--booking-amber-light);
  color: var(--booking-gold-tag-fg);
  padding: 3px 10px;
  font-size: 12px;

}
.booking-sel-tag.blue { background: #e6f0fb; color: #0C447C; }

/* ── Checkout locked panel ───────────────────────────────── */
.booking-checkout-locked {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px;
  color: var(--booking-text-tertiary);
  font-size: 13px;
}

/* ── Stock display ───────────────────────────────────────── */
.booking-stock-units { display: none; }

/* ── Complete package totals (above Rezlive embed) ──────── */
.booking-package-combined {
  margin: 0 0 20px;
  padding: 0;
}
.booking-package-combined-inner {
  border: 1px solid rgba(12, 68, 124, 0.15);
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  box-shadow: 0 4px 20px rgba(12, 44, 84, 0.06);
}
.booking-package-combined-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  font-size: 14px;
  border-bottom: 1px solid rgba(12, 68, 124, 0.08);
}
.booking-package-combined-row:last-child {
  border-bottom: none;
}
.booking-package-combined-row--total {
  background: rgba(12, 68, 124, 0.06);
  font-weight: 700;
  font-size: 15px;
}
.booking-package-combined-label {
  color: var(--booking-text-secondary, #4a5568);
}
.booking-package-combined-value {
  font-variant-numeric: tabular-nums;
  color: var(--booking-navy, #0c447c);
}

/* ── Rezlive hotel search embed (F1 step 2) ──────────────── */
.booking-rezlive-wrap {
  margin: 0;
  max-width: 100%;
}
.booking-rezlive-wrap .rezlive-booking-widget {
  border-radius: 12px;
  /* Allow hotel carousel / card shadows to show; step 1 hero clips its own region */
  overflow-x: visible;
  overflow-y: visible;
}
.booking-rezlive-hint {
  font-size: 13px;
  color: var(--booking-text-secondary, #5c6470);
  margin: 16px 0 20px;
  line-height: 1.55;
}
.booking-rezlive-missing {
  margin: 0;
  padding: 16px;
  background: #fff3cd;
  border-radius: 10px;
  font-size: 14px;
  color: #664d03;
}

.f1-accom-continue-wrap {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  margin-top: 16px;
}
.f1-accom-continue-wrap .booking-btn-primary {
  margin-left: 0;
}

/* ── Responsive (tablet + mobile) ───────────────────────── */
@media (max-width: 768px) {
  .booking-panels {
    padding: 0;
    gap: 10px;
  }
  .booking-panel-header {
    padding: 6px 14px;
  }
  .booking-panel-header-payments {
    display: none !important;
    background: #fff;
  }
  /* Flush panel content — no side padding (full-bleed with panel border) */
  .booking-panel-body,
  .booking-panel-body.open {
    padding: 10px 16px;
  }
  /* Avoid clipping long review / Rezlive content and the Add to cart CTA */
  .booking-panel {
    overflow: visible;
  }
  .booking-panel-body.open {
    max-height: none;
    overflow: visible;
  }

  .booking-stepper {
    padding: 16px 12px 0;
  }
  .booking-product-select-row {
    flex-direction: column;
    align-items: stretch;
  }
  .booking-base-price {
    text-align: left;
  }
  .booking-styled-select {
    min-width: 100%;
    width: 100%;
  }
  .booking-ticket-row {
    grid-template-columns: 1fr auto auto;
    gap: 8px;
  }
  .booking-ticket-row--no-unit-price {
    grid-template-columns: 1fr auto;
  }
  .booking-accom-grid {
    grid-template-columns: 1fr 1fr;
  }
  .booking-details-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .booking-step1-actions {
    grid-template-columns: 1fr;
  }
  .booking-step1-actions-btns {
    width: 100%;
  }
  .booking-step1-continue {
    margin-left: auto;
  }

  .booking-details-sidebar,
  .booking-summary-card {
    min-width: 0;
    max-width: 100%;
    overflow: visible;
  }
  .booking-sidebar-section {
    padding-left: 14px;
    padding-right: 14px;
  }
  .booking-continue-to-cart,
  #f1AddToCart.add-to-cart--custom {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: inline-flex !important;
    justify-content: center;
    flex-shrink: 0;
  }

  /* Rezlive embed inside step 2: align with zero-padding panels */
  .booking-rezlive-wrap .rezlive-booking-widget {
    border-radius: 0;
  }
}

@media (max-width: 600px) {
  .booking-step-label {
    font-size: 9px;
  }
}

/* F1 package: pre-book hold countdown (cart, checkout, block cart) */
.expatsport-f1-prebook-timer {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(13, 17, 23, 0.75);
}
.expatsport-f1-prebook-timer__value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #c9a84c;
}
.expatsport-f1-prebook-timer--expired .expatsport-f1-prebook-timer__value {
  color: #b42318;
}
.expatsport-f1-prebook-timer__key {
  font-size: 11px;
  color: rgba(13, 17, 23, 0.55);
  word-break: break-all;
}
.expatsport-f1-prebook-timer--block {
  margin-top: 6px;
}

/* Checkout: block Place order when book hold expired (see f1-prebook-timer.js) */
.expatsport-f1-prebook-checkout-notice {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1px solid #b42318;
  background: #fef3f2;
  color: #7f2318;
  font-size: 0.9375rem;
  line-height: 1.45;
}
body.expatsport-f1-prebook-checkout-blocked #place_order:disabled,
body.expatsport-f1-prebook-checkout-blocked button.wc-block-components-checkout-place-order-button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}