/*
 * Affichage revendeur côté boutique.
 *
 * RÈGLE DE CE FICHIER : structurel uniquement. Aucune couleur, aucune police en
 * dur. Le balisage porte les classes de WooCommerce (form-row, input-text,
 * shop_table, woocommerce-info, order_details...) et c'est le THÈME qui les
 * habille. Un module ne connaît aucun thème : une couleur écrite ici serait
 * fausse dès le premier changement d'habillage.
 *
 * Les deux endroits qui ont besoin d'une teinte passent par une variable à
 * REPLI NEUTRE (currentColor). Un thème qui veut la main dépose son override
 * chez lui, jamais ici.
 *
 * Aucun !important dans ce fichier : on complète le thème, on ne le combat pas.
 */

/* Suffixe « HT » accolé au prix. Atténué, sans casse ni police imposée. */
.lfw-suffix {
	font-size: 0.8em;
	opacity: 0.7;
}

/* Prix boutique barré, rappelé à côté du tarif de gros. */
.lfw-retail {
	opacity: 0.55;
	margin-right: 0.35em;
}

/*
 * Étiquette de remise. Contour en currentColor : elle prend la couleur du texte
 * qui l'entoure, donc celle du thème, sur fond clair comme sur fond sombre.
 */
.lfw-badge {
	display: inline-block;
	padding: 0 0.45em;
	border: 1px solid currentColor;
	border-radius: 2px;
	font-size: 0.75em;
	line-height: 1.7;
	vertical-align: middle;
	white-space: nowrap;
}

/*
 * Facture en retard. Seule teinte du module, et son repli est currentColor :
 * sans override de thème, l'étiquette reste lisible, simplement pas rouge.
 */
.lfw-badge--alert {
	color: var(--lfw-alert, currentColor);
	border-color: currentColor;
}

/* Rappel des règles de quantité, fiche produit. */
.lfw-qty-rules {
	margin: 0 0 1em;
	font-size: 0.9em;
	opacity: 0.75;
}

/*
 * Grille des paliers sur la fiche produit. Volontairement légère : elle informe
 * avant l'achat, elle ne concurrence pas le bouton. Pas de bordure, le thème en
 * pose déjà sur ses tableaux quand il en veut.
 */
.lfw-tiers {
	width: auto;
	margin: 0 0 1.25em;
	border-collapse: collapse;
	font-size: 0.9em;
}

.lfw-tiers caption {
	text-align: left;
	padding-bottom: 0.35em;
}

.lfw-tiers th,
.lfw-tiers td {
	padding: 0.15em 1.25em 0.15em 0;
	text-align: left;
	border: 0;
}

.lfw-login-to-see {
	font-size: 0.9em;
}

/* Bloc « Prévenez-moi du retour en stock », fiche produit. Étape 4.
   Plus d'encart : un titre, une liste, un bouton. Le thème fait le reste. */

.lfw-alert-box {
	margin: 1.5em 0;
}

.lfw-alert-box__title {
	margin: 0 0 0.5em;
}

.lfw-alert-box__region {
	opacity: 0.75;
}

.lfw-alert-box__list {
	margin: 0 0 0.75em;
	padding: 0;
	list-style: none;
}

.lfw-alert-box__list li {
	margin: 0 0 0.3em;
}

.lfw-alert-box__list label {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	cursor: pointer;
}

.lfw-alert-box__help {
	margin: 0 0 0.8em;
	font-size: 0.85em;
	opacity: 0.75;
}

/* Précision sous un champ du formulaire de demande. `display: block` est
   indispensable : le conteneur est un `<p class="form-row">`, un `<span>` en
   ligne se collerait au champ qui précède. */
.lfw-field-hint {
	display: block;
	margin-top: 0.35em;
	font-size: 0.85em;
	opacity: 0.75;
}

/* Onglet Compte revendeur. Étapes 4 et 5.
   Les faits sortent en `order_details`, les tableaux en `shop_table` : bordures
   et en-têtes viennent du thème, il ne reste ici que les écarts. */

.lfw-account-facts {
	margin: 0 0 1.5em;
}

.lfw-account-facts__strong {
	font-size: 1.05em;
}

.lfw-account-table {
	margin: 0 0 1.5em;
}

/* Un montant se lit aligné sur son unité, jamais collé à gauche. */
.lfw-account-table .lfw-col-amount {
	text-align: right;
}

.lfw-variant {
	opacity: 0.7;
}

.lfw-alert-remove {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	cursor: pointer;
}

/*
 * Écran étroit. Même repli que les tableaux de WooCommerce : l'étiquette de
 * colonne passe devant la valeur, via `data-title`. Réécrit ici pour que le
 * repli tienne même si le thème ne charge pas la feuille de WooCommerce ; les
 * deux règles produisent le MÊME ::before, il n'y a donc pas de doublon.
 */
@media (max-width: 768px) {
	.lfw-account-table.shop_table_responsive thead {
		display: none;
	}

	.lfw-account-table.shop_table_responsive tbody tr {
		display: block;
	}

	.lfw-account-table.shop_table_responsive tbody td {
		display: block;
		text-align: right;
	}

	.lfw-account-table.shop_table_responsive tbody td::before {
		content: attr(data-title) ": ";
		float: left;
	}

	.lfw-account-table .lfw-col-amount {
		text-align: right;
	}
}