/* Tenant eventiferrari: caricato da shared/_head.tpl solo se REPOSITORY == 'eventiferrari' */

/* FONT FACE - Ferrari Sans (assets_app/fonts/ferrari) */
@font-face {
  font-family: 'ferrari-sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets_app/fonts/ferrari/Ferrari-SansLight.woff2') format('woff2');
}

@font-face {
  font-family: 'ferrari-sans';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('/assets_app/fonts/ferrari/Ferrari-SansLightItalic.woff2') format('woff2');
}

@font-face {
  font-family: 'ferrari-sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets_app/fonts/ferrari/Ferrari-SansRegular.woff2') format('woff2');
}

@font-face {
  font-family: 'ferrari-sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets_app/fonts/ferrari/Ferrari-SansRegularItalic.woff2') format('woff2');
}

@font-face {
  font-family: 'ferrari-sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets_app/fonts/ferrari/Ferrari-SansMedium.woff2') format('woff2');
}

@font-face {
  font-family: 'ferrari-sans';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/assets_app/fonts/ferrari/Ferrari-SansMediumItalic.woff2') format('woff2');
}

/* Il SemiBold non c'è: 600 e 700 usano entrambi il Bold */
@font-face {
  font-family: 'ferrari-sans';
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url('/assets_app/fonts/ferrari/Ferrari-SansBold.woff2') format('woff2');
}

@font-face {
  font-family: 'ferrari-sans';
  font-style: italic;
  font-weight: 600 900;
  font-display: swap;
  src: url('/assets_app/fonts/ferrari/Ferrari-SansBoldItalic.woff2') format('woff2');
}

:root {
  --font-main: 'ferrari-sans';
}

html,
body,
#u_body {
  font-family: var(--font-main), sans-serif !important;
}


/* ===== Countdown della registrazione (tickets/_countdown.tpl) =====
   Fascia grigia chiara attaccata sopra gli step: minuti in monospace a sinistra,
   separatore verticale, testo a destra. */
.timer-box {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 18px 24px;
  border: 1px solid #c8c8c8;
  border-bottom: 0;
  border-radius: 0;
  background: #eef0f3;
  color: #000;
  text-align: left;
}

.timer-box .minutes {
  flex: 0 0 auto;
  width: auto;
  padding: 6px 28px 6px 16px;
  border-right: 1px solid #b5b5b5;
  color: #000;
  font-family: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace !important;
  font-size: 38px;
  letter-spacing: 2px;
  line-height: 1;
}

.timer-box .desc {
  margin: 0 0 0 20px;
  color: #000;
  font-size: 15px;
  line-height: 1.4;
}

#checkout-steps .checkout-step .ticket.ticket_purchased.my-ticket .check-container input:checked~.session-data-label {
  border: 2px solid rgb(0, 0, 0) !important;
  border-radius: 10px;
}

/* l'alert di errore (_error.tpl) nei template viene dopo il countdown:
   qui lo portiamo sopra, così il timer resta attaccato agli step */
#wrap-subscription div:has(> .timer-box) {
  display: flex;
  flex-direction: column;
}

#wrap-subscription div:has(> .timer-box)>.alert {
  order: -1;
  margin-bottom: 20px;
}

p {
  font-size: 16px;
  line-height: 1.3;
}

.se-hero__media {
  position: relative;
  width: 100%;
  line-height: 0;
  height: auto !important;
  min-height: 500px;
  max-height: none !important;
}

html,
#footer,
.colofon_organizer {
  background: #000000;
}

a.button.raised:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
  transition: all 0.2s ease-in-out;
}

#nav .navbar-brand-img a img {
  max-height: 30px !important;
}

#nav .navbar-brand-img {
  justify-content: center;
}

@media screen and (min-width: 1199px) {
  #nav .wrapper_brand {
    flex: 1 0 259px;
    height: auto;
    align-self: center;
    padding: 1rem;
    position: absolute;
    left: 0;
    width: 100%;
  }

  .container-nav {
    display: flex;
    justify-content: flex-end;
    max-width: 1670px;
    margin: 0 auto;
    width: 100%;
  }
}

@media screen and (max-width: 1199px) {
  /* #nav centra il contenuto nel suo min-height (72px): da chiuso la barra
     (62px) veniva centrata, da aperto no, e logo e hamburger salivano di 5px.
     Ancoriamo in alto e diamo l'altezza alla barra del logo. */
  #nav {
    align-items: flex-start;
  }

  #nav .wrapper_brand {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 72px;
    padding: 1rem;
  }

  button.menu_mobile {
    display: initial;
    background: transparent;
    border: none;
    align-self: center;
    font-size: 1.6rem;
    position: absolute;
    right: 20px;
  }
}

@media (max-width: 767px) {
  .timer-box {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 20px;
  }

  .timer-box .minutes {
    padding: 0 0 12px 0;
    border-right: 0;
    border-bottom: 1px solid #b5b5b5;
    font-size: 32px;
  }

  .timer-box .desc {
    margin: 12px 0 0 0;
    font-size: 17px;
  }
}

#wrap-subscription #page .section-1 img {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  width: 250px !important;
}

#wrap-subscription #page .section-1 {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom: 0px solid #e3e2e8;
  background: rgba(255, 255, 255, 1);
  line-height: 0;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

#wrap-subscription #page .border-bottom h1 {
  font-size: 35px;
  margin-bottom: 0;
}

#wrap-subscription #page .border-bottom h2 {
  font-size: 25px;
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 1.2;
  font-weight: 400;
}

#wrap-subscription #page .border-bottom .first {
  font-size: 25px;
  margin-bottom: 0;
  line-height: 1.2;
  font-weight: bold;
}

#wrap-subscription #page .border-bottom h3 {
  font-size: 20px;
  margin-bottom: 0;
  line-height: 1.2;
  font-weight: bold;
  margin-top: 0;
}

#wrap-subscription #page .border-bottom p {
  text-align: center;
}

#wrap-subscription #page .section-2 {
  padding: 2.5rem 3rem 0rem 3rem;
}

/* ===== Step della registrazione (tickets/choose, ecc.) =====
   Un unico riquadro con bordo nero: barra nera per lo step attivo,
   numerazione scritta a mano nel titolo (nessun contatore automatico), chevron solo sugli step successivi. */
#checkout-steps {
  border: 1px solid #c8c8c8;
  background: #fff;
}

#checkout-steps h2 {
  margin: 0;
  padding: 16px 40px;
  border-radius: 0;
  border-top: 1px solid #c8c8c8;
  background: #fff;
  color: #000;
  font-size: 16px;
  font-weight: lighter;
  line-height: 1.2;
}

#checkout-steps h2:first-child {
  border-top: 0;
}

/* chevron solo sugli step successivi a quello attivo; i precedenti hanno solo "Modifica" */
#checkout-steps h2.active~h2::after {
  content: "\f078";
  font-family: "Font Awesome 6 Pro";
  font-weight: 300;
  float: right;
  font-size: 22px;
  line-height: 31px;
}

#checkout-steps h2 a {
  color: #000;
  font-size: 14px;
  margin: 6px 0 0 0;
  text-decoration: underline;
}

#checkout-steps h2.active {
  background: #000 !important;
  color: #fff;
  font-weight: 400;
}

#checkout-steps .checkout-step {
  padding: 22px 40px 24px 40px;
}

#wrap-subscription #page form {
  margin: 0;
}

#checkout-steps .checkout-step .ticket {
  background: #fff;
  padding: 0;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  margin: 0 0 10px 0;
}

#checkout-steps .checkout-step .ticket .row.mb20 {
  margin-bottom: 8px;
}

#checkout-steps .checkout-step .ticket strong>div {
  color: #000;
  font-size: 16px !important;
  font-weight: 400;
  line-height: 1.2 !important;
}

#checkout-steps .checkout-step .ticket p {
  font-size: 16px;
  line-height: 1.4 !important;
  margin: 0;
}

#checkout-steps .checkout-step .ticket .fa-check-square {
  color: #000;
}

/* bottone Continua: nero, squadrato, testo a sinistra, in basso a destra */
#checkout-steps .checkout-step .btn-primary {
  min-width: 121px;
  padding: 8px 8px;
  border: 1px solid #000;

  background: #000 !important;
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  text-align: center;
  box-shadow: none;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

/* hover e active: sfondo più chiaro, testo sempre bianco; copre anche gli stati
   :active:focus / :active:hover di Bootstrap che altrimenti tornano al blu */
#checkout-steps .checkout-step .btn-primary:hover,
#checkout-steps .checkout-step .btn-primary:active,
#checkout-steps .checkout-step .btn-primary.active,
#checkout-steps .checkout-step .btn-primary:active:hover,
#checkout-steps .checkout-step .btn-primary:active:focus {
  background-color: #3a3a3a !important;
  /* _head.tpl: .button.btn-primary:hover ha !important */
  border-color: #3a3a3a;
  color: #fff;
  box-shadow: none;
}

/* focus da click: resta nero; da tastiera: anello visibile */
#checkout-steps .checkout-step .btn-primary:focus {
  outline: 0;
  color: #fff;
}

#checkout-steps .checkout-step .btn-primary:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

#checkout-steps .checkout-step .form-group.mt20 {
  margin: 20px 0 0 0;
}

/* campi del form di registrazione: etichetta nera, input bianco squadrato con bordo grigio scuro */
#checkout-steps .checkout-step label {
  color: #000;
  font-size: 15px;
  font-weight: 400;
  margin-bottom: 8px;
}

#checkout-steps .checkout-step .required>label::after {
  color: #000;
}

#checkout-steps .checkout-step .form-control,
#checkout-steps .checkout-step .ticket .form-control,
#checkout-steps .checkout-step .select2-container .select2-selection {
  height: 48px;
  padding: 10px 12px;
  border: 1px solid #555;
  border-radius: 2px;
  background-color: #fff !important;
  color: #000;
  font-size: 18px;
  box-shadow: none;
}

#checkout-steps .checkout-step textarea.form-control {
  height: auto;
  min-height: 96px;
}

#checkout-steps .checkout-step .form-control:focus {
  border-color: #000;
  outline: 0;
  box-shadow: 0 0 0 1px #000;
}

#checkout-steps .checkout-step .form-control.is-invalid {
  border-color: #da291c;
}

#wrap-subscription #img-blur {
  background: none;
  background-image: none !important;
}

#wrap-subscription #page {
  margin: 3rem 0 3rem 0;
  box-shadow: none;
}

#checkout-steps .checkout-step .ticket.ticket_purchased {
  border: 0px solid #ebebeb;

}

#checkout-steps .checkout-step .ticket .rip {
  display: none;
}

#checkout-steps .checkout-step .ticket.ticket_purchased .header {
  border-bottom: 0px dashed #d1d1d1;

}

/* ===== Step "Book your slot" (tickets/reservations, _step_5.tpl) =====
   Card del partecipante con chevron a destra; ogni sessione/slot è una riga
   a tutta larghezza con checkbox quadrata; la riga scelta ha il bordo scuro.
   Copre sia le card sessione (.session-checkbox) sia gli slot segmentati (.segmentata). */
#checkout-steps .checkout-step .ticket.ticket_purchased.my-ticket {
  position: relative;
  min-height: 0;
  margin: 0 0 20px 0;
  padding: 0;
  border: 1px solid #c8c8c8;
  border-radius: 2px;
  background: #fff;
}

#checkout-steps .checkout-step .ticket.ticket_purchased.my-ticket .header {
  margin: 0;
  padding: 20px 70px 10px 20px;
  border-bottom: 0;
}

#checkout-steps .checkout-step .ticket.ticket_purchased.my-ticket .header h3 {
  margin: 0;
  color: #000;
  font-size: 16px;
  font-weight: 400;
}

#checkout-steps .checkout-step .ticket.ticket_purchased.my-ticket .header p {
  margin: 4px 0 0 0;
  color: #555;
  font-size: 16px;
  font-style: normal;
}

#checkout-steps .checkout-step .ticket.ticket_purchased.my-ticket .rip {
  display: none;
}

#checkout-steps .checkout-step .ticket.ticket_purchased.my-ticket.step-3 .booking-sessions {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  color: #000;
  font-size: 22px;
  line-height: 36px;
  /* sopra l'header: con il carnet sharevents2025.css porta .header a z-index 1 e copriva il chevron */
  z-index: 2;
}

#checkout-steps .checkout-step .ticket.ticket_purchased.my-ticket.step-3 .content {
  padding: 0 20px 20px 20px !important;
}

#checkout-steps .checkout-step .ticket.ticket_purchased.my-ticket.step-3 .content.closed {
  padding: 0 20px !important;
}

#checkout-steps .checkout-step .ticket.ticket_purchased.my-ticket.step-3 .content .content-list #swiper-sessions .swiper-content {
  margin: 0;
  gap: 8px;
}

/* card sessione */
#checkout-steps .checkout-step .ticket.ticket_purchased.my-ticket.step-3 .ticket-reservation-row>div .check-container .session-data-label,
#checkout-steps .checkout-step .ticket.ticket_purchased.my-ticket.step-3 .event-type-2 .check-container input~.session-data-label {
  justify-content: center;
  min-height: 52px;
  padding: 12px 18px 12px 60px;
  border: 2px solid #c8c8c8;
  border-radius: 2px;
  outline: 0;
  background: #fff;
  color: #000;
}

#checkout-steps .checkout-step .ticket.ticket_purchased.my-ticket.step-3 .ticket-reservation-row>div .check-container:has(input:checked) .session-data-label {
  border-color: #000;
  outline: 0;

}

#checkout-steps .checkout-step .ticket.ticket_purchased.my-ticket.step-3 .swiper-content.classic .ticket-reservation-row>div .check-container .session-data-label .session-title,
#checkout-steps .checkout-step .ticket.ticket_purchased.my-ticket.step-3 .ticket-reservation-row>div .check-container .session-data-label.titleOnly .session-title {
  color: #000;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
}

#checkout-steps .checkout-step .ticket.ticket_purchased.my-ticket .check-container:not(.segmentata) input.session-checkbox {
  left: 18px;
  border-radius: 2px;
}

/* slot segmentati: in colonna invece che a chip */
#checkout-steps .checkout-step .ticket.ticket_purchased.my-ticket.step-3 .wrapper-segmentata {
  padding: 0;
  outline: 0;
}

#checkout-steps .checkout-step .ticket.ticket_purchased.my-ticket.step-3 .ticket-reservation-row>div .header-segmentata {
  margin-bottom: 12px;
  border-bottom: 0;
}

#checkout-steps .checkout-step .ticket.ticket_purchased.my-ticket.step-3 .ticket-reservation-row>div .check-container.segmentata {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 8px;
  height: auto;
  overflow: visible;
}

#checkout-steps .checkout-step .ticket.ticket_purchased.my-ticket.step-3 .ticket-reservation-row>div .check-container.segmentata label {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  margin: 0 !important;
  /* main.css .inline-check usa !important */
  text-align: left;
  padding: 12px 18px;
  border: 1px solid #c8c8c8 !important;
  border-radius: 2px;
  background: #fff !important;
  box-shadow: none;
  color: #000;
  font-size: 20px;
  font-weight: 400;
}

#checkout-steps .checkout-step .ticket.ticket_purchased.my-ticket.step-3 .ticket-reservation-row>div .check-container.segmentata label.active,
#checkout-steps .checkout-step .ticket.ticket_purchased.my-ticket.step-3 .ticket-reservation-row>div .check-container.segmentata label:has(input:checked) {
  border-color: #000 !important;
  box-shadow: 0 0 0 1px #000;
}

#checkout-steps .checkout-step .ticket.ticket_purchased.my-ticket.step-3 .ticket-reservation-row>div .check-container.segmentata label.blocco_disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#checkout-steps .checkout-step .ticket.ticket_purchased.my-ticket.step-3 .ticket-reservation-row>div .check-container.segmentata label .title {
  font-weight: 400;
}

/* checkbox quadrata: bordo grigio, piena nera con spunta bianca se selezionata */
#checkout-steps .checkout-step .ticket.ticket_purchased.my-ticket .check-container input.session-checkbox,
#checkout-steps .checkout-step .ticket.ticket_purchased.my-ticket.step-3 .ticket-reservation-row>div .check-container.segmentata label input {
  display: inline-block;
  flex: 0 0 auto;
  width: 22px !important;
  /* sharevents2025.css forza 1rem !important */
  height: 22px !important;
  margin: 0;
  border: 1px solid #9a9a9a;
  border-radius: 2px;
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

#checkout-steps .checkout-step .ticket.ticket_purchased.my-ticket .check-container input.session-checkbox:checked,
#checkout-steps .checkout-step .ticket.ticket_purchased.my-ticket.step-3 .ticket-reservation-row>div .check-container.segmentata label input:checked {
  border-color: #000;
  background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.alert {
  border-radius: 0;
  padding: 15px 15px 18px 15px;
  border-radius: 0px !important;
  margin-bottom: 0px !important;
}

.checkout-step a {
  font-size: 17px;
}

#checkout-steps .checkout-step .ticket.ticket_purchased.my-ticket .check-container input:checked~.session-data-label {
  outline: 0px solid rgb(0, 0, 0) !important;
  border-radius: 0px !important;
}

/* riepilogo (step Recap, .se-recap): filetti neri sottili, totale sul grigio del timer */
#checkout-steps .se-recap {
  color: #000;
  font-size: 16px;
}

#checkout-steps .se-recap__row {
  padding: 12px 0;
}

#checkout-steps .se-recap__row--ticket {
  border-top: 1px solid #000;
}

#checkout-steps .se-recap__row--product {
  border-top: 1px solid #c8c8c8;
}

#checkout-steps .se-recap__row--total {
  padding: 12px;
  border-top: 1px solid #000;
  background: #eef0f3;
}

#checkout-steps .checkout-step .form-control,
#checkout-steps .checkout-step .ticket .form-control,
#checkout-steps .checkout-step .select2-container .select2-selection {

  font-size: 14px;

}

.booking-wrapper .btn-default.book {
  color: #ffffff;
}

#nav .wrapper_menu .user_ui a .num {
  font-size: .6rem !important;

}

.swal2-title,
.swal2-content {

  color: #000000 !important;
}

#nav #main-menu a.bu {
  padding: 6px;
  margin-top: 0;
  width: auto;
  font-weight: bold
}

.se-agenda-btn {

  border-radius: 4.25px !important;

}

.button {
  border-radius: 4.25px;
}

@media (max-width: 767px) {
  #checkout-steps h2 {
    padding: 14px 20px;
    font-size: 21px;
  }

  #checkout-steps .checkout-step {
    padding: 18px 20px 20px 20px;
  }

  #checkout-steps .checkout-step .ticket strong>div {
    font-size: 21px !important;
  }

  /* checkbox sulla stessa riga del titolo anche su mobile */
  #checkout-steps .checkout-step .ticket .row.mb20 {
    display: flex;
    align-items: flex-start;
  }

  #checkout-steps .checkout-step .ticket .row.mb20>.col-sm-9 {
    flex: 1 1 auto;
    min-width: 0;
  }

  #checkout-steps .checkout-step .ticket .row.mb20>.col-sm-3 {
    flex: 0 0 auto;
    padding-left: 0;
  }
}

@media screen and (max-width: 600px) {
  #wrap-subscription #page .section-2 {
    padding: 2.5rem 1rem 0rem 1rem;
  }

  #checkout-steps h2 a {
    font-size: 16px;
    display: block;
    float: none !important;
    text-align: right;
  }

  #checkout-steps h2 {

    font-size: 16px;
  }

  #checkout-steps .checkout-step .form-control,
  #checkout-steps .checkout-step .ticket .form-control,
  #checkout-steps .checkout-step .select2-container .select2-selection {

    font-size: 12px;

  }

  #checkout-steps .checkout-step {
    padding: 18px 10px 20px 10px;
  }
}

/* ===== Popup SweetAlert2 (es. "Registration confirmed", shared/_alerts.tpl + main.js) =====
   Niente animazioni: durata 1ms invece di animation:none, perché la v8 chiude il popup
   solo all'evento animationend della .swal2-hide (con none resterebbe aperto).
   Bottone "Chiudi" nero con testo bianco. */
.swal2-container,
.swal2-container *,
.swal2-container *::before,
.swal2-container *::after {
  animation-duration: 1ms !important;
  animation-delay: 0s !important;
  transition: none !important;
}

.swal2-popup .swal2-styled.swal2-confirm,
.swal2-popup .swal2-styled.swal2-confirm:hover,
.swal2-popup .swal2-styled.swal2-confirm:focus,
.swal2-popup .swal2-styled.swal2-confirm:active {
  background-color: #000 !important;
  background-image: none !important;
  border: 1px solid #000 !important;
  color: #fff !important;
  box-shadow: none !important;
  text-transform: uppercase !important;
}