:root{
  --bg:#f3f6f7;
  --card:#ffffff;
  --muted:#6f7b83;
  --text:#23313a;
  --border:#e6ecef;
  --primary:#2fb9b0;
  --primarySoft:#d9f4f2;
  --green:#22b573;
  --yellow:#ffd24a;
  --shadow: 0 8px 24px rgba(13,38,59,.08);
  --radius:10px;
  --radiusLg:14px;
  --font: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
}

.topline{
  height:4px;
  background:var(--primary);
}

.container{
  max-width:1100px;
  margin:0 auto;
  padding:14px 14px 28px;
}

.back{
  display:inline-block;
  text-decoration:none;
  color:var(--muted);
  font-weight:700;
  font-size:13px;
  margin:4px 0 10px;
}

.layout{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap:16px;
  align-items:start;
}

@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr; }
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radiusLg);
  box-shadow:var(--shadow);
}

.side{
  position:sticky;
  top:14px;
}

.profileCard{
  padding:14px;
}

.profileTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.profileName{
  font-weight:800;
  font-size:14px;
  color:#42515a;
}
.heart{
  border:0;
  background:transparent;
  font-size:18px;
  cursor:pointer;
  color:#d26a7a;
}

.avatarWrap{
  display:flex;
  justify-content:center;
  margin:8px 0 10px;
}
.avatar{
  width:92px;
  height:92px;
  border-radius:999px;
  object-fit:cover;
  border:4px solid #fff;
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
}
.location{
  text-align:center;
  font-size:12px;
  color:var(--muted);
  font-weight:700;
  margin-bottom:10px;
}

/* Packages widget */
.packagesWidget{
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  background:
    linear-gradient(180deg, rgba(47,185,176,.08), rgba(255,255,255,1) 42%);
  box-shadow: 0 12px 22px rgba(0,0,0,.07);
  margin:10px 0 12px;
}

.packagesHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:12px;
}
.packagesTitle{
  font-weight:1000;
  font-size:14px;
  letter-spacing:.01em;
}
.packagesSub{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
}

.platformIcons{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  margin:10px 0 12px;
}
.pIcon{
  width:40px;height:40px;
  border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  font-weight:1000;
  user-select:none;
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}
.pIcon:hover{ transform: translateY(-1px); box-shadow: 0 8px 16px rgba(0,0,0,.08); }
.pIcon.active{
  border-color: var(--primary);
  box-shadow: 0 10px 18px rgba(47,185,176,.22);
  outline: 3px solid rgba(47,185,176,.12);
}

.packageLines{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
}

/* ✅ FIX: package row past nu wél in sidebar (±260px) */
.line{
  display:grid;
  /* was: 52px ... 36px 36px 92px + 12px gaps => overflow */
  grid-template-columns: 52px minmax(0, 1fr) 32px 32px 72px;
  column-gap:8px;
  align-items:center;
  width:100%;
}

.line + .line{
  padding-top:14px;
  border-top:1px solid var(--border);
}

/* qty pill */
.qty{
  width:52px;
  min-width:52px;
  max-width:52px;
  height:36px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#f7fbfb;

  display:flex;
  align-items:center;
  justify-content:center;

  font-weight:1000;
  font-size:14px;
  line-height:1;
  padding:0;
  color:#4b5a63;
  text-align:center;

  /* ✅ voorkomt optisch schuiven van cijfers */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* title column shrink/ellipsis */
.lineMid{
  min-width:0;
  overflow:hidden;
}
.lineTitle{
  font-weight:1000;
  font-size:13px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lineSub{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
  margin-top:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ✅ FIX: knoppen iets kleiner zodat prijs binnen blijft */
.iconBtn{
  width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;

  font-weight:1100;
  font-size:13px;
  line-height:1;

  color:#4b5a63;
  display:flex;
  align-items:center;
  justify-content:center;
}
.iconBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(0,0,0,.08);
  background:#fbfeff;
}
.iconBtn:active{ transform: translateY(0px) scale(.98); }

/* ✅ FIX: prijs blijft binnen de grid (rechts uitlijnen) */
.price{
  width:72px;
  min-width:0;
  white-space:nowrap;
  text-align:right;
  justify-self:end;

  font-weight:1100;
  font-size:16px;
  color:#4b5a63;

  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  padding-right:4px;
}

/* Mobile fallback: heel klein -> price naar 2e rij */
@media (max-width: 360px){
  .line{
    grid-template-columns: 52px minmax(0, 1fr) 32px 32px;
    grid-template-areas:
      "qty title title title"
      "qty minus plus price";
    row-gap:10px;
    align-items:start;
  }
  .qty{ grid-area: qty; }
  .lineMid{ grid-area: title; }
  .line .iconBtn:nth-of-type(1){ grid-area: minus; }
  .line .iconBtn:nth-of-type(2){ grid-area: plus; }
  .price{ grid-area: price; align-self:center; width:auto; }
}

.packageFooter{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--border);
}
.totalLabel{
  font-size:14px;
  color:var(--muted);
  font-weight:1000;
}
.totalValue{
  font-weight:1100;
  font-size:20px;
  color:#2b3b44;
}

.shortlistBtn{
  margin-top:12px;
  width:100%;
  border:0;
  border-radius:14px;
  padding:12px 14px;
  background:var(--yellow);
  font-weight:1100;
  cursor:pointer;
  color:#1a1a1a;
  box-shadow: 0 10px 18px rgba(255,210,74,.35);
}
.shortlistBtn:hover{
  filter: brightness(1.02);
  box-shadow: 0 12px 22px rgba(255,210,74,.42);
}

/* Buttons */
.ctaGreen{
  width:100%;
  border:0;
  border-radius:10px;
  padding:10px 10px;
  background:#1fb56b;
  color:#fff;
  font-weight:900;
  font-size:12px;
  cursor:pointer;
}

.reachCard{
  margin-top:12px;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  display:flex;
  gap:12px;
  align-items:center;
  background:#fff;
}
.reachRing{
  width:70px;height:70px;
  border-radius:999px;
  background: conic-gradient(#f6b73c 0deg, #f6b73c 280deg, #e8edf0 280deg, #e8edf0 360deg);
  position:relative;
}
.reachRing::after{
  content:"";
  position:absolute;
  inset:10px;
  background:#fff;
  border-radius:999px;
  border:1px solid var(--border);
}
.reachText{ line-height:1.1; }
.reachValue{ font-weight:1000; font-size:14px; }
.reachLabel{ font-size:11px; color:var(--muted); font-weight:800; margin-top:4px; }

.content{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.headerCard{
  padding:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.chip{
  background: var(--primarySoft);
  color:#1c6f6a;
  border:1px solid rgba(47,185,176,.25);
  border-radius:999px;
  padding:6px 10px;
  font-weight:900;
  font-size:11px;
}
.askBtn{
  border:0;
  border-radius:999px;
  padding:9px 12px;
  background: var(--yellow);
  font-weight:1000;
  cursor:pointer;
}

.bioTitle{
  padding:12px 12px 0;
  font-weight:1000;
  font-size:13px;
}
.bioText{
  padding:8px 12px 0;
  color:#3b4a53;
  font-size:12px;
  line-height:1.45;
}
.linkBtn{
  margin:8px 12px 12px;
  background:transparent;
  border:0;
  color:#2a7bbf;
  font-weight:900;
  cursor:pointer;
  font-size:12px;
  padding:0;
}

.platformCard{ padding:0; }
.platformHeader{
  padding:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--border);
  gap:12px;
}
.platformLeft{
  display:flex;
  align-items:center;
  gap:10px;
}
.platformIcon{
  width:28px;height:28px;
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-weight:1000;
  color:#fff;
}
.platformIcon.ig{ background:#111; }
.platformIcon.web{ background:#111; }
.platformIcon.tt{ background:#111; }

.platformName{ font-weight:1000; font-size:13px; }

.platformRight{
  display:flex;
  gap:18px;
  align-items:center;
}
.metric{ text-align:right; }
.metricValue{
  font-weight:1000;
  font-size:13px;
  color:#2b3b44;
}
.metricLabel{
  font-size:9.8px;
  color:var(--muted);
  font-weight:900;
  letter-spacing:.04em;
}
.metricGreen .metricValue{ color:var(--green); }

.tabsRow{
  padding:10px 12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  border-bottom:1px solid var(--border);
}
.tab{
  border:0;
  background:transparent;
  color:var(--muted);
  font-weight:900;
  font-size:11px;
  cursor:pointer;
  padding:6px 10px;
  border-radius:999px;
}
.tab.active{
  background: var(--primary);
  color:#fff;
}

.tabBody{ padding:12px; }

.postsGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:8px;
}
@media (max-width: 760px){
  .postsGrid{ grid-template-columns: repeat(2, 1fr); }
}
.postThumb{
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--border);
  background:#e9f0f2;
  height:110px;
  position:relative;
}
.postThumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.statsRow{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
}
@media (max-width: 900px){
  .statsRow{ grid-template-columns: repeat(2, 1fr); }
}
.statBox{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  background:#fff;
}
.statLabel{
  font-size:10px;
  color:var(--muted);
  font-weight:900;
  letter-spacing:.03em;
}
.statValue{
  margin-top:6px;
  font-weight:1000;
  font-size:14px;
}

.audienceGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
@media (max-width: 900px){
  .audienceGrid{ grid-template-columns:1fr; }
}
.chartCard{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  background:#fff;
}
.chartTitle{
  font-weight:1000;
  font-size:11px;
  color:#2b3b44;
  margin-bottom:10px;
}

.bars{
  display:flex;
  gap:8px;
  align-items:flex-end;
  height:120px;
  padding:4px 2px 0;
}
.bar{
  flex:1;
  border-radius:8px 8px 0 0;
  background: var(--primary);
  position:relative;
}
.bar span{
  position:absolute;
  bottom:-18px;
  left:50%;
  transform:translateX(-50%);
  font-size:10px;
  color:var(--muted);
  font-weight:800;
  white-space:nowrap;
}

.pie{
  width:140px;
  height:140px;
  border-radius:999px;
  margin:6px auto 0;
  background: conic-gradient(#d84db7 0 70%, #3a78d3 70% 100%);
  border:1px solid var(--border);
}
.pieLegend{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:10px;
  font-size:11px;
  color:var(--muted);
  font-weight:800;
}
.dot{
  width:10px;height:10px;border-radius:999px;display:inline-block;margin-right:6px;
}
.dot.pink{ background:#d84db7; }
.dot.blue{ background:#3a78d3; }

.countries{
  margin-top:14px;
  border-top:1px solid var(--border);
  padding-top:12px;
}
.countryRow{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  font-weight:800;
  color:#2b3b44;
  padding:6px 0;
}
.countryRow span:last-child{ color:var(--muted); }