/* ==========================================================================
   Formulaires WooCommerce — rendu « Bootstrap classique »
   (label au-dessus du champ, champs pleine largeur, marges uniformes)

   Ce fichier DOIT être chargé après bootstrap.min.css et woocommerce-pluscom.css
   (cf. wpdocs_byzegut_scripts() dans functions.php).

   Problème corrigé : Bootstrap 4 définit `.form-row { display:flex }` pour son
   propre système de gouttières. WooCommerce utilise la MÊME classe `.form-row`
   sur chaque <p> de champ. Résultat : le <label> et le <span
   class="woocommerce-input-wrapper"> devenaient des flex-items posés côte à
   côte, et les champs se retrouvaient écrasés à la largeur de leur contenu.
   ========================================================================== */

:root {
	--wcf-color-text: #495057;
	--wcf-color-label: #212529;
	--wcf-color-border: #ced4da;
	--wcf-color-border-focus: #80bdff;
	--wcf-color-muted: #6c757d;
	--wcf-color-invalid: #dc3545;
	--wcf-color-valid: #28a745;
	--wcf-radius: .25rem;
	--wcf-height: calc(1.5em + .75rem + 2px);
	--wcf-row-gap: 1rem;
}

/* --------------------------------------------------------------------------
   1. Neutralisation du .form-row de Bootstrap sur les formulaires WooCommerce
   -------------------------------------------------------------------------- */

.woocommerce form .form-row,
.woocommerce-page form .form-row,
.woocommerce-checkout form .form-row,
.woocommerce-account form .form-row,
.woocommerce .form-row {
	display: block;
	margin: 0 0 var(--wcf-row-gap);
	padding: 0;
}

/* Le <span> introduit par woocommerce_form_field() doit occuper toute la ligne */
.woocommerce form .form-row .woocommerce-input-wrapper,
.woocommerce-page form .form-row .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

/* --------------------------------------------------------------------------
   2. Labels : toujours au-dessus du champ
   -------------------------------------------------------------------------- */

.woocommerce form .form-row label,
.woocommerce-page form .form-row label,
.woocommerce-account form .form-row label {
	display: block;
	float: none;
	width: 100%;
	margin: 0 0 .375rem;
	padding: 0;
	font-weight: 600;
	line-height: 1.5;
	color: var(--wcf-color-label);
	text-align: left;
}

/* Astérisque « champ obligatoire » */
.woocommerce form .form-row .required,
.woocommerce form .form-row abbr.required {
	color: var(--wcf-color-invalid);
	border: 0;
	text-decoration: none;
}

.woocommerce form .form-row .optional {
	color: var(--wcf-color-muted);
	font-weight: 400;
}

/* --------------------------------------------------------------------------
   3. Champs : input / select / textarea uniformisés
   -------------------------------------------------------------------------- */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="tel"],
.woocommerce form .form-row input[type="url"],
.woocommerce form .form-row input[type="password"],
.woocommerce form .form-row input[type="number"],
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row select,
.woocommerce-page form .form-row textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: .375rem .75rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--wcf-color-text);
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid var(--wcf-color-border);
	border-radius: var(--wcf-radius);
	box-shadow: none;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* Hauteur commune input / select (pas le textarea) */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row select {
	height: var(--wcf-height);
}

/* Le textarea doit rester libre en hauteur et redimensionnable verticalement */
.woocommerce form .form-row textarea,
.woocommerce form .form-row textarea.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row textarea.input-text {
	height: auto;
	min-height: 7rem;
	overflow: auto;
	resize: vertical;
	white-space: pre-wrap;
}

.woocommerce form .form-row input.input-text::placeholder,
.woocommerce form .form-row textarea::placeholder {
	color: var(--wcf-color-muted);
	opacity: 1;
}

/* Focus façon Bootstrap */
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce-page form .form-row input.input-text:focus,
.woocommerce-page form .form-row select:focus,
.woocommerce-page form .form-row textarea:focus {
	color: var(--wcf-color-text);
	background-color: #fff;
	border-color: var(--wcf-color-border-focus);
	outline: 0;
	box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
}

/* États de validation WooCommerce (équivalents .is-invalid / .is-valid) */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid textarea,
.woocommerce form .form-row.woocommerce-invalid .select2-selection--single {
	border-color: var(--wcf-color-invalid);
}

.woocommerce form .form-row.woocommerce-validated input.input-text,
.woocommerce form .form-row.woocommerce-validated select,
.woocommerce form .form-row.woocommerce-validated textarea,
.woocommerce form .form-row.woocommerce-validated .select2-selection--single {
	border-color: var(--wcf-color-valid);
}

/* Message d'aide sous un champ */
.woocommerce form .form-row .description {
	display: block;
	margin-top: .25rem;
	font-size: .875rem;
	color: var(--wcf-color-muted);
}

/* --------------------------------------------------------------------------
   4. Cases à cocher et boutons radio (label à droite, pas au-dessus)
   -------------------------------------------------------------------------- */

.woocommerce form .form-row label.checkbox,
.woocommerce form .form-row label.radio,
.woocommerce form .form-row .woocommerce-form__label-for-checkbox,
.woocommerce .woocommerce-form__label-for-checkbox,
.woocommerce-page .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	width: auto;
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}

.woocommerce form .form-row input[type="checkbox"],
.woocommerce form .form-row input[type="radio"],
.woocommerce .woocommerce-form__label-for-checkbox input[type="checkbox"],
.woocommerce-page .woocommerce-form__label-for-checkbox input[type="checkbox"] {
	display: inline-block;
	flex: 0 0 auto;
	width: auto;
	height: auto;
	margin: 0 .5rem 0 0;
	padding: 0;
}

/* Titre « Expédier à une adresse différente ? » : la case reste alignée au titre */
.woocommerce #ship-to-different-address .woocommerce-form__label-for-checkbox {
	font-weight: inherit;
	font-size: inherit;
	color: inherit;
}

/* --------------------------------------------------------------------------
   5. Gabarit deux colonnes (Prénom / Nom, Code postal / Ville…)
   -------------------------------------------------------------------------- */

.woocommerce form .form-row-wide,
.woocommerce-page form .form-row-wide {
	clear: both;
	float: none;
	width: 100%;
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last,
.woocommerce-page form .form-row-first,
.woocommerce-page form .form-row-last {
	width: 48.5%;
	overflow: visible;
}

.woocommerce form .form-row-first,
.woocommerce-page form .form-row-first {
	float: left;
	clear: both;
}

.woocommerce form .form-row-last,
.woocommerce-page form .form-row-last {
	float: right;
}

/* Clearfix des conteneurs de champs (sinon les flottants débordent) */
.woocommerce-billing-fields__field-wrapper::after,
.woocommerce-shipping-fields__field-wrapper::after,
.woocommerce-additional-fields__field-wrapper::after,
.woocommerce-address-fields__field-wrapper::after,
.woocommerce-account-fields::after,
.woocommerce .create-account::after,
.woocommerce form.checkout_coupon::after,
.woocommerce form.login::after,
.woocommerce form.register::after {
	content: "";
	display: table;
	clear: both;
}

/* --------------------------------------------------------------------------
   6. Select2 (pays / région) aligné sur les autres champs
   -------------------------------------------------------------------------- */

.woocommerce .select2-container .select2-selection--single,
.woocommerce-page .select2-container .select2-selection--single {
	height: var(--wcf-height);
	background-color: #fff;
	border: 1px solid var(--wcf-color-border);
	border-radius: var(--wcf-radius);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: .375rem 1.75rem .375rem .75rem;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wcf-color-text);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: .25rem;
	height: 100%;
}

.select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--wcf-color-border-focus);
	box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
}

.select2-dropdown {
	border-color: var(--wcf-color-border-focus);
	border-radius: var(--wcf-radius);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	padding: .375rem .75rem;
	font-size: 1rem;
	line-height: 1.5;
	border: 1px solid var(--wcf-color-border);
	border-radius: var(--wcf-radius);
}

/* --------------------------------------------------------------------------
   7. Mise en page générale de la page « Validation de commande »
   -------------------------------------------------------------------------- */

.woocommerce .col2-set .col-woocommerce-1,
.woocommerce .col2-set .col-woocommerce-2,
.woocommerce-page .col2-set .col-woocommerce-1,
.woocommerce-page .col2-set .col-woocommerce-2 {
	margin-bottom: 2rem;
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
.woocommerce #order_review_heading {
	margin-bottom: 1rem;
}

.woocommerce #ship-to-different-address {
	margin-bottom: 1rem;
}

.woocommerce .woocommerce-additional-fields {
	clear: both;
}

/* Formulaires « code promo » et « connexion » repliables en haut de page */
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
	margin: 0 0 2rem;
	padding: 1.5rem;
	border: 1px solid #e9ecef;
	border-radius: var(--wcf-radius);
	background-color: #fff;
}

.woocommerce form.checkout_coupon .form-row-last .button {
	width: 100%;
}

/* Bloc de paiement */
.woocommerce #payment {
	border-radius: var(--wcf-radius);
}

.woocommerce #payment ul.payment_methods {
	padding: 1rem;
}

.woocommerce #payment ul.payment_methods li label {
	display: inline-flex;
	align-items: center;
	width: auto;
	margin: 0;
	font-weight: 600;
}

.woocommerce #payment div.form-row {
	padding: 1rem;
}

/* --------------------------------------------------------------------------
   8. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last,
	.woocommerce-page form .form-row-first,
	.woocommerce-page form .form-row-last {
		float: none;
		width: 100%;
	}
}

@media (max-width: 767.98px) {
	/* Le thème a renommé .col-1 / .col-2 en .col-woocommerce-1 / .col-woocommerce-2,
	   la feuille woocommerce-smallscreen.css du plugin ne les empile donc plus. */
	.woocommerce .col2-set .col-woocommerce-1,
	.woocommerce .col2-set .col-woocommerce-2,
	.woocommerce-page .col2-set .col-woocommerce-1,
	.woocommerce-page .col2-set .col-woocommerce-2 {
		float: none;
		width: 100%;
	}
}