/* =========================================================
   RideMonkey Account — Page Styling

   Rewritten against Ultimate Member's actual rendered HTML
   (confirmed via real source, not guessed). Key facts this
   relies on:

   - Tab-nav links are <a class="um-account-link">, with
     class="um-account-link current" on the active one.
   - Tab content sections are <div class="um-account-tab
     um-account-tab-{name}" data-tab="{name}"> — plain divs
     with NO show/hide class of their own. Visibility is
     normally handled entirely by JS, which isn't reliably
     firing in this setup — so ALL tabs render visible by
     default with nothing to distinguish them.
   - The wrapping <div class="um-account-main"> DOES carry a
     server-set data-current_tab="{name}" attribute though,
     regardless of JS — that's the reliable hook used below
     to show only the correct tab via pure CSS.
   - A second, separate, redundant mobile-only accordion nav
     (class .um-account-nav, UM's own responsive breakpoint
     classes) repeats before each section — hidden entirely
     below, since the sidebar nav already handles switching.
   ========================================================= */

.rm-account {
    width: 100%;
}

.rm-account .rm-page-grid {
    display: grid;
    grid-template-columns: 1fr;
}

.rm-account-card {
    width: 100%;
    padding: 18px;

    background: #ffffff;

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

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}


/* ---------------------------------------------------------
   Show only the current tab's content — pure CSS, driven by
   the server-set data-current_tab attribute, independent of
   whether UM's own JS runs.
   --------------------------------------------------------- */

.rm-account-card .um-account-tab {
    display: none !important;
}

.rm-account-card .um-account-main[data-current_tab="general"] .um-account-tab-general,
.rm-account-card .um-account-main[data-current_tab="password"] .um-account-tab-password,
.rm-account-card .um-account-main[data-current_tab="privacy"] .um-account-tab-privacy,
.rm-account-card .um-account-main[data-current_tab="delete"] .um-account-tab-delete {
    display: block !important;
}


/* ---------------------------------------------------------
   Our own tab bar, replacing UM's native sidebar entirely —
   its icon/label swap between breakpoints wasn't behaving
   consistently (both variants were rendering simultaneously
   on mobile in testing), so rather than keep chasing that,
   this is a plain, fully-controlled tab strip instead.
   --------------------------------------------------------- */

.rm-account-tabs {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 16px;

    border-bottom: 2px solid #f0f0f0;
}

.rm-account-tab-link {
    padding: 8px 16px;

    background: #faf9f6;

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

    color: #222222;
    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    transition: border-color 0.15s ease, color 0.15s ease;
}

.rm-account-tab-link:hover,
.rm-account-tab-link.current {
    border-color: #ff4b00;

    color: #ff4b00;
}


/* UM's own native sidebar — hidden unconditionally, at every
   breakpoint, since its own responsive behavior proved
   unreliable. Our tab bar above replaces it entirely. */

.rm-account-card .um-account-link {
    display: none !important;
}


/* ---------------------------------------------------------
   Hide the redundant repeated mobile accordion nav bars —
   also unused now that we have our own tab bar.
   --------------------------------------------------------- */

.rm-account-card .um-account-nav {
    display: none !important;
}


/* ---------------------------------------------------------
   Tab content heading (e.g. "Account", "Change Password")
   --------------------------------------------------------- */

.rm-account-card .um-account-heading {
    display: flex;

    align-items: center;
    gap: 8px;

    margin: 20px 0 14px;
    padding-bottom: 10px;

    border-bottom: 2px solid #ff4b00;

    color: #222222;

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


/* ---------------------------------------------------------
   Form fields — stacked vertically (label above input),
   one per row, rather than UM's default side-by-side
   layout, which was the main cause of the mobile horizontal
   overflow.
   --------------------------------------------------------- */

.rm-account-card .um-field {
    margin-bottom: 16px;
}

.rm-account-card .um-field-label label {
    display: block;
    margin-bottom: 6px;

    color: #222222 !important;

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

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

    background: #ffffff !important;

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

    color: #222222 !important;

    font-size: 15px !important;

    box-sizing: border-box;
}

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

    border-color: #ff4b00 !important;
}

/* Privacy tab's Yes/No radio rows — stack instead of
   side-by-side halves, same overflow fix as above. */
.rm-account-card .um-field-radio.um-field-half {
    display: block !important;
    width: 100% !important;

    margin-bottom: 6px;
}


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

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

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

    padding: 14px;
    margin-top: 8px;

    background: #ff4b00 !important;

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

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

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

    cursor: pointer;
}

.rm-account-card .um-button:hover,
.rm-account-card input[type="submit"].um-button:hover,
.rm-account-card .um-request-button:hover {
    background: #e04300 !important;
}

/* Delete Account — kept visually distinct from the primary
   orange, so nothing destructive looks like the main action. */
.rm-account-card .um-account-tab-delete .um-button {
    background: #ffffff !important;

    border: 1px solid #c0392b !important;

    color: #c0392b !important;
}

.rm-account-card .um-account-tab-delete .um-button:hover {
    background: #fdecea !important;
}


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

@media (max-width: 767px) {

    .rm-account-card {
        padding: 14px;
    }

    .rm-account-card .um-account-link {
        padding: 9px 12px;

        font-size: 13px;
    }

    .rm-account-card .um-account-heading {
        font-size: 15px;
    }

}