/* =========================================================================
   HB.AuthUI.css
   Fully custom, standalone presentation + behaviour layer for the merged
   HubBroker auth experience (Login / Sign Up / OTP), served through
   _AuthLayoutV2.cshtml.

   This version does NOT load or depend on ~/css/pages/auth.css at all -
   that stylesheet simply isn't referenced by the new layout. Every class
   used on this page (.btn-login-submit, .btn-entra-sso, .or-separator,
   .login-footer, .forgot-pass-link, .signup-text, .hb-auth-*, .card,
   .form-control, etc.) is styled fully here, from scratch. The class
   NAMES were kept identical to the originals on purpose (per request),
   so nothing downstream that might reference them by name breaks - only
   where they get their visual definition from has changed.

   _GlobalStyles / _GlobalScripts are still loaded by the layout (Bootstrap
   5, Bootstrap Icons, jQuery, Bootstrap's JS bundle, the CSS variables
   --hb-primary / --hb-accent / etc.) - this file builds on top of those
   variables and Bootstrap's base, but owns 100% of the auth page's look.

   BACKGROUND ASSET: /Images/2__Clean_and_Corporate_Design_Background.png
   LOGO ASSET: /Images/hubbroker_logo_big_en.png
   ========================================================================= */

:root {
    /*
      This layout no longer loads ~/css/hubbroker-variables.css, so these
      three brand colors - previously inherited from that file - are now
      defined here directly, matched to what's visible across your
      screenshots. If you have the exact hex values from that file,
      replace these three and everything on the page (buttons, accents,
      stats, icons) updates automatically, since every rule below
      consumes these variables rather than hardcoding color.
  */
    --hb-primary: #5c6b2f;
    --hb-primary-dark: #3f4a1f;
    --hb-accent: #8bc34a;
    --hbauth-radius-lg: 16px;
    --hbauth-radius-md: 10px;
}

* {
    box-sizing: border-box;
}

.hb-auth-body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: 'Open Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    background: #eef1e4;
}

.hb-auth {
    position: relative;
    width: 100%;
    min-height: 100vh;
}

.hb-auth-shell {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
}

@media (min-width: 992px) {
    .hb-auth-shell {
        flex-direction: row;
        min-height: 100vh;
    }
}

/* -------------------------------------------------------------------------
   Background layer: real photo, edge-to-edge, light scrim + brand glow.
   ------------------------------------------------------------------------- */
.hb-auth-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.hb-auth-bg-photo {
    position: absolute;
    inset: 0;
    /*background-image: url('/Images/2_Clean_and_Corporate_Design_Background.png');*/
    background-image: url('/Images/2_Clean_and_Corporate_Design_Background.png');
    background-size: cover;
    background-position: center;
}

.hb-auth-bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 100deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .06) 40%, rgba(255, 255, 255, 0) 65% );
}

.hb-auth-glow {
    position: absolute;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--hb-primary) 0%, transparent 70%);
    opacity: .13;
    filter: blur(10px);
    top: -10%;
    left: 6%;
}

/* -------------------------------------------------------------------------
   Brand / marketing panel - desktop (lg+) only, shared across all three
   auth panels. Content max-widths are deliberately generous (640px) so
   the panel's own flex column doesn't leave a large dead gap before the
   auth card - this was the biggest contributor to the page reading as
   "empty" at normal desktop widths.
   ------------------------------------------------------------------------- */
.hb-auth-brand-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem 1.5rem 1rem;
    position: relative;
    z-index: 1;
    color: #22261c;
}

@media (min-width: 992px) {
    .hb-auth-brand-panel {
        flex: 1 1 56%;
        padding: 3rem 4.5rem;
    }
}

.hb-auth-logo img {
    height: 46px;
    display: block;
}

.hb-auth-hero-title {
    font-size: clamp(2.1rem, 2.6vw + 1rem, 3.1rem);
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.14;
    color: #1c2015;
    margin: 1.65rem 0 1.1rem;
}

.hb-auth-accent {
    color: var(--hb-primary);
}

.hb-auth-hero-divider {
    display: block;
    width: 58px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--hb-primary), var(--hb-accent, var(--hb-primary)));
    margin: 0 0 1.4rem;
}

.hb-auth-hero-desc {
    font-size: 1.08rem;
    line-height: 1.68;
    color: #5b6350;
    max-width: 640px;
    margin-bottom: 2.1rem;
}

.hb-auth-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 1rem;
    max-width: 680px;
}

@media (max-width: 1199.98px) and (min-width: 992px) {
    .hb-auth-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .hb-auth-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .75rem;
    }
}

@media (max-width: 420px) {
    .hb-auth-feature-grid {
        grid-template-columns: 1fr;
    }
}

.hb-auth-feature {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .55rem;
    padding: 1.1rem 1.1rem;
    border-radius: var(--hbauth-radius-md);
    background: #fff;
    border: 1px solid #e3e6da;
    box-shadow: 0 2px 10px rgba(20, 30, 10, .06);
    transition: transform .22s cubic-bezier(.4, 0, .2, 1), box-shadow .22s ease, border-color .22s ease;
}

    .hb-auth-feature:hover,
    .hb-auth-feature.is-highlighted {
        transform: translateY(-4px);
        border-color: var(--hb-primary);
        box-shadow: 0 16px 30px rgba(20, 30, 10, .14);
    }

        .hb-auth-feature.is-highlighted .hb-auth-feature-icon {
            background: linear-gradient(145deg, rgba(var(--bs-success-rgb, 25, 135, 84), .3), rgba(var(--bs-success-rgb, 25, 135, 84), .1));
        }

@media (prefers-reduced-motion: reduce) {
    .hb-auth-feature.is-highlighted {
        transform: none;
    }
}

.hb-auth-feature-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--hb-primary);
    background: linear-gradient(145deg, rgba(var(--bs-success-rgb, 25, 135, 84), .16), rgba(var(--bs-success-rgb, 25, 135, 84), .05));
    border: 1px solid rgba(20, 30, 10, .07);
}

.hb-auth-feature-label {
    display: block;
    font-size: .93rem;
    font-weight: 700;
    line-height: 1.3;
    color: #22261c;
}

.hb-auth-feature-desc {
    display: block;
    font-size: .78rem;
    line-height: 1.45;
    color: #5b6350;
    margin-top: .15rem;
}

/* -------------------------------------------------------------------------
   Trust bar - matches the concept image exactly: a divider, "Trusted by
   1000+ businesses across industries", then five industry chips.
   ------------------------------------------------------------------------- */
.hb-auth-stats-row {
    display: flex;
    gap: 2.25rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e3e6da;
    max-width: 680px;
}

.hb-auth-stat-value {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--hb-primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.hb-auth-stat-label {
    font-size: .75rem;
    color: #5b6350;
    margin-top: .3rem;
}

.hb-auth-trust-bar {
    margin-top: 1.4rem;
    padding-top: 1.1rem;
    border-top: 1px solid #e3e6da;
    max-width: 680px;
}

.hb-auth-trust-label {
    display: block;
    font-size: .78rem;
    color: #5b6350;
    margin-bottom: .9rem;
}

.hb-auth-trust-icons {
    display: flex;
    gap: 1.6rem;
    flex-wrap: wrap;
}

.hb-auth-trust-item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    font-weight: 600;
    color: #5b6350;
}

    .hb-auth-trust-item .bi {
        font-size: 1rem;
        color: var(--hb-primary);
    }

/* -------------------------------------------------------------------------
   Form panel - always visible, becomes the whole page below lg.
   ------------------------------------------------------------------------- */
.hb-auth-form-panel {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.75rem 1.25rem 2.5rem;
    position: relative;
    z-index: 1;
}

@media (min-width: 992px) {
    .hb-auth-form-panel {
        flex: 1 1 44%;
        padding: 2.5rem 1.25rem;
    }
}

.hb-auth-form-inner {
    width: 100%;
    max-width: 500px;
}

.hb-auth-form-logo {
    text-align: center;
    margin-bottom: 1.5rem;
}

    .hb-auth-form-logo img {
        height: 40px;
    }

/* Panel switching - Login / Sign Up / OTP. Only the active one renders. */
.hb-auth-tabpanel {
    display: none;
}

    .hb-auth-tabpanel.is-active {
        display: block;
        animation: hbAuthPanelIn .35s cubic-bezier(.16, 1, .3, 1);
    }

@keyframes hbAuthPanelIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

/* -------------------------------------------------------------------------
   Card - fully custom (no reliance on Bootstrap's default .card look).
   ------------------------------------------------------------------------- */
.hb-auth-card {
    border-radius: var(--hbauth-radius-lg) !important;
    position: relative;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 24px 54px rgba(20, 30, 10, .16) !important;
}

    /* Spacious, professional card padding - noticeably roomier than
   Bootstrap's default p-4 (which the markup still carries as a fallback
   if this file ever fails to load). */
    .hb-auth-card .card-body {
        padding: 2.4rem 2.25rem !important;
    }

@media (max-width: 575.98px) {
    .hb-auth-card .card-body {
        padding: 1.9rem 1.4rem !important;
    }
}

.hb-auth-form-title {
    font-weight: 700;
    font-size: 1.0rem;
    color: #1c2015;
}

.hb-auth-form-subtitle {
    font-size: .85rem;
}

.hb-auth-link,
.forgot-pass-link,
.signup-text a {
    color: var(--hb-primary) !important;
    text-decoration: none;
    transition: color .18s ease;
}

    .hb-auth-link:hover,
    .forgot-pass-link:hover,
    .signup-text a:hover {
        color: var(--hb-primary-dark, var(--hb-primary)) !important;
        text-decoration: underline !important;
    }

.signup-text {
    font-size: .9rem;
    color: #5b6350;
}

/* -------------------------------------------------------------------------
   Form controls - fully custom, scoped to .hb-auth so nothing else in
   the app is affected even though this file is page-specific anyway.
   ------------------------------------------------------------------------- */
.hb-auth .form-control {
    border-radius: 7px;
    border: 1px solid #d8ddcd;
    padding: .68rem .9rem;
    font-size: .92rem;
    color: #22261c;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .hb-auth .form-control::placeholder {
        color: #9aa38c;
    }

    .hb-auth .form-control:focus {
        border-color: var(--hb-primary);
        box-shadow: 0 0 0 4px rgba(var(--bs-success-rgb, 25, 135, 84), .14);
        outline: none;
    }

.hb-auth .form-label {
    font-size: .8rem;
    font-weight: 700;
    color: #3a4132;
    margin-bottom: .35rem;
}

/* A touch more breathing room between fields than Bootstrap's bare
   default, but modest - scoped only to this page. */
.hb-auth .mb-3 {
    margin-bottom: 1.15rem !important;
}

.hb-auth .mb-4 {
    margin-bottom: 1.45rem !important;
}

.hb-auth .form-check-input {
    width: 1.05rem;
    height: 1.05rem;
    margin-top: .15rem;
    border: 1px solid #c3cab3;
    cursor: pointer;
}

    .hb-auth .form-check-input:checked {
        background-color: var(--hb-primary);
        border-color: var(--hb-primary);
    }

    .hb-auth .form-check-input:focus {
        box-shadow: 0 0 0 3px rgba(var(--bs-success-rgb, 25, 135, 84), .18);
    }

/* -------------------------------------------------------------------------
   Buttons - fully custom .btn-login-submit / .btn-entra-sso (same class
   names as before, entirely new definitions since auth.css is gone).
   ------------------------------------------------------------------------- */
.btn-login-submit {
    background: var(--hb-primary) !important;
    border: 1px solid var(--hb-primary) !important;
    color: #fff !important;
    font-weight: 700;
    font-size: .92rem;
    border-radius: 7px;
    padding: .78rem;
    letter-spacing: .01em;
    box-shadow: 0 6px 16px rgba(var(--bs-success-rgb, 25, 135, 84), .22);
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

    .btn-login-submit:hover,
    .btn-login-submit:focus {
        background: var(--hb-primary-dark, var(--hb-primary)) !important;
        border-color: var(--hb-primary-dark, var(--hb-primary)) !important;
        color: #fff !important;
        transform: translateY(-1px);
        box-shadow: 0 10px 22px rgba(var(--bs-success-rgb, 25, 135, 84), .3);
    }

    .btn-login-submit:active {
        transform: translateY(0);
    }

    .btn-login-submit:disabled {
        opacity: .7;
        transform: none;
    }

.btn-entra-sso {
    background: #fff !important;
    color: #22261c !important;
    border: 1px solid #d8ddcd !important;
    font-weight: 700;
    font-size: .86rem;
    border-radius: 7px;
    padding: .78rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

    .btn-entra-sso:hover {
        border-color: var(--hb-primary) !important;
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(0, 0, 0, .08);
    }

    .btn-entra-sso:active {
        transform: translateY(0);
    }

.or-separator {
    position: relative;
    font-size: .8rem;
    font-weight: 700;
    color: #9aa38c;
}

    .or-separator span {
        background: #fff;
        padding: 0 14px;
        position: relative;
        z-index: 1;
    }

    .or-separator::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 1px;
        background: #e3e6da;
    }

/* -------------------------------------------------------------------------
   Footer - fully custom, dark-muted text (the old .login-footer was
   white-on-dark, which was unreadable once the background went light).
   ------------------------------------------------------------------------- */
.login-footer {
    font-size: .82rem;
    line-height: 1.6;
    color: #5b6350 !important;
}

/* -------------------------------------------------------------------------
   Reveal / stagger entrance animation.
   ------------------------------------------------------------------------- */
.hb-auth .reveal {
    opacity: 0;
    transform: translateY(14px);
    animation: hbAuthReveal .6s cubic-bezier(.16, 1, .3, 1) forwards;
}

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

@media (prefers-reduced-motion: reduce) {
    .hb-auth .reveal,
    .hb-auth-feature,
    .hb-auth-tabpanel.is-active {
        animation: none !important;
        transition: none !important;
    }

    .hb-auth .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* -------------------------------------------------------------------------
   OTP-specific input styling.
   ------------------------------------------------------------------------- */
.hb-auth-otp-section {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.hb-auth-otp-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(var(--bs-success-rgb, 25, 135, 84), .14), rgba(var(--bs-success-rgb, 25, 135, 84), .04));
    border: 1px solid rgba(20, 30, 10, .08);
}

.hb-auth-otp-input {
    letter-spacing: 8px;
    font-size: 1.5rem;
    text-align: center;
    font-weight: 700;
    padding-top: .95rem !important;
    padding-bottom: .95rem !important;
}

    .hb-auth-otp-input:focus {
        animation: hbAuthOtpPulse .35s ease;
    }

@keyframes hbAuthOtpPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb, 25, 135, 84), .35);
    }

    100% {
        box-shadow: 0 0 0 7px rgba(var(--bs-success-rgb, 25, 135, 84), 0);
    }
}

/* -------------------------------------------------------------------------
   Responsive refinements
   ------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hb-auth-brand-panel {
        padding: 2.75rem 2.75rem;
    }

    .hb-auth-hero-desc,
    .hb-auth-feature-grid,
    .hb-auth-stats-row,
    .hb-auth-trust-bar {
        max-width: 100%;
    }
}

@media (max-width: 575.98px) {
    .hb-auth-form-panel {
        padding: 1.75rem 1rem;
    }
}

/* =========================================================
   AUTH UI – FINAL FORM SIZE / SPACING REFINEMENT
   ========================================================= */

/* Keep the auth form compact on desktop */
.hb-auth-form-inner {
    width: 100%;
    max-width: 430px;
}

.hb-auth-tabpanel .hb-auth-card {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
}

.hb-auth-tabpanel[data-panel="signup"] .hb-auth-card {
    max-width: 500px;
}

.hb-auth-register-heading {
    max-width: 400px;
    margin: 1.15rem auto 0;
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.55;
    color: #5b6350;
}

.hb-auth-tabpanel[data-panel="otp"] .hb-auth-card {
    max-width: 430px;
}

.hb-auth-card {
    border-radius: 16px !important;
}

    /* Balanced card spacing */
    .hb-auth-card .card-body {
        padding: 2rem 2.1rem 1.75rem !important;
    }

.hb-auth-tabpanel[data-panel="signup"] .hb-auth-card .card-body {
    padding: 2.1rem 2.4rem 1.85rem !important;
}

.hb-auth-tabpanel[data-panel="otp"] .hb-auth-card .card-body {
    padding: 2rem 2.1rem 1.75rem !important;
}

/* Logo */
.hb-auth-card-logo {
    display: block;
    height: 39px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto .9rem auto !important;
}

/* Headings */
.hb-auth-form-title {
    font-weight: 500;
    font-size: 0.55rem;
    line-height: 1.25;
    color: #1c2015;
    margin-bottom: .35rem !important;
}

.hb-auth-form-subtitle {
    font-size: .75rem;
    line-height: 1.45;
    max-width: 340px;
    margin: 0 auto 1.25rem auto !important;
    color: #70776a !important;
}

/* Labels */
.hb-auth .form-label {
    font-size: .8rem;
    font-weight: 700;
    margin-bottom: .4rem;
}

/* Inputs */
.hb-auth .form-control {
    min-height: 44px;
    padding: .65rem .85rem;
    font-size: .9rem;
    border-radius: 7px;
}

/* Field spacing */
.hb-auth .mb-3 {
    margin-bottom: 1rem !important;
}

.hb-auth .mb-4 {
    margin-bottom: 1.25rem !important;
}

/* Register two-column spacing */
.hb-auth-tabpanel[data-panel="signup"] .row {
    --bs-gutter-x: 1rem;
}

/* Checkboxes */
.hb-auth .form-check {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
}

.hb-auth .form-check-input {
    flex-shrink: 0;
    margin-top: .15rem;
}

.hb-auth .form-check-label {
    line-height: 1.4;
}

/* Primary button */
.btn-login-submit {
    min-height: 44px;
    font-size: .9rem;
    border-radius: 7px;
}

/* Microsoft SSO */
.btn-entra-sso {
    min-height: 44px;
    font-size: .85rem;
    border-radius: 7px;
}

/* OR divider */
.or-separator {
    margin: 1rem 0 !important;
}

/* Sign up / login link text */
.signup-text {
    margin-top: .85rem !important;
    font-size: .86rem;
    line-height: 1.4;
}

/* Footer */
.login-footer {
    margin-top: 1.1rem !important;
    padding-top: .85rem !important;
    font-size: .78rem;
    line-height: 1.55;
}

    .login-footer strong {
        font-weight: 700;
    }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {
    .hb-auth-form-inner {
        max-width: 470px;
    }

    .hb-auth-tabpanel .hb-auth-card,
    .hb-auth-tabpanel[data-panel="signup"] .hb-auth-card,
    .hb-auth-tabpanel[data-panel="otp"] .hb-auth-card {
        max-width: 100%;
    }

        .hb-auth-card .card-body,
        .hb-auth-tabpanel[data-panel="signup"] .hb-auth-card .card-body,
        .hb-auth-tabpanel[data-panel="otp"] .hb-auth-card .card-body {
            padding: 1.9rem 1.75rem 1.65rem !important;
        }

    .hb-auth-card-logo {
        height: 38px;
    }
}

@media (max-width: 575.98px) {
    .hb-auth-form-panel {
        padding: 1.25rem .9rem 1.75rem;
    }

    .hb-auth-card .card-body,
    .hb-auth-tabpanel[data-panel="signup"] .hb-auth-card .card-body,
    .hb-auth-tabpanel[data-panel="otp"] .hb-auth-card .card-body {
        padding: 1.6rem 1.2rem 1.4rem !important;
    }

    .hb-auth-card-logo {
        height: 34px;
    }

    .hb-auth-form-title {
        font-size: 1.0rem;
    }

    .hb-auth-form-subtitle {
        font-size: .82rem;
        margin-bottom: 1rem !important;
    }

    .hb-auth .form-control {
        min-height: 42px;
        font-size: .88rem;
    }

    .btn-login-submit,
    .btn-entra-sso {
        min-height: 42px;
        font-size: .86rem;
    }

    .login-footer {
        font-size: .75rem;
    }

    .hb-auth-register-heading {
        max-width: 100%;
        margin-top: .9rem;
        font-size: .78rem;
        line-height: 1.5;
    }
}
/* =========================================================
   LOGIN - SHORT DESKTOP / LAPTOP HEIGHT
   Keeps Login within one viewport without page scroll
   ========================================================= */

@media (min-width: 992px) and (max-height: 900px) {

    /* Apply compact mode only to Login */
    .hb-auth[data-active-panel="login"] {
        height: 100vh;
        min-height: 100vh;
        overflow: hidden;
    }

        .hb-auth[data-active-panel="login"] .hb-auth-shell {
            height: 100vh;
            min-height: 100vh;
            align-items: center;
        }

        /* Marketing side */
        .hb-auth[data-active-panel="login"] .hb-auth-brand-panel {
            justify-content: center;
            padding-top: 1.5rem;
            padding-bottom: 1.5rem;
        }

        .hb-auth[data-active-panel="login"] .hb-auth-hero-title {
            font-size: clamp(2rem, 2.5vw, 2.65rem);
            line-height: 1.08;
            margin-top: 0;
            margin-bottom: .75rem;
        }

        .hb-auth[data-active-panel="login"] .hb-auth-hero-divider {
            width: 48px;
            height: 3px;
            margin-bottom: .9rem;
        }

        .hb-auth[data-active-panel="login"] .hb-auth-hero-desc {
            font-size: .95rem;
            line-height: 1.45;
            margin-bottom: 1.2rem;
        }

        .hb-auth[data-active-panel="login"] .hb-auth-feature-grid {
            gap: .7rem;
        }

        .hb-auth[data-active-panel="login"] .hb-auth-feature {
            gap: .35rem;
            padding: .75rem .85rem;
        }

        .hb-auth[data-active-panel="login"] .hb-auth-feature-icon {
            width: 38px;
            height: 38px;
            font-size: 1.05rem;
            border-radius: 10px;
        }

        .hb-auth[data-active-panel="login"] .hb-auth-feature-label {
            font-size: .82rem;
            line-height: 1.2;
        }

        .hb-auth[data-active-panel="login"] .hb-auth-feature-desc {
            font-size: .7rem;
            line-height: 1.35;
        }

        /* Statistics */
        .hb-auth[data-active-panel="login"] .hb-auth-stats-row {
            margin-top: .9rem;
            padding-top: .85rem;
            gap: 1.8rem;
        }

        .hb-auth[data-active-panel="login"] .hb-auth-stat-value {
            font-size: 1.3rem;
        }

        .hb-auth[data-active-panel="login"] .hb-auth-stat-label {
            font-size: .68rem;
        }

        /* Trust section */
        .hb-auth[data-active-panel="login"] .hb-auth-trust-bar {
            margin-top: .8rem;
            padding-top: .75rem;
        }

        .hb-auth[data-active-panel="login"] .hb-auth-trust-label {
            font-size: .68rem;
            margin-bottom: .55rem;
        }

        .hb-auth[data-active-panel="login"] .hb-auth-trust-icons {
            gap: 1.1rem;
        }

        .hb-auth[data-active-panel="login"] .hb-auth-trust-item {
            font-size: .72rem;
        }

        /* Right Login panel */
        .hb-auth[data-active-panel="login"] .hb-auth-form-panel {
            padding-top: 1rem;
            padding-bottom: 1rem;
        }

        .hb-auth[data-active-panel="login"] .hb-auth-card .card-body {
            padding: 1.55rem 1.9rem 1.4rem !important;
        }

        .hb-auth[data-active-panel="login"] .hb-auth-card-logo {
            height: 35px;
            margin-bottom: .65rem !important;
        }

        .hb-auth[data-active-panel="login"] .hb-auth-form-subtitle {
            font-size: .78rem;
            margin-bottom: .95rem !important;
        }

        .hb-auth[data-active-panel="login"] .form-control {
            min-height: 40px;
            padding: .55rem .8rem;
            font-size: .86rem;
        }

        .hb-auth[data-active-panel="login"] .form-label {
            font-size: .75rem;
            margin-bottom: .3rem;
        }

        .hb-auth[data-active-panel="login"] .mb-3 {
            margin-bottom: .8rem !important;
        }

        .hb-auth[data-active-panel="login"] .mb-4 {
            margin-bottom: 1rem !important;
        }

        .hb-auth[data-active-panel="login"] .btn-login-submit,
        .hb-auth[data-active-panel="login"] .btn-entra-sso {
            min-height: 40px;
            padding-top: .5rem !important;
            padding-bottom: .5rem !important;
        }

        .hb-auth[data-active-panel="login"] .or-separator {
            margin: .75rem 0 !important;
        }

        .hb-auth[data-active-panel="login"] .signup-text {
            margin-top: .65rem !important;
            font-size: .8rem;
        }

        .hb-auth[data-active-panel="login"] .login-footer {
            margin-top: .8rem !important;
            padding-top: .65rem !important;
            font-size: .72rem;
            line-height: 1.45;
        }
}

/* =========================================================
   REGISTER - SHORT DESKTOP / LAPTOP HEIGHT
   Spacious form, but still fits within one viewport
   ========================================================= */

@media (min-width: 992px) and (max-height: 900px) {

    .hb-auth[data-active-panel="signup"] {
        height: 100vh;
        min-height: 100vh;
        overflow: hidden;
    }

        .hb-auth[data-active-panel="signup"] .hb-auth-shell {
            height: 100vh;
            min-height: 100vh;
            align-items: center;
        }

        /* ---------------------------------------------------------
       LEFT MARKETING SIDE
       Compress this side more than the Register form.
       --------------------------------------------------------- */

        .hb-auth[data-active-panel="signup"] .hb-auth-brand-panel {
            justify-content: center;
            padding-top: 1rem;
            padding-bottom: 1rem;
        }

        .hb-auth[data-active-panel="signup"] .hb-auth-hero-title {
            font-size: clamp(2rem, 2.5vw, 2.65rem);
            line-height: 1.08;
            margin-top: 0;
            margin-bottom: .7rem;
        }

        .hb-auth[data-active-panel="signup"] .hb-auth-hero-divider {
            width: 48px;
            height: 3px;
            margin-bottom: .85rem;
        }

        .hb-auth[data-active-panel="signup"] .hb-auth-hero-desc {
            font-size: .94rem;
            line-height: 1.45;
            margin-bottom: 1.05rem;
        }

        .hb-auth[data-active-panel="signup"] .hb-auth-feature-grid {
            gap: .7rem;
        }

        .hb-auth[data-active-panel="signup"] .hb-auth-feature {
            gap: .35rem;
            padding: .7rem .85rem;
        }

        .hb-auth[data-active-panel="signup"] .hb-auth-feature-icon {
            width: 36px;
            height: 36px;
            font-size: 1rem;
            border-radius: 9px;
        }

        .hb-auth[data-active-panel="signup"] .hb-auth-feature-label {
            font-size: .8rem;
            line-height: 1.2;
        }

        .hb-auth[data-active-panel="signup"] .hb-auth-feature-desc {
            font-size: .68rem;
            line-height: 1.3;
        }

        .hb-auth[data-active-panel="signup"] .hb-auth-stats-row {
            margin-top: .7rem;
            padding-top: .7rem;
            gap: 1.7rem;
        }

        .hb-auth[data-active-panel="signup"] .hb-auth-stat-value {
            font-size: 1.25rem;
        }

        .hb-auth[data-active-panel="signup"] .hb-auth-stat-label {
            font-size: .68rem;
        }

        .hb-auth[data-active-panel="signup"] .hb-auth-trust-bar {
            margin-top: .6rem;
            padding-top: .6rem;
        }

        .hb-auth[data-active-panel="signup"] .hb-auth-trust-label {
            font-size: .68rem;
            margin-bottom: .5rem;
        }

        .hb-auth[data-active-panel="signup"] .hb-auth-trust-icons {
            gap: 1rem;
        }

        .hb-auth[data-active-panel="signup"] .hb-auth-trust-item {
            font-size: .7rem;
        }

        /* ---------------------------------------------------------
       REGISTER FORM
       Keep this side spacious.
       --------------------------------------------------------- */

        .hb-auth[data-active-panel="signup"] .hb-auth-form-panel {
            padding-top: .75rem;
            padding-bottom: .75rem;
        }

        /* IMPORTANT:
       Parent was limiting Register to 430px */
        .hb-auth[data-active-panel="signup"] .hb-auth-form-inner {
            max-width: 500px;
        }

        .hb-auth[data-active-panel="signup"] .hb-auth-tabpanel[data-panel="signup"] .hb-auth-card {
            width: 100%;
            max-width: 500px;
        }

            .hb-auth[data-active-panel="signup"] .hb-auth-tabpanel[data-panel="signup"] .hb-auth-card .card-body {
                padding: 1.65rem 2.35rem 1.4rem !important;
            }

        .hb-auth[data-active-panel="signup"] .hb-auth-card-logo {
            height: 37px;
            margin-bottom: .75rem !important;
        }

        .hb-auth[data-active-panel="signup"] .hb-auth-register-heading {
            max-width: 410px;
            margin-top: .75rem;
            margin-bottom: 1.05rem;
            font-size: .8rem;
            font-weight: 500;
            line-height: 1.45;
        }

        /* Inputs remain comfortable */
        .hb-auth[data-active-panel="signup"] .form-control {
            min-height: 42px;
            padding: .6rem .8rem;
            font-size: .88rem;
        }

        .hb-auth[data-active-panel="signup"] .form-label {
            font-size: .78rem;
            margin-bottom: .3rem;
        }

        /* Enough separation without wasting vertical space */
        .hb-auth[data-active-panel="signup"] .mb-3 {
            margin-bottom: .8rem !important;
        }

        .hb-auth[data-active-panel="signup"] .mb-4 {
            margin-bottom: 1rem !important;
        }

        /* First / Last name columns */
        .hb-auth[data-active-panel="signup"] .row {
            --bs-gutter-x: 1.15rem;
        }

        /* Agreements should remain comfortably readable */
        .hb-auth[data-active-panel="signup"] .form-check {
            gap: .45rem;
        }

        .hb-auth[data-active-panel="signup"] .form-check-input {
            width: 1rem;
            height: 1rem;
            margin-top: .15rem;
        }

        .hb-auth[data-active-panel="signup"] .form-check-label {
            font-size: .8rem !important;
            line-height: 1.4;
        }

        /* Button */
        .hb-auth[data-active-panel="signup"] .btn-login-submit {
            min-height: 42px;
            padding-top: .55rem !important;
            padding-bottom: .55rem !important;
            font-size: .9rem;
        }

        /* Already have account */
        .hb-auth[data-active-panel="signup"] .signup-text {
            margin-top: .7rem !important;
            font-size: .82rem;
            line-height: 1.4;
        }

        /* Footer */
        .hb-auth[data-active-panel="signup"] .login-footer {
            margin-top: .8rem !important;
            padding-top: .65rem !important;
            font-size: .73rem;
            line-height: 1.45;
        }
}


/* =========================================================
   REGISTER - VERY SHORT LAPTOP HEIGHT
   Only minimal additional compression
   ========================================================= */

@media (min-width: 992px) and (max-height: 760px) {

    .hb-auth[data-active-panel="signup"] .hb-auth-brand-panel {
        padding-top: .5rem;
        padding-bottom: .5rem;
    }

    .hb-auth[data-active-panel="signup"] .hb-auth-hero-title {
        font-size: 2rem;
        margin-bottom: .55rem;
    }

    .hb-auth[data-active-panel="signup"] .hb-auth-hero-desc {
        margin-bottom: .8rem;
    }

    .hb-auth[data-active-panel="signup"] .hb-auth-feature {
        padding: .55rem .7rem;
    }

    .hb-auth[data-active-panel="signup"] .hb-auth-stats-row {
        margin-top: .5rem;
        padding-top: .55rem;
    }

    .hb-auth[data-active-panel="signup"] .hb-auth-trust-bar {
        margin-top: .45rem;
        padding-top: .5rem;
    }

    .hb-auth[data-active-panel="signup"] .hb-auth-tabpanel[data-panel="signup"] .hb-auth-card .card-body {
        padding: 1.35rem 2.2rem 1.15rem !important;
    }

    .hb-auth[data-active-panel="signup"] .hb-auth-card-logo {
        height: 35px;
    }

    .hb-auth[data-active-panel="signup"] .hb-auth-register-heading {
        margin-top: .6rem;
        margin-bottom: .85rem;
        font-size: .77rem;
    }

    .hb-auth[data-active-panel="signup"] .form-control {
        min-height: 40px;
    }

    .hb-auth[data-active-panel="signup"] .mb-3 {
        margin-bottom: .7rem !important;
    }

    .hb-auth[data-active-panel="signup"] .mb-4 {
        margin-bottom: .85rem !important;
    }
}

@media (min-width: 992px) {
    .hb-auth-brand-panel {
        max-height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .hb-auth-form-panel {
        min-height: 100vh;
        position: sticky;
        top: 0;
        align-self: flex-start;
    }
}

@media (min-width: 992px) {
    .hb-auth,
    .hb-auth[data-active-panel="login"],
    .hb-auth[data-active-panel="signup"],
    .hb-auth[data-active-panel="otp"] {
        min-height: 100vh;
        height: 100vh;
        overflow: hidden;
    }

        .hb-auth-shell,
        .hb-auth[data-active-panel="login"] .hb-auth-shell,
        .hb-auth[data-active-panel="signup"] .hb-auth-shell,
        .hb-auth[data-active-panel="otp"] .hb-auth-shell {
            min-height: 100vh;
            height: 100vh;
        }

    .hb-auth-brand-panel {
        height: 100vh;
        max-height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
    }
}