/*
 * AurBoss — Auth Experience Redesign
 * Fintech-light, mobile-first. Built entirely on the existing --ab-* design
 * tokens from redesign.css (loaded earlier). No new Tailwind classes, no build
 * step. Scoped to the .abx-shell wrapper used by layouts/auth2.blade.php.
 *
 * Sections:
 *   1. Scope tokens & reset
 *   2. Shell (mobile-first split → desktop two columns)
 *   3. Top bar (language + auth links)
 *   4. Buttons
 *   5. Brand panel (visual side)
 *   6. Hero (welcome)            [Task 2]
 *   7. Product mock (CSS visual) [Task 2]
 *   8. Login form                [Task 3]
 *   9. Motion / a11y
 */

/* ==========================================================================
   1. Scope tokens & reset
   ========================================================================== */

.abx-shell {
  /* Local aliases mapped to the global design system tokens. */
  --abx-primary:        var(--ab-primary-600, #2563EB);
  --abx-primary-strong: var(--ab-primary-700, #1D4ED8);
  --abx-primary-deep:   var(--ab-primary-800, #1E40AF);
  --abx-primary-tint:   var(--ab-primary-50,  #EEF4FF);
  --abx-primary-tint2:  var(--ab-primary-100, #DBEAFE);
  --abx-bg:             var(--ab-surface-bg,   #F8FAFC);
  --abx-card:           var(--ab-surface-card, #FFFFFF);
  --abx-border:         var(--ab-surface-border, #E2E8F0);
  --abx-text:           var(--ab-text-primary,   #0F172A);
  --abx-text-2:         var(--ab-text-secondary, #475569);
  --abx-text-3:         var(--ab-text-tertiary,  #94A3B8);
  --abx-ring: 0 0 0 4px rgba(37, 99, 235, 0.18);

  font-family: 'Almarai', system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--abx-text);
  background: var(--abx-bg);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}

.abx-rtl { direction: rtl; }
.abx-ltr { direction: ltr; }

.abx-shell *,
.abx-shell *::before,
.abx-shell *::after { box-sizing: border-box; }

/* ==========================================================================
   2. Shell layout — mobile first
   ========================================================================== */

/* On mobile the brand panel is a compact header; content overlaps it with a
   rounded top edge for a modern layered feel. */
.abx-brand-panel {
  position: relative;
  padding: 84px 24px 72px;
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(37, 99, 235, 0.10) 0%, rgba(37, 99, 235, 0) 55%),
    linear-gradient(165deg, var(--abx-primary-tint) 0%, #F3F7FF 45%, var(--abx-bg) 100%);
  overflow: hidden;
  text-align: center;
}

/* Faint dotted grid + soft colour blobs for atmosphere. */
.abx-brand-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(37, 99, 235, 0.10) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(90% 70% at 50% 30%, #000 0%, transparent 75%);
          mask-image: radial-gradient(90% 70% at 50% 30%, #000 0%, transparent 75%);
  opacity: 0.6;
  pointer-events: none;
}
.abx-brand-panel::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  inset-block-start: -120px;
  inset-inline-end: -100px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.22), transparent 68%);
  filter: blur(12px);
  pointer-events: none;
}

.abx-brand-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 560px;
  margin: 0 auto;
}

.abx-brand-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
}
.abx-logo {
  width: 78px;
  height: 78px;
  border-radius: var(--ab-radius-full, 9999px);
  background: #fff;
  padding: 7px;
  box-shadow: 0 16px 36px -10px rgba(37, 99, 235, 0.5), 0 0 0 1px var(--abx-border);
  display: grid;
  place-items: center;
}
.abx-logo img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}
.abx-wordmark {
  font-size: clamp(1.45rem, 6vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--abx-primary-deep);
}

/* Brand wordmark image (replaces the badge + text logo) */
.abx-logo-img {
  height: clamp(40px, 6vw, 56px);
  width: auto;
  max-width: min(240px, 70vw);
  object-fit: contain;
  display: block;
}

.abx-brand-copy { max-width: 46ch; }
.abx-brand-title {
  margin: 0;
  font-size: clamp(1.15rem, 4.4vw, 1.6rem);
  font-weight: 800;
  line-height: 1.35;
  color: var(--abx-primary-deep);
}
.abx-brand-desc {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--abx-text-2);
  max-width: 34ch;
}

/* Base content panel (full-width mode: register/setup/password pages). Clean
   single column on the light surface, clearing the top bar. */
.abx-content-panel {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  padding: 92px 20px calc(40px + env(safe-area-inset-bottom, 0px));
  background: transparent;
}
.abx-content-inner {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

/* Bootstrap modals (e.g. the register Terms & Conditions dialog) render inside
   .abx-content-panel. Its z-index creates a stacking context that would trap
   the position:fixed modal *below* the body-level .modal-backdrop (z 1040) —
   the dark overlay then covers the dialog itself, so it looks empty and the
   close button is unclickable. Bootstrap flags an open modal with body.modal-open;
   while one is open, drop the panel's stacking context so the modal (z 1050) and
   its backdrop resolve at the body level and layer correctly. The content column
   still paints above the brand panel via DOM order. */
body.modal-open .abx-content-panel { z-index: auto; }

/* Split mode: content becomes a white card overlapping the brand header with a
   rounded top edge, and a narrower reading width. */
.abx-shell--split .abx-content-panel {
  margin-top: -34px;
  padding-top: 34px;
  background: var(--abx-card);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -18px 40px -24px rgba(15, 23, 42, 0.20);
}
.abx-shell--split .abx-content-inner {
  max-width: 440px;
}

/* ==========================================================================
   3. Top bar
   ========================================================================== */

.abx-topbar {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
}

/* Topbar start group: back button + AurBoss logo (register/login header). */
.abx-topbar-start {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.abx-topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.abx-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 700;
  color: #4338ca;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(99, 102, 241, 0.25);
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.abx-back-btn:hover {
  background: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(67, 56, 202, 0.18);
  color: #4338ca;
}
.abx-back-btn i { font-size: 12px; }
.abx-topbar-logo-link { display: inline-flex; align-items: center; }
.abx-topbar-logo { height: 30px; width: auto; display: block; }
@media (max-width: 575px) {
  .abx-back-label { display: none; }
  .abx-topbar-logo { height: 26px; }
}

/* Language dropdown (reuses the existing <details> partial markup). */
.abx-topbar .tw-dw-dropdown > summary,
.abx-lang-pill > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--ab-radius-full, 9999px);
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 1px solid var(--abx-border);
  color: var(--abx-text-2) !important;
  font-size: 0.82rem;
  font-weight: 700;
  transition: var(--ab-transition, all 0.15s ease);
}
.abx-topbar .tw-dw-dropdown > summary::-webkit-details-marker { display: none; }
.abx-topbar .tw-dw-dropdown > summary:hover {
  color: var(--abx-primary-strong) !important;
  border-color: var(--abx-primary-tint2);
  background: #fff;
}
.abx-topbar .tw-dw-dropdown > summary::before {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 0 20 15.3 15.3 0 0 1 0-20'/%3E%3C/svg%3E");
          mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 0 20 15.3 15.3 0 0 1 0-20'/%3E%3C/svg%3E");
}
.abx-topbar summary::marker { content: ""; }

/* Language menu — pin inside the viewport so the long list never overflows off
   the screen edge (the shell clips overflow-x). Scrolls when tall. */
.abx-topbar .tw-dw-dropdown { position: relative; }
.abx-topbar .tw-dw-dropdown-content {
  position: absolute !important;
  inset-block-start: calc(100% + 8px) !important;
  inset-inline-start: 0 !important;
  inset-inline-end: auto !important;
  margin: 0 !important;
  width: max-content;
  min-width: 200px;
  max-width: min(260px, calc(100vw - 24px));
  max-height: min(58vh, 360px);
  overflow-y: auto;
  border: 1px solid var(--abx-border);
  border-radius: 14px;
  box-shadow: var(--ab-shadow-lg, 0 10px 15px -3px rgba(0,0,0,.08));
}
.abx-topbar .tw-dw-dropdown-content li > a {
  cursor: pointer;
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--abx-text);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.abx-topbar .tw-dw-dropdown-content li > a:hover {
  background: var(--abx-primary-tint);
  color: var(--abx-primary-strong);
}

.abx-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.abx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 22px;
  border-radius: var(--ab-radius-full, 9999px);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  -webkit-user-select: none;
          user-select: none;
}
.abx-btn:focus-visible { outline: none; box-shadow: var(--abx-ring); }

.abx-btn--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--abx-primary) 0%, var(--abx-primary-strong) 100%);
  box-shadow: 0 10px 24px -8px rgba(37, 99, 235, 0.55);
}
.abx-btn--primary:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 16px 30px -10px rgba(37, 99, 235, 0.62);
}
.abx-btn--primary:active { transform: translateY(0); }

.abx-btn--ghost {
  color: var(--abx-primary-strong);
  background: #fff;
  border-color: var(--abx-border);
}
.abx-btn--ghost:hover {
  color: var(--abx-primary-strong);
  border-color: var(--abx-primary-tint2);
  background: var(--abx-primary-tint);
}

/* Smaller pill for the top bar. */
.abx-topbar .abx-btn {
  min-height: 38px;
  padding: 8px 16px;
  font-size: 0.82rem;
}
.abx-topbar .abx-btn--ghost {
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

.abx-btn--block { width: 100%; }
.abx-btn--lg { min-height: 52px; padding: 15px 30px; font-size: 1rem; }

/* ==========================================================================
   Desktop: two-column split
   ========================================================================== */

@media (min-width: 992px) {
  .abx-topbar { padding: 22px 32px; }

  /* Split mode → two columns. */
  /* row-reverse puts the content column on each locale's reading-start side:
     RTL (Arabic) → form/content on the right, brand visual on the left;
     LTR (English) → form/content on the left, brand visual on the right. */
  .abx-shell--split { flex-direction: row-reverse; }

  .abx-shell--split .abx-brand-panel {
    flex: 0 0 54%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 96px 56px;
    text-align: start;
  }
  .abx-shell--split .abx-brand-panel::after {
    width: 460px; height: 460px;
    inset-block-start: -160px;
    inset-inline-end: -140px;
  }
  .abx-shell--split .abx-brand-inner {
    align-items: flex-start;
    gap: 28px;
    max-width: 520px;
  }
  .abx-shell--split .abx-brand-head { align-items: flex-start; }
  .abx-shell--split .abx-wordmark { font-size: clamp(1.6rem, 2.3vw, 2rem); }
  .abx-shell--split .abx-brand-title { font-size: clamp(1.5rem, 2.2vw, 2rem); }

  .abx-shell--split .abx-content-panel {
    flex: 1 1 46%;
    margin-top: 0;
    border-radius: 0;
    box-shadow: none;
    align-items: center;
    padding: 96px 56px;
  }

  /* Full mode → centered single column with comfortable side padding. */
  .abx-shell--full .abx-content-panel { padding: 104px 40px 56px; }
}

@media (min-width: 1280px) {
  .abx-shell--split .abx-brand-panel { padding-inline: 80px; }
  .abx-shell--split .abx-content-panel { padding-inline: 80px; }
}

/* ==========================================================================
   6. Hero (welcome)
   ========================================================================== */

.abx-hero {
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: start;
  animation: abx-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.abx-eyebrow {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--ab-radius-full, 9999px);
  background: var(--abx-primary-tint);
  color: var(--abx-primary-strong);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
}
.abx-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--abx-primary);
  box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5);
  animation: abx-pulse 2s infinite;
}

.abx-hero-title {
  margin: 0;
  font-size: clamp(1.55rem, 6vw, 2.05rem);
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--abx-text);
}
.abx-hero-title span { color: var(--abx-primary); }
/* Hero headline in Tajawal. The extra :not() selectors raise specificity above
   the page-wide `body *:not(.fa…){ font-family: Almarai !important }` override
   so this wins for the headline only. */
.abx-hero-title:not(.fa):not(.fas):not(.far):not(.fab),
.abx-hero-title span:not(.fa):not(.fas):not(.far):not(.fab) {
  font-family: 'Tajawal', 'Almarai', sans-serif !important;
}

.abx-hero-sub {
  margin: 0;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--abx-text-2);
  max-width: 44ch;
}

.abx-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}
.abx-hero-cta .abx-btn { flex: 1 1 auto; min-width: 150px; }

.abx-trustline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 8px;
  color: var(--abx-text-3);
  font-size: 0.82rem;
  font-weight: 700;
}
.abx-trustline span { display: inline-flex; align-items: center; gap: 6px; }
.abx-trustline span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ab-status-paid-dot, #22C55E);
}

@media (min-width: 992px) {
  .abx-hero { gap: 24px; }
  .abx-hero-title { font-size: clamp(1.85rem, 2.4vw, 2.5rem); }
  .abx-hero-cta .abx-btn { flex: 0 0 auto; }
}

/* ==========================================================================
   7. Product mock (pure CSS visual)
   ========================================================================== */

.abx-mock {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin-top: 8px;
  animation: abx-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

.abx-mock-card {
  background: #fff;
  border-radius: var(--ab-radius-lg, 14px);
  box-shadow: 0 34px 64px -34px rgba(15, 23, 42, 0.38), 0 0 0 1px var(--abx-border);
  padding: 16px;
}

.abx-mock-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.abx-mock-bar i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--abx-border);
}
.abx-mock-bar i:nth-child(1) { background: #FCA5A5; }
.abx-mock-bar i:nth-child(2) { background: #FCD34D; }
.abx-mock-bar i:nth-child(3) { background: #86EFAC; }
.abx-mock-bar b {
  margin-inline-start: auto;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--abx-text-3);
}

.abx-mock-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.abx-mock-stat {
  background: var(--abx-bg);
  border: 1px solid var(--abx-border);
  border-radius: var(--ab-radius-md, 10px);
  padding: 12px;
}
.abx-mock-stat .lbl { font-size: 0.68rem; font-weight: 700; color: var(--abx-text-3); }
.abx-mock-stat .val { font-size: 1.15rem; font-weight: 800; color: var(--abx-text); margin-top: 4px; }
.abx-mock-stat .chg { font-size: 0.66rem; font-weight: 800; color: var(--ab-status-paid-text, #15803D); }

.abx-mock-chart {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 96px;
  padding: 12px;
  background: var(--abx-bg);
  border: 1px solid var(--abx-border);
  border-radius: var(--ab-radius-md, 10px);
  margin-bottom: 12px;
}
.abx-mock-chart i {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--abx-primary), var(--abx-primary-strong));
  opacity: 0.9;
  transform-origin: bottom;
  animation: abx-grow 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.abx-mock-chart i:nth-child(1) { height: 42%; animation-delay: 0.15s; }
.abx-mock-chart i:nth-child(2) { height: 66%; animation-delay: 0.22s; }
.abx-mock-chart i:nth-child(3) { height: 50%; animation-delay: 0.29s; }
.abx-mock-chart i:nth-child(4) { height: 82%; animation-delay: 0.36s; }
.abx-mock-chart i:nth-child(5) { height: 60%; animation-delay: 0.43s; }
.abx-mock-chart i:nth-child(6) { height: 95%; opacity: 1; animation-delay: 0.5s; }
.abx-mock-chart i:nth-child(7) { height: 74%; animation-delay: 0.57s; }

.abx-mock-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--abx-border);
  border-radius: var(--ab-radius-md, 10px);
}
.abx-mock-row .ic {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--abx-primary-tint);
  color: var(--abx-primary-strong);
  display: grid; place-items: center;
}
.abx-mock-row .ic svg { width: 17px; height: 17px; }
.abx-mock-row .t { font-size: 0.78rem; font-weight: 800; color: var(--abx-text); }
.abx-mock-row .s { font-size: 0.66rem; color: var(--abx-text-3); }
.abx-mock-amt { margin-inline-start: auto; font-weight: 800; color: var(--abx-text); font-size: 0.86rem; }

.abx-badge-paid {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--ab-radius-full, 9999px);
  background: var(--ab-status-paid-bg, #F0FDF4);
  color: var(--ab-status-paid-text, #15803D);
  border: 1px solid var(--ab-status-paid-border, #BBF7D0);
  font-size: 0.62rem;
  font-weight: 800;
}
.abx-badge-paid::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ab-status-paid-dot, #22C55E);
}

/* Floating success toast for depth. */
.abx-mock-float {
  position: absolute;
  inset-block-end: 22px;
  inset-inline-start: -18px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  background: #fff;
  border-radius: var(--ab-radius-md, 10px);
  box-shadow: 0 18px 34px -16px rgba(15, 23, 42, 0.34), 0 0 0 1px var(--abx-border);
  animation: abx-float 4.5s ease-in-out infinite;
}
.abx-mock-float .ic {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ab-status-paid-bg, #F0FDF4);
  color: var(--ab-status-paid-text, #15803D);
  display: grid; place-items: center;
}
.abx-mock-float .ic svg { width: 15px; height: 15px; }
.abx-mock-float .t { font-size: 0.72rem; font-weight: 800; color: var(--abx-text); }
.abx-mock-float .s { font-size: 0.6rem; color: var(--abx-text-3); }

/* Product-mock placement wrappers — the same mock renders in two spots and CSS
   shows the right one per breakpoint:
   - .abx-visual--brand : inside the brand panel (desktop)
   - .abx-visual-panel  : a full-width band below the content/buttons (mobile) */
.abx-visual--brand { display: none; }
.abx-visual-panel {
  display: flex;
  justify-content: center;
  background: var(--abx-card);
  padding: 4px 22px calc(44px + env(safe-area-inset-bottom, 0px));
}
.abx-visual-panel .abx-mock { max-width: 360px; }
.abx-visual-panel .abx-mock-float { inset-inline-start: 2px; inset-block-end: 14px; }

/* Mobile: declutter the top bar (hero / login footer already carry the actions)
   and tighten the brand header now that it holds logo + wordmark + tagline. */
@media (max-width: 991.98px) {
  .abx-topbar-actions { display: none; }
  .abx-brand-panel { padding: 70px 22px 44px; }
  .abx-brand-desc { font-size: 0.9rem; }
}

/* Desktop: the mock lives inside the brand panel; hide the mobile band. */
@media (min-width: 992px) {
  .abx-visual--brand { display: block; }
  .abx-visual-panel { display: none; }
}

/* ==========================================================================
   8. Login form
   ========================================================================== */

.abx-authcard {
  width: 100%;
  animation: abx-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.abx-form-head { text-align: start; margin-bottom: 24px; }
.abx-form-title {
  margin: 0;
  font-size: clamp(1.4rem, 5vw, 1.65rem);
  font-weight: 800;
  color: var(--abx-text);
}
.abx-form-sub {
  margin: 6px 0 0;
  font-size: 0.92rem;
  color: var(--abx-text-2);
}

.abx-form { display: flex; flex-direction: column; gap: 16px; }

.abx-field { display: flex; flex-direction: column; gap: 7px; }
.abx-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--abx-text);
}
.abx-label a {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--abx-primary-strong);
  text-decoration: none;
}
.abx-label a:hover { text-decoration: underline; }

.abx-input-wrap { position: relative; display: flex; align-items: center; }
.abx-input {
  width: 100%;
  height: 52px;
  border: 1px solid var(--abx-border);
  border-radius: var(--ab-radius-md, 10px);
  background: #fff;
  color: var(--abx-text);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  padding-inline: 44px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.abx-input::placeholder { color: var(--abx-text-3); font-weight: 500; }
.abx-input:focus {
  outline: none;
  border-color: var(--abx-primary);
  box-shadow: var(--abx-ring);
}
.abx-input--pw { padding-inline-end: 46px; }

.abx-input-icon {
  position: absolute;
  inset-inline-start: 14px;
  display: flex;
  color: var(--abx-text-3);
  pointer-events: none;
}
.abx-input-icon svg { width: 18px; height: 18px; }
.abx-input:focus ~ .abx-input-icon,
.abx-input-wrap:focus-within .abx-input-icon { color: var(--abx-primary); }

.abx-pw-reveal {
  position: absolute;
  inset-inline-end: 8px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--abx-text-3);
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.abx-pw-reveal:hover { color: var(--abx-text-2); background: var(--abx-bg); }
.abx-pw-reveal svg { width: 20px; height: 20px; }
.abx-pw-reveal svg [stroke] { stroke: currentColor; }

.abx-check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}
.abx-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--abx-primary);
  cursor: pointer;
}
.abx-check span { font-size: 0.85rem; font-weight: 700; color: var(--abx-text-2); }

.abx-form-submit { margin-top: 4px; }

.abx-form-foot {
  text-align: center;
  margin-top: 20px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--abx-text-2);
}
.abx-form-foot a { color: var(--abx-text-2); text-decoration: none; }
.abx-form-foot a b { color: var(--abx-primary-strong); font-weight: 800; }
.abx-form-foot a:hover b { text-decoration: underline; }

/* Error state */
.abx-field--error .abx-input { border-color: var(--ab-status-overdue-border, #FECACA); }
.abx-field--error .abx-input:focus { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.16); }
.abx-help {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--ab-status-overdue-text, #DC2626);
}

/* ==========================================================================
   9. Motion / a11y
   ========================================================================== */

@keyframes abx-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes abx-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes abx-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}
@keyframes abx-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

@media (prefers-reduced-motion: reduce) {
  .abx-shell *,
  .abx-shell *::before,
  .abx-shell *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
   Landing "wow" layer — modern glass + subtle motion.
   Appended so it augments the base rules above. Motion is slow
   and elegant; fully disabled under prefers-reduced-motion.
   ============================================================ */

/* Aurora: drifting ambient glow behind the product mock. */
.abx-brand-panel::after {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(37,99,235,0.28), transparent 66%);
  filter: blur(26px);
  animation: abx-aurora 14s ease-in-out infinite alternate;
}
.abx-brand-inner::before {
  content: "";
  position: absolute;
  width: 300px; height: 300px;
  inset-block-end: -70px; inset-inline-start: -90px;
  background: radial-gradient(circle, rgba(16,185,129,0.20), transparent 68%);
  filter: blur(30px);
  z-index: 0; pointer-events: none;
  animation: abx-aurora2 16s ease-in-out infinite alternate;
}
@keyframes abx-aurora  { to { transform: translate(-26px, 34px) scale(1.18); opacity: 1; } }
@keyframes abx-aurora2 { to { transform: translate(30px, -24px) scale(1.22); opacity: .95; } }

/* Glassy, gently floating, glowing mock card. */
.abx-mock { perspective: 1200px; }
.abx-mock-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.84));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: 18px;
  box-shadow:
    0 44px 80px -40px rgba(15,23,42,0.45),
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 0 0 1px rgba(37,99,235,0.06);
  animation: abx-card-float 7s ease-in-out infinite;
}
/* Gradient glow ring around the card (border-gradient via mask). */
.abx-mock-card::after {
  content: ""; position: absolute; inset: -1px;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(37,99,235,0.55), rgba(16,185,129,0.35), transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
@keyframes abx-card-float {
  0%,100% { transform: translateY(0) rotateX(0) rotateY(0); }
  50%     { transform: translateY(-10px) rotateX(1.3deg) rotateY(-1.6deg); }
}

/* "LIVE" pill with a pulsing dot in the window bar. */
.abx-mock-live {
  margin-inline-start: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.58rem; font-weight: 800; letter-spacing: .05em;
  color: #16a34a; background: #ecfdf5;
  border: 1px solid #bbf7d0; border-radius: 999px; padding: 3px 9px;
}
.abx-mock-live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e; animation: abx-pulse 1.6s ease-out infinite;
}
@keyframes abx-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* Gradient stat values. */
.abx-mock-stat .val {
  background: linear-gradient(90deg, #1d4ed8, #2563eb 55%, #0ea5e9);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Chart: gradient bars + a slow sheen sweep. */
.abx-mock-chart { position: relative; overflow: hidden; }
.abx-mock-chart i {
  background: linear-gradient(180deg, #60a5fa, #2563eb) !important;
  border-radius: 6px 6px 3px 3px;
  box-shadow: 0 6px 14px -8px rgba(37,99,235,.7);
}
.abx-mock-chart i:nth-child(6) {
  background: linear-gradient(180deg, #34d399, #10b981) !important;
  box-shadow: 0 6px 16px -6px rgba(16,185,129,.7);
}
.abx-mock-chart::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%);
  transform: translateX(-120%);
  animation: abx-sheen 4s ease-in-out 1.2s infinite;
  pointer-events: none;
}
@keyframes abx-sheen { to { transform: translateX(120%); } }

/* Second floating chip (top): new customer. */
.abx-mock-float2 {
  position: absolute;
  inset-block-start: 26px; inset-inline-end: -14px;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; background: #fff; border-radius: 12px;
  box-shadow: 0 18px 34px -16px rgba(15,23,42,.34), 0 0 0 1px var(--abx-border);
  animation: abx-float 5.2s ease-in-out .4s infinite;
  z-index: 2;
}
.abx-mock-float2 .ic {
  width: 26px; height: 26px; border-radius: 50%;
  background: #eef2ff; color: #4f46e5; display: grid; place-items: center;
}
.abx-mock-float2 .ic svg { width: 14px; height: 14px; }
.abx-mock-float2 .t { font-size: .7rem; font-weight: 800; color: var(--abx-text); }
.abx-mock-float2 .s { font-size: .58rem; color: var(--abx-text-3); }

/* Staggered fade-up entrance for the hero. */
.abx-hero > * { animation: abx-rise .7s cubic-bezier(.22,1,.36,1) both; }
.abx-hero .abx-eyebrow { animation-delay: .05s; }
.abx-hero-title       { animation-delay: .12s; }
.abx-hero-sub         { animation-delay: .20s; }
.abx-hero-cta         { animation-delay: .28s; }
.abx-trustline        { animation-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  .abx-brand-panel::after, .abx-brand-inner::before, .abx-mock-card,
  .abx-mock-live::before, .abx-mock-chart::after, .abx-mock-float2,
  .abx-hero > * { animation: none !important; }
}