/* =========================================================
   Au Vieux Duluth – Formulaires de réservation (CF7)
   Fichier : astra-child/css/styles-forms.css
   Portée : section #reservations des pages de restaurant
   ========================================================= */

/* 1. Lisibilité sur fond sombre */
#reservations .wpcf7 label,
#reservations .wpcf7 legend { color: #FFFFFF; font-weight: 600; }
#reservations .avd-required-note { color: #FFFFFF; font-size: 14px; }
#reservations .wpcf7 input[type="submit"] { color: #FFFFFF; border-color: #FFFFFF; }
#reservations .wpcf7 input[type="submit"]:hover,
#reservations .wpcf7 input[type="submit"]:focus { color: #000000; background-color: #FFFFFF; border-color: #FFFFFF; }
#reservations .wpcf7 .wpcf7-response-output { margin: 16px 0 0; color: #FFFFFF; }

/* 2. Grille : 2 colonnes (ordinateur, iPad), 1 colonne (iPhone) */
#reservations .avd-resa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 16px; margin: 0; text-align: left; }
#reservations .avd-resa p { margin: 0; }
#reservations .avd-field { min-width: 0; }
#reservations .avd-field label { display: block; }
#reservations .avd-full { grid-column: 1 / -1; }
#reservations .avd-submit { text-align: center; }
#reservations .avd-submit p { position: relative; }
#reservations .avd-submit .wpcf7-spinner { position: absolute; top: 5px; margin: 0 0 0 12px; } /* l'icône de chargement ne décentre plus le bouton */
@media (max-width: 767px) { #reservations .avd-resa { grid-template-columns: 1fr; } }

/* 2b. Téléphone + poste : la colonne du téléphone est partagée 70/30, aussi sur iPhone */
#reservations .avd-phone-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); column-gap: 12px; }
#reservations .avd-phone-row > * { min-width: 0; }

/* 3. Messages d'erreur (heure : un seul message pour le bloc ; téléphone : 10 chiffres) */
#reservations .avd-error { margin-top: 6px; color: #DC3232; }
#reservations .avd-error[hidden] { display: none; }
#reservations .wpcf7 input[name="your-phone"][aria-invalid="true"] { border-color: #DC3232; }

/* 4. Date : annuler le style natif (iOS Safari) et reprendre celui des autres champs */
#reservations .wpcf7 input[type="date"] { -webkit-appearance: none; appearance: none; display: block; box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; height: 52.4px; margin: 0; padding: 12px; font-family: inherit; font-size: 16px; font-weight: 400; line-height: 26.4px; color: #666666; text-align: left; background-color: #FAFAFA; border: 1px solid #DDDDDD; border-radius: 2px; box-shadow: none; }
#reservations .wpcf7 input[type="date"]::-webkit-date-and-time-value { margin: 0; text-align: left; }
#reservations .wpcf7 input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }
#reservations .wpcf7 input[type="date"]:focus { border-color: #283D70; box-shadow: 0 0 0 1px #283D70; outline: 0; }

/* 5. Heure : HH : MM (FR 24 h), HH : MM AM/PM (EN 12 h), toujours sur une ligne */
#reservations .avd-time { min-width: 0; margin: 0; padding: 0; border: 0; }
#reservations .avd-time legend { float: none; width: 100%; margin-bottom: 6px; padding: 0; }
#reservations .avd-time-inputs p { display: flex; flex-wrap: nowrap; align-items: flex-start; }
#reservations .avd-time .wpcf7-form-control-wrap { display: block; flex: 0 1 auto; width: 95px; min-width: 56px; }
#reservations .avd-time-ampm { flex: 0 1 84px; min-width: 62px; margin-left: 6px; }
#reservations .avd-time-ampm .wpcf7-form-control-wrap { width: 100%; min-width: 0; }
#reservations .avd-time input { text-align: center; }
#reservations .avd-time-sep { flex: 0 0 auto; margin: 0 5px; line-height: 52px; font-weight: 600; color: #FFFFFF; }
#reservations .avd-time .wpcf7-not-valid-tip { display: none !important; }

/* 6. Champs numériques : flèches personnalisées */
#reservations .avd-number { display: grid; grid-template-columns: minmax(0, 1fr) 32px; box-sizing: border-box; width: 100%; height: 52px; overflow: hidden; background: #FAFAFA; border: 1px solid #DDDDDD; border-radius: 2px; }
#reservations .avd-number:focus-within { border-color: #283D70; box-shadow: 0 0 0 1px #283D70; }
#reservations .avd-number:has(.wpcf7-not-valid),
#reservations .avd-number:has([aria-invalid="true"]) { border-color: #DC3232; }
#reservations .avd-number input[type="number"] { -moz-appearance: textfield; appearance: textfield; box-sizing: border-box; width: 100%; height: 100%; min-width: 0; margin: 0; padding: 0 8px; background: transparent; border: 0; border-radius: 0; box-shadow: none; outline: 0; }
#reservations .avd-number input[type="number"]::-webkit-inner-spin-button,
#reservations .avd-number input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#reservations .avd-time .avd-number { grid-template-columns: minmax(0, 1fr) 24px; }
#reservations .avd-time .avd-number input[type="number"] { padding: 0 4px; }
#reservations .avd-number__controls { display: grid; grid-template-rows: 1fr 1fr; border-left: 1px solid #DDDDDD; }
#reservations .avd-number .avd-number__step { position: relative; -webkit-appearance: none; appearance: none; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; color: #4C4C4C; background: #FAFAFA; border: 0; border-radius: 0; box-shadow: none; cursor: pointer; transition: background-color 0.15s linear, color 0.15s linear; }
#reservations .avd-number .avd-number__step--up { border-bottom: 1px solid #DDDDDD; }
#reservations .avd-number .avd-number__step::before { content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }
#reservations .avd-number .avd-number__step--up::before { transform: translate(-50%, -25%) rotate(-45deg); }
#reservations .avd-number .avd-number__step--down::before { transform: translate(-50%, -75%) rotate(135deg); }
#reservations .avd-number .avd-number__step:focus { color: #4C4C4C; background: #FAFAFA; outline: 0; }
#reservations .avd-number .avd-number__step:hover { color: #283D70; background: #E0DDD5; }
#reservations .avd-number .avd-number__step:active { color: #FFFFFF; background: #283D70; }
#reservations .avd-number .avd-number__step:disabled { color: #BBBBBB; background: #FAFAFA; cursor: default; }

/* 7. AM/PM (EN) : même style et même hauteur que les autres champs */
#reservations .avd-time select[name="reservation-ampm"] { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 100%; height: 52px; margin: 0; padding: 0 28px 0 8px; font-family: inherit; font-size: 16px; line-height: normal; color: #666666; background-color: #FAFAFA; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234C4C4C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient(#DDDDDD, #DDDDDD); background-repeat: no-repeat, no-repeat; background-size: 12px 7px, 1px 100%; background-position: right 6px center, right 24px top; border: 1px solid #DDDDDD; border-radius: 2px; box-shadow: none; cursor: pointer; }
#reservations .avd-time select[name="reservation-ampm"]:hover { background-color: #F2F1EC; }
#reservations .avd-time select[name="reservation-ampm"]:focus { border-color: #283D70; box-shadow: 0 0 0 1px #283D70; outline: 0; }