/* ================================== */
/* PAGES DE RÉSERVATION - CSS SIMPLIFIÉ */
/* ================================== */

/* Container principal - réutilise le style box existant */
.reservation-container,
.reservation-success-container {
	margin: 0 auto;
	max-width: 650px;
}

.reservation-container h2,
.reservation-success-container h2 {
    text-align: center;
    margin-bottom: calc(24rem/16);
}

/* ================================== */
/* ONGLETS RÉSERVATION / ANNULATION  */
/* ================================== */
.reservation-mode-toggle {
    margin-bottom: calc(12rem/16);
    text-align: left;
}

.reservation-mode-toggle a {
	border:none;
    display: inline-flex;
    align-items: center;
    gap: calc(12rem/16);
    padding: calc(6rem/16) calc(12rem/16) calc(6rem/16) 5px;
    text-decoration: none;
    font-weight: bold;
    color: var(--main_text_color);
}
.reservation-mode-toggle p {
    margin: 0 0 calc(12rem/16) 5px;
    font-size: calc(14rem/16);
    line-height: 1.4;
}
.reservation-mode-toggle a:hover,
.reservation-mode-toggle a:focus {
	border:none;
	outline: none;
    color: #000;
}
.reservation-mode-checkbox-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #333;
    background: white;
    position: relative;
}
.reservation-mode-checkbox-icon.checked::after {
    content: '✓';
    position: absolute;
    top: -5px;
    left: 0px;
    font-size: calc(16rem/16);
    color: #f33;
}

/* ================================== */
/* GESTION DES ERREURS DE VALIDATION */
/* ================================== */

/* Encadré d'erreurs générales en haut du formulaire */
.reservation-form-errors {
    background-color: #ffe6e6;
    border: 2px solid #ff4444;
    border-radius: 5px;
    padding: calc(16rem/16);
    margin-bottom: calc(24rem/16);
}

.reservation-form-errors p{
    color: #cc0000;
	margin: 0;
    font-size: calc(16rem/16);
}

/* Champs avec erreurs */
.reservation-form-group.error label {
    color: #cc0000;
    font-weight: bold;
}

.reservation-form-group.error input,
.reservation-form-group.error select,
.reservation-form-group.error textarea {
    border-color: #ff4444;
    background-color: #ffe6e6;
}

.reservation-form-group.error input:focus,
.reservation-form-group.error select:focus,
.reservation-form-group.error textarea:focus {
    border-color: #cc0000;
    outline-color: #cc0000;
}

/* Messages d'erreur sous les champs */
.reservation-field-error {
    margin-top: calc(8rem/16);
    padding: calc(6rem/16);
    background-color: #ffe6e6;
    border: 1px solid #ff4444;
    border-radius: 3px;
}

.reservation-field-error span {
    color: #cc0000;
    font-size: calc(13rem/16);
    font-weight: bold;
    display: block;
}

/* ================================== */
/* STYLES GÉNÉRAUX DU FORMULAIRE */
/* ================================== */

/* Détails de l'événement */
.reservation-event-details,
.reservation-success-details,
.reservation-success-important-info {
    background-color: var(--box_bg_color);
	color: var(--box_text_color);
    border: var(--box_border);
    border-radius: 5px;
    padding: calc(16rem/16);
    margin-bottom: calc(24rem/16);
}

.reservation-event-detail-row,
.reservation-success-detail-row {
    display: flex;
    margin-bottom: calc(8rem/16);
}

.reservation-event-detail-row:last-child,
.reservation-success-detail-row:last-child {
    margin-bottom: 0;
}

.reservation-event-label,
.reservation-success-label {
    font-weight: bold;
    width: calc(90rem/16);
    flex-shrink: 0;
}

.reservation-event-value,
.reservation-success-value {
    flex: 1;
}

/* Formulaire - réutilise les styles existants */
.reservation-form-group {
    margin-bottom: calc(20rem/16);
}

.reservation-form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: calc(8rem/16);
}

/* Champs de saisie - réutilise button/input du CSS principal */
.reservation-form-group input,
.reservation-form-group select,
.reservation-form-group textarea {
	background-color: var(--main_bg_color);
	color: var(--box_text_color);
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 6px calc(12rem/16);
    font-family: inherit;
    box-sizing: border-box;
}

.reservation-form-group input:focus,
.reservation-form-group select:focus,
.reservation-form-group textarea:focus {
    outline: thin solid;
}

/* Select avec flèche */
select {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%23666" d="M2 4l4 4 4-4z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    appearance: none;
    cursor: pointer;
    padding-right: calc(30rem/16);
}

/* Textarea */
textarea {
    min-height: calc(80rem/16);
    resize: vertical;
}

/* Textes d'aide - réutilise le style small existant */
.reservation-form-group small {
    display: block;
    font-size: smaller;
    margin-top: calc(4rem/16);
    color: #666;
    font-style: italic;
}

/* Actions - réutilise le style bouton existant */
.reservation-form-actions,
.reservation-action-buttons {
    display: flex;
	flex-wrap: wrap;
    gap: calc(24rem/16);
    margin-top: calc(24rem/16);
    justify-content: center;
}

/* Surcharge de button-base pour les boutons de réservation */
button.button-base.reservation-btn-reserve,
a.button-base.reservation-btn-primary,
a.button-base.reservation-btn-cancel,
a.button-base.reservation-btn-secondary {
    padding: 8px calc(20rem/16);
    font-size: calc(14rem/16);
    line-height: 1.2;
    min-height: calc(36rem/16);
	height: auto;
}

/* Spécificités pour les boutons primaires */
button.button-base.reservation-btn-reserve,
a.button-base.reservation-btn-primary {
    font-weight: bold;
    text-transform: uppercase;
}

/* Spécificités pour les boutons secondaires */
a.button-base.reservation-btn-cancel,
a.button-base.reservation-btn-secondary {
    text-transform: none;
}

/* Section contact alternatif (email/tel) */
.reservation-alternative-contact {
    text-align: center;
    margin: calc(24rem/16) 0;
    padding-top: calc(20rem/16);
    border-top: 1px solid var(--box_border_color, #ccc);
}
.reservation-alternative-contact p {
    margin-bottom: calc(12rem/16);
    color: #666;
    font-style: italic;
    font-size: smaller;
}
.reservation-alternative-contact a {
	margin: 5px;
}

/* ---------------------------------- */
/* Page de succès spécifique */
/* ---------------------------------- */
.reservation-success-container h2 {
    color: #006600;
}
.reservation-success-details h3,
.reservation-success-important-info h3 {
	margin-top: 0;
}
.reservation-success-important-info {
    /*background-color: #f0f8ff;
    border-color: #b3d9ff; */
    background: none;
    border: none;
}

/* ================================== */
/* MEDIA QUERY - ÉCRANS > 720px */
/* ================================== */

@media screen and (min-width: 720px) {
	.reservation-event-details,
	.reservation-success-details,
	.reservation-success-important-info {
		padding: calc(24rem/16);
	}
	.reservation-event-label,
	.reservation-success-label {
		font-weight: bold;
		width: calc(120rem/16);
		flex-shrink: 0;
	}

    /* Formulaire en 2 colonnes : label | champ */
    .reservation-form-group {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        margin-bottom: 1.5rem;
    }
    
    .reservation-form-group label {
        width: 25%;
        margin-bottom: 0;
        margin-right: 1rem;
        flex-shrink: 0;
    }
    
    .reservation-form-group input,
    .reservation-form-group select,
    .reservation-form-group textarea {
        width: 70%;
        flex: 1;
    }
    
    /* Texte explicatif sous le champ, aligné avec le champ */
    .reservation-form-group small {
        width: 70%;
        margin-left: calc(25% + 1rem); /* Même décalage que le champ */
        margin-top: 0.25rem;
    }
    
    /* Messages d'erreur alignés avec les champs */
    .reservation-field-error {
        width: 70%;
        margin-left: calc(25% + 1rem); /* Même décalage que le champ */
        margin-top: calc(8rem/16);
    }
    
    /* Ajustement spécifique pour le textarea */
    .reservation-form-group textarea {
        min-height: 5rem;
    }

	.reservation-form-actions {
        width: 70%;
		margin-top: calc(36rem/16);
        margin-left: calc(25% + 1rem); /* Même décalage que le champ */
	    justify-content: left;
    }
 
}