/* Cykeln · Tesseramento — stili del modulo pubblico.
   Autonomi (funzionano anche con Blocksy/Elementor); usano i colori del team. */
.cyt {
	--cyt-ink: #12292B;
	--cyt-soft: #4a6163;
	--cyt-bg: #EEF1F0;
	--cyt-card: #fff;
	--cyt-line: #C9D3D1;
	--cyt-accent: #EF4B50;
	--cyt-accent-deep: #C8323A;
	--cyt-ok: #17403F;
	max-width: 760px;
	margin: 0 auto;
	padding: 8px 0 48px;
	color: var(--cyt-ink);
	font-size: 17px;
	line-height: 1.5;
	box-sizing: border-box;
}
.cyt *, .cyt *::before, .cyt *::after { box-sizing: border-box; }
.cyt h2 { margin: 0 0 8px; font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.05; }
.cyt h3 { margin: 0 0 10px; font-size: 1.15rem; }
.cyt-lead { font-size: 1.08rem; color: var(--cyt-soft); margin: 0 0 20px; }
.cyt-hint { display: block; font-size: .88rem; color: var(--cyt-soft); margin: 6px 0 0; }

.cyt-sec { border: 0; padding: 0; margin: 0 0 28px; min-width: 0; }
.cyt-sec > legend { font-weight: 800; font-size: 1.1rem; padding: 0 0 10px; width: 100%; border-bottom: 3px solid var(--cyt-ink); margin-bottom: 16px; }
.cyt-grid { display: grid; grid-template-columns: 1fr; gap: 14px 18px; }
@media (min-width: 640px) { .cyt-grid { grid-template-columns: 1fr 1fr; } }

.cyt-f { display: block; margin: 0; min-width: 0; border: 0; padding: 0; }
.cyt-f > label, .cyt-radios > legend { display: block; font-weight: 600; margin-bottom: 4px; font-size: .95rem; padding: 0; }
.cyt-f abbr { color: var(--cyt-accent-deep); text-decoration: none; }
.cyt input[type=text], .cyt input[type=email], .cyt input[type=tel], .cyt input[type=date], .cyt input[type=number], .cyt select {
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	font: inherit;
	font-size: 16px; /* evita lo zoom su iPhone */
	color: var(--cyt-ink);
	background: #fff;
	border: 2px solid var(--cyt-line);
	border-radius: 2px;
	appearance: none;
	-webkit-appearance: none;
}
.cyt select { background-image: linear-gradient(45deg, transparent 50%, var(--cyt-ink) 50%), linear-gradient(135deg, var(--cyt-ink) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.cyt input[type=file] { width: 100%; font: inherit; font-size: 16px; padding: 10px; background: #fff; border: 2px dashed var(--cyt-line); }
.cyt input:focus-visible, .cyt select:focus-visible, .cyt button:focus-visible, .cyt summary:focus-visible {
	outline: 3px solid var(--cyt-accent); outline-offset: 2px; border-color: var(--cyt-ink);
}
.cyt .cyt-upper input { text-transform: uppercase; }
.cyt-f.has-err input, .cyt-f.has-err select { border-color: var(--cyt-accent-deep); }
.cyt-err { display: block; color: var(--cyt-accent-deep); font-weight: 600; font-size: .9rem; margin-top: 4px; }

.cyt-radios .cyt-radio { display: inline-flex; align-items: center; gap: 8px; margin-right: 22px; min-height: 44px; font-weight: 500; }
.cyt-radio input, .cyt-check input, .cyt-check-big input { width: 22px; height: 22px; accent-color: var(--cyt-accent-deep); flex: none; }

.cyt-feds { display: grid; gap: 10px; }
.cyt-check-big { display: flex; align-items: center; gap: 12px; padding: 14px; background: #fff; border: 2px solid var(--cyt-line); cursor: pointer; }
.cyt-check-big span { margin-left: auto; color: var(--cyt-soft); font-size: .92rem; text-align: right; }
.cyt-check-big:has(input:checked) { border-color: var(--cyt-ink); background: #fff7f7; }
.cyt-fee { margin: 4px 0 0; font-weight: 800; font-size: 1.1rem; }
.cyt-fee:empty { display: none; }
.cyt-check { margin: 4px 0; }
.cyt-check label { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; }
.cyt-check input { margin-top: 2px; }
.cyt-check.has-err label { color: var(--cyt-accent-deep); }

.cyt-btn {
	display: inline-block; min-height: 52px; padding: 14px 28px; border: 0; border-radius: 2px; cursor: pointer;
	background: var(--cyt-accent); color: #0B1A1B; font: inherit; font-weight: 800; font-size: 1.05rem; letter-spacing: .01em;
}
.cyt-btn:hover { background: #ff6468; }
.cyt-btn:active { transform: translateY(1px); }
.cyt-btn-ghost { background: transparent; border: 2px solid var(--cyt-ink); color: var(--cyt-ink); }
.cyt-btn-ghost:hover { background: var(--cyt-ink); color: #fff; }

.cyt-alert { margin: 0 0 20px; padding: 14px 16px; border-left: 6px solid var(--cyt-ink); background: #fff; }
.cyt-ok { border-color: var(--cyt-ok); }
.cyt-bad { border-color: var(--cyt-accent-deep); }

.cyt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Pagina personale */
.cyt-status { display: flex; flex-wrap: wrap; gap: 20px; margin: 0 0 22px; }
.cyt-status > div > span:first-child { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--cyt-soft); }
.cyt-chip { display: inline-block; padding: 4px 10px; font-weight: 700; font-size: .92rem; border-radius: 2px; }
.cyt-chip-ok { background: #d7efe0; color: #0b5a2b; }
.cyt-chip-wait { background: #fff0c2; color: #5b4300; }
.cyt-chip-due { background: #fbd9db; color: #8a1c22; }
.cyt-card { background: var(--cyt-card); border: 1px solid var(--cyt-line); padding: 20px; margin: 0 0 18px; }
.cyt-big { font-size: 2rem; font-weight: 900; margin: 0 0 8px; }
.cyt-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0 0 14px; }
.cyt-dl dt { color: var(--cyt-soft); }
.cyt-dl dd { margin: 0; word-break: break-word; }
.cyt-dl code { font-size: 1rem; background: #f3f6f5; padding: 2px 6px; }
.cyt details summary { cursor: pointer; font-weight: 700; padding: 10px 0; }
.cyt details form { margin-top: 10px; }
.cyt details .cyt-grid { margin-bottom: 14px; }

@media (prefers-reduced-motion: reduce) { .cyt * { transition: none !important; } }

.cyt [hidden] { display: none !important; }

/* Correzioni di specificità e spaziature */
.cyt .cyt-check-big { display: flex; font-weight: 400; margin: 0; }
.cyt .cyt-feds > .cyt-check-big { margin-bottom: 0; }
.cyt .cyt-status { margin-top: 18px; }
.cyt form .cyt-btn { margin-top: 14px; }
.cyt .cyt-card form .cyt-f + .cyt-btn { margin-top: 12px; }

/* I temi (es. Blocksy) possono dare ai titoli un colore chiaro: qui si forza. */
.cyt h2, .cyt h3, .cyt legend, .cyt label, .cyt p, .cyt dt, .cyt dd, .cyt summary { color: var(--cyt-ink); }
.cyt .cyt-lead, .cyt .cyt-hint, .cyt .cyt-dl dt { color: var(--cyt-soft); }
.cyt .cyt-err, .cyt .cyt-f abbr, .cyt .cyt-check.has-err label { color: var(--cyt-accent-deep); }
.cyt .cyt-btn { color: #0B1A1B; }
.cyt .cyt-btn-ghost { color: var(--cyt-ink); }
.cyt .cyt-btn-ghost:hover { color: #fff; }
.cyt .cyt-chip-ok { color: #0b5a2b; } .cyt .cyt-chip-wait { color: #5b4300; } .cyt .cyt-chip-due { color: #8a1c22; }
.cyt h2 { font-weight: 800; }


/* Riquadro quote ([cykeln_tesseramento_box]) */
.cyt-box { padding: clamp(1.25rem, 3vw, 2rem); background: #fff; border: 1px solid var(--cyt-line); border-top: 4px solid var(--cyt-accent); margin-block: 1.5rem; }
.cyt-box__state { margin: 0 0 1rem; font-weight: 700; }
.cyt-box__fees { list-style: none; margin: 0 0 1rem; padding: 0; }
.cyt-box__fees li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--cyt-line); }
.cyt-box__fees small { color: var(--cyt-soft); font-weight: 400; }
.cyt-box__fees b, .cyt-box__total b { font-weight: 900; font-variant-numeric: tabular-nums; }
.cyt-box__total { margin: 0 0 1.25rem; font-size: 1.1rem; }
.cyt-box .cyt-btn { text-decoration: none; }

/* Campi del modulo: niente bordino grigio, sfondo rosa pallido (lo stesso dei titoli del piè di pagina) */
.cyt { --cyt-field: #F6B4B6; --cyt-field-on: #F2A0A3; }
.cyt input[type=text], .cyt input[type=email], .cyt input[type=tel], .cyt input[type=date], .cyt input[type=number], .cyt select { background-color: var(--cyt-field); border: 2px solid transparent; }
.cyt input[type=file] { background: var(--cyt-field); border: 2px solid transparent; }
.cyt .cyt-check-big { background: var(--cyt-field); border: 2px solid transparent; }
.cyt .cyt-check-big:has(input:checked) { background: var(--cyt-field-on); border-color: var(--cyt-ink); }
.cyt .cyt-card { background: var(--cyt-field); border: 0; }
.cyt .cyt-f.has-err input, .cyt .cyt-f.has-err select { border-color: var(--cyt-accent-deep); }
.cyt input:focus-visible, .cyt select:focus-visible { border-color: var(--cyt-ink); }

/* Punti 4 e 5 (certificato e tessera sanitaria): più aria tra le righe */
#cyt-cert > .cyt-hint { margin: 0 0 22px; line-height: 1.5; }
#cyt-cert .cyt-grid { gap: 28px 18px; }
#cyt-cert .cyt-f > label, .cyt-sec-tessera .cyt-f > label { margin-bottom: 8px; }
#cyt-cert .cyt-hint, .cyt-sec-tessera .cyt-hint { margin-top: 10px; line-height: 1.5; }
.cyt-sec-tessera .cyt-f + .cyt-f { margin-top: 28px; }
.cyt-sec-tessera .cyt-grid { gap: 28px 18px; }

/* Pagina personale: le schede sono già rosa, quindi i campi dentro le schede restano bianchi per vedersi */
.cyt .cyt-card input[type=text], .cyt .cyt-card input[type=email], .cyt .cyt-card input[type=tel], .cyt .cyt-card input[type=date], .cyt .cyt-card input[type=number], .cyt .cyt-card select, .cyt .cyt-card input[type=file] { background-color: #fff; }
.cyt .cyt-card input[type=file] { border: 2px dashed rgba(18, 41, 43, .28); }

/* «La tua area»: pagina personale a schede (tesseramento, racconta una gara, le tue cronache, proponi una traccia) */
.cyt-area { margin-top: 22px; display: grid; gap: 18px; }
.cyt .cyt-area .cyt-card { margin: 0; }
.cyt-area-sec { display: grid; gap: 4px; }
.cyt .cyt-area-sec .cyt-card { margin: 0 0 18px; }
.cyt .cyt-area-h { font-size: 1.35rem; font-weight: 900; margin: 0; }
.cyt .cyt-card-done h3 { font-size: 1.1rem; font-weight: 900; margin: 0 0 4px; }
.cyt .cyt-card-done p { margin: 0; font-size: .98rem; }
.cyt .cyt-area-det { margin-top: 10px; }
.cyt .cyt-area-det summary { font-weight: 800; font-size: .95rem; padding: 6px 0; }
.cyt .cyt-area-det .cyt-card { background: rgba(255, 255, 255, .45); margin: 12px 0 0; }
.cyt .cyt-note { font-size: .92rem; color: var(--cyt-soft); margin: 10px 0 0; }
.cyt .cyt-card-new { background: var(--cyt-ink); position: relative; padding: 24px 22px; }
.cyt .cyt-card-new h3, .cyt .cyt-card-new p, .cyt .cyt-card-new b { color: #EEF1F0; }
.cyt .cyt-card-new h3 { font-size: 1.4rem; font-weight: 900; margin: 0 0 6px; padding-right: 72px; }
.cyt .cyt-card-new .cyt-lead { color: rgba(238, 241, 240, .82); margin: 0 0 14px; }
.cyt .cyt-card-new .cyt-note { color: rgba(238, 241, 240, .62); }
.cyt .cyt-tag { position: absolute; right: 16px; top: 16px; background: #E4FF1A; color: #0B1A1B; font-weight: 800; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; }
.cyt .cyt-lock { background: rgba(238, 241, 240, .1); padding: 14px 16px; border-radius: 2px; display: grid; gap: 2px; }
.cyt .cyt-lock p { margin: 0; }
.cyt .cyt-list { display: grid; gap: 8px; margin: 4px 0 0; }
.cyt .cyt-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 12px 14px; background: rgba(255, 255, 255, .45); border-radius: 2px; }
.cyt .cyt-item small { color: var(--cyt-soft); }
.cyt .cyt-ghost-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.cyt .cyt-ghost { height: 42px; border-radius: 2px; background: rgba(238, 241, 240, .12); margin-bottom: 10px; display: flex; align-items: center; padding: 0 12px; font-size: .9rem; color: rgba(238, 241, 240, .58); }
.cyt .cyt-ghost-tall { height: 70px; align-items: flex-start; padding-top: 12px; }
@media (max-width: 520px) { .cyt .cyt-ghost-row { grid-template-columns: 1fr; } }

/* Modulo «Racconta una gara» (dentro la scheda scura) */
.cyt .cyt-card-new label, .cyt .cyt-card-new .cyt-f > label { color: #EEF1F0; }
.cyt .cyt-card-new input[type=text], .cyt .cyt-card-new input[type=date], .cyt .cyt-card-new textarea { background-color: #F7F9F8; color: #12292B; border: 2px solid transparent; }
.cyt textarea { width: 100%; min-height: 150px; padding: 10px 12px; font: inherit; font-size: 16px; border-radius: 2px; resize: vertical; box-sizing: border-box; }
.cyt .cyt-card-new .cyt-f { margin-bottom: 16px; }
.cyt .cyt-two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0 16px; }
@media (max-width: 640px) { .cyt .cyt-two { grid-template-columns: 1fr; } }
.cyt .cyt-drop { display: grid; place-items: center; gap: 4px; text-align: center; min-height: 92px; padding: 14px; border: 2px dashed rgba(238, 241, 240, .4); border-radius: 2px; cursor: pointer; background: rgba(238, 241, 240, .06); position: relative; }
.cyt .cyt-drop b { font-weight: 800; font-size: 1rem; color: #EEF1F0; }
.cyt .cyt-drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; padding: 0; border: 0; min-height: 0; }
.cyt .cyt-drop:focus-within { outline: 3px solid var(--cyt-accent); outline-offset: 2px; }
.cyt .cyt-cthumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 10px; }
.cyt .cyt-cthumbs div { position: relative; aspect-ratio: 1; border-radius: 2px; overflow: hidden; background: #3a5b5a; }
.cyt .cyt-cthumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cyt .cyt-cthumbs button { position: absolute; right: 4px; top: 4px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(11, 26, 27, .82); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.cyt .cyt-chk { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 14px; font-size: .95rem; color: #EEF1F0; }
.cyt .cyt-chk input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--cyt-accent-deep); }
.cyt .cyt-card-new .cyt-err { color: #ffb4b6; }
.cyt .cyt-card-new .cyt-btn { margin-top: 6px; }
.cyt .cyt-btn-light { background: transparent; border: 2px solid #EEF1F0; color: #EEF1F0; text-decoration: none; }
.cyt .cyt-card-new .cyt-btn-light:hover { background: #EEF1F0; color: #12292B; }
.cyt .cyt-thanks h4 { font-size: 1.5rem; font-weight: 900; margin: 0 0 6px; color: #EEF1F0; }

/* Modulo «Proponi una traccia»: campi dentro la scheda scura */
.cyt .cyt-card-new select, .cyt .cyt-card-new input[type=file], .cyt .cyt-card-new input[type=url] { background-color: #F7F9F8; color: #12292B; border: 2px solid transparent; }
.cyt .cyt-card-new .cyt-drop input[type=file] { background: transparent; }
.cyt .cyt-card-new select { background-image: linear-gradient(45deg, transparent 50%, #12292B 50%), linear-gradient(135deg, #12292B 50%, transparent 50%); }
.cyt .cyt-card-new .cyt-f .cyt-note { display: block; margin-top: 6px; }
.cyt .cyt-card-new .cyt-thanks p { color: rgba(238, 241, 240, .85); }

/* «Preferisci raccontarlo a voce?»: riga con il pulsante WhatsApp, sopra il modulo del racconto */
.cyt .cyt-voice { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin: 0 0 1.4rem; padding: 1rem 1.1rem; background: rgba(238, 241, 240, .1); border-radius: 2px; }
.cyt .cyt-voice p { margin: 0; flex: 1 1 16rem; color: #EEF1F0; }
.cyt .cyt-voice .cyt-btn { margin: 0; text-decoration: none; }