:root {
    /* Colors */
    --input-text-default: #161616;
    --input-text-placeholder: #c1c8d7;
    --input-border-default: #ced5e3;
    --input-bg-default: #ffffff;
    --background-white: #ffffff;
    --button-primary-bg-default: #161616;
    --button-primary-bg-disabled: #EEEEEE;
    --button-primary-bg-hover: #67d4ff;
    --button-primary-content-default: #ffffff;
    --button-primary-content-disabled: #5e626a;
    --button-primary-content-hover: #161616;
    --text-secondary: #5e626a;
    --text-emphasis-secondary: #007cad;

    /* Misc sizes */
    --width-container-box: 370px;
    --width-wrapper-box: 582px;
    --grid-_padding-panel-large: 64px;
    --grid-primary-spacing-gutter-responsive: 32px;
    --grid-primary-spacing-gutter: 32px;
    --padding-medium: 64px;
    --input-medium-pad-x: 14px;
    --input-medium-pad-y: 12px;
    --input-medium-radius: 4px;
    --input-medium-space: 8px;
    --page-margin-additional-padding: 86px;
    --button-large-pad-x: 30px;
    --button-large-pad-y: 16px;

    /* Font sizes */
    --body-size-medium: 14px;
    --body-size-small: 12px;
    --body-kerning-kerning: 0;
    --caption-leading-medium: 24px;
    --caption-leading-small: 16px;
    --input-label-size-medium: 16px;
    --input-label-leading-medium: 16px;
    --input-value-size-medium: 16px;
    --input-value-leading-medium: 20px;
    --input-kerning-kerning: 0;
    --button-size-large: 16px;
    --button-leading-default: 24px;
    --button-kerning-kerning: 0;
}

/* Tablet (≤991px) */
@media (max-width: 991px) {
    :root {
        /* Misc sizes */
        --grid-_padding-panel-large: 32px;
        --grid-primary-spacing-gutter-responsive: 40px;
        --grid-primary-spacing-gutter: 24px;
        --padding-medium: 64px;
        --input-medium-pad-x: 14px;
        --input-medium-pad-y: 10px;
        --input-medium-radius: 4px;
        --input-medium-space: 8px;
        --page-margin-additional-padding: 30px;
        --button-large-pad-x: 22px;
        --button-large-pad-y: 14px;

        /* Font sizes */
        --body-size-medium: 14px;
        --body-size-small: 13px;
        --body-kerning-kerning: 0;
        --caption-leading-medium: 22px;
        --caption-leading-small: 16px;
        --input-label-size-medium: 14px;
        --input-label-leading-medium: 14px;
        --input-value-size-medium: 14px;
        --input-value-leading-medium: 18px;
        --input-kerning-kerning: 0;
        --button-size-large: 16px;
        --button-leading-default: 24px;
        --button-kerning-kerning: 0;
    }
}

/* Mobile (≤767px) */
@media (max-width: 767px) {
    :root {
        /* Misc sizes */
        --grid-_padding-panel-large: 20px;
        --grid-primary-spacing-gutter-responsive: 48px;
        --grid-primary-spacing-gutter: 17px;
        --padding-medium: 64px;
        --input-medium-pad-x: 12px;
        --input-medium-pad-y: 8px;
        --input-medium-radius: 4px;
        --input-medium-space: 8px;
        --page-margin-additional-padding: 22px;
        --button-large-pad-x: 20px;
        --button-large-pad-y: 12px;

        /* Font sizes */
        --body-size-medium: 13px;
        --body-size-small: 12px;
        --body-kerning-kerning: 0;
        --caption-leading-medium: 18px;
        --caption-leading-small: 14px;
        --input-label-size-medium: 12px;
        --input-label-leading-medium: 12px;
        --input-value-size-medium: 12px;
        --input-value-leading-medium: 16px;
        --input-kerning-kerning: 0;
        --button-size-large: 16px;
        --button-leading-default: 24px;
        --button-kerning-kerning: 0;
    }
}

/* XL Screens (≥1440px) */
@media (min-width: 1440px) {
    :root {
        /* Misc sizes */
        --width-container-box: 451px;
        --width-wrapper-box: 697px;
        --grid-_padding-panel-large: 64px;
        --grid-primary-spacing-gutter-responsive: 36px;
        --grid-primary-spacing-gutter: 36px;
        --padding-medium: 64px;
        --input-medium-pad-x: 20px;
        --input-medium-pad-y: 12px;
        --input-medium-radius: 4px;
        --input-medium-space: 8px;
        --page-margin-additional-padding: 212px;
        --button-large-pad-x: 24px;
        --button-large-pad-y: 16px;

        /* Font sizes */
        --body-size-medium: 16px;
        --body-size-small: 14px;
        --body-kerning-kerning: 0;
        --caption-leading-medium: 24px;
        --caption-leading-small: 16px;
        --input-label-size-medium: 16px;
        --input-label-leading-medium: 16px;
        --input-value-size-medium: 16px;
        --input-value-leading-medium: 16px;
        --input-kerning-kerning: 0;
        --button-size-large: 18px;
        --button-leading-default: 24px;
        --button-kerning-kerning: 0;
    }
}

body {
    font-family: 'Public Sans', sans-serif;
    font-weight: 500;
    font-size: var(--body-size-medium);
    line-height: var(--caption-leading-medium);
    letter-spacing: var(--body-kerning-kerning);
    color: var(--input-text-default);
    margin: 0;
    background: url('/static/images/bg/login-background.jpg') no-repeat center center/cover;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 56px var(--page-margin-additional-padding) 0 var(--page-margin-additional-padding);
}

a {
    color: var(--text-emphasis-secondary);
    text-underline-position: from-font;
}

a:hover {
    text-decoration: none;
}

.container-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.container-wrapper .container-box {
    width: 100%;
    max-width: var(--width-container-box);
    padding: var(--padding-medium) var(--grid-_padding-panel-large);
    background: var(--background-white);
    border-radius: 16px;
    box-shadow: 0 164px 46px 0 rgba(122, 122, 122, 0.00),
    0 105px 42px 0 rgba(122, 122, 122, 0.01),
    0 59px 35px 0 rgba(122, 122, 122, 0.05),
    0 26px 26px 0 rgba(122, 122, 122, 0.09),
    0 7px 14px 0 rgba(122, 122, 122, 0.10);
    overflow: auto;
    max-height: 70%;
}

.container-wrapper .logo-row {
    display: flex;
    justify-content: center;
    margin-bottom: 48px;
}

.container-wrapper .container-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.container-wrapper .container-form-row {
    display: flex;
    flex-direction: column;
    gap: var(--input-medium-space);
}

.container-wrapper .container-form-row label {
    display: block;
    font-size: var(--input-label-size-medium);
    line-height: var(--input-label-leading-medium);
    letter-spacing: var(--input-kerning-kerning);
}

.container-wrapper .container-form-row input {
    padding: var(--input-medium-pad-y) var(--input-medium-pad-x);
    font-size: var(--input-value-size-medium);
    line-height: var(--input-value-leading-medium);
    letter-spacing: var(--input-kerning-kerning);
    border: 1px solid var(--input-border-default);
    border-radius: var(--input-medium-radius);
    background-color: var(--input-bg-default);
}

.container-wrapper .container-form-row input::placeholder {
    color: var(--input-text-placeholder);
}

.container-wrapper .container-form-actions {
    display: flex;
    justify-content: center;
}

.container-wrapper .container-form-actions.multiple-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.container-wrapper .container-form-actions-inner {
    display: inline-block;
    position: relative;
    border-radius: 999px;
    background: var(--button-primary-bg-default);
}

.container-wrapper .container-form-actions-inner.disabled {
    background: var(--button-primary-bg-disabled);
}

.container-wrapper .container-form-actions-inner::after {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath d='M15.7071 4.34033L22.7071 11.3403C23.0976 11.7309 23.0976 12.364 22.7071 12.7545L15.7071 19.7545L14.5 18.6332L20.5 12.7545H4V11.3403H20.5L14.5 5.46165L15.7071 4.34033Z' fill='white'/%3E%3C/svg%3E");
    width: 24px;
    height: 24px;
    position: absolute;
    right: var(--button-large-pad-x);
    bottom: var(--button-large-pad-y);
}

.container-wrapper .container-form-actions-inner.disabled::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath d='M15.7071 4.34033L22.7071 11.3403C23.0976 11.7309 23.0976 12.364 22.7071 12.7545L15.7071 19.7545L14.5 18.6332L20.5 12.7545H4V11.3403H20.5L14.5 5.46165L15.7071 4.34033Z' fill='%235e626a'/%3E%3C/svg%3E");
}

.container-wrapper .container-form-actions-inner:not(.disabled):hover {
    background: var(--button-primary-bg-hover);
}

.container-wrapper .container-form-actions-inner:not(.disabled):hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15.7071 4.29297L22.7071 11.293C23.0976 11.6835 23.0976 12.3167 22.7071 12.7072L15.7071 19.7072L14.5 18.5859L20.5 12.7072H4V11.293H20.5L14.5 5.41428L15.7071 4.29297Z' fill='%23161616'/%3E%3C/svg%3E");
}

.container-wrapper .container-form-button {
    padding: var(--button-large-pad-y) calc(var(--button-large-pad-x) + 30px) var(--button-large-pad-y) var(--button-large-pad-x);
    background: transparent;
    border: none;
    text-align: left;
    color: var(--button-primary-content-default);
    font-size: var(--button-size-large);
    line-height: var(--button-leading-default);
    letter-spacing: var(--button-kerning-kerning);
    cursor: pointer;
    z-index: 1;
    position: relative;
}

.container-wrapper .container-form-actions-inner.disabled .container-form-button {
    color: var(--button-primary-content-disabled);
    cursor: not-allowed;
}

.container-wrapper .container-form-actions-inner:not(.disabled):hover .container-form-button {
    color: var(--button-primary-content-hover);
}

.container-wrapper .terms {
    margin-top: 40px;
    text-align: center;
    font-size: var(--body-size-small);
    line-height: var(--caption-leading-small);
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
}

.container-wrapper .intro-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
    margin-bottom: 24px;
}

.container-wrapper .intro-text-heading {
    font-size: var(--input-label-size-medium);
    line-height: var(--input-label-leading-medium);
    font-weight: 700;
}


/* ========================================
   CHAT BUTTON COMPONENT
   ======================================== */

.chat-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--button-primary-bg-default);
    color: var(--button-primary-content-default);
    border-radius: 50px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: background-color 0.2s;
    z-index: 1000;
}

.chat-button:hover {
    background: var(--button-primary-bg-hover);
    color: var(--button-primary-content-hover);
}

.chat-button-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.chat-button-text {
    font-size: 14px;
    font-weight: 500;
}