/*
 * Formulaire de demande de réservation.
 */

/* Seul endroit qui fixe la largeur de tout le module (sélecteur de formule,
   calendrier, formulaire) : ainsi les trois se valent toujours la même
   largeur, quelle que soit la taille de police héritée du thème à cet
   endroit de la page. En rem plutôt qu'em, justement pour rester stable
   face à d'éventuelles différences de taille de police en cascade entre
   les blocs enfants. */
.aspacam-reservation {
	max-width: 32rem;
}

.aspacam-form {
	width: 100%;
	box-sizing: border-box;
	margin-top: 1em;
}

.aspacam-form p {
	margin: 0.75em 0;
}

.aspacam-form label {
	font-weight: bold;
}

.aspacam-form input[type='text'],
.aspacam-form input[type='email'],
.aspacam-form input[type='tel'],
.aspacam-form input[type='number'] {
	width: 100%;
	max-width: 24em;
	box-sizing: border-box;
	padding: 0.4em 0.6em;
	font-size: 1em;
	border: 1px solid #888;
}

.aspacam-form input[type='checkbox'] {
	margin-right: 0.4em;
}

.aspacam-form__hint {
	font-size: 0.85em;
	color: #555;
	font-style: italic;
}

.aspacam-form__recap {
	margin: 1em 0;
	padding: 0.75em 1em;
	border: 1px solid #999;
	background: #f5f5f5;
}

.aspacam-form__recap p {
	margin: 0.3em 0;
}

.aspacam-form__submit {
	min-height: 2.75em;
	padding: 0.5em 1.2em;
	font-size: 1em;
	border: 1px solid #2c7a2c;
	background: #eaffea;
	cursor: pointer;
}

.aspacam-form__submit:disabled {
	opacity: 0.5;
	cursor: default;
	border-color: #999;
	background: #eee;
}

.aspacam-form__error {
	padding: 0.6em 0.8em;
	border: 1px solid #a51d2d;
	background: #fbdada;
	color: #7a1420;
}

.aspacam-form__confirmation {
	padding: 0.75em 1em;
	border: 1px solid #2c7a2c;
	background: #eaffea;
}

.aspacam-form__payment {
	margin: 1em 0;
	padding: 0.75em 1em;
	border: 1px solid #999;
	background: #fff;
}

/* Centre chaque bouton dans le bloc paiement -- un <a>/<button> en
   display:inline-block ne se centre pas tout seul dans un <p>, constaté à
   l'écran (bouton collé à gauche du cadre). */
.aspacam-form__payment-action {
	margin: 0.75em 0;
	text-align: center;
}

/*
 * Le lien et le bouton partagent la même largeur, le même alignement de
 * texte et la même bordure -- constatés différents à l'écran sur
 * téléphone : le lien s'étalait sur toute la largeur disponible dès que
 * son texte ne tenait plus sur une ligne (comportement par défaut d'un
 * display:inline-block forcé au repli), tandis que le bouton gardait sa
 * largeur minimale propre ; l'un avait un texte centré (comportement
 * natif d'un <button>), l'autre aligné à gauche. width: 100% et
 * text-align: center, posés ici une seule fois pour les deux, règlent les
 * deux écarts en même temps plutôt que de les corriger séparément.
 */
.aspacam-form__payment-link,
.aspacam-form__copy-reference {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 2.75em;
	padding: 0.6em 1em;
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

/* Couleur distincte du vert de .aspacam-form__confirmation qui l'entoure
   -- un bouton dans le même vert que son cadre ne ressort pas comme
   l'action attendue, constaté à l'écran. Plein pour l'action principale
   (aller payer), contour pour l'action de confort (copier) -- même
   bordure des deux côtés (couleur et épaisseur), pour rester la « même
   bordure » demandée tout en gardant la hiérarchie visible. */
.aspacam-form__payment-link {
	border: 1px solid #2271b1;
	background: #2271b1;
	color: #fff;
}

.aspacam-form__copy-reference {
	border: 1px solid #2271b1;
	background: #fff;
	color: #2271b1;
}

.aspacam-form__payment-note {
	font-size: 0.9em;
	color: #444;
}