/* ============================================================
   mobile-banner.css — banner demo compatto + dismissable
   Breakpoint: tablet ≤1024px, mobile ≤640px
   Vincolo: nessun override desktop. Stili inline del #demoBanner
   restano vincenti a 1920px senza queste regole.
   ============================================================ */

/* TABLET ≤ 1024px — banner compatto + bottone dismiss visibile */
@media (max-width: 1024px) {
  #demoBanner.demo-banner {
    padding: 10px 14px !important;
    font-size: 13px !important;
    margin: 12px 16px 0 !important;
  }
  #demoBanner .banner-icon {
    width: 16px !important;
    height: 16px !important;
  }
  #demoBanner .banner-dismiss {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  #demoBanner .banner-dismiss:hover,
  #demoBanner .banner-dismiss:active {
    background: rgba(255, 255, 255, 0.18) !important;
  }
}

/* MOBILE ≤ 640px — banner ultra-compatto */
@media (max-width: 640px) {
  #demoBanner.demo-banner {
    padding: 8px 10px !important;
    font-size: 12px !important;
    gap: 8px !important;
    margin: 10px 12px 0 !important;
  }
  #demoBanner .banner-icon {
    width: 14px !important;
    height: 14px !important;
  }
  #demoBanner .banner-content {
    line-height: 1.3;
    min-width: 0;
  }
  #demoBanner .banner-cta {
    display: inline-block;
    margin-top: 2px;
    margin-left: 0 !important;
    font-size: 11.5px !important;
  }
  #demoBanner .banner-dismiss {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
  }
}