/* =============================================================================
   BOOKING HERO SECTION — main_booking_hero.css
   All structural / component styles. Image-dependent rules (backgrounds,
   text colours, ::before overlays) are injected inline by the PHP template
   via the .booking-hero--has-image modifier class.
   ============================================================================= */

/* ── Hero shell ────────────────────────────────────────────────────────────── */
.booking-hero{position:relative;min-height:450px;display:flex;align-items:center;background:var(--color-bg-gray-light);padding:80px 0 100px}
.booking-hero-title{font-size:40px;font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin-bottom:12px;text-align:left;text-shadow:none;max-width:1200px;margin-left:auto;margin-right:auto}
.booking-hero-subtitle{font-size:var(--font-size-2xl);font-weight:var(--font-weight-normal);color:var(--color-text-primary);margin-bottom:40px;text-align:left;text-shadow:none;max-width:1200px;margin-left:auto;margin-right:auto}

/* ── Incomplete state ──────────────────────────────────────────────────────── */
.booking-hero.is-incomplete .booking-hero-content{filter:blur(6px);user-select:none;pointer-events:none}
.section-incomplete-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:10}
.section-incomplete-notice{background:var(--color-bg-white);border:1px solid var(--color-border-secondary);border-radius:var(--radius-lg);padding:16px 24px;text-align:center;box-shadow:0 4px 24px rgba(0,0,0,0.08);max-width:380px}
.section-incomplete-notice p{margin:0;font-size:var(--font-size-xs);color:var(--color-text-secondary);line-height:1.5}
.booking-hero-content{position:relative;z-index:2}

/* ── Booking Widget Card ───────────────────────────────────────────────────── */
.booking-widget-card{background:var(--color-bg-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:24px;max-width:1200px;margin:0 auto}

/* ── Feature Cards ─────────────────────────────────────────────────────────── */
.booking-feature-cards{background:#f2f3f5;padding:36px 0 32px;border-bottom:1px solid var(--color-border-secondary)}
.booking-feature-cards-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.booking-feature-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:0 8px}
.booking-feature-card-icon{width:28px;height:28px;flex-shrink:0;color:var(--color-text-primary)}
.booking-feature-card-icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.booking-feature-card-title{font-size:var(--font-size-base);font-weight:var(--font-weight-bold);color:var(--color-text-primary);line-height:1.35;margin:0}
.booking-feature-card-desc{font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:1.65;margin:0}

@media(max-width:991px){
.booking-feature-cards-inner{grid-template-columns:repeat(2,1fr);gap:28px 24px}
}
@media(max-width:575px){
.booking-feature-cards-inner{grid-template-columns:1fr;gap:0;padding:0 20px}
.booking-feature-cards{padding:8px 0 4px}
.booking-feature-card{flex-direction:row;align-items:flex-start;text-align:left;gap:16px;padding:18px 0;border-bottom:1px solid var(--color-border-light)}
.booking-feature-cards-inner .booking-feature-card:last-child{border-bottom:none}
.booking-feature-card-icon{flex-shrink:0;margin-top:2px}
.booking-feature-card-text{display:flex;flex-direction:column;gap:4px}
}

/* ── Booking Form Grid ─────────────────────────────────────────────────────── */
.booking-form-grid{display:grid;grid-template-columns:1.17fr 0.4fr 0.4fr 0.4fr auto;gap:10px;align-items:end}

/* ── Location Fields Group ─────────────────────────────────────────────────── */
.location-fields-group{display:flex;gap:0;position:relative;width:100%;align-items:flex-end;min-width:0}
.location-fields-group .booking-field{flex:1;min-width:0}
.location-fields-group .custom-select-trigger{padding-left:36px}
.location-fields-group .booking-field:first-child .custom-select-trigger{padding-left:13px;padding-right:40px}
.location-fields-group .booking-field:last-child .custom-select-trigger{padding-left:28px}
.location-fields-group .custom-select-arrow{display:none}
.location-fields-group .swap-locations-btn{flex-shrink:0;margin:0}

@media(min-width:992px){
.location-fields-group .booking-field:first-child::after{content:'';position:absolute;right:-1px;bottom:0;height:44px;width:1px;background:var(--color-border-primary);z-index:1}
.location-fields-group .booking-field:first-child .custom-select-trigger{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none}
.location-fields-group .booking-field:last-child .custom-select-trigger{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none}
.location-fields-group .booking-field:first-child .custom-select-trigger.active{border-right:1px solid var(--color-text-primary)}
.location-fields-group .booking-field:last-child .custom-select-trigger.active{border-left:1px solid var(--color-text-primary)}
.location-fields-group .booking-field:first-child{position:relative}
}

@media(max-width:991px){
.location-fields-group{flex-direction:column;gap:12px}
.location-fields-group .booking-field{width:100%;min-width:100%}
.location-fields-group .swap-locations-btn{display:none}
.location-fields-group .booking-field:first-child .custom-select-trigger,.location-fields-group .booking-field:last-child .custom-select-trigger{padding-left:12px;padding-right:12px}
.location-fields-group .custom-select-icon{margin-left:0;margin-right:8px}
}

/* ── Form Field ────────────────────────────────────────────────────────────── */
.booking-field{display:flex;flex-direction:column;gap:6px}
.booking-field-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}
.booking-input{height:var(--button-height);padding:0 12px;font-size:var(--font-size-lg);font-family:var(--font-family);color:var(--color-text-primary);background:var(--color-bg-white);border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);transition:all 0.2s ease;width:100%;cursor:pointer}
.booking-input:hover{border-color:var(--color-border-medium);background:var(--color-bg-gray)}
.booking-input:focus{outline:none;border-color:var(--color-text-primary);background:var(--color-bg-white);box-shadow:none}
.booking-input::placeholder{color:var(--color-text-muted)}

/* ── Custom Searchable Select ──────────────────────────────────────────────── */
.custom-select-wrapper{position:relative;width:100%}
.custom-select-trigger{height:var(--button-height);padding:0 32px 0 12px;font-size:var(--font-size-lg);font-family:var(--font-family);color:var(--color-text-primary);background:var(--color-bg-white);border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);transition:all 0.2s ease;width:100%;cursor:pointer;display:flex;align-items:center;gap:8px;user-select:none;overflow:hidden}
.custom-select-trigger:hover{border-color:var(--color-border-medium);background:var(--color-bg-gray)}
.custom-select-trigger.active{border-color:var(--color-text-primary);background:var(--color-bg-white);box-shadow:none}
.custom-select-trigger.placeholder{color:var(--color-text-muted)}
.custom-select-icon{flex-shrink:0;width:16px;height:16px;color:var(--color-text-primary)}
.location-fields-group .custom-select-trigger .custom-select-icon{display:block !important}
.custom-select-trigger:not(.placeholder) .custom-select-icon{display:none}
.custom-select-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.custom-select-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--color-text-muted);transition:transform 0.2s ease;pointer-events:none}
.custom-select-trigger.active .custom-select-arrow{transform:translateY(-50%) rotate(180deg)}

/* Dropdown */
.custom-select-dropdown{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--color-bg-white);border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);z-index:1000;display:none;max-height:320px;overflow:hidden;flex-direction:column}
@media(min-width:1200px){.custom-select-dropdown{min-width:400px}}
.custom-select-dropdown.active{display:flex}
.custom-select-search{padding:12px;border-bottom:1px solid var(--color-border-light);flex-shrink:0}
.custom-select-search input{width:100%;height:40px;padding:0 12px;border:1px solid var(--color-border-primary);border-radius:var(--radius-md);font-size:var(--font-size-md);font-family:var(--font-family);color:var(--color-text-primary);transition:all 0.2s ease}
.custom-select-search input:focus{outline:none;border-color:var(--color-text-primary);box-shadow:none}
.custom-select-search input::placeholder{color:var(--color-text-secondary)}
.custom-select-options{overflow-y:auto;flex:1}
.custom-select-option{padding:8px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:background-color 0.15s ease;border-bottom:1px solid var(--color-bg-gray-light)}
.custom-select-option:last-child{border-bottom:none}
.custom-select-option:hover{background:var(--color-bg-hover)}
.custom-select-option:hover .custom-select-option-type,.custom-select-option.selected .custom-select-option-type{color:var(--color-text-primary)}
.custom-select-option.selected{background:var(--color-bg-hover)}
.custom-select-option.hidden{display:none}
.custom-select-option-icon{flex-shrink:0;width:40px;height:40px;color:#596871;background:var(--color-bg-gray-light);border-radius:var(--radius-lg);padding:10px;display:none}
.custom-select-option-text{flex:1;font-size:var(--font-size-md);color:var(--color-text-primary);display:flex;flex-direction:column;gap:0}
.custom-select-option-name{font-weight:var(--font-weight-medium);color:var(--color-text-primary)}
.custom-select-option-type{font-size:var(--font-size-sm);color:var(--color-text-secondary)}
.custom-select-no-results{padding:20px;text-align:center;color:var(--color-text-secondary);font-size:var(--font-size-base)}
.custom-select-loading{padding:20px;text-align:center;color:var(--color-text-secondary);font-size:var(--font-size-base)}

/* ── Location Icon Inside Input ────────────────────────────────────────────── */
.booking-field-with-icon{position:relative}
.booking-field-with-icon .booking-input{padding-left:36px}
.booking-input-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--color-text-primary);pointer-events:none}

/* ── Swap Button ───────────────────────────────────────────────────────────── */
.swap-locations-btn{width:32px;height:32px;border-radius:50%;background:var(--color-bg-white);border:1px solid var(--color-border-primary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s ease;flex-shrink:0;z-index:10;align-self:flex-end;margin-bottom:0}
@media(min-width:992px){.swap-locations-btn{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);box-shadow:var(--shadow-sm)}}
.swap-locations-btn:hover{border-color:var(--color-primary);background:var(--color-bg-white);box-shadow:0 4px 12px rgba(25,32,36,0.15)}
.swap-locations-btn:hover svg{transform:rotate(180deg)}
.swap-locations-btn svg{width:14px;height:14px;color:var(--color-text-primary);transition:transform 0.3s ease}

/* ── Passengers Counter Button ─────────────────────────────────────────────── */
.passengers-counter-btn{height:var(--button-height);padding:0 10px;background:var(--color-bg-white);border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all 0.2s ease;min-width:110px;font-size:var(--font-size-base)}
.passengers-counter-btn:hover{border-color:var(--color-border-medium);background:var(--color-bg-gray)}
.passengers-counter-btn.active{border-color:var(--color-text-primary);box-shadow:none}
.passengers-display{display:flex;align-items:center;gap:6px;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}
.passengers-display svg{width:16px;height:16px;color:var(--color-text-primary)}
.chevron-icon{width:16px;height:16px;color:var(--color-text-primary);transition:transform 0.2s ease}
.passengers-counter-btn.active .chevron-icon{transform:rotate(180deg)}

/* ── Passengers Popup ──────────────────────────────────────────────────────── */
.passengers-popup{position:absolute;top:calc(100% + 8px);right:0;background:var(--color-bg-white);border:1px solid var(--color-border-primary);border-radius:var(--radius-lg);box-shadow:0 12px 30px rgba(25,32,36,0.16);padding:20px;min-width:300px;z-index:100;display:none}
.passengers-popup.active{display:block}
.passenger-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--color-border-light)}
.passenger-row:last-child{border-bottom:1px solid var(--color-border-light);padding-bottom:12px}
.passenger-info{display:flex;flex-direction:column;gap:2px}
.passenger-type{font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}
.passenger-desc{font-size:var(--font-size-sm);color:var(--color-text-muted)}
.passenger-controls{display:flex;align-items:center;gap:12px}
.passenger-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--color-border-primary);background:var(--color-bg-white);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s ease}
.passenger-btn:hover:not(:disabled){border-color:var(--color-text-primary);background:var(--color-bg-white)}
.passenger-btn:disabled{opacity:0.3;cursor:not-allowed}
.passenger-btn svg{width:14px;height:14px;color:var(--color-text-primary)}
.passenger-count{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);min-width:20px;text-align:center}
.passengers-done-btn{width:100%;height:var(--button-height);margin-top:16px;background:var(--color-bg-white);border:1px solid var(--color-text-primary);border-radius:var(--radius-lg);color:var(--color-text-primary);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all 0.2s ease}
.passengers-done-btn:hover{background:var(--color-bg-gray)}

/* ── Search Button ─────────────────────────────────────────────────────────── */
.booking-search-btn{position:relative;height:var(--button-height);padding:0 28px;background:var(--color-primary-gradient);color:var(--color-bg-white);border:none;border-radius:var(--radius-lg);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all 0.2s ease;white-space:nowrap}
.booking-search-btn:hover{background:var(--color-primary-gradient-hover);box-shadow:0 4px 12px rgba(var(--color-primary-rgb),0.3)}
.booking-search-btn .btn-text{transition:opacity 0.2s ease}
.booking-search-btn.is-loading .btn-text{opacity:0}
.booking-search-btn .btn-spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.2s ease}
.booking-search-btn.is-loading .btn-spinner{opacity:1}
.booking-search-btn .btn-spinner::after{content:'';width:18px;height:18px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:btn-spin 0.6s linear infinite}
@keyframes btn-spin{to{transform:rotate(360deg)}}
.booking-search-btn.is-loading{cursor:not-allowed;pointer-events:none}

/* ── Return Trip ───────────────────────────────────────────────────────────── */
.return-trip-section{display:none;margin-top:16px;padding-top:16px;border-top:1px solid var(--color-border-light)}
.return-trip-section.active{display:block}
.return-trip-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.remove-return-btn{margin-left:8px;font-size:11px;font-weight:var(--font-weight-medium);color:var(--color-theme-accent);cursor:pointer;transition:color 0.2s ease;user-select:none}
.remove-return-btn:hover{color:var(--color-theme-accent)}
.add-return-btn{height:var(--button-height);padding:0 12px;background:var(--color-bg-white);border:1px dashed var(--color-border-medium);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:all 0.2s ease;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);color:var(--color-theme-accent)}
.add-return-btn:hover{background:var(--color-bg-gray)}
.add-return-btn svg{width:14px;height:14px;color:var(--color-theme-accent)}
.add-return-btn.hidden{display:none}
.return-date-field{display:none}
.return-date-field.active{display:flex;flex-direction:column;gap:6px}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

/* ── Tablet landscape (1200 → 768) ────────────────────────────────────────── */
@media(max-width:1199px){
.booking-form-grid{grid-template-columns:1fr 1fr;gap:12px}
.location-fields-group{grid-column:1/-1}
.booking-search-btn{grid-column:1/-1}
}

@media(max-width:1199px) and (min-width:768px){
.booking-hero .container{padding-left:0 !important;padding-right:0 !important}
.booking-hero{min-height:auto;padding:0;background:var(--color-bg-gray-light);position:relative}
.booking-hero-content{position:relative;z-index:1}
.booking-hero-title{font-size:var(--font-size-5xl);padding:70px 32px 0 32px;margin-bottom:12px;margin-left:0;margin-right:0}
.booking-hero-subtitle{font-size:var(--font-size-xl);padding:0 32px 50px 32px;margin-bottom:0;margin-left:0;margin-right:0}
.booking-widget-card{padding:24px;border-radius:var(--radius-xl) !important;box-shadow:0 -2px 8px rgba(25,32,36,0.06);max-width:none;margin:0 24px}
}

/* ── Tablet portrait / large mobile (767 → 576) ───────────────────────────── */
@media(max-width:767px){
.booking-hero .container{padding-left:0 !important;padding-right:0 !important}
.booking-hero{min-height:auto;padding:0;background:var(--color-bg-gray-light);position:relative}
.booking-hero-content{position:relative;z-index:1}
.booking-hero-title{font-size:22px;padding:60px 20px 0 20px;margin-bottom:12px;margin-left:0;margin-right:0}
.booking-hero-subtitle{font-size:var(--font-size-lg);padding:0 20px 40px 20px;margin-bottom:0;margin-left:0;margin-right:0}
.booking-widget-card{padding:24px 15px;border-radius:var(--radius-xl);box-shadow:0 -2px 8px rgba(25,32,36,0.06);max-width:none;margin:0 16px}
.booking-form-grid{display:grid !important;grid-template-columns:1fr 1fr;gap:16px}
.location-fields-group,.booking-form-grid>.booking-field:nth-child(4),.booking-search-btn{grid-column:1/-1}
.location-fields-group{display:flex;flex-direction:column;gap:16px}
.location-fields-group .booking-field{width:100%;min-width:100%}
.location-fields-group .swap-locations-btn{display:none}
.location-fields-group .booking-field:first-child .custom-select-trigger,.location-fields-group .booking-field:last-child .custom-select-trigger{padding-left:12px;padding-right:12px}
.location-fields-group .custom-select-icon{margin-left:0;margin-right:8px}
.booking-field-with-icon{position:relative;width:100%}
.booking-input-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);z-index:1}
.booking-field{width:100%}
.add-return-btn,.passengers-counter-btn{width:100% !important;max-width:100% !important;min-width:0 !important}
#returnLabel{display:none !important}
.booking-field:has(.return-date-field.active) #returnLabel{display:block !important;visibility:visible !important;height:auto;margin-bottom:6px}
.passengers-popup{left:0;right:0;min-width:auto}
.return-trip-grid{grid-template-columns:1fr;gap:16px}
}

@media(min-width:576px) and (max-width:767px){
.booking-form-grid>.booking-field:nth-child(2){display:flex;flex-direction:column;gap:8px}
.booking-form-grid>.booking-field:nth-child(4){display:flex;flex-direction:column;gap:8px}
.booking-field:has(.return-date-field.active){display:flex;flex-direction:column;gap:8px}
.booking-field:has(.return-date-field.active) #returnLabel{margin-bottom:0}
.return-date-field.active{margin-top:0;display:flex;flex-direction:column;gap:0}
}

/* ── Small mobile (< 576) ─────────────────────────────────────────────────── */
@media(max-width:575px){
.booking-hero{min-height:auto;padding:0;background:var(--color-bg-gray-light)}
.booking-hero-title{font-size:22px;padding:40px 20px 0 20px;margin-bottom:8px;margin-left:0;margin-right:0}
.booking-hero-subtitle{font-size:var(--font-size-lg);padding:0 20px 30px 20px;margin-bottom:0;margin-left:0;margin-right:0}
.booking-widget-card{border-radius:0 !important;margin:0 !important;padding:24px 15px;box-shadow:none;border-bottom:1px solid var(--color-border-light);max-width:none}
.booking-form-grid{display:grid !important;grid-template-columns:1fr 1fr;gap:16px}
.location-fields-group,.booking-form-grid>.booking-field:nth-child(4),.booking-search-btn{grid-column:1/-1}
.location-fields-group{gap:16px}
.booking-field{position:relative;padding-top:8px}
.booking-field-label{position:absolute;top:0;left:12px;background:var(--color-bg-white);padding:0 6px;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary);z-index:2;line-height:1;border-radius:var(--radius-md)}
.location-fields-group .booking-field-label{position:absolute;top:0;left:12px;background:var(--color-bg-white);padding:0 6px;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);z-index:2;border-radius:var(--radius-md)}
.booking-form-grid>.booking-field:has(#returnLabel){position:relative;padding-top:0}
#returnLabel{display:none !important;position:static}
.booking-field:has(.return-date-field.active){padding-top:8px !important}
.booking-field:has(.return-date-field.active) #returnLabel{display:block !important;position:absolute !important;top:0;left:12px;background:var(--color-bg-white);padding:0 6px;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary);z-index:2;line-height:1;visibility:visible !important;height:auto;border-radius:var(--radius-md)}
.booking-field:has(.return-date-field.active) #returnLabel .remove-return-btn{font-size:10px;margin-left:6px}
.booking-field:has(.return-date-field.active) .add-return-btn{display:none}
.return-date-field.active{padding-top:0;margin-top:0}
.return-date-field.active .booking-field-with-icon{margin-top:0}
}