/*
 * BISON warranty site — component layer.
 *
 * 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.
 *
 * The palette, radius scale and type roles are lifted from the BISON brand
 * site (bison-site/assets/css/bison.css) so the warranty flow reads as the
 * same product rather than a bolted-on subdomain: three layered near-blacks,
 * exactly one hot accent used sparingly, pill-shaped controls, a condensed
 * uppercase display face over a humanist body face set in grey.
 *
 * The .nx-* class prefix is kept throughout. It is an internal selector
 * namespace wired into activation.php/search.php's markup and JS; renaming it
 * would be churn with a real regression risk and no visible effect.
 */

:root {
  /* Brand — the exact values shipped in the logo package. */
  --bsn-red:        #e00b00;
  --bsn-red-hover:  #b30900;
  --bsn-red-deep:   #7a0600;

  /* Surfaces — three layers, none of them pure black. */
  --bsn-bg:         #0f0e0e;
  --bsn-bg-alt:     #141313;
  --bsn-surface:    #1a1818;
  --bsn-surface-2:  #221f1f;
  --bsn-line:       #383434;
  --bsn-line-soft:  rgba(255, 255, 255, 0.08);

  /* Text — body copy is grey, never white. */
  --bsn-text:       #ffffff;
  --bsn-text-dim:   #9a9696;
  --bsn-text-faint: #6b6767;

  --bsn-ok:     #2da05a;
  --bsn-ok-fg:  #7fd6a2;
  --bsn-err-fg: #ff8b84;

  --bsn-font-display: 'Barlow Condensed', 'Cairo', system-ui, sans-serif;
  --bsn-font-body:    'Barlow', 'IBM Plex Sans Arabic', system-ui, sans-serif;

  --bsn-radius-sm:    10px;
  --bsn-radius-md:    16px;
  --bsn-radius-lg:    24px;
  --bsn-radius-pill:  999px;
  --bsn-radius-round: 50%;

  --bsn-t-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --bsn-t-med:  0.35s cubic-bezier(0.4, 0, 0.2, 1);

  --bsn-shadow-card: 0 24px 56px -28px rgba(0, 0, 0, 0.95);
  --bsn-glow-red:    0 12px 34px -12px rgba(224, 11, 0, 0.7);

  /* linear-gradient() has no logical side-or-corner keyword, and an invalid
     layer invalidates the whole background declaration — so the hero scrim is
     aimed with a flippable angle instead. 90deg points right, 270deg left. */
  --bsn-dir-angle: 90deg;
}
[dir="rtl"] { --bsn-dir-angle: 270deg; }

/* ==========================================================================
   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 the overflow is clipped symmetrically, hiding the top of the page
   above the fold and pushing 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; }

::selection { background: var(--bsn-red); color: #fff; }
:focus-visible { outline: 2px solid var(--bsn-red); outline-offset: 3px; }

/* Bootstrap colour utilities, repointed at the brand palette. These are not
   decorative: search.php marks its required fields with .text-danger and its
   serial-check JS swaps .text-danger / .text-success on the live feedback
   line, so leaving them on Bootstrap's stock red and green would put two
   foreign colours next to every form field. .bg-light is on the footer, where
   Bootstrap's near-white would punch a hole in the page. */
.text-danger  { color: var(--bsn-err-fg) !important; }
.text-success { color: var(--bsn-ok-fg) !important; }
.text-muted   { color: var(--bsn-text-faint) !important; }
.bg-light     { background-color: var(--bsn-bg-alt) !important; }
/* The lone asterisk after a required label reads better in the pure accent
   than in the softened error tint used for sentences of feedback text. */
.form-label .text-danger { color: var(--bsn-red) !important; }

/* ==========================================================================
   Nav
   ========================================================================== */
.nx-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(15, 14, 14, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bsn-line);
}
.nx-nav-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nx-nav-logo img { height: 40px; width: auto; display: block; }
.nx-nav-links { display: flex; align-items: center; gap: 4px; }
.nx-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-family: var(--bsn-font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bsn-text-dim);
  text-decoration: none;
  transition: color var(--bsn-t-fast);
  white-space: nowrap;
}
/* Arabic has no case, and the tight Latin tracking crowds its joined forms. */
[dir="rtl"] .nx-nav-link { letter-spacing: 0; text-transform: none; font-size: 16px; }
.nx-nav-link:hover { color: var(--bsn-text); }
/* Red underline marking the current page. */
.nx-nav-link::after {
  content: "";
  position: absolute;
  inset-block-end: 2px;
  inset-inline-start: 14px;
  width: 0;
  height: 2px;
  background: var(--bsn-red);
  transition: width var(--bsn-t-fast);
}
.nx-nav-link--active { color: var(--bsn-text); }
.nx-nav-link--active::after { width: calc(100% - 28px); }

.nx-nav-lang {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding-inline: 16px;
  border: 1px solid transparent;
  border-radius: var(--bsn-radius-pill);
  font-family: var(--bsn-font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--bsn-text-dim);
  text-decoration: none;
  transition: color var(--bsn-t-fast), border-color var(--bsn-t-fast);
}
.nx-nav-lang:hover { color: var(--bsn-text); border-color: var(--bsn-line); }

.nx-nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--bsn-line);
  border-radius: var(--bsn-radius-sm);
  background: transparent;
  font-size: 18px;
  color: var(--bsn-text);
  padding: 0;
}
.nx-nav-mobile {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 8px 24px 22px;
  background: var(--bsn-bg-alt);
  border-top: 1px solid var(--bsn-line);
}
.nx-nav-mobile.show { display: flex; }
.nx-nav-mobile .nx-nav-link { padding: 14px 0; border-bottom: 1px solid var(--bsn-line-soft); }
.nx-nav-mobile .nx-nav-link::after { inset-inline-start: 0; }
.nx-nav-mobile .nx-nav-link--active::after { width: 24px; }
.nx-nav-mobile .nx-nav-lang { align-self: flex-start; margin-top: 16px; border-color: var(--bsn-line); }
@media (max-width: 900px) {
  .nx-nav-links { display: none; }
  .nx-nav-toggle { display: inline-flex; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
/* The BISON marketing hero sets its copy to one side and scrims that side
   with a directional gradient. This one is centred, straddling the brightest
   part of the photograph, so it takes a centred scrim instead: an ellipse
   under the copy plus a vertical pass that darkens the top for the fixed nav.
   A directional gradient here would darken one shoulder and leave the other
   competing with the headline. */
.nx-hero {
  position: relative;
  padding: 170px 24px 120px;
  background:
    radial-gradient(120% 85% at 50% 45%,
      rgba(15, 14, 14, 0.88) 0%, rgba(15, 14, 14, 0.66) 45%, rgba(15, 14, 14, 0.3) 100%),
    linear-gradient(180deg, rgba(15, 14, 14, 0.9) 0%, transparent 30%),
    url('../imgs/hero.webp') center 55% / cover no-repeat,
    var(--bsn-bg);
  overflow: hidden;
}
/* The scrim below is a seam-softener into the next section, not a fade-out. */
.nx-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 130px;
  background: linear-gradient(180deg, transparent, var(--bsn-bg));
  pointer-events: none;
}
.nx-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
/* Kicker — the short red rule that opens every BISON section heading. */
.nx-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--bsn-font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bsn-red);
  background: none;
  border: none;
  padding: 0;
  margin-bottom: 18px;
}
[dir="rtl"] .nx-hero-badge { letter-spacing: 0; text-transform: none; font-size: 16px; }
.nx-hero-badge::before,
.nx-hero-badge::after {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--bsn-red);
  flex: none;
}
.nx-hero h1 {
  font-family: var(--bsn-font-display);
  font-size: clamp(2.2rem, 5.4vw, 3.6rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--bsn-text);
  margin: 0 0 18px;
  line-height: 1.05;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}
[dir="rtl"] .nx-hero h1 { text-transform: none; letter-spacing: 0; line-height: 1.35; }
/* Lifted off --bsn-text-dim: that grey is calibrated for body copy on a flat
   surface, and over a photograph it drops under the 4.5:1 contrast floor. */
.nx-hero p {
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, 0.84);
  max-width: 58ch;
  margin: 0 auto 36px;
  line-height: 1.8;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
[dir="rtl"] .nx-hero p { line-height: 1.95; }
.nx-hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.nx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 32px;
  height: 54px;
  border: 1px solid transparent;
  border-radius: var(--bsn-radius-pill);
  font-family: var(--bsn-font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--bsn-t-fast), border-color var(--bsn-t-fast),
              background var(--bsn-t-fast), transform var(--bsn-t-fast),
              box-shadow var(--bsn-t-med);
}
[dir="rtl"] .nx-btn { letter-spacing: 0; text-transform: none; font-size: 17px; }
.nx-btn > * { position: relative; z-index: 1; }

/* A light sheen crosses the button once on hover. Deliberately in physical
   units: the sweep is decoration with no reading direction, so it should look
   identical in Arabic and English. */
.nx-btn::after {
  content: "";
  position: absolute;
  inset-block: -60%;
  left: -75%;
  width: 45%;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
  transform: skewX(-20deg);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}
.nx-btn:hover::after { animation: nx-sheen 0.72s ease-out; }
@keyframes nx-sheen {
  from { opacity: 1; transform: skewX(-20deg) translateX(0); }
  to   { opacity: 1; transform: skewX(-20deg) translateX(390%); }
}

.nx-btn--primary {
  background: linear-gradient(135deg, #f5180b 0%, var(--bsn-red) 52%, var(--bsn-red-hover) 100%);
  color: #fff;
  box-shadow: var(--bsn-glow-red);
}
.nx-btn--primary:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 18px 44px -12px rgba(224, 11, 0, 0.85);
}
.nx-btn--secondary {
  background: rgba(255, 255, 255, 0.03);
  color: var(--bsn-text);
  border-color: var(--bsn-line);
  backdrop-filter: blur(6px);
}
.nx-btn--secondary:hover {
  color: #fff;
  border-color: var(--bsn-red);
  background: rgba(224, 11, 0, 0.12);
  transform: translateY(-2px);
}
.nx-btn:active { transform: translateY(0); }
.nx-btn--block { display: flex; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .nx-btn:hover::after { animation: none; }
  .nx-btn--primary:hover, .nx-btn--secondary:hover { transform: none; }
}

/* ==========================================================================
   Feature strip (trust markers below hero)
   ========================================================================== */
.nx-features-section {
  background: var(--bsn-bg);
  padding: 0 24px clamp(64px, 9vw, 110px);
}
.nx-features {
  max-width: 1080px;
  margin: 0 auto;
  transform: translateY(-46px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}
.nx-feature {
  position: relative;
  background: var(--bsn-surface);
  border: 1px solid var(--bsn-line-soft);
  border-radius: var(--bsn-radius-md);
  padding: 32px 28px;
  text-align: center;
  transition: background var(--bsn-t-fast), border-color var(--bsn-t-fast),
              transform var(--bsn-t-med), box-shadow var(--bsn-t-med);
}
.nx-feature:hover {
  background: var(--bsn-surface-2);
  border-color: rgba(224, 11, 0, 0.38);
  transform: translateY(-4px);
  box-shadow: var(--bsn-shadow-card);
}
/* Circular icon badge — the one round element inside an otherwise square
   card, which is what stops a grid of three reading as a wall of boxes. */
.nx-feature-icon {
  width: 58px; height: 58px;
  border-radius: var(--bsn-radius-round);
  border: 1px solid var(--bsn-line);
  background: var(--bsn-bg);
  color: var(--bsn-red);
  display: flex; align-items: center; justify-content: center;
  font-size: 21px;
  margin: 0 auto 20px;
  transition: background var(--bsn-t-fast), border-color var(--bsn-t-fast), color var(--bsn-t-fast);
}
.nx-feature:hover .nx-feature-icon { background: var(--bsn-red); border-color: var(--bsn-red); color: #fff; }
.nx-feature h3 {
  font-family: var(--bsn-font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--bsn-text);
  margin: 0 0 10px;
  line-height: 1.3;
}
[dir="rtl"] .nx-feature h3 { text-transform: none; }
.nx-feature p { font-size: 0.9375rem; color: var(--bsn-text-dim); margin: 0; line-height: 1.75; }

@media (max-width: 900px) {
  .nx-hero { padding: 140px 18px 100px; }
  .nx-features { grid-template-columns: 1fr; transform: translateY(-32px); }
  .nx-features-section { padding-bottom: 48px; }
}

/* ==========================================================================
   Page header (activation / search — non-hero pages)
   ========================================================================== */
.nx-page-main {
  display: block;
  min-height: 100vh;
  background:
    radial-gradient(680px 380px at 50% 0%, rgba(224, 11, 0, 0.10), transparent 70%),
    var(--bsn-bg);
}
.nx-page {
  padding: 128px 24px 80px;
  max-width: 660px;
  margin: 0 auto;
  min-width: 0;
  box-sizing: border-box;
}
.nx-page-head { text-align: center; margin-bottom: 26px; }
.nx-page-head h1 {
  font-family: var(--bsn-font-display);
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--bsn-text);
  margin: 0 0 10px;
  line-height: 1.1;
}
[dir="rtl"] .nx-page-head h1 { text-transform: none; letter-spacing: 0; line-height: 1.35; }
.nx-page-head p { font-size: 0.9375rem; color: var(--bsn-text-dim); margin: 0; }

.nx-card {
  background: var(--bsn-surface);
  border: 1px solid var(--bsn-line-soft);
  border-radius: var(--bsn-radius-lg);
  box-shadow: var(--bsn-shadow-card);
  padding: 34px;
  box-sizing: border-box;
}
@media (max-width: 600px) {
  .nx-page { padding: 110px 16px 56px; }
  .nx-card { padding: 24px; }
}

/* ==========================================================================
   Forms
   ========================================================================== */
.nx-field { margin-bottom: 20px; }
.nx-field label {
  display: block;
  font-family: var(--bsn-font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bsn-text);
  margin-bottom: 9px;
}
[dir="rtl"] .nx-field label { letter-spacing: 0; text-transform: none; font-size: 15px; }
.nx-field .nx-required { color: var(--bsn-red); }
.nx-field input[type="text"],
.nx-field input[type="tel"],
.nx-field input[type="number"] {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid var(--bsn-line);
  border-radius: var(--bsn-radius-sm);
  font-size: 1rem;
  background: var(--bsn-bg);
  color: var(--bsn-text);
  outline: none;
  transition: border-color var(--bsn-t-fast), background var(--bsn-t-fast);
}
.nx-field input::placeholder { color: var(--bsn-text-faint); }
.nx-field input:focus {
  border-color: var(--bsn-red);
  background: var(--bsn-surface-2);
}
.nx-field-feedback { font-size: 0.8125rem; margin-top: 7px; }
.nx-field-feedback--error { color: var(--bsn-err-fg); }
.nx-field-feedback--success { color: var(--bsn-ok-fg); }

.nx-note {
  background: var(--bsn-bg);
  border: 1px solid var(--bsn-line-soft);
  border-inline-start: 3px solid var(--bsn-red);
  border-radius: var(--bsn-radius-sm);
  padding: 14px 18px;
  font-size: 0.875rem;
  color: var(--bsn-text-dim);
  margin-bottom: 24px;
}

.nx-alert {
  border-radius: var(--bsn-radius-sm);
  border-inline-start: 3px solid;
  padding: 16px 20px;
  font-size: 0.9375rem;
  font-weight: 500;
  margin-bottom: 20px;
}
.nx-alert--success { background: rgba(45, 160, 90, 0.1); border-color: var(--bsn-ok); color: var(--bsn-ok-fg); }
.nx-alert--error   { background: rgba(224, 11, 0, 0.1); border-color: var(--bsn-red); color: var(--bsn-err-fg); }
.nx-alert--info    { background: var(--bsn-surface-2); border-color: var(--bsn-line); color: var(--bsn-text-dim); }

/* ==========================================================================
   Search results
   ========================================================================== */
.nx-result-card {
  background: var(--bsn-surface);
  border: 1px solid var(--bsn-line-soft);
  border-radius: var(--bsn-radius-lg);
  box-shadow: var(--bsn-shadow-card);
  padding: 30px;
  margin-top: 24px;
}
.nx-result-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--bsn-line-soft);
  font-size: 0.9375rem;
}
.nx-result-row:last-child { border-bottom: none; }
.nx-result-row span:first-child { color: var(--bsn-text-faint); }
.nx-result-row span:last-child { color: var(--bsn-text); font-weight: 600; }

/* ==========================================================================
   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 the
   BISON look with zero risk to the validation logic.
   ========================================================================== */
.nx-page .card {
  background: var(--bsn-surface);
  border: 1px solid var(--bsn-line-soft);
  border-radius: var(--bsn-radius-lg);
  box-shadow: var(--bsn-shadow-card);
  /* 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:hover { transform: none; box-shadow: var(--bsn-shadow-card); }
.nx-page .card-header {
  background: linear-gradient(135deg, #f5180b 0%, var(--bsn-red) 52%, var(--bsn-red-hover) 100%) !important;
  color: #fff !important;
  border: none;
  border-radius: calc(var(--bsn-radius-lg) - 1px) calc(var(--bsn-radius-lg) - 1px) 0 0 !important;
  padding: 22px 30px;
  font-family: var(--bsn-font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 17px !important;
}
[dir="rtl"] .nx-page .card-header { letter-spacing: 0; text-transform: none; }
.nx-page .card-body { padding: 30px; }
.nx-page .form-label {
  font-family: var(--bsn-font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bsn-text);
  margin-bottom: 9px;
}
[dir="rtl"] .nx-page .form-label { letter-spacing: 0; text-transform: none; font-size: 15px; }
/* 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: var(--bsn-red);
  margin-inline-start: 4px;
  font-weight: 700;
}
.nx-page .form-control {
  border: 1px solid var(--bsn-line);
  border-radius: var(--bsn-radius-sm);
  padding: 14px 16px;
  font-size: 1rem;
  background: var(--bsn-bg);
  color: var(--bsn-text);
  box-shadow: none;
  transform: none;
}
.nx-page .form-control::placeholder { color: var(--bsn-text-faint); }
.nx-page .form-control:focus {
  border-color: var(--bsn-red);
  background: var(--bsn-surface-2);
  color: var(--bsn-text);
  box-shadow: 0 0 0 3px rgba(224, 11, 0, 0.18);
  transform: none;
}
.nx-page .form-control:disabled { background: var(--bsn-surface-2); color: var(--bsn-text-faint); }
.nx-page .form-control.is-valid { border-color: var(--bsn-ok); background-image: none; }
.nx-page .form-control.is-invalid { border-color: var(--bsn-red); background-image: none; }
.nx-page .valid-feedback { color: var(--bsn-ok-fg); }
.nx-page .invalid-feedback { font-size: 0.8125rem; color: var(--bsn-err-fg); }
.nx-page .gnotice {
  display: block;
  border: none !important;
  border-inline-start: 3px solid var(--bsn-red) !important;
  background: rgba(224, 11, 0, 0.1);
  color: var(--bsn-err-fg);
  border-radius: var(--bsn-radius-sm);
  padding: 15px 18px !important;
  font-size: 0.875rem;
  font-weight: 500;
}
.nx-page .activate {
  /* style.css has an unrelated legacy ".activate" class (an old "activate
     account" tile, nothing to do with this submit button) that still sets a
     115% width and a negative side margin — a real class-name collision, not
     a design choice, and it made this button spill past the card edge. The
     !important flags below are what actually win against it. */
  width: 100% !important;
  margin: 0 !important;
  border-radius: var(--bsn-radius-pill) !important;
  padding: 16px !important;
  background: linear-gradient(135deg, #f5180b 0%, var(--bsn-red) 52%, var(--bsn-red-hover) 100%) !important;
  color: #fff !important;
  font-family: var(--bsn-font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: none;
  box-shadow: var(--bsn-glow-red);
  transition: transform var(--bsn-t-fast), box-shadow var(--bsn-t-med), background var(--bsn-t-fast) !important;
}
[dir="rtl"] .nx-page .activate { letter-spacing: 0; text-transform: none; font-size: 17px; }
.nx-page .activate:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px -12px rgba(224, 11, 0, 0.85);
}
.nx-page #notification {
  border-radius: var(--bsn-radius-sm);
  font-size: 0.9375rem;
  font-weight: 500;
}
.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 (the results table needs more room
   than the 660px form column).
   ========================================================================== */
.nx-page--wide { max-width: 1080px; }
.nx-page .serial-feedback { font-size: 0.8125rem; margin-top: 7px; }
.nx-page .btn-primary,
.nx-page .btn-secondary {
  border-radius: var(--bsn-radius-pill);
  padding: 14px 30px;
  font-family: var(--bsn-font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform var(--bsn-t-fast), box-shadow var(--bsn-t-med),
              background var(--bsn-t-fast), border-color var(--bsn-t-fast), color var(--bsn-t-fast);
}
[dir="rtl"] .nx-page .btn-primary,
[dir="rtl"] .nx-page .btn-secondary { letter-spacing: 0; text-transform: none; font-size: 16px; }
.nx-page .btn-primary {
  background: linear-gradient(135deg, #f5180b 0%, var(--bsn-red) 52%, var(--bsn-red-hover) 100%);
  border: 1px solid transparent;
  color: #fff;
  box-shadow: var(--bsn-glow-red);
}
.nx-page .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px -12px rgba(224, 11, 0, 0.85);
}
.nx-page .btn-secondary {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--bsn-line);
  color: var(--bsn-text);
  box-shadow: none;
}
.nx-page .btn-secondary:hover {
  border-color: var(--bsn-red);
  background: rgba(224, 11, 0, 0.12);
  color: #fff;
  transform: translateY(-2px);
}
.nx-page .alert-info {
  background: var(--bsn-surface-2);
  color: var(--bsn-text-dim);
  border: none;
  border-inline-start: 3px solid var(--bsn-line);
  border-radius: var(--bsn-radius-sm);
  padding: 16px 20px;
}
.nx-page .alert-danger {
  background: rgba(224, 11, 0, 0.1);
  color: var(--bsn-err-fg);
  border: none;
  border-inline-start: 3px solid var(--bsn-red);
}
.nx-page .alert-success {
  background: rgba(45, 160, 90, 0.1);
  color: var(--bsn-ok-fg);
  border: none;
  border-inline-start: 3px solid var(--bsn-ok);
}

/* Bootstrap 5 drives table colours through its own --bs-table-* custom
   properties, so the dark skin has to be set there rather than on td/th —
   otherwise .table-striped and :hover keep painting their light defaults on
   top. Note these share Bootstrap's own --bs- prefix by coincidence; the
   brand tokens above are the ones named --bsn-red / --bsn-surface / etc. */
.nx-page .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--bsn-text-dim);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-striped-color: var(--bsn-text-dim);
  --bs-table-hover-bg: var(--bsn-surface-2);
  --bs-table-hover-color: var(--bsn-text);
  --bs-table-border-color: var(--bsn-line-soft);
  color: var(--bsn-text-dim);
  border-radius: var(--bsn-radius-md);
  overflow: hidden;
  box-shadow: none;
}
.nx-page .table thead th {
  background: var(--bsn-bg);
  color: var(--bsn-text);
  font-family: var(--bsn-font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 2px solid var(--bsn-line);
  white-space: nowrap;
}
[dir="rtl"] .nx-page .table thead th { letter-spacing: 0; text-transform: none; font-size: 14px; }
.nx-page .table td {
  font-size: 0.9375rem;
  color: var(--bsn-text-dim);
  border-color: var(--bsn-line-soft);
  vertical-align: middle;
}
/* style.css slides table rows 5px sideways on hover and paints a navy edge; on
   the dark surface a red edge with no displacement reads better and keeps the
   columns aligned while the visitor scans down them. */
.nx-page .table tr:hover { transform: none; box-shadow: none; }
.nx-page .table tbody tr:hover td:first-child { border-inline-start: 3px solid var(--bsn-red); }
.nx-page .table .btn-info {
  background: var(--bsn-red);
  border: none;
  border-radius: var(--bsn-radius-pill);
  padding: 8px 18px;
  color: #fff;
  font-family: var(--bsn-font-display);
  font-size: 14px;
  font-weight: 700;
  box-shadow: none;
}
.nx-page .table .btn-info:hover { background: var(--bsn-red-hover); transform: none; }