/* =========================================================================
   Brand the User Registration "My Account" area to match the seller portal.
   Lives in the theme (NOT the WP Customizer), so it deploys with the code —
   no database migration needed. Scoped to .user-registration-MyAccount-*.
   Palette: red #ca2127, navy #003E83, dark #1f2733, body #646464.
   ========================================================================= */

/* Items hidden by role (broker view) — see urcma_endpoint_menu_class filter */
.user-registration-MyAccount-navigation ul li.hide { display: none !important; }

/* ── Left navigation menu (all links red, like the seller-template nav) ── */
/* !important + extra specificity to beat the addon's own menu colour CSS. */
.user-registration-MyAccount-navigation ul li a,
.user-registration-MyAccount-navigation ul li.user-registration-MyAccount-navigation-link a {
    color: #ca2127 !important;
}
.user-registration-MyAccount-navigation ul li a:hover,
.user-registration-MyAccount-navigation ul li.user-registration-MyAccount-navigation-link a:hover {
    color: #a91a1f !important;
}
.user-registration-MyAccount-navigation ul li.is-active a,
.user-registration-MyAccount-navigation ul li.is-active a:hover {
    color: #ca2127 !important;
    font-weight: 700;
}

/* Active item accent → brand red (overrides the plugin's default blue) */
.user-registration-MyAccount-navigation ul li.is-active {
    border-left-color: #ca2127 !important;
}

/* Menu icons (the addon renders them as <i>, an svg, or a ::before glyph) */
.user-registration-MyAccount-navigation ul li a i,
.user-registration-MyAccount-navigation ul li a svg,
.user-registration-MyAccount-navigation ul li a::before { color: #ca2127 !important; }

/* ── Account content ── */
/* Headings navy. We intentionally DON'T force link/button colours here, because
   the embedded seller dashboard (chips, cards, buttons) styles itself via
   seller.css — forcing colours here breaks the active chips / buttons. */
.user-registration-MyAccount-content h1,
.user-registration-MyAccount-content h2,
.user-registration-MyAccount-content h3 { color: #003E83; }

/* ── Logged-out LOGIN form on the My Account page ──────────────────────────
   UR's login-form layout CSS only applies to forms with a style modifier and a
   specific body context, so here the fields render scrambled across one row.
   Force a clean single-column layout. Scoped to the non-MyAccount wrapper so the
   logged-in account view is never affected. */
#user-registration:not(.user-registration-MyAccount),
#user-registration:not(.user-registration-MyAccount) .ur-frontend-form.login,
#user-registration:not(.user-registration-MyAccount) .user-registration-form-login,
#user-registration:not(.user-registration-MyAccount) .user-registration-form-login .ur-form-row,
#user-registration:not(.user-registration-MyAccount) .user-registration-form-login .ur-form-grid {
    display: block !important;
    width: 100% !important;
    float: none !important;
}
#user-registration:not(.user-registration-MyAccount) .ur-frontend-form.login {
    max-width: 460px;
    margin: 0 auto;
}
#user-registration:not(.user-registration-MyAccount) .user-registration-form-login .form-row,
#user-registration:not(.user-registration-MyAccount) .user-registration-form-login .user-registration-form-row {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 0 0 16px !important;
}
#user-registration:not(.user-registration-MyAccount) .user-registration-form-login label {
    display: block;
    margin-bottom: 6px;
    text-align: left;
}
#user-registration:not(.user-registration-MyAccount) .user-registration-form-login input.input-text,
#user-registration:not(.user-registration-MyAccount) .user-registration-form-login .input-wrapper,
#user-registration:not(.user-registration-MyAccount) .user-registration-form-login .password-input-group {
    width: 100% !important;
    box-sizing: border-box;
}
/* Remember Me (left) + Lost Password (right) share one row. */
#user-registration:not(.user-registration-MyAccount) .user-registration-before-login-btn {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin: 4px 0 0 !important;
}
#user-registration:not(.user-registration-MyAccount) .user-registration-before-login-btn > div {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
}
/* Login button — full width, on its own row below. */
#user-registration:not(.user-registration-MyAccount) [data-field="login-button"] {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 16px 0 0 !important;
}
#user-registration:not(.user-registration-MyAccount) [data-field="login-button"] .user-registration-Button,
#user-registration:not(.user-registration-MyAccount) [data-field="login-button"] button[type="submit"] {
    width: 100% !important;
    display: block !important;
}
/* Register prompt — own row below the button, aligned with the form column. */
#user-registration:not(.user-registration-MyAccount) .user-registration-register,
#user-registration:not(.user-registration-MyAccount) [data-field="registration-setting"] {
    display: block !important;
    width: 100% !important;
    float: none !important;
    text-align: left;
    margin: 12px 0 0 !important;
}
/* Social login (e.g. "Login with Google", from the Social Connect plugin) — keep
   it as a tidy, full-width block in the same column as the form. Renders on the
   server (social login isn't configured on local, so it can't be previewed here). */
#user-registration:not(.user-registration-MyAccount) .user-registration-social-connect-networks,
#user-registration:not(.user-registration-MyAccount) .ursc-network-lists {
    display: block;
    max-width: 460px;
    margin: 0 auto 16px;
    float: none;
}
#user-registration:not(.user-registration-MyAccount) .ursc-network-lists .ursc-login-media {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
}