/* ══════════════════════════════════════════════════════
   DESIGNER PROFILE — Production (stable)
   Dark theme + tier styling only
   ══════════════════════════════════════════════════════ */

/* ── 0. FIX STRAY TEXT LEAK ── */
/* Hide any direct children of body that aren't the page wrapper or standard elements */
body > :not(.page-wrapper):not(script):not(style):not(link):not(meta):not(noscript) {
  display: none !important;
}

/* ── 1. DARK BACKGROUND ── */
body,
html,
.page-wrapper,
.main-wrapper,
.main-wrapper.is-designers,
section,
.section_designer-head,
.section_designer-content,
.section_designer-about,
.section_footer,
.padding-global,
.padding-section-medium,
.container-large {
  background-color: #121110 !important;
}

/* Cards → dark card surface */
.about_detail-wrapper,
.about_feature-wrapper,
.about_detail_component,
[class*="about_detail"],
[class*="about_feature"],
.utility-page_component,
.utility-page_content-wrapper {
  background-color: #1e1b1a !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
}

/* Kill stray light backgrounds */
.w-form,
.w-tab-content,
.w-tab-pane,
.w-tabs,
.tab_content,
.tab_menu,
[class*="tab_"],
.posts_grid_component,
.reel-link_wrapper,
.form_field-wrapper,
.form_field-input,
textarea,
select {
  background-color: transparent !important;
}

/* Text inputs → dark */
.section_designer-content input[type="text"],
.section_designer-content input[type="email"],
.section_designer-content textarea {
  background: #1e1b1a !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.7) !important;
}

/* Base text color */
.section_designer-about,
.section_designer-about *,
.section_designer-content,
.section_designer-content *,
.section_designer-head,
.section_designer-head * {
  color: rgba(255,255,255,0.7);
}

/* Footer */
.section_footer,
.section_footer * {
  background-color: #121110 !important;
  color: rgba(255,255,255,0.4);
}
.section_footer a {
  color: rgba(255,255,255,0.35) !important;
}
.section_footer a:hover {
  color: #FEA532 !important;
}


/* ── 2. TYPOGRAPHY ── */
.section_designer-content h2,
.section_designer-content h3,
.section_designer-about h2,
.section_designer-about h3,
.section_designer-about h4,
p, span, a, button, input, textarea, select, label,
.text-size-small,
.text-size-tiny,
.text-size-regular {
  font-family: 'DM Sans', sans-serif;
}

.heading-style-h4 {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  color: #FFFFFF !important;
}
.section_designer-about h3,
.section_designer-about h4,
.section_designer-about .heading-style-h5 {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
}


/* ── 3. HIDE FOR NON-OWNERS ── */
.edit-btn,
.edit-btn.is-avatar,
.edit-btn.is-headline,
.st-reel-edit-icon,
.st-edit-icon,
#add-allowed,
.review_star-icon,
.review_stars-wrapper,
[class*="review_star"],
.about_star-rating-wrapper,
.designer-member-since-wrapper {
  display: none !important;
}
/* Kill ALL "complete your profile" modals — headline, avatar, banner, etc. */
.form_modal-wrapper,
.form_modal-wrapper.is-avatar,
.form_modal-wrapper.is-headline,
.form_modal-wrapper.is-banner,
[class*="form_modal"] {
  display: none !important;
}
.add-new-post_component,
[class*="add-new-post"],
.posts_add-wrapper,
button.collection-empty.is-posts-button {
  display: none !important;
}

/* Re-show for owner (edit buttons only — NO modals) */
body.st-is-owner .edit-btn,
body.st-is-owner .edit-btn.is-avatar,
body.st-is-owner .edit-btn.is-headline,
body.st-is-owner .st-reel-edit-icon,
body.st-is-owner .st-edit-icon,
body.st-is-owner #add-allowed,
body.st-is-owner .add-new-post_component,
body.st-is-owner [class*="add-new-post"],
body.st-is-owner .posts_add-wrapper {
  display: flex !important;
}
body.st-is-owner .edit-btn,
body.st-is-owner .edit-btn.is-avatar,
body.st-is-owner .edit-btn.is-headline {
  display: inline-flex !important;
}


/* ── 4. TOOLBOX + SPECIALTIES (tier styling) ── */
.st-tools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
  max-width: 93%;
}
.st-tool-card {
  background: #1e1b1a;
  border-radius: 3px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,0.05);
}
.st-tool-card-title {
  font-family: 'DM Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.35) !important;
  margin-bottom: 16px !important;
}

/* Tier labels */
.st-tier-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.st-tier-label.is-primary {
  color: #FEA532;
}
.st-tier-label.is-secondary {
  color: rgba(255,255,255,0.5);
}
.st-tier-label.is-familiar {
  color: rgba(255,255,255,0.3);
}
.st-tier-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  display: inline-block;
}
.st-tier-dot.is-primary {
  background: #FEA532;
}
.st-tier-dot.is-secondary {
  background: rgba(255,255,255,0.35);
}
.st-tier-dot.is-familiar {
  background: rgba(255,255,255,0.1);
}

/* Tier tag pills */
.st-tier-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.st-tier-tag {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 3px;
  white-space: nowrap;
  transition: transform 0.2s ease;
}
.st-tier-tag:hover {
  transform: translateY(-1px);
}
.st-tier-tag.is-primary {
  color: #FEA532;
  background: rgba(254,165,50,0.08);
  border: 1px solid rgba(254,165,50,0.12);
}
.st-tier-tag.is-secondary {
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.st-tier-tag.is-familiar {
  color: rgba(255,255,255,0.3);
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.06);
}


/* ── 5. LEVEL TAG ── */
.designer_level-tag {
  font-family: 'DM Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(254,165,50,0.4) !important;
  color: #FEA532 !important;
  background: rgba(254,165,50,0.08) !important;
  padding: 3px 10px !important;
  border-radius: 3px !important;
  line-height: 1.3;
}


/* ── 6. BIO TEXT ── */
.text-rich-text-profile,
.text-rich-text-profile p {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.7 !important;
  color: rgba(255,255,255,0.7) !important;
}


/* ── 7. NAVBAR — match page background ── */
.navbar_component,
.navbar_component.w-nav,
.w-nav,
.navbar_component *,
nav,
header,
[class*="navbar"],
[class*="nav_"] {
  background: #121110 !important;
  background-color: #121110 !important;
}
.navbar_component,
.navbar_component.w-nav {
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}


/* ── 8. SCROLLBAR ── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #121110; }
::-webkit-scrollbar-thumb { background: #2a2523; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3a3230; }


/* ── 9. OWNER EDIT UI ON DARK ── */
body.st-is-owner .add-new-post_component,
body.st-is-owner [class*="add-new-post"],
body.st-is-owner .posts_add-wrapper {
  border-color: rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.35) !important;
}


/* ── 10. LOGGED-OUT GATING ── */

/* Hide tier labels + dots for logged-out visitors (flat tags only) */
body.logged-out .st-tier-label {
  display: none !important;
}

/* Reel sections — wrapper is relative container; blur is on children only */
body.logged-out .reel-link_wrapper {
  position: relative;
  overflow: hidden;
}
/* Blur all children EXCEPT the gate overlay */
body.logged-out .reel-link_wrapper > *:not(.st-reel-gate) {
  filter: blur(8px);
  pointer-events: none;
  user-select: none;
}

/* Hide rate info card (matched by heading text via JS — class added dynamically) */
body.logged-out .st-rate-hidden {
  display: none !important;
}

/* Hide Memberstack content gates / modals for logged-out (we show teaser instead) */
body.logged-out [data-ms-content],
body.logged-out .ms-content-gate {
  display: none !important;
}

/* "Sign up free to watch" overlay on reel */
.st-reel-gate {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(18, 17, 16, 0.65);
  backdrop-filter: blur(2px);
  pointer-events: all;
}
.st-reel-gate-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(254, 165, 50, 0.12);
  border: 1px solid rgba(254, 165, 50, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.st-reel-gate-icon svg {
  width: 20px;
  height: 20px;
  fill: #FEA532;
}
.st-reel-gate-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 4px;
}
.st-reel-gate-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 16px;
}
.st-reel-gate-btn {
  background: #FEA532;
  color: #2F2827;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 22px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
}
.st-reel-gate-btn:hover {
  background: #f0952a;
}

/* "Sign up to connect" button (replaces invite) */
.st-connect-gate-btn {
  background: #2F2827;
  color: #FEA532;
  border: 1px solid rgba(254, 165, 50, 0.25);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  padding: 9px 20px;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
  display: inline-block;
}
.st-connect-gate-btn:hover {
  border-color: rgba(254, 165, 50, 0.5);
  background: #3a302e;
}


/* ── 11. MOBILE ── */
@media (max-width: 768px) {
  .st-tools-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
}