/* Spidclic Shipping — front checkout styles */

/* Inline picker — apparaît juste sous le label du rate sélectionné. */
.spidclic-relay-picker, .spidclic-relay-picker-inline {
	margin: 8px 0 4px 22px;
	display: block;
}
.spidclic-relay-picker .spidclic-relay-selected,
.spidclic-relay-picker-inline .spidclic-relay-selected {
	background: #ecfdf5;
	border-left: 3px solid #10b981;
	padding: 6px 10px;
	margin-bottom: 6px;
	border-radius: 3px;
	color: #065f46;
	font-size: 13px;
}
.spidclic-relay-picker-inline .spidclic-relay-selected strong { color: #047857; }
.spidclic-relay-picker-inline .button.spidclic-relay-btn {
	background: #111827 !important;
	color: #fff !important;
	border: 0;
	padding: 9px 16px !important;
	font-weight: 600;
	font-size: 13px !important;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: 3px;
	cursor: pointer;
}
.spidclic-relay-picker-inline .button.spidclic-relay-btn:hover {
	background: #1f2937 !important;
}

/* Bouton point relais : centré + ROUGE tant qu'aucun point relais choisi.
   S'applique quel que soit le thème (picker inline ou non). Steve 2026-06-18. */
.spidclic-relay-picker .spidclic-relay-btn,
.spidclic-relay-picker-inline .spidclic-relay-btn,
.button.spidclic-relay-btn {
	display: block !important;
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center !important;
	white-space: normal !important; /* libellé long → retour à la ligne, jamais tronqué */
	line-height: 1.3;
	max-width: 100%;
}
.spidclic-relay-btn.spidclic-relay-btn--required {
	background: #d32f2f !important;
	border-color: #d32f2f !important;
	color: #fff !important;
	animation: spidclic-relay-pulse 1.6s ease-in-out infinite;
}
.spidclic-relay-btn.spidclic-relay-btn--required:hover {
	background: #b71c1c !important;
}
@keyframes spidclic-relay-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(211,47,47,0.45); }
	50%      { box-shadow: 0 0 0 6px rgba(211,47,47,0); }
}

/* Modal */
html.spidclic-modal-open { overflow:hidden; }
.spidclic-modal-wrap { position:fixed; inset:0; z-index:9999; }
.spidclic-modal-backdrop {
	position:absolute; inset:0;
	background:rgba(0,0,0,.55);
}
.spidclic-modal {
	position:absolute; top:5%; left:5%; right:5%; bottom:5%;
	background:#fff;
	border-radius:12px;
	box-shadow:0 25px 50px -12px rgba(0,0,0,.25);
	overflow:hidden;
	display:flex; flex-direction:column;
}
.spidclic-modal-close {
	position:absolute; top:8px; right:12px;
	background:none; border:0;
	font-size:28px; cursor:pointer;
	z-index:10;
	width:36px; height:36px;
	border-radius:50%;
	display:flex; align-items:center; justify-content:center;
}
.spidclic-modal-close:hover { background:#f3f4f6; }
.spidclic-modal-body { display:flex; flex:1; min-height:0; }

.spidclic-modal-left {
	width:38%; max-width:480px;
	display:flex; flex-direction:column;
	border-right:1px solid #e5e7eb;
}
.spidclic-modal-right { flex:1; position:relative; }
.spidclic-map { width:100%; height:100%; }

form.spidclic-search {
	display:flex; padding:16px; border-bottom:1px solid #e5e7eb;
}
form.spidclic-search input {
	flex:1;
	padding:10px 14px;
	border:1px solid #d1d5db; border-radius:30px 0 0 30px;
	font-size:14px;
}
form.spidclic-search button {
	background:#3b82f6;
	color:#fff;
	border:0; border-radius:0 30px 30px 0;
	padding:0 18px;
	cursor:pointer;
}
.spidclic-filters {
	display:flex; flex-wrap:wrap; gap:6px;
	padding:8px 16px;
	border-bottom:1px solid #f3f4f6;
}
.spidclic-filter-chip {
	background:#fff;
	border:1px solid #e5e7eb;
	border-radius:30px;
	padding:4px 12px;
	font-size:12px;
	cursor:pointer;
	user-select:none;
}
.spidclic-filter-chip.is-active {
	background:#1e40af; color:#fff; border-color:#1e40af;
}

.spidclic-shops-list {
	flex:1; overflow-y:auto;
	padding:8px 0;
}
.spidclic-shop-item {
	padding:10px 16px;
	border-bottom:1px solid #f3f4f6;
	cursor:pointer;
}
.spidclic-shop-item:hover, .spidclic-shop-item.is-active { background:#eff6ff; }
.spidclic-shop-head {
	display:flex; align-items:center; gap:8px;
	margin-bottom:4px;
}
.spidclic-shop-badge {
	font-size:10px; font-weight:700;
	padding:2px 6px; border-radius:4px;
	color:#fff;
}
.spidclic-badge-gls       { background:#fbbf24; color:#78350f; }
.spidclic-badge-colissimo { background:#2563eb; }
.spidclic-badge-mr        { background:#dc2626; }
.spidclic-badge-other     { background:#6b7280; }
.spidclic-shop-name { flex:1; font-size:13px; }
.spidclic-shop-dist { font-size:11px; color:#6b7280; }
.spidclic-shop-addr { font-size:11px; color:#6b7280; }

.spidclic-loading, .spidclic-empty {
	padding:24px; text-align:center;
	color:#6b7280; font-size:13px;
}

@media (max-width: 720px) {
	/* ----- Bouton point relais : grand + lisible + pleine largeur ----- */
	.spidclic-relay-picker, .spidclic-relay-picker-inline { margin-left:0; margin-right:0; }
	.spidclic-relay-picker .spidclic-relay-btn,
	.spidclic-relay-picker-inline .button.spidclic-relay-btn,
	.button.spidclic-relay-btn {
		width:100% !important;
		box-sizing:border-box;
		font-size:16px !important;       /* lisible + pas de zoom iOS */
		padding:14px 16px !important;
		min-height:50px;
		letter-spacing:0.3px;
	}
	.spidclic-relay-picker .spidclic-relay-selected,
	.spidclic-relay-picker-inline .spidclic-relay-selected { font-size:14px; padding:10px 12px; }

	/* ----- Modale plein écran, liste d'abord puis carte ----- */
	.spidclic-modal { top:0; left:0; right:0; bottom:0; border-radius:0; }
	.spidclic-modal-close { width:46px; height:46px; font-size:32px; top:6px; right:6px; }
	.spidclic-modal-body { flex-direction:column; }
	.spidclic-modal-left {
		width:100%; max-width:none; border-right:0;
		order:1; flex:1 1 auto; min-height:0;   /* la liste scrolle */
	}
	.spidclic-modal-right {
		order:2; flex:0 0 240px;                 /* carte hauteur fixe, en bas */
		border-top:1px solid #e5e7eb;
	}

	/* ----- Recherche : input 16px (pas de zoom iOS) + gros bouton ----- */
	form.spidclic-search { padding:12px; }
	form.spidclic-search input { font-size:16px; padding:13px 16px; }
	form.spidclic-search button { padding:0 20px; font-size:20px; }

	/* ----- Filtres : puces plus grandes (cibles tactiles) ----- */
	.spidclic-filters { padding:10px 12px; gap:8px; }
	.spidclic-filter-chip { font-size:14px; padding:9px 14px; }

	/* ----- Liste : items plus grands et lisibles ----- */
	.spidclic-shop-item { padding:14px 16px; }
	.spidclic-shop-name { font-size:15px; }
	.spidclic-shop-addr { font-size:13px; line-height:1.4; }
	.spidclic-shop-dist { font-size:12px; }
	.spidclic-shop-badge { font-size:11px; padding:3px 7px; }
	.spidclic-loading, .spidclic-empty { font-size:15px; padding:28px 16px; }
}