/**
 * Habachiya — Carte des points relais (carte + liste)
 *
 * Palette : couleurs du thème Flatsome — violet #4A2D5E (principal), ambre #D08A1E
 * (secondaire). Les noms --hab-teal / --hab-gold sont historiques (palette Divi).
 * Les sélecteurs restent préfixés .hab-relay : le thème (Flatsome + checkout.css)
 * stylise largement les li / button / label du récapitulatif, on n'utilise donc
 * ni ul/li ni label ici, et on remet les boutons à zéro.
 */

/* ===================================================================
   Variables
   =================================================================== */
.hab-relay {
	--hab-teal:       #4A2D5E;   /* violet principal */
	--hab-teal-hover: #1F1726;
	--hab-teal-light: #F3EEF6;
	--hab-gold:       #D08A1E;   /* ambre secondaire */
	--hab-sand:       #F7F4F9;
	--hab-dark:       #1F1726;
	--hab-gray:       #6E6577;
	--hab-border:     #E4DDEA;
	--hab-white:      #FFFFFF;
	--hab-radius:     10px;
	--hab-t:          0.18s ease;
}

/* ===================================================================
   Intégration dans la liste des tarifs WooCommerce
   Le sélecteur est rendu dans le <li> du tarif choisi : on force le retour
   à la ligne pour qu'il prenne toute la largeur sous le libellé.
   =================================================================== */
.woocommerce-shipping-methods li:has(.hab-relay) {
	flex-wrap: wrap !important;
	cursor: default !important;
}

/* Checkout : la carte colis contenant le sélecteur passe en pleine largeur
   dans la grille 2 colonnes du tfoot (checkout.css). */
table.woocommerce-checkout-review-order-table tfoot tr.shipping:has(.hab-relay) {
	grid-column: 1 / -1 !important;
}

/* Panier : ligne pleine largeur créée par le JS (placeInFullRow) sous la ligne
   « Expédition » du tableau Total panier. Gauche = tarifs, droite = carte. */
.woocommerce-cart tr.hab-relay-moved {
	display: none !important;
}

.woocommerce-cart tr.hab-relay-row > td {
	width: 100% !important;
	max-width: none !important;
	padding: 0.6em 0 !important;
	border: 0 !important;
	text-align: left !important;
}

.hab-relay-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);   /* largeur coupée en deux */
	column-gap: 24px;
	align-items: start;
	width: 100%;
}

.hab-relay-split__left,
.hab-relay-split__right {
	min-width: 0;
}

.hab-relay-split .hab-relay {
	margin-top: 0;
}

@media (max-width: 849px) {
	.hab-relay-split {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 12px;
	}
}

/* Tarif Packlink PRO : notre carte remplace son bouton + sa modale. */
.woocommerce-shipping-methods li:has(.hab-relay) #packlink-drop-off-picker,
.woocommerce-shipping-methods li:has(.hab-relay) > p.woocommerce-shipping-destination {
	display: none !important;
}

/* ===================================================================
   Conteneur
   =================================================================== */
.hab-relay {
	flex: 0 0 100%;
	width: 100%;
	box-sizing: border-box;
	margin-top: 10px;
	padding: 12px;
	background: var(--hab-white);
	border: 1px solid var(--hab-border);
	border-radius: var(--hab-radius);
	color: var(--hab-dark);
	font-size: 13px;
	line-height: 1.45;
	text-align: left;
	container-type: inline-size;
}

.hab-relay *,
.hab-relay *::before,
.hab-relay *::after {
	box-sizing: border-box;
}

.hab-relay__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
	margin-bottom: 10px;
}

.hab-relay__title {
	font-size: 14px;
	font-weight: 700;
	color: var(--hab-teal);
}

.hab-relay__count {
	font-size: 12px;
	color: var(--hab-gray);
}

.hab-relay__notice {
	margin: 0;
	font-size: 13px;
	color: var(--hab-gray);
}

/* Point choisi */
.hab-relay__selected {
	margin: 0 0 10px;
	padding: 8px 10px;
	background: var(--hab-teal-light);
	border-left: 3px solid var(--hab-teal);
	border-radius: 0 6px 6px 0;
	font-size: 12px;
	overflow-wrap: break-word;
}

.hab-relay__selected[hidden] {
	display: none;
}

.hab-relay__selected-label {
	font-weight: 700;
	color: var(--hab-teal);
	margin-right: 4px;
}

/* ===================================================================
   Corps : carte au-dessus, liste en dessous (étroit)
           carte à gauche, liste à droite (≥ 560px de large)
   =================================================================== */
.hab-relay__body {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

.hab-relay__map {
	height: 240px;
	min-width: 0;
	border-radius: 8px;
	border: 1px solid var(--hab-border);
	overflow: hidden;
	z-index: 0;   /* garde les panneaux Leaflet sous le header sticky du thème */
}

.hab-relay__list {
	position: relative;   /* référence pour offsetTop (défilement interne) */
	max-height: 280px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-right: 2px;
	overscroll-behavior: contain;
}

@container (min-width: 520px) {
	/* Carte 65 %, liste 35 %. */
	.hab-relay__body {
		grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
		column-gap: 12px;
	}

	.hab-relay__map {
		height: 360px;
	}

	.hab-relay__list {
		max-height: 360px;
	}
}

/* ===================================================================
   Élément de liste
   =================================================================== */
.hab-relay__item {
	border: 1.5px solid var(--hab-border);
	border-radius: 8px;
	background: var(--hab-white);
	transition: border-color var(--hab-t), background var(--hab-t);
}

.hab-relay__item:hover {
	border-color: rgba(74, 45, 94, 0.4);
}

.hab-relay__item.is-selected {
	border-color: var(--hab-teal);
	background: var(--hab-teal-light);
}

/* Bouton de sélection — remis à zéro (Flatsome stylise tous les <button>)
   Grille : numéro | nom + adresse, puis « Choisir » sous l'adresse (le texte garde toute la largeur). */
.hab-relay .hab-relay__pick {
	all: unset;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 6px 10px;
	width: 100%;
	padding: 9px 10px;
	cursor: pointer;
	font-size: 13px;
	line-height: 1.4;
	color: var(--hab-dark);
	text-align: left;
	border-radius: 8px;
}

.hab-relay .hab-relay__pick:focus-visible {
	outline: 2px solid var(--hab-teal);
	outline-offset: 2px;
}

.hab-relay__num {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--hab-teal);
	color: var(--hab-white);
	font-size: 11px;
	font-weight: 700;
	margin-top: 1px;
}

.hab-relay__item.is-selected .hab-relay__num {
	background: var(--hab-gold);
}

.hab-relay__info {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.hab-relay__name {
	font-weight: 700;
	overflow-wrap: break-word;
}

.hab-relay__addr {
	font-size: 12px;
	color: var(--hab-gray);
	overflow-wrap: break-word;
}

.hab-relay__state {
	grid-column: 2;
	justify-self: start;
	padding: 3px 9px;
	border: 1.5px solid var(--hab-teal);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	color: var(--hab-teal);
}

.hab-relay__item.is-selected .hab-relay__state {
	background: var(--hab-teal);
	color: var(--hab-white);
}

/* Horaires */
.hab-relay__hours {
	padding: 0 10px 8px 42px;
	font-size: 12px;
}

.hab-relay__hours summary {
	cursor: pointer;
	color: var(--hab-teal);
	font-weight: 600;
	width: max-content;
}

.hab-relay__hours dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2px 10px;
	margin: 6px 0 0;
}

.hab-relay__hours dt {
	font-weight: 600;
	margin: 0;
}

.hab-relay__hours dd {
	margin: 0;
	color: var(--hab-gray);
}

/* ===================================================================
   Marqueurs Leaflet numérotés
   =================================================================== */
.hab-relay-pin {
	background: none;
	border: none;
}

.hab-relay-pin span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 50% 50% 50% 0;   /* goutte, pointe en bas après rotation */
	transform: rotate(-45deg);
	background: var(--hab-teal, #4A2D5E);
	border: 2px solid #fff;
	box-shadow: 0 2px 6px rgba(30, 26, 20, 0.35);
}

.hab-relay-pin b {
	transform: rotate(45deg);   /* annule la rotation de la goutte */
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.hab-relay-pin.is-selected span {
	background: var(--hab-gold, #D08A1E);
}

.hab-relay-tooltip {
	font-size: 12px;
	line-height: 1.4;
	max-width: 240px;
	white-space: normal;
}

/* ===================================================================
   Paiements rapides grisés tant que le point relais manque
   (assets/js/habachiya-pay-lock.js : Apple Pay / Google Pay de Stripe,
   PayPal). Hors de .hab-relay : couleurs en dur.
   =================================================================== */
.hab-pay-locked {
	opacity: 0.4;
	filter: grayscale(1);
	pointer-events: none;   /* doublé par l'attribut inert (clavier compris) */
	user-select: none;
	transition: opacity 0.18s ease, filter 0.18s ease;
}

.hab-pay-lock-msg {
	margin: 1em 0 0.5em;
	padding: 10px 14px;
	border-left: 3px solid #D08A1E;
	border-radius: 6px;
	background: #F7F4F9;
	font-size: 0.9em;
	line-height: 1.45;
	color: #1F1726;
}

.hab-pay-lock-msg a {
	font-weight: 600;
	color: #4A2D5E;
	text-decoration: underline;
}

/* Halo sur le sélecteur quand on clique « Choisir mon point relais ». */
.hab-relay.hab-relay--attention {
	border-radius: var(--hab-radius);
	box-shadow: 0 0 0 3px #D08A1E;
	transition: box-shadow 0.3s ease;
}