/* ==========================================================================
   Overlays — Modal, Toast, Loading screen, Splash screen
   ========================================================================== */

/* ---- Modal ---- */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(8, 6, 20, 0.55);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), backdrop-filter var(--dur-slow) var(--ease-out);
}
[data-theme="light"] .modal-backdrop { background: rgba(60, 48, 20, 0.28); }
.modal-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

@media (min-width: 640px) {
  .modal-backdrop { align-items: center; }
}

.modal-sheet {
  width: 100%;
  max-width: var(--app-max-width);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--gradient-card), var(--glass-fill-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
  transform: translateY(40px);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease-spring), opacity var(--dur-base) var(--ease-out);
  padding-bottom: calc(var(--space-5) + var(--safe-bottom));
}
.modal-backdrop.visible .modal-sheet { transform: translateY(0); opacity: 1; }

@media (min-width: 640px) {
  .modal-sheet { border-radius: var(--radius-lg); transform: scale(0.92) translateY(8px); }
  .modal-backdrop.visible .modal-sheet { transform: scale(1) translateY(0); }
}

.modal-grabber {
  width: 40px; height: 4px;
  background: var(--glass-border);
  border-radius: var(--radius-pill);
  margin: 0 auto var(--space-4);
}
@media (min-width: 640px) { .modal-grabber { display: none; } }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.modal-header h2 { margin: 0; font-size: var(--fs-lg); }
.modal-close {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  color: var(--color-text-muted);
  cursor: pointer;
}
.modal-body { color: var(--color-text-muted); }
.modal-footer {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.modal-footer .btn { width: auto; flex: 1; }

/* ---- Toast notifications (stackable, top of screen) ---- */
.toast-stack {
  position: fixed;
  top: calc(var(--space-4) + var(--safe-top));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - var(--space-6));
  max-width: calc(var(--app-max-width) - var(--space-4));
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 300;
  pointer-events: none;
}
.toast-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  background: var(--glass-fill-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  animation: pop-in var(--dur-base) var(--ease-spring) both;
  pointer-events: auto;
}
.toast-item .material-symbols-rounded { font-size: 20px; margin-top: 1px; }
.toast-item.toast-success .material-symbols-rounded { color: var(--color-teal); }
.toast-item.toast-error .material-symbols-rounded { color: var(--color-coral); }
.toast-item.toast-info .material-symbols-rounded { color: var(--color-gold); }
.toast-item.toast-leaving { animation: toast-out var(--dur-base) var(--ease-out) forwards; }
@keyframes toast-out {
  to { opacity: 0; transform: translateY(-10px) scale(0.96); }
}

/* ---- Global loading overlay (in-page async actions) ---- */
.loading-overlay {
  position: fixed; inset: 0;
  background: rgba(8, 6, 20, 0.45);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.loading-overlay.visible { opacity: 1; pointer-events: auto; }
.loading-spinner {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 4px solid rgba(242, 183, 5, 0.25);
  border-top-color: var(--color-gold);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Small inline spinner (e.g. inside a button while submitting) */
.spinner-inline {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2.5px solid rgba(0,0,0,0.25);
  border-top-color: currentColor;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}

/* ---- Splash screen (PWA boot moment) ---- */
.splash-screen {
  position: fixed; inset: 0;
  background: var(--gradient-app-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: opacity var(--dur-slow) var(--ease-out), visibility var(--dur-slow);
}
.splash-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-screen .splash-logo {
  width: 88px; height: 88px;
  border-radius: var(--radius-lg);
  background: var(--gradient-gold);
  display: grid; place-items: center;
  box-shadow: 0 16px 40px rgba(242, 183, 5, 0.3);
  animation: pop-in var(--dur-slow) var(--ease-spring) both;
}
.splash-screen .splash-logo .material-symbols-rounded { font-size: 46px; color: #241300; }
.splash-screen h1 {
  margin-top: var(--space-4);
  font-size: var(--fs-lg);
  animation: rise var(--dur-slow) var(--ease-out) 120ms both;
}
.splash-screen .splash-dots { display: flex; gap: 6px; margin-top: var(--space-5); }
.splash-screen .splash-dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-gold);
  animation: dot-bounce 1.1s ease-in-out infinite;
}
.splash-screen .splash-dots span:nth-child(2) { animation-delay: 0.15s; }
.splash-screen .splash-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40% { transform: translateY(-8px); opacity: 1; }
}