/* =============================================================================
   Esprit Fourmis — Cadeaux progressifs (front)
   3 modes: full (cart page), compact (mini-cart), discovery (homepage no-cart)
   ========================================================================== */

.efc-progress {
	--efc-bg: #FFFFFF;
	--efc-accent: #75C32C;
	--efc-accent-d: #5FA122;
	--efc-accent-soft: #E8F4D9;
	--efc-text: #2B2F38;
	--efc-muted: #5D6167;
	--efc-track: #E5E5E5;
	--efc-radius: 10px;
	box-sizing: border-box;
	background: var(--efc-bg);
	color: var(--efc-text);
	border-radius: var(--efc-radius);
	padding: 18px 20px;
	margin: 18px 0;
	font-family: inherit;
	border: 1px solid var(--efc-track);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}
.efc-progress * { box-sizing: border-box; }

.efc-progress__header {
	margin-bottom: 18px;
}
.efc-progress__title { font-size: 16px; font-weight: 700; display: block; }
.efc-progress__icon { display: inline-block; margin-left: 8px; font-size: 18px; line-height: 1; vertical-align: -2px; }
.efc-progress__intro { margin: 4px 0 0; color: var(--efc-muted); font-size: 13px; line-height: 1.4; }

/* The bar itself */
.efc-progress__bar {
	position: relative;
	height: 8px;
	background: var(--efc-track);
	border-radius: 999px;
	margin: 24px 8px 18px;
}
.efc-progress__fill {
	position: absolute; left: 0; top: 0; bottom: 0;
	background: linear-gradient(90deg, var(--efc-accent), var(--efc-accent-d));
	border-radius: 999px;
	transition: width .4s ease;
}
.efc-progress__milestone {
	position: absolute; top: 50%; transform: translate(-50%, -50%);
}
.efc-progress__milestone-dot {
	display: block;
	width: 16px; height: 16px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--efc-track);
	transition: border-color .3s, background .3s, box-shadow .3s;
}
.efc-progress__milestone.is-reached .efc-progress__milestone-dot {
	border-color: var(--efc-accent);
	background: var(--efc-accent);
	box-shadow: 0 0 0 4px rgba(117, 195, 44, 0.18);
}

.efc-progress__status { margin: 16px 0 0; font-size: 13px; color: var(--efc-muted); text-align: center; }

/* ---- Tier columns (under the bar) ---- */
.efc-progress__cols {
	display: grid;
	grid-template-columns: repeat(var(--efc-cols, 3), 1fr);
	gap: 10px;
	margin: 4px 0 0;
	align-items: start;
}
.efc-progress__col {
	display: flex; flex-direction: column; align-items: center;
	gap: 8px;
	min-width: 0;
}
.efc-progress__col-label {
	font-size: 14px;
	font-weight: 700;
	color: var(--efc-muted);
	letter-spacing: .2px;
	transition: color .3s;
}
.efc-progress__col.is-reached .efc-progress__col-label { color: var(--efc-accent-d); }

.efc-progress__gifts {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-direction: column; gap: 4px;
	width: 100%;
}

/* Individual gift item — compact pill with thumb + name */
.efc-gift-item { width: 100%; min-width: 0; }
.efc-gift-item__btn {
	all: unset;
	box-sizing: border-box;
	display: flex; align-items: center; gap: 8px;
	padding: 6px 8px;
	border: 2px solid #E5E5E5;     /* 2px so the green selected border is more visible */
	border-radius: 6px;
	background: #fff;
	cursor: pointer;
	font-size: 12px;
	line-height: 1.25;
	color: var(--efc-text) !important;
	transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
	width: 100%;
	position: relative;
}
button.efc-gift-item__btn:hover,
button.efc-gift-item__btn:focus,
button.efc-gift-item__btn:active {
	border-color: #BFBFBF;
	background: #FAFAFA;
	color: var(--efc-text) !important;
}
/* SELECTED — 3px green border + soft halo + tinted bg, no extra badge */
.efc-gift-item.is-selected .efc-gift-item__btn,
.efc-gift-item.is-selected button.efc-gift-item__btn:hover {
	border: 3px solid var(--efc-accent) !important;
	background: var(--efc-accent-soft) !important;
	box-shadow: 0 0 0 3px rgba(117, 195, 44, .20) !important;
	color: var(--efc-text) !important;
	padding: 5px 7px;       /* compensate +1px border */
}
/* Make sure label/tier text inherit too */
.efc-gift-item__btn .efc-gift-item__label,
.efc-gift-item__btn:hover .efc-gift-item__label { color: inherit !important; }
.efc-gift-item.is-locked .efc-gift-item__btn {
	cursor: default;
	opacity: .5;
	background: transparent;
}
.efc-gift-item.is-sold-out .efc-gift-item__btn {
	opacity: .35;
	text-decoration: line-through;
}

.efc-gift-item__thumb {
	flex-shrink: 0;
	width: 26px; height: 26px;
	border-radius: 4px;
	background: #F2F2F2 center/cover no-repeat;
}
.efc-gift-item__label {
	flex: 1; min-width: 0;
	text-align: left;
	word-break: break-word;
	hyphens: auto;
}
.efc-gift-item__check {
	flex-shrink: 0;
	width: 16px; height: 16px;
	background: var(--efc-accent);
	color: #fff;
	border-radius: 50%;
	font-size: 10px;
	font-weight: 700;
	display: none;            /* hidden by default — only shown when parent .is-selected */
	align-items: center; justify-content: center;
	line-height: 1;
}
.efc-gift-item.is-selected .efc-gift-item__check { display: flex; }

.efc-gifts__clear { margin: 12px 0 0; text-align: center; display: none; }
.efc-progress.has-selection .efc-gifts__clear { display: block; }
.efc-gifts__clear-btn,
button.efc-gifts__clear-btn {
	background: none !important;
	border: none !important;
	color: var(--efc-muted) !important;
	cursor: pointer;
	font-size: 12px;
	padding: 4px 8px;
	text-decoration: underline;
	box-shadow: none !important;
}
.efc-gifts__clear-btn:hover,
.efc-gifts__clear-btn:focus,
button.efc-gifts__clear-btn:hover,
button.efc-gifts__clear-btn:focus {
	background: none !important;
	color: var(--efc-accent-d) !important;   /* dark green */
	text-decoration: underline;
	box-shadow: none !important;
}

/* Inline error banner shown when an AJAX call rejects a selection. */
.efc-progress__error {
	margin: 12px 0 0;
	padding: 10px 14px;
	background: #FEF2F2;
	border: 1px solid #FCA5A5;
	border-radius: 6px;
	color: #B91C1C;
	font-size: 13px;
	text-align: center;
	animation: efc-shake .35s ease both;
}
@keyframes efc-shake {
	0%,100% { transform: translateX(0); }
	25%     { transform: translateX(-4px); }
	50%     { transform: translateX(4px); }
	75%     { transform: translateX(-2px); }
}

/* Compact mode (mini-cart, sidebars) — bar + status only, no cols */
.efc-progress--compact { padding: 12px 14px; margin: 8px 0; font-size: 13px; }
.efc-progress--compact .efc-progress__bar { height: 6px; margin: 18px 4px 14px; }
.efc-progress--compact .efc-progress__milestone-dot { width: 12px; height: 12px; }
.efc-progress--compact .efc-progress__cols { display: none; } /* compact stays minimal */
.efc-progress--compact .efc-progress__status { font-size: 12px; margin-top: 8px; }

/* Discovery mode (homepage, no cart) — same layout but read-only */
.efc-progress--discovery .efc-gift-item__btn { cursor: default; }

/* Responsive — vertical timeline on mobile.
   GIFTS DISPLAY ABOVE THEIR DOT/LABEL (column-reverse): the line runs through
   the gifts and ends at the dot of the tier they belong to. The connector
   line in each col goes from top of the col down to its dot — for the first
   col, this gives a "free" trail at the top (no dot above), as desired.
   Reached state colors both the dot and the trail leading INTO it (= the
   gifts list belonging to that tier). */
@media (max-width: 700px) {
	.efc-progress { padding: 14px; margin: 8px 0; }
	.efc-progress__bar { display: none; }
	.efc-progress__cols {
		position: relative;
		display: flex; flex-direction: column;
		gap: 0;
		margin-top: 8px;
	}
	/* Small starting cap dot at the very top of the rail — anchors the leading trait
	   so it doesn't appear to start from nowhere. Centered on the trait
	   (left:10 → 8px-wide dot center = 14, matching the 2px-wide line at left:13). */
	.efc-progress__cols::before {
		content: '';
		position: absolute;
		left: 10px; top: -1px;
		width: 8px; height: 8px;
		border-radius: 50%;
		background: var(--efc-track);
		z-index: 3;
		transition: background .3s;
	}
	/* Cap dot turns green as soon as the cart has any subtotal — same idea
	   as the horizontal bar's fill starting to fill from the first euro. */
	.efc-progress.has-progress .efc-progress__cols::before {
		background: var(--efc-accent);
	}
	.efc-progress__col {
		position: relative;
		display: flex;
		flex-direction: column-reverse;  /* label at bottom, gifts above */
		align-items: stretch;
		gap: 8px;
		padding: 18px 0 0 36px;
		text-align: left;
		min-height: 28px;
	}
	.efc-progress__col:first-child { padding-top: 18px; } /* tight headroom under the cap dot */

	/* Dot — at the BOTTOM of each col, aligned with the label */
	.efc-progress__col::before {
		content: '';
		position: absolute;
		left: 6px; bottom: 4px;
		width: 16px; height: 16px;
		border-radius: 50%;
		background: #fff;
		border: 2px solid var(--efc-track);
		box-sizing: border-box;
		z-index: 2;
		transition: background .3s, border-color .3s, box-shadow .3s;
	}
	.efc-progress__col.is-reached::before {
		background: var(--efc-accent);
		border-color: var(--efc-accent);
		box-shadow: 0 0 0 4px rgba(117, 195, 44, .18);
	}
	/* Vertical line from top of col DOWN to its dot.
	   Continuous across cols because cols stack with gap:0. */
	.efc-progress__col::after {
		content: '';
		position: absolute;
		left: 13px; top: 0; bottom: 22px;
		width: 2px;
		background: var(--efc-track);
		z-index: 1;
		transition: background .3s;
	}
	.efc-progress__col.is-reached::after { background: var(--efc-accent); }

	.efc-progress__col-label { font-size: 13px; padding-bottom: 2px; align-self: flex-start; }
}

/* Loading state */
.efc-progress.is-loading { opacity: .65; pointer-events: none; }

/* ===== Shipping method badge =====
   Appended to each shipping method label by EFC_Frontend::add_express_badge
   when the cart contains a fragile species. Tells the customer at a glance
   whether the live-arrival guarantee applies to that shipping option.
   text-indent / direction / text-align are reset because Astra applies a
   negative text-indent on shipping list <li>/<label> in the cart sidebar,
   which would otherwise drag the badge text out of its pill on the left. */
.efc-ship-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: .02em;
	vertical-align: middle;
	white-space: nowrap;
	text-indent: 0;
	text-align: center;
	direction: ltr;
}
.efc-ship-badge--ok {
	background: #e6f4ea;
	color: #1e6b32;
	border: 1px solid #b8dfc4;
}
.efc-ship-badge--ko {
	background: #fbeaea;
	color: #8b1f1f;
	border: 1px solid #efbcbc;
}
.efc-ship-badge--info {
	background: #e3f0fb;
	color: #1056a3;
	border: 1px solid #b3d3ee;
}