html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}
/* PWA Install Banner */
.pwa-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0,0,0,0.06);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.pwa-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
  object-fit: cover;
}

.pwa-text { line-height: 1.25; }
.pwa-title {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #111;
}
.pwa-desc {
  margin-top: 4px;
  font-size: 13px;
  color: #606770;
}

.pwa-add-btn {
  appearance: none;
  border: none;
  background: #1776ff;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 16px;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(23, 118, 255, 0.35);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
  white-space: nowrap;
}
.pwa-add-btn:active {
  transform: translateY(1px);
  box-shadow: 0 6px 14px rgba(23,118,255,0.28);
}

.pwa-close {
  position: absolute;
  right: 10px;
  top: 8px;
  background: transparent;
  border: none;
  color: #7a7f87;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* iOS instructions overlay */
.pwa-instructions {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(2px);
}
.pwa-instructions-card {
  width: min(520px, 92vw);
  background: #fff;
  border-radius: 16px;
  padding: 20px 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
  border: 1px solid rgba(0,0,0,0.06);
}
.pwa-instructions-title {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 8px;
}
.pwa-instructions-body {
  font-size: 15px;
  color: #3c4150;
  margin-bottom: 14px;
}
.pwa-instructions-close {
  appearance: none;
  border: none;
  background: #1776ff;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 16px;
  border-radius: 12px;
  cursor: pointer;
}

/* Responsive */
@media (max-width: 480px) {
  .pwa-banner {
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon text" "close add";
    gap: 10px;
    padding: 12px;
  }
  .pwa-icon { grid-area: icon; }
  .pwa-text { grid-area: text; }
  .pwa-add-btn { grid-area: add; justify-self: end; }
  .pwa-close { grid-area: close; position: static; justify-self: start; font-size: 20px; }
}
/* Variante compatta: pill flottante in basso a destra */
:root { --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-top: env(safe-area-inset-top, 0px); --cookie-banner-height: 0px; }

.pwa-banner--compact {
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 999px;
  width: 360px;
  min-height: 56px;

  /* posizionamento non invasivo: basso a sinistra */
  left: 16px;
  right: auto;
  bottom: calc(16px + var(--safe-bottom));
  top: auto; /* override del top eventualmente presente */
  height: auto;
  z-index: 1040; /* sotto eventuali overlay */
}

/* Variante SLIM: più stretta, solo titolo + bottone, icona smartphone */
.pwa-banner--slim {
  /* Default: icona tonda, compatta */
  grid-template-columns: auto;
  gap: 10px;
  padding: 6px;
  border-radius: 999px;
  width: 48px;
  height: 48px;
  display: grid;
  justify-items: center;
  align-items: center;

  left: 16px;
  right: auto;
  bottom: calc(26px + var(--safe-bottom));
  top: auto;
  z-index: 1060;
  cursor: pointer;
  /* gradiente più delicato: highlight tenue sopra il verde base */
  background-color: #82b441;
  background-image: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 100%);
  color: #ffffff; /* testo e icone in bianco per contrasto */
  overflow: hidden;
  transition: width .16s ease, padding .16s ease, box-shadow .16s ease;
}

.pwa-banner--slim .pwa-icon, .pwa-banner--slim .pwa-desc { display: none; }
.pwa-banner--slim .pwa-icon-svg { display: block; flex-shrink: 0; color: #ffffff; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2)); }
.pwa-banner--slim .pwa-title { font-size: 14px; line-height: 1.2; }
.pwa-banner--slim .pwa-text { display: none; }
.pwa-banner--slim .pwa-close { display: none; top: 4px; right: 6px; font-size: 18px; color: #ffffff; opacity: 0.9; }

@media (hover: hover) {
  .pwa-banner--slim:hover {
    /* Stato espanso al passaggio del mouse */
    width: 260px;
    min-height: 48px;
    padding: 8px 12px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.16);
    transform: translateY(-1px);
    justify-items: start;
    align-items: center;
  }
  .pwa-banner--slim:hover { grid-template-columns: auto 1fr; }
  .pwa-banner--slim:hover .pwa-text { display: block; }
  .pwa-banner--slim:hover .pwa-close { display: block; }
}

@media (max-width: 480px) {
  /* Su mobile, default rimane tondo; espansione gestita via classe .expanded */
  .pwa-banner--slim {
    left: 12px;
    right: auto;
    bottom: calc(94px + var(--safe-bottom));
  }
  .pwa-banner--slim.expanded {
    width: 260px;
    min-height: 48px;
    padding: 10px 12px;
    grid-template-columns: auto 1fr;
    box-shadow: 0 18px 40px rgba(0,0,0,0.16);
    justify-items: start;
    align-items: center;
  }
  .pwa-banner--slim.expanded .pwa-text { display: block; }
  .pwa-banner--slim.expanded .pwa-close { display: block; }
  .pwa-banner--slim .pwa-title { font-size: 13.5px; }
}

/* Quando il banner cookie è visibile, sposta più in alto il banner PWA */
.cookie-banner-visible .pwa-banner--slim {
  bottom: calc(26px + var(--cookie-banner-height) + var(--safe-bottom));
}
.cookie-banner-visible .pwa-banner--compact {
  bottom: calc(16px + var(--cookie-banner-height) + var(--safe-bottom));
}
@media (max-width: 480px) {
  .cookie-banner-visible .pwa-banner--slim {
    bottom: calc(94px + var(--cookie-banner-height) + var(--safe-bottom));
  }
}

.pwa-banner--compact .pwa-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

.pwa-banner--compact .pwa-title {
  font-size: 15px;
  line-height: 1.2;
}
.pwa-banner--compact .pwa-desc {
  font-size: 12px;
  color: #707780;
}

.pwa-banner--compact .pwa-add-btn {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  box-shadow: 0 6px 14px rgba(23,118,255,0.28);
}

.pwa-banner--compact .pwa-close {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 18px;
  color: #8a8f99;
}

/* Hover leggero su desktop */
@media (hover: hover) {
  .pwa-banner--compact:hover {
    box-shadow: 0 22px 48px rgba(0,0,0,0.16);
    transform: translateY(-1px);
    transition: box-shadow .12s ease, transform .12s ease;
  }
}

/* Mobile: full-width bottom bar, per non sovrapporsi ad altri banner */
@media (max-width: 480px) {
  .pwa-banner--compact {
    width: auto;
    left: 12px;
    right: auto;
    bottom: calc(94px + var(--safe-bottom)); /* spazio per cookie/banner bottom, +10px */
    top: auto;
    border-radius: 14px;
    padding: 12px;
    gap: 10px;
  }

  .pwa-banner--compact .pwa-icon { width: 36px; height: 36px; }
  .pwa-banner--compact .pwa-title { font-size: 14px; }
  .pwa-banner--compact .pwa-desc { display: none; }
  .pwa-banner--compact .pwa-add-btn { padding: 8px 12px; font-size: 12.5px; }
  .pwa-banner--compact .pwa-close { top: 6px; right: 8px; font-size: 18px; }
}