/* Optional PWA controls. The template supplies the translated button text. */
[data-pwa-install][hidden],
[data-pwa-update][hidden] { display: none !important; }

.pwa-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.5rem;
  padding: .62rem .9rem;
  border: 1px solid color-mix(in srgb, var(--accent, #ff3d81) 58%, var(--line, #293243));
  border-radius: .75rem;
  background: color-mix(in srgb, var(--panel, #11151f) 88%, var(--accent, #ff3d81));
  color: var(--text, #f7f8fc);
  font: inherit;
  font-weight: 760;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
}

.pwa-control:hover,
.pwa-control:focus-visible { border-color: var(--accent, #ff3d81); }
.pwa-control:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent, #ff3d81) 35%, transparent); outline-offset: 2px; }

.pwa-status {
  color: var(--muted, #99a4b8);
  font-size: .8125rem;
}

.pwa-install-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--accent, #ff3d81) 35%, var(--line, #293243));
  border-radius: 1rem;
  background: linear-gradient(115deg, color-mix(in srgb, var(--panel, #11151f) 90%, var(--accent, #ff3d81)), var(--panel, #11151f));
}

.pwa-install-banner__copy { min-width: 0; }
.pwa-install-banner__copy strong,
.pwa-install-banner__copy span { display: block; }
.pwa-install-banner__copy span { margin-top: .2rem; color: var(--muted, #99a4b8); font-size: .8125rem; }
.pwa-install-banner__actions { display: flex; flex: 0 0 auto; align-items: center; gap: .5rem; }
.pwa-dismiss { border: 0; background: transparent; color: var(--muted, #99a4b8); font: inherit; font-size: .8125rem; cursor: pointer; }
.pwa-dismiss:hover,.pwa-dismiss:focus-visible { color: var(--text, #f7f8fc); }

html[data-pwa-state='update-ready'] .pwa-update-hint { display: block; }
.pwa-update-hint { display: none; }

.pwa-update-floating {
  position: fixed;
  z-index: 45;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  box-shadow: 0 16px 40px #0008;
}

@media (max-width: 620px) {
  .pwa-install-banner { align-items: flex-start; flex-direction: column; }
  .pwa-install-banner__actions { width: 100%; justify-content: space-between; }
}