@import url("base.css?v=20260828-hero-display-fix-v4");
@import url("components.css?v=20260727-full-audit-v1");
@import url("member-shell.css?v=20260727-full-audit-v1");
@import url("dashboard.css?v=20260920-support-center-v3");
@import url("profile-editor.css?v=20260727-full-audit-v1");

/* ===== Unified Mate icon system ===== */
.mate-ui-icon {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    overflow: visible;
    vertical-align: -0.18em;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
.mate-ui-icon .mate-ui-icon-fill {
    fill: currentColor;
    stroke: currentColor;
}
.menu-item-icon,
.overview-tab-icon,
.feature-icon,
.mobile-nav-icon,
.mobile-floating-submenu-icon,
.mockup-dropdown-profile-icon,
.desktop-session-icon,
.footer-profile-menu-icon,
.profile-toggle-chevron,
.menu-action-icon {
    display: inline-grid;
    place-items: center;
}
.menu-item-icon .mate-ui-icon,
.mockup-dropdown-profile-icon .mate-ui-icon,
.desktop-session-icon .mate-ui-icon,
.footer-profile-menu-icon .mate-ui-icon { width: 20px; height: 20px; }
.menu-caret .mate-ui-icon,
.profile-toggle-chevron .mate-ui-icon { width: 15px; height: 15px; stroke-width: 2.1; }
.mockup-upgrade-btn .mate-ui-icon,
.mockup-member-badge .mate-ui-icon { width: 16px; height: 16px; }
.mockup-notification .mate-ui-icon { width: 21px; height: 21px; }
.overview-tab-icon .mate-ui-icon { width: 23px; height: 23px; }
.dashboard-feature-card .feature-icon .mate-ui-icon { width: 25px; height: 25px; }
.member-info-item i .mate-ui-icon { width: 18px; height: 18px; }
.profile-edit-tab .mate-ui-icon { width: 18px; height: 18px; }
.education-summary-icon .mate-ui-icon,
.personality-summary-icon .mate-ui-icon,
.interest-summary-icon .mate-ui-icon,
.partner-summary-icon .mate-ui-icon,
.single-personality-icon .mate-ui-icon,
.single-interest-icon .mate-ui-icon,
.single-partner-icon .mate-ui-icon { width: 22px; height: 22px; }
.education-save-badge .mate-ui-icon,
.personality-save-badge .mate-ui-icon,
.interest-save-badge .mate-ui-icon,
.partner-save-badge .mate-ui-icon,
.about-verified-chip .mate-ui-icon,
.checkout-benefits .mate-ui-icon { width: 16px; height: 16px; }
.recovery-icon .mate-ui-icon,
.about-heart-mark .mate-ui-icon { width: 34px; height: 34px; }
.mate-footer-social .mate-ui-icon { width: 20px; height: 20px; }
.mate-payment-trust { display: flex; align-items: center; justify-content: center; gap: 8px; }
.mate-payment-trust .mate-ui-icon { width: 18px; height: 18px; }
.delete-section-icon .mate-ui-icon, .delete-shield .mate-ui-icon, .delete-modal-icon .mate-ui-icon { width: 24px; height: 24px; }
.ui-icon .mate-ui-icon { width: 20px; height: 20px; }
.icon-password-toggle {
    width: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 12px !important;
}
.icon-password-toggle .password-toggle-icon { display: inline-grid; place-items: center; }
.icon-password-toggle .password-toggle-icon .mate-ui-icon { width: 19px; height: 19px; }
.icon-password-toggle .password-toggle-hide { display: none; }
.icon-password-toggle[aria-pressed="true"] .password-toggle-show { display: none; }
.icon-password-toggle[aria-pressed="true"] .password-toggle-hide { display: inline-grid; }
.icon-button .mate-ui-icon { width: 21px; height: 21px; }
.page-arrow { display: inline-flex; align-items: center; gap: 7px; }
.page-arrow .mate-ui-icon { width: 16px; height: 16px; }

@media (hover: hover) {
    .side-menu-links a:hover .mate-ui-icon,
    .side-menu-parent:hover .mate-ui-icon,
    .desktop-tablet-nav a:hover .mate-ui-icon,
    .mockup-profile-dropdown a:hover .mate-ui-icon {
        transform: translateY(-1px);
    }
}
.side-menu-links .mate-ui-icon,
.desktop-tablet-nav .mate-ui-icon,
.mockup-profile-dropdown .mate-ui-icon,
.mobile-header-menu .mate-ui-icon,
.mobile-floating-user-menu .mate-ui-icon {
    transition: transform .18s ease, color .18s ease, stroke-width .18s ease;
}
.side-menu-links .active .mate-ui-icon,
.side-menu-parent.active .mate-ui-icon,
.mobile-header-menu-link.active .mate-ui-icon,
.mobile-floating-user-menu .active .mate-ui-icon {
    stroke-width: 2.15;
}

/* ===== Refined Chat and Profile icons in the floating mobile menu ===== */
@media (max-width: 820px) {
    .mobile-floating-user-menu .mobile-nav-icon {
        display: inline-grid !important;
        place-items: center;
        width: 34px !important;
        height: 34px !important;
        border: 1px solid rgba(190, 24, 93, 0.16) !important;
        border-radius: 14px !important;
        background: linear-gradient(135deg, #fff1f7, #f6f0ff) !important;
        color: #be185d !important;
        box-shadow: 0 8px 18px rgba(190, 24, 93, 0.12) !important;
        transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease !important;
    }

    .mobile-floating-user-menu .mobile-nav-icon svg {
        width: 19px;
        height: 19px;
        overflow: visible;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .mobile-floating-user-menu .mobile-chat-icon svg path:nth-child(2) {
        stroke-width: 2.5;
    }

    .mobile-floating-user-menu .mobile-chat-menu-link:hover .mobile-nav-icon,
    .mobile-floating-user-menu .mobile-chat-menu-link:focus-visible .mobile-nav-icon,
    .mobile-floating-profile-menu.open .mobile-floating-profile-toggle .mobile-nav-icon,
    .mobile-floating-profile-toggle:focus-visible .mobile-nav-icon {
        color: #ffffff !important;
        border-color: transparent !important;
        background: linear-gradient(135deg, #ec407a, #7c3aed) !important;
        box-shadow: 0 10px 24px rgba(190, 24, 93, 0.24) !important;
        transform: translateY(-1px);
    }

    .mobile-floating-profile-toggle > .mobile-profile-header-icon.mobile-nav-icon {
        font-family: inherit !important;
        font-size: 0 !important;
        line-height: 0 !important;
    }
}

/* ===== Mobile menu: icon-only website navigation aligned with logo ===== */
.mobile-header-menu {
    display: none;
}

@media (max-width: 820px) {
    .site-header[data-authenticated-member-header="true"],
    .member-mobile-header,
    .public-mobile-header.logged-in-mobile-header,
    body.is-authenticated-member > .site-header,
    .public-mobile-header,
    .centralized-menu-header {
        display: flex !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 4900 !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 60px !important;
        padding: 8px 10px !important;
        gap: 12px !important;
    }

    .centralized-menu-header .brand,
    .public-mobile-header .brand,
    .member-mobile-header .brand {
        display: inline-flex !important;
        align-items: center !important;
        flex: 0 1 96px !important;
        min-width: 72px !important;
        max-width: 104px !important;
    }

    .centralized-menu-header .brand img,
    .public-mobile-header .brand img,
    .member-mobile-header .brand img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-height: 42px !important;
        object-fit: contain !important;
    }

    .site-header .mobile-header-menu,
    .centralized-menu-header .mobile-header-menu {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        column-gap: 8px !important;
        row-gap: 8px !important;
        margin-left: auto !important;
        overflow: visible !important;
    }

    .mobile-header-menu-link {
        display: inline-grid !important;
        place-items: center !important;
        flex: 0 0 31px !important;
        width: 31px !important;
        height: 31px !important;
        min-width: 31px !important;
        padding: 0 !important;
        border: 1px solid rgba(190, 24, 93, 0.14) !important;
        border-radius: 10px !important;
        background: linear-gradient(135deg, #fff8fb, #f8f4ff) !important;
        color: #9d174d !important;
        box-shadow: 0 5px 14px rgba(126, 34, 206, 0.08) !important;
        text-decoration: none !important;
        line-height: 1 !important;
        transition: transform .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease !important;
    }

    .mobile-header-menu-link svg {
        width: 16px !important;
        height: 16px !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 1.8 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }

    .mobile-header-menu-link.active,
    .mobile-header-menu-link:hover,
    .mobile-header-menu-link:focus-visible {
        border-color: transparent !important;
        background: linear-gradient(135deg, #ec407a, #7c3aed) !important;
        color: #fff !important;
        box-shadow: 0 8px 18px rgba(190, 24, 93, 0.22) !important;
        transform: translateY(-1px) !important;
        outline: none !important;
    }

    .centralized-menu-header .desktop-tablet-nav,
    .centralized-menu-header .mockup-topbar-actions,
    .centralized-menu-header .mobile-header-icon {
        display: none !important;
    }

    body.is-authenticated-member {
        padding-top: 0 !important;
    }

    /* Anchor targets remain visible below the sticky logged-in mobile header. */
    #interest-list,
    #chat-panel,
    #profile-update,
    #profile-setting-section {
        scroll-margin-top: 76px !important;
    }

    .mobile-floating-user-menu > a.active,
    .mobile-floating-user-menu > a[aria-current="page"] {
        background: linear-gradient(135deg, #fff1f7, #f6f0ff) !important;
        color: #be185d !important;
        box-shadow: inset 0 0 0 1px rgba(190, 24, 93, 0.12) !important;
    }

    .mobile-floating-user-menu > a.active .mobile-nav-icon,
    .mobile-floating-user-menu > a[aria-current="page"] .mobile-nav-icon {
        color: #ffffff !important;
        border-color: transparent !important;
        background: linear-gradient(135deg, #ec407a, #7c3aed) !important;
        box-shadow: 0 10px 24px rgba(190, 24, 93, 0.24) !important;
    }
}

@media (max-width: 359px) {
    .centralized-menu-header .brand,
    .public-mobile-header .brand,
    .member-mobile-header .brand {
        flex-basis: 78px !important;
        max-width: 82px !important;
    }

    .mobile-header-menu {
        column-gap: 5px !important;
        row-gap: 5px !important;
    }

    .mobile-header-menu-link {
        flex-basis: 28px !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        border-radius: 9px !important;
    }

    .mobile-header-menu-link svg {
        width: 15px !important;
        height: 15px !important;
    }
}

@media (min-width: 821px) {
    .site-header .mobile-header-menu,
    .centralized-menu-header .mobile-header-menu {
        display: none !important;
    }
}

/* ===== Logged-in mobile header utilities: Booster, Notification and Search-only Filter ===== */
@media (max-width: 820px) {
    .mobile-header-menu-button {
        appearance: none !important;
        -webkit-appearance: none !important;
        font: inherit !important;
        cursor: pointer !important;
    }

    .mobile-match-filter-dialog {
        width: min(92vw, 410px);
        max-width: 410px;
        padding: 0;
        border: 0;
        border-radius: 22px;
        background: #fff;
        color: #2d1b35;
        box-shadow: 0 28px 70px rgba(47, 16, 65, .28);
    }

    .mobile-match-filter-dialog::backdrop {
        background: rgba(35, 15, 45, .62);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    .mobile-match-filter-form {
        display: grid;
        gap: 16px;
        padding: 20px;
    }

    .mobile-match-filter-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
    }

    .mobile-match-filter-head h2 {
        margin: 3px 0 0;
        font-size: 1.35rem;
    }

    .mobile-match-filter-close {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #fff1f7;
        color: #9d174d;
        font-size: 1.45rem;
        line-height: 1;
        cursor: pointer;
    }

    .mobile-match-filter-form > label:not(.mobile-match-filter-check) {
        display: grid;
        gap: 7px;
        font-weight: 700;
        color: #4b2f53;
    }

    .mobile-match-filter-form select {
        width: 100%;
        min-height: 44px;
        padding: 0 12px;
        border: 1px solid rgba(157, 23, 77, .18);
        border-radius: 12px;
        background: #fffafd;
        color: #3c2445;
        font: inherit;
    }

    .mobile-match-filter-check {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 12px;
        border: 1px solid rgba(157, 23, 77, .12);
        border-radius: 12px;
        background: linear-gradient(135deg, #fff8fb, #faf7ff);
        color: #4b2f53;
        font-weight: 650;
    }

    .mobile-match-filter-check input {
        width: 18px;
        height: 18px;
        accent-color: #be185d;
    }

    .mobile-match-filter-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 2px;
    }

    .mobile-match-filter-actions .btn {
        justify-content: center;
        text-align: center;
    }
}


/* ===== Canonical Profile icon across logged-in website and mobile menus ===== */
/* Profile-avatar thumbnails used as navigation icons in the desktop User Menu and mobile floating menu. */
.profile-avatar-navigation-icon {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    background: #f8edf5 !important;
}

.profile-avatar-navigation-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    border-radius: inherit !important;
    object-fit: cover !important;
    border: 0 !important;
}

.centralized-user-menu .profile-avatar-navigation-icon {
    width: 32px !important;
    height: 32px !important;
    border: 2px solid rgba(190, 24, 93, 0.16) !important;
    box-shadow: 0 6px 15px rgba(83, 36, 90, 0.10) !important;
}

.centralized-user-menu .side-menu-parent:hover .profile-avatar-navigation-icon,
.centralized-user-menu .side-menu-parent.active .profile-avatar-navigation-icon,
.centralized-user-menu .side-menu-group.is-open .side-menu-parent .profile-avatar-navigation-icon,
.centralized-user-menu .side-menu-group.is-hover-open .side-menu-parent .profile-avatar-navigation-icon,
.centralized-user-menu .side-menu-group.is-click-open .side-menu-parent .profile-avatar-navigation-icon {
    border-color: rgba(255, 255, 255, 0.82) !important;
    background: #ffffff !important;
}

.mobile-floating-profile-toggle > .profile-avatar-navigation-icon.mobile-nav-icon {
    width: 34px !important;
    height: 34px !important;
    padding: 2px !important;
    border: 1px solid rgba(236, 64, 122, 0.20) !important;
    background: linear-gradient(135deg, #fff1f7, #f3e8ff) !important;
    box-shadow: 0 8px 18px rgba(236, 64, 122, 0.14) !important;
}

.mobile-floating-profile-toggle > .profile-avatar-navigation-icon .mobile-floating-profile-avatar {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
}

.mobile-floating-profile-menu.open .mobile-floating-profile-toggle > .profile-avatar-navigation-icon,
.mobile-floating-profile-toggle:focus-visible > .profile-avatar-navigation-icon,
.mobile-floating-profile-toggle.active > .profile-avatar-navigation-icon {
    border-color: rgba(255, 255, 255, 0.88) !important;
    background: linear-gradient(135deg, #ec407a, #7c3aed) !important;
}

.mate-profile-menu-icon {
    display: block;
    width: 1.15em;
    height: 1.15em;
    overflow: visible;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.centralized-user-menu .user-menu-profile-header-icon,
.mockup-profile-dropdown .mockup-dropdown-profile-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    color: currentColor;
    font-family: inherit !important;
    font-size: 1rem !important;
    line-height: 1 !important;
}

.centralized-user-menu .user-menu-profile-header-icon .mate-profile-menu-icon {
    width: 19px;
    height: 19px;
}

.mockup-profile-dropdown .mockup-dropdown-profile-icon {
    width: 22px;
    height: 22px;
}

.mockup-profile-dropdown .mockup-dropdown-profile-icon .mate-profile-menu-icon {
    width: 18px;
    height: 18px;
}


/* Central session icons: login keeps the directional treatment; logout uses a power circle with a top vertical dash. */
.mate-session-menu-icon {
    width: 19px;
    height: 19px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 180ms ease, filter 180ms ease;
}

.mate-session-menu-icon .mate-session-icon-disc {
    fill: currentColor;
    stroke: none;
    opacity: 0.09;
}

.mate-session-menu-icon .mate-session-icon-ring {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    opacity: 0.95;
}

.mate-session-menu-icon .mate-session-icon-door {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    opacity: 0.72;
}

.mate-session-menu-icon .mate-session-icon-arrow {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.05;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 180ms ease;
}

.mate-session-menu-icon .mate-session-icon-dash {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.15;
    stroke-linecap: round;
    transition: transform 180ms ease, stroke-width 180ms ease;
}

@media (hover: hover) {
    a:hover .mate-session-menu-icon,
    button:hover .mate-session-menu-icon {
        transform: translateY(-1px);
        filter: drop-shadow(0 2px 3px rgba(87, 38, 135, 0.2));
    }

    a:hover .mate-session-menu-icon .mate-session-icon-arrow,
    button:hover .mate-session-menu-icon .mate-session-icon-arrow {
        transform: translateX(0.75px);
    }

    a:hover .mate-session-menu-icon .mate-session-icon-dash,
    button:hover .mate-session-menu-icon .mate-session-icon-dash {
        transform: scaleY(1.08);
        stroke-width: 2.3;
    }
}

.centralized-user-menu .menu-item-icon .mate-session-menu-icon {
    width: 19px;
    height: 19px;
}

.desktop-tablet-nav .menu-item-main {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.desktop-tablet-nav .desktop-session-icon {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    color: currentColor;
}

.desktop-tablet-nav .desktop-session-icon .mate-session-menu-icon,
.mockup-profile-dropdown .mate-session-menu-icon {
    width: 17px;
    height: 17px;
}


.mobile-header-menu-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 100%;
    font-size: .7rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .01em;
    white-space: nowrap;
}

.mobile-header-menu-link .mobile-header-profile-icon,
.mobile-floating-user-menu .mobile-floating-profile-icon {
    width: 19px;
    height: 19px;
}

.mobile-footer .footer-profile-menu-icon {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--primary);
    background: linear-gradient(135deg, #fff1f7, #f6f0ff);
    border: 1px solid rgba(190, 24, 93, 0.16);
}

.mobile-footer .footer-profile-menu-icon .mate-profile-menu-icon {
    width: 18px;
    height: 18px;
}

/* ===== Verified mobile floating menu flows + upward Profile actions ===== */
@media (max-width: 820px) {
    .mobile-floating-profile-menu.profile-active .mobile-floating-profile-toggle,
    .mobile-floating-profile-toggle.active {
        background: linear-gradient(135deg, #fff1f7, #f6f0ff) !important;
        color: #be185d !important;
        box-shadow: inset 0 0 0 1px rgba(190, 24, 93, 0.12) !important;
    }

    .mobile-floating-profile-menu.profile-active .mobile-floating-profile-toggle .mobile-nav-icon,
    .mobile-floating-profile-toggle.active .mobile-nav-icon {
        color: #ffffff !important;
        border-color: transparent !important;
        background: linear-gradient(135deg, #ec407a, #7c3aed) !important;
        box-shadow: 0 10px 24px rgba(190, 24, 93, 0.24) !important;
    }

    .mobile-floating-profile-dropdown.opens-upward {
        right: -2px !important;
        width: min(226px, calc(100vw - 24px)) !important;
    }

    .mobile-floating-profile-dropdown.opens-upward a.active {
        border-color: rgba(190, 24, 93, 0.14) !important;
        background: linear-gradient(135deg, #fff1f7, #f7f1ff) !important;
        color: #be185d !important;
    }

    .mobile-floating-profile-dropdown .mobile-floating-submenu-icon {
        display: inline-grid !important;
        place-items: center !important;
        flex: 0 0 28px !important;
        width: 28px !important;
        height: 28px !important;
        border-radius: 10px !important;
        background: #fff1f7 !important;
        color: #be185d !important;
    }

    .mobile-floating-profile-dropdown .mobile-floating-submenu-icon svg {
        width: 17px !important;
        height: 17px !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 1.8 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }

    .mobile-floating-profile-dropdown .danger-link .mobile-floating-submenu-icon {
        background: #fee2e2 !important;
        color: #dc2626 !important;
    }
}

/* ===== Refined Match icon: two crossed hearts ===== */
.mate-ui-icon-match .mate-match-heart {
    transform-box: fill-box;
    transform-origin: center;
}
.mate-ui-icon-match .mate-match-heart-back {
    opacity: .72;
}
.mate-ui-icon-match .mate-match-heart-front {
    stroke-width: 2.05;
}
.side-menu-parent:hover .mate-ui-icon-match .mate-match-heart-back,
.side-menu-parent.active .mate-ui-icon-match .mate-match-heart-back,
.mobile-floating-user-menu a:hover .mate-ui-icon-match .mate-match-heart-back,
.mobile-floating-user-menu a.active .mate-ui-icon-match .mate-match-heart-back {
    opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
    .side-menu-parent:hover .mate-ui-icon-match .mate-match-heart-back,
    .mobile-floating-user-menu a:hover .mate-ui-icon-match .mate-match-heart-back {
        transform: translate(-.35px, -.2px) rotate(-2deg);
    }
    .side-menu-parent:hover .mate-ui-icon-match .mate-match-heart-front,
    .mobile-floating-user-menu a:hover .mate-ui-icon-match .mate-match-heart-front {
        transform: translate(.35px, .2px) rotate(2deg);
    }
}

/* Declined / blocked member management */
.restriction-lists {
    display: grid;
    gap: 24px;
}

.restriction-group {
    border: 1px solid rgba(104, 69, 152, 0.14);
    border-radius: 20px;
    padding: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,247,255,.92));
    box-shadow: 0 12px 28px rgba(86, 52, 125, .07);
}

.restriction-group-heading,
.restriction-group-heading > div {
    display: flex;
    align-items: center;
}

.restriction-group-heading {
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.restriction-group-heading > div {
    gap: 12px;
    min-width: 0;
}

.restriction-group-heading h3,
.restriction-group-heading p {
    margin: 0;
}

.restriction-group-heading h3 {
    font-size: 1.04rem;
    color: #3f265f;
}

.restriction-group-heading p {
    margin-top: 3px;
    color: #766986;
    font-size: .86rem;
}

.restriction-group-heading > strong {
    min-width: 34px;
    height: 34px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #ec4c8d, #7f55cb);
    font-size: .88rem;
}

.restriction-type-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    border-radius: 14px;
    background: #f7eefc;
    color: #8552bc;
}

.restriction-type-icon .mate-ui-icon {
    width: 22px;
    height: 22px;
}

.restriction-group-blocked .restriction-type-icon {
    background: #fff0f3;
    color: #d44267;
}

.restriction-member-grid {
    gap: 14px;
}

.restriction-member-card {
    border-color: rgba(107, 72, 151, .13);
}

.restriction-meta {
    margin-top: 9px;
}

.restriction-chip.declined-chip {
    background: #f6edff;
    color: #7444ad;
}

.restriction-chip.blocked-chip {
    background: #fff0f3;
    color: #c52d56;
}

.restriction-actions {
    align-items: center;
}

.restriction-actions form {
    margin: 0;
}

.undo-restriction-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #ec4c8d, #7d54c7);
}

.undo-restriction-button:hover,
.undo-restriction-button:focus-visible {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(126, 75, 176, .24);
}

.undo-restriction-button .mate-ui-icon {
    width: 16px;
    height: 16px;
}

.restriction-empty {
    margin: 0;
}

@media (max-width: 640px) {
    .restriction-lists {
        gap: 16px;
    }

    .restriction-group {
        padding: 13px;
        border-radius: 16px;
    }

    .restriction-group-heading {
        align-items: flex-start;
        gap: 10px;
    }

    .restriction-group-heading p {
        font-size: .78rem;
        line-height: 1.4;
    }

    .restriction-type-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        border-radius: 11px;
    }

    .restriction-member-card {
        grid-template-columns: 74px minmax(0, 1fr);
    }

    .restriction-member-card .member-list-photo {
        width: 74px;
        height: 92px;
    }

    .restriction-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .restriction-actions form,
    .restriction-actions .mini-outline {
        width: 100%;
    }

    .undo-restriction-button {
        min-height: 38px;
    }
}

/* ===== Membership packages: Basic / Classic / Prime / Platinum ===== */
.membership-plan-page .paid-membership-plan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 18px;
    margin-top: 20px;
}
.membership-package-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 22px;
    border: 1px solid #eadde9;
    background: #fff;
    box-shadow: 0 12px 32px rgba(91, 50, 102, .07);
}
.membership-package-card.featured {
    border-color: #b84c9e;
    background: linear-gradient(180deg, #fff8fc 0%, #fff 100%);
    box-shadow: 0 16px 38px rgba(181, 31, 117, .13);
}
.membership-package-card.is-current-plan {
    box-shadow: 0 0 0 3px rgba(181, 31, 117, .11), 0 16px 38px rgba(91, 50, 102, .09);
}
.membership-package-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.membership-package-heading > div {
    display: grid;
    gap: 4px;
}
.membership-package-heading span {
    color: #9b6a95;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.membership-package-heading h2 {
    margin: 0;
    color: #38263f;
    font-size: 1.55rem;
}
.membership-package-heading b {
    display: inline-flex;
    padding: 6px 9px;
    border-radius: 999px;
    background: linear-gradient(135deg, #d72878, #8e3fa8);
    color: #fff;
    font-size: .62rem;
    white-space: nowrap;
}
.membership-package-price {
    margin: 16px 0 6px !important;
    color: #a51d6c !important;
    font-size: 1.85rem !important;
}
.membership-package-description {
    min-height: 58px;
    margin: 0 0 15px;
    color: #79677d;
    font-size: .83rem;
    line-height: 1.55;
}
.membership-package-features {
    display: grid;
    gap: 9px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}
.membership-package-features li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #eadfe8;
    font-size: .74rem;
}
.membership-package-features li span {
    color: #8a758a;
}
.membership-package-features li strong {
    margin: 0;
    color: #453348;
    font-size: .74rem;
    text-align: right;
}
.membership-current-plan-label {
    display: inline-flex;
    align-self: flex-start;
    margin: auto 0 10px;
    padding: 6px 9px;
    border-radius: 999px;
    background: #eafff2;
    color: #137a45;
    font-size: .68rem;
    font-weight: 900;
}
.membership-package-action {
    width: 100%;
    margin-top: auto;
}
.basic-fallback-note {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 18px 0 4px;
    padding: 16px 18px;
    border: 1px solid #ead7e5;
    border-radius: 16px;
    background: #fff8fc;
}
.basic-fallback-note > span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
    background: #f3e5f6;
    color: #983d9e;
}
.basic-fallback-note strong {
    display: block;
    margin-bottom: 4px;
    color: #452d49;
}
.basic-fallback-note p {
    margin: 0;
    color: #7e687e;
    font-size: .8rem;
    line-height: 1.55;
}
.membership-booster-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr);
    align-items: center;
    gap: 24px;
    margin-top: 22px;
    background: linear-gradient(135deg, #fff9fd, #f6edfa);
}
.membership-booster-copy h2 {
    margin: 10px 0 8px;
    color: #39243f;
}
.membership-booster-copy p {
    margin: 0;
    color: #786479;
    line-height: 1.6;
}
.membership-booster-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}
.membership-booster-facts span {
    padding: 8px 11px;
    border-radius: 12px;
    background: #fff;
    color: #765c79;
    font-size: .75rem;
}
.membership-booster-facts strong {
    color: #a01f71;
}
.membership-booster-action {
    display: grid;
    gap: 8px;
}
.membership-booster-action .btn {
    width: 100%;
}
.membership-booster-action .btn:disabled {
    cursor: not-allowed;
    opacity: .62;
}
.membership-booster-action small {
    color: #806b82;
    text-align: center;
}
.match-booster-badge {
    position: absolute;
    left: 14px;
    top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #a847b7, #df2b76);
    color: #fff;
    font-size: .68rem;
    font-weight: 900;
    box-shadow: 0 8px 22px rgba(166, 46, 130, .25);
}
.plan-validity-note {
    align-self: end;
    color: #816e82;
    font-size: .78rem;
    line-height: 1.45;
}

@media (max-width: 1040px) {
    .membership-plan-page .paid-membership-plan-grid {
        grid-template-columns: repeat(3, minmax(220px, 1fr));
        overflow-x: auto;
        padding-bottom: 6px;
    }
}
@media (max-width: 760px) {
    .membership-plan-page .paid-membership-plan-grid {
        grid-template-columns: 1fr;
        overflow: visible;
    }
    .membership-package-description {
        min-height: 0;
    }
    .membership-booster-panel {
        grid-template-columns: 1fr;
    }
    .membership-live-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 420px) {
    .membership-live-status-grid {
        grid-template-columns: 1fr !important;
    }
    .membership-package-card {
        padding: 18px;
    }
    .membership-package-heading h2 {
        font-size: 1.35rem;
    }
}

/* Live notification count for the existing mobile notification icon. */
.mobile-header-menu-link[data-mobile-notification-link] {
    position: relative !important;
}

.mobile-notification-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: #ec407a;
    color: #ffffff;
    font-size: 0.58rem;
    font-weight: 950;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(190, 24, 93, 0.24);
}

.mobile-notification-badge[hidden] {
    display: none !important;
}

/* Country flags shown beside profile country names */
.country-flag-inline {
    display: inline-block;
    width: auto;
    height: 1em;
    margin-left: 0.28em;
    vertical-align: -0.1em;
    border: 0;
    border-radius: 0.08em;
    box-shadow: none;
    object-fit: cover;
    line-height: 1;
}


/* ===== Mobile profile image membership + activity labels ===== */
.mobile-profile-image-badges {
    display: none;
}

.member-list-media {
    display: block;
    position: relative;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

@media (max-width: 760px) {
    .visiting-profile-media,
    .profile-photo-wrap,
    .single-profile-photo,
    .member-list-media,
    .member-panel-photo-section.member-panel-image-only {
        position: relative;
    }

    .mobile-profile-image-badges {
        position: absolute;
        z-index: 8;
        top: 10px;
        left: 10px;
        right: 10px;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
        pointer-events: none;
    }

    .profile-photo-wrap > .mobile-profile-image-badges {
        top: 26px;
        left: 28px;
        right: 28px;
    }

    .member-panel-photo-section.member-panel-image-only > .mobile-profile-image-badges {
        top: 8px;
        left: 8px;
        right: 8px;
    }

    .mobile-profile-image-badge {
        display: inline-flex;
        align-items: center;
        min-width: 0;
        max-width: 52%;
        min-height: 26px;
        padding: 5px 9px;
        border: 1px solid rgba(255, 255, 255, .72);
        border-radius: 999px;
        background: rgba(38, 18, 70, .82);
        color: #fff;
        box-shadow: 0 6px 18px rgba(20, 10, 43, .22);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        font-size: clamp(.62rem, 2.55vw, .72rem);
        font-weight: 900;
        line-height: 1.05;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-profile-membership-badge {
        background: linear-gradient(135deg, rgba(181, 31, 117, .94), rgba(103, 48, 160, .94));
    }

    .mobile-profile-active-badge {
        margin-left: auto;
        background: rgba(24, 67, 52, .88);
    }
}

/* ===== Membership crown colors: Classic / Prime / Platinum ===== */
.membership-crown,
.membership-crown-icon {
    --membership-crown-color: #8f98a3;
    --membership-crown-paint: #a8b0ba;
}

.membership-crown-classic {
    --membership-crown-color: #8f98a3;
    --membership-crown-paint: linear-gradient(135deg, #6f7781 0%, #eef1f4 38%, #a5adb7 58%, #f8fafc 76%, #747c87 100%);
}

.membership-crown-prime {
    --membership-crown-color: #c89400;
    --membership-crown-paint: linear-gradient(135deg, #8f6500 0%, #ffe792 34%, #d5a514 54%, #fff0ac 72%, #9b7000 100%);
}

.membership-crown-platinum {
    --membership-crown-color: #d86f9f;
    --membership-crown-paint: linear-gradient(135deg, #b94b7d 0%, #ffd8e8 28%, #df78a8 48%, #fff1f7 64%, #c95f91 82%, #ffe4ef 100%);
}

.membership-crown-icon {
    display: inline-grid;
    place-items: center;
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 1.15em;
    color: var(--membership-crown-color);
}

.membership-crown-icon .mate-ui-icon-plan,
.match-plan-symbol.membership-crown .mate-ui-icon-plan {
    color: var(--membership-crown-color);
}

.single-match-grid .match-plan-symbol.membership-crown {
    border: 1px solid color-mix(in srgb, var(--membership-crown-color) 48%, white);
    background: color-mix(in srgb, var(--membership-crown-color) 10%, white);
    color: var(--membership-crown-color);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--membership-crown-color) 22%, transparent);
}

.single-match-grid .match-plan-symbol.membership-crown-platinum {
    border-color: #e2a0bf;
    background: linear-gradient(145deg, #f6bfd5 0%, #fff1f7 32%, #da78a5 54%, #ffe4ef 75%, #bf5688 100%);
    box-shadow: 0 8px 20px rgba(201, 95, 145, .24);
}

.mockup-member-badge.membership-crown-label .membership-crown-icon {
    margin-right: 1px;
}

@supports ((-webkit-mask: url("") no-repeat) or (mask: url("") no-repeat)) {
    .membership-crown-icon .mate-ui-icon-plan,
    .match-plan-symbol.membership-crown .mate-ui-icon-plan {
        display: none;
    }

    .membership-crown-icon::before,
    .match-plan-symbol.membership-crown::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: var(--membership-crown-paint);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 8l4.5 3.25L12 5l3.5 6.25L20 8l-1.5 10h-13L4 8Zm2 11h12v2H6v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 8l4.5 3.25L12 5l3.5 6.25L20 8l-1.5 10h-13L4 8Zm2 11h12v2H6v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .membership-crown-icon::before {
        width: 1.15em;
        height: 1.15em;
    }

    .single-match-grid .match-plan-symbol.membership-crown::before {
        width: 21px;
        height: 21px;
    }

    .single-match-grid .match-plan-symbol.membership-crown-platinum::before {
        filter: drop-shadow(0 1px 1px rgba(34, 39, 46, .3));
    }
}



/* ===== Crown-only plan identity on member profiles ===== */
.profile-membership-crown {
    width: 1.28em;
    height: 1.28em;
    flex-basis: 1.28em;
    vertical-align: middle;
}
.single-profile-plan-crown,
.member-profile-plan-crown,
.setting-plan-crown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    min-height: 30px;
}
.membership-crown-only-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0 !important;
    border-radius: 999px;
}
@media (max-width: 760px) {
    .mobile-profile-membership-badge {
        width: 32px;
        min-width: 32px;
        max-width: 32px;
        height: 32px;
        min-height: 32px;
        padding: 0;
        justify-content: center;
        overflow: visible;
        background: rgba(255, 255, 255, .94);
    }
    .mobile-profile-crown-icon {
        width: 20px;
        height: 20px;
        flex-basis: 20px;
    }
    .mobile-profile-crown-icon::before {
        width: 20px !important;
        height: 20px !important;
    }
}

/* ===== Platinum crown: light-pink body with three diamonds on its peaks ===== */
.membership-crown-icon,
.match-plan-symbol.membership-crown {
    position: relative;
    isolation: isolate;
}

.membership-crown-platinum {
    --membership-crown-color: #d86f9f;
    --membership-crown-paint: linear-gradient(112deg, #a93d71 0%, #ffd9e8 16%, #d86f9f 31%, #fff2f7 46%, #e79abb 61%, #bd4f82 78%, #ffe3ef 100%);
}

.membership-crown-icon.membership-crown-platinum::after,
.match-plan-symbol.membership-crown-platinum::after {
    content: "";
    position: absolute;
    z-index: 4;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='4.4,5.65 5.9,7.15 4.4,8.65 2.9,7.15' fill='%2318a75f' stroke='%23f2fff8' stroke-width='.62'/%3E%3Cpolygon points='12,2.9 13.7,4.6 12,6.3 10.3,4.6' fill='%23e43c42' stroke='%23fff1f1' stroke-width='.64'/%3E%3Cpolygon points='19.6,5.65 21.1,7.15 19.6,8.65 18.1,7.15' fill='%232f73df' stroke='%23f0f6ff' stroke-width='.62'/%3E%3C/svg%3E") center / contain no-repeat;
    filter: drop-shadow(0 1px 1px rgba(15, 20, 27, .58));
}

.membership-crown-icon.membership-crown-platinum::after {
    inset: -0.08em;
}

.match-plan-symbol.membership-crown-platinum::after {
    left: 50%;
    top: 50%;
    width: 23px;
    height: 23px;
    transform: translate(-50%, -50%);
}

@supports ((-webkit-mask: url("") no-repeat) or (mask: url("") no-repeat)) {
    .membership-crown-icon.membership-crown-platinum::before,
    .match-plan-symbol.membership-crown-platinum::before {
        filter: drop-shadow(0 1px 1px rgba(139, 48, 91, .34));
    }
}


/* ===== Unified one-row profile identity: name + verified + crown ===== */
.profile-identity-row {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.42em;
    max-width: 100%;
    min-width: 0;
    vertical-align: middle;
    white-space: nowrap;
}
.profile-identity-name {
    display: inline-block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-identity-row .verified-sign,
.profile-identity-row .profile-identity-crown {
    flex: 0 0 auto;
}
.profile-identity-crown {
    width: 1.22em;
    height: 1.22em;
    flex-basis: 1.22em;
}
.match-member-name,
.visiting-profile-content h3,
.member-list-info h3,
.member-info-name strong,
.side-menu-head strong,
.cp-member-identity {
    min-width: 0;
}
.member-info-name,
.member-profile-identity,
.side-menu-profile-identity,
.header-profile-identity {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
}
.member-list-info h3 {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
}
.member-list-age {
    flex: 0 0 auto;
    white-space: nowrap;
}
.mockup-profile-name .profile-identity-row {
    max-width: 170px;
}
.header-profile-identity .verified-sign {
    width: 18px;
    height: 18px;
}
.header-profile-identity .profile-identity-crown {
    width: 1.05em;
    height: 1.05em;
    flex-basis: 1.05em;
}
.cp-member-identity {
    max-width: 230px;
}
@media (max-width: 760px) {
    .profile-identity-row {
        gap: 0.34em;
    }
    .profile-identity-row .verified-sign {
        width: 20px;
        height: 20px;
    }
    .profile-identity-row .profile-identity-crown {
        width: 1.12em;
        height: 1.12em;
        flex-basis: 1.12em;
    }
    .mockup-profile-name .profile-identity-row {
        max-width: 132px;
    }
}


/* Keep every displayed profile identity in the requested order and spacing. */
.dashboard-welcome-identity,
.chat-profile-identity,
.hero-sample-profile-identity {
    max-width: 100%;
}
.chat-profile-identity .verified-sign {
    width: 18px;
    height: 18px;
}
.chat-profile-identity .verified-sign::after {
    width: 7px;
    height: 4px;
}
.chat-profile-identity .profile-identity-crown {
    width: 1.05em;
    height: 1.05em;
    flex-basis: 1.05em;
}


/* ===== Membership page: plan name followed by applicable crown ===== */
.membership-page-plan-name {
    display: inline-flex;
    align-items: center;
    gap: .38em;
    max-width: 100%;
    vertical-align: middle;
    white-space: nowrap;
}

.membership-page-plan-text {
    min-width: 0;
}

.membership-page-plan-crown {
    width: 1em;
    height: 1em;
    flex: 0 0 1em;
    font-size: 1em;
}

.membership-page-plan-crown::before {
    width: 1em !important;
    height: 1em !important;
}

.membership-package-heading h2 .membership-page-plan-name {
    gap: .34em;
}

.membership-package-heading h2 .membership-page-plan-crown {
    width: .92em;
    height: .92em;
    flex-basis: .92em;
}

.membership-package-heading h2 .membership-page-plan-crown::before {
    width: .92em !important;
    height: .92em !important;
}

.membership-live-status-grid strong .membership-page-plan-name,
.membership-history-table .membership-page-plan-name,
.payment-note .membership-page-plan-name {
    gap: .32em;
}

@media (max-width: 760px) {
    .membership-page-plan-name {
        gap: .32em;
    }
}


/* ===== Public mobile member-login icon alignment ===== */
@media (max-width: 820px) {
    .public-mobile-header:not(.logged-in-mobile-header) .mobile-header-menu {
        box-sizing: border-box !important;
        padding-right: 4px !important;
    }

    .public-mobile-header:not(.logged-in-mobile-header) .mobile-header-menu-link:last-child {
        margin-right: 2px !important;
    }
}

/* Paid-plan direct messaging status (Classic / Prime / Platinum). */
.chat-compose .direct-message-allowance {
    grid-column: 1 / -1;
    display: block;
    margin-top: .15rem;
    color: var(--muted, #756679);
    font-size: .78rem;
    line-height: 1.35;
}

.direct-message-profile-note {
    flex-basis: 100%;
    color: var(--muted, #756679);
    font-size: .78rem;
    line-height: 1.35;
}

/* ===== Mobile membership page compatibility + logged-in crown upgrade action ===== */
#profile-booster {
    scroll-margin-top: 88px;
}

@media (max-width: 820px) {
    body.payment-body {
        overflow-x: hidden;
    }

    .payment-page-layout {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 16px 12px calc(112px + env(safe-area-inset-bottom)) !important;
    }

    .payment-page-layout .centralized-user-menu,
    .payment-page-layout .side-dashboard-menu {
        display: none !important;
    }

    .payment-page-layout .payment-dashboard-wrap,
    .payment-page-layout .dashboard-wrap {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .payment-page-layout .panel,
    .payment-page-layout .panel.wide,
    .membership-plan-page,
    .membership-booster-panel,
    .payment-history-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .payment-page-layout .payment-hero-panel,
    .payment-page-layout .membership-booster-panel,
    .payment-page-layout .payment-history-panel {
        padding: 18px !important;
        border-radius: 22px !important;
    }

    .payment-hero-panel h1 {
        margin-top: 10px;
        font-size: clamp(1.65rem, 8vw, 2.25rem);
        line-height: 1.12;
        overflow-wrap: anywhere;
    }

    .payment-hero-panel > .muted,
    .membership-booster-copy p {
        font-size: .9rem;
        line-height: 1.58;
    }

    .membership-payment-status-grid,
    .membership-live-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 16px 0 !important;
    }

    .membership-payment-status-grid article {
        min-width: 0;
        padding: 14px !important;
    }

    .membership-payment-status-grid strong,
    .membership-payment-status-grid span,
    .membership-payment-status-grid small {
        overflow-wrap: anywhere;
    }

    .membership-plan-page .paid-membership-plan-grid,
    .payment-page-layout .plan-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        overflow: visible !important;
        padding-bottom: 0 !important;
    }

    .membership-package-card {
        width: 100%;
        min-width: 0;
        padding: 18px !important;
        border-radius: 20px !important;
    }

    .membership-package-heading {
        flex-wrap: wrap;
    }

    .membership-package-heading h2,
    .membership-package-price,
    .membership-package-features li strong {
        overflow-wrap: anywhere;
    }

    .membership-package-action,
    .membership-package-action .btn,
    .membership-booster-action,
    .membership-booster-action .btn {
        width: 100% !important;
    }

    .basic-fallback-note {
        padding: 14px;
        border-radius: 16px;
    }

    .membership-booster-panel {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .membership-booster-facts {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .membership-booster-facts span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .payment-history-heading {
        display: grid !important;
        gap: 12px !important;
    }

    .payment-history-heading .btn {
        width: 100% !important;
    }

    .membership-history-table-wrap,
    .table-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-header-menu-link[aria-label="Upgrade Membership"] {
        color: #7c3aed !important;
        border-color: rgba(124, 58, 237, .24) !important;
        background: linear-gradient(135deg, #fff8fb, #f3e8ff) !important;
    }

    .mobile-header-menu-link[aria-label="Upgrade Membership"].active,
    .mobile-header-menu-link[aria-label="Upgrade Membership"]:hover,
    .mobile-header-menu-link[aria-label="Upgrade Membership"]:focus-visible {
        color: #fff !important;
        border-color: transparent !important;
        background: linear-gradient(135deg, #db2777, #7c3aed) !important;
    }
}

@media (max-width: 480px) {
    .payment-page-layout {
        padding-inline: 10px !important;
    }

    .membership-payment-status-grid,
    .membership-live-status-grid,
    .membership-booster-facts {
        grid-template-columns: 1fr !important;
    }

    .basic-fallback-note {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 12px;
    }
}

@media (max-width: 380px) {
    .site-header .mobile-header-menu,
    .centralized-menu-header .mobile-header-menu {
        column-gap: 5px !important;
    }

    .mobile-header-menu-link {
        flex-basis: 29px !important;
        width: 29px !important;
        min-width: 29px !important;
        height: 29px !important;
    }

    .mobile-header-menu-link svg {
        width: 17px !important;
        height: 17px !important;
    }
}

/* ===== Full-site pill button audit 2026-08-01 =====
   Keep every actionable control capsule-shaped without changing its layout,
   colour palette, spacing, or responsive positioning. Full-screen backdrops
   and card-style selectors are intentionally excluded because they are not
   visible action buttons. */
button:not(.mate-payment-backdrop):not(.cp-service-card):not(.cp-runtime-setting-card):not(.cp-runtime-card-tab):not(.cp-service-modal-backdrop):not(.cp-verification-backdrop):not(.cp-member-edit-backdrop):not(.cp-admin-profile-backdrop):not(.cp-promotion-primary-button):not(.mate-promotion-popup-backdrop):not(.mate-promotion-popup-close),
input[type="submit"],
input[type="button"],
input[type="reset"],
a.btn,
.btn,
a.action-link,
.action-link,
a.auth-action-button,
.auth-action-button,
a.register-account-button,
.register-account-button,
a.mini-outline,
.mini-outline,
a.mini-profile-link,
.mini-profile-link,
a.mockup-upgrade-btn,
.mockup-upgrade-btn,
a.dashboard-feature-action,
.dashboard-feature-action,
a.page-arrow,
.page-arrow,
a.page-number,
.page-number,
.verification-browse-button,
.profile-photo-upload-button,
.profile-photo-primary-button {
    border-radius: 999px !important;
}

/* ===== Profile Settings section spacing 2026-08-01 =====
   Keep a standard visual gap between the Settings action row and the
   Identity Verification card without changing the surrounding layout. */
.settings-panel > .settings-actions + .membership-settings-card {
    margin-top: 24px;
}

@media (max-width: 760px) {
    .settings-panel > .settings-actions + .membership-settings-card {
        margin-top: 20px;
    }
}

/* ===== Profile Settings: equal three-column Identity Verification row =====
   Keep the icon/title, document picker and Submit action on one row with
   three equal-width areas. The surrounding Settings panel is unchanged. */
#verification-request-section.identity-verification-equal-card {
    padding-block: 18px;
}

#verification-request-section .identity-verification-equal-form {
    gap: 9px;
}

#verification-request-section .identity-verification-equal-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 18px;
    width: 100%;
    min-width: 0;
}

#verification-request-section .identity-verification-equal-row > * {
    min-width: 0;
}

#verification-request-section .identity-verification-equal-title {
    margin: 0;
}

#verification-request-section .identity-verification-document-column {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-width: 0;
}

#verification-request-section .identity-verification-document-column > label {
    margin: 0;
    color: #4f3a54;
    font-size: .82rem;
    font-weight: 800;
    white-space: nowrap;
}

#verification-request-section .identity-verification-document-column .verification-file-control {
    width: 100%;
    min-width: 0;
}

#verification-request-section .identity-verification-equal-submit {
    width: min(100%, 150px);
    min-width: 0;
    justify-self: center;
}

#verification-request-section .identity-verification-equal-form > .profile-field-hint {
    margin: 0;
    text-align: center;
}

@media (max-width: 760px) {
    #verification-request-section.identity-verification-equal-card {
        padding: 16px 12px;
    }

    #verification-request-section .identity-verification-equal-row {
        gap: 7px;
    }

    #verification-request-section .identity-verification-equal-title {
        gap: 5px;
    }

    #verification-request-section .identity-verification-equal-title > span {
        width: 27px;
        height: 27px;
        flex: 0 0 27px;
        border-radius: 9px;
    }

    #verification-request-section .identity-verification-equal-title strong {
        font-size: .67rem;
        line-height: 1.1;
    }

    #verification-request-section .identity-verification-equal-title small,
    #verification-request-section .identity-verification-document-column .verification-file-name {
        display: none;
    }

    #verification-request-section .identity-verification-document-column {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 4px;
    }

    #verification-request-section .identity-verification-document-column > label {
        font-size: .63rem;
        line-height: 1;
    }

    #verification-request-section .identity-verification-document-column .verification-file-control {
        width: 100%;
        height: 38px;
        padding: 2px;
    }

    #verification-request-section .identity-verification-document-column .verification-browse-button {
        width: 100%;
        height: 32px;
        flex: 1 1 auto;
        font-size: .64rem;
    }

    #verification-request-section .identity-verification-equal-submit {
        width: 100%;
        height: 38px;
        min-height: 38px;
        padding-inline: 6px;
        font-size: .67rem;
    }

    #verification-request-section .identity-verification-equal-form > .profile-field-hint {
        font-size: .62rem;
        line-height: 1.35;
    }
}

/* ===== Profile Settings: streamlined Identity Verification controls 2026-08-02 =====
   Remove the decorative shell around Browse / file-name text, match Submit to
   Browse, and rebalance the three existing areas without changing the panel. */
#verification-request-section .identity-verification-equal-row {
    grid-template-columns: minmax(250px, 1.15fr) minmax(300px, 1.45fr) 72px;
    column-gap: 22px;
}

#verification-request-section .identity-verification-equal-title {
    justify-self: start;
}

#verification-request-section .identity-verification-document-column {
    width: 100%;
    justify-self: stretch;
}

#verification-request-section .identity-verification-document-column .verification-file-control {
    width: auto;
    min-width: 0;
    height: auto;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#verification-request-section .identity-verification-equal-submit {
    width: 72px;
    min-width: 72px;
    height: 34px;
    min-height: 34px;
    padding: 0 10px;
    justify-self: end;
    font-size: .74rem;
}

@media (max-width: 760px) {
    #verification-request-section .identity-verification-equal-row {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 64px;
        column-gap: 8px;
    }

    #verification-request-section .identity-verification-document-column .verification-file-control {
        width: auto;
        height: auto;
        padding: 0;
    }

    #verification-request-section .identity-verification-document-column .verification-browse-button {
        width: 64px;
        min-width: 64px;
        height: 32px;
        flex: 0 0 64px;
        font-size: .69rem;
    }

    #verification-request-section .identity-verification-equal-submit {
        width: 64px;
        min-width: 64px;
        height: 32px;
        min-height: 32px;
        padding: 0 8px;
        justify-self: end;
        font-size: .69rem;
    }
}


/* Registration processing feedback: fixed overlay so the existing modal and
   page layout do not move when a submitted email is already registered. */
.register-process-alert {
    position: fixed;
    top: max(14px, env(safe-area-inset-top));
    left: 50%;
    z-index: 10020;
    width: min(calc(100% - 28px), 620px);
    margin: 0;
    padding: 12px 18px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    box-shadow: 0 16px 36px rgba(86, 12, 38, .24);
}
.register-process-alert strong,
.register-process-alert span {
    min-width: 0;
}
@media (max-width: 560px) {
    .register-process-alert {
        top: max(10px, env(safe-area-inset-top));
        width: calc(100% - 20px);
        padding: 10px 14px;
        flex-direction: column;
        gap: 2px;
        font-size: .84rem;
        line-height: 1.3;
    }
}


/* ===== Admin login: aligned compact actions ===== */
.admin-login-page .admin-login-actions {
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: min(100%, 296px);
    margin: 4px auto 0;
}

.admin-login-page .admin-login-submit,
.admin-login-page .admin-back-website-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 46px;
    margin: 0;
    padding: 11px 12px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

/* Use one explicit type treatment for the submit button and portal link.
   This prevents browser button and anchor defaults from rendering differently. */
.admin-login-page .admin-login-actions > .admin-login-action-button {
    font-family: Inter, Arial, Helvetica, sans-serif !important;
    font-size: .95rem !important;
    font-style: normal !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.admin-login-page .admin-back-website-button {
    border: 1px solid #e8d8f2;
    border-radius: 999px !important;
    box-shadow: 0 8px 20px rgba(126, 34, 206, .1);
}

@media (max-width: 420px) {
    .admin-login-page .admin-login-actions {
        gap: 8px;
        width: min(100%, 290px);
    }

    .admin-login-page .admin-login-submit,
    .admin-login-page .admin-back-website-button {
        padding-inline: 12px;
    }
}

/* ===== Admin login: popup-sized balanced panel =====
   Match the desktop admin card to the login popup width and keep both sides equal. */
@media (min-width: 901px) {
    .admin-login-page .admin-login-card {
        width: min(780px, 95vw);
        justify-self: center;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}


/* ===== Standalone member login: match homepage login popup width =====
   Scope the compact width to login.php only; internal columns and mobile
   stacking continue to use the existing authentication layout rules. */
.commercial-login-page.member-login-page {
    width: 780px;
    max-width: 95vw;
    margin-inline: auto;
}

@media (max-width: 820px) {
    .commercial-login-page.member-login-page {
        width: 520px;
    }
}

/* ===== Registration controls: 5% narrower on page and popup =====
   Reduce only registration text/select controls; preserve the grid, labels,
   password-toggle alignment, actions, and responsive structure. */
.commercial-register-page .register-modal-grid > label > input,
.commercial-register-page .register-modal-grid > label > select,
.auth-modal#register .register-modal-grid > label > input,
.auth-modal#register .register-modal-grid > label > select,
.commercial-register-page .register-modal-grid > label > .password-field,
.auth-modal#register .register-modal-grid > label > .password-field {
    width: 95%;
    margin-inline: auto;
}

.commercial-register-page .register-modal-grid > label > input,
.commercial-register-page .register-modal-grid > label > select,
.auth-modal#register .register-modal-grid > label > input,
.auth-modal#register .register-modal-grid > label > select {
    display: block;
}

.commercial-register-page .register-modal-grid > label > .password-field > input,
.auth-modal#register .register-modal-grid > label > .password-field > input {
    width: 100%;
}

/* ===== Registration popup: one reliable scroll container =====
   The fixed modal is the ONLY vertical scroll container. Earlier rules in
   member-shell.css/dashboard.css could re-enable scrolling on the inner
   .register-panel at mobile widths, producing nested scroll areas and making
   the top of the popup difficult to reach. These final overrides intentionally
   disable inner scrolling at every viewport size. */
body:has(.auth-modal#register:target),
body.register-modal-open {
    overflow: hidden !important;
}

.auth-modal#register {
    display: none;
    z-index: 9000 !important;
    align-items: initial !important;
    place-items: initial !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: 100dvh;
    max-height: 100dvh;
    padding: max(18px, env(safe-area-inset-top)) 22px max(28px, env(safe-area-inset-bottom)) !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    scroll-padding-block: max(18px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-bottom));
}

.auth-modal#register:target {
    display: block !important;
}

.auth-modal#register .modal-backdrop {
    position: fixed !important;
}

.auth-modal#register .register-panel,
.auth-modal#register .enhanced-register-panel {
    width: min(1120px, 94vw) !important;
    max-height: none !important;
    height: auto !important;
    margin: 0 auto !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
}

.auth-modal#register .register-card-shell,
.auth-modal#register .register-form-side {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}

@media (max-width: 760px) {
    .auth-modal#register {
        height: 100dvh;
        max-height: 100dvh;
        padding: max(10px, env(safe-area-inset-top)) 10px max(26px, env(safe-area-inset-bottom)) !important;
        scroll-padding-block: max(10px, env(safe-area-inset-top)) max(26px, env(safe-area-inset-bottom));
    }

    .auth-modal#register .register-panel,
    .auth-modal#register .enhanced-register-panel {
        width: 100% !important;
        max-height: none !important;
        height: auto !important;
        border-radius: 22px !important;
        overflow: visible !important;
    }
}

/* ===== Secure administrator messages for members ===== */
.member-admin-messages-body { background: #f6f7fb; }
.member-admin-messages-page { width: min(1180px,calc(100% - 32px)); margin: 0 auto; padding: 32px 0 55px; }
.member-admin-messages-heading { margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.member-admin-messages-heading h1 { margin: 4px 0 7px; color: #1b2235; font-size: clamp(1.7rem,3vw,2.45rem); }
.member-admin-messages-heading p { margin: 0; color: #70798d; }
.member-admin-message-layout { display: grid; grid-template-columns: minmax(250px,320px) minmax(0,1fr); gap: 18px; align-items: start; }
.member-admin-message-list,
.member-admin-message-detail,
.member-admin-message-empty { border: 1px solid #e4e7ef; border-radius: 18px; background: #fff; box-shadow: 0 16px 40px rgba(31,42,70,.07); }
.member-admin-message-list { max-height: 680px; overflow-y: auto; padding: 8px; display: grid; gap: 5px; }
.member-admin-message-list-item { position: relative; min-width: 0; padding: 13px 12px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 10px; border: 1px solid transparent; border-radius: 14px; color: #273047; }
.member-admin-message-list-item:hover,
.member-admin-message-list-item.active { border-color: #f2bfd6; background: #fff5fa; }
.member-admin-message-list-item.unread { background: #f2f7ff; }
.member-admin-message-list-item span { min-width: 0; display: grid; gap: 4px; }
.member-admin-message-list-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-admin-message-list-item small,
.member-admin-message-list-item time { color: #7c8598; font-size: .76rem; }
.member-admin-message-list-item b { width: fit-content; padding: 2px 8px; border-radius: 999px; background: #e8f2ff; color: #266bad; font-size: .68rem; }
.member-admin-message-detail { overflow: hidden; }
.member-admin-message-detail > header { padding: 18px 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; border-bottom: 1px solid #eceef3; }
.member-admin-message-detail header span,
.member-admin-message-detail header time { color: #7b8496; font-size: .78rem; }
.member-admin-message-detail h2 { margin: 5px 0 0; color: #1c263c; font-size: 1.25rem; }
.member-admin-message-copy { min-height: 130px; padding: 22px 20px; color: #374158; line-height: 1.7; overflow-wrap: anywhere; }
.member-admin-message-replies { margin: 0 20px 20px; padding: 15px; display: grid; gap: 10px; border-radius: 14px; background: #f8f9fc; }
.member-admin-message-replies h3 { margin: 0; font-size: .9rem; }
.member-admin-message-replies > div { padding: 11px 12px; border-radius: 12px; background: #fff; }
.member-admin-message-replies p { margin: 0 0 6px; line-height: 1.55; }
.member-admin-message-replies time { color: #8790a2; font-size: .72rem; }
.member-admin-message-reply { padding: 18px 20px 20px; display: grid; gap: 12px; border-top: 1px solid #eceef3; }
.member-admin-message-reply label { display: grid; gap: 7px; color: #4d576d; font-size: .82rem; font-weight: 700; }
.member-admin-message-reply textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid #dfe3eb; border-radius: 14px; resize: vertical; font: inherit; outline: 0; }
.member-admin-message-reply textarea:focus { border-color: #ee77aa; box-shadow: 0 0 0 3px rgba(238,64,137,.1); }
.member-admin-message-reply .btn { width: fit-content; justify-self: end; }
.member-admin-message-empty { padding: 42px 24px; text-align: center; }
.member-admin-message-empty h2 { margin: 0 0 9px; }
.member-admin-message-empty p { margin: 0; color: #778093; }

@media (max-width: 760px) {
    .member-admin-messages-page { width: min(100% - 22px,560px); padding-top: 22px; }
    .member-admin-messages-heading { align-items: flex-start; }
    .member-admin-messages-heading .btn { flex: 0 0 auto; }
    .member-admin-message-layout { grid-template-columns: 1fr; }
    .member-admin-message-list { max-height: 280px; }
    .member-admin-message-detail > header { display: grid; }
    .member-admin-message-detail > header time { justify-self: start; }
}
@media (max-width: 480px) {
    .member-admin-messages-heading { display: grid; }
    .member-admin-messages-heading .btn { width: 100%; box-sizing: border-box; }
    .member-admin-message-list-item { grid-template-columns: minmax(0,1fr); }
    .member-admin-message-detail > header,
    .member-admin-message-copy,
    .member-admin-message-reply { padding-left: 15px; padding-right: 15px; }
    .member-admin-message-replies { margin-left: 15px; margin-right: 15px; }
    .member-admin-message-reply .btn { width: 100%; justify-self: stretch; }
}

/* ===== Occasional promotion banner below the home-page menu ===== */
.mate-promotion-strip {
    position: relative;
    z-index: 40;
    width: 100%;
    overflow: hidden;
    background-color: var(--mate-promotion-bg, #7c3aed);
    background-image: linear-gradient(100deg, rgba(35, 12, 57, .88), rgba(89, 26, 100, .56)), var(--mate-promotion-image, none);
    background-position: center;
    background-size: cover;
    color: var(--mate-promotion-text, #fff);
    box-shadow: 0 10px 28px rgba(54, 22, 77, .12);
}
.mate-promotion-strip::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 92% 18%, rgba(255,255,255,.19), transparent 30%);
    pointer-events: none;
}
.mate-promotion-strip-inner {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100% - 40px));
    min-height: 82px;
    margin: 0 auto;
    padding: 13px 0;
    display: grid;
    grid-template-columns: 44px minmax(0,1fr) auto;
    align-items: center;
    gap: 14px;
}
.mate-promotion-strip-mark {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.23);
    border-radius: 14px;
    background: rgba(255,255,255,.13);
    box-shadow: 0 8px 22px rgba(20,8,36,.14);
    backdrop-filter: blur(8px);
}
.mate-promotion-strip-mark .mate-ui-icon { width: 23px; height: 23px; }
.mate-promotion-strip-copy { min-width: 0; display: grid; gap: 3px; }
.mate-promotion-strip-copy strong { color: inherit; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1rem, 1.7vw, 1.35rem); line-height: 1.2; letter-spacing: -.015em; }
.mate-promotion-strip-copy span { max-width: 760px; color: inherit; opacity: .8; font-size: .78rem; line-height: 1.45; }
.mate-promotion-strip-action {
    min-height: 42px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 12px;
    background: rgba(255,255,255,.94);
    color: #6c246d;
    font-size: .76rem;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 9px 22px rgba(25,8,38,.16);
    transition: transform .18s ease, box-shadow .18s ease;
}
.mate-promotion-strip-action:hover,
.mate-promotion-strip-action:focus-visible { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(25,8,38,.22); }

.mate-promotion-mobile-popup { display: none; }

@media (max-width: 820px) {
    .mate-promotion-strip { display: none !important; }
    .mate-promotion-mobile-popup[hidden] { display: none !important; }
    .mate-promotion-mobile-popup.is-open {
        position: fixed;
        inset: 0;
        z-index: 5600;
        display: grid;
        place-items: end center;
        padding: 18px 14px max(18px, env(safe-area-inset-bottom));
    }
    .mate-promotion-popup-backdrop {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        border-radius: 0 !important;
        background: rgba(25, 11, 34, .66) !important;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
    .mate-promotion-popup-card {
        position: relative;
        z-index: 1;
        width: min(100%, 430px);
        min-height: 330px;
        padding: 25px 22px 22px;
        display: grid;
        align-content: end;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 26px;
        background-color: var(--mate-promotion-bg, #7c3aed);
        background-image: linear-gradient(180deg, rgba(31,10,45,.26), rgba(31,10,45,.9)), var(--mate-promotion-image, none);
        background-position: center;
        background-size: cover;
        color: var(--mate-promotion-text, #fff);
        box-shadow: 0 28px 80px rgba(20, 8, 28, .42);
        animation: matePromotionPopupIn .28s ease both;
    }
    .mate-promotion-popup-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 84% 14%, rgba(255,255,255,.22), transparent 34%);
        pointer-events: none;
    }
    @keyframes matePromotionPopupIn {
        from { opacity: 0; transform: translateY(26px) scale(.98); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .mate-promotion-popup-close {
        position: absolute;
        z-index: 3;
        top: 14px;
        right: 14px;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        padding: 0 !important;
        display: grid !important;
        place-items: center !important;
        border: 1px solid rgba(255,255,255,.25) !important;
        border-radius: 12px !important;
        background: rgba(255,255,255,.13) !important;
        color: inherit !important;
        font: inherit !important;
        font-size: 1.45rem !important;
        line-height: 1 !important;
        cursor: pointer;
        backdrop-filter: blur(8px);
    }
    .mate-promotion-popup-label {
        position: absolute;
        z-index: 2;
        top: 17px;
        left: 18px;
        padding: 5px 9px;
        border: 1px solid rgba(255,255,255,.22);
        border-radius: 999px;
        background: rgba(255,255,255,.12);
        color: inherit;
        font-size: .63rem;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
        backdrop-filter: blur(8px);
    }
    .mate-promotion-popup-content { position: relative; z-index: 2; }
    .mate-promotion-popup-content h2 { margin: 0; color: inherit; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.75rem, 8vw, 2.45rem); line-height: 1.03; letter-spacing: -.035em; }
    .mate-promotion-popup-content p { margin: 12px 0 19px; color: inherit; opacity: .83; font-size: .88rem; line-height: 1.58; }
    .mate-promotion-popup-content a {
        width: 100%;
        min-height: 48px;
        padding: 0 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        border-radius: 14px;
        background: rgba(255,255,255,.95);
        color: #672568;
        font-size: .84rem;
        font-weight: 900;
        text-decoration: none;
        box-shadow: 0 12px 28px rgba(21,8,31,.2);
    }
    body.mate-promotion-popup-open { overflow: hidden !important; }
}

@media (min-width: 821px) {
    .mate-promotion-mobile-popup { display: none !important; }
}

/* ===== Registration popup: match standalone register.php card corners =====
   register.php inherits the auth card geometry from .login-page-card:
   38px corners on desktop and 28px on mobile. Keep #register's outer modal as
   the only scroll container, while clipping the inner two-column shell to the
   same rounded card outline. */
.auth-modal#register .register-panel,
.auth-modal#register .enhanced-register-panel {
    border-radius: 38px !important;
    overflow: hidden !important;
}

.auth-modal#register .register-card-shell {
    border-radius: inherit !important;
    overflow: hidden !important;
}

@media (max-width: 820px) {
    .auth-modal#register .register-panel,
    .auth-modal#register .enhanced-register-panel,
    .auth-modal#register .register-card-shell {
        border-radius: 28px !important;
    }
}

/* Login feedback must be visible at the #login anchor. Previously authentication
   errors were rendered only higher on the home page, so a failed session looked
   like a silent loop showing the static "Use Registered credentials" sentence. */
.login-modal-alert {
    margin: 0 0 14px;
}

/* ===== Hash-free clean URL target state =====
   url-cleaner.js applies .mate-route-target before removing the fragment or
   temporary mate_target query parameter from the address bar. */
.auth-modal.mate-route-target {
    display: grid;
}
.auth-modal#register.mate-route-target {
    display: block !important;
}
.resend-verification-modal.mate-route-target {
    display: grid;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
body.mate-modal-open {
    overflow: hidden !important;
}
@media (max-width: 760px) {
    .auth-modal.mate-route-target {
        display: grid !important;
    }
    .auth-modal#register.mate-route-target {
        display: block !important;
    }
}

/* ===== Unified member profile-photo frame =====
   Home "Top Visiting Profiles" already establishes the approved 4:5 portrait
   frame. Apply that same visible photo geometry to the member-facing Dashboard,
   match cards, profile pages and profile editor without changing the surrounding
   card/grid/navigation layouts. Tiny navigation/chat avatars intentionally keep
   their existing avatar geometry. */
:root {
    --mate-profile-display-aspect: 4 / 5;
}

/* Home profile frame remains the reference geometry. */
.visiting-profile-media {
    aspect-ratio: var(--mate-profile-display-aspect) !important;
    overflow: hidden !important;
}
.visiting-profile-media > img,
.visiting-profile-media > .visiting-profile-photo-fallback {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
}

/* Match/profile cards: use the same 4:5 image frame instead of the older
   landscape profile-photo ratio. The wrapper padding/badges are unchanged. */
.profile-photo-wrap .profile-photo {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: var(--mate-profile-display-aspect) !important;
    object-fit: cover !important;
    object-position: center top !important;
}
.profile-photo-wrap span.profile-photo {
    display: grid !important;
}

/* Dashboard main member panel: preserve the existing three-column/equal-height
   panel layout. Only the photo itself becomes a true 4:5 frame and is centered
   inside the existing image column. This avoids stretching the outer panel into
   a new size, which was the reason the prior fix could still look inconsistent. */
.dashboard-body .member-panel-row-layout .member-panel-image-only {
    aspect-ratio: auto !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
}
.dashboard-body .member-panel-row-layout .member-panel-image-only .member-panel-photo {
    display: block !important;
    height: 100% !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: var(--mate-profile-display-aspect) !important;
    object-fit: cover !important;
    object-position: center top !important;
    margin-inline: auto !important;
}
.dashboard-body .member-panel-row-layout .member-panel-image-only span.member-panel-photo {
    display: grid !important;
}

/* Every Dashboard list/restriction/recent-profile image uses one 4:5 frame. */
.dashboard-body .member-list-media {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: var(--mate-profile-display-aspect) !important;
    overflow: hidden !important;
}
.dashboard-body .member-list-media .member-list-photo {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: var(--mate-profile-display-aspect) !important;
    object-fit: cover !important;
    object-position: center top !important;
}
.dashboard-body .member-list-media span.member-list-photo {
    display: grid !important;
}

/* Full member profile: primary and additional profile photos use the same frame
   while the existing hero/story sections keep their original grids and spacing. */
.single-profile-photo .primary-profile-photo,
.single-profile-story .story-profile-photo {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: var(--mate-profile-display-aspect) !important;
    object-fit: cover !important;
    object-position: center top !important;
}
.single-profile-photo span.primary-profile-photo,
.single-profile-story span.story-profile-photo {
    display: grid !important;
}

/* Upload/profile-editor photos already use 4:5; keep it explicit so saved and
   previewed photos match every display surface. */
.profile-photo-preview-wrap,
.profile-photo-card .profile-edit-photo {
    aspect-ratio: var(--mate-profile-display-aspect) !important;
}
.profile-photo-card .profile-edit-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
}

/* On the single-column Dashboard keep the approved 4:5 crop while preserving
   the existing responsive section size; the image is centered rather than
   stretched to the full wide panel. */
@media (max-width: 860px) {
    .dashboard-body .member-panel-row-layout .member-panel-image-only .member-panel-photo {
        height: 330px !important;
        width: auto !important;
        max-width: 100% !important;
        aspect-ratio: var(--mate-profile-display-aspect) !important;
        margin-inline: auto !important;
    }
}

/* ===== Search Match Display: 30% smaller desktop/tablet profile frame =====
   User Menu > Search opens matches.php. Reduce only the Search Match Display
   profile card/photo frame by 30% on non-mobile widths. Mobile keeps the
   existing production size exactly as-is. All internal typography, actions,
   crop behavior and surrounding dashboard layout remain unchanged. */
@media (min-width: 821px) {
    body.match-body .single-match-grid .profile-card,
    body.match-body .single-match-grid .profile-card.is-active {
        max-width: 546px !important; /* 70% of the previous 780px frame */
    }
}

@media (min-width: 600px) and (max-width: 820px) {
    body.match-body .single-match-grid .profile-card,
    body.match-body .single-match-grid .profile-card.is-active {
        max-width: 273px !important; /* 70% of the existing 390px tablet frame */
    }
}

/* Keep the Search photo itself locked to the approved 4:5 crop inside the
   reduced frame; this prevents older match-page rules from re-expanding it. */
@media (min-width: 600px) {
    body.match-body .single-match-grid .profile-photo-wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: auto !important;
    }

    body.match-body .single-match-grid .profile-photo-wrap .profile-photo {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: var(--mate-profile-display-aspect) !important;
        object-fit: cover !important;
        object-position: center top !important;
    }
}

/* ===== Search Match Display: identical empty/uploaded photo frame =====
   The uploaded-photo <img> previously kept an auto height while the no-photo
   <span> resolved the CSS aspect ratio directly, so the two states could render
   at different heights. Make the wrapper the single source of truth for frame
   geometry, then have both states fill it exactly. Scope is Search only. */
body.match-body .single-match-grid .profile-photo-wrap {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: var(--mate-profile-display-aspect) !important;
    overflow: hidden !important;
}

body.match-body .single-match-grid .profile-photo-wrap > .profile-photo,
body.match-body .single-match-grid .profile-photo-wrap > img.profile-photo,
body.match-body .single-match-grid .profile-photo-wrap > span.profile-photo.empty-profile-photo {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: center top !important;
    box-sizing: border-box !important;
}

body.match-body .single-match-grid .profile-photo-wrap > span.profile-photo.empty-profile-photo {
    display: grid !important;
    place-items: center !important;
}


/* ===== Search Match Display: photo frame top + profile-info bottom (2026-09-19) =====
   Scope only: User Menu > Search. Keep the same visible design/layout while making
   the main profile-photo wrapper own both sections: the 4:5 image frame stays on top
   and the existing profile-info content stays directly below it inside the same frame. */
body.match-body .single-match-grid .profile-photo-wrap {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
}

body.match-body .single-match-grid .profile-photo-frame {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: var(--mate-profile-display-aspect);
    overflow: hidden;
}

body.match-body .single-match-grid .profile-photo-frame > .profile-photo,
body.match-body .single-match-grid .profile-photo-frame > img.profile-photo,
body.match-body .single-match-grid .profile-photo-frame > span.profile-photo.empty-profile-photo {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: center top !important;
    box-sizing: border-box !important;
}

body.match-body .single-match-grid .profile-photo-frame > span.profile-photo.empty-profile-photo {
    display: grid !important;
    place-items: center !important;
}

body.match-body .single-match-grid .profile-info {
    display: block !important;
    width: 100%;
    min-width: 0;
}

/* ===== Search Match Display: Partner Preference shortcut =====
   Keep automatic partner-default matching functional, but present only the
   requested settings shortcut in the Search header. */
body.match-body .match-title {
    width: 100%;
}

body.match-body .match-title .match-title-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
}

body.match-body .match-title .match-partner-preference-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    margin-left: auto;
    border: 1px solid rgba(126, 34, 206, .16);
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(255, 247, 252, .96), rgba(245, 233, 255, .96));
    color: var(--primary-dark);
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(91, 33, 120, .08);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.match-body .match-title .match-partner-preference-link:hover,
body.match-body .match-title .match-partner-preference-link:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(126, 34, 206, .30);
    box-shadow: 0 11px 24px rgba(91, 33, 120, .13);
}

body.match-body .match-title .match-partner-preference-link:focus-visible {
    outline: 3px solid rgba(181, 31, 117, .16);
    outline-offset: 3px;
}

body.match-body .match-title .match-partner-preference-link .mate-ui-icon {
    width: 20px;
    height: 20px;
}

@media (max-width: 640px) {
    body.match-body .match-title .match-title-toolbar {
        gap: 10px;
    }

    body.match-body .match-title .match-partner-preference-link {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }
}