/* =======================
   Influmo – Collabs Page
   ======================= */

/* ---- Theme tokens ---- */
:root{
  --bg:#0b0b0c;
  --panel:#131316;
  --border:#2a2a2e;
  --text:#e6e6eb;
  --muted:#b7b7bd;
  --gold:#f5c518;
  --shadow-lg:0 24px 60px rgba(0,0,0,.55);
}
*{ box-sizing:border-box; }
html,body{ margin:0; background:var(--bg); color:var(--text); font:14px/1.55 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.container{ width:min(1100px, 92vw); margin:0 auto; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; border-radius:12px; padding:11px 14px;
  border:1px solid var(--border); background:#151517; color:var(--text);
  cursor:pointer; transition:all .22s ease; min-height:44px;
}
.btn:hover{
  border-color:var(--gold);
  box-shadow:0 0 12px rgba(230,182,92,.65), 0 0 22px rgba(230,182,92,.35);
  transform:translateY(-1px);
}
.btn.solid{ background:linear-gradient(#f5c518,#d9a63a); color:#181818; border:none; font-weight:700; }
.btn.ghost{ background:#151517; }

/* ===================== NAVBAR ===================== */
.navbar{ position:sticky; top:0; z-index:50; background:#111; border-bottom:1px solid var(--border); }
.nav-container{ max-width:1100px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:16px; }
.logo{ font-weight:800; color:#fff; letter-spacing:.2px; }

.nav-links{ display:flex; gap:6px; list-style:none; margin-left:auto; padding:0; }
.nav-links a{
  display:inline-block; padding:8px 12px; border-radius:10px;
  color:var(--text); border:1px solid transparent; transition:all .22s ease;
}
.nav-links a:hover, .nav-links a.active{
  border-color:var(--gold); background:#18181a;
  box-shadow:0 0 10px rgba(230,182,92,.65), 0 0 22px rgba(230,182,92,.35);
  transform:translateY(-1px);
}

/* burger (hidden on desktop) */
.menu-toggle{ display:none; flex-direction:column; gap:4px; margin-left:auto; cursor:pointer; }
.menu-toggle .bar{ width:25px; height:3px; background:#fff; border-radius:3px; transition:.25s; }
.menu-toggle:hover{ filter:drop-shadow(0 0 8px rgba(230,182,92,.7)); }

/* mobile dropdown – fully disabled on desktop */
.nav-links-mobile{
  display:none; position:fixed; top:56px; left:0; right:0; z-index:60;
  background:#111; border-top:1px solid var(--border); box-shadow:0 14px 40px rgba(0,0,0,.5);
  max-height:0; overflow:hidden; opacity:0; pointer-events:none;
  transition:max-height .28s ease, opacity .24s ease; list-style:none; margin:0; padding:0;
}
.nav-links-mobile li a{ display:block; padding:14px 16px; border-bottom:1px solid var(--border); }
.nav-links-mobile li a:hover{ background:#18181a; }

/* The JS should toggle .show on mobile:
   .nav-links-mobile.show { max-height:70vh; opacity:1; pointer-events:auto; } */
.nav-links-mobile.show{ max-height:70vh; opacity:1; pointer-events:auto; }

/* responsive for navbar */
@media (max-width: 768px){
  .nav-links{ display:none; }
  .menu-toggle{ display:flex; }
  .nav-links-mobile{ display:block; }
}

/* ===================== COLLAB PAGE ===================== */
.collab-wrap{ padding:18px 0 50px; }
.collab-wrap h1{ margin:12px 0 4px; font-size:26px; font-weight:900; letter-spacing:.2px; }
.muted{ color:var(--muted); }

/* tabs */
.switcher{ display:flex; gap:10px; margin:14px 0 16px; }
.switcher .btn{ min-width:140px; }

/* filter panel */
.filters{
  display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 14px;
  background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:10px;
  box-shadow:var(--shadow-lg); position:relative;
}
.filters::after{
  content:"Filters"; position:absolute; top:-10px; left:14px;
  font-size:12px; color:var(--muted); background:var(--bg); padding:0 6px;
}

/* controls */
select,
input[type="number"],
input[type="text"],
input[type="email"],
input[type="date"],
textarea{
  background:#111; color:var(--text);
  border:1px solid var(--border); border-radius:10px;
  padding:10px 12px; min-height:44px; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
select:focus, input:focus, textarea:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(230,182,92,.15);
}

/* grid / cards */
.grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:12px; margin-top:12px; }
.card{
  background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:14px;
  display:flex; flex-direction:column; gap:8px; box-shadow:0 8px 40px rgba(0,0,0,.35);
  transition:border-color .2s ease, box-shadow .22s ease, transform .22s ease;
}
.card:hover{
  border-color:var(--gold);
  box-shadow:0 0 12px rgba(230,182,92,.45), 0 20px 50px rgba(0,0,0,.5);
  transform:translateY(-2px);
}
.card .name{ font-weight:800; letter-spacing:.2px; }
.card .sub{ color:var(--muted); font-size:12px; }
.card .line{ color:var(--text); }
.badges{ display:flex; gap:6px; flex-wrap:wrap; }
.pill{
  background:#151517; border:1px solid var(--border);
  border-radius:999px; padding:4px 8px; font-size:12px;
}

/* empty state */
.empty{ text-align:center; color:var(--muted); padding:18px 0; }
.hidden{ display:none !important; }

/* publish form */
.offer-card{
  background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:16px;
  box-shadow:var(--shadow-lg);
}
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ color:var(--muted); font-size:12px; }
.span2{ grid-column:1 / -1; }
.actions{ display:flex; gap:10px; margin-top:8px; }
.msg{ margin-top:8px; font-weight:600; }

/* responsive */
@media (max-width:760px){
  .grid2{ grid-template-columns:1fr; }
  .filters{ padding:10px; }
}