/* =========================================================
   RideMonkey Auth Pages — Login / Register / Password Reset

   Field/button selectors below reuse the same confirmed-
   accurate Ultimate Member classes from the Account page
   work (.um-field, .um-field-label, .um-field-area, .um-
   button) — these are consistent across all of UM's forms,
   not just Account, so no fresh HTML was needed to trust them
   here.
   ========================================================= */

.rm-auth-page {
    display: flex;
    flex-direction: column;

    min-height: 100vh;

    background: #faf9f6;
}

.rm-auth-header {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    padding: 12px 16px;
}

.rm-auth-logo-link {
    display: block;

    width: 55%;
    max-width: 420px;

    line-height: 0;
}

.rm-auth-logo {
    width: 100% !important;
    height: auto !important;
}

.rm-auth-features-link {
    position: absolute;
    top: 0;
    right: 16px;

    color: #222222;
    text-decoration: none;

    font-size: 14px;
    font-weight: 600;
}

.rm-auth-features-link:hover,
.rm-auth-features-link:focus {
    color: #ff4b00;
}

.rm-auth-content {
    display: flex;
    flex: 1;
    flex-direction: column;

    align-items: center;
    justify-content: flex-start;

    padding: 4px 20px 16px;
}

.rm-auth-inner {
    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: 420px;
}

.rm-auth-card {
    width: 100%;
    padding: 22px 20px;

    background: #ffffff;

    border: 1px solid #dddddd;
    border-radius: 16px;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.rm-auth-heading {
    margin: 0 0 12px;

    color: #222222;
    text-align: center;

    font-size: 18px;
    font-weight: 700;
}

.rm-auth-links {
    margin: 10px 0 0;

    color: #666666;
    text-align: center;

    font-size: 13px;
}

.rm-auth-links a {
    color: #ff4b00;
    text-decoration: none;

    font-weight: 600;
}

.rm-auth-links a:hover {
    text-decoration: underline;
}

.rm-auth-links-sep {
    color: #cccccc;
}


/* ---------------------------------------------------------
   Ultimate Member form fields
   --------------------------------------------------------- */

.rm-auth-card .um-field {
    margin-bottom: 10px;
}

.rm-auth-card .um-field-label label {
    display: block;
    margin-bottom: 3px;

    color: #222222 !important;

    font-size: 13px !important;
    font-weight: 600 !important;
}

.rm-auth-card .um-field-area input[type="text"],
.rm-auth-card .um-field-area input[type="email"],
.rm-auth-card .um-field-area input[type="password"] {
    width: 100% !important;
    padding: 8px 12px !important;

    background: #ffffff !important;

    border: 1px solid #dddddd !important;
    border-radius: 8px !important;

    color: #222222 !important;

    font-size: 14px !important;

    box-sizing: border-box;
}

.rm-auth-card .um-field-area input:focus {
    outline: none !important;

    border-color: #ff4b00 !important;
}


/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */

.rm-auth-card .um-col-alt {
    display: flex;

    gap: 10px;
    margin-top: 4px;
}

.rm-auth-card .um-button,
.rm-auth-card input[type="submit"].um-button {
    display: flex;
    width: 100%;

    align-items: center;
    justify-content: center;

    padding: 11px;
    margin-top: 4px;

    background: #ff4b00 !important;

    border: none !important;
    border-radius: 10px !important;

    color: #ffffff !important;
    text-decoration: none !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    cursor: pointer;
}

/* Only pages with multiple buttons sharing .um-col-alt (e.g.
   Login's "Login" + "Register" pair) get the side-by-side
   treatment — everything else keeps the safe full-width
   default above. */
.rm-auth-card .um-col-alt .um-button {
    width: auto;
    flex: 1;
    margin-top: 0;
}

.rm-auth-card .um-button:hover {
    background: #e04300 !important;
}


/* =========================================================
   Desktop

   Two-column layout removed for now — it assumed Login/
   Register share the same nested .um-field structure as the
   Account page, but they're built with UM's Form Builder
   (form_id) rather than UM's default shortcode, which
   appears to output different markup (label and input
   splitting into separate grid items, rather than staying
   together as one unit, confirmed by testing). Revisiting
   once the real HTML is confirmed.
   ========================================================= */

@media (min-width: 768px) {

    .rm-auth-inner {
        max-width: 480px;
    }

}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 767px) {

    .rm-auth-header {
        padding: 8px 14px;
    }

    .rm-auth-logo-link {
        width: 40%;
    }

    .rm-auth-features-link {
        right: 14px;

        font-size: 13px;
    }

    .rm-auth-content {
        padding: 4px 16px 10px;
    }

    .rm-auth-card {
        padding: 16px 14px;
    }

    .rm-auth-heading {
        margin-bottom: 8px;

        font-size: 17px;
    }

    .rm-auth-card .um-field {
        margin-bottom: 8px;
    }

    .rm-auth-card .um-field-label label {
        margin-bottom: 2px;

        font-size: 12px !important;
    }

    .rm-auth-card .um-field-area input[type="text"],
    .rm-auth-card .um-field-area input[type="email"],
    .rm-auth-card .um-field-area input[type="password"] {
        padding: 7px 10px !important;

        font-size: 13px !important;
    }

    .rm-auth-card .um-button,
    .rm-auth-card input[type="submit"].um-button {
        padding: 10px;

        font-size: 13px !important;
    }

    .rm-auth-links {
        margin-top: 8px;

        font-size: 12px;
    }

}