/* ==========================================================================
   Auth split-screen redesign (login & register)
   All rules are scoped under .auth-split so nothing leaks into other pages.
   ========================================================================== */

.auth-split {
    /* Palette is driven entirely by the global design tokens (theme-tokens.css)
       so the auth screens stay consistent with the rest of the application. */
    --AuthNavy: var(--tk-dark);
    --AuthNavyDeep: var(--tk-dark-deep);
    --AuthGold: #e8c878;
    --AuthGoldBright: #f2d992;
    --AuthIcon: #e8c878;
    --AuthBtn: var(--tk-primary);
    --AuthBtnHover: var(--tk-primary-hover);
    --AuthText: var(--tk-text);
    --AuthMuted: var(--tk-text-muted);
    --AuthLink: var(--tk-text-colored);
    --AuthBorder: var(--tk-border);
    --AuthField: var(--tk-surface);
    --AuthFieldMuted: var(--tk-surface-muted);
    --AuthRadius: var(--tk-radius);
    --AuthFont: var(--tk-font-sans);
}

/* Reset the shared body chrome so the split fills the whole viewport. */
/* !important beats Bootstrap's .bg-body-secondary utility on the same body. */
body.auth-fullscreen {
    margin: 0;
    background: #ffffff !important;
}

.auth-split {
    display: flex;
    min-height: 100vh;
    width: 100%;
    font-family: var(--AuthFont);
    color: var(--AuthText);
    overflow-x:hidden;
}

/* --------------------------------------------------------------------------
   Left brand panel (dark)
   -------------------------------------------------------------------------- */
.auth-brand {
    position: relative;
    flex: 0 0 50%;
    max-width: 50%;
    padding: 48px 56px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #ffffff;
    background-color: var(--AuthNavy);
    /* Provided blueprint-building artwork; gradient keeps the left text area legible. */
    background-image:
        linear-gradient(90deg, rgba(13, 26, 41, 0.90) 0%, rgba(13, 26, 41, 0.50) 48%, rgba(13, 26, 41, 0.08) 100%),
        url('/assets/theme/img/auth_bg_building.png');
    background-repeat: no-repeat, no-repeat;
    background-position: center, right center;
    background-size: cover, cover;
}

/* Shared brand lockup (house mark + "TAKEOFF.GURU"), used on panel and cards. */
.auth-logo {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    max-width:100%;
}

.auth-logo__mark {
    flex: 0 0 auto;
    height: 66px;
    width: 66px;
    object-fit: contain;
    display: block;
}

/* Wordmark and any tagline stack in a column beside the mark. */
.auth-logo__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-logo__wordmark {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.1;
    white-space: nowrap;
}

/* Tagline sits under the wordmark only (aligned to the text, not the mark). */
.auth-logo__tagline {
    margin-top: 6px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.02em;
    white-space: nowrap;
    min-height: 1.35em;
    animation: none !important;
    transition: none !important;
}

/* Light variant sits on the dark panel; dark variant on the white cards. */
.auth-logo--light .auth-logo__wordmark {
    color: #ffffff;
}

.auth-logo--light .auth-logo__suffix {
    color: rgba(255, 255, 255, 0.6);
}

.auth-logo--light .auth-logo__tagline {
    color: var(--AuthGoldBright);
    text-shadow: 0 1px 10px rgba(242, 217, 146, 0.35);
}

.auth-logo--dark .auth-logo__tagline {
    color: var(--AuthGold);
    font-weight: 600;
}

/* Body fills the space below the logo and centres its content, so the
   heading/subtitle/features are evenly distributed (no big top/bottom gaps). */
.auth-brand__body {
    margin: 0;
    max-width: 520px;
    flex: 0.5 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-logo--dark .auth-logo__wordmark {
    color: var(--AuthText);
}

.auth-logo--dark .auth-logo__suffix {
    color: var(--AuthMuted);
}

.auth-brand__heading {
    font-size: 50px;
    line-height: 1.1;
    font-weight: 700;
    margin: 0 0 22px;
    animation: none !important;
    transition: none !important;
}

.auth-brand__accent {
    color: var(--AuthGoldBright);
    font-weight: 700;
    text-shadow: 0 2px 16px rgba(242, 217, 146, 0.42);
    animation: none !important;
    transition: none !important;
}

.auth-brand__subtitle {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}

.auth-brand__divider {
    width: 72px;
    height: 3px;
    border: 0;
    opacity: 1;
    margin: 28px 0 34px;
    background: linear-gradient(90deg, var(--AuthGold) 0%, var(--AuthGoldBright) 100%);
}

.auth-brand__header {
    margin-bottom: 0;
    animation: none !important;
    transition: none !important;
}

.auth-features {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.auth-feature {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.auth-feature__icon {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--AuthGoldBright);
    background: rgba(232, 200, 120, 0.12);
    border: 1px solid rgba(232, 200, 120, 0.38);
}

.auth-feature__title {
    font-size: 18px;
    font-weight: 600;
    margin: 2px 0 4px;
}

.auth-feature__text {
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
}

/* --------------------------------------------------------------------------
   Right form panel (light)
   -------------------------------------------------------------------------- */
.auth-form-panel{
    flex:1 1 50%;
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    overflow-x:hidden;
    padding:48px 56px;
    /* color: #ffffff; */
    background-color: #0a1a30;
    /* Provided blueprint-building artwork; gradient keeps the left text area legible. */
    background-image:
        linear-gradient(90deg, rgba(6, 16, 32, 0.88) 0%, rgba(6, 16, 32, 0.45) 48%, rgba(6, 16, 32, 0.05) 100%),
        url('/assets/theme/img/auth_bg_building.png');
    background-repeat: no-repeat, no-repeat;
    background-position: center, right center;
    background-size: cover, cover;
}

/* --------------------------------------------------------------------------
   Login: one continuous blueprint background across both columns (same artwork
   as register), so there is no two-tone seam — the white card floats over it.
   Scoped with :not(--register) so the register variant is untouched.
   -------------------------------------------------------------------------- */
.auth-split:not(.auth-split--register) {
    background-color: var(--AuthNavy);
    background-image:
        linear-gradient(90deg,
            rgba(var(--tk-dark-rgb), 0.97) 0%,
            rgba(var(--tk-dark-rgb), 0.80) 22%,
            rgba(var(--tk-dark-rgb), 0.40) 42%,
            rgba(var(--tk-dark-rgb), 0.40) 58%,
            rgba(var(--tk-dark-rgb), 0.90) 100%),
        url('/assets/theme/img/auth_bg_building.png');
    background-repeat: no-repeat, no-repeat;
    background-position: center center, -28% center;
    background-size: 100% 100%, 72% auto;
}

/* Columns are transparent so the shared artwork shows through continuously. */
.auth-split:not(.auth-split--register) .auth-brand,
.auth-split:not(.auth-split--register) .auth-form-panel {
    background-color: transparent;
    background-image: none;
}

.auth-card{

    width:100%;
    max-width:700px;
    box-sizing:border-box;
    background: var(--tk-surface);
    border: 1px solid var(--tk-border);
    border-top: 3px solid var(--tk-primary);
    border-radius: 24px;
    padding:48px 56px;
    box-shadow: var(--tk-shadow-lg);
    position:relative;
    z-index:5;
}

/* Desktop shows the brand-panel lockup, so the card logo would be a duplicate.
   It is switched back on below 992px, where the brand panel is hidden. */
.auth-card__logo {
    display: none;
    justify-content: center;
    margin-bottom: 18px;
}

.auth-card__logo a {
    text-decoration: none;
}

/* Card lockup is slightly smaller than the panel one. */
.auth-card__logo .auth-logo__mark {
    height: 48px;
    width: 48px;
}

.auth-card__logo .auth-logo__wordmark {
    font-size: 24px;
}

.auth-card__logo .auth-logo__tagline {
    font-size: 13px;
    font-weight: 600;
    color: var(--AuthGold);
    margin-top: 4px;
    white-space: normal;
    line-height: 1.3;
}

.auth-card__title {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--tk-primary);
}

.auth-card__subtitle {
    text-align: center;
    font-size: 16px;
    color: var(--AuthMuted);
    margin: 0 0 26px;
}

/* Register centers its heading like login does, but runs larger and tighter. */
.auth-card--register .auth-card__logo {
    justify-content: center;
    margin-bottom: 22px;
}

.auth-card--register .auth-card__title {
    text-align: center;
    font-size: 32px;
    margin-bottom: 4px;
}

.auth-card--register .auth-card__subtitle {
    text-align: center;
    margin-bottom: 22px;
}

/* Larger logo on the register form card. */
.auth-card--register .auth-card__logo .auth-logo__mark {
    height: 62px;
    width: 62px;
}

.auth-card--register .auth-card__logo .auth-logo__wordmark {
    font-size: 30px;
}

.auth-card--register .auth-card__logo .auth-logo__tagline {
    font-size: 14px;
}

/* --------------------------------------------------------------------------
   Form card only — theme field/button colors (login + register white card).
   Brand panel on the left is not affected.
   -------------------------------------------------------------------------- */
.auth-card .auth-input {
    background: var(--tk-surface-muted);
    border-color: var(--tk-border);
    color: var(--tk-text);
}

.auth-card .auth-input::placeholder {
    color: var(--tk-text-muted);
}

.auth-card .auth-input:focus {
    background: var(--tk-surface);
    border-color: var(--tk-primary);
    box-shadow: 0 0 0 3px var(--tk-focus-ring);
}

/* Override browser autofill blue/yellow tint on email & password fields. */
.auth-card .auth-input:-webkit-autofill,
.auth-card .auth-input:-webkit-autofill:hover,
.auth-card .auth-input:-webkit-autofill:focus,
.auth-card .auth-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--tk-surface-muted) inset !important;
    box-shadow: 0 0 0 1000px var(--tk-surface-muted) inset !important;
    -webkit-text-fill-color: var(--tk-text) !important;
    caret-color: var(--tk-text);
    border-color: var(--tk-border) !important;
    transition: background-color 9999s ease-out 0s;
}

.auth-card .auth-input:focus:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--tk-surface) inset !important;
    box-shadow: 0 0 0 1000px var(--tk-surface) inset !important;
    border-color: var(--tk-primary) !important;
}

.auth-card .auth-field__icon {
    color: var(--tk-primary);
    opacity: 0.75;
}

.auth-card .auth-field__icon.reveal {
    opacity: 0.85;
}

.auth-card .auth-field__icon.reveal:hover {
    opacity: 1;
    color: var(--tk-primary-hover);
}

.auth-card .auth-phone-row .select2-container--default .select2-selection--single {
    background: var(--tk-surface-muted);
    border-color: var(--tk-border);
}

.auth-card .auth-phone-row .select2-container--default.select2-container--focus .select2-selection--single,
.auth-card .auth-phone-row .select2-container--default.select2-container--open .select2-selection--single {
    background: var(--tk-surface);
    border-color: var(--tk-primary);
    box-shadow: 0 0 0 3px var(--tk-focus-ring);
}

.auth-card .auth-submit {
    background: var(--tk-primary);
    border: 1px solid var(--tk-primary);
}

.auth-card .auth-submit:hover:not(:disabled) {
    background: var(--tk-primary-hover);
    border-color: var(--tk-primary-hover);
}

.auth-card .auth-link,
.auth-card .auth-switch a,
.auth-card .auth-terms a,
.auth-card .auth-alt-action__cta,
.auth-card .auth-alt-action__arrow {
    color: var(--tk-primary);
}

.auth-card .auth-link:hover,
.auth-card .auth-switch a:hover,
.auth-card .auth-terms a:hover {
    color: var(--tk-primary-hover);
}

.auth-card .auth-terms input,
.auth-card .auth-remember input {
    accent-color: var(--tk-primary);
}

.auth-card .auth-alt-action:hover {
    border-color: var(--tk-primary);
    background: rgba(26, 58, 92, 0.04);
}

.auth-card .auth-alt-action__icon {
    color: var(--tk-primary);
}

.auth-card .auth-divider::before,
.auth-card .auth-divider::after {
    background: var(--tk-border);
}

/* --------------------------------------------------------------------------
   Register variant: dark-left brand panel + dark-right panel holding a
   floating white card, with a full-width light footer beneath both columns.
   (Matches the approved register mockup.)
   -------------------------------------------------------------------------- */
.auth-split--register {
    flex-direction: column;
    background-color: var(--AuthNavy);
}

/* Both columns share ONE continuous blueprint background so there is no
   two-tone seam — the card simply floats over the same artwork (per mockup). */
.auth-split--register .auth-main {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
    background-color: var(--AuthNavy);
    background-image:
        linear-gradient(90deg,
            rgba(var(--tk-dark-rgb), 0.97) 0%,
            rgba(var(--tk-dark-rgb), 0.80) 22%,
            rgba(var(--tk-dark-rgb), 0.40) 42%,
            rgba(var(--tk-dark-rgb), 0.40) 58%,
            rgba(var(--tk-dark-rgb), 0.90) 100%),
        url('/assets/theme/img/auth_bg_building.png');
    background-repeat: no-repeat, no-repeat;
    /* Building sits on the right of the source art; pull it into the centre gap. */
    background-position: center center, -28% center;
    background-size: 100% 100%, 72% auto;
}

/* Desktop: pin the register screen to the viewport. If validation messages
   make the form taller than the panel, the form column scrolls internally
   (safe-centered so the top is never clipped) — the page itself never scrolls. */
.auth-split--register {
    height: 100vh;
}

/* Columns are transparent; the shared .auth-main artwork shows through. */
.auth-split--register .auth-brand {
    flex: 0 0 50%;
    max-width: 50%;
    background-color: transparent;
    background-image: none;
}

.auth-split--register .auth-form-panel {
    flex: 1 1 50%;
    padding: 16px 18px;
    background-color: transparent;
    background-image: none;
    justify-content: safe center;
    align-items: center;
    overflow-y: auto;
}

/* Floating white card. */
.auth-split--register .auth-card--register {
    width: 100%;
    max-width: 700px;
    margin: auto;
    padding: 26px 40px;
    background: var(--tk-surface);
    border: 1px solid var(--tk-border);
    border-top: 3px solid var(--tk-primary);
    border-radius: 16px;
    box-shadow: var(--tk-shadow-lg);
}

/* Register fields inherit .auth-card theme tokens above. */

/* Keep clear space above the CTA so the terms/policy validation message
   is never stuck to the button. */
.auth-split--register .auth-submit {
    margin-top: 16px;
}

/* Slim, themed scrollbar for the internally-scrolling form column. */
.auth-split--register .auth-form-panel {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

.auth-split--register .auth-form-panel::-webkit-scrollbar {
    width: 6px;
}

.auth-split--register .auth-form-panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 999px;
}

.auth-split--register .auth-form-panel::-webkit-scrollbar-track {
    background: transparent;
}

/* --------------------------------------------------------------------------
   Material country-code dropdown (select2). Rendered at <body> level, so it
   is scoped via the dropdownCssClass 'auth-select2-dropdown'.
   -------------------------------------------------------------------------- */
.auth-select2-dropdown.select2-dropdown {
    min-width: 264px;
    border: 1px solid var(--tk-border);
    border-radius: 12px;
    background: var(--tk-surface);
    box-shadow: var(--tk-shadow-lg);
    overflow: hidden;
}

.auth-select2-dropdown .select2-search--dropdown {
    padding: 8px;
}

.auth-select2-dropdown .select2-search__field {
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
    color: var(--tk-text);
    border: 1px solid var(--tk-border);
    border-radius: 8px;
    outline: none;
}

.auth-select2-dropdown .select2-search__field:focus {
    border-color: var(--tk-primary);
    box-shadow: 0 0 0 3px var(--tk-focus-ring);
}

.auth-select2-dropdown .select2-results__options {
    max-height: 244px;
    padding: 2px 6px 6px;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--tk-border-strong) transparent;
}

.auth-select2-dropdown .select2-results__options::-webkit-scrollbar {
    width: 6px;
}

.auth-select2-dropdown .select2-results__options::-webkit-scrollbar-thumb {
    background: var(--tk-border-strong);
    border-radius: 999px;
}

.auth-select2-dropdown .select2-results__option {
    padding: 9px 12px;
    margin-bottom: 2px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.3;
    color: var(--tk-text);
    white-space: normal;
    transition: background 0.12s ease, color 0.12s ease;
}

.auth-select2-dropdown .select2-results__option--highlighted[aria-selected] {
    background: var(--tk-primary);
    color: #ffffff;
}

.auth-select2-dropdown .select2-results__option[aria-selected="true"] {
    background: var(--tk-surface-muted);
    color: var(--tk-text);
    font-weight: 600;
}

.auth-split--register .auth-input:focus {
    background: var(--tk-surface);
    border-color: var(--AuthBtn);
}

/* Footer spans the full page width beneath both columns. */
.auth-split--register .auth-footer {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 18px 48px;
    background: var(--tk-surface-muted);
    border-top: 1px solid var(--AuthBorder);
}

/* --------------------------------------------------------------------------
   Framed variant (register): dark page, floating white card, full-width footer
   -------------------------------------------------------------------------- */
.auth-split--framed {
    flex-direction: column;
    background-color: var(--AuthNavyDeep);
}

/* Holds the two columns above the full-width footer. */
.auth-split--framed .auth-main {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

/* Transparent so the dark page shows as space around the floating card. */
.auth-split--framed .auth-form-panel {
    padding: 44px 48px 44px 28px;
    background: linear-gradient(135deg, #0a1a30 0%, #1c3f70 100%);;
    overflow: visible;
}

/* The form becomes a rounded white card floating on the dark page. */
.auth-split--framed .auth-card {
    max-width: 560px;
    padding: 36px 44px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(3, 10, 24, 0.35);
}

/* Footer spans the full page width beneath both columns. */
.auth-split--framed .auth-footer {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 18px 48px;
    background: #ffffff;
    border-top: 1px solid var(--AuthBorder);
}

/* --------------------------------------------------------------------------
   Fields
   -------------------------------------------------------------------------- */
.auth-field {
    margin-bottom: 14px;
}

.auth-field__label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--AuthText);
}

.auth-field__control {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-field__icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    font-size: 18px;
    line-height: 1;
    color: var(--tk-icon-field);
    pointer-events: none;
}

.auth-field__icon--lead {
    left: 16px;
}

.auth-field__icon--trail {
    right: 16px;
}

/* Second trailing icon sits to the left of the first. */
.auth-field__icon--trail2 {
    right: 46px;
}

/* Reveal (eye) icons must stay clickable. */
.auth-field__icon.reveal {
    pointer-events: auto;
    cursor: pointer;
}

.auth-split .auth-input {
    width: 100%;
    height: 54px;
    padding: 0 16px;
    font-size: 16px;
    color: var(--AuthText);
    background: var(--AuthField);
    border: 1px solid var(--AuthBorder);
    border-radius: var(--AuthRadius);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.auth-split .auth-input::placeholder {
    color: #9aa2b1;
}

.auth-split .auth-input:focus {
    border-color: var(--AuthBtn);
    box-shadow: 0 0 0 3px var(--tk-focus-ring);
}

.auth-split .auth-input.is-invalid {
    border-color: var(--tk-danger);
}

/* Padding modifiers make room for the icons present.
   Scoped under .auth-split to outrank the base ".auth-split .auth-input" rule. */
.auth-split .auth-input--lead {
    padding-left: 46px;
}

.auth-split .auth-input--trail {
    padding-right: 46px;
}

.auth-split .auth-input--trail2 {
    padding-right: 76px;
}

/* Strip number-input spinners on the phone field. */
.auth-split .auth-input[type="number"]::-webkit-outer-spin-button,
.auth-split .auth-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.auth-split .auth-input[type="number"] {
    -moz-appearance: textfield;
}

/* --------------------------------------------------------------------------
   Validation (material-inspired)
   Applies to Parsley (client) and the .invalid-feedback path (AJAX server).
   -------------------------------------------------------------------------- */
.auth-split .auth-input.parsley-error,
.auth-split .auth-input.is-invalid {
    border-color: var(--tk-danger);
    background: #fff7f7;
}

.auth-split .auth-input.parsley-error:focus,
.auth-split .auth-input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.14);
}

.auth-split .parsley-errors-list {
    list-style: none;
    margin: 5px 0 0;
    padding: 0;
    animation: authValidIn 0.16s ease-out;
}

.auth-split .parsley-errors-list li,
.auth-split .invalid-feedback {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--tk-danger);
    animation: authValidIn 0.16s ease-out;
}

/* Small round "!" indicator — material style, no icon-font dependency. */
.auth-split .parsley-errors-list li::before,
.auth-split .invalid-feedback::before {
    content: "!";
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--tk-danger);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

@keyframes authValidIn {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   Phone row (country-code select2 + number)
   -------------------------------------------------------------------------- */
/* Code + number stay on one line at every width — the pair reads as a single phone
   field, and a stacked full-width box holding just "+1" looks empty. There is room:
   at 320px the card leaves 284px, so the number input still gets ~188px. */
.auth-phone-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.auth-phone-row__code {
    flex: 0 0 86px;
    max-width: 86px;
    min-width: 86px;
}

.auth-phone-row__number {
    flex: 1 1 auto;
    min-width: 0;
}

.auth-phone-row__number .auth-field__control {
    margin-bottom: 0;
}

/* Compact country-code select2 — match auth input height (overrides auth_custom_style selectBtn). */
.auth-split .auth-phone-row__code.slect2-mod.selectBtn .select2-container--default .select2-selection--single,
.auth-split .auth-phone-row .select2-container--default .select2-selection--single {
    height: 52px;
    min-height: 52px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background: var(--tk-surface-muted);
    border: 1px solid var(--tk-border);
    border-radius: var(--AuthRadius);
    box-shadow: none;
}

.auth-split:not(.auth-split--register) .auth-phone-row .select2-container--default .select2-selection--single {
    height: 54px;
    min-height: 54px;
}

.auth-split .auth-phone-row__code.slect2-mod.selectBtn .select2-container--default .select2-selection--single .select2-selection__rendered,
.auth-split .auth-phone-row .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 10px;
    padding-right: 22px;
    line-height: 1;
    font-size: 15px;
    font-weight: 500;
}

.auth-split .auth-phone-row__code.slect2-mod.selectBtn .select2-container--default .select2-selection--single .select2-selection__arrow,
.auth-split .auth-phone-row .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 4px;
    width: 18px;
    height: 100%;
}

.auth-split .auth-phone-row__code.slect2-mod.selectBtn .select2-container--default .select2-selection--single .select2-selection__arrow b,
.auth-split .auth-phone-row .select2-container--default .select2-selection--single .select2-selection__arrow b {
    margin-top: -2px;
}

.auth-split .select2-container {
    width: 100% !important;
}

.auth-phone-row__code select.select2:not(.select2-hidden-accessible) {
    visibility: hidden;
    height: 52px;
}

.auth-split .select2-container--default .select2-selection--single {
    border: 1px solid var(--AuthBorder);
    border-radius: var(--AuthRadius);
}

.auth-split .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 14px;
    color: var(--AuthText);
}

/* --------------------------------------------------------------------------
   Options row (remember me + forgot password)
   -------------------------------------------------------------------------- */
.auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 24px;
}

.auth-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--AuthText);
    cursor: pointer;
    margin: 0;
}

.auth-remember input {
    width: 17px;
    height: 17px;
    accent-color: var(--AuthNavy);
    cursor: pointer;
}

.auth-link {
    font-size: 15px;
    font-weight: 600;
    color: var(--AuthLink);
    text-decoration: none;
}

.auth-link:hover {
    text-decoration: underline;
    color: var(--AuthLink);
}

/* --------------------------------------------------------------------------
   Buttons & actions
   -------------------------------------------------------------------------- */
.auth-split .auth-submit {
    width: 100%;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    background: var(--AuthBtn);
    border: 0;
    border-radius: var(--AuthRadius);
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.auth-split .auth-submit:hover {
    background: var(--AuthBtnHover);
}

.auth-split .auth-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.auth-submit--wide {
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 16px;
}

/* "OR" divider. */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 22px 0;
    color: var(--AuthMuted);
    font-size: 14px;
    font-weight: 600;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--AuthBorder);
}

/* Bordered alternate action (login → request access). */
.auth-alt-action {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 20px;
    border: 1px solid var(--AuthBorder);
    border-radius: var(--AuthRadius);
    text-decoration: none;
    color: var(--AuthText);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.auth-alt-action:hover {
    border-color: var(--AuthNavy);
    background: #f7f9fc;
    color: var(--AuthText);
}

.auth-alt-action__icon {
    font-size: 22px;
    color: var(--AuthNavy);
}

.auth-alt-action__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 15px;
    color: var(--AuthMuted);
}

.auth-alt-action__label {
    color: var(--AuthMuted);
}

.auth-alt-action__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--AuthLink);
}

.auth-alt-action__arrow {
    color: var(--AuthLink);
    font-size: 16px;
}

/* Simple inline switch text (register → login). */
.auth-switch {
    font-size: 15px;
    color: var(--AuthMuted);
    margin: 6px 0 0;
}

.auth-switch a {
    font-weight: 700;
    color: var(--AuthLink);
    text-decoration: none;
}

.auth-switch a:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Terms checkbox
   -------------------------------------------------------------------------- */
.auth-terms {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 6px 0 8px;
    font-size: 14px;
    color: var(--AuthText);
}

.auth-terms input {
    margin-top: 3px;
    width: 17px;
    height: 17px;
    accent-color: var(--AuthNavy);
    cursor: pointer;
}

.auth-terms a {
    font-weight: 600;
    color: var(--AuthLink);
    text-decoration: none;
}

.auth-terms a:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Footer strip beneath the card
   -------------------------------------------------------------------------- */
.auth-footer {
    width: 100%;
    max-width: 460px;
    margin: 32px auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: 13px;
    color: var(--AuthMuted);
}

.auth-footer__links {
    display: flex;
    align-items: center;
    gap: 18px;
}

/* Thin separators between footer links, matching the mockup. */
.auth-footer__links a {
    position: relative;
}

.auth-footer__links a:not(:first-child)::before {
    content: "";
    position: absolute;
    left: -9px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 12px;
    background: currentColor;
    opacity: 0.35;
}

.auth-footer a {
    color: var(--AuthMuted);
    text-decoration: none;
}

.auth-footer a:hover {
    color: var(--AuthText);
}

/* --------------------------------------------------------------------------
   Responsive — collapse to a single column below 992px
   -------------------------------------------------------------------------- */
@media (max-width:991.98px){

    .auth-split{
        display:block;
        min-height:auto;
    }

    .auth-brand{
        display:none;
    }

    /* Brand panel is gone — the card lockup is now the only branding. */
    .auth-card__logo{
        display:flex;
    }

    .auth-form-panel{
        width:100%;
        padding:20px 16px;
        justify-content:flex-start;
    }

    .auth-card{
        width:100%;
        max-width:100%;
        padding:28px 22px;
        border-radius:18px;
    }

    .auth-footer{
        max-width:100%;
        margin-top:20px;
    }

    /* Register: collapse the split; restore natural page flow (no fixed height). */
    .auth-split--register{
        height:auto;
    }

    .auth-split--register .auth-main{
        display:block;
    }

    .auth-split--register .auth-form-panel{
        flex:0 0 100%;
        width:100%;
        border-radius:0;
        overflow-y:visible;
    }

    .auth-split--register .auth-card--register{
        max-width:520px;
        padding:26px 22px;
    }

    .auth-split--register .auth-footer{
        padding:16px 20px;
    }

}

@media (max-width:575.98px){

    .auth-form-panel{
        padding:16px;
    }

    .auth-card{
        padding:24px 18px;
        border-radius:16px;
    }

    /* Register sets its panel/card padding with 2 classes (auth.css:521 and the 991.98px
       block), which outranks the 1-class rules above — so at 320px the card kept 18px+22px
       of side padding and the row below had 12px less to work with than intended. */
    .auth-split--register .auth-form-panel{
        padding:16px;
    }

    .auth-split--register .auth-card--register{
        padding:24px 18px;
    }

    .auth-card__title{
        font-size:24px;
    }

    .auth-card--register .auth-card__title{
        font-size:25px;
    }

    .auth-footer{
        flex-direction:column;
        text-align:center;
    }
    .auth-field{
        margin-bottom:14px;
    }

    .auth-submit{
        margin-top:10px;
    }

    /* At 320px the 86px code box + 10px gap + the input's own 16px/46px padding left only
       ~94px of text room, clipping the "Phone Number" placeholder (needs ~105px). Trimming
       all three buys back ~20px. Safe to shrink the code box: templateSelection in
       register.php hides the country name, so it only ever shows a dial code (+1, +1876). */
    .auth-phone-row{
        gap:8px;
    }

    .auth-phone-row__code{
        flex:0 0 74px;
        max-width:74px;
        min-width:74px;
    }

    .auth-phone-row__number .auth-input--trail{
        padding-right:40px;
    }
    /* Register's bigger lockup is set with 3 classes (.auth-card--register .auth-card__logo
       .auth-logo__*) and a media query adds no specificity, so every rule below has to name
       it too — otherwise the 62px mark and 30px wordmark survive and overflow at 320px. */
    .auth-card__logo .auth-logo{
        width:100%;
        justify-content:center;
        gap:8px;
        min-width:0;
    }

    .auth-card__logo .auth-logo__text{
        min-width:0;
    }

    .auth-card__logo .auth-logo__mark,
    .auth-card--register .auth-card__logo .auth-logo__mark{
        height:42px;
        width:42px;
    }

    .auth-card__logo .auth-logo__wordmark,
    .auth-card--register .auth-card__logo .auth-logo__wordmark{
        font-size:16px;
        white-space:normal;
        line-height:1.2;
    }

    .auth-card__logo .auth-logo__tagline,
    .auth-card--register .auth-card__logo .auth-logo__tagline{
        font-size:12px;
        margin-top:2px;
    }

}

.auth-split--register .auth-input {
    height: 52px;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Forgot password modal — premium header + auth card field/button styling
   (Rendered at body level on login; scoped under body.auth-fullscreen.)
   -------------------------------------------------------------------------- */
body.auth-fullscreen .auth-modal .auth-modal__dialog {
    max-width: 460px;
}

body.auth-fullscreen .auth-modal .auth-modal__content {
    border: none;
    border-radius: var(--tk-radius-lg);
    box-shadow: var(--tk-shadow-lg);
    overflow: hidden;
    background: var(--tk-surface);
}

body.auth-fullscreen .auth-modal .auth-modal__header {
    background: linear-gradient(135deg, var(--tk-primary) 0%, var(--tk-primary-hover) 100%);
    border-bottom: none;
    padding: 1.1rem 1.35rem;
    color: #ffffff;
    margin: 0;
}

body.auth-fullscreen .auth-modal .auth-modal__header .modal-title {
    font-weight: var(--tk-fw-semibold);
    color: #ffffff;
    font-size: 1.05rem;
}

body.auth-fullscreen .auth-modal .auth-modal__header .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

body.auth-fullscreen .auth-modal .auth-modal__header .btn-close:hover {
    opacity: 1;
}

body.auth-fullscreen .auth-modal .auth-modal__body {
    padding: 1.35rem 1.5rem 1.5rem;
}

body.auth-fullscreen .auth-modal .auth-modal__intro {
    margin: 0 0 1.1rem;
    font-size: 15px;
    line-height: 1.5;
    color: var(--tk-text-muted);
    text-align: center;
}

body.auth-fullscreen .auth-modal .auth-field {
    margin-bottom: 1.25rem;
}

body.auth-fullscreen .auth-modal .auth-field__label {
    display: block;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--tk-text);
}

body.auth-fullscreen .auth-modal .auth-field__control {
    position: relative;
    display: flex;
    align-items: center;
}

body.auth-fullscreen .auth-modal .auth-field__icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    font-size: 18px;
    line-height: 1;
    color: var(--tk-primary);
    opacity: 0.75;
    pointer-events: none;
}

body.auth-fullscreen .auth-modal .auth-field__icon--lead {
    left: 16px;
}

body.auth-fullscreen .auth-modal .auth-input {
    width: 100%;
    height: 54px;
    padding: 0 16px 0 48px;
    font-size: 16px;
    font-weight: 500;
    color: var(--tk-text);
    background: var(--tk-surface-muted);
    border: 1px solid var(--tk-border);
    border-radius: var(--tk-radius);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

body.auth-fullscreen .auth-modal .auth-input:focus {
    background: var(--tk-surface);
    border-color: var(--tk-primary);
    box-shadow: 0 0 0 3px var(--tk-focus-ring);
}

body.auth-fullscreen .auth-modal .auth-input.parsley-error {
    border-color: var(--tk-danger);
    background: #fff7f7;
}

body.auth-fullscreen .auth-modal .auth-modal__submit {
    width: 100%;
    height: 56px;
    margin-top: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    background: var(--tk-primary);
    border: 1px solid var(--tk-primary);
    border-radius: var(--tk-radius);
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

body.auth-fullscreen .auth-modal .auth-modal__submit:hover:not(:disabled) {
    background: var(--tk-primary-hover);
    border-color: var(--tk-primary-hover);
}

body.auth-fullscreen .auth-modal .auth-modal__submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

body.auth-fullscreen .auth-modal .forgot-email-error-container .parsley-errors-list {
    list-style: none;
    margin: 5px 0 0;
    padding: 0;
    animation: authValidIn 0.16s ease-out;
}

body.auth-fullscreen .auth-modal .forgot-email-error-container .parsley-errors-list li {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--tk-danger);
    animation: authValidIn 0.16s ease-out;
}

body.auth-fullscreen .auth-modal .forgot-email-error-container .parsley-errors-list li::before {
    content: "!";
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--tk-danger);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}