/* ═══════════════════════════════════════════════════════════════════
   NPolls — the remaining legacy page classes.

   Found by audit_styles.py, which compares the classes each page
   actually renders against every selector the stylesheets define. The
   staging host uses a self-signed certificate that the browser tooling
   refuses, so pages cannot be inspected visually; this catches the same
   bug class — markup with no rule behind it.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Functional, not cosmetic ───────────────────────────────────────
   .hidden-hp is a honeypot: an input kept off-screen so spam bots fill
   it and real users never see it. Its CSS went with everything else, so
   it became a visible empty box above "Your Name" — and any human who
   typed in it would have been scored as a bot. */
.hidden-hp,
.hp-field,
input[name="website"][tabindex="-1"] {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* FontAwesome is no longer loaded — the site uses its own SVG sprite —
   so every <i class="fas fa-…"> is an empty inline element leaving a
   stray gap. */
i.fas, i.far, i.fab, i.fa { display: none !important; }

/* Decorative leftovers with nothing to show. */
.filler, .decorative-element, .bottom-left { display: none !important; }

/* The old floating "back to top" and subscribe form, both replaced by
   the shared footer. */
.to-top, .footer-form, .btn-subscribe, .fab { display: none !important; }

/* ── Shared containers ──────────────────────────────────────────── */
.about-container, .faq-container, .card-container,
.legal-wrap, .main-content, .coming-hero {
  max-width: 900px; margin: 0 auto; padding: 40px 24px;
}
.legal-wrap { max-width: 820px; }

/* ── Panels used across these pages ─────────────────────────────── */
.about-card, .legal-card, .faq-item, .card-body, .card-header {
  background: var(--glass); border: 1px solid var(--edge);
  border-radius: var(--r-2); backdrop-filter: blur(16px);
}
.about-card, .legal-card { padding: 24px 26px; margin: 0 0 18px; }
.card-header { padding: 18px 24px; border-radius: var(--r-2) var(--r-2) 0 0; border-bottom: 0; }
.card-body   { padding: 22px 24px; border-radius: 0 0 var(--r-2) var(--r-2); }
.card-header + .card-body { border-top: 0; margin-top: -1px; }

/* ── Heroes ─────────────────────────────────────────────────────── */
.legal-hero, .coming-hero { text-align: center; padding: 56px 24px 30px; }
.legal-hero h1, .coming-hero h1 { margin: 0 0 14px; }
.legal-hero p, .coming-hero p { color: var(--txt-2); max-width: 60ch; margin: 0 auto; }

/* ── Contents list on the legal pages ───────────────────────────── */
.legal-toc {
  background: var(--glass); border: 1px solid var(--edge);
  border-radius: var(--r-2); padding: 20px 24px; margin: 0 0 26px;
}
.legal-toc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.legal-toc a { color: var(--txt-2); text-decoration: none; font-size: 15px; }
.legal-toc a:hover { color: var(--c3); }
.legal-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 0; }

/* ── FAQ accordions ─────────────────────────────────────────────── */
.faq-item { margin: 0 0 10px; overflow: hidden; }
.faq-question {
  cursor: pointer; padding: 16px 20px 16px 46px; position: relative;
  font-weight: 600; font-size: 16px; color: var(--txt);
  transition: background var(--fast) var(--ease);
}
.faq-question:hover { background: var(--glass-2); }
.faq-question::before {
  content: ""; position: absolute; left: 20px; top: 50%; margin-top: -5px;
  width: 8px; height: 8px;
  border-right: 2px solid var(--c3); border-bottom: 2px solid var(--c3);
  transform: rotate(-45deg); transition: transform var(--mid) var(--ease);
}
.faq-item.active .faq-question::before,
.faq-item.open .faq-question::before { transform: rotate(45deg); margin-top: -7px; }
.faq-answer { padding: 0 20px 18px; color: var(--txt-2); }
.faq-answer p:last-child { margin-bottom: 0; }

/* ── Team grid (about) ──────────────────────────────────────────── */
.team-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px; margin: 22px 0;
}
.team-member {
  background: var(--glass); border: 1px solid var(--edge); border-radius: var(--r-2);
  padding: 24px 18px; text-align: center;
  transition: transform var(--mid) var(--spring), box-shadow var(--mid) var(--ease);
}
.team-member:hover { transform: translateY(-4px); box-shadow: var(--glow-a); }
.member-avatar {
  width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 14px;
  display: grid; place-items: center; font-size: 24px; font-weight: 800; color:var(--on-cta);
  background:var(--grad-cta); box-shadow: var(--glow-a); overflow: hidden;
}
.member-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── Forms on contact / auth ────────────────────────────────────── */
.form-group, .form { display: grid; gap: 8px; margin-bottom: 16px; }
.form { gap: 14px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.remember { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--txt-2); }
.remember input { width: auto; }
.foot { margin-top: 20px; font-size: 14px; color: var(--txt-3); text-align: center; }
.foot .link, a.link { color: var(--c3); text-decoration: none; font-weight: 600; }
.foot .link:hover, a.link:hover { text-decoration: underline; }

/* The "or" divider between password and social sign-in. */
.or {
  display: flex; align-items: center; gap: 14px; margin: 20px 0;
  color: var(--txt-3); font-size: 13px; text-transform: uppercase; letter-spacing: .12em;
}
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--edge); }
.line { height: 1px; background: var(--edge); margin: 20px 0; border: 0; }
.social { display: grid; gap: 10px; }
.sbtn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 18px; border-radius: 99px; font-weight: 600; font-size: 14.5px;
  background: var(--glass); border: 1px solid var(--edge); color: var(--txt);
  text-decoration: none; cursor: pointer;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.sbtn:hover { transform: translateY(-2px); border-color: var(--edge-2); }
.txt { color: var(--txt-2); font-size: 14.5px; }

/* ── Notices (mygifts) ──────────────────────────────────────────── */
.payment-issue-banner, .payment-notice {
  background: var(--glass-2); border: 1px solid var(--edge);
  border-left: 3px solid var(--c5); border-radius: var(--r);
  padding: 15px 20px; margin: 0 0 20px; font-size: 14.5px;
}
.payment-issue-banner-content { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ── Category grid (forum placeholder) ──────────────────────────── */
.category-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px; margin: 26px 0;
}
.cta-row, .brand-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 24px 0; }
.btn-pill, .btn-grad-blue, .btn-grad-pink {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: 99px; font-weight: 600; font-size: 15px;
  text-decoration: none; border: 1px solid var(--edge-2); background: var(--glass); color: var(--txt);
  transition: transform var(--fast) var(--spring), box-shadow var(--mid) var(--ease);
}
.btn-grad-blue { background:var(--grad-cta); border-color: transparent; color:var(--on-cta); box-shadow: var(--glow-a); }
.btn-grad-pink { background:var(--grad-cta); border-color:transparent; color:var(--on-cta); box-shadow: var(--glow-r); }
.btn-pill:hover, .btn-grad-blue:hover, .btn-grad-pink:hover { transform: translateY(-3px); }

/* The filter bar's own form, and the poll vote button. */
.search-form { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 220px; }
.vote-btn { width: 100%; }

@media (max-width: 620px) {
  .about-container, .faq-container, .card-container, .legal-wrap,
  .main-content, .coming-hero { padding: 30px 18px; }
  .about-card, .legal-card { padding: 18px 20px; }
}

/* ── More legacy chrome ─────────────────────────────────────────────
   Variants the first pass missed: mygifts and forum.php each carry a
   differently-named header. */
.nav, .nav-inner, .site-header, .menu-toggle, .logo-icon,
.brand, .top-right, .toast-container:empty {
  display: none !important;
}

/* ── Stat tiles (mygifts) ───────────────────────────────────────── */
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px; margin: 0 0 24px;
}
.stat-card {
  background: var(--glass); border: 1px solid var(--edge); border-radius: var(--r-2);
  padding: 20px 22px; backdrop-filter: blur(16px);
  transition: transform var(--mid) var(--spring), box-shadow var(--mid) var(--ease);
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--glow-a); }
.stat-card .value,
.stat-card strong {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: 26px; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-card .label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3); font-weight: 700; }

/* Wide tables need their own scroller so the page never scrolls sideways. */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 22px; }

.social-links { display: flex; gap: 10px; flex-wrap: wrap; }
.social-links a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--glass); border: 1px solid var(--edge); color: var(--txt-2);
  text-decoration: none !important;
  transition: transform var(--fast) var(--spring), box-shadow var(--mid) var(--ease);
}
.social-links a:hover { transform: translateY(-3px); box-shadow: var(--glow-c); color: var(--txt); }

/* ── Button variants ────────────────────────────────────────────── */
.ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: 99px; font-weight: 600; font-size: 14.5px;
  background: transparent; border: 1px solid var(--edge-2); color: var(--txt);
  text-decoration: none !important; cursor: pointer;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.ghost:hover { transform: translateY(-2px); border-color: var(--c3); }

.soon-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 15px; border-radius: 99px; color:var(--on-cta);
  background:var(--grad-cta); box-shadow: var(--glow-a);
}