/* 10-PWA — cookie notice, PWA install banners, iOS hint */
@layer pages {

  /* ── Cookie notice ── */
  .cookie-notice {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--clr-berry-900, #1a0510);
    border-top: 1px solid rgba(var(--clr-berry-500-rgb),0.3);
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: var(--fs-md-s);
    color: var(--white-a60);
    z-index: var(--z-modal, 1055);
  }
  .cookie-notice button {
    background: var(--clr-berry-500, #9e1a5e);
    color: var(--clr-white);
    border: none;
    border-radius: 4px;
    padding: 4px 14px;
    font-size: var(--fs-md-s);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .cookie-notice button:hover {
    background: var(--clr-berry-400, #c4226e);
  }

  /* ── PWA install banner ── */
  .pwa-install-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--clr-berry-800, #2e0c1a);
    border-top: 1px solid rgba(var(--clr-berry-500-rgb),0.4);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: var(--z-modal, 1055);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.3);
  }
  .pwa-install-icon { flex-shrink: 0; }
  .pwa-install-icon img { border-radius: 8px; display: block; }
  .pwa-install-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .pwa-install-text strong {
    font-size: var(--fs-lg-s);
    font-weight: 600;
    color: var(--clr-white);
  }
  .pwa-install-text span {
    font-size: var(--fs-base-s);
    color: var(--white-a55);
  }
  .pwa-install-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  .pwa-install-btn {
    background: var(--clr-berry-400, #c4226e);
    color: var(--clr-white);
    border: none;
    border-radius: 4px;
    padding: 7px 16px;
    font-size: var(--fs-md-s);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
  }
  .pwa-install-btn:hover {
    background: var(--clr-berry-500, #9e1a5e);
  }
  .pwa-dismiss-btn {
    background: none;
    border: none;
    color: var(--white-a40);
    cursor: pointer;
    font-size: var(--fs-h3-s);
    padding: 4px;
    display: flex;
    align-items: center;
  }
  .pwa-dismiss-btn:hover {
    color: var(--white-a80);
  }

  /* ── iOS install hint ── */
  .ios-install-hint {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--clr-berry-800, #2e0c1a);
    border-top: 1px solid rgba(var(--clr-berry-500-rgb),0.4);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: var(--fs-md-s);
    color: var(--white-a70);
    z-index: var(--z-modal, 1055);
  }
  .ios-install-hint strong { color: var(--clr-white); }
  .ios-install-hint button {
    background: none;
    border: none;
    color: var(--white-a40);
    cursor: pointer;
    font-size: var(--fs-h3-s);
    padding: 4px;
    flex-shrink: 0;
  }

  /* Hide install UI when running as installed PWA */
  @media (display-mode: standalone) {
    .pwa-install-banner,
    .ios-install-hint,
    .cookie-notice {
      display: none !important;
    }
  }


} /* end @layer pages */

/* Unlayered PWA banner (dashboard) */
/* ── PWA install banner ── */
.pwa-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(var(--clr-berry-400-rgb),0.08);
  border-bottom: 0.5px solid rgba(var(--clr-berry-400-rgb),0.2);
}