/* ============================================================================
   PLUTONIUM CMS — MEMBER AREA CSS
   Shared styles for all registered-member (front-end account) pages:
   member-login, member-reset, member-verify, member-dashboard,
   member-lodd-application, and includes/member-nav.php.

   ARCHITECTURE (see also /plutoniumCMS/assets/css/root_values.php and
   /themes/plutonium6_default/css/theme.css):
   - root_values.php defines all design tokens (--ColorBrand, --Space*,
     --Radius*, --Shadow*, --FontSize*, etc). NEVER hardcode a color/radius/
     spacing value here — reuse a token, or add a new token there first.
   - HSL-triplet color tokens (--ColorBrand, --ColorBorder, --ColorText*, ...)
     must always be wrapped in hsla(var(--Token), alpha) — used bare they are
     invalid CSS values.
   - Buttons reuse the same tokens as theme.css's button/.buttonSecondary/
     .buttonOutline rules so brand-color changes stay in sync everywhere.

   Load order (see includes/head-close.php $extraThemeCss hook):
   root_values.php -> dynamic.php -> theme.php -> this file.
============================================================================ */

/* ============================================================================
   PAGE WRAPS + SIDEBAR LAYOUT
============================================================================ */
.member-dash-wrap { max-width: 1200px; margin: 200px auto 0; padding: 2.5rem 1.25rem 4rem; }
.lodd-wrap        { max-width: 1200px; margin: 200px auto 0; padding: 2rem 1.25rem 4rem; }
.member-layout      { display: flex; align-items: flex-start; gap: 2rem; }
.member-layout-main { flex: 1 1 auto; min-width: 0; }
.lodd-wrap .member-layout-main { max-width: 960px; }

.member-auth-wrap {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem 1rem;
    background: hsla(var(--ColorBgSecondary), 1);
}
.member-reset-wrap { padding: 4rem 1.25rem; text-align: center; }
.member-reset-page-content { max-width: 420px; margin: 0 auto 2rem; }
.member-verify-wrap { padding: 4rem 1.25rem; text-align: center; }
.member-verify-page-content { max-width: 520px; margin: 0 auto 2rem; }

/* ============================================================================
   SHARED SURFACE CARDS
============================================================================ */
.member-auth-card, .member-reset-card, .member-verify-card, .member-card, .member-nav {
    background: hsla(var(--ColorBgPrimary), 1);
    border-radius: var(--RadiusLG);
    box-shadow: var(--ShadowMD);
}
.member-auth-card  { padding: 2.5rem 2rem; width: 100%; max-width: 440px; }
.member-reset-card { padding: 2.5rem 2rem; width: 100%; max-width: 420px; margin: 0 auto; text-align: left; }
.member-verify-card{ padding: 3rem 2.5rem; margin: 0 auto; max-width: 520px; }
.member-card        { overflow: hidden; margin-bottom: 1.5rem; }
.member-lodd-card   { border: 1px solid hsla(var(--ColorBorder), .12); box-shadow: var(--ShadowLG); }

.member-reset-card h2, .member-verify-card h2 { margin: 0 0 .5rem; font-size: var(--FontSizeXL); }
.member-reset-card .sub, .member-verify-card p {
    color: hsla(var(--ColorTextMuted), 1);
    font-size: var(--FontSizeSM);
}
.member-reset-card .sub { margin-bottom: 1.5rem; }
.member-verify-card p { line-height: 1.6; margin: 0 0 1.5rem; }

/* ============================================================================
   MEMBER NAV (left sidebar — includes/member-nav.php)
============================================================================ */
.member-nav {
    flex: 0 0 260px;
    width: 260px;
    padding: 1.5rem 1.25rem;
    align-self: flex-start;
    position: sticky;
    top: 1.5rem;
}
.member-nav-user { display: flex; align-items: center; gap: .85rem; margin-bottom: 1rem; }
.member-nav-avatar {
    width: 48px; height: 48px; border-radius: var(--RadiusFull); flex-shrink: 0;
    background: hsla(var(--ColorBrand), 1); color: hsla(var(--White), 1);
    font-size: var(--FontSizeLG); font-weight: var(--FontWeightBold);
    display: flex; align-items: center; justify-content: center;
}
.member-nav-user-text { min-width: 0; }
.member-nav-welcome { font-size: var(--FontSizeSM); font-weight: var(--FontWeightBold); line-height: 1.25; }
.member-nav-email {
    font-size: var(--FontSizeXS); color: hsla(var(--ColorTextMuted), 1);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.member-nav-logout {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: .4rem;
    background: none; border: 1.5px solid hsla(var(--ColorBorderLight), 1);
    border-radius: var(--RadiusBase);
    padding: .55rem 1rem; font-size: var(--FontSizeXS); font-weight: var(--FontWeightSemibold);
    color: hsla(var(--ColorTextPrimary), 1); cursor: pointer;
    margin-bottom: 1.25rem;
    transition: background-color var(--TransitionFast);
}
.member-nav-logout .material-symbols-outlined { font-size: 1.05rem; }
.member-nav-logout:hover { background: hsla(var(--ColorBgSecondary), 1); }
.member-nav-links { display: flex; flex-direction: column; gap: .25rem; }
.member-nav-link {
    display: flex; align-items: center; gap: .65rem;
    padding: .65rem .75rem; border-radius: var(--RadiusBase);
    font-size: var(--FontSizeSM); font-weight: var(--FontWeightSemibold);
    color: hsla(var(--ColorTextPrimary), 1);
    text-decoration: none;
    transition: background-color var(--TransitionFast), color var(--TransitionFast);
}
.member-nav-link .material-symbols-outlined { font-size: 1.15rem; color: hsla(var(--ColorTextMuted), 1); }
.member-nav-link:hover { background: hsla(var(--ColorBgSecondary), 1); }
.member-nav-link.active { background: hsla(var(--ColorBrand), 1); color: hsla(var(--White), 1); }
.member-nav-link.active .material-symbols-outlined { color: hsla(var(--White), 1); }
@media (max-width: 860px) {
    .member-nav { flex: 1 1 100%; width: 100%; position: static; margin-bottom: 1.5rem; }
}

/* ============================================================================
   AUTH TABS (member-login.php)
============================================================================ */
.member-auth-logo { text-align: center; margin-bottom: 1.5rem; width: 150px; margin-left: auto; margin-right: auto; }
.member-auth-logo img { max-height: 200px; }
.member-auth-tabs {
    display: flex;
    border-bottom: 2px solid hsla(var(--ColorBorderLight), 1);
    margin-bottom: 1.75rem;
    gap: 0;
}
.member-auth-tab {
    flex: 1;
    background: none; border: none;
    padding: .75rem 1rem;
    font-size: var(--FontSizeBase); font-weight: var(--FontWeightSemibold);
    color: hsla(var(--ColorTextMuted), 1);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color var(--TransitionFast), border-color var(--TransitionFast);
}
.member-auth-tab.active { color: hsla(var(--ColorBrand), 1); border-bottom-color: hsla(var(--ColorBrand), 1); }
.member-auth-form-panel { display: none; }
.member-auth-form-panel.active { display: block; }

.member-auth-divider {
    display: flex; align-items: center;
    margin: 1.25rem 0; gap: .75rem;
    color: hsla(var(--ColorTextMuted), 1);
    font-size: var(--FontSizeSM);
}
.member-auth-divider::before, .member-auth-divider::after {
    content: ''; flex: 1; height: 1px;
    background: hsla(var(--ColorBorderLight), 1);
}
.member-auth-google {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    padding: .7rem;
    background: hsla(var(--White), 1); color: hsla(var(--Gray20), 1);
    border: 1.5px solid hsla(var(--ColorBorderLight), 1);
    border-radius: var(--RadiusBase);
    font-size: var(--FontSizeSM); font-weight: var(--FontWeightSemibold);
    cursor: pointer; text-decoration: none;
    transition: background-color var(--TransitionFast), box-shadow var(--TransitionFast);
}
.member-auth-google:hover { background: hsla(var(--ColorBgSecondary), 1); box-shadow: var(--ShadowSM); }
.member-auth-google svg { width: 20px; height: 20px; flex-shrink: 0; }

.member-auth-forgot {
    display: block; text-align: right;
    font-size: var(--FontSizeXS);
    color: hsla(var(--ColorBrand), 1);
    text-decoration: none;
    margin-top: .25rem;
}

/* ============================================================================
   SHARED FORM FIELDS (dashboard profile form, login, reset)
============================================================================ */
.member-form-group, .member-auth-group, .member-reset-group { margin-bottom: 1rem; }
.member-form-label, .member-auth-label, .member-reset-label {
    display: block;
    font-size: var(--FontSizeSM); font-weight: var(--FontWeightSemibold);
    margin-bottom: .35rem;
    color: hsla(var(--ColorTextPrimary), 1);
}
.member-form-input, .member-auth-input, .member-reset-input {
    width: 100%; padding: .65rem .9rem;
    border: 1.5px solid hsla(var(--ColorBorderLight), 1);
    border-radius: var(--RadiusBase);
    font-size: var(--FontSizeBase);
    background: hsla(var(--ColorBgSecondary), 1);
    color: hsla(var(--ColorTextPrimary), 1);
    box-sizing: border-box;
    transition: border-color var(--TransitionFast);
}
.member-form-input:focus, .member-auth-input:focus, .member-reset-input:focus {
    outline: none;
    border-color: hsla(var(--ColorBrand), 1);
}
.member-form-input:disabled { opacity: .55; background: hsla(var(--ColorBgTertiary), 1); }
.member-form-hint { font-size: var(--FontSizeXS); color: hsla(var(--ColorTextMuted), 1); margin-top: .2rem; }
.member-form-row { display: flex; gap: 1rem; }
.member-form-row .member-form-group { flex: 1; }

/* ============================================================================
   BUTTONS
   Reuses the same tokens as theme.css .button/.buttonSecondary so member-area
   buttons stay visually identical to the rest of the site.
============================================================================ */
.member-btn, .member-auth-btn, .member-reset-btn, .member-verify-btn, .lodd-btn.primary {
    display: inline-block;
    padding: var(--Space3) var(--Space6);
    background: hsla(var(--ColorBrand), 1);
    color: hsla(var(--White), 1);
    border: 1px solid transparent;
    border-radius: var(--RadiusBase);
    font-size: var(--FontSizeSM); font-weight: var(--FontWeightBold);
    cursor: pointer; text-decoration: none;
    transition: background-color var(--TransitionFast), opacity var(--TransitionFast);
}
.member-btn:hover, .member-auth-btn:hover, .member-reset-btn:hover, .member-verify-btn:hover, .lodd-btn.primary:hover {
    background: hsla(var(--ColorBrandDark), 1);
}
.member-btn:disabled, .member-auth-btn:disabled, .member-reset-btn:disabled, .lodd-btn:disabled {
    opacity: .5; cursor: not-allowed;
}
.member-auth-btn, .member-reset-btn { width: 100%; padding: .8rem; margin-top: .5rem; }
.member-verify-btn { padding: .8rem 2rem; }

.member-btn-secondary, .lodd-btn.secondary {
    display: inline-block;
    padding: var(--Space3) var(--Space6);
    background: none;
    color: hsla(var(--ColorBrand), 1);
    border: 1.5px solid hsla(var(--ColorBrand), 1);
    border-radius: var(--RadiusBase);
    font-size: var(--FontSizeSM); font-weight: var(--FontWeightBold);
    cursor: pointer;
    transition: background-color var(--TransitionFast);
}
.member-btn-secondary:hover, .lodd-btn.secondary:hover { background: hsla(var(--ColorBgSecondary), 1); }

.member-verify-link, .member-reset-back {
    display: inline-block;
    color: hsla(var(--ColorBrand), 1);
    font-size: var(--FontSizeSM);
    text-decoration: none;
}
.member-verify-link { margin-top: 1rem; }
.member-reset-back { display: block; text-align: center; margin-top: 1rem; }
.member-verify-link:hover, .member-reset-back:hover { text-decoration: underline; }

.member-verify-resend-form { margin-top: 1.5rem; text-align: left; }
button.member-verify-link { background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; }
button.member-verify-link:disabled { opacity: .6; cursor: default; }

.member-auth-spinner, .member-reset-spinner {
    display: none; width: 18px; height: 18px;
    border: 2px solid hsla(var(--White), .4); border-top-color: hsla(var(--White), 1);
    border-radius: var(--RadiusFull);
    animation: member-spin .7s linear infinite;
    vertical-align: middle; margin-right: .4rem;
}
@keyframes member-spin { to { transform: rotate(360deg); } }

/* ============================================================================
   ALERTS (dashboard, auth, reset, LODD wizard)
============================================================================ */
.member-alert, .member-auth-alert, .member-reset-alert, .lodd-alert {
    padding: .7rem 1rem;
    border-radius: var(--RadiusBase);
    margin-bottom: 1rem;
    font-size: var(--FontSizeSM);
}
.member-alert, .member-reset-alert, .lodd-alert { display: none; }
.member-alert.error, .member-auth-alert.error, .member-reset-alert.error, .lodd-alert.error {
    background: hsla(var(--ColorDanger), .08); color: hsla(var(--ColorDanger), 1); border: 1px solid hsla(var(--ColorDanger), .35);
}
.member-alert.success, .member-auth-alert.success, .member-reset-alert.success, .lodd-alert.success {
    background: hsla(var(--ColorSuccess), .08); color: hsla(var(--ColorSuccess), 1); border: 1px solid hsla(var(--ColorSuccess), .35);
}
.member-alert.info, .member-auth-alert.info, .lodd-alert.info {
    background: hsla(var(--ColorInfo), .1); color: hsla(var(--ColorInfo), 1); border: 1px solid hsla(var(--ColorInfo), .35);
}
.member-email-verified { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--FontSizeXS); }
.member-email-verified.yes { color: hsla(var(--ColorSuccess), 1); }
.member-email-verified.no  { color: hsla(var(--ColorDanger), 1); }

.member-verify-icon { font-size: 3.5rem; display: block; margin-bottom: 1rem; }
.member-verify-icon.success { color: hsla(var(--ColorSuccess), 1); }
.member-verify-icon.error   { color: hsla(var(--ColorDanger), 1); }
.member-verify-icon.info    { color: hsla(var(--ColorBrand), 1); }

/* ============================================================================
   DASHBOARD CARDS
============================================================================ */
.member-card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid hsla(var(--ColorBorderLight), 1);
    display: flex; align-items: center; gap: .75rem;
}
.member-card-header h3 { margin: 0; font-size: var(--FontSizeLG); }
.member-card-header .material-symbols-outlined { color: hsla(var(--ColorBrand), 1); font-size: 1.3rem; }
.member-card-body { padding: 1.5rem; }

.member-activity-list { list-style: none; padding: 0; margin: 0; }
.member-activity-list li {
    padding: .75rem 0;
    border-bottom: 1px solid hsla(var(--ColorBorderLight), 1);
    color: hsla(var(--ColorTextMuted), 1);
    font-size: var(--FontSizeBase);
    display: flex; align-items: center; gap: .6rem;
}
.member-activity-list li:last-child { border-bottom: none; }
.member-activity-empty { color: hsla(var(--ColorTextMuted), 1); text-align: center; padding: 1.5rem 0; }

.member-lodd-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.member-lodd-meta > div {
    border: 1px solid hsla(var(--ColorBorderLight), 1);
    border-radius: var(--RadiusMD);
    padding: .65rem .75rem;
    background: hsla(var(--ColorBgSecondary), 1);
}
.member-lodd-meta-label {
    display: block; font-size: var(--FontSizeXS); color: hsla(var(--ColorTextMuted), 1);
    margin-bottom: .2rem; text-transform: uppercase; letter-spacing: .04em;
}
.member-lodd-meta-value { font-size: var(--FontSizeBase); font-weight: var(--FontWeightBold); color: hsla(var(--ColorTextPrimary), 1); }

@media (max-width: 600px) {
    .member-form-row { flex-direction: column; }
    .member-lodd-meta { grid-template-columns: 1fr; }
}

/* ============================================================================
   LODD APPLICATION WIZARD (member-lodd-application.php)
============================================================================ */
.lodd-header { margin-bottom: 1.5rem; }
.lodd-header h1 { margin: 0 0 .4rem; font-size: var(--FontSize2XL); }
.lodd-header p { margin: 0; color: hsla(var(--ColorTextMuted), 1); }

.lodd-card {
    background: hsla(var(--ColorBgPrimary), 1);
    border-radius: var(--RadiusMD);
    box-shadow: var(--ShadowMD);
    margin-bottom: 1rem;
    overflow: hidden;
}
.lodd-card h2 { margin: 0; padding: 1rem 1.25rem; border-bottom: 1px solid hsla(var(--ColorBorderLight), 1); font-size: var(--FontSizeLG); }
.lodd-card-body { padding: 1rem 1.25rem 1.2rem; }
.lodd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; }
.lodd-field { display: flex; flex-direction: column; gap: .35rem; }
.lodd-field label { font-size: var(--FontSizeSM); font-weight: var(--FontWeightSemibold); color: hsla(var(--ColorTextPrimary), 1); }
.lodd-field > input, .lodd-field > select, .lodd-field > textarea {
    width: 100%; border: 1.5px solid hsla(var(--ColorBorderLight), 1); border-radius: var(--RadiusBase);
    padding: .6rem .75rem; font-size: var(--FontSizeSM);
    box-sizing: border-box; background: hsla(var(--ColorBgSecondary), 1);
}
.lodd-field textarea { min-height: 90px; resize: vertical; }
.lodd-row-full { grid-column: 1 / -1; }
.lodd-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; justify-items: start; }
.lodd-checks label { font-size: var(--FontSizeBase); font-weight: var(--FontWeightMedium); display: flex; gap: .5rem; align-items: flex-start; justify-content: flex-start; text-align: left; }
.lodd-checks label input[type="checkbox"] { width: auto; height: auto; flex: 0 0 auto; margin: .2rem 0 0; }
.lodd-delivery {
    border: 1px solid hsla(var(--ColorBorderLight), 1);
    border-radius: var(--RadiusMD);
    background: hsla(var(--ColorBgSecondary), 1);
    padding: .85rem 1rem; margin-top: .75rem;
}
.lodd-delivery p { margin: .25rem 0; font-size: var(--FontSizeBase); color: hsla(var(--ColorTextSecondary), 1); }
.lodd-delivery label { display: flex; align-items: center; gap: .5rem; justify-content: flex-start; text-align: left; }
.lodd-actions { display: flex; gap: .6rem; margin-top: 1rem; }
.lodd-meta { margin-top: .5rem; font-size: var(--FontSizeSM); color: hsla(var(--ColorTextMuted), 1); }
.lodd-optional-note { font-size: var(--FontSizeXS); color: hsla(var(--ColorTextMuted), 1); margin: 0 0 .75rem; }

.lodd-stepper { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; }
.lodd-stepper-item {
    flex: 1 1 auto; text-align: center; font-size: var(--FontSizeXS); font-weight: var(--FontWeightSemibold);
    color: hsla(var(--ColorTextMuted), 1);
    padding: .5rem .3rem; border-bottom: 3px solid hsla(var(--ColorBorderLight), 1); white-space: nowrap;
}
.lodd-stepper-item.active { color: #ffc72c; border-bottom-color: #ffc72c; }
.lodd-stepper-item.done { color: hsla(var(--ColorSuccess), 1); border-bottom-color: hsla(var(--ColorSuccess), .4); }
.lodd-step { display: none; }
.lodd-step.active { display: block; }
.lodd-footer-nav {
    display: flex; justify-content: space-between; align-items: center; gap: .6rem;
    margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid hsla(var(--ColorBorderLight), 1);
}
.lodd-footer-nav .lodd-footer-left, .lodd-footer-nav .lodd-footer-right { display: flex; gap: .6rem; }

@media (max-width: 760px) {
    .lodd-grid, .lodd-checks { grid-template-columns: 1fr; }
    .lodd-stepper-item { font-size: .68rem; }
}