/* Shared visual system for login.html and registration.html (auth pages).
   Loaded after main.css via {% block link %} so it can extend/override by
   source order. Only uses existing root tokens from main.css - no new colors.
   All rules are scoped under .auth-form-panel / .auth-shell / .auth-* to avoid
   leaking into the rest of the site (header search box etc. also use
   .form-control / button). */

.auth-form-panel {
  /* main.css's --border-radius (5px) reads as noticeably sharper than the
     shell/card's --radius (10px) once both sit side by side - unify every
     input/button/dropdown/OTP box on these pages to one consistent radius
     instead of the site-wide 5px default. Scoped as a local override so it
     doesn't affect --border-radius anywhere else on the site. */
  --border-radius: 8px;
}

/* ---------- Sticky header opt-out ---------- */
/* scroll-animations.js (shared across the whole site, also loaded here for
   the fade-in/auth-enter entrance animation) turns the header into
   position:fixed after 100px of scroll via a .header-sticky class it adds
   to .sticky-header-wrapper, compensating with a body padding-top. On the
   auth pages the fixed header overlaps the card content instead (the JS
   still runs its own scroll listener and toggles the class - we only
   neutralize what that class visually does here, scoped to these two
   pages via :has() on their unique Vue mount ids). */
body:has(#loginPage) .header-sticky,
body:has(#registrationPage) .header-sticky {
  position: static !important;
  box-shadow: none !important;
  animation: none !important;
}

/* The same script also sets body.style.paddingTop inline (to compensate
   for the header leaving normal flow) - since the header above is forced
   back to static, that inline padding would just leave dead space at the
   top of the page. Cancel it with !important since inline styles can't
   otherwise be overridden by a stylesheet. */
body:has(#loginPage),
body:has(#registrationPage) {
  padding-top: 0 !important;
}

/* ---------- Layout shell ---------- */
/* Borderless split, premium treatment: no hard outline/frame, but an even
   soft shadow all the way around (not just underneath) so the card reads
   as a clearly elevated surface on every edge, including the top - a
   downward-only shadow leaves the top edge blending invisibly into the
   page background above it. */

.auth-shell {
  position: relative;
  align-items: stretch;
  min-height: 660px;
  border-radius: var(--radius);
  box-shadow:
    0 0 0 1px rgba(30, 31, 34, 0.04),
    0 2px 8px -2px rgba(30, 31, 34, 0.08),
    0 24px 60px -20px rgba(30, 31, 34, 0.18);
}

.auth-brand-panel {
  position: relative;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-5x) calc(var(--space-5x) + var(--space-1x));
  border-radius: var(--radius) 0 0 var(--radius);
  background: linear-gradient(160deg, var(--primary-color) 0%, #c8442f 45%, var(--secondary-color) 145%);
  background-image:
    linear-gradient(160deg, rgba(219, 78, 57, 0.96) 0%, rgba(200, 68, 47, 0.96) 45%, rgba(30, 31, 34, 0.97) 145%),
    url('/static/website/images/1hero-banner.jpeg');
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: hidden;
}

.auth-brand-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 10%, rgba(255, 255, 255, 0.16), transparent 45%),
    radial-gradient(circle at 90% 90%, rgba(255, 255, 255, 0.08), transparent 50%);
  pointer-events: none;
}

.auth-brand-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 30% 40%, #000 0%, transparent 70%);
  pointer-events: none;
}

.auth-brand-content {
  position: relative;
  z-index: 1;
  max-width: 440px;
}

.auth-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: calc(var(--font-size) - 3px);
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #fff;
  margin-bottom: var(--space-3x);
}

.auth-brand-logo {
  height: 32px;
  width: auto;
  margin-bottom: var(--space-4x);
  filter: brightness(0) invert(1);
}

.auth-brand-title {
  font-size: calc(var(--font-size) + 18px);
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.2;
  margin-bottom: var(--space-2x);
}

.auth-brand-subtitle {
  font-size: calc(var(--font-size));
  font-weight: 300;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--space-5x);
}

.auth-brand-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3x);
}

.auth-brand-points li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: calc(var(--font-size) - 1px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.95);
}

.auth-brand-points li i {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: calc(var(--font-size) - 2px);
}

.auth-form-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--space-3x) var(--space-4x);
}

/* ---------- Card container ---------- */

.auth-card {
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
}

.auth-card .login-form,
.auth-card .register-form,
.auth-card form {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.auth-card .form-control,
.auth-card .form-select,
.auth-card [class*="col-"] {
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 991.98px) {
  .auth-shell {
    min-height: auto;
    box-shadow: none;
  }

  .auth-form-panel {
    background: #fff;
    border-radius: var(--radius);
    padding: var(--space-4x) var(--space-2x);
  }
}

/* ---------- Entrance animation (CSS-only, no scroll-observer dependency) ---------- */

.auth-enter {
  animation: auth-fade-in-up 0.4s ease-out both;
}

@keyframes auth-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Header polish ---------- */

.auth-form-panel .evo_page_title {
  font-size: calc(var(--font-size) + 9px);
  font-weight: 600;
  white-space: normal;
  text-align: center;
  margin-bottom: var(--space-2x);
}

/* Forgot-password panel's description paragraph - was an unstyled <p>
   sitting between an oversized default <h2> and the first field label,
   which read as loosely/inconsistently spaced next to the other panels'
   tighter, token-based rhythm. */
.auth-forget-desc {
  color: var(--alternative-color);
  font-size: calc(var(--font-size) - 1px);
  line-height: 1.5;
  text-align: center;
  margin: 0 0 var(--space-2x);
}

/* Section headings ("Sign in information", "Personal information",
   "Company data", ...) get a small colored accent bar and a bottom
   border so each step/section reads as a distinct block, not just bold
   text blending into the fields below it. Registration's headings sit at
   varying depth inside .login-form form (transition > v-show div > ...),
   so match any h6 in the card rather than a fixed parent chain. */
.auth-card h6 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: calc(var(--font-size) + 1px);
  font-weight: 700;
  color: var(--secondary-color);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 0;
  margin-bottom: var(--space-2x);
  padding-bottom: var(--space-1x);
  border-bottom: 1px solid var(--border-color);
}

.auth-card h6::before {
  content: '';
  flex-shrink: 0;
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: var(--primary-color);
}

/* ---------- Field polish (reuses existing form-control/form-select/field-label) ---------- */

.auth-form-panel .field-label,
.auth-form-panel .email_field,
.auth-form-panel .password_label {
  font-weight: 500;
  color: var(--secondary-color);
}

.auth-form-panel .form-control,
.auth-form-panel .form-select {
  height: 46px;
  border-color: var(--border-color);
  border-radius: var(--border-radius);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Checkbox accent defaults to the browser's blue (Bootstrap's accent-color)
   - recolor to match the brand instead, same pattern main.css already uses
   for .evo-analysis .form-check-input. */
.auth-form-panel .form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.auth-form-panel .form-check-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--primary-light-color);
}

.auth-form-panel .form-control:hover,
.auth-form-panel .form-select:hover {
  border-color: var(--primary-color);
}

/* ---------- Custom dropdown (evo-select component, replaces native <select>) ---------- */
/* Native <select> popups can't be restyled with CSS in any browser - this
   component (website/static/website/js/common/auth-dropdown.js) renders its
   own list instead, so the open menu matches this design system. */

.evo-select {
  position: relative;
}

/* main.css's ".login-form form button, .sign-up-form form button" rule
   (background: primary-color, color: #fff) outranks a single .evo-select-
   trigger class and matches this too, since it's a real <button> inside
   .login-form form - same issue as .auth-btn-secondary earlier. Force the
   trigger's own look with !important so it never inherits that filled
   red-button treatment. */
.evo-select-trigger {
  width: 100%;
  height: 46px;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  background: #fff !important;
  background-image: none !important;
  color: var(--secondary-color) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--border-radius) !important;
  margin: 0 !important;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem !important;
  font-weight: 400 !important;
  cursor: pointer;
}

.evo-select-label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* SVG background-image chevron instead of a rotated-border trick - the
   border-trick renders inconsistently at small sizes across browsers/
   devices (can look like a checkmark instead of a clean down-arrow).
   main.css's ".login-form form span { width: max-content }" (and a
   line-height rule) also matches this span - since it's an empty span with
   no text content, max-content collapses its width to 0, hiding the icon
   entirely. That rule outranks a single class by specificity even without
   !important, so force width/height explicitly here. */
.evo-select-chevron {
  display: block !important;
  flex: 0 0 auto;
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  left: auto !important;
  width: 12px !important;
  height: 12px !important;
  line-height: 0 !important;
  margin: -6px 0 0 0 !important;
  padding: 0 !important;
  float: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2,4 6,8 10,4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  transition: transform 0.2s ease;
  pointer-events: none;
}

.evo-select.evo-select-open .evo-select-chevron {
  transform: rotate(180deg);
}

.evo-select-trigger:focus,
.evo-select-trigger:focus-visible {
  outline: none;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px var(--primary-light-color);
}

/* .evo-select-trigger's own border above is !important, same as main.css's
   .input-error-border - since both are !important, source order (not
   specificity) breaks the tie, and auth.css loading after main.css would
   let our border win over the error state. Bump specificity here instead
   of relying on load order. */
.evo-select-trigger.input-error-border {
  border-color: #c66c6c !important;
}

.evo-select.evo-select-open .evo-select-trigger {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--primary-light-color);
}

.evo-select-disabled .evo-select-trigger {
  background: var(--background-color-2) !important;
  color: var(--alternative-color) !important;
  cursor: not-allowed;
}

.evo-select-menu {
  position: absolute;
  z-index: 1050;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: 0 12px 32px -8px rgba(30, 31, 34, 0.18);
  animation: auth-fade-in-up 0.15s ease-out both;
}

.evo-select-option {
  padding: 9px 12px;
  border-radius: calc(var(--border-radius) - 2px);
  font-size: calc(var(--font-size) - 1px);
  color: var(--secondary-color);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.evo-select-option:hover {
  background: var(--primary-light-color);
  color: var(--primary-color);
}

.evo-select-option-active {
  background: var(--primary-color);
  color: #fff;
  font-weight: 600;
}

.evo-select-option-active:hover {
  background: var(--primary-color);
  color: #fff;
}

/* ---------- VAT input group with integrated custom country prefix dropdown ---------- */
.auth-vat-group {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--border-radius);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-vat-group:focus-within,
.auth-vat-group:has(.evo-select-open) {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px var(--primary-light-color) !important;
}

.auth-vat-group.input-error-border {
  border-color: #c66c6c !important;
}

.auth-vat-group.input-error-border:focus-within {
  border-color: #c66c6c !important;
  box-shadow: 0 0 0 3px var(--background-color-3) !important;
}

.auth-vat-select {
  flex: 0 0 92px;
  width: 92px;
  position: relative;
}

.auth-vat-select::after {
  content: '';
  position: absolute;
  right: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--border-color);
  pointer-events: none;
}

.auth-form-panel .auth-vat-select .evo-select-trigger,
.auth-form-panel .auth-vat-select .evo-select-trigger:focus,
.auth-form-panel .auth-vat-select .evo-select-trigger:focus-visible,
.auth-form-panel .auth-vat-select.evo-select-open .evo-select-trigger {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: calc(var(--border-radius) - 1px) 0 0 calc(var(--border-radius) - 1px) !important;
  height: 46px;
  padding: 0.375rem 1.75rem 0.375rem 0.75rem !important;
  background: transparent !important;
}

.auth-vat-select .evo-select-chevron {
  right: 10px !important;
}

.auth-vat-select .evo-select-menu {
  width: 130px;
  min-width: 100%;
  max-height: 220px;
  z-index: 30;
}

.auth-form-panel .auth-vat-input,
.auth-form-panel .auth-vat-input:focus,
.auth-form-panel .auth-vat-input:focus-visible {
  flex: 1 1 auto;
  min-width: 0;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 calc(var(--border-radius) - 1px) calc(var(--border-radius) - 1px) 0 !important;
  height: 46px;
  padding-left: 12px !important;
  background: transparent !important;
}

/* main.css hardcodes #id_login_email / #id_login_password to width:60%
   (tuned for the old narrow single column) - these ID selectors otherwise
   outrank our class-based rules above, so override by ID here to make
   both login inputs fill the redesigned card width like every other field. */
.auth-form-panel .password-input #id_login_password,
.auth-form-panel #id_login_email {
  width: 100%;
}

/* Shared look for the show/hide password icon on both pages - hover circle,
   cursor, no focus artifacts. Positioning is handled separately per page
   below, since login.html and registration.html use different wrapper
   markup (see .password-container / .auth-password-field). */
.auth-form-panel .password-toggle-icon {
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  outline: none !important;
  border: none;
  box-shadow: none !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.auth-form-panel .password-toggle-icon:hover,
.auth-form-panel .password-toggle-icon:focus,
.auth-form-panel .password-toggle-icon:focus-visible {
  background-color: var(--primary-light-color);
  color: var(--primary-color);
}

/* login.html: input + icon live in .password-container > .password-input /
   .password-eye. main.css also positions .password-eye itself absolutely
   (left:54%/59%/86% across breakpoints, tuned for the old 60%-wide input) -
   neutralize that second positioning layer and position the icon directly
   against .password-container instead. */
.auth-form-panel .password-container {
  position: relative;
}

.auth-form-panel .password-eye {
  position: static !important;
  left: auto !important;
  top: auto !important;
}

.auth-form-panel .password-container .password-toggle-icon {
  position: absolute !important;
  left: auto !important;
  right: 12px !important;
  top: 50% !important;
  margin: 0 !important;
  float: none !important;
  transform: translateY(-50%) !important;
}

/* registration.html: input + icon are wrapped together in
   .auth-password-field (added specifically so the icon centers against just
   the input, not the taller .form-group that also contains the password
   requirements checklist below it). */
.auth-password-field {
  position: relative;
}

.auth-password-field .form-control {
  padding-right: 44px;
}

.auth-password-field .password-toggle-icon {
  position: absolute !important;
  left: auto !important;
  right: 4px !important;
  top: 50% !important;
  margin: 0 !important;
  float: none !important;
  transform: translateY(-50%) !important;
}

/* Login/registration forms ship with legacy width utility classes
   (e.g. w-60, .signin-btn-group at 60%) tuned for the old narrow single
   column. Inside the wider auth card, make the form and its action groups
   fill and center within the card instead of hugging the left edge. */
.auth-form-panel form,
.auth-form-panel .w-60,
.auth-form-panel .w-50 {
  width: 100% !important;
}

.auth-form-panel .signin-btn-group {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Some buttons/wrappers in the legacy markup carry Bootstrap grid classes
   (col-md-6, col-md-12, col-sm-11 etc.) used outside a .row context - inside
   the auth card these should just behave as full-width blocks, not attempt
   a 50%/91.6% grid split against a nonexistent gutter. */
.auth-form-panel .signin-btn-email,
.auth-form-panel .signin-btn-email [class*="col-"],
.auth-form-panel form > [class*="col-"] {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
}

.auth-form-panel .form-control:focus,
.auth-form-panel .form-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--primary-light-color);
  outline: none;
}

.auth-form-panel .input-error-border:focus {
  box-shadow: 0 0 0 3px var(--background-color-3);
}

/* ---------- OTP inputs (migrated from login.html inline <style>) ---------- */

.auth-otp-input {
  gap: 12px;
}

.auth-otp-input input {
  width: 52px;
  height: 52px;
  text-align: center;
  font-size: calc(var(--font-size) + 8px);
  font-weight: 600;
  color: var(--secondary-color);
  border: 1.5px solid var(--border-color);
  border-radius: var(--border-radius);
  background-color: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-otp-input input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--primary-light-color);
  outline: none;
}

.auth-otp-input input::-webkit-outer-spin-button,
.auth-otp-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.auth-timer-message {
  display: block;
  font-size: calc(var(--font-size) - 3px);
  margin-top: 5px;
  color: var(--alternative-color);
}

input[type='password']::-ms-reveal,
input[type='password']::-ms-clear,
input[type='password']::-webkit-credentials-auto-fill-button {
  display: none !important;
}

/* ---------- Buttons ---------- */

/* main.css has several "@media (max-width: ...) .login-form form button,
   .sign-up-form form button { padding/margin/font-size }" rules (1440px,
   1024px breakpoints) that shrink every button inside .login-form form -
   including our step-action/secondary buttons - down to tiny squares on
   mobile. Force our own sizing with !important so it holds at every
   viewport width instead of being overridden per breakpoint. */
.auth-form-panel button:not(.btn-close) {
  height: 46px !important;
  padding: 0 20px !important;
  margin: 0 !important;
  font-size: var(--font-size) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.auth-form-panel button:not(.btn-close):not(.auth-btn-secondary):not(.evo-select-trigger):not(.guest-signin-btn) {
  box-shadow: 0 8px 20px -8px rgba(219, 78, 57, 0.45);
}

.auth-form-panel button:not(.btn-close):not(.auth-btn-secondary):not(.evo-select-trigger):hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px rgba(219, 78, 57, 0.5);
}

.auth-form-panel button:not(.btn-close):not(.evo-select-trigger):active {
  transform: translateY(0);
  box-shadow: none;
}

.auth-form-panel button:not(.btn-close):not(.evo-select-trigger):focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Dropdown trigger should feel like the plain text inputs (.form-control),
   not like a call-to-action button: no lift/glow on hover, just the same
   border-color hover cue and focus ring the inputs use. */
.evo-select-trigger:hover {
  border-color: var(--primary-color) !important;
}

/* "Sign in as guest" is a plain <a> now (same pattern as "Forgot
   password?"'s .btn-link), just centered as a block below the button row
   instead of inline next to a label. */
.auth-form-panel .auth-guest-link {
  display: block;
  width: fit-content;
  margin: var(--space-2x) auto 0;
}

/* main.css has a generic ".login-form form button, .sign-up-form form
   button { color:#fff }" base rule that outranks a single .auth-btn-secondary
   class by specificity - force the outline button's own colors with
   !important so it never inherits that white text treatment. */
.auth-btn-secondary {
  background: #fff !important;
  color: var(--primary-color) !important;
  border: 1px solid var(--primary-color) !important;
  border-radius: var(--border-radius);
  padding: 0 25px !important;
  margin: 0 !important;
  font-weight: 500;
  font-size: var(--font-size) !important;
  outline: none;
  box-shadow: none;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.auth-btn-secondary:hover,
.auth-btn-secondary:focus {
  background: var(--primary-light-color) !important;
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  box-shadow: none;
  transform: translateY(-1px);
}

.auth-btn-secondary:active {
  background: var(--primary-light-color) !important;
  color: var(--primary-color) !important;
  box-shadow: none;
  transform: translateY(0);
}

.auth-form-panel .auth-btn-secondary:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* ---------- Panel/step transitions (Vue <transition> hooks) ---------- */

.auth-panel-enter-active,
.auth-panel-leave-active,
.auth-step-enter-active,
.auth-step-leave-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.auth-panel-enter-from,
.auth-step-enter-from {
  opacity: 0;
  transform: translateY(8px);
}

.auth-panel-leave-to,
.auth-step-leave-to {
  opacity: 0;
  transform: translateY(-8px);
}

/* ---------- Stepper (registration wizard) ---------- */

.auth-stepper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  margin: 0 auto var(--space-3x);
}

.auth-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.auth-step-connector {
  position: absolute !important;
  top: 15px !important;
  left: -50% !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--border-color) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  z-index: 0;
}

.auth-step:first-child .auth-step-connector {
  display: none;
}

.auth-step.auth-step-complete .auth-step-connector {
  background: var(--primary-color) !important;
}

.auth-step-number {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--border-color);
  color: var(--alternative-color);
  font-weight: 600;
  font-size: calc(var(--font-size) - 2px);
  transition: all 0.2s ease;
}

.auth-step-label {
  margin-top: 8px;
  font-size: calc(var(--font-size) - 3px);
  color: var(--alternative-color);
  font-weight: 500;
}

.auth-step.auth-step-active .auth-step-number {
  border-color: var(--primary-color);
  background: var(--primary-color);
  color: #fff;
  box-shadow: 0 0 0 4px var(--primary-light-color);
}

.auth-step.auth-step-active .auth-step-label {
  color: var(--secondary-color);
  font-weight: 600;
}

.auth-step.auth-step-complete .auth-step-number {
  border-color: var(--primary-color);
  background: var(--primary-light-color);
  color: var(--primary-color);
}

.auth-step.auth-step-complete .auth-step-number::after {
  content: '\2713';
}

.auth-step.auth-step-complete .auth-step-number span {
  display: none;
}

.auth-step.auth-step-complete {
  cursor: pointer;
}

.auth-step-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1x);
  margin-top: var(--space-3x);
}

.auth-step-actions .auth-btn-secondary {
  flex: 0 0 auto;
}

.auth-step-actions button[type="button"]:not(.auth-btn-secondary) {
  margin-left: auto;
}

/* ---------- Responsive ---------- */

@media (max-width: 575.98px) {
  .auth-step-label {
    display: none;
  }

  .auth-otp-input input {
    width: 46px;
    height: 46px;
  }
}