/* ============================================
   Ultimate Member — Skin Flip
   Login / Register / Password
   (la page Account est gérée par le shortcode [flip_account],
   pas par UM — voir shortcodes-account.css)
   Sélecteurs alourdis (body + #page-container) + !important pour
   passer la cascade UM (qui pousse souvent des styles inline).
   ============================================ */

/* --------------------------------------------
   1. Styles communs : inputs, labels, boutons,
      lien forgot password.
   -------------------------------------------- */
body #page-container .um.um-login,
body .um.um-login,
body #page-container .um.um-register,
body .um.um-register,
body #page-container .um.um-password,
body .um.um-password {
    color: #161618 !important;

    .um-form {
        padding: 0 !important;
    }

    .um-row,
    .um-col {
        padding: 0 !important;
    }

    .um-field {
        margin: 0 0 18px !important;
        padding: 0 !important;
    }

    .um-field-label {
        margin: 0 0 6px !important;
        padding: 0 !important;

        label {
            color: #161618 !important;
            font-size: 15px !important;
            font-weight: 700 !important;
            margin: 0 !important;
            padding: 0 !important;
        }
    }

    .um-form-field {
        width: 100% !important;
        padding: 11px 14px !important;
        border: 1px solid #D1D5DB !important;
        border-radius: 8px !important;
        background: #fff !important;
        color: #161618 !important;
        font-size: 15px !important;
        font-weight: 400 !important;
        line-height: 1.4 !important;
        box-shadow: none !important;
        transition: border-color .2s ease, box-shadow .2s ease !important;

        &::placeholder {
            color: #9CA3AF !important;
        }

        &:focus {
            outline: none !important;
            border-color: #0076FF !important;
            box-shadow: 0 0 0 3px rgb(0 118 255 / 0.15) !important;
        }
    }

    /* Bouton principal : look + hover du .wave_btn Divi. */
    .um-col-alt input[type=submit],
    input[type=submit].um-button,
    .um-button {
        display: block !important;
        width: 100% !important;
        background-color: #0076FF !important;
        color: #fff !important;
        border: 2px solid #0076FF !important;
        border-radius: 999px !important;
        padding: 14px 28px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        cursor: pointer !important;
        text-shadow: none !important;
        text-align: center !important;
        transition: background-color .3s ease, color .3s ease !important;

        &:hover,
        &:focus {
            background-color: #fff !important;
            color: #0076FF !important;
            border-color: #0076FF !important;
        }
    }

    /* Lien "Forgot your password?" — gris + flèche → */
    a[href*="password_reset"],
    a[href*="lostpassword"] {
        color: #6B7280 !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        white-space: nowrap !important;
        margin-top: 12px !important;

        &::after {
            content: "→";
            font-size: 14px;
            transition: transform .2s ease;
        }

        &:hover {
            color: #0076FF !important;

            &::after {
                transform: translateX(2px);
            }
        }
    }
}

/* --------------------------------------------
   2. Card unique (login / register / password)
   -------------------------------------------- */
body #page-container .um.um-login,
body .um.um-login,
body #page-container .um.um-register,
body .um.um-register,
body #page-container .um.um-password,
body .um.um-password {
    max-width: 480px !important;
    margin: 0 auto !important;
    background: #FAFAF8 !important;
    border: 1px solid rgb(0 118 255 / 0.10) !important;
    border-radius: 16px !important;
    padding: 32px 36px !important;
    box-shadow: none !important;
}

/* --------------------------------------------
   Responsive
   -------------------------------------------- */
@media (max-width: 600px) {
    body #page-container .um.um-login,
    body .um.um-login,
    body #page-container .um.um-register,
    body .um.um-register,
    body #page-container .um.um-password,
    body .um.um-password {
        padding: 24px !important;
        border-radius: 12px !important;
    }
}