/**
 * Booking form (formulaire-consigne) — scoped to #hp-booking-root
 * Uses Tailwind for layout; these are overrides and form-specific styles.
 */
#hp-booking-root.hp-booking-page {
  font-family: 'Montserrat', -apple-system, sans-serif;
  background-color: #ffffff;
  padding: 1.5rem 0 3rem;
  min-height: 50vh;
}

/* Initialize all inputs with default state on page load */
#hp-booking-root input:not(.input-filled):not(.input-error):not(.input-default),
#hp-booking-root select:not(.input-filled):not(.input-error):not(.input-default) {
  border-color: #d1d5dc;
  background-color: #f9fafb;
  transition: all 0.2s ease;
}
#hp-booking-root .baggage-option {
  transition: all 0.3s ease;
  border: 2px solid #e5e7eb;
}
#hp-booking-root .baggage-option:hover {
  border-color: #d1d5db;
}
#hp-booking-root .baggage-option.selected {
  border-color: #FFC107;
  background-color: #fef9e7;
}
#hp-booking-root .btn-hover {
  transition: all 0.3s ease;
}
#hp-booking-root .btn-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
#hp-booking-root .input-style {
  border: 1px solid #e5e7eb !important;
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;
  transition: all 0.2s ease;
}
#hp-booking-root .input-style:focus {
  border-color: #FFC107 !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.2) !important;
}

/* ============================================
   FORM VALIDATION STATES
   ============================================ */

/* ⚪ DEFAULT STATE - Gray (initial/load state) */
#hp-booking-root .input-style.input-default,
#hp-booking-root input.input-default,
#hp-booking-root select.input-default {
  border-color: #d1d5dc !important;
  background-color: #f9fafb !important;
  box-shadow: none !important;
}

#hp-booking-root .input-style.input-default:focus,
#hp-booking-root input.input-default:focus,
#hp-booking-root select.input-default:focus {
  border-color: #9ca3af !important;
  box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.2) !important;
}

/* 🟡 FILLED STATE - Yellow (valid filled field) */
#hp-booking-root .input-style.input-filled,
#hp-booking-root input.input-filled,
#hp-booking-root select.input-filled {
  border-color: #FFC107 !important;
  background-color: #fef9e7 !important;
  box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.15) !important;
}

#hp-booking-root .input-style.input-filled:focus,
#hp-booking-root input.input-filled:focus,
#hp-booking-root select.input-filled:focus {
  border-color: #FFB300 !important;
  box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.25) !important;
}

/* 🔴 ERROR STATE - Red (invalid/empty on validation) */
#hp-booking-root .input-style.input-error,
#hp-booking-root input.input-error,
#hp-booking-root select.input-error {
  border-color: #dc2626 !important;
  background-color: #fef2f2 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
  animation: hp-booking-shake 0.4s ease-in-out;
}

#hp-booking-root .input-style.input-error:focus,
#hp-booking-root input.input-error:focus,
#hp-booking-root select.input-error:focus {
  border-color: #b91c1c !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25) !important;
}

/* Error message styling */
#hp-booking-root .error-message {
  color: #dc2626;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

#hp-booking-root .error-message.hidden {
  display: none;
}

/* Field label states */
#hp-booking-root .label-error {
  color: #dc2626 !important;
}

#hp-booking-root .label-filled {
  color: #92400e !important;
}

/* Shake animation for error state */
@keyframes hp-booking-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* Select dropdown base styles - must come BEFORE validation states */
#hp-booking-root .custom-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  background-color: transparent !important;
  padding-right: 2.5rem !important;
}

/* Select dropdown validation states - override base after */
#hp-booking-root .custom-select.input-default {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

#hp-booking-root .custom-select.input-filled {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2392400e' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

#hp-booking-root .custom-select.input-error {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23b91c1c' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}
#hp-booking-root .custom-spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #FFC107;
  border-radius: 50%;
  width: 1.5em;
  height: 1.5em;
  animation: hp-booking-spin 1s linear infinite;
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5em;
}
@keyframes hp-booking-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
#hp-booking-root .input-completed {
  border-color: #FFC107 !important;
  box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.2) !important;
  background-color: #fef9e7 !important;
}
#hp-booking-root .delete-item-btn {
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
}
#hp-booking-root .delete-item-btn:hover {
  color: #dc2626;
}
#baggage-tooltip {
  transition: opacity 0.3s;
  pointer-events: none;
  max-width: 200px;
  text-align: center;
}
#hp-booking-root .option-header .chevron-icon {
  transition: transform 0.3s ease;
}
#hp-booking-root .option-header.open .chevron-icon {
  transform: rotate(180deg);
}
@keyframes hp-booking-pulse-bg {
  0% { background-color: #fef9e7; }
  50% { background-color: #fef2d2; }
  100% { background-color: #fef9e7; }
}
#hp-booking-root .cart-updated {
  animation: hp-booking-pulse-bg 0.5s ease-in-out;
}
#hp-booking-root .baggage-option.selected .w-20.h-20 {
  background-color: #fef9e7 !important;
}
@media (max-width: 768px) {
  #hp-booking-root .max-w-6xl { padding-left: 1rem; padding-right: 1rem; }
}