/**
 * Simulateur de frais de livraison — front.
 *
 * Les jetons consomment en priorité les variables globales du kit Elementor
 * du site (charte Purrfect by LB) et retombent sur les valeurs de la charte
 * si le kit n'est pas chargé.
 *
 * Charte : encre #1E211E · encre douce #403D39 · accent #E3983E
 *          crème #FBF7EE · sable #F0E2CA / #E4CBA0 · pierre #81765F
 *          brique #942911 · typo Outfit · contrôles en pilule
 */

.lb-sim {
	--lb-ink: var( --e-global-color-primary, #1e211e );
	--lb-ink-soft: var( --e-global-color-secondary, #403d39 );
	--lb-accent: var( --e-global-color-00ca569, #e3983e );
	/* Accent porteur de sens (icône, trait) : l'orange de la charte est à
	   2,4:1 sur blanc, sous le seuil de 3:1 des éléments non textuels. */
	--lb-accent-strong: #b06e14;
	--lb-cream: var( --e-global-color-8452c9f, #fbf7ee );
	--lb-sand: var( --e-global-color-cc165f2, #f0e2ca );
	--lb-sand-strong: var( --e-global-color-b4f8fa3, #e4cba0 );
	/* Pierre de la charte : réservée aux usages décoratifs, elle tombe à
	   3,9:1 sur le crème. Les textes utilisent la variante assombrie. */
	--lb-stone: var( --e-global-color-c6518c2, #81765f );
	--lb-stone-text: #6b6152;
	--lb-brick: var( --e-global-color-9be0e71, #942911 );
	--lb-surface: var( --e-global-color-57fe783, #ffffff );

	--lb-font: var( --e-global-typography-text-font-family, 'Outfit' ), sans-serif;
	--lb-size-base: 16px;
	--lb-size-small: 14px;
	--lb-line: 1.53;

	--lb-radius-card: 20px;
	--lb-radius-pill: 999px;
	--lb-space: 12px;
	--lb-transition: 160ms ease;

	/* Le composant est clair par construction. Sans cette déclaration, le
	   mode sombre automatique de Chrome et les extensions d'inversion
	   repeignent partiellement la carte : texte clair sur crème. */
	color-scheme: only light;

	margin: 24px 0;
	font-family: var( --lb-font );
	font-size: var( --lb-size-base );
	line-height: var( --lb-line );
	color: var( --lb-ink );
	background: var( --lb-cream );
	border: 1px solid var( --lb-sand-strong );
	border-radius: var( --lb-radius-card );
	overflow: hidden;
}

/* Ne pas dépendre du reset du thème : les champs doivent tenir dans la grille. */
.lb-sim,
.lb-sim *,
.lb-sim *::before,
.lb-sim *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- Toggle */

.lb-sim .lb-sim__toggle {
	display: flex;
	align-items: center;
	gap: var( --lb-space );
	width: 100%;
	min-height: 56px;
	margin: 0;
	padding: 16px 20px;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-family: inherit;
	font-size: var( --lb-size-base );
	font-weight: 500;
	line-height: 1.33;
	color: var( --lb-ink );
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: background var( --lb-transition );
}

.lb-sim__toggle:hover,
.lb-sim__toggle:focus-visible {
	background: var( --lb-sand );
	color: var( --lb-ink );
}

.lb-sim__toggle:focus-visible {
	outline: 2px solid var( --lb-accent-strong );
	outline-offset: -2px;
}

.lb-sim__toggle-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	background: var( --lb-surface );
	border: 1px solid var( --lb-sand-strong );
	border-radius: var( --lb-radius-pill );
	color: var( --lb-accent-strong );
}

.lb-sim__toggle-mark svg {
	width: 20px;
	height: 20px;
}

.lb-sim__toggle-label {
	flex: 1 1 auto;
}

.lb-sim__toggle-chevron {
	display: inline-flex;
	flex: 0 0 auto;
	color: var( --lb-ink-soft );
	transition: transform var( --lb-transition );
}

.lb-sim__toggle-chevron svg {
	width: 18px;
	height: 18px;
}

.lb-sim__toggle[aria-expanded='true'] .lb-sim__toggle-chevron {
	transform: rotate( 180deg );
}

/* ----------------------------------------------------------------- Panel */

.lb-sim__panel {
	padding: 4px 20px 20px;
	border-top: 1px solid var( --lb-sand-strong );
}

.lb-sim__panel[hidden] {
	display: none;
}

.lb-sim__fields {
	display: flex;
	flex-wrap: wrap;
	gap: var( --lb-space );
	margin-top: 16px;
}

.lb-sim__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 160px;
	margin: 0;
}

.lb-sim__field--action {
	flex: 0 0 auto;
	justify-content: flex-end;
}

.lb-sim__label {
	font-size: var( --lb-size-small );
	line-height: 1.33;
	color: var( --lb-ink-soft );
}

.lb-sim .lb-sim__control {
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 12px 20px;
	background: var( --lb-surface );
	border: 1px solid var( --lb-sand-strong );
	border-radius: var( --lb-radius-pill );
	box-shadow: none;
	font-family: inherit;
	font-size: var( --lb-size-base );
	line-height: 1.33;
	color: var( --lb-ink-soft );
	transition: border-color var( --lb-transition ), box-shadow var( --lb-transition );
}

.lb-sim .lb-sim__control::placeholder {
	color: var( --lb-stone-text );
	opacity: 1;
}

.lb-sim .lb-sim__control:focus {
	border-color: var( --lb-accent-strong );
	box-shadow: 0 0 0 3px rgba( 227, 152, 62, 0.25 );
	outline: none;
}

.lb-sim__control.is-invalid {
	border-color: var( --lb-brick );
}

.lb-sim select.lb-sim__control {
	padding-right: 44px;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23403D39' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 18px center;
	background-size: 16px 16px;
	-webkit-appearance: none;
	appearance: none;
}

/* ---------------------------------------------------------------- Bouton */

.lb-sim .lb-sim__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 12px 32px;
	background: var( --lb-ink );
	border: 0;
	border-radius: var( --lb-radius-pill );
	box-shadow: none;
	font-family: inherit;
	font-size: var( --lb-size-base );
	/* Outfit 400 sur fond encre paraît délavé malgré un ratio de 16:1 :
	   la graisse 500 rétablit la lisibilité perçue. */
	font-weight: 500;
	line-height: 1.33;
	color: var( --lb-surface );
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: background var( --lb-transition ), transform var( --lb-transition );
}

.lb-sim .lb-sim__submit:hover {
	background: var( --lb-ink-soft );
	color: var( --lb-surface );
}

.lb-sim__submit:active {
	transform: translateY( 1px );
}

.lb-sim__submit:focus-visible {
	outline: 2px solid var( --lb-accent-strong );
	outline-offset: 2px;
}

/* Pas d'opacité sur du texte : elle se multiplie au fond et fait chuter
   le contraste. État occupé signalé par la couleur pleine et le rouet. */
.lb-sim .lb-sim__submit[disabled] {
	background: var( --lb-ink-soft );
	cursor: default;
}

.lb-sim__spinner {
	display: none;
	width: 16px;
	height: 16px;
	border: 2px solid rgba( 255, 255, 255, 0.35 );
	border-top-color: var( --lb-surface );
	border-radius: var( --lb-radius-pill );
}

.lb-sim.is-loading .lb-sim__spinner {
	display: inline-block;
	animation: lb-sim-spin 700ms linear infinite;
}

@keyframes lb-sim-spin {
	to {
		transform: rotate( 360deg );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.lb-sim *,
	.lb-sim *::before,
	.lb-sim *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* --------------------------------------------------------------- Résultat */

.lb-sim__result:empty {
	display: none;
}

.lb-sim__result {
	margin-top: 18px;
}

.lb-sim__rates {
	margin: 0;
	padding: 0;
	list-style: none;
	background: var( --lb-surface );
	border: 1px solid var( --lb-sand-strong );
	border-radius: 14px;
	overflow: hidden;
}

.lb-sim__rate {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 16px;
	flex-wrap: wrap;
	padding: 12px 18px;
	border-bottom: 1px solid var( --lb-sand );
}

.lb-sim__rate:last-child {
	border-bottom: 0;
}

.lb-sim__rate-label {
	flex: 1 1 60%;
	min-width: 0;
	color: var( --lb-ink-soft );
}

.lb-sim__rate-price {
	flex: 0 0 auto;
	font-weight: 500;
	color: var( --lb-ink );
	white-space: nowrap;
}

.lb-sim__rate--free .lb-sim__rate-price {
	color: var( --lb-brick );
	text-transform: uppercase;
	font-size: var( --lb-size-small );
	letter-spacing: 0.04em;
}

.lb-sim__note,
.lb-sim__empty,
.lb-sim__prompt,
.lb-sim__error,
.lb-sim__loading {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 14px 18px;
	border-radius: 14px;
	font-size: var( --lb-size-small );
	line-height: 1.45;
}

.lb-sim__empty {
	background: var( --lb-sand );
	border: 1px solid var( --lb-sand-strong );
	color: var( --lb-ink );
}

.lb-sim__prompt {
	background: var( --lb-surface );
	border: 1px dashed var( --lb-accent-strong );
	color: var( --lb-ink );
}

.lb-sim__error {
	background: var( --lb-surface );
	border: 1px solid var( --lb-brick );
	color: var( --lb-brick );
}

.lb-sim__loading {
	background: var( --lb-surface );
	border: 1px dashed var( --lb-sand-strong );
	color: var( --lb-ink-soft );
}

.lb-sim__restricted {
	color-scheme: only light;
	margin: 24px 0 -12px;
	padding: 10px 14px;
	background: #fff8e5;
	border: 1px dashed #b06e14;
	border-radius: 10px;
	font-family: var( --e-global-typography-text-font-family, 'Outfit' ), sans-serif;
	font-size: 13px;
	line-height: 1.45;
	color: #6b4a08;
}

.lb-sim__debug p {
	margin: 0 0 4px;
}

.lb-sim__debug p:last-child {
	margin-bottom: 0;
	word-break: break-word;
}

.lb-sim__debug {
	margin: 8px 0 0;
	padding: 6px 10px;
	background: var( --lb-surface );
	border: 1px dashed var( --lb-sand-strong );
	border-radius: 8px;
	font-size: 12px;
	line-height: 1.4;
	color: var( --lb-stone-text );
}

.lb-sim__legal {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: var( --lb-stone-text );
}

/* --------------------------------------------- Panier / commande : notice */

.lb-shipping-no-rates {
	color-scheme: only light;
	margin: 0;
	padding: 14px 18px;
	background: var( --e-global-color-8452c9f, #fbf7ee );
	border: 1px solid var( --e-global-color-b4f8fa3, #e4cba0 );
	border-radius: 14px;
	font-family: var( --e-global-typography-text-font-family, 'Outfit' ), sans-serif;
	color: var( --e-global-color-primary, #1e211e );
}

.lb-shipping-debug {
	margin: 6px 0 0;
	font-size: 12px;
	color: #6b6152;
}

/* ------------------------------------------------------------ Responsive */

@media ( max-width: 600px ) {
	.lb-sim__fields {
		flex-direction: column;
		align-items: stretch;
	}

	/* En colonne, flex-basis s'applique à la hauteur : neutraliser. */
	.lb-sim__field {
		flex: 0 0 auto;
	}

	.lb-sim__field--action {
		margin-top: 4px;
	}

	.lb-sim__submit {
		width: 100%;
	}

	.lb-sim__toggle {
		padding: 14px 16px;
	}

	.lb-sim__panel {
		padding: 4px 16px 18px;
	}
}