/*
 * BOOM 1.74.0 — sign in, forgot, reset and registration (Phase E6, Figma 32.4–32.7).
 *
 * A page of its own in the portal look: a centred card, the logo, EN/FR and
 * light/dark. No website header or footer. Light and dark are two sets of
 * the same tokens; the choice is the portal's own (joonMode / joon_theme).
 */

.boom-auth-html {
  --a-ink: #0f1b2d;
  --a-soft: #41546e;
  --a-muted: #64748b;
  --a-faint: #94a3b8;
  --a-paper: #ffffff;
  --a-paper-2: #f2f6fb;
  --a-line: rgba(15, 23, 42, .12);
  --a-line-strong: rgba(15, 23, 42, .22);
  --a-field: #ffffff;
  --a-field-line: #cbd5e1;
  --a-focus: #2563eb;
  --a-accent: #dc2626;
  --a-accent-2: #b91c1c;
  --a-accent-soft: rgba(220, 38, 38, .10);
  --a-link: #1d4ed8;
  --a-good: #047857;
  --a-good-soft: rgba(4, 120, 87, .12);
  --a-warn: #b45309;
  --a-warn-soft: rgba(180, 83, 9, .12);
  --a-bad: #b91c1c;
  --a-bad-soft: rgba(185, 28, 28, .10);
  --a-info: #1d4ed8;
  --a-info-soft: rgba(37, 99, 235, .10);
  --a-bg: radial-gradient(60% 50% at 0% 0%, rgba(250, 229, 224, .7), transparent 70%), linear-gradient(135deg, #f4f6fa 0%, #edf0f6 55%, #e6ebf3 100%);
  --a-shadow: 0 18px 40px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .05);
  color-scheme: light;
}
.boom-auth-html.is-dark {
  --a-ink: #e8edf5;
  --a-soft: #b6c2d3;
  --a-muted: #8a99ae;
  --a-faint: #64748b;
  --a-paper: #111a2b;
  --a-paper-2: #17223a;
  --a-line: rgba(226, 232, 240, .12);
  --a-line-strong: rgba(226, 232, 240, .22);
  --a-field: #0c1424;
  --a-field-line: #2b3a55;
  --a-focus: #60a5fa;
  --a-accent: #ef4444;
  --a-accent-2: #dc2626;
  --a-accent-soft: rgba(239, 68, 68, .16);
  --a-link: #93c5fd;
  --a-good: #34d399;
  --a-good-soft: rgba(52, 211, 153, .14);
  --a-warn: #fbbf24;
  --a-warn-soft: rgba(251, 191, 36, .14);
  --a-bad: #f87171;
  --a-bad-soft: rgba(248, 113, 113, .14);
  --a-info: #93c5fd;
  --a-info-soft: rgba(147, 197, 253, .14);
  --a-bg: radial-gradient(60% 50% at 0% 0%, rgba(239, 68, 68, .10), transparent 70%), #070d19;
  --a-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

.boom-auth-html, .boom-auth-html body { margin: 0; min-height: 100%; }
.boom-auth-html { background: var(--a-bg); background-color: #edf0f6; }
.boom-auth-html.is-dark { background-color: #070d19; }
.boom-auth { margin: 0; background: transparent; color: var(--a-ink); font-family: "Avenir Next", "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
.boom-auth *, .boom-auth *::before, .boom-auth *::after { box-sizing: border-box; }
.boom-auth a { color: var(--a-link); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

.boom-auth-page { min-height: 100vh; display: flex; flex-direction: column; padding: 22px 28px; }
.boom-auth-top { display: flex; align-items: center; gap: 12px; }
.boom-auth-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--a-ink) !important; text-decoration: none; }
.boom-auth-brand img { display: block; max-height: 38px; width: auto; }
.boom-auth-brand strong { font-size: 15px; font-weight: 800; letter-spacing: .08em; }
.boom-auth-tile { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(180deg, #e73734, #c11e1e); color: #fff; box-shadow: 0 6px 14px rgba(217, 38, 38, .25); }
.boom-auth-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* EN / FR (the portal's own control) and light / dark */
.boom-auth .joon-lang-switch { display: inline-flex; gap: 0; padding: 3px; border: 1px solid var(--a-line); border-radius: 12px; background: var(--a-paper); }
.boom-auth .joon-lang-option { min-width: 36px; padding: 6px 9px; border: 0; border-radius: 9px; background: transparent; color: var(--a-soft); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.boom-auth .joon-lang-option.is-active { background: linear-gradient(180deg, #e73734, #c11e1e); color: #fff; }
.boom-auth-mode { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--a-line); border-radius: 20px; background: var(--a-paper); color: var(--a-soft); cursor: pointer; }
.boom-auth-mode:hover, .boom-auth .joon-lang-option:hover:not(.is-active) { color: var(--a-ink); }
.boom-auth-mode:focus-visible, .boom-auth .joon-lang-option:focus-visible { outline: 2px solid var(--a-focus); outline-offset: 2px; }
.boom-auth-ic { flex: none; }

.boom-auth-main { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 28px 0; }
.boom-auth-card { width: min(440px, 100%); display: flex; flex-direction: column; gap: 16px; padding: 30px; border: 1px solid var(--a-line); border-radius: 20px; background: var(--a-paper); box-shadow: var(--a-shadow); }
.boom-auth-card.is-wide { width: min(640px, 100%); }
.boom-auth-card h1 { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
.boom-auth-sub { margin: -8px 0 0; color: var(--a-soft); font-size: 14px; }
.boom-auth-badge { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 26px; background: var(--a-accent-soft); color: var(--a-accent); }
.boom-auth-badge .boom-auth-ic { width: 24px; height: 24px; }
.boom-auth-badge.is-good { background: var(--a-good-soft); color: var(--a-good); }
.boom-auth-badge.is-warn { background: var(--a-warn-soft); color: var(--a-warn); }
.boom-auth-foot { padding-top: 8px; text-align: center; font-size: 12px; color: var(--a-faint); }
.boom-auth-foot a { color: inherit; }

/* banners */
.boom-auth-banner { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--a-line); font-size: 13px; }
.boom-auth-banner div { display: flex; flex-direction: column; gap: 2px; }
.boom-auth-banner strong { font-size: 14px; }
.boom-auth-banner span { color: var(--a-soft); }
.boom-auth-banner.is-bad { border-color: var(--a-bad); background: var(--a-bad-soft); }
.boom-auth-banner.is-bad .boom-auth-ic { color: var(--a-bad); }
.boom-auth-banner.is-warn { border-color: var(--a-warn); background: var(--a-warn-soft); }
.boom-auth-banner.is-warn .boom-auth-ic { color: var(--a-warn); }
.boom-auth-banner.is-good { border-color: var(--a-good); background: var(--a-good-soft); }
.boom-auth-banner.is-good .boom-auth-ic { color: var(--a-good); }
.boom-auth-banner.is-info, .boom-auth-banner.is-neutral { border-color: var(--a-info); background: var(--a-info-soft); }
.boom-auth-banner.is-info .boom-auth-ic { color: var(--a-info); }

/* fields */
.boom-auth-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.boom-auth-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.boom-auth-field label, .boom-auth-seg legend { font-size: 12.5px; font-weight: 600; color: var(--a-soft); }
.boom-auth-field label em { font-style: normal; font-weight: 500; color: var(--a-faint); }
.boom-auth-field input, .boom-auth-field select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--a-field-line); border-radius: 10px; background: var(--a-field); color: var(--a-ink); font: inherit; font-size: 15px; }
.boom-auth-field input:focus, .boom-auth-field select:focus { outline: none; border-color: var(--a-focus); box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); }
.boom-auth-field.is-error input, .boom-auth-field.is-error select { border-color: var(--a-bad); }
.boom-auth-err { color: var(--a-bad); font-size: 12.5px; }
.boom-auth-hint { color: var(--a-muted); font-size: 12px; }
.boom-auth-pw { display: flex; gap: 8px; }
.boom-auth-pw input { flex: 1 1 auto; min-width: 0; }
.boom-auth-show { flex: none; min-width: 64px; padding: 0 12px; border: 1px solid var(--a-line-strong); border-radius: 10px; background: var(--a-paper); color: var(--a-ink); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.boom-auth-cols { display: grid; gap: 12px; }
.boom-auth-cols.is-2 { grid-template-columns: 1fr 1fr; }
.boom-auth-cols.is-3 { grid-template-columns: 1.2fr 1fr .8fr; }
.boom-auth-cols.is-2:has(> .is-2:first-child) { grid-template-columns: 2fr 1fr; }
.boom-auth-section { margin: 6px 0 -4px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--a-faint); }
.boom-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.boom-auth-link { font-size: 13.5px; font-weight: 600; text-decoration: none; }
.boom-auth-link:hover { text-decoration: underline; }
.boom-auth-link.is-center { align-self: center; }
.boom-auth-hr { width: 100%; height: 1px; margin: 2px 0; border: 0; background: var(--a-line); }
.boom-auth-new { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.boom-auth-new p { margin: 0; color: var(--a-soft); font-size: 13.5px; }
.boom-auth-two { display: flex; gap: 8px; }
.boom-auth-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* tick boxes */
.boom-auth-tick { position: relative; display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--a-soft); cursor: pointer; }
.boom-auth-tick input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; }
.boom-auth-box { flex: none; width: 18px; height: 18px; margin-top: 1px; border: 1.5px solid var(--a-field-line); border-radius: 5px; background: var(--a-field); }
.boom-auth-tick input:checked + .boom-auth-box { border-color: var(--a-accent); background: var(--a-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.boom-auth-tick input:focus-visible + .boom-auth-box { outline: 2px solid var(--a-focus); outline-offset: 2px; }
.boom-auth-tick.is-error .boom-auth-box { border-color: var(--a-bad); }

/* buttons */
.boom-auth-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 9px 18px; border: 1px solid var(--a-line-strong); border-radius: 12px; background: var(--a-paper); color: var(--a-ink) !important; font: inherit; font-size: 14.5px; font-weight: 650; text-decoration: none; cursor: pointer; }
.boom-auth-btn:hover { border-color: var(--a-muted); }
.boom-auth-btn.is-primary { border: 0; background: linear-gradient(180deg, var(--a-accent), var(--a-accent-2)); color: #fff !important; box-shadow: 0 8px 18px rgba(220, 38, 38, .22); }
.boom-auth-btn.is-primary:hover { filter: brightness(.96); }
.boom-auth-btn.is-big { min-height: 52px; font-size: 15.5px; }
.boom-auth-btn[disabled], .boom-auth-btn.is-busy { opacity: .65; cursor: progress; }
.boom-auth-btn:focus-visible { outline: 2px solid var(--a-focus); outline-offset: 2px; }
.boom-auth-form > .boom-auth-btn.is-big { width: 100%; }
.boom-auth-card > .boom-auth-btn { width: 100%; }

/* strength */
.boom-auth-meter { display: flex; flex-direction: column; gap: 6px; margin-top: -6px; }
.boom-auth-bars { display: flex; gap: 6px; }
.boom-auth-bars i { flex: 1 1 0; height: 6px; border-radius: 3px; background: var(--a-line); }
.boom-auth-meter[data-level="1"] .boom-auth-bars i:nth-child(-n+1), .boom-auth-meter[data-level="2"] .boom-auth-bars i:nth-child(-n+2) { background: var(--a-warn); }
.boom-auth-meter[data-level="3"] .boom-auth-bars i:nth-child(-n+3), .boom-auth-meter[data-level="4"] .boom-auth-bars i { background: var(--a-good); }
.boom-auth-meter small { font-size: 12px; font-weight: 650; color: var(--a-muted); min-height: 16px; }
.boom-auth-meter[data-level="4"] small, .boom-auth-meter[data-level="3"] small { color: var(--a-good); }
.boom-auth-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: -4px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--a-muted); }
.boom-auth-rules li::before { content: "○"; display: inline-block; width: 18px; color: var(--a-faint); }
.boom-auth-rules li.is-ok { color: var(--a-soft); }
.boom-auth-rules li.is-ok::before { content: "✓"; color: var(--a-good); font-weight: 700; }

/* language segment */
.boom-auth-seg { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 6px; }
.boom-auth-seg > div { display: inline-flex; align-self: flex-start; gap: 0; padding: 3px; border: 1px solid var(--a-line); border-radius: 12px; background: var(--a-paper-2); }
.boom-auth-seg label { position: relative; }
.boom-auth-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.boom-auth-seg span { display: block; padding: 8px 16px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--a-soft); }
.boom-auth-seg input:checked + span { background: var(--a-paper); color: var(--a-ink); font-weight: 700; box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.boom-auth-seg input:focus-visible + span { outline: 2px solid var(--a-focus); }

/* business steps */
.boom-auth-stepper { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.boom-auth-stepper li { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--a-soft); }
.boom-auth-stepper li:not(:last-child)::after { content: ""; display: block; width: 40px; height: 2px; margin-left: 6px; border-radius: 1px; background: var(--a-line); }
.boom-auth-stepper li.is-done:not(:last-child)::after { background: var(--a-good); }
.boom-auth-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 13px; border: 1px solid var(--a-line-strong); background: var(--a-paper); color: var(--a-faint); font-size: 12.5px; font-weight: 700; }
.boom-auth-stepper li.is-on { color: var(--a-ink); font-weight: 700; }
.boom-auth-stepper li.is-on .boom-auth-num { border: 0; background: linear-gradient(180deg, #e73734, #c11e1e); color: #fff; }
.boom-auth-stepper li.is-done .boom-auth-num { border: 0; background: var(--a-good); color: transparent; position: relative; }
.boom-auth-stepper li.is-done .boom-auth-num::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; }
.boom-auth-step { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.js-steps .boom-auth-step:not(.is-on) { display: none; }
.boom-auth-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.boom-auth-grow { flex: 1 1 auto; }
.boom-auth-nav [hidden] { display: none !important; }
.boom-auth-note { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--a-line); border-radius: 12px; background: var(--a-paper-2); font-size: 13px; }
.boom-auth-note span { color: var(--a-soft); }

/* the document drop zone */
.boom-auth-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px; border: 1.5px dashed var(--a-line-strong); border-radius: 14px; background: var(--a-paper-2); text-align: center; cursor: pointer; }
.boom-auth-drop .boom-auth-ic { color: var(--a-soft); width: 22px; height: 22px; }
.boom-auth-drop strong { font-size: 14px; }
.boom-auth-drop small { max-width: 440px; color: var(--a-soft); font-size: 12px; }
.boom-auth-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.boom-auth-drop.is-over, .boom-auth-drop:focus-within { border-color: var(--a-focus); }
.boom-auth-drop.is-set { border-style: solid; border-color: var(--a-good); background: var(--a-good-soft); }
.boom-auth-drop.is-error { border-color: var(--a-bad); }

/* Application sent */
.boom-auth-acct { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--a-paper-2); }
.boom-auth-acct span { color: var(--a-soft); font-size: 13px; }
.boom-auth-acct strong { font-size: 17px; font-weight: 800; letter-spacing: .02em; }
.boom-auth-steps { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.boom-auth-steps li { display: flex; align-items: flex-start; gap: 10px; color: var(--a-faint); }
.boom-auth-steps li div { display: flex; flex-direction: column; }
.boom-auth-steps strong { color: var(--a-ink); font-size: 14px; font-weight: 650; }
.boom-auth-steps small { color: var(--a-soft); font-size: 12.5px; }
.boom-auth-steps li.is-done .boom-auth-ic { color: var(--a-good); }
.boom-auth-steps li.is-wait .boom-auth-ic { color: var(--a-warn); }

/* phone */
@media (max-width: 640px) {
  .boom-auth-page { padding: 14px 16px; }
  .boom-auth-brand strong { display: none; }
  .boom-auth-main { align-items: flex-start; padding: 16px 0; }
  .boom-auth-card { padding: 22px; border-radius: 18px; }
  .boom-auth-card h1 { font-size: 22px; }
  .boom-auth-cols.is-2, .boom-auth-cols.is-3 { grid-template-columns: 1fr; }
  .boom-auth-stepper .boom-auth-sname { display: none; }
  .boom-auth-stepper li.is-on .boom-auth-sname { display: inline; }
  .boom-auth-stepper li:not(:last-child)::after { width: 22px; }
  .boom-auth-rules { grid-template-columns: 1fr; }
  .boom-auth-nav .boom-auth-btn { flex: 1 1 auto; }
  .boom-auth-nav [data-boom-signin] { order: 9; width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .boom-auth * { transition: none !important; }
}