/* assets/style.css — FULL */

/* =========================
   THEME
========================= */
:root{
  --bg:#0b0f19;
  --card:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.12);
  --text:#e5e7eb;
  --muted:rgba(229,231,235,.72);

  --a1:#22c55e;
  --a2:#3b82f6;
  --danger:#ef4444;
  --warn:#f59e0b;

  --radius:14px;
  --shadow:0 18px 55px rgba(0,0,0,.35);

  /* Fiverr accent */
  --fiverr:#1dbf73;
  --fiverrDark:#0b5d3b;
}

/* =========================
   GLOBAL RESET
========================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:var(--text);
}
img{max-width:100%;display:block}
a{color:#93c5fd;text-decoration:none}
a:hover{text-decoration:underline}

/* =========================
   LAYOUT
========================= */
.container{max-width:1120px;margin:0 auto;padding:16px}
.nav{
  display:flex;gap:12px;align-items:center;justify-content:space-between;
  padding:12px 0;flex-wrap:wrap
}
.brand{font-weight:800;letter-spacing:.3px}
.badge{
  border:1px solid var(--line);
  padding:3px 10px;border-radius:999px;
  color:var(--muted);font-size:12px
}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
@media (max-width:860px){
  .grid{grid-template-columns:repeat(6,1fr)}
}
@media (max-width:520px){
  .container{padding:12px}
}

/* =========================
   CARDS / UI
========================= */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px
}
.hr{height:1px;background:var(--line);margin:12px 0}
.muted{color:var(--muted)}
.small{font-size:12px}
.pill{border:1px solid var(--line);border-radius:999px;padding:6px 10px;color:var(--muted);font-size:12px}
.thumb{
  width:100%;
  aspect-ratio:16/10;
  border-radius:12px;
  object-fit:cover;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04)
}
.code{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12px;
  background:rgba(0,0,0,.25);
  padding:10px;border-radius:12px;border:1px solid var(--line);
  white-space:pre-wrap
}

/* =========================
   BUTTONS
========================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
}
.btn:hover{background:rgba(255,255,255,.10)}
.btn.primary{border-color:rgba(59,130,246,.6);background:rgba(59,130,246,.20)}
.btn.good{border-color:rgba(34,197,94,.55);background:rgba(34,197,94,.18)}
.btn.danger{border-color:rgba(239,68,68,.55);background:rgba(239,68,68,.18)}
.btn.warn{border-color:rgba(245,158,11,.55);background:rgba(245,158,11,.18)}

/* =========================
   FORMS
========================= */
.input,select,textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.25);
  color:var(--text);
  -webkit-appearance:none;
  appearance:none;
}
textarea{min-height:110px;resize:vertical}
.row{display:flex;gap:12px;flex-wrap:wrap}
.col{flex:1;min-width:220px}

/* =========================
   TABLES
========================= */
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid var(--line);text-align:left}

/* =========================================================
   Fiverr-like Home
========================================================= */
.fx-section{ margin:14px 0; }
.fx-sec-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:10px;
}
.fx-sec-title{ font-weight:900; font-size:18px; }
.fx-sec-link{
  color:rgba(229,231,235,.75);
  text-decoration:none;
  font-weight:800;
  font-size:13px;
}

/* HERO */
.fx-hero{
  background: linear-gradient(180deg,var(--fiverrDark) 0%, #0a8f4f 100%);
  border-radius: 18px;
  padding: 16px;
  color:#fff;
}
.fx-hero-top{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.fx-logo{ font-weight:900; font-size:28px; letter-spacing:.2px; }
.fx-logo span{ color:var(--fiverr); }
.fx-join{
  background: rgba(255,255,255,.16);
  padding:10px 14px;
  border-radius:12px;
  color:#fff;
  text-decoration:none;
  font-weight:900;
}
.fx-hero-title{
  font-size:28px;
  line-height:1.1;
  font-weight:900;
  margin:0 0 12px 0;
}

/* SEARCH */
.fx-search{
  display:flex;
  background:#fff;
  border-radius:14px;
  padding:8px;
  gap:8px;
}
.fx-search input{
  border:0;
  outline:0;
  width:100%;
  font-size:16px;
  padding:10px 12px;
  border-radius:10px;
}
.fx-search button{
  border:0;
  background:var(--fiverrDark);
  color:#fff;
  font-size:18px;
  width:52px;
  border-radius:12px;
  cursor:pointer;
}

/* TRENDING CHIPS */
.fx-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.fx-chip{
  background:rgba(255,255,255,.14);
  color:#fff;
  text-decoration:none;
  padding:8px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
}

/* CATEGORY GRID */
.fx-cats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.fx-cat{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:14px;
  text-decoration:none;
  color:inherit;
  text-align:center;
}
.fx-ic{ font-size:26px; margin-bottom:8px; }
.fx-cat-title{ font-weight:900; font-size:13px; line-height:1.15; }

/* POPULAR SLIDER */
.fx-slider{
  display:flex;
  gap:12px;
  overflow:auto;
  padding-bottom:6px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.fx-slider::-webkit-scrollbar{ display:none; }
.fx-slide{
  min-width:180px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:14px;
  text-decoration:none;
  color:inherit;
}
.fx-slide-title{ font-weight:900; font-size:16px; }
.fx-slide-sub{
  margin-top:6px;
  color:rgba(229,231,235,.75);
  font-weight:800;
  font-size:13px;
}

/* FEATURED GIGS */
.fx-gigs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.fx-gig{
  text-decoration:none;
  color:inherit;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  overflow:hidden;
}
.fx-gig-img{
  height:120px;
  background:rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center;
}
.fx-gig-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.fx-gig-ph{ color:rgba(229,231,235,.65); font-weight:900; font-size:12px; }
.fx-gig-body{ padding:12px; }

.fx-gig-title{
  font-weight:900;
  font-size:14px;
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:36px;
}
.fx-gig-meta{
  margin-top:8px;
  display:flex; flex-wrap:wrap; gap:6px;
  color:rgba(229,231,235,.72);
  font-weight:800;
  font-size:12px;
}
.fx-dot{ opacity:.6; }
.fx-gig-price{ margin-top:10px; font-weight:900; }

.fx-empty{
  color:rgba(229,231,235,.72);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  padding:12px;
  border-radius:14px;
}

/* HOW IT WORKS */
.fx-steps{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:10px;
}
.fx-step{
  display:flex;
  gap:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  padding:12px;
  border-radius:14px;
}
.fx-step-n{
  width:30px;height:30px;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.12);
  font-weight:900;
}
.fx-step span{ color:rgba(229,231,235,.72); font-weight:800; }

/* CTA */
.fx-cta{ display:flex; gap:10px; margin-top:12px; }
.fx-btn{
  flex:1;
  text-align:center;
  text-decoration:none;
  padding:12px 14px;
  border-radius:14px;
  font-weight:900;
  background:var(--fiverr);
  color:#08120d;
}
.fx-btn2{
  flex:1;
  text-align:center;
  text-decoration:none;
  padding:12px 14px;
  border-radius:14px;
  font-weight:900;
  background:rgba(255,255,255,.10);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
}

/* MOBILE */
@media (max-width:520px){
  .fx-cats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fx-gigs{ grid-template-columns:repeat(1,minmax(0,1fr)); }
  .fx-hero-title{ font-size:26px; }
}