/*
 * Sothra Search — area personale, ricerche salvate, guide.
 *
 * Portato dal tema PoeTheme senza cambiare il disegno. Dipende dal foglio
 * del motore di ricerca per le tre variabili di marca che usa, dichiarate
 * qui sotto con un ripiego: così il foglio sta in piedi anche da solo.
 *
 * In coda c'è l'unico blocco nuovo: l'adattamento da Lucide a FontAwesome.
 */

.sothra-modal,
.sothra-area,
.sothra-guide-card,
.sothra-guide-row,
.sothra-guide-save,
.sothra-save-bar,
.sothra-saved-badge,
.sothra-post-actions {
  --st-blue: var(--sothra-menu-active-link-color, #3d8dc4);
  --st-blue-soft: #eef5fb;
  --st-ink: var(--sothra-content-strong-color, #1c3548);
}

}

/* -----------------------------------------------------------------------------
 * Salvataggio delle ricerche
 * -------------------------------------------------------------------------- */

/* Il pulsante sta in alto a destra dei risultati: è un'azione sulla ricerca
   appena fatta, non sul singolo articolo. */
.sothra-save-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.sothra-save-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #ef5b25;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.6875rem 1.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(239, 91, 37, 0.28);
}

.sothra-save-button:hover,
.sothra-save-button:focus-visible {
  background: #d84a17;
}

.sothra-save-button i {
  width: 1rem;
  height: 1rem;
  flex: none;
}

/* -----------------------------------------------------------------------------
 * Finestre modali
 * -------------------------------------------------------------------------- */
.sothra-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

/* `display:flex` batterebbe il `display:none` dello user agent. */
.sothra-modal[hidden] {
  display: none;
}

/* La pagina dietro non deve scorrere: chi supera la fine della finestra
   perderebbe il segno. */
.sothra-modal-open,
.sothra-modal-open body {
  overflow: hidden;
}

.sothra-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 32, 42, 0.55);
}

.sothra-modal__dialog {
  position: relative;
  background: #f6f8fa;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(10, 40, 55, 0.35);
  width: min(34rem, 100%);
  max-height: calc(100vh - 2.5rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sothra-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.375rem 0.75rem;
}

.sothra-modal__title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  color: #16303f;
}

.sothra-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: none;
  color: #5c6f7c;
  cursor: pointer;
  flex: none;
}

.sothra-modal__close:hover,
.sothra-modal__close:focus-visible {
  background: #e6ecf0;
  color: #16303f;
}

.sothra-modal__close i {
  width: 1.125rem;
  height: 1.125rem;
}

.sothra-modal__body {
  padding: 0 1.375rem;
  overflow-y: auto;
  display: grid;
  gap: 0.875rem;
}

.sothra-modal__footer {
  padding: 1rem 1.375rem 1.375rem;
}

/* -----------------------------------------------------------------------------
 * Modale «Salva la ricerca»
 * -------------------------------------------------------------------------- */
/* Il form è la colonna della finestra: intestazione, corpo scorrevole e piede.
   `display:contents` avrebbe fatto lo stesso lavoro togliendo però il form
   dall'albero di accessibilità in più di un browser. */
.sothra-save {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.sothra-save__block {
  background: #fff;
  border: 1px solid #e4e9ec;
  border-radius: 14px;
  padding: 0.9375rem 1rem;
  margin: 0;
}

/* La ricerca riscritta in chiaro: si legge per conferma, non si modifica. */
.sothra-save__name {
  margin: 0;
  border: 1px solid #e4e9ec;
  border-radius: 10px;
  padding: 0.6875rem 0.875rem;
  background: #f7fafc;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: #16303f;
}

.sothra-save__signed {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #4d6373;
}

.sothra-save__signed i {
  width: 1.0625rem;
  height: 1.0625rem;
  flex: none;
  color: #3d8dc4;
}

.sothra-save__scope {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: #4d6373;
}

.sothra-save__scope i {
  width: 0.9375rem;
  height: 0.9375rem;
  flex: none;
  margin-top: 0.125rem;
  color: #3d8dc4;
}

.sothra-save__scope--empty {
  color: #8a99a3;
}

.sothra-save__chips {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.sothra-save__chip {
  border: 1px solid #dde4e8;
  border-radius: 20px;
  padding: 0.3125rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #35505f;
  background: #f7fafc;
}

.sothra-save__more {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: #8a99a3;
}

.sothra-save__alerts-title {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #16303f;
}

.sothra-save__alerts-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: #7a8a95;
}

.sothra-save__alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* L'etichetta porta titolo e spiegazione, ed è tutta cliccabile: il bersaglio
   dell'interruttore è la riga, non i 46px del cursore. */
.sothra-save__alert-label {
  flex: 1 1 auto;
  min-width: 0;
  color: #24404f;
  cursor: pointer;
}

.sothra-save__switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 13px;
  border: 0;
  background: #d8e0e5;
  cursor: pointer;
  flex: none;
  margin: 0;
}

.sothra-save__switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(10, 40, 55, 0.3);
}

.sothra-save__switch:checked {
  background: #3d8dc4;
}

.sothra-save__switch:checked::after {
  left: 23px;
}

.sothra-save__switch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(61, 141, 196, 0.35);
}

@media (prefers-reduced-motion: no-preference) {
  .sothra-save__switch,
  .sothra-save__switch::after {
    transition: background 0.15s ease, left 0.15s ease;
  }
}

.sothra-save__email {
  width: 100%;
  border: 1px solid #dde4e8;
  border-radius: 10px;
  padding: 0.6875rem 0.875rem;
  font-size: 0.9375rem;
  color: #16303f;
  font-family: inherit;
}

.sothra-save__email:focus {
  outline: none;
  border-color: #3d8dc4;
  box-shadow: 0 0 0 3px rgba(61, 141, 196, 0.18);
}

.sothra-save__terms {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #4d6373;
}

.sothra-save__terms input {
  margin-top: 0.1875rem;
  flex: none;
}

.sothra-save__feedback {
  margin: 0;
  border-radius: 10px;
  padding: 0.6875rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

.sothra-save__feedback[hidden] {
  display: none;
}

.sothra-save__feedback--ok {
  background: #e8f5ea;
  color: #1f6b34;
  border: 1px solid #bfe3c7;
}

.sothra-save__feedback--error {
  background: #fdecec;
  color: #a3231d;
  border: 1px solid #f3c4c2;
}

.sothra-save__feedback--busy {
  background: #eef5fa;
  color: #3d8dc4;
  border: 1px solid #cfe4f1;
}

.sothra-save__submit {
  width: 100%;
  background: #3d8dc4;
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 0.9375rem 1.25rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.sothra-save__submit:hover:not(:disabled),
.sothra-save__submit:focus-visible:not(:disabled) {
  background: #2f6f9e;
}

.sothra-save__submit:disabled {
  opacity: 0.6;
  cursor: default;
}

/* A schermo pieno sui telefoni: una finestra centrata su 360px lascia margini
   che non servono a nulla. */
@media (max-width: 600px) {
  .sothra-modal {
    padding: 0;
  }

  .sothra-modal__dialog {
    width: 100%;
    max-height: 100vh;
    height: 100%;
    border-radius: 0;
  }
}

/* -----------------------------------------------------------------------------
 * Modale di accesso e registrazione
 * -------------------------------------------------------------------------- */
.sothra-modal--account .sothra-modal__dialog {
  width: min(52rem, 100%);
  background: #fff;
}

.sothra-account__panes {
  display: flex;
  flex-direction: row-reverse;
  min-height: 0;
  flex: 1 1 auto;
}

/* Il form viene prima nel DOM: è la cosa da fare. I benefici sono il motivo
   per farla e vivono a sinistra solo visivamente, invertendo la riga. */
.sothra-account__form-pane {
  flex: 1 1 58%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.sothra-account__benefits {
  flex: 1 1 42%;
  background: #eaf3f9;
  display: flex;
  align-items: center;
  padding: 1.75rem;
}

.sothra-account__benefits-card {
  background: #fff;
  border-radius: 14px;
  padding: 1.375rem 1.25rem;
  box-shadow: 0 8px 26px rgba(10, 40, 55, 0.08);
}

.sothra-account__benefits-title {
  margin: 0 0 0.875rem;
  font-size: 1rem;
  font-weight: 700;
  color: #16303f;
}

.sothra-account__benefits-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.sothra-account__benefits-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: #24404f;
}

.sothra-account__benefits-list i {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: #3d8dc4;
  margin-top: 0.0625rem;
}

.sothra-account__notice {
  margin: 0 0 0.25rem;
  border-radius: 10px;
  padding: 0.8125rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.sothra-account__notice[hidden] {
  display: none;
}

.sothra-account__notice--ok {
  background: #e8f5ea;
  color: #1f6b34;
  border: 1px solid #bfe3c7;
}

.sothra-account__notice--error {
  background: #fdecec;
  color: #a3231d;
  border: 1px solid #f3c4c2;
}

.sothra-account__notice--busy {
  background: #eef5fa;
  color: #3d8dc4;
  border: 1px solid #cfe4f1;
}

.sothra-account__providers {
  display: grid;
  gap: 0.625rem;
}

.sothra-account__provider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  border: 1px solid #d7dee3;
  border-radius: 10px;
  padding: 0.8125rem 1rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #16303f;
  text-decoration: none;
}

.sothra-account__provider:hover,
.sothra-account__provider:focus-visible {
  border-color: #3d8dc4;
  color: #3d8dc4;
}

/* La riga «oppure» con i due filetti ai lati. */
.sothra-account__or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-size: 0.8125rem;
  color: #8a99a3;
}

.sothra-account__or::before,
.sothra-account__or::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: #e4e9ec;
}

.sothra-account__form {
  display: grid;
  gap: 0.875rem;
}

.sothra-account__form[hidden] {
  display: none;
}

.sothra-account__field {
  display: grid;
  gap: 0.3125rem;
}

.sothra-account__label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #7a8a95;
}

.sothra-account__input {
  width: 100%;
  border: 1px solid #d7dee3;
  border-radius: 10px;
  padding: 0.75rem 0.9375rem;
  font-size: 1rem;
  color: #16303f;
  font-family: inherit;
  background: #fff;
}

.sothra-account__input:focus {
  outline: none;
  border-color: #3d8dc4;
  box-shadow: 0 0 0 3px rgba(61, 141, 196, 0.18);
}

.sothra-account__password {
  position: relative;
  display: flex;
  align-items: center;
}

.sothra-account__password .sothra-account__input {
  padding-right: 3rem;
}

.sothra-account__reveal {
  position: absolute;
  right: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: none;
  border: 0;
  color: #3d8dc4;
  cursor: pointer;
}

.sothra-account__reveal i,
.sothra-account__reveal svg {
  width: 1.25rem;
  height: 1.25rem;
}

.sothra-account__reveal:hover,
.sothra-account__reveal:focus-visible {
  background: #eef5fa;
  color: #2f6f9e;
}

.sothra-account__hint {
  margin: 0;
  font-size: 0.75rem;
  color: #8a99a3;
}

/* -----------------------------------------------------------------------------
 * I campi, contro il foglio del tema
 *
 * Stessa storia del campo di ricerca, stessa causa. Betheme dichiara, su
 * `input[type="email"]`, `input[type="password"]` e compagnia:
 *
 *   width: 230px; border-radius: 0; margin-bottom: 20px;
 *
 * e sul fuoco uno sfondo azzurrino con il suo bordo e il suo colore di testo.
 * Quelle regole valgono 0,1,1; le nostre, con una classe sola, 0,1,0 — e
 * perdono. Nei modali si vedeva: campi larghi duecentotrenta pixel in una
 * finestra molto più larga, angoli vivi al posto di quelli arrotondati, e il
 * campo che diventava celeste appena ci si entrava dentro.
 *
 *   input[type="email"]                            0,1,1
 *   .sothra-account input.sothra-account__input    0,2,1  ← vince
 *   input[type="email"]:focus                      0,2,1
 *   .sothra-account input.…__input:focus           0,3,1  ← vince
 *
 * Nessun `!important`, come nel foglio della ricerca: un tema che voglia
 * ritingere i campi deve poterlo ancora fare.
 * -------------------------------------------------------------------------- */
.sothra-account input.sothra-account__input,
.sothra-modal input.sothra-save__email {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  border-radius: 10px;
  box-shadow: none;
  -webkit-box-shadow: none;
  background-color: #fff;
  color: #16303f;
}

.sothra-account input.sothra-account__input:focus,
.sothra-modal input.sothra-save__email:focus {
  background-color: #fff;
  border-color: #3d8dc4;
  color: #16303f;
  outline: none;
  box-shadow: 0 0 0 3px rgba(61, 141, 196, 0.18);
}

/* Dentro il campo password c'è il pulsante che la mostra, in assoluto sopra
   il bordo destro: il campo deve crescere nel suo contenitore flex, non stare
   alla larghezza che gli darebbe il tema. */
.sothra-account__password input.sothra-account__input {
  flex: 1 1 auto;
}

/*
 * La riga che apre il pannello di recupero. È una spiegazione, non una nota a
 * margine come gli altri hint: sta sopra l'unico campo del modulo ed è la
 * prima cosa che si legge, quindi ha il corpo del testo normale e il colore
 * del testo, non quello grigio dei suggerimenti.
 */
.sothra-account__hint--lead {
  font-size: 0.875rem;
  line-height: 1.55;
  color: #5c6f7c;
}

.sothra-account__forgot {
  margin: -0.25rem 0 0;
  font-size: 0.875rem;
}

.sothra-account__forgot a {
  color: #3d8dc4;
  font-weight: 600;
}

.sothra-account__terms {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #4d6373;
}

.sothra-account__terms input {
  margin-top: 0.1875rem;
  flex: none;
}

/* Rosso come «Salva ricerca»: è la stessa azione primaria vista due volte
   nello stesso percorso, e cambiarle colore a metà strada la farebbe sembrare
   un'altra cosa. */
.sothra-account__submit {
  width: 100%;
  background: #ef5b25;
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 0.9375rem 1.25rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.sothra-account__submit:hover:not(:disabled),
.sothra-account__submit:focus-visible:not(:disabled) {
  background: #d84a17;
}

.sothra-account__submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.sothra-account__switch {
  margin: 0 0 0.5rem;
  text-align: center;
  font-size: 0.875rem;
  color: #5c6f7c;
}

.sothra-account__link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: #3d8dc4;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sothra-account__link:hover,
.sothra-account__link:focus-visible {
  color: #2f6f9e;
}

/* Sotto i 860px le due colonne diventano una, e i benefici finiscono sotto al
   form: la cosa da fare resta in cima, dove il pollice arriva. */
@media (max-width: 860px) {
  .sothra-account__panes {
    flex-direction: column;
    overflow-y: auto;
  }

  .sothra-account__benefits {
    padding: 1rem 1.375rem 1.5rem;
  }

  .sothra-modal--account .sothra-modal__body {
    overflow: visible;
  }
}

/* -----------------------------------------------------------------------------
 * Area personale
 * -------------------------------------------------------------------------- */
.sothra-area {
  display: grid;
  gap: 2rem;
  /* La larghezza la dà il contenitore del plugin, che a sua volta può
     prenderla dal tema: qui restano solo i margini sopra e sotto, che il
     tema non può indovinare perché la pagina non è sua. */
  padding: 2rem 0 3rem;
}

.sothra-area__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.sothra-area__title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: #16303f;
}

.sothra-area__subtitle {
  margin: 0.25rem 0 0;
  color: #5c6f7c;
}

.sothra-area__logout {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #5c6f7c;
  border: 1px solid #d7dee3;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  text-decoration: none;
}

.sothra-area__logout:hover,
.sothra-area__logout:focus-visible {
  border-color: #ef5b25;
  color: #ef5b25;
}

.sothra-area__logout i {
  width: 1rem;
  height: 1rem;
}

.sothra-area__section {
  display: grid;
  gap: 0.875rem;
}

.sothra-area__section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: #16303f;
}

.sothra-area__section-title i {
  width: 1.125rem;
  height: 1.125rem;
  color: #3d8dc4;
}

.sothra-area__count {
  background: #eaf3f9;
  color: #3d8dc4;
  border-radius: 999px;
  padding: 0.0625rem 0.5rem;
  font-size: 0.8125rem;
}

.sothra-area__empty {
  margin: 0;
  background: #f7fafc;
  border: 1px dashed #d7dee3;
  border-radius: 12px;
  padding: 1.125rem 1.25rem;
  color: #5c6f7c;
}

.sothra-area__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

/* Una ricerca salvata */
.sothra-saved {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid #e4e9ec;
  border-radius: 14px;
  padding: 1rem 1.125rem;
}

.sothra-saved__main {
  flex: 1 1 20rem;
  min-width: 0;
}

.sothra-saved__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #16303f;
  text-decoration: none;
}

.sothra-saved__title:hover,
.sothra-saved__title:focus-visible {
  color: #3d8dc4;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sothra-saved__chips {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.sothra-saved__chip {
  border: 1px solid #dde4e8;
  border-radius: 20px;
  padding: 0.1875rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #35505f;
  background: #f7fafc;
}

.sothra-saved__meta {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: #8a99a3;
}

.sothra-saved__actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex: none;
}

.sothra-saved__alert {
  display: inline-flex;
  align-items: center;
}

.sothra-saved__run {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #3d8dc4;
  border: 1px solid #cfe4f1;
  border-radius: 999px;
  padding: 0.4375rem 0.875rem;
  text-decoration: none;
  white-space: nowrap;
}

.sothra-saved__run:hover,
.sothra-saved__run:focus-visible {
  background: #eef5fa;
}

.sothra-saved__run i {
  width: 0.9375rem;
  height: 0.9375rem;
}

.sothra-saved__delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #e4d3d2;
  background: none;
  color: #a3231d;
  cursor: pointer;
  flex: none;
}

.sothra-saved__delete:hover:not(:disabled),
.sothra-saved__delete:focus-visible:not(:disabled) {
  background: #fdecec;
  border-color: #ef5b25;
}

.sothra-saved__delete:disabled {
  opacity: 0.5;
  cursor: default;
}

.sothra-saved__delete i {
  width: 1rem;
  height: 1rem;
}

/* -----------------------------------------------------------------------------
 * Le guide, in forma compatta
 * Tre per riga, come il pannello dei suggerimenti: chi mette in ordine una
 * raccolta scorre titoli, non legge sommari.
 * -------------------------------------------------------------------------- */
.sothra-guide-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .sothra-guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .sothra-guide-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.sothra-guide-card {
  position: relative;
  background: #fff;
  border: 1px solid #e4e9ec;
  border-radius: 12px;
  padding: 0.625rem;
}

.sothra-guide-card__link {
  display: grid;
  gap: 0.4375rem;
  color: inherit;
  text-decoration: none;
}

.sothra-guide-card__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 9px;
  background-color: #2c7f96;
  background-image: linear-gradient(135deg, #2c7f96, #63b06e);
  background-size: cover;
  background-position: center;
}

.sothra-guide-card__title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: #16303f;
  /* Due righe: oltre, le card di una riga smettono di essere alte uguali. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sothra-guide-card__link:hover .sothra-guide-card__title,
.sothra-guide-card__link:focus-visible .sothra-guide-card__title {
  color: #3d8dc4;
}

.sothra-guide-card__meta {
  font-size: 0.6875rem;
  color: #8a99a3;
}

/* Già nella raccolta: si vede sulla card, senza doverla aprire. */
.sothra-guide-card__kept {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(61, 141, 196, 0.92);
  color: #fff;
}

.sothra-guide-card__kept i {
  width: 0.875rem;
  height: 0.875rem;
}

.sothra-guide-card__remove {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 4px rgba(10, 40, 55, 0.25);
  color: #5c6f7c;
  cursor: pointer;
}

.sothra-guide-card__remove:hover:not(:disabled),
.sothra-guide-card__remove:focus-visible:not(:disabled) {
  background: #fdecec;
  color: #a3231d;
}

.sothra-guide-card__remove:disabled {
  opacity: 0.5;
  cursor: default;
}

.sothra-guide-card__remove i {
  width: 0.875rem;
  height: 0.875rem;
}

.sothra-saved__no-results {
  flex: 1 1 100%;
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: #8a99a3;
}

/* Il gruppo di guide sta sotto alla riga, a tutta larghezza. */
.sothra-saved .sothra-guide-grid {
  flex: 1 1 100%;
  margin-top: 0.375rem;
}

/* Area chiusa a chi non è collegato */
.sothra-area__locked {
  text-align: center;
  background: #fff;
  border: 1px solid #e4e9ec;
  border-radius: 18px;
  padding: 3rem 1.5rem;
  display: grid;
  gap: 0.75rem;
  justify-items: center;
}

.sothra-area__locked-icon {
  width: 2.5rem;
  height: 2.5rem;
  color: #3d8dc4;
}

.sothra-area__locked-text {
  max-width: 34rem;
  color: #4d6373;
  line-height: 1.6;
}

.sothra-area__locked-text p {
  margin: 0 0 0.75rem;
}

.sothra-area__locked-text p:last-child {
  margin-bottom: 0;
}

/* Le voci restano allineate a sinistra dentro un blocco centrato: un elenco
   puntato centrato non si legge. */
.sothra-area__locked-list {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  text-align: left;
}

.sothra-area__locked-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: #24404f;
}

.sothra-area__locked-list i {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  color: #3d8dc4;
  margin-top: 0.125rem;
}

.sothra-area__locked-button {
  margin-top: 0.5rem;
  background: #ef5b25;
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 0.8125rem 2.25rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.sothra-area__locked-button:hover,
.sothra-area__locked-button:focus-visible {
  background: #d84a17;
}

/* -----------------------------------------------------------------------------
 * «Salva guida» sull'articolo
 * -------------------------------------------------------------------------- */
.sothra-guide-save {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #cfe4f1;
  border-radius: 999px;
  padding: 0.5625rem 1.125rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #3d8dc4;
  background: #fff;
  cursor: pointer;
}

.sothra-guide-save:hover:not(:disabled),
.sothra-guide-save:focus-visible:not(:disabled) {
  background: #eef5fa;
}

.sothra-guide-save:disabled {
  opacity: 0.6;
  cursor: default;
}

.sothra-guide-save i {
  width: 1.0625rem;
  height: 1.0625rem;
}

/* Tenuta da parte: pieno, non solo un'etichetta diversa. */
.sothra-guide-save.is-kept {
  background: #3d8dc4;
  border-color: #3d8dc4;
  color: #fff;
}

.sothra-guide-save.is-kept:hover:not(:disabled),
.sothra-guide-save.is-kept:focus-visible:not(:disabled) {
  background: #2f6f9e;
}

/* -----------------------------------------------------------------------------
 * Ricerca già salvata, e «Salva guida» nelle liste
 * -------------------------------------------------------------------------- */

/* Niente pulsante quando la ricerca è già nell'area: un'etichetta che dice
   che il lavoro è fatto, e dove ritrovarlo. */
.sothra-saved-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  background: #eef5fa;
  border: 1px solid #cfe4f1;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1f6b34;
}

.sothra-saved-badge i {
  width: 1rem;
  height: 1rem;
  color: #3d8dc4;
}

.sothra-saved-badge a {
  color: #3d8dc4;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sothra-post-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.sothra-guide-save--compact {
  padding: 0.375rem 0.8125rem;
  font-size: 0.78125rem;
  border-radius: 999px;
}

.sothra-guide-save--compact i {
  width: 0.9375rem;
  height: 0.9375rem;
}

/* -----------------------------------------------------------------------------
 * I controlli della guida sull'articolo
 * -------------------------------------------------------------------------- */
.sothra-guide-actions {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex-wrap: wrap;
  border-top: 1px solid #eef2f5;
  padding-top: 1rem;
}

.sothra-guide-actions__area {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #3d8dc4;
  text-decoration: none;
}

/* `display:inline-flex` batterebbe il `display:none` dello user agent. */
.sothra-guide-actions__area[hidden] {
  display: none;
}

.sothra-guide-actions__area:hover,
.sothra-guide-actions__area:focus-visible {
  color: #2f6f9e;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sothra-guide-actions__area i {
  width: 1rem;
  height: 1rem;
}

/* -----------------------------------------------------------------------------

/* -----------------------------------------------------------------------------
 * Le guide dentro a una ricerca salvata
 * Riprendono la riga del pannello dei suggerimenti: tre per riga, quadratino
 * con la copertina, titolo e data. Le guide tenute da sole restano invece
 * nella loro card — sono due cose diverse e devono sembrarlo.
 * -------------------------------------------------------------------------- */
.sothra-saved__results {
  flex: 1 1 100%;
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.sothra-guide-row {
  position: relative;
}

.sothra-guide-row .sothra-search__suggestion {
  text-decoration: none;
  /* Spazio a destra per la X, che sta sopra la riga e non deve coprire
     l'ultima parola del titolo. */
  padding-right: 2rem;
}

.sothra-guide-row .sothra-search__suggestion-icon {
  background-size: cover;
  background-position: center;
}

.sothra-guide-row__kept {
  position: absolute;
  left: 0.375rem;
  bottom: 0.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--st-blue);
  color: #fff;
}

.sothra-guide-row__kept i,
.sothra-guide-row__kept svg {
  width: 0.625rem;
  height: 0.625rem;
}

.sothra-guide-row__remove {
  position: absolute;
  top: 50%;
  right: 0.25rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 0;
  background: none;
  color: #9aa8b1;
  cursor: pointer;
}

.sothra-guide-row__remove:hover:not(:disabled),
.sothra-guide-row__remove:focus-visible:not(:disabled) {
  background: #fdecec;
  color: #a3231d;
}

.sothra-guide-row__remove:disabled {
  opacity: 0.5;
  cursor: default;
}

.sothra-guide-row__remove i,
.sothra-guide-row__remove svg {
  width: 0.8125rem;
  height: 0.8125rem;
}

/* Fuori dal pannello scuro la riga ha bisogno del proprio contrasto. */
.sothra-saved__results .sothra-search__suggestion:hover,
.sothra-saved__results .sothra-search__suggestion:focus-visible {
  background: var(--st-blue-soft);
}

.sothra-saved__results .sothra-search__suggestion-label {
  color: var(--st-ink);
}

/* -----------------------------------------------------------------------------

/* -----------------------------------------------------------------------------
 * Adattamento a FontAwesome
 *
 * Come nel foglio del motore: le regole qui sopra arrivano dal tema, dove le
 * icone erano SVG e la misura si dava con width/height. Un glifo di un font
 * la prende da font-size, e con una width fissa resta piccolo al centro di
 * una scatola grande.
 * -------------------------------------------------------------------------- */
.sothra-modal i.sothra-icon,
.sothra-area i.sothra-icon,
.sothra-guide-card i.sothra-icon,
.sothra-guide-row i.sothra-icon,
.sothra-guide-save i.sothra-icon,
.sothra-save-bar i.sothra-icon,
.sothra-saved-badge i.sothra-icon,
.sothra-post-actions i.sothra-icon {
  width: auto;
  height: auto;
  line-height: 1;
  text-align: center;
  flex: none;
}

.sothra-guide-save i,
.sothra-save-button i,
.sothra-saved-badge i,
.sothra-area__logout i {
  font-size: 0.9375rem;
}

.sothra-modal__close i,
.sothra-guide-row__remove i,
.sothra-area__row-remove i {
  font-size: 0.875rem;
}

/* Il segnalibro pieno contro quello vuoto è la differenza fra salvata e non
   salvata, e si legge senza bisogno di leggere l'etichetta accanto. */
.sothra-guide-save.is-kept i,
.sothra-guide-save[aria-pressed='true'] i {
  color: var(--st-blue);
}