/**
 * Стили для формы входа YASA Order Platform V3
 * Улучшенный дизайн с высокой специфичностью
 */

/* Переопределение ширины контента WordPress */
:root {
    --wp--style--global--content-size: 1280px !important;
}

.yasa-login-form,
.yasa-register-form,
.yasa-lostpassword-form,
.yasa-resetpass-form {
    max-width: 420px !important;
    margin: 30px auto !important;
    padding: 40px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #e8e8e8 !important;
}

.yasa-login-form h3,
.yasa-register-form h3,
.yasa-lostpassword-form h3,
.yasa-resetpass-form h3 {
    margin-top: 0 !important;
    margin-bottom: 25px !important;
    text-align: center !important;
    color: #2c3e50 !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
}

.yasa-login-form .input,
.yasa-register-form .input,
.yasa-lostpassword-form .input,
.yasa-resetpass-form .input {
    width: 100% !important;
    padding: 14px 16px !important;
    margin-bottom: 18px !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
    background: #fafafa !important;
    color: #333 !important;
    font-family: inherit !important;
}

.yasa-login-form .input:hover,
.yasa-register-form .input:hover,
.yasa-lostpassword-form .input:hover,
.yasa-resetpass-form .input:hover {
    background: #fff !important;
    border-color: #b0b0b0 !important;
}

.yasa-login-form .input:focus,
.yasa-register-form .input:focus,
.yasa-lostpassword-form .input:focus,
.yasa-resetpass-form .input:focus {
    outline: none !important;
    border-color: #0073aa !important;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.15) !important;
    background: #fff !important;
}

/* Лейблы убраны - используем только placeholder */

.yasa-login-form p {
    margin-bottom: 0 !important;
}

.yasa-login-form .submit,
.yasa-register-form .submit,
.yasa-lostpassword-form .submit,
.yasa-resetpass-form .submit {
    margin-top: 20px !important;
}

.yasa-login-form .button-primary,
.yasa-register-form .button-primary,
.yasa-lostpassword-form .button-primary,
.yasa-resetpass-form .button-primary {
    padding: 14px 32px !important;
    background: #2c3e50 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    flex: 0 0 auto !important;
    box-shadow: 0 3px 6px rgba(44, 62, 80, 0.2) !important;
    font-family: inherit !important;
}

.yasa-login-form .rememberme-submit-wrap .button-primary {
    width: auto !important;
}

.yasa-login-form .button-primary:hover,
.yasa-register-form .button-primary:hover,
.yasa-lostpassword-form .button-primary:hover,
.yasa-resetpass-form .button-primary:hover {
    background: #34495e !important;
    box-shadow: 0 5px 12px rgba(44, 62, 80, 0.3) !important;
    transform: translateY(-2px) !important;
}

.yasa-login-form .button-primary:active,
.yasa-register-form .button-primary:active,
.yasa-lostpassword-form .button-primary:active,
.yasa-resetpass-form .button-primary:active {
    transform: translateY(0) !important;
}

.yasa-login-form .rememberme-wrap,
.yasa-register-form .rememberme-wrap,
.yasa-lostpassword-form .rememberme-wrap {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

.yasa-login-form .rememberme-wrap span,
.yasa-register-form .rememberme-wrap span,
.yasa-lostpassword-form .rememberme-wrap span {
    font-size: 14px !important;
    color: #555 !important;
    text-transform: lowercase !important;
    font-weight: 500 !important;
}

.yasa-login-form .rememberme-submit-wrap {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
}

.yasa-login-form input[type="checkbox"],
.yasa-register-form input[type="checkbox"],
.yasa-lostpassword-form input[type="checkbox"] {
    margin-right: 8px !important;
    width: 20px !important;
    height: 20px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    accent-color: #0073aa !important;
}

.yasa-login-form .social-login {
    margin: 30px 0 !important;
    text-align: center !important;
}

.yasa-login-form .social-login-text {
    margin-bottom: 18px !important;
    color: #666 !important;
    font-size: 14px !important;
    text-transform: lowercase !important;
    font-weight: 500 !important;
}

.yasa-login-form .social-buttons {
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
    margin-bottom: 25px !important;
}

/* Стили для кнопок Heateor Social Login в нашей форме */
.yasa-login-form .social-buttons-heateor {
    margin-bottom: 25px !important;
}

.yasa-login-form .social-buttons-heateor .heateor_sl_login_container {
    margin: 0 !important;
    padding: 0 !important;
}

.yasa-login-form .social-buttons-heateor .heateor_sl_login_ul {
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: wrap !important;
}

.yasa-login-form .social-buttons-heateor .heateor_sl_login_ul li {
    margin: 0 !important;
    padding: 0 !important;
}

.yasa-login-form .social-buttons-heateor .heateorSlLogin {
    width: 52px !important;
    height: 52px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) !important;
}

.yasa-login-form .social-buttons-heateor .heateorSlLogin:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
}

.yasa-login-form .social-buttons-heateor .heateor_sl_title {
    display: none !important;
}

.yasa-login-form .social-buttons-heateor .heateor_sl_outer_login_container {
    margin: 0 !important;
    padding: 0 !important;
}

.yasa-login-form .social-button {
    width: 52px !important;
    height: 52px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) !important;
    border: none !important;
}

.yasa-login-form .social-button:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
}

.yasa-login-form .social-button:active {
    transform: translateY(-1px) !important;
}

.yasa-login-form .social-button.google {
    background: #ffffff !important;
    border: 2px solid #e0e0e0 !important;
}

.yasa-login-form .social-button.google:hover {
    border-color: #b0b0b0 !important;
    background: #fafafa !important;
}

.yasa-login-form .social-button.vk {
    background: #4C75A3 !important;
    border: 2px solid #4C75A3 !important;
}

.yasa-login-form .social-button.vk:hover {
    background: #3d5f87 !important;
    border-color: #3d5f87 !important;
}

.yasa-login-form .social-button.yandex {
    background: #FC3F1D !important;
    border: 2px solid #FC3F1D !important;
}

.yasa-login-form .social-button.yandex:hover {
    background: #e0350f !important;
    border-color: #e0350f !important;
}

.yasa-login-form .social-button svg {
    width: 28px !important;
    height: 28px !important;
    display: block !important;
}

.yasa-login-form .yasa-action-links {
    list-style: none !important;
    text-align: center !important;
    margin-top: 25px !important;
    padding-top: 25px !important;
    border-top: 1px solid #eee !important;
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.yasa-login-form .yasa-action-links li {
    margin: 0 !important;
    padding: 0 !important;
}

.yasa-login-form .yasa-action-links a {
    color: #0073aa !important;
    text-decoration: none !important;
    font-size: 14px !important;
    transition: color 0.3s ease !important;
    font-weight: 500 !important;
}

.yasa-login-form .yasa-action-links a:hover {
    color: #005a87 !important;
    text-decoration: underline !important;
}

.yasa-error,
.yasa-success {
    padding: 14px 18px !important;
    margin-bottom: 20px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.yasa-error {
    background: #ffeaea !important;
    color: #d63638 !important;
    border: 2px solid #f5c6cb !important;
}

.yasa-success {
    background: #eafaea !important;
    color: #00a32a !important;
    border: 2px solid #c3e6cb !important;
}

.yasa-login-panel {
    text-align: center !important;
    padding: 10px !important;
    background: #f8f9fa !important;
    border: 1px solid #e8e8e8 !important;
}

.yasa-login-panel p {
    margin: 5px 0 !important;
    color: #2c3e50 !important;
    font-size: 15px !important;
}

.yasa-login-panel a {
    color: #0073aa !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: color 0.3s ease !important;
}

.yasa-login-panel a:hover {
    color: #005a87 !important;
    text-decoration: underline !important;
}

/* Компактный режим для шапки */
.yasa-login-form-compact {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.yasa-login-form-compact p {
    margin: 0 0 6px 0 !important;
}

.yasa-login-form-compact .input {
    width: 100% !important;
    padding: 6px 10px !important;
    margin-bottom: 0 !important;
    font-size: 13px !important;
    border: 1px solid #ddd !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-sizing: border-box !important;
}

.yasa-login-form-compact .input:focus {
    border-color: #0073aa !important;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.1) !important;
    outline: none !important;
}

.yasa-login-form-compact .yasa-rememberme-submit-wrap {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 6px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.yasa-login-form-compact .yasa-rememberme-wrap {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
}

.yasa-login-form-compact .yasa-rememberme-wrap input[type="checkbox"] {
    margin-right: 4px !important;
    width: 14px !important;
    height: 14px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    border-radius: 0 !important;
}

.yasa-login-form-compact .yasa-rememberme-wrap label {
    margin: 0 !important;
    font-size: 12px !important;
    color: #555 !important;
    cursor: pointer !important;
    font-weight: normal !important;
}

.yasa-login-form-compact .yasa-submit-wrap {
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
}

.yasa-login-form-compact .button-primary {
    padding: 6px 16px !important;
    font-size: 12px !important;
    border-radius: 0 !important;
    white-space: nowrap !important;
    background: #2c3e50 !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.yasa-login-form-compact .button-primary:hover {
    background: #34495e !important;
}

.yasa-login-form-compact .yasa-action-links {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.yasa-login-form-compact .yasa-action-links li {
    margin: 0 !important;
    padding: 0 !important;
}

.yasa-login-form-compact .yasa-action-links a {
    color: #0073aa !important;
    text-decoration: none !important;
    font-size: 12px !important;
    transition: color 0.3s ease !important;
}

.yasa-login-form-compact .yasa-action-links a:hover {
    color: #005a87 !important;
    text-decoration: underline !important;
}

/* Социальные кнопки в компактном режиме */
.yasa-login-form-compact .social-login {
    margin: 10px 0 !important;
    text-align: center !important;
}

.yasa-login-form-compact .social-login-text {
    margin-bottom: 8px !important;
    font-size: 12px !important;
    color: #666 !important;
    text-transform: lowercase !important;
    font-weight: 500 !important;
}

.yasa-login-form-compact .social-buttons {
    margin-bottom: 10px !important;
    gap: 8px !important;
    display: flex !important;
    justify-content: center !important;
}

.yasa-login-form-compact .social-button {
    width: 32px !important;
    height: 32px !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.yasa-login-form-compact .social-button:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

.yasa-login-form-compact .social-button svg {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
}

/* Стили для формы в узкой колонке (col-sm-2, col-12) */
.col-sm-2 .yasa-login-form,
.col-12 .yasa-login-form,
.col-sm-2 .yasa-register-form,
.col-12 .yasa-register-form,
.col-sm-2 .yasa-lostpassword-form,
.col-12 .yasa-lostpassword-form,
.col-sm-2 .yasa-resetpass-form,
.col-12 .yasa-resetpass-form,
#right .yasa-login-form,
.registr .yasa-login-form {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 20px 15px !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #e8e8e8 !important;
}

.col-sm-2 .yasa-login-form h3,
.col-12 .yasa-login-form h3,
#right .yasa-login-form h3,
.registr .yasa-login-form h3 {
    font-size: 20px !important;
    margin-bottom: 18px !important;
}

.col-sm-2 .yasa-login-form .input,
.col-12 .yasa-login-form .input,
#right .yasa-login-form .input,
.registr .yasa-login-form .input {
    padding: 10px 12px !important;
    margin-bottom: 12px !important;
    font-size: 14px !important;
}

.col-sm-2 .yasa-login-form .social-login,
.col-12 .yasa-login-form .social-login,
#right .yasa-login-form .social-login,
.registr .yasa-login-form .social-login {
    margin: 20px 0 !important;
}

.col-sm-2 .yasa-login-form .social-buttons,
.col-12 .yasa-login-form .social-buttons,
#right .yasa-login-form .social-buttons,
.registr .yasa-login-form .social-buttons {
    gap: 10px !important;
    margin-bottom: 18px !important;
}

.col-sm-2 .yasa-login-form .social-buttons-heateor .heateor_sl_login_ul,
.col-12 .yasa-login-form .social-buttons-heateor .heateor_sl_login_ul,
#right .yasa-login-form .social-buttons-heateor .heateor_sl_login_ul,
.registr .yasa-login-form .social-buttons-heateor .heateor_sl_login_ul {
    gap: 10px !important;
}

.col-sm-2 .yasa-login-form .social-buttons-heateor .heateorSlLogin,
.col-12 .yasa-login-form .social-buttons-heateor .heateorSlLogin,
#right .yasa-login-form .social-buttons-heateor .heateorSlLogin,
.registr .yasa-login-form .social-buttons-heateor .heateorSlLogin {
    width: 44px !important;
    height: 44px !important;
}

.col-sm-2 .yasa-login-form .social-button,
.col-12 .yasa-login-form .social-button,
#right .yasa-login-form .social-button,
.registr .yasa-login-form .social-button {
    width: 44px !important;
    height: 44px !important;
}

.col-sm-2 .yasa-login-form .social-button svg,
.col-12 .yasa-login-form .social-button svg,
#right .yasa-login-form .social-button svg,
.registr .yasa-login-form .social-button svg {
    width: 24px !important;
    height: 24px !important;
}

.col-sm-2 .yasa-login-form .rememberme-submit-wrap,
.col-12 .yasa-login-form .rememberme-submit-wrap,
#right .yasa-login-form .rememberme-submit-wrap,
.registr .yasa-login-form .rememberme-submit-wrap {
    margin-bottom: 15px !important;
    gap: 10px !important;
}

.col-sm-2 .yasa-login-form .button-primary,
.col-12 .yasa-login-form .button-primary,
#right .yasa-login-form .button-primary,
.registr .yasa-login-form .button-primary {
    padding: 10px 20px !important;
    font-size: 13px !important;
}

.col-sm-2 .yasa-login-form .yasa-action-links,
.col-12 .yasa-login-form .yasa-action-links,
#right .yasa-login-form .yasa-action-links,
.registr .yasa-login-form .yasa-action-links {
    margin-top: 18px !important;
    padding-top: 18px !important;
    gap: 8px !important;
}

.col-sm-2 .yasa-login-form .yasa-action-links a,
.col-12 .yasa-login-form .yasa-action-links a,
#right .yasa-login-form .yasa-action-links a,
.registr .yasa-login-form .yasa-action-links a {
    font-size: 13px !important;
}

/* Скрываем дублирующиеся социальные кнопки от других плагинов */
.col-sm-2 .heateor_sl_login_container,
.col-12 .heateor_sl_login_container,
#right .heateor_sl_login_container,
.registr .heateor_sl_login_container {
    display: none !important;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 480px) {
    .yasa-login-form,
    .yasa-register-form,
    .yasa-lostpassword-form,
    .yasa-resetpass-form {
        max-width: 100% !important;
        margin: 20px 10px !important;
        padding: 25px 20px !important;
    }
    
    .yasa-login-form .rememberme-submit-wrap {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .yasa-login-form .rememberme-submit-wrap .button-primary {
        width: 100% !important;
        margin-top: 15px !important;
    }
    
    .yasa-login-form-compact .yasa-rememberme-submit-wrap {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .yasa-login-form-compact .yasa-submit-wrap {
        width: 100% !important;
    }
    
    .yasa-login-form-compact .button-primary {
        width: 100% !important;
    }
}