/* ════════════════════════════════════════════════════════════════
   style-new.css — NickFinder.io surgical restructuring overrides
   Loaded AFTER styles.css. Safe to remove: delete the single
   <link rel="stylesheet" href="/style-new.css"> tag to fully revert.
   ════════════════════════════════════════════════════════════════ */

/* ── Task 2: header nav / search icon / language switcher ── */
.global-nav .nav-links{ gap:2px; }
.global-nav .nav-btn{ font-size:9.5px !important; padding:0 4px !important; }
.nav-btn.nav-blog-highlight{
  color:#FF9D16 !important;
  font-weight:900 !important;
}
.nav-btn.nav-blog-highlight:hover,
.nav-btn.nav-blog-highlight.active,
.nav-btn.nav-blog-highlight.on{
  border-bottom-color:#FF9D16 !important;
  color:#FFB94D !important;
}
#nav-icons-v2{ margin:0 2px; }
#lw{ position:relative; }
#lb{
  background:none; border:1px solid rgba(255,255,255,.18); border-radius:16px;
  color:#fff; font-size:11px; font-weight:700; padding:4px 8px;
  display:flex; align-items:center; gap:4px; cursor:pointer;
}
#lb:hover{ border-color:rgba(255,255,255,.4); }
#ld{
  display:none; position:absolute; top:calc(100% + 6px); right:0;
  background:rgba(1,22,30,.98); border:1.5px solid rgba(255,255,255,.15);
  border-radius:10px; min-width:150px; overflow:hidden; z-index:999999;
}
#ld.open{ display:block; }
#ld .lo{
  display:flex; align-items:center; gap:8px; width:100%; padding:9px 13px;
  background:none; border:none; color:#fff; font-size:12.5px; cursor:pointer;
  font-family:'Tajawal',sans-serif; text-align:left;
}
#ld .lo:hover{ background:rgba(255,255,255,.08); }
#ld .lo.on{ color:#FF9D16; }

/* ── Generator dropdown in header (Names / Games / Symbols / Social Media / Symbols Library) ── */
.nav-gen-wrap{ position:relative; display:inline-flex; }
.nav-gen-btn{ background:none; border:none; cursor:pointer; }
.nav-gen-btn.open{ color:#00e5ff !important; border-bottom-color:#00e5ff !important; }
.nav-gen-menu{
  display:none;
  position:fixed;
  top:58px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(1,22,30,.98);
  border:1.5px solid rgba(255,255,255,.15);
  border-radius:10px;
  min-width:180px;
  overflow:hidden;
  z-index:999999;
  flex-direction:column;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}
.nav-gen-menu.open{ display:flex; }
.nav-gen-menu a{
  display:flex; align-items:center; padding:10px 16px;
  color:#fff; font-size:12.5px; font-weight:700;
  font-family:'Tajawal',sans-serif; text-decoration:none;
  transition:background .14s,color .14s;
}
.nav-gen-menu a:hover{ background:rgba(255,255,255,.08); color:#FF9D16; }
.nav-gen-btn{ display:inline-flex !important; align-items:center !important; }
.nav-gen-chevron{ transition:transform .18s ease; }
.nav-gen-btn.open .nav-gen-chevron{ transform:rotate(180deg); }

/* Mobile header per request: Home - Blog - Generator - About only
   (Contact Us and the old search icon are desktop-only / removed).
   Higher specificity + !important needed: the page's own inline CSS sets
   ".global-nav .nav-btn{display:inline-flex!important}" on every nav-btn,
   which otherwise beats a plain single-class hide rule regardless of the
   media query. */
@media (max-width:900px){
  .global-nav .nav-links .nav-btn.nav-contact-only-desktop{ display:none !important; }
}

@media (max-width:900px){
  .global-nav .nav-links{ overflow-x:auto; justify-content:flex-start; }
  .global-nav .nav-btn{ font-size:8.5px !important; }
}

/* ── Task 3: widened hero input ── */
#ni{
  font-size:16px !important;
  padding:16px 20px !important;
  border-width:2px !important;
}
.gen-row{ max-width:760px !important; }

/* ── Task 3: "More Platforms" dropdown ── */
/* In-flow block (not position:absolute) placed directly after #tab-wrap-primary
   in the HTML. Toggling display:none -> flex naturally pushes #mode-row down
   by exactly this block's real height — no manual spacing math, no overlap,
   no off-screen overflow at any width. */
#ptab-more-btn.open{ border-color:#FF9D16; color:#FF9D16; }
.ptab-more-menu{
  display:none;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
  max-width:870px;
  margin:10px auto 14px;
  padding:10px;
  background:#fff;
  border:1.5px solid var(--bs);
  border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
}
.ptab-more-menu.open{ display:flex; }

/* extra breathing room between the platform row and the mode/quick-filter
   chips row (All/Sniper/Pro/King/Cute/Devil/Legend/Clan) directly below it */
#mode-row.mode-row{ margin-top:20px; }

/* ── Task 4: homepage "Latest Blog Articles" grid ── */
#home-blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
  margin-bottom:8px;
}

/* ── Task 1/5: lower-section tab bar (Trending / Social / Symbol Lab) ── */
.nf-lt-btn{
  background:rgba(1,22,30,.04);
  border:1.5px solid var(--bs);
  border-radius:20px;
  padding:8px 16px;
  font-family:'Tajawal',sans-serif;
  font-weight:700;
  font-size:12.5px;
  color:var(--muted);
  cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;
}
.nf-lt-btn:hover{
  border-color:#FF9D16;
  color:#FF9D16;
  background:rgba(255,157,22,.07);
}

/* ── Task 6: hidden Legacy Collection section (merged into Clan mode, not deleted) ── */
#sec-legacy-collection{ display:none !important; }

/* ── Task 9: hidden footer keyword-stuffing bar (kept in DOM, not deleted) ── */
.ft-extra{ display:none !important; }