/* star-detail.php — matched literally against the project owner's
   star-profile mockup (see feedback_css_token_matching memory): 480px
   narrow-column structure and per-section padding, same :root token family
   as discovery.css/discovery-detail.css/stars.css. Redeclared at :root
   (loads after base.css, so intentionally wins on this page). */
:root{
  --purple:#6C5CE7; --purple-light:#A29BFE;
  --blue:#4C7EF3; --blue-dark:#3D63D9;
  --gold:#F5A623; --gold-dark:#DC8F14;
  --green:#00B894; --green-dark:#04976F;
  --pink:#FD79A8;
  --chip-blue-bg:#E8EEFE; --peach-bg:#FDF1DC;
  --ink:#1D2333; --muted:#8A93AD; --line:#EFEFF5; --bg-soft:#F6F7FB;
  --report:#E4577F;
}

.star-detail-shell{max-width:480px; margin:0 auto; padding-bottom:calc(var(--nav-height, 78px) + 24px);}

/* TOP BAR — deliberately NOT position:sticky (unlike the mockup's own
   .topbar): the real dash-topbar shell is already sticky at top:0 on every
   page here; a second sticky bar would fight it for the same region and
   get visually covered once both engage (same fix applied on
   discovery-detail.php). */
.sd-topbar{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; background:#fff; border-bottom:1px solid var(--line);}
.back-btn{width:36px; height:36px; border-radius:50%; background:var(--bg-soft); display:flex; align-items:center; justify-content:center; color:var(--ink); text-decoration:none; flex-shrink:0;}
.topbar-title{font-size:.86rem; font-weight:700; color:var(--muted);}

/* PROFILE HEADER — no cover photo, centered card */
.profile-header{background:linear-gradient(180deg,#EFEBFD 0%, var(--bg-soft) 100%); padding:30px 12px 5px; text-align:center;}
.profile-avatar-wrap{position:relative; display:inline-block;}
.profile-avatar{
  width:88px; height:88px; border-radius:50%; background-color:var(--purple); background-size:cover; background-position:center;
  margin:0 auto; border:4px solid #fff; box-shadow:0 10px 24px rgba(108,92,231,.22);
}
.crown-badge{position:absolute; top:-8px; right:-6px; background:var(--gold); color:#fff; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:3px solid #fff; font-size:.75rem;}

.profile-name-row{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px;}
.profile-name-row h2{font-size:1.2rem; font-weight:800; margin:0; color:var(--ink);}
.seal-lg{width:20px; height:20px; border-radius:50%; background:var(--gold); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.6rem; flex-shrink:0;}

.achv-chip{display:inline-flex; align-items:center; gap:5px; background:var(--gold-dark); color:#fff; font-size:.66rem; font-weight:700; padding:5px 11px; border-radius:999px; border:1px solid #F3E3BE; margin-top:10px;}

.category-row{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:14px;}
.category-chip{display:inline-flex; align-items:center; gap:5px; background:#fff; border:1px solid var(--line); color:var(--ink); font-size:.72rem; font-weight:700; padding:6px 13px; border-radius:999px;}
.category-chip i{color:var(--purple); font-size:.7rem;}

.meta-line{font-size:.78rem; color:var(--muted); margin-top:12px; display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap;}
.meta-line .dot{width:3px; height:3px; border-radius:50%; background:var(--muted);}

/* BIO */
.bio-block{padding:16px 20px 0; font-size:.85rem; color:var(--ink); line-height:1.6;}

/* SOCIAL PROFILES CARD */
.card-block{margin:20px 12px 0; background:#fff; border-radius:18px; padding:18px; box-shadow:0 8px 20px rgba(29,35,51,.06);}
.card-block h6{display:flex; align-items:center; gap:8px; font-size:.94rem; font-weight:800; margin:0 0 14px; color:var(--ink);}
.card-block h6 i{color:var(--purple); font-size:.9rem;}
.social-row{display:flex; align-items:center; gap:13px; padding:12px 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit;}
.social-row:last-child{border-bottom:none; padding-bottom:0;}
.social-row:first-of-type{padding-top:0;}
.social-icon{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.1rem; flex-shrink:0; background:var(--muted);}
.social-icon.yt{background:#FF0000;}
.social-icon.tw{background:#000;}
.social-icon.ig{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF);}
.social-icon.tt{background:#000;}
.social-icon.tg{background:#26A5E4;}
.social-icon.fb{background:#1877F2;}
.social-info{flex:1; min-width:0;}
.social-info strong{font-size:.9rem; display:flex; align-items:center; gap:6px; color:var(--ink); font-weight:700;}
.social-info span{font-size:.78rem; color:var(--muted);}
.social-link-btn{width:36px; height:36px; border-radius:10px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink); flex-shrink:0;}
.primary-tag{font-size:.6rem; font-weight:800; color:var(--gold-dark); background:var(--peach-bg); padding:2px 7px; border-radius:999px; display:inline-flex; align-items:center; gap:3px;}

/* SHARE / REPORT */
.action-buttons{display:flex; gap:12px; padding:16px 12px 0;}
.btn-pill{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 0; border-radius:999px;
  font-weight:700; font-size:.86rem; background:#fff; border:none; cursor:pointer; text-decoration:none; font-family:'Poppins',sans-serif;
}
.btn-pill.share{border:1.5px solid var(--blue); color:var(--blue);}
.btn-pill.report{border:1.5px solid var(--report); color:var(--report);}

/* STATS */
.stats-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 12px; margin-top:20px;}
.stat-tile{background:#fff; border-radius:16px; padding:16px 14px; text-align:center; box-shadow:0 6px 16px rgba(29,35,51,.05);}
.stat-tile .icon{width:34px; height:34px; border-radius:10px; background:var(--chip-blue-bg); color:var(--blue-dark); display:flex; align-items:center; justify-content:center; margin:0 auto 8px; font-size:.85rem;}
.stat-tile .num{font-size:1.15rem; font-weight:800; color:var(--ink);}
.stat-tile .lbl{font-size:.66rem; color:var(--muted); text-transform:uppercase; letter-spacing:.02em; margin-top:2px;}

/* HIRE SECTION */
.hire-block{
  margin:22px 12px 0; background:linear-gradient(135deg,#2A2153,#4E3FC7 60%,var(--purple)); border-radius:20px;
  padding:22px 20px; color:#fff; text-align:center; position:relative; overflow:hidden;
}
.hire-block::after{content:''; position:absolute; width:180px; height:180px; border-radius:50%; background:var(--gold); opacity:.16; filter:blur(30px); bottom:-80px; right:-40px;}
.hire-block i.big{font-size:1.5rem; color:var(--gold); position:relative; z-index:2;}
.hire-block h5{font-size:1.02rem; font-weight:800; margin:10px 0 6px; position:relative; z-index:2;}
.hire-block p{font-size:.8rem; color:rgba(255,255,255,.8); margin:0 0 16px; line-height:1.5; position:relative; z-index:2;}
.hire-cta{
  background:var(--gold); color:#fff; border:none; border-radius:12px; padding:13px 24px; font-weight:800; font-size:.86rem;
  display:inline-flex; align-items:center; gap:8px; position:relative; z-index:2; text-decoration:none;
}
.hire-cta:hover{color:#fff;}

/* SECTION LABEL */
.section-label{padding:24px 20px 12px; font-size:.86rem; font-weight:800; color:var(--ink);}
.section-label span{display:block; font-size:.74rem; color:var(--muted); font-weight:500; margin-top:2px;}

/* TOP CONTENT — single row, discovery-wall style */
.content-row{display:flex; gap:13px; background:#fff; border-radius:16px; padding:13px; box-shadow:0 6px 16px rgba(29,35,51,.05); margin:0 20px 12px; text-decoration:none; color:inherit;}
.cr-media{width:72px; height:72px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; position:relative; background:linear-gradient(135deg, var(--chip-blue-bg), var(--peach-bg));}
.cr-media i.illus{font-size:1.5rem; color:var(--purple-light);}
.cr-pts{position:absolute; bottom:-6px; right:-6px; background:var(--gold); color:#fff; font-size:.58rem; font-weight:800; padding:3px 7px; border-radius:999px; border:2px solid #fff;}
.cr-info{flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center;}
.cr-cat{font-size:.62rem; font-weight:700; color:var(--blue); text-transform:uppercase; letter-spacing:.02em;}
.cr-title{font-size:.86rem; font-weight:700; margin-top:3px; line-height:1.3; color:var(--ink);}
.cr-found{font-size:.72rem; color:var(--purple); font-weight:700; margin-top:5px;}
.cr-cta{width:34px; height:34px; border-radius:50%; background:var(--chip-blue-bg); color:var(--blue-dark); display:flex; align-items:center; justify-content:center; flex-shrink:0; align-self:center; font-size:.78rem;}

/* SHARE MODAL — not in the mockup (a real, already-working feature ported
   from the previous influencer.php), styled to match this page's system. */
.share-modal{position:fixed; inset:0; background:rgba(29,35,51,.55); z-index:1000; align-items:center; justify-content:center;}
.share-modal-box{background:#fff; border-radius:20px; padding:20px; width:90%; max-width:400px;}
.share-modal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:15px;}
.share-modal-head h3{margin:0; font-size:1.1rem; color:var(--ink);}
.share-modal-head button{background:none; border:none; font-size:1.5rem; color:var(--muted); cursor:pointer; line-height:1;}
.share-options-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin:20px 0; text-align:center;}
.pub-share-option{color:inherit; text-decoration:none;}
.pub-share-option .social-icon{margin:0 auto 5px;}
.pub-share-option span{font-size:.8rem; color:var(--ink);}
.share-url-row{display:flex; margin-top:10px;}
.share-url-row input{flex:1; padding:8px 10px; border:1px solid var(--line); border-radius:8px 0 0 8px; font-family:'Poppins',sans-serif; font-size:.8rem; color:var(--muted);}
.share-url-row button{padding:8px 14px; background:var(--purple); color:#fff; border:none; border-radius:0 8px 8px 0; cursor:pointer; font-weight:700; font-size:.8rem;}

/* ===== REPORT MODAL — a real, purpose-designed full-height sheet (not a
   small centered popup): fills the viewport on mobile like a native
   bottom sheet, and settles into a tall centered card on wider screens.
   Fixed header/close button, a scrollable middle section, and the Submit
   button pinned in its own footer so it's always reachable without
   hunting for it at the bottom of a long scroll. ===== */
.rp-modal{position:fixed; inset:0; background:rgba(20,20,35,.6); z-index:1100; align-items:flex-end; justify-content:center; padding:0; backdrop-filter:blur(2px);}
.rp-box{
  background:#fff; width:100%; max-width:480px; height:100dvh; max-height:100dvh;
  border-radius:0; position:relative; box-shadow:0 -20px 60px rgba(20,20,35,.25);
  display:flex; flex-direction:column; animation:rpSlideUp .3s cubic-bezier(.2,.9,.3,1);
}
@keyframes rpSlideUp{from{transform:translateY(24px); opacity:0;} to{transform:translateY(0); opacity:1;}}

.rp-close{
  position:absolute; top:16px; right:16px; z-index:5; width:34px; height:34px; border-radius:50%; border:none;
  background:var(--bg-soft); color:var(--muted); display:flex; align-items:center; justify-content:center;
  font-size:.9rem; cursor:pointer; transition:.15s;
}
.rp-close:hover{background:var(--line); color:var(--ink);}

/* The form itself is the "form state" container — flex column so the
   scrollable middle can grow/shrink and the footer stays pinned. */
.rp-form{display:flex; flex-direction:column; min-height:0; flex:1;}
.rp-scroll{flex:1; min-height:0; overflow-y:auto; padding:26px 22px 12px;}
.rp-footer{padding:14px 22px calc(18px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:#fff;}

.rp-guest-wrap{flex:1; display:flex; flex-direction:column; justify-content:center; padding:26px 22px;}

.rp-head{text-align:center; margin-bottom:22px; padding-top:6px;}
.rp-head-icon{
  width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; margin:0 auto 14px;
}
.rp-icon-report{background:#FDEBF0; color:var(--report);}
.rp-icon-muted{background:var(--bg-soft); color:var(--muted);}
.rp-icon-success{background:#E7FBF5; color:var(--green-dark);}
.rp-head h3{font-size:1.08rem; font-weight:800; color:var(--ink); margin-bottom:6px;}
.rp-head p{font-size:.83rem; color:var(--muted); line-height:1.5; margin:0;}

.rp-field{margin-bottom:16px;}
.rp-field > label{display:block; font-size:.82rem; font-weight:700; color:var(--ink); margin-bottom:9px;}
.rp-required{color:var(--report);}
.rp-optional{font-weight:400; color:var(--muted);}

.rp-reason-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:9px;}
.rp-reason-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  border:1.5px solid var(--line); border-radius:14px; padding:14px 8px; text-align:center; cursor:pointer;
  background:var(--bg-soft); transition:.15s;
}
.rp-reason-card input{position:absolute; opacity:0; pointer-events:none; width:0; height:0;}
.rp-reason-card i{font-size:1.05rem; color:var(--muted); transition:.15s;}
.rp-reason-card span{font-size:.76rem; font-weight:600; color:var(--ink);}
.rp-reason-card:hover{border-color:var(--report);}
.rp-reason-card.selected{border-color:var(--report); background:#FDEBF0;}
.rp-reason-card.selected i{color:var(--report);}

.rp-field-error{display:flex; align-items:center; gap:6px; font-size:.78rem; color:var(--report); font-weight:600; margin-top:8px;}

.rp-field textarea{
  width:100%; border:1.5px solid var(--line); border-radius:12px; padding:11px 13px; font-family:'Poppins',sans-serif;
  font-size:.86rem; color:var(--ink); background:var(--bg-soft); resize:vertical; transition:.15s;
}
.rp-field textarea:focus{outline:none; border-color:var(--report); background:#fff;}
.rp-char-count{text-align:right; font-size:.7rem; color:var(--muted); margin-top:5px;}

.rp-server-error{
  display:flex; align-items:flex-start; gap:8px; background:#FDECEC; color:#B91C1C; font-size:.82rem;
  padding:11px 13px; border-radius:12px; margin-bottom:14px; line-height:1.45;
}

.rp-submit-btn{
  width:100%; background:var(--report); color:#fff; border:none; border-radius:12px; padding:13px; font-weight:800;
  font-size:.88rem; font-family:'Poppins',sans-serif; cursor:pointer; display:flex; align-items:center; justify-content:center;
  gap:8px; transition:.15s;
}
.rp-submit-btn:hover:not(:disabled){background:#D63F69; transform:translateY(-1px);}
.rp-submit-btn:disabled{opacity:.75; cursor:not-allowed; transform:none;}
.rp-btn-label, .rp-btn-loading{display:inline-flex; align-items:center; gap:8px;}

.rp-disclaimer{font-size:.72rem; color:var(--muted); text-align:center; line-height:1.5; margin:14px 0 0;}

.rp-success-state{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:26px;}
.rp-success-state h3{font-size:1.15rem; font-weight:800; color:var(--ink); margin-bottom:6px;}
.rp-success-state p{font-size:.86rem; color:var(--muted); line-height:1.5; margin:0; max-width:280px;}

/* Full-screen bottom sheet on mobile (the primary, mobile-first case for
   this page); a tall centered card on wider screens instead of an
   edge-to-edge sheet, which would look odd stretched across a desktop
   viewport. */
@media(min-width:600px){
  .rp-modal{align-items:center; padding:24px;}
  .rp-box{height:auto; max-height:88vh; border-radius:22px; box-shadow:0 30px 70px rgba(20,20,35,.3);}
  .rp-footer{border-radius:0 0 22px 22px;}
}

/* ===== TOAST — confirms the report went through after the modal closes,
   same fixed-bottom pattern used app-wide (e.g. edit-ad.php's ticker),
   scoped to this page's own token family. ===== */
.rp-toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:1200; display:flex; align-items:center; gap:10px;
  background:#fff; color:var(--ink); border-radius:999px; padding:13px 20px; box-shadow:0 14px 34px rgba(20,20,35,.22);
  font-size:.85rem; font-weight:600; max-width:90vw;
}
.rp-toast.success .rp-toast-icon{color:var(--green-dark);}
.rp-toast.error .rp-toast-icon{color:var(--report);}
.rp-toast-icon{font-size:1.05rem; flex-shrink:0;}

@media(max-width:480px){
  .rp-toast{bottom:calc(var(--nav-height, 78px) + 14px); width:calc(100% - 32px);}
}