/* ==========================================================================
   Sportland - Lavora con noi : tema grafico 2026
   Caricato DOPO styles.*.bundle.css, sovrascrive solo l'aspetto (nessuna
   modifica alla logica dell'app Angular).
   ========================================================================== */

:root {
  --sl-lime: #d5f000;
  --sl-black: #000;
  --sl-ink: #111;
  --sl-text: #222;
  --sl-muted: #8a8a8a;
  --sl-line: #d9d9d9;
  --sl-card-border: #dcdfe3;
  --sl-font-title: 'Bebas Neue', 'Oswald', Impact, sans-serif;
  --sl-font-body: 'Roboto', Helvetica, Arial, sans-serif;
  --sl-font-num: 'Montserrat', 'Roboto', sans-serif;
}

/* ---------- Base ---------- */
body {
  background: #fff;
  color: var(--sl-text);
  font-family: var(--sl-font-body);
  font-size: 14px;
  line-height: 1.4;
  padding-bottom: 76px;
}
a, a:hover { color: var(--sl-ink); }

/* ---------- Header + titolo ---------- */
.page-header { margin: 0; padding: 0; }
.page-header .margin { display: none; }
.logo-header {
  padding: 0;
  height: 76px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e6e6e6;
  /* la barra si estende a tutta la larghezza della pagina */
  box-shadow: 0 0 0 100vmax #fff;
  clip-path: inset(0 -100vmax);
}
.logo { max-height: 40px; }
.page-header h1 {
  margin: 38px 0 0;
  text-align: center;
  font-family: var(--sl-font-title);
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--sl-ink);
}

/* ---------- Stepper 01 --- 02 --- 03 --- 04 ---------- */
aw-wizard-navigation-bar.horizontal.small ul.steps-indicator {
  display: flex !important;
  counter-reset: sl-step;
  max-width: 840px;
  margin: 0 auto !important;
  padding: 36px 0 34px !important;
  list-style: none;
}
aw-wizard-navigation-bar.horizontal.small ul.steps-indicator li {
  position: relative;
  flex: 1 1 0;
  width: auto !important;
  height: auto !important;
  min-height: 78px;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
  counter-increment: sl-step;
  background: none !important;
}
/* numero (ex pallino) */
aw-wizard-navigation-bar.horizontal.small ul.steps-indicator li:after {
  content: "0" counter(sl-step) !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: 50px !important;
  height: 50px !important;
  margin: 0 0 0 -25px !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--sl-ink);
  font: 700 19px/50px var(--sl-font-num) !important;
  text-align: center;
  z-index: 2;
}
aw-wizard-navigation-bar.horizontal.small ul.steps-indicator li.current:after,
aw-wizard-navigation-bar.horizontal.small ul.steps-indicator li.editing:after {
  background: var(--sl-lime) !important;
}
aw-wizard-navigation-bar.horizontal.small ul.steps-indicator li.done:after {
  background: transparent !important;
}
/* linea di collegamento verso lo step successivo */
aw-wizard-navigation-bar.horizontal.small ul.steps-indicator li:not(:last-child):before {
  content: "" !important;
  position: absolute !important;
  top: 25px !important;
  left: calc(50% + 36px) !important;
  width: calc(100% - 72px) !important;
  height: 1px !important;
  margin: 0 !important;
  background: var(--sl-ink) !important;
  z-index: 1;
}
aw-wizard-navigation-bar.horizontal.small ul.steps-indicator li:last-child:before { display: none !important; }
/* etichetta */
aw-wizard-navigation-bar.horizontal ul.steps-indicator li div {
  position: absolute !important;
  top: 62px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
aw-wizard-navigation-bar.horizontal ul.steps-indicator li div a {
  font: 400 16px/1.2 var(--sl-font-body) !important;
  text-transform: none !important;
  color: #9a9a9a !important;
  white-space: nowrap;
}
aw-wizard-navigation-bar.horizontal ul.steps-indicator li.current div a,
aw-wizard-navigation-bar.horizontal ul.steps-indicator li.done div a,
aw-wizard-navigation-bar.horizontal ul.steps-indicator li.editing div a {
  color: var(--sl-ink) !important;
}

/* ---------- Card del form ---------- */
.page-body {
  margin-bottom: 70px;
  padding: 24px 26px 30px;
  background: #fff;
  border: 1px solid var(--sl-card-border);
  box-shadow: none;
}
.div-sub-header {
  margin: 0 0 6px;
  border-bottom: 1px solid var(--sl-line);
  align-items: flex-end;
}
.page-sub-header {
  padding-bottom: 12px;
  font: 400 36px/1 var(--sl-font-title);
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--sl-ink);
}
.required {
  color: var(--sl-ink);
  font-size: 14px;
  margin-bottom: 14px;
}

/* ---------- Campi: solo sottolineatura ---------- */
label { color: var(--sl-ink); font-weight: 400; font-size: 14px; margin-bottom: 0; }
.form-group { margin-bottom: 0; padding-top: 10px; }
.form-control,
select.form-control,
.custom-autocomplete__input input {
  height: 48px;
  min-height: 48px;
  padding: 8px 2px !important;
  font: 400 16px/1.4 var(--sl-font-body) !important;
  color: var(--sl-ink);
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #b9b9b9 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.custom-autocomplete__input input { max-height: none; min-height: 48px; width: 100%; }
.form-control[type=text] { text-transform: none; }
input[type=date].form-control { padding-right: 6px !important; color: var(--sl-muted); }
input[type=date].form-control.ng-dirty,
input[type=date].form-control:focus { color: var(--sl-ink); }
select.form-control {
  -webkit-appearance: none;
  appearance: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23111' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 4px center !important;
  cursor: pointer;
}
.form-control:not([type=file]):active,
.form-control:not([type=file]):focus,
.custom-autocomplete__input input:focus {
  border-bottom: 2px solid var(--sl-ink) !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}
/* validazione: sottolineatura rossa solo dopo che l'utente ha toccato il campo */
.form-control.ng-touched.ng-invalid { border-bottom-color: #e5322d !important; }
.ng-invalid:not(form):active, .ng-invalid:not(form):focus,
.ng-valid.required:active, .ng-valid.required:focus,
.ng-valid[required]:active, .ng-valid[required]:focus {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}
textarea.form-control {
  height: auto;
  min-height: 140px;
  padding: 12px 14px !important;
  border: 1px solid #b9b9b9 !important;
}

/* ---------- Upload file ---------- */
label.uploader {
  display: flex;
  width: 100%;
  height: 40px;
  margin: 6px 0 0;
  background: none;
  border-radius: 0;
  overflow: visible;
}
label.uploader span.filename {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  height: 40px;
  line-height: 38px;
  margin: 0;
  padding: 0 14px;
  font: 400 15px/38px var(--sl-font-body);
  color: var(--sl-muted);
  background: #fff;
  border: 1px solid #d3d3d3;
  border-right: 0;
}
label.uploader span.action {
  flex: 0 0 auto;
  display: block;
  height: 40px;
  line-height: 40px;
  padding: 0 24px;
  font: 400 15px/40px var(--sl-font-body);
  text-shadow: none;
  color: #fff;
  background: var(--sl-black);
  transition: background .2s;
}
label.uploader:hover span.action { background: #333; }

/* ---------- Checkbox / radio ---------- */
input[type=checkbox]+label {
  padding-left: 32px;
  padding-top: 0;
  min-height: 22px;
  line-height: 22px;
  color: var(--sl-ink);
  font-size: 15px;
}
input[type=checkbox]+label:before {
  width: 20px;
  height: 20px;
  background: #fff;
  border: 1px solid #b9b9b9;
  border-radius: 0;
}
input[type=checkbox]:checked+label:before { border-color: var(--sl-ink); }
input[type=checkbox]+label:after {
  color: var(--sl-ink);
  left: 0;
  width: 20px;
}
input[type=checkbox]:checked+label:after { font-size: 13px; }
.checkbox { margin-bottom: 4px; }
.form-group .checkbox { margin-top: 14px; }
.custom-compile { padding-bottom: 40px; }   /* il campo città (autocomplete) esce dal suo contenitore */
.custom-compile + .form-group .checkbox { margin-top: 4px; }

[type=radio]:checked+label,
[type=radio]:not(:checked)+label { color: var(--sl-ink); font-size: 15px; }
[type=radio]:checked+label:before,
[type=radio]:not(:checked)+label:before { border: 1px solid #b9b9b9; }
[type=radio]:checked+label:before { border-color: var(--sl-ink); }
[type=radio]:checked+label:after { background: var(--sl-ink); }
.sottotitolo {
  font: 400 22px/1.15 var(--sl-font-title);
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--sl-ink);
  margin: 6px 0 10px;
}

/* ---------- Privacy ---------- */
.privacyPage { margin-top: 26px; }
.privacyPage input[type=checkbox]+label { font-size: 14px; line-height: 1.4; min-height: 40px; }
.privacyPage a.privacy-link,
a.privacy-link {
  display: inline-block;
  margin-left: 32px;
  padding: 0;
  color: var(--sl-ink);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid var(--sl-lime);
}

/* ---------- Pulsanti ---------- */
.footer-button { margin-top: 26px; }
.footer-button.custom { margin-top: 22px; }
.btn-primary {
  position: relative;
  min-width: 150px;
  padding: 12px 34px;
  font: 500 16px/1.2 var(--sl-font-body);
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #fff;
  background: var(--sl-black);
  border: 1px solid var(--sl-black);
  border-radius: 40px;
  transition: background .2s, color .2s, border-color .2s;
}
.btn-primary + .btn-primary { margin-left: 10px; }
.btn-primary:hover,
.btn-primary:focus {
  color: var(--sl-black);
  background: var(--sl-lime);
  border-color: var(--sl-lime);
}
.btn-primary:active {
  color: var(--sl-black) !important;
  background-color: var(--sl-lime) !important;
  border-color: var(--sl-lime) !important;
}
.btn-primary:after { display: none; }
/* "Indietro": variante contorno */
.footer-button .btn-primary:first-child:not(:only-child) {
  color: var(--sl-ink);
  background: #fff;
}
.footer-button .btn-primary:first-child:not(:only-child):hover {
  background: var(--sl-lime);
}

/* ---------- Allineamento card / logo ---------- */
aw-wizard-step > .row { margin-left: 0; margin-right: 0; }
aw-wizard-step > .row > .col-md-8 { padding-left: 0; }
aw-wizard-step > .row > .box-immagine { padding-left: 20px; padding-right: 0; }

/* step 1: la colonna destra riparte alla riga "Indirizzo", come nel mockup
   (riga vuota accanto a "Luogo di nascita"); checkbox sulla stessa riga */
@media (min-width: 576px) {
  .col-sm-6 .form-group:has(#fototessera) { margin-top: 78px; }
}
.custom-compile > p { display: none; }

/* ---------- Immagine laterale ---------- */
.box-immagine {
  position: relative;
  z-index: 0;
  padding-left: 0;
  padding-right: 0;
}
/* una sola foto per tutti gli step: nascondo le img originali e uso la nuova */
.box-immagine img { display: none !important; }
.box-immagine:before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 165%;               /* 887 x 1463 */
  background: url("assets/lavora-con-noi.png") no-repeat center top / 100% auto;
  mix-blend-mode: multiply;
}

/* ---------- Tabella sport (step 4) ---------- */
.table { margin-bottom: 0; color: var(--sl-ink); }
.table thead th {
  color: var(--sl-ink);
  background: none;
  font: 400 15px/1.2 var(--sl-font-body);
  border-top: 0;
  border-bottom: 1px solid var(--sl-ink);
}
.table td, .table th { border-top: 1px solid #e6e6e6; vertical-align: middle; }

/* ---------- Footer ---------- */
.footer { height: 76px; background: #111; }
.footer .container { padding-top: 28px; }
.footer p { color: #8d8d8d; margin: 0; }
.footer a { color: #cfcfcf; font-size: inherit; }

/* ---------- Modale informativa ---------- */
.modal-header { border-bottom: 1px solid var(--sl-line); }
.modal-title { font: 400 28px/1 var(--sl-font-title); text-transform: uppercase; }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .page-header h1 { font-size: 40px; margin-top: 26px; }
  aw-wizard-navigation-bar.horizontal.small ul.steps-indicator li:after { width: 40px !important; height: 40px !important; margin-left: -20px !important; font-size: 15px !important; line-height: 40px !important; }
  aw-wizard-navigation-bar.horizontal.small ul.steps-indicator li:not(:last-child):before { top: 20px !important; left: calc(50% + 26px) !important; width: calc(100% - 52px) !important; }
  aw-wizard-navigation-bar.horizontal ul.steps-indicator li div { top: 50px !important; }
  aw-wizard-navigation-bar.horizontal ul.steps-indicator li div a { font-size: 12px !important; white-space: normal; }
  .page-body { padding: 18px 14px 24px; margin-bottom: 40px; }
  .page-sub-header { font-size: 28px; }
}