/* Startup popups (see Components/Shared/_StartupPopups.razor, appsettings "StartupPopups") */
.sp-overlay { position: fixed; inset: 0; z-index: 99000; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(0,0,0,.72); opacity: 0; transition: opacity .3s ease; }
.sp-overlay.sp-open { display: flex; }
.sp-overlay.sp-visible { opacity: 1; }

.sp-modal { position: relative; width: var(--sp-width, 520px); max-width: 100%; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain;
  background: var(--sp-bg, var(--bg, #fff)); color: var(--sp-text, var(--text, #222)); border-radius: var(--sp-radius, 4px); box-shadow: 0 20px 60px rgba(0,0,0,.45);
  transform: translateY(12px); transition: transform .3s ease; }
.sp-overlay.sp-visible .sp-modal { transform: none; }

.sp-close { position: absolute; top: .6rem; right: .6rem; z-index: 2; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  background: rgba(0,0,0,.55); color: #fff; font-size: .9rem; line-height: 1; transition: background .15s ease; }
.sp-close:hover { background: rgba(0,0,0,.8); }
.sp-close:focus-visible, .sp-button:focus-visible { outline: 2px solid var(--sp-accent, var(--accent, #b08d57)); outline-offset: 2px; }

.sp-image img { display: block; width: 100%; height: auto; }
.sp-image a { display: block; }
.sp-image-only { width: var(--sp-width, 720px); padding: 0; background: transparent; box-shadow: none; }

.sp-content { padding: 2rem 1.75rem 1.75rem; text-align: center; }
.sp-title { margin: 0 0 .75rem; font-family: var(--font-head, inherit); font-size: 1.6rem; line-height: 1.25; color: inherit; }
.sp-body { margin: 0 0 1.25rem; line-height: 1.6; opacity: .9; }
.sp-body > :last-child { margin-bottom: 0; }
.sp-button { display: inline-block; border: 1px solid var(--sp-accent, var(--accent, #b08d57)); background: var(--sp-accent, var(--accent, #b08d57)); color: #fff; padding: .75rem 1.75rem; text-decoration: none;
  text-transform: uppercase; letter-spacing: .15em; font-size: .85rem; cursor: pointer; transition: filter .2s ease; }
.sp-button:hover { filter: brightness(.9); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .sp-overlay, .sp-modal { transition: none; }
}