/* ==========================================================================
   Recupero password (29/9, CEO: «nella schermata "Aggiorna la tua password",
   migliora la grafica che fa schifo»).

   Vale su tutte le schermate del recupero, che ora hanno la classe
   body.tbp-recupero-password (inc/login/password-nuova.php):
     /login/?lost-password=true          richiesta del link
     /login/?reset-link-sent=true        «Controlla la tua e-mail»
     /mio-account/lost-password/         «Scegli una nuova password» (e link scaduto)
     /login/?password-reset=true         «Password aggiornata»
   La veste (schermo intero sul telefono, barra, marchio, campi da 58 px,
   bottone oro in fondo) e' quella di tbp-auth-flow.css: qui solo cio' che
   quelle schermate non avevano. Niente bordi colorati su un lato.
   Si carica dopo tbp-linguaggio.css.
   ========================================================================== */

/* Il motto una volta sola: sul computer la testata lo ripeteva sopra il marchio
   (sul telefono la testata non c'e', il flusso e' a schermo intero). */
html body.tbp-recupero-password .tbp-header-signature {
  display: none !important;
}

/* Il modulo e' un elemento di una colonna flex con margini automatici: senza
   larghezza si stringeva sulla riga piu' lunga (321 px su 354 a 390). */
html body.tbp-recupero-password #main .account-container form.lost_reset_password {
  width: 100% !important;
}

/* --- Etichette ----------------------------------------------------------- */
html body.tbp-recupero-password #main .account-container .tbp-password__campo {
  text-align: left !important;
}
html body.tbp-recupero-password #main .account-container .tbp-password__campo > label {
  display: block !important;
  margin: 0 0 6px 4px !important;
  padding: 0 !important;
  color: var(--tbp-green, #084828) !important;
  -webkit-text-fill-color: var(--tbp-green, #084828) !important;
  font-family: Manrope, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: .875rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-transform: none !important;
}
html body.tbp-recupero-password #main .account-container .tbp-password__campo {
  margin: 0 0 14px !important;
  padding: 0 !important;
}

/* --- Campo con l'occhio --------------------------------------------------- */
html body.tbp-recupero-password #main .tbp-password__casella {
  position: relative;
  display: block;
  width: 100%;
}
/* form:not(#adminbarsearch) = un id in piu': le regole dei campi di login.css
   e tbp-internal-surfaces.css lo usano gia' (specificita' 1,5,3). */
html body.tbp-recupero-password #main .account-container form:not(#adminbarsearch) .tbp-password__casella input.tbp-password__input {
  width: 100% !important;
  margin: 0 !important;
  padding-right: 56px !important;
}
html body.tbp-recupero-password #main .account-container .tbp-password__casella button.tbp-password__occhio {
  position: absolute !important;
  top: 50% !important;
  right: 6px !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: var(--tbp-muted, #5D786B) !important;
  -webkit-text-fill-color: currentColor !important;
  box-shadow: none !important;
  text-shadow: none !important;
  line-height: 0 !important;
  cursor: pointer;
}
html body.tbp-recupero-password #main .account-container .tbp-password__casella button.tbp-password__occhio::after,
html body.tbp-recupero-password #main .account-container .tbp-password__casella button.tbp-password__occhio::before {
  content: none !important;
}
html body.tbp-recupero-password #main .account-container .tbp-password__casella button.tbp-password__occhio:hover {
  background: var(--tbp-sage, #F4F7F5) !important;
  color: var(--tbp-green, #084828) !important;
}
html body.tbp-recupero-password #main .account-container .tbp-password__casella button.tbp-password__occhio:focus-visible {
  outline: 3px solid #C9A227 !important;
  outline-offset: 1px !important;
}
html body.tbp-recupero-password #main .tbp-password__occhio svg {
  display: block;
  width: 22px;
  height: 22px;
  pointer-events: none;
}
html body.tbp-recupero-password #main .tbp-password__occhio .tbp-password__occhio-chiudi,
html body.tbp-recupero-password #main .tbp-password__occhio.is-visibile .tbp-password__occhio-apri {
  display: none;
}
html body.tbp-recupero-password #main .tbp-password__occhio.is-visibile .tbp-password__occhio-chiudi {
  display: block;
}

/* Campo sbagliato: bordo rosso anche fuori dal flusso a schermo intero. */
html body.tbp-recupero-password #main .account-container form:not(#adminbarsearch) input[aria-invalid="true"],
html body.tbp-recupero-password #main .account-container form:not(#adminbarsearch) input[aria-invalid="true"]:is(:focus, :focus-visible) {
  border-color: var(--tbp-red, #D0161A) !important;
  outline-color: rgba(208, 22, 26, .22) !important;
}

/* --- Forza, in una riga -------------------------------------------------- */
html body.tbp-recupero-password #main .account-container p.tbp-password__forza {
  display: flex !important;
  align-items: center;
  gap: 8px;
  min-height: 18px;
  margin: 8px 4px 0 !important;
  padding: 0 !important;
  color: var(--tbp-muted, #5D786B) !important;
  font-size: .8125rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  text-align: left !important;
  max-width: none !important;
}
html body.tbp-recupero-password #main .tbp-password__forza strong {
  color: var(--tbp-green, #084828);
  font-weight: 800;
}
html body.tbp-recupero-password #main .tbp-password__barre {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 3px;
}
/* Prima di scrivere c'e' solo il consiglio: tutta la riga per il testo. */
html body.tbp-recupero-password #main .tbp-password__forza[data-livello=""] .tbp-password__barre {
  display: none;
}
html body.tbp-recupero-password #main .tbp-password__barre i {
  display: block;
  width: 14px;
  height: 4px;
  border-radius: 999px;
  background: rgba(8, 72, 40, .14);
}
html body.tbp-recupero-password #main .tbp-password__forza[data-livello="1"] .tbp-password__barre i:nth-child(-n+1) { background: #D9822B; }
html body.tbp-recupero-password #main .tbp-password__forza[data-livello="2"] .tbp-password__barre i:nth-child(-n+2) { background: #C9A227; }
html body.tbp-recupero-password #main .tbp-password__forza[data-livello="3"] .tbp-password__barre i:nth-child(-n+3) { background: #5FA36F; }
html body.tbp-recupero-password #main .tbp-password__forza[data-livello="4"] .tbp-password__barre i { background: #1E7A46; }

/* --- Conferma ed errori sotto i campi ------------------------------------ */
html body.tbp-recupero-password #main .account-container :is(p.tbp-password__uguali, p.tbp-password__errore) {
  display: block;
  margin: 6px 4px 0 !important;
  padding: 0 !important;
  font-size: .8125rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-align: left !important;
  max-width: none !important;
}
html body.tbp-recupero-password #main .account-container :is(p.tbp-password__uguali, p.tbp-password__errore):empty {
  display: none !important;
}
html body.tbp-recupero-password #main .account-container :is(p.tbp-password__uguali, p.tbp-password__errore).is-errore {
  color: var(--tbp-red, #D0161A) !important;
  -webkit-text-fill-color: var(--tbp-red, #D0161A) !important;
}
html body.tbp-recupero-password #main .account-container p.tbp-password__uguali.is-ok {
  color: var(--tbp-d-link, #1E7A46) !important;
  -webkit-text-fill-color: var(--tbp-d-link, #1E7A46) !important;
}
html body.tbp-recupero-password #main .account-container p.tbp-password__uguali.is-ok::before {
  content: "✓ ";
}
html body.tbp-recupero-password #main .tbp-password__testi {
  display: none !important;
}

/* --- Bottone oro: la ricetta di «Accedi» (tbp-bottoni-oro.css) ----------- */
/* Sul computer il bottone della richiesta era verde con la scritta verde
   (invisibile) e «Torna all'accesso» oro piatto: ora tutti come «Accedi». */
html body.tbp-recupero-password #main .account-container :is(form.lost_reset_password button[type="submit"], .tbp-password-reset-confirmation a.button) {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  border: 0 !important;
  background: var(--tbp-cta-gold, linear-gradient(135deg, #F0BE00 0%, #A8821C 100%)) !important;
  color: var(--tbp-gold-label, #084828) !important;
  -webkit-text-fill-color: var(--tbp-gold-label, #084828) !important;
  text-shadow: none !important;
  font-weight: 800 !important;
  text-transform: none !important;
  text-decoration: none !important;
  letter-spacing: -.01em !important;
}
html body.tbp-recupero-password #main .account-container :is(form.lost_reset_password button[type="submit"], .tbp-password-reset-confirmation a.button)::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20px -300px;
  background: var(--tbp-cta-light, none);
  opacity: .83;
  pointer-events: none;
}
html body.tbp-recupero-password #main .account-container :is(form.lost_reset_password button[type="submit"], .tbp-password-reset-confirmation a.button):focus-visible {
  outline: 3px solid var(--tbp-green, #084828) !important;
  outline-offset: 3px !important;
}
/* Spento (29/9 notte). Il bottone e' sempre acceso: i campi sbagliati li dice
   il messaggio sotto il campo (tbp-password.js). Lo spegne solo WooCommerce
   durante l'invio. In quel momento e' grigio pieno come gli altri bottoni
   spenti del flusso (tbp-auth-flow.css, «spento = grigio pieno, non oro
   sbiadito»), senza il riflesso oro. Prima l'oro con l'id vinceva sul grigio. */
html body.tbp-recupero-password #main .account-container form.lost_reset_password button[type="submit"]:disabled {
  opacity: 1 !important;
  background: var(--tbp-d-raised, #E6EDE8) !important;
  color: var(--tbp-d-muted, #6B8577) !important;
  -webkit-text-fill-color: var(--tbp-d-muted, #6B8577) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  cursor: default !important;
}
html body.tbp-recupero-password #main .account-container form.lost_reset_password button[type="submit"]:disabled::after {
  content: none !important;
}

/* Fuori dal flusso a schermo intero (computer, o «Vista classica»): misura di «Accedi». */
html body.tbp-recupero-password:not(.tbp-flow-fullscreen) #main .account-container :is(form.lost_reset_password button[type="submit"], .tbp-password-reset-confirmation a.button) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  min-width: 220px !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 48px !important;
  margin: 18px auto 0 !important;
  padding: 12px 28px !important;
  border-radius: 14px !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
}
/* Sul telefono i bottoni delle due schermate finali erano larghi quanto la
   scritta (175 px): ora come tutti gli altri del flusso, a tutta larghezza. */
/* Il flusso avvolge il bottone in .tbp-auth-actions: «p:has(> a.button)» di
   tbp-auth-flow.css non lo trovava piu', e il paragrafo centrato con margini
   automatici si stringeva sul bottone e non scendeva in fondo. */
html body.tbp-recupero-password.tbp-flow-fullscreen #main .tbp-password-reset-confirmation p:has(a.button) {
  width: 100% !important;
  max-width: none !important;
  margin: auto 0 0 !important;
  padding-top: 18px !important;
}
html body.tbp-recupero-password.tbp-flow-fullscreen #main .tbp-password-reset-confirmation a.button {
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  height: 58px !important;
  min-height: 58px !important;
  padding: 0 18px !important;
  border-radius: 16px !important;
  font-size: 1.05rem !important;
}

/* I titoli delle due schermate finali come quello della richiesta
   (1.5rem sul computer, clamp di tbp-auth-flow.css a schermo intero). */
html body.tbp-recupero-password.login #main .account-container .tbp-password-reset-confirmation h1:not(.tbp-auth-title--gold) {
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  letter-spacing: -.03em !important;
  line-height: 1.15 !important;
}
html body.tbp-recupero-password.login.tbp-flow-fullscreen #main .account-container .tbp-password-reset-confirmation h1:not(.tbp-auth-title--gold) {
  font-size: clamp(1.5rem, 6.5vw, 1.9rem) !important;
}

/* --- Temi scuri: nel layer del tema, dove stanno le sue regole !important -- */
@layer tbp-appearance {
  /* Tema scuro: testo chiaro sul fondo verde-nero. */
  html[data-tbp-theme="dark"] body.tbp-recupero-password #main .account-container .tbp-password__campo > label,
  html[data-tbp-theme="dark"] body.tbp-recupero-password #main .tbp-password__forza strong {
    color: var(--tbp-d-text, #EDEDED) !important;
    -webkit-text-fill-color: var(--tbp-d-text, #EDEDED) !important;
  }
  html[data-tbp-theme="dark"] body.tbp-recupero-password #main .account-container p.tbp-password__forza,
  html[data-tbp-theme="dark"] body.tbp-recupero-password #main .account-container .tbp-password__casella button.tbp-password__occhio {
    color: var(--tbp-d-muted, #B9C7C0) !important;
    -webkit-text-fill-color: var(--tbp-d-muted, #B9C7C0) !important;
  }
  html[data-tbp-theme="dark"] body.tbp-recupero-password #main .account-container .tbp-password__casella button.tbp-password__occhio:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: var(--tbp-d-text, #EDEDED) !important;
  }
  html[data-tbp-theme="dark"] body.tbp-recupero-password #main .tbp-password__barre i {
    background: rgba(255, 255, 255, .18);
  }
  html[data-tbp-theme="dark"] body.tbp-recupero-password #main .tbp-password__forza[data-livello="3"] .tbp-password__barre i:nth-child(-n+3) { background: #8CCB9B; }
  html[data-tbp-theme="dark"] body.tbp-recupero-password #main .tbp-password__forza[data-livello="4"] .tbp-password__barre i { background: #4CB37A; }
  html[data-tbp-theme="dark"] body.tbp-recupero-password #main .account-container :is(p.tbp-password__uguali, p.tbp-password__errore).is-errore {
    color: #FF8A80 !important;
    -webkit-text-fill-color: #FF8A80 !important;
  }
  html[data-tbp-theme="dark"] body.tbp-recupero-password #main .account-container p.tbp-password__uguali.is-ok {
    color: var(--tbp-d-link, #9BDBB5) !important;
    -webkit-text-fill-color: var(--tbp-d-link, #9BDBB5) !important;
  }
  html[data-tbp-theme="dark"] body.tbp-recupero-password #main .account-container form:not(#adminbarsearch) input[aria-invalid="true"] {
    border-color: #FF8A80 !important;
  }
  /* Tema «ToBePolo» e' CHIARO: tbp-auth-flow.css lo mette insieme allo scuro
     e schiarisce etichette e testi piccoli fino a renderli invisibili sul
     tricolore. Qui restano verdi. */
  html[data-tbp-theme="tobepolo"] body.tbp-recupero-password #main .tbp-auth-root .tbp-password__campo > label,
  html[data-tbp-theme="tobepolo"] body.tbp-recupero-password #main .tbp-auth-root .tbp-password__forza strong {
    color: #084828 !important;
    -webkit-text-fill-color: #084828 !important;
  }
  html[data-tbp-theme="tobepolo"] body.tbp-recupero-password #main .tbp-auth-root p.tbp-password__forza {
    color: #3D5A4A !important;
    -webkit-text-fill-color: #3D5A4A !important;
  }
  /* Spento: grigio scuro nel tema scuro (come tbp-auth-flow.css); nel tema
     «ToBePolo», che e' chiaro, lo stesso grigio chiaro del tema chiaro. */
  html[data-tbp-theme="dark"] body.tbp-recupero-password #main .account-container form.lost_reset_password button[type="submit"]:disabled {
    background: var(--tbp-d-hover, #2a2f2d) !important;
    color: var(--tbp-d-muted, #9aa8a1) !important;
    -webkit-text-fill-color: var(--tbp-d-muted, #9aa8a1) !important;
  }
  html[data-tbp-theme="tobepolo"] body.tbp-recupero-password #main .account-container form.lost_reset_password button[type="submit"]:disabled {
    background: #E6EDE8 !important;
    color: #6B8577 !important;
    -webkit-text-fill-color: #6B8577 !important;
  }
  /* Bottone oro: scritta verde anche di notte (D71). */
  html:is([data-tbp-theme="dark"], [data-tbp-theme="tobepolo"]) body.tbp-recupero-password #main .account-container :is(form.lost_reset_password button[type="submit"], .tbp-password-reset-confirmation a.button):not(:disabled) {
    color: #084828 !important;
    -webkit-text-fill-color: #084828 !important;
    text-shadow: none !important;
  }
}

/* ==========================================================================
   13/10 (CEO: «Nuova password: i campi non si vedono, non capiva dove scrivere»).

   Chi è entrato con Google, Facebook o Apple arriva a «Scegli una nuova
   password» DA COLLEGATO (bacheca → «Imposta la password»). Da collegati le
   pagine dell'account hanno in più due gruppi di regole per i campi dei moduli:
     - lo stile in linea «tbp-s4-account-surfaces» di
       inc/staging4-internal-surfaces.php: «border: 0 !important»;
     - inc/account/form.css: fondo bianco, pillola da 100 px, spazi suoi
       (body.woocommerce-account.logged-in #main > #content form input).
   Hanno due e tre id nel selettore: vincevano sul bordo del flusso
   (tbp-auth-flow.css, nessun id). Sul foglio bianco restavano due campi
   bianchi senza bordo, l'etichetta più piccola e il bottone verde con il
   riflesso oro sopra (oliva). Il 29/9 la schermata era stata provata solo da
   ospite, dove quelle regole non ci sono.

   Qui le schermate del recupero hanno, per tutti, quello che si vede da
   ospiti: i campi con le misure della pagina di accesso (58 px, bordo 1 px
   #C9D2CC, raggio 14 px, fondo bianco, col fuoco il filo grigio dentro),
   l'etichetta da 14 px, il bottone oro. Nello strato del tema e con tre id nel
   selettore: vince da collegati e da ospiti, nei tre temi.
   -webkit-appearance: none perché Safari non ci metta la sua veste.
   ========================================================================== */
@layer tbp-appearance {
  html body.tbp-recupero-password #main .account-container form.lost_reset_password:not(#tbp-pw-1):not(#tbp-pw-2):not(#tbp-pw-3) input:is([type="password"], [type="text"], [type="email"]) {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 14px 20px !important;
    border: 1px solid var(--tbp-d-line, #C9D2CC) !important;
    border-radius: 14px !important;
    background: var(--tbp-d-surface, #fff) none !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--tbp-d-text, #084828) !important;
    -webkit-text-fill-color: var(--tbp-d-text, #084828) !important;
    caret-color: var(--tbp-d-text, #084828) !important;
    text-align: left !important;
  }
  /* Lo spazio per l'occhio. */
  html body.tbp-recupero-password #main .account-container form.lost_reset_password:not(#tbp-pw-1):not(#tbp-pw-2):not(#tbp-pw-3) .tbp-password__casella input.tbp-password__input {
    padding-right: 56px !important;
  }
  /* Il fuoco della pagina di accesso: un filo grigio dentro il bordo. */
  html body.tbp-recupero-password #main .account-container form.lost_reset_password:not(#tbp-pw-1):not(#tbp-pw-2):not(#tbp-pw-3) input:is([type="password"], [type="text"], [type="email"]):is(:focus, :focus-visible) {
    box-shadow: inset 0 0 0 1px #6B7280 !important;
    outline: none !important;
  }
  html body.tbp-recupero-password #main .account-container form.lost_reset_password:not(#tbp-pw-1):not(#tbp-pw-2):not(#tbp-pw-3) input[aria-invalid="true"],
  html body.tbp-recupero-password #main .account-container form.lost_reset_password:not(#tbp-pw-1):not(#tbp-pw-2):not(#tbp-pw-3) input[aria-invalid="true"]:is(:focus, :focus-visible) {
    border-color: #D0161A !important;
  }
  /* L'etichetta sopra il campo, come da ospiti (da collegati scendeva a 12,8 px, senza rientro). */
  html body.tbp-recupero-password #main .account-container form.lost_reset_password:not(#tbp-pw-1):not(#tbp-pw-2):not(#tbp-pw-3) .tbp-password__campo > label {
    margin: 0 0 6px 4px !important;
    font-size: .875rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }
  /* Il bottone oro, come da ospiti (da collegati era verde pieno con il riflesso oro sopra: oliva).
     Quello spento durante l'invio resta grigio: lo dicono le regole più su. */
  html body.tbp-recupero-password #main .account-container form.lost_reset_password:not(#tbp-pw-1):not(#tbp-pw-2):not(#tbp-pw-3) button[type="submit"]:not(:disabled) {
    border: 0 !important;
    background: var(--tbp-cta-gold, linear-gradient(135deg, #F0BE00 0%, #A8821C 100%)) !important;
    color: #084828 !important;
    -webkit-text-fill-color: #084828 !important;
    text-shadow: none !important;
  }
  html body.tbp-recupero-password.tbp-flow-fullscreen #main .account-container form.lost_reset_password:not(#tbp-pw-1):not(#tbp-pw-2):not(#tbp-pw-3) button[type="submit"] {
    border-radius: 16px !important;
  }
  html body.tbp-recupero-password:not(.tbp-flow-fullscreen) #main .account-container form.lost_reset_password:not(#tbp-pw-1):not(#tbp-pw-2):not(#tbp-pw-3) button[type="submit"] {
    border-radius: 14px !important;
  }
  /* Sul computer, da collegati, il contenuto dell'account è una riga (menu a sinistra, pagina a destra): il modulo
     finiva nella metà destra. Qui il menu non c'è: una colonna sola, al centro, come da ospiti. */
  html body.tbp-recupero-password.logged-in #main #content .woocommerce:has(> .account-container):not(#tbp-pw-1):not(#tbp-pw-2) {
    display: block !important;
  }
  /* Sempre sul computer, da collegati: i paragrafi dei moduli dell'account sono larghi metà riga e senza
     margine (inc/account/form.css). Qui il testo e la riga del bottone tornano larghi quanto il modulo. */
  html body.tbp-recupero-password.logged-in:not(.tbp-flow-fullscreen) #main .account-container form.lost_reset_password:not(#tbp-pw-1):not(#tbp-pw-2):not(#tbp-pw-3) > :is(p.descrizione, p.form-row) {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin-bottom: 10px !important;
  }
  /* Tema scuro: i colori dei campi della pagina di accesso di notte. */
  html[data-tbp-theme="dark"] body.tbp-recupero-password #main .account-container form.lost_reset_password:not(#tbp-pw-1):not(#tbp-pw-2):not(#tbp-pw-3) input:is([type="password"], [type="text"], [type="email"]) {
    border-color: var(--tbp-d-line, #333333) !important;
    background: var(--tbp-d-raised, #1E1E1E) none !important;
    color: var(--tbp-d-text, #EDEDED) !important;
    -webkit-text-fill-color: var(--tbp-d-text, #EDEDED) !important;
    caret-color: var(--tbp-d-text, #EDEDED) !important;
  }
  html[data-tbp-theme="dark"] body.tbp-recupero-password #main .account-container form.lost_reset_password:not(#tbp-pw-1):not(#tbp-pw-2):not(#tbp-pw-3) input[aria-invalid="true"],
  html[data-tbp-theme="dark"] body.tbp-recupero-password #main .account-container form.lost_reset_password:not(#tbp-pw-1):not(#tbp-pw-2):not(#tbp-pw-3) input[aria-invalid="true"]:is(:focus, :focus-visible) {
    border-color: #FF8A80 !important;
  }
}