:root {
  --selection-bg: #dbdbdb;
  --selection-moz-bg: #dbdbdb;
  --bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  --left-bg: rgba(255, 255, 255, 0.85); /* Glassmorphism */
  --left-shadow: rgba(0,0,0,0.05); /* Softer shadow */
  --right-bg: #2b3035; /* Darker accent */
  --right-shadow: rgba(0,0,0,0.1);
  --right-text: #F1F1F2;
  --label-color: #5a6474;
  --input-text: #2c3e50;
  --submit-color: #707075;
  --submit-focus: #575757;
  --submit-active: #4d4d4d;
  --primary-color: #2363c3;
}

::selection { background: var(--selection-bg); }
::-webkit-selection { background: var(--selection-bg); }
::-moz-selection { background: var(--selection-moz-bg); }

/* REMOVED body styles that break titlebar layout (display: flex, center, etc) */
/* Instead, we style the page container to center content inside the main content area */
.page {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  min-height: 100vh; /* Full screen height now that titlebar is hidden */
  position: relative;
}

/* Gradient background applied to body via style.css or separate logic, 
   but since this login.css is likely scoped or loaded on login page, 
   we can set background on .page or keep it on body if safe. 
   To be safe and avoid breaking layout, we set background on body 
   but NOT layout properties. */
body {
    background: var(--bg-gradient);
    /* No display:flex here to avoid squishing the titlebar */
}

.container {
  height: 480px; /* Increased height */
  margin: 0 auto;
  width: 800px; /* Increased width */
  display: flex;
  background: transparent;
  align-items: center;
  justify-content: center;
  position: relative;
}

@media (max-width: 767px) {
  .container {
    flex-direction: column;
    height: auto;
    width: 90%;
  }
}

.left {
  background: var(--left-bg);
  height: 380px;
  position: absolute;
  left: 50px; /* Overlap effect */
  width: 400px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 767px) {
  .left {
    position: relative;
    width: 100%;
    left: 0;
    margin-bottom: 20px;
    height: auto;
    padding: 40px 0;
  }
}

.right {
  position: absolute;
  right: 0;
  top: 0;
  width: 400px; /* Fixed width for stability */
  height: 100%;
  background: var(--right-bg);
  box-shadow: 0 8px 32px 0 var(--right-shadow);
  color: var(--right-text);
  border-radius: 20px;
  z-index: 1; /* Behind left card */
  display: flex; /* Ensure content centering */
  align-items: center;
  justify-content: center;
}

/* Desktop language toggle — fixed to viewport so no stacking context can bury it */
.desktop-lang-toggle {
    position: fixed;
    top: 1.1rem;
    inset-inline-end: 1.25rem; /* logical: right in LTR, left in RTL */
    right: 1.25rem;            /* physical fallback for older browsers */
    left: auto;
    z-index: 1100;             /* above any panel stacking context */
}

/* Readable on ANY login background — the toggle is a fixed element that can sit
   over a coloured banner, a light gradient, or a plain white form area, so it
   must supply its own contrast rather than assume a dark/coloured backdrop.
   A theme-aware glass pill (visible on white via its border + shadow) with a
   primal accent on the active option works on light and dark themes alike. */
.dlux-login-lang-toggle {
    background: color-mix(in srgb, var(--bg-card, #fff) 82%, transparent);
    border: 1px solid rgba(var(--primal-rgb, 35, 99, 195), 0.24);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.dlux-login-lang-toggle .lang-option {
    color: var(--label-color);
    opacity: 0.9;
}

.dlux-login-lang-toggle .lang-option:hover {
    color: var(--primal, var(--primary-color));
    opacity: 1;
}

.dlux-login-lang-toggle .lang-option.active {
    background: var(--primal, var(--primary-color));
    color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    opacity: 1;
}

@media (max-width: 767px) {
  .right {
    position: relative;
    width: 100%;
    right: 0;
    height: 250px;
  }
}

.form {
  margin: 40px;
  /* text-align: right; REMOVED to allow inheritance from body/html dir attribute */
  width: calc(100% - 80px);
}

label {
  color: var(--label-color);
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 8px;
}

input {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  color: var(--input-text);
  font-size: 16px;
  height: 45px;
  line-height: 45px;
  outline: none !important;
  width: 100%;
  padding: 0 15px; /* Add padding */
  margin-top: 5px; /* Reduced top margin since we use padding */
  margin-bottom: 15px;
  transition: all 0.3s ease;
}

/* Fix LTR alignment when in English */
html[dir="ltr"] .form,
html[dir="ltr"] .form div,
html[dir="ltr"] .form input,
html[dir="ltr"] .form label {
    text-align: left !important;
    direction: ltr !important;
}

input:focus {
  border-color: var(--primary-color);
  background: white;
  box-shadow: 0 0 0 3px rgba(35, 99, 195, 0.1);
}

input::-moz-focus-inner { border: 0; }

#submit {
  color: white;
  margin-top: 30px;
  transition: all 0.3s;
  background-color: var(--submit-color);
  border: none;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

#submit:hover { 
  background-color: var(--submit-focus); 
  transform: translateY(-2px);
}

#submit:active { transform: translateY(0); }

/* New Utility Classes for specific elements */
.login-input { 
  font-size: 18px !important; 
}
.login-submit { 
  font-size: 18px !important; 
}

.login-register-action {
  display: flex;
  justify-content: center;
}

.login-register-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.45rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  color: var(--primal_dark, var(--primary-color));
  background: rgba(var(--primal-rgb, 35, 99, 195), 0.09);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.login-register-link:hover,
.login-register-link:focus-visible {
  color: var(--primal_dark, var(--primary-color));
  background: rgba(var(--primal-rgb, 35, 99, 195), 0.15);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
  outline: none;
}

/* "Forgot password?" — a quiet inline link under the sign-in button. */
.dlux-login-forgot-link {
  color: var(--primal_dark, var(--primary-color));
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 6px;
  padding: 0.15rem 0.35rem;
  transition: color 0.18s ease, background 0.18s ease;
}

.dlux-login-forgot-link:hover,
.dlux-login-forgot-link:focus-visible {
  color: var(--primal_dark, var(--primary-color));
  background: rgba(var(--primal-rgb, 35, 99, 195), 0.10);
  text-decoration: underline;
  outline: none;
}

/* Lockout countdown — a persistent notice under the sign-in button (not a
   flash/toast): it stays put and its message ticks down live. */
.dlux-login-lockout {
  width: 100%;
}

.dlux-login-lockout .alert {
  font-size: 0.92rem;
  font-weight: 600;
}

.dlux-login-lockout [data-dlux-lockout-message] {
  font-variant-numeric: tabular-nums;
}

.dlux-login-lockout--cleared .alert {
  opacity: 0.9;
}
/* Adaptive Frosted Plate
   A premium near-white frosted card. It gives the logo a clean, consistent
   light surface in every context: it pops with depth on dark banners/themes,
   and reads as a subtle raised card on light surfaces. This is what lets a
   single (often dark or multi-colour) logo asset look good on any theme. */
.logo-frame {
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.97) 0%, rgba(244, 247, 251, 0.9) 100%);
    backdrop-filter: blur(18px) saturate(118%);
    -webkit-backdrop-filter: blur(18px) saturate(118%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 22px;
    padding: 22px 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(15, 23, 42, 0.05),
        0 18px 40px -16px rgba(15, 23, 42, 0.45),
        0 4px 12px -6px rgba(15, 23, 42, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.logo-frame:hover {
    transform: translateY(-4px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(15, 23, 42, 0.05),
        0 26px 54px -18px rgba(15, 23, 42, 0.5),
        0 6px 16px -6px rgba(15, 23, 42, 0.24);
}

/* Logo sits on the clean light plate — keep it crisp, no washed-out shadow. */
.logo-img {
  width: 100%;
  max-width: 180px;
  opacity: 1;
  filter: none;
}

@media (max-width: 767px) {
  .logo-frame {
      /* Keeps the adaptive frosted plate from the base rule; just trims metrics. */
      padding: 15px;
      border-radius: 20px;
      margin-bottom: 20px;
  }
  
  .logo-img {
    /* Mask the image to color it with the theme color */
    -webkit-mask-image: url("/static/img/login_logo.svg");
    mask-image: url("/static/img/login_logo.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: var(--primal, var(--primary-color));
    
    height: 80px; /* Explicit height for mask trick */
    width: 200px; /* Ensure width for mask */
    max-width: 100%;
    
    /* Hide the original image content so background color shows through mask */
    object-position: -99999px 0; 
  }
}

/* Language Toggle (Modern Pill Style) */
.lang-toggle-container {
    /* Removed fixed positioning to allow utility classes (relative/absolute) */
    z-index: 10;
    
    display: inline-flex; /* Changed from flex to inline-flex for better centering */
    background: rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    padding: 3px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(5px);
    
    /* Prevent side-switching */
    direction: ltr !important; 
}

.lang-option {
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--label-color);
    text-decoration: none;
    border-radius: 16px;
    transition: all 0.3s ease;
    min-width: 40px;
    text-align: center;
    opacity: 0.7;
}

.lang-option:hover {
    color: var(--primary-color);
    opacity: 1;
}

.lang-option.active {
    background: var(--bg-card, #fff);
    color: var(--primary-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    opacity: 1;
    font-weight: 700;
}

.dlux-page-alert-container {
    z-index: 2000;
}

/* Inline credential error — a modern red notice sitting directly under the
   password field (the field borders also go red), replacing the old floating
   top banner. The shake animation is still triggered off `.is-invalid`. */
.dlux-login-error {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    color: #dc3545;
    background: rgba(220, 53, 69, 0.08);
    border: 1px solid rgba(220, 53, 69, 0.28);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
    animation: dlux-login-error-in 0.22s ease both;
}

.dlux-login-error i {
    font-size: 1rem;
    line-height: 1.35;
    flex-shrink: 0;
}

.dlux-login-error__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

@keyframes dlux-login-error-in {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Field Error Styling */
.invalid-feedback {
    font-size: 0.8rem;
    color: #dc3545;
    margin-top: 0.25rem;
    font-weight: 500;
}

input.is-invalid {
    border-color: #dc3545 !important;
    background: rgba(220, 53, 69, 0.05) !important;
}

input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1) !important;
}

/* Public registration uses the same configurable login shell. */
.dlux-public-auth-page {
    padding: 1.5rem 0;
}

.dlux-public-auth-page.dlux-login--split .container {
    width: min(900px, 94vw);
}

.dlux-public-auth-page--register.dlux-login--split .container {
    height: 690px;
}

.dlux-public-auth-page--register.dlux-login--split .left {
    height: 620px;
}

.dlux-public-auth-page--state.dlux-login--split .container {
    height: 480px;
}

.dlux-public-auth-page--state.dlux-login--split .left {
    height: 380px;
}

.dlux-public-auth-form {
    max-width: 440px;
}

.dlux-public-auth-header,
.dlux-public-auth-status {
    text-align: center;
}

.dlux-public-auth-header {
    margin-bottom: 1.25rem;
}

.dlux-public-auth-header h1,
.dlux-public-auth-status h1 {
    color: var(--title, var(--input-text));
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.25;
    margin: 0;
}

.dlux-public-auth-status p {
    color: var(--label-color);
    font-size: 0.98rem;
    line-height: 1.6;
    margin: 0.85rem 0 0;
}

.dlux-public-auth-icon,
.dlux-public-auth-status__icon {
    align-items: center;
    background: rgba(var(--primal-rgb, 35, 99, 195), 0.1);
    border: 1px solid rgba(var(--primal-rgb, 35, 99, 195), 0.16);
    border-radius: 18px;
    color: var(--primal_dark, var(--primary-color));
    display: inline-flex;
    font-size: 1.35rem;
    height: 3.1rem;
    justify-content: center;
    margin-bottom: 0.85rem;
    width: 3.1rem;
}

.dlux-public-auth-status__icon {
    border-radius: 999px;
    font-size: 1.55rem;
    height: 4rem;
    width: 4rem;
}

.dlux-public-auth-status__icon--warn {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.24);
    color: #b45309;
}

.dlux-public-auth-status__icon--danger {
    background: rgba(220, 53, 69, 0.11);
    border-color: rgba(220, 53, 69, 0.22);
    color: #dc3545;
}

.dlux-public-auth-fields label {
    margin-top: 0.55rem;
}

.dlux-public-auth-fields .login-input {
    margin-bottom: 0.2rem;
}

@media (max-width: 767px) {
    .dlux-public-auth-page {
        padding: 1rem 0;
    }

    .dlux-public-auth-page.dlux-login--split .container,
    .dlux-public-auth-page--register.dlux-login--split .container,
    .dlux-public-auth-page--state.dlux-login--split .container {
        height: auto;
        min-height: 0;
    }

    .dlux-public-auth-page--register.dlux-login--split .left,
    .dlux-public-auth-page--state.dlux-login--split .left {
        height: auto;
    }

    .dlux-public-auth-form {
        max-width: 100%;
    }
}

/* Shake Animation */
@keyframes dlux-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.dlux-shake {
    animation: dlux-shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

/* Subtle input hover/focus improvements */
.login-input:hover:not(.is-invalid) {
    border-color: rgba(35, 99, 195, 0.3);
}

.login-2fa-panel {
    padding: 1rem 1rem 0.5rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(35, 99, 195, 0.08);
}

/* Frosted circular badge above the instruction text. */
.login-2fa-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 999px;
    font-size: 1.5rem;
    color: var(--primal_dark, var(--primary-color));
    background: rgba(var(--primal-rgb, 35, 99, 195), 0.1);
    border: 1px solid rgba(var(--primal-rgb, 35, 99, 195), 0.16);
}

.login-2fa-actions {
    align-items: center;
}

/* Icon-only method-switch buttons (email / authenticator / backup / return),
   each paired with a dlux tooltip carrying the detail the text used to show. */
.login-2fa-method-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    border-radius: 999px;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--primal_dark, var(--primary-color));
    background: color-mix(in srgb, var(--bg-card, #fff) 78%, transparent);
    border: 1px solid rgba(var(--primal-rgb, 35, 99, 195), 0.25);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-2fa-method-btn:hover,
.login-2fa-method-btn:focus-visible {
    background: var(--primal, var(--primary-color));
    border-color: var(--primal, var(--primary-color));
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(var(--primal-rgb, 35, 99, 195), 0.28);
    outline: none;
}

.login-2fa-method-btn:disabled {
    opacity: 0.55;
    cursor: default;
    transform: none;
    box-shadow: none;
}

.login-2fa-method-btn .spinner-border {
    width: 1rem;
    height: 1rem;
}

.login-2fa-method-btn--return {
    color: var(--label-color);
    border-color: rgba(148, 163, 184, 0.4);
}

.dlux-twofa-inline-alert {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin-bottom: 1rem;
    padding: 0.8rem 0.95rem;
    text-align: center;
    word-break: break-word;
}

.dlux-twofa-inline-alert i {
    flex: 0 0 auto;
}

/* Trust-device switch — SELF-CONTAINED, not a Bootstrap form-switch. The login
   page's broad `input { background; width:100%; height:45px }` and
   `input:focus { background:white }` rules use the `background` shorthand, which
   wipes Bootstrap's switch knob (a background-image) and left the control looking
   doubled / with the knob mis-placed. So we build the knob as a `::before`
   pseudo-element (immune to background overrides) and use logical
   `inset-inline-start` so it flips correctly in RTL with no extra rules. */
.dlux-twofa-trust-field {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding-left: 0;
    min-height: 0;
}

.dlux-twofa-trust-field .form-check-input {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 2.4em;
    height: 1.3em;
    min-height: 0;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    float: none;
    cursor: pointer;
    border: 1px solid rgba(148, 163, 184, 0.55) !important;
    border-radius: 2em !important;
    background: rgba(148, 163, 184, 0.28) !important;
    background-image: none !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.dlux-twofa-trust-field .form-check-input::before {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-start: 0.15em;
    width: 0.95em;
    height: 0.95em;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transform: translateY(-50%);
    transition: inset-inline-start 0.2s ease;
}

.dlux-twofa-trust-field .form-check-input:checked {
    background: var(--primal, var(--primary-color)) !important;
    border-color: var(--primal, var(--primary-color)) !important;
}

.dlux-twofa-trust-field .form-check-input:checked::before {
    inset-inline-start: calc(100% - 1.1em);
}

.dlux-twofa-trust-field .form-check-input:focus,
.dlux-twofa-trust-field .form-check-input:focus-visible {
    background: rgba(148, 163, 184, 0.28) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primal-rgb, 35, 99, 195), 0.18) !important;
}

.dlux-twofa-trust-field .form-check-input:checked:focus,
.dlux-twofa-trust-field .form-check-input:checked:focus-visible {
    background: var(--primal, var(--primary-color)) !important;
}

.dlux-twofa-trust-field .form-check-label {
    margin: 0;
    line-height: 1.35;
    cursor: pointer;
}

/* Footer: back-to-login / cancel / resend as subtle inline pill buttons that
   sit inside the card (the plain link used to float outside it). */
.login-2fa-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.login-2fa-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--label-color);
    background: transparent;
    border: 1px solid rgba(148, 163, 184, 0.35);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.login-2fa-back:hover,
.login-2fa-back:focus-visible {
    color: var(--primal, var(--primary-color));
    border-color: rgba(var(--primal-rgb, 35, 99, 195), 0.4);
    background: rgba(var(--primal-rgb, 35, 99, 195), 0.08);
    outline: none;
}

/* Split (default) style packs a fixed-height overlapping card sized for the
   short login form; the 2FA form is taller, so bump the card like the register
   page does. Two heights: with the method panel (login) vs without (enable). */
.dlux-twofa-verify.dlux-login--split .container { height: 460px; }
.dlux-twofa-verify.dlux-login--split .left { height: 400px; }
.dlux-twofa-verify--methods.dlux-login--split .container { height: 580px; }
.dlux-twofa-verify--methods.dlux-login--split .left { height: 520px; }

@media (max-width: 767px) {
    .dlux-twofa-verify.dlux-login--split .container,
    .dlux-twofa-verify--methods.dlux-login--split .container { height: auto; min-height: 0; }
    .dlux-twofa-verify.dlux-login--split .left,
    .dlux-twofa-verify--methods.dlux-login--split .left { height: auto; }
}

/* ─── Privacy notice + registration consent ─────────────────────────────── */
.dlux-auth-privacy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 0.75rem;
    text-align: center;
}

.dlux-auth-privacy a {
    color: var(--primal, var(--primary-color));
    font-weight: 600;
    text-decoration: none;
}

.dlux-auth-privacy a:hover,
.dlux-auth-privacy a:focus-visible {
    text-decoration: underline;
}

/* Registration consent checkbox — reset the broad login `input` rule (width:100%
   / height:45px) that would otherwise stretch it into a full-width bar, and
   re-supply the checkmark the `background` shorthand resets would wipe. */
.dlux-auth-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    text-align: start;
    padding-left: 0;
}

.dlux-auth-consent .form-check-input {
    appearance: none;
    -webkit-appearance: none;
    width: 1.2em;
    height: 1.2em;
    min-height: 0;
    margin: 0.12em 0 0 !important;
    padding: 0;
    flex: 0 0 auto;
    float: none;
    cursor: pointer;
    border: 1px solid rgba(148, 163, 184, 0.7) !important;
    border-radius: 0.3em !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
}

.dlux-auth-consent .form-check-input:focus,
.dlux-auth-consent .form-check-input:focus-visible {
    outline: none;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(var(--primal-rgb, 35, 99, 195), 0.18) !important;
}

.dlux-auth-consent .form-check-input:checked,
.dlux-auth-consent .form-check-input:checked:focus {
    background-color: var(--primal, var(--primary-color)) !important;
    border-color: var(--primal, var(--primary-color)) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 0.85em !important;
}

.dlux-auth-consent .form-check-input.is-invalid {
    border-color: #dc3545 !important;
}

.dlux-auth-consent .form-check-label {
    margin: 0;
    line-height: 1.4;
    cursor: pointer;
}

.dlux-auth-consent .form-check-label a {
    color: var(--primal, var(--primary-color));
    font-weight: 600;
    text-decoration: none;
}

.dlux-auth-consent .form-check-label a:hover {
    text-decoration: underline;
}

/* ─── Login Style: Centered ─────────────────────────────────────────────────
   Single card: logo badge above, form card below, all centred on the page.  */
.dlux-login--centered {
    align-items: center;
    justify-content: center;
}

.dlux-login--centered .container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: min(460px, 94vw);
    height: auto;
    gap: 1.5rem;
}

.dlux-login--centered .right {
    position: static;
    width: auto;
    height: auto;
    background: transparent !important;
    box-shadow: none;
    border-radius: 0;
    order: 1;
    padding: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.dlux-login--centered .right .logo-frame {
    /* Inherits the adaptive frosted plate; just trim the padding/radius here. */
    padding: 1rem 1.5rem;
    border-radius: 16px;
}

.dlux-login--centered .right .logo-img {
    max-width: 120px;
    height: auto;
    filter: none;
    mask-image: none;
    -webkit-mask-image: none;
    background-color: transparent;
    object-position: center;
}

.dlux-login--centered .left {
    position: static;
    width: 100%;
    left: auto;
    height: auto;
    padding: 2.25rem 2rem;
    border-radius: 20px;
    order: 2;
}

/* .desktop-lang-toggle is now position:fixed globally — no per-layout override needed */

/* ─── Login Style: Minimal ───────────────────────────────────────────────────
   Floating card on a clean gradient — banner hidden entirely.               */
.dlux-login--minimal {
    align-items: center;
    justify-content: center;
    padding: 0;
}

.dlux-login--minimal .container {
    flex-direction: column;
    height: auto;
    width: min(420px, 92vw);
    background: transparent;
}

.dlux-login--minimal .left {
    position: static;
    width: 100%;
    left: auto;
    height: auto;
    padding: 2.5rem 2rem;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.55) inset,
        0 12px 40px rgba(15, 23, 42, 0.12);
}

.dlux-login--minimal .right {
    display: none !important;
}

/* .desktop-lang-toggle is now position:fixed globally — no per-layout override needed */

/* ─── Login Style: Full-Page Split ──────────────────────────────────────────
   True 50/50 split. Start = hero message. End = login form.                */
.dlux-login--fullpage {
    align-items: stretch;
    justify-content: stretch;
    min-height: 100vh;
    padding: 0;
}

.dlux-login--fullpage .container {
    flex-direction: row;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    max-width: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    position: static;
}

.dlux-login--fullpage .right {
    position: relative; /* anchor for the pinned hero logo */
    width: 50%;
    height: 100%;
    flex: 0 0 50%;
    border-radius: 0;
    order: 1;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 4rem 5vw;
    overflow-y: auto;
    /* Establish a single, consistent text colour for everything inside the hero panel.
       --bs-heading-color scopes Bootstrap's h1-h6 colour to match body text,
       preventing the theme's global heading colour from leaking in. */
    color: var(--right-text, #f1f1f2);
    --bs-heading-color: var(--right-text, #f1f1f2);
    --bs-link-color: var(--right-text, #f1f1f2);
}

.dlux-login--fullpage .left {
    position: static;
    width: 50%;
    height: 100%;
    flex: 0 0 50%;
    left: auto;
    border-radius: 0;
    order: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 5vw;
    background: var(--left-bg);
    box-shadow: -4px 0 32px rgba(15, 23, 42, 0.06);
    overflow-y: auto;
}

.dlux-login--fullpage .form {
    margin: 0;
    width: 100%;
    max-width: 380px;
}

/* .desktop-lang-toggle is now position:fixed globally — no per-layout override needed */

/* Hero message typography */
.dlux-login-hero {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    /* Inherits color from .dlux-login--fullpage .right — do not set it here */
}

/* Fullpage: the logo sits centered above the login form (in the .left panel). */
.dlux-login--fullpage .dlux-login-form-logo .logo-img {
    max-width: 140px;
}

.dlux-login-hero__body {
    font-size: 1.05rem;
    line-height: 1.75;
    width: 100%;
}

.dlux-login-hero__body h1,
.dlux-login-hero__body h2,
.dlux-login-hero__body h3 {
    font-weight: 700;
    margin-bottom: 0.6em;
    margin-top: 1.2em;
    line-height: 1.25;
    /* color resolves via --bs-heading-color scoped on the panel */
}

.dlux-login-hero__body h1 { font-size: 2rem; }
.dlux-login-hero__body h2 { font-size: 1.5rem; }
.dlux-login-hero__body h3 { font-size: 1.2rem; }

.dlux-login-hero__body p { margin-bottom: 0.9em; }

.dlux-login-hero__body ul,
.dlux-login-hero__body ol {
    padding-inline-start: 1.4em;
    margin-bottom: 0.9em;
}

.dlux-login-hero__body li { margin-bottom: 0.3em; }

.dlux-login-hero__body a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    opacity: 0.85;
}

.dlux-login-hero__body a:hover { opacity: 1; }

.dlux-login-hero__body strong { font-weight: 700; }
.dlux-login-hero__body em { font-style: italic; }
.dlux-login-hero__body s { opacity: 0.6; text-decoration: line-through; }
.dlux-login-hero__body code {
    /* Override Bootstrap's default red/pink for <code> */
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: inherit;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-size: 0.88em;
}

@media (max-width: 767px) {
    .dlux-login--fullpage .container {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }

    .dlux-login--fullpage .right,
    .dlux-login--fullpage .left {
        width: 100%;
        flex: none;
        height: auto;
        min-height: 50vh;
    }

    .dlux-login--fullpage .right {
        padding: 2.5rem 1.5rem;
        min-height: auto;
        order: 1;
    }

    .dlux-login--fullpage .left {
        order: 2;
        padding: 2.5rem 1.5rem;
    }
}

/* ─── Login Logo Treatments ──────────────────────────────────────────────────
   Mirrors the titlebar logo treatment system for the login banner logo.     */

/* Plate — keeps the premium frosted base surface; shape variants drive the radius. */
.logo-frame[data-login-logo-treatment="plate"][data-login-logo-treatment-shape="soft"] {
    border-radius: 18px;
}

.logo-frame[data-login-logo-treatment="plate"][data-login-logo-treatment-shape="pill"] {
    border-radius: 999px;
    padding-inline: 1.2rem;
}

.logo-frame[data-login-logo-treatment="plate"][data-login-logo-treatment-shape="square"] {
    border-radius: 6px;
}

/* Halo — accent glow around the plate (the plate is opaque, so glow the frame). */
.logo-frame[data-login-logo-treatment="halo"] {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 0 0 1px rgba(var(--primal-rgb, 13, 110, 253), 0.25),
        0 0 1.4rem rgba(var(--primal-rgb, 13, 110, 253), 0.4),
        0 18px 40px -16px rgba(15, 23, 42, 0.45);
}

.logo-frame[data-login-logo-treatment="halo"]:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 0 0 1px rgba(var(--primal-rgb, 13, 110, 253), 0.3),
        0 0 1.9rem rgba(var(--primal-rgb, 13, 110, 253), 0.5),
        0 26px 54px -18px rgba(15, 23, 42, 0.5);
}

/* Contrast */
.logo-frame[data-login-logo-treatment="contrast"] .logo-img,
[data-login-logo-treatment="contrast"] .logo-img {
    filter:
        brightness(1.08)
        contrast(1.12)
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.7))
        drop-shadow(0 0.2rem 0.6rem rgba(15, 23, 42, 0.25));
}

/* Banner colour support (--login-banner-color set on the panel by login.js from the
   data-login-banner-color bridge — no inline style attribute; DSRP-1). */
.right[data-login-banner-color] {
    background: var(--login-banner-color) !important;
}

/* Public registration final sizing overrides.
   Keep these after the login style blocks so split/centered/minimal all obey them. */
.dlux-public-auth-page--register .dlux-public-auth-header {
    margin-bottom: 0.75rem;
}

.dlux-public-auth-page--register .dlux-public-auth-icon {
    font-size: 1.15rem;
    height: 2.65rem;
    margin-bottom: 0.55rem;
    width: 2.65rem;
}

.dlux-public-auth-page--register .dlux-public-auth-header h1 {
    font-size: 1.32rem;
}

.dlux-public-auth-page--register .dlux-public-auth-fields .mb-3 {
    margin-bottom: 0.55rem !important;
}

.dlux-public-auth-page--register .dlux-public-auth-fields .row {
    --bs-gutter-y: 0.55rem;
}

.dlux-public-auth-page--register .dlux-public-auth-fields label {
    font-size: 0.82rem;
    margin-bottom: 0.28rem;
    margin-top: 0.25rem;
}

.dlux-public-auth-page--register .dlux-public-auth-fields .login-input {
    font-size: 1rem !important;
    height: 2.55rem;
    line-height: 2.55rem;
    margin-bottom: 0;
    margin-top: 0;
}

.dlux-public-auth-page--register #submit {
    margin-top: 1rem;
}

.dlux-public-auth-page--register .login-register-action {
    margin-top: 0.75rem !important;
}

.dlux-public-auth-page--register.dlux-login--split .container {
    height: 680px;
    width: min(920px, 94vw);
}

.dlux-public-auth-page--register.dlux-login--split .left {
    height: 610px;
    padding: 1.35rem 0;
    overflow-y: auto;
}

.dlux-public-auth-page--register.dlux-login--centered .container {
    width: min(500px, 94vw);
}

.dlux-public-auth-page--register.dlux-login--centered .left,
.dlux-public-auth-page--register.dlux-login--minimal .left {
    padding: 1.55rem 1.75rem;
}

.dlux-public-auth-page--register.dlux-login--minimal .container {
    width: min(460px, 92vw);
}

@media (max-height: 720px) and (min-width: 768px) {
    .dlux-public-auth-page--register.dlux-login--split .container {
        height: calc(100vh - 2rem);
    }

    .dlux-public-auth-page--register.dlux-login--split .left {
        height: calc(100vh - 4.5rem);
    }
}

@media (max-width: 767px) {
    .dlux-public-auth-page--register.dlux-login--split .container {
        height: auto;
    }

    .dlux-public-auth-page--register.dlux-login--split .left,
    .dlux-public-auth-page--register.dlux-login--centered .left,
    .dlux-public-auth-page--register.dlux-login--minimal .left {
        height: auto;
        overflow-y: visible;
        padding: 1.5rem 1.25rem;
    }
}

/* Login-only split sizing when public registration adds the create-account link. */
.dlux-login--split.dlux-login-has-register:not(.dlux-public-auth-page) .container {
    height: 530px;
}

.dlux-login--split.dlux-login-has-register:not(.dlux-public-auth-page) .left {
    height: 430px;
}

.dlux-login--split.dlux-login-has-register:not(.dlux-public-auth-page) .login-register-action {
    margin-top: 0.85rem !important;
}

.dlux-login--split.dlux-login-has-register:not(.dlux-public-auth-page) #submit {
    margin-top: 1.25rem;
}

@media (max-width: 767px) {
    .dlux-login--split.dlux-login-has-register:not(.dlux-public-auth-page) .container,
    .dlux-login--split.dlux-login-has-register:not(.dlux-public-auth-page) .left {
        height: auto;
    }
}

/* "None" should leave the uploaded login logo unframed. */
.logo-frame[data-login-logo-treatment="none"] {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.logo-frame[data-login-logo-treatment="none"]:hover {
    box-shadow: none;
    transform: none;
}

@media (max-width: 767px) {
    .logo-frame[data-login-logo-treatment="none"] {
        margin-bottom: 1rem;
        padding: 0;
    }
}