/* FastnaijaPWA front-end UI. Flat and matte: no gradients, no shadows, no borders. */
:root {
  --fnpwa-accent: #C62828;
  --fnpwa-on-accent: #ffffff;
  --fnpwa-ink: #111111;
  --fnpwa-paper: #ffffff;
  --fnpwa-soft: #f1f1f1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fnpwa-ink: #f2f2f2;
    --fnpwa-paper: #1a1a1a;
    --fnpwa-soft: #2a2a2a;
  }
}
:root[data-theme="dark"] {
  --fnpwa-ink: #f2f2f2;
  --fnpwa-paper: #1a1a1a;
  --fnpwa-soft: #2a2a2a;
}

.fnpwa-banner,
.fnpwa-toast {
  position: fixed;
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 99999;
  width: min(420px, calc(100vw - 32px));
  margin: 0;
  text-align: left;
  box-sizing: border-box;
  background: var(--fnpwa-ink);
  color: var(--fnpwa-paper);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  border-radius: 10px;
  padding: 14px 16px;
  animation: fnpwa-in .18s ease-out;
}
@keyframes fnpwa-in {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.fnpwa-banner-title { margin: 0 0 4px; font-weight: 700; font-size: 16px; }
.fnpwa-banner-text  { margin: 0 0 8px; opacity: .85; }
.fnpwa-banner-actions { margin-top: 8px; }
.fnpwa-banner-actions > *,
.fnpwa-toast > * { display: inline-block; margin: 0 8px 8px 0; }
.fnpwa-toast span { display: block; margin: 0 0 8px; }

.fnpwa-btn,
.fnpwa-toast-action {
  appearance: none;
  text-align: left;
  border: 0;
  border-radius: 8px;
  padding: 9px 14px;
  font: 600 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--fnpwa-accent);
  color: var(--fnpwa-on-accent);
  cursor: pointer;
}
.fnpwa-btn-ghost {
  background: transparent;
  color: var(--fnpwa-paper);
  opacity: .8;
}
.fnpwa-btn:focus-visible,
.fnpwa-toast-action:focus-visible,
[data-fnpwa="notify"]:focus-visible {
  outline: 3px solid var(--fnpwa-accent);
  outline-offset: 2px;
}

/* Alert toggles placed anywhere by the theme or a plugin. */
[data-fnpwa="notify"] {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  background: var(--fnpwa-soft);
  color: var(--fnpwa-ink);
  font: 600 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  cursor: pointer;
}
[data-fnpwa="notify"][data-state="on"] {
  background: var(--fnpwa-accent);
  color: var(--fnpwa-on-accent);
}

/* Native share button added to the theme's share bar. */
.fn-share-bar .fn-share-native {
  background: var(--fnpwa-soft);
  color: var(--fnpwa-ink);
  border: 0;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .fnpwa-banner, .fnpwa-toast { animation: none; }
}

/* Alerts button (footer and shortcode). Label follows the subscription state. */
.fnpwa-bell[hidden], .fnpwa-menu-item[hidden] { display: none !important; }
.fnpwa-menu-item .fnpwa-bell {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
[data-fnpwa="notify"][data-state="on"] .fnpwa-on-label,
[data-fnpwa="notify"][data-state="off"] .fnpwa-off-label { display: none; }

/* The Alerts menu link (Appearance > Menus) shows only where the browser can subscribe. */
html:not(.fnpwa-push-ok) a[href="#fnpwa-alerts"],
html:not(.fnpwa-push-ok) li:has(> a[href="#fnpwa-alerts"]) { display: none !important; }

/* Alerts panel: slides in from the top right, flat, no shadow or border. */
.fnpwa-panel[hidden] { display: none !important; }
.fnpwa-panel {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 100000;
  width: min(360px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 20px;
  border-radius: 12px;
  text-align: left;
  background: var(--fnpwa-paper);
  color: var(--fnpwa-ink);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  animation: fnpwa-slide-in 0.28s ease-out;
}
.fnpwa-panel-head { margin: 0 40px 8px 0; text-align: left; }
.fnpwa-panel h2 { margin: 0; font-size: 18px; line-height: 1.3; color: var(--fnpwa-ink); }
.fnpwa-panel p { margin: 0 0 16px; }
.fnpwa-panel-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--fnpwa-soft);
  color: var(--fnpwa-ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.fnpwa-panel .fnpwa-status-on { display: none; }
.fnpwa-panel .fnpwa-status-off { display: block; }
.fnpwa-panel[data-state="on"] .fnpwa-status-on { display: block; }
.fnpwa-panel[data-state="on"] .fnpwa-status-off { display: none; }
.fnpwa-panel .fnpwa-btn { text-align: left; }

@keyframes fnpwa-slide-in {
  from { opacity: 0; transform: translate(24px, -16px); }
  to { opacity: 1; transform: none; }
}