/* FansFlex v0.9: route-scoped profile presentation.
   Preserve the original Blade data, follow/subscription controls, stories and dialogs. */
@media (min-width: 901px) {
  body.fansflex-app.ff-route-profile .main-wrapper > .col-md-3 {
    flex: 0 0 22.05% !important;
    width: 22.05% !important;
    max-width: 22.05% !important;
  }
  body.fansflex-app.ff-route-profile .main-wrapper > .col-md-9 {
    flex: 0 0 77.95% !important;
    width: 77.95% !important;
    max-width: 77.95% !important;
    min-width: 0;
  }
  body.fansflex-app.ff-route-profile .content-wrapper > .d-flex.flex-wrap {
    gap: 0;
    padding: 18px 15px 32px;
    align-content: flex-start;
  }
  body.fansflex-app.ff-route-profile .content-wrapper > .d-flex.flex-wrap > .col-md-8 {
    flex: 0 0 72% !important;
    max-width: 72% !important;
    border: 0 !important;
    min-width: 0;
  }
  body.fansflex-app.ff-route-profile .content-wrapper > .d-flex.flex-wrap > .col-md-4 {
    flex: 0 0 28% !important;
    max-width: 28% !important;
    padding: 0 0 0 13px !important;
    min-width: 0;
  }
  body.fansflex-app.ff-route-profile .profile-cover-bg {
    height: 213px !important;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--ff-line);
    box-shadow: var(--ff-shadow);
    background: var(--ff-panel-soft);
  }
  body.fansflex-app.ff-route-profile .profile-cover-bg > img {
    width: 100%;height: 100%;object-fit: cover;
    object-position: center 42%;
  }
  body.fansflex-app.ff-route-profile .profile-avatar-wrap {
    filter: drop-shadow(0 5px 11px rgba(7,28,46,.22));
  }
  body.fansflex-app.ff-route-profile .profile-avatar-img {
    object-fit: cover;
    border: 4px solid var(--ff-bg);
  }
  body.fansflex-app.ff-route-profile .content-wrapper .p-pill {
    background: var(--ff-panel-soft);
    border: 1px solid var(--ff-line);
    color: var(--ff-text);
    border-radius: 11px;
    box-shadow: 0 3px 12px rgba(13,41,64,.07);
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }
  body.fansflex-app.ff-route-profile .content-wrapper .p-pill:hover {
    border-color: #679ac5;
    box-shadow: 0 0 0 2px rgba(44,123,188,.13);
  }
  body.fansflex-app.ff-route-profile .content-wrapper .profile-description-holder {
    overflow-wrap: anywhere;
    line-height: 1.55;
  }
  body.fansflex-app.ff-route-profile .content-wrapper .container.pt-2.ps-0.pe-0 {
    background: var(--ff-panel);
    border: 1px solid var(--ff-line);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: var(--ff-shadow);
    margin-top: 9px;
  }
  body.fansflex-app.ff-route-profile .content-wrapper .border-bottom,
  body.fansflex-app.ff-route-profile .content-wrapper .border-top {
    border-color: var(--ff-line) !important;
  }
  body.fansflex-app.ff-route-profile .side-menu .user-side-menu .nav-link {
    min-height: 42px;
    border-radius: 10px !important;
  }
}
/* Light target: a compact icon-only rail (9%) rather than the dark creator sidebar.
   The existing profile theme already hides long labels; keep its semantics intact. */
@media (min-width: 901px) {
  html[data-bs-theme="light"] body.fansflex-app.ff-route-profile .main-wrapper > .col-md-3,
  html[data-theme="light"] body.fansflex-app.ff-route-profile .main-wrapper > .col-md-3 {
    flex: 0 0 9% !important;width:9% !important;max-width:9% !important;
  }
  html[data-bs-theme="light"] body.fansflex-app.ff-route-profile .main-wrapper > .col-md-9,
  html[data-theme="light"] body.fansflex-app.ff-route-profile .main-wrapper > .col-md-9 {
    flex: 0 0 91% !important;width:91% !important;max-width:91% !important;
  }
  html[data-bs-theme="light"] body.fansflex-app.ff-route-profile .profile-cover-bg,
  html[data-theme="light"] body.fansflex-app.ff-route-profile .profile-cover-bg {
    height:213px !important;margin:0 !important;padding:0 !important;
  }
}
/* The approved light reference retains a navy metallic rail but uses ice-white work surfaces. */
html[data-bs-theme="light"] body.fansflex-app.ff-route-profile,
html[data-theme="light"] body.fansflex-app.ff-route-profile {
  --ff-bg: #edf4fa;
  --ff-text: #102940;
  --ff-muted: #687e91;
  --ff-line: rgba(32,79,114,.14);
  --ff-panel: linear-gradient(165deg,#fff 0%,#f8fbfe 100%);
  --ff-panel-soft: linear-gradient(165deg,#f9fcff,#eaf3fa);
  --ff-shadow: 0 8px 24px rgba(31,70,104,.09);
}
html[data-bs-theme="light"] body.ff-route-profile .content-wrapper,
html[data-theme="light"] body.ff-route-profile .content-wrapper {
  background: #edf4fa !important;
  color: #102940;
}
html[data-bs-theme="light"] body.ff-route-profile .profile-cover-bg,
html[data-theme="light"] body.ff-route-profile .profile-cover-bg {
  border-color: #d7e3ee;
}
html[data-bs-theme="light"] body.ff-route-profile .content-wrapper .text-primary,
html[data-theme="light"] body.ff-route-profile .content-wrapper .text-primary {
  color: #1762a2 !important;
}
html[data-bs-theme="light"] body.ff-route-profile .content-wrapper .bg-separator,
html[data-theme="light"] body.ff-route-profile .content-wrapper .bg-separator {
  background: #edf4fa !important;
}
html[data-bs-theme="light"] body.ff-route-profile .side-menu .nav-link.active,
html[data-theme="light"] body.ff-route-profile .side-menu .nav-link.active {
  color: #fff !important;
  background: linear-gradient(110deg,#163c65 0%,#245f9b 70%,#357fc0 100%) !important;
  border-color: rgba(161,205,242,.74) !important;
  box-shadow: 0 0 0 1px rgba(125,197,255,.28),inset 0 1px 1px rgba(255,255,255,.24),0 8px 21px rgba(8,39,74,.22) !important;
}
@media (max-width: 900px) {
  /* Do not override Bootstrap's existing column and modal breakpoints on mobile. */
  body.fansflex-app.ff-route-profile .profile-cover-bg {overflow:hidden;}
  body.fansflex-app.ff-route-profile .profile-cover-bg img {object-fit:cover;}
}
@media (prefers-reduced-motion: reduce) {
  body.fansflex-app.ff-route-profile .content-wrapper .p-pill {transition:none!important;}
}

/* v5.4: light profile keeps the actual creator widget column.
   The older full-width-only mockup rule hid latest media, follow/subscription
   and other configured widgets on every desktop light-profile visit. The
   approved 02_light_ui image is a dashboard reference, not a contract to
   erase this separate profile route. Retain the original 72/28 content split.
   For tablet/mobile, keep the existing Bootstrap visibility rules. */
@media (min-width:901px) {
  html[data-bs-theme="light"] body.fansflex-app.ff-route-profile .content-wrapper > .d-flex.flex-wrap > .col-md-8,
  html[data-theme="light"] body.fansflex-app.ff-route-profile .content-wrapper > .d-flex.flex-wrap > .col-md-8 {
    flex:0 0 72%!important; max-width:72%!important; width:72%!important;
    min-width:0;
  }
  html[data-bs-theme="light"] body.fansflex-app.ff-route-profile .content-wrapper > .d-flex.flex-wrap > .col-md-4,
  html[data-theme="light"] body.fansflex-app.ff-route-profile .content-wrapper > .d-flex.flex-wrap > .col-md-4 {
    display:block!important;
    flex:0 0 28%!important; max-width:28%!important; width:28%!important;
    min-width:0;
    padding-inline-start:13px!important;
    padding-inline-end:12px!important;
  }
  html[data-bs-theme="light"] body.fansflex-app.ff-route-profile .profile-cover-bg,
  html[data-theme="light"] body.fansflex-app.ff-route-profile .profile-cover-bg {height:238px!important;}
  html[data-bs-theme="light"] body.fansflex-app.ff-route-profile .content-wrapper > .d-flex.flex-wrap,
  html[data-theme="light"] body.fansflex-app.ff-route-profile .content-wrapper > .d-flex.flex-wrap {padding:18px 18px 34px!important;}
}
/* Accessible native icon controls replace pointer-only spans. */
body.fansflex-app.ff-route-profile .profile-actions .p-pill[type="button"] {
  appearance:none; font:inherit; line-height:1; padding:0 9px;
  min-width:40px; min-height:40px; text-decoration:none;
  cursor:pointer; vertical-align:middle;
}
body.fansflex-app.ff-route-profile .profile-actions .p-pill[type="button"]:focus-visible,
body.fansflex-app.ff-route-profile .profile-actions a.p-pill:focus-visible {
  outline:2px solid var(--ff49-primary,#65b6ee);
  outline-offset:3px;
}
body.fansflex-app.ff-route-profile .profile-actions .p-pill[aria-disabled="true"] {
  opacity:.55; cursor:not-allowed;
}
@media (max-width:767.98px) {
  body.fansflex-app.ff-route-profile .profile-actions {flex-wrap:wrap; justify-content:flex-end; gap:4px;}
  body.fansflex-app.ff-route-profile .profile-actions .p-pill {margin-inline-start:0!important;}
}

/* v7.5: native, accessible creator controls; no magenta legacy button variants. */
body.fansflex-app.ff-route-profile .ff75-bundle-toggle,
body.fansflex-app.ff-route-profile .ff75-bio-toggle {
  appearance:none; -webkit-appearance:none; background:transparent;
  border:1px solid transparent; border-radius:9px; color:var(--ff-text,#e7f2fc);
  cursor:pointer; display:inline-flex; align-items:center; gap:5px;
  font:inherit; font-size:.875rem; font-weight:650; line-height:1.4;
  min-height:36px; padding:5px 8px; text-decoration:none;
}
body.fansflex-app.ff-route-profile .ff75-bundle-toggle {color:var(--ff-link,#7dc2f3);}
body.fansflex-app.ff-route-profile .ff75-bio-toggle {color:var(--ff-link,#7dc2f3)!important;}
body.fansflex-app.ff-route-profile .ff75-bundle-toggle:hover,
body.fansflex-app.ff-route-profile .ff75-bio-toggle:hover {
  background:rgba(61,138,205,.12); border-color:rgba(108,180,239,.35);
}
body.fansflex-app.ff-route-profile .ff75-bundle-toggle:focus-visible,
body.fansflex-app.ff-route-profile .ff75-bio-toggle:focus-visible,
body.fansflex-app.ff-route-profile .profile-media-view-button:focus-visible {
  outline:2px solid #70bcf2!important; outline-offset:3px; box-shadow:none;
}
body.fansflex-app.ff-route-profile .profile-media-view-button:focus {box-shadow:none;}
body.fansflex-app.ff-route-profile .profile-widgets-area .ff75-subscribe-cta-label {
  display:inline!important; min-width:0; overflow-wrap:anywhere;
}
body.fansflex-app.ff-route-profile .profile-widgets-area .ff75-subscribe-cta-price {
  font-size:.76rem; opacity:.91; text-align:end; overflow-wrap:anywhere;
}
body.fansflex-app.ff-route-profile .profile-widgets-area .btn {
  gap:8px; min-height:43px; border-radius:11px;
}
body.fansflex-app.ff-route-profile .profile-widgets-area .card {
  background:var(--ff-panel,#122c4a); border:1px solid var(--ff-line,rgba(117,170,215,.18));
  border-radius:14px!important; box-shadow:var(--ff-shadow,0 6px 24px rgba(0,0,0,.12));
}
html[data-bs-theme="light"] body.fansflex-app.ff-route-profile .ff75-bundle-toggle,
html[data-bs-theme="light"] body.fansflex-app.ff-route-profile .ff75-bio-toggle,
html[data-theme="light"] body.fansflex-app.ff-route-profile .ff75-bundle-toggle,
html[data-theme="light"] body.fansflex-app.ff-route-profile .ff75-bio-toggle {color:#1762a2!important;}
@media (max-width:767.98px) {
  body.fansflex-app.ff-route-profile .profile-widgets-area .btn {justify-content:center!important;}
  body.fansflex-app.ff-route-profile .ff75-bundle-toggle {max-width:100%;text-align:start;}
}
@media (prefers-reduced-motion:reduce) {
  body.fansflex-app.ff-route-profile .ff75-bundle-toggle,
  body.fansflex-app.ff-route-profile .ff75-bio-toggle {transition:none!important;}
}