/* ============================================================
   NEBA – components.css
   Page-specific and complex component styles
   ============================================================ */

/* ── LANDING ──────────────────────────────────────────────────── */
.landing-wrap {
  min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:60px 20px; text-align:center;
  position:relative; overflow:hidden;
}

.landing-hero-logo {
  font-size:clamp(4rem,10vw,7rem); font-weight:900;
  letter-spacing:-4px; line-height:1;
  background:var(--g-main); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
  filter:drop-shadow(0 0 40px rgba(124,92,252,.4));
  margin-bottom:8px;
}
.landing-tagline {
  letter-spacing:5px; font-size:.88rem; color:var(--t3);
  text-transform:uppercase; margin-bottom:28px;
}
.landing-headline {
  font-size:clamp(1.9rem,5vw,3.2rem); font-weight:900;
  line-height:1.2; max-width:680px; margin-bottom:14px;
}
.landing-subtitle {
  color:var(--t2); font-size:1.05rem;
  max-width:480px; line-height:1.7; margin-bottom:44px;
}

/* Hero ring decorations */
.hero-ring {
  position:absolute; border-radius:50%;
  border:1px solid rgba(124,92,252,.1);
  top:50%; left:50%; transform:translate(-50%,-50%);
  pointer-events:none;
}

/* Floating particles */
.hero-particle {
  position:absolute; border-radius:50%;
  pointer-events:none; opacity:.7;
}

/* Mode cards grid */
.mode-cards {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px; width:100%; max-width:980px;
  margin-bottom:56px;
}

.mode-card {
  padding:30px 22px; border-radius:var(--r4);
  background:var(--card); border:1.5px solid var(--border);
  cursor:pointer; transition:all .4s cubic-bezier(.34,1.56,.64,1);
  position:relative; overflow:hidden; text-align:start;
}
.mode-card:hover {
  transform:translateY(-8px);
  border-color:rgba(124,92,252,.5);
  box-shadow:0 24px 60px rgba(124,92,252,.18);
}
.mode-card .blob {
  position:absolute; width:220px; height:220px;
  border-radius:50%; filter:blur(44px);
  opacity:.07; pointer-events:none;
  top:-90px;
}
body.lang-ar .mode-card .blob { left:-90px; }
body.lang-en .mode-card .blob { right:-90px; }

.mode-card .mode-icon {
  width:60px; height:60px; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.7rem; margin-bottom:18px;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
}
.mode-card h3 { font-size:1.22rem; font-weight:800; margin-bottom:9px; }
.mode-card p  { color:var(--t2); font-size:.88rem; line-height:1.6; }
.mode-card .mode-cta {
  margin-top:18px; font-size:.84rem; font-weight:700;
  display:flex; align-items:center; gap:5px;
  transition:gap .2s;
}
.mode-card:hover .mode-cta { gap:10px; }

/* Lang picker on landing */
.lang-picker {
  display:flex; gap:8px; flex-wrap:wrap;
  justify-content:center; margin-bottom:44px;
}
.lang-btn {
  padding:8px 18px; border-radius:var(--rf);
  border:1.5px solid var(--border-b);
  background:transparent; color:var(--t2);
  cursor:pointer; font-family:inherit; font-size:.88rem;
  transition:all var(--tf); display:flex; align-items:center; gap:6px;
}
.lang-btn:hover, .lang-btn.active {
  background:var(--violet); border-color:var(--violet); color:#fff;
}

/* Stats bar */
.stat-bar { display:flex; gap:44px; flex-wrap:wrap; justify-content:center; }
.stat-item { text-align:center; }
.stat-num {
  font-size:2rem; font-weight:900;
  background:var(--g-main); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
}
.stat-label { color:var(--t3); font-size:.82rem; margin-top:3px; }

/* ── LOST BROWSE ──────────────────────────────────────────────── */
.browse-layout { max-width:1200px; margin:0 auto; padding:32px 24px; }
.browse-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap; gap:16px; margin-bottom:28px;
}
.filter-row {
  display:flex; flex-wrap:wrap; gap:12px;
  align-items:flex-end; margin-bottom:22px;
}
.filter-row > * { min-width:0; }

/* ── REPORT FORM ──────────────────────────────────────────────── */
.report-wrap { max-width:700px; margin:0 auto; padding:32px 24px; }

/* ── TRADE ────────────────────────────────────────────────────── */
.trade-wrap { max-width:1200px; margin:0 auto; padding:32px 24px; }

/* ── DETAIL PAGE ──────────────────────────────────────────────── */
.detail-wrap { max-width:920px; margin:0 auto; padding:32px 24px; }
.detail-info-block {
  background:var(--deep); border-radius:var(--r3); padding:20px;
  margin-bottom:20px;
}
.detail-info-block h4 {
  font-size:.78rem; font-weight:700; color:var(--t3);
  text-transform:uppercase; letter-spacing:1.2px; margin-bottom:12px;
}

/* Gallery thumbnails strip */
.thumb-strip { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-top:11px; }
.thumb-strip img {
  width:68px; height:68px; object-fit:cover;
  border-radius:var(--r2); cursor:pointer; flex-shrink:0;
  border:2px solid var(--border); transition:border-color var(--tf);
}
.thumb-strip img.active { border-color:var(--violet); }

/* ── AUTH ─────────────────────────────────────────────────────── */
.auth-wrap {
  min-height:calc(100vh - 62px);
  display:flex; align-items:center; justify-content:center;
  padding:32px 20px;
}
.auth-box { width:100%; max-width:480px; }
.auth-logo {
  text-align:center; margin-bottom:36px;
  font-size:2.8rem; font-weight:900; letter-spacing:-2px;
  background:var(--g-main); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
}
.demo-creds {
  margin-top:18px; padding:14px; background:var(--deep);
  border-radius:var(--r2); text-align:center;
}
.demo-creds p { color:var(--t3); font-size:.78rem; margin-bottom:6px; }
.demo-creds code { font-size:.82rem; }

/* ── MESSAGES ─────────────────────────────────────────────────── */
.msg-list { max-width:780px; margin:0 auto; padding:32px 24px; }
.msg-card {
  display:flex; gap:14px; padding:18px; background:var(--card);
  border:1px solid var(--border); border-radius:var(--r3);
  margin-bottom:12px; transition:all var(--tf);
}
.msg-card:hover { border-color:var(--border-b); }
.msg-card.unread { border-left:3px solid var(--violet); }
body.lang-ar .msg-card.unread { border-left:1px solid var(--border); border-right:3px solid var(--violet); }

/* ── ADMIN ────────────────────────────────────────────────────── */
.admin-wrap { max-width:1100px; margin:0 auto; padding:32px 24px; }
.admin-stat-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r3); padding:22px; text-align:center;
}
.admin-stat-card .big { font-size:2.2rem; font-weight:900; }
.admin-stat-card .lbl { color:var(--t3); font-size:.84rem; margin-top:4px; }
.pending-row {
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; padding:18px; background:var(--card);
  border:1px solid var(--border); border-radius:var(--r3); margin-bottom:10px;
}

/* ── PROFILE ──────────────────────────────────────────────────── */
.profile-wrap { max-width:600px; margin:0 auto; padding:32px 24px; }
.profile-header {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r4); padding:32px; text-align:center; margin-bottom:20px;
}
.danger-zone {
  background:var(--card); border:1px solid rgba(255,95,150,.18);
  border-radius:var(--r3); padding:24px; margin-top:16px;
}
.danger-zone h3 { color:var(--rose); font-weight:700; margin-bottom:14px; }

/* ── TRADE POST WIZARD ────────────────────────────────────────── */
.wizard-wrap { max-width:700px; margin:0 auto; padding:32px 24px; }

/* ── MY LISTINGS ──────────────────────────────────────────────── */
.listings-wrap { max-width:1100px; margin:0 auto; padding:32px 24px; }

/* ── COMMENTS SECTION ─────────────────────────────────────────── */
.comments-section { margin-top:36px; }
.comment-add {
  display:flex; gap:12px; margin-top:18px; align-items:flex-start;
}
.comment-add input {
  flex:1; padding:10px 15px;
  background:var(--card); border:1.5px solid var(--border);
  border-radius:var(--rf); color:var(--t1); font-family:inherit;
  font-size:.9rem; outline:none; transition:border-color var(--tf);
}
.comment-add input:focus { border-color:var(--violet); }

/* ── CONTACT MODAL ────────────────────────────────────────────── */
.contact-hint {
  background:var(--violet-gs); border:1px solid var(--border-b);
  border-radius:var(--r2); padding:12px 16px; margin-bottom:16px;
  font-size:.86rem; color:var(--t2);
}

/* ── PAYMENT MODAL ────────────────────────────────────────────── */
.pay-summary {
  background:var(--deep); border-radius:var(--r2); padding:18px; margin-bottom:18px;
}
.pay-summary-row { display:flex; justify-content:space-between; margin-bottom:10px; }
.pay-summary-row:last-child { border-top:1px solid var(--border); padding-top:10px; margin-bottom:0; }
.pay-steps {
  background:var(--violet-gs); border:1px solid var(--border-b);
  border-radius:var(--r2); padding:18px; margin-bottom:16px;
}
.pay-steps ol {
  color:var(--t2); font-size:.88rem;
  padding-inline-start:20px; line-height:2.2;
}
.pay-warn {
  background:rgba(245,200,66,.08); border:1px solid rgba(245,200,66,.25);
  border-radius:var(--r2); padding:12px 16px;
}
.pay-warn p { color:var(--gold); font-size:.84rem; }

/* ── NOTIF BADGE ──────────────────────────────────────────────── */
.notif-icon-wrap { position:relative; display:inline-flex; }

/* ── Discount ribbon ──────────────────────────────────────────── */
.discount-ribbon {
  background:var(--mint-g); border:1px solid rgba(61,255,192,.3);
  border-radius:var(--r2); padding:10px 16px; margin-bottom:18px;
}
.discount-ribbon p { color:var(--mint); font-size:.84rem; }

/* ── No-auth wall ─────────────────────────────────────────────── */
.auth-wall {
  max-width:480px; margin:80px auto; padding:0 24px; text-align:center;
}
.auth-wall .wall-icon { font-size:4rem; margin-bottom:18px; opacity:.7; }
.auth-wall h2 { font-size:1.45rem; font-weight:800; margin-bottom:12px; }
.auth-wall p  { color:var(--t2); margin-bottom:26px; }

/* ── Responsive tweaks ────────────────────────────────────────── */
@media(max-width:768px) {
  .browse-layout, .report-wrap, .trade-wrap, .detail-wrap,
  .auth-wrap, .msg-list, .admin-wrap, .profile-wrap,
  .wizard-wrap, .listings-wrap {
    padding: 20px 14px;
  }
  .mode-cards { gap:12px; }
  .mode-card  { padding:22px 16px; }
  .stat-bar   { gap:28px; }
  .filter-row { flex-direction:column; }
  .filter-row > * { width:100%; }
}