/* =====================================================
   BULLS ON FIRE - ULTIMATE MEMBER
   PREMIUM LIGHT DESIGN
   FONT: MONTSERRAT
   ===================================================== */


/* =====================================================
   01. FONT
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

.um,
.um *,
.um input,
.um button {
    font-family: 'Montserrat', sans-serif !important;
    box-sizing: border-box !important;
}


/* =====================================================
   02. FORM WIDTH
   ===================================================== */

.um.um-login,
.um.um-register {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

.um.um-login .um-form,
.um.um-register .um-form {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}


/* =====================================================
   03. MAIN FORM CONTAINER
   ===================================================== */

.um.um-login,
.um.um-register {
    background: #ffffff !important;
    border: 1px solid #eeeeee !important;
    border-radius: 16px !important;
    padding: 32px !important;

    box-shadow: 0 8px 30px rgba(0,0,0,0.06) !important;
}


/* =====================================================
   04. FIELD LABELS
   ===================================================== */

.um.um-login .um-field-label label,
.um.um-register .um-field-label label {
    color: #252525 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}


/* =====================================================
   05. INPUT FIELDS
   ===================================================== */

.um.um-login input[type="text"],
.um.um-login input[type="email"],
.um.um-login input[type="password"],
.um.um-register input[type="text"],
.um.um-register input[type="email"],
.um.um-register input[type="password"] {

    width: 100% !important;
    max-width: 100% !important;
    min-height: 64px !important;

    background: #ffffff !important;
    color: #333333 !important;

    border: 2px solid #e2e4e8 !important;
    border-radius: 15px !important;

    padding: 14px 20px !important;

    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;

    transition: all 0.25s ease !important;
}

/* PLACEHOLDER */

.um.um-login input::placeholder,
.um.um-register input::placeholder {
    color: #858b93 !important;
    opacity: 1 !important;
}

/* INPUT FOCUS */

.um.um-login input:focus,
.um.um-register input:focus {
    border-color: #e52b2b !important;
    box-shadow: 0 0 0 3px rgba(229,43,43,0.09) !important;
    outline: none !important;
}


/* =====================================================
   06. FIELD SPACING
   ===================================================== */

.um.um-login .um-field,
.um.um-register .um-field {
    margin-bottom: 18px !important;
}


/* =====================================================
   07. PASSWORD EYE ICON
   ===================================================== */

/* Password input wrapper */

.um .um-field-password .um-field-area {
    position: relative !important;
}

/* Space for eye icon */

.um .um-field-password input[type="password"],
.um .um-field-password input[type="text"] {
    padding-right: 58px !important;
}

/* Password toggle icon */

.um .um-field-password .um-toggle-password {
    position: absolute !important;

    top: 50% !important;
    right: 15px !important;

    transform: translateY(-50%) !important;

    width: 30px !important;
    height: 30px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1 !important;
    z-index: 10 !important;

    color: #555555 !important;
    cursor: pointer !important;
}

.um .um-field-password .um-toggle-password i {
    font-size: 19px !important;
    line-height: 1 !important;
}


/* =====================================================
   08. REMEMBER ME CHECKBOX
   ===================================================== */

.um.um-login .um-field-checkbox-option,
.um.um-register .um-field-checkbox-option {
    color: #333333 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.um.um-login input[type="checkbox"],
.um.um-register input[type="checkbox"] {
    accent-color: #e60024 !important;
}


/* =====================================================
   09. LINKS
   ===================================================== */

.um.um-login a,
.um.um-register a {
    color: #ed102b !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.um.um-login a:hover,
.um.um-register a:hover {
    color: #a9001b !important;
}


/* =====================================================
   10. LOGIN & REGISTER BUTTONS
   ===================================================== */

.um.um-login .um-button,
.um.um-register .um-button {

    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;

    min-height: 76px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    float: none !important;

    margin: 15px 0 0 !important;
    padding: 16px 55px 16px 24px !important;

    background-color: #e60024 !important;

    background-image:
        linear-gradient(
            180deg,
            #ff102b 0%,
            #e60020 55%,
            #a90019 100%
        ),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") !important;

    background-repeat: no-repeat, no-repeat !important;
    background-position: center, right 26px center !important;
    background-size: cover, 25px 25px !important;

    color: #ffffff !important;

    border: 1px solid #ff5365 !important;
    border-radius: 15px !important;

    font-family: 'Montserrat', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;

    text-align: center !important;

    box-shadow: 0 4px 12px rgba(220,0,30,0.16) !important;

    cursor: pointer !important;
    transition: all 0.25s ease !important;
}


/* BUTTON HOVER */

.um.um-login .um-button:hover,
.um.um-register .um-button:hover {

    background-image:
        linear-gradient(
            180deg,
            #ed001f,
            #b9001c
        ),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") !important;

    background-repeat: no-repeat, no-repeat !important;
    background-position: center, right 26px center !important;
    background-size: cover, 25px 25px !important;

    color: #ffffff !important;
    transform: translateY(-1px);

    box-shadow: 0 6px 18px rgba(220,0,30,0.22) !important;
}


/* =====================================================
   11. BUTTON ALIGNMENT FIX
   ===================================================== */


/* ==========================================
   LOGIN BUTTON - FINAL ALIGNMENT FIX
   ========================================== */

/* Keep login form columns controlled */
.um.um-login .um-col-alt {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
}

/* Remember me and other login options */
.um.um-login .um-col-alt .um-left {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

/* Submit button column */
.um.um-login .um-col-alt .um-right {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 !important;
}

/* Actual login submit button */
.um.um-login .um-col-alt .um-button,
.um.um-login .um-col-alt input[type="submit"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    display: flex !important;
    float: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}


/* =====================================
   BULLS ON FIRE - PASSWORD RESET DESIGN
   ===================================== */

/* MAIN PASSWORD RESET FORM */
.um.um-password {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 5px !important;
    background: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
}

/* FORM FIELDS */
.um.um-password .um-form input[type="text"],
.um.um-password .um-form input[type="email"],
.um.um-password .um-form input[type="password"] {
    width: 100% !important;
    height: 58px !important;
    padding: 0 18px !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #222222 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

/* INPUT FOCUS */
.um.um-password .um-form input:focus {
    border-color: #e52b2b !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(229, 43, 43, 0.08) !important;
}

/* FIELD SPACING */
.um.um-password .um-field {
    margin-bottom: 18px !important;
}

/* FIELD LABELS */
.um.um-password .um-field-label label {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #333333 !important;
}

/* RESET PASSWORD BUTTON */
.um.um-password .um-button,
.um.um-password input[type="submit"] {
    width: 100% !important;
    min-height: 55px !important;
    border: none !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #f04444, #d71920) !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    cursor: pointer !important;
    box-shadow: 0 5px 12px rgba(215, 25, 32, 0.15) !important;
    transition: all 0.25s ease !important;
}

/* BUTTON HOVER */
.um.um-password .um-button:hover,
.um.um-password input[type="submit"]:hover {
    background: linear-gradient(135deg, #d71920, #b9141b) !important;
    transform: translateY(-1px);
}

/* REMOVE DEFAULT FLOATS */
.um.um-password .um-col-alt {
    width: 100% !important;
    display: block !important;
}

/* FORM TEXT */
.um.um-password,
.um.um-password p {
    font-family: 'Montserrat', sans-serif !important;
    color: #555555 !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
}

/* MOBILE */
@media (max-width: 600px) {
    .um.um-password {
        padding: 3px !important;
    }

    .um.um-password .um-form input[type="text"],
    .um.um-password .um-form input[type="email"] {
        height: 54px !important;
    }

    .um.um-password .um-button,
    .um.um-password input[type="submit"] {
        min-height: 52px !important;
    }
}


/* =====================================================
   12. REGISTRATION - TWO COLUMN NAME FIELDS
   ===================================================== */

/* FIRST NAME */

.um.um-register .um-field-first_name {
    width: 50% !important;
    float: left !important;
    clear: none !important;

    padding-right: 10px !important;
    box-sizing: border-box !important;
}

/* LAST NAME */

.um.um-register .um-field-last_name {
    width: 50% !important;
    float: left !important;
    clear: none !important;

    padding-left: 10px !important;
    box-sizing: border-box !important;
}

/* Subsequent fields start on a new row */

.um.um-register .um-field-first_name ~ .um-field:not(.um-field-last_name) {
    clear: both !important;
}


/* =====================================================
   13. DESCRIPTIONS & ERROR MESSAGES
   ===================================================== */

.um.um-login .um-field-description,
.um.um-register .um-field-description {
    color: #777777 !important;
    font-size: 12px !important;
}

.um.um-login .um-field-error,
.um.um-register .um-field-error {
    color: #e52b2b !important;
    font-size: 12px !important;
}

.um.um-login .um-notice,
.um.um-register .um-notice {
    border-radius: 9px !important;
}


/* =====================================================
   14. DIVIDERS
   ===================================================== */

.um.um-login hr,
.um.um-register hr {
    border-color: #eeeeee !important;
}


/* =====================================================
   15. MOBILE RESPONSIVENESS
   ===================================================== */

@media (max-width: 600px) {

    /* FORM CONTAINER */

    .um.um-login,
    .um.um-register {
        padding: 20px !important;
        border-radius: 12px !important;
    }

    /* INPUTS */

    .um.um-login input[type="text"],
    .um.um-login input[type="email"],
    .um.um-login input[type="password"],
    .um.um-register input[type="text"],
    .um.um-register input[type="email"],
    .um.um-register input[type="password"] {

        min-height: 58px !important;
        font-size: 14px !important;
        border-radius: 11px !important;
    }

    /* BUTTONS */

    .um.um-login .um-button,
    .um.um-register .um-button {

        min-height: 62px !important;
        font-size: 18px !important;
        border-radius: 11px !important;

        background-position:
            center,
            right 18px center !important;
    }

    /* STACK NAME FIELDS */

    .um.um-register .um-field-first_name,
    .um.um-register .um-field-last_name {

        width: 100% !important;

        float: none !important;
        clear: both !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }

}