/* ==========================================================================
   PEEPSULE THEME — brand palette + glassmorphism, loaded last so it wins the
   cascade without fighting Bootstrap/vendor !important rules. Self-contained:
   defines its own --peepsule-* tokens rather than assuming style.css's BS5
   tokens exist, since the guest/auth pages never load style.css at all.
   ========================================================================== */

:root,
[data-bs-theme="light"] {
  --peepsule-primary: #0085CC;
  --peepsule-primary-rgb: 0, 133, 204;
  --peepsule-glass-surface: rgba(255, 255, 255, 0.6);
  --peepsule-glass-surface-strong: rgba(255, 255, 255, 0.8);
  --peepsule-glass-border: rgba(255, 255, 255, 0.5);
  --peepsule-glass-blur: 18px;
  --peepsule-glass-shadow: 0 8px 32px rgba(31, 41, 55, 0.10);
  --peepsule-glow-1: rgba(0, 194, 255, 0.18);
  --peepsule-glow-2: rgba(251, 69, 213, 0.14);
}

[data-bs-theme="dark"] {
  --peepsule-primary: #00C2FF;
  --peepsule-primary-rgb: 0, 194, 255;
  --peepsule-glass-surface: rgba(17, 24, 39, 0.55);
  --peepsule-glass-surface-strong: rgba(30, 41, 59, 0.72);
  --peepsule-glass-border: rgba(255, 255, 255, 0.08);
  --peepsule-glass-blur: 18px;
  --peepsule-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 40px rgba(0, 194, 255, 0.10);
  --peepsule-glow-1: rgba(0, 194, 255, 0.16);
  --peepsule-glow-2: rgba(251, 69, 213, 0.10);
}

/* Same gradient in both themes — used for the wordmark and hero accents. */
:root {
  --peepsule-brand-gradient: linear-gradient(90deg, #F6741E 0%, #FCB934 25%, #FB45D5 55%, #7E54F6 78%, #019FF6 100%);
}

/* ==========================================================================
   1. BS5 token bridge (logged-in pages, css/style.css) — cascades into
   every BS5 component that already consumes these variables.
   ========================================================================== */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-primary: var(--peepsule-primary);
  --bs-primary-rgb: var(--peepsule-primary-rgb);
  --bs-link-color: var(--peepsule-primary);
  --bs-link-color-rgb: var(--peepsule-primary-rgb);
  --bs-link-hover-color: var(--peepsule-primary);
  --bs-body-bg: transparent;
}

/* ==========================================================================
   2. Decorative page backdrop (logged-in shell only — .peepsule-backdrop div
   added once in layouts/main.php)
   ========================================================================== */
.peepsule-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.peepsule-backdrop::before,
.peepsule-backdrop::after {
  content: "";
  position: absolute;
  width: 60vw;
  height: 60vw;
  max-width: 900px;
  max-height: 900px;
  border-radius: 50%;
  filter: blur(90px);
}
.peepsule-backdrop::before {
  top: -20vw;
  left: -15vw;
  background: var(--peepsule-glow-1);
}
.peepsule-backdrop::after {
  bottom: -25vw;
  right: -15vw;
  background: var(--peepsule-glow-2);
}
/* body's background-color already resolves to transparent via the
   --bs-body-bg override in section 1 above (style.css's own `body` rule
   consumes that exact variable) — no extra rule needed here. An earlier
   draft of this file redundantly re-set body background using
   --auth-topbar-bg, which is scoped for the auth/guest card chrome, not
   the global body; because it's unscoped it silently re-opaqued the body
   on every page and hid the backdrop blobs behind it. Removed.

/* ==========================================================================
   3. Global .card glass treatment (feed, composer, sidebar widgets, right
   sidebar cards, notification dropdown, marketplace slider card — the de
   facto widget-box class across this whole app).
   ========================================================================== */
.card:not(.auth-split-card) {
  background: var(--peepsule-glass-surface);
  -webkit-backdrop-filter: blur(var(--peepsule-glass-blur));
  backdrop-filter: blur(var(--peepsule-glass-blur));
  border: 1px solid var(--peepsule-glass-border);
  box-shadow: var(--peepsule-glass-shadow);
}

/* Post feed card + composer — same glass language, on top of the generic
   .card rule above (post_card and cr_pst_sec both already carry .card). */
.post_card,
.cr_pst_sec {
  background: var(--peepsule-glass-surface-strong) !important;
}

/* ==========================================================================
   4. Header / navbar (layouts/main.php, inline <header class="header-static">)
   ========================================================================== */
header.header-static {
  background: var(--peepsule-glass-surface-strong) !important;
  -webkit-backdrop-filter: blur(var(--peepsule-glass-blur));
  backdrop-filter: blur(var(--peepsule-glass-blur));
  border-bottom: 1px solid var(--peepsule-glass-border);
}

/* ==========================================================================
   5. Sidebar (partials/sidebar.php) + right sidebar (partials/right_sidebar.php)
   — both already define their own scoped custom properties inside inline
   <style> blocks that render AFTER this stylesheet in source order, so a
   plain re-definition would lose the cascade; !important on the variable
   itself forces these to win without duplicating their component rules.
   ========================================================================== */
.main_sidebar {
  --sidebar-surface: var(--peepsule-glass-surface) !important;
  --item-color: var(--peepsule-primary) !important;
  --sidebar-footer-link: var(--peepsule-primary) !important;
  --sidebar-border: var(--peepsule-glass-border) !important;
  --sidebar-shadow: var(--peepsule-glass-shadow) !important;
}
.right-sidebar {
  --rs-shell-start: var(--peepsule-glass-surface) !important;
  --rs-shell-end: var(--peepsule-glass-surface) !important;
  --rs-shell-border: var(--peepsule-glass-border) !important;
  --rs-card-surface: var(--peepsule-glass-surface-strong) !important;
  --rs-card-border: var(--peepsule-glass-border) !important;
  --rs-card-hover-border: rgba(var(--peepsule-primary-rgb), 0.35) !important;
  --rs-primary-soft-bg: rgba(var(--peepsule-primary-rgb), 0.09) !important;
  --rs-primary-soft-border: rgba(var(--peepsule-primary-rgb), 0.12) !important;
}

/* ==========================================================================
   6. Marketplace — pages/products/products_main.php's own .myp-* markup
   doesn't reuse .card at all; --market-card-bg/--market-border already have
   fallback defaults in that file's inline <style>, defining them here is
   picked up automatically. Direct overrides for the .myp-* classes since
   those aren't variable-driven in the source file.
   ========================================================================== */
:root {
  --market-card-bg: var(--peepsule-glass-surface-strong);
  --market-border: var(--peepsule-glass-border);
}
.myp-product-card {
  background: var(--peepsule-glass-surface-strong) !important;
  border: 1px solid var(--peepsule-glass-border) !important;
  -webkit-backdrop-filter: blur(var(--peepsule-glass-blur));
  backdrop-filter: blur(var(--peepsule-glass-blur));
}
.myp-price-pill,
.myp-type-pill {
  background: var(--peepsule-brand-gradient) !important;
  color: #fff !important;
  border: none !important;
}

/* ==========================================================================
   7. Guest/auth pages (layouts/auth.php, public.php, custom_pages.php) —
   plain Bootstrap 4, no --bs-* tokens. login.css already defines a full
   --auth-*/--input-*/--btn-primary-*/--link-* token system consumed with
   !important throughout; redefining those SAME variable names here (same
   :root,[data-bs-theme] scoping login.css itself uses) lets every existing
   rule in login.css pick up the new palette automatically.
   ========================================================================== */
:root,
[data-bs-theme="light"] {
  --input-focus-border: var(--peepsule-primary);
  --input-focus-shadow: 0 0 0 4px rgba(0, 133, 204, 0.15);
  --link-color: var(--peepsule-primary);
  --link-hover: #006ba8;
  --btn-primary-bg: var(--peepsule-brand-gradient);
  --btn-primary-shadow: 0 4px 15px rgba(0, 133, 204, 0.3);
  --auth-card-bg: var(--peepsule-glass-surface-strong);
  --auth-card-border: var(--peepsule-glass-border);
  --auth-topbar-bg: var(--peepsule-glass-surface-strong);
  --auth-footer-bg: var(--peepsule-glass-surface-strong);
}
[data-bs-theme="dark"] {
  --input-focus-border: var(--peepsule-primary);
  --input-focus-shadow: 0 0 0 4px rgba(0, 194, 255, 0.25);
  --link-color: var(--peepsule-primary);
  --link-hover: #4fd9ff;
  --btn-primary-bg: var(--peepsule-brand-gradient);
  --btn-primary-shadow: 0 4px 20px rgba(0, 194, 255, 0.4);
  --auth-card-bg: var(--peepsule-glass-surface-strong);
  --auth-card-border: var(--peepsule-glass-border);
  --auth-topbar-bg: var(--peepsule-glass-surface-strong);
  --auth-footer-bg: var(--peepsule-glass-surface-strong);
}

/* Plain BS4 class-level overrides (belt-and-suspenders for anything in
   auth/public/custom_pages markup that ISN'T already variable-driven). */
.btn-primary {
  background: var(--peepsule-brand-gradient) !important;
  border-color: transparent !important;
}
.btn-outline-primary {
  color: var(--peepsule-primary) !important;
  border-color: var(--peepsule-primary) !important;
}
.btn-outline-primary:hover {
  background: var(--peepsule-primary) !important;
  color: #fff !important;
}
.form-control:focus {
  border-color: var(--peepsule-primary) !important;
  box-shadow: 0 0 0 4px rgba(var(--peepsule-primary-rgb), 0.15) !important;
}
.text-primary {
  color: var(--peepsule-primary) !important;
}

/* ==========================================================================
   8. Wordmark — replaces the old raster <img> logo across every layout.
   Two sizes: compact for the app header/topbar, larger for auth/hero pages.
   ========================================================================== */
.peepsule-wordmark {
  display: inline-block;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  background: var(--peepsule-brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}
.peepsule-wordmark-lg {
  font-size: 2rem;
}