/* MxM v4.1.0 — Welcome / Register / Login form polish.
 * Mode-aware: default = day/light, body.mxm-glassy-dark = dark.
 * `mxm-glassy-dark` is added/removed by themes/wondertag/javascript/mxm-glassy.js
 * whenever WoWonder's night-mode-css link is injected/removed.
 * Scoped strictly to `.mxm-register-card` so vendor welcome layout is untouched.
 */

/* ============================================================
   MxM Welcome page — minimal surgical overrides.
   Strategy: leave vendor layout intact, just (1) collapse the
   page from `height: 100%` to natural content height so the
   hero and login form sit close together, (2) hide the bloat
   sections, (3) swap welcome.jpg for the brand aurora, (4) skin
   the login card with MxM dark glass + brand-blue glow.
   No grids, no padding rewrites, no positioning hacks.
   ============================================================ */

/* (1) Vendor sets `.tag_stup_welcome { height: 100% }` which stretches
 *     the wrapper to fill the viewport, pushing children apart. Let it
 *     collapse to its natural content height. */
.tag_stup_welcome { height: auto !important; }

/* (2) Hide bloat sections (marketing widgets, profile carousels, the
 *     rotated white slab — all pure vertical waste for MxM's tone). */
.tag_stup_welcome .tag_stup_feats,
.tag_stup_welcome .tag_stup_trend_widget,
.tag_stup_welcome .tag_stup_trend_effect_circle,
.tag_stup_welcome .tag_stup_trend_effect,
.tag_stup_welcome .tag_stup_explore_prnt,
.tag_stup_welcome .tag_wel_widget,
.tag_stup_welcome .mxm-gallery,
.tag_stup_welcome .tag_pro_users,
.tag_stup_welcome .tag_boost_help,
.tag_stup_welcome .ad-placement-header-footer,
.tag_stup_welcome .tag_wel_upper:after,
.tag_stup_welcome .tag_stup_hdr img[src*="welcomeseal"] {
    display: none !important;
}

/* (3) Replace welcome.jpg with a slow rotating brand-color aurora.
 *     Scaled to 2.2× so its rotating disc edges stay well outside the
 *     .tag_wel_upper bounds — vendor's overflow:hidden clips cleanly. */
.tag_stup_welcome .tag_wel_upper {
    background-color: var(--header-background, #161830);
    overflow: hidden !important;
}
.tag_stup_welcome .tag_wel_upper:before {
    content: '' !important;
    background-image: conic-gradient(
        from 0deg at 50% 50%,
        rgba(47, 56, 255, 0.00)  0deg,
        rgba(47, 56, 255, 0.50)  60deg,
        rgba(107, 124, 255, 0.40) 110deg,
        rgba(183, 108, 255, 0.45) 165deg,
        rgba(47, 56, 255, 0.00)  220deg,
        rgba(47, 56, 255, 0.42)  260deg,
        rgba(107, 124, 255, 0.35) 305deg,
        rgba(183, 108, 255, 0.40) 340deg,
        rgba(47, 56, 255, 0.00)  360deg
    ) !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    opacity: 1 !important;
    animation: mxmWelcomeSweep 75s linear infinite !important;
    transform-origin: 50% 50% !important;
    will-change: transform;
    z-index: -1 !important;
    pointer-events: none !important;
}
@keyframes mxmWelcomeSweep {
    from { transform: scale(2.2) rotate(0deg); }
    to   { transform: scale(2.2) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .tag_stup_welcome .tag_wel_upper:before { animation: none !important; }
}

/* (3b) Light typographic polish + intentional spacing between blocks. */
.tag_stup_welcome .tag_stup_hdr {
    padding-top: 8px !important;
    padding-bottom: 14px !important;
}
.tag_stup_welcome .tag_stup_hdr .tag_wel_title {
    font-size: 34px !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.18 !important;
    margin: 0 auto 18px !important;
    /* Lighter, higher-contrast gradient — white → lavender → soft pink —
     * so it reads cleanly against the blue aurora background. */
    background: linear-gradient(135deg, #ffffff 0%, #d8defc 35%, #c4a8ff 65%, #ffd6f4 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    /* Brand-blue + purple glow halo for legibility + heroic feel. */
    filter:
        drop-shadow(0 0 18px rgba(107, 124, 255, 0.55))
        drop-shadow(0 0 36px rgba(183, 108, 255, 0.35));
    animation: mxmWelcomeSweep2 8s ease-in-out infinite;
}
@keyframes mxmWelcomeSweep2 {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
/* Registration status badge — replaces the verbose "Welcome! ..." paragraph
 * with a sleek live indicator next to a pulsing dot. */
.tag_stup_welcome .tag_stup_hdr h5.mxm-reg-status,
.tag_stup_welcome .tag_stup_hdr h5 {
    margin: 28px 0 14px !important;
    font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.72) !important;
}
.tag_stup_welcome .tag_stup_hdr h5 a {
    color: inherit !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.tag_stup_welcome .mxm-reg-status-flag {
    display: inline-block;
    padding: 4px 12px 4px 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.20);
    font-weight: 800;
    letter-spacing: 0.20em;
    position: relative;
}
.tag_stup_welcome .mxm-reg-status-flag::before {
    content: '';
    position: absolute;
    left: 10px; top: 50%;
    width: 7px; height: 7px;
    border-radius: 50%;
    transform: translateY(-50%);
    animation: mxmRegStatusPulse 1.8s ease-in-out infinite;
}
.tag_stup_welcome .mxm-reg-status-flag--open {
    color: #6bff9e !important;
    border-color: rgba(34, 197, 94, 0.45);
    background: rgba(34, 197, 94, 0.10);
}
.tag_stup_welcome .mxm-reg-status-flag--open::before {
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.85);
}
.tag_stup_welcome .mxm-reg-status-flag--limited {
    color: #ffb35a !important;
    border-color: rgba(249, 115, 22, 0.45);
    background: rgba(249, 115, 22, 0.10);
}
.tag_stup_welcome .mxm-reg-status-flag--limited::before {
    background: #f97316;
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.85);
}
@keyframes mxmRegStatusPulse {
    0%, 100% { transform: translateY(-50%) scale(1);    opacity: 0.95; }
    50%      { transform: translateY(-50%) scale(1.25); opacity: 1; }
}
/* The vendor "Welcome! Registration is open..." paragraph is now redundant
 * with the live status pill above — kill it. */
.tag_stup_welcome .tag_stup_hdr p { display: none !important; }

.tag_stup_welcome .tag_wel_middle {
    padding-top: 88px !important;
    padding-bottom: 80px !important;
}
.tag_stup_welcome .tag_stup_login .wow_content.tag_auth_box {
    padding: 26px 24px 22px !important;
}
/* Add a smidge of overall page height so nothing gets clipped at the
 * top/bottom of the hero + form stack. */
.tag_stup_welcome { min-height: 92vh; }

/* ============================================================
   Community stats bar — sleek monospace pills above the login.
   ============================================================ */
.tag_stup_welcome .mxm-welcome-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 0;
    max-width: 440px;
    margin: 0 auto 18px;
    padding: 12px 6px;
    background: rgba(15, 17, 40, 0.45);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(107, 124, 255, 0.22);
    border-radius: 14px;
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.tag_stup_welcome .mxm-welcome-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 2px;
}
.tag_stup_welcome .mxm-welcome-stat + .mxm-welcome-stat::before {
    content: '';
    position: absolute;
    left: 0; top: 18%; bottom: 18%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.18), transparent);
}
.tag_stup_welcome .mxm-welcome-stat-num {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 800 18px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.02em;
    color: #f4f5ff;
    text-shadow: 0 0 16px rgba(107, 124, 255, 0.30);
}
.tag_stup_welcome .mxm-welcome-stat-label {
    font: 700 9.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(244, 245, 255, 0.52);
}

/* Online Now — green pulsing dot to signal liveness. */
.tag_stup_welcome .mxm-welcome-stat--live .mxm-welcome-stat-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.85);
    animation: mxmStatLivePulse 1.6s ease-in-out infinite;
}
.tag_stup_welcome .mxm-welcome-stat--live .mxm-welcome-stat-num {
    color: #6bff9e;
}
@keyframes mxmStatLivePulse {
    0%, 100% { transform: scale(1);    opacity: 0.9; }
    50%      { transform: scale(1.25); opacity: 1; }
}

@media (max-width: 560px) {
    .tag_stup_welcome .mxm-welcome-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 340px;
        padding: 10px 4px;
    }
    .tag_stup_welcome .mxm-welcome-stat {
        padding: 6px 2px;
    }
    /* Reset cross-column divider; only show between columns within a row,
     * not between rows. */
    .tag_stup_welcome .mxm-welcome-stat + .mxm-welcome-stat::before { display: none; }
    .tag_stup_welcome .mxm-welcome-stat:nth-child(even)::before {
        content: '';
        position: absolute;
        left: 0; top: 18%; bottom: 18%;
        width: 1px;
        background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    }
    .tag_stup_welcome .mxm-welcome-stat-num   { font-size: 16px; }
    .tag_stup_welcome .mxm-welcome-stat-label { font-size: 9px; letter-spacing: 0.18em; }
}
@media (max-width: 600px) {
    .tag_stup_welcome .tag_stup_hdr .tag_wel_title { font-size: 24px !important; margin-bottom: 14px !important; }
    .tag_stup_welcome .tag_stup_hdr h5 { font-size: 10px !important; margin: 12px 0 6px !important; }
    .tag_stup_welcome .tag_stup_hdr p { font-size: 12.5px !important; }
}
.tag_stup_welcome .tag_stup_hdr p a { color: #b76cff !important; font-weight: 700; }
.tag_stup_welcome .tag_stup_hdr br { display: none !important; }

/* (4) Login card — MxM dark glass + brand-blue glow. */
.tag_stup_welcome .tag_stup_login .wow_content.tag_auth_box {
    background: rgba(15, 17, 40, 0.62) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    border: 1px solid rgba(107, 124, 255, 0.30) !important;
    border-radius: 20px !important;
    box-shadow:
        0 16px 50px rgba(0, 0, 0, 0.40),
        0 0 28px rgba(47, 56, 255, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    color: #f4f5ff !important;
}
.tag_stup_welcome .tag_stup_login .tag_field input,
.tag_stup_welcome .tag_stup_login .tag_field select {
    background: rgba(0, 0, 0, 0.30) !important;
    color: #f4f5ff !important;
    border: 1px solid rgba(107, 124, 255, 0.22) !important;
    border-radius: 12px !important;
}
.tag_stup_welcome .tag_stup_login .tag_field input:focus,
.tag_stup_welcome .tag_stup_login .tag_field select:focus {
    border-color: #6b7cff !important;
    background: rgba(0, 0, 0, 0.42) !important;
    box-shadow: 0 0 0 3px rgba(107, 124, 255, 0.18) !important;
    outline: none !important;
}
.tag_stup_welcome .tag_stup_login .tag_field > span {
    color: rgba(244, 245, 255, 0.55) !important;
}
.tag_stup_welcome .tag_stup_login .tag_wel_btn {
    background: linear-gradient(135deg, #2f38ff 0%, #6b7cff 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    box-shadow: 0 6px 18px rgba(47, 56, 255, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
.tag_stup_welcome .tag_stup_login a { color: #8a9aff !important; }
.tag_stup_welcome .tag_stup_login a:hover { color: #b76cff !important; }

/* ============================================================
   REGISTER CARD WIDER + SECTIONED LAYOUT
   ============================================================ */
.mxm-register-card,
.mxm-register-card * {
    font-family: 'Carrois Gothic', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
.mxm-register-card {
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative !important;
    isolation: isolate !important;
}

/* ============================================================
   Birthday gate — the form below birthday is locked until the
   applicant confirms their date of birth. The lock banner is a
   sibling of the gated section so the gate's filter/opacity
   can't propagate down to it.
   ============================================================ */
.mxm-register-card .mxm-form-gate-wrap {
    position: relative;
}
.mxm-register-card .mxm-form-gate-banner {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #2f38ff 0%, #6b7cff 100%);
    color: #fff;
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: 0 8px 22px rgba(47, 56, 255, 0.45);
    z-index: 10;
    pointer-events: none;
    white-space: nowrap;
    transition: opacity .35s ease, transform .35s ease;
}
.mxm-register-card .mxm-form-gate-banner svg { flex-shrink: 0; }

.mxm-register-card .mxm-form-gate {
    opacity: 0.35;
    filter: grayscale(0.4) blur(1px);
    pointer-events: none;
    user-select: none;
    transition: opacity .4s ease, filter .4s ease;
}
#register.mxm-birthday-set .mxm-form-gate {
    opacity: 1;
    filter: none;
    pointer-events: auto;
    user-select: auto;
}
#register.mxm-birthday-set .mxm-form-gate-banner {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px);
}

@media (max-width: 600px) {
    .mxm-register-card .mxm-form-gate-banner {
        font-size: 11px;
        padding: 7px 14px;
        white-space: normal;
        line-height: 1.4;
        max-width: calc(100% - 24px);
        text-align: center;
    }
}

/* Section status dot — red pulse when incomplete, green pulse when done. */
.mxm-section-status {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #ef4444;
    margin-right: 10px;
    vertical-align: middle;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.75);
    animation: mxmSectionPulseRed 1.8s ease-in-out infinite;
    flex-shrink: 0;
}
.mxm-priv-section.mxm-section-complete .mxm-section-status {
    background: #22c55e;
    animation: mxmSectionPulseGreen 1.8s ease-in-out infinite;
}
@keyframes mxmSectionPulseRed {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.75); }
    50%      { box-shadow: 0 0 0 9px rgba(239, 68, 68, 0); }
}
@keyframes mxmSectionPulseGreen {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.85); }
    50%      { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .mxm-section-status { animation: none; }
}

/* Heroic shimmering neon outline around the registration container.
 * Uses CSS @property animated custom property + background-clip dual layer
 * (no mask-composite, no overflow tricks — robust across browsers, no
 * stray rendering across the page).
 */
@property --mxm-shimmer-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
.mxm-register-card {
    border: 2.5px solid transparent !important;
    background:
        linear-gradient(rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.86)) padding-box,
        conic-gradient(
            from var(--mxm-shimmer-angle),
            transparent 0deg,
            rgba(47, 56, 255, 0.20) 18deg,
            #6b7cff 32deg,
            #2f38ff 50deg,
            #6b7cff 68deg,
            rgba(47, 56, 255, 0.20) 82deg,
            transparent 110deg,
            transparent 200deg,
            rgba(47, 56, 255, 0.20) 218deg,
            #6b7cff 232deg,
            #2f38ff 250deg,
            #6b7cff 268deg,
            rgba(47, 56, 255, 0.20) 282deg,
            transparent 310deg,
            transparent 360deg
        ) border-box !important;
    box-shadow:
        0 0 0 1px rgba(47, 56, 255, 0.06),
        0 0 28px rgba(47, 56, 255, 0.28),
        0 18px 56px rgba(47, 56, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    animation: mxmShimmerSpin 8s linear infinite;
}
@keyframes mxmShimmerSpin {
    to { --mxm-shimmer-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
    .mxm-register-card { animation: none; }
}

/* ---- Day/dark mode smooth color transitions across the form ---- */
.mxm-register-card,
.mxm-register-card .mxm-priv-section,
.mxm-register-card .mxm-priv-section-icon,
.mxm-register-card .mxm-priv-section-title,
.mxm-register-card .mxm-priv-section-head,
.mxm-register-card .mxm-priv-intro,
.mxm-register-card .mxm-priv-row,
.mxm-register-card .mxm-priv-row-label,
.mxm-register-card .mxm-priv-row-help,
.mxm-register-card .mxm-priv-select,
.mxm-register-card .mxm-priv-input,
.mxm-register-card .mxm-priv-textarea,
.mxm-register-card .tag_field input,
.mxm-register-card .tag_field select,
.mxm-register-card .tag_field textarea,
.mxm-register-card .tag_field > span,
.mxm-register-card .helper-text,
.mxm-register-card .helper-text li,
.mxm-register-card .helper-text li::before,
.mxm-register-card .round-check label,
.mxm-register-card .errors,
.mxm-register-card .alert,
.mxm-register-card .mxm-register-hero,
.mxm-register-card .mxm-register-hero-sub,
.mxm-register-card .mxm-register-cover,
.mxm-register-card .mxm-register-cover-overlay,
.mxm-register-card .mxm-register-avatar,
.mxm-register-card .mxm-register-photos-hint,
.mxm-register-card a {
    transition:
        background-color .35s ease,
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        filter .35s ease !important;
}
.mxm-register-card .mxm-priv-intro {
    margin: 0 0 18px !important;
    font-size: 13.5px !important;
    color: rgba(29, 34, 64, 0.62) !important;
}

/* ============================================================
   DECLARE YOUR FETISH COMMUNITY — glowing CTA + modal
   ============================================================ */
.mxm-register-card .mxm-declare-section {
    background: linear-gradient(135deg, rgba(47,56,255,0.06) 0%, rgba(183,108,255,0.06) 100%) !important;
    border-color: rgba(47, 56, 255, 0.18) !important;
    padding: 22px 24px !important;
}
.mxm-fetish-declare {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    padding: 18px 24px;
    background: linear-gradient(135deg, #2f38ff 0%, #6b7cff 50%, #b76cff 100%);
    background-size: 220% 220%;
    color: #fff;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    text-align: left;
    box-shadow:
        0 6px 22px rgba(47, 56, 255, 0.40),
        0 0 28px rgba(183, 108, 255, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    animation: mxmDeclareGlow 6s ease-in-out infinite;
    transition: transform .15s ease, box-shadow .25s ease, filter .15s ease;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.mxm-fetish-declare::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: mxmDeclareShine 5s ease-in-out 1.5s infinite;
    pointer-events: none;
}
.mxm-fetish-declare:hover {
    transform: translateY(-2px);
    box-shadow:
        0 10px 30px rgba(47, 56, 255, 0.55),
        0 0 36px rgba(183, 108, 255, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    filter: brightness(1.04);
}
.mxm-fetish-declare--filled {
    box-shadow:
        0 6px 22px rgba(34, 197, 94, 0.30),
        0 0 28px rgba(34, 197, 94, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
@keyframes mxmDeclareGlow {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
@keyframes mxmDeclareShine {
    0%   { transform: translateX(-100%); }
    50%  { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
    .mxm-fetish-declare, .mxm-fetish-declare::after { animation: none; }
}

.mxm-fetish-declare-icon {
    flex-shrink: 0;
    width: 52px; height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.22);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
}
.mxm-fetish-declare-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.mxm-fetish-declare-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.85;
}
.mxm-fetish-declare-title {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.05;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.mxm-fetish-declare-value {
    font-size: 13.5px;
    margin-top: 6px;
    opacity: 0.92;
    font-weight: 500;
}
.mxm-fetish-declare-hint {
    margin: 12px 4px 0 !important;
    font-size: 12.5px !important;
    color: rgba(29, 34, 64, 0.62) !important;
    text-align: center !important;
}

/* Modal */
.mxm-fetish-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 18px;
}
.mxm-fetish-modal[hidden] { display: none !important; }
.mxm-fetish-modal-overlay {
    position: absolute; inset: 0;
    background: rgba(15, 17, 40, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.mxm-fetish-modal-card {
    position: relative;
    z-index: 1;
    width: 100%; max-width: 480px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    border: 1px solid rgba(47, 56, 255, 0.18);
    border-radius: 22px;
    padding: 28px 26px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
    animation: mxmFetishModalIn .25s ease-out;
}
@keyframes mxmFetishModalIn {
    from { transform: translateY(12px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.mxm-fetish-modal-head {
    text-align: center;
    margin-bottom: 18px;
    position: relative;
}
.mxm-fetish-modal-icon {
    display: inline-flex;
    width: 56px; height: 56px;
    align-items: center; justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, #2f38ff 0%, #6b7cff 50%, #b76cff 100%);
    color: #fff;
    margin-bottom: 10px;
    box-shadow: 0 4px 14px rgba(47, 56, 255, 0.32);
}
.mxm-fetish-modal-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin: 0 0 4px;
    background: linear-gradient(135deg, #2f38ff 0%, #6b7cff 50%, #b76cff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.mxm-fetish-modal-sub {
    margin: 0;
    font-size: 13.5px;
    color: rgba(29, 34, 64, 0.65);
}
.mxm-fetish-modal-close {
    position: absolute;
    top: -8px; right: -8px;
    background: none; border: 0;
    font-size: 28px; line-height: 1;
    cursor: pointer;
    color: rgba(29, 34, 64, 0.55);
    padding: 4px 12px;
}
.mxm-fetish-modal-close:hover { color: #2f38ff; }
.mxm-fetish-modal-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* Community options: each gets its own NFC card color as a left stripe + hover tint. */
.mxm-fetish-option {
    --mxm-community-color: #2f38ff;
    --mxm-community-light: #6b7cff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 14px 22px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-left: 6px solid var(--mxm-community-color);
    border-radius: 12px;
    cursor: pointer;
    color: #1d2240;
    font-size: 14.5px;
    font-weight: 600;
    text-align: left;
    transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.mxm-fetish-option:hover {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.85) 0%,
        color-mix(in srgb, var(--mxm-community-color) 14%, transparent) 100%);
    border-color: var(--mxm-community-light);
    border-left-color: var(--mxm-community-color);
    transform: translateX(3px);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--mxm-community-color) 22%, transparent);
}
.mxm-fetish-option-check {
    color: var(--mxm-community-color);
    opacity: 0;
    transition: opacity .15s ease;
}
.mxm-fetish-option.is-selected {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--mxm-community-color) 16%, white) 0%,
        color-mix(in srgb, var(--mxm-community-light) 22%, white) 100%);
    border-color: var(--mxm-community-color);
    box-shadow: 0 4px 18px color-mix(in srgb, var(--mxm-community-color) 30%, transparent);
}
.mxm-fetish-option.is-selected .mxm-fetish-option-check { opacity: 1; }
.mxm-fetish-option-label {
    flex: 1;
    padding-right: 12px;
    line-height: 1.3;
}

/* "None of These" — neutral graphite, no community color. */
.mxm-fetish-option--none {
    --mxm-community-color: #6b7290;
    --mxm-community-light: #8a92ad;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 6px;
    padding-top: 16px;
    background: rgba(0, 0, 0, 0.03);
    color: rgba(29, 34, 64, 0.72);
    font-style: italic;
    font-weight: 500;
}
body.mxm-glassy-dark .mxm-fetish-option--none {
    border-top-color: rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.18);
    color: rgba(244, 245, 255, 0.62);
}

/* Dark mode for declare + modal */
body.mxm-glassy-dark .mxm-register-card .mxm-declare-section {
    background: linear-gradient(135deg, rgba(47,56,255,0.14) 0%, rgba(183,108,255,0.12) 100%) !important;
    border-color: rgba(107, 124, 255, 0.30) !important;
}
body.mxm-glassy-dark .mxm-fetish-declare-hint { color: rgba(244, 245, 255, 0.62) !important; }
body.mxm-glassy-dark .mxm-fetish-modal-card {
    background: rgba(15, 17, 40, 0.86);
    border-color: rgba(107, 124, 255, 0.30);
    color: #f4f5ff;
}
body.mxm-glassy-dark .mxm-fetish-modal-title {
    background: linear-gradient(135deg, #ffffff 0%, #d8defc 50%, #b8b0ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}
body.mxm-glassy-dark .mxm-fetish-modal-sub { color: rgba(244, 245, 255, 0.62); }
body.mxm-glassy-dark .mxm-fetish-modal-close { color: rgba(244, 245, 255, 0.55); }
body.mxm-glassy-dark .mxm-fetish-modal-close:hover { color: #8a9aff; }
body.mxm-glassy-dark .mxm-fetish-option {
    background: rgba(0, 0, 0, 0.30);
    border-color: rgba(255, 255, 255, 0.06);
    border-left-color: var(--mxm-community-color);
    color: #f4f5ff;
}
body.mxm-glassy-dark .mxm-fetish-option:hover {
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.35) 0%,
        color-mix(in srgb, var(--mxm-community-color) 28%, transparent) 100%);
    border-color: var(--mxm-community-light);
    border-left-color: var(--mxm-community-color);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--mxm-community-color) 35%, transparent);
}
body.mxm-glassy-dark .mxm-fetish-option.is-selected {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--mxm-community-color) 32%, transparent) 0%,
        color-mix(in srgb, var(--mxm-community-light) 28%, transparent) 100%);
    border-color: var(--mxm-community-light);
    box-shadow: 0 4px 18px color-mix(in srgb, var(--mxm-community-color) 45%, transparent);
}
body.mxm-glassy-dark .mxm-fetish-option-check { color: var(--mxm-community-light); }

@media (max-width: 600px) {
    .mxm-fetish-declare { padding: 16px 18px; gap: 14px; }
    .mxm-fetish-declare-icon { width: 44px; height: 44px; }
    .mxm-fetish-declare-title { font-size: 17px; letter-spacing: 0.10em; }
    .mxm-fetish-declare-eyebrow { font-size: 10px; }
    .mxm-fetish-declare-value { font-size: 12.5px; }
}

/* ---- Hero: centered logo + animated all-caps title ---- */
.mxm-register-hero {
    text-align: center;
    padding: 22px 16px 38px;
    margin: 0 0 32px;
    border-bottom: 1px solid rgba(47, 56, 255, 0.10);
    position: relative;
}
.mxm-register-hero::after {
    content: '';
    position: absolute;
    left: 50%; bottom: -1px;
    width: 120px; height: 2px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, #2f38ff, transparent);
    opacity: 0.55;
}
.mxm-register-hero-logo {
    /* inline-flex + line-height:0 + font-size:0 so the anchor's bounding
     * box matches the inner <img> exactly. Otherwise inline-block adds
     * a tiny line-height descender and the shimmer ::after sees a slightly
     * taller rectangle than the logo silhouette — that's the "box" effect. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    font-size: 0;
    position: relative;
    margin: 0 0 18px;
    filter: drop-shadow(0 8px 24px rgba(47, 56, 255, 0.28));
    transition: transform .25s ease, filter .25s ease;
    isolation: isolate;
}
.mxm-register-hero-logo:hover {
    transform: translateY(-2px);
    filter: drop-shadow(0 12px 28px rgba(47, 56, 255, 0.40));
}
.mxm-register-hero-logo img {
    max-height: 140px;
    width: auto;
    display: block;
}
/* Same metallic shimmer treatment as the welcome / capture-screen logos —
 * mask-image clips the streak to the logo silhouette so no rectangle. */
.mxm-register-hero-logo-shimmer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        65deg,
        transparent 38%,
        rgba(255, 255, 255, 0.00) 44%,
        rgba(255, 255, 255, 0.70) 50%,
        rgba(255, 255, 255, 0.00) 56%,
        transparent 62%
    );
    background-size: 220% 100%;
    background-position: 220% 0;
    -webkit-mask-image: var(--mxm-register-logo-url);
            mask-image: var(--mxm-register-logo-url);
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    animation: mxmRegisterHeroLogoShimmer 14s linear infinite;
}
@keyframes mxmRegisterHeroLogoShimmer {
    from { background-position: 220% 0; }
    to   { background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .mxm-register-hero-logo-shimmer { animation: none; }
}
@media (max-width: 600px) {
    .mxm-register-hero-logo img { max-height: 96px !important; }
}
.mxm-register-hero-title {
    font-size: 32px !important;
    font-weight: 900 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    margin: 0 0 10px !important;
    background: linear-gradient(135deg, #2f38ff 0%, #6b7cff 35%, #b76cff 65%, #2f38ff 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    animation: mxmHeroShimmer 7s ease-in-out infinite;
    line-height: 1.1;
}
@keyframes mxmHeroShimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
.mxm-register-hero-sub {
    margin: 14px auto 0 !important;
    max-width: 520px;
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    color: rgba(29, 34, 64, 0.72) !important;
    font-weight: 400 !important;
    padding: 0 8px !important;
}

/* Hide the now-redundant default title since the hero replaces it. */
.mxm-register-card form > .title { display: none !important; }

@media (max-width: 600px) {
    .mxm-register-hero { padding: 16px 8px 28px; margin-bottom: 22px; }
    .mxm-register-hero-logo { margin-bottom: 14px; }
    .mxm-register-hero-logo img { max-height: 80px; }
    .mxm-register-hero-title {
        font-size: 22px !important;
        letter-spacing: 0.14em !important;
    }
    .mxm-register-hero-sub {
        font-size: 13px !important;
        line-height: 1.55 !important;
        margin-top: 10px !important;
    }
    .mxm-register-card .mxm-priv-section {
        padding: 20px 18px;
        margin-bottom: 18px;
    }
}
.mxm-register-card .mxm-priv-section {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(47, 56, 255, 0.10);
    border-radius: 18px;
    padding: 26px 28px;
    margin-bottom: 26px;
}
.mxm-register-card .mxm-priv-section-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 20px; padding-bottom: 16px;
    border-bottom: 1px solid rgba(47, 56, 255, 0.08);
}
.mxm-register-card .mxm-priv-section-icon {
    width: 32px; height: 32px;
    background: linear-gradient(135deg, rgba(47,56,255,0.14), rgba(183,108,255,0.14));
    color: #2f38ff;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
}
.mxm-register-card .mxm-priv-section-title {
    margin: 0;
    font-size: 14.5px; font-weight: 700;
    letter-spacing: 0.02em;
    color: #1d2240;
}
.mxm-register-card .mxm-priv-row {
    display: flex; gap: 16px; align-items: flex-start;
    padding: 10px 0;
    border-top: 1px solid rgba(47, 56, 255, 0.06);
}
.mxm-register-card .mxm-priv-row:first-of-type { border-top: none; padding-top: 0; }
.mxm-register-card .mxm-priv-row-text { flex: 1; min-width: 0; }
.mxm-register-card .mxm-priv-row-label {
    font-size: 13.5px; font-weight: 600; color: #1d2240; margin-bottom: 2px;
}
.mxm-register-card .mxm-priv-row-help {
    font-size: 12px; color: rgba(29, 34, 64, 0.55); line-height: 1.45;
}
.mxm-register-card .mxm-priv-row-control {
    flex-shrink: 0; min-width: 200px;
}
.mxm-register-card .mxm-priv-select {
    width: 100% !important;
    padding: 9px 32px 9px 12px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    color: #1d2240 !important;
    border: 1px solid rgba(47, 56, 255, 0.18) !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%232f38ff' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
}
.mxm-register-card .mxm-priv-select:focus {
    outline: none !important;
    border-color: #2f38ff !important;
    box-shadow: 0 0 0 3px rgba(47, 56, 255, 0.16) !important;
    background-color: rgba(255, 255, 255, 1) !important;
}
/* ============================================================
   Foot Size — inline-in-priv-row variant (registration only).
   The label + help are rendered by the standard .mxm-priv-row
   wrapper. Inside .mxm-priv-row-control we stack the tabs on top
   of the dropdown so nothing collides with the help text.
   ============================================================ */
.mxm-register-card .mxm-foot-size--inline {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.mxm-register-card .mxm-foot-size--inline .mxm-foot-size-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: rgba(47, 56, 255, 0.10);
    border-radius: 999px;
    align-self: flex-end;
    line-height: 1;
}
.mxm-register-card .mxm-foot-size--inline .mxm-foot-size-select {
    /* Standard .mxm-priv-select styling already handles size/chevron. */
    width: 100% !important;
}
.mxm-register-card .mxm-foot-size--inline .mxm-foot-size-tab {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(29, 34, 64, 0.65) !important;
    opacity: 0.85;
    cursor: pointer;
    line-height: 1.2;
    box-shadow: none !important;
    width: auto !important;
    margin: 0 !important;
    transition: background .18s ease, color .18s ease, opacity .18s ease, box-shadow .18s ease;
}
.mxm-register-card .mxm-foot-size--inline .mxm-foot-size-tab:hover {
    opacity: 1;
    background: rgba(47, 56, 255, 0.16) !important;
    transform: none !important;
}
.mxm-register-card .mxm-foot-size--inline .mxm-foot-size-tab.is-active {
    background: linear-gradient(135deg, #2f38ff 0%, #6b7cff 100%) !important;
    color: #fff !important;
    opacity: 1;
    box-shadow: 0 2px 6px rgba(47, 56, 255, 0.32) !important;
}

/* Dark mode for the inline foot-size widget. */
body.mxm-glassy-dark .mxm-register-card .mxm-foot-size--inline .mxm-foot-size-tabs {
    background: rgba(255, 255, 255, 0.08);
}
body.mxm-glassy-dark .mxm-register-card .mxm-foot-size--inline .mxm-foot-size-tab {
    color: rgba(244, 245, 255, 0.62) !important;
}
body.mxm-glassy-dark .mxm-register-card .mxm-foot-size--inline .mxm-foot-size-tab:hover {
    background: rgba(107, 124, 255, 0.20) !important;
}

/* Plain inputs / textareas inside priv-row controls (Additional section). */
.mxm-register-card .mxm-priv-input,
.mxm-register-card .mxm-priv-textarea {
    width: 100% !important;
    padding: 9px 12px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    color: #1d2240 !important;
    border: 1px solid rgba(47, 56, 255, 0.18) !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, color .25s ease !important;
}
.mxm-register-card .mxm-priv-textarea {
    min-height: 78px !important;
    resize: vertical !important;
    font-family: inherit !important;
}
.mxm-register-card .mxm-priv-input:focus,
.mxm-register-card .mxm-priv-textarea:focus {
    outline: none !important;
    border-color: #2f38ff !important;
    box-shadow: 0 0 0 3px rgba(47, 56, 255, 0.16) !important;
    background-color: rgba(255, 255, 255, 1) !important;
}
.mxm-register-card .mxm-priv-input::placeholder,
.mxm-register-card .mxm-priv-textarea::placeholder {
    color: rgba(29, 34, 64, 0.40) !important;
}
.mxm-register-card .mxm-register-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
@media (max-width: 600px) {
    .mxm-register-card .mxm-register-grid-2 { grid-template-columns: 1fr; }
    .mxm-register-card .mxm-priv-row { flex-direction: column; gap: 8px; }
    .mxm-register-card .mxm-priv-row-control { min-width: 0; width: 100%; }
}

/* ---- Photos hero ---- */
.mxm-register-photos {
    position: relative;
    margin: 0 -4px 12px;
}
.mxm-register-cover {
    display: block;
    position: relative;
    width: 100%;
    height: 170px;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(47,56,255,0.12), rgba(183,108,255,0.12));
    border: 1px dashed rgba(47, 56, 255, 0.30);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.mxm-register-cover:hover { border-color: #6b7cff; }
.mxm-register-cover img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.mxm-register-cover-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    color: #2f38ff;
    font-size: 13px; font-weight: 600;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity .2s ease;
}
.mxm-register-cover-overlay svg { color: currentColor; }
.mxm-register-cover-overlay.mxm-register-photo-filled {
    opacity: 0;
}
.mxm-register-cover:hover .mxm-register-cover-overlay.mxm-register-photo-filled {
    opacity: 1;
}

.mxm-register-avatar {
    position: absolute;
    bottom: -28px; left: 20px;
    width: 88px; height: 88px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #6b7cff, #b76cff);
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    cursor: pointer;
}
/* Avatar required state: pulsing glow ring until a photo is picked. */
.mxm-register-avatar[data-required="true"] {
    box-shadow:
        0 4px 14px rgba(0,0,0,0.18),
        0 0 0 3px rgba(47, 56, 255, 0.20),
        0 0 18px rgba(47, 56, 255, 0.55);
    animation: mxmAvatarRequiredPulse 2.4s ease-in-out infinite;
}
.mxm-register-avatar[data-required="filled"] {
    box-shadow: 0 4px 14px rgba(0,0,0,0.18), 0 0 0 3px rgba(34, 197, 94, 0.30);
    animation: none;
}
@keyframes mxmAvatarRequiredPulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,0.18), 0 0 0 3px rgba(47, 56, 255, 0.20), 0 0 18px rgba(47, 56, 255, 0.45); }
    50%      { box-shadow: 0 4px 14px rgba(0,0,0,0.18), 0 0 0 5px rgba(47, 56, 255, 0.35), 0 0 28px rgba(47, 56, 255, 0.70); }
}

/* Photo labels below the hero — clearly call out required vs optional. */
.mxm-photo-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 36px 4px 6px;
    padding: 0 6px;
    gap: 12px;
}
.mxm-photo-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.mxm-photo-label-name {
    font-size: 12.5px;
    font-weight: 600;
    color: #1d2240;
    opacity: 0.85;
}
.mxm-photo-flag {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
}
.mxm-photo-flag--required {
    background: linear-gradient(135deg, #2f38ff 0%, #6b7cff 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(47, 56, 255, 0.40);
}
.mxm-photo-flag--optional {
    background: rgba(127, 127, 127, 0.14);
    color: rgba(29, 34, 64, 0.62);
}
.mxm-photo-optional {
    font-weight: 400;
    opacity: 0.7;
    font-size: 11.5px;
    margin-left: 4px;
}

@media (max-width: 600px) {
    .mxm-photo-labels {
        margin: 32px 2px 4px;
        padding: 0 2px;
        gap: 8px;
    }
    .mxm-photo-label { gap: 5px; }
    .mxm-photo-label-name { font-size: 10.5px; }
    .mxm-photo-flag {
        font-size: 8.5px;
        padding: 2px 7px;
        letter-spacing: 0.10em;
    }
}

/* Username live-validation helper. Overrides vendor welcome.css which
 * hides all `.helper-text` by default (it expects JS to slideDown into view). */
.mxm-username-helper {
    display: block !important;
    margin: -6px 0 14px !important;
    padding: 10px 14px !important;
    list-style: none;
}
.mxm-username-helper li {
    list-style: none;
    margin-left: 0 !important;
}
.mxm-username-helper li.available { color: rgba(29, 34, 64, 0.42); }
.mxm-username-helper li.available::before { color: rgba(29, 34, 64, 0.30); }
.mxm-username-helper li.available.valid { color: #16a34a; }
.mxm-username-helper li.available.valid::before { content: '●'; color: #16a34a; }
.mxm-register-avatar img {
    width: 100%; height: 100%; object-fit: cover;
}
.mxm-register-avatar-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.30);
    transition: opacity .2s ease;
}
.mxm-register-avatar-overlay.mxm-register-photo-filled { opacity: 0; }
.mxm-register-avatar:hover .mxm-register-avatar-overlay.mxm-register-photo-filled { opacity: 1; }
.mxm-register-photos-hint {
    margin: 38px 0 0 !important;
    font-size: 11.5px !important;
    color: rgba(29, 34, 64, 0.55) !important;
    text-align: center !important;
}

/* Captcha row */
.mxm-register-captcha {
    margin: 14px 0;
    display: flex;
    justify-content: center;
}

/* ============================================================
   DAY MODE (default)
   ============================================================ */
.mxm-register-card,
.mxm-register-card {
    background: rgba(255, 255, 255, 0.86) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
    border: 1px solid rgba(47, 56, 255, 0.12) !important;
    border-radius: 22px !important;
    padding: 32px 30px 28px !important;
    box-shadow:
        0 16px 50px rgba(47, 56, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    color: #1d2240 !important;
}

.mxm-register-card .title {
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em !important;
    margin: 0 0 14px !important;
    background: linear-gradient(135deg, #2f38ff 0%, #6b7cff 50%, #b76cff 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    animation: mxmWelcomeShimmer 8s ease-in-out infinite;
}
@keyframes mxmWelcomeShimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* Fields ------------------------------------------------------- */
.mxm-register-card .tag_field {
    position: relative !important;
    margin-bottom: 14px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
.mxm-register-card .tag_field input,
.mxm-register-card .tag_field select,
.mxm-register-card .tag_field textarea {
    width: 100% !important;
    padding: 20px 14px 8px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    color: #1d2240 !important;
    border: 1px solid rgba(47, 56, 255, 0.18) !important;
    border-radius: 12px !important;
    font-size: 14.5px !important;
    line-height: 1.4 !important;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease !important;
}
.mxm-register-card .tag_field select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%232f38ff' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    padding-right: 38px !important;
}
.mxm-register-card .tag_field input:focus,
.mxm-register-card .tag_field select:focus,
.mxm-register-card .tag_field textarea:focus {
    border-color: #2f38ff !important;
    background: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 0 0 3px rgba(47, 56, 255, 0.16) !important;
    outline: none !important;
}
.mxm-register-card .tag_field input::placeholder,
.mxm-register-card .tag_field textarea::placeholder {
    color: rgba(29, 34, 64, 0.40) !important;
}

/* Floating labels --------------------------------------------- */
.mxm-register-card .tag_field > span {
    position: absolute !important;
    left: 14px !important;
    top: 14px !important;
    color: rgba(29, 34, 64, 0.55) !important;
    font-size: 14.5px !important;
    pointer-events: none !important;
    transition: top .15s ease, font-size .15s ease, color .15s ease, letter-spacing .15s ease !important;
    background: transparent !important;
}
.mxm-register-card .tag_field input:focus + span,
.mxm-register-card .tag_field input:not(:placeholder-shown) + span,
.mxm-register-card .tag_field select:focus + span,
.mxm-register-card .tag_field select:valid + span,
.mxm-register-card .tag_field textarea:focus + span,
.mxm-register-card .tag_field textarea:not(:placeholder-shown) + span {
    top: 5px !important;
    font-size: 10px !important;
    color: #2f38ff !important;
    letter-spacing: 0.10em !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* Buttons ----------------------------------------------------- */
.mxm-register-card .btn,
.mxm-register-card .btn-main,
.mxm-register-card button[type="submit"],
.mxm-register-card .tag_btn {
    background: linear-gradient(135deg, #2f38ff 0%, #6b7cff 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 13px 28px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    width: 100% !important;
    box-shadow: 0 4px 14px rgba(47, 56, 255, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    transition: transform .15s ease, box-shadow .2s ease, filter .15s ease !important;
    margin-top: 8px !important;
}
.mxm-register-card .btn:hover,
.mxm-register-card button[type="submit"]:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 22px rgba(47, 56, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    filter: brightness(1.04) !important;
}

/* Password complexity helper --------------------------------- */
.mxm-register-card .helper-text {
    margin: 8px 0 14px;
    padding: 12px 14px;
    background: rgba(47, 56, 255, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(47, 56, 255, 0.10);
}
.mxm-register-card .helper-text li {
    font-size: 12px;
    color: rgba(29, 34, 64, 0.62);
    padding: 2px 0;
    padding-left: 18px;
    position: relative;
}
.mxm-register-card .helper-text li::before {
    content: '○';
    position: absolute;
    left: 0;
    color: rgba(29, 34, 64, 0.35);
}
.mxm-register-card .helper-text li.valid { color: #16a34a; }
.mxm-register-card .helper-text li.valid::before { content: '●'; color: #16a34a; }

/* Terms checkbox row ----------------------------------------- */
.mxm-register-card .round-check {
    margin: 14px 0 8px;
}
.mxm-register-card .round-check label {
    color: rgba(29, 34, 64, 0.78) !important;
    font-size: 13px !important;
    cursor: pointer;
}
.mxm-register-card .round-check input[type="checkbox"] {
    accent-color: #2f38ff;
    margin-right: 6px;
}

/* Links + small text ----------------------------------------- */
.mxm-register-card a {
    color: #2f38ff !important;
    font-weight: 600;
}
.mxm-register-card a:hover { color: #b76cff !important; }
.mxm-register-card .text-muted,
.mxm-register-card .tag_have_account,
.mxm-register-card small {
    color: rgba(29, 34, 64, 0.55) !important;
}

/* Error banner ----------------------------------------------- */
.mxm-register-card .errors,
.mxm-register-card .alert {
    background: rgba(220, 38, 38, 0.06) !important;
    border: 1px solid rgba(220, 38, 38, 0.25) !important;
    color: #b91c1c !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    margin-bottom: 14px !important;
}
.mxm-register-card .errors:empty,
.mxm-register-card .alert:empty { display: none !important; }


/* ============================================================
   DARK MODE — flips when body.mxm-glassy-dark is added by
   mxm-glassy.js (driven by WoWonder's night-mode-css link).
   ============================================================ */
body.mxm-glassy-dark .mxm-register-card,
body.mxm-glassy-dark .mxm-register-card {
    background: rgba(15, 17, 40, 0.62) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow:
        0 16px 50px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    color: #f4f5ff !important;
}

/* Heroic shimmer — dark mode swap. Same animation, opaque-dark interior. */
body.mxm-glassy-dark .mxm-register-card {
    background:
        linear-gradient(rgba(15, 17, 40, 0.92), rgba(15, 17, 40, 0.92)) padding-box,
        conic-gradient(
            from var(--mxm-shimmer-angle),
            transparent 0deg,
            rgba(107, 124, 255, 0.28) 18deg,
            #8a9aff 32deg,
            #6b7cff 50deg,
            #8a9aff 68deg,
            rgba(107, 124, 255, 0.28) 82deg,
            transparent 110deg,
            transparent 200deg,
            rgba(107, 124, 255, 0.28) 218deg,
            #8a9aff 232deg,
            #6b7cff 250deg,
            #8a9aff 268deg,
            rgba(107, 124, 255, 0.28) 282deg,
            transparent 310deg,
            transparent 360deg
        ) border-box !important;
    box-shadow:
        0 0 0 1px rgba(107, 124, 255, 0.10),
        0 0 32px rgba(107, 124, 255, 0.40),
        0 18px 56px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
body.mxm-glassy-dark .mxm-register-card .title {
    background: linear-gradient(135deg, #ffffff 0%, #d8defc 50%, #b8b0ff 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

body.mxm-glassy-dark .mxm-register-card .tag_field input,
body.mxm-glassy-dark .mxm-register-card .tag_field select,
body.mxm-glassy-dark .mxm-register-card .tag_field textarea {
    background: rgba(0, 0, 0, 0.30) !important;
    color: #f4f5ff !important;
    border-color: rgba(107, 124, 255, 0.22) !important;
}
body.mxm-glassy-dark .mxm-register-card .tag_field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236b7cff' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
}
body.mxm-glassy-dark .mxm-register-card .tag_field input:focus,
body.mxm-glassy-dark .mxm-register-card .tag_field select:focus,
body.mxm-glassy-dark .mxm-register-card .tag_field textarea:focus {
    border-color: #6b7cff !important;
    background: rgba(0, 0, 0, 0.42) !important;
    box-shadow: 0 0 0 3px rgba(107, 124, 255, 0.18) !important;
}
body.mxm-glassy-dark .mxm-register-card .tag_field input::placeholder,
body.mxm-glassy-dark .mxm-register-card .tag_field textarea::placeholder {
    color: rgba(244, 245, 255, 0.42) !important;
}
body.mxm-glassy-dark .mxm-register-card .tag_field > span {
    color: rgba(244, 245, 255, 0.55) !important;
}
body.mxm-glassy-dark .mxm-register-card .tag_field input:focus + span,
body.mxm-glassy-dark .mxm-register-card .tag_field input:not(:placeholder-shown) + span,
body.mxm-glassy-dark .mxm-register-card .tag_field select:focus + span,
body.mxm-glassy-dark .mxm-register-card .tag_field select:valid + span,
body.mxm-glassy-dark .mxm-register-card .tag_field textarea:focus + span,
body.mxm-glassy-dark .mxm-register-card .tag_field textarea:not(:placeholder-shown) + span {
    color: #8a9aff !important;
}

body.mxm-glassy-dark .mxm-register-card .helper-text {
    background: rgba(0, 0, 0, 0.22);
    border-color: rgba(255, 255, 255, 0.06);
}
body.mxm-glassy-dark .mxm-register-card .helper-text li {
    color: rgba(244, 245, 255, 0.55);
}
body.mxm-glassy-dark .mxm-register-card .helper-text li::before {
    color: rgba(244, 245, 255, 0.35);
}
body.mxm-glassy-dark .mxm-register-card .helper-text li.valid { color: #6bff9e; }
body.mxm-glassy-dark .mxm-register-card .helper-text li.valid::before { color: #6bff9e; }

body.mxm-glassy-dark .mxm-register-card .round-check label {
    color: rgba(244, 245, 255, 0.78) !important;
}
body.mxm-glassy-dark .mxm-register-card .round-check input[type="checkbox"] {
    accent-color: #6b7cff;
}

body.mxm-glassy-dark .mxm-register-card a { color: #8a9aff !important; }
body.mxm-glassy-dark .mxm-register-card a:hover { color: #b76cff !important; }
body.mxm-glassy-dark .mxm-register-card .text-muted,
body.mxm-glassy-dark .mxm-register-card .tag_have_account,
body.mxm-glassy-dark .mxm-register-card small {
    color: rgba(244, 245, 255, 0.55) !important;
}

body.mxm-glassy-dark .mxm-register-card .errors,
body.mxm-glassy-dark .mxm-register-card .alert {
    background: rgba(255, 80, 80, 0.10) !important;
    border-color: rgba(255, 80, 80, 0.30) !important;
    color: #ffb3b3 !important;
}

/* ---- Register card sectioned layout in dark mode ---- */
body.mxm-glassy-dark .mxm-register-card .mxm-priv-intro {
    color: rgba(244, 245, 255, 0.62) !important;
}
body.mxm-glassy-dark .mxm-register-card .mxm-priv-section {
    background: rgba(0, 0, 0, 0.22);
    border-color: rgba(255, 255, 255, 0.08);
}
body.mxm-glassy-dark .mxm-register-card .mxm-priv-section-head {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.mxm-glassy-dark .mxm-register-card .mxm-priv-section-icon {
    background: linear-gradient(135deg, rgba(107,124,255,0.20), rgba(183,108,255,0.18));
    color: #c4c9ff;
}
body.mxm-glassy-dark .mxm-register-card .mxm-priv-section-title {
    color: #f4f5ff !important;
}
body.mxm-glassy-dark .mxm-register-card .mxm-priv-row {
    border-top-color: rgba(255, 255, 255, 0.06);
}
body.mxm-glassy-dark .mxm-register-card .mxm-priv-row-label {
    color: #f4f5ff !important;
}
body.mxm-glassy-dark .mxm-register-card .mxm-priv-row-help {
    color: rgba(244, 245, 255, 0.55) !important;
}
body.mxm-glassy-dark .mxm-register-card .mxm-priv-select {
    background-color: rgba(0, 0, 0, 0.30) !important;
    color: #f4f5ff !important;
    border-color: rgba(107, 124, 255, 0.22) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236b7cff' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
}
body.mxm-glassy-dark .mxm-register-card .mxm-priv-select:focus {
    border-color: #6b7cff !important;
    background-color: rgba(0, 0, 0, 0.42) !important;
    box-shadow: 0 0 0 3px rgba(107, 124, 255, 0.18) !important;
}
body.mxm-glassy-dark .mxm-register-card .mxm-priv-input,
body.mxm-glassy-dark .mxm-register-card .mxm-priv-textarea {
    background: rgba(0, 0, 0, 0.30) !important;
    color: #f4f5ff !important;
    border-color: rgba(107, 124, 255, 0.22) !important;
}
body.mxm-glassy-dark .mxm-register-card .mxm-priv-input:focus,
body.mxm-glassy-dark .mxm-register-card .mxm-priv-textarea:focus {
    border-color: #6b7cff !important;
    background-color: rgba(0, 0, 0, 0.42) !important;
    box-shadow: 0 0 0 3px rgba(107, 124, 255, 0.18) !important;
}
body.mxm-glassy-dark .mxm-register-card .mxm-priv-input::placeholder,
body.mxm-glassy-dark .mxm-register-card .mxm-priv-textarea::placeholder {
    color: rgba(244, 245, 255, 0.40) !important;
}

/* Photos hero in dark mode */
body.mxm-glassy-dark .mxm-register-cover {
    background: linear-gradient(135deg, rgba(47,56,255,0.18), rgba(183,108,255,0.18));
    border-color: rgba(107, 124, 255, 0.40);
}
body.mxm-glassy-dark .mxm-register-cover-overlay {
    background: rgba(15, 17, 40, 0.55);
    color: #c4c9ff;
}
body.mxm-glassy-dark .mxm-register-avatar {
    border-color: rgba(15, 17, 40, 0.85);
}
body.mxm-glassy-dark .mxm-register-photos-hint {
    color: rgba(244, 245, 255, 0.55) !important;
}
body.mxm-glassy-dark .mxm-photo-label-name {
    color: #f4f5ff !important;
}
body.mxm-glassy-dark .mxm-photo-flag--optional {
    background: rgba(255, 255, 255, 0.10);
    color: rgba(244, 245, 255, 0.65);
}
body.mxm-glassy-dark .mxm-username-helper li.available {
    color: rgba(244, 245, 255, 0.42);
}
body.mxm-glassy-dark .mxm-username-helper li.available::before {
    color: rgba(244, 245, 255, 0.30);
}
body.mxm-glassy-dark .mxm-register-avatar[data-required="true"] {
    box-shadow:
        0 4px 14px rgba(0,0,0,0.30),
        0 0 0 3px rgba(107, 124, 255, 0.30),
        0 0 18px rgba(107, 124, 255, 0.60);
}

/* Hero in dark mode */
body.mxm-glassy-dark .mxm-register-hero {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.mxm-glassy-dark .mxm-register-hero-logo {
    filter: drop-shadow(0 8px 24px rgba(107, 124, 255, 0.40));
}
body.mxm-glassy-dark .mxm-register-hero-logo:hover {
    filter: drop-shadow(0 12px 30px rgba(107, 124, 255, 0.55));
}
body.mxm-glassy-dark .mxm-register-hero-sub {
    color: rgba(244, 245, 255, 0.65) !important;
}
body.mxm-glassy-dark .mxm-register-hero-title {
    background: linear-gradient(135deg, #6b7cff 0%, #b76cff 35%, #ffffff 50%, #b76cff 65%, #6b7cff 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}