/* Hykeroo Alerts — runtime popup styling.
   .theme-default uses hardcoded values (no CSS variable dependency at all).
   .theme-custom relies entirely on the app having defined all 6 required
   --hykeroo-alert-* variables — see CLAUDE.md's "CSS override contract".
   Deliberately no var(...,fallback) mixing of the two for those 6 —
   binary opt-in, no partial-mismatch state. --hykeroo-alert-button-font is
   the one exception: genuinely optional, falls back to
   --hykeroo-alert-font, for apps whose buttons intentionally use a
   different font than their body text (its absence is never a broken
   state, just "same as everything else"). */

.hykeroo-alert-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 99999;
}

.hykeroo-alert-modal {
  width: min(420px, 100%);
  max-height: 85vh; /* fallback for browsers without dvh support */
  max-height: 85dvh; /* real fix — accounts for mobile Safari's dynamic address bar; vh alone sizes against the toolbar-hidden viewport even while the toolbar is actually showing, which is exactly why this only broke in a regular Safari tab and not the PWA (no toolbar there at all) */
  overflow-y: auto;
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  scrollbar-width: none; /* Firefox */
}
.hykeroo-alert-modal::-webkit-scrollbar { display: none; } /* Chrome/Safari */

.hykeroo-alert-modal.theme-default {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #CBCBA3;
  color: #2B4438;
}
.hykeroo-alert-modal.theme-custom {
  font-family: var(--hykeroo-alert-font);
  background: var(--hykeroo-alert-bg);
  color: var(--hykeroo-alert-text);
}

.hykeroo-alert-title { margin: 0 0 0.75rem; font-size: 1.25rem; }

.hykeroo-alert-body { margin-bottom: 1.5rem; }
.hykeroo-alert-body p { margin: 0 0 0.75rem; line-height: 1.4; white-space: pre-line; }
.hykeroo-alert-modal.theme-default .hykeroo-alert-body a { color: #33604A; }
.hykeroo-alert-modal.theme-custom .hykeroo-alert-body a { color: var(--hykeroo-alert-accent); }
.hykeroo-alert-body ul { margin: 0 0 0.75rem; padding-left: 1.25rem; }
.hykeroo-alert-body li { margin-bottom: 0.35rem; }

.hykeroo-alert-crop-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 0.75rem;
  transition: transform 0.15s ease;
}
.hykeroo-alert-crop-frame img {
  position: absolute;
  max-width: none;
  display: block;
}

.hykeroo-alert-image-link {
  display: block;
  cursor: pointer;
}
.hykeroo-alert-image-link:hover .hykeroo-alert-crop-frame,
.hykeroo-alert-image-link:focus-visible .hykeroo-alert-crop-frame {
  transform: scale(1.03);
}
@media (prefers-reduced-motion: reduce) {
  .hykeroo-alert-crop-frame { transition: none; }
}

.hykeroo-alert-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.hykeroo-alert-optout-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  cursor: pointer;
}
.hykeroo-alert-modal.theme-default .hykeroo-alert-optout-row {
  accent-color: #33604A;
}
.hykeroo-alert-modal.theme-custom .hykeroo-alert-optout-row {
  accent-color: var(--hykeroo-alert-accent);
}
/* accent-color only themes the checked fill — the ring around the box was a
   separate native focus style the browser draws in its own default blue,
   unrelated to accent-color. Removed per Dan's explicit ask; the trade-off
   is keyboard users tabbing through the alert lose a visible indicator that
   this checkbox is the focused control. */
.hykeroo-alert-optout-row input[type="checkbox"] {
  outline: none;
}

.hykeroo-alert-button {
  display: block;
  margin-left: auto;
  border: none;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.4rem 1.1rem;
  cursor: pointer;
}
.hykeroo-alert-modal.theme-default .hykeroo-alert-button {
  border-radius: 12px;
  background: #33604A;
  color: #f7f2df;
  font-family: 'Droid Serif', serif;
}
.hykeroo-alert-modal.theme-custom .hykeroo-alert-button {
  border-radius: var(--hykeroo-alert-button-radius);
  background: var(--hykeroo-alert-accent);
  color: var(--hykeroo-alert-accent-text);
  font-family: var(--hykeroo-alert-button-font, var(--hykeroo-alert-font));
}

.hykeroo-alert-button:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .hykeroo-alert-overlay { animation: hykerooAlertFadeIn 0.15s ease; }
}
@keyframes hykerooAlertFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}