/* ===========================
   UI Réservation – Casa Due
   =========================== */

/* ====== POPUP (statut d’envoi) ====== */
.res-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .4);
  z-index: 9999;
}
.res-modal[hidden] { display: none; }

.res-card {
  background: #fff;
  border-radius: 12px;
  max-width: 480px;
  width: 92%;
  padding: 22px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  text-align: center;
  border-left: 6px solid transparent;
}
.res-title { margin: 0 0 8px 0; font-size: 20px; }
.res-msg   { margin: 0 0 16px 0; }

.res-close {
  background: #333;
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
}

.res-card.success { border-left-color: #2e7d32; }
.res-card.success .res-title { color: #2e7d32; }

.res-card.error { border-left-color: #c62828; }
.res-card.error .res-title { color: #c62828; }

/* ====== FORMULAIRE (section #reservation) ====== */

/* Le conteneur .ico-input sert d’ancre pour l’icône à droite */
#reservation .ico-input { position: relative; cursor: text; }

/* Masque l’icône native du datepicker (on garde la zone cliquable) */
#reservation input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;               /* invisible (on n’en voit plus deux) */
  width: 28px;
  height: 28px;
  cursor: pointer;
}
/* Harmonise l’apparence cross-browser */
#reservation input[type="date"] {
  -webkit-appearance: textfield;
  appearance: auto;
}

/* Icônes <i> du thème : alignement parfait à droite, cliquable au travers */
#reservation .ico-input i {
  position: absolute;
  right: 12px;
  bottom: 14px;             /* ancré à l’input (robuste même si label au-dessus) */
  top: auto;
  transform: none;
  pointer-events: none;     /* le clic passe à l’input */
  opacity: .7;
}

/* Réserve la place à droite pour l’icône */
#reservation .ico-input input,
#reservation .ico-input select {
  padding-right: 40px;
}

/* Style du <select> (Heure) pour matcher les inputs */
#reservation .block-input select {
  width: 100%;
  border-radius: 6px;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  padding: 12px 40px 12px 12px; /* espace icône à droite */
  line-height: 1.2;
}

/* Retire les flèches des inputs number (Nombre de personnes) */
#reservation input[type=number]::-webkit-outer-spin-button,
#reservation input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#reservation input[type=number] { -moz-appearance: textfield; }

/* Mobile : ajuste légèrement l’alignement vertical de l’icône */
@media (max-width: 768px) {
  #reservation .ico-input i { bottom: 12px; }
}

/* --- PATCH cross-OS : éviter les doubles icônes date/heure --- */

/* 1) Cache l’icône décorative du thème pour les champs Date / Heure */
#reservation .ico-input:has(input[type="date"]) i,
#reservation .ico-input:has(input[type="time"]) i,
#reservation .ico-input:has(select#time) i {
  display: none !important;
}

/* 2) Comme on n’affiche plus l’icône décorative, on réduit le padding droit */
#reservation .ico-input:has(input[type="date"]) input,
#reservation .ico-input:has(input[type="time"]) input,
#reservation .ico-input:has(select#time) select {
  padding-right: 12px; /* au lieu de 40px */
}

/* 3) Laisse l’icône native visible (utile sur Safari/macOS) */
#reservation input[type="date"]::-webkit-calendar-picker-indicator,
#reservation input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 1;
  display: block;
}

/* --- États d’erreur formulaires réservation --- */
.reservation-form .input-invalid input,
.reservation-form .input-invalid select,
.reservation-form .input-invalid textarea {
  border-color: #d9534f !important; /* rouge bootstrap-like */
  box-shadow: 0 0 0 2px rgba(217,83,79,0.08);
}

.reservation-form .field-error {
  display: block;
  margin-top: 6px;
  font-size: 0.9em;
  line-height: 1.3;
  color: #d9534f;
}

/* Messages globaux déjà présents dans ton HTML */
.reservation-form .success-msg,
.reservation-form .error-msg {
  display: none;
  margin-top: 18px;
}

.reservation-form .success-msg.active,
.reservation-form .error-msg.active {
  display: block;
}

/* États d’erreur */
.reservation-form .input-invalid input,
.reservation-form .input-invalid select,
.reservation-form .input-invalid textarea {
  border-color: #d9534f !important;
  box-shadow: 0 0 0 2px rgba(217,83,79,0.08);
}

.reservation-form .field-error {
  display: block;
  margin-top: 6px;
  font-size: .9em;
  line-height: 1.3;
  color: #d9534f;
}

/* Messages globaux existants */
.reservation-form .success-msg,
.reservation-form .error-msg { display: none; margin-top: 18px; }
.reservation-form .success-msg.active,
.reservation-form .error-msg.active { display: block; }

/* Option : masquer toute popup résiduelle si un script tente de l’ouvrir */
.res-modal[hidden] { display: none !important; }

/* S'assurer que les deux types de conteneurs peuvent servir d'offset parent */
.block-input.ico-input,
.column-inner.ico-input { position: relative; }


/* (déjà en place) on peut continuer à masquer les flèches des <input type=number> */