/* =========================================================================
   ShotFive — Pagina pubblica di iscrizione (iscrizione_torneo.php)
   Stessa veste del backoffice (shared/liquid.css, tema dark dell'app):
   i token --sf-* sono alias di --lq-*, così la palette resta una sola.
   Layout mobile-first: la pagina viene aperta anche dentro la webview
   dell'app.

   ORDINE DI CARICAMENTO: bootstrap → liquid.css → questo file.
   Lo sfondo di pagina (html/body) lo mette liquid.css: qui non si tocca.
   ========================================================================= */

:root {
    --sf-surface: var(--lq-surface);
    --sf-surface-2: var(--lq-surface-2);
    --sf-surface-3: var(--lq-surface-3);

    --sf-line: var(--lq-stroke);
    --sf-line-strong: var(--lq-stroke-strong);

    --sf-ink: var(--lq-ink);
    --sf-ink-2: var(--lq-ink-soft);
    --sf-ink-3: var(--lq-ink-soft);
    --sf-ink-4: var(--lq-ink-faint);

    --sf-primary: var(--lq-primary);
    /* sull'arancione pieno il testo va scuro, come i .btn-primary del backoffice */
    --sf-primary-ink: #1a1005;
    --sf-primary-soft: var(--lq-primary-dim);
    --sf-primary-line: var(--lq-primary-line);

    --sf-success: #7ce49a;
    --sf-success-soft: rgba(52, 199, 89, 0.14);
    --sf-success-line: rgba(52, 199, 89, 0.34);
    --sf-danger: #ff8f87;
    --sf-danger-soft: rgba(255, 69, 58, 0.14);
    --sf-danger-line: rgba(255, 69, 58, 0.34);
    --sf-warn: #ffc069;
    --sf-warn-soft: rgba(255, 159, 10, 0.14);
    --sf-warn-line: rgba(255, 159, 10, 0.34);
    --sf-info: #9adfff;
    --sf-info-soft: rgba(100, 210, 255, 0.12);
    --sf-info-line: rgba(100, 210, 255, 0.30);

    --sf-radius: var(--lq-radius);
    --sf-radius-sm: var(--lq-radius-sm);
    --sf-shadow: var(--lq-shadow);
}

/* ---------- Base ------------------------------------------------------ */

body {
    font-size: 16px;
    -webkit-tap-highlight-color: rgba(253, 124, 38, 0.18);
}

.sf-page {
    min-height: 100vh;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

.sf-container {
    max-width: 896px;
    margin: 0 auto;
    padding: 16px 16px 24px;
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: calc(16px + env(safe-area-inset-right));
}

@media (min-width: 768px) {
    .sf-container { padding: 32px 16px 40px; }
}

/* ---------- Card ------------------------------------------------------ */

.sf-card {
    background: var(--sf-surface);
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius);
    box-shadow: var(--sf-shadow), var(--lq-inner);
    padding: 20px 16px;
    margin-bottom: 16px;
}

@media (min-width: 768px) {
    .sf-card { padding: 24px; margin-bottom: 24px; }
}

.sf-card__title {
    margin: 0 0 16px;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--sf-ink);
    letter-spacing: -0.02em;
}

.sf-card__title--lg { font-size: 22px; }

.sf-card__sub {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 700;
    color: var(--sf-ink);
    letter-spacing: -0.01em;
}

.sf-card__lead {
    margin: -8px 0 16px;
    font-size: 14px;
    color: var(--sf-ink-2);
}

.sf-sep {
    height: 1px;
    background: var(--lq-stroke-dim);
    border: 0;
    margin: 20px 0;
}

/* ---------- Righe informative con icona ------------------------------- */

.sf-meta { list-style: none; margin: 0; padding: 0; }

.sf-meta li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
    color: var(--sf-ink-2);
    font-size: 15px;
}

.sf-ico {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    stroke: var(--sf-primary);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sf-facts { margin: 0; padding: 0; list-style: none; }
.sf-facts li { padding: 3px 0; color: var(--sf-ink-2); font-size: 15px; }
.sf-facts strong { color: var(--sf-ink); font-weight: 700; }

/* ---------- Campi ----------------------------------------------------- */

.sf-field { margin-bottom: 16px; }

.sf-label,
.sf-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sf-ink-2);
    letter-spacing: 0.01em;
    line-height: 1.35;
    text-transform: none;
}

.sf-req { color: var(--sf-primary); font-weight: 700; }

.sf-hint {
    margin-top: 6px;
    font-size: 13px;
    color: var(--sf-ink-4);
}

/* 16px sul font: sotto questa soglia iOS zooma la pagina al focus */
.form-control,
input[type="text"].form-control,
input[type="email"].form-control,
input[type="password"].form-control,
input[type="number"].form-control,
input[type="tel"].form-control,
select.form-control,
textarea.form-control {
    display: block;
    width: 100%;
    height: auto;
    min-height: 46px;
    padding: 11px 14px;
    font-size: 16px;
    line-height: 1.4;
    color: var(--sf-ink);
    background-color: var(--sf-surface-2);
    background-image: none;
    border: 1px solid var(--sf-line-strong);
    border-radius: var(--sf-radius-sm);
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

textarea.form-control { min-height: 92px; resize: vertical; }

.form-control:focus {
    background-color: var(--sf-surface);
    border-color: var(--sf-primary-line);
    box-shadow: 0 0 0 3px rgba(253, 124, 38, 0.18);
    outline: none;
}

.form-control::-webkit-input-placeholder { color: var(--sf-ink-4); }
.form-control::placeholder { color: var(--sf-ink-4); }
.form-control[disabled] { background: rgba(255, 255, 255, 0.04); color: var(--sf-ink-4); }

/* le option native vanno forzate: su Windows/Android restano bianche */
select.form-control option { background: var(--sf-surface-2); color: var(--sf-ink); }

/* chevron disegnato: quello nativo su fondo scuro sparisce */
select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239BA1A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
}

/* icone native (date picker) leggibili sul fondo scuro */
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.6); }

/* griglie dei campi affiancati (nome/cognome, giorno/mese/anno) */
.sf-grid { display: grid; gap: 12px; margin-bottom: 16px; }
.sf-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-grid .sf-field { margin-bottom: 0; }

/* sotto i 360px due colonne diventano illeggibili: si impilano */
@media (max-width: 359px) {
    .sf-grid--2 { grid-template-columns: 1fr; }
}

/* input + bottone sulla stessa riga */
.sf-inline { display: flex; gap: 8px; align-items: stretch; }
.sf-inline .form-control { flex: 1 1 auto; min-width: 0; }
.sf-inline .sf-btn { flex: 0 0 auto; }

/* ---------- Bottoni --------------------------------------------------- */

.sf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 11px 20px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-align: center;
    border: 1px solid transparent;
    border-radius: var(--sf-radius-sm);
    box-shadow: none;
    cursor: pointer;
    transition: transform 0.2s var(--lq-ease), background-color 0.2s ease, border-color 0.2s ease, filter 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.sf-btn:hover, .sf-btn:focus { filter: brightness(1.08); text-decoration: none; }
.sf-btn:active { transform: scale(0.985); filter: brightness(0.94); }
.sf-btn:focus-visible { outline: 2px solid var(--sf-primary); outline-offset: 2px; }

.sf-btn--primary {
    background: var(--sf-primary);
    color: var(--sf-primary-ink);
}

.sf-btn--primary:hover,
.sf-btn--primary:focus { color: var(--sf-primary-ink); }

.sf-btn--ghost {
    background: var(--sf-surface-3);
    border-color: var(--sf-line-strong);
    color: var(--sf-ink);
}

.sf-btn--ghost:hover,
.sf-btn--ghost:focus { background: #454545; color: var(--sf-ink); }

.sf-btn--block { display: flex; width: 100%; }
.sf-btn--lg { min-height: 50px; font-size: 17px; }

.sf-btn[disabled],
.sf-btn.disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(25%); transform: none; }

.sf-btn .sf-ico { stroke: currentColor; }

/* ---------- Separatore "oppure" --------------------------------------- */

.sf-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    color: var(--sf-ink-3);
    font-size: 14px;
}

.sf-or::before,
.sf-or::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--lq-stroke-dim);
}

/* ---------- Riga selezionabile ("Nuova iscrizione") -------------------- */

.sf-choice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    text-align: left;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--sf-line-strong);
    border-radius: var(--sf-radius-sm);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.sf-choice:hover,
.sf-choice:focus {
    border-color: var(--sf-primary);
    background: var(--sf-primary-soft);
    text-decoration: none;
}

.sf-choice > span { min-width: 0; }
.sf-choice__title { display: block; font-size: 15px; font-weight: 600; color: var(--sf-ink); }
.sf-choice__desc { display: block; font-size: 14px; color: var(--sf-ink-3); margin-top: 2px; }
.sf-choice .sf-ico { stroke: var(--sf-ink-3); }
.sf-choice:hover .sf-ico { stroke: var(--sf-primary); }

/* ---------- Avvisi ---------------------------------------------------- */

.sf-alert {
    padding: 12px 14px;
    margin-bottom: 16px;
    border: 1px solid var(--sf-line);
    border-radius: var(--sf-radius-sm);
    font-size: 14px;
    line-height: 1.45;
    background: rgba(255, 255, 255, 0.05);
    color: var(--sf-ink-2);
}

.sf-alert strong { font-weight: 700; }
.sf-alert a { text-decoration: underline; color: inherit; }
.sf-alert--info    { background: var(--sf-info-soft);    border-color: var(--sf-info-line);    color: var(--sf-info); }
.sf-alert--success { background: var(--sf-success-soft); border-color: var(--sf-success-line); color: var(--sf-success); }
.sf-alert--warn    { background: var(--sf-warn-soft);    border-color: var(--sf-warn-line);    color: var(--sf-warn); }
.sf-alert--danger  { background: var(--sf-danger-soft);  border-color: var(--sf-danger-line);  color: var(--sf-danger); }
.sf-alert--tap { cursor: pointer; }

.sf-alert--field { margin: 8px 0 0; }

/* ---------- Blocco preferenze / checkbox multiple --------------------- */

/* neutro: lo stato "completo" lo comunicano il contatore e la barra,
   un fondo verde fisso li renderebbe illeggibili */
.sf-panel {
    border: 1px solid var(--sf-line-strong);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--sf-radius-sm);
    padding: 16px;
    margin-bottom: 16px;
}

.sf-panel--info { border-color: var(--sf-info-line); background: var(--sf-info-soft); }
.sf-panel__title { font-weight: 700; color: var(--sf-primary); margin-bottom: 10px; font-size: 15px; }

.sf-opts { display: block; }

/* area di tocco piena riga: su mobile il target dev'essere grande */
.sf-opt {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--sf-ink);
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}

.sf-opt + .sf-opt { border-top: 1px solid rgba(255, 255, 255, 0.08); }

.sf-opt input[type="checkbox"],
.sf-opt input[type="radio"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    accent-color: var(--sf-primary);
}

/* consensi privacy */
.sf-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    border-top: 1px solid var(--lq-stroke-dim);
    font-size: 14px;
    line-height: 1.45;
    color: var(--sf-ink-2);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    margin: 0;
}

.sf-consent input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--sf-primary); }
.sf-consent a { color: var(--sf-primary); text-decoration: underline; }

/* liquid.css affianca "input + label": qui il testo sta dentro la label
   stessa, quindi quel margine va annullato */
.sf-consent span,
.sf-opt span { display: inline; margin-left: 0; }

/* ---------- Stati (sold out, esito iscrizione) ------------------------ */

.sf-state { text-align: center; padding: 28px 20px; }

.sf-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--sf-primary-soft);
}

.sf-state__icon .sf-ico { width: 30px; height: 30px; }
.sf-state__icon--ok      { background: var(--sf-success-soft); }
.sf-state__icon--ok .sf-ico { stroke: var(--sf-success); }
.sf-state__icon--ko      { background: var(--sf-danger-soft); }
.sf-state__icon--ko .sf-ico { stroke: var(--sf-danger); }
.sf-state__icon--warn    { background: var(--sf-warn-soft); }
.sf-state__icon--warn .sf-ico { stroke: var(--sf-warn); }

.sf-state__title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--sf-ink); margin: 0 0 8px; }
.sf-state__text { font-size: 15px; color: var(--sf-ink-2); margin: 0 auto 20px; max-width: 460px; }
.sf-state .sf-btn { margin-top: 4px; }

.sf-wa { display: inline-block; width: 22px; height: 22px; vertical-align: -5px; }

/* ---------- Barra azione fissa in basso (mobile) ---------------------- */

.sf-dock {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin: 8px -16px -20px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(28, 28, 28, 0.94);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-top: 1px solid var(--sf-line-strong);
    border-radius: 0 0 var(--sf-radius) var(--sf-radius);
}

@media (min-width: 768px) {
    .sf-dock {
        position: static;
        margin: 8px 0 0;
        padding: 0;
        background: none;
        border-top: 0;
        border-radius: 0;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* browser senza backdrop-filter: fondo pieno per non perdere leggibilità */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .sf-dock { background: #1c1c1c; }
}

.sf-dock__hint {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--sf-ink-3);
    text-align: center;
}

/* ---------- Riallineamento dei residui Bootstrap ---------------------- */

.container-fluid { padding-left: 0; padding-right: 0; }
h1, h2, h3, h4, h5 { font-family: inherit; color: var(--sf-ink); }
small { color: var(--sf-ink-3); }

/* ---------- Hero: intestazione del torneo ----------------------------- */

.sf-hero {
    position: relative;
    overflow: hidden;
    border-color: var(--sf-primary-line);
    /* stessa velatura calda del banner "prossimo allenamento" del backoffice */
    background:
        linear-gradient(140deg, rgba(253, 124, 38, 0.16), rgba(253, 124, 38, 0.03) 62%),
        var(--sf-surface);
}

.sf-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sf-primary);
}

.sf-hero__eyebrow .sf-ico { width: 16px; height: 16px; }

.sf-hero__title {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--sf-ink);
    overflow-wrap: anywhere;
}

@media (min-width: 768px) {
    .sf-hero__title { font-size: 30px; }
}

/* ---------- Badge ----------------------------------------------------- */

.sf-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.sf-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: var(--lq-radius-pill);
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid var(--sf-line-strong);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--sf-ink-2);
    white-space: nowrap;
}

.sf-badge b { color: var(--sf-ink); font-weight: 800; }
.sf-badge .sf-ico { width: 15px; height: 15px; }

/* ---------- Contatore delle preferenze -------------------------------- */

.sf-panel__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.sf-panel__head .sf-panel__title { flex: 1 1 auto; margin-bottom: 0; }

.sf-counter {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    padding: 5px 12px;
    border-radius: var(--lq-radius-pill);
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid var(--sf-line-strong);
    font-size: 14px;
    font-weight: 800;
    color: var(--sf-ink);
    font-variant-numeric: tabular-nums;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.sf-counter__sep { opacity: 0.5; margin: 0 1px; font-weight: 600; }

.sf-counter--ok {
    background: var(--sf-success-soft);
    border-color: var(--sf-success-line);
    color: var(--sf-success);
}

.sf-progress {
    display: block;
    height: 5px;
    margin-bottom: 10px;
    border-radius: var(--lq-radius-pill);
    background: rgba(0, 0, 0, 0.30);
    overflow: hidden;
}

.sf-progress i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--sf-primary);
    transition: width 0.25s var(--lq-ease), background-color 0.25s ease;
}

.sf-panel__hint {
    margin: 0 0 4px;
    font-size: 13px;
    color: var(--sf-ink-3);
}

.sf-panel__hint--ok { color: var(--sf-success); }

.sf-progress--ok i { background: var(--lq-success); }

/* ---------- Intestazione degli step (1 anagrafica, 2 preferenze, 3 consensi) */

.sf-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--lq-stroke-dim);
}

.sf-step__n {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--sf-primary);
    color: var(--sf-primary-ink);
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

.sf-step__txt { min-width: 0; }

.sf-step__title {
    display: block;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--sf-ink);
    line-height: 1.25;
}

.sf-step__desc {
    display: block;
    margin-top: 2px;
    font-size: 13.5px;
    color: var(--sf-ink-3);
}

/* ---------- Marcatori delle domande obbligatorie ---------------------- */

.sf-legend {
    margin: -6px 0 16px;
    font-size: 13px;
    color: var(--sf-ink-3);
}

.sf-tag-req {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--lq-radius-pill);
    background: var(--sf-primary-soft);
    border: 1px solid var(--sf-primary-line);
    color: var(--sf-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sf-tag-req--ok {
    background: var(--sf-success-soft);
    border-color: var(--sf-success-line);
    color: var(--sf-success);
}

/* l'asterisco dentro le label delle domande deve staccarsi dal testo */
.sf-field label .sf-req,
.sf-panel__title .sf-req { margin-left: 2px; }