/* RESPONSIVE OVERRIDE - À ajouter APRÈS votre CSS existant */
/* Ce fichier corrige les problèmes mobiles sans modifier BookAppointment.css */

/* Force tout en responsive */
* {
  box-sizing: border-box !important;
}

/* Conteneur principal mobile */
@media (max-width: 768px) {
  .max-w-4xl {
    padding: 16px 12px 32px !important;
    max-width: 100% !important;
  }

  /* Titre principal responsive */
  h1.book-title {
    font-size: 1.75rem !important;
    margin-bottom: 24px !important;
  }

  /* Formulaire container mobile */
  .booking-form-container {
    padding: 24px 16px !important;
    margin: 0 !important;
    border-radius: 8px !important;
  }

  /* Grille mobile - force 1 colonne */
  .grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Champs de saisie mobile */
  input,
  select,
  textarea {
    padding: 14px 16px !important;
    font-size: 16px !important; /* Évite le zoom iOS */
    width: 100% !important;
  }

  /* Section titles mobile */
  .section-title {
    font-size: 1.2rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .section-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.9rem !important;
  }

  /* Bouton submit mobile */
  .submit-button {
    width: 100% !important;
    padding: 16px 24px !important;
    font-size: 1rem !important;
  }

  /* Payment info box mobile */
  .payment-info-box {
    padding: 20px 16px !important;
    margin: 20px 0 !important;
  }

  /* Actions de succès mobile */
  .success-actions {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .download-button,
  .back-button {
    width: 100% !important;
    padding: 14px 24px !important;
  }

  /* Confirmation mobile */
  .confirmation-container {
    padding: 16px 12px !important;
  }

  .confirmation-card {
    padding: 24px 16px !important;
  }

  .confirmation-title {
    font-size: 1.5rem !important;
  }

  .confirmation-icon {
    font-size: 3rem !important;
  }

  /* Date picker mobile override */
  .react-datepicker {
    width: 100% !important;
    max-width: 320px !important;
    flex-direction: column !important;
  }

  .react-datepicker__time-container {
    width: 100% !important;
    border-left: none !important;
    border-top: 2px solid var(--copper) !important;
    max-height: 180px !important;
  }

  .react-datepicker__time-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    height: 150px !important;
    padding: 8px !important;
  }

  .react-datepicker__time-list-item {
    width: 100% !important;
    font-size: 0.7rem !important;
    padding: 6px 2px !important;
    margin: 0 !important;
  }

  .react-datepicker-popper {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100vw - 20px) !important;
    max-width: 320px !important;
  }
}

/* Petits mobiles */
@media (max-width: 480px) {
  .max-w-4xl {
    padding: 12px 8px 24px !important;
  }

  h1.book-title {
    font-size: 1.5rem !important;
  }

  .booking-form-container {
    padding: 20px 12px !important;
  }

  input,
  select,
  textarea {
    padding: 12px 14px !important;
  }

  .react-datepicker__time-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .react-datepicker {
    max-width: 280px !important;
  }
}

/* Force viewport pour éviter le zoom */
@media (max-width: 768px) {
  body {
    -webkit-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
  }

  /* Évite le scroll horizontal */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Force les éléments à rester dans la viewport */
  .booking-form-container,
  .confirmation-card,
  .payment-info-box {
    max-width: 100% !important;
    overflow: hidden !important;
  }
}

/* Force les boutons touch-friendly */
@media (hover: none) and (pointer: coarse) {
  button,
  .btn,
  input[type="button"],
  input[type="submit"],
  select {
    min-height: 44px !important;
    min-width: 44px !important;
  }
}