/* ═══════════════════════════════════════════════════════════════════════════
   theme-depth.css — additive polish applied on top of each page's base
   styles. Adds contemporary depth (layered shadows, glass nav, gradient
   accents, hover micro-motion) without changing color palette or layout.
   Every page that uses the existing --accent / --success / etc. variable
   system will pick these up automatically.

   Designed to be *additive*: rules are scoped to existing class names used
   across public pages. Pages that don't use a class silently ignore the
   rule. Admin panel intentionally does NOT import this — data-dense UIs
   should stay flat.

   Extend cautiously. This file is loaded on 7+ pages; a change here is a
   change everywhere.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Layered shadow tokens. Two-layer shadows give depth without looking
     heavy. Each step up bumps only the outer diffuse layer. */
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 1px 1px rgba(15,23,42,0.03);
  --shadow:    0 4px 14px -4px rgba(15,23,42,0.08), 0 2px 6px -2px rgba(15,23,42,0.05);
  --shadow-lg: 0 18px 40px -18px rgba(15,23,42,0.18), 0 4px 12px -4px rgba(15,23,42,0.08);
  --shadow-accent: 0 10px 30px -10px rgba(37,99,235,0.45), 0 2px 6px -2px rgba(37,99,235,0.22);
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Base page tint — paints a very subtle two-spot gradient mesh in the
   existing accent color. Skipped on body.no-mesh if a page opts out. */
body:not(.no-mesh):not(.theme-flat) {
  background-image:
    radial-gradient(60rem 40rem at 10% -5%, rgba(37,99,235,0.06) 0%, transparent 55%),
    radial-gradient(55rem 40rem at 95% 100%, rgba(37,99,235,0.045) 0%, transparent 60%);
  background-attachment: fixed;
}

/* ─── Glass top nav — any <nav class="nav"> picks this up ─── */
.nav {
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-bottom: 1px solid rgba(216,220,229,0.6) !important;
}

/* ─── Logo + branded squares (login gate, checkout card, legal pages) ─── */
.nav-logo,
.card > .logo,
.card .logo,
.wrap > .card .logo {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  box-shadow: var(--shadow-accent);
  transition: transform 0.25s var(--ease-out);
}
.nav-logo:hover { transform: rotate(-3deg) scale(1.05); }

/* ─── Primary buttons — any .btn-primary or .cta ─── */
.btn-primary,
.cta,
button.cta,
.pw-btn-save,
button[type="submit"].submit {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%) !important;
  box-shadow: var(--shadow-accent);
  transition: transform 0.18s var(--ease-out), box-shadow 0.25s ease, filter 0.2s;
}
.btn-primary:hover:not(:disabled),
.cta:hover:not(:disabled),
.pw-btn-save:hover:not(:disabled),
button[type="submit"].submit:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -12px rgba(37,99,235,0.55), 0 4px 10px -2px rgba(37,99,235,0.3);
}
.btn-primary:active, .cta:active { transform: translateY(0); }

/* ─── Secondary / ghost button hover polish ─── */
.btn-secondary { backdrop-filter: blur(8px); transition: transform 0.18s var(--ease-out), box-shadow 0.25s ease, border-color 0.2s, color 0.2s; }
.btn-secondary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow); }

/* ─── Card depth — generic cards across pages ─── */
.card,
.feature-card,
.diag-card,
.faq-card,
.plan-card,
.panel {
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s var(--ease-out), box-shadow 0.25s ease, border-color 0.25s ease;
}
.feature-card:hover,
.diag-card:hover,
.faq-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: rgba(37,99,235,0.2);
}
.plan-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

/* ─── Featured plan card — gradient border instead of solid 2px ─── */
.plan-card.featured {
  border: 1px solid transparent !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #2563eb 0%, #60a5fa 100%) border-box !important;
  box-shadow: 0 20px 45px -20px rgba(37,99,235,0.35), 0 4px 12px -4px rgba(37,99,235,0.15);
}
.plan-card.featured:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 55px -20px rgba(37,99,235,0.45), 0 6px 16px -4px rgba(37,99,235,0.2);
}
.plan-badge-top {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%) !important;
  box-shadow: var(--shadow-accent);
  border-radius: 999px !important;
}

/* ─── Auth / utility cards (reset.html, verify.html pattern) ─── */
.wrap > .card,
body > .card,
.card {
  box-shadow: var(--shadow-lg);
}

/* ─── Reduce-motion users don't get the transitions ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}