/* Recesso 54-bis – stili front-end v2 */

/* ── Box principale ─────────────────────────────────────────────── */
.rec54-box {
	margin: 0 auto;
	padding: 28px 32px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.rec54-title { margin-top: 0; font-size: 1.4em; }
.rec54-intro { color: #555; margin-top: 0; }

/* ── Barra step ─────────────────────────────────────────────────── */
.rec54-step-bar {
	display: flex;
	gap: 0;
	margin-bottom: 28px;
	counter-reset: rec54step;
}
.rec54-step-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	color: #9ca3af;
	text-align: center;
	position: relative;
	padding-bottom: 4px;
}
.rec54-step-item::before {
	content: '';
	position: absolute;
	top: 13px;
	left: 50%;
	width: 100%;
	height: 2px;
	background: #e5e7eb;
	z-index: 0;
}
.rec54-step-item:last-child::before { display: none; }

.rec54-step-num {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #e5e7eb;
	color: #9ca3af;
	font-size: 12px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
	transition: background .2s, color .2s;
}
.rec54-step-item.is-active .rec54-step-num {
	background: #1a1a1a;
	color: #fff;
}
.rec54-step-item.is-completed .rec54-step-num {
	background: #16a34a;
	color: #fff;
}
.rec54-step-item.is-active  { color: #1a1a1a; font-weight: 600; }
.rec54-step-item.is-completed { color: #16a34a; }
.rec54-step-label { display: none; }

@media (min-width: 540px) {
	.rec54-step-label { display: block; }
}

/* ── Pannelli ───────────────────────────────────────────────────── */
.rec54-panel { animation: rec54fade .18s ease; }
.rec54-panel[hidden] { display: none; }

@keyframes rec54fade {
	from { opacity: 0; transform: translateX(8px); }
	to   { opacity: 1; transform: translateX(0); }
}

.rec54-panel-title {
	margin-top: 0;
	margin-bottom: 18px;
	font-size: 1.15em;
	border-bottom: 2px solid #f3f4f6;
	padding-bottom: 10px;
}

/* ── Campi ──────────────────────────────────────────────────────── */
.rec54-field { margin-bottom: 18px; }
.rec54-field label,
.rec54-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	font-size: .94em;
}
.rec54-form p { margin: 0 0 16px; }
.rec54-form label { display: block; font-weight: 600; margin-bottom: 6px; }

.rec54-form input[type=text],
.rec54-form input[type=email],
.rec54-form input[type=tel],
.rec54-form input[type=date],
.rec54-form input[type=number],
.rec54-form input[type=file],
.rec54-form select,
.rec54-form textarea,
.rec54-field input[type=text],
.rec54-field input[type=email],
.rec54-field input[type=tel],
.rec54-field input[type=date],
.rec54-field input[type=number],
.rec54-field input[type=file],
.rec54-field select,
.rec54-field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #d1d5db;
	border-radius: 7px;
	box-sizing: border-box;
	font-size: .95em;
	transition: border-color .15s;
}
.rec54-form input:focus,
.rec54-field input:focus,
.rec54-field select:focus,
.rec54-field textarea:focus {
	outline: none;
	border-color: #1a1a1a;
	box-shadow: 0 0 0 3px rgba(26,26,26,.08);
}
.rec54-form input:disabled,
.rec54-field input:disabled,
.rec54-field select:disabled {
	background: #f9fafb;
	color: #6b7280;
	cursor: default;
}

.rec54-field-group {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
@media (max-width: 480px) {
	.rec54-field-group { grid-template-columns: 1fr; }
}

.rec54-help {
	margin: 5px 0 0;
	font-size: .83em;
	color: #6b7280;
}

.rec54-field-error {
	color: #b91c1c;
	font-size: .88em;
	margin: 6px 0 0;
}
.rec54-field-error[hidden] { display: none; }

.rec54-invalid,
.rec54-invalid input,
.rec54-invalid select,
.rec54-invalid textarea {
	border-color: #f87171 !important;
}

/* ── Radio cards (Tipo richiesta) ───────────────────────────────── */
.rec54-radio-cards {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 20px;
}
.rec54-radio-card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 18px;
	border: 2px solid #e5e7eb;
	border-radius: 10px;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
.rec54-radio-card:hover { border-color: #9ca3af; }
.rec54-radio-card input[type=radio] { margin-top: 3px; flex-shrink: 0; }
.rec54-radio-card:has(input:checked) {
	border-color: #1a1a1a;
	background: #fafafa;
}
.rec54-radio-card-icon {
	font-size: 1.4em;
	line-height: 1;
	flex-shrink: 0;
}
.rec54-radio-card-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: .93em;
	margin-top: 10px;
}
.rec54-radio-card-body strong { display: block; font-size: 1em; }
.rec54-radio-card-body span { color: #6b7280; }

/* ── Radio option standard (pannello risoluzione) ───────────────── */
.rec54-radio-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.rec54-radio-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	cursor: pointer;
	transition: border-color .15s;
}
.rec54-radio-option:hover { border-color: #9ca3af; }
.rec54-radio-option:has(input:checked) { border-color: #1a1a1a; background: #fafafa; font-weight: 600; }
.rec54-radio-option[hidden] { display: none; }

/* ── Info box ───────────────────────────────────────────────────── */
.rec54-info-box {
	padding: 12px 16px;
	border-radius: 8px;
	font-size: .9em;
	margin: 12px 0;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
}
.rec54-info-box.rec54-warning {
	background: #fffbeb;
	border-color: #fcd34d;
}
.rec54-info-box[hidden] { display: none; }

/* ── Prodotti ───────────────────────────────────────────────────── */
.rec54-products-list { display: flex; flex-direction: column; gap: 10px; }

.rec54-product-row {
	border: 1px solid #e5e7eb;
	border-radius: 9px;
	overflow: hidden;
}
.rec54-product-label {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	cursor: pointer;
	font-weight: 500;
	background: #fafafa;
}
.rec54-product-label input[type=checkbox] { flex-shrink: 0; }
.rec54-product-thumb {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 5px;
	flex-shrink: 0;
}
.rec54-product-name { flex: 1; }
.rec54-product-qty-max { color: #9ca3af; font-size: .85em; }

.rec54-product-details {
	padding: 14px 16px;
	border-top: 1px solid #e5e7eb;
	background: #fff;
}
.rec54-product-details[hidden] { display: none; }

/* ── Allegati ───────────────────────────────────────────────────── */
.rec54-form input[type=file],
.rec54-field input[type=file] {
	padding: 8px;
	cursor: pointer;
}

/* ── Riepilogo ──────────────────────────────────────────────────── */
.rec54-summary-box {
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 14px 18px;
	margin-bottom: 22px;
	font-size: .93em;
}
.rec54-summary-box p { margin: 4px 0; }

/* ── Dichiarazioni ──────────────────────────────────────────────── */
.rec54-ack-fields { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.rec54-ack-label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: .93em;
	cursor: pointer;
}
.rec54-ack-label input[type=checkbox] { margin-top: 2px; flex-shrink: 0; }

/* ── IBAN section ───────────────────────────────────────────────── */
#rec54-iban-section {
	margin-top: 20px;
	padding: 18px;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 9px;
}
#rec54-iban-section h4 { margin: 0 0 10px; font-size: 1em; }
#rec54-iban-section[hidden] { display: none; }

/* ── Navigazione wizard ─────────────────────────────────────────── */
.rec54-wizard-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 28px;
	padding: 16px;
	border-top: 1px solid #f3f4f6;
	gap: 12px;
	position: sticky;
	bottom: 0;
	background: #fff;
	z-index: 10;
	box-shadow: 0 -4px 12px rgba(0,0,0,.04);
	border-radius: 10px;
}

/* ── Pulsanti ───────────────────────────────────────────────────── */
.rec54-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 22px;
	border: 0;
	border-radius: 7px;
	font-size: .97em;
	font-weight: 600;
	cursor: pointer;
	transition: opacity .15s, transform .1s;
	text-decoration: none;
}
.rec54-btn:hover  { opacity: .88; }
.rec54-btn:active { transform: scale(.98); }
.rec54-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.rec54-btn-primary   { background: #1a1a1a; color: #fff; }
.rec54-btn-secondary { background: #f3f4f6; color: #374151; }
.rec54-btn-danger    { background: #b32d2e; color: #fff; }
.rec54-btn-block     { width: 100%; margin-top: 8px; }

.rec54-btn-prev[hidden] { display: none; }
.rec54-btn-next[hidden] { display: none; }

/* ── Notice ─────────────────────────────────────────────────────── */
.rec54-notice {
	max-width: 680px;
	margin: 0 auto 16px;
	padding: 12px 16px;
	border-radius: 8px;
	font-size: .95em;
}
.rec54-notice-info    { background: #eef4fb; border: 1px solid #bcd6f2; }
.rec54-notice-success { background: #edf7ed; border: 1px solid #bfe3bf; }
.rec54-notice-error   { background: #fbeaea; border: 1px solid #f0bcbc; }

/* ── Esito ──────────────────────────────────────────────────────── */
.rec54-success { border-color: #bfe3bf; background: #f0fdf4; }
.rec54-success .rec54-title { color: #15803d; }

/* ── Tabella summary (email) ────────────────────────────────────── */
.rec54-summary { width: 100%; border-collapse: collapse; margin: 16px 0; }
.rec54-summary th,
.rec54-summary td { text-align: left; padding: 8px 10px; border: 1px solid #eee; vertical-align: top; }
.rec54-summary th  { background: #fafafa; width: 35%; }

/* ── Footer badge ───────────────────────────────────────────────── */
.rec54-footer-link { margin: 0 auto; padding: 18px 0 32px; width: 100%; text-align: center; box-sizing: border-box; }
.rec54-pill {
	--rec54-accent: #ea580c;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 6px 16px 6px 6px;
	border-radius: 999px;
	background: #ffffff;
	color: #1f2937 !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none !important;
	border: 1px solid rgba(15,23,42,.10);
	box-shadow: 0 1px 2px rgba(15,23,42,.07), 0 6px 16px rgba(15,23,42,0);
	transition: transform .15s ease, box-shadow .15s ease;
	-webkit-font-smoothing: antialiased;
}
.rec54-pill:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(15,23,42,.12), 0 6px 16px rgba(15,23,42,.10) !important;
	color: #1f2937 !important;
}
.rec54-pill:focus-visible { outline: 2px solid var(--rec54-accent); outline-offset: 2px; }
.rec54-ico {
	display: inline-flex;
	width: 28px;
	height: 28px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(234,88,12,.12);
	background: color-mix(in srgb, var(--rec54-accent) 13%, #fff);
	color: var(--rec54-accent);
	flex: 0 0 auto;
}
.rec54-ico svg { width: 13px; height: 13px; display: block; }
@media (prefers-reduced-motion: reduce) { .rec54-pill { transition: none; } }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 560px) {
	.rec54-box { padding: 20px 16px; }
	.rec54-wizard-nav { flex-direction: column-reverse; }
	.rec54-wizard-nav .rec54-btn { width: 100%; justify-content: center; }
}