/* =========================================
   RESPONSIVE - SHARED AUTH PAGES
========================================= */

/* =========================================
   1. SMALL DESKTOP / TABLET LANDSCAPE
   992px - 1200px
========================================= */
@media (min-width: 992px) and (max-width: 1200px) {
    .fls_login_cusom_content_wrap {
        padding: 140px 28px 32px !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }

    .fls_login_cusom_content {
        padding: 18px !important;
    }

    .fls_login_cusom_content_inner h1,
    .fls_form_type_register .fls_login_cusom_content_inner h1,
    .fls_form_type_register .fls_login_cusom_content h1 {
        font-size: 34px !important;
        line-height: 1.14 !important;
    }

    .fls_login_cusom_content_inner p,
    .fls_form_type_register .fls_login_cusom_content_inner p,
    .fls_form_type_register .fls_login_cusom_content p {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) .fls_login_form_wrap {
        padding: 108px 24px 24px !important;
    }

    .procomp-login-infobar-inner {
        padding: 8px 18px;
        gap: 14px;
    }

    .procomp-login-topbar-inner {
        max-width: 1180px;
        grid-template-columns: 190px 1fr 180px;
        gap: 16px;
        padding: 10px 18px;
    }

    .procomp-login-brand {
        justify-self: center;
        padding-right: 0;
    }

    .procomp-login-actions {
        padding-left: 0;
    }

    .procomp-login-nav {
        gap: 14px;
    }

    .procomp-login-nav a {
        font-size: 14px !important;
        letter-spacing: 0.8px !important;
    }

    .procomp-login-quote-btn {
        font-size: 13px !important;
        padding: 0 18px;
    }
}

/* =========================================
   2. TABLET / MEDIUM DEVICES
   768px - 991px
========================================= */
@media (min-width: 768px) and (max-width: 991px) {
    .fls_login_cusom_content_wrap {
        min-height: 420px !important;
        padding: 32px 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .fls_login_cusom_content {
        width: 100% !important;
        padding: 24px !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .fls_login_cusom_content_inner {
        width: 100% !important;
        max-width: 520px !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    .fls_banner_header_logo img {
        max-width: 220px !important;
        max-height: none !important;
        margin: 0 auto 18px !important;
    }

    .fls_login_cusom_content_inner h1,
    .fls_form_type_register .fls_login_cusom_content_inner h1,
    .fls_form_type_register .fls_login_cusom_content h1 {
        font-size: 30px !important;
        line-height: 1.15 !important;
        margin: 0 0 14px 0 !important;
        text-align: center !important;
    }

    .fls_login_cusom_content_inner p,
    .fls_form_type_register .fls_login_cusom_content_inner p,
    .fls_form_type_register .fls_login_cusom_content p {
        font-size: 15px !important;
        line-height: 1.7 !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) .fls_login_form_wrap {
        padding: 120px 24px 24px !important;
        min-height: auto !important;
        align-items: flex-start !important;
    }

    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) .fls_form_wrap {
        width: 100% !important;
        max-width: 100% !important;
    }

    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) #login form,
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) .fls_form_type_login #login form,
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) .fls_form_type_register #registerform,
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) .fls_form_type_register form,
    body.login:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) form[action*="register"] {
        padding: 20px !important;
        margin-top: 12px !important;
    }

    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) .fls_login_header h1,
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) .fls_register_header h1,
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) .fls_form_type_register h1,
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) .fls_form_wrap h1 {
        font-size: 30px !important;
    }

    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) #login input[type="text"],
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) #login input[type="number"],
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) #login input[type="email"],
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) #login input[type="password"],
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) .fls_form_type_register input[type="text"],
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) .fls_form_type_register input[type="email"],
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) .fls_form_type_register input[type="password"],
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) .fls_form_type_register input[type="number"],
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) .fls_form_type_register select,
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) .fls_form_type_register textarea,
    body.login:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) form[action*="register"] input[type="text"],
    body.login:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) form[action*="register"] input[type="email"],
    body.login:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) form[action*="register"] input[type="password"] {
        height: 48px !important;
        font-size: 14px !important;
    }

    .procomp-password-inline-row {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .procomp-confirm-label {
        flex: 0 0 auto !important;
        margin: 0 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        text-align: left !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    .procomp-password-strength-wrap {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        transform: translateY(0) !important;
        margin: 0 !important;
    }

    .procomp-password-strength-bar {
        flex: 1 1 auto !important;
        min-width: 40px !important;
        max-width: 110px !important;
        height: 4px !important;
        margin: 0 !important;
    }

    .procomp-password-strength-text {
        font-size: 11px !important;
        white-space: nowrap !important;
        margin: 0 !important;
    }
}

/* =========================================
   3. MOBILE / PHONE
   up to 767px
========================================= */
@media (max-width: 767px) {
    .fls_login_cusom_content_wrap {
        min-height: 340px !important;
        padding: 72px 16px 28px !important;
        align-items: flex-start !important;
        justify-content: center !important;
    }

    .fls_login_cusom_content {
        padding: 16px 10px !important;
        text-align: center !important;
    }

    .fls_login_cusom_content_inner,
    .fls_form_type_register .fls_login_cusom_content_inner {
        text-align: center !important;
    }

    .fls_banner_header_logo img {
        max-width: 220px !important;
        max-height: none !important;
        margin: 0 auto 18px !important;
    }

    .fls_login_cusom_content_inner h1,
    .fls_form_type_register .fls_login_cusom_content_inner h1,
    .fls_form_type_register .fls_login_cusom_content h1 {
        font-size: 28px !important;
        line-height: 1.15 !important;
        text-align: center !important;
    }

    .fls_login_cusom_content_inner p,
    .fls_form_type_register .fls_login_cusom_content_inner p,
    .fls_form_type_register .fls_login_cusom_content p {
        text-align: center !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) .fls_login_form_wrap {
        padding: 26px 18px 20px !important;
        min-height: auto !important;
        align-items: flex-start !important;
    }

    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) .fls_form_wrap {
        max-width: 100% !important;
    }

    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) #login form,
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) .fls_form_type_login #login form,
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) .fls_form_type_register #registerform,
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) .fls_form_type_register form,
    body.login:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) form[action*="register"] {
        padding: 20px !important;
        margin-top: 12px !important;
    }

    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) #login input[type="text"],
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) #login input[type="number"],
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) #login input[type="email"],
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) #login input[type="password"],
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) .fls_form_type_register input[type="text"],
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) .fls_form_type_register input[type="email"],
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) .fls_form_type_register input[type="password"],
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) .fls_form_type_register input[type="number"],
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) .fls_form_type_register select,
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) .fls_form_type_register textarea,
    body.login:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) form[action*="register"] input[type="text"],
    body.login:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) form[action*="register"] input[type="email"],
    body.login:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) form[action*="register"] input[type="password"] {
        height: 48px !important;
        font-size: 14px !important;
    }

    body.login .procomp-register-toggle,
    #login .wp-pwd button,
    #login .wp-pwd .button,
    #login .password-input-wrapper button,
    #login .password-input-wrapper .button,
    #login .fluent-auth-password-wrap button,
    #login .fluent-auth-password-wrap .button,
    #login .fls_password_wrap button,
    #login .fls_password_wrap .button {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
    }

    .procomp-login-infobar {
        display: none;
    }

    .procomp-login-topbar-inner {
        max-width: 100%;
        grid-template-columns: 1fr auto;
        gap: 12px;
        padding: 10px 16px;
        min-height: 64px;
    }

    .procomp-login-mainbar::before {
        border-bottom-left-radius: 18px;
        border-bottom-right-radius: 18px;
    }

    .procomp-login-nav {
        display: none;
    }

    .procomp-login-brand {
        justify-self: start;
        padding-right: 0;
    }

    .procomp-login-brand img {
        height: 40px !important;
        max-width: 170px;
    }

    .procomp-login-actions {
        justify-content: flex-end;
        padding-left: 0;
    }

    .procomp-login-quote-btn {
        min-height: 38px;
        padding: 0 16px;
        font-size: 13px !important;
    }

    .procomp-login-footer {
        padding: 10px 16px 16px;
    }

    .procomp-login-footer-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .procomp-auth-toast {
        right: 16px;
        left: 16px;
        bottom: 16px;
        min-width: auto;
        max-width: none;
    }

    .fauth-2fa-status {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .fauth-2fa-status-subtext {
        max-width: 100%;
    }

    .fauth-2fa-timer-wrap {
        width: 102px !important;
        height: 102px !important;
        flex: 0 0 102px !important;
    }

    .fauth-2fa-timer-badge {
        width: 78px !important;
        height: 78px !important;
        font-size: 19px !important;
    }

    .fauth-2fa-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .fauth-resend-btn {
        width: 100%;
    }
}

/* =========================================
   4. SMALL MOBILE ONLY
   up to 575px
========================================= */
@media (max-width: 575px) {
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) #login input[type="text"],
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) #login input[type="number"],
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) #login input[type="email"],
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) #login input[type="password"],
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) .fls_form_type_register input[type="text"],
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) .fls_form_type_register input[type="email"],
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) .fls_form_type_register input[type="password"],
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) .fls_form_type_register input[type="number"],
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) .fls_form_type_register select,
    body:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) .fls_form_type_register textarea,
    body.login:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) form[action*="register"] input[type="text"],
    body.login:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) form[action*="register"] input[type="email"],
    body.login:not(.procomp-checkemail-confirm-page):not(.procomp-reset-success-page) form[action*="register"] input[type="password"] {
        height: 48px !important;
        font-size: 14px !important;
    }

    .procomp-password-inline-row {
        gap: 6px !important;
    }

    .procomp-password-strength-wrap {
        flex: 0 0 auto !important;
        width: auto !important;
        transform: translateY(-4px) !important;
    }

    .procomp-password-strength-bar {
        width: 70px !important;
        min-width: 70px !important;
        max-width: 70px !important;
        flex: 0 0 70px !important;
    }

    .procomp-password-strength-text {
        font-size: 10px !important;
    }
}

/* ========================================
   LOST PASSWORD RESPONSIVE
======================================== */

/* tablet and down */
@media (max-width: 1024px) {
    body.login.procomp-lost-password-page .fls_login_form_wrap {
        padding: 130px 28px 70px !important;
    }

    body.login.procomp-lost-password-page .procomp-lost-password-form {
        max-width: 560px !important;
        padding: 30px 22px 22px !important;
    }

    body.login.procomp-lost-password-page .procomp-lost-card-title {
        font-size: 30px !important;
    }

    body.login.procomp-lost-password-page .procomp-lost-card-subtitle {
        max-width: 420px !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    body.login.procomp-lost-password-page .procomp-lost-card-icon {
        width: 74px !important;
        height: 74px !important;
        margin-bottom: 18px !important;
    }

    body.login.procomp-lost-password-page .procomp-lost-card-icon i {
        font-size: 26px !important;
    }

    body.login.procomp-lost-password-page .procomp-lost-fieldbox {
        padding: 16px !important;
        border-radius: 16px !important;
    }

    body.login.procomp-lost-password-page .procomp-lost-input-wrap input[type="text"],
    body.login.procomp-lost-password-page .procomp-lost-input-wrap input[type="email"],
    body.login.procomp-lost-password-page .procomp-lost-input-wrap input[name="user_login"] {
        height: 58px !important;
        min-height: 58px !important;
        font-size: 15px !important;
        padding: 0 18px 0 62px !important;
    }

    body.login.procomp-lost-password-page .procomp-lost-card input[type="submit"],
    body.login.procomp-lost-password-page .procomp-lost-card button[type="submit"] {
        min-height: 52px !important;
        font-size: 15px !important;
    }
}

/* mobile */
@media (max-width: 767px) {
    body.login.procomp-lost-password-page .fls_login_page_wrap {
        flex-direction: column !important;
    }

    body.login.procomp-lost-password-page .fls_login_form_wrap {
        padding: 120px 16px 50px !important;
        width: 100% !important;
    }

    body.login.procomp-lost-password-page .fls_login_form_inner,
    body.login.procomp-lost-password-page #login {
        max-width: 100% !important;
        width: 100% !important;
    }

    body.login.procomp-lost-password-page .procomp-lost-password-form {
        max-width: 100% !important;
        width: 100% !important;
        padding: 24px 16px 18px !important;
        border-radius: 18px !important;
    }

    body.login.procomp-lost-password-page .procomp-lost-card-title {
        font-size: 26px !important;
        line-height: 1.15 !important;
        margin-bottom: 10px !important;
    }

    body.login.procomp-lost-password-page .procomp-lost-card-subtitle {
        max-width: 100% !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
        margin-bottom: 18px !important;
    }

    body.login.procomp-lost-password-page .procomp-lost-card-icon {
        width: 68px !important;
        height: 68px !important;
        margin-bottom: 16px !important;
    }

    body.login.procomp-lost-password-page .procomp-lost-card-icon i {
        font-size: 24px !important;
    }

    body.login.procomp-lost-password-page .procomp-lost-fieldbox {
        padding: 14px !important;
        border-radius: 14px !important;
        margin-bottom: 16px !important;
    }

    body.login.procomp-lost-password-page .procomp-lost-field-label {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }

    body.login.procomp-lost-password-page .procomp-lost-input-wrap {
        margin-bottom: 10px !important;
    }

    body.login.procomp-lost-password-page .procomp-lost-input-wrap input[type="text"],
    body.login.procomp-lost-password-page .procomp-lost-input-wrap input[type="email"],
    body.login.procomp-lost-password-page .procomp-lost-input-wrap input[name="user_login"] {
        height: 54px !important;
        min-height: 54px !important;
        font-size: 15px !important;
        border-radius: 14px !important;
        padding: 0 16px 0 56px !important;
    }

    body.login.procomp-lost-password-page .procomp-lost-help {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    body.login.procomp-lost-password-page .procomp-lost-card input[type="submit"],
    body.login.procomp-lost-password-page .procomp-lost-card button[type="submit"] {
        min-height: 50px !important;
        font-size: 15px !important;
        border-radius: 12px !important;
        margin-bottom: 14px !important;
    }

    body.login.procomp-lost-password-page .procomp-lost-security {
        padding-top: 12px !important;
    }

    body.login.procomp-lost-password-page .procomp-lost-security-content {
        font-size: 11.5px !important;
        line-height: 1.6 !important;
    }

    body.login.procomp-lost-password-page #nav,
    body.login.procomp-lost-password-page #backtoblog {
        margin-top: 18px !important;
    }

    body.login.procomp-lost-password-page #nav a,
    body.login.procomp-lost-password-page #backtoblog a {
        font-size: 14px !important;
    }
}

/* very small phones */
@media (max-width: 480px) {
    body.login.procomp-lost-password-page .fls_login_form_wrap {
        padding: 110px 12px 40px !important;
    }

    body.login.procomp-lost-password-page .procomp-lost-password-form {
        padding: 20px 14px 16px !important;
    }

    body.login.procomp-lost-password-page .procomp-lost-card-title {
        font-size: 23px !important;
    }

    body.login.procomp-lost-password-page .procomp-lost-card-subtitle {
        font-size: 13px !important;
    }

    body.login.procomp-lost-password-page .procomp-lost-input-wrap input[type="text"],
    body.login.procomp-lost-password-page .procomp-lost-input-wrap input[type="email"],
    body.login.procomp-lost-password-page .procomp-lost-input-wrap input[name="user_login"] {
        font-size: 14px !important;
        padding: 0 14px 0 52px !important;
    }

    body.login.procomp-lost-password-page .procomp-lost-card input[type="submit"],
    body.login.procomp-lost-password-page .procomp-lost-card button[type="submit"] {
        font-size: 14px !important;
    }
}