/**
 * ============================================
 * BOOKING.COM EXACT VISUAL CLONE
 * ============================================
 *
 * Ce fichier reproduit EXACTEMENT le style visuel
 * du moteur de recherche Booking.com (desktop)
 *
 * Règle : 100% de ressemblance visuelle
 *
 * Couleurs Booking.com :
 * - Fond : #003580 (bleu foncé)
 * - Bordure active : #FEBB02 (jaune)
 * - Champs : #FFFFFF (blanc)
 * - Bouton : #0071C2 (bleu Booking)
 * - Texte label : #6B6B6B (gris)
 * - Texte valeur : #262626 (noir)
 */

/* ============================================
   CONTENEUR PRINCIPAL - Fond bleu Booking
============================================ */
.hero-sixt {
  background: #003580 !important;
  padding: 3rem 0 4rem !important;
}

/* Override du conteneur pour maximiser la largeur du formulaire */
.hero-sixt .hero-container {
  max-width: 1140px !important;
  padding: 0 20px !important;
  text-align: left !important;
}

.hero-title {
  color: #FFFFFF !important;
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.5rem !important;
}

.hero-subtitle {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 1.125rem !important;
  margin-bottom: 2rem !important;
}

/* ============================================
   OPTIONS BAR - Checkboxes style Booking
============================================ */
.booking-options-bar {
  display: flex !important;
  gap: 1.5rem !important;
  margin-bottom: 0.75rem !important;
  padding: 0 !important;
}

.booking-checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #FFFFFF !important;
  user-select: none !important;
}

.booking-checkbox input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

.checkbox-custom {
  width: 20px !important;
  height: 20px !important;
  border: 2px solid #FFFFFF !important;
  border-radius: 3px !important;
  background: transparent !important;
  position: relative !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

.booking-checkbox:hover .checkbox-custom {
  border-color: #FEBB02 !important;
}

.booking-checkbox input:checked + .checkbox-custom {
  background: #0071C2 !important;
  border-color: #0071C2 !important;
}

.booking-checkbox input:checked + .checkbox-custom::after {
  content: '' !important;
  position: absolute !important;
  left: 5px !important;
  top: 1px !important;
  width: 4px !important;
  height: 9px !important;
  border: solid white !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

.checkbox-label {
  color: #FFFFFF !important;
  font-weight: 400 !important;
  font-size: 14px !important;
}

/* ============================================
   WIDGET PRINCIPAL - Fond blanc, bordure jaune
============================================ */
.booking-widget-sixt-horizontal {
  background: #FFFFFF !important;
  border-radius: 2px !important;
  padding: 4px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  border: 3px solid #FEBB02 !important;
  max-width: 1140px !important;
  margin: 0 auto !important;
}

/* ============================================
   FORMULAIRE - Layout horizontal strict
============================================ */
.booking-form-horizontal {
  display: flex !important;
  gap: 0 !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
}

/* Proportions exactes Booking.com */
.form-field-location {
  flex: 2.2 1 320px !important;
}

.form-field-datetime {
  flex: 1.5 1 180px !important;
}

.btn-search-booking {
  flex: 0 0 auto !important;
  min-width: 130px !important;
}

.form-field {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
}

/* ============================================
   FLOATING LABELS - Style Booking exact
============================================ */
.floating-label {
  position: absolute !important;
  top: 6px !important;
  left: 36px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #6B6B6B !important;
  text-transform: none !important;
  pointer-events: none !important;
  z-index: 3 !important;
  line-height: 1 !important;
}

/* ============================================
   INPUT WRAPPER - Alignement icône
============================================ */
.input-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  position: relative !important;
}

.input-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
  flex: 1 !important;
}

.input-wrapper i {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 18px !important;
  color: #262626 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* ============================================
   INPUT FIELDS - Style Booking exact
============================================ */
.field-input-booking {
  width: 100% !important;
  height: 48px !important;
  padding: 24px 6px 6px 36px !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: #262626 !important;
  background: #FFFFFF !important;
  border: 1px solid #BDBDBD !important;
  border-radius: 2px !important;
  transition: all 0.15s ease !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  line-height: 1.4 !important;
  min-height: 48px !important;
  max-height: 48px !important;
}

.field-input-booking:hover {
  border-color: #FEBB02 !important;
}

.field-input-booking:focus {
  outline: none !important;
  border-color: #FEBB02 !important;
  border-width: 2px !important;
  box-shadow: 0 0 0 1px #FEBB02 !important;
  padding: 24px 5px 6px 35px !important;
}

.field-input-booking::placeholder {
  color: #BDBDBD !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

/* ============================================
   DATETIME DISPLAY - Fusion Date + Heure
============================================ */
.datetime-display {
  width: 100% !important;
  height: 48px !important;
  padding: 24px 12px 6px 36px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  background: #FFFFFF !important;
  border: 1px solid #BDBDBD !important;
  border-radius: 2px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.datetime-display:hover {
  border-color: #FEBB02 !important;
}

.datetime-display .date-text {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #262626 !important;
  line-height: 1 !important;
  margin-bottom: 2px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

.datetime-display .time-text {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #6B6B6B !important;
  margin-top: 0 !important;
  line-height: 1 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* ============================================
   BOUTON SEARCH - Bleu Booking exact
============================================ */
.btn-search-booking {
  background: #0071C2 !important;
  color: #FFFFFF !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  padding: 0 24px !important;
  border: none !important;
  border-radius: 2px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

.btn-search-booking:hover {
  background: #006EB8 !important;
  transform: none !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18) !important;
}

.btn-search-booking:active {
  background: #005FA3 !important;
}

/* ============================================
   DROPOFF FIELD - Style identique
============================================ */
.dropoff-location-field {
  display: none !important;
  margin-top: 8px !important;
  opacity: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}

.dropoff-location-field.active {
  display: block !important;
  opacity: 1 !important;
  max-height: 80px !important;
  overflow: visible !important;
  width: 35% !important;
  max-width: 380px !important;
}

.dropoff-location-field .form-field {
  margin-top: 0 !important;
  width: 100% !important;
}

/* ============================================
   FOOTER LINK - Style Booking
============================================ */
.widget-footer-link {
  margin-top: 12px !important;
  text-align: left !important;
  padding-left: 4px !important;
}

.link-entreprise {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #0071C2 !important;
  text-decoration: underline !important;
  transition: all 0.15s ease !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

.link-entreprise:hover {
  color: #003580 !important;
}

/* ============================================
   SÉPARATEURS VERTICAUX (optionnel)
============================================ */
.form-field-location::after,
.form-field-datetime::after {
  content: '' !important;
  position: absolute !important;
  right: 0 !important;
  top: 12px !important;
  bottom: 12px !important;
  width: 1px !important;
  background: #E0E0E0 !important;
}

.form-field:last-of-type::after {
  display: none !important;
}

/* ============================================
   AUTOCOMPLETE DROPDOWN - Style Booking
============================================ */
.autocomplete-dropdown {
  border: 1px solid #BDBDBD !important;
  border-radius: 2px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  background: #FFFFFF !important;
  margin-top: 4px !important;
}

.autocomplete-item {
  padding: 12px 16px !important;
  font-size: 14px !important;
  color: #262626 !important;
  border-bottom: 1px solid #F0F0F0 !important;
}

.autocomplete-item:hover,
.autocomplete-item.selected {
  background: #F0F0F0 !important;
}

.autocomplete-item .name {
  font-weight: 400 !important;
  color: #262626 !important;
  font-size: 14px !important;
}

.autocomplete-item .type {
  font-size: 12px !important;
  color: #6B6B6B !important;
}

/* ============================================
   RESPONSIVE - Maintenir le style
============================================ */
@media (max-width: 992px) {
  .booking-form-horizontal {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  .form-field-location {
    flex: 1 1 100% !important;
  }

  .form-field-datetime {
    flex: 1 1 calc(50% - 2px) !important;
  }

  .btn-search-booking {
    flex: 1 1 100% !important;
  }

  .form-field-location::after,
  .form-field-datetime::after {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .booking-options-bar {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .booking-form-horizontal {
    flex-direction: column !important;
    gap: 4px !important;
  }

  .form-field-location,
  .form-field-datetime {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  .btn-search-booking {
    width: 100% !important;
  }

  .booking-widget-sixt-horizontal {
    padding: 3px !important;
    border-width: 2px !important;
  }
}

/* ============================================
   FIXES ET OVERRIDES FINAUX
============================================ */

/* Supprimer les anciens styles qui interfèrent */
.field-input-booking:focus {
  border-width: 2px !important;
}

/* Assurer que tous les champs ont la même hauteur */
.form-field,
.input-wrapper,
.input-content,
.datetime-display,
.field-input-booking,
.btn-search-booking {
  box-sizing: border-box !important;
}

/* Hidden inputs - ne pas toucher */
.field-input-hidden {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ============================================
   FIN DU STYLE BOOKING.COM EXACT
============================================ */