/* =====================================================================
   Beyond Journey - BJ Desk corporate sign-in
   ---------------------------------------------------------------------
   Scoped under .bja. Nothing here may be written unscoped: .form-control,
   .btn and .nir-btn appear on 100+ pages in this project.

   WHY THIS PAGE LOOKS DIFFERENT FROM THE REST OF THE SITE

   A corporate sign-in is not a marketing page. It carries no mega-nav, no
   offers strip and no footer sitemap, because every one of those is a way
   to leave a screen whose only job is to let someone in. The chrome is cut
   to a logo, a way back to the public site, and a support contact.

   The split layout is the B2B convention for a reason: the left panel
   carries the brand and the reassurance an employee needs when they are
   typing a company credential into a travel vendor's site, and the right
   panel stays a plain, quiet form.

   TYPE: the site's own stack, Poppins for body and Inter for headings,
   exactly as css/style.css declares them. No third typeface is introduced
   here - a sign-in screen that does not look like the site it belongs to
   is the same warning sign as a phishing page.
   ===================================================================== */

.bja {
  --bja-navy: #17233e;
  --bja-navy-800: #101a2e;
  --bja-navy-600: #22315a;
  --bja-orange: #f5761a;
  --bja-orange-600: #d9600d;      /* 4.6:1 on white - safe for text */

  --bja-ink: #17233e;
  --bja-muted: #5a6377;
  --bja-faint: #8b93a5;
  --bja-line: #e2e0d9;
  --bja-surface: #ffffff;
  --bja-paper: #faf8f5;

  --bja-err: #b3261e;
  --bja-err-bg: #fdf3f2;
  --bja-err-line: #f0c8c4;
  --bja-ok: #1a7f4b;

  --bja-s1: 4px;  --bja-s2: 8px;  --bja-s3: 12px; --bja-s4: 16px;
  --bja-s5: 24px; --bja-s6: 32px; --bja-s7: 44px;

  --bja-ease: cubic-bezier(.4, 0, .2, 1);

  /* The site's own stack, taken from css/style.css:
       body      font-family: "Poppins", sans-serif
       h1 - h6   font-family: 'Inter', sans-serif
     Kept identical so this screen is typographically the same product as
     the rest of beyondjourney.in rather than a second design.

     What is NOT copied from style.css is `text-transform: capitalize` on
     headings. It would render "Business Travel, Without The Back-and-forth"
     - a template default that fights sentence-case copy. */
  --bja-display: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --bja-ui: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;

  font-family: var(--bja-ui);
  color: var(--bja-ink);
}

.bja :where(section, aside) { padding: 0; margin: 0; }
/* Widths include padding and border. These pages load no bootstrap, so without this a
   width:100% box was 100% plus its padding: the email and password boxes ran wider than
   the company-code box and the button, and none of them lined up. */
.bja, .bja *, .bja *::before, .bja *::after { box-sizing: border-box; }
.bja-prefix .bja-input { min-width: 0; }
.bja :focus-visible { outline: 2px solid var(--bja-orange); outline-offset: 2px; border-radius: 6px; }
.bja-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------
   Shell
   --------------------------------------------------------------- */
.bja-shell { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; background: var(--bja-surface); }

/* ---------------------------------------------------------------
   Left - brand panel
   --------------------------------------------------------------- */
.bja-brand {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: var(--bja-s7) 6vw;
  background: var(--bja-navy);
  color: #fff;
}
.bja-brand__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .28; }
/* Navy over the photograph rather than a flat black scrim - the image stays
   readable as a place, and the panel stays on brand. */
.bja-brand__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(155deg, rgba(16, 26, 46, .93) 0%, rgba(23, 35, 62, .82) 45%, rgba(34, 49, 90, .88) 100%);
}
.bja-brand > * { position: relative; z-index: 1; }

/* The wordmark is live text now - see css/bj-logo.css. Nothing to size
   here beyond keeping it off the panel edge. */
.bja-brand__logo { display: block; }

.bja-brand__body { margin: auto 0; max-width: 460px; }
.bja-brand__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .72); margin-bottom: var(--bja-s4);
}
.bja-brand__eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--bja-orange); }

.bja-brand h1 {
  font-family: var(--bja-display);
  font-size: 33px; font-weight: 700; line-height: 1.2; letter-spacing: -.025em;
  margin: 0 0 var(--bja-s4); color: #fff; text-transform: none;
}
.bja-brand__lede { font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, .78); margin: 0 0 var(--bja-s6); }

.bja-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bja-s4); }
.bja-points li { display: flex; gap: var(--bja-s3); font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .82); }
.bja-points i { color: var(--bja-orange); font-size: 13px; margin-top: 3px; flex: 0 0 auto; }
.bja-points strong { display: block; color: #fff; font-weight: 700; margin-bottom: 2px; }

.bja-brand__foot { font-size: 12px; color: rgba(255, 255, 255, .5); }
.bja-brand__foot a { color: rgba(255, 255, 255, .78); text-decoration: underline; text-underline-offset: 2px; }
.bja-brand__foot a:hover { color: #fff; }

/* ---------------------------------------------------------------
   Right - form panel
   --------------------------------------------------------------- */
.bja-panel { display: flex; flex-direction: column; padding: var(--bja-s6) 5vw var(--bja-s6); background: var(--bja-surface); }
.bja-panel__top { display: flex; align-items: center; gap: var(--bja-s4); font-size: 12.5px; color: var(--bja-faint); }
.bja-panel__top a { color: var(--bja-muted); font-weight: 700; }
.bja-panel__top a:hover { color: var(--bja-orange-600); }
.bja-panel__top .spacer { margin-left: auto; }

.bja-form { width: 100%; max-width: 396px; margin: auto; padding: var(--bja-s6) 0; }
.bja-form__head { margin-bottom: var(--bja-s6); }
.bja-form__head h2 {
  font-family: var(--bja-ui);
  font-size: 23px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 6px;
  text-transform: none; color: var(--bja-ink);
}
.bja-form__head p { font-size: 13.5px; color: var(--bja-muted); margin: 0; line-height: 1.6; }

/* ---- fields ---------------------------------------------------
   Top-aligned labels, not floating ones. A floating label disappears the
   moment a field has content, which on a form people re-check before
   submitting is the wrong trade. */
.bja-field { margin-bottom: var(--bja-s5); }
.bja-label {
  display: flex; align-items: baseline; gap: var(--bja-s2);
  font-size: 12.5px; font-weight: 700; color: var(--bja-ink); margin-bottom: 7px;
}
.bja-label .opt { font-weight: 400; color: var(--bja-faint); }
/* A label and a link on one line. The link sits beside the <label>, never
   inside it: nested, a click would follow the link AND activate the label,
   focusing the field on the way out of the page. */
.bja-labelrow { display: flex; align-items: baseline; gap: var(--bja-s2); margin-bottom: 7px; }
.bja-labelrow .bja-label { margin-bottom: 0; }
.bja-labelrow a { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--bja-orange-600); }
.bja-labelrow a:hover { text-decoration: underline; text-underline-offset: 2px; }

.bja-input {
  width: 100%; padding: 12px 14px; font-family: inherit;
  /* 16px minimum: below that iOS Safari zooms the viewport on focus. */
  font-size: 16px; color: var(--bja-ink);
  background: var(--bja-surface); border: 1px solid var(--bja-line); border-radius: 8px;
  transition: border-color .18s var(--bja-ease), box-shadow .18s var(--bja-ease);
}
.bja-input::placeholder { color: var(--bja-faint); }
.bja-input:hover { border-color: #cfccc3; }
.bja-input:focus { outline: 0; border-color: var(--bja-orange); box-shadow: 0 0 0 3px rgba(245, 118, 26, .15); }
.bja-input[aria-invalid="true"] { border-color: var(--bja-err); background: var(--bja-err-bg); }
.bja-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, .13); }
.bja-input[disabled] { background: var(--bja-paper); color: var(--bja-faint); cursor: not-allowed; }

/* A prefixed field for the company code - the prefix explains the format
   without needing helper text under the field. */
.bja-prefix { display: flex; align-items: stretch; }
.bja-prefix__tag {
  display: inline-flex; align-items: center; padding: 0 12px;
  background: var(--bja-paper); border: 1px solid var(--bja-line); border-right: 0;
  border-radius: 8px 0 0 8px; font-size: 13px; font-weight: 700; color: var(--bja-faint);
  white-space: nowrap;
}
.bja-prefix .bja-input { border-radius: 0 8px 8px 0; text-transform: uppercase; letter-spacing: .06em; }

.bja-pw { position: relative; }
.bja-pw .bja-input { padding-right: 46px; }
.bja-pw__toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; border-radius: 6px; background: none;
  color: var(--bja-faint); cursor: pointer; font-size: 14px;
}
.bja-pw__toggle:hover { color: var(--bja-ink); background: var(--bja-paper); }

.bja-help { display: block; font-size: 12px; color: var(--bja-faint); margin-top: 6px; line-height: 1.5; }
.bja-err { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; color: var(--bja-err); margin-top: 6px; line-height: 1.5; }
.bja-err i { margin-top: 2px; font-size: 11px; }

/* Caps Lock warning. On a corporate password field this is the single most
   common cause of a failed sign-in that the user cannot explain. */
.bja-caps {
  display: none; align-items: center; gap: 6px;
  font-size: 12px; color: #8a6100; margin-top: 6px;
}
.bja-caps.is-on { display: flex; }

.bja-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--bja-muted); cursor: pointer; line-height: 1.5; }
.bja-check input { accent-color: var(--bja-orange); width: 16px; height: 16px; margin-top: 1px; flex: 0 0 auto; cursor: pointer; }

/* ---- buttons ---- */
.bja-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px var(--bja-s5); border: 0; border-radius: 8px;
  background: var(--bja-orange); color: #fff !important;
  font-family: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
  transition: background .18s var(--bja-ease);
}
.bja-btn:hover:not([disabled]) { background: var(--bja-orange-600); color: #fff !important; }
.bja-btn[disabled] { opacity: .6; cursor: not-allowed; }
.bja-btn--ghost {
  background: var(--bja-surface); color: var(--bja-ink) !important; border: 1px solid var(--bja-line);
}
.bja-btn--ghost:hover:not([disabled]) { background: var(--bja-paper); color: var(--bja-ink) !important; border-color: var(--bja-faint); }

.bja-spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
  animation: bjaSpin .8s linear infinite;
}
@keyframes bjaSpin { to { transform: rotate(360deg); } }

.bja-or {
  display: flex; align-items: center; gap: var(--bja-s3);
  margin: var(--bja-s5) 0; font-size: 11.5px; color: var(--bja-faint);
  text-transform: uppercase; letter-spacing: .1em;
}
.bja-or::before, .bja-or::after { content: ""; height: 1px; background: var(--bja-line); flex: 1; }

/* ---- notices ---- */
.bja-notice {
  display: flex; align-items: flex-start; gap: var(--bja-s3);
  padding: var(--bja-s3) var(--bja-s4); border-radius: 8px; border: 1px solid;
  font-size: 13px; line-height: 1.55; margin-bottom: var(--bja-s5);
}
.bja-notice i { margin-top: 2px; flex: 0 0 auto; }
.bja-notice--err { background: var(--bja-err-bg); border-color: var(--bja-err-line); color: var(--bja-err); }
.bja-notice--info { background: #eff3fa; border-color: #cfdcf0; color: #223a63; }
.bja-notice--warn { background: #fff8ec; border-color: #f2d9ab; color: #8a6100; }
.bja-notice a { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }

.bja-foot { margin-top: var(--bja-s6); padding-top: var(--bja-s5); border-top: 1px solid var(--bja-line); font-size: 13px; color: var(--bja-muted); }
.bja-foot a { color: var(--bja-orange-600); font-weight: 700; }
.bja-foot a:hover { text-decoration: underline; text-underline-offset: 2px; }

.bja-legal { margin-top: var(--bja-s5); font-size: 11.5px; color: var(--bja-faint); line-height: 1.6; }
.bja-legal a { color: var(--bja-muted); text-decoration: underline; text-underline-offset: 2px; }
.bja-legal i { color: var(--bja-ok); margin-right: 5px; }

/* =====================================================================
   Traveller sign-in (login.html)
   ---------------------------------------------------------------------
   Shares every field, button and notice above with the corporate screen -
   the two sign-ins are one product and should not look like two.

   What differs is the framing, and deliberately. BJ Desk is a walled
   B2B screen with the site nav stripped out. This one sits inside the
   marketing site with its header and footer intact, because a traveller
   who lands here by accident should be able to carry on browsing rather
   than hit a dead end.

   So: a centred card, form on the left where the eye starts, and a
   reassurance panel on the right answering "why should I make an account
   at all" - the question that actually loses consumer sign-ups.
   ===================================================================== */
.bja-page { background: var(--bja-paper); padding: var(--bja-s7) 0; }

.bja-crumb {
  max-width: 940px; margin: 0 auto var(--bja-s5);
  font-size: 12.5px; color: var(--bja-faint);
}
.bja-crumb a { color: var(--bja-muted); font-weight: 700; }
.bja-crumb a:hover { color: var(--bja-orange-600); }
.bja-crumb .sep { opacity: .5; margin: 0 8px; }

.bja-card {
  max-width: 940px; margin: 0 auto; overflow: hidden;
  background: var(--bja-surface);
  border: 1px solid var(--bja-line); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(23, 35, 62, .04), 0 18px 40px -24px rgba(23, 35, 62, .3);
}
.bja-split { display: grid; grid-template-columns: 1fr 340px; }
.bja-split__form { padding: var(--bja-s7) var(--bja-s6); }
.bja-split__form .bja-form { margin: 0; max-width: 400px; }

/* ---- tabs ----
   Buttons, not links. These swap a panel in place; they do not navigate,
   and a link that does not go anywhere is a lie to a screen reader. */
.bja-tabs {
  display: flex; gap: var(--bja-s1); padding: var(--bja-s1);
  background: var(--bja-paper); border: 1px solid var(--bja-line);
  border-radius: 10px; margin-bottom: var(--bja-s6);
}
.bja-tab {
  flex: 1; padding: 9px var(--bja-s4); border: 0; border-radius: 7px;
  background: transparent; font-family: inherit;
  font-size: 13.5px; font-weight: 700; color: var(--bja-muted); cursor: pointer;
  transition: background .18s var(--bja-ease), color .18s var(--bja-ease);
}
.bja-tab:hover { color: var(--bja-ink); }
.bja-tab[aria-selected="true"] {
  background: var(--bja-surface); color: var(--bja-ink);
  box-shadow: 0 1px 2px rgba(23, 35, 62, .1);
}
.bja-panel-tab[hidden] { display: none; }

/* ---- social ----
   Outlined, not brand-filled. Two saturated brand blocks would outrank the
   real sign-in button, which is not what we want people to click first. */
.bja-social { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bja-s3); }
.bja-social button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px var(--bja-s3); border-radius: 8px; cursor: pointer;
  border: 1px solid var(--bja-line); background: var(--bja-surface);
  font-family: inherit; font-size: 13px; font-weight: 700; color: var(--bja-ink);
  transition: border-color .18s var(--bja-ease), background .18s var(--bja-ease);
}
.bja-social button:hover { border-color: var(--bja-faint); background: var(--bja-paper); }
.bja-social i { font-size: 14px; }
.bja-social .fa-google { color: #d64b3f; }
.bja-social .fa-facebook { color: #2a5fa5; }

/* ---- reassurance panel ---- */
.bja-aside {
  position: relative; overflow: hidden;
  padding: var(--bja-s7) var(--bja-s5);
  background: var(--bja-navy); color: #fff;
  display: flex; flex-direction: column; justify-content: center;
}
.bja-aside__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .22; }
.bja-aside__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(16, 26, 46, .9) 0%, rgba(34, 49, 90, .84) 100%);
}
.bja-aside > * { position: relative; z-index: 1; }
.bja-aside h2 {
  font-family: var(--bja-display);
  font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: #fff;
  margin: 0 0 var(--bja-s4); text-transform: none;
}
.bja-aside ul { list-style: none; margin: 0 0 var(--bja-s5); padding: 0; display: grid; gap: var(--bja-s4); }
.bja-aside li { display: flex; gap: var(--bja-s3); font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .8); }
.bja-aside i { color: var(--bja-orange); font-size: 12px; margin-top: 3px; flex: 0 0 auto; }
.bja-aside strong { display: block; color: #fff; font-weight: 700; margin-bottom: 1px; }
.bja-aside__note { font-size: 11.5px; color: rgba(255, 255, 255, .55); margin: 0; line-height: 1.6; }
.bja-aside__note a { color: rgba(255, 255, 255, .82); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 767px) {
  .bja-page { padding: var(--bja-s5) 0; }
  .bja-split { grid-template-columns: 1fr; }
  .bja-split__form { padding: var(--bja-s5); }
  .bja-split__form .bja-form { max-width: none; }
  /* The panel moves below the form on a phone. Someone who came here to
     sign in should not have to scroll past a sales pitch to do it. */
  .bja-aside { order: 2; padding: var(--bja-s5); }
  .bja-social { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------
   Below 900px the brand panel stops being a column and becomes a short
   masthead. It is cut rather than stacked at full height, because on a
   phone the only thing that matters is reaching the first field. */
@media (max-width: 991px) {
  .bja-shell { grid-template-columns: 1fr; min-height: 0; }
  .bja-brand { padding: var(--bja-s5) var(--bja-s5) var(--bja-s6); }
  .bja-brand h1 { font-size: 26px; }
  .bja-brand__lede { margin-bottom: var(--bja-s5); font-size: 14px; }
  .bja-points { grid-template-columns: 1fr; gap: var(--bja-s3); }
  .bja-brand__body { margin: var(--bja-s5) 0 0; max-width: none; }
  .bja-brand__foot { display: none; }
  .bja-panel { padding: var(--bja-s5); }
  .bja-form { margin: 0 auto; padding: var(--bja-s5) 0 0; }
}

@media (max-width: 575px) {
  .bja-brand h1 { font-size: 22px; }
  /* Two of the three proof points is enough on a phone; the third is
     scrolling past the fold anyway. */
  .bja-points li:nth-child(n+3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bja *, .bja *::before, .bja *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
  }
}