/* ==========================================================================
   Registrazione e login a schermo intero su mobile ("videogioco"): un passo
   per schermata, toolbar con X/indietro, avanzamento, input grandi, CTA fissa,
   slide direzionale. Gate: body.tbp-flow-fullscreen la mette il JS solo sotto
   850px. Desktop: nessuna regola attiva (i pannelli sono div trasparenti).
   ========================================================================== */

/* Elementi della shell: fuori dal full-screen non esistono. */
html body:not(.tbp-auth-flow) .tbp-auth-toolbar,
html body:not(.tbp-auth-flow) .tbp-auth-progress,
html body:not(.tbp-auth-flow) .tbp-auth-progress__label,
html body:not(.tbp-auth-flow) .tbp-auth-flow__next,
html body:not(.tbp-auth-flow) .tbp-auth-flow__back,
html body:not(.tbp-auth-flow) .tbp-auth-step__title,
html body:not(.tbp-auth-flow) .tbp-auth-step__lead {
  display: none !important;
}

@keyframes tbpAuthSlideIn {
  from { opacity: 0; transform: translate3d(36px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes tbpAuthSlideBack {
  from { opacity: 0; transform: translate3d(-36px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media all {
  html body.tbp-auth-flow.tbp-flow-fullscreen {
    overflow: hidden !important;
  }

  /* Chrome dell'app fuori: si esce con la X. */
  html body.tbp-auth-flow.tbp-flow-fullscreen #masthead,
  html body.tbp-auth-flow.tbp-flow-fullscreen .header-wrapper,
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-app-bar,
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-app-bar__backdrop,
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-colombo-chat,
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-colombo-chat__launcher,
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-mega-footer,
  html body.tbp-auth-flow.tbp-flow-fullscreen footer.footer-wrapper {
    display: none !important;
  }

  /* Il contenitore diventa lo schermo intero (scroller). La variabile di altezza
     dei controlli (usata da tbp-internal-surfaces con !important) qui vale 58px. */
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-root {
    --tbp-s4-control-h: 58px;
    position: fixed !important;
    inset: 0 !important;
    z-index: 99500 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 18px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    background: #fff !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Toolbar: indietro / X + titolo. Sticky in testa. */
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-toolbar {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 8px;
    margin: 0 -18px 4px !important;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 8px !important;
    background: #fff;
  }
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-toolbar__close {
    display: grid !important;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: var(--tbp-sage, #F4F7F5) !important;
    color: var(--tbp-green, #084828) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    cursor: pointer;
  }
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-toolbar__close { grid-column: 3; }
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-toolbar__close[hidden] { display: none !important; }
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-toolbar__title {
    grid-column: 2;
    min-width: 0;
    overflow: hidden;
    color: var(--tbp-green, #084828);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* Avanzamento: segmenti + "Passo n di N". */
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-progress {
    display: flex !important;
    gap: 6px;
    margin: 4px 0 0;
  }
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-progress[hidden],
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-progress__label[hidden] { display: none !important; }
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-progress__seg {
    flex: 1 1 0;
    height: 6px;
    border-radius: 999px;
    background: var(--tbp-line, #E6EDE8);
    transition: background .25s ease;
  }
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-progress__seg.is-done {
    background: var(--tbp-gold, #C9A227);
  }
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-progress__label {
    display: block !important;
    margin: 8px 0 0;
    color: var(--tbp-muted, #5D786B);
    font-size: .8125rem;
    font-weight: 600;
  }

  /* Avvisi server sopra il passo. */
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-notices { margin: 10px 0 0; }
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-notices .woocommerce-error,
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-notices .woocommerce-message,
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-notices .woocommerce-info,
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-notices .tbp-auth-error {
    margin: 0 0 8px !important;
    border-radius: 12px !important;
  }

  /* Pannelli: uno alla volta, slide direzionale. */
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step { display: none; }
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step.is-active {
    display: flex !important;
    flex-direction: column;
    flex: 1 0 auto;
    padding-top: 18px;
    animation: tbpAuthSlideIn .32s cubic-bezier(.32,.72,.28,1) both;
  }
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step.is-active.is-back {
    animation-name: tbpAuthSlideBack;
  }
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step__title {
    display: block !important;
    margin: 6px 0 6px !important;
    color: var(--tbp-green, #084828);
    font-size: clamp(1.6rem, 7vw, 2rem) !important;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.12 !important;
  }
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step__lead {
    display: block !important;
    margin: 0 0 18px !important;
    color: var(--tbp-muted, #5D786B);
    font-size: .95rem !important;
    line-height: 1.45 !important;
  }

  /* Intro: logo, titolo e social restano, il divisore diventa un bottone. */
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step--intro .tbp-auth-title {
    font-size: clamp(1.5rem, 6.5vw, 1.9rem) !important;
    line-height: 1.15 !important;
    margin: 12px 0 8px !important;
  }
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step--intro .tbp-auth-divider { margin: 18px 0 10px !important; }
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step--intro .tbp-existing-account-help { margin-top: 12px !important; }

  /* Campi: grandi, un tocco comodo, bordo grigio. */
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step .form-row { margin: 0 0 12px !important; padding: 0 !important; }
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step .input-text,
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step input[type="text"],
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step input[type="email"],
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step input[type="password"] {
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 16px !important;
    border: 1.5px solid #C9D2CC !important;
    border-radius: 16px !important;
    background: #fff !important;
    font-size: 1.05rem !important;
    box-shadow: none !important;
  }
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step .input-text:focus,
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step input:focus {
    border-color: var(--tbp-green, #084828) !important;
    outline: 3px solid rgba(8, 72, 40, .14) !important;
    outline-offset: 0;
  }
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step input[aria-invalid="true"] {
    border-color: var(--tbp-red, #D0161A) !important;
  }
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-flow__error {
    display: block;
    margin: 6px 2px 0;
    color: var(--tbp-red, #D0161A);
    font-size: .875rem;
    font-weight: 600;
  }
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-flow__error:empty { display: none; }
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step .password-input { display: block; position: relative; }
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step .show-password-input { top: 50%; transform: translateY(-50%); }

  /* CTA: oro liquido, piena larghezza, appiccicata in fondo alla schermata.
     Fino al 13/9 era oro piatto con la scritta quasi nera, mentre due
     schermate piu' in la' «Acquista» era liquido e bianco. Elind: «tutti i
     bottoni oro devono essere liquidi come il bottone Acquista delle card,
     con testo bianco». Qui si usano gli stessi gettoni di quel bottone, non
     una seconda ricetta; il riflesso lo posa tbp-bottoni-oro.css, che porta
     anche i gettoni dell'oro sulle pagine di accesso (erano esclusi). */
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-flow__next,
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-flow__submit,
  html body.tbp-auth-flow.tbp-flow-fullscreen .account-container form button.tbp-auth-flow__submit[type="submit"] {
    display: block !important;
    height: 58px !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 58px !important;
    margin: auto 0 0 !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: var(--tbp-cta-gold, linear-gradient(135deg, #F0BE00 0%, #A8821C 100%)) !important;
    color: var(--tbp-gold-label, #ffffff) !important;
    -webkit-text-fill-color: var(--tbp-gold-label, #ffffff) !important;
    text-shadow: var(--tbp-gold-label-shadow, 0 1px 2px rgba(74, 53, 0, .55)) !important;
    font-family: inherit;
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    letter-spacing: -.01em;
    text-transform: none !important;
    box-shadow: 0 10px 24px rgba(6, 56, 31, .16) !important;
    cursor: pointer;
  }
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-top: auto;
    position: sticky !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 2;
  }
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-flow__submit:disabled { opacity: .55; box-shadow: none !important; }

  /* «Non hai ancora un account?» stava incollato al bottone oro — zero pixel —
     e a dieci dal verde a cui si riferisce: letto dall'alto sembrava la
     didascalia di «Accedi». Elind (13/9): «avvicinalo al bottone verde e non
     al bottone oro, che e' confusionario». */
  html body.tbp-auth-flow.tbp-flow-fullscreen .woocommerce-form-row.registrati { margin-top: 26px !important; }
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-registrati__invito { margin-bottom: 2px !important; }
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step--intro .tbp-auth-flow__email + .tbp-existing-account-help { margin-top: 14px !important; }
  /* Il riga con nonce+submit non deve limitare la CTA. */
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step .form-row:has(.tbp-auth-actions) { margin-top: auto !important; }

  @media (prefers-reduced-motion: reduce) {
    html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step.is-active { animation: none; }
  }
}

/* Schermata finale (registrazione confermata) e recupero password. */
@media all {
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step--confermata,
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step--recupero {
    justify-content: center;
    text-align: center;
    padding-top: 8px;
  }
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-done__badge { margin: 4px auto 14px; line-height: 0; }
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step--confermata h1 {
    margin: 0 0 8px !important;
    color: var(--tbp-green, #084828);
    font-size: clamp(1.7rem, 7.5vw, 2.1rem) !important;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1 !important;
  }
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step--confermata p:not(.tbp-account-claim) {
    margin: 0 0 22px !important;
    color: var(--tbp-muted, #5D786B);
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step--confermata a.tbp-auth-flow__submit {
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    line-height: 1 !important;
  }
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step--recupero h1 {
    margin: 10px 0 6px !important;
    color: var(--tbp-green, #084828);
    font-size: clamp(1.5rem, 6.5vw, 1.9rem) !important;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15 !important;
  }
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step--recupero .descrizione {
    text-align: center;
    margin: 0 0 16px !important;
    color: var(--tbp-muted, #5D786B);
    font-size: .95rem !important;
    line-height: 1.45 !important;
  }
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step--recupero form { display: flex; flex-direction: column; flex: 1 0 auto; text-align: left; }
}

@media all {
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step--intro .tbp-social-login { gap: 10px; }
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step--intro .tbp-social-btn { min-height: 54px; font-size: 1rem; }
}

/* --------------------------------------------------------------------- *
 * Correzioni 11/9: la pagina si poteva trascinare di lato ed era bianca.
 * --------------------------------------------------------------------- */

/* Il titolo aveva `white-space: nowrap` e maiuscolo forzato: 493 px in una
   colonna da 339, quindi il pannello scorreva in orizzontale e il testo usciva
   dallo schermo. Va a capo, in tondo, come il resto delle intestazioni. */
html body:is(.login, .registrazione, .registrazione-professionista, .registrazione-comune, .registrazione-confermata) :is(.tbp-auth-title, .tbp-auth-title--gold) {
  overflow: visible !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-transform: none !important;
  font-size: clamp(1.3rem, 5.6vw, 1.85rem) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.01em !important;
}

/* Nessun maiuscolo forzato nel flusso di accesso: la copy è scritta in tondo. */
html body:is(.login, .registrazione, .registrazione-professionista, .registrazione-comune) :is(.tbp-auth-step, .tbp-social-btn, .tbp-auth-claim, .tbp-account-claim) :is(span, p, a, button, label),
html body:is(.login, .registrazione, .registrazione-professionista, .registrazione-comune) .tbp-social-btn {
  text-transform: none !important;
}

/* Rete di sicurezza: dentro il flusso non si scorre mai di lato. Una parola
   lunga o un titolo largo non devono poter trascinare la pagina. */
html body.tbp-auth-flow.tbp-flow-fullscreen :is(.tbp-auth-shell, .tbp-auth-step, .account-register-inner, .account-login-inner) {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Lo sfondo è quello del sito, non il bianco pieno del tema. */
html body.tbp-auth-flow.tbp-flow-fullscreen,
html body.tbp-auth-flow.tbp-flow-fullscreen #main,
html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-shell,
html body:is(.login, .registrazione, .registrazione-professionista, .registrazione-comune, .registrazione-confermata) {
  background-color: var(--tbp-page, #f4f7f5) !important;
}

/* --------------------------------------------------------------------- *
 * Pannello di accesso: fondo del sito, non bianco pieno; e il rimando
 * all'altro percorso e' un pulsante oro in cima.
 * --------------------------------------------------------------------- */

html body.tbp-auth-flow.tbp-flow-fullscreen :is(.account-register-inner, .account-login-inner),
html body:is(.login, .registrazione, .registrazione-professionista, .registrazione-comune) :is(.account-register-inner, .account-login-inner) {
  background: var(--tbp-sage, #f4f7f5) !important;
}

html body :is(.login, .registrazione, .registrazione-professionista, .registrazione-comune) .tbp-auth-switch--top,
html body .tbp-auth-switch--top {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 4px 0 18px !important;
  color: var(--tbp-muted, #5d786b) !important;
  font-size: 0.95rem !important;
}

html body .tbp-auth-switch--top .tbp-auth-switch__cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 0 22px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--tbp-cta-gold, linear-gradient(135deg, #f0be00 0%, #a8821c 100%)) !important;
  color: #fff !important;
  text-decoration: none !important;
  text-shadow: var(--tbp-gold-label-shadow, 0 1px 2px rgb(74 53 0 / 55%)) !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
}

html body .tbp-auth-switch--top .tbp-auth-switch__cta:focus-visible {
  outline: 2px solid var(--tbp-green, #084828) !important;
  outline-offset: 3px !important;
}

/* --------------------------------------------------------------------- *
 * "Controlla la tua e-mail" (11/9): sta nella pagina di accesso, sotto
 * logo e claim, come il recupero password. Busta, titolo, testo e il
 * bottone per tornare all'accesso.
 * --------------------------------------------------------------------- */

html body .tbp-password-reset-confirmation {
  text-align: center;
}

html body .tbp-password-reset-confirmation .tbp-auth-done__badge {
  margin: 6px auto 12px;
  line-height: 0;
}

html body .tbp-password-reset-confirmation h1 {
  margin: 0 0 10px !important;
  color: var(--tbp-green, #084828) !important;
  font-size: clamp(1.6rem, 6.8vw, 2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.12 !important;
  text-transform: none !important;
}

html body .tbp-password-reset-confirmation p {
  margin: 0 auto 10px !important;
  max-width: 34ch;
  color: var(--tbp-muted, #5D786B) !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
}

html body .tbp-password-reset-confirmation p:has(> a.button) {
  max-width: none;
  margin: 22px 0 0 !important;
}

html body .tbp-password-reset-confirmation a.button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  margin: 0 !important;
  padding: 0 28px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--tbp-gold, #C9A227) !important;
  color: #1d1d1b !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  text-decoration: none !important;
  text-transform: none !important;
  box-shadow: 0 10px 24px rgba(6, 56, 31, .16) !important;
}

@media all {
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step--inviata {
    padding-top: 8px;
    text-align: center;
  }

  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step--inviata .tbp-password-reset-confirmation {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    margin-top: 14px;
  }

  /* Il bottone scende in fondo come negli altri passi del flusso. */
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-password-reset-confirmation p:has(> a.button) {
    margin: auto 0 0 !important;
    padding-top: 18px;
  }

  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-password-reset-confirmation a.tbp-auth-flow__submit {
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
    text-decoration: none !important;
  }
}

/* Avvisi sul computer: sotto il claim, con un po' d'aria sopra (toccavano
   la seconda riga del claim). */
@media (min-width: 850px) {
  html body :is(.account-login-inner, .account-register-inner) .tbp-auth-notices {
    margin: 16px 0 6px;
  }
}

/* I bottoni della scelta metodo erano lunghi tutta la pagina (Elind, 13/9:
   «troppo lunghi for no reason»). Non e' una preferenza: e' che erano sfuggiti
   al contenitore. Misurato — .account-container limita tutto il resto
   dell'accesso a 440px, mentre .tbp-social-login rendeva a 724px su un
   viewport da 760, perche' la procedura a passi lo sposta fuori da quel
   riquadro. Qui riprende la stessa misura degli altri campi, invece di una
   larghezza scelta a mano che poi divergerebbe. */
html body .tbp-social-login,
html body .tbp-social-legal {
  max-width: 440px;
  margin-inline: auto;
}

/* «Non hai ancora un account? Registrati» compariva DUE volte sulla stessa
   schermata (Elind, 13/9: «mi sembra strano»). Riprodotto da computer, dopo
   aver aperto «Accedi con Email»: il commutatore in alto a y=394 e il blocco
   in fondo a y=1186, stesso invito e stesso pulsante, a ottocento pixel di
   distanza.

   Non e' un doppione da cancellare: servono tutti e due, ma in momenti
   diversi. Sotto gli 850px la procedura va a schermo intero e nasconde il
   commutatore, quindi li' l'invito in fondo e' l'unico che resta. Sopra, il
   commutatore c'e' e quello in fondo ripete.

   La soglia e' la stessa che governa la procedura a passi in questo stesso
   foglio (max-width: 849px), non una nuova: se un giorno si sposta, si sposta
   una volta sola. */
@media (min-width: 850px) {
  html body.login:not(.tbp-auth-flow) p.registrati,
  html body.registrazione:not(.tbp-auth-flow) p.registrati,
  html body.registrazione-professionista:not(.tbp-auth-flow) p.registrati,
  html body.registrazione-comune:not(.tbp-auth-flow) p.registrati {
    display: none !important;
  }
}

/* Il commutatore «Registrati | Accedi»: vedi in fondo (2/10). */

/* View switching changes presentation only; the same form controls remain mounted. */
html body .tbp-auth-view-choice {
  display: flex;
  justify-content: center;
  margin: -8px 0 12px;
}
html body .tbp-auth-view-choice:empty { display: none; }
/* Scoped to auth so the theme's primary-button rules cannot override this utility. */
html body #main .tbp-auth-root .tbp-guided-view-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: auto; min-height: 44px; height: auto; padding: 8px 12px; margin: 0;
  border: 0 !important; border-radius: 10px;
  background: transparent !important; color: var(--tbp-night-text, var(--tbp-text, #084828)) !important;
  -webkit-text-fill-color: currentColor !important; box-shadow: none !important;
  font: 600 13px/1.3 var(--tbp-font, Manrope, sans-serif);
  text-transform: none; letter-spacing: normal; white-space: normal;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
html body #main .tbp-auth-root .tbp-guided-view-toggle:hover {
  background: var(--tbp-night-surface, var(--tbp-surface, #f4f7f5)) !important;
}
html body #main .tbp-auth-root .tbp-guided-view-toggle:focus-visible {
  outline: 3px solid #c9a227; outline-offset: 3px;
}
html body.tbp-flow-fullscreen .tbp-auth-toolbar > .tbp-guided-view-toggle {
  grid-column: 1 / -1; justify-self: center; margin: 0;
}

/* Secondary back action follows the primary action in the same form column. */
html body.tbp-auth-flow.tbp-flow-fullscreen #main .tbp-auth-flow__back {
  display: flex !important; align-items: center; justify-content: center; gap: 6px;
  width: 100% !important; min-height: 44px; height: auto; margin: 0 !important;
  padding: 8px 14px !important; border: 0 !important; border-radius: 12px;
  background: var(--tbp-night-surface, #f4f7f5) !important;
  color: var(--tbp-night-text, #084828) !important;
  -webkit-text-fill-color: currentColor !important; box-shadow: none !important;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.3; text-transform: none; letter-spacing: normal;
}
html body.tbp-auth-flow.tbp-flow-fullscreen #main .tbp-auth-flow__back[hidden] { display: none !important; }
html body #main .tbp-auth-flow__back:focus-visible { outline: 3px solid #c9a227; outline-offset: 3px; }

/* =====================================================================
 * 23/9 notte (Elind, dall'app iPhone: «sistema questi bottoni e UI»).
 * 1. La barra dei pulsanti non e' piu' appiccicata al fondo: copriva il
 *    secondo campo. Sta dopo i campi, con aria; sugli schermi alti scende
 *    comunque in basso grazie a margin-top:auto della riga.
 * 2. Con la tastiera aperta lo schermo utile e' solo quello sopra la
 *    tastiera: altezza e cima del contenitore le decide tbp-auth-flow.js
 *    (--tbp-vista-h / --tbp-vista-top), e il marchio si nasconde per far
 *    stare titolo, campi e pulsante sopra i tasti.
 * 3. Niente scorrimento di lato, mai (clip, non hidden: hidden si puo'
 *    ancora scorrere da script e iOS lo fa quando mette a fuoco un campo).
 * 4. Pulsante oro: testo bianco con ombra, come deciso da Elind il 13/9
 *    (tbp-bottoni-oro.css); spento = grigio pieno, non oro sbiadito.
 * ===================================================================== */
html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-actions {
  position: static !important;
  bottom: auto !important;
  margin-top: 20px !important;
  gap: 10px;
}
html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-root {
  top: var(--tbp-vista-top, 0px) !important;
  bottom: auto !important;
  height: var(--tbp-vista-h, 100dvh) !important;
  overflow-x: clip !important;
  touch-action: pan-y;
  transition: height .18s ease;
}
html:has(body.tbp-auth-flow.tbp-flow-fullscreen),
html body.tbp-auth-flow.tbp-flow-fullscreen {
  overflow: clip !important;
  overscroll-behavior: none;
}
html.tbp-tastiera-aperta body.tbp-auth-flow.tbp-flow-fullscreen :is(.tbp-auth-brand, .tbp-auth-progress__label, .tbp-guided-view-toggle) {
  display: none !important;
}
html.tbp-tastiera-aperta body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step.is-active {
  padding-top: 8px;
  animation: none;
}
html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-root :is(.tbp-auth-flow__next, .tbp-auth-flow__submit, button.woocommerce-form-register__submit, button.woocommerce-form-login__submit, button.woocommerce-button[type="submit"]):disabled {
  opacity: 1 !important;
  background: #E6EDE8 !important;
  color: #6B8577 !important;
  -webkit-text-fill-color: #6B8577 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Temi scuri: nel layer del tema, perche' le sue regole !important stanno li'. */
@layer tbp-appearance {
  html:is([data-tbp-theme="dark"], [data-tbp-theme="tobepolo"]) body.tbp-auth-flow .tbp-auth-root :is(.tbp-auth-flow__next, .tbp-auth-flow__submit, button.woocommerce-form-register__submit, button.woocommerce-form-login__submit, button.woocommerce-button[type="submit"]):disabled {
    background: #2a2f2d !important;
    color: #9aa8a1 !important;
    -webkit-text-fill-color: #9aa8a1 !important;
  }
  html:is([data-tbp-theme="dark"], [data-tbp-theme="tobepolo"]) body.tbp-auth-flow .tbp-auth-root :is(.tbp-registrati__invito, .tbp-auth-step__lead, .tbp-auth-progress__label, .tbp-account-claim, label, small, .tbp-auth-link) {
    color: #ededed !important;
    -webkit-text-fill-color: #ededed !important;
  }
}

/* ==========================================================================
   23/9 (Elind, video della registrazione su iPhone)
   ========================================================================== */
/* 1. Con la tastiera aperta la schermata scivolava di lato: «Passo 1 di 3» e
      la barra di avanzamento restavano tagliati a sinistra. L'entrata del
      passo (translate di 36 px) allargava per un attimo il contenuto e iOS,
      mettendo a fuoco il campo, scorreva anche in orizzontale. Il contenitore
      scorre solo in verticale. */
html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-root {
  overflow-x: hidden !important;
  overflow-x: clip !important;
  touch-action: pan-y;
}
/* 2. «Accedi o Crea il tuo account ToBePolo» era oro su bianco (2,3:1). Sui
      fondi chiari il titolo e' verde scuro come gli altri titoli del flusso. */
@layer tbp-appearance {
  html:not([data-tbp-theme="dark"]) body:is(.login, .registrazione, .registrazione-professionista, .registrazione-comune, .registrazione-confermata) .tbp-auth-root :is(.tbp-auth-title, .tbp-auth-title--gold) {
    color: #084828 !important;
    -webkit-text-fill-color: #084828 !important;
  }
}

/* ==========================================================================
   29/9 notte (CEO, iPhone: «Scegli una nuova password» dal link dell'email)
   ========================================================================== */
/* Con la tastiera aperta il contenitore e' alto quanto lo spazio sopra i tasti
   (tbp-tastiera.js) e sotto resta la pagina. Li' c'era il piede verde: Safari
   lo mostrava fra il modulo e i tasti, sotto la barra ↑ ↓ ✓ e l'indirizzo, e
   con quel verde tingeva il fondo dello schermo, bottone oro compreso (sembrava
   verde oliva). La regola in cima a questo foglio lo nasconde gia', ma
   «html body:not(.tbp-wcfm-ui):not(.tbp-core-mappa) #footer» e «html body
   #footer .tbp-mega-footer» (display: block !important, con un id) vincevano.
   Qui un id e qualche classe in piu'.
   Vale per accesso, iscrizione, recupero e nuova password. */
html body.tbp-auth-flow.tbp-flow-fullscreen footer#footer.footer-wrapper,
html body.tbp-auth-flow.tbp-flow-fullscreen footer#footer .tbp-mega-footer {
  display: none !important;
}

/* Avviso di errore dell'accesso (30/9, Elind: «sistema sta schifezza»): era testo
   verde scuro su rosso pieno, illeggibile. Ora fondo rosso tenue e testo rosso
   scuro, in tutti i temi; id nel selettore per vincere sulle regole generiche. */
html body #wrapper .tbp-auth-error,
html body .tbp-auth-error[role="alert"] {
  display: block !important;
  margin: 0 0 16px !important;
  padding: 12px 16px !important;
  border: 1px solid #F1C4C6 !important;
  border-radius: 12px !important;
  background: #FDEDEE !important;
  color: #8A1015 !important;
  -webkit-text-fill-color: #8A1015 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  text-align: left !important;
  box-shadow: none !important;
  outline: none !important;
}
html body .tbp-auth-error[role="alert"] a {
  color: #8A1015 !important;
  -webkit-text-fill-color: #8A1015 !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
html[data-tbp-theme="dark"] body .tbp-auth-error[role="alert"] {
  border-color: #6B2226 !important;
  background: #2C1214 !important;
  color: #FFD9DB !important;
  -webkit-text-fill-color: #FFD9DB !important;
}
html[data-tbp-theme="dark"] body .tbp-auth-error[role="alert"] a {
  color: #FFD9DB !important;
  -webkit-text-fill-color: #FFD9DB !important;
}

/* 1/10: Google, Facebook e Apple anche sotto «Accedi» (vedi tbp-auth-flow.js).
   Solo a schermo intero: nella vista classica la lista del primo passo e' gia'
   sopra il form. La passkey di Wordfence non la usa nessuno e prendeva il posto
   dei social: nel nostro accesso non si mostra (resta su wp-login.php). */
html body .tbp-auth-alt {
	display: none;
}
html body.tbp-flow-fullscreen .tbp-auth-alt {
	display: grid;
	gap: 14px;
	margin-top: 22px;
}
html body .tbp-auth-alt__oppure {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 0.875rem;
	color: var(--tbp-text-muted, #5b6b62);
}
html body .tbp-auth-alt__oppure::before,
html body .tbp-auth-alt__oppure::after {
	content: "";
	flex: 1;
	height: 1px;
	background: currentColor;
	opacity: 0.3;
}
html body .tbp-auth-root :is(.wfls-passkey-divider, .wfls-passkey-submit) {
	display: none !important;
}

/* ==========================================================================
   Commutatore «Registrati | Accedi»: SCHEDE, non un bottone.

   1/10-2/10 mattina: due segmenti con un pollice verde pieno e la spunta.
   2/10 pomeriggio (CEO, utenti veri, anche anziani): il pollice pieno si
   leggeva come il bottone principale. Si toccava «Registrati» di nuovo e di
   nuovo, e non si passava a Google, Facebook, Apple o «Continua con email».
   Ora sono schede di navigazione:
   - due etichette sulla linea da 1 px, senza fondo, senza ombra, senza spunta;
   - quella in cui sei: testo 800 nel verde e una barra di 3 px sotto (il
     pollice, che fra le due pagine scivola come prima);
   - l'altra: testo 500, toccabile (hover tenue, premuto), 48 px di altezza;
   - toccare la scheda in cui sei non fa niente (js/tbp-auth-flow.js).
   L'unica cosa che chiama il tocco resta la lista dei modi qui sotto.
   Nel layer del tema: le sue regole scure (`a` con !important) vivono lì.
   ========================================================================== */
@layer tbp-appearance {
  html body nav.tbp-auth-switch.tbp-auth-switch--doppio {
    --tbp-sw-linea: var(--tbp-line, rgba(8, 72, 40, .14));
    --tbp-sw-barra: var(--tbp-green, #084828);
    --tbp-sw-scelta: var(--tbp-green, #084828);
    --tbp-sw-altra: #3f5c4e;
    --tbp-sw-sopra: rgb(8 72 40 / 6%);
    --tbp-sw-fuoco: var(--tbp-green, #084828);
    position: relative !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: stretch !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    width: min(100%, 400px) !important;
    max-width: 100% !important;
    margin: 0 auto 8px !important;
    padding: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--tbp-sw-linea) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    isolation: isolate;
    text-align: center !important;
    view-transition-name: tbp-auth-switch;
  }
  html[data-tbp-theme="dark"] body nav.tbp-auth-switch.tbp-auth-switch--doppio {
    --tbp-sw-linea: var(--tbp-night-line, #333333);
    --tbp-sw-barra: #9bdbb5;
    --tbp-sw-scelta: var(--tbp-night-text, #ededed);
    --tbp-sw-altra: #b5b5b5;
    --tbp-sw-sopra: rgb(255 255 255 / 6%);
    --tbp-sw-fuoco: #f1ce69;
  }

  /* La barra sotto la scheda scelta: metà esatta, scivola con translate. */
  html body nav.tbp-auth-switch--doppio > .tbp-auth-switch__pollice {
    position: absolute !important;
    top: auto !important;
    bottom: -1px !important;
    left: 0 !important;
    z-index: 2 !important;
    width: 50% !important;
    height: 3px !important;
    border-radius: 3px 3px 0 0 !important;
    background: var(--tbp-sw-barra) !important;
    box-shadow: none !important;
    pointer-events: none !important;
    translate: 0 0 !important;
    transition: translate var(--tbp-moto-medio, 240ms) var(--tbp-moto-curva, cubic-bezier(.22, 1, .36, 1)) !important;
    view-transition-name: tbp-auth-pollice !important;
  }
  html body nav.tbp-auth-switch--doppio[data-scelta="login"] > .tbp-auth-switch__pollice {
    translate: 100% 0 !important;
  }

  html body nav.tbp-auth-switch--doppio > a.tbp-auth-switch__scelta {
    position: relative !important;
    z-index: 1;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 8px 10px 10px !important;
    border: 0 !important;
    border-radius: 10px 10px 0 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--tbp-sw-altra) !important;
    -webkit-text-fill-color: currentColor !important;
    font-family: var(--tbp-font, sans-serif) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition-property: color, background-color, scale, translate, filter !important;
    transition-duration: var(--tbp-moto-breve, 160ms) !important;
    transition-timing-function: var(--tbp-moto-curva, ease) !important;
  }
  html body nav.tbp-auth-switch--doppio > a.tbp-auth-switch__scelta:nth-of-type(1) { view-transition-name: tbp-auth-scelta-1; }
  html body nav.tbp-auth-switch--doppio > a.tbp-auth-switch__scelta:nth-of-type(2) { view-transition-name: tbp-auth-scelta-2; }
  html body nav.tbp-auth-switch--doppio > a.tbp-auth-switch__scelta:not(.is-corrente):hover {
    background: var(--tbp-sw-sopra) !important;
    color: var(--tbp-sw-scelta) !important;
  }
  /* La scheda in cui sei: nessun fondo, nessun premuto, il dito non cambia. */
  html body nav.tbp-auth-switch.tbp-auth-switch--doppio > a.tbp-auth-switch__scelta.is-corrente,
  html[data-tbp-theme="dark"] body nav.tbp-auth-switch.tbp-auth-switch--doppio > a.tbp-auth-switch__scelta.is-corrente {
    background: transparent !important;
    color: var(--tbp-sw-scelta) !important;
    font-weight: 800 !important;
    cursor: default;
    scale: none !important;
    translate: none !important;
    filter: none !important;
  }
  html body nav.tbp-auth-switch--doppio > a.tbp-auth-switch__scelta:focus-visible {
    outline: 3px solid var(--tbp-sw-fuoco) !important;
    outline-offset: 2px !important;
  }
  /* La spunta resta nel markup ma non si mostra: era un segno da bottone. */
  html body nav.tbp-auth-switch--doppio .tbp-auth-switch__spunta {
    display: none !important;
  }
  html body nav.tbp-auth-switch.tbp-auth-switch--doppio > a.tbp-auth-switch__scelta > :is(span, svg) {
    min-width: 0;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
  }
  @media (max-width: 359px) {
    html body nav.tbp-auth-switch--doppio > a.tbp-auth-switch__scelta {
      padding: 8px 6px 10px !important;
      font-size: .9375rem !important;
    }
  }

  /* La riga d'aiuto sotto «Come vuoi registrarti?»: dice cosa fare. */
  html body .tbp-auth-root .tbp-auth-guida {
    margin: -4px 0 16px !important;
    color: var(--tbp-ink, #123326) !important;
    -webkit-text-fill-color: currentColor !important;
    font-family: var(--tbp-font, sans-serif) !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    text-align: center !important;
  }
  html[data-tbp-theme="dark"] body .tbp-auth-root .tbp-auth-guida {
    color: var(--tbp-night-text, #ededed) !important;
  }

  /* I quattro modi (Google, Facebook, Apple, email): il contorno si vede
     (#5D786B, 4,8:1 sul bianco; prima la linea tenue faceva 1,3:1) e il
     testo è 600: sono loro i bottoni da toccare. Altezza 56 px. */
  html body .tbp-auth-root .tbp-social-login > a.tbp-social-btn:not(.is-soon) {
    min-height: 56px !important;
    border: 1.5px solid #5d786b !important;
    font-weight: 600 !important;
  }
  html[data-tbp-theme="dark"] body .tbp-auth-root .tbp-social-login > a.tbp-social-btn:not(.is-soon) {
    border-color: #8a8a8a !important;
  }

  /* «Hai già un account? Accedi» / «Non hai un account? Registrati». */
  html body .tbp-auth-root .tbp-auth-rimando {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 6px !important;
    margin: 16px 0 0 !important;
    color: var(--tbp-ink, #123326) !important;
    -webkit-text-fill-color: currentColor !important;
    font-family: var(--tbp-font, sans-serif) !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
  }
  html body .tbp-auth-root .tbp-auth-rimando > span { color: inherit !important; -webkit-text-fill-color: currentColor !important; }
  html body #wrapper .tbp-auth-root .tbp-auth-rimando > a.tbp-auth-rimando__link {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 44px !important;
    padding: 0 4px !important;
    color: var(--tbp-green, #084828) !important;
    -webkit-text-fill-color: currentColor !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
  }
  html[data-tbp-theme="dark"] body .tbp-auth-root .tbp-auth-rimando { color: var(--tbp-night-text, #ededed) !important; }
  html[data-tbp-theme="dark"] body #wrapper .tbp-auth-root .tbp-auth-rimando > a.tbp-auth-rimando__link { color: #9bdbb5 !important; }
  /* Sul telefono, nel passo email e password, c'è già «Non hai ancora un
     account? Registrati» in fondo: lì il rimando del primo passo non serve. */

  /* Vista classica: il titolo della scelta abbastanza grande da leggersi. */
  html body:not(.tbp-flow-fullscreen) .tbp-auth-root .tbp-auth-step--intro > h1.tbp-auth-title {
    font-size: 1.6rem !important;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
  }
}

/* Sotto il commutatore, il titolo della scelta: stesso posto, stessa misura
   sulle due pagine («Come vuoi registrarti?» / «Accedi al tuo account»), così
   cambiando voce non salta niente. */
html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step--intro > .tbp-auth-title:first-child,
html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-step--credenziali > .tbp-auth-step__title:first-child {
  margin: 4px 0 12px !important;
  font-size: clamp(1.5rem, 6.5vw, 1.9rem) !important;
  line-height: 1.15 !important;
}
/* Nome, email e password: la scelta è fatta, il commutatore non serve (e un
   tocco perderebbe quello che hai scritto). */
@layer tbp-appearance {
  html body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-root:is([data-auth-step="nome"], [data-auth-step="email"], [data-auth-step="password"]) > nav.tbp-auth-switch.tbp-auth-switch--doppio {
    display: none !important;
  }
  /* Con la tastiera aperta (tbp-tastiera.js) si nasconde come marchio e
     claim: lo spazio sopra i tasti va ai campi. Chiusa la tastiera torna. */
  html.tbp-tastiera-aperta body.tbp-auth-flow.tbp-flow-fullscreen .tbp-auth-root > nav.tbp-auth-switch.tbp-auth-switch--doppio {
    display: none !important;
  }
}
/* Posto del commutatore: sotto il claim, poi il titolo. Nel layer, come il
   resto del commutatore (un !important fuori dal layer perde). */
@layer tbp-appearance {
  html body.tbp-flow-fullscreen .tbp-auth-root > nav.tbp-auth-switch.tbp-auth-switch--doppio {
    margin: 16px auto 0 !important;
  }
  html body:not(.tbp-flow-fullscreen) .tbp-auth-root > nav.tbp-auth-switch.tbp-auth-switch--doppio {
    width: min(100%, 440px) !important;
    margin: 24px auto 16px !important;
  }
}
/* Vista classica: /login/ sta direttamente in <main>, /registrazione/ dentro
   la pagina di Flatsome, che aggiunge 30 px in cima. Senza questo, cambiando
   voce marchio e commutatore scendevano di 30 px. */
html body:not(.tbp-flow-fullscreen):is(.registrazione, .registrazione-professionista, .registrazione-comune) #main > .content-area.page-wrapper:has(.tbp-auth-root) {
  padding-top: 0 !important;
}
html body:not(.tbp-flow-fullscreen) .tbp-auth-root .tbp-auth-step--intro > .tbp-auth-title:first-child {
  margin-top: 0 !important;
}
html body:not(.tbp-flow-fullscreen) .tbp-auth-root > .tbp-auth-view-choice {
  margin: 16px 0 0;
}

/* Passaggio fra /registrazione/ e /login/ (stesso sito, stesse pagine di
   accesso): il pollice scivola sull'altra metà, le etichette cambiano colore
   sul posto, il resto sfuma. Una durata, una curva (05_MOVIMENTO: medio, curva).
   Solo fra pagine che caricano questo foglio; altrove nessun effetto. */
@view-transition {
  navigation: auto;
}
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: 240ms;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}
@layer tbp-appearance {
  @media (prefers-reduced-motion: reduce) {
    html body nav.tbp-auth-switch--doppio > .tbp-auth-switch__pollice {
      transition: none !important;
    }
  }
}

/* ==========================================================================
   2/10 (CPO): avvisi di accesso e iscrizione nel tema scuro.
   Prima l'errore social restava un riquadro rosa chiaro (la regola chiara ha
   #wrapper e batteva quella scura), e la regola del tema sugli `p` lo faceva
   chiaro: poi contrasto() lo scuriva in linea in verde. Gli avvisi WooCommerce
   erano tutti e tre uguali, grigio scuro con testo chiaro: un errore non
   sembrava un errore. Ora tinta scura piena per ogni stato, la linea da 1 px
   intera (niente riga di accento) e testo nel tono chiaro dello stato:
     errore   #2C1214, linea #7A2A2F, testo #FF9EA2  (8,9:1)
     fatto    #10241A, linea #2F5C43, testo #9BDBB5  (10,2:1)
     avviso   #1E1E1E, linea #3A3A3A, testo #EDEDED  (14,2:1)
   Nel layer del tema: le sue regole scure con !important stanno lì e un
   !important fuori dal layer perde. Testo chiaro su fondo scuro: contrasto()
   non tocca più niente. Tema chiaro e tema ToBePolo (chiaro) restano com'erano.
   #wrapper nel selettore: la regola scura generale degli avvisi ha nel suo
   :is() anche «#main-menu …», quindi pesa come un id, e senza vinceva lei.
   ========================================================================== */
@layer tbp-appearance {
  html[data-tbp-theme="dark"] body:is(.login, .registrazione, .registrazione-professionista, .registrazione-comune, .registrazione-confermata) #wrapper :is(.tbp-auth-error, .woocommerce-error, .woocommerce-message, .woocommerce-info) {
    border: 1px solid var(--tbp-avviso-linea) !important;
    background: var(--tbp-avviso-fondo) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--tbp-avviso-testo) !important;
    -webkit-text-fill-color: var(--tbp-avviso-testo) !important;
  }
  html[data-tbp-theme="dark"] body:is(.login, .registrazione, .registrazione-professionista, .registrazione-comune, .registrazione-confermata) #wrapper :is(.tbp-auth-error, .woocommerce-error) {
    --tbp-avviso-fondo: #2c1214;
    --tbp-avviso-linea: #7a2a2f;
    --tbp-avviso-testo: #ff9ea2;
  }
  html[data-tbp-theme="dark"] body:is(.login, .registrazione, .registrazione-professionista, .registrazione-comune, .registrazione-confermata) #wrapper .woocommerce-message {
    --tbp-avviso-fondo: #10241a;
    --tbp-avviso-linea: #2f5c43;
    --tbp-avviso-testo: #9bdbb5;
  }
  html[data-tbp-theme="dark"] body:is(.login, .registrazione, .registrazione-professionista, .registrazione-comune, .registrazione-confermata) #wrapper .woocommerce-info {
    --tbp-avviso-fondo: #1e1e1e;
    --tbp-avviso-linea: #3a3a3a;
    --tbp-avviso-testo: #ededed;
  }
  /* Tutto quello che sta dentro (li, strong, span, link) prende il colore
     dell'avviso; i link restano sottolineati e un po' più pesanti. */
  html[data-tbp-theme="dark"] body:is(.login, .registrazione, .registrazione-professionista, .registrazione-comune, .registrazione-confermata) #wrapper :is(.tbp-auth-error, .woocommerce-error, .woocommerce-message, .woocommerce-info) :is(*) {
    background: transparent !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
  }
  /* Con #main: la regola scura dei link nel testo («#main :is(p, li) > a»,
     verde #9BDBB5) pesava di più e dentro l'errore rosso il link era verde. */
  html[data-tbp-theme="dark"] body:is(.login, .registrazione, .registrazione-professionista, .registrazione-comune, .registrazione-confermata) #wrapper :is(.tbp-auth-error, .woocommerce-error, .woocommerce-message, .woocommerce-info) a,
  html[data-tbp-theme="dark"] body:is(.login, .registrazione, .registrazione-professionista, .registrazione-comune, .registrazione-confermata) #wrapper #main :is(.tbp-auth-error, .woocommerce-error, .woocommerce-message, .woocommerce-info) a {
    color: var(--tbp-avviso-testo) !important;
    -webkit-text-fill-color: var(--tbp-avviso-testo) !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
  }
}