/**
 * Pagina Contatti — skin scura eBoots (page-contatti.php).
 * Mobile-first; su desktop form a sinistra (più largo) + colonna info a destra.
 * Token: assets/css/tokens.css. Override campi FluentForm scoped a .eb-contact.
 */

/* Sfondo scuro su tutta la pagina (Blocksy lascia il body chiaro; contatti.css
   è caricato solo qui). Body-class portabile eb-contact-page (slug, non id). */
body.eb-contact-page,
body.eb-contact-page #main.site-main {
	background: var(--bg);
}
/* Heading Blocksy sono navy su chiaro: forziamo il colore testo nel nostro blocco. */
body.eb-contact-page .eb-contact :is(h1, h2, h3) {
	color: var(--txt);
}
/* Via il titolo pagina/hero Blocksy: la conferma è il nostro hero. */
body.eb-contact-page .page-title,
body.eb-contact-page .entry-header > .page-title,
body.eb-contact-page .hero-section {
	display: none;
}

.eb-contact {
	max-width: 1040px;
	margin: 0 auto;
	padding: clamp(24px, 5vw, 56px) var(--space-5, 20px) 64px;
	color: var(--txt);
	font-family: var(--font-ui, 'Saira', system-ui, sans-serif);
}

/* ---------------- hero ---------------- */
.eb-contact__hero {
	text-align: center;
	max-width: 640px;
	margin: 0 auto clamp(24px, 4vw, 44px);
}
.eb-contact__kicker {
	font-family: var(--font-ui, sans-serif);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--volt);
	margin: 0 0 10px;
}
.eb-contact__title {
	font-family: var(--font-d, 'Saira Condensed', sans-serif);
	font-weight: 800;
	font-size: clamp(36px, 11vw, 64px);
	line-height: 0.95;
	text-transform: uppercase;
	margin: 0 0 14px;
}
.eb-contact__sub {
	font-size: 15px;
	line-height: 1.5;
	color: var(--muted);
	margin: 0;
}

/* ---------------- griglia ---------------- */
.eb-contact__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4, 16px);
	align-items: start;
}
@media (min-width: 880px) {
	.eb-contact__grid {
		grid-template-columns: 1.6fr 1fr;
		gap: var(--space-5, 24px);
	}
}

/* ---------------- card generica ---------------- */
.eb-contact__card,
.eb-contact__form-card {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg, 16px);
	background: var(--surface);
	padding: clamp(18px, 3vw, 28px);
}
.eb-contact__card + .eb-contact__card {
	margin-top: var(--space-4, 16px);
}
.eb-contact__card-t {
	font-family: var(--font-d, sans-serif);
	font-weight: 800;
	font-size: 18px;
	text-transform: uppercase;
	margin: 0 0 16px;
}

/* ---------------- modi alternativi ---------------- */
.eb-contact__way {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 0;
	text-decoration: none;
	color: var(--txt);
}
.eb-contact__way + .eb-contact__way {
	border-top: 1px solid var(--line);
}
.eb-contact__way-ico {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: var(--surface-2);
	display: grid;
	place-items: center;
	color: var(--txt);
	transition: border-color 0.15s ease, color 0.15s ease;
}
.eb-contact__way:hover .eb-contact__way-ico {
	border-color: var(--volt);
	color: var(--volt);
}
.eb-contact__way-tx {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.eb-contact__way-k {
	font-weight: 700;
	font-size: 14px;
}
.eb-contact__way-v {
	font-size: 12.5px;
	color: var(--muted);
	margin-top: 1px;
}
.eb-contact__way-arrow {
	flex: none;
	color: var(--muted);
	font-size: 18px;
	transition: transform 0.15s ease, color 0.15s ease;
}
.eb-contact__way:hover .eb-contact__way-arrow {
	color: var(--volt);
	transform: translateX(3px);
}

/* ---------------- rassicurazioni ---------------- */
.eb-contact__reassure .eb-contact__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.eb-contact__list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	color: var(--txt);
	padding: 7px 0;
}
.eb-contact__list li span {
	font-size: 16px;
}

/* ---------------- riga legale (P.IVA) ---------------- */
.eb-contact__legal {
	margin: 4px 0 0;
	padding: 0 4px;
	font-size: 11.5px;
	color: var(--muted);
	letter-spacing: 0.02em;
}

/* ---------------- bottone (fallback) ---------------- */
.eb-contact__fallback {
	font-size: 14px;
	color: var(--muted);
	margin: 0 0 16px;
	line-height: 1.5;
}
.eb-contact__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 0;
	cursor: pointer;
	text-decoration: none;
	border-radius: var(--radius-pill, 999px);
	font-family: var(--font-d, sans-serif);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 15px;
	padding: 14px 24px;
}
.eb-contact__btn--primary {
	background: var(--volt);
	color: #0a0a0a;
}
.eb-contact__btn--primary:hover {
	color: #0a0a0a;
	filter: brightness(1.04);
}

/* ---------------- FluentForm — skin scura ----------------
   NB: il wrapper FluentForm è .frm-fluent-form (NON .fluentform): scopiamo
   direttamente su .eb-contact__form + le classi FF, così non dipendiamo dal
   wrapper. Il bottone usa !important perché FluentForm inietta uno <style>
   per-form con selettore ID (#fluentform_N .ff-btn-submit) che vince altrimenti. */
.eb-contact__form .ff-el-group {
	margin-bottom: 16px;
}
.eb-contact__form .ff-el-input--label label,
.eb-contact__form .ff-el-input--label {
	color: #cfcfcf;
	font-family: var(--font-ui, sans-serif);
	font-weight: 600;
	font-size: 13px;
	margin-bottom: 6px;
}
.eb-contact__form .ff-el-is-required::after,
.eb-contact__form .ff-el-input--label .text-danger {
	color: var(--volt);
}
.eb-contact__form input.ff-el-form-control,
.eb-contact__form textarea.ff-el-form-control,
.eb-contact__form select.ff-el-form-control {
	width: 100%;
	box-sizing: border-box;
	background: #0e0e0e;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-md, 10px);
	color: var(--txt);
	font-family: var(--font-ui, sans-serif);
	font-size: 15px;
	padding: 12px 14px;
	min-height: 48px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.eb-contact__form textarea.ff-el-form-control {
	min-height: 120px;
	resize: vertical;
}
.eb-contact__form input.ff-el-form-control::placeholder,
.eb-contact__form textarea.ff-el-form-control::placeholder {
	color: #5a5a5a;
}
.eb-contact__form input.ff-el-form-control:focus,
.eb-contact__form textarea.ff-el-form-control:focus,
.eb-contact__form select.ff-el-form-control:focus {
	border-color: var(--volt);
	box-shadow: 0 0 0 3px rgba(199, 247, 63, 0.16);
	outline: none;
}

/* Checkbox/radio (incl. consenso GDPR) coerenti col resto del tema: accent volt
   come le checkbox del checkout. */
.eb-contact__form input[type="checkbox"],
.eb-contact__form input[type="radio"] {
	width: 18px;
	height: 18px;
	accent-color: var(--volt);
	flex: none;
	margin: 2px 0 0;
}
/* Consenso GDPR: label su riga, casella a sinistra, testo piccolo e attenuato
   che va a capo pulito (non più una riga lunga schiacciata). */
.eb-contact__form label:has(.ff_tc_checkbox) {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	cursor: pointer;
	font-weight: 400;
}
.eb-contact__form .ff_tc_checkbox {
	flex: none;
	display: inline-flex;
}
.eb-contact__form .ff_t_c {
	font-size: 12.5px;
	color: var(--muted);
	line-height: 1.45;
	font-weight: 400;
}

/* Submit = pill volt (come i CTA del tema). !important per battere lo
   <style> per-form di FluentForm (selettore ID). */
.eb-contact__form .ff-btn.ff-btn-submit,
.eb-contact__form button[type="submit"].ff-btn {
	background: var(--volt) !important;
	color: #0a0a0a !important;
	border: 0 !important;
	border-radius: var(--radius-pill, 999px) !important;
	font-family: var(--font-d, sans-serif);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 15px;
	padding: 14px 28px;
	cursor: pointer;
	box-shadow: none;
	transition: filter 0.1s ease, transform 0.1s ease;
}
.eb-contact__form .ff-btn.ff-btn-submit:hover,
.eb-contact__form button[type="submit"].ff-btn:hover {
	background: var(--volt) !important;
	color: #0a0a0a !important;
	filter: brightness(1.04);
}
.eb-contact__form .ff-btn.ff-btn-submit:active,
.eb-contact__form button[type="submit"].ff-btn:active {
	transform: translateY(1px);
}

/* Messaggi di esito leggibili sul fondo scuro. */
.eb-contact__form .ff-message-success {
	color: var(--mint);
	border: 1px solid rgba(43, 230, 163, 0.4);
	border-radius: var(--radius-md, 10px);
	padding: 12px 14px;
	background: rgba(43, 230, 163, 0.06);
}
.eb-contact__form .error,
.eb-contact__form .text-danger {
	color: #ef4444;
	font-size: 12.5px;
}