/* =============================================================================
   SPA-SPECIFIC STYLES
   =============================================================================
   Skeleton UI, page stubs, app shell, transitions.
   ============================================================================= */

/* ── App Shell ───────────────────────────────────────────────────────── */

#app {
  min-height: 100vh;
  position: relative;
}

.spa-page-container {
  min-height: 100vh;
  padding-bottom: 100px; /* Space for floating nav */
  position: relative;
}

/* ── Stub Page Styles ─────────────────────────────────────────────── */

.spa-page {
  padding: var(--space-3) var(--space-2);  /* 12px 8px — close to original 10px */
  max-width: 500px;
  margin: 0 auto;
}

.spa-stub-header {
  text-align: center;
  padding: var(--space-6) 0 var(--space-4);
}

.spa-stub-header h1 {
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}

.spa-stub-content {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius-l);
  background: var(--color-bg-card);
}

.spa-stub-content p {
  margin: var(--space-2) 0;
}

/* ── Error State ─────────────────────────────────────────────────── */

.spa-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-secondary);
}

.spa-error p {
  margin-bottom: var(--space-4);
  font-size: var(--text-md);
}

.spa-error button {
  padding: var(--space-3) var(--space-5);
  border: none;
  border-radius: var(--radius-m);
  background: var(--color-accent);
  color: #fff;
  font-size: var(--text-md);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.spa-error button:active {
  opacity: 0.7;
}

/* ── Preloader ───────────────────────────────────────────────────── */

.preloader-hiding {
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.spa-preloader-bar {
  width: 0;
  transition: width 1.2s ease;
}

/* ── Skeleton UI ─────────────────────────────────────────────────── */

.skeleton-page {
  padding: var(--space-5) var(--space-4);
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.skeleton-block {
  background: var(--color-bg-card);
  border-radius: var(--radius-s);
  position: relative;
  overflow: hidden;
}

.skeleton-block::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 40%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.06) 60%,
    transparent 100%
  );
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

[data-theme="light"] .skeleton-block::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.04) 40%,
    rgba(0, 0, 0, 0.06) 50%,
    rgba(0, 0, 0, 0.04) 60%,
    transparent 100%
  );
}

.skeleton-circle {
  border-radius: 50%;
}

.skeleton-rounded {
  border-radius: var(--radius-m);
}

.skeleton-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.skeleton-header-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.skeleton-tabs {
  display: flex;
  gap: var(--space-2);
}

.skeleton-gifts-row {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
}

.skeleton-profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

@keyframes skeleton-shimmer {
  0%   { left: -100%; }
  100% { left: 100%; }
}

/* ── Page Transitions ────────────────────────────────────────────── */

.spa-page-container > * {
  animation: spa-fade-in 0.2s ease;
}

@keyframes spa-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}