/* ==========================================================================
   Hotel Sonia — toast del carrello: leggibilità su mobile / tablet
   --------------------------------------------------------------------------
   Da caricare DOPO toastr.min.css (nell'header delle pagine di reservation/,
   subito sotto il link del modulo toastr):

       <link rel="stylesheet" href="modules/toastr/toastr.min.css">
       <link rel="stylesheet" href="../assets/css/cart-toast-mobile.css">   <-- questa

   Tutto il file vive dentro @media (max-width: 1199.98px): da 1200px in su
   NON viene emessa nessuna regola, quindi su desktop il toast resta identico
   a oggi. Nessun contenuto/markup cambia: sono override di stile sulle classi
   che toastr già stampa (.toast-success, .toast-title, .toast-message…).

   !important su ogni riga non è una scorciatoia: le regole di toastr.min.css
   lo usano già, quindi senza pari peso non passerebbero.
   ========================================================================== */

@media (max-width: 1199.98px) {

  /* ======================================================================
     1. La card: più larga e più alta, per ospitare testo leggibile
     ----------------------------------------------------------------------
     Era 320px fissi con padding 14px. Su un 393px restavano ~250px utili al
     testo: "1 Camera : €80,00" a 13,5px ci stava, ma al limite. Ora la card
     si adatta alla larghezza dello schermo (con 16px di margine per lato) e
     si ferma a 420px sui tablet.
     ====================================================================== */
  #toast-container.toast-bottom-left,
  #toast-container.toast-bottom-right,
  #toast-container.toast-bottom-center {
    left: 0 !important;
    right: 0 !important;
    bottom: 16px !important;
    width: 100% !important;
    padding: 0 16px !important;
  }
  #toast-container > .toast-success,
  #toast-container > .toast-warning {
    width: 100% !important;
    max-width: 420px !important;
    gap: 14px !important;
    padding: 16px 44px 16px 16px !important;
    border-radius: 18px !important;
  }

  /* ======================================================================
     2. Il testo: da 13,5px a 1rem
     ----------------------------------------------------------------------
     1rem = 16px, la misura minima perché iOS non zoomi e perché la riga resti
     leggibile a distanza di braccio. Il prezzo, che è l'informazione che si
     cerca davvero, sale a 1.0625rem in semibold.
     ====================================================================== */
  #toast-container > .toast-success .toast-message,
  #toast-container > .toast-warning .toast-message {
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.005em !important;
  }
  #toast-container > .toast-success .toast-message a {
    gap: 10px !important;
    font-size: 1.4625rem !important;
    font-weight: 600 !important;
    /* Il link riempie la card: tutta la riga diventa area toccabile. */
    min-height: 44px !important;
  }
  /* La freccina cresce con il testo, altrimenti resta un dettaglio perso. */
  #toast-container > .toast-success .toast-message a::after {
    width: 18px !important;
    height: 18px !important;
  }

  /* ======================================================================
     3. Icona e badge
     ====================================================================== */
  #toast-container > .toast-success::before,
  #toast-container > .toast-warning::before {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    background-size: 24px 24px !important;
  }
  /* Il badge segue il cerchio più grande: 22px di diametro e cifra a 12px,
     ancorato all'angolo in alto a destra dell'icona. */
  #toast-container > .toast-success .toast-title {
    top: 8px !important;
    left: 42px !important;
    min-width: 22px !important;
    height: 22px !important;
    font-size: 12px !important;
  }

  /* ======================================================================
     4. Chiusura: area toccabile da 44px
     ----------------------------------------------------------------------
     La × era un glifo da 16px in un angolo: bersaglio di ~16px, sotto la
     soglia. Il glifo resta della stessa misura ottica, ma l'area cliccabile
     diventa un quadrato da 44px allineato all'angolo.
     ====================================================================== */
  #toast-container > .toast-success .toast-close-button,
  #toast-container > .toast-warning .toast-close-button {
    top: 0 !important;
    right: 0 !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }

  /* ======================================================================
     5. Schermi stretti (≤375px)
     ----------------------------------------------------------------------
     A 375px la card ha ~343px: icona 44px + gap + × lasciano ~215px al testo.
     "1 Camera : €80,00" a 1rem ne occupa ~180px, quindi resta su una riga.
     ====================================================================== */
  @media (max-width: 413.98px) {
    #toast-container.toast-bottom-left,
    #toast-container.toast-bottom-right,
    #toast-container.toast-bottom-center { padding: 0 12px !important; }
    #toast-container > .toast-success,
    #toast-container > .toast-warning {
      gap: 12px !important;
      padding: 14px 42px 14px 14px !important;
    }
    #toast-container > .toast-success::before,
    #toast-container > .toast-warning::before {
      flex: 0 0 44px !important;
      width: 44px !important;
      height: 44px !important;
      background-size: 22px 22px !important;
    }
    #toast-container > .toast-success .toast-title { left: 38px !important; }
    #toast-container > .toast-success .toast-message a { font-size: 1rem !important; }
  }

  /* ======================================================================
     6. Tablet 768–1199px: la card sta a destra, non a tutta larghezza
     ====================================================================== */
  @media (min-width: 1200px) {
    #toast-container.toast-bottom-right {
      left: auto !important;
      right: 0 !important;
      width: auto !important;
      padding: 0 24px !important;
      bottom: 24px !important;
    }
    #toast-container.toast-bottom-left {
      right: auto !important;
      left: 0 !important;
      width: auto !important;
      padding: 0 24px !important;
      bottom: 24px !important;
    }
    #toast-container > .toast-success,
    #toast-container > .toast-warning { width: 420px !important; }
  }

  /* ======================================================================
     7. Tema scuro — i token del tema fanno già il lavoro, qui si ammorbidisce
        solo il bordo, che su fondo scuro sparirebbe.
     ====================================================================== */
  [data-bs-theme=dark] #toast-container > .toast-success,
  [data-bs-theme=dark] #toast-container > .toast-warning {
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
  }
}


/* ==========================================================================
   8. Albergo Sonia (29/09) — telefono: carrello come "passo successivo"
   --------------------------------------------------------------------------
   Sopra la barra delle schede (non la copre più), 58px di altezza,
   niente ×, a destra un vero pulsante "Continua →" marrone.
   ========================================================================== */
@media (max-width: 1199.98px) {
  #toast-container.toast-bottom-left,
  #toast-container.toast-bottom-right,
  #toast-container.toast-bottom-center {
    bottom: calc(98px + env(safe-area-inset-bottom)) !important;
    padding: 0 12px !important;
  }
  #toast-container > .toast-success {
    min-height: 58px !important;
    padding: 8px 8px 8px 12px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(60, 40, 20, .16) !important;
    align-items: center !important;
  }
  #toast-container > .toast-success::before {
    flex: 0 0 40px !important; width: 40px !important; height: 40px !important;
    background-size: 20px 20px !important;
  }
  #toast-container > .toast-success .toast-title { top: 4px !important; left: 40px !important; }
  #toast-container > .toast-success .toast-close-button { display: none !important; }
  #toast-container > .toast-success .toast-message { flex: 1 1 auto !important; }
  #toast-container > .toast-success .toast-message a {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    width: 100% !important; min-height: 42px !important;
    font-size: 1.0625rem !important; font-weight: 600 !important;
  }
  #toast-container > .toast-success .toast-message a::after {
    content: "Continua \2192" !important;
    width: auto !important; height: auto !important;
    margin-left: auto !important; padding: 10px 16px !important;
    background: var(--bs-primary, #a5825f) !important; background-image: none !important;
    -webkit-mask: none !important; mask: none !important;
    color: #fff !important; border-radius: 8px !important;
    font-size: 0.9375rem !important; font-weight: 600 !important; line-height: 1 !important;
    white-space: nowrap !important;
  }
  html[lang="en"] #toast-container > .toast-success .toast-message a::after { content: "Continue \2192" !important; }
}

/* con il carrello aperto la pagina si allunga: "Rimuovi" e la tassa non restano sotto il carrello */
@media (max-width: 1199.98px) {
  body.ss-carrello main { padding-bottom: 90px; }
}