/* ==========================================================================
   Spoilr — Dark profile theme + gender accent (§ point 1)
   Scope: ONLY the public creator profile (.profile-page), the total paywall
   and the edit "reorder" bar. The bottom navigation (.pf-bottom-bar / .pf-tabs
   / .glass-nav / .pf-exit) is intentionally NOT touched here.

   How it works: instead of rewriting every rule, we remap the existing legacy
   design tokens (--white, --surface-*, --fg-*, --border*, --ink, --flame) to
   dark values *within the profile scope*, so the whole page flips dark using
   the rules already in profile.css. The accent (buttons, glow, ring, banner)
   is driven by the gender chosen at registration via [data-pftheme]:
   female → pink, male → blue. The user never picks the colours.
   ========================================================================== */

/* ==========================================================================
   Dark = the fixed baseline of the profile page (a LIGHT theme will be added
   later, as an opt-in switch on top of this). The dark surface tokens are
   applied unconditionally, so the page is dark regardless of accent. Female
   (pink) is the default accent; male overrides to blue.
   ========================================================================== */
.profile-page,
.paywall-total,
.reorder-bar,
.pf-bottom-bar,
.wishlist-summary-drawer {
  /* accent palette — default: female · pink */
  --pf-accent:       #FF2D8C;
  --pf-accent-2:     #FF6FB3;
  --pf-accent-3:     #FF96CB;
  --pf-accent-press: #E01E78;
  --pf-glow:      rgba(255, 45, 140, 0.45);
  --pf-glow-soft: rgba(255, 45, 140, 0.20);

  /* dark surfaces (remap → existing profile rules render dark, no per-rule edits) */
  --white:        #16131F;
  --surface-0:    #0B0A12;
  --surface-1:    #1E1B2A;
  --surface-2:    #2A2638;
  --surface-dim:  #1E1B2A;
  --border:        rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.17);
  --ring-track:    rgba(255,255,255,0.10);
  --fg-1: #F3EEF7;
  --fg-2: #B7AFC4;
  --fg-3: #8C849B;
  --ink:        var(--pf-accent);
  --ink-press:  var(--pf-accent-press);
  --flame:      var(--pf-accent);
  --flame-bg:   rgba(255,255,255,0.06);
  /* explicit text colour so elements that *inherit* (no var(--fg-1) of their
     own, e.g. .wish-card-name, .sub-info .sn) become light too */
  color: var(--fg-1);
}

/* male · blue accent override */
.profile-page[data-pftheme="male"],
.paywall-total[data-pftheme="male"],
.reorder-bar[data-pftheme="male"],
.pf-bottom-bar[data-pftheme="male"],
.wishlist-summary-drawer[data-pftheme="male"] {
  --pf-accent:       #2D8CFF;
  --pf-accent-2:     #5BA6FF;
  --pf-accent-3:     #8FC4FF;
  --pf-accent-press: #1E73E6;
  --pf-glow:      rgba(45, 140, 255, 0.45);
  --pf-glow-soft: rgba(45, 140, 255, 0.20);

  /* cold slate-blue surfaces for the male theme to completely eliminate warm purple/plum tones */
  --white:        #121A2E;
  --surface-0:    #080D1A;
  --surface-1:    #16223B;
  --surface-2:    #223354;
  --surface-dim:  #16223B;
}

/* full-page dark background while on the profile route (data-route is set by
   the router; this is the page background, not the nav) */
body[data-route="u"] { background: #0B0A12; }
body[data-route="u"]:has(.profile-page[data-pftheme="male"]) { background: #080D1A; }

/* the profile column: dark base + soft accent glow at the top */
.profile-page {
  background:
    radial-gradient(120% 55% at 50% -8%, var(--pf-glow-soft), transparent 60%),
    var(--surface-0);
}

/* Male podium card, avatar placeholders, and supporters section blue gradient overrides - eliminating all purple/pink tones */
.profile-page[data-pftheme="male"] .podium-card {
  background:
    radial-gradient(125% 80% at 50% 0%, var(--pf-glow-soft), transparent 58%),
    linear-gradient(180deg, #0B192E 0%, #061122 55%, #040A15 100%) !important;
  border-color: color-mix(in srgb, var(--pf-accent) 22%, transparent) !important;
}

.profile-page[data-pftheme="male"] .pod-av,
.profile-page[data-pftheme="male"] .you-av {
  background: radial-gradient(120% 120% at 35% 28%, #14233C 0%, #0C1628 60%, #080F1B 100%) !important;
}

.profile-page[data-pftheme="male"] .rest-av {
  background: linear-gradient(160deg, #1C3355, #102138) !important;
}

/* ---- primary CTA → accent gradient + glow ----------------------------- */
/* (Spoil me / Subscribe / Gift / Send gift / Unlock) */
[data-pftheme] .btn-primary {
  background: linear-gradient(135deg, var(--pf-accent), var(--pf-accent-2));
  color: #fff;
  box-shadow: 0 10px 26px var(--pf-glow);
}
[data-pftheme] .btn-primary:not(:disabled):hover {
  background: linear-gradient(135deg, var(--pf-accent), var(--pf-accent-3));
  box-shadow: 0 14px 34px var(--pf-glow);
  transform: translateY(-1px);
}
[data-pftheme] .btn-primary:disabled { box-shadow: none; }

/* outline buttons on dark */
[data-pftheme] .btn-outline { background: var(--surface-1); color: var(--fg-1); border-color: var(--border-strong); }
[data-pftheme] .btn-outline:hover { background: var(--surface-2); }

/* ---- header: avatar glow, banner, verified seal, name ----------------- */
.profile-page[data-pftheme] .pf2-av {
  border-color: #0B0A12;
  box-shadow: 0 0 34px var(--pf-glow);
}
.profile-page[data-pftheme] .pf2-banner .grad {
  background: linear-gradient(135deg, var(--pf-accent), var(--pf-accent-press));
}
.profile-page[data-pftheme] .pf2-seal { background: var(--pf-accent); border-color: #0B0A12; }
.profile-page[data-pftheme] .pf2-name {
  background: linear-gradient(135deg, #ffffff, var(--pf-accent-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- link-tree rows: default accent state + gentle glow ---------------- */
.profile-page[data-pftheme] .ltbtn {
  background: color-mix(in srgb, var(--pf-accent) 6%, var(--white));
  border-color: color-mix(in srgb, var(--pf-accent) 55%, var(--white));
  box-shadow: 0 0 14px var(--pf-glow-soft);
  color: var(--fg-1);
}
.profile-page[data-pftheme] .ltbtn .lt-ic {
  background: color-mix(in srgb, var(--pf-accent) 12%, var(--white));
  color: var(--pf-accent);
}
.profile-page[data-pftheme] .ltbtn:hover {
  background: color-mix(in srgb, var(--pf-accent) 12%, var(--white));
  border-color: var(--pf-accent);
  box-shadow: 0 0 20px var(--pf-glow);
  transform: translateY(-2px);
}
.profile-page[data-pftheme] .ltbtn:hover .lt-ic {
  background: var(--pf-accent);
  color: #fff;
}

/* ---- wishlist: hover glow --------------------------------------------- */
.profile-page[data-pftheme] .wish-card:hover {
  border-color: var(--pf-accent);
  box-shadow: 0 12px 30px var(--pf-glow-soft);
}

/* ---- subscriptions: featured ring glow -------------------------------- */
.profile-page[data-pftheme] .sub-card.featured {
  border-color: var(--pf-accent);
  box-shadow: 0 0 0 1px var(--pf-accent), 0 10px 30px var(--pf-glow-soft);
}

/* ---- goal ring already reads --flame (=accent); add a glow ------------ */
.profile-page[data-pftheme] .goal-ring .bar { filter: drop-shadow(0 0 6px var(--pf-glow)); }

/* ---- inputs: accent focus ring & custom tip text colors --------------- */
.profile-page[data-pftheme] .tip-custom.focus {
  border-color: var(--pf-accent);
  box-shadow: 0 0 0 3px var(--pf-glow-soft);
}
.profile-page[data-pftheme] .tip-custom.pulse-active {
  animation: pfPulseGlowInput 2s infinite ease-in-out;
}
@keyframes pfPulseGlowInput {
  0%, 100% {
    border-color: color-mix(in srgb, var(--pf-accent) 25%, var(--border-strong));
    box-shadow: 0 0 6px var(--pf-glow-soft);
  }
  50% {
    border-color: var(--pf-accent);
    box-shadow: 0 0 16px var(--pf-glow);
  }
}
.profile-page[data-pftheme] .tip-custom .cur {
  color: var(--pf-accent);
}
.profile-page[data-pftheme] .tip-custom input {
  color: var(--pf-accent);
}
.profile-page[data-pftheme] .tip-custom input::placeholder {
  color: var(--pf-accent-3);
  opacity: 0.6;
}

/* ---- total paywall on dark -------------------------------------------- */
.paywall-total[data-pftheme] { background: #0B0A12; }
.paywall-total[data-pftheme] .pw-lock .pad {
  background: var(--pf-accent); color: #fff; box-shadow: 0 0 22px var(--pf-glow);
}

/* ---- bottom navigation tab buttons: active accent & glass background ---- */
.pf-bottom-bar[data-pftheme] .pf-tabs {
  background: var(--white);
  border-color: var(--border);
}
.pf-bottom-bar[data-pftheme] .pf-tabs.glass-nav {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
.pf-bottom-bar[data-pftheme] .pf-tabs button.active {
  color: var(--pf-accent);
}
.pf-bottom-bar[data-pftheme] .pf-tabs button:not(.active):hover {
  color: var(--pf-accent-2);
}

/* ==========================================================================
   Light Theme Override (opt-in via [data-pfshade="light"])
   ========================================================================== */
.profile-page[data-pfshade="light"],
.pf-bottom-bar[data-pfshade="light"],
.wishlist-summary-drawer[data-pfshade="light"] {
  /* light surfaces (remap to existing profile rules to render them with light backgrounds) */
  --white:        #FFFFFF;   /* cards, input bg, bottom bar card */
  --surface-0:    #F5F4F8;   /* entire outermost background, very soft off-white */
  --surface-1:    #F0EDF5;   /* cards base background */
  --surface-2:    #E4DFEC;   /* nested controls or hover bg */
  --surface-dim:  #F5F4F8;
  --border:        rgba(0, 0, 0, 0.06);
  --border-strong: rgba(0, 0, 0, 0.12);
  --ring-track:    rgba(0, 0, 0, 0.08);
  --fg-1: #1B1824;           /* ultra readable headings, titles, active text */
  --fg-2: #6A6278;           /* supporting labels, text */
  --fg-3: #9E91B0;           /* inactive labels, subtle instructions */
  --flame-bg:   rgba(0, 0, 0, 0.04);
  color: var(--fg-1);
}

body[data-route="u"][data-pfshade="light"] {
  background: #F5F4F8 !important;
}

.profile-page[data-pfshade="light"] {
  background:
    radial-gradient(120% 55% at 50% -8%, var(--pf-glow-soft), transparent 60%),
    #F5F4F8 !important;
}

/* On light theme, make verified seal look clean with light borders and text */
.profile-page[data-pfshade="light"][data-pftheme] .pf2-seal {
  border-color: #F5F4F8;
}

.profile-page[data-pfshade="light"][data-pftheme] .pf2-av {
  border-color: #F5F4F8;
  box-shadow: 0 4px 20px var(--pf-glow-soft);
}

/* Username text colour for light mode */
.profile-page[data-pfshade="light"][data-pftheme] .pf2-name {
  background: transparent;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--fg-1);
}

/* Clean shadows on elements in light mode so they pop beautifully */
.profile-page[data-pfshade="light"] .ltbtn,
.profile-page[data-pfshade="light"] .sub-card,
.profile-page[data-pfshade="light"] .wish-card {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.03), 0 1px 4px rgba(0, 0, 0, 0.02);
}

/* Link-tree rows default accent states and hovers inside light mode */
.profile-page[data-pfshade="light"][data-pftheme] .ltbtn {
  background: color-mix(in srgb, var(--pf-accent) 4%, #FFFFFF);
  border-color: color-mix(in srgb, var(--pf-accent) 24%, #FFFFFF);
  color: var(--fg-1);
}
.profile-page[data-pfshade="light"][data-pftheme] .ltbtn .lt-ic {
  background: color-mix(in srgb, var(--pf-accent) 8%, #FFFFFF);
  color: var(--pf-accent);
}
.profile-page[data-pfshade="light"][data-pftheme] .ltbtn:hover {
  background: color-mix(in srgb, var(--pf-accent) 8%, #FFFFFF);
  border-color: var(--pf-accent);
  box-shadow: 0 8px 24px var(--pf-glow-soft);
}

/* Support tab bottom buttons inside light mode */
.pf-bottom-bar[data-pfshade="light"][data-pftheme] .pf-tabs {
  background: #FFFFFF !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.04), 0 4px 24px rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.06);
}

/* Support tabs glass-nav inside light mode.
   NOTE: do NOT set backdrop-filter here — leaving it unset lets the inline
   url(#glass-nav-*) liquid-glass refraction that glass-nav.js applies survive,
   so day mode matches the (correct) night mode + home nav. Overriding it with a
   plain blur is what flattened the glass in day mode. */
.pf-bottom-bar[data-pfshade="light"][data-pftheme] .pf-tabs.glass-nav {
  /* match dark mode's clear glass exactly — a heavier white veil reads as milky
     fog over the light page, so keep the same low opacity as night. The fat
     inner white glow that reads as a rim on dark turns to haze on light, so we
     drop it here and keep only a crisp top highlight + thin ring. */
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.85),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25),
    0 8px 30px rgba(28, 27, 31, 0.12),
    0 2px 8px rgba(28, 27, 31, 0.07) !important;
}

/* In the link-tree view, the lock/link icon */
.profile-page[data-pfshade="light"] .pf-link .li {
  background: var(--surface-2);
  color: var(--fg-2);
}

/* Exit button background details on light theme */
.pf-bottom-bar[data-pfshade="light"] .pf-exit-ic.glass-nav {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #ff3b30 !important;
}

/* Theme toggle button design rules */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  padding: 5px 12px;
  border-radius: var(--r-pill, 99px);
  color: var(--fg-1) !important;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
  outline: none;
}
.theme-toggle-btn:hover {
  background: var(--surface-2);
  border-color: var(--pf-accent);
  transform: translateY(-1px);
}
.theme-toggle-btn:active {
  transform: translateY(0);
}

/* Light mode overrides for the community board podium and supporter sections */
.profile-page[data-pfshade="light"] .podium-card {
  background: 
    radial-gradient(125% 82% at 50% 0%, color-mix(in srgb, var(--pf-accent, #FF2D8C) 8%, transparent), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #FAF9FB 55%, #F0ECF4 100%) !important;
  border: 1px solid color-mix(in srgb, var(--pf-accent, #FF2D8C) 15%, var(--border-strong)) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

.profile-page[data-pfshade="light"] .pod-name {
  color: var(--fg-1) !important;
}

.profile-page[data-pfshade="light"] .you-name {
  color: var(--fg-1) !important;
}

.profile-page[data-pfshade="light"] .topsup-head h2 {
  background: linear-gradient(135deg, var(--fg-1), var(--pf-accent, #FF2D8C)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.profile-page[data-pfshade="light"] .topsup-tab.on {
  background: var(--white) !important;
  color: var(--fg-1) !important;
  border-color: var(--border-strong) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.profile-page[data-pfshade="light"] .topsup-you {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pf-accent, #FF2D8C) 10%, var(--white)), var(--white)) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
  animation: youPulseLight 2.6s ease-in-out infinite !important;
}

@keyframes youPulseLight {
  0%, 100% { 
    box-shadow: 0 0 0 0 var(--pf-glow-soft), 0 4px 12px rgba(0,0,0,0.03); 
    border-color: color-mix(in srgb, var(--pf-accent, #FF2D8C) 40%, transparent); 
  }
  50% { 
    box-shadow: 0 0 14px 1px var(--pf-glow-soft), 0 4px 12px rgba(0,0,0,0.03); 
    border-color: var(--pf-accent, #FF2D8C); 
  }
}

/* Premium image rendering overrides to ensure pristine quality on all devices */
.ph-img,
.wish-photo-preview,
.pf2-av,
.pf-banner,
.pf2-banner,
.modal-avatar-preview-inner {
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: auto !important;
  image-smoothing: true !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}