/* ================================================================
   ANXIETYMANAGEMENTTEST.COM — Custom Styles
   1. Parchment Background (RicePurityTest.com style)
   2. Result Share Card — Premium Redesign
   ================================================================ */

/* ══════════════════════════════════════════════════════════════════
   1. PARCHMENT BACKGROUND — warm #E6DCC0 + wellness watermark
   ══════════════════════════════════════════════════════════════════ */

/* Override CSS variable so bg-background elements go transparent */
:root {
  --background: 110 12% 74% !important;
}

/* Body: solid sage green */
body {
  background-color: #BCC6B5 !important;
  min-height: 100vh;
}

/* Wellness watermark — repeating SVG tile at 5% opacity */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/pattern.svg');
  background-repeat: repeat;
  background-size: 500px 500px;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

/* Root sits above the watermark */
#root {
  position: relative;
  z-index: 1;
}

/* Page wrapper: transparent so parchment shows through */
.bg-background,
.min-h-screen.bg-background,
.min-h-screen.flex.flex-col.bg-background {
  background: transparent !important;
}

/* ── Header ───────────────────────────────────────────────────── */
header.sticky,
header.w-full.border-b,
header.w-full.border-b.bg-white {
  background: rgba(172, 186, 164, 0.96) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-bottom-color: rgba(80, 100, 72, 0.20) !important;
}

/* ── Footer ───────────────────────────────────────────────────── */
footer.w-full,
.bg-muted\/40 {
  background: rgba(162, 178, 154, 0.65) !important;
  border-top-color: rgba(80, 100, 72, 0.15) !important;
}

/* ── Cards: white with sage shadow ────────────────────────────── */
div.rounded-xl.border,
div.rounded-2xl.border,
div.rounded-3xl.border {
  background: #FFFFFF !important;
  border-color: rgba(80, 100, 72, 0.12) !important;
  box-shadow:
    0 1px 3px rgba(50, 70, 44, 0.07),
    0 4px 18px rgba(50, 70, 44, 0.10) !important;
  backdrop-filter: none !important;
}

/* Score/result section — strong white */
div.rounded-3xl.overflow-hidden {
  background: #FFFFFF !important;
}

/* ══════════════════════════════════════════════════════════════════
   2. RESULT SHARE CARD — Premium Redesign
   ══════════════════════════════════════════════════════════════════ */

/* ── Hide duplicate "AnxietyManagementTest.com" text ─────────── */
.px-6.pt-7.pb-6.text-white .z-10 > p:last-child {
  display: none !important;
}

/* ── Outer card — premium elevation ──────────────────────────── */
.rounded-3xl.overflow-hidden.border.shadow-md {
  border: none !important;
  border-radius: 28px !important;
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.06),
    0 8px 20px rgba(0,0,0,0.12),
    0 24px 60px rgba(0,0,0,0.18) !important;
}

/* ── Gradient header — richer, taller ────────────────────────── */
.px-6.pt-7.pb-6.text-white {
  padding: 40px 32px 36px !important;
  position: relative !important;
}

/* Depth overlay */
.px-6.pt-7.pb-6.text-white::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 30%,
    rgba(0,0,0,0.16) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* ── Dot pattern ─────────────────────────────────────────────── */
.px-6.pt-7.pb-6.text-white > .absolute.inset-0 {
  opacity: 0.14 !important;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.9) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.5) 1px, transparent 1px) !important;
  background-size: 22px 22px, 11px 11px !important;
  background-position: 0 0, 11px 11px !important;
}

/* ── Logo ────────────────────────────────────────────────────── */
.px-6.pt-7.pb-6.text-white .flex.items-center.justify-center.gap-2 {
  margin-bottom: 20px !important;
  position: relative;
  z-index: 2;
}
.px-6.pt-7.pb-6.text-white .flex.items-center.justify-center.gap-2 img {
  height: 18px !important;
  width: auto !important;
  opacity: 0.92 !important;
  filter: brightness(0) invert(1) !important;
}

/* ── Score circle ────────────────────────────────────────────── */
.px-6.pt-7.pb-6.text-white .w-24.h-24 {
  width: 130px !important;
  height: 130px !important;
  background: rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 2.5px solid rgba(255,255,255,0.55) !important;
  border-radius: 50% !important;
  margin-bottom: 20px !important;
  position: relative !important;
  z-index: 2 !important;
  box-shadow:
    0 0 0 10px rgba(255,255,255,0.10),
    0 0 0 20px rgba(255,255,255,0.05),
    inset 0 2px 8px rgba(255,255,255,0.30),
    0 10px 30px rgba(0,0,0,0.20) !important;
}

/* Score number */
.px-6.pt-7.pb-6.text-white .w-24.h-24 .text-3xl {
  font-size: 3rem !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.2) !important;
}

/* /100 sub-label */
.px-6.pt-7.pb-6.text-white .w-24.h-24 .text-xs {
  font-size: 0.7rem !important;
  opacity: 0.8 !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
}

/* ── Content above depth overlay ─────────────────────────────── */
.px-6.pt-7.pb-6.text-white .z-10 {
  position: relative;
  z-index: 2 !important;
}

/* ── Test name label ──────────────────────────────────────────── */
.px-6.pt-7.pb-6.text-white .tracking-widest {
  letter-spacing: 0.22em !important;
  font-size: 0.6rem !important;
  opacity: 1 !important;
  color: rgba(255,255,255,0.9) !important;
  margin-bottom: 8px !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.15) !important;
}

/* ── Severity heading ─────────────────────────────────────────── */
.px-6.pt-7.pb-6.text-white h3 {
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
  text-shadow: 0 2px 16px rgba(0,0,0,0.25) !important;
  margin-bottom: 0 !important;
}

/* ── Share buttons section ────────────────────────────────────── */
.bg-white.px-4.py-4 {
  padding: 20px 20px 24px !important;
  background: rgba(255,255,255,0.97) !important;
  border-top: 1px solid rgba(0,0,0,0.06) !important;
}

.bg-white.px-4.py-4 > p:first-child {
  font-size: 0.65rem !important;
  letter-spacing: 0.15em !important;
  color: #94a3b8 !important;
  margin-bottom: 14px !important;
}

.bg-white.px-4.py-4 a,
.bg-white.px-4.py-4 button {
  height: 46px !important;
  border-radius: 14px !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.bg-white.px-4.py-4 a:hover,
.bg-white.px-4.py-4 button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
}

.bg-white.px-4.py-4 a:active,
.bg-white.px-4.py-4 button:active {
  transform: translateY(0) scale(0.98) !important;
}

/* ── Card entrance animation ──────────────────────────────────── */
@keyframes cardEntrance {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.rounded-3xl.overflow-hidden.border.shadow-md {
  animation: cardEntrance 0.5s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}