/* ==================================================================
   PLAYBOOKI — Creator profile / "My Page" redesign  (Phase 5)
   Loaded ONLY on resources/views/users/profile.blade.php.

   Every rule is scoped to profile-only wrappers added in that view:
     .pb-profile-cover      cover / banner jumbotron
     .pb-profile-page       header container (avatar, name, buttons, tabs)
     .pb-profile-hero       avatar + identity block
     .pb-profile-actions    action button row
     .pb-profile-content    about-me sidebar + posts grid container
     .nav-profile           profile tab strip

   These wrappers do NOT exist on the home feed, explore, settings,
   homepage, auth, or modals, so none of those surfaces are affected
   even though some post partials (includes.updates) are shared.

   Applies to BOTH logged-in creators and logged-out public visitors
   (not gated on body.pb-authenticated) because public creator
   profiles are part of this phase. No global resets.
   Accent: Playbooki green #00C800.
   ================================================================== */

/* ---------- Page atmosphere: near-black + subtle green glow ---------- */
body:has(.pb-profile-cover) {
  background-color: #030303 !important;
  background-image:
    radial-gradient(70% 60% at 18% 12%, rgba(0, 200, 0, .10), rgba(0, 200, 0, 0) 60%),
    radial-gradient(60% 55% at 86% 90%, rgba(0, 200, 0, .06), rgba(0, 200, 0, 0) 60%),
    linear-gradient(180deg, #040504 0%, #050605 55%, #030303 100%) !important;
  background-attachment: fixed, fixed, fixed !important;
  background-repeat: no-repeat !important;
}

/* ---------- Cover / banner: premium rounded card with green edge ---------- */
.pb-profile-cover {
  border-radius: 0 0 28px 28px !important;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 200, 0, .16);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .60);
}
/* soft dark vignette at the bottom of the cover so the avatar reads cleanly */
.pb-profile-cover::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 5, 4, 0) 0%, rgba(3, 5, 4, .55) 100%);
}
.pb-profile-cover .btn-cover-upload {
  position: relative;
  z-index: 2;
  background: rgba(8, 14, 10, .55) !important;
  border: 1px solid rgba(88, 255, 72, .20) !important;
  color: #f0f0f0 !important;
  border-radius: 12px !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  transition: color .2s ease, border-color .2s ease;
}
.pb-profile-cover .btn-cover-upload:hover {
  color: #00C800 !important;
  border-color: rgba(0, 200, 0, .45) !important;
}

/* ---------- Avatar: integrated green ring + glow ---------- */
.pb-profile-hero .avatar-wrap,
.pb-profile-hero .avatar-wrap-live {
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(0, 200, 0, .50), 0 14px 34px rgba(0, 0, 0, .55);
}
.pb-profile-hero .avatarUser {
  border: 4px solid #050605 !important;
  background: #0c0f0d;
}
.pb-profile-hero .button-avatar-upload {
  background: rgba(0, 200, 0, .90) !important;
  color: #05140a !important;
  border: 2px solid #050605 !important;
}

/* ---------- Identity: name, verified + featured badges, meta ---------- */
.pb-profile-hero .media-body h4 {
  color: #ffffff;
  font-weight: 800;
  letter-spacing: .2px;
}
.pb-profile-hero small.verified i { color: #00C800 !important; }
.pb-profile-hero small.text-featured i { color: #ffce3a !important; }
.pb-profile-hero .media-body p,
.pb-profile-hero .media-body small,
.pb-profile-hero .media-body .text-muted { color: #9aa0a0 !important; }

/* ---------- Action buttons ---------- */
.pb-profile-actions .btn-profile {
  border-radius: 12px !important;
  font-weight: 700 !important;
  padding: .55rem 1.15rem !important;
  transition: filter .15s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
/* Primary = Playbooki green (subscribe / edit) */
.pb-profile-actions .btn-primary.btn-profile {
  background: #00C800 !important;
  border: none !important;
  color: #05140a !important;
  box-shadow: 0 8px 24px rgba(0, 200, 0, .22) !important;
}
.pb-profile-actions .btn-primary.btn-profile:hover { filter: brightness(1.08); }
/* Subscribed = tinted green outline */
.pb-profile-actions .btn-success.btn-profile {
  background: rgba(0, 200, 0, .15) !important;
  border: 1px solid rgba(0, 200, 0, .42) !important;
  color: #d7ffd7 !important;
  box-shadow: none !important;
}
/* Secondary = dark glass (tip / gifts / message / share) */
.pb-profile-actions .btn-google.btn-profile,
.pb-profile-actions .btn-light.btn-profile {
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  color: #eaeaea !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.pb-profile-actions .btn-google.btn-profile:hover,
.pb-profile-actions .btn-light.btn-profile:hover {
  color: #00C800 !important;
  border-color: rgba(0, 200, 0, .40) !important;
  background: rgba(0, 200, 0, .08) !important;
}
/* Confirm-payment stays clearly a warning */
.pb-profile-actions .btn-warning.btn-profile {
  border-radius: 12px !important;
  font-weight: 700 !important;
}

/* ---------- Tabs: glass pills with green active state ---------- */
.nav-profile { border-bottom: 1px solid rgba(255, 255, 255, .06); padding-bottom: 6px; }
.nav-profile .nav-link {
  color: #8a8f8d !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  border: 1px solid transparent !important;
  margin: 0 3px;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.nav-profile .nav-link small { color: inherit !important; }
.nav-profile .nav-link a { color: inherit !important; }
.nav-profile .nav-link:hover {
  color: #f0f0f0 !important;
  background: rgba(0, 200, 0, .07) !important;
}
.nav-profile .nav-link.active {
  color: #ffffff !important;
  background: rgba(0, 200, 0, .14) !important;
  border-color: rgba(0, 200, 0, .30) !important;
}
.nav-profile .nav-link.active small { color: #00C800 !important; }

/* ---------- About-me / sidebar card (refine the global dark glass) ---------- */
.pb-profile-content .col-lg-4 .card {
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 18px !important;
  background: rgba(12, 14, 13, .55) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
}
.pb-profile-content .col-lg-4 .card .card-title {
  color: #ffffff !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-size: .82rem;
}
.pb-profile-content .col-lg-4 .card .card-text,
.pb-profile-content .col-lg-4 .card small,
.pb-profile-content .col-lg-4 .card .text-muted { color: #b6bbb9 !important; }
.pb-profile-content .col-lg-4 .card .truncated { color: #d8dcda !important; }
.pb-profile-content .col-lg-4 a:hover { color: #00C800 !important; }
.pb-profile-content .btn-arrow-expand {
  border-radius: 12px !important;
  border-color: rgba(0, 200, 0, .35) !important;
  color: #d7ffd7 !important;
}

/* ---------- Posts grid: keep cards consistent dark glass ---------- */
.pb-profile-content .wrap-post .card {
  border-radius: 18px !important;
}

/* ---------- Filter (Latest / Oldest …) select ---------- */
.pb-profile-content #filter.custom-select {
  background-color: rgba(0, 0, 0, .45) !important;
  color: #eaeaea !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 12px !important;
}
.pb-profile-content #filter.custom-select:focus {
  border-color: rgba(0, 200, 0, .45) !important;
  box-shadow: 0 0 0 .15rem rgba(0, 200, 0, .15) !important;
}

/* ---------- Locked content placeholder ----------
   PHASE 23B: this is the SAME shared block as the feed / explore / post
   detail (resources/views/includes/updates.blade.php `.content-locked`).
   The profile page is the only post surface that does NOT load
   playbooki-redesign.css, so the Playbooki 2.0 locked panel defined in
   that file's "PHASE 23B" section is mirrored here, selector-for-selector,
   to keep the locked state identical everywhere.
   ---- Keep the two in sync when either is edited. ----
   Presentation only: no paywall condition, price or PPV hook is touched. */
/* PHASE 23C root layout fix — see the matching comment in
   playbooki-redesign.css. `.card` is a flex column and the panel carried
   Bootstrap's `.btn-block { width:100% }`, so width:100% + side margins
   overflowed the card's right edge and read as an off-centre panel.
   Drop the 100% width and let flex stretch do the sizing. */
.pb-profile-content .content-locked {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;

  width: auto !important;
  max-width: none !important;
  align-self: stretch;
  flex: 0 0 auto;

  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;

  margin: 2px 14px 14px !important;
  padding: 30px 20px 26px !important;
  background-color: rgba(6, 11, 8, .88) !important;
  color: #e9efe9 !important;
  border: 1px solid rgba(0, 200, 0, .13) !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 14px 34px rgba(0, 0, 0, .34),
    0 0 18px rgba(0, 200, 0, .035) !important;
  background-size: cover;
  background-position: center;
}

.pb-profile-content .content-locked::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(0, 200, 0, .085), rgba(0, 200, 0, 0) 58%),
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, .014) 0px,
      rgba(255, 255, 255, .014) 1px,
      rgba(255, 255, 255, 0) 1px,
      rgba(255, 255, 255, 0) 14px
    );
}

/* Locked MEDIA posts carry a blurred teaser as an inline background —
   keep it, but veil it so the lock, copy and CTA stay readable. */
.pb-profile-content .content-locked[style*="url"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 8, 5, .58) 0%, rgba(3, 8, 5, .80) 100%);
}

.pb-profile-content .content-locked > * {
  position: relative;
  z-index: 1;
  width: auto !important;      /* neutralise .btn-block / .w-100 children */
  max-width: 100%;
  margin: 0 !important;        /* spacing comes from the panel's gap */
  flex: 0 0 auto;
}

.pb-profile-content .content-locked > .pb-locked-icon,
.pb-profile-content .content-locked > span.btn-block:first-of-type {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 58px !important;
  height: 58px;
  border-radius: 50%;
  background: rgba(0, 200, 0, .075);
  border: 1px solid rgba(0, 200, 0, .26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 0 0 7px rgba(0, 200, 0, .032),
    0 0 18px rgba(0, 200, 0, .12);
}

/* styles.css sizes .ico-no-result as its own 150x150 bordered circle with
   line-height:150px !important — collapse it back to a plain glyph. */
.pb-profile-content .content-locked .ico-no-result {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  font-size: 26px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #00C800 !important;
  opacity: 1 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}

.pb-profile-content .content-locked .pb-locked-title {
  margin: 2px 0 0 !important;
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: .045em;
  text-transform: uppercase;
  text-align: center;
  color: #ffffff !important;
  text-shadow: 0 1px 12px rgba(0, 200, 0, .14);
}

.pb-profile-content .content-locked .pb-locked-sub {
  max-width: 290px;
  margin: -4px 0 2px !important;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  color: #b7c0b9 !important;
}

/* CTA: a real action button, content-sized (was a 300px green slab). */
.pb-profile-content .content-locked .btn-primary {
  position: relative;
  overflow: hidden;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto !important;
  min-width: 168px;
  max-width: 100% !important;
  margin: 4px 0 0 !important;
  padding: 11px 26px !important;
  background: linear-gradient(180deg, #12de12 0%, #00C800 100%) !important;
  border: none !important;
  border-radius: 999px !important;
  color: #05140a !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  line-height: 1.2 !important;
  letter-spacing: .015em;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 6px 18px rgba(0, 200, 0, .22);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.pb-profile-content .content-locked .btn-primary i {
  font-size: 14px;
  line-height: 1;
}

.pb-profile-content .content-locked .btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .42) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-18deg);
  opacity: 0;
}

.pb-profile-content .content-locked .btn-primary:hover:not(.disabled) {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    0 10px 24px rgba(0, 200, 0, .30);
}

.pb-profile-content .content-locked .btn-primary:hover:not(.disabled)::after {
  opacity: 1;
  animation: pbLockedSheenProfile .75s ease-out;
}

@keyframes pbLockedSheenProfile {
  from { left: -60%; }
  to   { left: 115%; }
}

@media (prefers-reduced-motion: reduce) {
  .pb-profile-content .content-locked .btn-primary,
  .pb-profile-content .content-locked .btn-primary::after {
    transition: none;
    animation: none !important;
  }
  .pb-profile-content .content-locked .btn-primary:hover:not(.disabled) { transform: none; }
}

.pb-profile-content .content-locked .btn-primary:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.pb-profile-content .content-locked .btn-primary.disabled {
  background: rgba(255, 255, 255, .06) !important;
  color: #b7c0b9 !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: none;
  cursor: not-allowed;
}

.pb-profile-content .content-locked .btn-primary.disabled::after { display: none; }

.pb-profile-content .content-locked .list-inline {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 2px 0 0 !important;
  padding: 0;
  list-style: none;
}

.pb-profile-content .content-locked .list-inline-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 !important;
  padding: 3px 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 999px;
  color: #9aa39c !important;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.6;
}

.pb-profile-content .content-locked .list-inline-item i,
.pb-profile-content .content-locked .list-inline-item svg {
  color: #00C800;
  opacity: .85;
  font-size: 11px;
}

.pb-profile-content .content-locked.text-white .pb-locked-sub { color: #b7c0b9 !important; }
.pb-profile-content .content-locked.text-white .list-inline-item { color: #9aa39c !important; }

@media (max-width: 575.98px) {
  .pb-profile-content .content-locked {
    margin: 2px 10px 10px !important;
    padding: 26px 14px 22px !important;
    border-radius: 16px !important;
    gap: 10px;
  }
  .pb-profile-content .content-locked > .pb-locked-icon,
  .pb-profile-content .content-locked > span.btn-block:first-of-type {
    width: 52px !important;
    height: 52px;
  }
  .pb-profile-content .content-locked .ico-no-result { font-size: 23px !important; }
  .pb-profile-content .content-locked .pb-locked-title { font-size: 19px; }
  .pb-profile-content .content-locked .pb-locked-sub { font-size: 12.5px; max-width: 250px; }
  .pb-profile-content .content-locked .btn-primary {
    min-width: 0;
    max-width: 100% !important;
    padding: 10px 22px !important;
    font-size: 13px !important;
    white-space: normal;
  }
}

/* ---------- Empty states: polished, on-brand ---------- */
.pb-profile-content .no-updates .ico-no-result { color: rgba(0, 200, 0, .55) !important; }
.pb-profile-content .no-updates h4 { color: #cfd4d2 !important; }

/* ==================================================================
   PHASE 5 — REFINEMENT PASS
   (1) logged-out header layering  (2) legal/footer widget
   (3) About widget premium glass panel
   ================================================================== */

/* ---------- (1) Keep the LOGGED-OUT (public) header above content ----------
   Global playbooki.css applies `body > * { position:relative; z-index:1 }`,
   which turns the <header> into a stacking context pinned at z-index 1; the
   fixed nav inside it (z-index 99990) is therefore trapped, and later body
   children (the profile cover, hero and posts) paint on top of it while
   scrolling. We raise the header's stacking context above the profile
   content but keep it below modals (logged-out modals sit at z-index 1050),
   so login / subscribe / tip modals still cover the nav.
   Scoped to logged-out only (:not(.pb-authenticated)); this stylesheet is
   loaded only on the profile page, so the feed/home/settings are untouched.
   The logged-in header keeps its own z-index:1200 system from app.blade.php. */
body:not(.pb-authenticated) > header {
  z-index: 1000 !important;
  isolation: isolate;
  pointer-events: none;            /* header box is 0-height; don't eat clicks */
}
body:not(.pb-authenticated) > header nav.playbooki-nav {
  pointer-events: auto !important; /* nav + its dropdowns stay fully clickable */
}

/* ---------- (3) About widget — premium Playbooki glass panel ----------
   Matches the design language of playbooki-redesign.css
   (--pb-glass-bg rgba(14,14,14,.52), blur(22px), green accents) using
   literal values because that file's :root is not loaded on this page. */
.pb-profile-content .col-lg-4 .card.rounded-large {
  position: relative;
  background: rgba(14, 14, 14, .52) !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  border-top: 1px solid rgba(0, 200, 0, .22) !important;
  border-radius: 18px !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .055),
    0 8px 32px rgba(0, 0, 0, .45),
    0 0 30px rgba(0, 200, 0, .05) !important;
  overflow: hidden;
}
.pb-profile-content .col-lg-4 .card.rounded-large .card-body { padding: 1.15rem 1.25rem; }

/* Title: clear hierarchy + green accent underline */
.pb-profile-content .col-lg-4 .card.rounded-large .card-title {
  display: inline-block;
  color: #ffffff !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .7px;
  font-size: .82rem;
  margin-bottom: .85rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid rgba(0, 200, 0, .55);
}

/* Stat row (likes / subscribers) + meta rows */
.pb-profile-content .col-lg-4 .card.rounded-large .card-text { margin-bottom: 0; }
.pb-profile-content .col-lg-4 .card.rounded-large .card-text > .btn-block { margin-bottom: .55rem; }
.pb-profile-content .col-lg-4 .card.rounded-large small { color: #b6bbb9 !important; line-height: 1.7; }
.pb-profile-content .col-lg-4 .card.rounded-large small i { color: rgba(0, 200, 0, .80) !important; }

/* Bio / story text: readable, with breathing room */
.pb-profile-content .col-lg-4 .card.rounded-large .truncated {
  color: #d8dcda !important;
  font-size: .92rem;
  line-height: 1.6;
  margin-top: .35rem;
}
/* Clean empty state: collapse empty bio so there is no awkward gap */
.pb-profile-content .col-lg-4 .card.rounded-large .truncated:empty { display: none; }
.pb-profile-content .col-lg-4 .card.rounded-large .link-border { color: #00C800 !important; }

/* Website + social icons */
.pb-profile-content .col-lg-4 .card.rounded-large .share-btn-user {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #c2c7c5 !important;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.pb-profile-content .col-lg-4 .card.rounded-large a[href] .fa-link,
.pb-profile-content .col-lg-4 .card.rounded-large .share-btn-user:hover { color: #00C800 !important; }
/* social icon chips */
.pb-profile-content .col-lg-4 .card.rounded-large .share-btn-user[target] {
  width: 34px; height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
  margin: .25rem .35rem .25rem 0 !important;
  font-size: 15px;
}
.pb-profile-content .col-lg-4 .card.rounded-large .share-btn-user[target]:hover {
  border-color: rgba(0, 200, 0, .40);
  background: rgba(0, 200, 0, .08);
}
/* category chips */
.pb-profile-content .col-lg-4 .card.rounded-large .button-white-sm {
  display: inline-block;
  background: rgba(0, 200, 0, .10) !important;
  border: 1px solid rgba(0, 200, 0, .28) !important;
  color: #d7ffd7 !important;
  border-radius: 999px !important;
  padding: .2rem .7rem !important;
  font-size: .8rem;
  margin: 0 .3rem .4rem 0;
}
.pb-profile-content .col-lg-4 .card.rounded-large .button-white-sm:hover { background: rgba(0, 200, 0, .18) !important; }

/* Recent-media mini card (logged-in) — same glass family */
.pb-profile-content .col-lg-4 .card.recent-media {
  background: rgba(14, 14, 14, .52) !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: 18px !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
}
.pb-profile-content .col-lg-4 .card.recent-media .card-title { color: #ffffff !important; }

/* Mobile "About me" collapse toggle */
.pb-profile-content .btn-arrow-expand {
  border-radius: 12px !important;
  border-color: rgba(0, 200, 0, .35) !important;
  background: rgba(0, 200, 0, .06) !important;
  color: #d7ffd7 !important;
}

/* ---------- (2) Legal / footer widget — clean, intentional spacing ----------
   footer-tiny.blade.php is shared with the feed sidebar, so every rule here
   is scoped under .pb-profile-content (profile page only). */
.pb-profile-content .col-lg-4 .card.bg-transparent {
  margin-top: .25rem;
  padding: .15rem .25rem;
  background: transparent !important;   /* override generic sidebar glass card */
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.pb-profile-content .col-lg-4 .card.bg-transparent .card-body { padding: 0 !important; }
/* copyright line: its own block, subtle, with a gap before the links */
.pb-profile-content .col-lg-4 .card.bg-transparent > .card-body > small.text-muted {
  display: block;
  color: #7f8482 !important;
  font-size: .76rem;
  line-height: 1.5;
  margin-bottom: .6rem;
}
/* link list: wrap cleanly with even gaps */
.pb-profile-content .col-lg-4 .card.bg-transparent .list-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .9rem;
  margin: 0;
  padding: 0;
}
.pb-profile-content .col-lg-4 .card.bg-transparent .list-inline-item {
  margin: 0 !important;
}
.pb-profile-content .col-lg-4 .card.bg-transparent .footer-tiny,
.pb-profile-content .col-lg-4 .card.bg-transparent .link-footer {
  color: #8a8f8d !important;
  font-size: .78rem;
  text-decoration: none !important;
  transition: color .15s ease;
}
.pb-profile-content .col-lg-4 .card.bg-transparent .footer-tiny:hover,
.pb-profile-content .col-lg-4 .card.bg-transparent .link-footer:hover { color: #00C800 !important; }
.pb-profile-content .col-lg-4 .card.bg-transparent .dropdown-menu { z-index: 1100; }

/* ==================================================================
   PHASE 5c — tab clickability + creator-name link hover
   ================================================================== */

/* ---------- (A) Make the WHOLE tab/stat pill clickable ----------
   Each .nav-profile > li.nav-link holds a <small> count and an <a> that
   wraps only the icon+label, so previously just that small area was
   clickable. We stretch the anchor across the entire pill with a
   transparent ::after overlay, so a click anywhere on the pill follows
   the anchor's href. No markup / route / JS change; the active tab
   (href="javascript:;") still correctly does nothing, and other routes
   are preserved exactly. */
.nav-profile .nav-link { position: relative; cursor: pointer; }
.nav-profile .nav-link > a { position: static; }
.nav-profile .nav-link > a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;            /* covers the whole pill, incl. the count number */
}
.nav-profile .nav-link > small { position: relative; z-index: 1; }

/* ---------- (B) Creator name link hover (profile posts) ----------
   Soft-white by default, smooth to Playbooki green on hover, never
   underlined. The verified badge is a sibling <small class="verified">,
   so it is untouched. (profile page only — this file loads only here.) */
.card-updates .media-body h5 a {
  color: #f0f0f0 !important;
  -webkit-text-fill-color: #f0f0f0 !important;  /* theme renders names via text-fill (defaults to green currentColor) */
  text-decoration: none !important;
  transition: color .18s ease, -webkit-text-fill-color .18s ease, opacity .18s ease;
}
.card-updates .media-body h5 a:hover {
  color: #00C800 !important;
  -webkit-text-fill-color: #00C800 !important;
  text-decoration: none !important;
}
/* seamless: no underline-on-hover for any link inside profile post cards */
.pb-profile-content .card-updates a:hover { text-decoration: none !important; }
/* keep profile-content link hovers underline-free too */
.pb-profile-content a:hover { text-decoration: none !important; }

/* ==================================================================
   PHASE 5d — Creator profile SORT dropdown (Playbooki glass)
   Replaces the cramped native <select> with a Bootstrap dropdown.
   Scoped to .pb-profile-sort so navbar / feed-composer / footer
   dropdowns are NOT affected.
   ================================================================== */
.pb-profile-sort { position: relative; display: inline-block; z-index: 6; }

/* ----- Toggle pill: dark glass, green border, fits "Unlockable" cleanly ----- */
.pb-profile-sort .pb-profile-sort-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-width: 150px;
  height: 42px;
  padding: 0 1.1rem !important;
  border-radius: 999px !important;
  background: rgba(10, 14, 12, .72) !important;
  border: 1px solid rgba(0, 200, 0, .32) !important;
  color: #f0f0f0 !important;
  font-weight: 700;
  font-size: .9rem;
  line-height: 1;
  white-space: nowrap;          /* never clip the label */
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 6px 18px rgba(0, 0, 0, .35), 0 0 16px rgba(0, 200, 0, .06);
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.pb-profile-sort .pb-profile-sort-toggle:hover,
.pb-profile-sort .pb-profile-sort-toggle:focus,
.pb-profile-sort.show .pb-profile-sort-toggle {
  border-color: rgba(0, 200, 0, .60) !important;
  background: rgba(0, 200, 0, .10) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 .15rem rgba(0, 200, 0, .12), 0 6px 18px rgba(0, 0, 0, .40);
  outline: none;
}
.pb-profile-sort .pb-sort-ico { color: #00C800; font-size: 1rem; line-height: 1; }
.pb-profile-sort .pb-sort-label { color: inherit; }
/* recolor + space the Bootstrap caret so it never crowds the text */
.pb-profile-sort .pb-profile-sort-toggle::after {
  margin-left: .15rem;
  border-top-color: rgba(0, 200, 0, .9);
  vertical-align: middle;
}

/* ----- Glass dropdown menu ----- */
.pb-profile-sort .pb-profile-sort-menu {
  min-width: 180px;
  margin-top: .4rem;
  padding: .35rem !important;
  border-radius: 16px !important;
  background: rgba(8, 11, 9, .92) !important;
  border: 1px solid rgba(0, 200, 0, .22) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55), 0 0 26px rgba(0, 200, 0, .05) !important;
  overflow: hidden;
  z-index: 1090;                 /* above profile content, below modals */
}

/* ----- Items: soft gray default, green hover, clear active ----- */
.pb-profile-sort .pb-profile-sort-item {
  display: block;
  padding: .55rem .85rem !important;
  border-radius: 10px;
  color: #d3d7d5 !important;
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none !important;
  transition: color .15s ease, background-color .15s ease;
}
.pb-profile-sort .pb-profile-sort-item:hover,
.pb-profile-sort .pb-profile-sort-item:focus {
  color: #ffffff !important;
  background: rgba(0, 200, 0, .14) !important;
}
.pb-profile-sort .pb-profile-sort-item.active,
.pb-profile-sort .pb-profile-sort-item.active:hover {
  color: #05140a !important;
  background: #00C800 !important;
}

/* ---------- Mobile polish ---------- */
@media (max-width: 991.98px) {
  .pb-profile-cover { border-radius: 0 0 20px 20px !important; }
  .nav-profile { flex-wrap: wrap; }
  .pb-profile-actions .btn-profile { padding: .5rem .85rem !important; }
  .pb-profile-content .col-lg-4 .card.bg-transparent .list-inline { justify-content: center; }
  .pb-profile-content .col-lg-4 .card.bg-transparent > .card-body > small.text-muted { text-align: center; }
  .pb-profile-sort .pb-profile-sort-toggle { min-width: 132px; height: 40px; font-size: .86rem; }
  .pb-profile-sort .pb-profile-sort-menu { min-width: 170px; }
}

/* ==================================================================
   PHASE 5e — FIX: profile Share modal trapped behind the backdrop
   ------------------------------------------------------------------
   The .share-modal markup lives inside <main>, and global playbooki.css
   sets `body > * { position:relative; z-index:1 }`, which makes <main>
   a STACKING CONTEXT capped at z-index 1. Bootstrap appends the
   .modal-backdrop (z-index 1040) to <body> (the root context), so the
   backdrop painted ABOVE the modal (whose 1050 was capped inside main),
   leaving the share options + close X dim and unclickable — and the user
   stuck because the X couldn't be reached.

   Fix: only while a modal is open (body.modal-open, Bootstrap's own hook)
   drop main's stacking-context cap so the modal (1050) once again
   outranks the backdrop (1040). Reverts automatically on close.
   Scoped to the profile page because this stylesheet loads ONLY there,
   so the logged-in feed and its share modals are untouched.
   ================================================================== */
body.modal-open main { z-index: auto !important; }
/* NOTE: we deliberately do NOT raise .modal-backdrop here — the profile's
   other modals (login / subscribe / tip) live at <body> level with the
   default z-index 1050 and must stay ABOVE the 1040 backdrop. Removing
   main's stacking cap is all the (in-main) share modal needs. */

/* Playbooki dark-glass polish for the profile share modal */
.share-modal .modal-content {
  background: rgba(10, 13, 11, .94) !important;
  border: 1px solid rgba(0, 200, 0, .20) !important;
  border-radius: 18px !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 30px rgba(0, 200, 0, .06) !important;
}
.share-modal .modal-content .close { color: #f0f0f0 !important; opacity: .85; }
.share-modal .modal-content .close:hover { color: #00C800 !important; opacity: 1; }
.share-modal .social-share { transition: color .15s ease, transform .15s ease; }
.share-modal .social-share:hover { color: #00C800 !important; transform: translateY(-2px); }

/* ==================================================================
   PHASE 5f — FIX: individual POST share modal trapped inside the card
   ------------------------------------------------------------------
   Each post's share modal (#sharePost{id}) is written INSIDE the post
   card (.card-updates) in includes/updates.blade.php. When logged in,
   the card has `backdrop-filter` (glass blur). backdrop-filter makes the
   card BOTH a stacking context AND a containing block for position:fixed
   descendants — so the fixed modal was (a) positioned relative to the
   card instead of the viewport (rendered far down the page) and (b)
   stacked inside the card's context, sitting BELOW the body-level
   backdrop. Result: dark, mispositioned, partially unclickable.

   Fix: while any modal is open (Bootstrap's body.modal-open hook),
   neutralise the card's backdrop-filter so it stops being a containing
   block / stacking context — the fixed modal then centres in the
   viewport and its z-index (2050) again beats the backdrop (2040).
   The dark backdrop hides the brief loss of card blur, and it reverts
   on close. Scoped to .pb-profile-content (this stylesheet loads only
   on the profile page), so the logged-in feed's cards are untouched. */
body.modal-open .pb-profile-content .card-updates {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transform: none !important;   /* no fixed-pos containing block */
  clip-path: none !important;   /* the "clipped corners" also create a stacking context + clip the modal */
  filter: none !important;      /* any filter would re-trap the modal too */
}

/* Keep the post share modal on Playbooki dark glass too */
.pb-profile-content [id^="sharePost"] .modal-content {
  background: rgba(10, 13, 11, .94) !important;
  border: 1px solid rgba(0, 200, 0, .20) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 30px rgba(0, 200, 0, .06) !important;
}
.pb-profile-content [id^="sharePost"] .modal-content .close { color: #f0f0f0 !important; opacity: .85; }
.pb-profile-content [id^="sharePost"] .modal-content .close:hover { color: #00C800 !important; opacity: 1; }
.pb-profile-content [id^="sharePost"] .social-share { transition: color .15s ease, transform .15s ease; }
.pb-profile-content [id^="sharePost"] .social-share:hover { color: #00C800 !important; transform: translateY(-2px); }

/* ─────────────────────────────────────────────────────────────
   PHASE 18C — Promo code + offer summary in the subscribe modal.
   Scoped to .pb-promo-checkout only; the modal itself is untouched.
   ───────────────────────────────────────────────────────────── */
.pb-promo-checkout .pb-promo-summary {
  background: rgba(0, 200, 0, .07);
  border: 1px solid rgba(0, 168, 0, .30);
  border-radius: 8px;
  padding: 10px 12px;
}
.pb-promo-checkout .pb-promo-summary #pbPromoSummaryLabel { color: #0d7a0d; }
.pb-promo-checkout .pb-promo-summary s { opacity: .75; }
.pb-promo-checkout #pbPromoInput { text-transform: uppercase; }
.pb-promo-checkout #pbPromoInput::placeholder { text-transform: none; }
.pb-promo-btnnote { font-size: 12px; line-height: 1.35; }

/* ============================================================
   PHASE 18C.7 — Free-trial card requirement + reassurance
   (subscribe modal). Scoped under .pb-promo-checkout.
   ============================================================ */
.pb-promo-checkout .pb-trial-notice {
  border: 1px solid rgba(0, 200, 0, .28);
  background: rgba(0, 200, 0, .06);
  border-radius: 10px;
  padding: .6rem .75rem;
  font-size: .82rem;
}
.pb-promo-checkout .pb-trial-cardreq {
  color: #b8860b;
  background: rgba(255, 176, 32, .12);
  border: 1px solid rgba(255, 176, 32, .4);
  border-radius: 8px;
  padding: .5rem .6rem;
  margin-bottom: .55rem;
  line-height: 1.35;
}
.pb-promo-checkout .pb-trial-cardreq strong { color: #a06a00; }
.pb-promo-checkout .pb-trial-addcard {
  display: inline-block;
  margin-top: .35rem;
  font-weight: 700;
  color: #0a7d28;
  text-decoration: underline;
}
.pb-promo-checkout .pb-trial-points {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pb-promo-checkout .pb-trial-points li {
  position: relative;
  padding-left: 1.15rem;
  margin-bottom: .2rem;
  line-height: 1.35;
}
.pb-promo-checkout .pb-trial-points li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: #00a828;
  font-weight: 700;
}
.pb-promo-checkout .pb-trial-fine {
  margin-top: .5rem;
  padding-top: .45rem;
  border-top: 1px dashed rgba(0, 0, 0, .12);
  color: #6b7280;
  font-size: .76rem;
  line-height: 1.35;
}

/* Dark mode parity */
body.dark-mode .pb-promo-checkout .pb-trial-notice,
.pb-authenticated .pb-promo-checkout .pb-trial-notice {
  background: rgba(0, 200, 0, .08);
}
body.dark-mode .pb-promo-checkout .pb-trial-fine {
  color: #9aa4ad;
  border-top-color: rgba(255, 255, 255, .12);
}

/* ============================================================
   PHASE 18D — Public offer banner + subscribe-modal polish
   (loaded on the profile page via playbooki-profile.css).
   ============================================================ */

/* --- Public offer banner on the profile --- */
.pb-public-offer {
  display: inline-flex; flex-direction: column; align-items: center; gap: .3rem;
  margin: 0 auto .9rem; padding: .7rem 1.15rem; border-radius: 14px;
  background: linear-gradient(180deg, rgba(0,200,0,.10), rgba(0,200,0,.03));
  border: 1px solid rgba(0,200,0,.35);
  box-shadow: 0 0 18px rgba(0,200,0,.10);
  max-width: 460px;
}
.pb-public-offer--trial { background: linear-gradient(180deg, rgba(0,200,0,.12), rgba(0,120,255,.05)); }
.pb-public-offer-top { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; justify-content: center; }
.pb-public-offer .pb-promo-price { display: flex; align-items: baseline; gap: .5rem; justify-content: center; }
.pb-public-offer .pb-promo-original { color: #8a929a; text-decoration: line-through; font-size: 1rem; }
.pb-public-offer .pb-promo-discounted { color: #00e000; font-weight: 800; font-size: 1.55rem; letter-spacing: -.01em; }
.pb-public-offer .pb-promo-per { color: #aab2b9; font-size: .85rem; }
.pb-public-offer .pb-promo-card-note { color: #b8c0c7; font-size: .78rem; text-align: center; line-height: 1.35; }

.pb-public-offer .pb-promo-badge {
  display: inline-block; padding: .3rem .65rem; border-radius: 8px;
  font-size: .76rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #001a00; background: linear-gradient(180deg,#00ff5a,#00c800);
  box-shadow: 0 0 12px rgba(0,200,0,.35); white-space: nowrap;
}
/* 18D.X.2 — trial banner badge matches the discount badge (green family; blue removed sitewide). */
.pb-public-offer--trial .pb-promo-badge { color: #001a00; background: linear-gradient(180deg,#00ff5a,#00c800); box-shadow: 0 0 12px rgba(0,200,0,.35); }
.pb-public-offer .pb-promo-countdown {
  display: inline-flex; align-items: center; padding: .24rem .55rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; color: #ffb020;
  background: rgba(255,176,32,.12); border: 1px solid rgba(255,176,32,.4); white-space: nowrap;
}

/* --- Subscribe-modal polish (scoped to .modal-subscribe only) --- */
.modal-subscribe .card-body { padding: 1.5rem 1.5rem 1.75rem; }
/* Gateway radios → selectable cards */
.modal-subscribe .custom-control.custom-radio {
  padding: .7rem .8rem .7rem 2.4rem; margin-bottom: .6rem; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03);
  transition: border-color .15s ease, background .15s ease;
}
.modal-subscribe .custom-control.custom-radio:hover { border-color: rgba(0,200,0,.4); }
.modal-subscribe .custom-control-input:checked ~ .custom-control-label {
  color: #fff;
}
.modal-subscribe .custom-radio:has(.custom-control-input:checked) {
  border-color: rgba(0,200,0,.6); background: rgba(0,200,0,.08); box-shadow: 0 0 12px rgba(0,200,0,.12);
}
.modal-subscribe .custom-control-input:disabled ~ .custom-control-label { opacity: .5; }
.modal-subscribe .custom-control-label small,
.modal-subscribe .custom-control-label .font-weight-light { color: #9aa4ad; }
/* Choose payment header */
.modal-subscribe .card-body h5 { letter-spacing: .01em; }
/* Confirm button already green (.btn-primary); ensure prominence */
.modal-subscribe button[type="submit"].subscriptionBtn {
  font-weight: 700; border-radius: 12px; padding: .7rem 1rem;
}
/* Terms checkbox spacing */
.modal-subscribe .custom-control-alternative { margin-top: .5rem; }