:root {
    --pwa-bg: #48665a;
    --pwa-fg: #fff;
    --pwa-border: rgba(0,0,0,.08);
    --pwa-btn-bg: #fff;
    --pwa-btn-fg: #111;
    --pwa-btn-border: rgba(0,0,0,.12);
    --pwa-shadow: 0 8px 30px rgba(0,0,0,.08);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --pwa-bg: rgba(25, 27, 31, 0.85);
      --pwa-fg: #eaeaea;
      --pwa-border: rgba(255,255,255,.08);
      --pwa-btn-bg: #1f2227;
      --pwa-btn-fg: #eaeaea;
      --pwa-btn-border: rgba(255,255,255,.12);
      --pwa-shadow: 0 8px 30px rgba(0,0,0,.35);
    }
  }

  #pwaInstallBanner{
    position: fixed;
    left: 50%;
   /* bottom: calc(16px + env(safe-area-inset-bottom,0));*/
    top: calc(16px + env(safe-area-inset-top,0)); bottom:auto;
    transform: translateX(-50%) translateY(12px);
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .55rem .8rem;
    border-radius: 999px;
    background: rgba(20,20,20,.7);
    color: #fff;
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
    border: 1px solid rgba(255,255,255,.12);
    z-index: 2147483000;
    opacity: 0; transition: opacity .25s ease, transform .25s ease;
  }
  #pwaInstallBanner.show{ opacity:1; transform: translateX(-50%) translateY(0); }
  #pwaInstallBanner .btn{
    padding:.3rem .6rem; line-height:1; border-radius:999px; font-size:.875rem;
  }
  #pwaText{ font-size:.9rem; opacity:.95; }


  .pwa-banner {
    position: fixed;
    top: 0;
    left: 0; right: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: calc(8px + env(safe-area-inset-top, 0)) 14px 8px 14px;
    background: var(--pwa-bg);
    color: var(--pwa-fg);
    border-bottom: 1px solid var(--pwa-border);
    backdrop-filter: saturate(1.5) blur(10px);
    -webkit-backdrop-filter: saturate(1.5) blur(10px);
    transform: translateY(-120%);
    opacity: 0;
    transition: transform .35s ease, opacity .35s ease;
    box-shadow: var(--pwa-shadow);
  }
  .pwa-banner.show {
    transform: translateY(0);
    opacity: 1;
  }
  .pwa-appicon {
    width: 28px; height: 28px;
    border-radius: 6px;
    object-fit: cover;
    flex: 0 0 28px;
    border: 1px solid var(--pwa-border);
  }
  .pwa-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
  }
  .pwa-sub {
    font-size: 18px;
	color:#fff;
	font-weight:600;
    opacity: .7;
    margin: 0;
  }
  .pwa-left {
    display: flex; align-items: center; gap: .75rem; min-width: 0;
  }
  .pwa-meta {
    display: flex; flex-direction: column; min-width: 0;
  }
  .pwa-actions {
    margin-left: auto; display: flex; gap: .5rem;
  }
  .pwa-btn {
    appearance: none; -webkit-appearance: none;
    font: inherit;
    padding: .45rem .8rem;
    border-radius: 9px;
    border: 1px solid var(--pwa-btn-border);
    background: var(--pwa-btn-bg);
    color: var(--pwa-btn-fg);
    cursor: pointer;
    line-height: 1;
  }
  .pwa-btn.primary {
    font-weight: 600;
  }
  .pwa-btn:active { transform: translateY(1px); }
  .pwa-divider {
    height: 20px; width: 1px; background: var(--pwa-border);
    align-self: center;
  }

  /* offset del contenuto per non farlo stare sotto il banner quando visibile */
  .with-pwa-offset {
    margin-top: calc(56px + env(safe-area-inset-top, 0));
  }


  #splash{
    position: fixed; inset: 0; z-index: 2147483647;
    display: grid; place-items: center;
    background: linear-gradient(to bottom, #48665a, #2A5343);
    transition: opacity .5s ease;
  }
  .splash-box{ display:flex; flex-direction:column; align-items:center; gap:.75rem; padding:24px; text-align:center; color:#fff; }
  .splash-logo{
    width:100px; height:100px; border-radius:18px;
    border:2px solid rgba(255,255,255,.5); object-fit:cover;
    box-shadow:0 4px 12px rgba(0,0,0,.3);
    animation:breathe 1.6s ease-in-out infinite;
    will-change:transform,filter;
  }
  .splash-title{ margin:0; font-size:18px; font-weight:600; }
  .splash-sub{ margin:0; font-size:14px; color:rgba(255,255,255,.85); }

  .loader-track{
    width:220px; height:6px; border-radius:999px;
    background:rgba(255,255,255,.25); overflow:hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
  }
  .loader-bar{
    width:40%; height:100%; border-radius:999px;
    background:linear-gradient(90deg, rgba(255,255,255,0) 0%, #fff 50%, rgba(255,255,255,0) 100%);
    animation:loader-move 1.2s linear infinite;
    transform:translateX(-100%); will-change:transform;
  }

  @keyframes loader-move{
    0% { transform: translateX(-100%); }
    100%{ transform: translateX(220%); }
  }
  @keyframes breathe{
    0%   { transform: scale(1);   filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
    50%  { transform: scale(1.04); filter: drop-shadow(0 0 6px rgba(255,255,255,.35)); }
    100% { transform: scale(1);   filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  }
  @media (prefers-reduced-motion: reduce){
    .splash-logo, .loader-bar{ animation:none !important; }
  }

@media (max-width: 576px) {
 
  #pwaInstallBanner {
	top:90px;
    background: rgba(26,55,6,0.69);  
    border-radius: 6px;
    max-width:90vw;
	min-width:90vw;
	height:auto !important;
	max-height:250px;
	position:fixed;
	border-bottom-left-radius:6px;
	border-bottom-right-radius:6px;
	border-top-right-radius:6px;
	border-top-left-radius:6px;
	
	
  }

  #pwaText {
    font-size: 0.75rem;            
    color: #fff;
	padding:6px;
	text-align:center;
	margin-bottom:10px;
  }

  #installPwaBtn, #chiudiPwaBtn {
    order: 2;
    flex: unset;
    font-size: 0.75rem;
    padding: .25rem .5rem;
    width: auto;
	
  }
}