/* ------------------------------------------------------------
   IL MODULO "AVVISAMI SE RAGGIUNGE QUESTO PREZZO"

   Sta in commons/ e non piu' dentro offerte/style.css perche'
   adesso lo aprono tre pagine diverse: l'elenco delle offerte,
   la scheda dello storico (/track) e il verificatore di link
   (/link). Il markup e' in avvisoprezzo.php, qui accanto.

   IL GUSCIO E' COPIATO DA #sorterselect (offerte/style.css), il
   pannello "Ordina e Filtra": e' voluto che le due finestre siano
   identiche, ed era gia' cosi' quando questa viveva la'. La copia
   e' il prezzo da pagare per poterla aprire anche dove il foglio
   delle offerte non viene caricato — /track e /link non lo
   scaricano, e farglielo scaricare tutto per una finestra
   sarebbe molto peggio. Se un giorno si ritocca l'aspetto di uno
   dei due pannelli, va ritoccato anche l'altro.

   Le classi sono tutte annidate sotto .osdialog, comprese
   .redclose e .btn-apply che altrove sono globali: sulla pagina
   delle offerte convivono con le omonime di offerte/style.css, e
   annidate non se le contendono.
   ------------------------------------------------------------ */

.osdialog {
  width: calc(100% - 24px);
  max-width: 500px;
  max-height: 90vh;
  margin: auto;
  padding: 0;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid black;
  border-radius: 15px;
  /* .bodypage centra tutto il contenuto della pagina e la finestra se lo
     prenderebbe per eredita': un modulo con le etichette centrate sopra
     caselle allineate a sinistra comincia in un punto diverso a ogni riga. */
  text-align: left;
}

/* Sulla <dialog> chiusa un display: flex sovrascriverebbe il display: none che
   la tiene nascosta, e la finestra resterebbe stampata in mezzo alla pagina. */
.osdialog[open] {
  display: flex;
  flex-direction: column;
}

.osdialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

/* La testata: tinta piena come le barre del sito, attaccata al bordo. */
.osdialog-testa {
  flex: 0 0 auto;
  background: var(--default-bkg);
  color: var(--default-text);
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.osdialog-testa h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

/* Il tondo bianco della chiusura, lo stesso della ricerca a tutto schermo. */
.osdialog .redclose {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  background-color: #fff;
  border: 1px dotted black;
  border-radius: 100%;
  cursor: pointer;
  transition: background 0.2s ease;
}

.osdialog .redclose:hover {
  background: #ffecef;
}

.osdialog .redclose .icon {
  width: 22px;
  height: 22px;
  margin: 0;
  fill: none;
  stroke: crimson;
  stroke-width: 30px;
}

/* Il corpo: l'unica fascia che scorre, cosi' la testata resta in cima e il
   pulsante di conferma resta raggiungibile senza inseguirlo in fondo. */
.osdialog-corpo {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
}

/* Il piede, staccato dal corpo da un filetto: senza, il pulsante sembra
   l'ultima riga del modulo invece della conferma di tutto. */
.osdialog-piede {
  flex: 0 0 auto;
  padding: 16px 24px;
  background-color: #fff;
  border-top: 1px solid #e0e0e0;
}

.osdialog .btn-apply {
  background: var(--default-bkg);
  text-align: center;
  border: none;
  padding: 14px 32px;
  border-radius: 10px;
  font-weight: 600;
  width: 100%;
  font-size: 1.05rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
}

.osdialog .btn-apply:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.osdialog .btn-apply:active {
  transform: translateY(0);
}

.osdialog .btn-apply:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
  box-shadow: none;
}

/* ------------------------------------------------------------
   IL PULSANTE CHE LA APRE, fuori dalla finestra

   Sulle card e' un angolo triangolare (offerte/offer-card.css);
   su /track e /link e' un pulsante in riga sotto quello di
   Amazon, ma con lo stesso verde e la stessa icona: e' la stessa
   funzione, e deve essere riconoscibile come tale.
   ------------------------------------------------------------ */
.bt-avviso-prezzo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px auto 0;
  padding: 12px 22px;
  background: #4f8f7d;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.3s ease;
}

.bt-avviso-prezzo:hover,
.bt-avviso-prezzo:focus-visible {
  background: #3d7565;
}

/* Il disegno e' quello dell'angolo delle card, in bianco sul verde. Misure
   esplicite perche' .icon impone 40x40 e .mini limita solo la larghezza. */
.bt-avviso-prezzo svg {
  width: 20px;
  height: 20px;
  max-width: none;
  margin: 0;
  flex: 0 0 auto;
  fill: none;
  stroke: #fff;
  stroke-width: 32px;
}

/* ------------------------------------------------------------
   AVVISAMI SE RAGGIUNGE QUESTO PREZZO

   La finestra e' la stessa di "Ordina e Filtra": stesso guscio,
   stessa testata, stesso piede, stesso pulsante di conferma. Non
   e' pigrizia — sono le uniche due finestre del sito, e due
   finestre che si aprono dalla stessa pagina devono chiudersi e
   confermarsi allo stesso modo, altrimenti ogni volta si ricomincia
   a capire dov'e' la crocetta. Qui sotto c'e' solo quello che nel
   pannello dei filtri non esisteva: un modulo da compilare.
   ------------------------------------------------------------ */

.avviso-prodotto {
  margin: 0 0 14px;
  padding: 10px 12px;
  background: #f4f8fc;
  border-radius: 10px;
  font-weight: 600;
  color: #12293f;
  font-size: 0.95rem;
  line-height: 1.35;
}

/*
 * "COME FUNZIONA?" — la spiegazione, piegata.
 *
 * Il triangolino nativo di <summary> non si vede uguale su due browser, quindi
 * si toglie e se ne disegna uno con ::before, come gia' fa il pulsante
 * "Dettagli" delle card: nello stesso sito la stessa cosa deve avere la stessa
 * forma.
 */
.avviso-come {
  margin: 0 0 16px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  background: #f8fbfe;
}

.avviso-come summary {
  padding: 10px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #12293f;
  cursor: pointer;
  list-style: none;
}

/* Il triangolino di serie, in tutte le sue forme: Chrome/Safari lo disegnano
   con ::-webkit-details-marker, Firefox con ::marker. */
.avviso-come summary::-webkit-details-marker {
  display: none;
}

.avviso-come summary::marker {
  content: "";
}

.avviso-come summary::before {
  content: "\25B8";
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.15s ease;
}

.avviso-come[open] summary::before {
  transform: rotate(90deg);
}

.avviso-come summary:hover {
  background: #eaf3ff;
  border-radius: 9px;
}

.avviso-come-corpo {
  padding: 0 14px 12px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #5d6b7f;
}

.avviso-come-corpo p {
  margin: 0 0 10px;
}

.avviso-come-corpo p:last-child {
  margin-bottom: 0;
}

.avviso-campo {
  margin-bottom: 14px;
}

.avviso-campo label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #333;
}

.avviso-campo input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  font-size: 0.95rem;
  font-family: inherit;
  background-color: #fff;
  transition: all 0.2s ease;
}

.avviso-campo input:focus {
  outline: none;
  border-color: var(--default-bkg);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* La riga di aiuto sotto la casella: dice cosa succede lasciandola vuota,
   che e' la scelta giusta per quasi tutti e altrimenti nessuno la fa. */
.avviso-aiuto {
  margin: 6px 0 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #666;
}

/* Il messaggio d'errore: non c'e' finche' non serve, cosi' il modulo non si
   apre gia' con un posto vuoto che sembra un difetto. */
.avviso-errore {
  margin: 0;
  padding: 10px 12px;
  background: #fff1f1;
  border: 1px solid #f3c9c9;
  border-radius: 10px;
  color: #8c2f2f;
  font-size: 0.88rem;
  line-height: 1.4;
}

.avviso-errore[hidden] {
  display: none;
}

/*
 * IL MESSAGGIO DI RICHIESTA AVVIATA
 *
 * Prende il posto del modulo invece di comparirgli sotto: il modulo appena
 * mandato non va ricompilato, e lasciarlo li' con dentro ancora i dati invita
 * a premere una seconda volta.
 */
.avviso-fatto {
  text-align: center;
  padding: 8px 0 4px;
}

.avviso-fatto[hidden] {
  display: none;
}

.avviso-fatto h3 {
  margin: 0 0 10px;
  font-size: 1.05rem;
  color: #12293f;
}

.avviso-fatto p {
  margin: 0 0 12px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #5d6b7f;
}

/* Il canale generato da noi: e' l'unica cosa da copiare in tutta la pagina,
   quindi si stacca dal resto e si puo' selezionare con un tocco. */
/*
 * Il display:block qui sotto e' piu' forte dell'attributo hidden dell'HTML, che
 * agisce proprio impostando display:none: senza questa riga il riquadro
 * tratteggiato restava in pagina vuoto anche a chi il canale se l'era scelto da
 * solo — un rettangolo che non conteneva niente e non spiegava niente.
 *
 * Vale per ogni elemento a cui si dia un display esplicito e che si voglia poter
 * nascondere: nel dialogo sono tre, e li' accanto ci sono gia' le altre due.
 */
.avviso-canale[hidden] {
  display: none;
}

.avviso-canale {
  display: block;
  margin: 0 0 12px;
  padding: 10px 12px;
  background: #f4f8fc;
  border: 1px dashed #a9cbeb;
  border-radius: 10px;
  font-family: monospace;
  font-size: 0.95rem;
  word-break: break-all;
  user-select: all;
  color: #12293f;
}