/*
 * Novex public site — genuinely new component layer, replacing the old
 * AutoVibe-era inline-style/onmouseover-hack styling. Loaded after
 * bootstrap.min.css and style.css; Bootstrap's grid (.container/.row/.col-*)
 * is kept for layout since it's predictable, but every visual component
 * here is custom. See css/style.css's body rule for why text-align:start
 * matters — same fix applies to every block below.
 */

:root {
  --nx-navy-900: #14131f;
  --nx-navy-800: #201f35;
  --nx-navy-700: #26243c;
  --nx-navy-600: #2C2A46;
  --nx-navy-500: #3d3a5c;
  --nx-gray-700: #5c5c5c;
  --nx-gray-500: #848484;
  --nx-gray-200: #e2e2e6;
  --nx-gray-100: #f2f2f4;
  --nx-gray-50: #f8f8fa;
}

/* ==========================================================================
   Layout reset — style.css's `body, main { display:flex }` + `main
   { justify-content:center; align-items:center }` are leftovers from the old
   blog template. On these nx- pages they vertically center all page content
   inside a min-height:100vh body: when content is taller than the viewport
   (any laptop-height window) the overflow is clipped symmetrically, hiding
   the top of the page above the fold and pushing things like the feature
   cards past the bottom. They also shrink the full-bleed .nx-hero banner to
   a centered box instead of full width. body's extra 80px padding-top was
   sized for that old theme's fixed header and just double-stacks with the
   nav clearance nx-hero/nx-page-main already build in themselves. Keeping
   main as a flex column (not display:block) preserves the sticky footer
   (footer's margin-top:auto), just without the centering.
   ========================================================================== */
body { padding-top: 0; }
main { justify-content: flex-start; align-items: stretch; }

/* ==========================================================================
   Nav
   ========================================================================== */
.nx-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: #fff;
  box-shadow: 0 1px 0 rgba(20, 19, 31, 0.06);
}
.nx-nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nx-nav-logo img { height: 34px; width: auto; display: block; }
.nx-nav-links { display: flex; align-items: center; gap: 8px; }
.nx-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--nx-navy-600);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.nx-nav-link:hover { background: var(--nx-gray-100); color: var(--nx-navy-600); }
.nx-nav-link--active {
  background: var(--nx-navy-600);
  color: #fff;
}
.nx-nav-link--active:hover { background: var(--nx-navy-800); color: #fff; }
.nx-nav-lang {
  border: 1px solid var(--nx-gray-200);
  border-radius: 9px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--nx-gray-700);
  text-decoration: none;
}
.nx-nav-lang:hover { border-color: var(--nx-navy-600); color: var(--nx-navy-600); }
.nx-nav-toggle {
  display: none;
  border: none;
  background: transparent;
  font-size: 20px;
  color: var(--nx-navy-600);
  padding: 8px;
}
.nx-nav-mobile {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 12px 20px 20px;
  border-top: 1px solid var(--nx-gray-100);
}
.nx-nav-mobile.show { display: flex; }
@media (max-width: 860px) {
  .nx-nav-links { display: none; }
  .nx-nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.nx-hero {
  position: relative;
  padding: 160px 20px 110px;
  background: linear-gradient(160deg, rgba(20, 19, 31, 0.72) 0%, rgba(44, 42, 70, 0.6) 55%, rgba(44, 42, 70, 0.52) 100%), url('../imgs/bg.jpg');
  background-size: cover;
  background-position: center 40%;
  overflow: hidden;
}
.nx-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 120px;
  background: linear-gradient(180deg, transparent, var(--nx-gray-50));
  pointer-events: none;
}
.nx-hero-inner {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.nx-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 20px;
  margin-bottom: 22px;
}
.nx-hero h1 {
  font-size: 2.6rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 16px;
  line-height: 1.25;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
}
.nx-hero p {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.78);
  max-width: 560px;
  margin: 0 auto 36px;
  line-height: 1.8;
}
.nx-hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.nx-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 12px;
  font-size: 15.5px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.nx-btn:hover { transform: translateY(-2px); }
.nx-btn--primary {
  background: var(--nx-navy-600);
  color: #fff;
  box-shadow: 0 10px 24px rgba(44, 42, 70, 0.25);
}
.nx-btn--primary:hover { background: var(--nx-navy-800); color: #fff; box-shadow: 0 14px 30px rgba(44, 42, 70, 0.32); }
.nx-btn--secondary {
  background: #fff;
  color: var(--nx-navy-600);
  border: 1.5px solid var(--nx-gray-200);
}
.nx-btn--secondary:hover { border-color: var(--nx-navy-600); box-shadow: 0 10px 24px rgba(20, 19, 31, 0.1); }
.nx-btn--block { width: 100%; justify-content: center; }

/* Hero sits on a dark photo background — flip the button contrast so the
   primary CTA reads clearly instead of navy-on-navy. */
.nx-hero .nx-btn--primary {
  background: #fff;
  color: var(--nx-navy-700);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}
.nx-hero .nx-btn--primary:hover { background: var(--nx-gray-50); color: var(--nx-navy-800); }
.nx-hero .nx-btn--secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(6px);
}
.nx-hero .nx-btn--secondary:hover { background: rgba(255, 255, 255, 0.16); border-color: #fff; box-shadow: none; }

/* ==========================================================================
   Feature strip (trust markers below hero)
   ========================================================================== */
.nx-features-section {
  background: var(--nx-gray-50);
  padding: 0 20px 70px;
}
.nx-features {
  max-width: 980px;
  margin: 0 auto;
  transform: translateY(-46px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.nx-feature {
  background: #fff;
  border: 1px solid var(--nx-gray-100);
  border-radius: 14px;
  padding: 26px 24px;
  text-align: center;
  box-shadow: 0 16px 34px rgba(20, 19, 31, 0.09);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nx-feature:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(20, 19, 31, 0.13); }
.nx-feature-icon {
  width: 50px; height: 50px;
  border-radius: 13px;
  background: linear-gradient(145deg, var(--nx-navy-600), var(--nx-navy-800));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  margin: 0 auto 16px;
  box-shadow: 0 8px 18px rgba(44, 42, 70, 0.3);
}
.nx-feature h3 { font-size: 15px; font-weight: 700; color: var(--nx-navy-700); margin: 0 0 6px; }
.nx-feature p { font-size: 13px; color: var(--nx-gray-500); margin: 0; line-height: 1.7; }

@media (max-width: 760px) {
  .nx-hero { padding: 130px 16px 100px; }
  .nx-hero h1 { font-size: 1.9rem; }
  .nx-features { grid-template-columns: 1fr; transform: translateY(-32px); }
  .nx-features-section { padding-bottom: 40px; }
}

/* ==========================================================================
   Page header (activation / search — non-hero pages)
   ========================================================================== */
.nx-page-main {
  display: block;
  min-height: 100vh;
  background:
    radial-gradient(560px 320px at 50% 0%, rgba(44, 42, 70, 0.09), transparent 70%),
    var(--nx-gray-50);
}
.nx-page {
  padding: 96px 20px 70px;
  max-width: 640px;
  margin: 0 auto;
  min-width: 0;
  box-sizing: border-box;
}
.nx-page-head { text-align: center; margin-bottom: 22px; }
.nx-page-head h1 { font-size: 1.7rem; font-weight: 800; color: var(--nx-navy-700); margin: 0 0 8px; }
.nx-page-head p { font-size: 14px; color: var(--nx-gray-500); margin: 0; }

.nx-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(20, 19, 31, 0.06);
  padding: 32px;
  box-sizing: border-box;
}
@media (max-width: 560px) {
  .nx-page { padding: 86px 14px 50px; }
  .nx-card { padding: 22px; }
}

/* ==========================================================================
   Forms
   ========================================================================== */
.nx-field { margin-bottom: 18px; }
.nx-field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--nx-navy-700);
  margin-bottom: 7px;
}
.nx-field .nx-required { color: #d64545; }
.nx-field input[type="text"],
.nx-field input[type="tel"],
.nx-field input[type="number"] {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 16px;
  border: 1.5px solid var(--nx-gray-200);
  border-radius: 11px;
  font-size: 14.5px;
  background: var(--nx-gray-50);
  color: var(--nx-navy-700);
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.nx-field input:focus {
  border-color: var(--nx-navy-600);
  background: #fff;
}
.nx-field-feedback { font-size: 12.5px; margin-top: 6px; }
.nx-field-feedback--error { color: #d64545; }
.nx-field-feedback--success { color: #1f9d55; }

.nx-note {
  background: var(--nx-gray-50);
  border-inline-start: 3px solid var(--nx-navy-600);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--nx-gray-700);
  margin-bottom: 22px;
}

.nx-alert { border-radius: 10px; padding: 13px 16px; font-size: 13.5px; font-weight: 600; margin-bottom: 18px; }
.nx-alert--success { background: #eaf7ee; color: #1f9d55; }
.nx-alert--error { background: #fdeeee; color: #d64545; }
.nx-alert--info { background: var(--nx-gray-50); color: var(--nx-navy-700); }

/* ==========================================================================
   Search results
   ========================================================================== */
.nx-result-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(20, 19, 31, 0.06);
  padding: 28px;
  margin-top: 24px;
}
.nx-result-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--nx-gray-100);
  font-size: 13.5px;
}
.nx-result-row:last-child { border-bottom: none; }
.nx-result-row span:first-child { color: var(--nx-gray-500); }
.nx-result-row span:last-child { color: var(--nx-navy-700); font-weight: 700; }

/* ==========================================================================
   Activation form — the JS validation in activation.php is wired to exact
   element IDs and Bootstrap's own state classes (.form-control, .is-invalid,
   .is-valid, .invalid-feedback), so the markup there is untouched. These
   rules re-skin those same classes instead of replacing them, giving a
   genuinely different look with zero risk to the validation logic.
   ========================================================================== */
.nx-page .card {
  border: none;
  border-radius: 16px;
  box-shadow: 0 20px 46px rgba(20, 19, 31, 0.12);
  /* Explicit "visible" — not just an omitted overflow:hidden — because
     style.css's legacy .card rule still sets overflow:hidden and would
     otherwise win. The card is a flex column, and with this many stacked
     form rows its auto-height sometimes resolves a couple px short of the
     actual content (fractional line-height/padding rounding); overflow:hidden
     was silently clipping the bottom of the submit button because of that.
     The only child that actually needs clipping to the card's rounded
     corners is the header (flush to the top edge, its own background), so
     that gets its own radius below instead. */
  overflow: visible;
}
.nx-page .card-header {
  background: linear-gradient(120deg, var(--nx-navy-600), var(--nx-navy-800)) !important;
  border: none;
  border-radius: 16px 16px 0 0;
  padding: 20px 28px;
  font-weight: 700;
  font-size: 16px !important;
}
.nx-page .card-body { padding: 28px; }
.nx-page .form-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--nx-navy-700);
  margin-bottom: 7px;
}
/* activation.php marks required labels with class="required", but style.css's
   auto-asterisk rule targets ".required-field" — the mismatch meant this page
   showed no required-field indicator at all, unlike the search page (which
   hardcodes a <span>*</span>). Re-added here under the matching classname. */
.nx-page .form-label.required::after {
  content: "*";
  color: #d64545;
  margin-inline-start: 4px;
  font-weight: 700;
}
.nx-page .form-control {
  border: 1.5px solid var(--nx-gray-200);
  border-radius: 11px;
  padding: 12px 16px;
  font-size: 14.5px;
  background: var(--nx-gray-50);
  color: var(--nx-navy-700);
  box-shadow: none;
}
.nx-page .form-control:focus {
  border-color: var(--nx-navy-600);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(44, 42, 70, 0.12);
}
.nx-page .form-control:disabled { background: var(--nx-gray-100); color: var(--nx-gray-500); }
.nx-page .form-control.is-valid { border-color: #1f9d55; background-image: none; }
.nx-page .form-control.is-invalid { border-color: #d64545; background-image: none; }
.nx-page .invalid-feedback { font-size: 12.5px; }
.nx-page .gnotice {
  display: block;
  border: none !important;
  background: #fdeeee;
  color: #b23b3b;
  border-radius: 10px;
  padding: 14px 16px !important;
  font-size: 13px;
  font-weight: 600;
}
.nx-page .activate {
  /* style.css has an unrelated legacy ".activate" class (an old "activate
     account" tile, nothing to do with this submit button) that below 768px
     forces width:125% / a -35px side margin / border-radius:0, all with
     !important — that's a real class-name collision, not a design choice,
     and it made this button spill past the card edge on any phone-width
     screen. !important here is the only way to actually win against that. */
  width: 100% !important;
  margin: 0 !important;
  border-radius: 12px !important;
  padding: 15px !important;
  font-size: 15.5px;
  font-weight: 700;
  border: none;
  box-shadow: 0 10px 24px rgba(44, 42, 70, 0.25);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}
.nx-page .activate:hover { transform: translateY(-2px); background: var(--nx-navy-800) !important; }
.nx-page #notification {
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
}
.nx-page #notification a { color: inherit; text-decoration: underline; font-weight: 700; }

/* ==========================================================================
   Search page — reuses .nx-page/.card rules above; adds its own buttons,
   result table and wide-results variant (results table needs more room
   than the 640px form column).
   ========================================================================== */
.nx-page--wide { max-width: 980px; }
.nx-page .serial-feedback { font-size: 12.5px; margin-top: 6px; }
.nx-page .btn-primary {
  background: var(--nx-navy-600);
  border: none;
  border-radius: 12px;
  padding: 13px 26px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(44, 42, 70, 0.25);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.nx-page .btn-primary:hover { transform: translateY(-2px); background: var(--nx-navy-800); }
.nx-page .btn-secondary {
  background: #fff;
  border: 1.5px solid var(--nx-gray-200);
  color: var(--nx-navy-700);
  border-radius: 12px;
  padding: 13px 26px;
  font-weight: 700;
}
.nx-page .btn-secondary:hover { border-color: var(--nx-navy-600); color: var(--nx-navy-600); background: #fff; }
.nx-page .alert-info {
  background: var(--nx-gray-50);
  color: var(--nx-navy-700);
  border: none;
  border-radius: 10px;
  padding: 14px 16px;
}
.nx-page .table thead th {
  background: var(--nx-gray-50);
  color: var(--nx-navy-700);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 2px solid var(--nx-gray-100);
  white-space: nowrap;
}
.nx-page .table td {
  font-size: 13.5px;
  color: var(--nx-navy-700);
  vertical-align: middle;
}
.nx-page .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--nx-gray-50); }
.nx-page .table .btn-info {
  background: var(--nx-navy-600);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
}
.nx-page .table .btn-info:hover { background: var(--nx-navy-800); }