/* ======================================== */
/* Figma-Based Login Screen Styles         */
/* Source: Figma "Login" (kB5zJwK6FMdXg9UlFgWzwk) */
/* ======================================== */

/* ======================================== */
/* CSS Variables (Design Tokens)           */
/* ======================================== */

:root {
    /* Typography */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ======================================== */
/* CSS Reset & Base                        */
/* ======================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background-color: var(--color-background);
    border-top: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Fix for IE/Edge box-sizing */
input,
button,
select,
textarea {
    box-sizing: border-box;
}

/* Remove default button styles */
button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
}

/* ======================================== */
/* Base Layout                             */
/* ======================================== */

.login-container {
    min-height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    font-family: var(--font-family-base);
    border-top: none;
}

/* Full-page background banner */
.login-container__banner-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/AV_Banner.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

.login-container__banner-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

/* ======================================== */
/* Header Section                          */
/* ======================================== */

.login-header {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.login-header__logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.login-header__logo img {
    height: 48px;
    width: auto;
}

.login-header__logo-text {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary);
}

/* ======================================== */
/* Main Content                            */
/* ======================================== */

.login-main {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 40px 24px;
    position: relative;
    z-index: 10;
    min-height: calc(100vh - 160px);
    gap: 40px;
}

.login-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
    max-width: 1200px;
}

.login-tagline {
    width: 18%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: white;
    font-size: 36px;
    font-family: Inter;
    font-weight: 700;
    line-height: 46.8px;
    word-wrap: break-word;
    text-align: left;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

#text {
    position: absolute;
    left: 24px;
    width: 25%;
    display: flex;
    justify-content: center;
    color: white;
    font-size: 36px;
    font-family: Inter;
    font-weight: 700;
    line-height: 46.8px;
    word-wrap: break-word;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.login-content-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    max-width: 460px;
}

/* Ensure consistent card positioning on desktop */
@media (min-width: 1366px) {
    .login-card {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}

.login-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.80);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 20px;
    padding: 40px 32px 8px 32px;
    width: 100%;
    max-width: 460px;
    outline: 1px #D9D9D9 solid;
    outline-offset: -1px;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.login-card__header-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #d9d9d9;
}

.login-card__tagline {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    font-size: 36px;
    font-family: Inter;
    font-weight: 700;
    line-height: 46.8px;
    text-align: center;
    word-wrap: break-word;
    margin-top: 24px;
}

.login-card__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-primary);
    text-align: center;
    margin-bottom: 8px;
    margin-top: 0;
}

.login-card__subtitle {
    font-size: 14px;
    color: var(--color-text-secondary);
    text-align: center;
    margin-bottom: 32px;
}

/* ======================================== */
/* Form Elements                           */
/* ======================================== */

.login-form {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: var(--spacing-md);
}

.form-group {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.form-group__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

.form-group__label {
    font-size: 15px;
    font-weight: 400;
    color: #1E1F24;
}

.form-group__label .required {
    color: #DB3737;
}

.form-group__input {
    padding: 10px 12px;
    font-size: 15px;
    font-weight: 400;
    border: none;
    border-radius: 8px;
    background-color: #FCFCFC;
    color: var(--color-text-primary);
    transition: all 0.15s ease;
    height: 40px;
    width: 100%;
    outline: 1px #d1d5db solid;
    outline-offset: -1px;
}


.form-group__input:hover {
    border-color: #9ca3af;
}

.form-group__input:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(0, 158, 201, 0.15);
}

.form-group__input::placeholder {
    color: #9ca3af;
}

.form-group--inline {
    flex-direction: row;
    align-items: center;
}

.form-group__input--password-wrapper {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

/* Hide browser's native password show/hide button */
.form-group__input--password::-webkit-reveal-button,
.form-group__input--password::-webkit-credentials-auto-fill-button {
    display: none;
    visibility: hidden;
}

.form-group__input--password::-ms-reveal,
.form-group__input--password::-ms-clear {
    display: none;
    visibility: hidden;
}

/* Firefox - disable password reveal */
.form-group__input--password::-moz-focus-inner {
    border: 0;
}

.form-group__input--password {
    flex: 1;
    padding-right: 40px;
}

.password-toggle-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    opacity: 0.6;
}

.password-toggle-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
    opacity: 1;
}

.password-toggle-btn:active {
    transform: scale(0.95);
}

.password-toggle-btn img {
    width: 20px;
    height: 20px;
    filter: grayscale(0.3);
    transition: filter 0.2s ease;
}

.password-toggle-btn:hover img {
    filter: grayscale(0);
}

/* ======================================== */
/* Buttons                                 */
/* ======================================== */

.btn {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn--primary {
    background-color: var(--color-primary);
    color: #ffffff;
    box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
    background-color: #6b171a;
    box-shadow: var(--shadow-md);
}

.btn--primary:active {
    transform: translateY(1px);
}

.btn--secondary {
    background-color: var(--color-secondary);
    color: #ffffff;
    box-shadow: var(--shadow-sm);
}

.btn--secondary:hover {
    background-color: #0087a8;
    box-shadow: var(--shadow-md);
}

.btn--full-width {
    width: 100%;
}

.btn--login {
    background: transparent;
    color: #0098C1;
    padding: 5px 9px;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 20px;
    outline: 1px #0098C1 solid;
    outline-offset: -1px;
    cursor: pointer;
    width: 75%;
    height: 40px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
    margin: 12px auto 0;
}

.btn--login:hover {
    background: rgba(0, 151.82, 193.47, 0.1);
}

/* Original Kendo Button Styles (for binding) */
.btn-Login {
    width: 80px;
    height: 27px;
    background: #007dbd !important;
    padding: 3px 15px;
    border: 0;
    color: #fff;
    border-radius: 2px;
    margin-top: -1px;
    cursor: pointer;
}

.btn-Submit {
    width: 80px;
    height: 27px;
    background: #007dbd !important;
    padding: 3px 15px;
    border: 0;
    color: #fff;
    border-radius: 2px;
    margin-top: -1px;
    margin-left: 20px;
    cursor: pointer;
    display: inline-block;
}

.btn-toogle {
    width: 26px;
    height: 26px;
    background: lightgrey !important;
    border: 1;
    border-radius: 2px;
    margin-top: -2px;
    margin-left: -7px;
    border-color: dimgrey !important;
    cursor: pointer;
}

.btn--submit {
    background-color: var(--color-secondary);
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.btn--submit:hover {
    background-color: #0087a8;
}

.btn--icon {
    padding: var(--spacing-xs);
    background: transparent;
    border: 1px solid var(--color-border);
}

.btn--icon:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* ======================================== */
/* Remember Panel (original binding)       */
/* ======================================== */

.remember-panel {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
}

.remember-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.remember-label {
    font-size: 11px;
    color: var(--color-text-secondary);
    cursor: pointer;
    margin: 0 8px 0 4px;
}

.forgot-link {
    font-size: 14px;
    font-weight: 500;
    font-family: Inter;
    color: #0098C1;
    text-decoration: none;
    transition: color 0.15s ease;
}

.forgot-link:hover {
    color: #0087a8;
    text-decoration: underline;
}

/* ======================================== */
/* Notification Panel (original binding)   */
/* ======================================== */

.notification-panel {
    margin: 0;
    width: 380px;
    min-height: 20px;
}

.notification-label {
    float: left;
    color: red !important;
    font-size: 12px;
    font-weight: 500;
}

.error-message {
    color: red;
    margin-top: 15px;
    font-size: 10px;
}

.success-message {
    color: green;
    margin-top: 15px;
    font-size: 10px;
}

/* ======================================== */
/* Messages                                */
/* ======================================== */

.login-message {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-md);
    display: none;
}

.login-message--error {
    background-color: rgba(220, 53, 69, 0.1);
    border-left: 3px solid var(--color-error);
    color: var(--color-error);
    display: block;
}

.login-message--success {
    background-color: rgba(40, 167, 69, 0.1);
    border-left: 3px solid var(--color-success);
    color: var(--color-success);
    display: block;
}

/* ======================================== */
/* Progress Bar                            */
/* ======================================== */

.login-progress {
    width: 100%;
    height: 4px;
    background-color: var(--color-border);
    border-radius: var(--radius-full);
    margin-top: var(--spacing-md);
    overflow: hidden;
}

.login-progress__bar {
    height: 100%;
    background-color: var(--color-secondary);
    width: 0%;
    transition: width 0.3s ease;
    border-radius: var(--radius-full);
}

.login-progress__bar--animated {
    animation: progress-indeterminate 1.5s infinite;
}

@keyframes progress-indeterminate {
    0% {
        width: 0%;
        margin-left: 0%;
    }
    50% {
        width: 50%;
        margin-left: 25%;
    }
    100% {
        width: 0%;
        margin-left: 100%;
    }
}

/* ======================================== */
/* Password Reset Modal                    */
/* ======================================== */

.password-reset-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal);
    align-items: center;
    justify-content: center;
}

.password-reset-modal--active {
    display: flex;
}

.password-reset-modal__content {
    background: var(--color-background);
    border-radius: 8px;
    padding: 32px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--color-border);
}

.password-reset-modal__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 8px;
    text-align: center;
}

.password-reset-modal__description {
    font-size: 14px;
    color: var(--color-text-secondary);
    text-align: center;
    margin-bottom: 24px;
    line-height: 1.5;
}

.password-reset-modal__actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

/* ======================================== */
/* Footer                                  */
/* ======================================== */

.login-footer {
    padding: var(--spacing-lg);
    text-align: center;
    background-color: var(--color-background);
    border-top: 1px solid var(--color-border);
}

.login-footer__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.login-footer__link {
    color: var(--color-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.login-footer__link:hover {
    color: #0087a8;
    text-decoration: underline;
}

/* ======================================== */
/* Banner Section (deprecated - use bg)    */
/* ======================================== */
/* Note: Banner is now a full-page background image */
/* Use .login-container__banner-bg instead */

.login-banner {
    display: none;
}

/* ======================================== */
/* Info Section                            */
/* ======================================== */

.login-info {
    position: relative;
    z-index: 10;
    padding: 0px 10px;
    background: transparent;
    border-top: none;
    margin-top: auto;
    margin-bottom: 0;
}

.login-info__content {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
}

.login-info__text {
    color: white;
    font-size: 10px;
    font-family: Inter;
    font-weight: 700;
    line-height: 13px;
    word-wrap: break-word;
    text-align: left;
}

.login-info__text a {
    color: white;
    font-size: 10px;
    font-family: Inter;
    font-weight: 700;
    text-decoration: underline;
    line-height: 13px;
    word-wrap: break-word;
}

.login-info__copyright {
    color: white;
    font-size: 10px;
    font-family: Inter;
    font-weight: 700;
    line-height: 13px;
    margin-top: 8px;
}

/* ======================================== */
/* Responsive Design                       */
/* ======================================== */

/* Large Desktop (1920px and above) */
/*@media (min-width: 1920px) {
    html {
        font-size: 18px;
    }

    .login-tagline {
        font-size: 42px;
        line-height: 54px;
    }

    .login-card {
        max-width: 520px;
        padding: 48px 40px 12px 40px;
    }
}*/

/* Laptop (1366px - 1919px) */
@media (min-width: 1366px) and (max-width: 1919px) {
    .login-tagline {
        font-size: 32px;
        line-height: 42px;
    }

    .login-content-wrapper {
        max-width: 480px;
    }
}

/* Tablet (768px - 1365px) */
@media (max-width: 1365px) {
    #text {
        position: static;
        width: 100%;
        text-align: center;
        margin-bottom: 24px;
        font-size: 28px;
        line-height: 38px;
    }

    .login-main {
        flex-direction: column;
        justify-content: center;
        padding: 24px;
    }

    .login-content-wrapper {
        max-width: 100%;
    }

    .login-card {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        max-width: 460px;
        margin: 0 auto;
    }
}

/* ======================================== */
/* Kendo UI Integration                    */
/* ======================================== */

.kendo-button--figma {
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-medium);
}

.kendo-textbox--figma {
    border-radius: var(--radius-md);
    border-color: var(--color-border);
}

.kendo-textbox--figma:focus {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(0, 158, 201, 0.1);
}

/* ======================================== */
/* Progress Bar (original binding)         */
/* ======================================== */

.progressbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000000;
    display: none;
}

.progressbar-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: 0.3;
}

.progressbar-image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    margin-left: -40px;
    margin-top: -40px;
    background-color: white;
    background-image: url('data:image/gif;base64,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');
    background-position: center;
    border-radius: 40px;
    background-repeat: no-repeat;
    box-shadow: 2px 2px 1px #EEEEEE;
}

.progressbar-cancel {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 100px;
    margin-left: -40px;
    margin-top: -40px;
    display: none;
}

.progressbar-link {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20px;
    color: gray;
    text-align: center;
    cursor: pointer;
}

/* Bootstrap Progress bar overrides */
.progress {
    margin: 5px 10px 0 0;
    width: 380px;
    visibility: hidden;
}

.progress.login-progress {
    margin: 5px 10px 0 0;
    width: 380px;
    visibility: hidden;
}

.progress-bar {
    height: 20px;
}

/* Password reset popup - original container (hidden, Kendo copies content) */
.password-reset-popup {
    height: 82px;
    margin-top: 10px;
    display: none;
}

/* Password Reset Popup - Kendo Window layout fix */
.k-window:has(#popupWindow) {
    display: flex ;
    flex-direction: column ;
    gap: 10px ;
}

.k-window-titlebar:has(#popupWindow_wnd_title) {
    display: flex;
    flex-direction: row;
    gap: 175px;
}

.progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
}

.progress-bar-animated {
    animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
    0% {
        background-position: 1rem 0;
    }
    100% {
        background-position: 0 0;
    }
}

/* ======================================== */
/* Utility Classes                         */
/* ======================================== */

.text-center {
    text-align: center;
}

.text-primary {
    color: var(--color-primary);
}

.text-secondary {
    color: var(--color-secondary);
}

.text-muted {
    color: var(--color-text-secondary);
}

.mt-sm {
    margin-top: var(--spacing-sm);
}

.mt-md {
    margin-top: var(--spacing-md);
}

.mt-lg {
    margin-top: var(--spacing-lg);
}

.mb-sm {
    margin-bottom: var(--spacing-sm);
}

.mb-md {
    margin-bottom: var(--spacing-md);
}

.mb-lg {
    margin-bottom: var(--spacing-lg);
}

.d-none {
    display: none;
}

.d-block {
    display: block;
}

.d-flex {
    display: flex;
}

.justify-content-between {
    justify-content: space-between;
}

.align-items-center {
    align-items: center;
}

.gap-sm {
    gap: var(--spacing-sm);
}

.gap-md {
    gap: var(--spacing-md);
}

/* ======================================== */
/* Notification Panel                      */
/* ======================================== */

.notification-panel {
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-panel--error {
    background-color: rgba(220, 53, 69, 0.1);
    border: 1px solid var(--color-error);
}

.notification-panel--success {
    background-color: rgba(40, 167, 69, 0.1);
    border: 1px solid var(--color-success);
}

.notification-panel--warning {
    background-color: rgba(255, 193, 7, 0.1);
    border: 1px solid var(--color-warning);
}

.notification-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-error);
    text-align: center;
}

/* ======================================== */
/* Remember Panel                          */
/* ======================================== */

.remember-panel {
    margin-top: var(--spacing-sm);
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.remember-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.remember-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    user-select: none;
}

/* ======================================== */
/* Action Panel                            */
/* ======================================== */

.action-panel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
}

/* ======================================== */
/* Loading Spinner                         */
/* ======================================== */

.login-spinner {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.login-spinner--active {
    display: flex;
}

.login-spinner__backdrop {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(2px);
}

.login-spinner__spinner {
    position: relative;
    width: 48px;
    height: 48px;
    border: 4px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ======================================== */
/* Input Icons                             */
/* ======================================== */

.input-icon {
    position: absolute;
    left: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--color-text-secondary);
    pointer-events: none;
}

.input--with-icon .form-group__input {
    padding-left: 48px;
}

/* ======================================== */
/* Divider                                 */
/* ======================================== */

.divider {
    display: flex;
    align-items: center;
    margin: var(--spacing-lg) 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--color-border);
}

.divider__text {
    padding: 0 var(--spacing-md);
}

/* ======================================== */
/* Social Login Buttons                    */
/* ======================================== */

.social-login {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.social-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-background);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.2s ease;
}

.social-btn:hover {
    background-color: #f8f9fa;
    border-color: #c1c9d0;
}

.social-btn svg {
    width: 20px;
    height: 20px;
}

.turnstile-container{
    margin: 20px 0;
}