/* =============================================================================
   TRIPALOT ENTERPRISE DESIGN SYSTEM
   Premium OTA Platform — Corporate & Luxury Standard
   Version 1.0 | 2026
   ============================================================================= */

/* -------------------------
   1. CSS CUSTOM PROPERTIES
   ------------------------- */
:root {
  /* Primary Palette */
  --tl-ivory:         #FAFAF8;
  --tl-white:         #FFFFFF;
  --tl-navy:          #0B1C3E;
  --tl-navy-light:    #1A2F5A;
  --tl-charcoal:      #2C3E50;
  --tl-charcoal-60:   #5B6878;
  --tl-charcoal-40:   #8E9BAB;

  /* Gold / Premium Accent */
  --tl-gold:          #C9A84C;
  --tl-gold-light:    #E8C97A;
  --tl-gold-pale:     #F5EDD5;
  --tl-gold-dark:     #9A7A2A;

  /* Backgrounds */
  --tl-bg-page:       #FAFAF8;
  --tl-bg-section:    #F4F2EE;
  --tl-bg-card:       #FFFFFF;
  --tl-bg-input:      #FFFFFF;

  /* Borders */
  --tl-border:        #E4DDD0;
  --tl-border-focus:  #C9A84C;

  /* States */
  --tl-success:       #1A7F5A;
  --tl-success-bg:    #EAF5F1;
  --tl-error:         #C0392B;
  --tl-error-bg:      #FDECEB;
  --tl-warning:       #D4801A;
  --tl-warning-bg:    #FDF3E6;
  --tl-info:          #1A5F8A;
  --tl-info-bg:       #EAF2F8;

  /* Typography */
  --tl-font-display:  'Playfair Display', Georgia, serif;
  --tl-font-body:     'Inter', 'Jost', system-ui, sans-serif;
  --tl-font-mono:     'JetBrains Mono', monospace;

  /* Sizing & Spacing */
  --tl-radius-sm:     8px;
  --tl-radius:        12px;
  --tl-radius-lg:     16px;
  --tl-radius-xl:     24px;
  --tl-radius-pill:   999px;

  /* Shadows */
  --tl-shadow-xs:     0 1px 3px rgba(11, 28, 62, 0.06);
  --tl-shadow-sm:     0 2px 8px rgba(11, 28, 62, 0.08), 0 1px 3px rgba(11, 28, 62, 0.04);
  --tl-shadow-md:     0 4px 16px rgba(11, 28, 62, 0.10), 0 2px 6px rgba(11, 28, 62, 0.06);
  --tl-shadow-lg:     0 8px 32px rgba(11, 28, 62, 0.12), 0 4px 12px rgba(11, 28, 62, 0.08);
  --tl-shadow-xl:     0 16px 48px rgba(11, 28, 62, 0.14), 0 8px 20px rgba(11, 28, 62, 0.08);
  --tl-shadow-gold:   0 4px 20px rgba(201, 168, 76, 0.25);

  /* Transitions */
  --tl-transition:    all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --tl-transition-fast: all 0.15s ease;

  /* Z-index */
  --tl-z-header:      1000;
  --tl-z-sticky:      900;
  --tl-z-dropdown:    800;
  --tl-z-modal:       1100;
}

/* -------------------------
   2. GLOBAL BASE
   ------------------------- */
html, body {
  background-color: var(--tl-bg-page) !important;
  font-family: var(--tl-font-body) !important;
  color: var(--tl-charcoal) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.frontend-page {
  background-color: var(--tl-bg-page) !important;
}

/* -------------------------
   3. TYPOGRAPHY SYSTEM
   ------------------------- */
h1, h2, h3, .tl-display {
  font-family: var(--tl-font-display);
  color: var(--tl-navy);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

h4, h5, h6 {
  font-family: var(--tl-font-body);
  font-weight: 600;
  color: var(--tl-navy);
}

p, span, div, li, td, th, input, textarea, select, button {
  font-family: var(--tl-font-body);
}

/* Hero Headlines */
.tl-hero-title {
  font-family: var(--tl-font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--tl-navy);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.tl-section-title {
  font-family: var(--tl-font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--tl-navy);
  letter-spacing: -0.02em;
}

.tl-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tl-charcoal-60);
}

.tl-gold-text { color: var(--tl-gold) !important; }
.tl-navy-text { color: var(--tl-navy) !important; }
.tl-muted    { color: var(--tl-charcoal-60) !important; }

/* GoTrip theme typography overrides */
.text-30.fw-600, .text-26.fw-600, .text-22.fw-500 {
  font-family: var(--tl-font-display);
  color: var(--tl-navy);
}

/* -------------------------
   4. HEADER — PREMIUM NAV
   ------------------------- */
.bravo_header {
  background: #0B1C3E !important;
  background-color: #0B1C3E !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.2) !important;
  box-shadow: 0 2px 24px rgba(11, 28, 62, 0.18) !important;
  backdrop-filter: blur(8px);
}

/* Specificity (0,2,0) — beats GoTrip's .header.is-menu-opened (0,2,0) via
   document order; also keeps dark bg when scroll adds bg-dark-1/bg-dark-3 */
.header.bravo_header,
.header.bravo_header.bg-dark-1,
.header.bravo_header.bg-dark-3,
.header.bravo_header.is-sticky {
  background-color: #0B1C3E !important;
}

/* Logo area gold accent */
.header-logo {
  position: relative;
  padding-right: 16px;
}

.header-logo::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 28px;
  background: var(--tl-gold);
  opacity: 0.4;
}

/* Nav links — typography only, no color override (let GoTrip inherit naturally) */
.menu__nav > li > a,
.menu__nav .menu-item > a {
  font-family: var(--tl-font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 0.2s, background 0.2s !important;
  padding: 6px 14px !important;
  border-radius: var(--tl-radius-sm);
}

.menu__nav > li > a:hover,
.menu__nav .menu-item > a:hover {
  color: var(--tl-gold) !important;
  background: rgba(201,168,76,0.1) !important;
}

/* Higher-specificity overrides scoped to .bravo_header — ensures nav link
   text is always visible regardless of GoTrip's inherited color rules.
   Specificity (0,2,2) beats GoTrip's (0,3,2) non-!important rule. */
.bravo_header .menu__nav > li > a,
.bravo_header .menu__nav .menu-item > a,
.bravo_header .menu__nav li.language-dropdown > a,
.bravo_header .menu__nav li.currency-dropdown > a,
.bravo_header .menu__nav li.login-item > a,
.bravo_header .menu__nav > li > a > span,
.bravo_header .menu__nav li.language-dropdown > a > span,
.bravo_header .menu__nav li.login-item > a > span {
  color: #C9A84C !important;
}

/* Sign In button */
.header .button.border-white,
.header .button.-outline-white {
  border: 1px solid rgba(255,255,255,0.3) !important;
  color: white !important;
  border-radius: var(--tl-radius) !important;
  font-weight: 500;
  font-size: 0.875rem;
  transition: var(--tl-transition);
}

.header .button.border-white:hover {
  border-color: var(--tl-gold) !important;
  color: var(--tl-gold) !important;
}

/* Header margin — single authoritative rule.
   GoTrip main.css applies margin-top:90px to this div; we cancel it
   and use height only so the spacer = header height, no doubling. */
.header-margin {
  height: 72px !important;
  margin-top: 0 !important;
}

/* Corporate badge in header */
.tl-corp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--tl-gold-pale);
  color: var(--tl-gold-dark);
  border: 1px solid var(--tl-gold);
  border-radius: var(--tl-radius-pill);
  padding: 4px 12px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: 16px;
}

/* Sub-navigation dropdown */
.subnav {
  background: #ffffff !important;
  border: 1px solid rgba(11,28,62,0.12) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 32px rgba(11,28,62,0.14) !important;
  padding: 6px !important;
  min-width: 180px;
}

/* Force ALL text inside the subnav to be dark — prevents white-on-white
   caused by inheriting color from .menu__nav.text-white ancestor */
.subnav a,
.subnav li > a,
.subnav li a.dropdown-item,
.subnav li a.is_login {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #1e2d4d !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  border-radius: 6px !important;
  transition: background 0.15s, color 0.15s !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  background: transparent !important;
}

.subnav a:hover,
.subnav li > a:hover,
.subnav li a.dropdown-item:hover,
.subnav li a.is_login:hover {
  background: #fff8eb !important;
  color: #0B1C3E !important;
}

/* -------------------------
   5. SEARCH SECTION
   ------------------------- */
.bravo_search section.bg-light-2,
.bravo_search section.pt-40 {
  background: linear-gradient(135deg, var(--tl-navy) 0%, var(--tl-navy-light) 100%) !important;
  padding: 48px 0 56px !important;
}

.bravo_search .text-30 {
  color: white !important;
  font-family: var(--tl-font-display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

/* Search form container */
.mainSearch {
  background: var(--tl-white) !important;
  border-radius: var(--tl-radius-lg) !important;
  box-shadow: var(--tl-shadow-xl) !important;
  border: 1px solid var(--tl-border) !important;
  padding: 6px !important;
  overflow: hidden;
}

/* Search field dividers */
.mainSearch .field-items .row > [class*="col-"]:not(:last-child) {
  border-right: 1px solid var(--tl-border);
}

/* Search input labels */
.mainSearch .text-13,
.mainSearch .fw-500 {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: var(--tl-charcoal-60) !important;
}

/* Search field values */
.mainSearch input,
.mainSearch .js-selectDropdown {
  font-size: 0.9375rem !important;
  font-weight: 500;
  color: var(--tl-navy) !important;
  border: none !important;
  background: transparent !important;
}

/* Search submit button */
.mainSearch__submit,
.button.bg-blue-1 {
  background: var(--tl-navy) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--tl-radius) !important;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  transition: var(--tl-transition) !important;
  box-shadow: 0 2px 12px rgba(11, 28, 62, 0.3) !important;
}

.mainSearch__submit:hover,
.button.bg-blue-1:hover {
  background: var(--tl-gold) !important;
  box-shadow: var(--tl-shadow-gold) !important;
  color: var(--tl-navy) !important;
  transform: translateY(-1px);
}

/* Corporate rate toggle */
.tl-corp-rate-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--tl-gold-pale);
  border: 1px solid var(--tl-gold);
  border-radius: var(--tl-radius);
  margin-top: 12px;
  cursor: pointer;
  transition: var(--tl-transition);
}

.tl-corp-rate-toggle:hover {
  background: var(--tl-gold);
  color: white;
}

.tl-corp-rate-toggle input[type="checkbox"] {
  accent-color: var(--tl-gold-dark);
  width: 16px;
  height: 16px;
}

.tl-corp-rate-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tl-gold-dark);
  letter-spacing: 0.02em;
}

.tl-corp-rate-desc {
  font-size: 0.75rem;
  color: var(--tl-charcoal-60);
  margin-left: auto;
}

/* -------------------------
   6. PREMIUM CARD SYSTEM
   ------------------------- */
/* Base card */
.tl-card,
.bravo_list_item .hotel-item,
.bravo_list_item .item,
.bravo_list_item .tour-item,
.bravo_list_item .car-item,
.bravo_list_item .flight-item,
.bravo_list_item .event-item,
.bravo_list_item .bus-item {
  background: var(--tl-bg-card) !important;
  border: 1px solid var(--tl-border) !important;
  border-radius: var(--tl-radius-lg) !important;
  box-shadow: var(--tl-shadow-sm) !important;
  transition: var(--tl-transition) !important;
  overflow: hidden;
}

.tl-card:hover,
.bravo_list_item .hotel-item:hover,
.bravo_list_item .item:hover {
  box-shadow: var(--tl-shadow-lg) !important;
  transform: translateY(-2px);
  border-color: rgba(201, 168, 76, 0.3) !important;
}

/* Card image */
.tl-card__image {
  overflow: hidden;
  border-radius: var(--tl-radius-lg) var(--tl-radius-lg) 0 0;
}

.tl-card__image img {
  transition: transform 0.4s ease;
}

.tl-card__image:hover img {
  transform: scale(1.04);
}

/* Card content */
.tl-card__body {
  padding: 20px 22px;
}

/* Property card badges */
.tl-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--tl-radius-pill);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tl-badge--gold {
  background: var(--tl-gold-pale);
  color: var(--tl-gold-dark);
  border: 1px solid var(--tl-gold);
}

.tl-badge--navy {
  background: var(--tl-navy);
  color: white;
}

.tl-badge--success {
  background: var(--tl-success-bg);
  color: var(--tl-success);
  border: 1px solid rgba(26, 127, 90, 0.3);
}

.tl-badge--cancellation {
  background: #EAF5F1;
  color: #1A7F5A;
  border: 1px solid rgba(26,127,90,0.25);
  padding: 3px 10px;
  border-radius: var(--tl-radius-pill);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Star rating */
.tl-stars {
  display: flex;
  gap: 2px;
  color: var(--tl-gold);
}

.tl-rating-badge {
  background: var(--tl-navy);
  color: white;
  padding: 4px 10px;
  border-radius: var(--tl-radius-sm);
  font-size: 0.875rem;
  font-weight: 700;
  display: inline-block;
}

/* Price display */
.tl-price {
  font-family: var(--tl-font-body);
  font-weight: 700;
  color: var(--tl-navy);
  font-size: 1.375rem;
  line-height: 1;
}

.tl-price__per {
  font-size: 0.8125rem;
  color: var(--tl-charcoal-60);
  font-weight: 400;
}

.tl-price__original {
  text-decoration: line-through;
  color: var(--tl-charcoal-40);
  font-size: 0.875rem;
  font-weight: 400;
}

.tl-price__tax {
  font-size: 0.75rem;
  color: var(--tl-charcoal-60);
  margin-top: 2px;
}

/* GoTrip price overrides */
.g-price .price .onsale {
  color: var(--tl-navy) !important;
  font-family: var(--tl-font-body) !important;
  font-weight: 700;
}

.g-price .price .text-price {
  color: var(--tl-charcoal-40) !important;
  text-decoration: line-through;
}

/* View Rooms / Book Now CTA */
.btn-primary,
.button.-dark-1.bg-blue-1,
.bg-blue-1 {
  background: var(--tl-navy) !important;
  color: white !important;
  border-radius: var(--tl-radius) !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: var(--tl-transition) !important;
}

.btn-primary:hover,
.button.-dark-1.bg-blue-1:hover {
  background: var(--tl-gold) !important;
  color: var(--tl-navy) !important;
  transform: translateY(-1px);
  box-shadow: var(--tl-shadow-gold) !important;
}

/* Gold accent button */
.btn-tl-gold,
.tl-btn-gold {
  background: var(--tl-gold) !important;
  color: var(--tl-navy) !important;
  border: none;
  border-radius: var(--tl-radius) !important;
  font-weight: 700;
  padding: 12px 28px;
  cursor: pointer;
  transition: var(--tl-transition);
}

.btn-tl-gold:hover,
.tl-btn-gold:hover {
  background: var(--tl-gold-dark) !important;
  box-shadow: var(--tl-shadow-gold);
  transform: translateY(-1px);
}

/* Outline button */
.tl-btn-outline {
  background: transparent;
  color: var(--tl-navy);
  border: 1.5px solid var(--tl-navy);
  border-radius: var(--tl-radius);
  font-weight: 600;
  padding: 11px 26px;
  cursor: pointer;
  transition: var(--tl-transition);
}

.tl-btn-outline:hover {
  background: var(--tl-navy);
  color: white;
}

/* -------------------------
   7. STANDARDIZED FORM SYSTEM
   ------------------------- */
/* Form section container */
.tl-form-section {
  background: var(--tl-white);
  border: 1px solid var(--tl-border);
  border-radius: var(--tl-radius-lg);
  padding: 28px 32px;
  margin-bottom: 24px;
  box-shadow: var(--tl-shadow-xs);
}

.tl-form-section__title {
  font-family: var(--tl-font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--tl-navy);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--tl-border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.tl-form-section__title::before {
  content: '';
  display: block;
  width: 3px;
  height: 18px;
  background: var(--tl-gold);
  border-radius: 2px;
  flex-shrink: 0;
}

/* Input group — top-aligned labels */
.tl-field {
  position: relative;
  margin-bottom: 0;
}

.tl-field__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tl-charcoal-60);
  margin-bottom: 6px;
  transition: var(--tl-transition-fast);
}

.tl-field__label .required-star {
  color: var(--tl-error);
  margin-left: 2px;
}

.tl-field__input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  background: var(--tl-bg-input);
  border: 1.5px solid var(--tl-border);
  border-radius: var(--tl-radius);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--tl-charcoal);
  font-family: var(--tl-font-body);
  transition: var(--tl-transition);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.tl-field__input:focus {
  border-color: var(--tl-gold) !important;
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15) !important;
  background: var(--tl-white);
}

.tl-field__input:hover:not(:focus) {
  border-color: var(--tl-charcoal-40);
}

.tl-field__input.is-error {
  border-color: var(--tl-error) !important;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1) !important;
}

.tl-field__input.is-valid {
  border-color: var(--tl-success) !important;
}

.tl-field textarea.tl-field__input {
  height: auto;
  padding: 14px;
  resize: vertical;
  min-height: 100px;
}

.tl-field select.tl-field__input {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6878' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.tl-field__hint {
  font-size: 0.75rem;
  color: var(--tl-charcoal-60);
  margin-top: 4px;
}

.tl-field__error {
  font-size: 0.75rem;
  color: var(--tl-error);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.tl-field__error::before {
  content: '⚠';
  font-size: 0.6875rem;
}

/* Input with icon */
.tl-field--icon {
  position: relative;
}

.tl-field--icon .tl-field__input {
  padding-left: 40px;
}

.tl-field--icon .tl-field__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tl-charcoal-60);
  font-size: 1rem;
  pointer-events: none;
}

/* GoTrip form-input override — top labels */
.form-input {
  position: relative;
  margin-bottom: 0;
}

.form-input input,
.form-input select,
.form-input textarea {
  width: 100%;
  height: 52px;
  padding: 14px 14px 6px !important;
  border: 1.5px solid var(--tl-border) !important;
  border-radius: var(--tl-radius) !important;
  background: var(--tl-bg-input) !important;
  font-size: 0.9375rem !important;
  color: var(--tl-charcoal) !important;
  font-family: var(--tl-font-body) !important;
  transition: var(--tl-transition) !important;
  outline: none;
}

.form-input input:focus,
.form-input select:focus,
.form-input textarea:focus {
  border-color: var(--tl-gold) !important;
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15) !important;
}

.form-input label {
  position: absolute;
  top: 7px;
  left: 14px;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--tl-charcoal-60) !important;
  pointer-events: none;
  z-index: 1;
  transition: var(--tl-transition-fast);
  line-height: 1 !important;
}

.form-input textarea {
  height: auto !important;
  min-height: 100px;
  padding-top: 28px !important;
}

/* Checkbox */
.form-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--tl-navy);
  cursor: pointer;
}

.tl-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.tl-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--tl-navy);
  margin-top: 1px;
  flex-shrink: 0;
  cursor: pointer;
}

.tl-checkbox__label {
  font-size: 0.875rem;
  color: var(--tl-charcoal);
  line-height: 1.5;
}

/* Toggle switch */
.tl-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.tl-toggle__input {
  appearance: none;
  width: 44px;
  height: 24px;
  background: var(--tl-border);
  border-radius: var(--tl-radius-pill);
  transition: var(--tl-transition);
  cursor: pointer;
  flex-shrink: 0;
}

.tl-toggle__input:checked {
  background: var(--tl-navy);
}

.tl-toggle__input::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: var(--tl-transition);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.tl-toggle__input:checked::after {
  left: 23px;
}

.tl-toggle__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tl-charcoal);
}

/* -------------------------
   8. ENTERPRISE BOOKING FIELDS
   ------------------------- */
.tl-enterprise-section {
  background: linear-gradient(to right, var(--tl-gold-pale), var(--tl-white));
  border: 1px solid var(--tl-gold);
  border-radius: var(--tl-radius-lg);
  padding: 24px 28px;
  margin-bottom: 24px;
  position: relative;
}

.tl-enterprise-section::before {
  content: 'CORPORATE';
  position: absolute;
  top: -10px;
  left: 20px;
  background: var(--tl-gold);
  color: var(--tl-navy);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 2px 10px;
  border-radius: var(--tl-radius-pill);
}

.tl-enterprise-section .tl-form-section__title {
  color: var(--tl-gold-dark);
  border-bottom-color: rgba(201, 168, 76, 0.3);
}

/* Booking-for-someone-else card */
.tl-proxy-booking {
  border: 1.5px dashed var(--tl-border);
  border-radius: var(--tl-radius-lg);
  padding: 18px 22px;
  margin-bottom: 20px;
  background: var(--tl-bg-section);
  transition: var(--tl-transition);
}

.tl-proxy-booking.is-active {
  border-style: solid;
  border-color: var(--tl-navy);
  background: var(--tl-white);
}

.tl-proxy-booking__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.tl-proxy-booking__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tl-navy);
  display: flex;
  align-items: center;
  gap: 8px;
}

.tl-proxy-booking__content {
  display: none;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--tl-border);
}

.tl-proxy-booking.is-active .tl-proxy-booking__content {
  display: block;
}

/* File upload */
.tl-file-upload {
  border: 2px dashed var(--tl-border);
  border-radius: var(--tl-radius-lg);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: var(--tl-transition);
  background: var(--tl-bg-section);
}

.tl-file-upload:hover {
  border-color: var(--tl-gold);
  background: var(--tl-gold-pale);
}

.tl-file-upload__icon {
  font-size: 2rem;
  color: var(--tl-charcoal-60);
  margin-bottom: 8px;
}

.tl-file-upload__text {
  font-size: 0.875rem;
  color: var(--tl-charcoal-60);
}

.tl-file-upload__text strong {
  color: var(--tl-navy);
}

.tl-file-upload input[type="file"] {
  display: none;
}

/* ─── CHECKOUT STEP INDICATOR ──────────────────────────────────
   Connector lines are drawn as ::before on each step except the first.
   Circle (.tl-step__number) and its connector (::before) share the
   same parent element → z-index is unambiguous, no cross-step overlap.
   ─────────────────────────────────────────────────────────────── */
.tl-steps {
  display: flex;
  align-items: flex-start;
  padding: 28px 0 22px;
  border-bottom: 1px solid var(--tl-border);
  margin-bottom: 36px;
}

.tl-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  gap: 10px;
}

/* Horizontal connector — spans from centre of previous step to
   centre of this step. Because it lives inside THIS step it is
   always behind this step's own circle (z-index: 0 < 1). */
.tl-step + .tl-step::before {
  content: '';
  position: absolute;
  top: 16px;         /* half of 32px circle height */
  left: -50%;
  right: 50%;
  height: 2px;
  background: var(--tl-border);
  z-index: 0;
}

/* Gold connector after a completed step */
.tl-step.is-done + .tl-step::before {
  background: var(--tl-gold);
}

.tl-step__number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tl-ivory);
  border: 2px solid var(--tl-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--tl-charcoal-60);
  font-family: var(--tl-font-body);
  position: relative;
  z-index: 1;        /* always above the ::before connector line */
  flex-shrink: 0;
  transition: background 0.25s ease, border-color 0.25s ease,
              color 0.25s ease, box-shadow 0.25s ease;
}

.tl-step.is-active .tl-step__number {
  background: var(--tl-gold);
  border-color: var(--tl-gold);
  color: var(--tl-navy);
  box-shadow: 0 0 0 5px rgba(201, 168, 76, 0.18);
}

.tl-step.is-done .tl-step__number {
  background: var(--tl-navy);
  border-color: var(--tl-navy);
  color: #fff;
}

.tl-step__label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--tl-charcoal-60);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--tl-font-body);
  line-height: 1.3;
}

.tl-step.is-active .tl-step__label {
  color: var(--tl-navy);
  font-weight: 700;
}

.tl-step.is-done .tl-step__label {
  color: var(--tl-navy);
}

/* Hide obsolete connector divs (kept in template for compatibility) */
.tl-step__connector,
.tl-step__item { display: contents; }

@media (max-width: 575px) {
  .tl-steps { padding: 18px 0 14px; margin-bottom: 24px; }
  .tl-step { gap: 7px; }
  .tl-step__number { width: 26px; height: 26px; font-size: 0.75rem; }
  .tl-step + .tl-step::before { top: 13px; }
  .tl-step__label { font-size: 0.5625rem; letter-spacing: 0.02em; }
}

@media (max-width: 767px) {
  .tl-price-sidebar { position: static !important; margin-top: 24px; }
  .tl-form-section { padding: 18px 16px !important; }
}

/* -------------------------
   9. PRICE SUMMARY SIDEBAR
   ------------------------- */
.tl-price-sidebar {
  background: var(--tl-white);
  border: 1px solid var(--tl-border);
  border-radius: var(--tl-radius-lg);
  box-shadow: var(--tl-shadow-md);
  overflow: hidden;
  position: sticky;
  top: 88px;
}

.tl-price-sidebar__header {
  background: var(--tl-navy);
  padding: 18px 22px;
  color: white;
}

.tl-price-sidebar__title {
  font-family: var(--tl-font-body);
  font-size: 1rem;
  font-weight: 700;
  color: white;
  margin: 0;
}

.tl-price-sidebar__subtitle {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.65);
  margin-top: 2px;
}

.tl-price-sidebar__body {
  padding: 20px 22px;
}

.tl-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--tl-border);
  font-size: 0.875rem;
}

.tl-price-row:last-child {
  border-bottom: none;
}

.tl-price-row__label {
  color: var(--tl-charcoal-60);
}

.tl-price-row__value {
  font-weight: 600;
  color: var(--tl-charcoal);
}

.tl-price-row--total {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 2px solid var(--tl-navy) !important;
  border-bottom: none !important;
}

.tl-price-row--total .tl-price-row__label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--tl-navy);
}

.tl-price-row--total .tl-price-row__value {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--tl-navy);
}

.tl-price-row--tax .tl-price-row__label,
.tl-price-row--tax .tl-price-row__value {
  font-size: 0.8125rem;
  color: var(--tl-charcoal-60);
}

.tl-price-sidebar__trust {
  padding: 14px 22px;
  border-top: 1px solid var(--tl-border);
  background: var(--tl-gold-pale);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--tl-gold-dark);
  font-weight: 500;
}

/* -------------------------
   10. CHECKOUT PAGE
   ------------------------- */
.bravo-booking-page {
  background: var(--tl-bg-page) !important;
  min-height: 100vh;
}

/* Checkout page .text-22 utility — keep navy colour but use body font */
.bravo-booking-page .text-22 {
  font-family: var(--tl-font-body);
  font-size: 1.25rem;
  color: var(--tl-navy);
  font-weight: 700;
}

/* Sign in banner */
.bravo-booking-page .bg-blue-1-05 {
  background: var(--tl-gold-pale) !important;
  border: 1px solid var(--tl-gold) !important;
  border-radius: var(--tl-radius) !important;
  color: var(--tl-charcoal) !important;
}

.bravo-booking-page .bg-blue-1-05 .text-blue-1 {
  color: var(--tl-gold-dark) !important;
  font-weight: 600;
}

/* Main checkout form container */
.booking-form .form-section {
  background: var(--tl-white);
  border: 1px solid var(--tl-border);
  border-radius: var(--tl-radius-lg);
  padding: 28px 32px;
  margin-bottom: 20px;
  box-shadow: var(--tl-shadow-xs);
}

/* Payment section */
.booking-form .checkout-payment {
  background: var(--tl-white);
  border: 1px solid var(--tl-border);
  border-radius: var(--tl-radius-lg);
  padding: 24px 28px;
  box-shadow: var(--tl-shadow-xs);
}

/* Book Now button */
.booking-form button.button.h-60 {
  height: 56px !important;
  padding: 0 36px !important;
  background: var(--tl-gold) !important;
  color: var(--tl-navy) !important;
  border-radius: var(--tl-radius) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
  box-shadow: var(--tl-shadow-gold) !important;
  transition: var(--tl-transition) !important;
}

.booking-form button.button.h-60:hover {
  background: var(--tl-gold-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(201,168,76,0.4) !important;
}

/* Terms checkbox */
.booking-form .text-14.text-light-1 {
  color: var(--tl-charcoal-60) !important;
  font-size: 0.875rem;
}

.booking-form .text-14.text-light-1 a {
  color: var(--tl-gold-dark) !important;
  font-weight: 600;
  text-decoration: underline;
}

/* -------------------------
   11. PROPERTY DETAIL PAGE
   ------------------------- */
/* Image gallery */
.bravo_hotel_detail .gallery-section,
.bravo_detail .gallery-section {
  border-radius: var(--tl-radius-lg);
  overflow: hidden;
}

/* Sticky booking panel override */
.bravo_detail .bravo-more-book-mobile {
  background: var(--tl-white);
  border-top: 1px solid var(--tl-border);
  box-shadow: 0 -4px 20px rgba(11,28,62,0.1);
  padding: 14px 0;
}

/* Amenities grid */
.tl-amenities {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.tl-amenity {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--tl-border);
  border-radius: var(--tl-radius);
  background: var(--tl-bg-section);
  font-size: 0.875rem;
  color: var(--tl-charcoal);
  transition: var(--tl-transition-fast);
}

.tl-amenity:hover {
  border-color: var(--tl-gold);
  background: var(--tl-gold-pale);
  color: var(--tl-navy);
}

.tl-amenity__icon {
  color: var(--tl-gold);
  font-size: 1rem;
  flex-shrink: 0;
}

/* Room comparison table */
.tl-room-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--tl-radius-lg);
  overflow: hidden;
  box-shadow: var(--tl-shadow-sm);
  border: 1px solid var(--tl-border);
}

.tl-room-table th {
  background: var(--tl-navy);
  color: white;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 14px 18px;
  text-align: left;
}

.tl-room-table td {
  padding: 16px 18px;
  font-size: 0.9375rem;
  color: var(--tl-charcoal);
  border-bottom: 1px solid var(--tl-border);
  background: var(--tl-white);
}

.tl-room-table tr:last-child td {
  border-bottom: none;
}

.tl-room-table tr:hover td {
  background: var(--tl-bg-section);
}

/* -------------------------
   12. CATEGORY PAGES
   ------------------------- */

/* HOTELS — Search filter sidebar */
.bravo_filter_search {
  background: var(--tl-white);
  border: 1px solid var(--tl-border);
  border-radius: var(--tl-radius-lg);
  padding: 20px;
  box-shadow: var(--tl-shadow-xs);
}

/* TOURS — Itinerary timeline */
.tl-timeline {
  position: relative;
  padding-left: 36px;
}

.tl-timeline::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, var(--tl-gold), var(--tl-navy));
  border-radius: 2px;
}

.tl-timeline__item {
  position: relative;
  margin-bottom: 28px;
}

.tl-timeline__dot {
  position: absolute;
  left: -31px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--tl-gold);
  border: 2px solid white;
  box-shadow: 0 0 0 2px var(--tl-gold);
}

.tl-timeline__time {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tl-gold-dark);
  margin-bottom: 4px;
}

.tl-timeline__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--tl-navy);
  margin-bottom: 4px;
}

.tl-timeline__desc {
  font-size: 0.875rem;
  color: var(--tl-charcoal-60);
  line-height: 1.6;
}

/* TOURS — Included/Excluded */
.tl-inclusions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.tl-inclusion-list {
  padding: 16px;
  border-radius: var(--tl-radius);
  border: 1px solid var(--tl-border);
}

.tl-inclusion-list--included {
  background: var(--tl-success-bg);
  border-color: rgba(26,127,90,0.2);
}

.tl-inclusion-list--excluded {
  background: var(--tl-error-bg);
  border-color: rgba(192,57,43,0.15);
}

.tl-inclusion-list__title {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.tl-inclusion-list--included .tl-inclusion-list__title { color: var(--tl-success); }
.tl-inclusion-list--excluded .tl-inclusion-list__title { color: var(--tl-error); }

.tl-inclusion-list li {
  font-size: 0.875rem;
  color: var(--tl-charcoal);
  padding: 4px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  list-style: none;
}

.tl-inclusion-list--included li::before {
  content: '✓';
  color: var(--tl-success);
  font-weight: 700;
  flex-shrink: 0;
}

.tl-inclusion-list--excluded li::before {
  content: '✗';
  color: var(--tl-error);
  font-weight: 700;
  flex-shrink: 0;
}

/* FLIGHTS — Cabin selector */
.tl-cabin-selector {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tl-cabin-option {
  display: none;
}

.tl-cabin-label {
  padding: 10px 18px;
  border: 1.5px solid var(--tl-border);
  border-radius: var(--tl-radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tl-charcoal-60);
  cursor: pointer;
  transition: var(--tl-transition-fast);
  user-select: none;
}

.tl-cabin-option:checked + .tl-cabin-label {
  border-color: var(--tl-navy);
  background: var(--tl-navy);
  color: white;
}

.tl-cabin-label:hover {
  border-color: var(--tl-navy);
  color: var(--tl-navy);
}

/* Flight type selector */
.tl-flight-type {
  display: flex;
  background: var(--tl-bg-section);
  border: 1px solid var(--tl-border);
  border-radius: var(--tl-radius);
  padding: 4px;
  gap: 2px;
  display: inline-flex;
  margin-bottom: 20px;
}

.tl-flight-type input[type="radio"] { display: none; }

.tl-flight-type__label {
  padding: 8px 18px;
  border-radius: calc(var(--tl-radius) - 4px);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tl-charcoal-60);
  cursor: pointer;
  transition: var(--tl-transition-fast);
}

.tl-flight-type input[type="radio"]:checked + .tl-flight-type__label {
  background: var(--tl-white);
  color: var(--tl-navy);
  font-weight: 700;
  box-shadow: var(--tl-shadow-xs);
}

/* EVENTS — Ticket tier */
.tl-ticket-tier {
  border: 1.5px solid var(--tl-border);
  border-radius: var(--tl-radius-lg);
  padding: 22px 24px;
  margin-bottom: 12px;
  transition: var(--tl-transition);
  cursor: pointer;
  position: relative;
}

.tl-ticket-tier:hover {
  border-color: var(--tl-navy);
  box-shadow: var(--tl-shadow-md);
}

.tl-ticket-tier.is-selected {
  border-color: var(--tl-gold);
  background: var(--tl-gold-pale);
}

.tl-ticket-tier.is-selected::after {
  content: '✓';
  position: absolute;
  top: 14px;
  right: 18px;
  width: 24px;
  height: 24px;
  background: var(--tl-gold);
  color: var(--tl-navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 24px;
  text-align: center;
}

.tl-ticket-tier__name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--tl-navy);
  margin-bottom: 4px;
}

.tl-ticket-tier__desc {
  font-size: 0.875rem;
  color: var(--tl-charcoal-60);
  margin-bottom: 12px;
}

.tl-ticket-tier__price {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--tl-navy);
}

/* BUSES — Seat map */
.tl-seatmap {
  background: var(--tl-bg-section);
  border: 1px solid var(--tl-border);
  border-radius: var(--tl-radius-lg);
  padding: 24px;
}

.tl-seatmap__legend {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.tl-seatmap__legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--tl-charcoal-60);
}

.tl-seat {
  width: 36px;
  height: 36px;
  border-radius: var(--tl-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--tl-transition-fast);
}

.tl-seat--available {
  background: var(--tl-success-bg);
  border-color: rgba(26,127,90,0.3);
  color: var(--tl-success);
}

.tl-seat--selected {
  background: var(--tl-navy);
  border-color: var(--tl-navy);
  color: white;
}

.tl-seat--taken {
  background: var(--tl-border);
  border-color: var(--tl-border);
  color: var(--tl-charcoal-40);
  cursor: not-allowed;
}

.tl-seat--available:hover {
  background: var(--tl-gold-pale);
  border-color: var(--tl-gold);
  color: var(--tl-gold-dark);
}

/* CAR — Vehicle specs */
.tl-car-specs {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.tl-car-spec {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.tl-car-spec__icon {
  font-size: 1.375rem;
  color: var(--tl-charcoal-60);
}

.tl-car-spec__value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tl-navy);
}

.tl-car-spec__label {
  font-size: 0.6875rem;
  color: var(--tl-charcoal-60);
}

/* -------------------------
   13. FILTER SIDEBAR
   ------------------------- */
.bravo_filter_search {
  background: var(--tl-white) !important;
  border: 1px solid var(--tl-border) !important;
  border-radius: var(--tl-radius-lg) !important;
  padding: 20px !important;
  box-shadow: var(--tl-shadow-xs) !important;
}

.bravo_filter_search .filter-title,
.bravo_filter_search .text-18.fw-500 {
  font-family: var(--tl-font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--tl-navy);
}

/* Range slider gold override */
.irs--round .irs-bar,
.irs--round .irs-from,
.irs--round .irs-to,
.irs--round .irs-single {
  background: var(--tl-gold) !important;
}

.irs--round .irs-handle > i:first-child {
  background-color: var(--tl-gold) !important;
}

/* -------------------------
   14. TRUST & SOCIAL PROOF
   ------------------------- */
.tl-trust-bar {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 24px;
  background: var(--tl-gold-pale);
  border: 1px solid var(--tl-gold);
  border-radius: var(--tl-radius-lg);
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.tl-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--tl-gold-dark);
  font-weight: 600;
}

.tl-trust-item i {
  font-size: 1rem;
}

/* -------------------------
   15. SEARCH RESULTS LIST
   ------------------------- */
/* GoTrip list items — enhance */
.bravo_list_item .item .item-content,
.bravo_list_item .hotel-item .content {
  padding: 18px 20px !important;
}

.bravo_list_item .item .item-title a,
.bravo_list_item .hotel-item .title a {
  font-family: var(--tl-font-body);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--tl-navy) !important;
  text-decoration: none;
  transition: var(--tl-transition-fast);
}

.bravo_list_item .item .item-title a:hover,
.bravo_list_item .hotel-item .title a:hover {
  color: var(--tl-gold) !important;
}

/* Map preview badge on card */
.tl-map-preview {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--tl-charcoal-60);
  padding: 3px 8px;
  border-radius: var(--tl-radius-pill);
  border: 1px solid var(--tl-border);
  background: var(--tl-bg-section);
  cursor: pointer;
  transition: var(--tl-transition-fast);
}

.tl-map-preview:hover {
  border-color: var(--tl-gold);
  color: var(--tl-gold-dark);
}

/* -------------------------
   16. FOOTER
   ------------------------- */
.bravo_wrap > footer,
.bravo_wrap [class*="footer"] {
  background: var(--tl-navy) !important;
}

/* Newsletter section */
.mailchimp {
  background: linear-gradient(135deg, var(--tl-navy-light), var(--tl-navy)) !important;
  border-top: 1px solid rgba(201, 168, 76, 0.2) !important;
}

.mailchimp .text-26.text-white.fw-600 {
  font-family: var(--tl-font-display);
}

.mailchimp .subcribe-form input.email-input {
  border-radius: var(--tl-radius) !important;
  border: none !important;
  height: 52px !important;
  padding: 0 18px !important;
  font-size: 0.9375rem !important;
  color: var(--tl-charcoal) !important;
}

.mailchimp .subcribe-form button {
  background: var(--tl-gold) !important;
  color: var(--tl-navy) !important;
  border-radius: var(--tl-radius) !important;
  font-weight: 700 !important;
  height: 52px !important;
  padding: 0 24px !important;
  border: none !important;
  transition: var(--tl-transition) !important;
}

.mailchimp .subcribe-form button:hover {
  background: var(--tl-gold-light) !important;
  transform: translateY(-1px);
}

/* -------------------------
   17. REVIEW / RATING SECTION
   ------------------------- */
.tl-review-score {
  background: var(--tl-navy);
  color: white;
  border-radius: var(--tl-radius-lg);
  padding: 24px;
  text-align: center;
}

.tl-review-score__number {
  font-family: var(--tl-font-display);
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--tl-gold);
  line-height: 1;
}

.tl-review-score__label {
  font-size: 1.0625rem;
  font-weight: 600;
  color: white;
  margin: 6px 0 2px;
}

.tl-review-score__count {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.6);
}

/* Star rating colors */
.booking-item-rating-stars li i.fa-star {
  color: var(--tl-gold) !important;
}

/* -------------------------
   18. MAP
   ------------------------- */
.tl-map-container {
  border-radius: var(--tl-radius-lg);
  overflow: hidden;
  border: 1px solid var(--tl-border);
  box-shadow: var(--tl-shadow-sm);
}

/* -------------------------
   19. BREADCRUMB
   ------------------------- */
.bravo_bc,
nav[aria-label="breadcrumb"] {
  padding: 14px 0;
}

.breadcrumb-item,
.breadcrumb-item a {
  font-size: 0.8125rem;
  color: var(--tl-charcoal-60) !important;
  text-decoration: none;
}

.breadcrumb-item.active {
  color: var(--tl-navy) !important;
  font-weight: 600;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--tl-charcoal-40);
}

/* -------------------------
   20. MOBILE OPTIMIZATIONS
   ------------------------- */
@media (max-width: 767px) {
  .tl-form-section {
    padding: 18px 16px;
  }

  .booking-form .form-section {
    padding: 18px 16px;
  }

  .mainSearch {
    border-radius: var(--tl-radius) !important;
    padding: 4px !important;
  }

  .tl-price-sidebar {
    position: static;
    margin-top: 24px;
  }

  .tl-steps {
    gap: 4px;
  }

  .tl-step__label {
    font-size: 0.625rem;
  }

  .tl-inclusions {
    grid-template-columns: 1fr;
  }

  .tl-amenities {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }

  .tl-enterprise-section {
    padding: 18px 16px;
  }

  .tl-trust-bar {
    gap: 16px;
    padding: 12px 16px;
  }

  .bravo_search section.bg-light-2 {
    padding: 32px 0 40px !important;
  }

  .bravo_search .text-30 {
    font-size: 1.5rem !important;
  }
}

@media (max-width: 575px) {
  .tl-flight-type {
    flex-wrap: wrap;
  }

  .tl-cabin-selector {
    gap: 6px;
  }

  .tl-cabin-label {
    padding: 8px 12px;
    font-size: 0.8125rem;
  }

  .booking-form button.button.h-60 {
    width: 100%;
    justify-content: center;
  }
}

/* -------------------------
   21. SECTION BACKGROUNDS
   ------------------------- */
.bg-light-2 {
  background: var(--tl-bg-section) !important;
}

.bg-dark-1, .bg-dark-3 {
  background-color: var(--tl-navy) !important;
}

/* masthead hero bg: navy fallback + visible dark overlay above the image */
.masthead__bg.bg-dark-3 {
  background-color: var(--tl-navy) !important;
}

.masthead__bg.bg-dark-3::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(11, 28, 62, 0.55) 0%,
    rgba(11, 28, 62, 0.35) 60%,
    rgba(11, 28, 62, 0.15) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* -------------------------
   22. LOADING / SKELETON
   ------------------------- */
.tl-skeleton {
  background: linear-gradient(90deg, var(--tl-bg-section) 25%, var(--tl-border) 50%, var(--tl-bg-section) 75%);
  background-size: 200% 100%;
  animation: tl-shimmer 1.5s infinite;
  border-radius: var(--tl-radius);
}

@keyframes tl-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* -------------------------
   23. ACCESSIBILITY
   ------------------------- */
:focus-visible {
  outline: 2px solid var(--tl-gold);
  outline-offset: 2px;
}

/* Skip link */
.tl-skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 9999;
  background: var(--tl-navy);
  color: white;
  padding: 8px 16px;
  border-radius: var(--tl-radius);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s;
}

.tl-skip-link:focus {
  top: 16px;
}

/* -------------------------
   24. UTILITY CLASSES
   ------------------------- */
.tl-divider {
  border: none;
  border-top: 1px solid var(--tl-border);
  margin: 20px 0;
}

.tl-divider--gold {
  border-top-color: var(--tl-gold);
  opacity: 0.4;
}

.tl-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.tl-section-header__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tl-gold);
  margin-bottom: 4px;
}

.tl-auto-save-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--tl-success);
  font-weight: 500;
}

.tl-auto-save-indicator::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tl-success);
}

/* Operator badge (Bus) */
.tl-operator-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--tl-navy);
  color: white;
  border-radius: var(--tl-radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Invoice preview button */
.tl-invoice-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1.5px solid var(--tl-border);
  border-radius: var(--tl-radius);
  background: var(--tl-white);
  color: var(--tl-charcoal);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--tl-transition-fast);
}

.tl-invoice-btn:hover {
  border-color: var(--tl-navy);
  color: var(--tl-navy);
  box-shadow: var(--tl-shadow-xs);
}

/* Cancellation policy highlight */
.tl-cancellation-policy {
  background: var(--tl-success-bg);
  border: 1px solid rgba(26,127,90,0.25);
  border-radius: var(--tl-radius);
  padding: 14px 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.tl-cancellation-policy__icon {
  color: var(--tl-success);
  font-size: 1.125rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.tl-cancellation-policy__text {
  font-size: 0.875rem;
  color: var(--tl-charcoal);
  line-height: 1.5;
}

.tl-cancellation-policy__text strong {
  color: var(--tl-success);
}

/* Refund conditions (Flight) */
.tl-refund-summary {
  background: var(--tl-info-bg);
  border: 1px solid rgba(26,95,138,0.2);
  border-radius: var(--tl-radius);
  padding: 14px 18px;
}

.tl-refund-summary__title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--tl-info);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* -------------------------
   25. PRINT STYLES
   ------------------------- */
@media print {
  .bravo_header, .bravo_wrap > footer, .mailchimp { display: none !important; }
  .tl-price-sidebar { box-shadow: none; position: static; }
  body { background: white !important; }
}

/* =============================================================
   26. BUGFIXES & UI ENHANCEMENTS
   ============================================================= */

/* ── 0. HEADER REDESIGN ── */
/* Top utility bar — before the main header */
.bravo_header::before {
  content: '';
  display: none; /* spacer handled by utility bar below */
}

.tl-topbar {
  background: var(--tl-navy);
  border-bottom: 1px solid rgba(201, 168, 76, 0.18);
  padding: 7px 0;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.65);
  position: relative;
  z-index: 1001;
}

.tl-topbar a {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color 0.15s ease;
}

.tl-topbar a:hover { color: var(--tl-gold); }

.tl-topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.tl-topbar__item i {
  color: var(--tl-gold);
  font-size: 0.8rem;
}

/* Main header — refined height and padding */
.header.bravo_header {
  height: 72px !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.15) !important;
  transition: height 0.3s ease, background 0.3s ease !important;
}

/* Header inner container alignment */
.header.bravo_header .header__container {
  height: 72px;
  display: flex;
  align-items: center;
}

/* Logo refinement */
.header-logo {
  display: flex;
  align-items: center;
}

.header-logo img {
  max-height: 44px;
  width: auto;
}

/* Nav link spacing */
.menu__nav > li > a,
.menu__nav .menu-item > a {
  padding: 8px 16px !important;
}

/* Active nav item gold accent */
.menu__nav > li.current-menu-item > a,
.menu__nav > li.current-menu-ancestor > a {
  color: var(--tl-gold) !important;
}

/* Sign In / Register button in header — pill style */
.header .button.-outline-white,
.header .button.border-white,
a.button[data-bs-toggle="modal"][href="#login"] {
  border: 1.5px solid rgba(201, 168, 76, 0.5) !important;
  color: rgba(255,255,255,0.9) !important;
  border-radius: var(--tl-radius-pill) !important;
  padding: 8px 20px !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em;
  transition: var(--tl-transition) !important;
  background: transparent !important;
}

a.button[data-bs-toggle="modal"][href="#login"]:hover {
  border-color: var(--tl-gold) !important;
  color: var(--tl-gold) !important;
  background: rgba(201, 168, 76, 0.08) !important;
}

/* User avatar initials circle */
.avatar-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tl-gold);
  color: var(--tl-navy);
  font-weight: 800;
  font-size: 0.875rem;
}

/* User dropdown menu */
.login-item .subnav {
  min-width: 220px !important;
  border-top: 2px solid var(--tl-gold) !important;
  top: calc(100% + 8px) !important;
}

.login-item .subnav li a.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px !important;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0 !important;
}

.login-item .subnav li a.dropdown-item i {
  color: var(--tl-gold);
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.login-item .subnav .menu-hr {
  border-top: 1px solid var(--tl-border);
}

/* "Hi, Name" greeting in header */
.is_login span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Mobile menu button */
.icon-menu {
  color: rgba(255,255,255,0.9) !important;
}

/* Currency / language switcher */
.dropdown-language .dropdown-menu,
.dropdown-currency .dropdown-menu {
  background: var(--tl-white) !important;
  border: 1px solid var(--tl-border) !important;
  border-radius: var(--tl-radius) !important;
  box-shadow: var(--tl-shadow-md) !important;
  min-width: 160px;
  padding: 6px !important;
  top: calc(100% + 6px) !important;
}

/* WhatsApp quick-contact CTA pill in header */
.tl-header-wa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #25D366;
  color: white !important;
  border-radius: var(--tl-radius-pill);
  padding: 7px 16px;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: background 0.2s ease;
  white-space: nowrap;
  margin-left: 8px;
}

.tl-header-wa:hover {
  background: #1DA851 !important;
  color: white !important;
}

/* header-margin: see single rule at top of Section 3 */

/* ── A. MASTHEAD TABS — Always visible, corrected colours ── */
/* Animation may not fire if JS runs before DOM is ready; force visible */
.masthead__tabs,
.masthead__tabs [data-anim-child],
[data-anim-wrap] .masthead__tabs {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  pointer-events: auto !important;
}

/* Tab-button colours on dark hero
   Default: transparent/borderless so -bookmark-2 category tabs show
   only their icon+text until hover. The -underline pill variant gets
   its own background+border from the more-specific rule at Section 28-3. */
.masthead .tabs__button {
  color: rgba(255, 255, 255, 0.90) !important;
  background: transparent !important;
  border: none !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

.masthead .tabs__button.is-tab-el-active,
.masthead .tabs__button:hover {
  background: var(--tl-gold) !important;
  color: var(--tl-navy) !important;
  border: 1.5px solid var(--tl-gold) !important;
}

/* Tab content / pane — always accessible */
.masthead .tabs__content,
.masthead .tabs__pane.is-tab-el-active {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

/* ── B. SEARCH DROPDOWN — Fix overflow clipping ── */
.mainSearch {
  overflow: visible !important;
}

/* Ensure dropdown panels surface above everything */
.searchMenu-loc__field,
.searchMenu-dates__field,
.searchMenu-guests__field,
.js-popup-window,
.-dropdown,
[data-x-dd] {
  z-index: 9990 !important;
}

/* Remove unnecessary column dividers inside search box */
.mainSearch .field-items .row > [class*="col-"]:not(:last-child) {
  border-right: none !important;
}

.mainSearch .searchForm-field + .searchForm-field {
  border-left: none !important;
}

/* ── C. FILTER SIDEBAR — Fix distorted margins ── */
/* [class*="-item"] is too broad and hits .sidebar__item, .g-filter-item etc */
.bravo_filter [class*="-item"],
.sidebar .sidebar__item,
.sidebar__item,
.g-filter-item,
.bravo_filter .item {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: none !important;
  transition: none !important;
}

/* Restore card-like appearance only for actual listing items */
.bravo_list_item .hotel-item,
.bravo_list_item .tour-item,
.bravo_list_item .car-item,
.bravo_list_item .event-item,
.bravo_list_item .bus-item,
.bravo_list_item .item,
.hotelsCard.item-loop,
.tourCard.-type-1,
.carCard {
  background: var(--tl-bg-card) !important;
  border: 1px solid var(--tl-border) !important;
  border-radius: var(--tl-radius-lg) !important;
  box-shadow: var(--tl-shadow-sm) !important;
  overflow: hidden !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease !important;
}

.hotelsCard.item-loop:hover,
.tourCard.-type-1:hover,
.carCard:hover {
  box-shadow: var(--tl-shadow-lg) !important;
  transform: translateY(-2px);
  border-color: rgba(201, 168, 76, 0.3) !important;
}

/* ── D. TOUR / HOTEL CARD IMAGES — Better landscape ratio ── */
.tourCard.-type-1 .cardImage {
  padding-bottom: 72% !important; /* 4:3-ish landscape */
  height: 0;
}

.hotelsCard.-type-1 .cardImage {
  padding-bottom: 70% !important;
  height: 0;
}

/* ── E. FORM DESIGN — Clear labels, clean focus ── */
/* Use column-flex so label sits naturally above input */
.form-input {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 20px;
}

.form-input label {
  position: static !important;
  order: -1;
  display: block !important;
  font-size: 0.8125rem !important;   /* 13px — clearly readable */
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--tl-charcoal) !important;
  margin-bottom: 6px !important;
  line-height: 1.3 !important;
  pointer-events: none;
  transform: none !important;
  top: auto !important;
  left: auto !important;
}

.form-input input,
.form-input select,
.form-input textarea {
  order: 0;
  height: 46px !important;
  padding: 10px 14px !important;
  border: 1.5px solid var(--tl-border) !important;
  border-radius: var(--tl-radius) !important;
  background: var(--tl-white) !important;
  font-size: 0.9375rem !important;
  color: var(--tl-charcoal) !important;
  font-family: var(--tl-font-body) !important;
  transition: border-color 0.2s ease !important;
  outline: none !important;
  box-shadow: none !important;
}

.form-input textarea {
  height: auto !important;
  min-height: 100px !important;
  padding: 12px 14px !important;
  resize: vertical !important;
}

/* Focus: clean navy border, no glow/shadow */
.form-input input:focus,
.form-input select:focus,
.form-input textarea:focus {
  border-color: var(--tl-navy) !important;
  box-shadow: none !important;
  outline: none !important;
}

.form-input input:hover:not(:focus),
.form-input select:hover:not(:focus) {
  border-color: var(--tl-charcoal-40) !important;
}

/* Login / register modal container */
.gotrip-login-modal .modal-body,
.gotrip-register-modal .modal-body,
#login .modal-body,
#register .modal-body {
  padding: 28px 32px !important;
}

/* Modal header */
#login .modal-header,
#register .modal-header {
  background: var(--tl-navy);
  color: white;
  padding: 18px 32px;
}

#login .modal-title,
#register .modal-title {
  color: white;
  font-family: var(--tl-font-display);
}

#login .btn-close,
#register .btn-close {
  filter: invert(1);
}

/* Social auth buttons */
.button.-outline-blue-1,
.button.-outline-red-1,
.button.-outline-dark-2 {
  border-radius: var(--tl-radius) !important;
}

/* ── F. WHATSAPP BUTTON ── */
.tl-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25D366;
  color: white !important;
  border: none;
  border-radius: var(--tl-radius);
  padding: 11px 22px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 10px rgba(37, 211, 102, 0.28);
  letter-spacing: 0.01em;
  white-space: nowrap;
  margin-right: 12px;
}

.tl-whatsapp-btn i {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.tl-whatsapp-btn:hover {
  background: #1DA851 !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 18px rgba(37, 211, 102, 0.42);
  color: white !important;
  text-decoration: none !important;
}

/* ── G. QUICK VIEW — Hover button on listing cards ── */
.cardImage {
  position: relative;
}

.tl-qv-trigger {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
  white-space: nowrap;
}

.cardImage:hover .tl-qv-trigger {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.tl-qv-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--tl-navy) !important;
  border: 1.5px solid rgba(11, 28, 62, 0.12);
  border-radius: var(--tl-radius-pill);
  padding: 8px 20px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  text-decoration: none !important;
  transition: background 0.18s ease, color 0.18s ease;
}

.tl-qv-btn:hover {
  background: var(--tl-navy) !important;
  color: white !important;
  border-color: var(--tl-navy);
  text-decoration: none !important;
}

/* ── H. QUICK VIEW MODAL ── */
#tlQuickViewModal .modal-dialog {
  max-width: 860px;
}

#tlQuickViewModal .modal-content {
  border: none;
  border-radius: var(--tl-radius-lg);
  overflow: hidden;
  box-shadow: var(--tl-shadow-xl);
}

#tlQuickViewModal .tl-qv-image-col {
  min-height: 380px;
  overflow: hidden;
  position: relative;
  background: var(--tl-bg-section);
}

#tlQuickViewModal .tl-qv-img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  display: block;
}

#tlQuickViewModal .tl-qv-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--tl-navy);
  z-index: 10;
  box-shadow: var(--tl-shadow-sm);
  transition: background 0.18s ease, color 0.18s ease;
}

#tlQuickViewModal .tl-qv-close:hover {
  background: var(--tl-navy);
  color: white;
}

#tlQuickViewModal .tl-qv-body {
  padding: 30px 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 380px;
}

#tlQuickViewModal .tl-qv-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tl-gold-dark);
  background: var(--tl-gold-pale);
  border: 1px solid var(--tl-gold);
  padding: 3px 12px;
  border-radius: var(--tl-radius-pill);
  margin-bottom: 10px;
}

#tlQuickViewModal .tl-qv-title {
  font-family: var(--tl-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tl-navy);
  line-height: 1.25;
  margin-bottom: 8px;
}

#tlQuickViewModal .tl-qv-location {
  font-size: 0.875rem;
  color: var(--tl-charcoal-60);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 16px;
}

#tlQuickViewModal .tl-qv-meta {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-top: 1px solid var(--tl-border);
  border-bottom: 1px solid var(--tl-border);
  margin-bottom: 18px;
}

#tlQuickViewModal .tl-qv-meta-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tl-charcoal-60);
  display: block;
  margin-bottom: 3px;
}

#tlQuickViewModal .tl-qv-meta-value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tl-charcoal);
}

#tlQuickViewModal .tl-qv-from {
  font-size: 0.75rem;
  color: var(--tl-charcoal-60);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: 4px;
}

#tlQuickViewModal .tl-qv-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 20px;
}

#tlQuickViewModal .tl-qv-price-original {
  font-size: 1.125rem;
  color: var(--tl-charcoal-40);
  text-decoration: line-through;
}

#tlQuickViewModal .tl-qv-price {
  font-size: 2rem;
  font-weight: 800;
  color: var(--tl-navy);
  line-height: 1;
}

#tlQuickViewModal .tl-qv-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

#tlQuickViewModal .tl-qv-book-btn {
  flex: 1;
  min-width: 140px;
  padding: 13px 20px;
  background: var(--tl-gold);
  color: var(--tl-navy) !important;
  border: none;
  border-radius: var(--tl-radius);
  font-weight: 700;
  font-size: 0.9375rem;
  cursor: pointer;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s ease, transform 0.2s ease;
  box-shadow: var(--tl-shadow-gold);
}

#tlQuickViewModal .tl-qv-book-btn:hover {
  background: var(--tl-gold-dark) !important;
  transform: translateY(-1px);
  color: var(--tl-navy) !important;
}

#tlQuickViewModal .tl-qv-detail-btn {
  flex: 1;
  min-width: 140px;
  padding: 12px 20px;
  background: transparent;
  color: var(--tl-navy) !important;
  border: 1.5px solid var(--tl-navy);
  border-radius: var(--tl-radius);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s ease, color 0.2s ease;
}

#tlQuickViewModal .tl-qv-detail-btn:hover {
  background: var(--tl-navy) !important;
  color: white !important;
}

@media (max-width: 767px) {
  #tlQuickViewModal .modal-dialog {
    max-width: 100%;
    margin: 0;
    align-items: flex-end;
  }
  #tlQuickViewModal .modal-content {
    border-radius: var(--tl-radius-lg) var(--tl-radius-lg) 0 0;
  }
  #tlQuickViewModal .tl-qv-image-col {
    min-height: 220px;
  }
  #tlQuickViewModal .tl-qv-img {
    min-height: 220px;
  }
  #tlQuickViewModal .tl-qv-body {
    padding: 22px 20px;
    min-height: auto;
  }
  #tlQuickViewModal .tl-qv-title {
    font-size: 1.25rem;
  }
  #tlQuickViewModal .tl-qv-actions {
    flex-direction: column;
  }
}

/* =============================================================
   27. ROUND-2 FIXES
   ============================================================= */

/* ── A. GUEST / PEOPLE PICKER — Fix clipping on all containers ── */
/* All parent containers that wrap the guest-count dropdown must not clip it */
.mainSearch,
.mainSearch .mainSearch__form,
.mainSearch .button-grid,
.mainSearch__submit,
.searchForm,
.searchForm-field,
.searchForm__input,
.field-body,
.field-items,
.field-items .row,
.js-form-dd,
.form-control-select {
  overflow: visible !important;
}

/* The guest popup panel itself */
.searchMenu-guests,
.searchMenu-guests__field,
.js-guests-popup,
.js-popup,
.-popup-single,
.field-dropdown,
.bravo-dropdown-popup {
  z-index: 9995 !important;
  overflow: visible !important;
}

/* Prevent clip from card / listing grid wrappers */
.row.gutter-x-20,
.col-xl-9,
.col-xl-3,
.bravo_list_search_form,
.bravo_content_wrap {
  overflow: visible !important;
}

/* ── B. DATE PICKER — Cleaner, more visible date inputs ── */
.form-date-field {
  position: relative;
}

.form-date-field input[type="text"],
.form-date-field .daterangepicker-input,
input.daterangepicker-input,
.bravo_datepicker input {
  border: 1.5px solid var(--tl-border) !important;
  border-radius: var(--tl-radius) !important;
  background: var(--tl-white) !important;
  height: 46px !important;
  padding: 10px 14px 10px 40px !important;
  font-size: 0.9375rem !important;
  color: var(--tl-charcoal) !important;
  transition: border-color 0.2s ease !important;
  outline: none !important;
  box-shadow: none !important;
}

.form-date-field h4.text-15 {
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: var(--tl-charcoal-60) !important;
  margin-bottom: 4px !important;
  ;
}

.form-date-field input[type="text"]:focus,
input.daterangepicker-input:focus {
  border-color: var(--tl-navy) !important;
  box-shadow: none !important;
}

/* Calendar icon inside date field */
.form-date-field::before {
  content: "\f133";
  font-family: "FontAwesome";
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tl-gold);
  font-size: 0.9rem;
  pointer-events: none;
  z-index: 1;
}

/* DateRangePicker calendar panel — navy header */
.daterangepicker {
  border: 1px solid var(--tl-border) !important;
  border-radius: var(--tl-radius-lg) !important;
  box-shadow: var(--tl-shadow-lg) !important;
  font-family: var(--tl-font-body) !important;
  z-index: 9999 !important;
}

.daterangepicker .drp-calendar .calendar-table th {
  background: var(--tl-navy) !important;
  color: white !important;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background: var(--tl-navy) !important;
  border-color: var(--tl-navy) !important;
  color: white !important;
}

.daterangepicker td.in-range {
  background: var(--tl-gold-pale) !important;
  color: var(--tl-charcoal) !important;
}

.daterangepicker td.start-date,
.daterangepicker td.end-date {
  background: var(--tl-gold) !important;
  border-color: var(--tl-gold) !important;
  color: var(--tl-navy) !important;
  font-weight: 700 !important;
}

.daterangepicker .drp-buttons .btn {
  border-radius: var(--tl-radius) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
}

.daterangepicker .drp-buttons .applyBtn {
  background: var(--tl-gold) !important;
  border-color: var(--tl-gold) !important;
  color: var(--tl-navy) !important;
}

/* ── C. BREADCRUMBS — Redesigned for enterprise look ── */
.bravo_breadcrumb,
.g-breadcrumb {
  background: var(--tl-white) !important;
  border-bottom: 1px solid var(--tl-border) !important;
  padding: 12px 0 !important;
  box-shadow: none !important;
}

.bravo_breadcrumb .container,
.g-breadcrumb .container {
  display: flex;
  align-items: center;
}

.bravo_breadcrumb ol,
.bravo_breadcrumb ul,
.g-breadcrumb ol,
.g-breadcrumb ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.8125rem;
}

.bravo_breadcrumb li,
.g-breadcrumb li {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--tl-charcoal-60);
}

.bravo_breadcrumb li a,
.g-breadcrumb li a {
  color: var(--tl-charcoal-60) !important;
  text-decoration: none !important;
  font-weight: 500;
  transition: color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.bravo_breadcrumb li a:hover,
.g-breadcrumb li a:hover {
  color: var(--tl-gold) !important;
}

/* Home icon on first crumb */
.bravo_breadcrumb li:first-child a::before,
.g-breadcrumb li:first-child a::before {
  content: "\f015";
  font-family: "FontAwesome";
  font-size: 0.875rem;
  color: var(--tl-gold);
}

/* Separator arrow using gold colour */
.bravo_breadcrumb li + li::before,
.g-breadcrumb li + li::before {
  content: "\f105";
  font-family: "FontAwesome";
  color: var(--tl-gold);
  font-size: 0.75rem;
  line-height: 1;
}

/* Active / current page */
.bravo_breadcrumb li.active,
.bravo_breadcrumb li:last-child,
.g-breadcrumb li.active,
.g-breadcrumb li:last-child {
  color: var(--tl-navy);
  font-weight: 600;
}

/* Also target GoTrip-style breadcrumb markup */
.breadcrumb-item + .breadcrumb-item::before {
  content: "\f105" !important;
  font-family: "FontAwesome" !important;
  color: var(--tl-gold) !important;
  font-size: 0.75rem;
}

.breadcrumb-item a {
  color: var(--tl-charcoal-60) !important;
  font-weight: 500;
}

.breadcrumb-item a:hover { color: var(--tl-gold) !important; }

.breadcrumb-item.active {
  color: var(--tl-navy) !important;
  font-weight: 600 !important;
}

/* ── D. BUS LISTING — Operator name visible + card styling ── */
/* Operator name text (added via .tl-bus-operator-name) */
.tl-bus-operator-name {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tl-charcoal);
  margin-top: 4px;
  text-align: center;
  line-height: 1.2;
}

/* Bus card inner table / row — fix white text on white bg */
.base-tr.bg-white,
.busCard .base-tr {
  background: var(--tl-white) !important;
  border: 1px solid var(--tl-border) !important;
  border-radius: var(--tl-radius) !important;
  color: var(--tl-charcoal) !important;
}

.busCard .base-td,
.base-tr .base-td {
  color: var(--tl-charcoal) !important;
}

/* Operator column */
.busCard__operator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.busCard__operator img {
  max-height: 36px;
  width: auto;
  object-fit: contain;
}

/* ── E. CHECKOUT PAGE — Form visibility + spacing + less intimidating ── */

/* Checkout page heading */
.tl-checkout-heading {
  font-family: var(--tl-font-body) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--tl-navy) !important;
  letter-spacing: -0.01em;
}

/* Proxy booking card */
.tl-proxy-booking {
  background: var(--tl-white) !important;
  border: 1px solid var(--tl-border) !important;
  border-radius: var(--tl-radius-lg) !important;
  margin-bottom: 20px !important;
  box-shadow: var(--tl-shadow-xs) !important;
  overflow: hidden;
}

.tl-proxy-booking__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.tl-proxy-booking__header:hover {
  background: var(--tl-bg-section);
  border-bottom-color: var(--tl-border);
}

.tl-proxy-booking__title {
  font-family: var(--tl-font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--tl-navy);
  display: flex;
  align-items: center;
  gap: 8px;
}

.tl-proxy-booking__title i { color: var(--tl-gold); }

.tl-proxy-booking__content {
  display: none;
  padding: 20px 24px;
  border-top: 1px solid var(--tl-border);
}

.tl-proxy-booking.is-active .tl-proxy-booking__header {
  border-bottom-color: var(--tl-border);
}

@media (max-width: 767px) {
  .tl-proxy-booking__header { padding: 14px 16px; }
  .tl-proxy-booking__content { padding: 16px; }
}

/* Form sections — card-style separation */
.tl-form-section {
  background: var(--tl-white) !important;
  border: 1px solid var(--tl-border) !important;
  border-radius: var(--tl-radius-lg) !important;
  padding: 24px 28px !important;
  margin-bottom: 20px !important;
  box-shadow: var(--tl-shadow-xs) !important;
}

.tl-form-section__title {
  font-family: var(--tl-font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--tl-navy);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--tl-border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.tl-form-section__title i {
  color: var(--tl-gold);
  font-size: 1rem;
}

/* Field inputs — fully visible with proper height */
.tl-field {
  margin-bottom: 16px !important;
}

.tl-field__label {
  display: block !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--tl-charcoal) !important;
  margin-bottom: 5px !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.tl-field__input,
.tl-field input,
.tl-field select,
.tl-field textarea,
.form-checkout input[type="text"],
.form-checkout input[type="email"],
.form-checkout input[type="tel"],
.form-checkout input[type="number"],
.form-checkout select,
.form-checkout textarea {
  display: block !important;
  width: 100% !important;
  height: 46px !important;
  padding: 10px 14px !important;
  border: 1.5px solid var(--tl-border) !important;
  border-radius: var(--tl-radius) !important;
  background: var(--tl-white) !important;
  font-size: 0.9375rem !important;
  color: var(--tl-charcoal) !important;
  font-family: var(--tl-font-body) !important;
  transition: border-color 0.2s ease !important;
  outline: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-appearance: none;
  appearance: none;
}

.tl-field textarea,
.form-checkout textarea {
  height: auto !important;
  min-height: 90px !important;
  resize: vertical !important;
}

/* Icon inputs — the base rule above sets padding: 10px 14px !important which
   clobbers padding-left: 40px. Restore left padding so text clears the icon.
   form-checkout input[type] selectors have specificity (0,2,1) so we match
   that with .form-checkout .tl-field--icon input to ensure ours comes later. */
.tl-field--icon .tl-field__input,
.tl-field--icon input,
.tl-field--icon select,
.form-checkout .tl-field--icon input,
.form-checkout .tl-field--icon select {
  padding-left: 42px !important;
}

.tl-field__input:focus,
.tl-field input:focus,
.tl-field select:focus,
.tl-field textarea:focus,
.form-checkout input:focus,
.form-checkout select:focus,
.form-checkout textarea:focus {
  border-color: var(--tl-navy) !important;
  box-shadow: 0 0 0 3px rgba(11,28,62,0.06) !important;
  outline: none !important;
}

/* Grid row spacing inside checkout form */
.form-checkout .row,
.checkout-form-inner .row {
  margin-left: -10px !important;
  margin-right: -10px !important;
  row-gap: 0 !important;
}

.form-checkout .row > [class*="col-"],
.checkout-form-inner .row > [class*="col-"] {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* Optional / less-used fields — collapsible hint */
.tl-optional-label {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--tl-charcoal-40);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: 6px;
}

/* Checkout step: hide enterprise fields block title if empty */
.tl-enterprise-fields .tl-form-section:empty {
  display: none !important;
}

/* Corporate Details section — same card style as .tl-form-section */
.tl-enterprise-section {
  background: var(--tl-white) !important;
  border: 1px solid var(--tl-border) !important;
  border-radius: var(--tl-radius-lg) !important;
  padding: 24px 28px !important;
  margin-bottom: 20px !important;
  box-shadow: var(--tl-shadow-xs) !important;
}

@media (max-width: 767px) {
  .tl-enterprise-section { padding: 18px 16px !important; }
}

/* Collapsible enterprise fields toggle */
.tl-enterprise-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tl-navy);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
  margin-bottom: 12px;
}

.tl-enterprise-toggle:hover {
  color: var(--tl-gold);
  text-decoration-color: var(--tl-gold);
}

/* Price sidebar — sticky on desktop */
.tl-price-sidebar {
  position: sticky !important;
  top: 90px !important;
  border: 1px solid var(--tl-border) !important;
  border-radius: var(--tl-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--tl-shadow-md) !important;
  background: var(--tl-white) !important;
}

.tl-price-sidebar__header {
  background: var(--tl-navy) !important;
  color: white !important;
  padding: 18px 20px !important;
}

.tl-price-sidebar__title {
  font-family: var(--tl-font-body);
  font-size: 1rem;
  font-weight: 700;
  color: white;
  margin-bottom: 2px;
}

.tl-price-sidebar__sub {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.65);
}

.tl-price-sidebar__body {
  padding: 20px !important;
}

/* Checkout submit button — full width gold CTA */
.tl-checkout-submit,
.form-checkout .button.-dark-1[type="submit"],
.form-checkout button[type="submit"],
.checkout-btn-submit {
  width: 100% !important;
  background: var(--tl-gold) !important;
  color: var(--tl-navy) !important;
  border: none !important;
  border-radius: var(--tl-radius) !important;
  padding: 15px 24px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  display: block !important;
  text-align: center !important;
  transition: background 0.2s ease, transform 0.15s ease !important;
  box-shadow: var(--tl-shadow-gold) !important;
}

.tl-checkout-submit:hover,
.form-checkout button[type="submit"]:hover {
  background: var(--tl-gold-dark) !important;
  transform: translateY(-1px);
}

/* Trust bar row below submit */
.tl-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 0 0;
  font-size: 0.75rem;
  color: var(--tl-charcoal-60);
}

.tl-trust-row i { color: var(--tl-gold); font-size: 0.875rem; }

/* Step indicator — see Section 8 (line ~999) for the complete ruleset */

/* =============================================================
   28. ROUND-3: TABS, DROPDOWNS, CALENDAR, GRID, SPACING
   ============================================================= */

/* ── 1. MASTHEAD ANIM — Force visible (correct selector, class is .tabs) ── */
.masthead [data-anim-child],
.masthead .tabs,
.masthead .tabs.-underline,
.masthead .tabs__controls,
.masthead .tabs__content,
.masthead .tabs__pane {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ── 1B. MASTHEAD STACKING CONTEXT ───────────────────────────────
   isolation: isolate creates a stacking context on the masthead section.
   This means .masthead__bg (z-index:-1) renders WITHIN the masthead's
   context — above the masthead's own transparent background, so the
   navy bg-dark-3 color becomes visible just like the header.
   Without this, z-index:-1 escapes to the root stacking context and
   the background colour can be obscured by other painted layers.
   ─────────────────────────────────────────────────────────────── */
.masthead {
  isolation: isolate;
}

/* ── 2. MASTHEAD OVERFLOW — Every ancestor must allow overflow ── */
.masthead,
.masthead > div,
.masthead .container,
.masthead .row,
.masthead .col-auto,
.masthead .tabs,
.masthead .tabs.-underline,
.masthead .tabs__content,
.masthead .tabs__pane,
.masthead .tabs__pane.is-tab-el-active,
.masthead form,
.masthead .mainSearch,
.masthead .field-items,
.masthead .field-items .row,
.masthead .searchMenu-loc,
.masthead .searchMenu-guests,
.masthead .js-form-dd,
.masthead .item {
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
}

/* ── 3. MASTHEAD TABS — Pill design, gold active ── */
.masthead .tabs.-underline .tabs__controls {
  gap: 8px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

.masthead .tabs.-underline .tabs__button {
  border-bottom: none !important;
  padding: 9px 24px !important;
  border-radius: 40px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  background: rgba(255, 255, 255, 0.13) !important;
  color: rgba(255, 255, 255, 0.90) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease !important;
  white-space: nowrap !important;
}

.masthead .tabs.-underline .tabs__button.is-tab-el-active,
.masthead .tabs.-underline .tabs__button:hover {
  background: var(--tl-gold) !important;
  color: var(--tl-navy) !important;
  border-color: var(--tl-gold) !important;
  box-shadow: 0 4px 16px rgba(201, 168, 76, 0.38) !important;
}

.masthead .tabs__content {
  margin-top: 20px !important;
}

/* ── 4. SEARCH DROPDOWN PANELS — Stay above everything ── */
.searchMenu-loc,
.searchMenu-guests,
.searchMenu-dates {
  position: relative !important;
  overflow: visible !important;
}

.searchMenu-loc__field,
.searchMenu-guests__field {
  position: absolute !important;
  z-index: 9996 !important;
  top: 100% !important;
}

/* ── 5. CALENDAR — Compact cells, single month on mobile ── */
.daterangepicker {
  font-size: 0.8125rem !important;
  max-width: 620px !important;
}

/* Day cells and day-of-week header cells — compact size */
.daterangepicker .calendar-table tbody td,
.daterangepicker .calendar-table thead tr:nth-child(2) th {
  min-width: 28px !important;
  width: 28px !important;
  height: 28px !important;
  font-size: 0.8rem !important;
  padding: 2px !important;
  line-height: 28px !important;
}

/* Month/year nav row — let it size naturally */
.daterangepicker .calendar-table thead tr:first-child th {
  width: auto !important;
  min-width: unset !important;
  height: 36px !important;
  line-height: 36px !important;
  font-size: 0.875rem !important;
  padding: 0 6px !important;
}

.daterangepicker .drp-calendar .calendar-table {
  padding: 6px !important;
}

@media (max-width: 767px) {
  .daterangepicker {
    max-width: 94vw !important;
  }
  .daterangepicker .drp-calendar.right {
    display: none !important;
  }
  .daterangepicker .drp-calendar.left {
    width: 100% !important;
  }
}

/* ── 6. LISTING GRID — Proper gutters ── */
/* Outer wrapper must NOT clip box-shadow of cards */
.item-loop {
  overflow: visible !important;
}

/* Inner card elements get the visual treatment */
.item-loop .hotelsCard.-type-1,
.item-loop .activityCard.-type-1,
.item-loop .carCard.-type-1,
.item-loop .activityCard,
.item-loop-gird-2 .carCard {
  box-shadow: var(--tl-shadow-sm) !important;
  border-radius: var(--tl-radius-lg) !important;
  overflow: hidden !important;
  background: var(--tl-white) !important;
  border: 1px solid var(--tl-border) !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease !important;
}

.item-loop:hover .hotelsCard.-type-1,
.item-loop:hover .activityCard.-type-1,
.item-loop:hover .activityCard,
.item-loop-gird-2:hover .carCard {
  box-shadow: var(--tl-shadow-md) !important;
  transform: translateY(-2px);
  border-color: rgba(201, 168, 76, 0.3) !important;
}

/* Row containers — proper page gutter */
.bravo_content_wrap .row {
  overflow: visible !important;
}

/* ── 7. DETAIL PAGE — Reduce gap after breadcrumb ── */
section.g-header {
  padding-top: 10px !important;
}

.bravo_breadcrumb {
  margin-bottom: 0 !important;
}

.js-pin-container {
  padding-top: 20px !important;
}

/* header-margin: see single rule at top of Section 3 */

@media (max-width: 991px) {
  section.g-header {
    padding-top: 6px !important;
  }
  .js-pin-container {
    padding-top: 12px !important;
  }
}

/* =============================================================
   29. AMENITIES, GUEST PICKER, MISC FIXES
   ============================================================= */

/* ── A. AMENITY CHIPS — definitive fix ────────────────────────────────
   Root cause: every module CSS (hotel.css, tour.css, car.css …) ships
   high-specificity (0,7,0) rules on .item i that set:
     font-size:30px; line-height:14px; position:relative; top:5px
   Hotel even adds color:#505050!important — beating our (0,3,0) selectors.

   Strategy: render the icon glyph on <i>::before instead of <i> itself.
   • Set font-size:0 on <i> → its text box vanishes, position/size reset
   • Set font-size & color on <i>::before → module CSS never touches ::before
     so our (0,3,0) selector + !important wins unconditionally.
   ─────────────────────────────────────────────────────────────────── */

/* Container */
.list-attributes {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
}

/* Each chip */
.list-attributes .item {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  max-width: none !important;
  width: auto !important;
  gap: 6px !important;
  padding: 5px 12px 5px 8px !important;
  margin-bottom: 0 !important;
  background: #ffffff !important;
  border: 1px solid rgba(11,28,62,0.14) !important;
  border-radius: 6px !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: #1e2d4d !important;
  white-space: nowrap !important;
  transform: none !important;
  overflow: visible !important;
  box-shadow: 0 1px 3px rgba(11,28,62,0.07) !important;
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s !important;
}
.list-attributes .item:hover {
  border-color: var(--tl-gold) !important;
  background: #fffbf2 !important;
  box-shadow: 0 2px 6px rgba(201,168,76,0.2) !important;
}

/* <i> element — collapse as a text container; keep as a sized flex item */
.list-attributes .item i {
  font-size: 0 !important;       /* kill the 30px/14px from module CSS */
  line-height: 0 !important;
  position: static !important;
  top: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  color: var(--tl-gold) !important; /* inherited by ::before */
}

/* Glyph rendered here — module CSS never sets ::before rules, so our
   (0,3,0) selector wins cleanly without any specificity battle */
.list-attributes .item i::before {
  display: block !important;
  font-size: 14px !important;
  line-height: 1 !important;
  color: var(--tl-gold) !important;
  width: 14px !important;
  text-align: center !important;
}

.list-attributes .item img {
  width: 16px !important;
  height: 16px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

/* Section header for attribute groups */
.g-attributes h3 {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: var(--tl-navy) !important;
}

/* ── B. GUEST PICKER — Global overflow fix (all pages, not just masthead) ── */
/* The search form exists on listing pages too (not just homepage masthead).
   Fix overflow on every possible ancestor chain. */
.bravo_form_search,
.bravo_form,
.form-search-all-service,
.gotrip_form_search {
  overflow: visible !important;
}

.bravo_form_search .field-items,
.bravo_form_search .row,
.bravo_form_search [class*="col-"],
.gotrip_form_search .field-items,
.gotrip_form_search .row,
.gotrip_form_search [class*="col-"] {
  overflow: visible !important;
}

/* The individual search-menu item wrappers */
.searchMenu-loc.js-form-dd,
.searchMenu-guests.js-form-dd,
.js-form-dd.item,
.js-form-dd {
  overflow: visible !important;
  position: relative !important;
}

/* The dropdown panels must sit above the search form */
.searchMenu-loc__field,
.searchMenu-guests__field,
.searchMenu-dates__field,
[data-x-dd] {
  z-index: 9997 !important;
}

/* The -is-active class is what the GoTrip JS adds to show the panel */
[data-x-dd].-is-active {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ── C. ENSURE .item INSIDE SEARCH FORMS STAYS FUNCTIONAL ── */
/* Our Section 26-C reset [class*="-item"] broadly. Restore .item inside
   search field wrappers so the dropdown trigger still works. */
.mainSearch .item,
.field-items .item,
.bravo_form_search .item {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: none !important;
  /* do NOT touch pointer-events — the click handler needs it */
}

/* ── D. TOPBAR REMOVED — header-margin rule is at top of Section 3 ── */

/* =============================================================
   30. SEARCH CARD REDESIGN — Bug fix + Card layout + Calendar
   ============================================================= */

/* ── A. CRITICAL FIX: TABS__PANE VISIBILITY ──────────────────
   Section 28 forced opacity:1 on ALL .tabs__pane inside .masthead,
   causing every category's search form to show simultaneously.
   GoTrip tab switching toggles class "is-tab-el-active".
   Non-active panes must be fully hidden; only the active one shows.
   ─────────────────────────────────────────────────────────── */

/* Container must be relative so absolute panes stay anchored */
.masthead .tabs__content {
  position: relative !important;
}

/* Hide inactive panes — taken out of flow, invisible, no interaction */
.masthead .tabs__pane:not(.is-tab-el-active) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Active pane — fully visible, in normal flow.
   NOTE: no z-index here — adding z-index + position would create a new
   stacking context that traps absolutely-positioned dropdowns inside it. */
.masthead .tabs__pane.is-tab-el-active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: relative !important;
  height: auto !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── B. SEARCH CARD — Outer container ────────────────────────── */

.tl-search-card {
  margin-top: 32px !important;
  background: transparent !important;
  border: none !important;
}

/* ── C. TABS HEADER — Semi-transparent navy strip ─────────────── */

.tl-search-card .tl-search-card__tabs {
  background: rgba(11, 28, 62, 0.90) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 12px 12px 0 0 !important;
  padding: 0 16px !important;
  gap: 0 !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  overflow: visible !important;
}

/* Override Section 28 pill styles — revert to underline style for the card */
.tl-search-card .tl-search-card__tabs .tabs__button {
  background: transparent !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  padding: 12px 18px 9px !important;
  margin: 0 !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition: color 0.2s ease, border-color 0.2s ease !important;
}

.tl-search-card .tl-search-card__tabs .tabs__button.is-tab-el-active,
.tl-search-card .tl-search-card__tabs .tabs__button:hover {
  color: #ffffff !important;
  border-bottom-color: var(--tl-gold) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ── D. CARD BODY — White panel housing the search form ──────── */

.tl-search-card .tl-search-card__body {
  background: #ffffff !important;
  border-radius: 0 0 12px 12px !important;
  padding: 20px 24px !important;
  box-shadow: 0 20px 60px rgba(11, 28, 62, 0.30) !important;
  overflow: visible !important;
  position: relative !important;
  margin-top: 0 !important;
}

/* Form inside the white card — transparent background, no extra shadow */
.tl-search-card .mainSearch {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  overflow: visible !important;
}

/* Dividers between search fields */
.tl-search-card .mainSearch .item,
.tl-search-card .field-items .item {
  border-right: 1px solid #e8edf3 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

.tl-search-card .mainSearch .item:last-child,
.tl-search-card .field-items .item:last-child {
  border-right: none !important;
}

/* Field labels and text in card — dark on white */
.tl-search-card .text-dark-1,
.tl-search-card .mainSearch .text-dark-1 {
  color: var(--tl-navy) !important;
}

.tl-search-card .text-light-1,
.tl-search-card .mainSearch .text-light-1 {
  color: #6b7a99 !important;
}

/* Search/submit button in card — navy pill */
.tl-search-card .mainSearch .button-item .button,
.tl-search-card .button-item .button {
  background: var(--tl-navy) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 14px rgba(11, 28, 62, 0.25) !important;
  transition: background 0.2s ease, box-shadow 0.2s ease !important;
}

.tl-search-card .mainSearch .button-item .button:hover,
.tl-search-card .button-item .button:hover {
  background: var(--tl-gold) !important;
  color: var(--tl-navy) !important;
  box-shadow: 0 4px 14px rgba(201, 168, 76, 0.35) !important;
}

/* ── E. MASTHEAD COLUMN — Centred, max readable width ───────── */

.tl-masthead-col {
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── F. CALENDAR WHITESPACE FIX ─────────────────────────────── */
/* After cell-shrink in Section 28, the wrapping .drp-calendar
   retains its original min-width (~270px) but cells are now 28px.
   This leaves blank space to the right of each month column.
   Collapse the calendar wrappers to fit the actual table content. */

.daterangepicker {
  min-width: unset !important;
}

.daterangepicker .drp-calendar {
  min-width: unset !important;
  width: auto !important;
  max-width: none !important;
  padding: 4px !important;
}

.daterangepicker .calendar-table {
  min-width: unset !important;
  width: auto !important;
  padding: 4px !important;
}

.daterangepicker .calendar-table table {
  min-width: unset !important;
  width: auto !important;
  table-layout: fixed !important;
}

/* ── G. RESPONSIVE — Compact on tablet/mobile ───────────────── */

@media (max-width: 1199px) {
  .tl-search-card .tl-search-card__body {
    padding: 16px 18px !important;
  }
}

@media (max-width: 767px) {
  .tl-search-card {
    margin-top: 20px !important;
  }
  .tl-search-card .tl-search-card__tabs {
    padding: 0 10px !important;
    border-radius: 10px 10px 0 0 !important;
  }
  .tl-search-card .tl-search-card__tabs .tabs__button {
    padding: 10px 12px 8px !important;
    font-size: 0.8rem !important;
  }
  .tl-search-card .tl-search-card__body {
    padding: 14px !important;
    border-radius: 0 0 10px 10px !important;
  }
}

/* =============================================================
   31. GUEST PICKER + CALENDAR HEADER — Overflow & z-index fixes
   ============================================================= */

/* ── A. GUEST PICKER — Full ancestor overflow chain ──────────
   The popup (.searchMenu-guests__field) is position:absolute and
   needs every ancestor up to the viewport to have overflow:visible.
   Key missing links: .tl-search-card wrapper, Bootstrap columns
   inside the form, and the form's own rows.
   ─────────────────────────────────────────────────────────── */

/* The card tab/body containers */
.tl-search-card,
.tl-search-card .tabs__content,
.tl-search-card .tl-search-card__body,
.tl-search-card .tl-search-card__tabs {
  overflow: visible !important;
}

/* Bootstrap grid inside every search form */
.bravo_form_search .field-items,
.bravo_form_search .field-items .row,
.bravo_form_search .field-items [class*="col"],
.gotrip_form_search .field-items,
.gotrip_form_search .field-items .row,
.gotrip_form_search .field-items [class*="col"] {
  overflow: visible !important;
}

/* The guest/location item wrappers */
.searchMenu-guests,
.searchMenu-loc,
.searchMenu-dates,
.form-select-guests,
.js-form-dd {
  overflow: visible !important;
  position: relative !important;
}

/* Boost z-index on the popup panels so they always sit above the card */
.searchMenu-guests__field,
.searchMenu-loc__field,
.searchMenu-dates__field {
  z-index: 9990 !important;
}

/* ── B. CALENDAR HEADER — Month/year cell min-width ──────────
   The th.month cell spans 5 columns (colspan=5). With compact
   28px cells, 5×28 = 140px. "September 2026" (~11 chars) can be
   tight. Remove any width constraint and let it size to content.
   ─────────────────────────────────────────────────────────── */

.daterangepicker .calendar-table thead tr:first-child th.month {
  width: auto !important;
  min-width: 160px !important;
  white-space: nowrap !important;
  text-align: center !important;
  overflow: visible !important;
}

.daterangepicker .calendar-table thead tr:first-child th.prev,
.daterangepicker .calendar-table thead tr:first-child th.next {
  width: 32px !important;
  min-width: 32px !important;
  text-align: center !important;
}

/* =============================================================
   32. GUEST PICKER — Compact popup size
   ============================================================= */

/* Shrink the popup panel itself */
.searchMenu-guests__field.select-guests-dropdown {
  width: 280px !important;
  margin-top: 8px !important;
}

/* Inner padding — replace GoTrip's px-30 py-30 */
.searchMenu-guests__field .bg-white {
  padding: 16px 18px !important;
}

/* Rows inside: tighten vertical gap */
.searchMenu-guests__field .row {
  row-gap: 6px !important;
}

/* Dividers: shrink margins */
.searchMenu-guests__field .border-top-light {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

/* Counter buttons: smaller */
.searchMenu-guests__field .btn-minus,
.searchMenu-guests__field .btn-add {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  font-size: 0.7rem !important;
}

/* Counter input display */
.searchMenu-guests__field .count-display {
  width: 32px !important;
  height: 30px !important;
  margin-left: 8px !important;
  margin-right: 8px !important;
  font-size: 0.875rem !important;
}

/* Label text */
.searchMenu-guests__field .text-15 {
  font-size: 0.875rem !important;
}

/* =============================================================
   33. PREMIUM SEARCH TABS REDESIGN — Icon pills + elevated card
   ============================================================= */

/* ── OVERALL CARD: flex column, pill row above white card ─── */
.tl-search-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  margin-top: 40px !important;
  background: transparent !important;
  border: none !important;
}

/* ── PILL TABS ROW ──────────────────────────────────────────
   Remove the old navy header. The tab row is now a centred
   row of glass pill chips floating over the hero image.
   ─────────────────────────────────────────────────────────── */
.tl-search-card__tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: center !important;
  align-items: center !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* ── INDIVIDUAL PILL CHIP ───────────────────────────────────── */
.tl-tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 9px 20px !important;
  border-radius: 50px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.38) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background 0.2s ease, border-color 0.2s ease,
              color 0.2s ease, box-shadow 0.2s ease !important;
  /* Reset any inherited GoTrip / Section 28 / Section 30 styles */
  border-bottom-width: 1.5px !important;
  border-bottom-style: solid !important;
  border-bottom-color: rgba(255, 255, 255, 0.38) !important;
  border-radius: 50px !important;
  text-transform: none !important;
  text-shadow: none !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18) !important;
  padding-bottom: 9px !important;
  margin: 0 !important;
}

.tl-tab-btn:hover {
  background: rgba(255, 255, 255, 0.26) !important;
  border-color: rgba(255, 255, 255, 0.60) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22) !important;
}

/* Active pill: gold fill */
.tl-tab-btn.is-tab-el-active {
  background: var(--tl-gold) !important;
  border-color: var(--tl-gold) !important;
  border-bottom-color: var(--tl-gold) !important;
  color: var(--tl-navy) !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 20px rgba(201, 168, 76, 0.50), 0 1px 0 rgba(255,255,255,0.18) inset !important;
}

/* ── ICON & LABEL inside pill ───────────────────────────── */
.tl-tab-icon {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 0.875rem !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.tl-tab-label {
  line-height: 1 !important;
}

/* ── SEARCH FORM CARD — elevated white panel ────────────────
   All four corners rounded. Gold accent line at top.
   ─────────────────────────────────────────────────────────── */
.tl-search-card .tl-search-card__body {
  background: #ffffff !important;
  border-radius: 16px !important;
  border-top: 3px solid var(--tl-gold) !important;
  padding: 22px 28px !important;
  box-shadow:
    0 8px 40px rgba(11, 28, 62, 0.22),
    0 2px 8px rgba(11, 28, 62, 0.10),
    0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  overflow: visible !important;
  position: relative !important;
  margin-top: 0 !important;
}

/* Override old Section 30 body border-radius (was 0 0 12px 12px) */
.tl-search-card .tabs__content {
  margin-top: 0 !important;
  overflow: visible !important;
}

/* ── SEARCH FORM inside card — inherit card styles ──────── */
.tl-search-card .mainSearch {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* Field dividers inside white card */
.tl-search-card .mainSearch .item,
.tl-search-card .field-items .item {
  border-right: 1px solid #e5eaf2 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

.tl-search-card .mainSearch .item:last-child,
.tl-search-card .field-items .item:last-child {
  border-right: none !important;
}

/* Field labels — navy on white */
.tl-search-card .mainSearch .text-dark-1,
.tl-search-card .text-dark-1 {
  color: var(--tl-navy) !important;
}

.tl-search-card .mainSearch .text-light-1,
.tl-search-card .text-light-1 {
  color: #7a879e !important;
}

/* Submit button — navy, hover gold */
.tl-search-card .mainSearch .button-item .button,
.tl-search-card .button-item .button {
  background: var(--tl-navy) !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(11, 28, 62, 0.28) !important;
  transition: background 0.2s ease, box-shadow 0.2s ease !important;
}

.tl-search-card .mainSearch .button-item .button:hover,
.tl-search-card .button-item .button:hover {
  background: var(--tl-gold) !important;
  color: var(--tl-navy) !important;
  box-shadow: 0 4px 16px rgba(201, 168, 76, 0.40) !important;
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 991px) {
  .tl-search-card {
    gap: 10px !important;
    margin-top: 28px !important;
  }

  .tl-tab-btn {
    padding: 8px 16px !important;
    font-size: 0.82rem !important;
    gap: 6px !important;
  }

  .tl-search-card .tl-search-card__body {
    padding: 18px 20px !important;
    border-radius: 14px !important;
  }
}

@media (max-width: 575px) {
  .tl-search-card__tabs {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding-bottom: 6px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .tl-search-card__tabs::-webkit-scrollbar {
    display: none !important;
  }

  .tl-tab-btn {
    padding: 7px 14px !important;
    font-size: 0.8rem !important;
    flex-shrink: 0 !important;
  }

  .tl-search-card .tl-search-card__body {
    padding: 16px !important;
    border-radius: 12px !important;
  }
}

/* =============================================================
   34. LOCATION DROPDOWN — Premium UI
   ============================================================= */

/* ── TRIGGER: label + pin icon + text input ─────────────────── */

.tl-loc-trigger {
  cursor: pointer;
}

.tl-field-label {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #8899bb !important;
  margin-bottom: 4px !important;
  line-height: 1 !important;
}

/* Inside the search card white body, labels use navy */
.tl-search-card__body .tl-field-label {
  color: #6b7a99 !important;
}

.tl-loc-input-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.tl-loc-pin-icon {
  color: var(--tl-gold) !important;
  font-size: 0.875rem !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

.tl-loc-input {
  flex: 1 !important;
  min-width: 0 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  color: var(--tl-navy) !important;
  cursor: pointer !important;
}

.tl-loc-input::placeholder {
  color: #a0aec0 !important;
  font-weight: 400 !important;
}

/* ── DROPDOWN PANEL ─────────────────────────────────────────── */

.tl-loc-dropdown {
  width: 360px !important;
  margin-top: 10px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid rgba(11, 28, 62, 0.10) !important;
  box-shadow:
    0 12px 40px rgba(11, 28, 62, 0.16),
    0 2px 8px rgba(11, 28, 62, 0.08) !important;
  /* Remove GoTrip's shadow-2 */
  background: #ffffff !important;
}

.tl-loc-panel {
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  padding: 0 !important;
}

/* Header row */
.tl-loc-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 16px 10px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #8899bb !important;
  border-bottom: 1px solid rgba(11, 28, 62, 0.07) !important;
  background: #fafbfc !important;
}

.tl-loc-header-icon {
  color: var(--tl-gold) !important;
  font-size: 0.875rem !important;
}

/* Scrollable results list */
.tl-loc-results {
  max-height: 272px !important;
  overflow-y: auto !important;
  padding: 6px 0 !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(11, 28, 62, 0.15) transparent !important;
}

.tl-loc-results::-webkit-scrollbar {
  width: 4px !important;
}

.tl-loc-results::-webkit-scrollbar-track {
  background: transparent !important;
}

.tl-loc-results::-webkit-scrollbar-thumb {
  background: rgba(11, 28, 62, 0.18) !important;
  border-radius: 4px !important;
}

/* Individual option row */
.tl-loc-option {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 16px !important;
  margin: 1px 8px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

.tl-loc-option:hover {
  background: rgba(11, 28, 62, 0.05) !important;
}

/* Active/selected option */
.tl-loc-option.active,
.tl-loc-option.is-active {
  background: rgba(201, 168, 76, 0.12) !important;
}

/* Pin icon in each option */
.tl-loc-option-icon {
  color: var(--tl-gold) !important;
  font-size: 0.8125rem !important;
  flex-shrink: 0 !important;
  width: 16px !important;
  text-align: center !important;
  opacity: 0.85 !important;
}

/* Location name */
.tl-loc-option-name {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--tl-navy) !important;
  line-height: 1.35 !important;
  /* Hierarchy prefix dashes are part of the text — slightly dim them */
}

/* Dim the hierarchy prefix dashes (they appear as leading "- " text) */
.tl-loc-option-name {
  font-variant-numeric: tabular-nums !important;
}

/* Responsive: narrower on small screens */
@media (max-width: 575px) {
  .tl-loc-dropdown {
    width: auto !important;
    left: -16px !important;
    right: -16px !important;
  }
}

/* =============================================================
   35. LOCATION DROPDOWN — Autocomplete panel + polish
   ============================================================= */

/* ── BRAVO-AUTOCOMPLETE (AJAX smart-search mode) ────────────
   GoTrip appends this panel to .smart-search when autocomplete
   is active. Style it to match the main dropdown design.
   ─────────────────────────────────────────────────────────── */

.bravo-autocomplete {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  min-width: 320px !important;
  max-width: 400px !important;
  background: #ffffff !important;
  border-radius: 14px !important;
  border: 1px solid rgba(11, 28, 62, 0.10) !important;
  box-shadow:
    0 12px 40px rgba(11, 28, 62, 0.16),
    0 2px 8px rgba(11, 28, 62, 0.08) !important;
  z-index: 9989 !important;
  overflow: hidden !important;
  padding: 8px 0 !important;
  display: none;
}

.bravo-autocomplete.show {
  display: block !important;
}

/* Autocomplete result items (GoTrip renders -link items here) */
.bravo-autocomplete .list-item .item,
.bravo-autocomplete .list-item .-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 16px !important;
  margin: 1px 8px !important;
  border-radius: 8px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--tl-navy) !important;
  cursor: pointer !important;
  width: auto !important;
  transition: background 0.15s ease !important;
}

.bravo-autocomplete .list-item .item:hover,
.bravo-autocomplete .list-item .-link:hover {
  background: rgba(11, 28, 62, 0.05) !important;
}

/* GoTrip location icon inside autocomplete items */
.bravo-autocomplete .icon-location-2 {
  color: var(--tl-gold) !important;
  font-size: 0.9rem !important;
  flex-shrink: 0 !important;
  padding-top: 0 !important;
}

/* Loading / message text */
.bravo-autocomplete .message {
  padding: 12px 16px !important;
  font-size: 0.875rem !important;
  color: #8899bb !important;
}

.bravo-autocomplete.on-message .list-item {
  display: none !important;
}

/* ── CLEAR BUTTON — reposition on white card ─────────────── */

.tl-search-card__body .searchMenu-loc .clear-loc {
  right: 0 !important;
  bottom: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #8899bb !important;
  cursor: pointer !important;
  font-size: 0.7rem !important;
  padding: 2px 4px !important;
  line-height: 1 !important;
  z-index: 2 !important;
}

.tl-search-card__body .searchMenu-loc .clear-loc:hover {
  color: var(--tl-navy) !important;
}

/* ── ENSURE TRIGGER WRAPPER HAS RELATIVE POSITION ──────── */
.tl-loc-input-wrap {
  position: relative !important;
}

/* ── OVERFLOW FIX for autocomplete within card ───────────── */
.tl-search-card__body .searchMenu-loc,
.tl-search-card__body .tl-loc-trigger,
.tl-search-card__body .tl-loc-input-wrap {
  overflow: visible !important;
}

/* =============================================================
   36. DATE PICKER CANCELLED DATES + TOUR SPACING FIXES
   ============================================================= */

/* ── A. DATE PICKER — Clean grey-out for unavailable/cancelled dates ──
   Default library CSS uses text-decoration:line-through which looks
   messy. Replace with a simple muted grey, no strikethrough.
   ─────────────────────────────────────────────────────────── */

.daterangepicker td.disabled,
.daterangepicker option.disabled {
  color: #c5cdd8 !important;
  text-decoration: none !important;
  background-color: transparent !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
  pointer-events: none !important;
}

/* Off-month days (outside the displayed month) — even lighter */
.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
  color: #dde3eb !important;
  background-color: transparent !important;
  border-color: transparent !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

/* ── B. TOUR INCLUDES / EXCLUDES — spacing between items ────── */

.tour-include-exclude-wrap .col-md-6 > div {
  margin-bottom: 10px !important;
}

.tour-include-exclude-wrap .col-md-6 > div:last-child {
  margin-bottom: 0 !important;
}

/* Extra breathing room between the included and excluded columns */
.tour-include-exclude-wrap .row {
  row-gap: 16px !important;
}

/* ── C. TOUR SNAPSHOT — missing GoTrip utility classes ─────────
   y-gap-16 and pt-16 are used in the snapshot row but these
   GoTrip utility classes were never defined in the compiled CSS.
   ─────────────────────────────────────────────────────────── */

/* Define the missing y-gap-16 utility (GoTrip negative-margin pattern) */
.y-gap-16 {
  margin-top: -8px !important;
  margin-bottom: -8px !important;
}

.y-gap-16 > * {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Define the missing pt-16 utility */
.pt-16 {
  padding-top: 16px !important;
}

/* Snapshot items: ensure consistent gap between rows on all screen sizes */
.row.y-gap-16 {
  row-gap: 16px !important;
}

/* =============================================================
   37. SEARCH POPUP VISIBILITY — Desktop stacking context fix
   ============================================================= */

/* ── ROOT CAUSE ───────────────────────────────────────────────
   .mainSearch has position:relative + z-index:20, making it a
   stacking context. Popup panels inside (z-index:5) are painted
   at document z-order: 20. On desktop, columns and other
   positioned elements can paint on top of the popup.

   FIX:
   1. Raise .mainSearch to a very high z-index so its stacking
      context sits above all page content.
   2. Give popup panels a very high z-index within that context.
   3. Ensure overflow:visible on every ancestor chain — both on
      the homepage masthead AND on listing/detail page sidebars.
   ─────────────────────────────────────────────────────────── */

/* ── 1. LIFT mainSearch STACKING CONTEXT ─────────────────── */

.mainSearch {
  z-index: 9960 !important;
  overflow: visible !important;
}

/* Restore the form inside the search card (homepage white card) */
.tl-search-card .mainSearch {
  z-index: 9960 !important;
}

/* ── 2. POPUP PANELS — Very high z-index ─────────────────── */

.searchMenu-guests__field,
.searchMenu-loc__field,
.searchMenu-loc__field.tl-loc-dropdown,
.searchMenu-dates__field {
  z-index: 9980 !important;
  position: absolute !important;
}

/* ── 3. HOMEPAGE MASTHEAD — full ancestor overflow chain ─── */

.form-search-all-service,
.masthead,
.masthead .container,
.masthead .row,
.masthead [class*="col"],
.tl-search-card,
.tl-search-card__tabs,
.tl-search-card__body,
.tabs__pane.is-tab-el-active,
.tabs__content {
  overflow: visible !important;
}

/* ── 4. LISTING PAGE SIDEBAR — overflow chain ────────────── */

.bravo_filter,
.bravo_filter.sidebar,
.bravo_list_search_form,
.bravo_form_search_wrap,
.bravo-form-search,
.g-filter-item,
.sidebar__item {
  overflow: visible !important;
}

/* The bg-light-2 rounded inner wrapper on listing page forms */
.bravo-form-search .rounded-4,
.bravo-form-search [class*="rounded"],
.sidebar__item .rounded-4,
.sidebar__item [class*="rounded"] {
  overflow: visible !important;
}

/* ── 5. DETAIL PAGE BOOKING SIDEBAR — overflow chain ──────── */

.bravo_single_book,
.bravo_single_book_wrap,
.bravo_booking_form,
.js-sidebar-anchor {
  overflow: visible !important;
}

/* ── 6. GENERAL — every search form ancestor ──────────────── */

.gotrip_form_search,
.bravo_form_search,
.bravo_form,
.field-items,
.field-items .row,
.field-items [class*="col"],
.searchMenu-guests,
.searchMenu-loc,
.searchMenu-dates,
.form-select-guests,
.js-form-dd {
  overflow: visible !important;
}

/* ── 7. CAR / SPECIFIC CATEGORY COUNTERS ─────────────────── */
/* Some category forms use .js-form-counters for picking numbers */
.js-form-counters,
.js-form-counters__field,
[data-x-dd] {
  overflow: visible !important;
}

/* Any active dropdown panel must escape all containers */
[data-x-dd].-is-active {
  position: absolute !important;
  z-index: 9980 !important;
  overflow: visible !important;
}

/* =============================================================
   38. LOCATION PAGE GRID MARGINS + CATEGORY BOX IMPROVEMENTS
   =============================================================
   Fixes:
   A) Grid content horizontal spacing — explicit gutter on all
      location service rows and listing-page search result rows.
   B) Category section header — visual distinction per service.
   C) Category card redesign — shadow, hover, badge, polish.
   D) Global listing result grid gutter consistency.
   ============================================================= */

/* ── A. GRID ROW GUTTER — Ensure explicit horizontal spacing ──
   Bootstrap 5 default is 30px (15px per side) which can look
   tight on 4-column grids. Bump to 24px uniform gutter (12px
   per side) for cards on location page.
   ─────────────────────────────────────────────────────────── */

.bravo-location-service-list .row {
  --bs-gutter-x: 24px !important;
  margin-right: calc(var(--bs-gutter-x) * -0.5) !important;
  margin-left: calc(var(--bs-gutter-x) * -0.5) !important;
}

.bravo-location-service-list .row > [class*="col"] {
  padding-right: calc(var(--bs-gutter-x) * 0.5) !important;
  padding-left: calc(var(--bs-gutter-x) * 0.5) !important;
}

/* Same fix for all search-result/listing grids site-wide */
.bravo_search .ajax-search-result .row,
.bravo_list_search_result .row {
  --bs-gutter-x: 24px !important;
  margin-right: calc(var(--bs-gutter-x) * -0.5) !important;
  margin-left: calc(var(--bs-gutter-x) * -0.5) !important;
}

.bravo_search .ajax-search-result .row > [class*="col"],
.bravo_list_search_result .row > [class*="col"] {
  padding-right: calc(var(--bs-gutter-x) * 0.5) !important;
  padding-left: calc(var(--bs-gutter-x) * 0.5) !important;
}

/* ── B. LOCATION CATEGORY SECTION — visual design ──────────── */

/* Each category service block gets a clean top border separator */
.bravo-location-service-list {
  border-top: 1px solid rgba(11, 28, 62, 0.08) !important;
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

.bravo-location-service-list:first-child {
  border-top: none !important;
}

/* Section title — elevate with Playfair and gold accent */
.bravo-location-service-list .sectionTitle.-md .sectionTitle__title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 700 !important;
  color: var(--tl-navy) !important;
  position: relative !important;
  padding-bottom: 12px !important;
  display: inline-block !important;
}

.bravo-location-service-list .sectionTitle.-md .sectionTitle__title::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 48px !important;
  height: 3px !important;
  background: var(--tl-gold) !important;
  border-radius: 2px !important;
}

/* "View More" button — enterprise style */
.bravo-location-service-list .button.-md.-blue-1 {
  background: rgba(11, 28, 62, 0.06) !important;
  color: var(--tl-navy) !important;
  border: 1.5px solid rgba(11, 28, 62, 0.15) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.02em !important;
  padding: 8px 20px !important;
  transition: background 0.2s, color 0.2s, border-color 0.2s !important;
}

.bravo-location-service-list .button.-md.-blue-1:hover {
  background: var(--tl-navy) !important;
  color: #ffffff !important;
  border-color: var(--tl-navy) !important;
}

.bravo-location-service-list .button.-md.-blue-1 .icon-arrow-top-right {
  font-size: 0.75rem !important;
}

/* ── C. CATEGORY CARD REDESIGN ──────────────────────────────
   The loop-grid cards (hotelsCard -type-1, tourCard, etc.)
   inside location service grids get a full container upgrade:
   background, shadow, radius, hover lift effect.
   ─────────────────────────────────────────────────────────── */

/* Card container — add background, shadow, radius.
   Targets direct child of loop-type-* col (works for all service types)
   and the .item-loop wrapper used by Hotel/Boat/Event/Space. */
.bravo-location-service-list [class*="loop-type-"] > div,
.bravo-location-service-list .item-loop {
  background: #ffffff !important;
  border-radius: 14px !important;
  border: 1px solid rgba(11, 28, 62, 0.07) !important;
  box-shadow:
    0 2px 8px rgba(11, 28, 62, 0.06),
    0 1px 3px rgba(11, 28, 62, 0.04) !important;
  overflow: hidden !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
  height: 100% !important;
}

.bravo-location-service-list [class*="loop-type-"] > div:hover,
.bravo-location-service-list .item-loop:hover {
  box-shadow:
    0 12px 36px rgba(11, 28, 62, 0.14),
    0 4px 12px rgba(11, 28, 62, 0.08) !important;
  transform: translateY(-4px) !important;
}

/* Image fills the card top — remove default border-radius from image
   since the card itself has radius+overflow:hidden */
.bravo-location-service-list [class*="loop-type-"] > div .cardImage,
.bravo-location-service-list [class*="loop-type-"] > div [class*="Card__image"],
.bravo-location-service-list .item-loop .cardImage,
.bravo-location-service-list .item-loop [class*="Card__image"] {
  border-radius: 0 !important;
}

.bravo-location-service-list [class*="loop-type-"] > div .cardImage img,
.bravo-location-service-list [class*="loop-type-"] > div [class*="Card__image"] img,
.bravo-location-service-list .item-loop .cardImage img,
.bravo-location-service-list .item-loop [class*="Card__image"] img {
  border-radius: 0 !important;
}

/* Card body — add horizontal + bottom padding globally for all GoTrip card types.
   citiesCard__content is an absolute overlay with its own px-30/py-30, exclude it. */
[class*="Card__content"]:not(.citiesCard__content) {
  padding: 14px 16px 16px !important;
  margin-top: 0 !important;
}

/* Card title — navy, Playfair */
.bravo-location-service-list [class*="Card__title"] {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1rem !important;
  line-height: 1.3 !important;
  color: var(--tl-navy) !important;
}

.bravo-location-service-list [class*="Card__title"] a {
  color: var(--tl-navy) !important;
}

.bravo-location-service-list [class*="Card__title"] a:hover {
  color: var(--tl-gold) !important;
}

/* Price — gold accent */
.bravo-location-service-list .text-blue-1 {
  color: var(--tl-gold) !important;
  font-weight: 700 !important;
}

/* Wishlist button stays in top-right of image */
.bravo-location-service-list .cardImage__wishlist {
  display: flex !important;
}

/* Column wrapper — ensure equal-height cards via flex column */
.bravo-location-service-list [class*="loop-type-"] {
  display: flex !important;
  flex-direction: column !important;
}

.bravo-location-service-list [class*="loop-type-"] > div {
  flex: 1 !important;
}

/* ── D. QUICK VIEW BUTTON — polish on location cards ─────── */
.bravo-location-service-list .tl-qv-trigger {
  position: absolute !important;
  bottom: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
}

.bravo-location-service-list [class*="loop-type-"] > div:hover .tl-qv-trigger,
.bravo-location-service-list .item-loop:hover .tl-qv-trigger {
  opacity: 1 !important;
}

/* ── E. RESPONSIVE — mobile grid spacing ─────────────────── */
@media (max-width: 767px) {
  .bravo-location-service-list {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  .bravo-location-service-list .row {
    --bs-gutter-x: 16px !important;
  }

  .bravo_search .ajax-search-result .row {
    --bs-gutter-x: 16px !important;
  }
}

/* ── F. BRAVO_DETAIL_LOCATION — outer page breathing room ── */
.bravo_detail_location > section > .container {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

@media (max-width: 767px) {
  .bravo_detail_location > section > .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* =============================================================
   39. HOMEPAGE TABS — Premium Segmented Bar Redesign
   =============================================================
   Replaces the floating glass pill chips (Section 33) with a
   single unified frosted-glass bar. Each tab stacks the icon
   above its label. Active tab = white elevated card with gold
   icon + navy text. Inactive = translucent, white text.
   Scrollable on mobile. Works with GoTrip js-tabs JS.
   ============================================================= */

/* ── WRAPPER — flex column: bar on top, form card below ─────── */
.tl-search-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 32px !important;
  overflow: visible !important;
}

/* ── UNIFIED BAR CONTAINER ──────────────────────────────────── */
.tl-search-card__tabs {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 6px !important;
  background: rgba(10, 22, 50, 0.62) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 18px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.tl-search-card__tabs::-webkit-scrollbar {
  display: none !important;
}

/* ── INDIVIDUAL TAB BUTTON ──────────────────────────────────── */
.tl-tab-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  flex: 1 1 0 !important;
  min-width: 72px !important;
  max-width: 120px !important;
  padding: 12px 14px !important;
  border-radius: 13px !important;
  border: none !important;
  border-bottom-width: 0 !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background 0.18s ease, color 0.18s ease,
              box-shadow 0.18s ease, transform 0.18s ease !important;
  text-shadow: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* ── ICON — large, centered ─────────────────────────────────── */
.tl-tab-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  color: inherit !important;
  transition: color 0.18s ease !important;
}

/* ── LABEL — small caps below icon ─────────────────────────── */
.tl-tab-label {
  display: block !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  line-height: 1 !important;
  color: inherit !important;
}

/* ── HOVER (inactive) ───────────────────────────────────────── */
.tl-tab-btn:not(.is-tab-el-active):hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ── ACTIVE TAB — white card, gold icon, navy text ───────────── */
.tl-tab-btn.is-tab-el-active {
  background: #ffffff !important;
  color: var(--tl-navy) !important;
  border-color: transparent !important;
  border-bottom-color: transparent !important;
  font-weight: 700 !important;
  box-shadow:
    0 4px 18px rgba(11, 28, 62, 0.22),
    0 1px 4px rgba(11, 28, 62, 0.12) !important;
  transform: none !important;
}

.tl-tab-btn.is-tab-el-active .tl-tab-icon {
  color: var(--tl-gold) !important;
}

.tl-tab-btn.is-tab-el-active .tl-tab-label {
  color: var(--tl-navy) !important;
}

/* ── FORM CARD — unchanged but margin removed ─────────────────
   (The gap is handled by .tl-search-card gap:12px above)
   ─────────────────────────────────────────────────────────── */
.tl-search-card .tl-search-card__body {
  border-radius: 16px !important;
  border-top: 3px solid var(--tl-gold) !important;
  margin-top: 0 !important;
}

/* ── RESPONSIVE: tablet ─────────────────────────────────────── */
@media (max-width: 991px) {
  .tl-search-card {
    gap: 10px !important;
    margin-top: 24px !important;
  }

  .tl-search-card__tabs {
    border-radius: 15px !important;
    padding: 5px !important;
    gap: 3px !important;
  }

  .tl-tab-btn {
    min-width: 62px !important;
    padding: 10px 12px !important;
    gap: 4px !important;
  }

  .tl-tab-icon {
    font-size: 1rem !important;
  }

  .tl-tab-label {
    font-size: 0.62rem !important;
  }
}

/* ── RESPONSIVE: mobile — horizontal scroll ─────────────────── */
@media (max-width: 575px) {
  .tl-search-card {
    margin-top: 20px !important;
  }

  .tl-search-card__tabs {
    justify-content: flex-start !important;
    border-radius: 14px !important;
    padding: 5px !important;
  }

  .tl-tab-btn {
    flex: 0 0 auto !important;
    min-width: 68px !important;
    padding: 9px 12px !important;
  }
}

/* =============================================================
   40. TAB BAR — HIGH SPECIFICITY OVERRIDE
   =============================================================
   Section 30 set .tl-search-card .tl-search-card__tabs
   .tabs__button.is-tab-el-active at specificity (0,4,0).
   Sections 33 + 39 used .tl-tab-btn.is-tab-el-active at
   only (0,2,0). When both use !important, HIGHER specificity
   wins regardless of file order.

   This section uses 5-class selectors (0,5,0) to decisively
   beat every prior !important rule.
   ============================================================= */

/* ── BAR CONTAINER (5 classes) ─────────────────────────────── */
.form-search-all-service.masthead .tl-search-card .tl-search-card__tabs {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 6px !important;
  background: rgba(10, 22, 50, 0.62) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 18px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scrollbar-width: none !important;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* ── ALL BUTTONS (baseline) ─────────────────────────────────── */
.form-search-all-service.masthead .tl-search-card .tl-search-card__tabs .tl-tab-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  flex: 1 1 0 !important;
  min-width: 72px !important;
  max-width: 120px !important;
  padding: 12px 14px !important;
  border-radius: 13px !important;
  border: none !important;
  border-bottom-width: 0 !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-shadow: none !important;
  margin: 0 !important;
}

/* Icon */
.form-search-all-service.masthead .tl-search-card .tl-search-card__tabs .tl-tab-btn .tl-tab-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
  line-height: 1 !important;
  color: inherit !important;
}

/* Label */
.form-search-all-service.masthead .tl-search-card .tl-search-card__tabs .tl-tab-btn .tl-tab-label {
  display: block !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  line-height: 1 !important;
  color: inherit !important;
}

/* ── HOVER (inactive only) ──────────────────────────────────── */
.form-search-all-service.masthead .tl-search-card .tl-search-card__tabs .tl-tab-btn:not(.is-tab-el-active):hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: none !important;
}

/* ── ACTIVE TAB — white card, gold icon ──────────────────────── */
.form-search-all-service.masthead .tl-search-card .tl-search-card__tabs .tl-tab-btn.is-tab-el-active {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: var(--tl-navy) !important;
  border-color: transparent !important;
  border-bottom-color: transparent !important;
  font-weight: 700 !important;
  box-shadow:
    0 4px 18px rgba(11, 28, 62, 0.22),
    0 1px 4px rgba(11, 28, 62, 0.12) !important;
}

.form-search-all-service.masthead .tl-search-card .tl-search-card__tabs .tl-tab-btn.is-tab-el-active .tl-tab-icon {
  color: var(--tl-gold) !important;
}

.form-search-all-service.masthead .tl-search-card .tl-search-card__tabs .tl-tab-btn.is-tab-el-active .tl-tab-label {
  color: var(--tl-navy) !important;
}

/* ── UNDERLINE PSEUDO-ELEMENT — hide it on our bar ──────────── */
.form-search-all-service.masthead .tl-search-card .tl-search-card__tabs .tl-tab-btn::after {
  display: none !important;
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 991px) {
  .form-search-all-service.masthead .tl-search-card .tl-search-card__tabs .tl-tab-btn {
    min-width: 62px !important;
    padding: 10px 12px !important;
    gap: 4px !important;
  }

  .form-search-all-service.masthead .tl-search-card .tl-search-card__tabs .tl-tab-btn .tl-tab-icon {
    font-size: 1rem !important;
  }

  .form-search-all-service.masthead .tl-search-card .tl-search-card__tabs .tl-tab-btn .tl-tab-label {
    font-size: 0.62rem !important;
  }
}

@media (max-width: 575px) {
  .form-search-all-service.masthead .tl-search-card .tl-search-card__tabs {
    justify-content: flex-start !important;
  }

  .form-search-all-service.masthead .tl-search-card .tl-search-card__tabs .tl-tab-btn {
    flex: 0 0 auto !important;
    min-width: 68px !important;
    padding: 9px 12px !important;
  }
}

/* =============================================================
   41. GUEST PICKER — Compact + Upward open on homepage
   =============================================================
   Two problems fixed:
   A) Too big / too much whitespace — Section 32 used (0,2,0)
      specificity but GoTrip's py-30/px-30 also use !important.
      This section uses (0,3,0) selectors to decisively win.
   B) Half off screen on homepage — popup opens downward
      (top:100%) inside the masthead hero. Flip to open UPWARD
      (bottom:100%) so it never goes below the fold.
   C) Right-edge overflow — anchor popup to right edge of trigger
      so it always extends LEFT, never past the viewport.
   ============================================================= */

/* ── A. POPUP PANEL — compact, right-anchored ───────────────── */

/* Width + position: right-align so popup extends LEFT from trigger */
.searchMenu-guests .searchMenu-guests__field,
.form-select-guests .searchMenu-guests__field {
  width: 264px !important;
  left: auto !important;
  right: 0 !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* Inner white box — strip GoTrip's px-30 py-30 !important padding */
.searchMenu-guests .searchMenu-guests__field .bg-white,
.form-select-guests .searchMenu-guests__field .bg-white {
  padding: 14px 16px !important;
  border-radius: 14px !important;
}

/* Counter rows — tighter vertical gap */
.searchMenu-guests .searchMenu-guests__field .row,
.form-select-guests .searchMenu-guests__field .row {
  flex-wrap: nowrap !important;
  align-items: center !important;
  row-gap: 0 !important;
  margin: 0 !important;
  padding: 6px 0 !important;
}

/* Dividers between sections — shrink margins */
.searchMenu-guests .searchMenu-guests__field .border-top-light,
.form-select-guests .searchMenu-guests__field .border-top-light {
  margin-top: 6px !important;
  margin-bottom: 6px !important;
}

/* Counter buttons — small and square */
.searchMenu-guests .searchMenu-guests__field .btn-minus,
.searchMenu-guests .searchMenu-guests__field .btn-add,
.form-select-guests .searchMenu-guests__field .btn-minus,
.form-select-guests .searchMenu-guests__field .btn-add {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  flex-shrink: 0 !important;
  font-size: 0.65rem !important;
  padding: 0 !important;
}

/* Counter number display */
.searchMenu-guests .searchMenu-guests__field .count-display,
.form-select-guests .searchMenu-guests__field .count-display {
  width: 28px !important;
  height: 28px !important;
  margin-left: 6px !important;
  margin-right: 6px !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
}

/* Label text — smaller */
.searchMenu-guests .searchMenu-guests__field .text-15,
.form-select-guests .searchMenu-guests__field .text-15 {
  font-size: 0.8125rem !important;
}

/* ── B. HOMEPAGE MASTHEAD — OPEN UPWARD ─────────────────────
   The search form sits near the bottom of the hero section.
   Flip the popup above the trigger so it never goes below fold.
   ─────────────────────────────────────────────────────────── */

.masthead .searchMenu-guests .searchMenu-guests__field,
.masthead .form-select-guests .searchMenu-guests__field {
  top: auto !important;
  bottom: calc(100% + 8px) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ── C. KILL MEDIA-QUERY FULL-WIDTH AT TABLET ───────────────
   GoTrip @media ≤991px forces left:-20px; right:-20px which
   stretches the popup across the full form width.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .searchMenu-guests .searchMenu-guests__field,
  .form-select-guests .searchMenu-guests__field {
    width: 264px !important;
    left: auto !important;
    right: 0 !important;
  }
}

@media (max-width: 575px) {
  .searchMenu-guests .searchMenu-guests__field,
  .form-select-guests .searchMenu-guests__field {
    width: calc(100vw - 32px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}

/* =============================================================
   42. GUEST PICKER — Full popup redesign
   =============================================================
   Section 41 fixed size + positioning but the row layout still
   uses Bootstrap col-auto gutters (15px each side) creating a
   large gap between label and counter.

   This section completely redesigns the popup interior:
   • Remove Bootstrap column gutters from counter rows
   • Label gets flex:1 to fill space naturally
   • Clean counter: small circular navy buttons, centered number
   • Premium popup shell: rounded card, top gold accent, shadow
   • No dividers replaced with subtle spacing per row
   ============================================================= */

/* ── POPUP SHELL ─────────────────────────────────────────────── */
.searchMenu-guests .searchMenu-guests__field,
.form-select-guests .searchMenu-guests__field {
  border-radius: 14px !important;
  box-shadow:
    0 12px 40px rgba(11, 28, 62, 0.18),
    0 2px 8px rgba(11, 28, 62, 0.10) !important;
  border: 1px solid rgba(11, 28, 62, 0.09) !important;
  overflow: hidden !important;
}

/* ── INNER WHITE BOX — compact, no excess padding ───────────── */
.searchMenu-guests .searchMenu-guests__field .bg-white,
.form-select-guests .searchMenu-guests__field .bg-white {
  padding: 6px 14px 14px !important;
  border-radius: 14px !important;
  border-top: 3px solid var(--tl-gold) !important;
}

/* ── EACH COUNTER ROW — replace Bootstrap grid with flex ──────
   The .row.justify-between.items-center uses Bootstrap gutters
   (15px per col-auto side). Strip them and use pure flex.
   ─────────────────────────────────────────────────────────── */
.searchMenu-guests .searchMenu-guests__field .row,
.form-select-guests .searchMenu-guests__field .row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  gap: 0 !important;
  padding: 9px 0 !important;
}

/* Remove Bootstrap col gutter from both cols */
.searchMenu-guests .searchMenu-guests__field .row > .col-auto,
.form-select-guests .searchMenu-guests__field .row > .col-auto {
  padding-left: 0 !important;
  padding-right: 0 !important;
  flex-shrink: 0 !important;
}

/* Label col — stretch to fill, push counter to right */
.searchMenu-guests .searchMenu-guests__field .row > .col-auto:first-child,
.form-select-guests .searchMenu-guests__field .row > .col-auto:first-child {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* ── LABEL TEXT ──────────────────────────────────────────────── */
.searchMenu-guests .searchMenu-guests__field .text-15,
.form-select-guests .searchMenu-guests__field .text-15 {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--tl-navy) !important;
  line-height: 1.2 !important;
}

/* ── COUNTER WRAPPER (d-flex items-center) ───────────────────── */
.searchMenu-guests .searchMenu-guests__field .d-flex.items-center,
.form-select-guests .searchMenu-guests__field .d-flex.items-center {
  gap: 8px !important;
  align-items: center !important;
}

/* ── COUNTER BUTTONS — small navy circles ────────────────────── */
.searchMenu-guests .searchMenu-guests__field .btn-minus,
.searchMenu-guests .searchMenu-guests__field .btn-add,
.form-select-guests .searchMenu-guests__field .btn-minus,
.form-select-guests .searchMenu-guests__field .btn-add {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1.5px solid rgba(11, 28, 62, 0.25) !important;
  color: var(--tl-navy) !important;
  font-size: 0.6rem !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  /* Kill ml-15 mr-15 spacing */
  margin-left: 0 !important;
  margin-right: 0 !important;
  transition: background 0.15s, border-color 0.15s !important;
}

.searchMenu-guests .searchMenu-guests__field .btn-minus:hover,
.searchMenu-guests .searchMenu-guests__field .btn-add:hover,
.form-select-guests .searchMenu-guests__field .btn-minus:hover,
.form-select-guests .searchMenu-guests__field .btn-add:hover {
  background: var(--tl-navy) !important;
  border-color: var(--tl-navy) !important;
  color: #ffffff !important;
}

/* ── NUMBER DISPLAY — centred between buttons ────────────────── */
.searchMenu-guests .searchMenu-guests__field .count-display,
.form-select-guests .searchMenu-guests__field .count-display {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: var(--tl-navy) !important;
  margin: 0 !important;
  /* Kill GoTrip's ml-15 mr-15 on the span */
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.searchMenu-guests .searchMenu-guests__field .count-display input,
.form-select-guests .searchMenu-guests__field .count-display input {
  width: 100% !important;
  text-align: center !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* ── DIVIDERS — replace thick 24px margins with thin lines ──── */
.searchMenu-guests .searchMenu-guests__field .border-top-light,
.form-select-guests .searchMenu-guests__field .border-top-light {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-top: 1px solid rgba(11, 28, 62, 0.07) !important;
}

/* ============================================================
   SECTION 43 — Homepage search tabs: active pill final fix
   DevTools confirmed the winning rule is:
     .masthead .tabs__button.is-tab-el-active  (0,3,0 — Section 28)
   We beat it with (0,4,0) by adding one confirmed ancestor class.
   ============================================================ */

/* ── Default (inactive) tab button ─────────────────────────── */
.masthead .tl-search-card__tabs .tabs__button {
  background: transparent !important;
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.82) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.masthead .tl-search-card__tabs .tabs__button .tl-tab-icon {
  color: rgba(255, 255, 255, 0.70) !important;
}
.masthead .tl-search-card__tabs .tabs__button .tl-tab-label {
  color: inherit !important;
}

/* ── Active tab button — white card lift ────────────────────── */
.masthead .tl-search-card__tabs .tabs__button.is-tab-el-active {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: var(--tl-navy) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 18px rgba(11, 28, 62, 0.22), 0 1px 4px rgba(11, 28, 62, 0.12) !important;
}
.masthead .tl-search-card__tabs .tabs__button.is-tab-el-active .tl-tab-icon {
  color: var(--tl-gold) !important;
}
.masthead .tl-search-card__tabs .tabs__button.is-tab-el-active .tl-tab-label {
  color: var(--tl-navy) !important;
}

/* ── Hover (inactive) ───────────────────────────────────────── */
.masthead .tl-search-card__tabs .tabs__button:not(.is-tab-el-active):hover {
  background: rgba(255, 255, 255, 0.12) !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.masthead .tl-search-card__tabs .tabs__button:not(.is-tab-el-active):hover .tl-tab-icon {
  color: rgba(255, 255, 255, 0.90) !important;
}

/* =============================================================
   SECTION 44 — Search tabs: FINAL unified redesign
   ─────────────────────────────────────────────────────────────
   Root causes from DevTools analysis:
   • Section 30 active rule: (0,5,0) → sets gold — we need (0,6,0)
   • Section 30 inactive rule (line 3817) at (0,3,0): sets transparent
     BUT Section 30 line 3478 at (0,4,0): sets frosted glass — good
     However custom-css.blade.php admin rule may also interfere
   • "Huge bar" = floating white card looks like a big rectangle on hero
     Fix: join tab nav + card body into one connected card

   Confirmed HTML path:
     section.masthead > ... > div.tabs.-underline.tl-search-card
       > div.tl-search-card__tabs
         > button.tabs__button.tl-tab-btn[.is-tab-el-active]
   ============================================================= */

/* ── 1. OUTER CARD: zero gap so nav + body touch ─────────────── */
.masthead .tl-search-card {
  gap: 0 !important;
  margin-top: 32px !important;
  background: transparent !important;
  border: none !important;
}

/* ── 2. TAB NAV ROW — dark frosted strip, rounded top ─────────
   (0,4,0) — refines the existing Section 30 navy header
   ─────────────────────────────────────────────────────────── */
.masthead .tabs.-underline .tl-search-card__tabs {
  background: rgba(11, 28, 62, 0.78) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-radius: 12px 12px 0 0 !important;
  padding: 0 12px !important;
  gap: 0 !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  overflow: visible !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ── 3. INACTIVE BUTTON — (0,5,0) beats all prior rules ───────
   Visible white text on dark navy strip
   ─────────────────────────────────────────────────────────── */
.masthead .tabs.-underline .tl-search-card__tabs .tabs__button {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 11px 16px 9px !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease !important;
  text-shadow: none !important;
}
.masthead .tabs.-underline .tl-search-card__tabs .tabs__button .tl-tab-icon {
  font-size: 0.8rem !important;
  color: rgba(255, 255, 255, 0.50) !important;
  transition: color 0.18s ease !important;
}

/* ── 4. ACTIVE BUTTON — (0,6,0) beats Section 30 gold (0,5,0) ─
   White "tab" punches into the white card body below.
   ─────────────────────────────────────────────────────────── */
.masthead .tabs.-underline .tl-search-card__tabs .tabs__button.is-tab-el-active {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: var(--tl-navy) !important;
  border: none !important;
  border-radius: 6px 6px 0 0 !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  padding: 12px 18px 11px !important;
}
.masthead .tabs.-underline .tl-search-card__tabs .tabs__button.is-tab-el-active .tl-tab-icon {
  color: var(--tl-gold) !important;
  font-size: 0.8rem !important;
}
.masthead .tabs.-underline .tl-search-card__tabs .tabs__button.is-tab-el-active .tl-tab-label {
  color: var(--tl-navy) !important;
}

/* ── 5. HOVER INACTIVE — (0,7,0) beats all prior hover rules ──
   Slight brighten on dark strip; white text
   ─────────────────────────────────────────────────────────── */
.masthead .tabs.-underline .tl-search-card__tabs .tabs__button:not(.is-tab-el-active):hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.10) !important;
  background-color: rgba(255, 255, 255, 0.10) !important;
  border-bottom-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: none !important;
}
.masthead .tabs.-underline .tl-search-card__tabs .tabs__button:not(.is-tab-el-active):hover .tl-tab-icon {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ── 6. SEARCH CARD BODY — white, connects to nav row ─────────
   No gold top border; no top radius. Compact padding.
   (0,3,0) beats prior (0,2,0) body rules
   ─────────────────────────────────────────────────────────── */
.masthead .tl-search-card .tl-search-card__body {
  background: #ffffff !important;
  border-top: none !important;
  border-radius: 0 8px 8px 8px !important;
  padding: 16px 20px !important;
  box-shadow:
    0 16px 48px rgba(11, 28, 62, 0.28),
    0 2px 8px rgba(11, 28, 62, 0.10) !important;
  margin-top: 0 !important;
  overflow: visible !important;
}

/* Prevent tabs__content from adding a gap */
.masthead .tl-search-card .tabs__content {
  margin-top: 0 !important;
  padding-top: 0 !important;
  overflow: visible !important;
}

/* Compact the search fields inside the card */
.masthead .tl-search-card .mainSearch .item {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* ── 7. MASTHEAD BOTTOM PADDING — trim excess space ───────────
   Hero sections often have 80–100px pb; cap so card
   doesn't float in a sea of empty hero image.
   ─────────────────────────────────────────────────────────── */
.form-search-all-service.masthead {
  padding-bottom: 52px !important;
}

/* ══════════════════════════════════════════════════════════════════
   SECTION 44 — citiesCard overlay text (style_8 / style_10)
   .citiesCard__content.px-30.py-30 sits as an absolute overlay on
   a photo. Enterprise pattern: gold heading + white body text.
   ══════════════════════════════════════════════════════════════════ */
.citiesCard__content.px-30.py-30 h4 {
  color: var(--tl-gold, #C9A84C) !important;
  font-family: 'Playfair Display', serif !important;
}

.citiesCard__content.px-30.py-30 .text-white,
.citiesCard__content.px-30.py-30 .text-15 {
  color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════════
   SECTION 45 — Hero category tabs (-bookmark-2) redesign
   Replaces the horizontal overflow scroll with wrapping frosted-glass
   pill chips. Each service type tab is a compact pill: semi-transparent
   on dark background, gold on hover / active.
   ══════════════════════════════════════════════════════════════════ */

/* 1. Controls row: wrap instead of horizontal scroll */
.masthead .tabs.-bookmark-2 .tabs__controls {
  overflow: visible !important;
  flex-wrap: wrap !important;
  gap: 8px 6px !important;
  align-items: center !important;
  scroll-snap-type: none !important;
  -ms-scroll-snap-type: none !important;
  padding-bottom: 0 !important;
}

/* 2. Kill scroll-snap on child elements */
.masthead .tabs.-bookmark-2 .tabs__controls > * {
  scroll-snap-align: none !important;
}

/* 3. Form wrapper: compact inline-flex, no visual box */
.masthead .tabs.-bookmark-2 .tabs__controls > form {
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 4. Inner div: transparent pass-through to flex context */
.masthead .tabs.-bookmark-2 .tabs__controls form > div {
  display: contents !important;
}

/* 5. Button: frosted-glass pill chip */
.masthead .tabs.-bookmark-2 .tabs__button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 9px 20px !important;
  border-radius: 40px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  transition: background 0.22s ease, color 0.22s ease,
              border-color 0.22s ease, box-shadow 0.22s ease !important;
}

/* 6. Hover and active state: gold highlight */
.masthead .tabs.-bookmark-2 .tabs__button:hover,
.masthead .tabs.-bookmark-2 .tabs__button.is-tab-el-active {
  background: var(--tl-gold) !important;
  color: var(--tl-navy) !important;
  border-color: var(--tl-gold) !important;
  box-shadow: 0 4px 16px rgba(201, 168, 76, 0.38) !important;
}

/* 7. Icon inside button: managed by gap, strip legacy margin */
.masthead .tabs.-bookmark-2 .tabs__button i {
  font-size: 1rem !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* 8. Mobile: slightly smaller pills */
@media (max-width: 575px) {
  .masthead .tabs.-bookmark-2 .tabs__button {
    padding: 7px 14px !important;
    font-size: 0.72rem !important;
    gap: 5px !important;
  }
  .masthead .tabs.-bookmark-2 .tabs__button i {
    font-size: 0.875rem !important;
  }
}

/* =============================================================
   39. EVENT MODULE — COUNTDOWN + CARD ENHANCEMENTS
   ============================================================= */

/* ── A. EVENT CARD — Countdown badge on image overlay ─────── */
.tl-cd-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  background: rgba(11,28,62,0.85);
  color: white;
  border-radius: 30px;
  padding: 5px 11px;
  font-size: 0.6875rem;
  font-weight: 700;
  font-family: var(--tl-font-body);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.18);
  white-space: nowrap;
}

.tl-cd-badge i { font-size: 0.6875rem; }

/* < 7 days left — urgent red */
.tl-cd-badge--urgent {
  background: rgba(220,38,38,0.9);
  border-color: rgba(255,255,255,0.25);
  animation: tl-cd-pulse 2s ease-in-out infinite;
}

/* Event is today — gold */
.tl-cd-badge--today {
  background: var(--tl-gold);
  color: var(--tl-navy);
  border-color: transparent;
  animation: tl-cd-pulse 1.5s ease-in-out infinite;
}

/* Event ongoing — green */
.tl-cd-badge--ongoing {
  background: rgba(22,163,74,0.88);
  border-color: rgba(255,255,255,0.2);
}

/* Event ended — muted */
.tl-cd-badge--ended {
  background: rgba(100,116,139,0.75);
  border-color: transparent;
  animation: none;
}

@keyframes tl-cd-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.85; transform: scale(1.04); }
}

/* Date chip inside card content */
.tl-event-date-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tl-charcoal-60);
  background: var(--tl-bg-section);
  border: 1px solid var(--tl-border);
  border-radius: 20px;
  padding: 3px 10px;
  margin-bottom: 6px;
  font-family: var(--tl-font-body);
}

.tl-event-date-chip i { color: var(--tl-gold); font-size: 0.6875rem; }

/* ── B. EVENT DETAIL — Countdown widget ───────────────────── */
.tl-event-countdown {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  background: var(--tl-navy);
  border-radius: var(--tl-radius-lg);
  padding: 22px 28px;
  margin-top: 20px;
}

.tl-event-countdown--ongoing {
  background: linear-gradient(120deg, var(--tl-navy) 60%, rgba(22,163,74,0.25) 100%);
}

.tl-event-countdown--ended {
  background: var(--tl-bg-section);
  border: 1px solid var(--tl-border);
}

.tl-event-countdown__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}

.tl-event-countdown__eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tl-gold);
  font-family: var(--tl-font-body);
}

.tl-event-countdown--ended .tl-event-countdown__eyebrow {
  color: var(--tl-charcoal-60);
}

.tl-event-countdown--ongoing .tl-event-countdown__eyebrow {
  color: #4ade80;
}

.tl-event-countdown__heading {
  font-size: 0.9375rem;
  font-weight: 700;
  color: white;
  font-family: var(--tl-font-body);
  line-height: 1.3;
}

.tl-event-countdown--ended .tl-event-countdown__heading {
  color: var(--tl-charcoal);
}

/* Timer units row */
.tl-countdown-timer {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tl-countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.tl-countdown-number {
  display: block;
  min-width: 60px;
  text-align: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  padding: 10px 6px;
  font-size: 1.875rem;
  font-weight: 800;
  color: white;
  font-family: var(--tl-font-body);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: background 0.15s ease;
}

.tl-event-countdown--ended .tl-countdown-number {
  background: var(--tl-border);
  border-color: transparent;
  color: var(--tl-charcoal-60);
  font-size: 1.25rem;
}

.tl-countdown-unit__label {
  font-size: 0.5625rem;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--tl-font-body);
}

.tl-event-countdown--ended .tl-countdown-unit__label {
  color: var(--tl-charcoal-60);
}

.tl-countdown-sep {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--tl-gold);
  align-self: flex-start;
  margin-top: 10px;
  line-height: 1;
}

.tl-event-countdown--ended .tl-countdown-sep { color: var(--tl-border); }

/* Urgency strip — shown when < 7 days */
.tl-event-urgency {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(220,38,38,0.12);
  border: 1px solid rgba(220,38,38,0.3);
  border-radius: var(--tl-radius);
  padding: 10px 16px;
  margin-top: 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #dc2626;
  font-family: var(--tl-font-body);
}

.tl-event-urgency i { color: #dc2626; }

/* Date range pills in header */
.tl-event-date-range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.35);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tl-charcoal);
  font-family: var(--tl-font-body);
}

.tl-event-date-range i { color: var(--tl-gold); }

@media (max-width: 767px) {
  .tl-event-countdown { padding: 18px 20px; gap: 16px; }
  .tl-countdown-number { font-size: 1.375rem; min-width: 46px; padding: 8px 4px; }
  .tl-countdown-sep { font-size: 1.125rem; margin-top: 8px; }
  .tl-countdown-timer { gap: 7px; }
}

/* ── EVENT LIST-VIEW CARD ─────────────────────────────────── */
.tl-event-list-card {
  border-top: 1px solid var(--tl-border);
  padding: 28px 0;
  transition: background 0.15s ease;
}

.tl-event-list-card:hover {
  background: var(--tl-bg-section);
  border-radius: var(--tl-radius);
  padding-left: 12px;
  padding-right: 12px;
  margin-left: -12px;
  margin-right: -12px;
}

/* =============================================================
   SECTION 45 — Event booking form: ticket dropdown stacking fix
   ─────────────────────────────────────────────────────────────
   Problem: multiple ticket rows (.js-form-dd, position:relative)
   are siblings in the same flex column. When ticket N's dropdown
   opens (position:absolute, z-index:9996) it flows downward but
   is painted OVER by ticket N+1's box, which appears later in the
   DOM at the same z-index level.
   Fix: give every ticket row z-index:1 and the active one z-index:200,
   so the open dropdown always surfaces above all sibling rows.
   Also force overflow:visible on the surrounding row/col so the
   absolute popup isn't clipped.
   ============================================================= */

#bravo_event_book_app .col-12 {
    overflow: visible !important;
}

#bravo_event_book_app .row {
    overflow: visible !important;
}

/* Every ticket row gets a baseline stacking context */
#bravo_event_book_app .js-form-dd {
    position: relative !important;
    z-index: 1 !important;
}

/* The open ticket row wins above all siblings */
#bravo_event_book_app .js-form-dd.-is-dd-wrap-active {
    z-index: 200 !important;
}

/* Its popup panel inherits a very high z-index within that context */
#bravo_event_book_app .js-form-dd.-is-dd-wrap-active .searchMenu-guests__field {
    z-index: 9999 !important;
}

/* =============================================================
   SECTION 46 — Event ticket picker: compact counter + text wrap
   ─────────────────────────────────────────────────────────────
   Root causes:
   • input[type=number] has ~170px browser-default width → counter
     fills almost the entire popup, no room for label text
   • justify-content:space-between on the popup row + two col-auto
     creates a ~60px dead gap in the middle
   • size-38 buttons (38px) are oversized in the 360px sidebar
   Fix strategy:
   • Lock the number input to 40px; shrink buttons to 28px
   • Make label col flex-grow so it absorbs the justify gap
   • Allow ticket name in trigger to wrap naturally (no overflow cut)
   ============================================================= */

/* ── 1. Popup panel — reduce inner padding ─────────────────── */
#bravo_event_book_app .searchMenu-guests__field .bg-white {
    padding: 12px 14px !important;
    border-top: 3px solid var(--tl-gold) !important;
    border-radius: 12px !important;
}

/* ── 2. Popup row — label grows, counter stays right ────────── */
#bravo_event_book_app .searchMenu-guests__field .form-guest-search {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 !important;
}

/* Label column: stretch to fill the gap, allow wrapping */
#bravo_event_book_app .searchMenu-guests__field .form-guest-search > .col-auto:first-child {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}
#bravo_event_book_app .searchMenu-guests__field .form-guest-search > .col-auto:first-child .text-15 {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: var(--tl-navy) !important;
}

/* Counter column: fixed to right, no shrink */
#bravo_event_book_app .searchMenu-guests__field .form-guest-search > .col-auto:last-child {
    flex: 0 0 auto !important;
    padding: 0 !important;
}

/* ── 3. Counter wrapper — tight gap between items ───────────── */
#bravo_event_book_app .searchMenu-guests__field .js-counter {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
}

/* ── 4. Counter buttons — compact 28×28 ─────────────────────── */
#bravo_event_book_app .searchMenu-guests__field .js-counter .size-38,
#bravo_event_book_app .searchMenu-guests__field .js-counter .js-down,
#bravo_event_book_app .searchMenu-guests__field .js-counter .js-up {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.6875rem !important;
}

/* ── 5. Number input — fixed 40px, kill browser default width── */
#bravo_event_book_app .searchMenu-guests__field .js-counter span.input {
    display: inline-flex !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
#bravo_event_book_app .searchMenu-guests__field .js-counter span.input input[type="number"] {
    width: 40px !important;
    min-width: 0 !important;
    max-width: 40px !important;
    text-align: center !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    color: var(--tl-navy) !important;
    -moz-appearance: textfield !important; /* Firefox: hide spinner arrows */
}
#bravo_event_book_app .searchMenu-guests__field .js-counter span.input input[type="number"]::-webkit-inner-spin-button,
#bravo_event_book_app .searchMenu-guests__field .js-counter span.input input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* ── 6. Trigger button — ticket name wraps, price stays below ── */
#bravo_event_book_app .searchMenu-guests [data-x-dd-click="searchMenu-guests"] {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
    gap: 0 8px !important;
}
/* Ticket name: row 1 col 1 — wraps freely */
#bravo_event_book_app .searchMenu-guests [data-x-dd-click="searchMenu-guests"] h4.text-15 {
    grid-column: 1 !important;
    grid-row: 1 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
    margin-bottom: 2px !important;
}
/* Price: row 2 col 1 */
#bravo_event_book_app .searchMenu-guests [data-x-dd-click="searchMenu-guests"] h4.text-12 {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin-bottom: 0 !important;
}
/* Count badge: col 2, spans both rows — right-aligned */
#bravo_event_book_app .searchMenu-guests [data-x-dd-click="searchMenu-guests"] .text-15.text-light-1 {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--tl-navy) !important;
    min-width: 24px !important;
    text-align: right !important;
}

/* Inline countdown bar inside list card */
.tl-list-cd-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(201,168,76,0.08);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: var(--tl-radius);
  padding: 8px 14px;
  font-size: 0.875rem;
  font-family: var(--tl-font-body);
  flex-wrap: wrap;
}

/* =============================================================
   SECTION 47 — All booking sidebars: universal compact counter
   ─────────────────────────────────────────────────────────────
   Applies to Hotel (#hotel-rooms), Tour, Car, Space, Boat
   (and Event already covered by Section 46).
   Scope: .bravo_single_book (sidebar) + #hotel-rooms (top picker)
   ============================================================= */

/* ── 1. Popup panel — compact padding + gold accent ─────────── */
.bravo_single_book .searchMenu-guests__field .bg-white,
#hotel-rooms .searchMenu-guests__field .bg-white {
    padding: 12px 14px !important;
    border-top: 3px solid var(--tl-gold) !important;
    border-radius: 12px !important;
}

/* ── 2. Popup row — label grows to fill, no dead middle gap ──── */
.bravo_single_book .searchMenu-guests__field .form-guest-search,
#hotel-rooms .searchMenu-guests__field .form-guest-search {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 !important;
}

/* Label column: flex-grow absorbs the space-between gap */
.bravo_single_book .searchMenu-guests__field .form-guest-search > .col-auto:first-child,
#hotel-rooms .searchMenu-guests__field .form-guest-search > .col-auto:first-child {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}
.bravo_single_book .searchMenu-guests__field .form-guest-search > .col-auto:first-child .text-15,
#hotel-rooms .searchMenu-guests__field .form-guest-search > .col-auto:first-child .text-15 {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: var(--tl-navy) !important;
}

/* Counter column: fixed on right, never shrinks */
.bravo_single_book .searchMenu-guests__field .form-guest-search > .col-auto:last-child,
#hotel-rooms .searchMenu-guests__field .form-guest-search > .col-auto:last-child {
    flex: 0 0 auto !important;
    padding: 0 !important;
}

/* ── 3. Counter wrapper — tight 4px gap ─────────────────────── */
.bravo_single_book .searchMenu-guests__field .js-counter,
#hotel-rooms .searchMenu-guests__field .js-counter {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
}

/* ── 4. Buttons — 28×28 instead of 38×38 ────────────────────── */
.bravo_single_book .searchMenu-guests__field .js-counter .size-38,
.bravo_single_book .searchMenu-guests__field .js-counter .js-down,
.bravo_single_book .searchMenu-guests__field .js-counter .js-up,
#hotel-rooms .searchMenu-guests__field .js-counter .size-38,
#hotel-rooms .searchMenu-guests__field .js-counter .js-down,
#hotel-rooms .searchMenu-guests__field .js-counter .js-up {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.6875rem !important;
}

/* ── 5. span.input wrapper — fixed 40px, no browser default ──── */
.bravo_single_book .searchMenu-guests__field .js-counter span.input,
#hotel-rooms .searchMenu-guests__field .js-counter span.input {
    display: inline-flex !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

/* ── 6. Number input — kill ~170px browser default width ──────── */
.bravo_single_book .searchMenu-guests__field .js-counter span.input input[type="number"],
#hotel-rooms .searchMenu-guests__field .js-counter span.input input[type="number"] {
    width: 40px !important;
    min-width: 0 !important;
    max-width: 40px !important;
    text-align: center !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
    color: var(--tl-navy) !important;
    -moz-appearance: textfield !important;
}
.bravo_single_book .searchMenu-guests__field .js-counter span.input input[type="number"]::-webkit-inner-spin-button,
.bravo_single_book .searchMenu-guests__field .js-counter span.input input[type="number"]::-webkit-outer-spin-button,
#hotel-rooms .searchMenu-guests__field .js-counter span.input input[type="number"]::-webkit-inner-spin-button,
#hotel-rooms .searchMenu-guests__field .js-counter span.input input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* ── 7. Trigger label — allow long person-type names to wrap ──── */
.bravo_single_book .searchMenu-guests [data-x-dd-click] h4.text-15,
.bravo_single_book .searchMenu-guests [data-x-dd-click] h4.fw-500,
#hotel-rooms .searchMenu-guests [data-x-dd-click] h4.text-15,
#hotel-rooms .searchMenu-guests [data-x-dd-click] h4.fw-500 {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
}

/* ── 8. Multiple counters stacked (Space: Adults + Children) ──── */
/*    Add top border between counter rows                         */
.bravo_single_book .searchMenu-guests__field .form-guest-search + .form-guest-search,
#hotel-rooms .searchMenu-guests__field .form-guest-search + .form-guest-search {
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(11,28,62,0.06) !important;
}