/**
 * Dahu Theme Annad 2026 — page Commande en zone claire, comme le panier.
 *
 * Vaut pour les trois écrans servis par la page Commande (is_checkout()) : le formulaire de commande
 * (bloc WooCommerce « Commande » ou shortcode), la confirmation (endpoint order-received) et le
 * paiement d'une commande en attente (order-pay). page.php pose .annad-light-page sur le conteneur :
 * fond, tokens, champs, boutons et tableaux viennent du socle light-zone.css, comme pour le panier.
 * Ici, seulement ce que ce socle ne couvre pas : le fond de bord à bord, le titre, et les règles
 * sombres de templates.css (.annad-wc-page) qui visent la commande.
 * La carte du récapitulatif reste sombre, comme la carte des totaux du panier.
 */

.annad-checkout-page {
	padding-block: 2rem 4rem;
}

/* Fond clair d'un bord à l'autre : porté par le <body>, comme body.woocommerce-cart (cart.css).
   WooCommerce pose woocommerce-checkout sur le body des trois écrans. */
body.woocommerce-checkout {
	background-color: var(--color-light-bg);
}

.annad-checkout-page .annad-page-title {
	max-width: var(--container-max);
	margin: 0 auto 2.5rem;
	font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
	font-weight: 800;
	line-height: 1.15;
	text-align: left;
	color: var(--color-on-surface-light);
}

/* ---------- Bloc « Commande » ---------- */

/* Libellés : le socle clair met tout <label> en petites capitales grises, posées en bloc (pensé pour
   les formulaires classiques). Dans le bloc, cela détachait la case « Utiliser la même adresse » de
   son libellé et passait les modes de livraison et de paiement en capitales. Retour au texte normal ;
   les libellés flottants des champs gardent la taille et la position que leur donne WooCommerce. */
.annad-checkout-page .wc-block-checkout label {
	margin-bottom: 0;
	font-weight: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.annad-checkout-page .wc-block-checkout .wc-block-components-checkbox label {
	display: flex;
	align-items: flex-start;
	font-size: inherit;
	color: inherit;
}

.annad-checkout-page .wc-block-checkout .wc-block-components-radio-control__option {
	font-size: inherit;
	color: inherit;
}

/* Champs : fond blanc, filet et arrondi du socle clair. templates.css les met sur le fond sombre
   des champs du thème (le pays s'affichait en pastille noire), et la variante « contrôles sombres »
   du bloc les écrirait en blanc. */
.annad-checkout-page .wc-block-checkout :is(
	.wc-block-components-text-input input,
	.wc-block-components-combobox .wc-block-components-combobox-control input,
	.wc-blocks-components-select .wc-blocks-components-select__select,
	.wc-block-components-textarea
) {
	color: var(--color-on-surface-light);
	background-color: var(--light-field);
	border-color: var(--light-line);
	border-radius: var(--light-radius);
}

/* Pays / région : le socle clair donne à tout <select> l'espacement d'un champ classique, et la
   valeur passait sous le libellé flottant. Espacement de WooCommerce rétabli (place du libellé). */
.annad-checkout-page .wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__select {
	min-height: 0;
	padding: 16px 9px 0;
}

.annad-checkout-page .wc-block-checkout :is(
	.wc-block-components-text-input label,
	.wc-block-components-combobox label,
	.wc-blocks-components-select__label
) {
	color: var(--light-muted);
}

/* ---------- Commande classique (shortcode) et paiement en attente : cartes sombres ---------- */

/* Récapitulatif « Votre commande » et moyens de paiement : cartes sombres de templates.css, comme
   la carte des totaux du panier. Le tableau du socle clair (carte claire) y devenait illisible :
   il redevient transparent, au texte de la carte, avec les filets du thème sombre. */
.annad-checkout-page .woocommerce-checkout-review-order table.shop_table {
	color: inherit;
	background: none;
	border-radius: 0;
}

.annad-checkout-page .woocommerce-checkout-review-order table.shop_table th,
.annad-checkout-page .woocommerce-checkout-review-order table.shop_table td {
	border-bottom-color: var(--color-border);
}

.annad-checkout-page .woocommerce-checkout-review-order table.shop_table thead th {
	color: var(--color-text-muted);
}

/* Libellés des modes de livraison et de paiement : texte de la carte, pas les petites capitales
   grises (foncées) du socle clair, invisibles sur la carte sombre. */
.annad-checkout-page :is(.woocommerce-checkout-review-order, #payment) label {
	display: inline;
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
}

/* ---------- Confirmation de commande (order-received) et paiement en attente (order-pay) ---------- */

/* Tableau « Détails de la commande » : sur la carte claire du socle. templates.css y laissait ses
   en-têtes clairs (illisibles sur fond clair) et ses filets foncés. */
.annad-checkout-page table.shop_table thead th {
	color: var(--light-muted);
}

.annad-checkout-page table.shop_table th,
.annad-checkout-page table.shop_table td {
	border-bottom-color: var(--light-line);
}