/* ==========================================================================
   FFJ — Spedizione assicurata (Secursus)
   Un riquadro chiaro nel riepilogo: si nota senza gridare. Casella a sinistra,
   testo al centro, prezzo a destra; quando è scelta il bordo diventa ink.
   Uso solo le variabili di ff-root.css; dopo la virgola c'è il paracadute.
   ========================================================================== */

.ffj-secursus {
	margin: var(--ff-space-4, 16px) 0;
	border: 1px solid var(--ff-border, #E5E5E5);
	border-radius: var(--ff-radius-sm, 4px);
	background: var(--ff-champagne-50, #FBF6E6);
	transition: border-color var(--ff-dur-fast, 120ms) ease;
}

.ffj-secursus.is-checked {
	border-color: var(--ff-ink, #1A1A1A);
}

.ffj-secursus__label {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr) auto;
	align-items: start;
	gap: var(--ff-space-3, 12px);
	margin: 0;
	padding: var(--ff-space-3, 12px) var(--ff-space-4, 16px);
	cursor: pointer;
}

/* Casella quadrata ink, spunta champagne come nel resto del sito */
.ffj-secursus__input {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	min-height: 0;
	margin: 2px 0 0;
	padding: 0;
	border: 1.5px solid var(--ff-border-strong, #BDBDBD);
	border-radius: 3px;
	background: var(--ff-white, #fff);
	cursor: pointer;
}

.ffj-secursus__input:checked {
	border-color: var(--ff-ink, #1A1A1A);
	background: var(--ff-ink, #1A1A1A) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23F4E4A9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center;
}

.ffj-secursus__input:focus-visible {
	outline: 2px solid var(--ff-focus, #1A1A1A);
	outline-offset: 2px;
}

.ffj-secursus__input:disabled { opacity: 0.5; }

.ffj-secursus__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ffj-secursus__title {
	color: var(--ff-text, #1A1A1A);
	font-size: var(--ff-fs-sm, 14px);
	font-weight: var(--ff-fw-semibold, 600);
	line-height: var(--ff-lh-sm, 20px);
}

.ffj-secursus__desc {
	color: var(--ff-text-muted, #6B6B6B);
	font-size: var(--ff-fs-xs, 12px);
	line-height: var(--ff-lh-xs, 16px);
}

.ffj-secursus__price {
	color: var(--ff-text, #1A1A1A);
	font-size: var(--ff-fs-sm, 14px);
	font-weight: var(--ff-fw-bold, 700);
	white-space: nowrap;
}
