/*
 * Zarboutan Matériaux — recherche de tarif de livraison par commune (page
 * /livraison/ uniquement). Réutilise exclusivement les tokens du système
 * premium déjà en place (color-palette.css + premium-design-system.css,
 * vérifiés en direct avant écriture) : aucune nouvelle couleur, aucun
 * nouveau rayon, aucune nouvelle ombre inventés. Chargé uniquement quand le
 * shortcode [zb_livraison_prix_commune] est présent (voir
 * inc/livraison-price-finder.php).
 */

.zb-lpf {
	max-width: 560px;
	margin: 0 auto;
	background: var(--zb-surface-card, #fff);
	border: 1px solid var(--zb-border-subtle, #e6e0d3);
	border-radius: var(--zb-card-radius, 18px);
	box-shadow: var(--zb-card-shadow, 0 4px 14px rgba(35, 38, 31, 0.06));
	padding: 32px;
	transition: box-shadow 0.25s ease;
}

.zb-lpf:hover,
.zb-lpf:focus-within {
	box-shadow: var(--zb-card-shadow-hover, 0 14px 28px rgba(35, 38, 31, 0.12));
}

.zb-lpf__label {
	display: block;
	font-weight: 700;
	color: var(--zb-text-heading, #23261f);
	margin-bottom: 10px;
}

.zb-lpf__field {
	position: relative;
}

.zb-lpf__combobox-wrap {
	position: relative;
}

.zb-lpf__combobox-icon {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.1rem;
	line-height: 1;
	pointer-events: none;
}

.zb-lpf__input {
	width: 100%;
	min-height: 52px;
	padding: 0 16px 0 46px;
	font-size: 1rem;
	font-family: inherit;
	color: var(--zb-text-heading, #23261f);
	background: var(--zb-surface-page, #faf7f1);
	border: 1px solid var(--zb-border-subtle, #e6e0d3);
	border-radius: 12px;
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.zb-lpf__input::placeholder {
	color: var(--zb-text-secondary, #5f6259);
}

.zb-lpf__input:focus-visible {
	outline: 2px solid var(--zb-accent, #39a751);
	outline-offset: 2px;
	border-color: var(--zb-accent, #39a751);
}

/* ---------- Liste déroulante (listbox) ---------- */

.zb-lpf__listbox {
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	margin: 0;
	padding: 6px;
	list-style: none;
	max-height: 280px;
	overflow-y: auto;
	background: var(--zb-surface-card, #fff);
	border: 1px solid var(--zb-border-subtle, #e6e0d3);
	border-radius: 12px;
	box-shadow: var(--zb-card-shadow-hover, 0 14px 28px rgba(35, 38, 31, 0.12));
}

.zb-lpf__listbox[hidden] {
	display: none;
}

.zb-lpf__option {
	padding: 11px 14px;
	border-radius: 8px;
	color: var(--zb-text-body, #40433c);
	cursor: pointer;
	scroll-margin: 6px;
}

.zb-lpf__option[aria-selected="true"],
.zb-lpf__option:hover,
.zb-lpf__option.is-active {
	background: var(--zb-surface-alt, #f1ece3);
	color: var(--zb-text-heading, #23261f);
}

.zb-lpf__option--empty {
	color: var(--zb-text-secondary, #5f6259);
	cursor: default;
	font-style: italic;
}

.zb-lpf__option--empty:hover {
	background: transparent;
}

.zb-lpf__option mark {
	background: none;
	color: var(--zb-accent-deep, #237a3d);
	font-weight: 700;
}

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

.zb-lpf__result {
	margin-top: 22px;
	min-height: 1px;
}

.zb-lpf__result-placeholder {
	margin: 0;
	color: var(--zb-text-secondary, #5f6259);
	text-align: center;
}

.zb-lpf__result-card {
	background: var(--zb-surface-alt, #f1ece3);
	border: 1px solid var(--zb-border-subtle, #e6e0d3);
	border-radius: 14px;
	padding: 22px 24px;
	text-align: center;
	animation: zb-lpf-reveal 0.3s ease;
}

@keyframes zb-lpf-reveal {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.zb-lpf__result-location {
	margin: 0 0 6px;
	font-size: 1.05rem;
	color: var(--zb-text-body, #40433c);
}

.zb-lpf__result-pin {
	margin-right: 4px;
}

.zb-lpf__result-price {
	margin: 0;
}

.zb-lpf__badge {
	display: inline-block;
	background: var(--zb-accent, #39a751);
	color: #fff;
	font-weight: 800;
	font-size: 1.35rem;
	line-height: 1;
	padding: 12px 22px;
	border-radius: 999px;
}

.zb-lpf__result-card--devis .zb-lpf__result-price {
	font-weight: 800;
	font-size: 1.2rem;
	color: var(--zb-text-heading, #23261f);
}

.zb-lpf__result-note {
	margin: 10px 0 0;
	font-size: 0.92rem;
	color: var(--zb-text-secondary, #5f6259);
}

/* ---------- Conditions de livraison (encadré sous la carte) ---------- */

.zb-lpf-conditions {
	max-width: 560px;
	margin: var(--zb-card-gap, clamp(24px, 3vw, 36px)) auto 0;
	background: var(--zb-surface-alt, #f1ece3);
	border: 1px solid var(--zb-border-subtle, #e6e0d3);
	border-left: 4px solid var(--zb-accent, #39a751);
	border-radius: var(--zb-card-radius, 18px);
	box-shadow: var(--zb-card-shadow, 0 4px 14px rgba(35, 38, 31, 0.06));
	padding: 28px 32px;
}

.zb-lpf-conditions__title {
	margin: 0 0 16px;
	color: var(--zb-text-heading, #23261f);
}

.zb-lpf-conditions__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.zb-lpf-conditions__list li {
	position: relative;
	padding-left: 30px;
	color: var(--zb-text-body, #40433c);
	line-height: 1.6;
}

.zb-lpf-conditions__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	background: var(--zb-accent, #39a751);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M13.5 3.5L6 11 2.5 7.5l1-1L6 9l6.5-6.5z'/%3E%3C/svg%3E") center / 10px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M13.5 3.5L6 11 2.5 7.5l1-1L6 9l6.5-6.5z'/%3E%3C/svg%3E") center / 10px no-repeat;
}

/* ---------- Tablette ---------- */

@media (max-width: 899px) {
	.zb-lpf {
		padding: 26px;
	}
}

/* ---------- Mobile : carte pleine largeur, cibles tactiles confortables ---------- */

@media (max-width: 600px) {
	.zb-lpf,
	.zb-lpf-conditions {
		max-width: 100%;
		border-radius: 14px;
	}

	.zb-lpf {
		padding: 20px;
	}

	.zb-lpf-conditions {
		padding: 22px 20px;
	}

	.zb-lpf__input {
		min-height: 50px;
	}

	.zb-lpf__badge {
		font-size: 1.2rem;
		padding: 11px 18px;
	}
}

/* ---------- Accessibilité clavier ---------- */

.zb-lpf__option:focus-visible {
	outline: 2px solid var(--zb-accent, #39a751);
	outline-offset: -2px;
}

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
	.zb-lpf,
	.zb-lpf__result-card {
		animation: none;
		transition: none;
	}
}

/* ---------- Chevauchement boutons flottants (bas d'écran, signalé 01/08/2026) ---------- */

/* Sous 480px, le bouton "Nous contacter" du hero (2e bouton d'une rangée
   wp:buttons qui passe à la ligne faute de largeur) atterrit dans la même
   bande que les boutons flottants WhatsApp/Zako (position fixed, bas
   d'écran) au premier chargement de cette page précise — chevauchement
   visuel constaté (mesuré : ~29×40px). Cible ce fichier (déjà chargé
   uniquement sur /livraison/ via le shortcode [zb_livraison_prix_commune])
   plutôt qu'une règle globale sur .wp-block-buttons, qui affecterait tous
   les groupes de boutons du site. N'affecte que l'espacement entre les 2
   boutons de ce hero précis, jamais leur contenu ni leur style. */
@media (max-width: 480px) {
	body.page-id-24 .wp-block-buttons.is-layout-flex {
		row-gap: 76px;
	}
}