/* Mobile Login Modal - Адаптивная версия для мобильных устройств */

@media (max-width: 768px) {
    /* Error message - серый цвет */
    .login-modal__error {
        color: #8C8F96 !important;
    }

    .login-modal__success {
        color: #0fc998 !important;
        text-align: center;
        margin-top: 8px;
    }
    
    /* Модальное окно на весь экран */
    .login-modal-overlay {
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    
    .login-modal {
        width: 393px;
        max-width: calc(100% - 20px);
        height: auto;
        min-height: 611px;
        border-radius: 30px;
        margin: 0;
        background: #F6F6F7;
        position: relative;
        left: auto;
        right: auto;
        transform: none;
    }
    
    /* Скрываем desktop логотип */
    .login-modal__logo {
        display: none !important;
    }
    
    /* Mobile Title - x=43, y=29 */
    .login-modal__mobile-title {
        display: block !important;
        position: absolute;
        top: 29px;
        left: 43px;
        width: 237px;
        height: 54px;
    }
    
    .login-modal__mobile-title span {
        color: #0FC998;
        font-family: 'Inter', sans-serif;
        font-size: 24px;
        line-height: 24px;
        font-weight: 700;
    }
    
    /* Скрываем desktop кнопку закрытия */
    .login-modal__close {
        display: none !important;
    }
    
    /* Mobile Close button - справа вверху */
    .login-modal__close-mobile {
        display: block !important;
        position: absolute;
        top: 32px;
        right: 20px;
        width: 30px;
        height: 30px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 5px;
        z-index: 100;
        opacity: 1;
    }
    
    .login-modal__close-mobile:active {
        opacity: 0.7;
    }
    
    .login-modal__close-mobile img {
        width: 100%;
        height: 100%;
        display: block;
        pointer-events: none;
    }
    
    /* Input Login - отцентрирован */
    .login-modal__input[type="email"],
    .login-modal__input[name="user_login"] {
        top: 55px;
        left: 50%;
        transform: translateX(-50%);
        width: 346px;
        max-width: calc(100% - 30px);
        height: 50px;
        background: #FFFFFF;
        border-radius: 30px;
        padding: 0 20px;
        font-size: 12px;
        color: #949494;
    }
    
    .login-modal__input[type="email"]::placeholder,
    .login-modal__input[name="user_login"]::placeholder {
        color: #949494 !important;
        font-weight: 400 !important;
    }
    
    /* Input Password - отцентрирован */
    .login-modal__input[type="password"] {
        top: 67px;
        left: 50%;
        transform: translateX(-50%);
        width: 346px;
        max-width: calc(100% - 30px);
        height: 50px;
        background: #FFFFFF;
        border-radius: 30px;
        padding: 0 20px;
        font-size: 12px;
        color: #949494;
    }
    
    .login-modal__input[type="password"]::placeholder {
        color: #949494 !important;
        font-weight: 400 !important;
    }
    
    /* Submit button - отцентрирован */
    .login-modal__submit {
        top: 100px;
        left: 50%;
        transform: translateX(-50%);
        width: 346px;
        max-width: calc(100% - 30px);
        height: 50px;
        background: #0FC998;
        border-radius: 30px;
        font-size: 14px;
        font-weight: 700;
        color: #FFFFFF;
    }
    
    .login-modal__submit:hover {
        background: #0db085;
    }
    
    /* Forgot Password - отцентрирован */
    .login-modal__links {
        position: absolute;
        top: 188px;
        left: 50%;
        transform: translateX(-50%);
        width: 346px;
        max-width: calc(100% - 30px);
        height: 15px;
        display: flex;
        justify-content: center;
    }
    
    .login-modal__link {
        font-size: 12px;
        font-weight: 400;
        color: #000000 !important;
    }
    
    /* Скрываем remember me на мобильных */
    .login-modal__remember {
        display: none !important;
    }
    
    /* Error message */
    .login-modal__error {
        top: 310px;
        left: 50%;
        transform: translateX(-50%);
        width: 346px;
        max-width: calc(100% - 30px);
        text-align: center;
    }
    
    /* Декоративная иконка - отцентрирована */
    .login-modal__mobile-icon {
        display: block !important;
        position: absolute;
        top: 346px;
        left: 50%;
        transform: translateX(-50%);
        width: 84px;
        height: 96px;
    }
    
    .login-modal__mobile-icon img {
        width: 100%;
        height: 100%;
    }
    
    /* Текст приглашения - отцентрирован */
    .login-modal__mobile-text {
        display: block !important;
        position: absolute;
        top: 465px;
        left: 0;
        width: 100%;
        padding: 0 15px;
        text-align: center;
        color: #000000;
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        line-height: 19px;
        font-weight: 400;
    }
    
    /* Кнопка регистрации - отцентрирована */
    .login-modal-mobile-register {
        display: flex !important;
        position: absolute;
        bottom: 22px;
        left: 50%;
        transform: translateX(-50%);
        width: 346px;
        max-width: calc(100% - 30px);
        height: 50px;
        background: transparent;
        border: 1px solid #0FC998;
        border-radius: 30px;
        color: #0FC998;
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: all 0.2s;
    }
    
    .login-modal-mobile-register:hover {
        background: #0FC998;
        color: #FFFFFF;
    }
}

/* Desktop: скрываем мобильные элементы */
@media (min-width: 769px) {
    .login-modal__mobile-title {
        display: none !important;
    }
    
    .login-modal__close-mobile {
        display: none !important;
    }
    
    .login-modal-mobile-register {
        display: none !important;
    }
}