:root {
    --hw-primary: #207EA2;
    --hw-secondary: #4D98B5;
    --hw-bg: #F4F6F8;
    --hw-error: #FF6A6A;
    --white: #FFFFFF;
    --white-semi: rgba(255, 255, 255, 0.7);
    --white-low: rgba(255, 255, 255, 0.4);
    
    --radius-card: 16px;
    --radius-button: 12px;
    --radius-small: 2px;
    
    --font-inter: 'Inter', sans-serif;
}

body {
    background-color: var(--hw-bg);
    font-family: var(--font-inter);
    margin: 0;
    padding: 0;
    color: var(--white);
}

.bg-hw-bg {
    background-color: var(--hw-bg);
}

/* Auth Container */
.auth-container {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
}

@media (max-width: 480px) {
    .auth-container {
        max-width: 360px;
    }
}

/* Card */
.auth-card {
    background-color: var(--hw-primary);
    border-radius: var(--radius-card);
    width: 100%;
    overflow: hidden;
    box-shadow: 4px 4px 6px 0px #D1D1D1; /* Updated shadow per spec */
}

/* Header */
.auth-header {
    background-color: var(--hw-secondary);
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 480px) {
    .auth-header {
        height: 56px;
    }
}

.auth-title {
    font-size: 32px;
    font-weight: 300; /* Light per spec */
    margin: 0;
    letter-spacing: 0.8px;
}

@media (max-width: 480px) {
    .auth-title {
        font-size: 24px;
    }
}

/* Body */
.auth-body {
    padding: 32px 40px 40px;
}

@media (max-width: 480px) {
    .auth-body {
        padding: 24px 16px 24px;
    }
}

/* Input Group */
.input-group-custom {
    margin-bottom: 40px; /* Fixed 40px gap between line and button */
    position: relative;
}

.form-label {
    display: block;
    font-size: 18px;
    color: var(--white);
    margin-bottom: 16px;
    font-weight: 400;
    letter-spacing: 0.4px;
}

@media (max-width: 480px) {
    .form-label {
        font-size: 16px;
    }
}

.input-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    border-bottom: 1px solid var(--white-low);
    transition: border-color 0.2s ease;
    padding-bottom: 8px;
}

.input-icon {
    font-size: 24px;
    color: var(--white);
    opacity: 0.4;
    margin-right: 16px;
    transition: opacity 0.2s ease;
}

@media (max-width: 480px) {
    .input-icon {
        font-size: 20px;
    }
}

.form-control-custom {
    background: transparent;
    border: none;
    color: var(--white);
    font-size: 18px;
    padding: 0;
    width: 100%;
    outline: none;
    height: 24px;
    letter-spacing: 0.4px;
}

.form-control-custom::placeholder {
    color: var(--white-low);
}

/* States Logic */

/* Idle State */
.auth-container.state-idle .btn-custom {
    background-color: var(--hw-secondary);
    color: var(--white-low);
    pointer-events: none;
}

/* Active State */
.auth-container.state-active .btn-custom {
    background-color: var(--white);
    color: var(--hw-primary);
    pointer-events: auto;
}

.auth-container.state-active .input-icon,
.auth-container.state-focus .input-icon {
    opacity: 1;
}

/* Focus State */
.auth-container.state-focus .input-wrapper {
    border-bottom: 2px solid var(--white);
}

/* Error State */
.auth-container.state-error .input-wrapper {
    border-bottom: 3px solid var(--hw-error) !important;
}

.auth-container.state-error .input-icon {
    opacity: 1;
}

.error-message {
    color: var(--white);
    font-size: 14px;
    display: none;
    text-align: center;
    font-weight: 400;
    width: 100%;
    letter-spacing: 0.2px;
    position: absolute;
    top: 100%; /* Positions text exactly under the line gap */
    left: 0;
    margin-top: 8px;
}

@media (max-width: 480px) {
    .error-message {
        font-size: 12px;
    }
}

.auth-container.state-error .error-message {
    display: block;
}

/* Button */
.btn-custom {
    width: 100%;
    height: 56px;
    border: none;
    border-radius: var(--radius-button);
    font-size: 18px;
    font-weight: 400;
    text-transform: lowercase;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.4px;
    margin-top: 0; /* Margin handled by input-group */
}

@media (max-width: 480px) {
    .btn-custom {
        height: 48px;
        font-size: 16px;
    }
}

/* Loading State */
.spinner-custom {
    display: none;
    width: 24px;
    height: 24px;
    margin-right: 12px;
}

.auth-container.state-loading .btn-custom {
    background-color: var(--hw-secondary);
    color: var(--white-low);
    pointer-events: none;
}

.auth-container.state-loading .spinner-custom {
    display: inline-block !important;
    width: 24px;
    height: 24px;
    margin-right: 12px;
    animation: rotate 1s linear infinite;
}

@media (max-width: 480px) {
    .auth-container.state-loading .spinner-custom {
        width: 16px;
        height: 16px;
    }
}

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

/* Footer */
.brand-text {
    color: var(--hw-primary);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.4px;
}

@media (max-width: 480px) {
    .brand-text {
        font-size: 14px;
    }
}

.logo-icon-wrapper {
    display: flex;
    align-items: center;
}

/* Modal Specific Styles */
.modal-dialog {
    max-width: 442px; /* Fixed width per spec */
}

.modal-content {
    width: 442px;
    height: 374px; /* Fixed height per spec */
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    border: none;
    background: #FFFFFF;
}

.modal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    height: 100%;
}

@media (max-width: 480px) {
    .modal-dialog, .modal-content {
        max-width: 100%;
        height: auto;
        min-height: 374px;
    }
}

.btn-outline-hw-modal {
    height: 48px;
    border: 1px solid var(--hw-primary);
    background: #FFFFFF;
    color: var(--hw-primary);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.2s;
    min-width: 140px;
}

.btn-outline-hw-modal:hover {
    background-color: #EDF5F8;
    color: var(--hw-primary);
    border-color: var(--hw-primary);
}

.btn-hw-primary-modal {
    height: 48px;
    background-color: var(--hw-primary);
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.2s;
    min-width: 168px;
}

.btn-hw-primary-modal:hover {
    background-color: #1B6D8D;
    color: #FFFFFF;
}

#modalIllustration {
    font-size: 124px; /* Icon size per spec */
    color: #90BFD1; /* Icon color per spec */
    line-height: 1;
}

#modalIllustration svg {
    width: 124px;
    height: 124px;
}

/* Публичные контакты читаются без Bootstrap и JS: письмо/звонок открывает
   приложение пользователя, а адрес переносится и на узком экране. */
.hw-contacts {
    display: grid;
    gap: 10px;
    min-width: 0;
    font-size: 14px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}
.hw-contacts p { margin: 0; }
.hw-contacts a { color: #207EA2; }
.hw-contact-phone { display: inline-block; white-space: nowrap; }
.public-contact-card {
    box-sizing: border-box;
    width: 100%;
    margin-top: 24px;
    padding: 24px;
    border: 1px solid #d6dfe4;
    border-radius: 12px;
    background: #fff;
    color: #1a1a1a;
}
.public-contact-card h1 {
    margin: 0 0 24px;
    font-size: 24px;
    line-height: 1.3;
}
.contacts-page { padding: 24px 16px; }
.contacts-page .public-contact-card { max-width: 640px; margin: 24px auto; }
.contact-back-link { display: inline-block; margin-top: 24px; color: #207EA2; }
html[data-theme="dark"] .public-contact-card { background: #1b2430; color: #f3f6f8; border-color: #455368; }
html[data-theme="dark"] .public-contact-card a { color: #7dcced; }