/* ==========================================================================
   Install-app prompt (PWA)
   Hidden by default - pwa-install.js unhides these only when the browser
   reports the site as installable, so nothing flashes on unsupported browsers.
   ========================================================================== */

/* The [hidden] attribute only sets display:none at UA priority, so any class below that
   sets a display value would win. Re-assert it for the elements we toggle. */
[data-pwa-install][hidden],
.pwa-install-banner[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Header / footer triggers
   -------------------------------------------------------------------------- */
.pwa-install-link {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color var(--brand-transition);
}

.pwa-install-link:hover {
  color: var(--brand-accent-light);
}

/* --------------------------------------------------------------------------
   Bottom banner
   -------------------------------------------------------------------------- */
.pwa-install-banner {
  position: fixed;
  z-index: 1045; /* under Bootstrap modals (1055), over sticky header (1020) */
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-md);
  background: var(--brand-surface);
  box-shadow: var(--brand-shadow-lift);
  transform: translateY(calc(100% + 24px));
  opacity: 0;
  transition: transform var(--brand-transition), opacity var(--brand-transition);
}

.pwa-install-banner.is-visible {
  transform: translateY(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .pwa-install-banner {
    transition: none;
  }
}

@media (min-width: 576px) {
  .pwa-install-banner {
    left: auto;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    width: 380px;
  }
}

.pwa-install-banner-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.pwa-install-banner-body {
  flex: 1 1 auto;
  min-width: 0;
}

.pwa-install-banner-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--brand-fg);
}

.pwa-install-banner-text {
  margin: 2px 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--brand-muted);
}

.pwa-install-banner-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.pwa-install-btn {
  border: 0;
  border-radius: var(--brand-radius-pill);
  padding: 8px 18px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
  transition: opacity var(--brand-transition);
}

.pwa-install-btn:hover {
  opacity: 0.92;
}

.pwa-install-dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--brand-muted);
  background: transparent;
  transition: background var(--brand-transition), color var(--brand-transition);
}

.pwa-install-dismiss:hover {
  background: var(--brand-bg);
  color: var(--brand-fg);
}

/* --------------------------------------------------------------------------
   iOS "Add to Home Screen" instructions
   -------------------------------------------------------------------------- */
.pwa-ios-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pwa-step;
}

.pwa-ios-steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  font-size: 0.9375rem;
  color: var(--brand-fg);
  border-bottom: 1px solid var(--brand-border);
}

.pwa-ios-steps li:last-child {
  border-bottom: 0;
}

.pwa-ios-steps li::before {
  counter-increment: pwa-step;
  content: counter(pwa-step);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
}

.pwa-ios-steps svg {
  flex: 0 0 auto;
  color: var(--brand-primary);
}