@font-face {
    font-family: "Cerebri Sans";
    src: url("../fonts/CerebriSans-Regular.otf") format("opentype");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Cerebri Sans";
    src: url("../fonts/CerebriSans-SemiBold.otf") format("opentype");
    font-weight: 600;
    font-display: swap;
}

:root {
    --et-primary: #e95d41;
    --et-primary-hover: #e4583d;
    --et-primary-focus: #ff907a;
    --et-secondary: #303d4a;
    --et-card-bg: rgba(43, 60, 73, 0.95);
    --et-white: #ffffff;
    --et-grey-500: #959595;
    --et-grey-200: #e9e9e9;
    --et-border-input: #d1d1d1;
    --et-success: #2e8140;
    --et-error: #c7393c;
    --et-radius: 8px;
    --et-card-width: 450px;
    --et-column-width: 300px;
    --et-field-height: 44px;
    --et-font: "Cerebri Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --et-shadow-input: 0 1px 1px rgba(0, 0, 0, 0.12);
}

* {
    box-sizing: border-box;
}

body.et-body {
    margin: 0;
    padding: 0;
    font-family: var(--et-font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--et-white);
    background-color: var(--et-secondary);
    background-image: url("https://e-icons.b-cdn.net/estatetool/fallback.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.et-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px 16px;
}

.et-card {
    width: 100%;
    max-width: var(--et-card-width);
    padding: 40px 75px;
    border-radius: var(--et-radius);
    background-color: var(--et-card-bg);
}

.et-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 48px;
}

.et-logo {
    display: block;
    width: 100%;
    max-width: var(--et-column-width);
    height: auto;
}

.et-content {
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: var(--et-column-width);
    margin: 0 auto;
}

.et-title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-wrap: balance;
}

.et-lead {
    margin: -12px 0 0;
    font-size: 15px;
    text-align: center;
    color: var(--et-grey-200);
}

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

.et-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.et-label {
    font-size: 14px;
    font-weight: 600;
}

.et-input {
    width: 100%;
    height: var(--et-field-height);
    padding: 0 16px;
    font-family: inherit;
    font-size: 15px;
    color: #000000;
    background-color: var(--et-white);
    border: 1px solid var(--et-border-input);
    border-radius: var(--et-radius);
    box-shadow: var(--et-shadow-input);
}

.et-input:focus {
    outline: 2px solid var(--et-primary-focus);
    outline-offset: 1px;
}

.et-button-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--et-field-height);
    padding: 0 24px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--et-white);
    background-color: var(--et-primary);
    border: none;
    border-radius: var(--et-radius);
    cursor: pointer;
}

.et-button-primary:hover {
    background-color: var(--et-primary-hover);
}

.et-button-primary:focus-visible {
    outline: 2px solid var(--et-primary-focus);
    outline-offset: 2px;
}

.et-alert {
    padding: 12px 16px;
    font-size: 14px;
    border-radius: var(--et-radius);
    background-color: rgba(255, 255, 255, 0.1);
    border-left: 4px solid var(--et-grey-500);
}

.et-alert-success {
    border-left-color: var(--et-success);
}

.et-alert-error {
    border-left-color: var(--et-error);
}

@media (max-width: 520px) {
    .et-card {
        padding: 24px 16px;
    }

    .et-header {
        margin-bottom: 28px;
    }
}