/**
 * Hotel Booking Form - Stili CSS
 * 
 * Questo file contiene tutti gli stili per il form di prenotazione hotel.
 * Gli stili replicano il design del form originale con tema scuro e layout responsive.
 * 
 * Sezioni principali:
 * - Reset e variabili CSS (righe 10-30)
 * - Stili container principale (righe 35-60)
 * - Stili campi form (righe 65-120)
 * - Stili pulsante prenotazione (righe 125-160)
 * - Responsive design (righe 165-200)
 * - Stati di caricamento ed errore (righe 205-230)
 */

/* Variabili CSS per consistenza del design */
:root {
  --primary-bg: #2c3e50;
  --secondary-bg: #34495e;
  --accent-color: #e8d5b7;
  --text-light: #ecf0f1;
  --text-dark: #2c3e50;
  --border-color-cutom: #4a5f7a;
  --hover-color: #d4c4a8;
  --error-color: #e74c3c;
  --success-color: #27ae60;
  --border-radius-custom: 300px;
  --transition: all 0.3s ease;
}

/* Reset e stili base */
.hotel-booking-form-container * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Container principale del form */
.hotel-booking-form-container {
  border-radius: var(--border-radius-custom);
  padding: 20px;
  padding-bottom: 30px;
  max-width: 1200px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Form principale */
.hotel-booking-form {
  width: 100%;
}

/* Riga dei campi form */
.form-row {
  display: flex;
  gap: 15px;
  align-items: end;
  flex-wrap: wrap;
}

/* Singolo campo form */
.form-field {
  flex: 1;
  min-width: 150px;
  display: flex;
  flex-direction: column;
}

/* Etichette dei campi */
.form-field label {
  color: var(--border-color-cutom);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  margin-left: 10px;
  text-transform: capitalize;
  opacity: 1;
}

/* Stili input e select */
.form-field input,
.form-field select {
  background: var(--primary-bg);
  border: 2px solid var(--border-color-cutom);
  border-radius: var(--border-radius-custom);
  color: var(--text-light);
  font-size: 16px;
  padding: 12px 15px;
  transition: var(--transition);
  outline: none;
  height: 48px;
}

/* Stati focus per input e select */
.form-field input:focus,
.form-field select:focus {
  box-shadow: 0 0 0 3px rgba(232, 213, 183, 0.2);
}

/* Stili per le opzioni select */
.form-field select option {
  background: var(--secondary-bg);
  color: var(--text-light);
  padding: 10px;
}

/* Placeholder styling */
.form-field input::placeholder {
  color: rgba(236, 240, 241, 0.6);
}

/* Campo submit con pulsante */
.form-submit {
  flex: 0 0 auto;
  min-width: 160px;
}

/* Pulsante Reserve now */
.reserve-btn {
  background: var(--accent-color);
  border: none;
  border-radius: var(--border-radius-custom);
  color: var(--text-dark);
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 24px;
  transition: var(--transition);
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-transform: capitalize;
}

/* Effetti hover per il pulsante */
.reserve-btn:hover {
  background: var(--hover-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(232, 213, 183, 0.3);
}

/* Freccia nel pulsante */
.btn-arrow {
  font-size: 18px;
  transition: var(--transition);
}

.reserve-btn:hover .btn-arrow {
  transform: translateX(3px);
}

/* Stati di caricamento */
.booking-loading {
  text-align: center;
  color: var(--accent-color);
  font-weight: 500;
  margin-top: 15px;
  padding: 10px;
  background: rgba(232, 213, 183, 0.1);
  border-radius: var(--border-radius-custom);
}

/* Messaggi di errore */
.booking-error {
  background: rgba(231, 76, 60, 0.1);
  border: 1px solid var(--error-color);
  border-radius: var(--border-radius-custom);
  color: var(--error-color);
  margin-top: 15px;
  padding: 12px;
  text-align: center;
  font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
    gap: 20px;
  }

  .form-field {
    min-width: 100%;
  }

  .hotel-booking-form-container {
    padding: 15px;
    margin: 10px;
  }

  .form-field input,
  .form-field select,
  .reserve-btn {
    font-size: 16px;
    /* Previene zoom su iOS */
  }
}

@media (max-width: 480px) {
  .hotel-booking-form-container {
    width: 80vw;
    padding: 0 !important;
  }

  .form-field label {
    font-size: 13px;
  }

    .form-field input, .form-field input[type="date"]{
    padding: 12px !important;
    width: 80vw !important;
    margin: 0 auto !important;
  }

  .reserve-btn {
    padding: 14px 20px;
    font-size: 15px;
  }
}

/* Tema chiaro alternativo */
.hotel-booking-form-container[data-theme="light"] {
  --primary-bg: #ffffff;
  --secondary-bg: #f8f9fa;
  --text-light: #2c3e50;
  --border-color: #dee2e6;
  background: var(--primary-bg);
  color: var(--text-light);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Animazioni di caricamento */
@keyframes pulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

.booking-loading span {
  animation: pulse 1.5s infinite;
}

/* Accessibilità */
.form-field input:focus,
.form-field select:focus,
.reserve-btn:focus {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

/* Stili per browser specifici */
.form-field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

.form-field select::-ms-expand {
  display: none;
}

/* Hotel Booking - CSS */

/* Visually hidden (accessibile) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Stile placeholder (nota: su alcuni browser i campi date ignorano il placeholder) */
.hotel-booking-form input::placeholder {
  color: #9aa0a6;
}

.hotel-booking-form input:focus::placeholder {
  color: #b0b5ba;
}