/*
 * MGB Account Access -- shared styling for the registration page and auth modal.
 *
 * Color tokens are deliberately pulled from the SAME CSS custom properties npca-match-v2 already
 * emits site-wide (via NPCA_Design_Tokens, printed as a :root block on every front-end page since
 * that plugin enqueues its stylesheet unconditionally) -- not new, invented colors. Each var()
 * below carries a literal fallback matching that plugin's own config/defaults.php values, so this
 * stylesheet still renders correctly and on-brand even on a future deployment where npca-match-v2
 * isn't installed at all (see MGB_Account_Roles' own graceful-degradation behavior).
 *
 * --mgb-role-general is the one genuinely NEW token here: no existing MGB/NPCA Match token covers
 * a "General User" concept, since that account type didn't exist before this project. Chosen as a
 * muted gold/amber -- distinct from the existing blue/green/orange role colors, reads as a
 * softer, non-gendered accent per the 2026-07-21 design direction, and sits comfortably alongside
 * the site's green-forward palette without competing with it.
 */

.mgb-account-shell,
.mgb-account-modal {
    --mgb-brand-primary: var(--brand-primary, #2E7D32);
    --mgb-brand-primary-dark: color-mix(in srgb, var(--mgb-brand-primary) 78%, black);
    --mgb-brand-secondary: var(--brand-secondary, #76BC21);
    --mgb-ink: var(--match-ink, #272F3D);
    --mgb-border: var(--match-border, #E2E8EE);
    --mgb-surface-tint: var(--match-surface-tint, #F3F9F5);
    --mgb-radius-card: var(--radius-card, 14px);
    --mgb-font-heading: var(--font-heading, system-ui, sans-serif);

    --mgb-role-general: #C9971E;
    --mgb-role-general-tint: #FBF1DA;
    --mgb-role-property-owner: var(--match-role-property-owner, #2F6FED);
    --mgb-role-capital-provider: var(--match-role-capital-provider, #2E7D32);
    --mgb-role-contractor: var(--match-role-contractor, #F5821F);
}

/*
 * Full-page /register/ container -- deliberately independent from the modal's own width
 * (.mgb-account-modal__panel below). This is a dedicated desktop page, not a dialog, so it uses
 * its own substantially wider container (2026-07-21 direction: ~900-1100px, not shared with or
 * derived from the modal's own max-width) and is centered with real outer margins rather than
 * stretched edge-to-edge.
 */
.mgb-account-shell {
    max-width: min(1040px, 92vw);
    margin: 2rem auto;
    padding: 0 1rem;
    font-family: system-ui, sans-serif;
    color: var(--mgb-ink);
}

.mgb-account-brand-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.mgb-account-brand-header__logo {
    max-height: 80px;
    width: auto;
}

/* Two-logo lockup (MGB + NPCA Match) -- capped shorter than the single-logo case above so showing
   both together never makes the header excessively tall. */
.mgb-account-brand-header__lockup {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

.mgb-account-brand-header__lockup .mgb-account-brand-header__logo {
    max-height: 44px;
    width: auto;
}

.mgb-account-brand-header__divider {
    width: 1px;
    height: 32px;
    background: var(--mgb-border);
}

.mgb-account-brand-header__text {
    font-family: var(--mgb-font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--mgb-brand-primary);
}

.mgb-account-registration-card {
    background: #fff;
    border: 1px solid var(--mgb-border);
    border-top: 4px solid var(--mgb-brand-primary);
    border-radius: var(--mgb-radius-card);
    padding: 1.5rem 1.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.mgb-account-shell .mgb-account-brand-header {
    margin-bottom: 0.75rem;
}

.mgb-account-shell h2 {
    margin-bottom: 0.35rem;
}

.mgb-account-shell .mgb-account-registration-intro {
    margin-bottom: 0.5rem;
}

.mgb-account-login-prompt {
    text-align: right;
    font-size: 0.9rem;
    margin: 0 0 1rem;
    color: #556;
}

.mgb-account-login-prompt a,
.mgb-account-fallback-link a,
.mgb-account-password-recovery a {
    color: var(--mgb-brand-primary);
    font-weight: 600;
    text-decoration: none;
}

.mgb-account-login-prompt a:hover,
.mgb-account-fallback-link a:hover,
.mgb-account-password-recovery a:hover {
    text-decoration: underline;
}

.mgb-account-registration-card h2,
.mgb-account-modal__panel h2 {
    font-family: var(--mgb-font-heading);
    color: var(--mgb-ink);
    margin-top: 0;
}

.mgb-account-registration-intro {
    color: #556;
    margin-top: -0.5rem;
}

.mgb-account-form-error {
    background: #fdecea;
    color: #611a15;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.mgb-account-field {
    margin-bottom: 0.9rem;
}

.mgb-account-field label {
    display: block;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--mgb-ink);
    margin-bottom: 0.3rem;
}

.mgb-account-field input[type="text"],
.mgb-account-field input[type="email"],
.mgb-account-field input[type="tel"],
.mgb-account-field input[type="password"] {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mgb-account-field input:focus {
    outline: none;
    border-color: var(--mgb-brand-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mgb-brand-primary) 25%, transparent);
}

/* Password / confirm are paired side by side on the full page (registration-form.php wraps them
   in a .mgb-account-field-row, 2026-07-21) but remain vertically stacked, unpaired, in the modal
   (auth-modal.php is intentionally unchanged) -- capped to a comfortable width there only, purely
   so they don't stretch the full ~1000px modal width unnecessarily. Scoped to the modal so it does
   not fight the full page's own flex-based 50% sizing from .mgb-account-field-row. */
.mgb-account-modal__pane input[name="password"],
.mgb-account-modal__pane input[name="password_confirm"] {
    max-width: 460px;
}

.mgb-account-field-row {
    display: flex;
    gap: 1.25rem;
}

.mgb-account-field-row .mgb-account-field {
    flex: 1 1 0;
    min-width: 0;
}

@media (max-width: 640px) {
    .mgb-account-field-row {
        flex-direction: column;
        gap: 0;
    }
}

.mgb-account-optional-tag {
    font-weight: 400;
    color: #666;
    font-size: 0.85em;
}

/* Role cards -- shared base visual styling (border/color/mark treatment) for both the full-page
   form and the modal; grid COLUMN COUNT is deliberately set independently for each (this base rule
   governs the full page; .mgb-account-modal__pane overrides it for the modal further down), per
   the 2026-07-21 direction that the two contexts must not be forced to share layout. */

.mgb-account-role-field {
    margin-bottom: 1.1rem;
}

.mgb-account-shell .mgb-account-role-field {
    margin-bottom: 0.85rem;
}

.mgb-account-shell .mgb-account-field {
    margin-bottom: 0.7rem;
}

.mgb-account-role-field__label {
    display: block;
    font-weight: 700;
    font-family: var(--mgb-font-heading);
    color: var(--mgb-ink);
    margin-bottom: 0.5rem;
}

/* Full-page /register/ role-card grid: large desktop = 4 across, medium desktop/tablet = 2x2,
   mobile = 1 column. */
.mgb-account-role-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
}

@media (max-width: 899px) {
    .mgb-account-role-cards {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .mgb-account-role-cards {
        grid-template-columns: 1fr;
    }
}

/* Wider layout specifically inside the modal (which is rendered substantially wider than the
   full-page form, see .mgb-account-modal__panel below) -- scoped by DOM position, not viewport
   width, so the narrower full-page form is never affected regardless of browser width. */
.mgb-account-modal__pane .mgb-account-role-cards {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
    .mgb-account-modal__pane .mgb-account-role-cards {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 520px) {
    .mgb-account-modal__pane .mgb-account-role-cards {
        grid-template-columns: 1fr;
    }
}

.mgb-account-role-card {
    display: block;
    border: 2px solid var(--mgb-border);
    border-radius: 10px;
    padding: 0.9rem 0.9rem 0.9rem 1rem;
    cursor: pointer;
    position: relative;
    background: #fff;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.mgb-account-role-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(20, 30, 40, 0.08);
}

/* Per-role accent color, keyed off the same data-role attribute the template already renders. */
.mgb-account-role-card[data-role="general"] {
    --role-color: var(--mgb-role-general);
    --role-tint: var(--mgb-role-general-tint);
}
.mgb-account-role-card[data-role="property-owner"] {
    --role-color: var(--mgb-role-property-owner);
    --role-tint: color-mix(in srgb, var(--mgb-role-property-owner) 10%, white);
}
.mgb-account-role-card[data-role="capital-provider"] {
    --role-color: var(--mgb-role-capital-provider);
    --role-tint: color-mix(in srgb, var(--mgb-role-capital-provider) 10%, white);
}
.mgb-account-role-card[data-role="contractor"] {
    --role-color: var(--mgb-role-contractor);
    --role-tint: color-mix(in srgb, var(--mgb-role-contractor) 10%, white);
}

.mgb-account-role-card {
    border-left: 5px solid var(--role-color, var(--mgb-border));
}

.mgb-account-role-card:has(.mgb-account-role-card__input:checked) {
    border-color: var(--role-color);
    background: var(--role-tint);
    box-shadow: 0 0 0 1px var(--role-color), 0 4px 12px rgba(20, 30, 40, 0.1);
}

.mgb-account-role-card__input {
    position: absolute;
    top: 1rem;
    left: 0.9rem;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.mgb-account-role-card__input:focus-visible ~ .mgb-account-role-card__body .mgb-account-role-card__mark {
    outline: 2px solid var(--role-color, var(--mgb-brand-primary));
    outline-offset: 2px;
}

.mgb-account-role-card__body {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.mgb-account-role-card__mark {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 0.15rem;
    border-radius: 50%;
    border: 2px solid var(--role-color, var(--mgb-border));
    background: #fff;
    position: relative;
    transition: background-color 0.15s ease;
}

.mgb-account-role-card__input:checked ~ .mgb-account-role-card__body .mgb-account-role-card__mark {
    background: var(--role-color);
}

.mgb-account-role-card__input:checked ~ .mgb-account-role-card__body .mgb-account-role-card__mark::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.mgb-account-role-card__text {
    display: block;
}

.mgb-account-role-card__label {
    display: block;
    font-weight: 700;
    color: var(--mgb-ink);
}

.mgb-account-role-card__description {
    display: block;
    font-size: 0.82rem;
    line-height: 1.35;
    color: #556;
    margin-top: 0.2rem;
}

.mgb-account-legal {
    background: var(--mgb-surface-tint);
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
}

.mgb-account-legal label {
    font-weight: 400;
    font-size: 0.9rem;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.mgb-account-legal input[type="checkbox"] {
    margin-top: 0.15rem;
    width: 16px;
    height: 16px;
    accent-color: var(--mgb-brand-primary);
}

/* Software Terms of Service trigger -- a real, visible link, not a plain <a href> to nowhere. */
.mgb-account-link-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-weight: 700;
    color: var(--mgb-brand-primary);
    text-decoration: underline;
    cursor: pointer;
}

.mgb-account-link-button:hover {
    color: var(--mgb-brand-primary-dark);
}

.mgb-account-link-button:focus-visible {
    outline: 2px solid var(--mgb-brand-primary);
    outline-offset: 2px;
}

.mgb-account-button {
    width: 100%;
    padding: 0.8rem 1rem;
    background: var(--mgb-brand-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1.02rem;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.mgb-account-button:hover {
    background: var(--mgb-brand-primary-dark);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--mgb-brand-primary) 35%, transparent);
}

.mgb-account-button:active {
    transform: translateY(1px);
}

.mgb-account-button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--mgb-brand-primary) 45%, white);
    outline-offset: 2px;
}

.mgb-account-honeypot-wrap {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    height: 0;
    overflow: hidden;
}

/* Modal */

.mgb-account-modal[hidden] {
    display: none;
}

.mgb-account-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    font-family: system-ui, sans-serif;
    color: var(--mgb-ink);
}

.mgb-account-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 30, 40, 0.55);
}

.mgb-account-modal__panel {
    position: relative;
    background: #fff;
    border-radius: 18px;
    border-top: 6px solid var(--mgb-brand-primary);
    padding: 2rem 2.5rem 2.25rem;
    max-width: min(1000px, 94vw);
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 24px 70px rgba(10, 15, 20, 0.35);
}

.mgb-account-modal__close {
    position: absolute;
    top: 0.9rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: #889;
    transition: color 0.15s ease;
}

.mgb-account-modal__close:hover {
    color: var(--mgb-ink);
}

.mgb-account-modal__panel .mgb-account-brand-header {
    margin-bottom: 1rem;
}

.mgb-account-modal__tabs {
    display: flex;
    gap: 0.4rem;
    margin: 0 auto 1.5rem;
    max-width: 420px;
    background: var(--mgb-surface-tint);
    border-radius: 999px;
    padding: 0.3rem;
    border-bottom: none;
}

.mgb-account-modal__tab {
    flex: 1;
    padding: 0.6rem 1rem;
    background: none;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.95rem;
    color: #556;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.mgb-account-modal__tab[aria-selected="true"] {
    background: #fff;
    color: var(--mgb-brand-primary);
    box-shadow: 0 2px 6px rgba(20, 30, 40, 0.12);
}

.mgb-account-modal__pane {
    display: none;
}

.mgb-account-modal__pane.is-active {
    display: block;
}

.mgb-account-modal__pane[data-mgb-pane="login"] {
    max-width: 420px;
    margin: 0 auto;
}

.mgb-account-password-recovery {
    text-align: right;
    font-size: 0.85rem;
    margin: -0.5rem 0 1rem;
}

.mgb-account-fallback-link {
    text-align: center;
    font-size: 0.85rem;
    margin-top: 1.25rem;
    color: #556;
}

/* Software Terms of Service viewer -- reuses the same .mgb-account-modal panel chrome (width,
   padding, radius, shadow) so no new modal size/appearance is introduced; only stacks above the
   main auth modal (higher z-index) so it displays correctly on top when opened from within it. */
.mgb-account-terms-modal {
    z-index: 100001;
}

.mgb-account-terms-modal .mgb-account-modal__panel {
    max-width: min(720px, 92vw);
}

.mgb-account-terms-modal__scroll {
    max-height: 55vh;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.mgb-account-terms-modal__scroll h3 {
    font-family: var(--mgb-font-heading);
    color: var(--mgb-ink);
    margin-bottom: 0.25rem;
}

.mgb-account-terms-modal__scroll p {
    color: #445;
    line-height: 1.5;
    margin-top: 0;
}

.mgb-account-terms-modal__actions {
    text-align: right;
    margin-top: 1rem;
}

.mgb-account-terms-modal__actions .mgb-account-button {
    width: auto;
    padding: 0.6rem 1.5rem;
}