/* ==========================================================================
Cupidera Redesign — override layer
File loaded AFTER all plugin CSS via child theme functions.php (prio 9999).
Authoring rules:
- Brand tokens via :root (below).
- Scope with body:not(.wp-admin) for front-end-only rules.
- Prefer named classes (e.g. .btn.btn-primary) over generic (.btn).
- Match legacy !important where it exists; otherwise leave off.
- New elements use .sh-* prefix.
- Three zone blocks authored in parallel (A/B/C), appended below.
========================================================================== */
/* ==========================================================================
DESIGN TOKENS — shared across all zones
========================================================================== */
:root {
/* Brand */
--sh-primary: #5c63b7;
--sh-primary-700: #3e4290;
--sh-primary-600: #4d52a3;
--sh-primary-500: #5c63b7;
--sh-primary-400: #7d82c6;
--sh-primary-200: #c5c8e6;
--sh-primary-100: #eef0fa;
--sh-primary-50: #f5f6fc;
--sh-accent: #e4519e;
--sh-accent-700: #a6336f;
--sh-accent-600: #c9408a;
--sh-accent-500: #e4519e;
--sh-accent-400: #ea75b2;
--sh-accent-200: #f3b0d2;
--sh-accent-100: #fdebf4;
--sh-accent-50: #fef4f9;
--sh-soft: #fee8f3;
--sh-soft-2: #fff4fa;
--sh-gradient: linear-gradient(135deg, #5c63b7 0%, #e4519e 100%);
--sh-gradient-soft: linear-gradient(135deg, #eef0fa 0%, #fee8f3 100%);
--sh-gradient-hero: linear-gradient(135deg, #5c63b7 0%, #9a4eba 50%, #e4519e 100%);
/* Text */
--sh-text: #1a1a2e;
--sh-text-2: #4a4a5e;
--sh-text-muted: #8a8a9a;
--sh-text-invert: #ffffff;
--sh-text-on-primary: #ffffff;
--sh-text-on-accent: #ffffff;
/* Surface */
--sh-bg: #ffffff;
--sh-bg-soft: #fafafb;
--sh-bg-section: #fee8f3;
--sh-bg-elevated: #ffffff;
--sh-border: #ececf2;
--sh-border-strong: #d8d8e0;
--sh-divider: #f1f1f6;
/* State */
--sh-success: #22c55e;
--sh-success-bg: #dcfce7;
--sh-danger: #ef4444;
--sh-danger-bg: #fee2e2;
--sh-warning: #f59e0b;
--sh-warning-bg: #fef3c7;
/* Radii — Badoo-style */
--sh-radius-xs: 6px;
--sh-radius-sm: 10px;
--sh-radius-md: 14px;
--sh-radius-lg: 20px;
--sh-radius-xl: 24px;
--sh-radius-2xl: 32px;
--sh-radius-pill: 999px;
--sh-radius-circle: 50%;
/* Shadows — indigo-tinted */
--sh-shadow-1: 0 2px 8px rgba(92, 99, 183, 0.07);
--sh-shadow-2: 0 8px 24px rgba(92, 99, 183, 0.10);
--sh-shadow-3: 0 20px 48px rgba(92, 99, 183, 0.14);
--sh-shadow-4: 0 32px 80px rgba(92, 99, 183, 0.18);
--sh-shadow-accent: 0 8px 24px rgba(228, 81, 158, 0.22);
--sh-shadow-primary: 0 8px 22px rgba(92, 99, 183, 0.26);
/* Spacing */
--sh-space-1: 4px; --sh-space-2: 8px; --sh-space-3: 12px;
--sh-space-4: 16px; --sh-space-5: 20px; --sh-space-6: 24px;
--sh-space-7: 28px; --sh-space-8: 32px; --sh-space-10: 40px;
--sh-space-12: 48px; --sh-space-16: 64px; --sh-space-20: 80px;
/* Typography */
--sh-fs-xs: 12px;
--sh-fs-sm: 13px;
--sh-fs-base: 15px;
--sh-fs-md: 16px;
--sh-fs-lg: 18px;
--sh-fs-xl: 22px;
--sh-fs-2xl: 28px;
--sh-fs-3xl: 36px;
--sh-fs-4xl: 48px;
--sh-fw-regular: 400;
--sh-fw-medium: 500;
--sh-fw-semibold: 600;
--sh-fw-bold: 700;
--sh-lh-tight: 1.2;
--sh-lh-snug: 1.35;
--sh-lh-normal: 1.5;
--sh-lh-relaxed: 1.65;
/* Motion */
--sh-duration-fast: 150ms;
--sh-duration: 220ms;
--sh-duration-slow: 320ms;
--sh-ease: cubic-bezier(0.4, 0, 0.2, 1);
--sh-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--sh-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--sh-transition-default:
color var(--sh-duration) var(--sh-ease),
background-color var(--sh-duration) var(--sh-ease),
border-color var(--sh-duration) var(--sh-ease),
box-shadow var(--sh-duration) var(--sh-ease),
transform var(--sh-duration) var(--sh-ease),
opacity var(--sh-duration) var(--sh-ease);
}
/* ==========================================================================
MINIMAL BASELINE (safe — no broad button/form catch-alls here)
========================================================================== */
body:not(.wp-admin) {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body:not(.wp-admin) ::selection {
background: var(--sh-accent-100);
color: var(--sh-accent-700);
}
body:not(.wp-admin) *::-webkit-scrollbar { width: 10px; height: 10px; }
body:not(.wp-admin) *::-webkit-scrollbar-track { background: transparent; }
body:not(.wp-admin) *::-webkit-scrollbar-thumb {
background: var(--sh-border-strong);
border-radius: var(--sh-radius-pill);
border: 2px solid transparent;
background-clip: padding-box;
}
body:not(.wp-admin) *::-webkit-scrollbar-thumb:hover {
background: var(--sh-primary);
background-clip: padding-box;
}
body:not(.wp-admin) *:focus-visible {
outline: 3px solid var(--sh-accent-100);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
body:not(.wp-admin) *,
body:not(.wp-admin) *::before,
body:not(.wp-admin) *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* Skeleton shimmer utility (optional helper) */
.sh-skeleton {
background: linear-gradient(90deg, var(--sh-bg-soft) 0%, var(--sh-border) 50%, var(--sh-bg-soft) 100%);
background-size: 200% 100%;
animation: sh-shimmer 1.5s ease-in-out infinite;
border-radius: var(--sh-radius-md);
}
@keyframes sh-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ==========================================================================
ZONE A — Public chrome: header, footer, auth, Elementor landings
========================================================================== */
/* ZONE_A_START */
/* -- HEADER ------------------------------------------------------------- */
body:not(.wp-admin) header.site-header,
body:not(.wp-admin) header.site-header.header-shadow {
background: var(--sh-bg);
border-bottom: 1px solid var(--sh-border);
box-shadow: 0 1px 0 rgba(92, 99, 183, 0.04);
transition: box-shadow var(--sh-duration) var(--sh-ease);
}
body:not(.wp-admin) header.site-header .content-wrap {
padding-top: 14px;
padding-bottom: 14px;
}
body:not(.wp-admin) header.site-header.scrollDown,
body:not(.wp-admin) header.site-header.scrollUp {
box-shadow: var(--sh-shadow-1);
}
body:not(.wp-admin) .site-header .navbar-brand img {
max-height: 40px;
width: auto;
}
body:not(.wp-admin) .site-header #site-navigation ul#primary-menu {
display: flex;
align-items: center;
gap: 4px;
margin: 0;
padding: 0;
}
body:not(.wp-admin) .site-header #site-navigation ul#primary-menu > li > a {
display: inline-flex;
align-items: center;
padding: 8px 16px;
font-size: var(--sh-fs-base);
font-weight: var(--sh-fw-medium);
color: var(--sh-text-2);
border-radius: var(--sh-radius-pill);
text-decoration: none;
transition: var(--sh-transition-default);
}
body:not(.wp-admin) .site-header #site-navigation ul#primary-menu > li > a:hover,
body:not(.wp-admin) .site-header #site-navigation ul#primary-menu > li.current-menu-item > a {
color: var(--sh-primary);
background: var(--sh-primary-100);
}
/* Guest Register/Login auth pills */
body.not-logged-in:not(.wp-admin) .site-header .wpee-header-auth-links--split {
gap: 10px;
align-items: center;
}
body.not-logged-in:not(.wp-admin) .site-header .wpee-header-auth-links--split .header-register-btn,
body.not-logged-in:not(.wp-admin) .site-header .wpee-header-auth-links--split .header-login-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 20px;
border-radius: var(--sh-radius-pill);
font-weight: var(--sh-fw-semibold);
font-size: var(--sh-fs-sm);
line-height: 1;
text-decoration: none;
transition: var(--sh-transition-default);
}
body.not-logged-in:not(.wp-admin) .site-header .wpee-header-auth-links--split .header-login-btn {
color: var(--sh-primary);
background: transparent;
border: 1.5px solid var(--sh-primary-200);
}
body.not-logged-in:not(.wp-admin) .site-header .wpee-header-auth-links--split .header-login-btn:hover {
background: var(--sh-primary-100);
border-color: var(--sh-primary);
color: var(--sh-primary-600);
opacity: 1;
transform: translateY(-1px);
}
body.not-logged-in:not(.wp-admin) .site-header .wpee-header-auth-links--split .header-register-btn {
color: var(--sh-text-invert);
background: var(--sh-gradient);
border: none;
box-shadow: var(--sh-shadow-primary);
}
body.not-logged-in:not(.wp-admin) .site-header .wpee-header-auth-links--split .header-register-btn:hover {
opacity: 1;
transform: translateY(-1px);
box-shadow: var(--sh-shadow-accent);
color: var(--sh-text-invert);
}
body.not-logged-in:not(.wp-admin) .site-header .wpee-header-auth-links--split .header-register-btn i,
body.not-logged-in:not(.wp-admin) .site-header .wpee-header-auth-links--split .header-login-btn i {
width: auto;
min-width: 0;
font-size: 0.95em;
}
/* Logged-in avatar ring + notification bubbles */
body.logged-in:not(.wp-admin) .user-login .notification-profile-direct .header-profile-image {
border: 2px solid transparent;
transition: var(--sh-transition-default);
}
body.logged-in:not(.wp-admin) .user-login .notification-profile-direct > a:hover .header-profile-image {
border-color: var(--sh-primary);
box-shadow: 0 0 0 3px var(--sh-primary-100);
}
body.logged-in:not(.wp-admin) .user-login .wpee-notification-links > li > a:hover {
color: var(--sh-accent);
}
body.logged-in:not(.wp-admin) .user-login .wpee-count-num {
background: var(--sh-accent);
color: #fff;
border-radius: var(--sh-radius-pill);
font-weight: var(--sh-fw-semibold);
font-size: 11px;
padding: 1px 6px;
}
/* Hamburger */
body:not(.wp-admin) .site-header .ham-icon {
border-radius: var(--sh-radius-md);
transition: var(--sh-transition-default);
}
body:not(.wp-admin) .site-header .ham-icon:hover {
background: var(--sh-primary-100);
}
/* -- FOOTER ------------------------------------------------------------- */
body:not(.wp-admin) footer.site-footer {
background: #1a1a2e;
color: #c9cad8;
padding: var(--sh-space-16) 0 0;
margin-top: var(--sh-space-16);
}
body:not(.wp-admin) footer.site-footer .content-wrap {
padding-bottom: var(--sh-space-12);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body:not(.wp-admin) footer.site-footer .footer-logo img {
max-height: 44px;
width: auto;
filter: brightness(0) invert(1);
}
body:not(.wp-admin) footer.site-footer h2,
body:not(.wp-admin) footer.site-footer h3,
body:not(.wp-admin) footer.site-footer h4,
body:not(.wp-admin) footer.site-footer .widget-title {
color: #fff;
font-weight: var(--sh-fw-semibold);
font-size: var(--sh-fs-md);
margin-bottom: var(--sh-space-5);
letter-spacing: 0.2px;
}
body:not(.wp-admin) footer.site-footer p,
body:not(.wp-admin) footer.site-footer li,
body:not(.wp-admin) footer.site-footer .desc-wrap {
color: #c9cad8;
line-height: var(--sh-lh-relaxed);
font-size: var(--sh-fs-sm);
}
body:not(.wp-admin) footer.site-footer a {
color: #c9cad8;
text-decoration: none;
transition: var(--sh-transition-default);
}
body:not(.wp-admin) footer.site-footer a:hover {
color: var(--sh-accent);
}
body:not(.wp-admin) footer.site-footer ul {
list-style: none;
padding: 0;
margin: 0;
}
body:not(.wp-admin) footer.site-footer ul li {
padding: 6px 0;
}
body:not(.wp-admin) footer.site-footer .social-links,
body:not(.wp-admin) footer.site-footer .footer-social,
body:not(.wp-admin) footer.site-footer .company-detail-wrap ul.social {
display: flex;
gap: 10px;
margin-top: var(--sh-space-5);
flex-wrap: wrap;
}
body:not(.wp-admin) footer.site-footer .social-links li,
body:not(.wp-admin) footer.site-footer .footer-social li {
padding: 0;
}
body:not(.wp-admin) footer.site-footer .social-links a,
body:not(.wp-admin) footer.site-footer .footer-social a,
body:not(.wp-admin) footer.site-footer .company-detail-wrap ul.social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--sh-radius-circle);
background: rgba(255, 255, 255, 0.06);
color: #fff;
font-size: 15px;
}
body:not(.wp-admin) footer.site-footer .social-links a:hover,
body:not(.wp-admin) footer.site-footer .footer-social a:hover,
body:not(.wp-admin) footer.site-footer .company-detail-wrap ul.social a:hover {
background: var(--sh-gradient);
color: #fff;
transform: translateY(-2px);
box-shadow: var(--sh-shadow-accent);
}
body:not(.wp-admin) footer.site-footer .copyright-wrap {
padding: var(--sh-space-6) 0;
border-top: none;
}
body:not(.wp-admin) footer.site-footer .copyright-wrap p {
color: #8e8fa3;
margin: 0;
font-size: var(--sh-fs-sm);
}
body:not(.wp-admin) footer.site-footer .copyright-wrap .right-content ul {
display: flex;
gap: var(--sh-space-5);
}
body:not(.wp-admin) footer.site-footer .copyright-wrap .right-content a {
font-size: var(--sh-fs-sm);
}
body:not(.wp-admin) footer.site-footer input[type="email"],
body:not(.wp-admin) footer.site-footer input[type="text"] {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #fff;
border-radius: var(--sh-radius-pill);
padding: 12px 18px;
font-size: var(--sh-fs-sm);
}
body:not(.wp-admin) footer.site-footer input[type="email"]::placeholder,
body:not(.wp-admin) footer.site-footer input[type="text"]::placeholder {
color: #8e8fa3;
}
body:not(.wp-admin) footer.site-footer input[type="email"]:focus,
body:not(.wp-admin) footer.site-footer input[type="text"]:focus {
outline: none;
border-color: var(--sh-accent);
box-shadow: 0 0 0 3px rgba(228, 81, 158, 0.15);
}
/* -- AUTH BACKGROUND & HEADING ----------------------------------------- */
body:not(.wp-admin).page-template-wpee-auth-login #page,
body:not(.wp-admin).page-template-wpee-auth-register #page,
body:not(.wp-admin).login-page #page,
body:not(.wp-admin).registration-page #page,
body:not(.wp-admin) .wpee-register-form-wrap {
background: transparent;
}
body:not(.wp-admin) .wpee-register-form-wrap {
max-width: 560px;
margin: var(--sh-space-12) auto;
padding: 0 var(--sh-space-4);
}
body:not(.wp-admin) .wpee-auth-page-heading {
font-size: var(--sh-fs-3xl);
font-weight: var(--sh-fw-bold);
text-align: center;
margin: 0 0 var(--sh-space-6);
background: var(--sh-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* Plain white bg on standalone login/register pages — no gradient wash.
Only target real auth page body classes, NOT generic popup widgets. */
html body:not(.wp-admin).page-template-wpee-auth-login,
html body:not(.wp-admin).page-template-wpee-auth-register,
html body:not(.wp-admin).login-page,
html body:not(.wp-admin).registration-page {
background: #fff !important;
background-image: none !important;
}
html body:not(.wp-admin) #page.wpee-auth-page,
html body:not(.wp-admin) #page.wpee-auth-login-page,
html body:not(.wp-admin) #page.wpee-auth-register-page {
background: #fff !important;
background-image: none !important;
}
html body:not(.wp-admin).page-template-wpee-auth-login .site-footer,
html body:not(.wp-admin).page-template-wpee-auth-register .site-footer,
html body:not(.wp-admin).login-page .site-footer,
html body:not(.wp-admin).registration-page .site-footer {
background: #fff !important;
background-image: none !important;
}
/* -- AUTH FORM CARDS --------------------------------------------------- */
body:not(.wp-admin) .wpee-register-form-wrap .wpee-lr-tab-content-wrap {
background: var(--sh-bg);
border-radius: var(--sh-radius-2xl);
box-shadow: none;
padding: var(--sh-space-10) var(--sh-space-8);
max-height: none;
overflow: visible;
}
html body:not(.wp-admin) .wpee-register-form-wrap,
html body:not(.wp-admin) .wpee-register-form-wrap .wpee-lr-tab-content-wrap {
box-shadow: none !important;
}
@media (max-width: 575px) {
body:not(.wp-admin) .wpee-register-form-wrap .wpee-lr-tab-content-wrap {
padding: var(--sh-space-6) var(--sh-space-5);
border-radius: var(--sh-radius-xl);
}
}
/* Form fields — surgical */
body:not(.wp-admin) .wpee-register-form-wrap .form-control,
body:not(.wp-admin) .wpee-register-form-wrap .dsp-form-control.dspdp-form-control,
body:not(.wp-admin) .wpee-register-form-wrap select.dsp-form-control,
body:not(.wp-admin) .wpee-register-form-wrap input[type="text"].form-control,
body:not(.wp-admin) .wpee-register-form-wrap input[type="password"].form-control {
height: 48px;
border-radius: var(--sh-radius-md);
border: 1.5px solid var(--sh-border);
background: var(--sh-bg-soft);
padding: 0 16px;
font-size: var(--sh-fs-base);
color: var(--sh-text);
transition: var(--sh-transition-default);
box-shadow: none;
}
body:not(.wp-admin) .wpee-register-form-wrap .form-control:focus,
body:not(.wp-admin) .wpee-register-form-wrap .dsp-form-control.dspdp-form-control:focus,
body:not(.wp-admin) .wpee-register-form-wrap select.dsp-form-control:focus {
outline: none;
border-color: var(--sh-primary);
background: var(--sh-bg);
box-shadow: 0 0 0 4px var(--sh-primary-100);
}
body:not(.wp-admin) .wpee-register-form-wrap .form-group > label {
display: block;
font-weight: var(--sh-fw-semibold);
font-size: var(--sh-fs-sm);
color: var(--sh-text-2);
margin-bottom: 8px;
}
body:not(.wp-admin) .wpee-register-form-wrap .form-group {
margin-bottom: var(--sh-space-4);
}
body:not(.wp-admin) .wpee-register-form-wrap .form-group-error .form-control,
body:not(.wp-admin) .wpee-register-form-wrap .form-group-error .dsp-form-control {
border-color: var(--sh-danger);
background: var(--sh-danger-bg);
}
body:not(.wp-admin) .wpee-register-form-wrap .input-error {
display: block;
margin-top: 6px;
color: var(--sh-danger);
font-size: var(--sh-fs-sm);
}
body:not(.wp-admin) .wpee-register-form-wrap .password-wrapper {
position: relative;
}
body:not(.wp-admin) .wpee-register-form-wrap .toggle-password,
body:not(.wp-admin) .wpee-register-form-wrap .toggle-register-password,
body:not(.wp-admin) .wpee-register-form-wrap .toggle-confirm-password {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--sh-text-muted);
cursor: pointer;
}
/* Submit buttons inside auth only — named */
body:not(.wp-admin) .wpee-register-form-wrap .dspdp-btn.dspdp-btn-default,
body:not(.wp-admin) .wpee-register-form-wrap .btn.btn-primary {
display: block;
width: 100%;
height: 52px;
border-radius: var(--sh-radius-pill);
background: var(--sh-gradient);
color: var(--sh-text-invert);
border: none;
font-weight: var(--sh-fw-semibold);
font-size: var(--sh-fs-md);
letter-spacing: 0.2px;
cursor: pointer;
box-shadow: var(--sh-shadow-primary);
transition: var(--sh-transition-default);
margin-top: var(--sh-space-4);
}
body:not(.wp-admin) .wpee-register-form-wrap .dspdp-btn.dspdp-btn-default:hover,
body:not(.wp-admin) .wpee-register-form-wrap .btn.btn-primary:hover {
transform: translateY(-1px);
box-shadow: var(--sh-shadow-accent);
opacity: 0.98;
}
body:not(.wp-admin) .wpee-register-form-wrap .dspdp-btn.dspdp-btn-default:active,
body:not(.wp-admin) .wpee-register-form-wrap .btn.btn-primary:active {
transform: translateY(0);
}
body:not(.wp-admin) .wpee-register-form-wrap .dspdp-btn.dspdp-btn-default:disabled,
body:not(.wp-admin) .wpee-register-form-wrap .btn.btn-primary:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* Forgot / switcher link */
body:not(.wp-admin) .wpee-register-form-wrap .fpw-link,
body:not(.wp-admin) .wpee-auth-switch a {
color: var(--sh-accent);
font-weight: var(--sh-fw-semibold);
text-decoration: none;
}
body:not(.wp-admin) .wpee-register-form-wrap .fpw-link:hover,
body:not(.wp-admin) .wpee-auth-switch a:hover {
color: var(--sh-accent-600);
text-decoration: underline;
}
/* -- AUTH TAB SWITCHER ------------------------------------------------- */
body:not(.wp-admin) .wpee-register-form-wrap .wpee-lr-tab {
display: inline-flex;
background: var(--sh-primary-100);
border-radius: var(--sh-radius-pill);
padding: 4px;
margin: 0 auto var(--sh-space-6);
overflow: visible;
}
body:not(.wp-admin) .wpee-register-form-wrap {
text-align: center;
}
body:not(.wp-admin) .wpee-register-form-wrap .wpee-lr-tab .wpee-lr-tab-title {
width: auto;
padding: 10px 28px;
background: transparent;
color: var(--sh-text-2);
font-size: var(--sh-fs-sm);
font-weight: var(--sh-fw-semibold);
border-radius: var(--sh-radius-pill);
text-transform: none;
}
body:not(.wp-admin) .wpee-register-form-wrap .wpee-lr-tab .wpee-lr-tab-title.active,
body:not(.wp-admin) .wpee-register-form-wrap .wpee-lr-tab .wpee-lr-tab-title:hover {
background: var(--sh-gradient);
color: var(--sh-text-invert);
box-shadow: var(--sh-shadow-primary);
}
/* -- AUTH REGISTER FORM LAYOUT ----------------------------------------- */
body:not(.wp-admin) #wpee-registration-form {
text-align: left;
}
body:not(.wp-admin) #wpee-registration-form > .dsp_reg_main {
display: block;
}
@media (min-width: 768px) {
body:not(.wp-admin) #wpee-registration-form {
max-width: 640px;
margin: 0 auto;
}
body:not(.wp-admin) #wpee-registration-form > .dsp_reg_main {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 var(--sh-space-5);
}
body:not(.wp-admin) #wpee-registration-form > .dsp_reg_main > .form-group,
body:not(.wp-admin) #wpee-registration-form > .dsp_reg_main > .dob-wrap {
min-width: 0;
}
body:not(.wp-admin) #wpee-registration-form > .dsp_reg_main > .form-group.register-email-group,
body:not(.wp-admin) #wpee-registration-form > .dsp_reg_main > .form-group.register-confirm-email-group,
body:not(.wp-admin) #wpee-registration-form > .dsp_reg_main > .form-group.register-terms-group,
body:not(.wp-admin) #wpee-registration-form > .dsp_reg_main > .form-group.register-g-recaptcha-group,
body:not(.wp-admin) #wpee-registration-form > .dsp_reg_main > .form-group:last-child,
body:not(.wp-admin) #wpee-registration-form > .dsp_reg_main > .dob-wrap,
body:not(.wp-admin) #wpee-registration-form > .dsp_reg_main > .password-criteria {
grid-column: 1 / -1;
}
}
body:not(.wp-admin) #wpee-registration-form .dob-wrap {
display: flex;
flex-wrap: wrap;
gap: var(--sh-space-3);
}
body:not(.wp-admin) #wpee-registration-form .dob-wrap > label {
flex: 1 0 100%;
font-weight: var(--sh-fw-semibold);
font-size: var(--sh-fs-sm);
color: var(--sh-text-2);
margin-bottom: 4px;
}
body:not(.wp-admin) #wpee-registration-form .dob-wrap select {
flex: 1 1 0;
min-width: 80px;
}
body:not(.wp-admin) #wpee-registration-form .register-terms-group {
display: flex;
align-items: center;
gap: 10px;
background: var(--sh-primary-50);
padding: 12px 16px;
border-radius: var(--sh-radius-md);
}
body:not(.wp-admin) #wpee-registration-form .register-terms-group label {
margin: 0;
font-size: var(--sh-fs-sm);
color: var(--sh-text-2);
font-weight: var(--sh-fw-medium);
}
body:not(.wp-admin) #wpee-registration-form .register-terms-group input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--sh-primary);
flex-shrink: 0;
}
body:not(.wp-admin) #wpee-registration-form .password-criteria {
background: var(--sh-soft-2);
padding: var(--sh-space-4);
border-radius: var(--sh-radius-md);
margin: var(--sh-space-2) 0;
font-size: var(--sh-fs-sm);
color: var(--sh-text-2);
}
body:not(.wp-admin) #wpee-registration-form .password-criteria p {
margin: 0 0 8px;
font-weight: var(--sh-fw-semibold);
}
body:not(.wp-admin) #wpee-registration-form .password-criteria .bi-check-circle-fill {
color: var(--sh-success);
}
body:not(.wp-admin) #wpee-registration-form .password-criteria .bi-x-circle-fill {
color: var(--sh-danger);
}
/* Login form — remember me / forgot row */
body:not(.wp-admin) #login-form .remember-me-group {
display: flex;
justify-content: space-between;
align-items: center;
margin: var(--sh-space-3) 0 var(--sh-space-4);
flex-wrap: wrap;
gap: 8px;
}
body:not(.wp-admin) #login-form .remember-me-group label {
margin: 0 0 0 6px;
font-size: var(--sh-fs-sm);
color: var(--sh-text-2);
}
body:not(.wp-admin) #login-form input[type="checkbox"] {
accent-color: var(--sh-primary);
}
body:not(.wp-admin) .wpee-login-error {
background: var(--sh-danger-bg) !important;
color: var(--sh-danger) !important;
border-radius: var(--sh-radius-md);
padding: 12px 16px;
font-weight: var(--sh-fw-semibold);
font-size: var(--sh-fs-sm);
}
/* -- AUTH POPUP -------------------------------------------------------- */
body:not(.wp-admin) .lr-popup-overlay,
body:not(.wp-admin) .wpee-lr-popup-overlay,
body:not(.wp-admin) .wpee-popup-overlay {
background: rgba(26, 26, 46, 0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
body:not(.wp-admin) .wpee-lr-popup,
body:not(.wp-admin) .lr-popup,
body:not(.wp-admin) .wpee-lr-popup-wrap {
border-radius: var(--sh-radius-2xl);
box-shadow: var(--sh-shadow-4);
overflow: hidden;
background: var(--sh-bg);
}
body:not(.wp-admin) .wpee-lr-popup .wpee-lr-tab,
body:not(.wp-admin) .lr-popup .wpee-lr-tab {
background: var(--sh-gradient);
border-radius: 0;
padding: 0;
}
body:not(.wp-admin) .wpee-lr-popup .wpee-lr-tab .wpee-lr-tab-title,
body:not(.wp-admin) .lr-popup .wpee-lr-tab .wpee-lr-tab-title {
background: transparent;
color: rgba(255, 255, 255, 0.7);
border-radius: 0;
padding: 22px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
body:not(.wp-admin) .wpee-lr-popup .wpee-lr-tab .wpee-lr-tab-title.active,
body:not(.wp-admin) .lr-popup .wpee-lr-tab .wpee-lr-tab-title.active {
background: rgba(255, 255, 255, 0.15);
color: #fff;
box-shadow: inset 0 -3px 0 #fff;
}
/* -- ELEMENTOR LANDINGS ------------------------------------------------ */
body:not(.wp-admin) .elementor-page {
background: var(--sh-bg);
color: var(--sh-text);
}
body:not(.wp-admin) .elementor-page h1,
body:not(.wp-admin) .elementor-page h2,
body:not(.wp-admin) .elementor-page h3 {
color: var(--sh-text);
font-weight: var(--sh-fw-bold);
letter-spacing: -0.3px;
}
body:not(.wp-admin) .elementor-page p,
body:not(.wp-admin) .elementor-page .wpee-block-content {
color: var(--sh-text-2);
line-height: var(--sh-lh-relaxed);
}
body:not(.wp-admin) .elementor-page p a,
body:not(.wp-admin) .elementor-page .wpee-block-content a:not([class*="btn"]):not(.elementor-button) {
color: var(--sh-accent);
text-decoration: none;
}
body:not(.wp-admin) .elementor-page p a:hover,
body:not(.wp-admin) .elementor-page .wpee-block-content a:not([class*="btn"]):not(.elementor-button):hover {
color: var(--sh-accent-600);
text-decoration: underline;
}
/* Elementor buttons — keep size, apply gradient + pill */
body:not(.wp-admin) .elementor-page .elementor-button,
body:not(.wp-admin) .elementor-page a.elementor-button-link {
border-radius: var(--sh-radius-pill) !important;
background: var(--sh-gradient);
color: var(--sh-text-invert);
font-weight: var(--sh-fw-semibold);
letter-spacing: 0.2px;
box-shadow: var(--sh-shadow-primary);
transition: var(--sh-transition-default);
border: none;
}
body:not(.wp-admin) .elementor-page .elementor-button:hover,
body:not(.wp-admin) .elementor-page a.elementor-button-link:hover {
transform: translateY(-2px);
box-shadow: var(--sh-shadow-accent);
color: var(--sh-text-invert);
}
body:not(.wp-admin) .elementor-page .elementor-button-xs { padding: 10px 20px; font-size: var(--sh-fs-sm); }
body:not(.wp-admin) .elementor-page .elementor-button-sm { padding: 12px 24px; font-size: var(--sh-fs-sm); }
body:not(.wp-admin) .elementor-page .elementor-button-md { padding: 14px 28px; font-size: var(--sh-fs-base); }
body:not(.wp-admin) .elementor-page .elementor-button-lg { padding: 16px 34px; font-size: var(--sh-fs-md); }
body:not(.wp-admin) .elementor-page .elementor-button-xl { padding: 18px 42px; font-size: var(--sh-fs-lg); }
/* Outlined / secondary Elementor buttons */
body:not(.wp-admin) .elementor-page .elementor-button.elementor-button-outline,
body:not(.wp-admin) .elementor-page .elementor-button[class*="outline"] {
background: transparent;
color: var(--sh-primary);
border: 1.5px solid var(--sh-primary);
box-shadow: none;
}
body:not(.wp-admin) .elementor-page .elementor-button.elementor-button-outline:hover {
background: var(--sh-primary-100);
color: var(--sh-primary-600);
}
/* Soft sections / cards */
body:not(.wp-admin) .elementor-page .elementor-section.sh-soft,
body:not(.wp-admin) .elementor-page .elementor-section.elementor-section-soft {
background: var(--sh-gradient-soft);
}
body:not(.wp-admin) .elementor-page .elementor-widget-image img {
border-radius: var(--sh-radius-xl);
}
body:not(.wp-admin) .elementor-page .elementor-widget-icon-box .elementor-icon-box-wrapper {
background: var(--sh-bg);
padding: var(--sh-space-6);
border-radius: var(--sh-radius-xl);
box-shadow: var(--sh-shadow-1);
transition: var(--sh-transition-default);
}
body:not(.wp-admin) .elementor-page .elementor-widget-icon-box .elementor-icon-box-wrapper:hover {
box-shadow: var(--sh-shadow-2);
transform: translateY(-4px);
}
body:not(.wp-admin) .elementor-page .elementor-widget-icon-box .elementor-icon {
background: var(--sh-gradient);
color: #fff;
width: 60px;
height: 60px;
border-radius: var(--sh-radius-lg);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: var(--sh-shadow-primary);
}
/* Elementor inputs */
body:not(.wp-admin) .elementor-page .elementor-field-group input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
body:not(.wp-admin) .elementor-page .elementor-field-group textarea,
body:not(.wp-admin) .elementor-page .elementor-field-group select {
border-radius: var(--sh-radius-md);
border: 1.5px solid var(--sh-border);
background: var(--sh-bg-soft);
padding: 12px 16px;
transition: var(--sh-transition-default);
}
body:not(.wp-admin) .elementor-page .elementor-field-group input:focus,
body:not(.wp-admin) .elementor-page .elementor-field-group textarea:focus,
body:not(.wp-admin) .elementor-page .elementor-field-group select:focus {
outline: none;
border-color: var(--sh-primary);
background: var(--sh-bg);
box-shadow: 0 0 0 4px var(--sh-primary-100);
}
/* ZONE_A_END */
/* ==========================================================================
ZONE B — Core dating UX: profile (header + content), browse/search/match, messages
========================================================================== */
/* ZONE_B_START */
/* -- PROFILE HEADER: COVER --- */
body:not(.wp-admin) .wpee-datebook-profile-card {
position: relative;
background: var(--sh-bg);
border-radius: var(--sh-radius-2xl);
box-shadow: var(--sh-shadow-2);
overflow: hidden;
margin-bottom: var(--sh-space-6);
}
body:not(.wp-admin) .profile-cover-image,
body:not(.wp-admin) .wpee-datebook-profile-card::before {
content: "";
display: block;
width: 100%;
min-height: 300px;
background: var(--sh-gradient-hero);
background-size: cover;
background-position: center;
border-top-left-radius: var(--sh-radius-2xl);
border-top-right-radius: var(--sh-radius-2xl);
position: relative;
}
body:not(.wp-admin) .wpee-datebook-profile-card .profile-cover-image {
min-height: 320px;
margin-bottom: -120px;
}
body:not(.wp-admin) .wpee-datebook-profile-card:has(.profile-cover-image)::before { display: none; }
body:not(.wp-admin) .wpee-datebook-cover-actions {
position: absolute;
right: var(--sh-space-6);
top: var(--sh-space-5);
z-index: 3;
}
body:not(.wp-admin) .wpee-datebook-cover-actions .trigger-cover-photo {
background: rgba(255, 255, 255, 0.92);
color: var(--sh-primary) !important;
padding: 10px 18px;
border-radius: var(--sh-radius-pill);
font-size: var(--sh-fs-sm);
font-weight: var(--sh-fw-semibold);
border: 0;
box-shadow: var(--sh-shadow-2);
backdrop-filter: blur(8px);
transition: var(--sh-transition-default);
display: inline-flex;
align-items: center;
gap: 6px;
}
body:not(.wp-admin) .wpee-datebook-cover-actions .trigger-cover-photo:hover {
background: #fff;
transform: translateY(-2px);
box-shadow: var(--sh-shadow-3);
}
body:not(.wp-admin) .change-cover-photo form { display: none; }
/* -- PROFILE HEADER: AVATAR --- */
body:not(.wp-admin) .profile-user-details.wpee-datebook-profile-top {
position: relative;
display: flex;
gap: var(--sh-space-6);
padding: var(--sh-space-6) var(--sh-space-8);
align-items: flex-end;
flex-wrap: wrap;
}
body:not(.wp-admin) .profile-user-details .profile-img.change-profile-image {
position: relative;
width: 160px;
height: 160px;
border-radius: var(--sh-radius-circle);
overflow: visible;
margin-top: -90px;
flex-shrink: 0;
z-index: 2;
}
body:not(.wp-admin) .profile-user-details .profile-img figure {
width: 160px;
height: 160px;
border-radius: var(--sh-radius-circle);
overflow: hidden;
border: 4px solid #fff;
box-shadow: var(--sh-shadow-3);
margin: 0;
background: var(--sh-bg-soft);
}
body:not(.wp-admin) .profile-user-details .profile-img figure img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
body:not(.wp-admin) .profile-user-details .update_profile_text_div {
position: absolute;
right: 4px;
bottom: 4px;
width: 42px;
height: 42px;
background: var(--sh-gradient);
border-radius: var(--sh-radius-circle);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: var(--sh-shadow-accent);
border: 3px solid #fff;
z-index: 3;
transition: var(--sh-transition-default);
}
body:not(.wp-admin) .profile-user-details .update_profile_text_div:hover { transform: scale(1.08); }
body:not(.wp-admin) .profile-user-details .update_profile_text_div a,
body:not(.wp-admin) .profile-user-details .update_profile_text_div i {
color: #fff !important;
font-size: 16px;
}
body:not(.wp-admin) .profile-user-details .wpee-user-status {
position: absolute;
top: 10px;
right: 10px;
width: 18px;
height: 18px;
border-radius: var(--sh-radius-circle);
border: 3px solid #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
z-index: 3;
}
body:not(.wp-admin) .profile-user-details .wpee-user-status.wpee-online {
background: var(--sh-success);
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25), 0 2px 6px rgba(0,0,0,0.15);
}
body:not(.wp-admin) .profile-user-details .wpee-user-status.wpee-offline { background: #cbd5e1; }
/* -- PROFILE HEADER: INFO/BADGES --- */
body:not(.wp-admin) .wpee-datebook-details-column {
flex: 1;
min-width: 0;
padding-bottom: var(--sh-space-2);
}
body:not(.wp-admin) .user-info-wrapper {
display: flex;
flex-wrap: wrap;
gap: var(--sh-space-5);
align-items: flex-end;
justify-content: space-between;
}
body:not(.wp-admin) .wpee-datebook-info-primary { flex: 1; min-width: 260px; }
body:not(.wp-admin) .wpee-user-rating-wrap {
display: flex;
align-items: center;
gap: var(--sh-space-3);
flex-wrap: wrap;
margin-bottom: 6px;
}
body:not(.wp-admin) .wpee-datebook-profile-top h4.username {
font-size: var(--sh-fs-2xl);
font-weight: var(--sh-fw-bold);
line-height: var(--sh-lh-tight);
color: var(--sh-text) !important;
margin: 0;
letter-spacing: -0.02em;
}
body:not(.wp-admin) .wpee-datebook-profile-top .wpee-rating-stars {
color: var(--sh-warning);
font-size: var(--sh-fs-sm);
}
body:not(.wp-admin) .wpee-datebook-online-line { margin: 0 0 var(--sh-space-3); }
body:not(.wp-admin) .wpee-db-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: var(--sh-radius-pill);
font-size: var(--sh-fs-xs);
font-weight: var(--sh-fw-semibold);
letter-spacing: 0.02em;
text-transform: uppercase;
}
body:not(.wp-admin) .wpee-db-badge-online {
background: var(--sh-success-bg);
color: #15803d;
}
body:not(.wp-admin) .wpee-db-badge-online::before {
content: "";
width: 7px; height: 7px;
border-radius: 50%;
background: var(--sh-success);
box-shadow: 0 0 0 3px rgba(34,197,94,0.2);
animation: sh-pulse 2s infinite;
}
@keyframes sh-pulse { 50% { opacity: 0.6; } }
body:not(.wp-admin) .wpee-db-badge-offline {
background: var(--sh-border);
color: var(--sh-text-muted);
}
body:not(.wp-admin) .age-location-wrap {
display: flex;
flex-wrap: wrap;
gap: var(--sh-space-2);
color: var(--sh-text-2) !important;
margin-bottom: var(--sh-space-2);
}
body:not(.wp-admin) .age-location-wrap > div {
background: var(--sh-primary-50);
color: var(--sh-text) !important;
padding: 6px 14px;
border-radius: var(--sh-radius-pill);
font-size: var(--sh-fs-sm);
font-weight: var(--sh-fw-medium);
display: inline-flex;
gap: 5px;
align-items: center;
}
body:not(.wp-admin) .age-location-wrap .age-title,
body:not(.wp-admin) .age-location-wrap .location-title,
body:not(.wp-admin) .age-location-wrap .credits-title {
color: var(--sh-text-muted);
font-weight: var(--sh-fw-medium);
}
body:not(.wp-admin) .wpee-datebook-meta-line {
color: var(--sh-text-muted);
font-size: var(--sh-fs-sm);
margin: var(--sh-space-2) 0 0;
}
body:not(.wp-admin) .wpee-datebook-account-status .profile-location {
background: var(--sh-accent-50);
color: var(--sh-accent-700);
padding: 6px 14px;
border-radius: var(--sh-radius-pill);
font-size: var(--sh-fs-sm);
font-weight: var(--sh-fw-semibold);
display: inline-flex;
gap: 5px;
}
body:not(.wp-admin) .wpee-datebook-account-status .profile-status-title {
color: var(--sh-accent);
font-weight: var(--sh-fw-medium);
}
body:not(.wp-admin) .wpee-datebook-actions {
display: flex;
gap: var(--sh-space-3);
flex-wrap: wrap;
align-items: center;
margin-top: var(--sh-space-4);
}
body:not(.wp-admin) .wpee-datebook-actions .wpee-db-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 22px;
border-radius: var(--sh-radius-pill);
font-size: var(--sh-fs-sm);
font-weight: var(--sh-fw-semibold);
text-decoration: none;
border: 0;
cursor: pointer;
transition: var(--sh-transition-default);
line-height: 1;
}
body:not(.wp-admin) .wpee-datebook-actions .wpee-db-btn-primary {
background: var(--sh-gradient);
color: #fff !important;
box-shadow: var(--sh-shadow-accent);
}
body:not(.wp-admin) .wpee-datebook-actions .wpee-db-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(228, 81, 158, 0.32);
}
body:not(.wp-admin) .wpee-datebook-actions .wpee-db-btn-outline {
background: #fff;
color: var(--sh-primary) !important;
border: 1.5px solid var(--sh-primary-200);
}
body:not(.wp-admin) .wpee-datebook-actions .wpee-db-btn-outline:hover {
background: var(--sh-primary-50);
border-color: var(--sh-primary-400);
}
body:not(.wp-admin) .wpee-datebook-actions .wpee-db-btn-muted {
background: var(--sh-bg-soft);
color: var(--sh-text-2) !important;
border: 1.5px solid var(--sh-border);
}
body:not(.wp-admin) .wpee-datebook-actions .wpee-db-btn-muted:hover {
background: var(--sh-danger-bg);
color: var(--sh-danger) !important;
border-color: transparent;
}
/* -- PROFILE HEADER: TAB BAR --- */
body:not(.wp-admin) .profile-header-menu {
border-top: 1px solid var(--sh-divider);
padding: 0 var(--sh-space-6);
background: #fff;
}
body:not(.wp-admin) .profile-menu-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--sh-space-6);
flex-wrap: wrap;
}
body:not(.wp-admin) ul.profile-menu-tab {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 4px;
flex-wrap: wrap;
align-items: center;
flex: 1;
}
body:not(.wp-admin) ul.profile-menu-tab li.profile-menu-tab-list {
list-style: none;
margin: 0;
padding: 0;
background: transparent !important;
border: 0 !important;
position: relative;
}
body:not(.wp-admin) ul.profile-menu-tab li.profile-menu-tab-list a,
body:not(.wp-admin) ul.profile-menu-tab li.profile-menu-tab-list.active a,
body:not(.wp-admin) ul.profile-menu-tab li.profile-menu-tab-list a.btn-primary {
display: inline-flex;
align-items: center;
padding: 14px 18px !important;
color: var(--sh-text-2) !important;
background: transparent !important;
font-weight: var(--sh-fw-medium);
font-size: var(--sh-fs-sm);
text-decoration: none;
border-radius: 0 !important;
border: 0 !important;
box-shadow: none !important;
position: relative;
transition: color var(--sh-duration) var(--sh-ease);
line-height: 1;
}
body:not(.wp-admin) ul.profile-menu-tab li.profile-menu-tab-list a:hover {
color: var(--sh-primary) !important;
}
body:not(.wp-admin) ul.profile-menu-tab li.profile-menu-tab-list.active a {
color: var(--sh-primary) !important;
font-weight: var(--sh-fw-semibold);
}
body:not(.wp-admin) ul.profile-menu-tab li.profile-menu-tab-list.active::after {
content: "";
position: absolute;
left: 14px;
right: 14px;
bottom: 0;
height: 3px;
background: var(--sh-accent) !important;
border-radius: var(--sh-radius-pill) var(--sh-radius-pill) 0 0;
}
html body ul.profile-menu-tab li.profile-menu-tab-list.active::after {
background: var(--sh-accent) !important;
}
html body ul.profile-menu-tab li.profile-menu-tab-list.active a,
html body .wpee-datebook-profile-card .profile-menu-tab-list.active > a {
color: var(--sh-accent) !important;
}
/* -- PROFILE NOTIFICATION LINKS --- */
body:not(.wp-admin) .profile-notification-blocks .wpee-notification-block-wrap {
display: flex;
align-items: center;
}
body:not(.wp-admin) ul.wpee-notification-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 2px;
align-items: center;
}
body:not(.wp-admin) ul.wpee-notification-links > li.wpee-menu {
list-style: none;
margin: 0;
position: relative;
}
body:not(.wp-admin) ul.wpee-notification-links > li.wpee-menu > a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
font-size: var(--sh-fs-sm);
color: var(--sh-text-2) !important;
text-decoration: none;
border-radius: var(--sh-radius-pill);
transition: var(--sh-transition-default);
position: relative;
}
body:not(.wp-admin) ul.wpee-notification-links > li.wpee-menu > a:hover {
background: var(--sh-primary-50);
color: var(--sh-primary) !important;
}
body:not(.wp-admin) ul.wpee-notification-links > li.wpee-menu.wpee_active_link > a {
background: var(--sh-primary-100);
color: var(--sh-primary) !important;
font-weight: var(--sh-fw-semibold);
}
body:not(.wp-admin) ul.wpee-notification-links > li.wpee-menu > a > i {
font-size: 15px;
color: inherit;
}
body:not(.wp-admin) .wpee-count-num {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
background: var(--sh-gradient);
color: #fff;
font-size: 11px;
font-weight: var(--sh-fw-bold);
border-radius: var(--sh-radius-pill);
margin-left: 4px;
box-shadow: var(--sh-shadow-accent);
}
body:not(.wp-admin) ul.wpee-notification-links .wpee-sub-menu {
position: absolute;
right: 0;
top: calc(100% + 8px);
min-width: 240px;
background: #fff;
border-radius: var(--sh-radius-lg);
box-shadow: var(--sh-shadow-3);
padding: 8px;
z-index: 50;
list-style: none;
}
body:not(.wp-admin) ul.wpee-notification-links .wpee-sub-menu li a {
display: flex;
gap: 10px;
align-items: center;
padding: 10px 14px;
border-radius: var(--sh-radius-md);
color: var(--sh-text-2) !important;
text-decoration: none;
font-size: var(--sh-fs-sm);
}
body:not(.wp-admin) ul.wpee-notification-links .wpee-sub-menu li a:hover {
background: var(--sh-primary-50);
color: var(--sh-primary) !important;
}
/* -- PROFILE CONTENT: SHARED CARD --- */
body:not(.wp-admin) .wpee-block {
background: #fff;
border-radius: var(--sh-radius-xl);
box-shadow: var(--sh-shadow-1);
margin-bottom: var(--sh-space-5);
overflow: hidden;
transition: box-shadow var(--sh-duration) var(--sh-ease);
}
body:not(.wp-admin) .wpee-block:hover { box-shadow: var(--sh-shadow-2); }
body:not(.wp-admin) .wpee-block-header {
padding: 20px 24px 4px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
body:not(.wp-admin) .wpee-block-title {
margin: 0;
font-size: var(--sh-fs-lg);
font-weight: var(--sh-fw-bold);
color: var(--sh-text);
display: flex;
align-items: center;
gap: 10px;
letter-spacing: -0.01em;
}
body:not(.wp-admin) .wpee-block-title::before {
content: "";
width: 4px;
height: 20px;
background: var(--sh-gradient);
border-radius: var(--sh-radius-pill);
}
body:not(.wp-admin) .wpee-block-content { padding: 16px 24px 4px; }
body:not(.wp-admin) .wpee-block-footer {
padding: 12px 24px 20px;
display: flex;
justify-content: flex-end;
}
body:not(.wp-admin) .wpee-block-footer .edit-profile-link,
body:not(.wp-admin) .wpee-block-footer .view-detail-link {
color: var(--sh-accent) !important;
font-size: var(--sh-fs-sm);
font-weight: var(--sh-fw-semibold);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
transition: gap var(--sh-duration) var(--sh-ease);
}
body:not(.wp-admin) .wpee-block-footer .edit-profile-link::after,
body:not(.wp-admin) .wpee-block-footer .view-detail-link::after {
content: "→";
transition: transform var(--sh-duration) var(--sh-ease);
}
body:not(.wp-admin) .wpee-block-footer .edit-profile-link:hover { gap: 8px; }
body:not(.wp-admin) .wpee-block-footer .edit-profile-link:hover::after { transform: translateX(2px); }
/* -- PROFILE CONTENT: ABOUT/DETAILS --- */
body:not(.wp-admin) .profile-detail-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--sh-space-3);
}
body:not(.wp-admin) .profile-detail-list > li {
list-style: none;
padding: 12px 14px;
background: var(--sh-bg-soft);
border-radius: var(--sh-radius-md);
display: flex;
flex-direction: column;
gap: 2px;
border: 1px solid transparent;
transition: var(--sh-transition-default);
}
body:not(.wp-admin) .profile-detail-list > li:hover {
background: var(--sh-primary-50);
border-color: var(--sh-primary-100);
}
body:not(.wp-admin) .profile-detail-list .detail-label {
font-size: var(--sh-fs-xs);
color: var(--sh-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: var(--sh-fw-semibold);
}
body:not(.wp-admin) .profile-detail-list .detail-value {
font-size: var(--sh-fs-base);
color: var(--sh-text);
font-weight: var(--sh-fw-semibold);
}
/* -- PROFILE CONTENT: PHOTOS/MEDIA --- */
body:not(.wp-admin) ul.profile-photo-list {
list-style: none;
padding: 0;
margin: 0;
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px;
}
body:not(.wp-admin) ul.profile-photo-list li.photos-list {
list-style: none;
margin: 0;
padding: 0;
aspect-ratio: 1;
border-radius: var(--sh-radius-lg);
overflow: hidden;
position: relative;
box-shadow: var(--sh-shadow-1);
transition: var(--sh-transition-default);
}
body:not(.wp-admin) ul.profile-photo-list li.photos-list:hover {
transform: scale(1.03);
box-shadow: var(--sh-shadow-3);
z-index: 2;
}
body:not(.wp-admin) ul.profile-photo-list li.photos-list a {
display: block;
width: 100%;
height: 100%;
position: relative;
}
body:not(.wp-admin) ul.profile-photo-list li.photos-list .image-bg {
display: block;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
transition: transform var(--sh-duration-slow) var(--sh-ease);
}
body:not(.wp-admin) ul.profile-photo-list li.photos-list:hover .image-bg { transform: scale(1.08); }
body:not(.wp-admin) ul.profile-photo-list li.no-photos-message {
grid-column: 1 / -1;
text-align: center;
padding: var(--sh-space-8);
color: var(--sh-text-muted);
background: var(--sh-bg-soft);
border-radius: var(--sh-radius-lg);
font-size: var(--sh-fs-sm);
}
/* -- PROFILE CONTENT: FRIENDS LIST --- */
body:not(.wp-admin) ul.profile-friends-list,
body:not(.wp-admin) ul.friends-section {
list-style: none;
padding: 0;
margin: 0;
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 14px;
}
body:not(.wp-admin) ul.profile-friends-list > li {
list-style: none;
margin: 0;
padding: 10px;
background: #fff;
border: 1px solid var(--sh-divider);
border-radius: var(--sh-radius-lg);
text-align: center;
transition: var(--sh-transition-default);
position: relative;
}
body:not(.wp-admin) ul.profile-friends-list > li:hover {
border-color: var(--sh-primary-200);
box-shadow: var(--sh-shadow-2);
transform: translateY(-2px);
}
body:not(.wp-admin) ul.profile-friends-list .img-holder {
position: relative;
margin: 0 auto 8px;
width: 72px;
height: 72px;
}
body:not(.wp-admin) ul.profile-friends-list .profile-friend-cover-thumb {
width: 72px !important;
height: 72px !important;
border-radius: var(--sh-radius-circle);
border: 2px solid #fff;
box-shadow: var(--sh-shadow-1);
background-position: center !important;
background-size: cover !important;
}
body:not(.wp-admin) ul.profile-friends-list .img-holder .wpee-user-status {
position: absolute;
right: 2px;
bottom: 2px;
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid #fff;
}
body:not(.wp-admin) ul.profile-friends-list .img-holder .wpee-user-status.wpee-online { background: var(--sh-success); }
body:not(.wp-admin) ul.profile-friends-list .img-holder .wpee-user-status.wpee-offline { background: #cbd5e1; }
body:not(.wp-admin) ul.profile-friends-list .user-name-show {
display: block;
font-size: var(--sh-fs-sm);
font-weight: var(--sh-fw-semibold);
}
body:not(.wp-admin) ul.profile-friends-list .user-name-show a {
color: var(--sh-text) !important;
text-decoration: none;
}
body:not(.wp-admin) ul.profile-friends-list .count-friends {
display: block;
font-size: var(--sh-fs-xs);
color: var(--sh-text-muted);
font-weight: var(--sh-fw-medium);
margin-top: 2px;
}
/* -- PROFILE CONTENT: COMMENTS --- */
body:not(.wp-admin) .comment-list-wrapper {
background: #fff;
border-radius: var(--sh-radius-xl);
padding: var(--sh-space-5);
box-shadow: var(--sh-shadow-1);
}
body:not(.wp-admin) ul.profile-section-tab {
list-style: none;
display: flex;
gap: 4px;
padding: 4px;
background: var(--sh-bg-soft);
border-radius: var(--sh-radius-pill);
margin: 0 0 var(--sh-space-4);
width: fit-content;
}
body:not(.wp-admin) ul.profile-section-tab li.profile-section-tab-title {
list-style: none;
margin: 0;
padding: 0;
}
body:not(.wp-admin) ul.profile-section-tab li.profile-section-tab-title a {
display: inline-flex;
padding: 8px 18px;
border-radius: var(--sh-radius-pill);
font-size: var(--sh-fs-sm);
font-weight: var(--sh-fw-semibold);
color: var(--sh-text-muted) !important;
text-decoration: none;
transition: var(--sh-transition-default);
}
body:not(.wp-admin) ul.profile-section-tab li.profile-section-tab-title.active a {
background: #fff;
color: var(--sh-primary) !important;
box-shadow: var(--sh-shadow-1);
}
body:not(.wp-admin) .wpee-comments-wrapper .comment-item,
body:not(.wp-admin) .wpee-comments-wrapper article {
padding: 14px 16px;
background: var(--sh-bg-soft);
border-radius: var(--sh-radius-lg);
margin-bottom: 10px;
}
/* -- PROFILE CONTENT: ACTIVITY FEED --- */
body:not(.wp-admin) .profile-activity-feeds { display: block; }
body:not(.wp-admin) .feeds-content > .feed-item,
body:not(.wp-admin) .feeds-content > article,
body:not(.wp-admin) .feeds-content > div.feeds-details {
background: #fff;
border-radius: var(--sh-radius-xl);
padding: var(--sh-space-5);
margin-bottom: var(--sh-space-4);
box-shadow: var(--sh-shadow-1);
transition: box-shadow var(--sh-duration) var(--sh-ease);
}
body:not(.wp-admin) .feeds-content > .feed-item:hover,
body:not(.wp-admin) .feeds-content > article:hover { box-shadow: var(--sh-shadow-2); }
body:not(.wp-admin) h4.wpee-feeds-empty {
text-align: center;
padding: var(--sh-space-10);
background: var(--sh-bg-soft);
border-radius: var(--sh-radius-xl);
color: var(--sh-text-muted);
font-size: var(--sh-fs-base);
font-weight: var(--sh-fw-medium);
}
/* -- PROFILE CONTENT: QUICK SEARCH WIDGET --- */
body:not(.wp-admin) .profile-quick-search.wpee-block .wpee-quick-search-form { padding: 0; margin: 0; }
body:not(.wp-admin) ul.wpee-quick-search-rows {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--sh-space-3);
}
body:not(.wp-admin) ul.wpee-quick-search-rows > li { list-style: none; margin: 0; padding: 0; }
body:not(.wp-admin) .wpee-qs-row-line1-inner,
body:not(.wp-admin) .wpee-qs-row-line2-inner {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--sh-space-3);
align-items: end;
}
body:not(.wp-admin) .wpee-qs-field { display: flex; flex-direction: column; gap: 4px; }
body:not(.wp-admin) .wpee-qs-label {
font-size: var(--sh-fs-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--sh-text-muted);
font-weight: var(--sh-fw-semibold);
}
body:not(.wp-admin) .wpee-qs-submit-wrap { position: relative; }
body:not(.wp-admin) .wpee-qs-submit-wrap .link-cover { display: none; }
body:not(.wp-admin) input.wpee-qs-submit,
body:not(.wp-admin) .profile-quick-search .dsp_submit_button {
width: 100%;
padding: 12px 20px !important;
background: var(--sh-gradient) !important;
color: #fff !important;
border: 0 !important;
border-radius: var(--sh-radius-pill) !important;
font-weight: var(--sh-fw-semibold) !important;
font-size: var(--sh-fs-sm) !important;
cursor: pointer;
box-shadow: var(--sh-shadow-accent);
transition: var(--sh-transition-default);
}
body:not(.wp-admin) input.wpee-qs-submit:hover {
transform: translateY(-2px);
box-shadow: var(--sh-shadow-3);
}
/* Form controls used across profile + search */
body:not(.wp-admin) select.dspdp-form-control,
body:not(.wp-admin) select.dsp-form-control,
body:not(.wp-admin) input.dspdp-form-control,
body:not(.wp-admin) input.dsp-form-control,
body:not(.wp-admin) input.form-control,
body:not(.wp-admin) textarea.dspdp-form-control,
body:not(.wp-admin) textarea.dsp-form-control {
width: 100%;
padding: 11px 14px;
font-size: var(--sh-fs-sm);
color: var(--sh-text);
background: #fff;
border: 1.5px solid var(--sh-border);
border-radius: var(--sh-radius-md);
transition: border-color var(--sh-duration) var(--sh-ease), box-shadow var(--sh-duration) var(--sh-ease);
line-height: 1.3;
}
body:not(.wp-admin) select.dspdp-form-control:focus,
body:not(.wp-admin) input.dspdp-form-control:focus,
body:not(.wp-admin) input.dsp-form-control:focus,
body:not(.wp-admin) textarea.dspdp-form-control:focus,
body:not(.wp-admin) input.form-control:focus {
border-color: var(--sh-primary-400);
box-shadow: 0 0 0 4px var(--sh-primary-100);
outline: none;
}
/* -- PROFILE CONTENT: WINKS/GIFTS RECEIVED --- */
body:not(.wp-admin) .wink-list-wrap,
body:not(.wp-admin) .gifts-list-wrap,
body:not(.wp-admin) .received-wink-list,
body:not(.wp-admin) .gift-received-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 14px;
padding: 0;
list-style: none;
}
body:not(.wp-admin) .wink-list-wrap > li,
body:not(.wp-admin) .gifts-list-wrap > li,
body:not(.wp-admin) .received-wink-list > li,
body:not(.wp-admin) .gift-received-list > li {
list-style: none;
background: #fff;
border-radius: var(--sh-radius-lg);
padding: 14px;
text-align: center;
box-shadow: var(--sh-shadow-1);
border: 1px solid var(--sh-divider);
transition: var(--sh-transition-default);
}
body:not(.wp-admin) .wink-list-wrap > li:hover,
body:not(.wp-admin) .gifts-list-wrap > li:hover {
box-shadow: var(--sh-shadow-2);
transform: translateY(-2px);
border-color: var(--sh-accent-100);
}
/* -- MEMBER BROWSE: GRID --- */
body:not(.wp-admin) .main-member-list-wrap,
body:not(.wp-admin) .member-list-tab-content.main-member-list-wrap {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--sh-space-5);
padding: 0;
margin: 0;
}
@media (max-width: 600px) {
body:not(.wp-admin) .main-member-list-wrap {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 12px;
}
}
/* -- MEMBER BROWSE: CARD --- */
body:not(.wp-admin) .member-detail-wrap {
position: relative;
background: #fff;
border-radius: var(--sh-radius-xl);
overflow: hidden;
box-shadow: var(--sh-shadow-1);
transition: transform var(--sh-duration) var(--sh-ease), box-shadow var(--sh-duration) var(--sh-ease);
display: flex;
flex-direction: column;
}
body:not(.wp-admin) .member-detail-wrap:hover {
transform: translateY(-4px);
box-shadow: var(--sh-shadow-3);
}
body:not(.wp-admin) .member-detail-wrap .img-holder {
position: relative;
margin: 0;
width: 100%;
aspect-ratio: 3/4;
overflow: hidden;
background: var(--sh-gradient-soft);
}
body:not(.wp-admin) .member-detail-wrap .img-holder a {
display: block;
width: 100%;
height: 100%;
}
body:not(.wp-admin) .member-detail-wrap .img-holder img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform var(--sh-duration-slow) var(--sh-ease);
}
body:not(.wp-admin) .member-detail-wrap:hover .img-holder img { transform: scale(1.06); }
body:not(.wp-admin) .member-detail-wrap .img-holder::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 45%;
background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 100%);
pointer-events: none;
}
body:not(.wp-admin) .member-detail-wrap .user-details {
padding: 12px 14px 14px;
display: flex;
flex-direction: column;
gap: 4px;
}
body:not(.wp-admin) .member-detail-wrap .member-user-name {
margin: 0;
font-size: var(--sh-fs-md);
font-weight: var(--sh-fw-bold);
color: var(--sh-text);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
body:not(.wp-admin) .member-detail-wrap .member-user-name a,
body:not(.wp-admin) .member-detail-wrap .user-name-show a {
color: var(--sh-text) !important;
text-decoration: none;
}
body:not(.wp-admin) .member-detail-wrap .member-user-name a:hover { color: var(--sh-primary) !important; }
body:not(.wp-admin) .member-detail-wrap .user-detail-content {
font-size: var(--sh-fs-xs);
color: var(--sh-text-muted);
line-height: var(--sh-lh-snug);
}
body:not(.wp-admin) .member-detail-wrap .user-detail-content p { margin: 0; }
body:not(.wp-admin) .member-detail-wrap .user-detail-content [class*="gender-"] {
display: inline-block;
padding: 1px 8px;
border-radius: var(--sh-radius-pill);
background: var(--sh-primary-50);
color: var(--sh-primary);
font-weight: var(--sh-fw-semibold);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0 2px;
}
/* -- MEMBER BROWSE: ONLINE CHIP --- */
body:not(.wp-admin) .member-detail-wrap .img-holder .wpee-user-status {
position: absolute;
top: 10px;
left: 10px;
width: auto;
height: auto;
padding: 4px 10px 4px 20px;
border-radius: var(--sh-radius-pill);
font-size: 11px;
font-weight: var(--sh-fw-semibold);
text-transform: uppercase;
letter-spacing: 0.04em;
background: rgba(255,255,255,0.92);
color: var(--sh-text);
box-shadow: var(--sh-shadow-1);
backdrop-filter: blur(6px);
z-index: 2;
border: 0;
}
body:not(.wp-admin) .member-detail-wrap .img-holder .wpee-user-status::before {
content: "";
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
border-radius: 50%;
}
body:not(.wp-admin) .member-detail-wrap .img-holder .wpee-user-status.wpee-online::before {
background: var(--sh-success);
box-shadow: 0 0 0 3px rgba(34,197,94,0.25);
}
body:not(.wp-admin) .member-detail-wrap .img-holder .wpee-user-status.wpee-offline::before {
background: #cbd5e1;
}
body:not(.wp-admin) .member-detail-wrap .img-holder .wpee-user-status.wpee-online::after { content: "Online"; }
body:not(.wp-admin) .member-detail-wrap .img-holder .wpee-user-status.wpee-offline::after { content: "Offline"; }
body:not(.wp-admin) .wpee-member-status-text {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: var(--sh-radius-pill);
font-size: 10px;
font-weight: var(--sh-fw-semibold);
text-transform: uppercase;
letter-spacing: 0.04em;
}
body:not(.wp-admin) .wpee-member-status-text--online {
background: var(--sh-success-bg);
color: #15803d;
}
body:not(.wp-admin) .wpee-member-status-text--offline {
background: var(--sh-border);
color: var(--sh-text-muted);
}
/* -- MEMBER BROWSE: ACTION BUTTONS --- */
body:not(.wp-admin) .member-detail-wrap .member-like-btn,
body:not(.wp-admin) .member-detail-wrap .member-fav-btn,
body:not(.wp-admin) .member-detail-wrap a.wpee-like-action {
position: absolute;
right: 12px;
top: calc(75% - 22px);
width: 44px;
height: 44px;
border-radius: var(--sh-radius-circle);
background: var(--sh-gradient);
color: #fff !important;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: var(--sh-shadow-accent);
border: 3px solid #fff;
cursor: pointer;
z-index: 3;
transition: transform var(--sh-duration) var(--sh-ease-spring);
}
body:not(.wp-admin) .member-detail-wrap .member-like-btn:hover { transform: scale(1.12); }
/* -- MEMBER SEARCH: FILTER TOOLBAR --- */
body:not(.wp-admin) .wpee-members-filter-toolbar {
background: #fff;
border-radius: var(--sh-radius-xl);
padding: 20px 24px;
margin-bottom: var(--sh-space-5);
box-shadow: var(--sh-shadow-1);
}
body:not(.wp-admin) .wpee-members-filter-toolbar__title {
margin: 0 0 var(--sh-space-4);
font-size: var(--sh-fs-lg);
font-weight: var(--sh-fw-bold);
color: var(--sh-text);
display: flex;
align-items: center;
gap: 10px;
}
body:not(.wp-admin) .wpee-members-filter-toolbar__title::before {
content: "";
width: 4px; height: 18px;
background: var(--sh-gradient);
border-radius: var(--sh-radius-pill);
}
body:not(.wp-admin) .wpee-members-filter-toolbar__row {
display: flex;
align-items: end;
gap: var(--sh-space-4);
flex-wrap: wrap;
}
body:not(.wp-admin) .wpee-members-filter-toolbar__fields {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--sh-space-3);
flex: 1;
min-width: 260px;
}
body:not(.wp-admin) .wpee-members-filter-field { display: flex; flex-direction: column; gap: 5px; }
body:not(.wp-admin) .wpee-members-filter-label {
font-size: var(--sh-fs-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--sh-text-muted);
font-weight: var(--sh-fw-semibold);
}
body:not(.wp-admin) .wpee-members-filter-age-selects { display: flex; gap: 6px; }
body:not(.wp-admin) .wpee-members-filter-age-selects select { flex: 1; }
body:not(.wp-admin) .wpee-members-filter-toolbar__actions {
display: flex;
align-items: center;
gap: var(--sh-space-3);
}
body:not(.wp-admin) button.wpee-members-toolbar-apply,
body:not(.wp-admin) .dspdp-btn.dspdp-btn-primary {
padding: 12px 26px !important;
background: var(--sh-gradient) !important;
color: #fff !important;
border: 0 !important;
border-radius: var(--sh-radius-pill) !important;
font-size: var(--sh-fs-sm) !important;
font-weight: var(--sh-fw-semibold) !important;
cursor: pointer;
box-shadow: var(--sh-shadow-accent);
transition: var(--sh-transition-default);
line-height: 1;
}
body:not(.wp-admin) button.wpee-members-toolbar-apply:hover,
body:not(.wp-admin) .dspdp-btn.dspdp-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(228, 81, 158, 0.30);
}
body:not(.wp-admin) .trigger-filter-icon {
width: 44px;
height: 44px;
border-radius: var(--sh-radius-circle);
background: var(--sh-primary-50);
color: var(--sh-primary);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--sh-transition-default);
border: 1.5px solid var(--sh-primary-100);
}
body:not(.wp-admin) .trigger-filter-icon:hover {
background: var(--sh-primary);
color: #fff;
transform: scale(1.05);
}
/* -- MEMBER SEARCH: OFFCANVAS PANEL --- */
body:not(.wp-admin) .offcanvase-filter-wrap {
position: fixed;
top: 0; right: 0;
width: min(420px, 92vw);
height: 100vh;
background: #fff;
box-shadow: var(--sh-shadow-4);
border-top-left-radius: var(--sh-radius-2xl);
border-bottom-left-radius: var(--sh-radius-2xl);
z-index: 9999;
transform: translateX(100%);
transition: transform var(--sh-duration-slow) var(--sh-ease-out);
overflow: hidden;
display: flex;
flex-direction: column;
}
body:not(.wp-admin) .offcanvase-filter-wrap.open,
body:not(.wp-admin) .offcanvase-filter-wrap.is-open {
transform: translateX(0);
}
body:not(.wp-admin) .offcanvase-filter-wrap .filter-close {
position: absolute;
top: 16px; right: 16px;
width: 36px; height: 36px;
border-radius: var(--sh-radius-circle);
background: var(--sh-bg-soft);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 2;
}
body:not(.wp-admin) .offcanvase-filter-wrap .filter-close::before,
body:not(.wp-admin) .offcanvase-filter-wrap .filter-close::after {
content: "";
position: absolute;
width: 16px; height: 2px;
background: var(--sh-text);
border-radius: 2px;
}
body:not(.wp-admin) .offcanvase-filter-wrap .filter-close::before { transform: rotate(45deg); }
body:not(.wp-admin) .offcanvase-filter-wrap .filter-close::after { transform: rotate(-45deg); }
body:not(.wp-admin) .offcanvase-filter-wrap .filter-close:hover { background: var(--sh-danger-bg); }
body:not(.wp-admin) .offcanvase-filter-content-wrap {
padding: 28px;
overflow-y: auto;
flex: 1;
}
body:not(.wp-admin) .offcanvase-filter-title-wrap {
display: flex;
justify-content: space-between;
align-items: center;
margin: var(--sh-space-5) 0 var(--sh-space-4);
padding-bottom: var(--sh-space-3);
border-bottom: 1px solid var(--sh-divider);
}
body:not(.wp-admin) h5.form-sidebar-title {
margin: 0;
font-size: var(--sh-fs-lg);
font-weight: var(--sh-fw-bold);
color: var(--sh-text);
}
body:not(.wp-admin) .filter-button-wrap {
display: flex;
gap: 10px;
align-items: center;
}
body:not(.wp-admin) .filter-button-wrap .wpee-filter-reset {
color: var(--sh-text-muted) !important;
font-size: var(--sh-fs-sm);
text-decoration: none;
font-weight: var(--sh-fw-medium);
padding: 8px 10px;
background: transparent !important;
border: 0 !important;
}
body:not(.wp-admin) .filter-button-wrap .wpee-filter-reset:hover { color: var(--sh-danger) !important; }
body:not(.wp-admin) .filter-button-wrap input[type="submit"] {
padding: 10px 22px;
background: var(--sh-gradient);
color: #fff;
border: 0;
border-radius: var(--sh-radius-pill);
font-size: var(--sh-fs-sm);
font-weight: var(--sh-fw-semibold);
cursor: pointer;
box-shadow: var(--sh-shadow-accent);
}
body:not(.wp-admin) .form-field-group .form-group { margin-bottom: var(--sh-space-4); }
body:not(.wp-admin) .form-field-group label {
display: block;
font-size: var(--sh-fs-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--sh-text-muted);
font-weight: var(--sh-fw-semibold);
margin-bottom: 6px;
}
/* -- MEMBER SEARCH: TABS --- */
body:not(.wp-admin) header.member-list-tab-list ul.button-group,
body:not(.wp-admin) ul.filters-button-group {
list-style: none;
padding: 4px;
margin: 0 0 var(--sh-space-5);
background: var(--sh-bg-soft);
border-radius: var(--sh-radius-pill);
display: inline-flex !important;
gap: 2px;
align-items: center;
width: fit-content;
flex-wrap: wrap;
}
body:not(.wp-admin) ul.filters-button-group li.button {
list-style: none;
margin: 0;
padding: 9px 18px;
border-radius: var(--sh-radius-pill);
cursor: pointer;
font-size: var(--sh-fs-sm);
font-weight: var(--sh-fw-semibold);
color: var(--sh-text-muted);
background: transparent;
transition: var(--sh-transition-default);
display: inline-flex;
align-items: center;
gap: 6px;
line-height: 1;
border: 0;
}
body:not(.wp-admin) ul.filters-button-group li.button:hover { color: var(--sh-primary); }
body:not(.wp-admin) ul.filters-button-group li.button.is-checked {
background: #fff;
color: var(--sh-primary);
box-shadow: var(--sh-shadow-1);
}
/* -- MEMBER SEARCH: FORMS --- */
body:not(.wp-admin) .search-form-wrap,
body:not(.wp-admin) .advance-search-form,
body:not(.wp-admin) .basic-search-form,
body:not(.wp-admin) .distance-search-form,
body:not(.wp-admin) .near-me-form {
background: #fff;
border-radius: var(--sh-radius-xl);
padding: 28px 32px;
box-shadow: var(--sh-shadow-1);
}
body:not(.wp-admin) .advance-search-form .form-group,
body:not(.wp-admin) .basic-search-form .form-group,
body:not(.wp-admin) .search-form-wrap .form-group { margin-bottom: var(--sh-space-4); }
/* -- PAGINATION --- */
body:not(.wp-admin) .wpee-members-pagination-slot,
body:not(.wp-admin) .pagination-wrap {
margin-top: var(--sh-space-6);
display: flex;
justify-content: center;
}
body:not(.wp-admin) .pagination,
body:not(.wp-admin) .wpee-members-pagination-slot .pagination {
display: inline-flex;
gap: 6px;
list-style: none;
padding: 6px;
margin: 0;
background: #fff;
border-radius: var(--sh-radius-pill);
box-shadow: var(--sh-shadow-1);
align-items: center;
}
body:not(.wp-admin) .pagination li { list-style: none; margin: 0; }
body:not(.wp-admin) .pagination a,
body:not(.wp-admin) .pagination span,
body:not(.wp-admin) .wpee-members-pagination-slot a {
min-width: 38px;
height: 38px;
padding: 0 12px;
border-radius: var(--sh-radius-pill);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--sh-fs-sm);
font-weight: var(--sh-fw-semibold);
color: var(--sh-text-2) !important;
text-decoration: none;
background: transparent;
border: 0;
transition: var(--sh-transition-default);
}
body:not(.wp-admin) .pagination a:hover,
body:not(.wp-admin) .wpee-members-pagination-slot a:hover {
background: var(--sh-primary-50);
color: var(--sh-primary) !important;
}
body:not(.wp-admin) .pagination .current,
body:not(.wp-admin) .pagination a.current,
body:not(.wp-admin) .pagination span.current,
body:not(.wp-admin) .wpee-members-pagination-slot .current {
background: var(--sh-gradient) !important;
color: #fff !important;
box-shadow: var(--sh-shadow-accent);
}
/* -- EMPTY STATE --- */
body:not(.wp-admin) .records-not-found,
body:not(.wp-admin) .wpee-empty-state {
grid-column: 1 / -1;
text-align: center;
padding: var(--sh-space-16) var(--sh-space-6);
background: #fff;
border-radius: var(--sh-radius-xl);
box-shadow: var(--sh-shadow-1);
border: 2px dashed var(--sh-primary-100);
}
body:not(.wp-admin) .records-not-found::before {
content: "🔍";
display: block;
font-size: 48px;
margin-bottom: var(--sh-space-3);
filter: grayscale(0.2);
}
body:not(.wp-admin) .records-not-found p {
color: var(--sh-text-muted);
font-size: var(--sh-fs-base);
font-weight: var(--sh-fw-medium);
margin: 0;
}
body:not(.wp-admin) .dsp_span_pointer {
display: block;
padding: var(--sh-space-6);
text-align: center;
color: var(--sh-text-muted);
font-size: var(--sh-fs-sm);
background: var(--sh-bg-soft);
border-radius: var(--sh-radius-md);
}
/* -- MESSAGES: LIST --- */
body:not(.wp-admin) .message-block-inbox,
body:not(.wp-admin) .message-block-sent,
body:not(.wp-admin) .message-block-draft {
background: #fff;
border-radius: var(--sh-radius-xl);
padding: var(--sh-space-4);
box-shadow: var(--sh-shadow-1);
}
body:not(.wp-admin) .heading-submenu {
padding: 16px 20px;
border-bottom: 1px solid var(--sh-divider);
margin-bottom: var(--sh-space-3);
}
body:not(.wp-admin) .heading-submenu strong {
font-size: var(--sh-fs-xl);
font-weight: var(--sh-fw-bold);
color: var(--sh-text);
letter-spacing: -0.01em;
}
body:not(.wp-admin) .gray-title-head { display: none; }
body:not(.wp-admin) ul.no-list.email-page {
list-style: none;
margin: 0 0 6px;
padding: 14px 16px;
display: grid;
grid-template-columns: 28px 1fr 2fr;
gap: 16px;
align-items: center;
border-radius: var(--sh-radius-lg);
transition: background-color var(--sh-duration) var(--sh-ease);
background: transparent;
position: relative;
}
body:not(.wp-admin) ul.no-list.email-page:hover { background: var(--sh-primary-50); }
body:not(.wp-admin) ul.no-list.email-page.dspdp-bg-info { background: var(--sh-accent-50); }
body:not(.wp-admin) ul.no-list.email-page.dspdp-bg-info::before {
content: "";
position: absolute;
left: -4px; top: 12px; bottom: 12px;
width: 4px;
background: var(--sh-gradient);
border-radius: var(--sh-radius-pill);
}
body:not(.wp-admin) ul.no-list.email-page > li {
list-style: none;
margin: 0; padding: 0;
min-width: 0;
}
body:not(.wp-admin) ul.no-list.email-page li.wpee-received-details {
display: flex;
align-items: center;
gap: 12px;
font-size: var(--sh-fs-xs);
color: var(--sh-text-muted);
}
body:not(.wp-admin) ul.no-list.email-page .dsp-email-photo img {
width: 48px !important;
height: 48px !important;
border-radius: var(--sh-radius-circle);
object-fit: cover;
border: 2px solid #fff;
box-shadow: var(--sh-shadow-1);
}
body:not(.wp-admin) ul.no-list.email-page .name a {
color: var(--sh-text) !important;
font-weight: var(--sh-fw-semibold);
font-size: var(--sh-fs-base);
text-decoration: none;
}
body:not(.wp-admin) ul.no-list.email-page > li:nth-child(3) a {
color: var(--sh-text-2) !important;
font-size: var(--sh-fs-sm);
text-decoration: none;
font-weight: var(--sh-fw-medium);
display: inline-flex;
align-items: center;
gap: 8px;
}
body:not(.wp-admin) ul.no-list.email-page.dspdp-bg-info > li:nth-child(3) a {
color: var(--sh-text) !important;
font-weight: var(--sh-fw-semibold);
}
body:not(.wp-admin) ul.no-list.email-page > li:nth-child(3) a span {
background: var(--sh-accent);
color: #fff;
padding: 1px 8px;
border-radius: var(--sh-radius-pill);
font-size: 11px;
font-weight: var(--sh-fw-bold);
}
body:not(.wp-admin) .wpee-received-checkbox input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--sh-primary);
cursor: pointer;
}
body:not(.wp-admin) .btn-delete {
margin-top: var(--sh-space-4);
display: flex;
justify-content: flex-end;
}
body:not(.wp-admin) input.dsp_submit_button#delete-message-button {
padding: 10px 20px !important;
background: var(--sh-danger) !important;
color: #fff !important;
border: 0 !important;
border-radius: var(--sh-radius-pill) !important;
font-weight: var(--sh-fw-semibold) !important;
cursor: pointer;
font-size: var(--sh-fs-sm) !important;
transition: var(--sh-transition-default);
}
body:not(.wp-admin) input.dsp_submit_button#delete-message-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
body:not(.wp-admin) input.dsp_submit_button#delete-message-button:not(:disabled):hover {
box-shadow: 0 10px 24px rgba(239, 68, 68, 0.35);
}
/* -- MESSAGES: FOLDER TABS --- */
body:not(.wp-admin) .message-folder-tabs,
body:not(.wp-admin) ul.message-folder-nav {
list-style: none;
margin: 0 0 var(--sh-space-5);
padding: 4px;
background: var(--sh-bg-soft);
border-radius: var(--sh-radius-pill);
display: inline-flex;
gap: 2px;
width: fit-content;
}
body:not(.wp-admin) .message-folder-tabs li { list-style: none; margin: 0; }
body:not(.wp-admin) .message-folder-tabs a,
body:not(.wp-admin) ul.message-folder-nav a {
padding: 8px 18px;
border-radius: var(--sh-radius-pill);
font-size: var(--sh-fs-sm);
font-weight: var(--sh-fw-semibold);
color: var(--sh-text-muted) !important;
text-decoration: none;
transition: var(--sh-transition-default);
display: inline-flex;
align-items: center;
gap: 6px;
}
body:not(.wp-admin) .message-folder-tabs li.active a,
body:not(.wp-admin) .message-folder-tabs a.active {
background: #fff;
color: var(--sh-primary) !important;
box-shadow: var(--sh-shadow-1);
}
body:not(.wp-admin) .dsp_back_inbox {
margin-bottom: var(--sh-space-4);
display: flex;
gap: 10px;
}
body:not(.wp-admin) .dsp_back_inbox .dspdp-btn.dspdp-btn-default {
padding: 8px 16px !important;
background: var(--sh-primary-50) !important;
color: var(--sh-primary) !important;
border: 0 !important;
border-radius: var(--sh-radius-pill) !important;
font-size: var(--sh-fs-sm) !important;
font-weight: var(--sh-fw-semibold) !important;
text-decoration: none;
transition: var(--sh-transition-default);
}
body:not(.wp-admin) .dsp_back_inbox .dspdp-btn.dspdp-btn-default:hover {
background: var(--sh-primary) !important;
color: #fff !important;
}
/* -- MESSAGES: CHAT LAYOUT --- */
body:not(.wp-admin) .box-border {
background: #fff;
border-radius: var(--sh-radius-xl);
box-shadow: var(--sh-shadow-1);
overflow: hidden;
}
body:not(.wp-admin) .box-pedding { padding: var(--sh-space-5); }
body:not(.wp-admin) .dspdp-bordered-item-md {
padding: var(--sh-space-4);
margin-bottom: var(--sh-space-3);
border-radius: var(--sh-radius-lg);
}
body:not(.wp-admin) .view-message {
display: grid;
grid-template-columns: 56px 1fr;
gap: var(--sh-space-3);
align-items: flex-start;
}
body:not(.wp-admin) .view-message > .dspdp-col-sm-2 { width: 56px; flex: none; }
body:not(.wp-admin) .view-message > .dspdp-col-sm-2 img,
body:not(.wp-admin) .view-message > .dspdp-col-sm-2 .img {
width: 48px !important;
height: 48px !important;
border-radius: var(--sh-radius-circle);
object-fit: cover;
box-shadow: var(--sh-shadow-1);
}
body:not(.wp-admin) .view-message .msg-info {
background: var(--sh-bg-soft);
padding: 14px 18px;
border-radius: var(--sh-radius-xl);
border-top-left-radius: 4px;
max-width: 80%;
}
body:not(.wp-admin) .dspdp-bordered-item-md.sender .view-message {
grid-template-columns: 1fr 56px;
direction: rtl;
}
body:not(.wp-admin) .dspdp-bordered-item-md.sender .view-message > * { direction: ltr; }
body:not(.wp-admin) .dspdp-bordered-item-md.sender .view-message .msg-info {
background: var(--sh-gradient);
color: #fff !important;
margin-left: auto;
border-top-left-radius: var(--sh-radius-xl);
border-top-right-radius: 4px;
}
body:not(.wp-admin) .dspdp-bordered-item-md.sender .view-message .msg-info .name,
body:not(.wp-admin) .dspdp-bordered-item-md.sender .view-message .msg-info .dsp-msg-date {
color: rgba(255, 255, 255, 0.9) !important;
}
body:not(.wp-admin) .view-message .name {
font-size: var(--sh-fs-sm);
font-weight: var(--sh-fw-bold);
color: var(--sh-text);
margin: 0 0 2px;
}
body:not(.wp-admin) .view-message .dsp-msg-date {
font-size: 11px;
color: var(--sh-text-muted);
margin-bottom: 6px;
}
/* -- MESSAGES: BUBBLES --- */
body:not(.wp-admin) .chat-text {
max-width: 72%;
padding: 10px 16px;
border-radius: var(--sh-radius-xl);
margin-bottom: 6px;
font-size: var(--sh-fs-sm);
line-height: var(--sh-lh-relaxed);
word-wrap: break-word;
box-shadow: var(--sh-shadow-1);
}
body:not(.wp-admin) [class*="sent"] .chat-text,
body:not(.wp-admin) .chat-text.sent,
body:not(.wp-admin) .chat-message-sent .chat-text {
background: var(--sh-gradient);
color: #fff;
margin-left: auto;
border-bottom-right-radius: 6px;
}
body:not(.wp-admin) [class*="received"] .chat-text,
body:not(.wp-admin) .chat-text.received,
body:not(.wp-admin) .chat-message-received .chat-text {
background: var(--sh-bg-soft);
color: var(--sh-text);
border-bottom-left-radius: 6px;
}
/* -- MESSAGES: INPUT --- */
body:not(.wp-admin) .message-block-compose { padding: 0; }
body:not(.wp-admin) .message-block-compose .form-group { margin-bottom: var(--sh-space-4); }
body:not(.wp-admin) .message-block-compose label {
display: block;
font-size: var(--sh-fs-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--sh-text-muted);
font-weight: var(--sh-fw-semibold);
margin-bottom: 6px;
}
body:not(.wp-admin) .message-block-compose textarea {
min-height: 160px;
resize: vertical;
}
body:not(.wp-admin) .message-block-compose .form-inline {
display: flex;
gap: 10px;
justify-content: flex-end;
}
body:not(.wp-admin) .message-block-compose input[name="send"] {
padding: 12px 28px !important;
background: var(--sh-gradient) !important;
color: #fff !important;
border: 0 !important;
border-radius: var(--sh-radius-pill) !important;
font-weight: var(--sh-fw-semibold) !important;
font-size: var(--sh-fs-sm) !important;
cursor: pointer;
box-shadow: var(--sh-shadow-accent);
transition: var(--sh-transition-default);
}
body:not(.wp-admin) .message-block-compose input[name="send"]:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(228, 81, 158, 0.32);
}
body:not(.wp-admin) .message-block-compose input[name="save"] {
padding: 12px 22px !important;
background: #fff !important;
color: var(--sh-primary) !important;
border: 1.5px solid var(--sh-primary-200) !important;
border-radius: var(--sh-radius-pill) !important;
font-weight: var(--sh-fw-semibold) !important;
font-size: var(--sh-fs-sm) !important;
cursor: pointer;
}
body:not(.wp-admin) .message-block-compose input[name="save"]:hover {
background: var(--sh-primary-50) !important;
}
/* Inline chat input pill (active chat view) */
body:not(.wp-admin) .chat-send-wrap,
body:not(.wp-admin) .chat-input-wrap {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px 10px 20px;
background: var(--sh-bg-soft);
border-radius: var(--sh-radius-pill);
margin-top: var(--sh-space-3);
border: 1.5px solid transparent;
transition: border-color var(--sh-duration) var(--sh-ease);
}
body:not(.wp-admin) .chat-send-wrap:focus-within,
body:not(.wp-admin) .chat-input-wrap:focus-within {
border-color: var(--sh-primary-200);
background: #fff;
box-shadow: var(--sh-shadow-1);
}
body:not(.wp-admin) .chat-send-wrap input[type="text"],
body:not(.wp-admin) .chat-input-wrap input[type="text"],
body:not(.wp-admin) .chat-send-wrap textarea {
flex: 1;
border: 0 !important;
background: transparent !important;
outline: none !important;
box-shadow: none !important;
font-size: var(--sh-fs-sm);
padding: 6px 0 !important;
}
body:not(.wp-admin) .chat-sent-button,
body:not(.wp-admin) button.chat-send {
width: 42px;
height: 42px;
border-radius: var(--sh-radius-circle);
background: var(--sh-gradient) !important;
color: #fff !important;
border: 0 !important;
cursor: pointer;
box-shadow: var(--sh-shadow-accent);
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform var(--sh-duration) var(--sh-ease-spring);
flex-shrink: 0;
}
body:not(.wp-admin) .chat-sent-button:hover,
body:not(.wp-admin) button.chat-send:hover { transform: scale(1.08); }
body:not(.wp-admin) .chat-attachment,
body:not(.wp-admin) .chat-attach-btn {
width: 38px; height: 38px;
border-radius: var(--sh-radius-circle);
background: transparent;
color: var(--sh-text-muted) !important;
border: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: var(--sh-transition-default);
flex-shrink: 0;
}
body:not(.wp-admin) .chat-attachment:hover {
color: var(--sh-primary) !important;
background: var(--sh-primary-50);
}
/* Conversation list sidebar */
body:not(.wp-admin) .conversation-list,
body:not(.wp-admin) .chat-conversations-sidebar {
background: #fff;
border-radius: var(--sh-radius-xl);
box-shadow: var(--sh-shadow-1);
overflow: hidden;
}
body:not(.wp-admin) .conversation-list-item,
body:not(.wp-admin) .chat-conversation-item {
display: flex;
gap: 12px;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid var(--sh-divider);
cursor: pointer;
transition: background-color var(--sh-duration) var(--sh-ease);
}
body:not(.wp-admin) .conversation-list-item:hover,
body:not(.wp-admin) .chat-conversation-item:hover { background: var(--sh-primary-50); }
body:not(.wp-admin) .conversation-list-item.active,
body:not(.wp-admin) .chat-conversation-item.active {
background: var(--sh-primary-100);
}
body:not(.wp-admin) .conversation-list-item img,
body:not(.wp-admin) .chat-conversation-item img {
width: 44px; height: 44px;
border-radius: var(--sh-radius-circle);
object-fit: cover;
}
body:not(.wp-admin) .dsp-email-photo { position: relative; flex-shrink: 0; }
body:not(.wp-admin) .dsp-email-photo.is-online::after {
content: "";
position: absolute;
right: 2px; bottom: 2px;
width: 12px; height: 12px;
border-radius: 50%;
background: var(--sh-success);
border: 2px solid #fff;
}
/* Responsive — small screens */
@media (max-width: 768px) {
body:not(.wp-admin) .profile-user-details.wpee-datebook-profile-top {
padding: var(--sh-space-4);
align-items: center;
flex-direction: column;
text-align: center;
}
body:not(.wp-admin) .profile-user-details .profile-img.change-profile-image {
margin-top: -70px;
width: 128px; height: 128px;
}
body:not(.wp-admin) .profile-user-details .profile-img figure { width: 128px; height: 128px; }
body:not(.wp-admin) .user-info-wrapper { justify-content: center; }
body:not(.wp-admin) .wpee-datebook-profile-top h4.username { font-size: var(--sh-fs-xl); }
body:not(.wp-admin) .age-location-wrap { justify-content: center; }
body:not(.wp-admin) .wpee-datebook-actions { justify-content: center; }
body:not(.wp-admin) .profile-header-menu { padding: 0 var(--sh-space-3); }
body:not(.wp-admin) ul.profile-menu-tab { overflow-x: auto; flex-wrap: nowrap; }
body:not(.wp-admin) .profile-notification-blocks { width: 100%; overflow-x: auto; }
body:not(.wp-admin) ul.no-list.email-page {
grid-template-columns: 24px 1fr;
gap: 10px;
}
body:not(.wp-admin) ul.no-list.email-page > li:nth-child(3) { grid-column: 1 / -1; }
}
/* ZONE_B_END */
/* ==========================================================================
ZONE C — Account mgmt & monetization: settings, payments/credits, gift popup
========================================================================== */
/* ZONE_C_START */
/* -- SETTINGS: WRAPPER & TAB BAR --- */
body:not(.wp-admin) .settings-list-wrapper {
background: var(--sh-bg);
border-radius: var(--sh-radius-2xl);
box-shadow: var(--sh-shadow-2);
padding: var(--sh-space-6);
margin-bottom: var(--sh-space-8);
}
body:not(.wp-admin) .settings-list-wrapper .profile-section-tab {
display: flex;
flex-wrap: wrap;
gap: var(--sh-space-1);
list-style: none;
margin: 0 0 var(--sh-space-6);
padding: var(--sh-space-1);
background: var(--sh-bg-soft);
border-radius: var(--sh-radius-pill);
border: 1px solid var(--sh-divider);
}
body:not(.wp-admin) .settings-list-wrapper .profile-section-tab-title {
flex: 1 1 auto;
min-width: 0;
list-style: none;
}
body:not(.wp-admin) .settings-list-wrapper .profile-section-tab-title > a {
display: block;
text-align: center;
padding: 10px 18px;
border-radius: var(--sh-radius-pill);
font-size: var(--sh-fs-sm);
font-weight: var(--sh-fw-semibold);
color: var(--sh-text-2);
text-decoration: none;
white-space: nowrap;
transition: var(--sh-transition-default);
}
body:not(.wp-admin) .settings-list-wrapper .profile-section-tab-title > a:hover {
color: var(--sh-primary);
background: var(--sh-primary-50);
}
body:not(.wp-admin) .settings-list-wrapper .profile-section-tab-title.active > a {
background: var(--sh-bg);
color: var(--sh-primary);
box-shadow: var(--sh-shadow-1);
}
body:not(.wp-admin) .settings-list-wrapper .heading-submenu {
font-size: var(--sh-fs-xl);
font-weight: var(--sh-fw-bold);
color: var(--sh-text);
margin-bottom: var(--sh-space-5);
padding-bottom: var(--sh-space-3);
border-bottom: 1px solid var(--sh-divider);
}
body:not(.wp-admin) .settings-list-wrapper .thanks {
background: var(--sh-success-bg);
color: var(--sh-success);
border-radius: var(--sh-radius-md);
padding: var(--sh-space-3) var(--sh-space-4);
margin-bottom: var(--sh-space-4);
font-weight: var(--sh-fw-semibold);
}
@media (max-width: 640px) {
body:not(.wp-admin) .settings-list-wrapper .profile-section-tab {
border-radius: var(--sh-radius-xl);
flex-direction: column;
}
body:not(.wp-admin) .settings-list-wrapper .profile-section-tab-title > a {
border-radius: var(--sh-radius-md);
}
}
/* -- SETTINGS: FORM LAYOUT (SCOPED — never bare .edit-profile) --- */
body:not(.wp-admin) .settings-list-wrapper .setting-page-account {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sh-space-4) var(--sh-space-6);
}
body:not(.wp-admin) .settings-list-wrapper .setting-page-account > .form-group {
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
body:not(.wp-admin) .settings-list-wrapper .setting-page-account > .form-group.password-criteria,
body:not(.wp-admin) .settings-list-wrapper .setting-page-account > .dspdp-row,
body:not(.wp-admin) .settings-list-wrapper .setting-page-account > .dsp-box-container {
grid-column: 1 / -1;
}
body:not(.wp-admin) .settings-list-wrapper .setting-page-account label {
font-size: var(--sh-fs-sm);
font-weight: var(--sh-fw-semibold);
color: var(--sh-text-2);
margin-bottom: 4px;
}
body:not(.wp-admin) .settings-list-wrapper .setting-page-account .form-control,
body:not(.wp-admin) .settings-list-wrapper .setting-page-account input[type="text"],
body:not(.wp-admin) .settings-list-wrapper .setting-page-account input[type="email"],
body:not(.wp-admin) .settings-list-wrapper .setting-page-account input[type="password"],
body:not(.wp-admin) .settings-list-wrapper .setting-page-account select {
width: 100%;
padding: 12px 14px;
border: 1.5px solid var(--sh-border);
border-radius: var(--sh-radius-md);
background: var(--sh-bg);
color: var(--sh-text);
font-size: var(--sh-fs-base);
transition: var(--sh-transition-default);
box-sizing: border-box;
}
body:not(.wp-admin) .settings-list-wrapper .setting-page-account .form-control:focus,
body:not(.wp-admin) .settings-list-wrapper .setting-page-account input:focus,
body:not(.wp-admin) .settings-list-wrapper .setting-page-account select:focus {
border-color: var(--sh-primary);
box-shadow: 0 0 0 4px var(--sh-primary-100);
outline: none;
}
body:not(.wp-admin) .settings-list-wrapper .setting-page-account .password-wrapper { position: relative; }
body:not(.wp-admin) .settings-list-wrapper .setting-page-account .password-wrapper input { padding-right: 44px; }
body:not(.wp-admin) .settings-list-wrapper .setting-page-account .toggle-old-password,
body:not(.wp-admin) .settings-list-wrapper .setting-page-account .toggle-password,
body:not(.wp-admin) .settings-list-wrapper .setting-page-account .toggle-confirm-password {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--sh-text-muted);
cursor: pointer;
transition: var(--sh-transition-default);
}
body:not(.wp-admin) .settings-list-wrapper .setting-page-account .toggle-old-password:hover,
body:not(.wp-admin) .settings-list-wrapper .setting-page-account .toggle-password:hover,
body:not(.wp-admin) .settings-list-wrapper .setting-page-account .toggle-confirm-password:hover {
color: var(--sh-primary);
}
body:not(.wp-admin) .settings-list-wrapper .setting-page-account .password-criteria {
background: var(--sh-primary-50);
border-radius: var(--sh-radius-md);
padding: var(--sh-space-3) var(--sh-space-4);
margin: 0 !important;
font-size: var(--sh-fs-xs);
color: var(--sh-text-2);
}
body:not(.wp-admin) .settings-list-wrapper .setting-page-account .btn-row {
display: flex;
justify-content: flex-end;
width: 100%;
}
body:not(.wp-admin) .settings-list-wrapper .setting-page-account input.dspdp-btn-default,
body:not(.wp-admin) .settings-list-wrapper .setting-page-account input.dsp_submit_button {
background: var(--sh-gradient);
color: #fff;
border: none;
padding: 12px 32px;
border-radius: var(--sh-radius-pill);
font-weight: var(--sh-fw-semibold);
font-size: var(--sh-fs-base);
cursor: pointer;
box-shadow: var(--sh-shadow-primary);
transition: var(--sh-transition-default);
}
body:not(.wp-admin) .settings-list-wrapper .setting-page-account input.dspdp-btn-default:hover,
body:not(.wp-admin) .settings-list-wrapper .setting-page-account input.dsp_submit_button:hover {
transform: translateY(-2px);
box-shadow: var(--sh-shadow-3);
}
@media (max-width: 640px) {
body:not(.wp-admin) .settings-list-wrapper .setting-page-account { grid-template-columns: 1fr; }
}
/* -- SETTINGS: ACCOUNT permission chips --- */
body:not(.wp-admin) .settings-list-wrapper .setting-page-account .contat-permission {
display: flex;
flex-wrap: wrap;
gap: var(--sh-space-2);
padding: 0;
margin: 6px 0 0;
list-style: none;
}
body:not(.wp-admin) .settings-list-wrapper .setting-page-account .contat-permission li {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: var(--sh-bg-soft);
border: 1.5px solid var(--sh-border);
border-radius: var(--sh-radius-pill);
cursor: pointer;
transition: var(--sh-transition-default);
font-size: var(--sh-fs-sm);
color: var(--sh-text-2);
}
body:not(.wp-admin) .settings-list-wrapper .setting-page-account .contat-permission li:hover {
border-color: var(--sh-primary-200);
background: var(--sh-primary-50);
}
body:not(.wp-admin) .settings-list-wrapper .setting-page-account .contat-permission input[type="checkbox"] {
accent-color: var(--sh-primary);
}
/* -- SETTINGS: PRIVACY --- */
body:not(.wp-admin) .settings-list-wrapper .dsp-box-container {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sh-space-4) var(--sh-space-6);
}
body:not(.wp-admin) .settings-list-wrapper .dsp-box-container > .form-group { margin: 0; }
body:not(.wp-admin) .settings-list-wrapper .dsp-box-container > .form-group.select-gender { grid-column: 1 / -1; }
@media (max-width: 640px) {
body:not(.wp-admin) .settings-list-wrapper .dsp-box-container { grid-template-columns: 1fr; }
}
/* -- SETTINGS: DELETE ACCOUNT (WARNING) --- */
body:not(.wp-admin) .settings-list-wrapper .btn-blue-wrap {
background: linear-gradient(135deg, var(--sh-danger-bg) 0%, #fff1f1 100%);
border: 1.5px solid #fecaca;
border-radius: var(--sh-radius-xl);
padding: var(--sh-space-6);
position: relative;
}
body:not(.wp-admin) .settings-list-wrapper .btn-blue-wrap::before {
content: "\26A0";
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: var(--sh-danger);
color: #fff;
border-radius: var(--sh-radius-circle);
font-size: 24px;
margin-bottom: var(--sh-space-4);
box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);
}
body:not(.wp-admin) .settings-list-wrapper .btn-blue-wrap > p[style] {
color: var(--sh-danger) !important;
font-weight: var(--sh-fw-semibold);
margin-bottom: var(--sh-space-4);
}
body:not(.wp-admin) .settings-list-wrapper .btn-blue-wrap .form-group {
margin-bottom: var(--sh-space-4);
display: flex;
flex-direction: column;
gap: 6px;
max-width: 420px;
}
body:not(.wp-admin) .settings-list-wrapper .btn-blue-wrap .password-wrapper { position: relative; }
body:not(.wp-admin) .settings-list-wrapper .btn-blue-wrap .password-wrapper input {
width: 100%;
padding: 12px 44px 12px 14px;
border: 1.5px solid #fecaca;
border-radius: var(--sh-radius-md);
background: var(--sh-bg);
font-size: var(--sh-fs-base);
box-sizing: border-box;
}
body:not(.wp-admin) .settings-list-wrapper .btn-blue-wrap .password-wrapper input:focus {
border-color: var(--sh-danger);
box-shadow: 0 0 0 4px var(--sh-danger-bg);
outline: none;
}
body:not(.wp-admin) .settings-list-wrapper .btn-blue-wrap .toggle-old-password {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--sh-text-muted);
cursor: pointer;
}
body:not(.wp-admin) .settings-list-wrapper .btn-blue-wrap input.dspdp-btn-danger {
background: var(--sh-danger);
color: #fff;
border: none;
padding: 14px 28px;
border-radius: var(--sh-radius-pill);
font-weight: var(--sh-fw-bold);
font-size: var(--sh-fs-base);
width: 100%;
max-width: 420px;
cursor: pointer;
box-shadow: 0 8px 20px rgba(239, 68, 68, 0.28);
transition: var(--sh-transition-default);
}
body:not(.wp-admin) .settings-list-wrapper .btn-blue-wrap input.dspdp-btn-danger:hover {
background: #dc2626;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(239, 68, 68, 0.38);
}
/* -- SETTINGS: BLOCKED / FRIEND REQUESTS --- */
body:not(.wp-admin) .settings-list-wrapper .friends-section {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--sh-space-4);
padding: 0;
margin: 0;
list-style: none;
}
body:not(.wp-admin) .settings-list-wrapper .friends-section .wpee-fav-list {
display: flex;
align-items: center;
gap: var(--sh-space-3);
background: var(--sh-bg);
border: 1px solid var(--sh-divider);
border-radius: var(--sh-radius-lg);
padding: var(--sh-space-3);
transition: var(--sh-transition-default);
list-style: none;
}
body:not(.wp-admin) .settings-list-wrapper .friends-section .wpee-fav-list:hover {
box-shadow: var(--sh-shadow-2);
border-color: var(--sh-primary-100);
transform: translateY(-2px);
}
body:not(.wp-admin) .settings-list-wrapper .friends-section .img-holder {
flex: 0 0 56px;
width: 56px;
height: 56px;
border-radius: var(--sh-radius-circle);
overflow: hidden;
margin: 0;
background: var(--sh-bg-soft);
}
body:not(.wp-admin) .settings-list-wrapper .friends-section .img-holder img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
body:not(.wp-admin) .settings-list-wrapper .friends-section .fav-content {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sh-space-2);
}
body:not(.wp-admin) .settings-list-wrapper .friends-section .user-name-show {
font-weight: var(--sh-fw-semibold);
color: var(--sh-text);
font-size: var(--sh-fs-base);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body:not(.wp-admin) .settings-list-wrapper .friends-section .dsp-btn-default {
background: var(--sh-primary-50);
color: var(--sh-primary);
padding: 8px 16px;
border-radius: var(--sh-radius-pill);
font-weight: var(--sh-fw-semibold);
font-size: var(--sh-fs-sm);
text-decoration: none;
border: 1.5px solid var(--sh-primary-100);
cursor: pointer;
transition: var(--sh-transition-default);
white-space: nowrap;
}
body:not(.wp-admin) .settings-list-wrapper .friends-section .dsp-btn-default:hover {
background: var(--sh-primary);
color: #fff;
border-color: var(--sh-primary);
}
body:not(.wp-admin) .settings-list-wrapper .row-paging {
margin-top: var(--sh-space-6);
display: flex;
justify-content: center;
}
/* -- SETTINGS: HISTORY TABLE --- */
body:not(.wp-admin) .settings-list-wrapper table,
body:not(.wp-admin) .settings-list-wrapper .history-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--sh-bg);
border-radius: var(--sh-radius-lg);
overflow: hidden;
box-shadow: var(--sh-shadow-1);
border: 1px solid var(--sh-divider);
}
body:not(.wp-admin) .settings-list-wrapper table thead th {
background: var(--sh-primary-100);
color: var(--sh-primary-700);
font-size: var(--sh-fs-xs);
font-weight: var(--sh-fw-bold);
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 14px 16px;
text-align: left;
border-bottom: 1px solid var(--sh-primary-100);
}
body:not(.wp-admin) .settings-list-wrapper table tbody td {
padding: 14px 16px;
font-size: var(--sh-fs-sm);
color: var(--sh-text);
border-bottom: 1px solid var(--sh-divider);
}
body:not(.wp-admin) .settings-list-wrapper table tbody tr:last-child td { border-bottom: none; }
body:not(.wp-admin) .settings-list-wrapper table tbody tr:hover td { background: var(--sh-primary-50); }
/* -- UPGRADE / PLAN CARDS --- */
body:not(.wp-admin) .settings-list-wrapper .wpee-premium-area .premium-area {
background: var(--sh-gradient);
color: #fff;
border-radius: var(--sh-radius-xl);
padding: var(--sh-space-5) var(--sh-space-6);
margin-bottom: var(--sh-space-6);
box-shadow: var(--sh-shadow-accent);
}
body:not(.wp-admin) .settings-list-wrapper .wpee-premium-area .logo-premium {
display: flex;
align-items: center;
gap: var(--sh-space-3);
font-weight: var(--sh-fw-bold);
font-size: var(--sh-fs-lg);
}
body:not(.wp-admin) .settings-list-wrapper .wpee-premium-area .logo-premium img {
width: 48px;
height: 48px;
border-radius: var(--sh-radius-circle);
background: rgba(255,255,255,0.15);
padding: 6px;
}
body:not(.wp-admin) .settings-list-wrapper .wpee-plan-item-wrapper {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--sh-space-5);
list-style: none;
padding: 0;
margin: 0;
}
body:not(.wp-admin) .settings-list-wrapper .wpee-plan-item {
background: var(--sh-bg);
border: 1px solid var(--sh-divider);
border-radius: var(--sh-radius-2xl);
padding: var(--sh-space-6);
box-shadow: var(--sh-shadow-1);
transition: var(--sh-transition-default);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
body:not(.wp-admin) .settings-list-wrapper .wpee-plan-item:hover {
transform: translateY(-6px);
box-shadow: var(--sh-shadow-3);
border-color: var(--sh-primary-100);
}
body:not(.wp-admin) .settings-list-wrapper .wpee-plan-item:nth-child(2)::before {
content: "Popular";
position: absolute;
top: 16px;
right: -28px;
background: var(--sh-gradient);
color: #fff;
font-size: 10px;
font-weight: var(--sh-fw-bold);
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 32px;
transform: rotate(35deg);
box-shadow: var(--sh-shadow-accent);
}
body:not(.wp-admin) .settings-list-wrapper .wpee-plan-item-inner {
display: flex !important;
flex-direction: column;
gap: var(--sh-space-3);
list-style: none;
padding: 0;
margin: 0;
flex: 1;
}
body:not(.wp-admin) .settings-list-wrapper .wpee-plan-item-inner > li {
list-style: none;
padding: 0;
margin: 0;
}
body:not(.wp-admin) .settings-list-wrapper .wpee-plan-image-wrap {
display: flex;
justify-content: center;
padding: var(--sh-space-3);
background: var(--sh-gradient-soft);
border-radius: var(--sh-radius-xl);
}
body:not(.wp-admin) .settings-list-wrapper .wpee-plan-image {
width: 72px;
height: 72px;
object-fit: contain;
}
body:not(.wp-admin) .settings-list-wrapper .wpee-plan-name {
text-align: center;
font-size: var(--sh-fs-xl);
font-weight: var(--sh-fw-bold);
color: var(--sh-text);
}
body:not(.wp-admin) .settings-list-wrapper .wpee-plan-desc {
text-align: center;
color: var(--sh-text-muted);
font-size: var(--sh-fs-sm);
line-height: var(--sh-lh-normal);
min-height: 40px;
}
body:not(.wp-admin) .settings-list-wrapper .wpee-plan-item form {
margin-top: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
body:not(.wp-admin) .settings-list-wrapper .wpee-plan-item form input[type="submit"].dspdp-btn-default {
width: 100%;
background: var(--sh-gradient);
color: #fff;
border: none;
padding: 12px 20px;
border-radius: var(--sh-radius-pill);
font-weight: var(--sh-fw-semibold);
font-size: var(--sh-fs-base);
cursor: pointer;
box-shadow: var(--sh-shadow-primary);
transition: var(--sh-transition-default);
}
body:not(.wp-admin) .settings-list-wrapper .wpee-plan-item form input[type="submit"].dspdp-btn-default:hover {
transform: translateY(-2px);
box-shadow: var(--sh-shadow-3);
}
/* -- CREDITS PURCHASE --- */
body:not(.wp-admin) .settings-list-wrapper .wpee-plan-credits-number {
background: var(--sh-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-size: var(--sh-fs-2xl);
font-weight: var(--sh-fw-bold);
text-align: center;
}
body:not(.wp-admin) .settings-list-wrapper .purchase-credit-heading {
font-size: var(--sh-fs-xl);
font-weight: var(--sh-fw-bold);
color: var(--sh-text);
margin-bottom: var(--sh-space-3);
}
body:not(.wp-admin) .settings-list-wrapper .purchase-credit-image img {
width: 72px;
height: 72px;
object-fit: contain;
margin: 0 auto;
}
body:not(.wp-admin) .settings-list-wrapper .wpee-plan-item-credits .dspdp-input-group {
display: flex;
align-items: stretch;
border: 1.5px solid var(--sh-border);
border-radius: var(--sh-radius-pill);
overflow: hidden;
background: var(--sh-bg);
transition: var(--sh-transition-default);
}
body:not(.wp-admin) .settings-list-wrapper .wpee-plan-item-credits .dspdp-input-group:focus-within {
border-color: var(--sh-primary);
box-shadow: 0 0 0 4px var(--sh-primary-100);
}
body:not(.wp-admin) .settings-list-wrapper .wpee-plan-item-credits .dspdp-form-control {
flex: 1;
border: none;
padding: 10px 16px;
font-size: var(--sh-fs-base);
outline: none;
background: transparent;
}
body:not(.wp-admin) .settings-list-wrapper .wpee-plan-item-credits .dspdp-input-group-addon {
display: inline-flex;
align-items: center;
padding: 0 16px;
background: var(--sh-primary-50);
color: var(--sh-primary);
font-weight: var(--sh-fw-semibold);
font-size: var(--sh-fs-sm);
}
/* -- COUPON INPUT --- */
body:not(.wp-admin) .settings-list-wrapper .coupon-wrapper,
body:not(.wp-admin) .settings-list-wrapper .discount-wrapper {
display: flex;
gap: var(--sh-space-2);
background: var(--sh-bg-soft);
padding: var(--sh-space-2);
border-radius: var(--sh-radius-pill);
border: 1px solid var(--sh-divider);
max-width: 420px;
}
body:not(.wp-admin) .settings-list-wrapper .coupon-wrapper input[type="text"],
body:not(.wp-admin) .settings-list-wrapper .discount-wrapper input[type="text"] {
flex: 1;
border: none;
background: transparent;
padding: 8px 14px;
font-size: var(--sh-fs-sm);
outline: none;
color: var(--sh-text);
}
body:not(.wp-admin) .settings-list-wrapper .coupon-wrapper button,
body:not(.wp-admin) .settings-list-wrapper .discount-wrapper button {
background: var(--sh-primary);
color: #fff;
border: none;
padding: 8px 20px;
border-radius: var(--sh-radius-pill);
font-weight: var(--sh-fw-semibold);
font-size: var(--sh-fs-sm);
cursor: pointer;
transition: var(--sh-transition-default);
}
body:not(.wp-admin) .settings-list-wrapper .coupon-wrapper button:hover,
body:not(.wp-admin) .settings-list-wrapper .discount-wrapper button:hover {
background: var(--sh-primary-600);
}
/* -- GIFT POPUP: OVERLAY --- */
body:not(.wp-admin) .wpee-gift-popup-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 1050;
background: rgba(26, 26, 46, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
align-items: center;
justify-content: center;
padding: var(--sh-space-4);
animation: sh-fade-in var(--sh-duration) var(--sh-ease-out);
}
body:not(.wp-admin) .wpee-gift-popup-overlay.is-open,
body:not(.wp-admin) .wpee-gift-popup-overlay[style*="display: flex"],
body:not(.wp-admin) .wpee-gift-popup-overlay[style*="display:flex"],
body:not(.wp-admin) .wpee-gift-popup-overlay[style*="display: block"],
body:not(.wp-admin) .wpee-gift-popup-overlay[style*="display:block"] {
display: flex !important;
}
@keyframes sh-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* -- GIFT POPUP: BOX --- */
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-popup-box {
position: relative;
background: var(--sh-bg);
border-radius: var(--sh-radius-2xl);
box-shadow: var(--sh-shadow-4);
width: 92vw;
max-width: 720px;
max-height: 85vh;
overflow-y: auto;
padding: var(--sh-space-8) var(--sh-space-6) var(--sh-space-6);
animation: sh-popup-in var(--sh-duration-slow) var(--sh-ease-spring);
}
@keyframes sh-popup-in {
from { opacity: 0; transform: translateY(24px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* -- GIFT POPUP: CLOSE BUTTON (small circular, not giant pill) --- */
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-popup-close {
position: absolute;
top: 16px;
right: 16px;
width: 38px;
height: 38px;
min-width: 38px;
padding: 0;
border-radius: var(--sh-radius-circle);
background: var(--sh-bg-soft);
color: var(--sh-text-2);
border: none;
font-size: 22px;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: var(--sh-transition-default);
z-index: 2;
box-shadow: none;
}
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-popup-close:hover {
background: var(--sh-border);
color: var(--sh-text);
transform: rotate(90deg);
}
/* -- GIFT POPUP: TITLE --- */
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-popup-title {
text-align: center;
font-size: var(--sh-fs-xl);
font-weight: var(--sh-fw-bold);
color: var(--sh-text);
margin: 0 0 var(--sh-space-5);
padding: 0 var(--sh-space-8);
}
/* -- GIFT POPUP: CONTENT GRID --- */
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-popup-content,
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-dropdown,
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-inner { width: 100%; }
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-inner > form {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: var(--sh-space-3);
margin: 0;
padding: 0;
}
@media (max-width: 480px) {
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-inner > form {
grid-template-columns: repeat(2, 1fr);
}
}
/* -- GIFT POPUP: GIFT CARD --- */
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-inner > form > .form-group {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--sh-space-2);
background: var(--sh-bg-soft);
border: 2px solid transparent;
border-radius: var(--sh-radius-lg);
padding: var(--sh-space-4);
margin: 0;
cursor: pointer;
transition: var(--sh-transition-default);
min-height: 140px;
}
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-inner > form > .form-group:hover {
transform: translateY(-3px);
box-shadow: var(--sh-shadow-2);
background: var(--sh-bg);
border-color: var(--sh-primary-100);
}
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-inner > form > .form-group input[type="radio"].wpee-gift {
position: absolute;
top: 8px;
left: 8px;
width: 18px;
height: 18px;
accent-color: var(--sh-accent);
cursor: pointer;
opacity: 0.6;
transition: var(--sh-transition-default);
}
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-inner > form > .form-group img {
width: 64px;
height: 64px;
object-fit: contain;
display: block;
pointer-events: none;
}
/* -- GIFT POPUP: SELECTED STATE --- */
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-inner > form > .form-group:has(input[type="radio"]:checked) {
background: var(--sh-soft);
border-color: var(--sh-accent);
box-shadow: var(--sh-shadow-accent);
}
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-inner > form > .form-group:has(input[type="radio"]:checked) input[type="radio"].wpee-gift {
opacity: 1;
}
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-inner > form > .form-group:has(input[type="radio"]:checked)::after {
content: "\2713";
position: absolute;
top: 8px;
right: 8px;
width: 22px;
height: 22px;
background: var(--sh-accent);
color: #fff;
font-size: 13px;
font-weight: var(--sh-fw-bold);
border-radius: var(--sh-radius-circle);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: var(--sh-shadow-accent);
}
/* -- GIFT POPUP: SUBMIT --- */
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-inner > form > input[type="submit"].wpee-gift-submit {
grid-column: 1 / -1;
width: 100%;
background: var(--sh-gradient);
color: #fff;
border: none;
padding: 14px 24px;
border-radius: var(--sh-radius-pill);
font-weight: var(--sh-fw-bold);
font-size: var(--sh-fs-base);
cursor: pointer;
margin-top: var(--sh-space-3);
box-shadow: var(--sh-shadow-primary);
transition: var(--sh-transition-default);
}
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-inner > form > input[type="submit"].wpee-gift-submit:hover {
transform: translateY(-2px);
box-shadow: var(--sh-shadow-3);
}
/* -- PROFILE OWN SIDEBAR: LEVEL/CREDITS/EDIT COVER --- */
body:not(.wp-admin) .wpee-account-level,
body:not(.wp-admin) .wpee-credit-balance,
body:not(.wp-admin) .sh-own-sidebar-card {
background: var(--sh-gradient-soft);
border: 1px solid var(--sh-divider);
border-radius: var(--sh-radius-xl);
padding: var(--sh-space-4) var(--sh-space-5);
margin-bottom: var(--sh-space-3);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sh-space-3);
transition: var(--sh-transition-default);
}
body:not(.wp-admin) .wpee-account-level:hover,
body:not(.wp-admin) .wpee-credit-balance:hover {
transform: translateY(-2px);
box-shadow: var(--sh-shadow-2);
border-color: var(--sh-primary-100);
}
body:not(.wp-admin) .wpee-account-level .label,
body:not(.wp-admin) .wpee-credit-balance .label {
font-size: var(--sh-fs-xs);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--sh-text-muted);
font-weight: var(--sh-fw-semibold);
}
body:not(.wp-admin) .wpee-account-level .value,
body:not(.wp-admin) .wpee-credit-balance .value {
font-size: var(--sh-fs-lg);
font-weight: var(--sh-fw-bold);
background: var(--sh-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
body:not(.wp-admin) .wpee-edit-cover-photo,
body:not(.wp-admin) .sh-edit-cover-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: rgba(255,255,255,0.85);
backdrop-filter: blur(8px);
color: var(--sh-text);
border: 1px solid var(--sh-divider);
border-radius: var(--sh-radius-pill);
font-weight: var(--sh-fw-semibold);
font-size: var(--sh-fs-sm);
text-decoration: none;
cursor: pointer;
transition: var(--sh-transition-default);
box-shadow: var(--sh-shadow-1);
}
body:not(.wp-admin) .wpee-edit-cover-photo:hover,
body:not(.wp-admin) .sh-edit-cover-btn:hover {
background: #fff;
color: var(--sh-primary);
transform: translateY(-2px);
box-shadow: var(--sh-shadow-2);
}
/* ZONE_C_END */
/* ==========================================================================
ZONE Z — CORRECTIONS / DATEBOOK VARIANT
Applied AFTER A/B/C. Targets real markup we observed in runtime:
- .wpee-datebook-* (profile card with white-on-gradient design)
- .wpee-online-member-* (online strip with age/photo badges)
- .modern-meet-card (Meet Me sidebar card)
- .wpee-members-page-btn (pagination buttons, not anchors)
- .wpee-members-filter-toolbar__row/actions (new toolbar structure)
- .text-white fix for profile header
========================================================================== */
/* --- Layout wrappers: reset generic .wpee-block styling that was landing
on strip containers & panels that shouldn't be cards ---------------- */
body:not(.wp-admin) .wpee-online-members-inner.wpee-block {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 0 var(--sh-space-6) !important;
border-radius: 0 !important;
}
/* --- Online members strip ------------------------------------------------ */
body:not(.wp-admin) .wpee-online-members-inner--enhanced {
background: var(--sh-bg);
border: 1px solid var(--sh-divider);
border-radius: var(--sh-radius-2xl);
padding: var(--sh-space-4);
box-shadow: var(--sh-shadow-1);
margin-bottom: var(--sh-space-5);
overflow: hidden;
}
body:not(.wp-admin) .online-members-section--enhanced {
display: flex;
gap: var(--sh-space-3);
list-style: none;
padding: 0;
margin: 0;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--sh-border-strong) transparent;
}
body:not(.wp-admin) .online-members-section--enhanced::-webkit-scrollbar {
height: 6px;
}
body:not(.wp-admin) .online-members-section--enhanced::-webkit-scrollbar-thumb {
background: var(--sh-border-strong);
border-radius: var(--sh-radius-pill);
}
body:not(.wp-admin) .wpee-online-member-card {
flex: 0 0 auto;
scroll-snap-align: start;
list-style: none;
width: 120px;
}
body:not(.wp-admin) .wpee-online-member-card > a {
display: block;
text-decoration: none;
color: inherit;
}
body:not(.wp-admin) .wpee-online-member-link-inner {
position: relative;
width: 120px;
height: 150px;
border-radius: var(--sh-radius-lg);
overflow: hidden;
box-shadow: var(--sh-shadow-1);
transition: var(--sh-transition-default);
border: 2px solid transparent;
}
body:not(.wp-admin) .wpee-online-member-card:hover .wpee-online-member-link-inner {
transform: translateY(-4px);
box-shadow: var(--sh-shadow-3);
border-color: var(--sh-accent);
}
body:not(.wp-admin) .wpee-online-member-photo {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-color: var(--sh-bg-soft);
}
body:not(.wp-admin) .wpee-online-member-photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(26,26,46,0.55) 100%);
pointer-events: none;
}
body:not(.wp-admin) .wpee-online-member-photo--placeholder {
background-color: var(--sh-primary-50);
background-size: 60% !important;
background-repeat: no-repeat !important;
background-position: center !important;
opacity: 0.85;
}
body:not(.wp-admin) .wpee-online-member-badges {
position: absolute;
left: 8px;
right: 8px;
bottom: 8px;
display: flex;
gap: 4px;
justify-content: space-between;
align-items: center;
z-index: 2;
}
body:not(.wp-admin) .wpee-online-badge {
display: inline-flex;
align-items: center;
gap: 3px;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(4px);
color: var(--sh-text);
padding: 3px 8px;
border-radius: var(--sh-radius-pill);
font-size: 11px;
font-weight: var(--sh-fw-bold);
line-height: 1;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
body:not(.wp-admin) .wpee-online-badge__icon {
width: 10px;
height: 10px;
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.85;
}
body:not(.wp-admin) .wpee-online-badge__icon--age-male {
background-image: url("data:image/svg+xml;utf8,");
}
body:not(.wp-admin) .wpee-online-badge__icon--age-female {
background-image: url("data:image/svg+xml;utf8,");
}
body:not(.wp-admin) .wpee-online-badge__icon--camera {
background-image: url("data:image/svg+xml;utf8,");
}
/* --- Filter toolbar new structure (__row, __fields, __actions) ---------- */
body:not(.wp-admin) .wpee-members-filter-toolbar {
background: var(--sh-bg) !important;
border: 1px solid var(--sh-divider) !important;
border-radius: var(--sh-radius-2xl) !important;
padding: var(--sh-space-5) var(--sh-space-6) !important;
box-shadow: var(--sh-shadow-1);
margin-bottom: var(--sh-space-5);
display: block;
}
body:not(.wp-admin) .wpee-members-filter-toolbar__title {
font-size: var(--sh-fs-lg);
font-weight: var(--sh-fw-bold);
color: var(--sh-text);
margin: 0 0 var(--sh-space-4);
letter-spacing: -0.01em;
}
body:not(.wp-admin) .wpee-members-filter-toolbar__row {
display: flex;
align-items: flex-end;
gap: var(--sh-space-4);
flex-wrap: wrap;
}
body:not(.wp-admin) .wpee-members-filter-toolbar__fields {
display: flex;
gap: var(--sh-space-3);
flex: 1;
flex-wrap: wrap;
min-width: 0;
}
body:not(.wp-admin) .wpee-members-filter-field {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 120px;
flex: 1;
}
body:not(.wp-admin) .wpee-members-filter-label {
font-size: var(--sh-fs-xs);
font-weight: var(--sh-fw-semibold);
color: var(--sh-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
body:not(.wp-admin) .wpee-members-filter-toolbar select.dspdp-form-control {
width: 100%;
min-height: 42px;
padding: 10px 14px !important;
border: 1.5px solid var(--sh-border) !important;
border-radius: var(--sh-radius-md) !important;
background: var(--sh-bg) !important;
color: var(--sh-text) !important;
font-size: var(--sh-fs-sm) !important;
appearance: none;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
padding-right: 36px !important;
transition: var(--sh-transition-default);
}
body:not(.wp-admin) .wpee-members-filter-toolbar select.dspdp-form-control:focus {
border-color: var(--sh-primary) !important;
box-shadow: 0 0 0 4px var(--sh-primary-100) !important;
outline: none;
}
body:not(.wp-admin) .wpee-members-filter-age-selects {
display: flex;
gap: 6px;
}
body:not(.wp-admin) .wpee-members-filter-age-selects select {
flex: 1;
min-width: 0;
}
body:not(.wp-admin) .wpee-members-filter-toolbar__actions {
display: flex;
align-items: center;
gap: var(--sh-space-2);
flex-shrink: 0;
}
body:not(.wp-admin) .wpee-members-toolbar-apply.dspdp-btn.dspdp-btn-primary,
body:not(.wp-admin) .wpee-members-toolbar-apply {
background: var(--sh-gradient) !important;
color: #fff !important;
border: 0 !important;
padding: 12px 28px !important;
border-radius: var(--sh-radius-pill) !important;
font-weight: var(--sh-fw-semibold) !important;
font-size: var(--sh-fs-sm) !important;
min-height: 42px;
cursor: pointer;
box-shadow: var(--sh-shadow-primary) !important;
transition: var(--sh-transition-default);
line-height: 1;
}
body:not(.wp-admin) .wpee-members-toolbar-apply:hover {
transform: translateY(-2px);
filter: brightness(1.05);
box-shadow: var(--sh-shadow-2), var(--sh-shadow-accent) !important;
}
body:not(.wp-admin) .wpee-members-filter-toolbar__actions .trigger-filter-icon {
width: 42px !important;
height: 42px !important;
min-width: 42px;
padding: 0 !important;
border-radius: var(--sh-radius-circle) !important;
background: var(--sh-bg) !important;
border: 1.5px solid var(--sh-border) !important;
color: var(--sh-primary) !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--sh-transition-default);
box-shadow: var(--sh-shadow-1) !important;
}
body:not(.wp-admin) .wpee-members-filter-toolbar__actions .trigger-filter-icon:hover {
background: var(--sh-primary-50) !important;
border-color: var(--sh-primary) !important;
transform: translateY(-2px);
}
/* --- Pagination: buttons (not anchors) ---------------------------------- */
body:not(.wp-admin) .wpee-members-pagination-wrap {
display: flex;
justify-content: center;
margin: var(--sh-space-8) 0;
}
body:not(.wp-admin) .wpee-members-pagination {
display: flex;
gap: 6px;
list-style: none;
padding: 6px;
margin: 0;
background: var(--sh-bg);
border: 1px solid var(--sh-divider);
border-radius: var(--sh-radius-pill);
box-shadow: var(--sh-shadow-1);
}
body:not(.wp-admin) .wpee-members-pagination li { list-style: none; }
body:not(.wp-admin) .wpee-members-page-btn {
min-width: 38px;
height: 38px;
padding: 0 14px;
border: 0;
background: transparent;
color: var(--sh-text-2);
font-size: var(--sh-fs-sm);
font-weight: var(--sh-fw-semibold);
border-radius: var(--sh-radius-pill);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: var(--sh-transition-default);
}
body:not(.wp-admin) .wpee-members-page-btn:hover {
background: var(--sh-primary-50);
color: var(--sh-primary);
}
body:not(.wp-admin) .wpee-members-page-btn.is-active,
body:not(.wp-admin) .wpee-members-page-btn[aria-current="page"] {
background: var(--sh-gradient);
color: #fff;
box-shadow: var(--sh-shadow-primary);
}
body:not(.wp-admin) .wpee-members-page-btn.is-active:hover,
body:not(.wp-admin) .wpee-members-page-btn[aria-current="page"]:hover {
color: #fff;
filter: brightness(1.05);
}
body:not(.wp-admin) .wpee-members-page-btn--nav {
color: var(--sh-primary);
font-size: var(--sh-fs-md);
font-weight: var(--sh-fw-bold);
}
/* --- Profile header: datebook variant with gradient hero ---------------- */
body:not(.wp-admin) .wpee-datebook-profile-card {
background: var(--sh-gradient-hero, linear-gradient(135deg, #5c63b7 0%, #9a4eba 50%, #e4519e 100%)) !important;
border-radius: var(--sh-radius-2xl) !important;
overflow: hidden;
box-shadow: var(--sh-shadow-3);
position: relative;
margin-bottom: var(--sh-space-6);
}
body:not(.wp-admin) .wpee-datebook-profile-card::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 85% 15%, rgba(255,255,255,0.12) 0%, transparent 40%),
radial-gradient(circle at 15% 85%, rgba(255,255,255,0.08) 0%, transparent 40%);
pointer-events: none;
z-index: 1;
}
body:not(.wp-admin) .wpee-datebook-profile-card > * { position: relative; z-index: 2; }
body:not(.wp-admin) .profile-user-details.wpee-datebook-profile-top {
display: flex !important;
gap: var(--sh-space-6);
padding: var(--sh-space-8) var(--sh-space-6) var(--sh-space-6) !important;
align-items: flex-end;
flex-wrap: wrap;
}
/* Avatar in datebook layout */
body:not(.wp-admin) .wpee-datebook-profile-top .profile-img.change-profile-image {
flex: 0 0 140px;
width: 140px;
height: 140px;
border-radius: var(--sh-radius-circle);
overflow: visible;
background: rgba(255,255,255,0.2);
border: 4px solid #fff;
box-shadow: 0 12px 32px rgba(0,0,0,0.20);
padding: 0 !important;
position: relative;
}
body:not(.wp-admin) .wpee-datebook-profile-top .profile-img figure {
width: 100%;
height: 100%;
margin: 0;
border-radius: var(--sh-radius-circle);
overflow: hidden;
background: var(--sh-bg-soft);
}
body:not(.wp-admin) .wpee-datebook-profile-top .profile-img figure img,
body:not(.wp-admin) .wpee-datebook-profile-top .profile-img #profile_picture {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
body:not(.wp-admin) .wpee-datebook-profile-top .update_profile_text_div {
position: absolute !important;
bottom: 0;
right: 0;
width: 40px;
height: 40px;
border-radius: var(--sh-radius-circle);
background: var(--sh-gradient);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 6px 14px rgba(92,99,183,0.40);
z-index: 3;
transition: var(--sh-transition-default);
}
body:not(.wp-admin) .wpee-datebook-profile-top .update_profile_text_div:hover {
transform: scale(1.08);
}
body:not(.wp-admin) .wpee-datebook-profile-top .update_profile_text_div a,
body:not(.wp-admin) .wpee-datebook-profile-top .update_profile_text_div i {
color: #fff !important;
font-size: 16px;
}
body:not(.wp-admin) .wpee-datebook-profile-top .wpee-user-status {
position: absolute;
top: 6px;
right: 10px;
width: 16px;
height: 16px;
border-radius: var(--sh-radius-circle);
border: 3px solid #fff;
background: var(--sh-text-muted);
z-index: 3;
}
body:not(.wp-admin) .wpee-datebook-profile-top .wpee-user-status.wpee-online {
background: var(--sh-success);
box-shadow: 0 0 0 4px rgba(34,197,94,0.25);
animation: sh-pulse-online 2s ease-in-out infinite;
}
@keyframes sh-pulse-online {
0%, 100% { box-shadow: 0 0 0 4px rgba(34,197,94,0.25); }
50% { box-shadow: 0 0 0 8px rgba(34,197,94,0.10); }
}
/* Details column (name, meta, actions) */
body:not(.wp-admin) .wpee-datebook-details-column {
flex: 1;
min-width: 260px;
display: flex;
flex-direction: column;
gap: var(--sh-space-3);
}
body:not(.wp-admin) .wpee-datebook-info-primary .username {
font-size: var(--sh-fs-3xl) !important;
font-weight: var(--sh-fw-bold) !important;
color: #fff !important;
letter-spacing: -0.02em;
margin: 0 0 6px;
text-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
/* Hard-reset .text-white → readable text on our gradient hero */
body:not(.wp-admin) .wpee-datebook-profile-card .text-white,
body:not(.wp-admin) .wpee-datebook-profile-card .text-white * {
color: rgba(255,255,255,0.94) !important;
}
/* Online/meta badges row */
body:not(.wp-admin) .wpee-datebook-online-line {
margin: 0 !important;
}
body:not(.wp-admin) .wpee-db-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: var(--sh-radius-pill);
font-size: var(--sh-fs-xs);
font-weight: var(--sh-fw-bold);
letter-spacing: 0.03em;
}
body:not(.wp-admin) .wpee-db-badge-online {
background: rgba(34,197,94,0.20);
color: #86efac !important;
border: 1px solid rgba(34,197,94,0.35);
}
body:not(.wp-admin) .wpee-db-badge-online::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--sh-success);
box-shadow: 0 0 8px rgba(34,197,94,0.8);
}
/* Age / location / credits row */
body:not(.wp-admin) .age-location-wrap.text-white {
display: flex !important;
flex-wrap: wrap;
gap: var(--sh-space-3);
margin: 0 !important;
color: rgba(255,255,255,0.92) !important;
}
body:not(.wp-admin) .age-location-wrap.text-white > div {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: rgba(255,255,255,0.12);
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.18);
border-radius: var(--sh-radius-pill);
font-size: var(--sh-fs-sm);
font-weight: var(--sh-fw-medium);
color: #fff !important;
}
body:not(.wp-admin) .age-location-wrap.text-white .age-title,
body:not(.wp-admin) .age-location-wrap.text-white .location-title,
body:not(.wp-admin) .age-location-wrap.text-white .credits-title {
opacity: 0.75;
font-size: var(--sh-fs-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: var(--sh-fw-semibold);
}
body:not(.wp-admin) .wpee-datebook-meta-line {
color: rgba(255,255,255,0.75) !important;
font-size: var(--sh-fs-sm);
margin: 0 !important;
}
/* Actions row (account level + edit cover) */
body:not(.wp-admin) .wpee-datebook-actions {
display: flex;
gap: var(--sh-space-3);
align-items: center;
flex-wrap: wrap;
margin-top: var(--sh-space-2);
}
body:not(.wp-admin) .wpee-datebook-account-status {
display: inline-flex;
padding: 0;
}
body:not(.wp-admin) .wpee-datebook-account-status .profile-location {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: rgba(255,255,255,0.95);
border-radius: var(--sh-radius-pill);
color: var(--sh-primary-700) !important;
font-size: var(--sh-fs-sm);
font-weight: var(--sh-fw-semibold);
box-shadow: var(--sh-shadow-1);
}
body:not(.wp-admin) .wpee-datebook-account-status .profile-status-title {
color: var(--sh-text-muted) !important;
font-size: var(--sh-fs-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* Edit cover photo button */
body:not(.wp-admin) .wpee-datebook-cover-actions .change-cover-photo form {
display: none;
}
body:not(.wp-admin) .wpee-datebook-cover-actions .trigger-cover-photo.wpee-db-btn.wpee-db-btn-outline {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 20px !important;
background: rgba(255,255,255,0.95) !important;
color: var(--sh-primary-700) !important;
border: 1.5px solid rgba(255,255,255,0.5) !important;
border-radius: var(--sh-radius-pill) !important;
font-size: var(--sh-fs-sm) !important;
font-weight: var(--sh-fw-semibold) !important;
text-decoration: none !important;
box-shadow: var(--sh-shadow-1);
transition: var(--sh-transition-default);
}
body:not(.wp-admin) .wpee-datebook-cover-actions .trigger-cover-photo:hover {
background: #fff !important;
transform: translateY(-2px);
box-shadow: var(--sh-shadow-2);
}
/* --- Profile header TAB BAR below the card ------------------------------ */
body:not(.wp-admin) .wpee-datebook-profile-card .profile-header-menu {
background: rgba(255,255,255,0.08);
backdrop-filter: blur(10px);
border-top: 1px solid rgba(255,255,255,0.10);
padding: 0 var(--sh-space-4);
position: relative;
z-index: 2;
}
body:not(.wp-admin) .wpee-datebook-profile-card .profile-menu-wrapper {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: var(--sh-space-4);
flex-wrap: wrap;
padding: 0;
}
body:not(.wp-admin) .wpee-datebook-profile-card .profile-menu-wrapper .ham-icon {
display: none;
}
@media (max-width: 768px) {
body:not(.wp-admin) .wpee-datebook-profile-card .profile-menu-wrapper .ham-icon {
display: inline-flex;
width: 36px;
height: 36px;
align-items: center;
justify-content: center;
color: #fff;
cursor: pointer;
border-radius: var(--sh-radius-circle);
}
}
body:not(.wp-admin) .wpee-datebook-profile-card .profile-menu-tab {
display: flex !important;
gap: 2px;
list-style: none;
padding: 0;
margin: 0;
overflow-x: auto;
scrollbar-width: none;
flex: 1;
}
body:not(.wp-admin) .wpee-datebook-profile-card .profile-menu-tab::-webkit-scrollbar { display: none; }
body:not(.wp-admin) .wpee-datebook-profile-card .profile-menu-tab-list {
list-style: none;
}
body:not(.wp-admin) .wpee-datebook-profile-card .profile-menu-tab-list > a {
display: inline-flex;
align-items: center;
padding: 16px 18px !important;
color: rgba(255,255,255,0.75) !important;
font-weight: var(--sh-fw-semibold) !important;
font-size: var(--sh-fs-sm) !important;
white-space: nowrap;
border-bottom: 2px solid transparent !important;
transition: var(--sh-transition-default);
background: transparent !important;
text-decoration: none !important;
}
body:not(.wp-admin) .wpee-datebook-profile-card .profile-menu-tab-list > a:hover {
color: #fff !important;
background: rgba(255,255,255,0.08) !important;
}
body:not(.wp-admin) .wpee-datebook-profile-card .profile-menu-tab-list.active > a {
color: #fff !important;
border-bottom-color: #fff !important;
background: rgba(255,255,255,0.10) !important;
}
/* --- Notification links (Gifts / Winks / Settings / More) --------------- */
body:not(.wp-admin) .wpee-datebook-profile-card .profile-notification-blocks {
padding-right: var(--sh-space-4);
}
body:not(.wp-admin) .wpee-datebook-profile-card .wpee-notification-links {
display: flex;
gap: 4px;
list-style: none;
padding: 0;
margin: 0;
align-items: center;
}
body:not(.wp-admin) .wpee-datebook-profile-card .wpee-notification-links > li.wpee-menu {
list-style: none;
position: relative;
}
body:not(.wp-admin) .wpee-datebook-profile-card .wpee-notification-links > li.wpee-menu > a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px !important;
color: rgba(255,255,255,0.8) !important;
font-size: var(--sh-fs-sm) !important;
font-weight: var(--sh-fw-medium) !important;
border-radius: var(--sh-radius-pill) !important;
background: transparent !important;
text-decoration: none !important;
transition: var(--sh-transition-default);
white-space: nowrap;
}
body:not(.wp-admin) .wpee-datebook-profile-card .wpee-notification-links > li.wpee-menu > a:hover {
color: #fff !important;
background: rgba(255,255,255,0.12) !important;
}
body:not(.wp-admin) .wpee-datebook-profile-card .wpee-notification-links > li.wpee_active_link > a,
body:not(.wp-admin) .wpee-datebook-profile-card .wpee-notification-links > li.wpee-menu.wpee_active_link > a {
color: #fff !important;
background: rgba(255,255,255,0.18) !important;
}
body:not(.wp-admin) .wpee-datebook-profile-card .wpee-notification-links .fa {
font-size: 14px;
opacity: 0.9;
}
body:not(.wp-admin) .wpee-datebook-profile-card .wpee-count-num {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
background: var(--sh-accent);
color: #fff !important;
font-size: 10px;
font-weight: var(--sh-fw-bold);
border-radius: var(--sh-radius-pill);
margin-left: 4px;
box-shadow: 0 2px 6px rgba(228,81,158,0.40);
}
/* --- Meet Me card (sidebar, modern variant) ----------------------------- */
body:not(.wp-admin) .modern-meet-card,
body:not(.wp-admin) .meet-to-info.modern-meet-card {
background: var(--sh-bg) !important;
border-radius: var(--sh-radius-2xl) !important;
padding: var(--sh-space-6) !important;
box-shadow: var(--sh-shadow-2) !important;
border: 1px solid var(--sh-divider);
text-align: center;
margin-bottom: var(--sh-space-5);
position: relative;
overflow: hidden;
}
body:not(.wp-admin) .modern-meet-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 80px;
background: var(--sh-gradient-soft);
z-index: 0;
}
body:not(.wp-admin) .modern-meet-card > * {
position: relative;
z-index: 1;
}
body:not(.wp-admin) .meet-card-header {
margin-bottom: var(--sh-space-4);
}
body:not(.wp-admin) .meet-card-title {
font-size: var(--sh-fs-lg) !important;
font-weight: var(--sh-fw-bold) !important;
color: var(--sh-text) !important;
margin: 0 !important;
letter-spacing: -0.01em;
}
body:not(.wp-admin) .meet-card-body {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sh-space-3);
}
body:not(.wp-admin) .meet-card-image {
width: 140px;
height: 140px;
border-radius: var(--sh-radius-circle);
overflow: hidden;
border: 4px solid #fff;
box-shadow: var(--sh-shadow-2);
margin: 0 auto !important;
padding: 0 !important;
}
body:not(.wp-admin) .meet-card-image a,
body:not(.wp-admin) .meet-card-image img {
display: block;
width: 100%;
height: 100%;
}
body:not(.wp-admin) .meet-card-image img {
object-fit: cover;
}
body:not(.wp-admin) .meet-card-content {
text-align: center;
padding: 0 !important;
}
body:not(.wp-admin) .meet-user-name {
font-size: var(--sh-fs-lg);
font-weight: var(--sh-fw-bold);
color: var(--sh-text);
margin-bottom: 4px;
}
body:not(.wp-admin) .meet-user-name .dspdp-medium,
body:not(.wp-admin) .meet-user-name > span {
color: inherit;
font-weight: inherit;
}
body:not(.wp-admin) .meet-user-age {
color: var(--sh-text-muted);
font-weight: var(--sh-fw-regular);
}
body:not(.wp-admin) .meet-user-location {
color: var(--sh-text-muted);
font-size: var(--sh-fs-sm);
margin-bottom: var(--sh-space-3);
}
body:not(.wp-admin) .meet-user-link .view-profile-text {
display: inline-block;
padding: 0;
color: var(--sh-primary) !important;
font-size: var(--sh-fs-sm);
font-weight: var(--sh-fw-semibold);
text-decoration: none !important;
}
body:not(.wp-admin) .meet-user-link .view-profile-text:hover {
color: var(--sh-accent) !important;
}
body:not(.wp-admin) .wpee-meetme-action-wrap.meet-card-actions {
display: flex;
gap: var(--sh-space-3);
margin-top: var(--sh-space-5);
padding-top: var(--sh-space-4);
border-top: 1px solid var(--sh-divider);
}
body:not(.wp-admin) .meet-action-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 12px 16px !important;
border-radius: var(--sh-radius-pill) !important;
font-weight: var(--sh-fw-semibold) !important;
font-size: var(--sh-fs-sm) !important;
text-decoration: none !important;
cursor: pointer;
transition: var(--sh-transition-default);
border: 0;
}
body:not(.wp-admin) .meet-action-btn.meet-action-like {
background: var(--sh-gradient) !important;
color: #fff !important;
box-shadow: var(--sh-shadow-accent);
}
body:not(.wp-admin) .meet-action-btn.meet-action-like:hover {
transform: translateY(-2px);
filter: brightness(1.05);
color: #fff !important;
}
body:not(.wp-admin) .meet-action-btn.meet-action-skip {
background: var(--sh-bg-soft) !important;
color: var(--sh-text-2) !important;
border: 1.5px solid var(--sh-border) !important;
}
body:not(.wp-admin) .meet-action-btn.meet-action-skip:hover {
background: var(--sh-bg) !important;
border-color: var(--sh-text-muted) !important;
color: var(--sh-text) !important;
}
/* --- Settings tab bar: prevent more-panel from being visible ------------ */
body:not(.wp-admin) .wpee-datebook-more-panel[hidden],
body:not(.wp-admin) .wpee-notification-more-tabs[hidden] {
display: none !important;
}
body:not(.wp-admin) .wpee-datebook-more-panel:not(.wpee-more-secondary-expanded *) {
/* Hidden unless toggle activated via JS classes */
}
/* Settings tab row (wpee-profile-main-stack > settings-list-wrapper) */
body:not(.wp-admin) .wpee-profile-main-stack .settings-list-wrapper .profile-section-tab {
overflow-x: auto;
scrollbar-width: none;
}
body:not(.wp-admin) .wpee-profile-main-stack .settings-list-wrapper .profile-section-tab::-webkit-scrollbar {
display: none;
}
/* --- Password criteria card: kill inline margin-right: 24% ------------- */
body:not(.wp-admin) .settings-list-wrapper .setting-page-account .password-criteria[style] {
margin-right: 0 !important;
}
/* --- Settings submit button row (.dspdp-row with offset columns) ------- */
body:not(.wp-admin) .settings-list-wrapper .setting-page-account > .form-group.dspdp-row {
grid-column: 1 / -1;
margin: var(--sh-space-4) 0 0 !important;
padding-top: var(--sh-space-4);
border-top: 1px solid var(--sh-divider);
}
body:not(.wp-admin) .settings-list-wrapper .setting-page-account .btn-row {
justify-content: flex-end !important;
width: 100% !important;
margin: 0 !important;
}
/* Neutralize bootstrap offset classes that push button weirdly */
body:not(.wp-admin) .settings-list-wrapper .setting-page-account .dspdp-col-sm-offset-3,
body:not(.wp-admin) .settings-list-wrapper .setting-page-account .dspdp-col-sm-6,
body:not(.wp-admin) .settings-list-wrapper .setting-page-account .dsp-sm-6 {
margin-left: 0 !important;
width: auto !important;
max-width: none !important;
padding: 0 !important;
flex: 0 0 auto !important;
}
/* --- Profile combined layout (meet-me sidebar + main) ------------------- */
body:not(.wp-admin) .wpee-profile-combined-cols {
display: flex;
gap: var(--sh-space-5);
align-items: flex-start;
flex-wrap: wrap;
}
body:not(.wp-admin) .wpee-profile-combined-col--sidebar {
flex: 0 0 300px;
max-width: 100%;
}
body:not(.wp-admin) .wpee-profile-combined-col--main {
flex: 1;
min-width: 0;
}
@media (max-width: 992px) {
body:not(.wp-admin) .wpee-profile-combined-cols {
flex-direction: column;
}
body:not(.wp-admin) .wpee-profile-combined-col--sidebar {
flex: 1 1 auto;
width: 100%;
}
}
/* Containers inside combined layout shouldn't add extra shadows */
body:not(.wp-admin) .wpee-datebook-profile-panel {
background: transparent;
padding: 0;
}
body:not(.wp-admin) .wpee-profile-split-layout,
body:not(.wp-admin) .wpee-profile-main-stack,
body:not(.wp-admin) .wpee-profile-content-wrap.no-left-bar {
background: transparent;
}
/* --- Responsive: datebook profile header stacks on mobile --------------- */
@media (max-width: 768px) {
body:not(.wp-admin) .profile-user-details.wpee-datebook-profile-top {
flex-direction: column;
align-items: center !important;
text-align: center;
padding: var(--sh-space-6) var(--sh-space-4) !important;
}
body:not(.wp-admin) .wpee-datebook-details-column {
align-items: center;
text-align: center;
}
body:not(.wp-admin) .age-location-wrap.text-white {
justify-content: center;
}
body:not(.wp-admin) .wpee-datebook-actions {
justify-content: center;
}
body:not(.wp-admin) .wpee-datebook-profile-card .profile-menu-wrapper {
flex-direction: column;
align-items: stretch;
}
body:not(.wp-admin) .wpee-datebook-profile-card .profile-notification-blocks {
padding: 0 var(--sh-space-4) var(--sh-space-3);
}
body:not(.wp-admin) .wpee-members-filter-toolbar__row {
flex-direction: column;
align-items: stretch;
}
body:not(.wp-admin) .wpee-members-filter-toolbar__actions {
width: 100%;
}
body:not(.wp-admin) .wpee-members-toolbar-apply {
flex: 1;
}
}
/* ZONE_Z_END */
/* ==========================================================================
ZONE Z2 — SOLID CTA COLOR (#e4519e) + MEMBER SEARCH RADICAL REDESIGN
- Replaces gradient on all CTAs with flat accent pink
- Fixes broken member cards (narrow-column regression)
- Introduces left sidebar filter layout + modern member cards with overlay
========================================================================== */
/* --- 1. GLOBAL CTA: solid #e4519e instead of gradient -------------------- */
body:not(.wp-admin) .btn.btn-primary,
body:not(.wp-admin) .dspdp-btn.dspdp-btn-default,
body:not(.wp-admin) .wpee-date-button-wrapper .dspdp-btn.dspdp-btn-default,
body:not(.wp-admin) .settings-list-wrapper .btn-row .btn,
body:not(.wp-admin) .settings-list-wrapper .setting-page-account input.dspdp-btn-default,
body:not(.wp-admin) .settings-list-wrapper .setting-page-account input.dsp_submit_button,
body:not(.wp-admin) .settings-list-wrapper .wpee-plan-item form input[type="submit"].dspdp-btn-default,
body:not(.wp-admin) .wpee-members-toolbar-apply.dspdp-btn.dspdp-btn-primary,
body:not(.wp-admin) .wpee-members-toolbar-apply,
body:not(.wp-admin) .wpee-upgrade-btn,
body:not(.wp-admin) a.upgrade-account-button,
body:not(.wp-admin) .upgrade-account-button,
body:not(.wp-admin) .chat-sent-button,
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-inner > form > input[type="submit"].wpee-gift-submit,
body:not(.wp-admin) .meet-action-btn.meet-action-like,
body.not-logged-in .site-header .header-register-btn,
body.not-logged-in .login-wrap .header-register-btn,
body:not(.wp-admin) .wpee-datebook-profile-top .update_profile_text_div,
body:not(.wp-admin) .wpee-members-page-btn.is-active,
body:not(.wp-admin) .wpee-members-page-btn[aria-current="page"] {
background: var(--sh-accent) !important;
background-image: none !important;
color: #fff !important;
box-shadow: 0 8px 22px rgba(228, 81, 158, 0.30) !important;
}
body:not(.wp-admin) .btn.btn-primary:hover,
body:not(.wp-admin) .dspdp-btn.dspdp-btn-default:hover,
body:not(.wp-admin) .settings-list-wrapper .setting-page-account input.dspdp-btn-default:hover,
body:not(.wp-admin) .settings-list-wrapper .setting-page-account input.dsp_submit_button:hover,
body:not(.wp-admin) .settings-list-wrapper .wpee-plan-item form input[type="submit"].dspdp-btn-default:hover,
body:not(.wp-admin) .wpee-members-toolbar-apply:hover,
body:not(.wp-admin) .wpee-upgrade-btn:hover,
body:not(.wp-admin) a.upgrade-account-button:hover,
body:not(.wp-admin) .chat-sent-button:hover,
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-inner > form > input[type="submit"].wpee-gift-submit:hover,
body:not(.wp-admin) .meet-action-btn.meet-action-like:hover,
body.not-logged-in .site-header .header-register-btn:hover,
body.not-logged-in .login-wrap .header-register-btn:hover {
background: var(--sh-accent-600) !important;
color: #fff !important;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(228, 81, 158, 0.38) !important;
filter: none !important;
}
/* Popular plan ribbon stays accent solid */
body:not(.wp-admin) .settings-list-wrapper .wpee-plan-item:nth-child(2)::before {
background: var(--sh-accent) !important;
background-image: none !important;
}
/* Premium area banner stays with a subtle gradient overlay — flip to solid too */
body:not(.wp-admin) .settings-list-wrapper .wpee-premium-area .premium-area {
background: var(--sh-accent) !important;
background-image: none !important;
}
/* Credits/pricing large numbers — flip gradient-text to solid pink */
body:not(.wp-admin) .settings-list-wrapper .wpee-plan-credits-number,
body:not(.wp-admin) .settings-list-wrapper .wpee-plan-item form span[style*="130%"],
body:not(.wp-admin) .wpee-account-level .value,
body:not(.wp-admin) .wpee-credit-balance .value,
body:not(.wp-admin) .settings-list-wrapper .credits-title,
body:not(.wp-admin) .wpee-auth-page-heading {
-webkit-background-clip: initial !important;
background-clip: initial !important;
-webkit-text-fill-color: var(--sh-accent) !important;
color: var(--sh-accent) !important;
background-image: none !important;
}
/* Notification count bubble / online dot accents — already accent; keep */
/* Footer gradient button (if any) — make solid accent on hover link */
body:not(.wp-admin) .site-footer a:hover {
color: var(--sh-accent) !important;
}
/* --- 2. MEMBER SEARCH PAGE: two-column layout (sidebar + main) --------- */
/* Kill the elementor flex squeeze on the search widget */
body:not(.wp-admin) .elementor-widget-wpee-member,
body:not(.wp-admin) .elementor-widget-wpee-member > .elementor-widget-container,
body:not(.wp-admin) .elementor-widget-wpee-member .wpee-member,
body:not(.wp-admin) .elementor-widget-wpee-member .wpee-container.wpee-member-online-container,
body:not(.wp-admin) .elementor-widget-wpee-member .wpee-member-wrapper,
body:not(.wp-admin) .elementor-widget-wpee-member .wpee-ajax-filter,
body:not(.wp-admin) .elementor-widget-wpee-member .wpee-member-list-content {
width: 100% !important;
max-width: 100% !important;
min-width: 0;
}
/* The wrapper that contains filter + list — turn into grid: sidebar + content */
body:not(.wp-admin) .wpee-member-wrapper {
display: grid !important;
grid-template-columns: 300px 1fr;
gap: var(--sh-space-5);
align-items: start;
width: 100%;
}
@media (max-width: 992px) {
body:not(.wp-admin) .wpee-member-wrapper {
grid-template-columns: 1fr;
}
}
/* Ajax filter becomes the LEFT SIDEBAR */
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter {
position: sticky;
top: 90px;
align-self: start;
display: flex;
flex-direction: column;
gap: var(--sh-space-4);
max-height: calc(100vh - 110px);
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter > form {
display: flex;
flex-direction: column;
gap: var(--sh-space-4);
background: var(--sh-bg);
border: 1px solid var(--sh-divider);
border-radius: var(--sh-radius-2xl);
padding: var(--sh-space-5);
box-shadow: var(--sh-shadow-1);
overflow-y: auto;
max-height: 100%;
}
/* Inner sidebar scrollbar */
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter > form::-webkit-scrollbar { width: 6px; }
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter > form::-webkit-scrollbar-thumb {
background: var(--sh-border-strong);
border-radius: var(--sh-radius-pill);
}
/* Top filter toolbar inside sidebar: stack fields vertically */
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__title {
font-size: var(--sh-fs-md) !important;
font-weight: var(--sh-fw-bold) !important;
color: var(--sh-text) !important;
margin: 0 0 var(--sh-space-2) !important;
display: flex;
align-items: center;
gap: 8px;
letter-spacing: -0.01em;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__title::before {
content: "";
width: 6px;
height: 22px;
background: var(--sh-accent);
border-radius: var(--sh-radius-pill);
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__row {
flex-direction: column;
align-items: stretch;
gap: var(--sh-space-3);
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__fields {
flex-direction: column;
gap: var(--sh-space-3);
width: 100%;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-field {
width: 100%;
min-width: 0;
flex: 0 0 auto;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__actions {
width: 100%;
flex-direction: row;
gap: var(--sh-space-2);
margin-top: var(--sh-space-3);
padding-top: var(--sh-space-3);
border-top: 1px solid var(--sh-divider);
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-toolbar-apply {
flex: 1;
padding: 12px 20px !important;
font-size: var(--sh-fs-sm) !important;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__actions .trigger-filter-icon {
display: none !important; /* offcanvas trigger hidden on desktop since filters live inline */
}
/* On desktop, offcanvas wrap becomes inline extra filters section of sidebar */
@media (min-width: 993px) {
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap {
position: static !important;
opacity: 1 !important;
visibility: visible !important;
transition: none !important;
background: transparent !important;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .filter-close {
display: none !important;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .offcanvase-filter-content-wrap {
width: 100% !important;
position: static !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
background: transparent !important;
padding: 0 !important;
box-shadow: none !important;
overflow: visible !important;
height: auto !important;
border-radius: 0 !important;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .close-filter {
display: none !important;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .offcanvase-filter-title-wrap {
display: flex !important;
align-items: center;
justify-content: space-between;
padding: var(--sh-space-3) 0 !important;
margin: 0 0 var(--sh-space-2) !important;
border-top: 1px solid var(--sh-divider);
border-bottom: 1px solid var(--sh-divider);
background: transparent !important;
border-radius: 0 !important;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-sidebar-title {
font-size: var(--sh-fs-md) !important;
font-weight: var(--sh-fw-bold);
color: var(--sh-text);
margin: 0;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .filter-button-wrap {
display: inline-flex;
gap: 8px;
align-items: center;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .filter-button-wrap .wpee-filter-reset {
color: var(--sh-accent) !important;
font-size: var(--sh-fs-sm);
font-weight: var(--sh-fw-semibold);
text-decoration: none !important;
padding: 4px 10px;
border-radius: var(--sh-radius-pill);
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .filter-button-wrap .wpee-filter-reset:hover {
background: var(--sh-accent-100);
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .filter-button-wrap input[type="submit"] {
display: none; /* duplicate apply — already above */
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-field-group {
display: flex;
flex-direction: column;
gap: var(--sh-space-3);
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-field-group .form-group {
margin: 0;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-field-group label {
display: block;
font-size: var(--sh-fs-xs);
font-weight: var(--sh-fw-semibold);
color: var(--sh-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 4px;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .wpee-members-offcanvas-search {
margin-bottom: 0 !important;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .username-filter {
width: 100%;
min-height: 42px;
padding: 10px 14px 10px 38px;
border: 1.5px solid var(--sh-border);
border-radius: var(--sh-radius-md);
background: var(--sh-bg) url("data:image/svg+xml;utf8,") no-repeat 12px center;
font-size: var(--sh-fs-sm);
transition: var(--sh-transition-default);
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .username-filter:focus {
border-color: var(--sh-accent);
box-shadow: 0 0 0 4px var(--sh-accent-100);
outline: none;
background-color: var(--sh-bg);
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap select.dspdp-form-control {
width: 100% !important;
min-height: 42px !important;
padding: 10px 14px !important;
padding-right: 36px !important;
border: 1.5px solid var(--sh-border) !important;
border-radius: var(--sh-radius-md) !important;
background: var(--sh-bg) url("data:image/svg+xml;utf8,") no-repeat right 12px center !important;
appearance: none;
font-size: var(--sh-fs-sm) !important;
color: var(--sh-text) !important;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap select.dspdp-form-control:focus {
border-color: var(--sh-accent) !important;
box-shadow: 0 0 0 4px var(--sh-accent-100) !important;
outline: none;
}
}
/* On mobile, restore the trigger icon to open offcanvas */
@media (max-width: 992px) {
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__actions .trigger-filter-icon {
display: inline-flex !important;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter {
position: static;
max-height: none;
}
}
/* --- 3. MEMBER SEARCH: TOP BAR (result count + sort) ------------------- */
body:not(.wp-admin) .wpee-member-list-content::before {
content: "Discover people";
display: block;
font-size: var(--sh-fs-xl);
font-weight: var(--sh-fw-bold);
color: var(--sh-text);
letter-spacing: -0.01em;
padding: 0 4px;
margin-bottom: var(--sh-space-4);
}
/* --- 4. MEMBER CARDS — completely rebuilt overlay-style ----------------- */
body:not(.wp-admin) .wpee-member-list-content .main-member-list-wrap {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
gap: var(--sh-space-4) !important;
margin: 0 0 var(--sh-space-6) !important;
padding: 0 !important;
width: 100%;
}
@media (max-width: 600px) {
body:not(.wp-admin) .wpee-member-list-content .main-member-list-wrap {
grid-template-columns: repeat(2, 1fr) !important;
gap: var(--sh-space-3) !important;
}
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap {
width: 100% !important;
margin: 0 !important;
min-height: 0 !important;
background: var(--sh-bg) !important;
border-radius: var(--sh-radius-xl) !important;
overflow: hidden !important;
box-shadow: var(--sh-shadow-1) !important;
border: 1px solid var(--sh-divider);
position: relative;
display: flex !important;
flex-direction: column;
transition: var(--sh-transition-default);
cursor: pointer;
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap:hover {
transform: translateY(-6px);
box-shadow: var(--sh-shadow-3) !important;
border-color: transparent;
}
/* Photo area — aspect ratio 4:5 with gradient overlay at bottom */
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .img-holder {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
margin: 0 !important;
overflow: hidden;
background: var(--sh-bg-soft);
border-radius: 0 !important;
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .img-holder a {
display: block;
width: 100%;
height: 100%;
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .img-holder img,
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .img-holder .img-big {
width: 100% !important;
height: 100% !important;
object-fit: cover;
display: block;
transition: transform 600ms var(--sh-ease-out);
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap:hover .img-holder img {
transform: scale(1.06);
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .img-holder::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 55%;
background: linear-gradient(180deg, transparent 0%, rgba(26,26,46,0.05) 30%, rgba(26,26,46,0.75) 100%);
pointer-events: none;
}
/* Online/offline chip absolute top-left */
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .wpee-member-status-text {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
font-size: 10px;
font-weight: var(--sh-fw-bold);
text-transform: uppercase;
letter-spacing: 0.06em;
border-radius: var(--sh-radius-pill);
backdrop-filter: blur(6px);
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .wpee-member-status-text::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .wpee-member-status-text--online {
background: rgba(34,197,94,0.95) !important;
color: #fff !important;
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .wpee-member-status-text--online::before {
background: #fff;
box-shadow: 0 0 6px rgba(255,255,255,0.8);
animation: sh-pulse-green 2s ease-in-out infinite;
}
@keyframes sh-pulse-green {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .wpee-member-status-text--offline {
background: rgba(255,255,255,0.88) !important;
color: var(--sh-text-muted) !important;
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .wpee-member-status-text--offline::before {
background: var(--sh-text-muted);
}
/* Name + meta overlayed at the bottom of photo */
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-details {
position: absolute;
left: 14px;
right: 14px;
bottom: 14px;
z-index: 2;
padding: 0 !important;
background: transparent !important;
min-height: 0;
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .member-user-name {
font-size: var(--sh-fs-lg) !important;
font-weight: var(--sh-fw-bold) !important;
color: #fff !important;
margin: 0 0 4px !important;
line-height: 1.15;
letter-spacing: -0.01em;
text-shadow: 0 2px 8px rgba(0,0,0,0.35);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
display: block;
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .member-user-name > a {
color: #fff !important;
text-decoration: none !important;
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
/* hide the inline status text inside name (we already show it as chip) */
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .member-user-name .wpee-member-status-text {
display: none !important;
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content {
padding: 0 !important;
background: transparent !important;
border: 0 !important;
min-height: 0;
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content p {
font-size: 12px !important;
color: rgba(255,255,255,0.92) !important;
margin: 0 !important;
line-height: 1.35 !important;
text-shadow: 0 1px 4px rgba(0,0,0,0.4);
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content p br {
display: none;
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content span[data-label="member-label"] {
color: rgba(255,255,255,0.7);
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content .gender-Woman,
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content .gender-Man,
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content .gender-Couple {
font-weight: var(--sh-fw-semibold);
}
/* Hover action button — heart that slides in from bottom-right */
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap::before {
content: "";
position: absolute;
top: 12px;
right: 12px;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.95) url("data:image/svg+xml;utf8,") no-repeat center;
backdrop-filter: blur(6px);
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
z-index: 3;
opacity: 0;
transform: translateY(-4px);
transition: var(--sh-transition-default);
pointer-events: none;
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap:hover::before {
opacity: 1;
transform: translateY(0);
}
/* --- 5. Hide online members strip on search page when sidebar visible -- */
/* It's distracting above a sidebar layout. Keep on other widget instances. */
@media (min-width: 993px) {
body:not(.wp-admin) .elementor-widget-wpee-member .wpee-container.wpee-member-online-container {
margin-bottom: var(--sh-space-4);
}
body:not(.wp-admin) .elementor-widget-wpee-member .wpee-online-members-inner--enhanced {
background: var(--sh-bg);
border: 1px solid var(--sh-divider);
}
/* Reduce online strip height so it doesn't dominate */
body:not(.wp-admin) .elementor-widget-wpee-member .wpee-online-member-card {
width: 100px;
}
body:not(.wp-admin) .elementor-widget-wpee-member .wpee-online-member-link-inner {
width: 100px;
height: 125px;
}
}
/* --- 6. Pagination — keep solid pink active ---------------------------- */
body:not(.wp-admin) .wpee-members-page-btn.is-active,
body:not(.wp-admin) .wpee-members-page-btn[aria-current="page"] {
background: var(--sh-accent) !important;
background-image: none !important;
color: #fff !important;
box-shadow: 0 6px 16px rgba(228,81,158,0.32) !important;
}
/* --- 7. Filter offcanvas on mobile: keep slide-in, solid apply --------- */
@media (max-width: 992px) {
body:not(.wp-admin) .offcanvase-filter-wrap .offcanvase-filter-title-wrap input[type="submit"] {
background: var(--sh-accent) !important;
color: #fff !important;
border-radius: var(--sh-radius-pill) !important;
padding: 10px 22px !important;
border: 0 !important;
font-weight: var(--sh-fw-semibold) !important;
}
}
/* ZONE_Z2_END */
/* ==========================================================================
ZONE Z3 — SEARCH PAGE POLISH
1. Top spacing so online strip is not clipped under the page header
2. Member card: info BELOW the photo (reference-style), not overlay-only
3. Advanced Options group in the left sidebar
========================================================================== */
/* --- 1. Online strip: give breathing room at top --------------------- */
body:not(.wp-admin) .elementor-widget-wpee-member {
padding-top: var(--sh-space-6);
}
body:not(.wp-admin) .wpee-container.wpee-member-online-container {
margin-bottom: var(--sh-space-6) !important;
padding-top: var(--sh-space-2);
}
body:not(.wp-admin) .wpee-online-members-inner--enhanced {
padding: var(--sh-space-5) var(--sh-space-4) !important;
overflow: visible !important; /* prevent top clipping of cards */
}
body:not(.wp-admin) .online-members-section--enhanced {
padding: var(--sh-space-2) 0 !important;
overflow-x: auto;
overflow-y: visible !important;
}
body:not(.wp-admin) .wpee-online-member-card {
padding-top: 6px;
padding-bottom: 6px;
}
/* --- 2. Member cards: info BELOW photo (Badoo/AdultFriendFinder style) --- */
/* Reset the overlay style from ZONE_Z2 — we want info under photo now */
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .img-holder::after {
content: none !important; /* no dark gradient overlay */
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-details {
position: static !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
padding: var(--sh-space-4) var(--sh-space-4) var(--sh-space-5) !important;
background: var(--sh-bg) !important;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .member-user-name {
position: static !important;
color: var(--sh-text) !important;
text-shadow: none !important;
font-size: var(--sh-fs-md) !important;
font-weight: var(--sh-fw-bold) !important;
margin: 0 !important;
line-height: 1.25 !important;
letter-spacing: -0.01em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .member-user-name > a {
color: var(--sh-text) !important;
text-decoration: none !important;
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .member-user-name > a:hover {
color: var(--sh-accent) !important;
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content {
padding: 0 !important;
background: transparent !important;
margin: 0 !important;
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content p {
color: var(--sh-text-muted) !important;
text-shadow: none !important;
font-size: var(--sh-fs-sm) !important;
margin: 0 !important;
line-height: 1.4 !important;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
-webkit-line-clamp: unset;
-webkit-box-orient: unset;
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content p br { display: none; }
/* Age gets a bold treatment */
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content p {
font-size: var(--sh-fs-sm) !important;
color: var(--sh-text-2) !important;
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content span[data-label="member-label"] {
color: var(--sh-text-muted) !important;
font-size: var(--sh-fs-xs);
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content .gender-Woman,
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content .gender-Man,
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content .gender-Couple {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 9px;
border-radius: var(--sh-radius-pill);
font-size: 11px;
font-weight: var(--sh-fw-semibold);
color: var(--sh-primary);
background: var(--sh-primary-100);
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content .gender-Woman {
color: var(--sh-accent-700);
background: var(--sh-accent-100);
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content .gender-Couple {
color: #8b5cf6;
background: #f3e8ff;
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content span[data-label="member-country"],
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content span[data-label="member-city"] {
color: var(--sh-text-muted);
width: 100%;
font-size: var(--sh-fs-xs);
display: inline-flex;
align-items: center;
gap: 4px;
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content span[data-label="member-country"]::before {
content: "\f041"; /* fa-map-marker */
font-family: "FontAwesome";
color: var(--sh-accent);
font-size: 10px;
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content span[data-label="member-city"] + span[data-label="member-country"]::before {
content: none; /* only one icon when both city + country exist */
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content span[data-label="member-city"]::before {
content: "\f041";
font-family: "FontAwesome";
color: var(--sh-accent);
font-size: 10px;
}
/* Status chip on photo: move to bottom-LEFT of photo, larger pill */
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .wpee-member-status-text {
top: auto !important;
bottom: 10px;
left: 10px;
font-size: 10px !important;
padding: 4px 10px !important;
}
/* Heart favorite — keep top-right, more visible */
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap::before {
width: 36px;
height: 36px;
opacity: 0.9;
transform: translateY(0);
background-color: rgba(255,255,255,0.95);
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap:hover::before {
opacity: 1;
transform: scale(1.08);
}
/* Age pill top-left of photo (replaces the old "photo count" position) */
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .img-holder::before {
content: attr(data-age); /* if template added it; fallback uses ::after on name below */
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
padding: 4px 10px;
background: rgba(26,26,46,0.6);
backdrop-filter: blur(6px);
color: #fff;
font-weight: var(--sh-fw-bold);
font-size: 11px;
border-radius: var(--sh-radius-pill);
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
pointer-events: none;
display: none; /* off until markup provides data-age */
}
/* Card outer shape */
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap {
overflow: hidden !important;
background: var(--sh-bg) !important;
border: 1px solid var(--sh-divider);
}
/* Make the photo aspect a bit more square (less tall) for compact grid */
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .img-holder {
aspect-ratio: 1 / 1;
}
/* Clean grid — 4 cols at 1280+, 3 at 992+, 2 at tablets, 2 at phones */
body:not(.wp-admin) .wpee-member-list-content .main-member-list-wrap {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
}
@media (min-width: 1280px) {
body:not(.wp-admin) .wpee-member-list-content .main-member-list-wrap {
grid-template-columns: repeat(4, 1fr) !important;
}
}
/* --- 3. Sidebar: Advanced Options divider + label ---------------------- */
@media (min-width: 993px) {
/* Label above the offcanvas-inline filters */
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .offcanvase-filter-title-wrap {
position: relative;
padding: 0 !important;
margin: var(--sh-space-2) 0 var(--sh-space-3) !important;
border: 0 !important;
background: transparent !important;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-sidebar-title {
font-size: var(--sh-fs-xs) !important;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--sh-text-muted) !important;
font-weight: var(--sh-fw-bold) !important;
margin: 0 !important;
padding-top: var(--sh-space-3);
border-top: 1px solid var(--sh-divider);
width: 100%;
display: flex;
align-items: center;
gap: 8px;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-sidebar-title::before {
content: "\f013"; /* fa-cog */
font-family: "FontAwesome";
color: var(--sh-accent);
font-size: 12px;
}
/* "Clear Filter" text link top-right of Advanced section */
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .filter-button-wrap {
position: absolute;
top: var(--sh-space-3);
right: 0;
}
}
/* --- 4. "Discover people" heading + result counter -------------------- */
body:not(.wp-admin) .wpee-member-list-content {
position: relative;
}
body:not(.wp-admin) .wpee-member-list-content::before {
content: "Discover people";
font-size: var(--sh-fs-xl);
font-weight: var(--sh-fw-bold);
color: var(--sh-text);
letter-spacing: -0.01em;
padding: 0 4px var(--sh-space-4);
display: block;
border-bottom: 2px solid var(--sh-divider);
margin-bottom: var(--sh-space-4);
position: relative;
}
body:not(.wp-admin) .wpee-member-list-content::after {
content: "";
position: absolute;
top: calc(var(--sh-fs-xl) + 2px);
left: 0;
width: 60px;
height: 3px;
background: var(--sh-accent);
border-radius: var(--sh-radius-pill);
}
/* --- 5. Apply button spacing in sidebar -------------------------------- */
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__actions {
margin-top: var(--sh-space-4);
}
/* --- 6. Icon heart filled style --- use fa-heart -------- */
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap::before {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap:hover::before {
background-image: url("data:image/svg+xml;utf8,");
background-color: #fff;
box-shadow: 0 4px 14px rgba(228,81,158,0.30);
}
/* ZONE_Z3_END */
/* ==========================================================================
ZONE Z4 — FIXES & POLISH
1. Real top space before the online strip
2. Remove "Couple" option from Gender/Seeking selects
3. Equal-height member cards in the grid
4. Location wrapping cleaned
5. Sidebar polish + distinct Advanced section
========================================================================== */
/* --- 1. Actual top breathing room (enforced) --------------------------- */
body:not(.wp-admin) .elementor-widget-wpee-member > .elementor-widget-container {
padding-top: 56px !important;
}
body:not(.wp-admin) .elementor-widget-wpee-member .wpee-member {
padding-top: 0 !important;
}
body:not(.wp-admin) .wpee-container.wpee-member-online-container {
margin-top: 0 !important;
padding-top: 0 !important;
}
body:not(.wp-admin) .wpee-online-members-inner--enhanced,
body:not(.wp-admin) .online-members-section--enhanced {
overflow: visible !important;
}
/* Ensure no ancestor clips online strip cards at top */
body:not(.wp-admin) .wpee-member,
body:not(.wp-admin) .wpee-member-wrapper,
body:not(.wp-admin) .col12.wpee-profile-online-row,
body:not(.wp-admin) .wpee-online-members-inner.wpee-block,
body:not(.wp-admin) .wpee-online-members-inner.wpee-block-content {
overflow: visible !important;
}
/* --- 2. Hide "Couple" option in Gender/Seeking selects --------------- */
body:not(.wp-admin) select#gender option[value="C"],
body:not(.wp-admin) select#seeking option[value="C"],
body:not(.wp-admin) .wpee-members-filter-field--gender select option[value="C"],
body:not(.wp-admin) .wpee-members-filter-field--seeking select option[value="C"] {
display: none !important;
}
/* Also hide gender-Couple pill if it ever renders in a card (defensive) */
body:not(.wp-admin) .gender-Couple { display: none !important; }
/* --- 3. Equal-height member cards ------------------------------------- */
body:not(.wp-admin) .wpee-member-list-content .main-member-list-wrap {
align-items: stretch !important;
row-gap: var(--sh-space-5) !important;
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap {
height: 100% !important;
align-self: stretch !important;
display: flex !important;
flex-direction: column !important;
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .img-holder {
flex: 0 0 auto !important;
}
/* User-details fills remaining space → all cards same total height */
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-details {
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 8px !important;
min-height: 110px !important;
padding: var(--sh-space-4) var(--sh-space-4) var(--sh-space-5) !important;
}
/* --- 4. Card location line: clean single-row layout ------------------ */
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content p {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 6px 8px !important;
margin: 0 !important;
line-height: 1.35 !important;
}
/* Age: bold, no wrap split */
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content p::first-letter,
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content p {
font-size: var(--sh-fs-sm) !important;
}
/* "year old" & "from" small muted */
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content span[data-label="member-label"] {
font-size: 11px !important;
color: var(--sh-text-muted) !important;
}
/* City + country: own row at bottom, ellipsis if too long */
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content span[data-label="member-city"],
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content span[data-label="member-country"] {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
font-size: var(--sh-fs-xs) !important;
color: var(--sh-text-muted) !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* Force city + country combined on a single bottom line */
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content span[data-label="member-city"] {
flex: 1 1 100%;
max-width: 100%;
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content span[data-label="member-city"] + span[data-label="member-country"] {
display: none !important; /* city already contains ", Country" inline via , — avoid duplicate */
}
/* When there's only country (no city), country takes full row with icon */
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content p > span[data-label="member-country"]:only-of-type {
flex: 1 1 100%;
max-width: 100%;
}
/* Hide the inline comma-wrapper span inside city span (design cleanup) */
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content span[data-label="member-city"] > span {
color: var(--sh-text-muted);
margin: 0 4px 0 0;
}
/* --- 5. Sidebar: polish + Advanced section prominence ---------------- */
@media (min-width: 993px) {
/* Quick filter section (top) */
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter > form {
padding: var(--sh-space-6) var(--sh-space-5) !important;
gap: var(--sh-space-5) !important;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__title {
font-size: var(--sh-fs-lg) !important;
padding-bottom: var(--sh-space-2);
border-bottom: 1px solid var(--sh-divider);
margin-bottom: var(--sh-space-3) !important;
}
/* Tighten field labels */
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-label {
font-size: 11px !important;
margin-bottom: 6px !important;
display: block;
}
/* Apply button: big pink full-width */
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__actions {
padding: 0 !important;
border-top: 0 !important;
margin-top: var(--sh-space-2) !important;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-toolbar-apply {
width: 100% !important;
padding: 14px 20px !important;
font-size: var(--sh-fs-md) !important;
letter-spacing: 0.01em;
}
/* Advanced section header — distinct block */
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .offcanvase-filter-title-wrap {
position: relative;
padding: var(--sh-space-3) var(--sh-space-4) !important;
margin: var(--sh-space-3) calc(-1 * var(--sh-space-5)) 0 !important;
background: var(--sh-primary-50) !important;
border-top: 1px solid var(--sh-divider);
border-bottom: 1px solid var(--sh-divider);
border-radius: 0 !important;
display: flex !important;
align-items: center;
justify-content: space-between;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-sidebar-title {
padding: 0 !important;
border: 0 !important;
font-size: 12px !important;
font-weight: var(--sh-fw-bold) !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: var(--sh-primary-700) !important;
display: inline-flex !important;
align-items: center;
gap: 8px;
width: auto !important;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-sidebar-title::before {
content: "\f0b0" !important; /* fa-filter */
font-family: "FontAwesome";
color: var(--sh-accent);
font-size: 14px;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .filter-button-wrap {
position: static !important;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .filter-button-wrap .wpee-filter-reset {
padding: 4px 12px !important;
border: 1px solid var(--sh-accent-100);
background: var(--sh-bg);
font-size: 11px !important;
}
/* Advanced fields: tighter spacing, with field count badge */
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-field-group {
padding: var(--sh-space-4) 0 0 !important;
gap: var(--sh-space-3) !important;
margin-top: var(--sh-space-2);
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-field-group .form-group label {
font-size: 11px !important;
font-weight: var(--sh-fw-semibold) !important;
color: var(--sh-text-muted) !important;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 6px !important;
display: block;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .wpee-members-offcanvas-search {
order: -1; /* username search floats to top of advanced */
}
}
/* --- 6. Defensive: extreme label-size reset to match spec -------------- */
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__title {
font-size: var(--sh-fs-md) !important;
margin: 0 0 var(--sh-space-3) !important;
}
/* --- 7. Result count inline with heading (visual) --------------------- */
body:not(.wp-admin) .wpee-member-list-content::before {
display: flex;
align-items: baseline;
gap: var(--sh-space-3);
}
/* ZONE_Z4_END */
/* ==========================================================================
ZONE Z5 — ONLINE STRIP REBUILD + SIDEBAR REWRITE
Full override of prior online-strip and sidebar styles. Strong specificity.
========================================================================== */
/* =========================================================
A. ONLINE STRIP — polished section with title + cards
========================================================= */
/* Section wrapper spacing */
body:not(.wp-admin) .wpee-container.wpee-member-online-container {
margin-top: var(--sh-space-5) !important;
margin-bottom: var(--sh-space-6) !important;
}
/* Outer card (title + strip) */
body:not(.wp-admin) .wpee-online-members-inner.wpee-block.wpee-online-members-inner--enhanced {
position: relative;
background: var(--sh-bg) !important;
border: 1px solid var(--sh-divider) !important;
border-radius: var(--sh-radius-xl) !important;
padding: var(--sh-space-5) var(--sh-space-5) var(--sh-space-4) !important;
box-shadow: var(--sh-shadow-1) !important;
margin: 0 !important;
overflow: visible !important;
}
/* Auto-generated section title */
body:not(.wp-admin) .wpee-online-members-inner--enhanced::before {
content: "Who's online now";
display: flex;
align-items: center;
gap: 10px;
font-size: var(--sh-fs-md);
font-weight: var(--sh-fw-bold);
color: var(--sh-text);
letter-spacing: -0.01em;
margin-bottom: var(--sh-space-4);
}
body:not(.wp-admin) .wpee-online-members-inner--enhanced::before::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--sh-success);
box-shadow: 0 0 8px rgba(34,197,94,0.6);
}
/* Scroll row */
body:not(.wp-admin) .online-members-section.online-members-section--enhanced {
display: flex !important;
gap: 12px !important;
overflow-x: auto !important;
overflow-y: visible !important;
list-style: none !important;
margin: 0 !important;
padding: 4px 0 8px !important;
scrollbar-width: thin;
scrollbar-color: var(--sh-border-strong) transparent;
scroll-snap-type: x proximity;
}
body:not(.wp-admin) .online-members-section.online-members-section--enhanced::-webkit-scrollbar {
height: 6px;
}
body:not(.wp-admin) .online-members-section.online-members-section--enhanced::-webkit-scrollbar-track {
background: transparent;
}
body:not(.wp-admin) .online-members-section.online-members-section--enhanced::-webkit-scrollbar-thumb {
background: var(--sh-border-strong);
border-radius: var(--sh-radius-pill);
}
/* Each online card */
body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-card {
flex: 0 0 auto !important;
scroll-snap-align: start;
list-style: none !important;
width: 110px !important;
padding: 0 !important;
margin: 0 !important;
}
body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-card > a {
display: block;
text-decoration: none !important;
color: inherit;
border-radius: var(--sh-radius-lg);
transition: var(--sh-transition-default);
}
body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-card:hover > a {
transform: translateY(-3px);
}
body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-link-inner {
position: relative;
width: 110px !important;
height: 140px !important;
border-radius: var(--sh-radius-lg) !important;
overflow: hidden !important;
background: var(--sh-bg-soft);
border: 2px solid transparent;
box-shadow: var(--sh-shadow-1);
transition: var(--sh-transition-default);
}
body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-card:hover .wpee-online-member-link-inner {
border-color: var(--sh-accent);
box-shadow: 0 8px 20px rgba(228,81,158,0.25);
}
/* Photo */
body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-photo {
width: 100% !important;
height: 100% !important;
background-size: cover !important;
background-position: center !important;
background-color: var(--sh-bg-soft);
}
body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-photo::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 45%;
background: linear-gradient(180deg, transparent 0%, rgba(26,26,46,0.65) 100%);
pointer-events: none;
z-index: 1;
}
body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-photo--placeholder {
background-size: 55% !important;
background-repeat: no-repeat !important;
background-position: center 45% !important;
opacity: 0.7;
}
/* Green online dot top-right */
body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-link-inner::after {
content: "";
position: absolute;
top: 8px;
right: 8px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--sh-success);
border: 2px solid #fff;
box-shadow: 0 0 0 2px rgba(34,197,94,0.25), 0 0 8px rgba(34,197,94,0.6);
z-index: 3;
animation: sh-pulse-green 2s ease-in-out infinite;
}
/* Badges row at bottom of photo */
body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-badges {
position: absolute !important;
left: 6px !important;
right: 6px !important;
bottom: 6px !important;
display: flex !important;
justify-content: space-between !important;
align-items: flex-end !important;
gap: 4px !important;
z-index: 2;
}
body:not(.wp-admin) .online-members-section--enhanced .wpee-online-badge {
display: inline-flex !important;
align-items: center !important;
gap: 3px !important;
padding: 3px 7px !important;
background: rgba(255,255,255,0.94) !important;
color: var(--sh-text) !important;
font-size: 10px !important;
font-weight: var(--sh-fw-bold) !important;
line-height: 1 !important;
border-radius: var(--sh-radius-pill) !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
backdrop-filter: blur(4px);
}
body:not(.wp-admin) .online-members-section--enhanced .wpee-online-badge__icon {
width: 9px !important;
height: 9px !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
}
/* Hide "photos" badge — user wants cleaner look */
body:not(.wp-admin) .online-members-section--enhanced .wpee-online-badge--photos {
display: none !important;
}
/* =========================================================
B. SIDEBAR — complete rewrite
========================================================= */
/* Force sidebar column + main column grid regardless of old rules */
@media (min-width: 993px) {
body:not(.wp-admin) .wpee-member-wrapper {
display: grid !important;
grid-template-columns: 300px minmax(0, 1fr) !important;
gap: var(--sh-space-5) !important;
align-items: start !important;
}
}
/* Sidebar container */
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter {
position: sticky !important;
top: 90px !important;
align-self: start;
max-height: calc(100vh - 110px);
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter > form#member-ajax-filter {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
background: var(--sh-bg) !important;
border: 1px solid var(--sh-divider) !important;
border-radius: var(--sh-radius-2xl) !important;
box-shadow: var(--sh-shadow-1) !important;
padding: 0 !important;
overflow-y: auto !important;
max-height: 100%;
}
/* Sidebar top block: Filters heading bar */
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: var(--sh-space-5) var(--sh-space-5) var(--sh-space-4) !important;
margin: 0 !important;
display: block !important;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__title {
font-size: var(--sh-fs-lg) !important;
font-weight: var(--sh-fw-bold) !important;
color: var(--sh-text) !important;
letter-spacing: -0.01em;
margin: 0 0 var(--sh-space-4) !important;
padding-bottom: var(--sh-space-3) !important;
border-bottom: 1px solid var(--sh-divider) !important;
display: flex !important;
align-items: center;
gap: 10px;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__title::before {
content: "\f002"; /* fa-search */
font-family: "FontAwesome";
color: var(--sh-accent);
font-size: 14px;
background: var(--sh-accent-100);
width: 30px;
height: 30px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__row {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__fields {
display: flex !important;
flex-direction: column !important;
gap: var(--sh-space-4) !important;
width: 100%;
margin: 0 !important;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-field {
display: flex !important;
flex-direction: column;
gap: 6px;
width: 100%;
min-width: 0;
margin: 0;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-label {
font-size: 11px !important;
font-weight: var(--sh-fw-bold) !important;
color: var(--sh-text-muted) !important;
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 !important;
display: block !important;
}
/* All selects in sidebar — unified */
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter select,
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter .dspdp-form-control {
width: 100% !important;
min-height: 44px !important;
padding: 10px 40px 10px 14px !important;
border: 1.5px solid var(--sh-border) !important;
border-radius: var(--sh-radius-md) !important;
background: var(--sh-bg) url("data:image/svg+xml;utf8,") no-repeat right 14px center !important;
color: var(--sh-text) !important;
font-size: var(--sh-fs-sm) !important;
font-weight: var(--sh-fw-medium);
appearance: none !important;
-webkit-appearance: none !important;
transition: var(--sh-transition-default);
box-shadow: none !important;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter select:hover,
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter .dspdp-form-control:hover {
border-color: var(--sh-border-strong) !important;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter select:focus,
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter .dspdp-form-control:focus {
border-color: var(--sh-accent) !important;
box-shadow: 0 0 0 4px var(--sh-accent-100) !important;
outline: none !important;
}
/* Age From/To — side by side with minus separator */
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-age-selects {
display: grid !important;
grid-template-columns: 1fr 20px 1fr !important;
align-items: center;
gap: 8px !important;
position: relative;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-age-selects::after {
content: "–";
position: absolute;
left: calc(50% - 4px);
top: 50%;
transform: translateY(-50%);
color: var(--sh-text-muted);
font-size: 16px;
font-weight: bold;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-age-selects select:first-child {
grid-column: 1 / 2;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-age-selects select:last-child {
grid-column: 3 / 4;
}
/* Apply button block */
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__actions {
padding: var(--sh-space-4) var(--sh-space-5) !important;
margin: 0 !important;
border-top: 1px solid var(--sh-divider) !important;
background: var(--sh-bg-soft);
display: flex !important;
gap: var(--sh-space-2) !important;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-toolbar-apply {
flex: 1 !important;
width: auto !important;
padding: 13px 20px !important;
font-size: var(--sh-fs-md) !important;
font-weight: var(--sh-fw-bold) !important;
letter-spacing: 0.02em;
border-radius: var(--sh-radius-pill) !important;
background: var(--sh-accent) !important;
color: #fff !important;
border: 0 !important;
box-shadow: 0 8px 22px rgba(228, 81, 158, 0.30) !important;
cursor: pointer;
transition: var(--sh-transition-default);
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-toolbar-apply:hover {
background: var(--sh-accent-600) !important;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(228, 81, 158, 0.38) !important;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__actions .trigger-filter-icon {
display: none !important;
}
/* =========================================================
C. ADVANCED SECTION — prominent collapsible-style card
========================================================= */
/* Wrapper shown inline on desktop */
@media (min-width: 993px) {
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap {
position: static !important;
opacity: 1 !important;
visibility: visible !important;
transition: none !important;
background: transparent !important;
display: block !important;
width: 100% !important;
max-height: none !important;
z-index: auto !important;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .filter-close {
display: none !important;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .close-filter {
display: none !important;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .offcanvase-filter-content-wrap {
display: block !important;
position: static !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
width: 100% !important;
height: auto !important;
max-height: none !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
overflow: visible !important;
}
}
/* Advanced header (the title bar) */
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .offcanvase-filter-title-wrap {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: var(--sh-space-4) var(--sh-space-5) !important;
margin: 0 !important;
background: linear-gradient(135deg, var(--sh-primary-50) 0%, var(--sh-soft) 100%) !important;
border-top: 1px solid var(--sh-divider) !important;
border-bottom: 1px solid var(--sh-divider) !important;
border-radius: 0 !important;
position: relative !important;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-sidebar-title {
font-size: 12px !important;
font-weight: var(--sh-fw-bold) !important;
color: var(--sh-primary-700) !important;
text-transform: uppercase !important;
letter-spacing: 0.12em !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
width: auto !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-sidebar-title::before {
content: "\f0b0" !important; /* fa-filter */
font-family: "FontAwesome" !important;
color: var(--sh-accent) !important;
font-size: 14px !important;
display: inline-block !important;
}
/* Replace legacy title "Filter" with "Advanced" override via ::after content */
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-sidebar-title {
font-size: 0 !important; /* hide original text */
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-sidebar-title::after {
content: "Advanced Filters";
font-size: 12px !important;
letter-spacing: 0.12em !important;
font-weight: var(--sh-fw-bold) !important;
color: var(--sh-primary-700) !important;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .filter-button-wrap {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
position: static !important;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .filter-button-wrap .wpee-filter-reset {
padding: 5px 12px !important;
border-radius: var(--sh-radius-pill) !important;
color: var(--sh-accent) !important;
background: var(--sh-bg) !important;
border: 1px solid var(--sh-accent-100) !important;
font-size: 11px !important;
font-weight: var(--sh-fw-semibold) !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px;
transition: var(--sh-transition-default);
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .filter-button-wrap .wpee-filter-reset::before {
content: "\f021"; /* fa-refresh */
font-family: "FontAwesome";
font-size: 10px;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .filter-button-wrap .wpee-filter-reset:hover {
background: var(--sh-accent-100) !important;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .filter-button-wrap input[type="submit"] {
display: none !important;
}
/* Advanced fields content */
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-field-group {
padding: var(--sh-space-5) !important;
display: flex !important;
flex-direction: column !important;
gap: var(--sh-space-4) !important;
background: var(--sh-bg);
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-field-group .form-group {
margin: 0 !important;
padding: 0 !important;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-field-group .form-group label {
display: block !important;
font-size: 11px !important;
font-weight: var(--sh-fw-bold) !important;
color: var(--sh-text-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
margin: 0 0 6px !important;
padding: 0 !important;
}
/* Username search — at top of advanced with search icon */
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .wpee-members-offcanvas-search {
order: -1 !important;
margin: 0 !important;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .wpee-members-offcanvas-search label {
display: block !important;
font-size: 11px !important;
font-weight: var(--sh-fw-bold) !important;
color: var(--sh-text-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
margin: 0 0 6px !important;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .wpee-members-offcanvas-search .username-filter,
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .wpee-members-offcanvas-search input[type="text"] {
width: 100% !important;
min-height: 44px !important;
padding: 10px 14px 10px 40px !important;
border: 1.5px solid var(--sh-border) !important;
border-radius: var(--sh-radius-md) !important;
background: var(--sh-bg) url("data:image/svg+xml;utf8,") no-repeat 14px center !important;
font-size: var(--sh-fs-sm) !important;
color: var(--sh-text);
box-shadow: none !important;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .wpee-members-offcanvas-search input[type="text"]:focus {
border-color: var(--sh-accent) !important;
box-shadow: 0 0 0 4px var(--sh-accent-100) !important;
outline: none !important;
}
/* State / City selects inherit general sidebar select styles via earlier rules,
but enforce via specificity: */
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap select.dspdp-form-control,
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap select {
width: 100% !important;
min-height: 44px !important;
padding: 10px 40px 10px 14px !important;
border: 1.5px solid var(--sh-border) !important;
border-radius: var(--sh-radius-md) !important;
background: var(--sh-bg) url("data:image/svg+xml;utf8,") no-repeat right 14px center !important;
font-size: var(--sh-fs-sm) !important;
color: var(--sh-text) !important;
appearance: none !important;
-webkit-appearance: none !important;
}
/* =========================================================
D. MOBILE: restore offcanvas behavior + Filters trigger
========================================================= */
@media (max-width: 992px) {
body:not(.wp-admin) .wpee-member-wrapper {
display: flex !important;
flex-direction: column !important;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter {
position: static !important;
max-height: none !important;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__actions .trigger-filter-icon {
display: inline-flex !important;
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
padding: 0 !important;
border-radius: var(--sh-radius-circle) !important;
background: var(--sh-bg) !important;
border: 1.5px solid var(--sh-border) !important;
color: var(--sh-accent) !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap {
/* Keep legacy slide-in behavior on mobile */
}
}
/* =========================================================
E. Make online strip title pseudo-element stack properly
========================================================= */
body:not(.wp-admin) .wpee-online-members-inner.wpee-block-content {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
overflow: visible !important;
}
/* ZONE_Z5_END */
/* ==========================================================================
ZONE Z6 — SIDEBAR OVERFLOW FIX + ONLINE STRIP CLEAN-UP + NEW ADVANCED UI
========================================================================== */
/* --- 1. Kill horizontal scrollbar in sidebar ---------------------------- */
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter > form#member-ajax-filter,
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar,
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__row,
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__fields,
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-field,
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap,
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .offcanvase-filter-content-wrap,
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-field-group,
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-group {
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter > form#member-ajax-filter {
overflow-x: hidden !important;
}
/* Safe age-select grid (2 cells + dash between) */
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-age-selects {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
gap: 10px !important;
position: relative;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-age-selects::after {
content: "–";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: var(--sh-text-muted);
font-size: 14px;
pointer-events: none;
background: var(--sh-bg);
width: 16px;
text-align: center;
line-height: 1;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-age-selects select {
min-width: 0 !important;
max-width: 100% !important;
}
/* --- 2. Online strip clean-up: no dark overlay, no fake online dot ----- */
body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-photo::after {
content: none !important; /* remove dark gradient */
}
body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-link-inner::after {
content: none !important; /* remove fake green pulsing dot */
}
/* Make age-badge sit at bottom-left cleanly (no overlay beneath) */
body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-badges {
left: 6px !important;
right: auto !important;
bottom: 6px !important;
justify-content: flex-start !important;
}
body:not(.wp-admin) .online-members-section--enhanced .wpee-online-badge {
background: rgba(255,255,255,0.92) !important;
color: var(--sh-text) !important;
}
/* Section title tweak: no green dot (misleading) */
body:not(.wp-admin) .wpee-online-members-inner--enhanced::before {
content: "Recent members" !important; /* more honest label */
}
/* --- 3. Extra advanced filters (injected via JS) + sort select -------- */
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .sh-advanced-extras {
display: flex;
flex-direction: column;
gap: 10px;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .sh-advanced-extras > label:first-child {
display: block !important;
font-size: 11px !important;
font-weight: var(--sh-fw-bold) !important;
color: var(--sh-text-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
margin-bottom: 6px !important;
}
/* Toggle switch (label.sh-toggle > input + track + label) */
body:not(.wp-admin) .sh-toggle {
display: flex !important;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: var(--sh-bg-soft);
border: 1px solid var(--sh-divider);
border-radius: var(--sh-radius-md);
cursor: pointer;
transition: var(--sh-transition-default);
margin: 0 !important;
text-transform: none !important;
letter-spacing: normal !important;
font-size: var(--sh-fs-sm) !important;
color: var(--sh-text) !important;
font-weight: var(--sh-fw-medium) !important;
user-select: none;
}
body:not(.wp-admin) .sh-toggle:hover {
border-color: var(--sh-accent-200);
background: var(--sh-accent-50);
}
body:not(.wp-admin) .sh-toggle input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
body:not(.wp-admin) .sh-toggle__track {
position: relative;
flex: 0 0 auto;
width: 36px;
height: 20px;
background: var(--sh-border-strong);
border-radius: var(--sh-radius-pill);
transition: background-color var(--sh-duration) var(--sh-ease);
}
body:not(.wp-admin) .sh-toggle__track::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: #fff;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
transition: transform var(--sh-duration) var(--sh-ease-spring);
}
body:not(.wp-admin) .sh-toggle input[type="checkbox"]:checked ~ .sh-toggle__track {
background: var(--sh-accent);
}
body:not(.wp-admin) .sh-toggle input[type="checkbox"]:checked ~ .sh-toggle__track::after {
transform: translateX(16px);
}
body:not(.wp-admin) .sh-toggle__label {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
}
body:not(.wp-admin) .sh-toggle__icon {
color: var(--sh-accent);
font-size: 13px;
}
/* Sort select */
body:not(.wp-admin) .sh-sort-group {
display: flex;
flex-direction: column;
gap: 6px;
}
body:not(.wp-admin) .sh-sort-group > label {
display: block !important;
font-size: 11px !important;
font-weight: var(--sh-fw-bold) !important;
color: var(--sh-text-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
}
/* Divider between existing advanced (State/City) and new toggles */
body:not(.wp-admin) .sh-advanced-divider {
height: 1px;
background: var(--sh-divider);
margin: 4px 0;
}
/* ZONE_Z6_END */
/* ==========================================================================
ZONE Z7 — FINAL SIDEBAR VISIBILITY FIX + POPULAR LABEL + HIDE SELF
========================================================================== */
/* --- A. Sidebar: NO internal scroll. Let page scroll naturally. ---------
The Advanced block was invisible because form had overflow-y:auto with
max-height = 100%, and sticky parent clipped the overflowing block to
viewport-minus-header. Remove these constraints entirely. */
@media (min-width: 993px) {
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter {
position: sticky !important;
top: 80px !important;
align-self: start !important;
max-height: none !important;
overflow: visible !important;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter > form#member-ajax-filter {
max-height: none !important;
overflow-y: visible !important;
overflow-x: hidden !important;
}
}
/* --- B. Sledgehammer visibility on Advanced block --------------------- */
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap,
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .offcanvase-filter-content-wrap,
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .offcanvase-filter-title-wrap,
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-field-group,
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-group,
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .wpee-members-offcanvas-search,
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .sh-advanced-extras,
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .sh-advanced-divider {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: none !important;
transition: none !important;
}
/* Solid white background on advanced content area (don't show cards through) */
@media (min-width: 993px) {
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap,
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .offcanvase-filter-content-wrap {
background: var(--sh-bg) !important;
position: static !important;
display: block !important;
width: 100% !important;
height: auto !important;
max-height: none !important;
z-index: auto !important;
inset: auto !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
}
/* Remove any pseudo-element dark overlay that legacy might add */
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap::before,
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap::after {
content: none !important;
}
/* Filter close overlay on desktop (kill it completely) */
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .filter-close {
display: none !important;
position: static !important;
opacity: 0 !important;
pointer-events: none !important;
}
}
/* --- C. Online strip: rename title + hide self (placeholder photo) ---- */
body:not(.wp-admin) .wpee-online-members-inner--enhanced::before {
content: "Popular members" !important;
}
/* Hide any card whose photo is the default placeholder (typically current user) */
body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-card:has(.wpee-online-member-photo--placeholder) {
display: none !important;
}
/* Fallback: hide first card if :has() isn't supported and it still appears first */
body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-card:first-child .wpee-online-member-photo--placeholder {
/* If browser doesn't support :has(), at least mark this card muted */
}
/* --- D. Sidebar total width guard: nothing overflows 300px ------------ */
@media (min-width: 993px) {
body:not(.wp-admin) .wpee-member-wrapper > .wpee-ajax-filter {
width: 300px !important;
max-width: 300px !important;
min-width: 0 !important;
box-sizing: border-box;
}
}
/* ZONE_Z7_END */
/* ==========================================================================
ZONE Z8 — Popular strip padding + hover tooltip + unified sidebar
========================================================================== */
/* --- A. Popular members strip: balanced padding + centered look -------- */
body:not(.wp-admin) .wpee-online-members-inner.wpee-block.wpee-online-members-inner--enhanced {
padding: var(--sh-space-4) var(--sh-space-6) !important;
}
body:not(.wp-admin) .wpee-online-members-inner--enhanced::before {
margin-bottom: var(--sh-space-3) !important;
padding-left: 2px;
font-size: var(--sh-fs-md) !important;
}
body:not(.wp-admin) .online-members-section.online-members-section--enhanced {
padding: 6px 2px 8px !important;
gap: 14px !important;
}
/* Card lifts on hover — make sure not clipped by container */
body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-card > a {
will-change: transform;
transform-origin: center bottom;
}
body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-card:hover > a {
transform: translateY(-6px);
}
/* --- B. Hover tooltip (appended to body via JS, fixed positioning) ---- */
#sh-strip-tooltip.sh-strip-tooltip {
position: fixed;
z-index: 9999;
background: #fff;
border-radius: 14px;
padding: 12px 18px;
box-shadow: 0 12px 32px rgba(26, 26, 46, 0.18),
0 2px 6px rgba(26, 26, 46, 0.06);
min-width: 170px;
max-width: 280px;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity 180ms var(--sh-ease-out),
transform 200ms var(--sh-ease-spring);
transform: translateY(4px);
font-family: inherit;
line-height: 1.3;
}
#sh-strip-tooltip.sh-strip-tooltip[style*="opacity: 1"] {
transform: translateY(0);
}
/* Arrow pointing DOWN (tooltip above card) */
#sh-strip-tooltip.sh-strip-tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 8px solid transparent;
border-top-color: #fff;
filter: drop-shadow(0 2px 2px rgba(0,0,0,0.06));
}
/* Arrow pointing UP (tooltip below card — when no room above) */
#sh-strip-tooltip.sh-strip-tooltip--below::after {
top: auto;
bottom: 100%;
border-top-color: transparent;
border-bottom-color: #fff;
filter: drop-shadow(0 -2px 2px rgba(0,0,0,0.06));
}
#sh-strip-tooltip .sh-strip-tooltip__name {
font-size: 17px;
font-weight: 700;
color: #1a1a2e;
letter-spacing: -0.01em;
margin: 0 0 4px;
line-height: 1.2;
}
#sh-strip-tooltip .sh-strip-tooltip__meta {
font-size: 12px;
color: #6b6b80;
display: flex;
align-items: center;
gap: 5px;
margin: 0;
flex-wrap: wrap;
}
#sh-strip-tooltip .sh-strip-tooltip__sep {
color: #d8d8e0;
margin: 0 2px;
}
#sh-strip-tooltip .sh-strip-tooltip__meta svg {
flex-shrink: 0;
}
/* --- C. UNIFIED SIDEBAR (matches new JS restructure) ------------------- */
/* Hide the Advanced Filters title bar + Clear Filter button (user removed) */
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-title-wrap {
display: none !important;
}
/* Search Members at the very top of the form */
@media (min-width: 993px) {
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter > form#member-ajax-filter > .wpee-members-offcanvas-search,
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-offcanvas-search:first-child {
padding: var(--sh-space-5) var(--sh-space-5) 0 !important;
margin: 0 !important;
border-top-left-radius: var(--sh-radius-2xl);
border-top-right-radius: var(--sh-radius-2xl);
background: var(--sh-bg) !important;
}
/* Remove double-margin on form content-wrap when search moved out */
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap {
margin-top: 0 !important;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .offcanvase-filter-content-wrap {
padding: 0 !important;
}
/* Form field group (advanced fields including injected demographics) */
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-field-group {
padding: 0 var(--sh-space-5) var(--sh-space-4) !important;
display: flex !important;
flex-direction: column !important;
gap: var(--sh-space-4) !important;
background: var(--sh-bg) !important;
}
}
/* Demographic field styling (same as rest of sidebar selects) */
body:not(.wp-admin) .wpee-member-wrapper .sh-demographic-field {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
margin: 0 !important;
}
body:not(.wp-admin) .wpee-member-wrapper .sh-demographic-field > label {
display: block !important;
font-size: 11px !important;
font-weight: var(--sh-fw-bold) !important;
color: var(--sh-text-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
margin: 0 !important;
padding: 0 !important;
}
body:not(.wp-admin) .wpee-member-wrapper .sh-demographic-field select {
width: 100% !important;
min-height: 44px !important;
padding: 10px 40px 10px 14px !important;
border: 1.5px solid var(--sh-border) !important;
border-radius: var(--sh-radius-md) !important;
background: var(--sh-bg) url("data:image/svg+xml;utf8,") no-repeat right 14px center !important;
color: var(--sh-text) !important;
font-size: var(--sh-fs-sm) !important;
appearance: none !important;
-webkit-appearance: none !important;
transition: var(--sh-transition-default);
}
body:not(.wp-admin) .wpee-member-wrapper .sh-demographic-field select:focus {
border-color: var(--sh-accent) !important;
box-shadow: 0 0 0 4px var(--sh-accent-100) !important;
outline: none !important;
}
/* Apply button row moved to bottom of form by JS — style consistently */
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter > form > .wpee-members-filter-toolbar__actions {
padding: var(--sh-space-4) var(--sh-space-5) var(--sh-space-5) !important;
margin: 0 !important;
border-top: 1px solid var(--sh-divider) !important;
background: var(--sh-bg-soft) !important;
border-bottom-left-radius: var(--sh-radius-2xl);
border-bottom-right-radius: var(--sh-radius-2xl);
display: flex !important;
gap: var(--sh-space-2);
}
/* Reset residual bottom margin on toolbar now that Apply is elsewhere */
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar {
padding-bottom: var(--sh-space-4) !important;
}
/* Remove injected Sort group + toggles CSS side-effects (elements no longer injected) */
body:not(.wp-admin) .sh-advanced-extras,
body:not(.wp-admin) .sh-sort-group,
body:not(.wp-admin) .sh-toggles-group,
body:not(.wp-admin) .sh-toggle,
body:not(.wp-admin) .sh-advanced-divider {
display: none !important;
}
/* --- D. Make sidebar card rounded top-to-bottom without visible breaks - */
@media (min-width: 993px) {
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter > form#member-ajax-filter {
padding: 0 !important;
gap: 0 !important;
border-radius: var(--sh-radius-2xl) !important;
overflow: hidden !important;
}
}
/* ZONE_Z8_END */
/* ==========================================================================
ZONE Z9 — Strip padding alignment + compact 2-col demographics
========================================================================== */
/* --- A. Popular members strip: breathing room inside + aligned edges ---- */
body:not(.wp-admin) .wpee-online-members-inner.wpee-block.wpee-online-members-inner--enhanced {
padding: var(--sh-space-5) var(--sh-space-7) !important; /* 20px vertical / 28px horizontal */
}
body:not(.wp-admin) .online-members-section.online-members-section--enhanced {
padding: 8px 2px !important;
gap: 14px !important;
}
/* Make strip card match width of content below (container handles that) */
body:not(.wp-admin) .elementor-widget-wpee-member > .elementor-widget-container {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* --- B. Sidebar: compact demographics grid (2 cols for short selects) -- */
/* Full-width demographic fields (Seeking, Marital status) */
body:not(.wp-admin) .wpee-member-wrapper .sh-demographic-field--full {
/* default single-column behavior */
}
/* 2-column grid for compact pair fields (Body/Height/Children/Religion/Smoker/Drink) */
body:not(.wp-admin) .wpee-member-wrapper .sh-demographic-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: var(--sh-space-3) !important;
width: 100%;
}
body:not(.wp-admin) .wpee-member-wrapper .sh-demographic-grid .sh-demographic-field {
min-width: 0 !important;
margin: 0 !important;
}
/* Compact select height for demographics (40px vs 44px main) */
body:not(.wp-admin) .wpee-member-wrapper .sh-demographic-field select {
min-height: 40px !important;
padding: 8px 34px 8px 12px !important;
font-size: var(--sh-fs-xs) !important;
background-position: right 10px center !important;
}
body:not(.wp-admin) .wpee-member-wrapper .sh-demographic-field > label {
font-size: 10px !important;
letter-spacing: 0.06em !important;
margin: 0 0 4px !important;
}
/* Tighten offcanvas field group spacing (advanced fields) */
@media (min-width: 993px) {
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-field-group {
gap: var(--sh-space-3) !important;
padding: var(--sh-space-4) var(--sh-space-5) var(--sh-space-4) !important;
}
/* State + City also compact in same 2-col as other pairs */
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-field-group > .form-group:not(.sh-demographic-field) {
margin: 0;
}
/* Adjust State+City → put them side by side visually */
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-field-group > .form-group:has(#cmbState),
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-field-group > .form-group:has(#cmbCity) {
width: calc(50% - var(--sh-space-3) / 2);
display: inline-block;
}
/* Actually use flex-wrap on group to get 2-col State/City */
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-field-group {
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: flex-start;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-field-group > .form-group {
flex: 1 1 calc(50% - var(--sh-space-3) / 2);
min-width: 0;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-field-group > .sh-demographic-field--full,
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-field-group > .sh-demographic-grid,
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-field-group > .form-hidden-data {
flex: 1 1 100%;
}
/* State+City selects compact like demographics */
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-field-group > .form-group:not(.sh-demographic-field) > label {
font-size: 10px !important;
letter-spacing: 0.06em !important;
margin: 0 0 4px !important;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-field-group > .form-group:not(.sh-demographic-field) select {
min-height: 40px !important;
padding: 8px 34px 8px 12px !important;
font-size: var(--sh-fs-xs) !important;
background-position: right 10px center !important;
}
}
/* Search Members: more compact */
@media (min-width: 993px) {
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter > form#member-ajax-filter > .wpee-members-offcanvas-search,
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-offcanvas-search:first-child {
padding: var(--sh-space-4) var(--sh-space-5) 0 !important;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .wpee-members-offcanvas-search label,
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-offcanvas-search label {
font-size: 10px !important;
letter-spacing: 0.06em !important;
margin-bottom: 4px !important;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-offcanvas-search input[type="text"] {
min-height: 40px !important;
padding: 8px 14px 8px 36px !important;
font-size: var(--sh-fs-xs) !important;
}
}
/* Top "I am looking for" section: a bit tighter too */
@media (min-width: 993px) {
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar {
padding: var(--sh-space-4) var(--sh-space-5) !important;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__title {
font-size: var(--sh-fs-md) !important;
margin-bottom: var(--sh-space-3) !important;
padding-bottom: var(--sh-space-2) !important;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__fields {
gap: var(--sh-space-3) !important;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-label {
font-size: 10px !important;
letter-spacing: 0.06em !important;
margin-bottom: 4px !important;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter select,
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter .dspdp-form-control {
min-height: 40px !important;
padding: 8px 34px 8px 12px !important;
font-size: var(--sh-fs-xs) !important;
background-position: right 10px center !important;
}
/* Apply button slightly smaller */
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter > form > .wpee-members-filter-toolbar__actions {
padding: var(--sh-space-4) var(--sh-space-5) !important;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-toolbar-apply {
padding: 11px 20px !important;
font-size: var(--sh-fs-sm) !important;
}
}
/* Age dash adjustment for smaller selects */
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-age-selects::after {
font-size: 13px !important;
}
/* Subtle divider between main filter and advanced section */
@media (min-width: 993px) {
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap {
border-top: 1px solid var(--sh-divider) !important;
}
}
/* ZONE_Z9_END */
/* ==========================================================================
ZONE Z10 — Strip hover polish + compact padding + Sidebar sections
========================================================================== */
/* --- A. Strip hover: remove pink border, just lift + soft shadow ------- */
body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-link-inner {
border: 0 !important;
box-shadow: 0 2px 8px rgba(26,26,46,0.08) !important;
transition: transform 220ms var(--sh-ease-out), box-shadow 220ms var(--sh-ease) !important;
}
body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-card:hover .wpee-online-member-link-inner {
border: 0 !important;
box-shadow: 0 14px 30px rgba(26,26,46,0.16) !important;
}
body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-card:hover > a {
transform: translateY(-5px) !important;
}
/* --- B. Tighter horizontal padding in Popular members strip ----------- */
body:not(.wp-admin) .wpee-online-members-inner.wpee-block.wpee-online-members-inner--enhanced {
padding: var(--sh-space-4) var(--sh-space-4) !important; /* 16px all around */
}
body:not(.wp-admin) .online-members-section.online-members-section--enhanced {
padding: 4px 2px !important;
gap: 10px !important;
}
body:not(.wp-admin) .wpee-online-members-inner--enhanced::before {
margin-bottom: var(--sh-space-3) !important;
padding-left: 4px;
font-size: var(--sh-fs-sm) !important;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--sh-text-muted) !important;
font-weight: var(--sh-fw-bold) !important;
}
/* Slightly smaller card footprint to fit more without wide strip */
@media (min-width: 993px) {
body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-card,
body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-link-inner {
width: 96px !important;
}
body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-link-inner {
height: 120px !important;
}
}
/* --- C. SIDEBAR: section headers (Location, Preferences) -------------- */
body:not(.wp-admin) .wpee-member-wrapper .sh-section-header {
display: flex !important;
align-items: center;
gap: 8px;
padding: var(--sh-space-2) 0 var(--sh-space-1) !important;
margin: var(--sh-space-2) 0 0 !important;
flex: 1 1 100% !important;
position: relative;
}
body:not(.wp-admin) .wpee-member-wrapper .sh-section-header::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, var(--sh-divider), transparent);
margin-left: 8px;
}
body:not(.wp-admin) .wpee-member-wrapper .sh-section-header__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--sh-accent-100);
color: var(--sh-accent);
font-size: 11px;
flex-shrink: 0;
}
body:not(.wp-admin) .wpee-member-wrapper .sh-section-header__label {
font-size: 10px;
font-weight: var(--sh-fw-bold);
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--sh-text);
}
/* Match label styling on the top "I am looking for" — turn it into same section-header feel */
@media (min-width: 993px) {
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__title {
display: flex !important;
align-items: center;
gap: 8px;
font-size: 10px !important;
font-weight: var(--sh-fw-bold) !important;
text-transform: uppercase !important;
letter-spacing: 0.12em !important;
color: var(--sh-text) !important;
padding-bottom: var(--sh-space-1) !important;
border-bottom: 0 !important;
margin-bottom: var(--sh-space-2) !important;
position: relative;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__title::before {
content: "\f005"; /* fa-star */
font-family: "FontAwesome";
font-size: 11px !important;
color: var(--sh-accent) !important;
background: var(--sh-accent-100) !important;
width: 24px !important;
height: 24px !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__title::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, var(--sh-divider), transparent);
margin-left: 8px;
}
/* Replace "I am looking for" text via CSS to match "Basics" header style */
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__title {
font-size: 0 !important;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__title::marker { font-size: 0; }
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__title {
/* Use a custom label span via content on an inline pseudo — tricky; we'll re-show with small nested span */
}
/* Safer: keep original text but smaller inline */
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__title {
font-size: 10px !important;
}
}
/* Remove the old title circle decoration (the big magnifier circle that looked heavy) */
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__title::before {
/* Already restyled above */
}
/* --- D. Form inner spacing: cleaner vertical rhythm ------------------- */
@media (min-width: 993px) {
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-field-group {
gap: var(--sh-space-3) !important;
padding: var(--sh-space-4) var(--sh-space-5) var(--sh-space-5) !important;
}
/* Slight background tint on Preferences section for visual separation */
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap {
background: linear-gradient(180deg, var(--sh-bg) 0%, var(--sh-bg-soft) 100%) !important;
border-top: 1px solid var(--sh-divider) !important;
}
}
/* --- E. Apply button — keep prominent, slight subtle lift ------------- */
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-toolbar-apply {
font-weight: var(--sh-fw-bold) !important;
}
/* --- F. Search Members — cleaner integrated feel --------------------- */
@media (min-width: 993px) {
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-offcanvas-search {
padding: var(--sh-space-4) var(--sh-space-5) 0 !important;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-offcanvas-search label {
display: none !important; /* Icon in placeholder conveys it */
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-offcanvas-search input[type="text"] {
background: var(--sh-bg-soft) url("data:image/svg+xml;utf8,") no-repeat 14px center !important;
border: 1.5px solid transparent !important;
border-radius: var(--sh-radius-pill) !important;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-offcanvas-search input[type="text"]:focus {
background-color: var(--sh-bg) !important;
border-color: var(--sh-accent) !important;
}
}
/* --- G. Remove any leftover big circle around toolbar title ----------- */
/* Ensure consistent single-tone styling */
/* ZONE_Z10_END */
/* ==========================================================================
ZONE Z11 — Sidebar bottom seamless + Strip tighter padding
========================================================================== */
/* --- A. Apply button seamlessly integrated with sidebar -------------- */
@media (min-width: 993px) {
/* Kill the gradient and border-top that visually detached the Preferences section */
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap {
background: transparent !important;
border-top: 0 !important;
border-bottom: 0 !important;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .offcanvase-filter-content-wrap {
background: transparent !important;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-field-group {
background: transparent !important;
padding-bottom: var(--sh-space-4) !important;
}
/* Apply row: flush inside form card, no extra panel below */
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter > form > .wpee-members-filter-toolbar__actions {
background: transparent !important;
border-top: 0 !important;
padding: 0 var(--sh-space-5) var(--sh-space-5) !important;
margin: 0 !important;
border-radius: 0 !important;
position: relative;
}
/* Thin divider line right above the Apply button (subtle connection) */
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter > form > .wpee-members-filter-toolbar__actions::before {
content: "";
position: absolute;
top: 0;
left: var(--sh-space-5);
right: var(--sh-space-5);
height: 1px;
background: var(--sh-divider);
}
/* Apply button a touch smaller so it feels part of the form, not a cap */
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-toolbar-apply {
padding: 12px 20px !important;
font-size: var(--sh-fs-sm) !important;
}
/* Add space between last filter row and the divider-before-apply */
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter > form > .wpee-members-filter-toolbar__actions {
margin-top: var(--sh-space-3) !important;
padding-top: var(--sh-space-4) !important;
}
}
/* --- B. Popular members strip: tighter L/R padding ------------------- */
body:not(.wp-admin) .wpee-online-members-inner.wpee-block.wpee-online-members-inner--enhanced {
padding: var(--sh-space-3) var(--sh-space-3) !important; /* 12px */
}
body:not(.wp-admin) .online-members-section.online-members-section--enhanced {
padding: 4px !important;
gap: 10px !important;
}
body:not(.wp-admin) .wpee-online-members-inner--enhanced::before {
padding-left: 6px;
margin-bottom: var(--sh-space-2) !important;
}
/* ZONE_Z11_END */
/* ==========================================================================
ZONE Z12 — Force strip cards to flex-start (no centering)
========================================================================== */
/* Legacy CSS centers the list — force left-align + minimal padding */
body:not(.wp-admin) .online-members-section.online-members-section--enhanced {
justify-content: flex-start !important;
text-align: left !important;
padding: 2px !important;
margin: 0 !important;
}
body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-card {
margin: 0 !important;
}
body:not(.wp-admin) .wpee-online-members-inner.wpee-block.wpee-online-members-inner--enhanced {
padding: var(--sh-space-3) var(--sh-space-2) !important; /* 12px 8px */
}
body:not(.wp-admin) .wpee-online-members-inner--enhanced::before {
padding-left: 10px !important;
}
body:not(.wp-admin) .wpee-online-members-inner.wpee-block-content {
padding: 0 !important;
margin: 0 !important;
}
/* ZONE_Z12_END */
/* ==========================================================================
ZONE Z13 — Country moved to Location + Age selects polish
========================================================================== */
/* --- A. Country select: style the moved field like other advanced fields */
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-field-group > .wpee-members-filter-field--country.sh-country-moved {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
flex: 1 1 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-field-group > .wpee-members-filter-field--country.sh-country-moved > .wpee-members-filter-label {
font-size: 10px !important;
font-weight: var(--sh-fw-bold) !important;
color: var(--sh-text-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
margin: 0 !important;
padding: 0 !important;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-field-group > .wpee-members-filter-field--country.sh-country-moved select {
min-height: 40px !important;
padding: 8px 34px 8px 12px !important;
font-size: var(--sh-fs-xs) !important;
background-position: right 10px center !important;
}
/* Hide the empty .wpee-members-filter-field--country slot that remains in toolbar
(sometimes jQuery doesn't fully clear it immediately). Defensive. */
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar .wpee-members-filter-field--country {
display: none !important;
}
/* But if it hasn't been moved yet (script still loading), show it — use :not selector */
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar .wpee-members-filter-field--country:not(.sh-country-moved) {
/* keep hidden until moved */
}
/* --- B. Age selects: cleaner identical sizing + better dash ----------- */
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-age-selects {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
position: relative;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-age-selects::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 2px;
border-radius: 2px;
background: var(--sh-border-strong);
pointer-events: none;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-age-selects select {
width: 100% !important;
min-height: 40px !important;
padding: 8px 28px 8px 12px !important;
text-align: left !important;
background-position: right 8px center !important;
}
/* --- C. Hide any leftover offcanvas title wrap (defensive) ------------ */
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-title-wrap {
display: none !important;
}
/* --- D. Section header spacing tweak to not stick to previous select - */
body:not(.wp-admin) .wpee-member-wrapper .sh-section-header {
margin-top: var(--sh-space-3) !important;
}
/* ZONE_Z13_END */
/* ==========================================================================
ZONE Z14 — Identical From/To + unified solid sidebar background
========================================================================== */
/* --- A. Age selects identical width (nuke any legacy width rule) ------- */
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-age-selects {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
align-items: center;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-age-selects > select,
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-age-selects select[name="age_from"],
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-age-selects select[name="age_to"] {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
flex: initial !important;
display: block !important;
min-height: 40px !important;
padding: 8px 28px 8px 12px !important;
background-position: right 8px center !important;
}
/* Pin each select to its grid cell so neither can grow */
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-age-selects select[name="age_from"] {
grid-column: 1 / 2 !important;
justify-self: stretch !important;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-age-selects select[name="age_to"] {
grid-column: 2 / 3 !important;
justify-self: stretch !important;
}
/* Remove the dash that was sitting between them (visual noise) */
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-age-selects::after {
content: none !important;
}
/* --- B. UNIFIED SIDEBAR BACKGROUND: everything shares one white canvas -- */
@media (min-width: 993px) {
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter > form#member-ajax-filter {
background: var(--sh-bg) !important;
}
/* Kill ALL internal backgrounds */
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar,
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__row,
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__fields,
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__actions,
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-offcanvas-search,
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap,
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .offcanvase-filter-content-wrap,
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-field-group,
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-field-group .form-group,
body:not(.wp-admin) .wpee-member-wrapper .sh-demographic-field,
body:not(.wp-admin) .wpee-member-wrapper .sh-demographic-grid {
background: transparent !important;
}
/* Kill ALL internal borders & dividers inside the form card */
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap,
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .offcanvase-filter-content-wrap,
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-field-group,
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter > form > .wpee-members-filter-toolbar__actions,
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__title {
border: 0 !important;
box-shadow: none !important;
}
/* Remove the thin divider-line above Apply */
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter > form > .wpee-members-filter-toolbar__actions::before {
content: none !important;
}
/* Remove the gradient underline after section titles */
body:not(.wp-admin) .wpee-member-wrapper .sh-section-header::after {
content: none !important;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__title::after {
content: none !important;
}
}
/* Search input keeps its subtle soft-gray fill so it still reads as an input */
@media (min-width: 993px) {
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-offcanvas-search input[type="text"] {
background: var(--sh-bg-soft) url("data:image/svg+xml;utf8,") no-repeat 14px center !important;
}
}
/* Tighten overall vertical spacing between sections now that backgrounds merged */
@media (min-width: 993px) {
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar {
padding: var(--sh-space-4) var(--sh-space-5) var(--sh-space-3) !important;
}
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-field-group {
padding: 0 var(--sh-space-5) var(--sh-space-3) !important;
gap: var(--sh-space-3) !important;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter > form > .wpee-members-filter-toolbar__actions {
padding: var(--sh-space-3) var(--sh-space-5) var(--sh-space-5) !important;
}
body:not(.wp-admin) .wpee-member-wrapper .sh-section-header {
padding: var(--sh-space-3) 0 var(--sh-space-1) !important;
margin: 0 !important;
flex: 1 1 100% !important;
}
}
/* ZONE_Z14_END */
/* ==========================================================================
ZONE Z15 — Remove underline/accent bar under "Discover people" heading
========================================================================== */
body:not(.wp-admin) .wpee-member-list-content::before {
border-bottom: 0 !important;
padding-bottom: 0 !important;
}
body:not(.wp-admin) .wpee-member-list-content::after {
content: none !important;
display: none !important;
}
/* ZONE_Z15_END */
/* ==========================================================================
ZONE Z16 — Responsive search page (tablet + mobile)
========================================================================== */
/* ---- Filter toggle button: hidden on desktop, shown on tablet/mobile ---- */
.sh-filter-toggle {
display: none;
}
/* ---- TABLET / SMALL DESKTOP (≤992px) ---- */
@media (max-width: 992px) {
/* Stack layout: sidebar on top, member list below */
body:not(.wp-admin) .wpee-member-wrapper {
display: flex !important;
flex-direction: column !important;
gap: var(--sh-space-4) !important;
grid-template-columns: none !important;
}
/* Sidebar: no sticky, full width, no internal scroll */
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter {
position: static !important;
top: auto !important;
width: 100% !important;
max-width: 100% !important;
max-height: none !important;
align-self: stretch !important;
}
body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter > form#member-ajax-filter {
max-height: none !important;
overflow: visible !important;
background: var(--sh-bg) !important;
border: 1px solid var(--sh-divider) !important;
border-radius: var(--sh-radius-2xl) !important;
box-shadow: var(--sh-shadow-1) !important;
width: 100%;
}
/* Filter toggle button */
.sh-filter-toggle {
display: flex !important;
align-items: center;
gap: 10px;
width: 100%;
padding: 14px 20px;
margin: 0 0 var(--sh-space-3);
background: var(--sh-bg);
color: var(--sh-text);
border: 1.5px solid var(--sh-border);
border-radius: var(--sh-radius-pill);
font-weight: var(--sh-fw-semibold);
font-size: 14px;
cursor: pointer;
transition: var(--sh-transition-default);
box-shadow: var(--sh-shadow-1);
}
.sh-filter-toggle:hover {
border-color: var(--sh-accent);
color: var(--sh-accent);
}
.sh-filter-toggle .sh-filter-toggle-icon {
color: var(--sh-accent);
font-size: 16px;
flex-shrink: 0;
}
.sh-filter-toggle .sh-filter-toggle-label {
flex: 1;
text-align: left;
letter-spacing: 0.01em;
}
.sh-filter-toggle .sh-filter-toggle-chev {
color: var(--sh-text-muted);
transition: transform 220ms var(--sh-ease);
font-size: 12px;
}
.sh-filter-toggle.is-open {
background: var(--sh-accent);
color: #fff;
border-color: var(--sh-accent);
box-shadow: 0 8px 22px rgba(228,81,158,0.30);
}
.sh-filter-toggle.is-open .sh-filter-toggle-icon,
.sh-filter-toggle.is-open .sh-filter-toggle-chev {
color: #fff;
}
.sh-filter-toggle.is-open .sh-filter-toggle-chev {
transform: rotate(180deg);
}
/* Collapsed state hides the whole form */
#member-ajax-filter.sh-filters-collapsed {
display: none !important;
}
/* When open on mobile, sidebar card uses normal padding */
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar,
body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-field-group,
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-offcanvas-search {
padding-left: var(--sh-space-5) !important;
padding-right: var(--sh-space-5) !important;
}
/* Member grid: 3 cols on tablet */
body:not(.wp-admin) .wpee-member-list-content .main-member-list-wrap {
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
gap: var(--sh-space-4) !important;
}
/* Discover people heading */
body:not(.wp-admin) .wpee-member-list-content::before {
font-size: var(--sh-fs-lg) !important;
padding-top: 0;
}
/* Hide the custom sidebar offcanvas toggle icon (we use our own toggle now) */
body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar__actions .trigger-filter-icon {
display: none !important;
}
}
/* ---- MOBILE (≤600px) ---- */
@media (max-width: 600px) {
/* Member grid: 2 cols */
body:not(.wp-admin) .wpee-member-list-content .main-member-list-wrap {
grid-template-columns: repeat(2, 1fr) !important;
gap: var(--sh-space-3) !important;
}
/* Tighter inner spacing on small cards */
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-details {
padding: var(--sh-space-3) !important;
min-height: 86px !important;
gap: 5px !important;
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .member-user-name {
font-size: var(--sh-fs-sm) !important;
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content p {
font-size: 11px !important;
gap: 4px 6px !important;
}
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content .gender-Woman,
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content .gender-Man {
font-size: 10px !important;
padding: 1px 7px !important;
}
/* Popular strip: smaller cards */
body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-card {
width: 84px !important;
}
body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-link-inner {
width: 84px !important;
height: 105px !important;
}
body:not(.wp-admin) .wpee-online-members-inner.wpee-block.wpee-online-members-inner--enhanced {
padding: var(--sh-space-3) var(--sh-space-3) !important;
}
body:not(.wp-admin) .wpee-online-members-inner--enhanced::before {
font-size: 11px !important;
}
/* Top padding of widget container smaller */
body:not(.wp-admin) .elementor-widget-wpee-member > .elementor-widget-container {
padding-top: 24px !important;
}
/* Filter toggle full-width */
.sh-filter-toggle {
padding: 12px 18px !important;
font-size: 13px !important;
}
/* Discover heading */
body:not(.wp-admin) .wpee-member-list-content::before {
font-size: var(--sh-fs-md) !important;
margin-bottom: var(--sh-space-3) !important;
}
/* Pagination smaller */
body:not(.wp-admin) .wpee-members-page-btn {
min-width: 34px;
height: 34px;
padding: 0 10px;
font-size: 12px;
}
body:not(.wp-admin) .wpee-members-pagination {
padding: 4px;
}
/* Hover heart button not shown on touch (no hover) */
body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap::before {
opacity: 0.85;
width: 30px;
height: 30px;
}
/* Tooltip sizing for small screens */
#sh-strip-tooltip.sh-strip-tooltip {
max-width: 220px;
}
#sh-strip-tooltip .sh-strip-tooltip__name {
font-size: 15px;
}
}
/* ---- VERY NARROW (≤380px) ---- */
@media (max-width: 380px) {
body:not(.wp-admin) .wpee-member-list-content .main-member-list-wrap {
gap: 8px !important;
}
body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-card,
body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-link-inner {
width: 76px !important;
}
body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-link-inner {
height: 96px !important;
}
}
/* ZONE_Z16_END */
/* ==========================================================================
ZONE Z17 — Strong responsive overrides (nuclear stack at tablet/mobile)
========================================================================== */
/* Default: hide toggle on large screens */
body:not(.wp-admin) .sh-filter-toggle,
html body .sh-filter-toggle { display: none; }
/* Bump breakpoint up to match Elementor tablet: 1024px */
@media (max-width: 1024px) {
/* Force FULL stack at tablet & below — beats every prior rule */
html body:not(.wp-admin) .wpee-member-wrapper,
html body:not(.wp-admin) .elementor-widget-wpee-member .wpee-member-wrapper {
display: block !important;
grid-template-columns: none !important;
grid-template-rows: none !important;
gap: 0 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0;
}
/* Sidebar: full-width block, no sticky, no float */
html body:not(.wp-admin) .wpee-member-wrapper > .wpee-ajax-filter,
html body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter {
display: block !important;
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
float: none !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
max-height: none !important;
margin: 0 0 var(--sh-space-4) !important;
align-self: auto !important;
}
/* Content area full-width */
html body:not(.wp-admin) .wpee-member-wrapper > .wpee-member-list-content,
html body:not(.wp-admin) .wpee-member-wrapper .wpee-member-list-content {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
float: none !important;
}
/* The form itself */
html body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter > form#member-ajax-filter {
display: block !important;
width: 100% !important;
max-width: 100% !important;
max-height: none !important;
overflow: visible !important;
background: var(--sh-bg) !important;
border: 1px solid var(--sh-divider) !important;
border-radius: var(--sh-radius-2xl) !important;
box-shadow: var(--sh-shadow-1) !important;
}
/* Collapsed: form hidden entirely */
html body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter > form#member-ajax-filter.sh-filters-collapsed {
display: none !important;
}
/* Filter toggle button (shown) */
html body:not(.wp-admin) .sh-filter-toggle,
html body .sh-filter-toggle {
display: flex !important;
align-items: center;
gap: 10px;
width: 100%;
padding: 13px 20px;
margin: 0 0 var(--sh-space-3);
background: var(--sh-bg);
color: var(--sh-text);
border: 1.5px solid var(--sh-border);
border-radius: var(--sh-radius-pill);
font-weight: var(--sh-fw-semibold);
font-size: 14px;
cursor: pointer;
transition: var(--sh-transition-default);
box-shadow: var(--sh-shadow-1);
box-sizing: border-box;
}
html body .sh-filter-toggle:hover {
border-color: var(--sh-accent);
}
html body .sh-filter-toggle .sh-filter-toggle-icon { color: var(--sh-accent); font-size: 15px; }
html body .sh-filter-toggle .sh-filter-toggle-label { flex: 1; text-align: left; }
html body .sh-filter-toggle .sh-filter-toggle-chev { color: var(--sh-text-muted); font-size: 12px; transition: transform 220ms var(--sh-ease); }
html body .sh-filter-toggle.is-open {
background: var(--sh-accent) !important;
color: #fff !important;
border-color: var(--sh-accent) !important;
box-shadow: 0 8px 22px rgba(228,81,158,0.30) !important;
}
html body .sh-filter-toggle.is-open .sh-filter-toggle-icon,
html body .sh-filter-toggle.is-open .sh-filter-toggle-chev {
color: #fff !important;
}
html body .sh-filter-toggle.is-open .sh-filter-toggle-chev {
transform: rotate(180deg);
}
/* Member grid: 3 columns */
html body:not(.wp-admin) .wpee-member-list-content .main-member-list-wrap {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: var(--sh-space-3) !important;
}
/* Popular strip: full width of row */
html body:not(.wp-admin) .wpee-online-members-inner--enhanced {
width: 100% !important;
}
}
/* MOBILE (≤640px): 2 cols + smaller everything */
@media (max-width: 640px) {
html body:not(.wp-admin) .wpee-member-list-content .main-member-list-wrap {
grid-template-columns: repeat(2, 1fr) !important;
gap: var(--sh-space-2) !important;
}
/* Tighter card internals */
html body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-details {
padding: 12px !important;
min-height: 80px !important;
gap: 4px !important;
}
html body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .member-user-name {
font-size: 13px !important;
}
html body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content p {
font-size: 10px !important;
line-height: 1.3 !important;
}
html body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content .gender-Woman,
html body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap .user-detail-content .gender-Man {
font-size: 9px !important;
padding: 1px 6px !important;
}
html body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap::before {
width: 28px !important;
height: 28px !important;
top: 8px !important;
right: 8px !important;
}
/* Popular strip cards smaller */
html body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-card,
html body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-link-inner {
width: 80px !important;
}
html body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-link-inner {
height: 100px !important;
}
html body:not(.wp-admin) .wpee-online-members-inner.wpee-block.wpee-online-members-inner--enhanced {
padding: 10px !important;
}
/* Widget top padding */
html body:not(.wp-admin) .elementor-widget-wpee-member > .elementor-widget-container {
padding-top: 20px !important;
}
/* Discover people heading */
html body:not(.wp-admin) .wpee-member-list-content::before {
font-size: 16px !important;
margin-bottom: 12px !important;
padding: 0 !important;
}
/* Pagination smaller */
html body:not(.wp-admin) .wpee-members-page-btn {
min-width: 32px;
height: 32px;
padding: 0 8px;
font-size: 12px;
}
/* Form inside uses tighter padding */
html body:not(.wp-admin) .wpee-member-wrapper .wpee-members-filter-toolbar,
html body:not(.wp-admin) .wpee-member-wrapper .offcanvase-filter-wrap .form-field-group,
html body:not(.wp-admin) .wpee-member-wrapper .wpee-members-offcanvas-search {
padding-left: 16px !important;
padding-right: 16px !important;
}
/* Hide heart hover on cards (no hover on touch) — keep visible always but smaller */
html body:not(.wp-admin) .wpee-member-list-content .member-detail-wrap::before {
opacity: 0.9;
}
}
/* VERY NARROW (≤380px) */
@media (max-width: 380px) {
html body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-card,
html body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-link-inner {
width: 72px !important;
}
html body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-link-inner {
height: 90px !important;
}
}
/* ZONE_Z17_END */
/* ==========================================================================
ZONE Z18 — Mobile bottom-sheet filter drawer
========================================================================== */
/* Desktop: sheet pieces are hidden */
body:not(.wp-admin) .sh-filter-backdrop,
body:not(.wp-admin) #member-ajax-filter > .sh-sheet-close,
body:not(.wp-admin) #member-ajax-filter > .sh-sheet-grip {
display: none;
}
@media (max-width: 1024px) {
/* Toggle button — visible on mobile (already styled in Z17) */
/* Form becomes a FIXED bottom sheet, off-screen by default */
html body:not(.wp-admin) .wpee-ajax-filter > form#member-ajax-filter {
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important;
width: 100% !important;
max-width: 100% !important;
max-height: 88vh !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
background: var(--sh-bg) !important;
border: 0 !important;
border-radius: var(--sh-radius-2xl) var(--sh-radius-2xl) 0 0 !important;
box-shadow: 0 -24px 60px rgba(26, 26, 46, 0.25) !important;
padding: 36px 0 20px !important;
margin: 0 !important;
z-index: 1100;
transform: translateY(calc(100% + 20px));
transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
visibility 360ms step-end;
visibility: hidden;
}
/* Backdrop */
body.sh-sheet-open .sh-filter-backdrop,
html body .sh-filter-backdrop {
display: block;
position: fixed;
inset: 0;
background: rgba(26, 26, 46, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 1099;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 280ms var(--sh-ease-out), visibility 280ms step-end;
}
body.sh-sheet-open .sh-filter-backdrop {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity 280ms var(--sh-ease-out), visibility 0s step-start;
}
/* Sheet OPEN state: slide up into view */
body.sh-sheet-open .wpee-ajax-filter > form#member-ajax-filter {
transform: translateY(0) !important;
visibility: visible !important;
transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
visibility 0s step-start !important;
}
/* Prevent body scroll when sheet open */
body.sh-sheet-open {
overflow: hidden !important;
}
/* Sheet close button (top-right corner) */
html body #member-ajax-filter > .sh-sheet-close {
display: inline-flex !important;
align-items: center;
justify-content: center;
position: absolute;
top: 12px;
right: 16px;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--sh-bg-soft);
color: var(--sh-text-2);
border: 0;
font-size: 16px;
cursor: pointer;
z-index: 5;
transition: var(--sh-transition-default);
}
html body #member-ajax-filter > .sh-sheet-close:hover,
html body #member-ajax-filter > .sh-sheet-close:focus {
background: var(--sh-border);
color: var(--sh-text);
transform: rotate(90deg);
}
/* Grip indicator at very top (iOS-style) */
html body #member-ajax-filter > .sh-sheet-grip {
display: block !important;
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 4px;
border-radius: 999px;
background: var(--sh-border-strong);
z-index: 4;
}
/* Inside sheet: make Apply button sticky at bottom of scroll area */
html body #member-ajax-filter > .wpee-members-filter-toolbar__actions {
position: sticky;
bottom: 0;
margin-top: 16px !important;
padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
background: var(--sh-bg) !important;
border-top: 1px solid var(--sh-divider) !important;
z-index: 3;
}
/* Sheet padding tweaks */
html body #member-ajax-filter > .wpee-members-offcanvas-search {
padding: 20px 20px 0 !important;
}
html body #member-ajax-filter > .wpee-members-filter-toolbar {
padding: 12px 20px !important;
}
html body #member-ajax-filter .offcanvase-filter-wrap .form-field-group {
padding: 0 20px 16px !important;
}
/* Sidebar wrap (containing toggle button + form) — toggle stays visible */
html body:not(.wp-admin) .wpee-member-wrapper > .wpee-ajax-filter {
position: static !important;
max-height: none !important;
margin: 0 0 var(--sh-space-4) !important;
overflow: visible !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
html body:not(.wp-admin) .wpee-member-wrapper > .wpee-ajax-filter > form#member-ajax-filter {
/* Sheet state — don't affect the layout of .wpee-ajax-filter block */
position: fixed !important;
}
/* Member list takes full width naturally since form is position:fixed */
/* Cancel previous "collapsed hide" — we now use transform instead */
html body:not(.wp-admin) .wpee-member-wrapper .wpee-ajax-filter > form#member-ajax-filter.sh-filters-collapsed {
display: block !important;
}
/* Hide toggle's chevron — redundant with sheet UX */
.sh-filter-toggle .sh-filter-toggle-chev {
/* keep subtle hint */
}
}
/* Animations for sheet entrance */
@keyframes sh-sheet-in {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
/* ZONE_Z18_END */
/* ==========================================================================
ZONE Z19 — Bottom-sheet v2 (form moved to body via JS)
========================================================================== */
/* By default (desktop): sheet container & backdrop hidden */
#sh-bottom-sheet {
display: none;
}
.sh-filter-backdrop {
display: none;
}
/* MOBILE / TABLET ≤ 1024px */
@media (max-width: 1024px) {
/* The sheet is a body-level fixed drawer */
#sh-bottom-sheet {
display: flex !important;
flex-direction: column;
position: fixed;
left: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 100%;
max-height: 90vh;
background: var(--sh-bg);
border-radius: 24px 24px 0 0;
box-shadow: 0 -24px 60px rgba(26, 26, 46, 0.25);
z-index: 10001;
transform: translateY(100%);
transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
overscroll-behavior: contain;
}
body.sh-sheet-open #sh-bottom-sheet {
transform: translateY(0);
pointer-events: auto;
}
/* Backdrop */
.sh-filter-backdrop {
display: block !important;
position: fixed;
inset: 0;
background: rgba(26, 26, 46, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 10000;
opacity: 0;
pointer-events: none;
transition: opacity 280ms var(--sh-ease-out);
}
body.sh-sheet-open .sh-filter-backdrop {
opacity: 1;
pointer-events: auto;
}
/* Lock body scroll when open */
body.sh-sheet-open {
overflow: hidden !important;
touch-action: none;
}
/* Grip at top center (iOS style) */
.sh-sheet-grip {
width: 44px;
height: 4px;
border-radius: 999px;
background: var(--sh-border-strong);
margin: 10px auto 0;
flex-shrink: 0;
}
/* Head with title + close */
.sh-sheet-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 16px 12px;
border-bottom: 1px solid var(--sh-divider);
flex-shrink: 0;
}
.sh-sheet-title {
font-size: 18px;
font-weight: var(--sh-fw-bold);
color: var(--sh-text);
margin: 0;
letter-spacing: -0.01em;
}
.sh-sheet-close {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--sh-bg-soft);
color: var(--sh-text-2);
border: 0;
font-size: 15px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: var(--sh-transition-default);
}
.sh-sheet-close:hover {
background: var(--sh-border);
color: var(--sh-text);
transform: rotate(90deg);
}
/* Body container — scrollable */
.sh-sheet-body {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding: 0;
min-height: 0;
}
/* Form inside sheet: plain layout (no card chrome) */
#sh-bottom-sheet #member-ajax-filter {
display: block !important;
position: static !important;
width: 100% !important;
max-width: 100% !important;
max-height: none !important;
overflow: visible !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
visibility: visible !important;
z-index: auto !important;
}
/* Inner spacing inside sheet body */
#sh-bottom-sheet #member-ajax-filter .wpee-members-offcanvas-search {
padding: 16px 20px 0 !important;
}
#sh-bottom-sheet #member-ajax-filter .wpee-members-filter-toolbar {
padding: 12px 20px !important;
}
#sh-bottom-sheet #member-ajax-filter .offcanvase-filter-wrap .form-field-group {
padding: 0 20px 16px !important;
}
/* Sticky Apply at bottom of the sheet */
#sh-bottom-sheet #member-ajax-filter .wpee-members-filter-toolbar__actions {
position: sticky;
bottom: 0;
padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
background: var(--sh-bg) !important;
border-top: 1px solid var(--sh-divider) !important;
z-index: 3;
margin: 16px 0 0 !important;
}
/* Outside the sheet: .wpee-ajax-filter still contains the toggle button only */
html body:not(.wp-admin) .wpee-member-wrapper > .wpee-ajax-filter {
position: static !important;
max-height: none !important;
margin: 0 0 var(--sh-space-4) !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
width: 100% !important;
}
/* Keep the form visible if it's still home-parented (before JS moved it) */
html body:not(.wp-admin) .wpee-ajax-filter > form#member-ajax-filter {
display: none !important;
}
/* Member grid at 3 cols */
html body:not(.wp-admin) .wpee-member-list-content .main-member-list-wrap {
grid-template-columns: repeat(3, 1fr) !important;
gap: var(--sh-space-3) !important;
}
/* Hide toggle chevron (no longer needed, Filters btn speaks for itself) */
.sh-filter-toggle .sh-filter-toggle-chev {
display: none;
}
}
/* MOBILE small (≤640px) */
@media (max-width: 640px) {
html body:not(.wp-admin) .wpee-member-list-content .main-member-list-wrap {
grid-template-columns: repeat(2, 1fr) !important;
}
#sh-bottom-sheet {
max-height: 92vh;
}
.sh-sheet-title {
font-size: 16px;
}
}
/* ZONE_Z19_END */
/* ==========================================================================
ZONE Z20 — Form layout reset INSIDE #sh-bottom-sheet (clean single-column)
========================================================================== */
@media (max-width: 1024px) {
/* Root form inside sheet is pure block, no leftover card styles */
#sh-bottom-sheet #member-ajax-filter {
display: block !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
max-height: none !important;
width: 100% !important;
max-width: 100% !important;
}
/* All filter groups: single column, clean gaps, no legacy flex-wrap */
#sh-bottom-sheet #member-ajax-filter .wpee-members-filter-toolbar,
#sh-bottom-sheet #member-ajax-filter .wpee-members-filter-toolbar__row,
#sh-bottom-sheet #member-ajax-filter .wpee-members-filter-toolbar__fields,
#sh-bottom-sheet #member-ajax-filter .offcanvase-filter-wrap,
#sh-bottom-sheet #member-ajax-filter .offcanvase-filter-wrap .offcanvase-filter-content-wrap,
#sh-bottom-sheet #member-ajax-filter .offcanvase-filter-wrap .form-field-group {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
gap: 16px !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
width: 100% !important;
max-width: 100% !important;
}
/* Each field block: column, full width, no flex-grow */
#sh-bottom-sheet #member-ajax-filter .wpee-members-filter-field,
#sh-bottom-sheet #member-ajax-filter .form-group,
#sh-bottom-sheet #member-ajax-filter .sh-demographic-field,
#sh-bottom-sheet #member-ajax-filter .sh-demographic-field--full,
#sh-bottom-sheet #member-ajax-filter .wpee-members-offcanvas-search {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
width: 100% !important;
flex: 0 0 auto !important;
margin: 0 !important;
padding: 0 !important;
min-width: 0 !important;
}
/* Labels inside sheet — consistent caps-style */
#sh-bottom-sheet #member-ajax-filter label,
#sh-bottom-sheet #member-ajax-filter .wpee-members-filter-label {
font-size: 11px !important;
font-weight: var(--sh-fw-bold) !important;
color: var(--sh-text-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
text-align: left !important;
}
/* All selects / inputs inside sheet: consistent 44px height */
#sh-bottom-sheet #member-ajax-filter select,
#sh-bottom-sheet #member-ajax-filter .dspdp-form-control,
#sh-bottom-sheet #member-ajax-filter input[type="text"] {
width: 100% !important;
min-height: 44px !important;
padding: 10px 40px 10px 14px !important;
border: 1.5px solid var(--sh-border) !important;
border-radius: var(--sh-radius-md) !important;
background: var(--sh-bg) url("data:image/svg+xml;utf8,") no-repeat right 14px center !important;
font-size: 14px !important;
color: var(--sh-text) !important;
appearance: none !important;
-webkit-appearance: none !important;
box-sizing: border-box !important;
max-width: 100% !important;
min-width: 0 !important;
}
#sh-bottom-sheet #member-ajax-filter input[type="text"] {
padding: 10px 14px 10px 40px !important;
background: var(--sh-bg) url("data:image/svg+xml;utf8,") no-repeat 14px center !important;
}
/* Age selects: 2-col grid */
#sh-bottom-sheet #member-ajax-filter .wpee-members-filter-age-selects {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
flex-direction: unset !important;
}
#sh-bottom-sheet #member-ajax-filter .wpee-members-filter-age-selects::after {
content: none !important;
}
/* Demographic grid: 2-col pairs */
#sh-bottom-sheet #member-ajax-filter .sh-demographic-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
width: 100%;
}
/* Section headers: full width visible divider */
#sh-bottom-sheet #member-ajax-filter .sh-section-header {
display: flex !important;
align-items: center;
gap: 8px;
width: 100% !important;
padding: 12px 0 4px !important;
margin: 0 !important;
flex: 0 0 auto !important;
}
#sh-bottom-sheet #member-ajax-filter .sh-section-header::after {
content: "";
flex: 1;
height: 1px;
background: var(--sh-divider);
margin-left: 8px;
}
/* Toolbar title (I am looking for) — header styling */
#sh-bottom-sheet #member-ajax-filter .wpee-members-filter-toolbar__title {
font-size: 11px !important;
font-weight: var(--sh-fw-bold) !important;
text-transform: uppercase !important;
letter-spacing: 0.12em !important;
color: var(--sh-text) !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
display: flex !important;
align-items: center;
gap: 8px;
}
#sh-bottom-sheet #member-ajax-filter .wpee-members-filter-toolbar__title::before {
content: "\f005";
font-family: "FontAwesome";
color: var(--sh-accent);
font-size: 11px;
background: var(--sh-accent-100);
width: 22px;
height: 22px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
#sh-bottom-sheet #member-ajax-filter .wpee-members-filter-toolbar__title::after {
content: "";
flex: 1;
height: 1px;
background: var(--sh-divider);
margin-left: 8px;
}
/* Inner padding for each grouped section */
#sh-bottom-sheet #member-ajax-filter > .wpee-members-offcanvas-search,
#sh-bottom-sheet #member-ajax-filter > .wpee-members-filter-toolbar,
#sh-bottom-sheet #member-ajax-filter > .offcanvase-filter-wrap {
padding: 0 20px !important;
}
#sh-bottom-sheet #member-ajax-filter > .wpee-members-offcanvas-search {
padding-top: 18px !important;
padding-bottom: 0 !important;
}
#sh-bottom-sheet #member-ajax-filter > .wpee-members-filter-toolbar {
padding-top: 14px !important;
padding-bottom: 0 !important;
}
#sh-bottom-sheet #member-ajax-filter > .offcanvase-filter-wrap {
padding-top: 14px !important;
padding-bottom: 14px !important;
}
/* Apply row: sticky bottom, full width pill */
#sh-bottom-sheet #member-ajax-filter .wpee-members-filter-toolbar__actions {
position: sticky;
bottom: 0;
display: flex !important;
padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
margin: 18px 0 0 !important;
background: var(--sh-bg) !important;
border-top: 1px solid var(--sh-divider) !important;
border-radius: 0 !important;
z-index: 3;
flex-shrink: 0;
}
#sh-bottom-sheet #member-ajax-filter .wpee-members-filter-toolbar__actions .trigger-filter-icon {
display: none !important;
}
#sh-bottom-sheet #member-ajax-filter .wpee-members-toolbar-apply {
width: 100% !important;
flex: 1 !important;
padding: 14px 20px !important;
font-size: 15px !important;
font-weight: var(--sh-fw-bold) !important;
}
/* Make sure search hides duplicate label */
#sh-bottom-sheet #member-ajax-filter .wpee-members-offcanvas-search label {
display: none !important;
}
#sh-bottom-sheet #member-ajax-filter .wpee-members-offcanvas-search input[type="text"] {
min-height: 44px !important;
}
/* Hide Country select's duplicate that might still be in toolbar */
#sh-bottom-sheet #member-ajax-filter .wpee-members-filter-toolbar .wpee-members-filter-field--country:not(.sh-country-moved) {
display: none !important;
}
}
/* ZONE_Z20_END */
/* ==========================================================================
ZONE Z21 — Force-show offcanvas content inside sheet (legacy reset)
========================================================================== */
@media (max-width: 1024px) {
#sh-bottom-sheet #member-ajax-filter .offcanvase-filter-wrap,
#sh-bottom-sheet #member-ajax-filter .offcanvase-filter-wrap .offcanvase-filter-content-wrap,
#sh-bottom-sheet #member-ajax-filter .offcanvase-filter-wrap .form-field-group,
#sh-bottom-sheet #member-ajax-filter .offcanvase-filter-wrap * {
opacity: 1 !important;
visibility: visible !important;
position: static !important;
transform: none !important;
transition: none !important;
pointer-events: auto !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
height: auto !important;
max-height: none !important;
}
/* Let the form-field-group keep its layout rules from Z20 */
#sh-bottom-sheet #member-ajax-filter .offcanvase-filter-wrap,
#sh-bottom-sheet #member-ajax-filter .offcanvase-filter-wrap .offcanvase-filter-content-wrap,
#sh-bottom-sheet #member-ajax-filter .offcanvase-filter-wrap .form-field-group {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
background: transparent !important;
}
/* Hide any residual close/filter-close overlay buttons that legacy injects */
#sh-bottom-sheet #member-ajax-filter .offcanvase-filter-wrap .filter-close,
#sh-bottom-sheet #member-ajax-filter .offcanvase-filter-wrap .close-filter {
display: none !important;
}
/* Ensure sh-section-header also visible */
#sh-bottom-sheet #member-ajax-filter .sh-section-header {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
}
#sh-bottom-sheet #member-ajax-filter .sh-demographic-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
opacity: 1 !important;
visibility: visible !important;
gap: 12px !important;
}
}
/* ZONE_Z21_END */
/* ==========================================================================
ZONE Z22 — Auth wall for logged-out visitors (blur + CTA overlay)
========================================================================== */
/* The widget container becomes the positioning anchor */
body.not-logged-in .elementor-widget-wpee-member.sh-auth-wall,
body:not(.logged-in) .elementor-widget-wpee-member.sh-auth-wall {
position: relative;
min-height: 620px;
overflow: hidden;
border-radius: var(--sh-radius-2xl);
}
body.not-logged-in .elementor-widget-wpee-member.sh-auth-wall > .elementor-widget-container {
position: relative;
}
/* Blur the content, disable interaction */
body.not-logged-in .elementor-widget-wpee-member.sh-auth-wall .wpee-member {
filter: blur(12px) saturate(0.85);
-webkit-filter: blur(12px) saturate(0.85);
pointer-events: none;
user-select: none;
opacity: 0.75;
transition: filter 0.6s var(--sh-ease);
}
/* Prevent blurred content from being tab-focused */
body.not-logged-in .elementor-widget-wpee-member.sh-auth-wall .wpee-member a,
body.not-logged-in .elementor-widget-wpee-member.sh-auth-wall .wpee-member button,
body.not-logged-in .elementor-widget-wpee-member.sh-auth-wall .wpee-member input,
body.not-logged-in .elementor-widget-wpee-member.sh-auth-wall .wpee-member select {
pointer-events: none !important;
user-select: none !important;
}
/* Overlay — sits on top of blurred widget */
.sh-auth-overlay {
position: absolute;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: var(--sh-space-6) var(--sh-space-4);
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.25) 0%,
rgba(254, 232, 243, 0.55) 60%,
rgba(255, 255, 255, 0.80) 100%
);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
animation: sh-auth-fade-in 400ms var(--sh-ease-out);
}
/* The CTA card */
.sh-auth-card {
width: 100%;
max-width: 440px;
background: var(--sh-bg);
border-radius: var(--sh-radius-2xl);
box-shadow:
0 24px 60px rgba(92, 99, 183, 0.22),
0 6px 16px rgba(228, 81, 158, 0.12);
padding: var(--sh-space-8) var(--sh-space-6) var(--sh-space-6);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sh-space-3);
position: relative;
overflow: hidden;
}
.sh-auth-card::before {
content: "";
position: absolute;
top: -80px;
left: -80px;
width: 160px;
height: 160px;
border-radius: 50%;
background: radial-gradient(circle, rgba(228,81,158,0.18), transparent 70%);
pointer-events: none;
}
.sh-auth-card::after {
content: "";
position: absolute;
bottom: -80px;
right: -80px;
width: 160px;
height: 160px;
border-radius: 50%;
background: radial-gradient(circle, rgba(92,99,183,0.18), transparent 70%);
pointer-events: none;
}
.sh-auth-card__icon {
width: 72px;
height: 72px;
border-radius: 50%;
background: var(--sh-gradient, linear-gradient(135deg, #5c63b7, #e4519e));
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 28px;
box-shadow: 0 10px 24px rgba(228, 81, 158, 0.30);
margin-bottom: var(--sh-space-2);
animation: sh-auth-pulse 2.5s ease-in-out infinite;
position: relative;
z-index: 1;
}
@keyframes sh-auth-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.06); }
}
.sh-auth-card__title {
font-size: 26px;
font-weight: var(--sh-fw-bold);
color: var(--sh-text);
margin: 0;
letter-spacing: -0.02em;
position: relative;
z-index: 1;
}
.sh-auth-card__text {
color: var(--sh-text-muted);
font-size: 14px;
line-height: 1.55;
margin: 0 0 var(--sh-space-3);
max-width: 340px;
position: relative;
z-index: 1;
}
.sh-auth-card__cta {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 14px 28px;
background: var(--sh-accent);
color: #fff !important;
border-radius: 999px;
font-weight: var(--sh-fw-bold);
font-size: 15px;
letter-spacing: 0.01em;
text-decoration: none !important;
box-shadow: 0 12px 28px rgba(228, 81, 158, 0.34);
transition: all 220ms var(--sh-ease);
position: relative;
z-index: 1;
}
.sh-auth-card__cta:hover,
.sh-auth-card__cta:focus {
background: var(--sh-accent-600);
color: #fff !important;
transform: translateY(-2px);
box-shadow: 0 16px 36px rgba(228, 81, 158, 0.44);
}
.sh-auth-card__login {
color: var(--sh-text-muted) !important;
font-size: 13px;
text-decoration: none !important;
margin-top: 6px;
position: relative;
z-index: 1;
}
.sh-auth-card__login span {
color: var(--sh-primary);
font-weight: var(--sh-fw-semibold);
margin-left: 4px;
}
.sh-auth-card__login:hover span {
color: var(--sh-accent);
}
@keyframes sh-auth-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* Disable tooltip and hover effects on blurred cards */
body.not-logged-in .sh-auth-wall #sh-strip-tooltip,
body.not-logged-in .sh-auth-wall .sh-filter-toggle {
display: none !important;
}
/* Mobile: smaller card */
@media (max-width: 640px) {
.sh-auth-card {
padding: var(--sh-space-6) var(--sh-space-5) var(--sh-space-5);
max-width: 100%;
}
.sh-auth-card__icon {
width: 60px;
height: 60px;
font-size: 24px;
}
.sh-auth-card__title {
font-size: 22px;
}
.sh-auth-card__text {
font-size: 13px;
}
}
/* ZONE_Z22_END */
/* ==========================================================================
ZONE Z23 — Full header redesign (logged-in + logged-out states)
========================================================================== */
/* ---- Root header shell ---- */
body:not(.wp-admin) header.site-header,
body:not(.wp-admin) .site-header#masthead {
background: rgba(255, 255, 255, 0.96) !important;
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid var(--sh-divider) !important;
box-shadow: 0 1px 0 rgba(92, 99, 183, 0.02);
padding: 8px 0 !important;
transition: box-shadow 200ms var(--sh-ease), padding 200ms var(--sh-ease);
}
body:not(.wp-admin) header.site-header.scrollDown,
body:not(.wp-admin) header.site-header.scrollUp {
box-shadow: 0 4px 20px rgba(92, 99, 183, 0.06) !important;
}
body:not(.wp-admin) .site-header .content-wrap {
gap: var(--sh-space-4);
padding: 6px 24px !important;
}
/* ---- LOGO: force visible (beat legacy display:none) ---- */
body:not(.wp-admin) .site-header .logo-wrap {
flex-shrink: 0;
}
body:not(.wp-admin) .site-header .logo-wrap a.navbar-brand,
body:not(.wp-admin) .site-header .logo-wrap a.navbar-brand.high-res {
display: inline-flex !important;
align-items: center;
padding: 0 !important;
height: auto !important;
}
/* Show only one — hide the duplicate .high-res on desktop (the other is hidden by default by legacy).
Strategy: show BOTH but hide the duplicate via display:none on one. */
body:not(.wp-admin) .site-header .logo-wrap a.navbar-brand:not(.high-res) {
display: none !important;
}
body:not(.wp-admin) .site-header .logo-wrap a.navbar-brand.high-res {
display: inline-flex !important;
}
/* On mobile, legacy flips — show regular, hide high-res. Let legacy drive it but guarantee
at least one is visible */
@media (max-width: 768px) {
body:not(.wp-admin) .site-header .logo-wrap a.navbar-brand:not(.high-res) {
display: inline-flex !important;
}
body:not(.wp-admin) .site-header .logo-wrap a.navbar-brand.high-res {
display: none !important;
}
}
body:not(.wp-admin) .site-header .navbar-brand img {
max-height: 40px !important;
height: 40px !important;
width: auto !important;
display: block !important;
object-fit: contain;
transition: transform 300ms var(--sh-ease);
}
body:not(.wp-admin) .site-header .navbar-brand:hover img {
transform: scale(1.03);
}
/* ---- NAV (center) ---- */
body:not(.wp-admin) .site-header #site-navigation {
flex: 1;
justify-content: center;
}
body:not(.wp-admin) .site-header #primary-menu {
display: flex !important;
gap: 2px;
list-style: none;
padding: 0;
margin: 0;
}
body:not(.wp-admin) .site-header #primary-menu > li {
list-style: none;
position: relative;
}
body:not(.wp-admin) .site-header #primary-menu > li > a {
display: inline-block;
padding: 10px 14px !important;
color: var(--sh-text) !important;
font-weight: var(--sh-fw-medium) !important;
font-size: 14px !important;
border-radius: var(--sh-radius-pill) !important;
text-decoration: none !important;
transition: color 200ms var(--sh-ease), background-color 200ms var(--sh-ease);
position: relative;
}
body:not(.wp-admin) .site-header #primary-menu > li > a:hover {
color: var(--sh-accent) !important;
background: var(--sh-accent-100);
}
/* Active item — soft-pink pill like toolbar hover/active */
body:not(.wp-admin) .site-header #primary-menu > li.current-menu-item > a,
body:not(.wp-admin) .site-header #primary-menu > li.current_page_item > a {
color: var(--sh-accent) !important;
background: var(--sh-accent-100) !important;
}
body:not(.wp-admin) .site-header #primary-menu > li.current-menu-item > a::after,
body:not(.wp-admin) .site-header #primary-menu > li.current_page_item > a::after {
content: none !important;
display: none !important;
background: none !important;
border: 0 !important;
}
html body:not(.wp-admin) .site-header #site-navigation ul#primary-menu > li > a:hover,
html body:not(.wp-admin) .site-header #site-navigation ul#primary-menu > li.current-menu-item > a,
html body:not(.wp-admin) .site-header #site-navigation ul#primary-menu > li.current_page_item > a {
color: var(--sh-accent) !important;
background: var(--sh-accent-100) !important;
}
html body:not(.wp-admin) .site-header #site-navigation ul#primary-menu > li > a::after,
html body:not(.wp-admin) .site-header #site-navigation ul#primary-menu > li.current-menu-item > a::after,
html body:not(.wp-admin) .site-header #site-navigation ul#primary-menu > li.current_page_item > a::after {
content: none !important;
display: none !important;
}
/* ---- RIGHT SIDE AREA ---- */
body:not(.wp-admin) .site-header .site-header-actions,
body:not(.wp-admin) .site-header .right-content {
display: flex;
align-items: center;
gap: var(--sh-space-3);
flex-shrink: 0;
}
/* ---- LOGGED-IN: User toolbar ---- */
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar {
display: flex !important;
align-items: center;
gap: 4px;
list-style: none;
padding: 0;
margin: 0;
}
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.wpee-menu {
list-style: none;
position: relative;
}
/* Icon buttons (gifts / message / friend request / my account) */
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.wpee-menu > a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 12px !important;
color: var(--sh-text-2) !important;
font-size: 13px !important;
font-weight: var(--sh-fw-medium) !important;
background: transparent !important;
border-radius: var(--sh-radius-pill) !important;
text-decoration: none !important;
transition: var(--sh-transition-default);
position: relative;
min-width: 40px;
min-height: 40px;
}
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.wpee-menu > a:hover {
background: var(--sh-accent-100) !important;
color: var(--sh-accent) !important;
}
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.wpee-menu > a > i {
font-size: 15px;
}
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar .wpee-header-notif-label {
font-size: 12px;
font-weight: var(--sh-fw-medium);
letter-spacing: 0.01em;
}
/* On narrow header, hide labels — icon-only */
@media (max-width: 1100px) {
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar .wpee-header-notif-label {
display: none !important;
}
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.wpee-menu > a {
width: 40px;
padding: 8px !important;
}
}
/* Notification counter badge */
body:not(.wp-admin).logged-in .site-header .wpee-count-num {
position: absolute;
top: 2px;
right: 2px;
min-width: 18px;
height: 18px;
padding: 0 5px;
background: var(--sh-accent) !important;
color: #fff !important;
font-size: 10px !important;
font-weight: var(--sh-fw-bold);
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 2px var(--sh-bg);
animation: sh-pulse-badge 2s ease-in-out infinite;
z-index: 2;
line-height: 1;
}
@keyframes sh-pulse-badge {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
/* Avatar chip */
body:not(.wp-admin).logged-in .site-header .wpee-header-profile-avatar-link.r-circle {
display: inline-flex;
padding: 2px;
border-radius: 50%;
background: var(--sh-gradient, linear-gradient(135deg, #5c63b7, #e4519e));
transition: transform 220ms var(--sh-ease-spring), box-shadow 220ms var(--sh-ease);
min-width: auto;
position: relative;
overflow: visible;
}
body:not(.wp-admin).logged-in .site-header .wpee-header-profile-avatar-link:hover {
transform: scale(1.08);
background: transparent !important;
box-shadow: 0 0 0 3px var(--sh-accent-100), 0 8px 20px rgba(228,81,158,0.28);
}
body:not(.wp-admin).logged-in .site-header .wpee-header-profile-avatar-link img.header-profile-image {
width: 38px !important;
height: 38px !important;
border-radius: 50% !important;
border: 2px solid #fff !important;
object-fit: cover;
display: block;
}
/* Online pulse dot on avatar */
body:not(.wp-admin).logged-in .site-header .notification-profile-direct .wpee-header-profile-avatar-link::after {
content: "";
position: absolute;
bottom: 1px;
right: 1px;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--sh-success);
border: 2px solid #fff;
box-shadow: 0 0 0 2px rgba(34,197,94,0.25);
z-index: 2;
}
/* ---- LOGGED-OUT: Register + Login buttons ---- */
body:not(.wp-admin).not-logged-in .site-header .wpee-header-auth-links {
display: flex !important;
align-items: center;
gap: 8px;
}
body:not(.wp-admin).not-logged-in .site-header .header-register-btn,
body.not-logged-in .site-header .header-register-btn {
display: inline-flex !important;
align-items: center;
gap: 6px;
padding: 9px 18px !important;
background: var(--sh-accent) !important;
color: #fff !important;
border-radius: var(--sh-radius-pill) !important;
border: 1.5px solid transparent !important;
font-weight: var(--sh-fw-semibold) !important;
font-size: 13px !important;
text-decoration: none !important;
box-shadow: 0 6px 18px rgba(228, 81, 158, 0.28) !important;
transition: var(--sh-transition-default);
min-height: 38px;
white-space: nowrap;
}
body:not(.wp-admin).not-logged-in .site-header .header-register-btn:hover,
body.not-logged-in .site-header .header-register-btn:hover {
background: var(--sh-accent-600) !important;
color: #fff !important;
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(228, 81, 158, 0.38) !important;
}
body:not(.wp-admin).not-logged-in .site-header .header-login-btn,
body.not-logged-in .site-header .header-login-btn {
display: inline-flex !important;
align-items: center;
gap: 6px;
padding: 9px 18px !important;
background: transparent !important;
color: var(--sh-text) !important;
border: 1.5px solid var(--sh-border-strong) !important;
border-radius: var(--sh-radius-pill) !important;
font-weight: var(--sh-fw-semibold) !important;
font-size: 13px !important;
text-decoration: none !important;
transition: var(--sh-transition-default);
min-height: 38px;
box-shadow: none !important;
background-image: none !important;
white-space: nowrap;
}
body:not(.wp-admin).not-logged-in .site-header .header-login-btn:hover,
body.not-logged-in .site-header .header-login-btn:hover {
background: var(--sh-bg-soft) !important;
border-color: var(--sh-accent) !important;
color: var(--sh-accent) !important;
transform: translateY(-1px);
}
body:not(.wp-admin).not-logged-in .site-header .header-register-btn > i,
body:not(.wp-admin).not-logged-in .site-header .header-login-btn > i,
body.not-logged-in .site-header .header-register-btn > i,
body.not-logged-in .site-header .header-login-btn > i {
font-size: 11px;
opacity: 0.85;
}
/* ---- MOBILE HEADER (≤768px) ---- */
@media (max-width: 768px) {
body:not(.wp-admin) .site-header .content-wrap {
padding: 6px 16px !important;
gap: 8px;
}
body:not(.wp-admin) .site-header .navbar-brand img {
max-height: 32px !important;
height: 32px !important;
}
/* Hide main nav, rely on hamburger */
body:not(.wp-admin) .site-header .main-navigation .menu-main-menu-container {
display: none;
}
body:not(.wp-admin) .site-header .ham-icon {
display: inline-flex;
}
/* Auth buttons: icon-only pills */
body:not(.wp-admin).not-logged-in .site-header .header-register-btn,
body:not(.wp-admin).not-logged-in .site-header .header-login-btn,
body.not-logged-in .site-header .header-register-btn,
body.not-logged-in .site-header .header-login-btn {
padding: 8px 14px !important;
font-size: 12px !important;
}
/* Hide user toolbar notification labels always on mobile */
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar .wpee-header-notif-label {
display: none !important;
}
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar {
gap: 0;
}
/* Hide some nav items on very small (gift/friend-request) to save space — keep message + avatar */
@media (max-width: 480px) {
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.wpee-menu:not(.notification-profile-direct):not(:nth-last-child(1)):not(:nth-last-child(2)) {
display: none;
}
}
}
/* Language switcher wrapper (empty currently) — hide if empty */
body:not(.wp-admin) .site-header .lang-wrap:empty {
display: none;
}
/* Hamburger icon */
body:not(.wp-admin) .site-header .ham-icon {
display: none;
width: 36px;
height: 36px;
border-radius: 50%;
align-items: center;
justify-content: center;
cursor: pointer;
background: var(--sh-bg-soft);
transition: var(--sh-transition-default);
}
body:not(.wp-admin) .site-header .ham-icon:hover {
background: var(--sh-accent-100);
}
body:not(.wp-admin) .site-header .ham-icon > span {
display: block;
width: 16px;
height: 2px;
background: var(--sh-text);
position: relative;
border-radius: 2px;
}
body:not(.wp-admin) .site-header .ham-icon > span::before,
body:not(.wp-admin) .site-header .ham-icon > span::after {
content: "";
position: absolute;
left: 0;
width: 16px;
height: 2px;
background: var(--sh-text);
border-radius: 2px;
}
body:not(.wp-admin) .site-header .ham-icon > span::before { top: -5px; }
body:not(.wp-admin) .site-header .ham-icon > span::after { top: 5px; }
/* ZONE_Z23_END */
/* ==========================================================================
ZONE Z24 — Remove online dot + Logout link + mobile header polish
========================================================================== */
/* Remove the pulsing green online dot from avatar (user wanted it gone) */
body:not(.wp-admin).logged-in .site-header .notification-profile-direct .wpee-header-profile-avatar-link::after {
content: none !important;
display: none !important;
}
/* Logout menu item styling */
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.sh-logout-item {
list-style: none;
}
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.sh-logout-item > a.sh-logout-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 12px !important;
color: var(--sh-text-muted) !important;
font-size: 13px !important;
font-weight: var(--sh-fw-medium) !important;
background: transparent !important;
border-radius: var(--sh-radius-pill) !important;
text-decoration: none !important;
transition: var(--sh-transition-default);
min-width: 40px;
min-height: 40px;
}
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.sh-logout-item > a.sh-logout-link > i {
font-size: 15px;
}
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.sh-logout-item > a.sh-logout-link:hover {
background: rgba(239, 68, 68, 0.08) !important;
color: var(--sh-danger, #ef4444) !important;
}
/* On narrow header — icon only (like other items) */
@media (max-width: 1100px) {
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.sh-logout-item > a.sh-logout-link {
width: 40px;
padding: 8px !important;
}
}
/* ============ MOBILE/TABLET HEADER POLISH ============ */
/* Show hamburger, hide nav on narrow screens */
@media (max-width: 1024px) {
body:not(.wp-admin) .site-header .main-navigation .menu-main-menu-container {
display: none !important;
}
body:not(.wp-admin) .site-header .ham-icon {
display: inline-flex !important;
}
}
/* Sliding mobile menu — when hamburger clicked */
body:not(.wp-admin) .site-header.sh-mobile-nav-open .main-navigation .menu-main-menu-container {
display: block !important;
position: fixed !important;
top: 0;
right: 0;
bottom: 0;
width: 85vw;
max-width: 320px;
background: #fff;
z-index: 10002;
padding: 72px 16px 24px;
overflow-y: auto;
box-shadow: -20px 0 50px rgba(0,0,0,0.18);
transform: translateX(0);
animation: sh-slide-in-right 320ms var(--sh-ease-out);
}
@keyframes sh-slide-in-right {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
body:not(.wp-admin) .site-header.sh-mobile-nav-open #primary-menu {
flex-direction: column !important;
gap: 2px !important;
align-items: stretch !important;
}
body:not(.wp-admin) .site-header.sh-mobile-nav-open #primary-menu > li > a {
padding: 14px 18px !important;
font-size: 15px !important;
border-radius: var(--sh-radius-md) !important;
justify-content: flex-start !important;
width: 100%;
display: block;
text-align: left;
}
body:not(.wp-admin) .site-header.sh-mobile-nav-open #primary-menu > li.current-menu-item > a::after {
display: none;
}
body:not(.wp-admin) .site-header.sh-mobile-nav-open #primary-menu > li.current-menu-item > a {
background: var(--sh-accent-100) !important;
color: var(--sh-accent) !important;
}
/* Mobile nav overlay backdrop */
body.sh-mobile-nav-open::before {
content: "";
position: fixed;
inset: 0;
background: rgba(26, 26, 46, 0.55);
backdrop-filter: blur(4px);
z-index: 10001;
}
/* Close button appears inside slid-in menu */
body:not(.wp-admin) .site-header.sh-mobile-nav-open .main-navigation .menu-main-menu-container::before {
content: "\f00d";
font-family: "FontAwesome";
position: absolute;
top: 16px;
right: 16px;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--sh-bg-soft);
color: var(--sh-text);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
cursor: pointer;
z-index: 5;
}
/* ============ MOBILE BOTTOM-SHEET FIX for mobile screens ============ */
@media (max-width: 1024px) {
/* Hide the Log out label on mobile toolbar — icon only */
body:not(.wp-admin).logged-in .site-header .sh-logout-link .wpee-header-notif-label {
display: none !important;
}
/* Tighten gap on mobile between toolbar items */
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar {
gap: 0 !important;
}
}
/* Extra narrow — hide some icons to save space */
@media (max-width: 480px) {
/* Keep only: avatar, message, logout */
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.wpee-menu:not(.notification-profile-direct):not(.sh-logout-item) {
display: none !important;
}
/* Keep message visible by re-showing if it has the envelope icon */
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.wpee-menu:has(.fa-envelope) {
display: inline-flex !important;
}
}
/* ZONE_Z24_END */
/* ==========================================================================
ZONE Z25 — "My Account" dropdown menu (desktop + mobile)
========================================================================== */
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.wpee_active_link {
position: relative;
}
/* The dropdown menu */
.sh-account-menu {
position: absolute;
top: calc(100% + 10px);
right: 0;
min-width: 260px;
background: var(--sh-bg);
border: 1px solid var(--sh-divider);
border-radius: var(--sh-radius-xl);
box-shadow: 0 20px 48px rgba(92, 99, 183, 0.22);
padding: var(--sh-space-2);
z-index: 500;
opacity: 0;
visibility: hidden;
transform: translateY(-8px) scale(0.96);
transition: opacity 200ms var(--sh-ease),
visibility 0s linear 200ms,
transform 220ms var(--sh-ease-spring);
transform-origin: top right;
overflow: hidden;
}
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.wpee_active_link.sh-account-menu-open .sh-account-menu,
.sh-account-menu-open > .sh-account-menu {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
transition: opacity 220ms var(--sh-ease),
visibility 0s linear 0s,
transform 240ms var(--sh-ease-spring);
}
/* Arrow notch above menu */
.sh-account-menu::before {
content: "";
position: absolute;
top: -6px;
right: 18px;
width: 12px;
height: 12px;
background: var(--sh-bg);
border-top: 1px solid var(--sh-divider);
border-left: 1px solid var(--sh-divider);
transform: rotate(45deg);
z-index: -1;
}
/* Header with avatar + name */
.sh-account-menu__head {
display: flex;
align-items: center;
gap: 10px;
padding: var(--sh-space-3) var(--sh-space-3) var(--sh-space-2);
}
.sh-account-menu__avatar {
width: 42px;
height: 42px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #fff;
box-shadow: 0 0 0 2px var(--sh-accent-100);
}
.sh-account-menu__head-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.sh-account-menu__name {
font-weight: var(--sh-fw-bold);
color: var(--sh-text);
font-size: 14px;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 160px;
}
.sh-account-menu__view {
font-size: 11px;
color: var(--sh-accent);
text-decoration: none !important;
font-weight: var(--sh-fw-semibold);
letter-spacing: 0.02em;
}
.sh-account-menu__view:hover {
color: var(--sh-accent-600);
}
/* Divider */
.sh-account-menu__divider {
height: 1px;
background: var(--sh-divider);
margin: 4px 8px;
}
/* Menu items */
.sh-account-menu__item {
display: flex !important;
align-items: center;
gap: 12px;
padding: 10px 14px !important;
border-radius: var(--sh-radius-md);
color: var(--sh-text-2) !important;
font-size: 13px;
font-weight: var(--sh-fw-medium) !important;
text-decoration: none !important;
transition: background-color 180ms var(--sh-ease), color 180ms var(--sh-ease);
cursor: pointer;
line-height: 1.2;
}
.sh-account-menu__item > i {
width: 20px;
text-align: center;
font-size: 14px;
color: var(--sh-text-muted);
flex-shrink: 0;
}
.sh-account-menu__item > span {
flex: 1;
}
.sh-account-menu__item:hover {
background: var(--sh-accent-100);
color: var(--sh-accent) !important;
}
.sh-account-menu__item:hover > i {
color: var(--sh-accent);
}
/* Upgrade highlight */
.sh-account-menu__item--upgrade {
background: linear-gradient(135deg, var(--sh-primary-50) 0%, var(--sh-soft) 100%);
color: var(--sh-primary-700) !important;
font-weight: var(--sh-fw-semibold) !important;
margin: 4px 6px;
border-radius: var(--sh-radius-md);
}
.sh-account-menu__item--upgrade > i {
color: var(--sh-accent);
}
.sh-account-menu__item--upgrade:hover {
background: linear-gradient(135deg, var(--sh-primary-100) 0%, var(--sh-accent-100) 100%);
color: var(--sh-primary-700) !important;
}
/* Logout item — danger tint */
.sh-account-menu__item--logout {
color: var(--sh-danger) !important;
}
.sh-account-menu__item--logout > i {
color: var(--sh-danger);
}
.sh-account-menu__item--logout:hover {
background: rgba(239, 68, 68, 0.08);
color: var(--sh-danger) !important;
}
/* ============ MOBILE adaptation: full-width drawer from bottom ============ */
@media (max-width: 640px) {
.sh-account-menu {
position: fixed;
top: auto;
right: 0;
left: 0;
bottom: 0;
min-width: 0;
max-width: 100vw;
border-radius: 24px 24px 0 0;
transform: translateY(100%);
padding: 14px 12px calc(20px + env(safe-area-inset-bottom, 0px));
box-shadow: 0 -24px 60px rgba(26, 26, 46, 0.25);
z-index: 10100;
transform-origin: center bottom;
}
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.wpee_active_link.sh-account-menu-open .sh-account-menu {
transform: translateY(0);
}
.sh-account-menu::before {
display: none;
}
/* Grip indicator at top of mobile sheet */
.sh-account-menu::after {
content: "";
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 4px;
border-radius: 999px;
background: var(--sh-border-strong);
}
/* Backdrop when open on mobile */
body:not(.wp-admin).logged-in:has(.wpee_active_link.sh-account-menu-open)::after {
content: "";
position: fixed;
inset: 0;
background: rgba(26, 26, 46, 0.55);
backdrop-filter: blur(4px);
z-index: 10099;
pointer-events: none;
animation: sh-auth-fade-in 220ms var(--sh-ease-out);
}
.sh-account-menu__head {
padding: 18px 16px 12px;
}
.sh-account-menu__item {
padding: 14px 16px !important;
font-size: 14px;
}
.sh-account-menu__item > i {
font-size: 16px;
}
}
/* Hide the redundant Log out toolbar item since menu now has it */
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.sh-logout-item {
display: none !important;
}
/* ZONE_Z25_END */
/* ==========================================================================
ZONE Z26 — Dropdown ONLY on mobile; desktop navigates + logout visible
========================================================================== */
/* Desktop (>640px): hide dropdown, show logout again */
@media (min-width: 641px) {
/* Dropdown never appears on desktop */
.sh-account-menu {
display: none !important;
}
/* Bring the standalone Log out toolbar item back */
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.sh-logout-item {
display: inline-flex !important;
}
/* Make sure "My account" li is just a normal link on desktop — no positioning / dropdown trigger */
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.sh-has-account-menu {
position: static;
}
}
/* Mobile (≤640px): dropdown sheet visible, logout standalone hidden */
@media (max-width: 640px) {
/* Mark the li as positioning anchor if JS-added hook class exists */
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.sh-has-account-menu {
position: relative;
}
/* Dropdown forced display */
.sh-account-menu {
display: block !important;
}
/* Hide standalone Log out item — it's now inside the dropdown */
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.sh-logout-item {
display: none !important;
}
}
/* ZONE_Z26_END */
/* ==========================================================================
ZONE Z27 — Fix mobile header right side + tablet dropdown active
========================================================================== */
/* DESKTOP (>1024px) */
@media (min-width: 1025px) {
/* No dropdown on desktop */
.sh-account-menu {
display: none !important;
}
/* Standalone Log out visible on desktop */
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.sh-logout-item {
display: inline-flex !important;
}
/* My Account normal static, navigates on click */
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.sh-has-account-menu {
position: static;
}
}
/* TABLET + MOBILE (≤1024px): dropdown active, desktop toolbar items hidden */
@media (max-width: 1024px) {
/* Hide the standalone Log out in toolbar — it's inside the dropdown */
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.sh-logout-item {
display: none !important;
}
/* Hide Gifts / Message / Friend Request from toolbar — accessible via account menu */
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.wpee-menu:not(.notification-profile-direct):not(.sh-has-account-menu):not(.sh-logout-item) {
display: none !important;
}
/* Avatar + My Account icons stay — both trigger the dropdown */
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.notification-profile-direct,
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.sh-has-account-menu {
display: inline-flex !important;
position: relative;
}
/* Avatar link on mobile/tablet no longer navigates — it opens menu */
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.notification-profile-direct > a {
cursor: pointer;
}
/* Dropdown positioned from the trigger li */
.sh-account-menu {
display: block !important;
/* Opacity/visibility controlled by .sh-account-menu-open above */
}
/* Ensure the My Account label "My account" doesn't take width — icon only on mobile */
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar .wpee-header-notif-label {
display: none !important;
}
/* Reduce toolbar gap for tidy right side */
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar {
gap: 2px !important;
}
}
/* On very narrow mobile (≤480) — hide My Account icon too, rely on avatar tap */
@media (max-width: 480px) {
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.sh-has-account-menu {
display: none !important;
}
/* Ensure avatar is visible and the trigger */
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.notification-profile-direct {
display: inline-flex !important;
}
}
/* Hamburger icon polish on mobile — larger tap target */
@media (max-width: 1024px) {
body:not(.wp-admin) .site-header .ham-icon {
display: inline-flex !important;
width: 40px !important;
height: 40px !important;
border-radius: 50%;
align-items: center;
justify-content: center;
background: var(--sh-bg-soft);
cursor: pointer;
flex-shrink: 0;
margin-left: 6px;
}
body:not(.wp-admin) .site-header .ham-icon:hover {
background: var(--sh-accent-100);
}
body:not(.wp-admin) .site-header .ham-icon > span {
position: relative;
width: 18px;
height: 2px;
background: var(--sh-text);
border-radius: 2px;
display: block;
}
body:not(.wp-admin) .site-header .ham-icon > span::before,
body:not(.wp-admin) .site-header .ham-icon > span::after {
content: "";
position: absolute;
left: 0;
width: 18px;
height: 2px;
background: var(--sh-text);
border-radius: 2px;
}
body:not(.wp-admin) .site-header .ham-icon > span::before { top: -6px; }
body:not(.wp-admin) .site-header .ham-icon > span::after { top: 6px; }
/* Layout: keep left-content row (logo + ham) and right-content row (avatar + menu) */
body:not(.wp-admin) .site-header .left-content {
display: flex !important;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
body:not(.wp-admin) .site-header .right-content {
display: flex !important;
align-items: center;
gap: 4px;
flex-shrink: 0;
margin-left: auto;
}
/* Content-wrap spacing tighter */
body:not(.wp-admin) .site-header .content-wrap {
padding: 6px 12px !important;
gap: 8px !important;
}
/* Ensure logo is visible on mobile */
body:not(.wp-admin) .site-header .logo-wrap a.navbar-brand img,
body:not(.wp-admin) .site-header .logo-wrap a.navbar-brand.high-res img {
max-height: 34px !important;
height: 34px !important;
width: auto !important;
display: block !important;
}
}
/* ZONE_Z27_END */
/* ==========================================================================
ZONE Z28 — Remove hamburger, kill dropdown, always-visible Log Out
========================================================================== */
/* Hide hamburger icon entirely at ALL viewports */
body:not(.wp-admin) .site-header .ham-icon,
body:not(.wp-admin) .site-header .menu-toggle {
display: none !important;
}
/* Hide the account dropdown at ALL viewports (never show) */
.sh-account-menu {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Always show the standalone Log Out link in header toolbar */
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.sh-logout-item {
display: inline-flex !important;
}
/* "My account" li — plain link, no position:relative, no dropdown trigger */
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.sh-has-account-menu {
position: static !important;
}
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.sh-has-account-menu.sh-account-menu-open {
/* defensive reset if class got added */
}
/* On tablet + mobile: restore all toolbar items (Gifts, Message, Friend Request) */
@media (max-width: 1024px) {
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.wpee-menu {
display: inline-flex !important;
}
/* Labels still hidden — icon-only to save space */
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar .wpee-header-notif-label {
display: none !important;
}
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar {
gap: 2px !important;
}
}
/* Very narrow (≤480) — hide less-essential items to save space */
@media (max-width: 480px) {
/* Hide Gifts + Friend Request icons on very narrow — keep: Message, Avatar, My Account, Log Out */
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.wpee-menu:has(.fa-gift),
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.wpee-menu:has(.fa-users) {
display: none !important;
}
}
/* Since hamburger is gone, the main navigation on mobile — still collapsed via drawer isn't needed.
Simplify: on mobile, hide main nav entirely (user can access pages via account menu + home logo). */
@media (max-width: 1024px) {
body:not(.wp-admin) .site-header .main-navigation {
display: none !important;
}
}
/* Keep the mobile drawer backdrop OFF since we no longer have hamburger */
body.sh-mobile-nav-open::before {
display: none !important;
}
body.sh-mobile-nav-open {
overflow: auto !important;
}
/* ZONE_Z28_END */
/* ==========================================================================
ZONE Z29 — FORCE clickability of header toolbar links
Nuclear override: guarantee tags in header receive pointer events.
========================================================================== */
/* 1. Remove the entire injected account menu from DOM-level interaction */
.sh-account-menu,
.sh-account-menu * {
display: none !important;
pointer-events: none !important;
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
width: 0 !important;
height: 0 !important;
visibility: hidden !important;
opacity: 0 !important;
}
/* 2. All LIs in the header user toolbar are clickable */
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li,
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li > a,
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li > a * {
pointer-events: auto !important;
position: relative;
z-index: 2;
}
/* 3. Avatar link — reset any residual overlay/positioning issues */
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.notification-profile-direct {
position: relative !important;
z-index: 3;
}
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.notification-profile-direct > a {
pointer-events: auto !important;
cursor: pointer !important;
display: inline-flex !important;
z-index: 3;
position: relative;
}
/* 4. My Account link — force clickable */
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.sh-has-account-menu > a,
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.wpee-menu > a {
pointer-events: auto !important;
cursor: pointer !important;
position: relative;
z-index: 3;
}
/* 5. No ::after / ::before overlay pseudos on the li's */
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li::before,
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li::after {
content: none !important;
}
/* 6. Kill any inherited blur/opacity that might make element unclickable */
body:not(.wp-admin).logged-in .site-header,
body:not(.wp-admin).logged-in .site-header * {
filter: none !important;
}
/* ZONE_Z29_END */
/* ==========================================================================
ZONE Z30 — Popup menu on mobile/tablet w/ main nav + profile options
(Supersedes Z29 hide rules)
========================================================================== */
/* DESKTOP (>1024): menu hidden, clicks navigate normally */
@media (min-width: 1025px) {
.sh-account-menu {
display: none !important;
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
width: 0 !important;
height: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
}
}
/* TABLET + MOBILE (≤1024): popup menu from bottom of screen */
@media (max-width: 1024px) {
.sh-account-menu,
.sh-account-menu * {
/* Override Z29 hiding at mobile */
visibility: visible;
pointer-events: auto;
}
.sh-account-menu {
display: block !important;
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important;
width: 100% !important;
max-width: 100vw !important;
height: auto !important;
max-height: 90vh !important;
min-width: 0 !important;
border-radius: 24px 24px 0 0 !important;
padding: 20px 12px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
background: var(--sh-bg) !important;
box-shadow: 0 -24px 60px rgba(26, 26, 46, 0.30) !important;
border: 0 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
z-index: 10050 !important;
transform: translateY(100%);
transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
opacity: 1 !important;
visibility: visible !important;
}
/* Arrow notch hidden on mobile */
.sh-account-menu::before {
display: none !important;
}
/* iOS-style grip indicator */
.sh-account-menu::after {
content: "";
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 4px;
border-radius: 999px;
background: var(--sh-border-strong);
}
/* Open state */
body.sh-account-popup-open .sh-account-menu,
.sh-account-menu-open > .sh-account-menu {
transform: translateY(0) !important;
pointer-events: auto !important;
}
/* Backdrop — append to body for open state */
body.sh-account-popup-open::before {
content: "";
position: fixed;
inset: 0;
background: rgba(26, 26, 46, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 10040;
animation: sh-auth-fade-in 220ms var(--sh-ease-out);
}
body.sh-account-popup-open {
overflow: hidden !important;
}
/* Menu head */
.sh-account-menu__head {
padding: 16px 16px 12px;
margin-top: 12px;
border-bottom: 1px solid var(--sh-divider);
margin-bottom: 8px;
}
/* Section label */
.sh-account-menu__section-label {
display: block;
font-size: 10px;
font-weight: var(--sh-fw-bold);
color: var(--sh-text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 8px 16px 6px;
margin-top: 4px;
}
/* Menu items bigger on mobile */
.sh-account-menu__item {
padding: 13px 16px !important;
font-size: 14px !important;
border-radius: var(--sh-radius-md) !important;
margin: 1px 4px;
}
.sh-account-menu__item > i {
font-size: 15px !important;
width: 22px !important;
}
/* Active main-nav item */
.sh-account-menu__item--active {
background: var(--sh-accent-100) !important;
color: var(--sh-accent) !important;
}
.sh-account-menu__item--active > i {
color: var(--sh-accent);
}
/* Hide the standalone Log out toolbar item on mobile (it's in the popup) */
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.sh-logout-item {
display: none !important;
}
/* Hide secondary icons: Gifts / Message / Friend Request — accessible via popup */
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.wpee-menu:not(.notification-profile-direct):not(.sh-has-account-menu) {
display: none !important;
}
/* Keep Avatar + My Account both visible — both open the popup */
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.notification-profile-direct,
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.sh-has-account-menu {
display: inline-flex !important;
}
}
/* On very narrow mobile: hide My Account icon (avatar alone opens popup) */
@media (max-width: 420px) {
body:not(.wp-admin).logged-in .site-header .wpee-header-user-toolbar > li.sh-has-account-menu {
display: none !important;
}
}
/* ZONE_Z30_END */
/* ==========================================================================
ZONE Z31 — Body-level popup menu (escapes header stacking context)
========================================================================== */
/* DESKTOP: menu stays inside and is hidden */
@media (min-width: 1025px) {
body > .sh-account-menu {
display: none !important;
}
}
/* MOBILE / TABLET: menu lives in body, fixed to viewport */
@media (max-width: 1024px) {
/* When menu is a direct child of body (moved by JS) */
body > .sh-account-menu {
display: block !important;
position: fixed !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
top: auto !important;
width: 100% !important;
max-width: 100vw !important;
max-height: 90vh !important;
border-radius: 24px 24px 0 0 !important;
padding: 20px 12px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
background: var(--sh-bg) !important;
box-shadow: 0 -24px 60px rgba(26, 26, 46, 0.30) !important;
border: 0 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
z-index: 10050 !important;
transform: translateY(100%);
transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
opacity: 1 !important;
visibility: visible !important;
pointer-events: none;
}
body > .sh-account-menu::before {
display: none !important;
}
body > .sh-account-menu::after {
content: "";
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 4px;
border-radius: 999px;
background: var(--sh-border-strong);
}
/* Open state */
body.sh-account-popup-open > .sh-account-menu {
transform: translateY(0) !important;
pointer-events: auto !important;
}
/* When still inside li (hasn't been moved yet) — force hidden */
.site-header .sh-account-menu {
display: none !important;
}
/* Backdrop */
body.sh-account-popup-open::before {
content: "";
position: fixed;
inset: 0;
background: rgba(26, 26, 46, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 10040;
animation: sh-auth-fade-in 220ms var(--sh-ease-out);
}
body.sh-account-popup-open {
overflow: hidden !important;
}
}
/* ZONE_Z31_END */
/* ==========================================================================
ZONE Z32 — Fix menu children visibility (Z29 * hide was too aggressive)
========================================================================== */
/* Override Z29 *-selector that collapsed all children to 0×0 offscreen */
@media (max-width: 1024px) {
body > .sh-account-menu > *,
body > .sh-account-menu a,
body > .sh-account-menu div,
body > .sh-account-menu span,
body > .sh-account-menu img,
body > .sh-account-menu i {
display: revert !important;
position: revert !important;
left: auto !important;
top: auto !important;
width: auto !important;
height: auto !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
}
/* Re-apply proper display values that 'revert' might not restore correctly */
body > .sh-account-menu > a.sh-account-menu__item {
display: flex !important;
}
body > .sh-account-menu > .sh-account-menu__head {
display: flex !important;
}
body > .sh-account-menu > .sh-account-menu__section-label {
display: block !important;
}
body > .sh-account-menu > .sh-account-menu__divider {
display: block !important;
height: 1px !important;
}
body > .sh-account-menu > .sh-account-menu__head > .sh-account-menu__head-text {
display: flex !important;
flex-direction: column;
}
body > .sh-account-menu__avatar,
body > .sh-account-menu img.sh-account-menu__avatar,
body > .sh-account-menu .sh-account-menu__avatar {
display: block !important;
width: 42px !important;
height: 42px !important;
}
/* Icon sizing inside items */
body > .sh-account-menu .sh-account-menu__item > i {
width: 22px !important;
font-size: 15px !important;
flex-shrink: 0;
}
}
/* ZONE_Z32_END */
/* ==========================================================================
ZONE Z33 — Header logged-out buttons horizontal + FOOTER full redesign
========================================================================== */
/* ---- HEADER logged-out: force Register + Login inline ---------------- */
body.not-logged-in .site-header .wpee-header-auth-links,
body.not-logged-in .site-header .wpee-header-auth-links--split,
body:not(.wp-admin).not-logged-in .site-header .wpee-header-auth-links {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 8px !important;
}
@media (max-width: 640px) {
body.not-logged-in .site-header .header-register-btn,
body.not-logged-in .site-header .header-login-btn,
body:not(.wp-admin).not-logged-in .site-header .header-register-btn,
body:not(.wp-admin).not-logged-in .site-header .header-login-btn {
padding: 8px 14px !important;
font-size: 12px !important;
white-space: nowrap !important;
min-height: 36px;
}
body.not-logged-in .site-header .header-register-btn > i,
body.not-logged-in .site-header .header-login-btn > i {
display: none !important;
}
}
/* ==========================================================================
FOOTER — Pre-footer CTA banner + new 4-col layout + dark gradient
========================================================================== */
/* ---- Pre-footer CTA banner (logged-out only) ---- */
.sh-footer-cta {
position: relative;
background: linear-gradient(135deg, #5c63b7 0%, #9a4eba 50%, #e4519e 100%);
color: #fff;
padding: 72px 24px;
text-align: center;
overflow: hidden;
isolation: isolate;
}
.sh-footer-cta__blob {
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: 0.4;
pointer-events: none;
z-index: 0;
}
.sh-footer-cta__blob--a {
top: -80px;
left: -80px;
width: 320px;
height: 320px;
background: rgba(255, 255, 255, 0.35);
}
.sh-footer-cta__blob--b {
bottom: -100px;
right: -100px;
width: 360px;
height: 360px;
background: rgba(228, 81, 158, 0.55);
}
.sh-footer-cta__inner {
position: relative;
z-index: 1;
max-width: 760px;
margin: 0 auto;
}
.sh-footer-cta__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
background: rgba(255, 255, 255, 0.18);
border: 1px solid rgba(255, 255, 255, 0.28);
backdrop-filter: blur(8px);
border-radius: 999px;
font-size: 13px;
font-weight: 600;
color: #fff;
margin-bottom: 20px;
letter-spacing: 0.02em;
}
.sh-footer-cta__eyebrow i { color: #ffc4dc; }
.sh-footer-cta__title {
font-size: 44px;
font-weight: 800;
color: #fff !important;
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0 0 16px;
}
.sh-footer-cta__text {
font-size: 17px;
color: rgba(255, 255, 255, 0.9) !important;
line-height: 1.55;
margin: 0 0 32px;
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
.sh-footer-cta__btn {
display: inline-flex !important;
align-items: center;
gap: 10px;
padding: 16px 36px !important;
background: #fff !important;
color: #e4519e !important;
border-radius: 999px !important;
font-weight: 700 !important;
font-size: 16px !important;
text-decoration: none !important;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25), 0 0 0 6px rgba(255, 255, 255, 0.12);
transition: all 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sh-footer-cta__btn:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.32), 0 0 0 8px rgba(255, 255, 255, 0.18);
color: #c9408a !important;
}
.sh-footer-cta__btn i {
transition: transform 220ms var(--sh-ease);
}
.sh-footer-cta__btn:hover i {
transform: translateX(4px);
}
.sh-footer-cta__meta {
margin-top: 28px;
display: flex;
gap: 24px;
justify-content: center;
flex-wrap: wrap;
color: rgba(255, 255, 255, 0.85);
font-size: 13px;
font-weight: 500;
}
.sh-footer-cta__meta span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.sh-footer-cta__meta i {
color: #ffc4dc;
font-size: 12px;
}
@media (max-width: 640px) {
.sh-footer-cta { padding: 48px 20px; }
.sh-footer-cta__title { font-size: 30px; }
.sh-footer-cta__text { font-size: 15px; margin-bottom: 22px; }
.sh-footer-cta__btn { padding: 14px 28px !important; font-size: 15px !important; }
.sh-footer-cta__meta { gap: 14px; font-size: 12px; margin-top: 20px; }
}
/* ---- MAIN FOOTER: dark indigo gradient + decorative pattern ---- */
body:not(.wp-admin) .site-footer {
background: linear-gradient(180deg, #1a1a2e 0%, #252545 100%) !important;
color: #fff !important;
padding: 80px 0 0 !important;
position: relative;
overflow: hidden;
margin-top: 0;
}
body:not(.wp-admin) .site-footer::before {
content: "";
position: absolute;
top: -80px;
right: -120px;
width: 440px;
height: 440px;
background: radial-gradient(circle, rgba(228, 81, 158, 0.18), transparent 70%);
pointer-events: none;
z-index: 0;
}
body:not(.wp-admin) .site-footer::after {
content: "";
position: absolute;
bottom: -150px;
left: -120px;
width: 440px;
height: 440px;
background: radial-gradient(circle, rgba(92, 99, 183, 0.22), transparent 70%);
pointer-events: none;
z-index: 0;
}
body:not(.wp-admin) .site-footer .wpee-container {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
body:not(.wp-admin) .site-footer .content-wrap {
display: grid !important;
grid-template-columns: 1.6fr 1fr 1fr 1.2fr !important;
gap: 48px !important;
padding: 0 0 56px !important;
}
/* Column 1: Logo + description */
body:not(.wp-admin) .site-footer .footer-logo {
margin: 0 0 20px !important;
padding: 0;
}
body:not(.wp-admin) .site-footer .footer-logo img {
max-height: 42px !important;
width: auto !important;
filter: brightness(0) invert(1);
opacity: 0.95;
}
body:not(.wp-admin) .site-footer .desc-wrap {
color: rgba(255, 255, 255, 0.68);
}
body:not(.wp-admin) .site-footer .desc-wrap .widget_text p,
body:not(.wp-admin) .site-footer .desc-wrap p {
color: rgba(255, 255, 255, 0.68) !important;
font-size: 14px !important;
line-height: 1.7 !important;
margin: 0 0 16px;
}
/* Column titles — caps + gradient accent underline */
body:not(.wp-admin) .site-footer .footer-title,
body:not(.wp-admin) .site-footer .widget-title {
color: #fff !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.12em !important;
margin: 0 0 24px !important;
padding: 0 0 14px !important;
position: relative;
display: inline-block;
}
body:not(.wp-admin) .site-footer .footer-title::after,
body:not(.wp-admin) .site-footer .widget-title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 36px;
height: 3px;
background: linear-gradient(90deg, #e4519e, #5c63b7);
border-radius: 999px;
}
/* Menu items — arrow appear on hover */
body:not(.wp-admin) .site-footer ul.menu,
body:not(.wp-admin) .site-footer .widget_nav_menu ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
body:not(.wp-admin) .site-footer ul.menu li,
body:not(.wp-admin) .site-footer .widget_nav_menu li {
list-style: none !important;
margin: 0 0 12px !important;
padding: 0 !important;
}
body:not(.wp-admin) .site-footer ul.menu a,
body:not(.wp-admin) .site-footer .widget_nav_menu a {
color: rgba(255, 255, 255, 0.68) !important;
font-size: 14px !important;
font-weight: 400 !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center;
gap: 8px;
position: relative;
transition: color 220ms var(--sh-ease), padding-left 220ms var(--sh-ease);
}
body:not(.wp-admin) .site-footer ul.menu a::before,
body:not(.wp-admin) .site-footer .widget_nav_menu a::before {
content: "→";
color: #e4519e;
opacity: 0;
transform: translateX(-8px);
transition: opacity 220ms var(--sh-ease), transform 220ms var(--sh-ease);
font-size: 13px;
}
body:not(.wp-admin) .site-footer ul.menu a:hover,
body:not(.wp-admin) .site-footer .widget_nav_menu a:hover {
color: #e4519e !important;
padding-left: 4px;
}
body:not(.wp-admin) .site-footer ul.menu a:hover::before {
opacity: 1;
transform: translateX(0);
}
/* Contact / Company info block */
body:not(.wp-admin) .site-footer .contact-detail-wrap .textwidget p,
body:not(.wp-admin) .site-footer .contact-detail-wrap p {
color: rgba(255, 255, 255, 0.68) !important;
font-size: 14px !important;
line-height: 1.75 !important;
margin: 0;
}
/* Social Media column */
body:not(.wp-admin) .site-footer .newsletter-wrap .textwidget p,
body:not(.wp-admin) .site-footer .newsletter-wrap p {
color: rgba(255, 255, 255, 0.68) !important;
font-size: 14px !important;
line-height: 1.6 !important;
margin: 0 0 18px;
}
body:not(.wp-admin) .site-footer .wp-block-social-links,
body:not(.wp-admin) .site-footer .social-links {
display: flex !important;
gap: 10px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
flex-wrap: wrap;
}
body:not(.wp-admin) .site-footer .wp-social-link,
body:not(.wp-admin) .site-footer .social-links li {
width: 44px !important;
height: 44px !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 260ms cubic-bezier(0.16, 1, 0.3, 1) !important;
padding: 0 !important;
list-style: none !important;
}
body:not(.wp-admin) .site-footer .wp-social-link a,
body:not(.wp-admin) .site-footer .social-links a {
color: rgba(255, 255, 255, 0.8) !important;
width: 100%;
height: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none !important;
}
body:not(.wp-admin) .site-footer .wp-social-link a svg {
width: 20px !important;
height: 20px !important;
fill: currentColor !important;
}
body:not(.wp-admin) .site-footer .wp-social-link:hover,
body:not(.wp-admin) .site-footer .social-links li:hover {
background: linear-gradient(135deg, #5c63b7, #e4519e) !important;
border-color: transparent !important;
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(228, 81, 158, 0.35) !important;
}
body:not(.wp-admin) .site-footer .wp-social-link:hover a,
body:not(.wp-admin) .site-footer .social-links li:hover a {
color: #fff !important;
}
/* ---- Copyright bar ---- */
body:not(.wp-admin) .site-footer .copyright-wrap {
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
padding: 24px 0 !important;
margin: 0 !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 14px !important;
}
body:not(.wp-admin) .site-footer .copyright {
padding: 0 !important;
}
body:not(.wp-admin) .site-footer .copyright p {
color: rgba(255, 255, 255, 0.5) !important;
font-size: 13px !important;
margin: 0 !important;
font-weight: 400;
}
body:not(.wp-admin) .site-footer #menu-legal {
display: flex !important;
gap: 24px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
flex-wrap: wrap;
}
body:not(.wp-admin) .site-footer #menu-legal li {
list-style: none !important;
margin: 0 !important;
}
body:not(.wp-admin) .site-footer #menu-legal a {
color: rgba(255, 255, 255, 0.55) !important;
font-size: 13px !important;
text-decoration: none !important;
transition: color 220ms var(--sh-ease);
padding: 0 !important;
display: inline !important;
gap: 0 !important;
}
body:not(.wp-admin) .site-footer #menu-legal a::before {
display: none !important;
content: none !important;
}
body:not(.wp-admin) .site-footer #menu-legal a:hover {
color: #e4519e !important;
padding-left: 0 !important;
}
/* ---- Footer responsive ---- */
@media (max-width: 992px) {
body:not(.wp-admin) .site-footer .content-wrap {
grid-template-columns: 1fr 1fr !important;
gap: 36px 24px !important;
}
}
@media (max-width: 600px) {
body:not(.wp-admin) .site-footer {
padding-top: 56px !important;
}
body:not(.wp-admin) .site-footer .content-wrap {
grid-template-columns: 1fr !important;
gap: 32px !important;
padding-bottom: 36px !important;
}
body:not(.wp-admin) .site-footer .copyright-wrap {
flex-direction: column !important;
justify-content: center !important;
text-align: center !important;
padding: 24px 20px !important;
}
body:not(.wp-admin) .site-footer #menu-legal {
justify-content: center;
gap: 16px !important;
}
}
/* ZONE_Z33_END */
/* ==========================================================================
ZONE Z34 — Powerful unified footer (hide CTA banner, fix columns, add hero)
========================================================================== */
/* Hide the old pre-footer CTA banner if it exists */
.sh-footer-cta {
display: none !important;
}
/* ---- FIX: legacy width:10%/25%-40px on footer column children ---- */
body:not(.wp-admin) footer.site-footer .content-wrap.col-4 > div,
body:not(.wp-admin) .site-footer .content-wrap > div,
body:not(.wp-admin) .site-footer .content-wrap.col-4 > .quick-link-wrap,
body:not(.wp-admin) .site-footer .content-wrap > #footer-1,
body:not(.wp-admin) .site-footer .content-wrap > #footer-2,
body:not(.wp-admin) .site-footer .content-wrap > #footer-3,
body:not(.wp-admin) .site-footer .content-wrap > #footer-4 {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
}
/* ---- FOOTER HERO (inside container, above columns) ---- */
.sh-footer-hero {
position: relative;
border-radius: 28px;
overflow: hidden;
padding: 56px 48px;
margin: 0 0 60px;
isolation: isolate;
z-index: 2;
}
.sh-footer-hero__bg {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 20%, rgba(228,81,158,0.5), transparent 50%),
radial-gradient(circle at 80% 80%, rgba(92,99,183,0.55), transparent 50%),
linear-gradient(135deg, #3e2b73 0%, #1a1a2e 100%);
z-index: -1;
}
.sh-footer-hero__bg::before {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
background-size: 22px 22px;
opacity: 0.4;
}
.sh-footer-hero__inner {
position: relative;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 48px;
align-items: center;
}
@media (max-width: 900px) {
.sh-footer-hero__inner {
grid-template-columns: 1fr;
gap: 36px;
}
.sh-footer-hero { padding: 44px 28px; border-radius: 22px; }
}
/* Left: badge + title + text + CTA */
.sh-footer-hero__badge {
display: inline-flex;
align-items: center;
padding: 6px 14px;
background: rgba(255,255,255,0.14);
border: 1px solid rgba(255,255,255,0.22);
backdrop-filter: blur(8px);
border-radius: 999px;
font-size: 12px;
font-weight: 600;
color: #fff;
letter-spacing: 0.02em;
margin-bottom: 18px;
}
.sh-footer-hero__title {
font-size: 48px !important;
font-weight: 800 !important;
color: #fff !important;
line-height: 1.05 !important;
letter-spacing: -0.03em !important;
margin: 0 0 18px !important;
}
.sh-footer-hero__title span {
background: linear-gradient(90deg, #ffd1e3, #e4519e);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.sh-footer-hero__text {
font-size: 16px !important;
color: rgba(255,255,255,0.78) !important;
line-height: 1.6 !important;
margin: 0 0 26px !important;
max-width: 460px;
}
.sh-footer-hero__cta {
display: inline-flex !important;
align-items: center;
gap: 10px;
padding: 14px 28px !important;
background: #fff !important;
color: #1a1a2e !important;
border-radius: 999px !important;
font-weight: 700 !important;
font-size: 15px !important;
text-decoration: none !important;
box-shadow: 0 16px 40px rgba(228,81,158,0.35), 0 0 0 6px rgba(255,255,255,0.1);
transition: all 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sh-footer-hero__cta:hover {
transform: translateY(-3px);
color: #e4519e !important;
box-shadow: 0 24px 50px rgba(228,81,158,0.45), 0 0 0 8px rgba(255,255,255,0.16);
}
.sh-footer-hero__cta .fa-heart {
color: #e4519e;
font-size: 14px;
}
.sh-footer-hero__cta .sh-arrow {
font-size: 12px;
transition: transform 220ms var(--sh-ease);
}
.sh-footer-hero__cta:hover .sh-arrow {
transform: translateX(4px);
}
@media (max-width: 640px) {
.sh-footer-hero__title { font-size: 32px !important; }
.sh-footer-hero__text { font-size: 14px !important; }
.sh-footer-hero__cta { padding: 12px 22px !important; font-size: 14px !important; }
}
/* Right: stat tiles 2x2 */
.sh-footer-hero__right {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.sh-footer-stat {
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.14);
backdrop-filter: blur(8px);
border-radius: 18px;
padding: 20px 18px;
text-align: left;
transition: transform 220ms var(--sh-ease), background 220ms var(--sh-ease);
}
.sh-footer-stat:hover {
transform: translateY(-3px);
background: rgba(255,255,255,0.12);
}
.sh-footer-stat__num {
font-size: 30px;
font-weight: 800;
color: #fff;
letter-spacing: -0.02em;
line-height: 1;
margin-bottom: 6px;
background: linear-gradient(90deg, #fff, #ffd1e3);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.sh-footer-stat__lbl {
font-size: 12px;
color: rgba(255,255,255,0.65);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
}
@media (max-width: 640px) {
.sh-footer-hero__right {
grid-template-columns: 1fr 1fr;
}
.sh-footer-stat { padding: 16px 14px; }
.sh-footer-stat__num { font-size: 24px; }
.sh-footer-stat__lbl { font-size: 11px; }
}
/* ---- Columns grid: 4 equal columns with NO legacy width ---- */
body:not(.wp-admin) .site-footer .content-wrap {
display: grid !important;
grid-template-columns: 1.8fr 1fr 1fr 1.2fr !important;
gap: 48px !important;
padding: 0 0 56px !important;
align-items: start;
}
/* Fix text wrapping inside columns — explicit width for the inner widget */
body:not(.wp-admin) .site-footer .content-wrap .widget,
body:not(.wp-admin) .site-footer .content-wrap .widget_text,
body:not(.wp-admin) .site-footer .content-wrap .widget_nav_menu,
body:not(.wp-admin) .site-footer .content-wrap aside,
body:not(.wp-admin) .site-footer .content-wrap .desc-wrap,
body:not(.wp-admin) .site-footer .content-wrap .textwidget,
body:not(.wp-admin) .site-footer .content-wrap .menu-quick-links-container,
body:not(.wp-admin) .site-footer .content-wrap #state_change,
body:not(.wp-admin) .site-footer .content-wrap .wp-block-social-links,
body:not(.wp-admin) .site-footer .content-wrap p,
body:not(.wp-admin) .site-footer .content-wrap .company-detail-wrap {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
display: block !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Paragraphs need bottom margin */
body:not(.wp-admin) .site-footer .content-wrap p {
margin: 0 0 12px !important;
}
/* Social links aside contains — make ul flex */
body:not(.wp-admin) .site-footer .content-wrap .wp-block-social-links {
display: flex !important;
flex-wrap: wrap;
gap: 10px !important;
}
body:not(.wp-admin) .site-footer .content-wrap .wp-block-social-links li {
display: inline-flex !important;
width: 44px !important;
margin: 0 !important;
}
/* Responsive: collapse to 2 cols then 1 */
@media (max-width: 992px) {
body:not(.wp-admin) .site-footer .content-wrap {
grid-template-columns: 1fr 1fr !important;
}
}
@media (max-width: 600px) {
body:not(.wp-admin) .site-footer .content-wrap {
grid-template-columns: 1fr !important;
gap: 32px !important;
}
.sh-footer-hero { padding: 36px 24px; margin-bottom: 40px; }
}
/* Reduce overall top padding since hero already provides visual impact */
body:not(.wp-admin) .site-footer {
padding: 60px 0 0 !important;
}
/* ZONE_Z34_END */
/* ==========================================================================
ZONE Z35 — Soft pink brand palette on footer (light theme)
========================================================================== */
/* Footer overall — soft pink gradient, NOT dark */
body:not(.wp-admin) .site-footer {
background: linear-gradient(180deg, #fff8fb 0%, #fee8f3 60%, #fdd8e8 100%) !important;
color: var(--sh-text) !important;
padding: 60px 0 0 !important;
position: relative;
overflow: hidden;
margin-top: 0;
}
/* Decorative blobs — much softer */
body:not(.wp-admin) .site-footer::before {
content: "";
position: absolute;
top: -80px;
right: -120px;
width: 440px;
height: 440px;
background: radial-gradient(circle, rgba(228, 81, 158, 0.12), transparent 70%);
pointer-events: none;
z-index: 0;
}
body:not(.wp-admin) .site-footer::after {
content: "";
position: absolute;
bottom: -150px;
left: -120px;
width: 440px;
height: 440px;
background: radial-gradient(circle, rgba(92, 99, 183, 0.10), transparent 70%);
pointer-events: none;
z-index: 0;
}
/* ---- HERO inside footer — soft pink gradient ---- */
.sh-footer-hero__bg {
background:
radial-gradient(circle at 20% 20%, rgba(228,81,158,0.18), transparent 55%),
radial-gradient(circle at 80% 80%, rgba(92,99,183,0.18), transparent 55%),
linear-gradient(135deg, #fff 0%, #fee8f3 50%, #fdd8e8 100%) !important;
}
.sh-footer-hero__bg::before {
background-image:
radial-gradient(rgba(228, 81, 158, 0.12) 1px, transparent 1px) !important;
opacity: 0.5 !important;
}
.sh-footer-hero {
box-shadow: 0 20px 50px rgba(228, 81, 158, 0.08),
0 4px 14px rgba(92, 99, 183, 0.06);
border: 1px solid rgba(228, 81, 158, 0.10);
}
/* Hero content — dark text on light bg */
.sh-footer-hero__badge {
background: rgba(228, 81, 158, 0.10) !important;
border: 1px solid rgba(228, 81, 158, 0.20) !important;
color: var(--sh-accent-700, #a6336f) !important;
}
.sh-footer-hero__title {
color: var(--sh-text) !important;
}
.sh-footer-hero__title span {
background: linear-gradient(90deg, #e4519e 0%, #5c63b7 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
}
.sh-footer-hero__text {
color: var(--sh-text-2) !important;
}
/* CTA button — now pink solid (on light bg) */
.sh-footer-hero__cta {
background: var(--sh-accent) !important;
color: #fff !important;
box-shadow: 0 16px 36px rgba(228, 81, 158, 0.28),
0 0 0 6px rgba(228, 81, 158, 0.08) !important;
}
.sh-footer-hero__cta:hover {
background: var(--sh-accent-600, #c9408a) !important;
color: #fff !important;
box-shadow: 0 20px 44px rgba(228, 81, 158, 0.38),
0 0 0 8px rgba(228, 81, 158, 0.14) !important;
}
.sh-footer-hero__cta .fa-heart {
color: #fff !important;
}
/* Stat tiles — soft white cards */
.sh-footer-stat {
background: rgba(255, 255, 255, 0.75) !important;
border: 1px solid rgba(228, 81, 158, 0.15) !important;
box-shadow: 0 4px 14px rgba(228, 81, 158, 0.06);
}
.sh-footer-stat:hover {
background: #fff !important;
box-shadow: 0 12px 30px rgba(228, 81, 158, 0.12);
}
.sh-footer-stat__num {
background: linear-gradient(90deg, #e4519e, #5c63b7) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
}
.sh-footer-stat__lbl {
color: var(--sh-text-muted) !important;
}
/* ---- Footer columns: dark text on light ---- */
body:not(.wp-admin) .site-footer .wpee-container {
position: relative;
z-index: 1;
}
/* Logo — no invert, original colors */
body:not(.wp-admin) .site-footer .footer-logo img {
filter: none !important;
opacity: 1 !important;
}
/* Column titles — dark text with pink gradient underline */
body:not(.wp-admin) .site-footer .footer-title,
body:not(.wp-admin) .site-footer .widget-title {
color: var(--sh-text) !important;
}
body:not(.wp-admin) .site-footer .footer-title::after,
body:not(.wp-admin) .site-footer .widget-title::after {
background: linear-gradient(90deg, #e4519e, #5c63b7) !important;
}
/* Body text + paragraphs — dark muted */
body:not(.wp-admin) .site-footer .desc-wrap .widget_text p,
body:not(.wp-admin) .site-footer .desc-wrap p,
body:not(.wp-admin) .site-footer .contact-detail-wrap .textwidget p,
body:not(.wp-admin) .site-footer .contact-detail-wrap p,
body:not(.wp-admin) .site-footer .newsletter-wrap .textwidget p,
body:not(.wp-admin) .site-footer .newsletter-wrap p {
color: var(--sh-text-2) !important;
}
/* Menu items — soft gray → pink on hover */
body:not(.wp-admin) .site-footer ul.menu a,
body:not(.wp-admin) .site-footer .widget_nav_menu a {
color: var(--sh-text-2) !important;
}
body:not(.wp-admin) .site-footer ul.menu a:hover,
body:not(.wp-admin) .site-footer .widget_nav_menu a:hover {
color: var(--sh-accent) !important;
}
body:not(.wp-admin) .site-footer ul.menu a::before,
body:not(.wp-admin) .site-footer .widget_nav_menu a::before {
color: var(--sh-accent) !important;
}
/* Social icons — light pink bg → gradient on hover */
body:not(.wp-admin) .site-footer .wp-social-link,
body:not(.wp-admin) .site-footer .social-links li {
background: rgba(255, 255, 255, 0.75) !important;
border: 1px solid rgba(228, 81, 158, 0.18) !important;
box-shadow: 0 2px 8px rgba(228, 81, 158, 0.06);
}
body:not(.wp-admin) .site-footer .wp-social-link a,
body:not(.wp-admin) .site-footer .social-links a {
color: var(--sh-accent) !important;
}
body:not(.wp-admin) .site-footer .wp-social-link:hover,
body:not(.wp-admin) .site-footer .social-links li:hover {
background: var(--sh-accent) !important;
background-image: none !important;
border-color: transparent !important;
box-shadow: 0 8px 20px rgba(228, 81, 158, 0.28) !important;
}
body:not(.wp-admin) .site-footer .wp-social-link:hover a,
body:not(.wp-admin) .site-footer .social-links li:hover a {
color: #fff !important;
}
/* ---- Copyright bar — light divider, soft text ---- */
body:not(.wp-admin) .site-footer .copyright-wrap {
border-top: 1px solid rgba(228, 81, 158, 0.15) !important;
background: rgba(255, 255, 255, 0.35);
margin-top: 0 !important;
}
body:not(.wp-admin) .site-footer .copyright p {
color: var(--sh-text-muted) !important;
}
body:not(.wp-admin) .site-footer #menu-legal a {
color: var(--sh-text-muted) !important;
}
body:not(.wp-admin) .site-footer #menu-legal a:hover {
color: var(--sh-accent) !important;
}
/* ZONE_Z35_END */
/* ==========================================================================
ZONE Z36 — Remove badge + smoother copyright bar blend
========================================================================== */
/* Hide the "Built for real connections" badge — user wants it removed */
.sh-footer-hero__badge {
display: none !important;
}
/* Copyright bar — blend with footer gradient, no distinct box */
body:not(.wp-admin) .site-footer .copyright-wrap {
background: transparent !important;
border-top: 1px solid rgba(228, 81, 158, 0.10) !important;
padding: 28px 24px !important;
margin-top: 20px !important;
}
body:not(.wp-admin) .site-footer .copyright p {
color: rgba(26, 26, 46, 0.45) !important;
font-weight: 400 !important;
}
body:not(.wp-admin) .site-footer #menu-legal a {
color: rgba(26, 26, 46, 0.50) !important;
}
body:not(.wp-admin) .site-footer #menu-legal a:hover {
color: var(--sh-accent) !important;
}
/* ZONE_Z36_END */
/* ==========================================================================
ZONE Z37 — Settings area + Profile header polish (soft pink theme)
========================================================================== */
/* ======= PROFILE HEADER CARD ======= */
/* Switch the dark gradient to a soft pink one */
body:not(.wp-admin) .wpee-datebook-profile-card {
background: linear-gradient(135deg, #fee8f3 0%, #eef0fa 50%, #fdd8e8 100%) !important;
border: 1px solid rgba(228, 81, 158, 0.18);
box-shadow: 0 20px 50px rgba(228, 81, 158, 0.12),
0 4px 14px rgba(92, 99, 183, 0.06) !important;
position: relative;
isolation: isolate;
overflow: hidden;
}
body:not(.wp-admin) .wpee-datebook-profile-card::before {
content: "";
position: absolute;
top: -100px;
right: -100px;
width: 320px;
height: 320px;
background: radial-gradient(circle, rgba(228,81,158,0.22), transparent 70%);
pointer-events: none;
z-index: 0;
}
body:not(.wp-admin) .wpee-datebook-profile-card::after {
content: "";
position: absolute;
bottom: -120px;
left: -80px;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(92,99,183,0.18), transparent 70%);
pointer-events: none;
z-index: 0;
}
body:not(.wp-admin) .wpee-datebook-profile-card > * {
position: relative;
z-index: 1;
}
/* Username inside header — dark text on pink bg */
body:not(.wp-admin) .wpee-datebook-profile-card .username,
body:not(.wp-admin) .wpee-datebook-profile-card .username.text-white {
color: var(--sh-text) !important;
font-size: 30px !important;
font-weight: 800 !important;
letter-spacing: -0.02em;
text-shadow: none !important;
}
/* Meta row — glassy pills on soft bg */
body:not(.wp-admin) .wpee-datebook-profile-card .age-location-wrap.text-white,
body:not(.wp-admin) .wpee-datebook-profile-card .age-location-wrap {
color: var(--sh-text-2) !important;
}
body:not(.wp-admin) .wpee-datebook-profile-card .age-location-wrap.text-white > div,
body:not(.wp-admin) .wpee-datebook-profile-card .age-location-wrap > div {
background: rgba(255,255,255,0.7) !important;
border: 1px solid rgba(228,81,158,0.18) !important;
backdrop-filter: blur(6px);
color: var(--sh-text) !important;
box-shadow: 0 2px 8px rgba(228,81,158,0.06);
}
body:not(.wp-admin) .wpee-datebook-profile-card .age-location-wrap .age-title,
body:not(.wp-admin) .wpee-datebook-profile-card .age-location-wrap .location-title,
body:not(.wp-admin) .wpee-datebook-profile-card .age-location-wrap .credits-title {
color: var(--sh-text-muted) !important;
}
body:not(.wp-admin) .wpee-datebook-profile-card .wpee-datebook-meta-line {
color: var(--sh-text-2) !important;
}
/* "Online now" pill — green soft */
body:not(.wp-admin) .wpee-datebook-profile-card .wpee-db-badge-online {
background: rgba(34,197,94,0.14) !important;
color: #16a34a !important;
border: 1px solid rgba(34,197,94,0.28);
}
body:not(.wp-admin) .wpee-datebook-profile-card .wpee-db-badge-online::before {
background: #22c55e;
}
/* Account status pill */
body:not(.wp-admin) .wpee-datebook-profile-card .wpee-datebook-account-status .profile-location {
background: rgba(255,255,255,0.75) !important;
color: var(--sh-primary-700) !important;
border: 1px solid rgba(92,99,183,0.18);
}
body:not(.wp-admin) .wpee-datebook-profile-card .wpee-datebook-account-status .profile-status-title {
color: var(--sh-text-muted) !important;
}
/* Edit Cover Photo button — pink outline pill */
body:not(.wp-admin) .wpee-datebook-profile-card .trigger-cover-photo.wpee-db-btn.wpee-db-btn-outline {
background: #fff !important;
color: var(--sh-accent) !important;
border: 1.5px solid rgba(228,81,158,0.28) !important;
box-shadow: 0 4px 14px rgba(228,81,158,0.10) !important;
}
body:not(.wp-admin) .wpee-datebook-profile-card .trigger-cover-photo:hover {
background: var(--sh-accent) !important;
color: #fff !important;
border-color: var(--sh-accent) !important;
}
/* Avatar ring — pink on pink-soft bg */
body:not(.wp-admin) .wpee-datebook-profile-top .profile-img.change-profile-image {
background: #fff;
border: 4px solid #fff !important;
box-shadow: 0 10px 30px rgba(228,81,158,0.20);
}
body:not(.wp-admin) .wpee-datebook-profile-top .update_profile_text_div {
background: var(--sh-accent) !important;
box-shadow: 0 6px 16px rgba(228,81,158,0.40);
}
/* Remove online green dot on own profile avatar */
body:not(.wp-admin) .wpee-datebook-profile-top .wpee-user-status.wpee-online {
background: #22c55e;
box-shadow: 0 0 0 3px rgba(34,197,94,0.22);
}
/* ======= PROFILE HEADER MENU (Activity / Profile / Media / Message / Search / Friends) ======= */
body:not(.wp-admin) .wpee-datebook-profile-card .profile-header-menu {
background: rgba(255,255,255,0.55) !important;
backdrop-filter: blur(6px);
border-top: 1px solid rgba(228,81,158,0.10);
}
body:not(.wp-admin) .wpee-datebook-profile-card .profile-menu-tab-list > a {
color: var(--sh-text-2) !important;
}
body:not(.wp-admin) .wpee-datebook-profile-card .profile-menu-tab-list > a:hover {
color: var(--sh-accent) !important;
background: rgba(228,81,158,0.08) !important;
}
body:not(.wp-admin) .wpee-datebook-profile-card .profile-menu-tab-list.active > a {
color: var(--sh-accent) !important;
background: transparent !important;
border-bottom-color: var(--sh-accent) !important;
}
/* ======= NOTIFICATION LINKS (Gifts / Winks / Settings / More) ======= */
body:not(.wp-admin) .wpee-datebook-profile-card .wpee-notification-links > li.wpee-menu > a {
color: var(--sh-text-2) !important;
}
body:not(.wp-admin) .wpee-datebook-profile-card .wpee-notification-links > li.wpee-menu > a:hover {
color: var(--sh-accent) !important;
background: rgba(228,81,158,0.08) !important;
}
body:not(.wp-admin) .wpee-datebook-profile-card .wpee-notification-links > li.wpee_active_link > a {
color: var(--sh-accent) !important;
background: rgba(228,81,158,0.14) !important;
}
/* ======= MEET-ME SIDEBAR CARD (left col3) ======= */
body:not(.wp-admin) .modern-meet-card {
background: #fff !important;
border: 1px solid rgba(228, 81, 158, 0.15) !important;
border-radius: var(--sh-radius-2xl) !important;
box-shadow: 0 10px 30px rgba(228,81,158,0.08) !important;
padding: 20px !important;
position: relative;
overflow: hidden;
}
body:not(.wp-admin) .modern-meet-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 90px;
background: linear-gradient(180deg, rgba(254,232,243,0.8), rgba(255,255,255,0));
z-index: 0;
border-radius: var(--sh-radius-2xl) var(--sh-radius-2xl) 0 0;
}
body:not(.wp-admin) .modern-meet-card > * { position: relative; z-index: 1; }
body:not(.wp-admin) .modern-meet-card .meet-card-title {
font-size: 16px !important;
color: var(--sh-text) !important;
font-weight: 700 !important;
letter-spacing: -0.01em;
}
body:not(.wp-admin) .modern-meet-card .meet-card-image {
width: 140px;
height: 140px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto 16px !important;
border: 4px solid #fff;
box-shadow: 0 10px 24px rgba(228,81,158,0.18);
}
body:not(.wp-admin) .modern-meet-card .meet-user-name {
color: var(--sh-text) !important;
font-weight: 700 !important;
font-size: 17px;
}
body:not(.wp-admin) .modern-meet-card .meet-user-age {
color: var(--sh-text-muted) !important;
font-weight: 500 !important;
}
body:not(.wp-admin) .modern-meet-card .meet-user-location {
color: var(--sh-text-muted) !important;
font-size: 13px;
}
body:not(.wp-admin) .modern-meet-card .meet-user-link .view-profile-text {
color: var(--sh-accent) !important;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
}
body:not(.wp-admin) .modern-meet-card .meet-card-actions {
gap: 8px !important;
padding-top: 14px !important;
border-top: 1px solid rgba(228,81,158,0.12) !important;
margin-top: 16px !important;
}
body:not(.wp-admin) .modern-meet-card .meet-action-btn.meet-action-like {
background: var(--sh-accent) !important;
color: #fff !important;
box-shadow: 0 6px 18px rgba(228,81,158,0.26);
}
body:not(.wp-admin) .modern-meet-card .meet-action-btn.meet-action-like:hover {
background: var(--sh-accent-600) !important;
transform: translateY(-2px);
}
body:not(.wp-admin) .modern-meet-card .meet-action-btn.meet-action-skip {
background: #fff !important;
border: 1.5px solid var(--sh-border) !important;
color: var(--sh-text-2) !important;
}
body:not(.wp-admin) .modern-meet-card .meet-action-btn.meet-action-skip:hover {
background: var(--sh-bg-soft) !important;
border-color: var(--sh-text-muted) !important;
}
/* ======= SETTINGS WRAPPER & TABS (My Account / Blocked / Privacy / …) ======= */
body:not(.wp-admin) .settings-list-wrapper.profile-section-wrap {
background: #fff !important;
border: 1px solid rgba(228,81,158,0.10) !important;
border-radius: var(--sh-radius-2xl) !important;
box-shadow: 0 12px 36px rgba(228,81,158,0.06),
0 2px 10px rgba(92,99,183,0.04) !important;
padding: 28px !important;
margin-bottom: 28px;
}
/* Settings tab pill bar */
body:not(.wp-admin) .settings-list-wrapper > ul.profile-section-tab {
display: flex !important;
flex-wrap: wrap !important;
gap: 4px !important;
padding: 6px !important;
background: var(--sh-bg-soft) !important;
border-radius: var(--sh-radius-pill) !important;
border: 1px solid var(--sh-divider) !important;
list-style: none !important;
margin: 0 0 24px !important;
}
body:not(.wp-admin) .settings-list-wrapper > ul.profile-section-tab > li.profile-section-tab-title {
list-style: none !important;
flex: 1 1 auto;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
}
body:not(.wp-admin) .settings-list-wrapper > ul.profile-section-tab > li.profile-section-tab-title > a {
display: block !important;
padding: 10px 18px !important;
text-align: center;
font-size: 13px !important;
font-weight: 600 !important;
color: var(--sh-text-2) !important;
border-radius: var(--sh-radius-pill) !important;
text-decoration: none !important;
white-space: nowrap;
transition: all 220ms var(--sh-ease);
letter-spacing: 0.01em;
}
body:not(.wp-admin) .settings-list-wrapper > ul.profile-section-tab > li.profile-section-tab-title > a:hover {
color: var(--sh-accent) !important;
background: rgba(228,81,158,0.08) !important;
}
body:not(.wp-admin) .settings-list-wrapper > ul.profile-section-tab > li.profile-section-tab-title.active > a {
background: #fff !important;
color: var(--sh-accent) !important;
box-shadow: 0 4px 12px rgba(228,81,158,0.15);
}
/* Mobile: wrap tabs cleanly */
@media (max-width: 700px) {
body:not(.wp-admin) .settings-list-wrapper > ul.profile-section-tab {
border-radius: var(--sh-radius-xl) !important;
padding: 4px !important;
}
body:not(.wp-admin) .settings-list-wrapper > ul.profile-section-tab > li.profile-section-tab-title > a {
padding: 9px 14px !important;
font-size: 12px !important;
}
}
/* ======= SETTINGS CONTENT: form styling ======= */
body:not(.wp-admin) .settings-list-wrapper .profile-section-content {
padding-top: 8px !important;
}
body:not(.wp-admin) .settings-list-wrapper .box-border {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
}
body:not(.wp-admin) .settings-list-wrapper .heading-submenu {
font-size: 20px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
letter-spacing: -0.01em;
padding: 0 0 18px !important;
margin: 0 0 24px !important;
border-bottom: 1px solid var(--sh-divider) !important;
position: relative;
display: block;
}
body:not(.wp-admin) .settings-list-wrapper .heading-submenu::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 48px;
height: 2px;
background: linear-gradient(90deg, var(--sh-accent), var(--sh-primary));
border-radius: 999px;
}
body:not(.wp-admin) .settings-list-wrapper .heading-submenu strong {
font-weight: inherit;
}
/* Form grid (account page) */
body:not(.wp-admin) .settings-list-wrapper .setting-page-account {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 18px 24px !important;
}
body:not(.wp-admin) .settings-list-wrapper .setting-page-account > .form-group {
margin: 0 !important;
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
body:not(.wp-admin) .settings-list-wrapper .setting-page-account > .form-group.password-criteria,
body:not(.wp-admin) .settings-list-wrapper .setting-page-account > .form-group.dspdp-row {
grid-column: 1 / -1;
}
@media (max-width: 700px) {
body:not(.wp-admin) .settings-list-wrapper .setting-page-account {
grid-template-columns: 1fr !important;
}
}
/* Labels inside account form */
body:not(.wp-admin) .settings-list-wrapper .setting-page-account label {
font-size: 12px !important;
font-weight: 600 !important;
color: var(--sh-text-2) !important;
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 0 !important;
padding: 0 !important;
}
/* Inputs */
body:not(.wp-admin) .settings-list-wrapper .setting-page-account .form-control,
body:not(.wp-admin) .settings-list-wrapper .setting-page-account input[type="text"],
body:not(.wp-admin) .settings-list-wrapper .setting-page-account input[type="password"],
body:not(.wp-admin) .settings-list-wrapper .setting-page-account input[type="email"] {
width: 100% !important;
min-height: 46px !important;
padding: 12px 16px !important;
border: 1.5px solid var(--sh-border) !important;
border-radius: var(--sh-radius-md) !important;
background: #fff !important;
color: var(--sh-text) !important;
font-size: 14px !important;
box-shadow: none !important;
transition: border-color 220ms var(--sh-ease), box-shadow 220ms var(--sh-ease);
}
body:not(.wp-admin) .settings-list-wrapper .setting-page-account .form-control:focus,
body:not(.wp-admin) .settings-list-wrapper .setting-page-account input:focus {
border-color: var(--sh-accent) !important;
box-shadow: 0 0 0 4px rgba(228,81,158,0.14) !important;
outline: none !important;
}
body:not(.wp-admin) .settings-list-wrapper .setting-page-account input:disabled {
background: var(--sh-bg-soft) !important;
color: var(--sh-text-muted) !important;
cursor: not-allowed;
}
/* Password wrapper + eye toggle */
body:not(.wp-admin) .settings-list-wrapper .setting-page-account .password-wrapper {
position: relative;
}
body:not(.wp-admin) .settings-list-wrapper .setting-page-account .password-wrapper > input {
padding-right: 48px !important;
}
body:not(.wp-admin) .settings-list-wrapper .setting-page-account .password-wrapper > span {
position: absolute !important;
right: 14px !important;
top: 50% !important;
transform: translateY(-50%) !important;
color: var(--sh-text-muted) !important;
cursor: pointer !important;
background: transparent !important;
padding: 6px !important;
border-radius: 50% !important;
transition: color 200ms, background 200ms;
}
body:not(.wp-admin) .settings-list-wrapper .setting-page-account .password-wrapper > span:hover {
color: var(--sh-accent) !important;
background: rgba(228,81,158,0.08) !important;
}
/* Password criteria card */
body:not(.wp-admin) .settings-list-wrapper .password-criteria {
background: linear-gradient(135deg, #eef0fa 0%, #fee8f3 100%) !important;
border: 1px solid rgba(228,81,158,0.14) !important;
border-radius: var(--sh-radius-md) !important;
padding: 16px 18px !important;
margin-right: 0 !important;
}
body:not(.wp-admin) .settings-list-wrapper .password-criteria[style] {
margin-right: 0 !important;
}
body:not(.wp-admin) .settings-list-wrapper .password-criteria p {
font-size: 12px !important;
font-weight: 700 !important;
color: var(--sh-text) !important;
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 0 0 10px !important;
}
body:not(.wp-admin) .settings-list-wrapper .password-criteria > div {
display: inline-flex !important;
align-items: center;
gap: 6px;
margin-right: 16px;
margin-bottom: 4px;
font-size: 13px;
color: var(--sh-text-2);
}
body:not(.wp-admin) .settings-list-wrapper .password-criteria > div[style] {
padding: 0 !important;
}
body:not(.wp-admin) .settings-list-wrapper .password-criteria label {
text-transform: none !important;
letter-spacing: normal !important;
font-weight: 500 !important;
color: var(--sh-text-2) !important;
font-size: 13px !important;
margin: 0 !important;
}
body:not(.wp-admin) .settings-list-wrapper .password-criteria small {
font-size: inherit;
}
/* Submit button row */
body:not(.wp-admin) .settings-list-wrapper .setting-page-account .form-group.dspdp-row {
padding-top: 16px !important;
border-top: 1px solid var(--sh-divider) !important;
margin-top: 8px !important;
}
body:not(.wp-admin) .settings-list-wrapper .setting-page-account .btn-row,
body:not(.wp-admin) .settings-list-wrapper .setting-page-account .dspdp-col-sm-offset-3,
body:not(.wp-admin) .settings-list-wrapper .setting-page-account .dspdp-col-sm-6 {
padding: 0 !important;
margin: 0 !important;
width: auto !important;
display: flex;
justify-content: flex-end;
}
body:not(.wp-admin) .settings-list-wrapper .setting-page-account input[type="submit"].dsp_submit_button,
body:not(.wp-admin) .settings-list-wrapper .setting-page-account input[type="submit"].dspdp-btn-default {
background: var(--sh-accent) !important;
color: #fff !important;
padding: 12px 32px !important;
border: 0 !important;
border-radius: var(--sh-radius-pill) !important;
font-weight: 700 !important;
font-size: 14px !important;
letter-spacing: 0.02em;
cursor: pointer;
box-shadow: 0 8px 22px rgba(228,81,158,0.28) !important;
transition: all 220ms var(--sh-ease);
}
body:not(.wp-admin) .settings-list-wrapper .setting-page-account input[type="submit"].dsp_submit_button:hover {
background: var(--sh-accent-600) !important;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(228,81,158,0.38) !important;
}
body:not(.wp-admin) .settings-list-wrapper .setting-page-account input[type="submit"]:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
}
/* Error messages */
body:not(.wp-admin) .settings-list-wrapper .setting-page-account .error {
color: var(--sh-danger) !important;
font-size: 12px;
font-weight: 500;
margin-top: 4px;
}
/* Profile section content wrapper */
body:not(.wp-admin) .profile-content-inner.settings {
padding: 0 !important;
background: transparent;
}
/* The more-panel (hidden by default, slide-in) */
body:not(.wp-admin) .wpee-datebook-more-panel {
background: #fff !important;
border-radius: var(--sh-radius-xl) !important;
padding: 16px !important;
box-shadow: 0 8px 24px rgba(228,81,158,0.10) !important;
border: 1px solid rgba(228,81,158,0.10);
margin: 16px 0 !important;
}
body:not(.wp-admin) .wpee-datebook-more-panel .profile-section-tab-title > a {
background: transparent !important;
color: var(--sh-text-2) !important;
padding: 10px 14px !important;
border-radius: var(--sh-radius-md) !important;
font-weight: 500 !important;
font-size: 13px !important;
text-transform: none !important;
letter-spacing: normal !important;
text-align: left !important;
display: inline-flex !important;
align-items: center;
gap: 10px;
}
body:not(.wp-admin) .wpee-datebook-more-panel .profile-section-tab-title > a > i {
color: var(--sh-accent) !important;
width: 18px;
}
body:not(.wp-admin) .wpee-datebook-more-panel .profile-section-tab-title > a:hover {
background: rgba(228,81,158,0.08) !important;
color: var(--sh-accent) !important;
}
/* ZONE_Z37_END */
/* ==========================================================================
ZONE Z38 — Settings ALL subtabs polish + profile header tightening
========================================================================== */
/* ---- Profile header: tighter avatar ---- */
body:not(.wp-admin) .wpee-datebook-profile-top .profile-img.change-profile-image {
flex: 0 0 120px !important;
width: 120px !important;
height: 120px !important;
}
body:not(.wp-admin) .wpee-datebook-profile-top .update_profile_text_div {
width: 36px !important;
height: 36px !important;
}
body:not(.wp-admin) .wpee-datebook-profile-top {
padding: 28px 28px 24px !important;
gap: 24px !important;
}
/* Username smaller, less dominant */
body:not(.wp-admin) .wpee-datebook-profile-card .username {
font-size: 26px !important;
}
/* Remove the duplicate online green dot on avatar area (keep only the badge pill) */
body:not(.wp-admin) .wpee-datebook-profile-top .wpee-user-status {
display: none !important;
}
/* Get rid of empty white wpee-block spacer between header and settings */
body:not(.wp-admin) .wpee-profile-main-stack .wpee-block:empty,
body:not(.wp-admin) .wpee-datebook-more-panel[hidden] {
display: none !important;
}
/* Meet Me sidebar — reduce avatar size */
body:not(.wp-admin) .modern-meet-card .meet-card-image {
width: 110px !important;
height: 110px !important;
margin: 0 auto 12px !important;
}
body:not(.wp-admin) .modern-meet-card {
padding: 18px !important;
}
/* ---- Settings tabs: fit more in one line ---- */
body:not(.wp-admin) .settings-list-wrapper > ul.profile-section-tab {
gap: 2px !important;
padding: 4px !important;
}
body:not(.wp-admin) .settings-list-wrapper > ul.profile-section-tab > li.profile-section-tab-title > a {
padding: 9px 14px !important;
font-size: 12px !important;
}
/* ========================================================================
#### PRIVACY SETTINGS (privacy.php) ####
======================================================================== */
body:not(.wp-admin) form[name="frmprivacysettings"] .setting-page-account,
body:not(.wp-admin) form[name="frmprivacysettings"] .dsp-box-container {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 18px 24px !important;
}
@media (max-width: 700px) {
body:not(.wp-admin) form[name="frmprivacysettings"] .setting-page-account,
body:not(.wp-admin) form[name="frmprivacysettings"] .dsp-box-container {
grid-template-columns: 1fr !important;
}
}
body:not(.wp-admin) form[name="frmprivacysettings"] .form-group {
display: flex !important;
flex-direction: column;
gap: 6px;
margin: 0 !important;
}
body:not(.wp-admin) form[name="frmprivacysettings"] label {
font-size: 12px !important;
font-weight: 600 !important;
color: var(--sh-text-2) !important;
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 0 !important;
}
body:not(.wp-admin) form[name="frmprivacysettings"] select,
body:not(.wp-admin) form[name="frmprivacysettings"] .form-control {
width: 100% !important;
min-height: 46px !important;
padding: 12px 40px 12px 16px !important;
border: 1.5px solid var(--sh-border) !important;
border-radius: var(--sh-radius-md) !important;
background: #fff url("data:image/svg+xml;utf8,") no-repeat right 14px center !important;
appearance: none;
-webkit-appearance: none;
font-size: 14px !important;
color: var(--sh-text) !important;
box-shadow: none !important;
transition: all 220ms var(--sh-ease);
}
body:not(.wp-admin) form[name="frmprivacysettings"] select:focus {
border-color: var(--sh-accent) !important;
box-shadow: 0 0 0 4px rgba(228,81,158,0.14) !important;
outline: none !important;
}
/* Contact permission checkboxes */
body:not(.wp-admin) form[name="frmprivacysettings"] .select-gender .contat-permission {
grid-column: 1 / -1;
display: flex !important;
flex-wrap: wrap;
gap: 10px;
padding: 0;
margin: 6px 0 0 !important;
list-style: none !important;
}
body:not(.wp-admin) form[name="frmprivacysettings"] .contat-permission li {
display: inline-flex !important;
align-items: center;
gap: 8px;
padding: 10px 16px !important;
background: var(--sh-bg-soft);
border: 1.5px solid var(--sh-border);
border-radius: var(--sh-radius-pill);
cursor: pointer;
font-size: 13px;
color: var(--sh-text);
transition: all 220ms var(--sh-ease);
list-style: none !important;
}
body:not(.wp-admin) form[name="frmprivacysettings"] .contat-permission li:hover {
border-color: rgba(228,81,158,0.35);
background: rgba(254,232,243,0.6);
}
body:not(.wp-admin) form[name="frmprivacysettings"] .contat-permission input[type="checkbox"] {
accent-color: var(--sh-accent);
width: 16px;
height: 16px;
margin: 0 !important;
}
/* Submit */
body:not(.wp-admin) form[name="frmprivacysettings"] input[type="submit"].dsp_submit_button,
body:not(.wp-admin) form[name="frmprivacysettings"] .dspdp-btn-default {
background: var(--sh-accent) !important;
color: #fff !important;
padding: 12px 32px !important;
border: 0 !important;
border-radius: var(--sh-radius-pill) !important;
font-weight: 700 !important;
box-shadow: 0 8px 22px rgba(228,81,158,0.28) !important;
cursor: pointer;
}
body:not(.wp-admin) form[name="frmprivacysettings"] input[type="submit"]:hover {
background: var(--sh-accent-600) !important;
transform: translateY(-2px);
}
body:not(.wp-admin) form[name="frmprivacysettings"] .dspdp-text-success {
background: rgba(34,197,94,0.10);
color: #16a34a;
padding: 10px 14px;
border-radius: var(--sh-radius-md);
border: 1px solid rgba(34,197,94,0.25);
font-size: 13px;
font-weight: 600;
margin-bottom: 16px;
}
/* ========================================================================
#### DELETE ACCOUNT (delete-account.php) ####
======================================================================== */
body:not(.wp-admin) .settings-list-wrapper .btn-blue-wrap {
background: linear-gradient(135deg, #fee2e2 0%, #fff1f1 100%) !important;
border: 1.5px solid #fecaca !important;
border-radius: var(--sh-radius-xl) !important;
padding: 28px !important;
position: relative;
overflow: hidden;
}
body:not(.wp-admin) .settings-list-wrapper .btn-blue-wrap::before {
content: "\26A0";
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background: linear-gradient(135deg, #ef4444, #dc2626);
color: #fff;
border-radius: 50%;
font-size: 28px;
margin: 0 auto 16px;
box-shadow: 0 10px 26px rgba(239,68,68,0.30);
}
body:not(.wp-admin) .settings-list-wrapper .btn-blue-wrap > p[style] {
color: #991b1b !important;
text-align: center;
font-size: 15px;
line-height: 1.5;
margin: 0 0 20px !important;
}
body:not(.wp-admin) .settings-list-wrapper .btn-blue-wrap > p[style] strong {
font-weight: 800;
}
body:not(.wp-admin) .settings-list-wrapper .btn-blue-wrap .form-group {
max-width: 480px;
margin: 0 auto 20px !important;
}
body:not(.wp-admin) .settings-list-wrapper .btn-blue-wrap label {
display: block;
font-size: 12px;
font-weight: 600;
color: #991b1b;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 8px;
}
body:not(.wp-admin) .settings-list-wrapper .btn-blue-wrap input[type="password"] {
width: 100% !important;
padding: 12px 48px 12px 16px !important;
border: 1.5px solid #fecaca !important;
border-radius: var(--sh-radius-md) !important;
background: #fff !important;
font-size: 14px !important;
}
body:not(.wp-admin) .settings-list-wrapper .btn-blue-wrap input[type="password"]:focus {
border-color: #ef4444 !important;
box-shadow: 0 0 0 4px rgba(239,68,68,0.14) !important;
outline: none;
}
body:not(.wp-admin) .settings-list-wrapper .btn-blue-wrap input.dspdp-btn-danger {
background: #ef4444 !important;
color: #fff !important;
padding: 14px 36px !important;
border: 0 !important;
border-radius: var(--sh-radius-pill) !important;
font-weight: 700 !important;
font-size: 14px !important;
letter-spacing: 0.02em;
box-shadow: 0 8px 22px rgba(239,68,68,0.32) !important;
display: block !important;
margin: 0 auto !important;
max-width: 320px;
width: 100%;
cursor: pointer;
}
body:not(.wp-admin) .settings-list-wrapper .btn-blue-wrap input.dspdp-btn-danger:hover {
background: #dc2626 !important;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(239,68,68,0.40) !important;
}
/* ========================================================================
#### PREMIUM PLANS (upgrade-account.php) ####
======================================================================== */
/* Current plan banner */
body:not(.wp-admin) .wpee-premium-area .premium-area {
background: linear-gradient(135deg, #5c63b7 0%, #e4519e 100%) !important;
color: #fff !important;
border-radius: var(--sh-radius-xl) !important;
padding: 22px 26px !important;
margin: 0 0 28px !important;
box-shadow: 0 14px 34px rgba(228,81,158,0.22);
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
body:not(.wp-admin) .wpee-premium-area .premium-area .logo-premium {
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
font-size: 16px;
color: #fff;
}
body:not(.wp-admin) .wpee-premium-area .premium-area .logo-premium img {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255,255,255,0.2);
padding: 6px;
}
body:not(.wp-admin) .wpee-premium-area .premium-area .premium-content,
body:not(.wp-admin) .wpee-premium-area .premium-area .premium-content-date {
color: rgba(255,255,255,0.92);
font-size: 13px;
margin: 0;
}
/* Plans grid */
body:not(.wp-admin) .wpee-plan-item-wrapper {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
gap: 20px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
body:not(.wp-admin) .wpee-plan-item {
background: #fff !important;
border: 1.5px solid rgba(228,81,158,0.12) !important;
border-radius: var(--sh-radius-2xl) !important;
padding: 26px !important;
position: relative;
display: flex !important;
flex-direction: column !important;
gap: 12px;
box-shadow: 0 8px 24px rgba(228,81,158,0.06);
transition: all 260ms var(--sh-ease-out);
list-style: none !important;
}
body:not(.wp-admin) .wpee-plan-item:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px rgba(228,81,158,0.18);
border-color: rgba(228,81,158,0.30);
}
/* Popular (middle) plan ribbon */
body:not(.wp-admin) .wpee-plan-item:nth-child(2)::before {
content: "POPULAR";
position: absolute;
top: 14px;
right: -32px;
background: var(--sh-accent);
color: #fff;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.1em;
padding: 5px 34px;
transform: rotate(35deg);
box-shadow: 0 6px 16px rgba(228,81,158,0.35);
z-index: 2;
}
body:not(.wp-admin) .wpee-plan-item-inner {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
flex: 1;
}
body:not(.wp-admin) .wpee-plan-item-inner > li {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
body:not(.wp-admin) .wpee-plan-image-wrap {
display: flex;
justify-content: center;
padding: 14px;
background: linear-gradient(135deg, #eef0fa 0%, #fee8f3 100%);
border-radius: var(--sh-radius-xl);
}
body:not(.wp-admin) .wpee-plan-image {
width: 64px !important;
height: 64px !important;
object-fit: contain;
}
body:not(.wp-admin) .wpee-plan-name {
font-size: 18px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
text-align: center;
letter-spacing: -0.01em;
}
body:not(.wp-admin) .wpee-plan-name strong { font-weight: inherit; }
body:not(.wp-admin) .wpee-plan-desc {
color: var(--sh-text-muted) !important;
font-size: 13px;
text-align: center;
min-height: 36px;
line-height: 1.4;
}
body:not(.wp-admin) .wpee-plan-item form {
margin-top: auto !important;
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
}
body:not(.wp-admin) .wpee-plan-item form span[style*="130%"] {
font-size: 30px !important;
font-weight: 800 !important;
background: linear-gradient(90deg, var(--sh-accent), var(--sh-primary)) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
line-height: 1;
}
body:not(.wp-admin) .wpee-plan-item form input[type="submit"].dspdp-btn-default,
body:not(.wp-admin) .wpee-plan-item form input[type="submit"] {
background: var(--sh-accent) !important;
color: #fff !important;
border: 0 !important;
padding: 12px 22px !important;
border-radius: var(--sh-radius-pill) !important;
font-weight: 700 !important;
font-size: 14px !important;
width: 100%;
cursor: pointer;
box-shadow: 0 8px 22px rgba(228,81,158,0.28) !important;
transition: all 220ms var(--sh-ease);
}
body:not(.wp-admin) .wpee-plan-item form input[type="submit"]:hover {
background: var(--sh-accent-600) !important;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(228,81,158,0.38) !important;
}
body:not(.wp-admin) .wpee-plan-item form img[src*="paypal"] {
max-width: 140px;
height: auto;
border-radius: var(--sh-radius-md);
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transition: transform 220ms;
}
body:not(.wp-admin) .wpee-plan-item form img[src*="paypal"]:hover {
transform: translateY(-2px);
}
body:not(.wp-admin) .dspdp-alert.dspdp-alert-success {
background: rgba(34,197,94,0.10);
color: #16a34a;
padding: 14px 18px;
border-radius: var(--sh-radius-md);
border: 1px solid rgba(34,197,94,0.25);
margin-bottom: 18px;
font-weight: 600;
}
/* ========================================================================
#### CREDIT PACKAGES (credit-plans.php) ####
======================================================================== */
body:not(.wp-admin) .wpee-plan-desc.wpee-plan-credits-number {
font-size: 32px !important;
font-weight: 800 !important;
background: linear-gradient(90deg, var(--sh-accent), var(--sh-primary)) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
text-align: center;
min-height: 0 !important;
}
body:not(.wp-admin) .credit_price {
font-weight: 800 !important;
color: var(--sh-text) !important;
}
body:not(.wp-admin) .dsp_span_pointer.dspdp-btn-default {
background: var(--sh-accent) !important;
color: #fff !important;
cursor: pointer;
padding: 12px 22px !important;
border-radius: var(--sh-radius-pill) !important;
font-weight: 700 !important;
width: 100%;
text-align: center;
display: block !important;
border: 0 !important;
box-shadow: 0 8px 22px rgba(228,81,158,0.28) !important;
transition: all 220ms var(--sh-ease);
}
body:not(.wp-admin) .dsp_span_pointer.dspdp-btn-default:hover {
background: var(--sh-accent-600) !important;
transform: translateY(-2px);
}
/* ========================================================================
#### BLOCKED MEMBERS (blocked-members.php) ####
======================================================================== */
body:not(.wp-admin) .wpee-block-wrapper.friends-favourites,
body:not(.wp-admin) #m_list_blocked_members {
padding: 0 !important;
}
body:not(.wp-admin) ul.friends-section {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
gap: 14px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
body:not(.wp-admin) ul.friends-section > li.wpee-fav-list {
display: flex !important;
align-items: center;
gap: 14px;
padding: 14px !important;
background: #fff;
border: 1px solid rgba(228,81,158,0.10);
border-radius: var(--sh-radius-lg);
box-shadow: 0 4px 14px rgba(228,81,158,0.04);
transition: all 220ms var(--sh-ease);
list-style: none !important;
}
body:not(.wp-admin) ul.friends-section > li.wpee-fav-list:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(228,81,158,0.12);
border-color: rgba(228,81,158,0.22);
}
body:not(.wp-admin) ul.friends-section figure.img-holder {
flex: 0 0 56px;
width: 56px;
height: 56px;
border-radius: 50%;
overflow: hidden;
margin: 0 !important;
position: relative;
}
body:not(.wp-admin) ul.friends-section figure.img-holder img {
width: 100%;
height: 100%;
object-fit: cover;
}
body:not(.wp-admin) ul.friends-section .fav-content {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
body:not(.wp-admin) ul.friends-section .user-name-show {
font-weight: 700;
color: var(--sh-text);
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body:not(.wp-admin) ul.friends-section .dsp-btn-default,
body:not(.wp-admin) ul.friends-section .wpee-block-trigger {
padding: 8px 14px !important;
background: rgba(228,81,158,0.10) !important;
color: var(--sh-accent) !important;
border: 1px solid rgba(228,81,158,0.22) !important;
border-radius: var(--sh-radius-pill) !important;
font-size: 12px !important;
font-weight: 700 !important;
text-decoration: none !important;
cursor: pointer;
transition: all 220ms var(--sh-ease);
white-space: nowrap;
}
body:not(.wp-admin) ul.friends-section .dsp-btn-default:hover,
body:not(.wp-admin) ul.friends-section .wpee-block-trigger:hover {
background: var(--sh-accent) !important;
color: #fff !important;
border-color: var(--sh-accent) !important;
}
/* ========================================================================
#### FRIEND REQUESTS (friend-requests) ####
======================================================================== */
body:not(.wp-admin) ul.friend-request-list {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
gap: 14px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
body:not(.wp-admin) ul.friend-request-list > li.view-list {
background: #fff;
border: 1px solid rgba(228,81,158,0.10);
border-radius: var(--sh-radius-lg);
padding: 16px;
display: flex;
align-items: center;
gap: 14px;
list-style: none !important;
transition: all 220ms var(--sh-ease);
}
body:not(.wp-admin) ul.friend-request-list > li.view-list:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(228,81,158,0.12);
border-color: rgba(228,81,158,0.22);
}
body:not(.wp-admin) ul.friend-request-list figure {
flex: 0 0 56px;
width: 56px;
height: 56px;
border-radius: 50%;
overflow: hidden;
margin: 0;
}
body:not(.wp-admin) ul.friend-request-list figure img {
width: 100%;
height: 100%;
object-fit: cover;
}
body:not(.wp-admin) ul.friend-request-list .user-details {
flex: 1;
min-width: 0;
}
body:not(.wp-admin) ul.friend-request-list .member-user-name {
font-size: 14px !important;
font-weight: 700 !important;
color: var(--sh-text) !important;
margin: 0 0 8px !important;
}
body:not(.wp-admin) ul.friend-request-list .wpee-friend-request-action {
display: flex;
gap: 6px;
}
body:not(.wp-admin) ul.friend-request-list .wpee-respond-friend-request-trigger {
padding: 6px 12px !important;
border-radius: var(--sh-radius-pill) !important;
font-size: 11px !important;
font-weight: 700 !important;
cursor: pointer;
border: 0 !important;
transition: all 220ms var(--sh-ease);
}
body:not(.wp-admin) ul.friend-request-list .wpee-respond-friend-request-trigger[data-action="yes"],
body:not(.wp-admin) ul.friend-request-list .wpee-respond-friend-request-trigger[data-action="accept"] {
background: var(--sh-accent) !important;
color: #fff !important;
box-shadow: 0 4px 12px rgba(228,81,158,0.25);
}
body:not(.wp-admin) ul.friend-request-list .wpee-respond-friend-request-trigger[data-action="no"],
body:not(.wp-admin) ul.friend-request-list .wpee-respond-friend-request-trigger[data-action="reject"] {
background: var(--sh-bg-soft) !important;
color: var(--sh-text-2) !important;
border: 1px solid var(--sh-border) !important;
}
body:not(.wp-admin) ul.friend-request-list .wpee-respond-friend-request-trigger:hover {
transform: translateY(-1px);
}
/* ========================================================================
#### HISTORY / ACTIVITY / TABLES (history.php etc.) ####
======================================================================== */
body:not(.wp-admin) .settings-list-wrapper .profile-section-content table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: #fff;
border: 1px solid rgba(228,81,158,0.10);
border-radius: var(--sh-radius-lg);
overflow: hidden;
box-shadow: 0 4px 14px rgba(228,81,158,0.04);
}
body:not(.wp-admin) .settings-list-wrapper .profile-section-content table thead th {
background: linear-gradient(90deg, #fee8f3, #eef0fa);
color: var(--sh-text) !important;
padding: 14px 16px !important;
text-align: left;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 0.08em;
border-bottom: 1px solid rgba(228,81,158,0.14) !important;
}
body:not(.wp-admin) .settings-list-wrapper .profile-section-content table tbody td {
padding: 14px 16px !important;
border-bottom: 1px solid var(--sh-divider) !important;
font-size: 13px;
color: var(--sh-text);
}
body:not(.wp-admin) .settings-list-wrapper .profile-section-content table tbody tr:last-child td {
border-bottom: 0 !important;
}
body:not(.wp-admin) .settings-list-wrapper .profile-section-content table tbody tr:hover td {
background: rgba(254,232,243,0.4);
}
/* ========================================================================
Success/Error messages
======================================================================== */
body:not(.wp-admin) .settings-list-wrapper .thanks,
body:not(.wp-admin) .settings-list-wrapper .dspdp-text-success,
body:not(.wp-admin) .settings-list-wrapper .dspdp-alert-success {
background: rgba(34,197,94,0.10);
color: #16a34a;
padding: 12px 18px;
border-radius: var(--sh-radius-md);
border: 1px solid rgba(34,197,94,0.25);
margin-bottom: 18px;
font-size: 13px;
font-weight: 600;
}
body:not(.wp-admin) .settings-list-wrapper .dspdp-text-danger,
body:not(.wp-admin) .settings-list-wrapper .dspdp-alert-danger {
background: rgba(239,68,68,0.10);
color: #b91c1c;
padding: 12px 18px;
border-radius: var(--sh-radius-md);
border: 1px solid rgba(239,68,68,0.25);
margin-bottom: 18px;
font-size: 13px;
font-weight: 600;
}
/* ZONE_Z38_END */
/* ==========================================================================
ZONE Z39 — Premium plans fix + Activity sidebar cards + Cover overlap
========================================================================== */
/* ---- PREMIUM BANNER (current plan): readable text on gradient ---- */
body:not(.wp-admin) .wpee-premium-area .premium-area {
background: linear-gradient(135deg, #5c63b7 0%, #e4519e 100%) !important;
color: #fff !important;
display: flex !important;
flex-direction: column;
gap: 10px;
padding: 24px 28px !important;
border-radius: var(--sh-radius-xl) !important;
margin: 0 0 28px !important;
box-shadow: 0 16px 36px rgba(228,81,158,0.22);
position: relative;
overflow: hidden;
}
body:not(.wp-admin) .wpee-premium-area .premium-area::after {
content: "";
position: absolute;
top: -40px;
right: -40px;
width: 180px;
height: 180px;
background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%);
pointer-events: none;
}
body:not(.wp-admin) .wpee-premium-area .premium-area * {
color: #fff !important;
}
body:not(.wp-admin) .wpee-premium-area .premium-area .logo-premium {
color: #fff !important;
font-size: 18px !important;
font-weight: 800 !important;
display: flex;
align-items: center;
gap: 12px;
letter-spacing: -0.01em;
}
body:not(.wp-admin) .wpee-premium-area .premium-area .logo-premium img {
width: 40px !important;
height: 40px !important;
padding: 8px;
background: rgba(255,255,255,0.22) !important;
border-radius: 50%;
}
body:not(.wp-admin) .wpee-premium-area .premium-area .premium-content,
body:not(.wp-admin) .wpee-premium-area .premium-area .premium-content-date,
body:not(.wp-admin) .wpee-premium-area .premium-area p {
color: rgba(255,255,255,0.92) !important;
font-size: 14px !important;
margin: 0 !important;
line-height: 1.5;
}
/* ---- PLAN CARDS: force grid even against .d-flex legacy ---- */
body:not(.wp-admin) ul.wpee-plan-item-wrapper.d-flex.no-list,
body:not(.wp-admin) .wpee-plan-item-wrapper {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
flex-direction: initial !important;
flex-wrap: initial !important;
gap: 20px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
body:not(.wp-admin) ul.wpee-plan-item-wrapper > li.wpee-plan-item {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
flex: initial !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
}
/* Kill any residual .d-flex forcing row */
body:not(.wp-admin) .wpee-plan-item-wrapper > .wpee-plan-item,
body:not(.wp-admin) .wpee-plan-item-wrapper > .wpee-plan-item-inner {
width: 100% !important;
max-width: 100% !important;
}
/* Plan card inner — single column rhythm */
body:not(.wp-admin) .wpee-plan-item-inner {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
flex: 1;
}
body:not(.wp-admin) .wpee-plan-item-inner > li {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
display: block !important;
}
/* Plan name and desc — no text-break-per-word */
body:not(.wp-admin) .wpee-plan-name {
display: block !important;
text-align: center;
white-space: normal !important;
word-break: keep-all !important;
}
body:not(.wp-admin) .wpee-plan-desc {
display: block !important;
white-space: normal !important;
word-break: normal !important;
}
/* Upgrade button — full-width inside card */
body:not(.wp-admin) .wpee-plan-item form {
width: 100% !important;
margin-top: auto !important;
}
body:not(.wp-admin) .wpee-plan-item form input[type="submit"] {
width: 100% !important;
display: block !important;
}
/* ==========================================================================
COVER PHOTO + ACCOUNT LEVEL: fix overlap in profile header
========================================================================== */
body:not(.wp-admin) .wpee-datebook-actions {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 10px !important;
align-items: center !important;
margin-top: 12px !important;
}
body:not(.wp-admin) .wpee-datebook-account-status {
order: 1;
margin: 0 !important;
padding: 0 !important;
}
body:not(.wp-admin) .wpee-datebook-cover-actions {
order: 2;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
top: auto !important;
right: auto !important;
}
body:not(.wp-admin) .wpee-datebook-cover-actions .change-cover-photo {
position: relative !important;
padding: 0 !important;
}
body:not(.wp-admin) .wpee-datebook-cover-actions .change-cover-photo form {
display: none !important;
}
/* ==========================================================================
ACTIVITY SIDEBAR CARDS (About Me / Photo Gallery / Friends)
========================================================================== */
/* Sidebar col3 stack */
body:not(.wp-admin) .wpee-profile-col3-stack,
body:not(.wp-admin) .profile-activity-sidebar {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
padding: 0 !important;
}
/* Shared card style for sidebar blocks */
body:not(.wp-admin) .profile-activity-sidebar .wpee-block,
body:not(.wp-admin) .wpee-profile-col3-stack .wpee-block {
background: #fff !important;
border: 1px solid rgba(228, 81, 158, 0.10) !important;
border-radius: var(--sh-radius-xl) !important;
box-shadow: 0 8px 24px rgba(228, 81, 158, 0.06) !important;
padding: 20px !important;
margin: 0 !important;
transition: all 260ms var(--sh-ease-out);
}
body:not(.wp-admin) .profile-activity-sidebar .wpee-block:hover {
box-shadow: 0 14px 32px rgba(228, 81, 158, 0.10) !important;
border-color: rgba(228, 81, 158, 0.18) !important;
}
/* Block headers */
body:not(.wp-admin) .profile-activity-sidebar .wpee-block-header,
body:not(.wp-admin) .wpee-profile-col3-stack .wpee-block-header {
padding: 0 0 14px !important;
margin: 0 0 14px !important;
border-bottom: 1px solid var(--sh-divider) !important;
position: relative;
display: block !important;
}
body:not(.wp-admin) .profile-activity-sidebar .wpee-block-title,
body:not(.wp-admin) .wpee-profile-col3-stack .wpee-block-title {
font-size: 14px !important;
font-weight: 700 !important;
color: var(--sh-text) !important;
letter-spacing: -0.01em;
margin: 0 !important;
padding: 0 0 0 14px !important;
position: relative;
display: inline-block;
}
body:not(.wp-admin) .profile-activity-sidebar .wpee-block-title::before,
body:not(.wp-admin) .wpee-profile-col3-stack .wpee-block-title::before {
content: "";
position: absolute;
left: 0;
top: 2px;
bottom: 2px;
width: 4px;
border-radius: 2px;
background: linear-gradient(180deg, var(--sh-accent), var(--sh-primary));
}
/* Block content + footer */
body:not(.wp-admin) .profile-activity-sidebar .wpee-block-content,
body:not(.wp-admin) .wpee-profile-col3-stack .wpee-block-content {
padding: 0 !important;
margin: 0 !important;
}
body:not(.wp-admin) .profile-activity-sidebar .wpee-block-footer,
body:not(.wp-admin) .wpee-profile-col3-stack .wpee-block-footer {
padding: 12px 0 0 !important;
margin: 12px 0 0 !important;
border-top: 1px solid var(--sh-divider) !important;
}
body:not(.wp-admin) .profile-activity-sidebar .wpee-block-footer a,
body:not(.wp-admin) .wpee-profile-col3-stack .wpee-block-footer a {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--sh-accent) !important;
font-size: 12px !important;
font-weight: 700 !important;
text-decoration: none !important;
text-transform: uppercase;
letter-spacing: 0.06em;
transition: color 200ms var(--sh-ease), transform 200ms var(--sh-ease);
}
body:not(.wp-admin) .profile-activity-sidebar .wpee-block-footer a::after,
body:not(.wp-admin) .wpee-profile-col3-stack .wpee-block-footer a::after {
content: "→";
transition: transform 200ms var(--sh-ease);
}
body:not(.wp-admin) .profile-activity-sidebar .wpee-block-footer a:hover {
color: var(--sh-accent-600) !important;
}
body:not(.wp-admin) .profile-activity-sidebar .wpee-block-footer a:hover::after {
transform: translateX(3px);
}
/* ---- About Me list ---- */
body:not(.wp-admin) .profile-activity-sidebar .profile-detail-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex;
flex-direction: column;
gap: 2px;
}
body:not(.wp-admin) .profile-activity-sidebar .profile-detail-list > li {
display: flex !important;
justify-content: space-between !important;
align-items: center;
padding: 10px 0 !important;
border-bottom: 1px solid var(--sh-divider) !important;
font-size: 13px;
margin: 0 !important;
list-style: none !important;
}
body:not(.wp-admin) .profile-activity-sidebar .profile-detail-list > li:last-child {
border-bottom: 0 !important;
}
body:not(.wp-admin) .profile-activity-sidebar .profile-detail-list .detail-label {
color: var(--sh-text-muted) !important;
font-weight: 500;
font-size: 12px !important;
}
body:not(.wp-admin) .profile-activity-sidebar .profile-detail-list .detail-value {
color: var(--sh-text) !important;
font-weight: 700;
}
/* ---- Photo Gallery grid ---- */
body:not(.wp-admin) .profile-activity-sidebar .profile-photo-list {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 6px !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
body:not(.wp-admin) .profile-activity-sidebar .profile-photo-list > li {
list-style: none !important;
aspect-ratio: 1;
border-radius: var(--sh-radius-md);
overflow: hidden;
background: var(--sh-bg-soft);
margin: 0 !important;
padding: 0 !important;
}
body:not(.wp-admin) .profile-activity-sidebar .profile-photo-list > li img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
/* Empty state */
body:not(.wp-admin) .profile-activity-sidebar .profile-photo-list > li.no-photos-message {
grid-column: 1 / -1;
aspect-ratio: unset;
padding: 20px !important;
background: linear-gradient(135deg, #fee8f3, #eef0fa) !important;
text-align: center;
font-size: 12px;
color: var(--sh-text-muted) !important;
font-weight: 500;
border: 1px dashed rgba(228, 81, 158, 0.25);
}
/* ---- Friends list ---- */
body:not(.wp-admin) .profile-activity-sidebar .friends-section.profile-friends-list {
display: flex !important;
flex-direction: row;
flex-wrap: wrap;
gap: 8px !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
body:not(.wp-admin) .profile-activity-sidebar .friends-section > li,
body:not(.wp-admin) .profile-activity-sidebar .friends-section.profile-friends-list > li {
width: 48px;
height: 48px;
border-radius: 50%;
overflow: hidden;
margin: 0 !important;
list-style: none !important;
}
body:not(.wp-admin) .profile-activity-sidebar .friends-section > li img {
width: 100%;
height: 100%;
object-fit: cover;
}
body:not(.wp-admin) .profile-activity-sidebar .friends-section .dsp_span_pointer {
display: block;
padding: 20px !important;
background: linear-gradient(135deg, #fee8f3, #eef0fa) !important;
border: 1px dashed rgba(228, 81, 158, 0.25);
border-radius: var(--sh-radius-md);
text-align: center;
font-size: 12px;
color: var(--sh-text-muted) !important;
font-weight: 500;
width: 100%;
cursor: default;
}
/* ---- Activity feed empty state (main content) ---- */
body:not(.wp-admin) .profile-content-inner.activity .wpee-feeds-empty {
text-align: center;
font-size: 16px;
color: var(--sh-text-muted) !important;
padding: 60px 20px !important;
background: #fff;
border: 2px dashed rgba(228,81,158,0.22);
border-radius: var(--sh-radius-xl);
margin: 20px 0 !important;
}
body:not(.wp-admin) .profile-content-inner.activity .wpee-feeds-empty::before {
content: "💭";
display: block;
font-size: 48px;
margin-bottom: 12px;
}
body:not(.wp-admin) .profile-activity-inner {
background: transparent !important;
padding: 0 !important;
}
/* ZONE_Z39_END */
/* ==========================================================================
ZONE Z40 — Gift popup, Wink popup, other-user actions, quick search
========================================================================== */
/* ================= GIFT POPUP (force working + beautiful) ================= */
body:not(.wp-admin) .wpee-gift-popup-overlay,
html body .wpee-gift-popup-overlay {
display: none;
position: fixed !important;
inset: 0 !important;
z-index: 10500 !important;
background: rgba(26, 26, 46, 0.60) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
align-items: center !important;
justify-content: center !important;
padding: 20px !important;
animation: sh-fade-in 260ms var(--sh-ease-out);
}
body:not(.wp-admin) .wpee-gift-popup-overlay.is-open,
html body .wpee-gift-popup-overlay.is-open {
display: flex !important;
}
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-popup-box {
position: relative !important;
background: #fff !important;
border-radius: var(--sh-radius-2xl) !important;
box-shadow: 0 30px 80px rgba(26, 26, 46, 0.32) !important;
width: 92vw !important;
max-width: 720px !important;
max-height: 90vh !important;
overflow-y: auto !important;
padding: 48px 28px 28px !important;
animation: sh-popup-in 340ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes sh-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sh-popup-in {
from { opacity: 0; transform: translateY(20px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-popup-close {
position: absolute !important;
top: 14px !important;
right: 14px !important;
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
padding: 0 !important;
border-radius: 50% !important;
background: var(--sh-bg-soft) !important;
color: var(--sh-text) !important;
border: 0 !important;
font-size: 22px !important;
font-weight: 700;
line-height: 1 !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
transition: all 220ms var(--sh-ease);
z-index: 5;
box-shadow: none !important;
}
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-popup-close:hover {
background: var(--sh-accent) !important;
color: #fff !important;
transform: rotate(90deg);
}
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-popup-title {
text-align: center !important;
font-size: 24px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
margin: 0 0 8px !important;
padding: 0 40px !important;
letter-spacing: -0.02em;
}
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-popup-title::after {
content: "Pick a gift to send 💝";
display: block;
font-size: 13px;
font-weight: 500;
color: var(--sh-text-muted);
text-transform: none;
letter-spacing: 0;
margin-top: 6px;
}
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-popup-content {
margin-top: 20px !important;
}
/* Gift grid */
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-dropdown,
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-inner {
width: 100% !important;
}
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-inner > form {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
gap: 14px !important;
margin: 0 !important;
padding: 0 !important;
}
@media (max-width: 520px) {
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-inner > form {
grid-template-columns: repeat(3, 1fr) !important;
gap: 10px !important;
}
}
@media (max-width: 380px) {
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-inner > form {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* Each gift card */
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-inner > form > .form-group {
position: relative !important;
background: linear-gradient(135deg, #fff, #fef4f9) !important;
border: 2px solid var(--sh-border) !important;
border-radius: var(--sh-radius-lg) !important;
padding: 14px 10px !important;
margin: 0 !important;
cursor: pointer !important;
transition: all 260ms var(--sh-ease-out);
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: space-between !important;
gap: 6px !important;
min-height: 150px !important;
}
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-inner > form > .form-group:hover {
transform: translateY(-4px);
box-shadow: 0 16px 30px rgba(228, 81, 158, 0.18);
border-color: rgba(228, 81, 158, 0.4);
background: linear-gradient(135deg, #fff, #fdd8e8) !important;
}
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-inner > form > .form-group input[type="radio"].wpee-gift {
position: absolute !important;
top: 8px !important;
left: 8px !important;
width: 16px !important;
height: 16px !important;
accent-color: var(--sh-accent);
cursor: pointer !important;
opacity: 0.5;
transition: opacity 200ms;
}
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-inner > form > .form-group img {
width: 72px !important;
height: 72px !important;
object-fit: contain !important;
display: block !important;
pointer-events: none;
margin: 8px 0 0;
filter: drop-shadow(0 4px 10px rgba(0,0,0,0.08));
transition: transform 260ms var(--sh-ease-out);
}
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-inner > form > .form-group:hover img {
transform: scale(1.08);
}
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-inner > form > .form-group .wpdating-gift-price {
text-align: center !important;
font-size: 11px !important;
font-weight: 700 !important;
color: var(--sh-accent) !important;
background: rgba(228,81,158,0.10);
padding: 4px 10px;
border-radius: 999px;
margin-top: 0 !important;
letter-spacing: 0.02em;
min-height: 0 !important;
}
/* Selected state */
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-inner > form > .form-group:has(input[type="radio"]:checked) {
background: linear-gradient(135deg, #fdd8e8, #eef0fa) !important;
border-color: var(--sh-accent) !important;
box-shadow: 0 12px 28px rgba(228,81,158,0.30);
}
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-inner > form > .form-group:has(input[type="radio"]:checked)::after {
content: "\f00c";
font-family: "FontAwesome";
position: absolute;
top: 6px;
right: 6px;
width: 22px;
height: 22px;
background: var(--sh-accent);
color: #fff;
font-size: 11px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(228,81,158,0.40);
}
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-inner > form > .form-group:has(input[type="radio"]:checked) input[type="radio"].wpee-gift {
opacity: 1;
}
/* Submit button */
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-submit,
body:not(.wp-admin) .wpee-gift-popup-overlay input[type="submit"].wpee-gift-submit {
grid-column: 1 / -1 !important;
width: 100% !important;
background: var(--sh-accent) !important;
color: #fff !important;
border: 0 !important;
padding: 14px 28px !important;
border-radius: var(--sh-radius-pill) !important;
font-weight: 800 !important;
font-size: 15px !important;
letter-spacing: 0.02em;
cursor: pointer !important;
margin-top: 14px !important;
box-shadow: 0 12px 28px rgba(228,81,158,0.32) !important;
transition: all 260ms var(--sh-ease-out);
position: sticky;
bottom: 0;
z-index: 2;
}
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-submit:hover {
background: var(--sh-accent-600) !important;
transform: translateY(-2px);
box-shadow: 0 16px 36px rgba(228,81,158,0.42) !important;
}
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-error-message {
grid-column: 1 / -1;
text-align: center;
padding: 30px 20px !important;
background: linear-gradient(135deg, #fee8f3, #eef0fa);
border-radius: var(--sh-radius-lg);
color: var(--sh-text-2) !important;
font-size: 14px;
border: 1px dashed rgba(228,81,158,0.25);
}
body:not(.wp-admin) .wpee-gift-popup-overlay .wpee-gift-error-message a {
color: var(--sh-accent) !important;
font-weight: 700;
}
/* Body scroll lock when gift popup open */
body.wpee-popup-open {
overflow: hidden !important;
}
/* ================= WINK POPUP ================= */
body:not(.wp-admin) .wink-popup-main-wrapper,
body:not(.wp-admin) .popup-main-wrapper {
display: none;
position: fixed !important;
inset: 0 !important;
z-index: 10500 !important;
align-items: center !important;
justify-content: center !important;
padding: 20px !important;
}
body:not(.wp-admin) .wink-popup-main-wrapper.is-open,
body:not(.wp-admin) .popup-main-wrapper.is-open {
display: flex !important;
animation: sh-fade-in 220ms var(--sh-ease-out);
}
/* Wink backdrop */
body:not(.wp-admin) .wink-pop-up-bg,
body:not(.wp-admin) .pop-up-bg {
position: fixed !important;
inset: 0 !important;
background: rgba(26, 26, 46, 0.60) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: -1;
}
/* Wink content */
body:not(.wp-admin) .wink-popup-wrapper,
body:not(.wp-admin) .popup-wrapper {
position: relative !important;
background: #fff !important;
border-radius: var(--sh-radius-2xl) !important;
box-shadow: 0 30px 80px rgba(26, 26, 46, 0.32) !important;
padding: 36px 28px !important;
width: 92vw !important;
max-width: 480px !important;
max-height: 80vh;
overflow-y: auto;
animation: sh-popup-in 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Wink title/header (when popup has heading) */
body:not(.wp-admin) .wink-popup-wrapper h3,
body:not(.wp-admin) .wink-popup-wrapper h4 {
font-size: 20px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
text-align: center;
margin: 0 0 14px !important;
}
/* Not-found message inside wink */
body:not(.wp-admin) .wpee-item-not-found,
body:not(.wp-admin) .wpee-wink-not-found {
text-align: center !important;
padding: 30px 20px !important;
background: linear-gradient(135deg, #fee8f3, #eef0fa) !important;
border-radius: var(--sh-radius-lg) !important;
color: var(--sh-text-2) !important;
font-size: 14px !important;
border: 1px dashed rgba(228,81,158,0.25);
margin: 0 !important;
}
body:not(.wp-admin) .wpee-item-not-found::before {
content: "😊";
display: block;
font-size: 36px;
margin-bottom: 10px;
}
/* Wink close button — real element injected by JS (pseudo can't receive clicks) */
body:not(.wp-admin) .wink-popup-wrapper::before { content: none !important; }
html body .wink-popup-wrapper .sh-wink-close,
html body .popup-wrapper .sh-wink-close {
position: absolute !important;
top: 12px !important;
right: 12px !important;
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 50% !important;
background: var(--sh-bg-soft) !important;
color: var(--sh-text) !important;
border: 1px solid var(--sh-divider) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 22px !important;
line-height: 1 !important;
cursor: pointer !important;
z-index: 10 !important;
box-shadow: 0 2px 6px rgba(26, 26, 46, 0.08) !important;
transition: background 180ms var(--sh-ease), color 180ms var(--sh-ease), transform 180ms var(--sh-ease) !important;
}
html body .wink-popup-wrapper .sh-wink-close:hover,
html body .popup-wrapper .sh-wink-close:hover {
background: var(--sh-accent) !important;
color: #fff !important;
border-color: var(--sh-accent) !important;
transform: scale(1.05);
}
/* ================= OTHER-USER ACTION ICONS (Add Favorite / Gift / Wink / Message / Report) ================= */
body:not(.wp-admin) .wpee-notification-links.different-user.custom-action-icons {
display: flex !important;
align-items: center;
gap: 6px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
body:not(.wp-admin) .wpee-notification-links.different-user.custom-action-icons > li {
position: relative;
list-style: none !important;
margin: 0 !important;
}
body:not(.wp-admin) .wpee-notification-links.different-user.custom-action-icons > li > a {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
min-width: 40px;
border-radius: 50% !important;
background: rgba(255,255,255,0.80) !important;
color: var(--sh-accent) !important;
font-size: 15px !important;
text-decoration: none !important;
border: 1px solid rgba(228,81,158,0.18) !important;
cursor: pointer;
transition: all 220ms var(--sh-ease);
padding: 0 !important;
box-shadow: 0 2px 6px rgba(228,81,158,0.08);
}
body:not(.wp-admin) .wpee-notification-links.different-user.custom-action-icons > li > a:hover {
background: var(--sh-accent) !important;
color: #fff !important;
border-color: var(--sh-accent) !important;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(228,81,158,0.28);
}
/* Tooltip */
body:not(.wp-admin) .wpee-notification-links.different-user.custom-action-icons .wpee-tooltip {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: var(--sh-text);
color: #fff;
font-size: 11px;
font-weight: 600;
padding: 6px 10px;
border-radius: 6px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 200ms;
}
body:not(.wp-admin) .wpee-notification-links.different-user.custom-action-icons > li:hover .wpee-tooltip {
opacity: 1;
}
/* Fav-active state (heart filled) */
body:not(.wp-admin) .wpee-notification-links.different-user .wpee-add-fav-btn.is-fav,
body:not(.wp-admin) .wpee-notification-links.different-user .wpee-add-fav-btn[data-is-fav="1"] {
background: var(--sh-accent) !important;
color: #fff !important;
border-color: var(--sh-accent) !important;
}
/* ================= OTHER-USER PROFILE ACTIONS (Write message / Add friend / Block) ================= */
body:not(.wp-admin) .wpee-datebook-actions .wpee-db-btn-primary {
background: var(--sh-accent) !important;
color: #fff !important;
padding: 10px 20px !important;
border-radius: var(--sh-radius-pill) !important;
font-weight: 700 !important;
font-size: 13px !important;
text-decoration: none !important;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 8px 22px rgba(228,81,158,0.28) !important;
transition: all 220ms var(--sh-ease);
border: 0 !important;
}
body:not(.wp-admin) .wpee-datebook-actions .wpee-db-btn-primary:hover {
background: var(--sh-accent-600) !important;
transform: translateY(-2px);
color: #fff !important;
}
body:not(.wp-admin) .wpee-datebook-actions .wpee-db-btn-outline {
background: #fff !important;
color: var(--sh-accent) !important;
padding: 10px 20px !important;
border-radius: var(--sh-radius-pill) !important;
font-weight: 700 !important;
font-size: 13px !important;
text-decoration: none !important;
border: 1.5px solid rgba(228,81,158,0.30) !important;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 220ms var(--sh-ease);
box-shadow: 0 4px 12px rgba(228,81,158,0.08) !important;
}
body:not(.wp-admin) .wpee-datebook-actions .wpee-db-btn-outline:hover {
background: var(--sh-accent) !important;
color: #fff !important;
border-color: var(--sh-accent) !important;
transform: translateY(-2px);
}
body:not(.wp-admin) .wpee-datebook-actions .wpee-db-btn-muted,
body:not(.wp-admin) .wpee-datebook-actions .block-user-form-trigger-btn {
background: var(--sh-bg-soft) !important;
color: var(--sh-text-2) !important;
padding: 10px 18px !important;
border-radius: var(--sh-radius-pill) !important;
font-weight: 600 !important;
font-size: 13px !important;
text-decoration: none !important;
border: 1px solid var(--sh-border) !important;
transition: all 220ms var(--sh-ease);
}
body:not(.wp-admin) .wpee-datebook-actions .wpee-db-btn-muted:hover {
background: var(--sh-danger-bg) !important;
color: #b91c1c !important;
border-color: rgba(239,68,68,0.30) !important;
}
/* ================= QUICK SEARCH BLOCK (profile bottom) ================= */
body:not(.wp-admin) .wpee-profile-col9-quick-search .profile-quick-search {
background: #fff !important;
border: 1px solid rgba(228,81,158,0.10) !important;
border-radius: var(--sh-radius-2xl) !important;
box-shadow: 0 10px 30px rgba(228,81,158,0.08) !important;
padding: 24px !important;
margin: 24px 0;
}
body:not(.wp-admin) .wpee-profile-col9-quick-search .wpee-block-header {
padding: 0 0 14px !important;
margin: 0 0 18px !important;
border-bottom: 1px solid var(--sh-divider);
}
body:not(.wp-admin) .wpee-profile-col9-quick-search .wpee-block-title {
font-size: 16px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
letter-spacing: -0.01em;
margin: 0 !important;
display: inline-flex;
align-items: center;
gap: 10px;
}
body:not(.wp-admin) .wpee-profile-col9-quick-search .wpee-block-title::before {
content: "\f002";
font-family: "FontAwesome";
color: var(--sh-accent);
background: var(--sh-accent-100);
width: 28px;
height: 28px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
}
body:not(.wp-admin) .wpee-quick-search-rows {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
body:not(.wp-admin) .wpee-quick-search-rows > li {
list-style: none;
}
body:not(.wp-admin) .wpee-qs-row-line1-inner {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 14px !important;
}
body:not(.wp-admin) .wpee-qs-row-line2-inner {
display: grid !important;
grid-template-columns: auto 1fr 1fr auto !important;
gap: 12px !important;
align-items: end;
}
@media (max-width: 700px) {
body:not(.wp-admin) .wpee-qs-row-line1-inner {
grid-template-columns: 1fr 1fr !important;
}
body:not(.wp-admin) .wpee-qs-row-line2-inner {
grid-template-columns: 1fr 1fr !important;
}
body:not(.wp-admin) .wpee-qs-line2-age-heading {
grid-column: 1 / -1;
}
body:not(.wp-admin) .wpee-qs-submit-wrap {
grid-column: 1 / -1;
}
}
body:not(.wp-admin) .wpee-qs-field {
display: flex !important;
flex-direction: column;
gap: 6px;
}
body:not(.wp-admin) .wpee-qs-label,
body:not(.wp-admin) .wpee-quick-search-form .dspdp-control-label {
font-size: 11px !important;
font-weight: 700 !important;
color: var(--sh-text-muted) !important;
text-transform: uppercase;
letter-spacing: 0.06em;
}
body:not(.wp-admin) .wpee-quick-search-form select {
width: 100% !important;
min-height: 42px !important;
padding: 10px 36px 10px 14px !important;
border: 1.5px solid var(--sh-border) !important;
border-radius: var(--sh-radius-md) !important;
background: #fff url("data:image/svg+xml;utf8,") no-repeat right 12px center !important;
appearance: none;
-webkit-appearance: none;
font-size: 13px !important;
color: var(--sh-text) !important;
}
body:not(.wp-admin) .wpee-quick-search-form select:focus {
border-color: var(--sh-accent) !important;
box-shadow: 0 0 0 4px rgba(228,81,158,0.14) !important;
outline: none !important;
}
body:not(.wp-admin) .wpee-qs-line2-age-heading {
display: flex;
align-items: flex-end;
padding-bottom: 11px;
}
body:not(.wp-admin) .wpee-qs-submit-wrap {
position: relative;
}
body:not(.wp-admin) .wpee-qs-submit {
padding: 12px 26px !important;
background: var(--sh-accent) !important;
color: #fff !important;
border: 0 !important;
border-radius: var(--sh-radius-pill) !important;
font-weight: 700 !important;
font-size: 13px !important;
cursor: pointer !important;
box-shadow: 0 8px 20px rgba(228,81,158,0.28) !important;
transition: all 220ms var(--sh-ease);
}
body:not(.wp-admin) .wpee-qs-submit:hover {
background: var(--sh-accent-600) !important;
transform: translateY(-2px);
}
/* ZONE_Z40_END */
/* ==========================================================================
ZONE Z41 — Round avatar, credit packs no-images, premium banner readable
========================================================================== */
/* ============ 1. PROFILE HEADER AVATAR: force CIRCLE ============ */
body:not(.wp-admin) .wpee-datebook-profile-top .profile-img.change-profile-image {
flex: 0 0 120px !important;
width: 120px !important;
height: 120px !important;
border-radius: 50% !important;
overflow: visible !important; /* so camera button can sit outside */
background: #fff !important;
padding: 0 !important;
border: 4px solid #fff !important;
box-shadow: 0 10px 26px rgba(228,81,158,0.22) !important;
position: relative !important;
display: flex !important;
align-items: center;
justify-content: center;
}
body:not(.wp-admin) .wpee-datebook-profile-top .profile-img .loader {
display: none !important;
}
body:not(.wp-admin) .wpee-datebook-profile-top .profile-img > figure,
body:not(.wp-admin) .wpee-datebook-profile-top .profile-img figure.overflow-h {
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 50% !important;
overflow: hidden !important;
background: var(--sh-bg-soft);
}
body:not(.wp-admin) .wpee-datebook-profile-top .profile-img figure a {
display: block !important;
width: 100% !important;
height: 100% !important;
}
body:not(.wp-admin) .wpee-datebook-profile-top .profile-img #profile_picture,
body:not(.wp-admin) .wpee-datebook-profile-top .profile-img figure img,
body:not(.wp-admin) .wpee-datebook-profile-top .profile-img .img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 50% !important;
display: block !important;
}
/* Hidden file-upload form stays hidden */
body:not(.wp-admin) .wpee-datebook-profile-top #change-profile-pic-form {
display: none !important;
}
/* Camera change button — bottom-right */
body:not(.wp-admin) .wpee-datebook-profile-top .update_profile_text_div {
position: absolute !important;
bottom: 2px !important;
right: 2px !important;
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
background: var(--sh-accent) !important;
color: #fff !important;
box-shadow: 0 4px 12px rgba(228,81,158,0.38) !important;
z-index: 3 !important;
cursor: pointer;
display: inline-flex !important;
align-items: center;
justify-content: center;
transition: all 220ms var(--sh-ease);
}
body:not(.wp-admin) .wpee-datebook-profile-top .update_profile_text_div:hover {
background: var(--sh-accent-600) !important;
transform: scale(1.08);
}
body:not(.wp-admin) .wpee-datebook-profile-top .update_profile_text_div > a,
body:not(.wp-admin) .wpee-datebook-profile-top .update_profile_text_div > a > i {
color: #fff !important;
font-size: 14px !important;
}
/* Online/offline status dot — small on top-right */
body:not(.wp-admin) .wpee-datebook-profile-top .wpee-user-status {
display: block !important;
position: absolute !important;
top: 4px !important;
right: 4px !important;
width: 16px !important;
height: 16px !important;
border-radius: 50% !important;
border: 3px solid #fff !important;
background: var(--sh-text-muted);
z-index: 3;
}
body:not(.wp-admin) .wpee-datebook-profile-top .wpee-user-status.wpee-online {
background: var(--sh-success, #22c55e) !important;
box-shadow: 0 0 0 3px rgba(34,197,94,0.25);
}
/* ============ 2. CREDIT PACKAGES — remove images, prettier layout ============ */
/* Hide the coin images */
body:not(.wp-admin) .profile-content-inner .wpee-plan-item .wpee-plan-image-wrap,
body:not(.wp-admin) .settings-list-wrapper .wpee-plan-item.credit_plan_item .wpee-plan-image-wrap {
display: none !important;
}
/* For credit-plans page specifically: infer by presence of .wpee-plan-credits-number */
body:not(.wp-admin) .wpee-plan-item:has(.wpee-plan-credits-number) .wpee-plan-image-wrap,
body:not(.wp-admin) .wpee-plan-item:has(.wpee-plan-credits-number) .wpee-plan-image {
display: none !important;
}
/* Credit plan card reshape: bigger credits number as hero */
body:not(.wp-admin) .wpee-plan-item:has(.wpee-plan-credits-number) {
padding: 28px 24px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 12px !important;
min-height: 240px;
justify-content: space-between;
}
body:not(.wp-admin) .wpee-plan-item:has(.wpee-plan-credits-number) .wpee-plan-name {
font-size: 17px !important;
font-weight: 700 !important;
color: var(--sh-text) !important;
margin: 0 !important;
letter-spacing: -0.01em;
}
body:not(.wp-admin) .wpee-plan-item:has(.wpee-plan-credits-number) .wpee-plan-desc.wpee-plan-credits-number {
font-size: 40px !important;
font-weight: 800 !important;
background: linear-gradient(135deg, #e4519e 0%, #5c63b7 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
text-align: center !important;
line-height: 1 !important;
letter-spacing: -0.02em;
min-height: 0 !important;
margin: 0 !important;
padding: 8px 0 !important;
position: relative;
}
body:not(.wp-admin) .wpee-plan-item:has(.wpee-plan-credits-number) .wpee-plan-desc.wpee-plan-credits-number::before {
content: "✨";
display: block;
font-size: 24px;
-webkit-text-fill-color: initial;
color: var(--sh-accent);
margin-bottom: 8px;
background: none;
}
body:not(.wp-admin) .wpee-plan-item:has(.wpee-plan-credits-number) form {
width: 100%;
margin-top: auto !important;
display: flex;
flex-direction: column;
gap: 8px;
align-items: stretch;
}
body:not(.wp-admin) .wpee-plan-item:has(.wpee-plan-credits-number) form > span[style] {
font-size: 22px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
background: none !important;
-webkit-text-fill-color: var(--sh-text) !important;
order: 2;
padding-top: 4px;
border-top: 1px dashed var(--sh-divider);
}
/* Purchase Credits custom input card */
body:not(.wp-admin) .wpee-plan-item:has(.dspdp-input-group) {
padding: 28px 24px !important;
background: linear-gradient(135deg, #fff, #fef4f9) !important;
}
body:not(.wp-admin) .wpee-plan-item:has(.dspdp-input-group) .wpee-plan-image-wrap,
body:not(.wp-admin) .wpee-plan-item:has(.dspdp-input-group) .wpee-plan-image,
body:not(.wp-admin) .wpee-plan-item:has(.dspdp-input-group) .purchase-credit-image {
display: none !important;
}
body:not(.wp-admin) .wpee-plan-item:has(.dspdp-input-group) .purchase-credit-heading,
body:not(.wp-admin) .wpee-plan-item:has(.dspdp-input-group) .wpee-plan-name {
font-size: 17px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
margin: 0 0 16px !important;
text-align: center;
}
body:not(.wp-admin) .wpee-plan-item-credits .dspdp-input-group {
display: flex !important;
align-items: stretch;
border: 1.5px solid var(--sh-border) !important;
border-radius: var(--sh-radius-pill) !important;
overflow: hidden;
background: #fff;
margin: 8px 0;
transition: all 220ms var(--sh-ease);
}
body:not(.wp-admin) .wpee-plan-item-credits .dspdp-input-group:focus-within {
border-color: var(--sh-accent) !important;
box-shadow: 0 0 0 4px rgba(228,81,158,0.14);
}
body:not(.wp-admin) .wpee-plan-item-credits .dspdp-form-control {
flex: 1 !important;
border: 0 !important;
padding: 12px 16px !important;
font-size: 14px !important;
outline: none !important;
background: transparent !important;
min-height: 0 !important;
}
body:not(.wp-admin) .wpee-plan-item-credits .dspdp-input-group-addon {
display: inline-flex !important;
align-items: center;
padding: 0 16px !important;
background: var(--sh-accent-100) !important;
color: var(--sh-accent) !important;
font-weight: 700 !important;
font-size: 15px !important;
border: 0 !important;
}
body:not(.wp-admin) .default-credit-value {
display: block;
text-align: center;
margin-top: 8px !important;
color: var(--sh-text-muted) !important;
font-size: 12px !important;
font-weight: 500 !important;
}
/* ============ 3. PREMIUM PLANS — readable banner + fix broken images ============ */
/* Current plan banner: force white text on pink gradient */
body:not(.wp-admin) .wpee-premium-area .premium-area {
background: linear-gradient(135deg, #5c63b7 0%, #e4519e 100%) !important;
color: #fff !important;
padding: 24px 28px !important;
}
body:not(.wp-admin) .wpee-premium-area .premium-area * {
color: #fff !important;
}
body:not(.wp-admin) .wpee-premium-area .premium-area a {
color: #ffe0ec !important;
text-decoration: underline;
}
/* Hide the small user avatar inside current-plan banner (if shown) */
body:not(.wp-admin) .wpee-premium-area .premium-area img.sh-account-menu__avatar,
body:not(.wp-admin) .wpee-premium-area .premium-area .dsp_img3 {
display: none !important;
}
/* If banner has a .logo-premium (icon) — keep it */
/* Hide broken plan image on Premium cards (alt showing) — keep on credit pages if exists */
body:not(.wp-admin) .wpee-plan-item:not(:has(.wpee-plan-credits-number)):not(:has(.dspdp-input-group)) .wpee-plan-image-wrap {
/* Keep for premium plans but ensure broken images look clean */
padding: 20px !important;
min-height: 90px;
background: linear-gradient(135deg, #fee8f3 0%, #eef0fa 100%) !important;
border-radius: var(--sh-radius-lg) !important;
display: flex;
align-items: center;
justify-content: center;
}
body:not(.wp-admin) .wpee-plan-item:not(:has(.wpee-plan-credits-number)):not(:has(.dspdp-input-group)) .wpee-plan-image {
max-width: 60px;
max-height: 60px;
object-fit: contain;
}
/* Fallback: if image broken (alt visible), replace with a decorative icon */
body:not(.wp-admin) .wpee-plan-item:not(:has(.wpee-plan-credits-number)):not(:has(.dspdp-input-group)) .wpee-plan-image-wrap {
position: relative;
}
body:not(.wp-admin) .wpee-plan-item:not(:has(.wpee-plan-credits-number)):not(:has(.dspdp-input-group)) .wpee-plan-image-wrap::before {
content: "\f005"; /* fa-star */
font-family: "FontAwesome";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
color: var(--sh-accent);
opacity: 0.6;
pointer-events: none;
}
body:not(.wp-admin) .wpee-plan-item:not(:has(.wpee-plan-credits-number)):not(:has(.dspdp-input-group)) .wpee-plan-image[src]:not([src=""]) {
position: relative;
z-index: 2;
background: transparent;
}
/* Show image on top of fallback icon; if image loads it covers the star */
/* Premium plans grid: 3 cards per row on desktop */
@media (min-width: 900px) {
body:not(.wp-admin) ul.wpee-plan-item-wrapper:has(.wpee-plan-item:nth-child(4)) {
grid-template-columns: repeat(3, 1fr) !important;
}
}
/* 4-plan layout: first row 3, last plan wraps to new row full-width */
body:not(.wp-admin) ul.wpee-plan-item-wrapper .wpee-plan-item:nth-child(4):last-child {
grid-column: 1 / -1 !important;
max-width: 400px;
margin: 0 auto !important;
}
/* Plan name and desc text alignment cleanup */
body:not(.wp-admin) .wpee-plan-item .wpee-plan-name {
white-space: normal !important;
word-break: normal !important;
overflow-wrap: break-word !important;
padding: 0 10px !important;
}
/* ZONE_Z41_END */
/* ==========================================================================
ZONE Z42 — More-panel hidden, Premium banner text, My Activity redesign
========================================================================== */
/* ======== 1. wpee-datebook-more-panel: hide when more menu collapsed ======== */
body:not(.wp-admin) .wpee-datebook-profile-panel:not(.wpee-more-secondary-expanded) .wpee-datebook-more-panel,
body:not(.wp-admin) .wpee-profile-combined:not(.wpee-more-secondary-expanded) .wpee-datebook-more-panel {
display: none !important;
}
body:not(.wp-admin) .wpee-datebook-more-panel[hidden],
body:not(.wp-admin) .wpee-datebook-more-panel:has([hidden]) {
display: none !important;
}
/* When expanded — show as styled panel matching settings card */
body:not(.wp-admin) .wpee-datebook-profile-panel.wpee-more-secondary-expanded .wpee-datebook-more-panel {
display: block !important;
background: #fff !important;
border: 1px solid rgba(228,81,158,0.10) !important;
border-radius: var(--sh-radius-2xl) !important;
box-shadow: 0 10px 30px rgba(228,81,158,0.08) !important;
padding: 18px !important;
margin: 14px 0 !important;
}
body:not(.wp-admin) .wpee-datebook-more-panel .profile-section-tab.wpee-notification-more-tabs {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
gap: 6px !important;
background: transparent !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
list-style: none !important;
margin: 0 !important;
}
body:not(.wp-admin) .wpee-datebook-more-panel .profile-section-tab-title {
list-style: none !important;
margin: 0 !important;
}
body:not(.wp-admin) .wpee-datebook-more-panel .profile-section-tab-title > a {
display: flex !important;
align-items: center;
gap: 10px;
padding: 12px 14px !important;
background: var(--sh-bg-soft) !important;
color: var(--sh-text) !important;
border-radius: var(--sh-radius-md) !important;
font-weight: 600 !important;
font-size: 13px !important;
text-decoration: none !important;
text-align: left !important;
text-transform: none !important;
letter-spacing: normal !important;
transition: all 220ms var(--sh-ease);
box-shadow: none !important;
}
body:not(.wp-admin) .wpee-datebook-more-panel .profile-section-tab-title > a > i {
color: var(--sh-accent) !important;
width: 20px;
font-size: 15px;
flex-shrink: 0;
}
body:not(.wp-admin) .wpee-datebook-more-panel .profile-section-tab-title > a:hover {
background: rgba(228,81,158,0.10) !important;
color: var(--sh-accent) !important;
transform: translateX(4px);
}
/* ======== 2. ACTIVE PREMIUM BANNER — ensure white text readable ======== */
body:not(.wp-admin) .wpee-premium-area .premium-area {
background: linear-gradient(135deg, #5c63b7 0%, #9a4eba 50%, #e4519e 100%) !important;
color: #fff !important;
padding: 28px 32px !important;
border-radius: var(--sh-radius-2xl) !important;
box-shadow: 0 18px 40px rgba(228,81,158,0.25) !important;
position: relative;
overflow: hidden;
display: flex !important;
flex-direction: column;
gap: 10px !important;
margin: 0 0 28px !important;
}
body:not(.wp-admin) .wpee-premium-area .premium-area > *,
body:not(.wp-admin) .wpee-premium-area .premium-area p,
body:not(.wp-admin) .wpee-premium-area .premium-area span,
body:not(.wp-admin) .wpee-premium-area .premium-area div {
color: #fff !important;
text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
body:not(.wp-admin) .wpee-premium-area .premium-area .logo-premium,
body:not(.wp-admin) .wpee-premium-area .premium-area .logo-premium strong {
color: #fff !important;
font-weight: 800 !important;
font-size: 17px !important;
display: inline-flex !important;
align-items: center;
gap: 10px;
text-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
body:not(.wp-admin) .wpee-premium-area .premium-area .premium-content {
color: rgba(255,255,255,0.94) !important;
font-size: 14px !important;
margin: 4px 0 0 !important;
}
body:not(.wp-admin) .wpee-premium-area .premium-area .premium-content-date {
color: rgba(255,255,255,0.84) !important;
font-size: 13px !important;
margin: 0 !important;
font-weight: 500;
}
/* decorative shine */
body:not(.wp-admin) .wpee-premium-area .premium-area::before {
content: "✨";
position: absolute;
top: 14px;
right: 20px;
font-size: 28px;
opacity: 0.6;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}
/* ======== 3. MY ACTIVITY / PURCHASE HISTORY — unique card-based design ======== */
/* Page wrapper */
body:not(.wp-admin) .settings-list-wrapper .profile-section-content:has(h2:contains("History")),
body:not(.wp-admin) .settings-list-wrapper .profile-section-content {
/* Default for history page */
}
/* Main page heading — left-aligned with icon */
body:not(.wp-admin) .settings-list-wrapper h2,
body:not(.wp-admin) .settings-list-wrapper .purchase-history-heading,
body:not(.wp-admin) .settings-list-wrapper .box-border > h2 {
font-size: 24px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
margin: 0 0 24px !important;
padding: 0 !important;
display: flex;
align-items: center;
gap: 12px;
letter-spacing: -0.01em;
}
body:not(.wp-admin) .settings-list-wrapper h2::before {
content: "\f1da"; /* fa-history */
font-family: "FontAwesome";
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #fee8f3, #eef0fa);
color: var(--sh-accent);
font-size: 16px;
}
/* Each purchase section (Credit Purchases / Gift Purchases) */
body:not(.wp-admin) .settings-list-wrapper .profile-section-content > div:has(> table),
body:not(.wp-admin) .settings-list-wrapper .profile-section-content .credit-purchases-wrap,
body:not(.wp-admin) .settings-list-wrapper .profile-section-content .gift-purchases-wrap {
background: #fff !important;
border: 1px solid rgba(228,81,158,0.10) !important;
border-radius: var(--sh-radius-2xl) !important;
padding: 24px !important;
margin: 0 0 20px !important;
box-shadow: 0 6px 20px rgba(228,81,158,0.06);
position: relative;
overflow: hidden;
}
/* Section sub-headings */
body:not(.wp-admin) .settings-list-wrapper .profile-section-content h3,
body:not(.wp-admin) .settings-list-wrapper .profile-section-content h4 {
font-size: 17px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
margin: 0 0 18px !important;
padding: 0 0 12px !important;
border-bottom: 1px solid var(--sh-divider);
display: flex;
align-items: center;
gap: 10px;
letter-spacing: -0.01em;
position: relative;
}
body:not(.wp-admin) .settings-list-wrapper .profile-section-content h3::after,
body:not(.wp-admin) .settings-list-wrapper .profile-section-content h4::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 40px;
height: 2px;
background: linear-gradient(90deg, var(--sh-accent), var(--sh-primary));
border-radius: 999px;
}
/* Tables — hide default table header on mobile, use card rows */
body:not(.wp-admin) .settings-list-wrapper .profile-section-content table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
body:not(.wp-admin) .settings-list-wrapper .profile-section-content table thead th {
background: linear-gradient(90deg, #fee8f3, #eef0fa) !important;
color: var(--sh-text-2) !important;
padding: 10px 14px !important;
font-size: 10px !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 0.1em;
border: 0 !important;
white-space: nowrap;
}
body:not(.wp-admin) .settings-list-wrapper .profile-section-content table thead tr th:first-child {
border-top-left-radius: var(--sh-radius-md);
border-bottom-left-radius: var(--sh-radius-md);
}
body:not(.wp-admin) .settings-list-wrapper .profile-section-content table thead tr th:last-child {
border-top-right-radius: var(--sh-radius-md);
border-bottom-right-radius: var(--sh-radius-md);
}
body:not(.wp-admin) .settings-list-wrapper .profile-section-content table tbody tr {
transition: all 220ms var(--sh-ease);
}
body:not(.wp-admin) .settings-list-wrapper .profile-section-content table tbody tr:hover td {
background: rgba(254,232,243,0.45) !important;
}
body:not(.wp-admin) .settings-list-wrapper .profile-section-content table tbody td {
padding: 14px !important;
font-size: 13px !important;
color: var(--sh-text) !important;
border: 0 !important;
border-bottom: 1px solid var(--sh-divider) !important;
vertical-align: middle !important;
}
body:not(.wp-admin) .settings-list-wrapper .profile-section-content table tbody tr:last-child td {
border-bottom: 0 !important;
}
/* Status badges in history — colored pills */
body:not(.wp-admin) .settings-list-wrapper .profile-section-content td span,
body:not(.wp-admin) .settings-list-wrapper .profile-section-content .status {
/* we target by text semantics via attribute */
}
/* Approved / Completed / Success — green */
body:not(.wp-admin) .settings-list-wrapper .profile-section-content .dspdp-alert-success,
body:not(.wp-admin) .settings-list-wrapper .profile-section-content .label-success,
body:not(.wp-admin) .settings-list-wrapper .profile-section-content td span[class*="Complet"],
body:not(.wp-admin) .settings-list-wrapper .profile-section-content td span[class*="Approv"],
body:not(.wp-admin) .settings-list-wrapper .profile-section-content td span[class*="Success"] {
display: inline-flex !important;
align-items: center;
gap: 5px;
padding: 4px 12px !important;
background: rgba(34,197,94,0.10) !important;
color: #16a34a !important;
border: 1px solid rgba(34,197,94,0.25) !important;
border-radius: 999px !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.01em;
}
/* Pending / Warning — yellow */
body:not(.wp-admin) .settings-list-wrapper .profile-section-content .label-warning,
body:not(.wp-admin) .settings-list-wrapper .profile-section-content td span[class*="Pending"] {
display: inline-flex !important;
align-items: center;
gap: 5px;
padding: 4px 12px !important;
background: rgba(245,158,11,0.12) !important;
color: #b45309 !important;
border: 1px solid rgba(245,158,11,0.30) !important;
border-radius: 999px !important;
font-size: 12px !important;
font-weight: 700 !important;
}
/* Rejected / Failed — red */
body:not(.wp-admin) .settings-list-wrapper .profile-section-content .label-danger,
body:not(.wp-admin) .settings-list-wrapper .profile-section-content td span[class*="Failed"],
body:not(.wp-admin) .settings-list-wrapper .profile-section-content td span[class*="Reject"] {
display: inline-flex !important;
align-items: center;
gap: 5px;
padding: 4px 12px !important;
background: rgba(239,68,68,0.10) !important;
color: #b91c1c !important;
border: 1px solid rgba(239,68,68,0.25) !important;
border-radius: 999px !important;
font-size: 12px !important;
font-weight: 700 !important;
}
/* Invoice download icons — pink circle */
body:not(.wp-admin) .settings-list-wrapper .profile-section-content td a[href*=".pdf"],
body:not(.wp-admin) .settings-list-wrapper .profile-section-content td a[title*="Invoice"],
body:not(.wp-admin) .settings-list-wrapper .profile-section-content td a[title*="nvoice"],
body:not(.wp-admin) .settings-list-wrapper .profile-section-content .download-invoice {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50% !important;
background: rgba(228,81,158,0.10) !important;
color: var(--sh-accent) !important;
transition: all 220ms var(--sh-ease);
text-decoration: none !important;
font-size: 14px;
}
body:not(.wp-admin) .settings-list-wrapper .profile-section-content td a[href*=".pdf"]:hover,
body:not(.wp-admin) .settings-list-wrapper .profile-section-content .download-invoice:hover {
background: var(--sh-accent) !important;
color: #fff !important;
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(228,81,158,0.28);
}
/* Gift thumbnails in gift purchases */
body:not(.wp-admin) .settings-list-wrapper .profile-section-content td img {
width: 44px !important;
height: 44px !important;
object-fit: contain;
border-radius: var(--sh-radius-sm);
background: linear-gradient(135deg, #fee8f3, #eef0fa);
padding: 4px;
transition: transform 220ms;
}
body:not(.wp-admin) .settings-list-wrapper .profile-section-content td img:hover {
transform: scale(1.08);
}
/* Recipient username link */
body:not(.wp-admin) .settings-list-wrapper .profile-section-content td a:not([href*=".pdf"]):not([title*="nvoice"]) {
color: var(--sh-accent) !important;
font-weight: 700 !important;
text-decoration: none !important;
transition: color 200ms;
}
body:not(.wp-admin) .settings-list-wrapper .profile-section-content td a:not([href*=".pdf"]):not([title*="nvoice"]):hover {
color: var(--sh-accent-600) !important;
}
/* Mobile: stack tables vertically as cards */
@media (max-width: 700px) {
body:not(.wp-admin) .settings-list-wrapper .profile-section-content table,
body:not(.wp-admin) .settings-list-wrapper .profile-section-content table tbody,
body:not(.wp-admin) .settings-list-wrapper .profile-section-content table tr,
body:not(.wp-admin) .settings-list-wrapper .profile-section-content table td {
display: block !important;
width: 100% !important;
}
body:not(.wp-admin) .settings-list-wrapper .profile-section-content table thead {
display: none !important;
}
body:not(.wp-admin) .settings-list-wrapper .profile-section-content table tbody tr {
background: var(--sh-bg-soft) !important;
border: 1px solid var(--sh-divider) !important;
border-radius: var(--sh-radius-lg) !important;
padding: 14px !important;
margin: 0 0 12px !important;
}
body:not(.wp-admin) .settings-list-wrapper .profile-section-content table tbody td {
padding: 6px 0 !important;
border: 0 !important;
display: flex !important;
justify-content: space-between;
align-items: center;
}
body:not(.wp-admin) .settings-list-wrapper .profile-section-content table tbody td::before {
content: attr(data-label);
font-weight: 700;
font-size: 11px;
color: var(--sh-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
}
/* ZONE_Z42_END */
/* ==========================================================================
ZONE Z43 — More panel always visible + unified sub-page styles
========================================================================== */
/* ======== 1. MORE PANEL: always visible, show as nav tiles ======== */
/* Override earlier hide rules — always show */
body:not(.wp-admin) .wpee-datebook-more-panel {
display: block !important;
background: #fff !important;
border: 1px solid rgba(228,81,158,0.10) !important;
border-radius: var(--sh-radius-2xl) !important;
box-shadow: 0 10px 30px rgba(228,81,158,0.06) !important;
padding: 16px !important;
margin: 16px 0 !important;
position: relative;
}
/* Force the hidden UL visible */
body:not(.wp-admin) .wpee-datebook-more-panel ul.wpee-notification-more-tabs,
body:not(.wp-admin) .wpee-datebook-more-panel ul[hidden],
body:not(.wp-admin) .wpee-datebook-more-panel #wpee-notification-more-tabs {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
gap: 6px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
visibility: visible !important;
opacity: 1 !important;
}
body:not(.wp-admin) .wpee-datebook-more-panel .profile-section-tab-title {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
body:not(.wp-admin) .wpee-datebook-more-panel .profile-section-tab-title > a {
display: flex !important;
align-items: center;
gap: 10px;
padding: 12px 14px !important;
background: var(--sh-bg-soft) !important;
color: var(--sh-text) !important;
border-radius: var(--sh-radius-md) !important;
font-weight: 600 !important;
font-size: 13px !important;
text-decoration: none !important;
text-align: left !important;
text-transform: none !important;
letter-spacing: normal !important;
transition: all 220ms var(--sh-ease);
box-shadow: none !important;
border: 1px solid transparent;
}
body:not(.wp-admin) .wpee-datebook-more-panel .profile-section-tab-title > a > i {
color: var(--sh-accent) !important;
width: 20px;
font-size: 15px;
flex-shrink: 0;
text-align: center;
}
body:not(.wp-admin) .wpee-datebook-more-panel .profile-section-tab-title > a:hover {
background: #fff !important;
color: var(--sh-accent) !important;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(228,81,158,0.14) !important;
border-color: rgba(228,81,158,0.22);
}
body:not(.wp-admin) .wpee-datebook-more-panel .profile-section-tab-title.active > a,
body:not(.wp-admin) .wpee-datebook-more-panel .profile-section-tab-title.current-menu-item > a {
background: var(--sh-accent) !important;
color: #fff !important;
box-shadow: 0 8px 20px rgba(228,81,158,0.30) !important;
}
body:not(.wp-admin) .wpee-datebook-more-panel .profile-section-tab-title.active > a > i,
body:not(.wp-admin) .wpee-datebook-more-panel .profile-section-tab-title.current-menu-item > a > i {
color: #fff !important;
}
/* Hide the "More" toggle item in notification-links */
body:not(.wp-admin) .wpee-notification-links > li.wpee-others,
body:not(.wp-admin) .wpee-notification-links .wpee-datebook-more-toggle {
display: none !important;
}
/* ======== 2. UNIFIED SUB-PAGE STYLES (My Matches, Comments, Viewed, Trending, Meet Me, Favourites, Edit Profile) ======== */
/* Outer wrapper for all sub-pages — consistent white card */
body:not(.wp-admin) .profile-content-inner > .main-profile-mid-wrapper,
body:not(.wp-admin) .profile-content-inner > .profile-section-wrap,
body:not(.wp-admin) .profile-content-inner .main-profile-mid-wrapper {
background: transparent !important;
padding: 0 !important;
}
/* Block/section wrapper — the main card */
body:not(.wp-admin) .profile-content-inner .wpee-block,
body:not(.wp-admin) .profile-content-inner .profile-section-wrap:not(.settings-list-wrapper) {
background: #fff !important;
border: 1px solid rgba(228,81,158,0.10) !important;
border-radius: var(--sh-radius-2xl) !important;
box-shadow: 0 10px 30px rgba(228,81,158,0.06) !important;
padding: 24px !important;
margin: 0 0 20px !important;
}
body:not(.wp-admin) .profile-content-inner .wpee-block-header {
padding: 0 0 14px !important;
margin: 0 0 18px !important;
border-bottom: 1px solid var(--sh-divider) !important;
position: relative;
}
body:not(.wp-admin) .profile-content-inner .wpee-block-title {
font-size: 17px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
letter-spacing: -0.01em;
margin: 0 !important;
padding: 0 0 0 14px !important;
position: relative;
}
body:not(.wp-admin) .profile-content-inner .wpee-block-title::before {
content: "";
position: absolute;
left: 0;
top: 2px;
bottom: 2px;
width: 4px;
border-radius: 2px;
background: linear-gradient(180deg, var(--sh-accent), var(--sh-primary));
}
/* --- MY MATCHES / VIEWED ME / TRENDING / FAVOURITES / MEET ME: member grid --- */
body:not(.wp-admin) .profile-content-inner .wpee-listing,
body:not(.wp-admin) .profile-content-inner .member-list,
body:not(.wp-admin) .profile-content-inner .wpee-member-list,
body:not(.wp-admin) .profile-content-inner ul.friends-section {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
gap: 14px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
body:not(.wp-admin) .profile-content-inner .wpee-listing > li,
body:not(.wp-admin) .profile-content-inner .member-list > li {
list-style: none !important;
background: #fff;
border: 1px solid rgba(228,81,158,0.10);
border-radius: var(--sh-radius-lg);
overflow: hidden;
padding: 0 !important;
margin: 0 !important;
transition: all 260ms var(--sh-ease-out);
display: flex;
flex-direction: column;
box-shadow: 0 4px 12px rgba(228,81,158,0.04);
}
body:not(.wp-admin) .profile-content-inner .wpee-listing > li:hover,
body:not(.wp-admin) .profile-content-inner .member-list > li:hover {
transform: translateY(-4px);
box-shadow: 0 16px 32px rgba(228,81,158,0.14);
border-color: rgba(228,81,158,0.25);
}
body:not(.wp-admin) .profile-content-inner .wpee-listing figure,
body:not(.wp-admin) .profile-content-inner .wpee-listing .img-holder {
width: 100% !important;
aspect-ratio: 1;
margin: 0 !important;
overflow: hidden;
background: var(--sh-bg-soft);
}
body:not(.wp-admin) .profile-content-inner .wpee-listing figure img,
body:not(.wp-admin) .profile-content-inner .wpee-listing .img-holder img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
transition: transform 300ms var(--sh-ease-out);
}
body:not(.wp-admin) .profile-content-inner .wpee-listing > li:hover figure img {
transform: scale(1.05);
}
body:not(.wp-admin) .profile-content-inner .wpee-listing .user-details,
body:not(.wp-admin) .profile-content-inner .wpee-listing .member-details {
padding: 14px !important;
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
body:not(.wp-admin) .profile-content-inner .wpee-listing .member-user-name,
body:not(.wp-admin) .profile-content-inner .wpee-listing .user-name-show {
font-size: 14px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
margin: 0 !important;
}
body:not(.wp-admin) .profile-content-inner .wpee-listing .member-user-name a {
color: var(--sh-text) !important;
text-decoration: none !important;
}
body:not(.wp-admin) .profile-content-inner .wpee-listing .member-user-name a:hover {
color: var(--sh-accent) !important;
}
/* Action buttons within a listing item (like, message, remove from favorites) */
body:not(.wp-admin) .profile-content-inner .wpee-listing .dspdp-btn,
body:not(.wp-admin) .profile-content-inner .wpee-listing .dsp-btn-default,
body:not(.wp-admin) .profile-content-inner .wpee-listing a.button {
padding: 6px 12px !important;
background: rgba(228,81,158,0.10) !important;
color: var(--sh-accent) !important;
border: 1px solid rgba(228,81,158,0.22) !important;
border-radius: var(--sh-radius-pill) !important;
font-size: 11px !important;
font-weight: 700 !important;
text-decoration: none !important;
display: inline-flex;
align-items: center;
gap: 4px;
cursor: pointer;
transition: all 220ms;
}
body:not(.wp-admin) .profile-content-inner .wpee-listing .dspdp-btn:hover {
background: var(--sh-accent) !important;
color: #fff !important;
border-color: var(--sh-accent) !important;
}
/* --- COMMENTS page --- */
body:not(.wp-admin) .profile-content-inner.comments .wpee-comment-list,
body:not(.wp-admin) .profile-content-inner .wpee-comments-wrapper ul,
body:not(.wp-admin) .profile-content-inner .wpee-comment-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex;
flex-direction: column;
gap: 12px;
}
body:not(.wp-admin) .profile-content-inner .wpee-comment {
display: grid !important;
grid-template-columns: 48px 1fr;
gap: 12px;
padding: 14px !important;
background: var(--sh-bg-soft) !important;
border-radius: var(--sh-radius-lg) !important;
border: 1px solid var(--sh-divider);
list-style: none !important;
margin: 0 !important;
transition: all 220ms var(--sh-ease);
}
body:not(.wp-admin) .profile-content-inner .wpee-comment:hover {
background: #fff !important;
box-shadow: 0 6px 16px rgba(228,81,158,0.08);
border-color: rgba(228,81,158,0.18);
}
body:not(.wp-admin) .profile-content-inner .wpee-comment-author-avatar img,
body:not(.wp-admin) .profile-content-inner .wpee-comment figure img {
width: 48px !important;
height: 48px !important;
border-radius: 50% !important;
object-fit: cover;
}
body:not(.wp-admin) .profile-content-inner .wpee-comment-author a,
body:not(.wp-admin) .profile-content-inner .wpee-comment-author {
color: var(--sh-text) !important;
font-weight: 700 !important;
font-size: 13px;
text-decoration: none !important;
}
body:not(.wp-admin) .profile-content-inner .wpee-comment-content {
color: var(--sh-text-2) !important;
font-size: 13px;
line-height: 1.55;
margin-top: 4px;
}
body:not(.wp-admin) .profile-content-inner .wpee-comment-date {
color: var(--sh-text-muted) !important;
font-size: 11px;
margin-top: 4px;
}
/* Comment form */
body:not(.wp-admin) .profile-content-inner .wpee-user-comment-form-wrapper textarea,
body:not(.wp-admin) .profile-content-inner form textarea {
width: 100% !important;
min-height: 90px !important;
padding: 12px 16px !important;
border: 1.5px solid var(--sh-border) !important;
border-radius: var(--sh-radius-md) !important;
background: #fff !important;
font-size: 14px !important;
transition: all 220ms;
resize: vertical;
}
body:not(.wp-admin) .profile-content-inner .wpee-user-comment-form-wrapper textarea:focus {
border-color: var(--sh-accent) !important;
box-shadow: 0 0 0 4px rgba(228,81,158,0.14) !important;
outline: none !important;
}
/* --- MEET ME page (full) --- */
body:not(.wp-admin) .profile-content-inner.meet-me .wpee-block,
body:not(.wp-admin) .profile-content-inner[class*="meet"] .modern-meet-card {
/* Already styled — inherits */
}
/* --- VIEWED / I VIEWED tabs (pill group for sub-section toggle) --- */
body:not(.wp-admin) .profile-content-inner .wpee-viewed-tabs,
body:not(.wp-admin) .profile-content-inner .wpee-sub-tabs,
body:not(.wp-admin) .profile-content-inner ul.sub-tab-nav {
display: flex !important;
gap: 4px !important;
padding: 4px !important;
background: var(--sh-bg-soft);
border-radius: var(--sh-radius-pill);
border: 1px solid var(--sh-divider);
list-style: none;
margin: 0 0 20px !important;
width: fit-content;
}
body:not(.wp-admin) .profile-content-inner .wpee-viewed-tabs li,
body:not(.wp-admin) .profile-content-inner .wpee-sub-tabs li {
list-style: none !important;
margin: 0 !important;
}
body:not(.wp-admin) .profile-content-inner .wpee-viewed-tabs a,
body:not(.wp-admin) .profile-content-inner .wpee-sub-tabs a {
padding: 8px 16px !important;
border-radius: var(--sh-radius-pill) !important;
color: var(--sh-text-2) !important;
font-size: 13px !important;
font-weight: 600 !important;
text-decoration: none !important;
display: inline-block;
transition: all 220ms;
}
body:not(.wp-admin) .profile-content-inner .wpee-viewed-tabs a:hover,
body:not(.wp-admin) .profile-content-inner .wpee-sub-tabs a:hover {
background: rgba(228,81,158,0.10);
color: var(--sh-accent) !important;
}
body:not(.wp-admin) .profile-content-inner .wpee-viewed-tabs .active a,
body:not(.wp-admin) .profile-content-inner .wpee-sub-tabs .active a {
background: #fff !important;
color: var(--sh-accent) !important;
box-shadow: 0 2px 8px rgba(228,81,158,0.14);
}
/* --- EDIT PROFILE (form-heavy page) --- */
body:not(.wp-admin) .profile-content-inner.edit-profile,
body:not(.wp-admin) .profile-content-inner[class*="edit"] {
/* Container already white card via .wpee-block */
}
body:not(.wp-admin) .profile-content-inner .edit-profile-form,
body:not(.wp-admin) .profile-content-inner form.wpee-edit-profile-form,
body:not(.wp-admin) .profile-content-inner #wpee-edit-profile-form,
body:not(.wp-admin) .profile-content-inner .edit-profile:not(ul) {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 18px 24px !important;
}
@media (max-width: 700px) {
body:not(.wp-admin) .profile-content-inner form.wpee-edit-profile-form,
body:not(.wp-admin) .profile-content-inner #wpee-edit-profile-form {
grid-template-columns: 1fr !important;
}
}
body:not(.wp-admin) .profile-content-inner .wpee-edit-profile-form .form-group,
body:not(.wp-admin) .profile-content-inner form.dspdp-form-horizontal .form-group {
display: flex !important;
flex-direction: column;
gap: 6px !important;
margin: 0 !important;
}
body:not(.wp-admin) .profile-content-inner .wpee-edit-profile-form label,
body:not(.wp-admin) .profile-content-inner form.dspdp-form-horizontal label {
font-size: 12px !important;
font-weight: 700 !important;
color: var(--sh-text-2) !important;
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 0 !important;
}
body:not(.wp-admin) .profile-content-inner .wpee-edit-profile-form input[type="text"],
body:not(.wp-admin) .profile-content-inner .wpee-edit-profile-form input[type="email"],
body:not(.wp-admin) .profile-content-inner .wpee-edit-profile-form input[type="tel"],
body:not(.wp-admin) .profile-content-inner .wpee-edit-profile-form input[type="number"],
body:not(.wp-admin) .profile-content-inner .wpee-edit-profile-form input[type="date"],
body:not(.wp-admin) .profile-content-inner .wpee-edit-profile-form select,
body:not(.wp-admin) .profile-content-inner .wpee-edit-profile-form textarea,
body:not(.wp-admin) .profile-content-inner form.dspdp-form-horizontal input[type="text"],
body:not(.wp-admin) .profile-content-inner form.dspdp-form-horizontal select,
body:not(.wp-admin) .profile-content-inner form.dspdp-form-horizontal textarea {
width: 100% !important;
min-height: 46px !important;
padding: 12px 16px !important;
border: 1.5px solid var(--sh-border) !important;
border-radius: var(--sh-radius-md) !important;
background: #fff !important;
color: var(--sh-text) !important;
font-size: 14px !important;
transition: all 220ms;
}
body:not(.wp-admin) .profile-content-inner .wpee-edit-profile-form input:focus,
body:not(.wp-admin) .profile-content-inner .wpee-edit-profile-form select:focus,
body:not(.wp-admin) .profile-content-inner .wpee-edit-profile-form textarea:focus {
border-color: var(--sh-accent) !important;
box-shadow: 0 0 0 4px rgba(228,81,158,0.14) !important;
outline: none !important;
}
/* Empty state — unified across all sub-pages */
body:not(.wp-admin) .profile-content-inner .wpee-feeds-empty,
body:not(.wp-admin) .profile-content-inner .wpee-no-record,
body:not(.wp-admin) .profile-content-inner .wpee-empty-list,
body:not(.wp-admin) .profile-content-inner .records-not-found,
body:not(.wp-admin) .profile-content-inner .wpee-item-not-found {
text-align: center;
padding: 60px 20px !important;
background: linear-gradient(135deg, #fee8f3, #eef0fa) !important;
border: 2px dashed rgba(228,81,158,0.25) !important;
border-radius: var(--sh-radius-xl);
color: var(--sh-text-muted) !important;
font-size: 15px !important;
font-weight: 500 !important;
margin: 0 !important;
}
body:not(.wp-admin) .profile-content-inner .wpee-feeds-empty::before,
body:not(.wp-admin) .profile-content-inner .wpee-no-record::before {
content: "💭";
display: block;
font-size: 40px;
margin-bottom: 10px;
font-weight: normal;
}
/* Pagination unified */
body:not(.wp-admin) .profile-content-inner .row-paging,
body:not(.wp-admin) .profile-content-inner .pagination-wrap {
display: flex;
justify-content: center;
gap: 6px;
margin: 24px 0 0 !important;
}
/* Generic submit buttons in sub-pages */
body:not(.wp-admin) .profile-content-inner input[type="submit"]:not([class*="danger"]):not([class*="muted"]),
body:not(.wp-admin) .profile-content-inner button[type="submit"]:not([class*="danger"]) {
background: var(--sh-accent) !important;
color: #fff !important;
padding: 12px 28px !important;
border: 0 !important;
border-radius: var(--sh-radius-pill) !important;
font-weight: 700 !important;
font-size: 14px !important;
box-shadow: 0 8px 22px rgba(228,81,158,0.28) !important;
cursor: pointer;
transition: all 220ms;
}
body:not(.wp-admin) .profile-content-inner input[type="submit"]:hover {
background: var(--sh-accent-600) !important;
transform: translateY(-2px);
}
/* ZONE_Z43_END */
/* ==========================================================================
ZONE Z44 — Targeted resets per user request
========================================================================== */
/* Remove background / shadow / border on datebook profile panel */
body:not(.wp-admin) .wpee-profile-combined.wpee-datebook-profile-layout .wpee-datebook-profile-panel,
.wpee-profile-combined.wpee-datebook-profile-layout .wpee-datebook-profile-panel {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
border: 0 !important;
}
/* Remove box-shadow on meet-me user info block */
body:not(.wp-admin) .meet-to-info .user-meetto-info,
.meet-to-info .user-meetto-info {
box-shadow: none !important;
}
/* ZONE_Z44_END */
/* ==========================================================================
ZONE Z45 — Profile header cleanup: circular avatar + remove cover button
========================================================================== */
/* ===== Hide Edit Cover Photo entirely ===== */
body:not(.wp-admin) .wpee-datebook-profile-card .wpee-datebook-cover-actions,
body:not(.wp-admin) .wpee-datebook-profile-card .profile-header-right,
body:not(.wp-admin) .wpee-datebook-profile-card .change-cover-photo,
body:not(.wp-admin) .wpee-datebook-profile-card .trigger-cover-photo {
display: none !important;
}
/* ===== Profile header layout ===== */
body:not(.wp-admin) .wpee-datebook-profile-card {
padding: 0 !important;
}
body:not(.wp-admin) .profile-user-details.wpee-datebook-profile-top {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 24px !important;
padding: 28px !important;
flex-wrap: wrap;
}
/* ===== AVATAR — perfect circle ===== */
body:not(.wp-admin) .wpee-datebook-profile-top .profile-img.change-profile-image {
flex: 0 0 120px !important;
width: 120px !important;
height: 120px !important;
max-width: 120px !important;
max-height: 120px !important;
border-radius: 50% !important;
padding: 0 !important;
background: #fff !important;
border: 4px solid #fff !important;
box-shadow: 0 12px 28px rgba(228, 81, 158, 0.20) !important;
position: relative !important;
overflow: visible !important;
display: flex !important;
align-items: center;
justify-content: center;
}
body:not(.wp-admin) .wpee-datebook-profile-top .profile-img .loader {
display: none !important;
}
body:not(.wp-admin) .wpee-datebook-profile-top .profile-img figure,
body:not(.wp-admin) .wpee-datebook-profile-top .profile-img figure.overflow-h {
width: 100% !important;
height: 100% !important;
border-radius: 50% !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
background: linear-gradient(135deg, #fee8f3, #eef0fa) !important;
display: block !important;
}
body:not(.wp-admin) .wpee-datebook-profile-top .profile-img figure a {
display: block !important;
width: 100% !important;
height: 100% !important;
border-radius: 50% !important;
overflow: hidden !important;
}
body:not(.wp-admin) .wpee-datebook-profile-top .profile-img figure a img,
body:not(.wp-admin) .wpee-datebook-profile-top .profile-img img#profile_picture,
body:not(.wp-admin) .wpee-datebook-profile-top .profile-img img.img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 50% !important;
display: block !important;
max-width: 100% !important;
max-height: 100% !important;
}
body:not(.wp-admin) .wpee-datebook-profile-top #change-profile-pic-form {
display: none !important;
}
/* Camera change button — bottom-right on avatar */
body:not(.wp-admin) .wpee-datebook-profile-top .update_profile_text_div {
position: absolute !important;
bottom: -2px !important;
right: -2px !important;
width: 34px !important;
height: 34px !important;
border-radius: 50% !important;
background: var(--sh-accent) !important;
color: #fff !important;
box-shadow: 0 4px 12px rgba(228, 81, 158, 0.40) !important;
z-index: 3 !important;
cursor: pointer;
display: inline-flex !important;
align-items: center;
justify-content: center;
border: 3px solid #fff;
transition: transform 220ms var(--sh-ease);
}
body:not(.wp-admin) .wpee-datebook-profile-top .update_profile_text_div:hover {
transform: scale(1.1);
}
body:not(.wp-admin) .wpee-datebook-profile-top .update_profile_text_div > a,
body:not(.wp-admin) .wpee-datebook-profile-top .update_profile_text_div i {
color: #fff !important;
font-size: 13px !important;
}
/* Online/offline dot — top-right of avatar */
body:not(.wp-admin) .wpee-datebook-profile-top .wpee-user-status {
display: block !important;
position: absolute !important;
top: -2px !important;
right: -2px !important;
width: 18px !important;
height: 18px !important;
border-radius: 50% !important;
border: 3px solid #fff !important;
background: var(--sh-text-muted) !important;
z-index: 4;
}
body:not(.wp-admin) .wpee-datebook-profile-top .wpee-user-status.wpee-online {
background: var(--sh-success, #22c55e) !important;
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.20);
}
/* ===== Details column (name, meta, actions) ===== */
body:not(.wp-admin) .wpee-datebook-details-column {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
body:not(.wp-admin) .wpee-datebook-info-primary {
display: flex;
flex-direction: column;
gap: 10px;
}
/* Username */
body:not(.wp-admin) .wpee-datebook-profile-card .username,
body:not(.wp-admin) .wpee-datebook-profile-card .username.text-white {
color: var(--sh-text) !important;
font-size: 26px !important;
font-weight: 800 !important;
letter-spacing: -0.02em;
margin: 0 !important;
line-height: 1.1;
text-shadow: none !important;
}
/* Online/Offline badge pill */
body:not(.wp-admin) .wpee-datebook-online-line {
margin: 0 !important;
padding: 0 !important;
}
body:not(.wp-admin) .wpee-db-badge-online {
display: inline-flex !important;
align-items: center;
gap: 6px;
padding: 4px 12px !important;
background: rgba(34, 197, 94, 0.12) !important;
color: #16a34a !important;
border: 1px solid rgba(34, 197, 94, 0.26) !important;
border-radius: 999px !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 0.06em;
}
body:not(.wp-admin) .wpee-db-badge-online::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 6px rgba(34, 197, 94, 0.8);
animation: sh-pulse-green 2s ease-in-out infinite;
}
body:not(.wp-admin) .wpee-db-badge-offline {
display: inline-flex !important;
align-items: center;
gap: 6px;
padding: 4px 12px !important;
background: var(--sh-bg-soft) !important;
color: var(--sh-text-muted) !important;
border: 1px solid var(--sh-border) !important;
border-radius: 999px !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* Meta pills row (Age / Location / Credits) */
body:not(.wp-admin) .age-location-wrap,
body:not(.wp-admin) .age-location-wrap.text-white {
display: flex !important;
flex-wrap: wrap;
gap: 8px !important;
margin: 0 !important;
color: var(--sh-text) !important;
}
body:not(.wp-admin) .age-location-wrap > div {
display: inline-flex !important;
align-items: center;
gap: 6px;
padding: 6px 14px !important;
background: var(--sh-bg-soft) !important;
border: 1px solid var(--sh-divider) !important;
border-radius: 999px !important;
font-size: 13px !important;
color: var(--sh-text) !important;
font-weight: 600;
line-height: 1.3;
}
body:not(.wp-admin) .age-location-wrap .age-title,
body:not(.wp-admin) .age-location-wrap .location-title,
body:not(.wp-admin) .age-location-wrap .credits-title {
color: var(--sh-text-muted) !important;
font-size: 10px !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 0.06em;
}
body:not(.wp-admin) .age-location-wrap .profile-age::before {
content: "🎂";
font-size: 14px;
}
body:not(.wp-admin) .age-location-wrap .profile-location::before {
content: "📍";
font-size: 14px;
}
body:not(.wp-admin) .age-location-wrap .profile-credits::before {
content: "✨";
font-size: 14px;
}
/* Meta line "61 years old · Woman · Man" — smaller muted */
body:not(.wp-admin) .wpee-datebook-meta-line {
margin: 0 !important;
padding: 0 !important;
color: var(--sh-text-muted) !important;
font-size: 13px !important;
font-weight: 500 !important;
}
/* ===== Actions row (Account Level pill) ===== */
body:not(.wp-admin) .wpee-datebook-actions {
display: flex !important;
align-items: center;
flex-wrap: wrap;
gap: 8px !important;
margin-top: 4px !important;
padding: 0 !important;
}
body:not(.wp-admin) .wpee-datebook-account-status {
display: inline-flex !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
body:not(.wp-admin) .wpee-datebook-account-status .profile-location {
display: inline-flex !important;
align-items: center;
gap: 6px !important;
padding: 6px 14px !important;
background: linear-gradient(135deg, rgba(228, 81, 158, 0.10), rgba(92, 99, 183, 0.10)) !important;
color: var(--sh-accent-700) !important;
border: 1px solid rgba(228, 81, 158, 0.22) !important;
border-radius: 999px !important;
font-size: 12px !important;
font-weight: 800 !important;
line-height: 1.3;
box-shadow: none !important;
}
body:not(.wp-admin) .wpee-datebook-account-status .profile-location::before {
content: "⭐";
font-size: 12px;
}
body:not(.wp-admin) .wpee-datebook-account-status .profile-status-title {
color: var(--sh-text-muted) !important;
font-size: 10px !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* ===== Responsive ===== */
@media (max-width: 700px) {
body:not(.wp-admin) .profile-user-details.wpee-datebook-profile-top {
flex-direction: column;
align-items: center !important;
text-align: center;
padding: 24px 20px !important;
}
body:not(.wp-admin) .wpee-datebook-details-column {
align-items: center;
}
body:not(.wp-admin) .age-location-wrap {
justify-content: center;
}
body:not(.wp-admin) .wpee-datebook-actions {
justify-content: center;
}
body:not(.wp-admin) .wpee-datebook-profile-card .username {
font-size: 22px !important;
}
}
/* ZONE_Z45_END */
/* ==========================================================================
ZONE Z46 — Gift popup polish + Profile camera button fix
========================================================================== */
/* ======= Gift popup — cleaner card grid ======= */
html body .wpee-gift-popup-overlay .wpee-gift-inner > form {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
gap: 14px !important;
margin: 0 !important;
padding: 0 !important;
}
@media (min-width: 768px) {
html body .wpee-gift-popup-overlay .wpee-gift-inner > form {
grid-template-columns: repeat(4, 1fr) !important;
}
}
@media (max-width: 560px) {
html body .wpee-gift-popup-overlay .wpee-gift-inner > form {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 380px) {
html body .wpee-gift-popup-overlay .wpee-gift-inner > form {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* Gift card — kill inline `height: 100%` / stretched pill look */
html body .wpee-gift-popup-overlay .wpee-gift-inner > form > .form-group {
position: relative !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex: 1 1 auto !important;
height: auto !important;
min-height: 0 !important;
padding: 22px 12px 14px !important;
margin: 0 !important;
background: #fff !important;
border: 2px solid #f1e3ec !important;
border-radius: 18px !important;
box-shadow: 0 2px 6px rgba(26, 26, 46, 0.04) !important;
cursor: pointer !important;
transition: transform 220ms var(--sh-ease-out), box-shadow 220ms var(--sh-ease-out), border-color 220ms var(--sh-ease-out) !important;
}
html body .wpee-gift-popup-overlay .wpee-gift-inner > form > .form-group:hover {
transform: translateY(-3px);
border-color: var(--sh-accent) !important;
box-shadow: 0 12px 24px rgba(228, 81, 158, 0.18) !important;
background: #fff !important;
}
/* Gift image — bigger, centered, no filter weirdness */
html body .wpee-gift-popup-overlay .wpee-gift-inner > form > .form-group img {
width: 76px !important;
height: 76px !important;
max-width: 76px !important;
max-height: 76px !important;
object-fit: contain !important;
display: block !important;
margin: 0 !important;
filter: none !important;
pointer-events: none;
}
/* Hide the native radio completely — selection shown via tick badge */
html body .wpee-gift-popup-overlay .wpee-gift-inner > form > .form-group input[type="radio"].wpee-gift {
position: absolute !important;
top: 0; left: 0;
width: 100% !important;
height: 100% !important;
opacity: 0 !important;
margin: 0 !important;
cursor: pointer !important;
z-index: 2;
}
/* Price pill — subtle, centered */
html body .wpee-gift-popup-overlay .wpee-gift-inner > form > .form-group .wpdating-gift-price {
display: inline-block !important;
text-align: center !important;
font-size: 12px !important;
font-weight: 700 !important;
color: var(--sh-accent) !important;
background: #fdebf4 !important;
padding: 5px 14px !important;
border-radius: 999px !important;
margin: 0 !important;
letter-spacing: 0.02em !important;
min-height: 0 !important;
height: auto !important;
line-height: 1.2 !important;
white-space: nowrap !important;
}
/* Selected state — pink outline + check badge (top-right) */
html body .wpee-gift-popup-overlay .wpee-gift-inner > form > .form-group:has(input[type="radio"]:checked) {
background: linear-gradient(180deg, #fff 0%, #fdebf4 100%) !important;
border-color: var(--sh-accent) !important;
box-shadow: 0 10px 24px rgba(228, 81, 158, 0.22) !important;
}
html body .wpee-gift-popup-overlay .wpee-gift-inner > form > .form-group:has(input[type="radio"]:checked)::after {
content: "\2713";
position: absolute;
top: 8px;
right: 8px;
width: 22px;
height: 22px;
background: var(--sh-accent);
color: #fff;
font-size: 12px;
font-weight: 800;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(228, 81, 158, 0.40);
line-height: 1;
z-index: 3;
}
/* Submit — spans full grid width with spacing above */
html body .wpee-gift-popup-overlay .wpee-gift-inner > form > input[type="submit"].wpee-gift-submit {
grid-column: 1 / -1 !important;
justify-self: stretch;
width: 100% !important;
margin-top: 12px !important;
background: var(--sh-accent) !important;
color: #fff !important;
border: 0 !important;
padding: 15px 28px !important;
border-radius: 999px !important;
font-weight: 800 !important;
font-size: 15px !important;
letter-spacing: 0.02em !important;
cursor: pointer !important;
box-shadow: 0 8px 18px rgba(228, 81, 158, 0.30) !important;
transition: transform 200ms var(--sh-ease-out), box-shadow 200ms var(--sh-ease-out), background 200ms !important;
}
html body .wpee-gift-popup-overlay .wpee-gift-inner > form > input[type="submit"].wpee-gift-submit:hover {
background: var(--sh-accent-600) !important;
transform: translateY(-2px);
box-shadow: 0 14px 26px rgba(228, 81, 158, 0.40) !important;
}
/* Hidden form inputs should collapse, no stray 40px height */
html body .wpee-gift-popup-overlay .wpee-gift-inner > form > input[type="hidden"] {
display: none !important;
}
/* ======= Profile avatar — remove stray background + expose camera button ======= */
/* Strip avatar figure background blob; let the photo stand alone */
html body .wpee-datebook-profile-top .profile-img.change-profile-image,
html body .profile-user-details .profile-img.change-profile-image,
html body .profile-img.profile_image_change {
background: transparent !important;
overflow: visible !important;
}
html body .wpee-datebook-profile-top .profile-img figure,
html body .wpee-datebook-profile-top .profile-img figure.overflow-h,
html body .profile-user-details .profile-img figure,
html body .profile-img.profile_image_change figure {
background: transparent !important;
}
/* Camera "change photo" button — always on top, visible, pink, circular */
html body .wpee-datebook-profile-top .update_profile_text_div,
html body .profile-user-details .update_profile_text_div,
html body .profile-img.profile_image_change .update_profile_text_div {
position: absolute !important;
right: 4px !important;
bottom: 4px !important;
top: auto !important;
left: auto !important;
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
background: var(--sh-accent) !important;
border: 3px solid #fff !important;
box-shadow: 0 6px 16px rgba(228, 81, 158, 0.45) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
z-index: 10 !important;
opacity: 1 !important;
visibility: visible !important;
transition: transform 220ms var(--sh-ease-out), background 200ms !important;
}
html body .wpee-datebook-profile-top .update_profile_text_div:hover,
html body .profile-user-details .update_profile_text_div:hover,
html body .profile-img.profile_image_change .update_profile_text_div:hover {
transform: scale(1.08);
background: var(--sh-accent-600) !important;
}
html body .wpee-datebook-profile-top .update_profile_text_div a,
html body .wpee-datebook-profile-top .update_profile_text_div i,
html body .profile-user-details .update_profile_text_div a,
html body .profile-user-details .update_profile_text_div i,
html body .profile-img.profile_image_change .update_profile_text_div a,
html body .profile-img.profile_image_change .update_profile_text_div i {
color: #fff !important;
font-size: 15px !important;
line-height: 1 !important;
}
/* ZONE_Z46_END */
/* ==========================================================================
ZONE Z47 — Sidebar Photo Gallery: bigger thumbs, cleaner title
========================================================================== */
/* Remove the tiny accent pill before block titles in the right sidebar */
html body .profile-activity-sidebar .wpee-block-title::before,
html body .wpee-profile-col3-stack .wpee-block-title::before,
html body .profile-user-photos .wpee-block-title::before {
display: none !important;
content: none !important;
}
/* Target: Photo Gallery sidebar block uses not ![]()
*/
html body .profile-activity-sidebar .profile-user-photos .profile-photo-list,
html body .profile-user-photos .profile-photo-list.d-flex,
html body .profile-user-photos ul.profile-photo-list {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
flex-wrap: initial !important;
}
html body .profile-user-photos .profile-photo-list > li.photos-list {
list-style: none !important;
aspect-ratio: 1 / 1 !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
border-radius: 14px !important;
overflow: hidden !important;
position: relative !important;
margin: 0 !important;
padding: 0 !important;
background: var(--sh-bg-soft) !important;
box-shadow: 0 2px 6px rgba(26, 26, 46, 0.06) !important;
transition: transform 220ms var(--sh-ease-out), box-shadow 220ms var(--sh-ease-out) !important;
}
html body .profile-user-photos .profile-photo-list > li.photos-list:hover {
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(228, 81, 158, 0.18) !important;
z-index: 2;
}
html body .profile-user-photos .profile-photo-list > li.photos-list > a {
display: block !important;
width: 100% !important;
height: 100% !important;
position: absolute !important;
inset: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
html body .profile-user-photos .profile-photo-list > li.photos-list .image-bg {
display: block !important;
width: 100% !important;
height: 100% !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
border-radius: 0 !important;
transition: transform 260ms var(--sh-ease-out);
}
html body .profile-user-photos .profile-photo-list > li.photos-list:hover .image-bg {
transform: scale(1.06);
}
/* ZONE_Z47_END */
/* ==========================================================================
ZONE Z48 — Profile header definitive layout (avatar | info | actions)
========================================================================== */
/* Card wrapper — nice soft shell */
html body .wpee-datebook-profile-card {
background: #fff !important;
border: 1px solid var(--sh-divider) !important;
border-radius: 22px !important;
box-shadow: 0 8px 30px rgba(26, 26, 46, 0.06) !important;
overflow: hidden;
}
/* Top row: avatar | details column */
html body .profile-user-details.wpee-datebook-profile-top {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 24px !important;
padding: 26px 28px !important;
flex-wrap: nowrap !important;
background: linear-gradient(180deg, #fef4f9 0%, #ffffff 60%) !important;
}
/* Avatar — solid 128px circle, no gradient behind */
html body .wpee-datebook-profile-top .profile-img.change-profile-image {
flex: 0 0 128px !important;
width: 128px !important;
height: 128px !important;
max-width: 128px !important;
max-height: 128px !important;
min-width: 128px !important;
margin: 0 !important;
border-radius: 50% !important;
padding: 0 !important;
background: transparent !important;
border: 4px solid #fff !important;
box-shadow: 0 10px 24px rgba(228, 81, 158, 0.20) !important;
position: relative !important;
overflow: visible !important;
}
/* Details column — takes the rest */
html body .wpee-datebook-profile-top .wpee-datebook-details-column {
flex: 1 1 auto !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
}
/* User-info wrapper — side-by-side on desktop, wraps on narrow viewports */
html body .wpee-datebook-profile-top .user-info-wrapper {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 16px 24px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Info primary (left) */
html body .wpee-datebook-profile-top .wpee-datebook-info-primary {
flex: 1 1 320px !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
}
/* Username rating wrap */
html body .wpee-datebook-profile-top .wpee-user-rating-wrap {
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
}
html body .wpee-datebook-profile-top .wpee-user-rating-wrap .username,
html body .wpee-datebook-profile-top h4.username,
html body .wpee-datebook-profile-top h4.username.text-white {
color: var(--sh-text) !important;
font-size: 26px !important;
font-weight: 800 !important;
letter-spacing: -0.02em !important;
margin: 0 !important;
line-height: 1.15 !important;
text-shadow: none !important;
}
/* Offline/online pill row */
html body .wpee-datebook-profile-top .wpee-datebook-online-line {
margin: 0 !important;
padding: 0 !important;
}
/* Age/location pills */
html body .wpee-datebook-profile-top .age-location-wrap,
html body .wpee-datebook-profile-top .age-location-wrap.text-white {
margin: 0 !important;
padding: 0 !important;
}
/* Meta secondary line */
html body .wpee-datebook-profile-top .wpee-datebook-meta-line {
margin: 4px 0 0 !important;
}
/* Actions — horizontal row below info, full width, left-aligned */
html body .wpee-datebook-profile-top .wpee-datebook-actions {
flex: 0 0 auto !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
/* Action buttons — unified pill look */
html body .wpee-datebook-profile-top .wpee-datebook-actions .wpee-db-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
padding: 10px 20px !important;
border-radius: 999px !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1 !important;
white-space: nowrap !important;
border: 1.5px solid transparent !important;
cursor: pointer !important;
text-decoration: none !important;
transition: transform 180ms var(--sh-ease-out), box-shadow 180ms var(--sh-ease-out), background 180ms, color 180ms, border-color 180ms !important;
min-height: 40px !important;
}
/* Primary — "Write a message" */
html body .wpee-datebook-profile-top .wpee-datebook-actions .wpee-db-btn-primary {
background: var(--sh-accent) !important;
color: #fff !important;
border-color: transparent !important;
box-shadow: 0 6px 16px rgba(228, 81, 158, 0.28) !important;
}
html body .wpee-datebook-profile-top .wpee-datebook-actions .wpee-db-btn-primary:hover {
background: var(--sh-accent-600) !important;
color: #fff !important;
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(228, 81, 158, 0.38) !important;
}
/* Outline — "Add Friend" */
html body .wpee-datebook-profile-top .wpee-datebook-actions .wpee-db-btn-outline {
background: #fff !important;
color: var(--sh-accent) !important;
border-color: rgba(228, 81, 158, 0.35) !important;
box-shadow: 0 2px 6px rgba(26, 26, 46, 0.04) !important;
}
html body .wpee-datebook-profile-top .wpee-datebook-actions .wpee-db-btn-outline:hover {
background: #fdebf4 !important;
color: var(--sh-accent-600) !important;
border-color: var(--sh-accent) !important;
}
html body .wpee-datebook-profile-top .wpee-datebook-actions .wpee-friend-request {
display: inline-flex !important;
margin: 0 !important;
padding: 0 !important;
}
/* Muted — "Block" (compact, subtle) */
html body .wpee-datebook-profile-top .wpee-datebook-actions .wpee-block-user {
display: inline-flex !important;
margin: 0 !important;
padding: 0 !important;
}
html body .wpee-datebook-profile-top .wpee-datebook-actions .wpee-db-btn-muted,
html body .wpee-datebook-profile-top .wpee-datebook-actions .block-user-form-trigger-btn {
background: transparent !important;
color: var(--sh-text-muted) !important;
border-color: var(--sh-divider) !important;
padding: 8px 16px !important;
min-height: 36px !important;
font-size: 12px !important;
}
html body .wpee-datebook-profile-top .wpee-datebook-actions .wpee-db-btn-muted:hover,
html body .wpee-datebook-profile-top .wpee-datebook-actions .block-user-form-trigger-btn:hover {
background: #fef2f2 !important;
color: #b91c1c !important;
border-color: #fecaca !important;
}
/* Responsive — stack on narrow screens */
@media (max-width: 820px) {
html body .profile-user-details.wpee-datebook-profile-top {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 18px !important;
padding: 24px 20px !important;
}
html body .wpee-datebook-profile-top .wpee-datebook-info-primary {
align-items: center !important;
}
html body .wpee-datebook-profile-top .wpee-user-rating-wrap,
html body .wpee-datebook-profile-top .age-location-wrap {
justify-content: center !important;
}
html body .wpee-datebook-profile-top .wpee-datebook-actions {
justify-content: center !important;
width: 100% !important;
}
}
/* ZONE_Z48_END */
/* ==========================================================================
ZONE Z49 — Album page photo grid + album header
========================================================================== */
/* Album header bar (Back + Album name) */
html body .photo-list-inner .wpee-album-details {
display: flex !important;
align-items: center !important;
gap: 14px !important;
padding: 16px 20px !important;
background: #fff !important;
border: 1px solid var(--sh-divider) !important;
border-radius: 16px !important;
margin: 0 0 18px !important;
box-shadow: 0 2px 6px rgba(26, 26, 46, 0.04) !important;
}
html body .photo-list-inner .wpee-album-back-button-section {
margin: 0 !important;
padding: 0 !important;
}
html body .photo-list-inner .wpee-album-back-button-section .dspdp-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
padding: 0 !important;
border-radius: 50% !important;
background: var(--sh-bg-soft) !important;
color: var(--sh-text) !important;
border: 1px solid var(--sh-divider) !important;
font-size: 0 !important;
position: relative;
transition: background 180ms var(--sh-ease), color 180ms var(--sh-ease), transform 180ms !important;
}
html body .photo-list-inner .wpee-album-back-button-section .dspdp-btn::before {
content: "\2039";
font-size: 24px !important;
line-height: 1;
font-weight: 700;
}
html body .photo-list-inner .wpee-album-back-button-section .dspdp-btn:hover {
background: var(--sh-accent) !important;
color: #fff !important;
border-color: var(--sh-accent) !important;
transform: translateX(-2px);
}
html body .photo-list-inner .wpee-album-name-section {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
font-size: 15px !important;
color: var(--sh-text) !important;
}
html body .photo-list-inner .wpee-album-name-label {
font-weight: 700 !important;
color: var(--sh-text) !important;
}
html body .photo-list-inner .wpee-album-name-value {
color: var(--sh-text-muted) !important;
font-weight: 500 !important;
}
/* Album photo grid — override legacy 55px anchors + flex wrap */
html body .photo-list-inner .profile-user-photos-inner {
background: #fff !important;
border: 1px solid var(--sh-divider) !important;
border-radius: 18px !important;
padding: 18px !important;
box-shadow: 0 2px 6px rgba(26, 26, 46, 0.04) !important;
}
html body .photo-list-inner ul.profile-photo-list,
html body .photo-list-inner ul.profile-photo-list.no-list {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
gap: 14px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
flex-wrap: initial !important;
}
@media (max-width: 600px) {
html body .photo-list-inner ul.profile-photo-list,
html body .photo-list-inner ul.profile-photo-list.no-list {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
}
html body .photo-list-inner ul.profile-photo-list > li.photos-list {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
aspect-ratio: 1 / 1 !important;
border-radius: 14px !important;
overflow: hidden !important;
position: relative !important;
background: var(--sh-bg-soft) !important;
box-shadow: 0 2px 6px rgba(26, 26, 46, 0.06) !important;
list-style: none !important;
line-height: 0 !important;
transition: transform 220ms var(--sh-ease-out), box-shadow 220ms var(--sh-ease-out) !important;
}
html body .photo-list-inner ul.profile-photo-list > li.photos-list:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(228, 81, 158, 0.20) !important;
z-index: 2;
}
html body .photo-list-inner ul.profile-photo-list > li.photos-list > a {
display: block !important;
width: 100% !important;
height: 100% !important;
position: absolute !important;
inset: 0 !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
overflow: hidden !important;
line-height: 0 !important;
}
html body .photo-list-inner ul.profile-photo-list > li.photos-list .image-bg,
html body .photo-list-inner ul.profile-photo-list > li.photos-list span.image-bg {
display: block !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
border-radius: 0 !important;
transition: transform 260ms var(--sh-ease-out);
}
html body .photo-list-inner ul.profile-photo-list > li.photos-list:hover .image-bg {
transform: scale(1.06);
}
/* ZONE_Z49_END */
/* ==========================================================================
ZONE Z50 — Meet Me card: post-AJAX re-render uses base classes only
(the AJAX response drops .meet-card-* / .meet-action-* modifiers)
========================================================================== */
/* Heading — server renders either .meet-card-title OR raw */
html body .modern-meet-card h2,
html body .meet-to-info.modern-meet-card > h2 {
font-size: 15px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
text-align: center !important;
margin: 0 0 14px !important;
padding: 0 !important;
letter-spacing: -0.01em;
background: none !important;
-webkit-text-fill-color: var(--sh-text) !important;
}
/* Image wrap — both .meet-card-image and bare .image-box (post-AJAX) */
html body .modern-meet-card .image-box,
html body .meet-to-info .image-box.dsp-meetme-image {
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 auto 14px !important;
padding: 0 !important;
width: 112px !important;
height: 112px !important;
border-radius: 50% !important;
overflow: hidden !important;
background: #fff !important;
border: 4px solid #fff !important;
box-shadow: 0 10px 24px rgba(228, 81, 158, 0.18) !important;
position: relative;
}
html body .modern-meet-card .image-box > a,
html body .meet-to-info .image-box.dsp-meetme-image > a {
display: block !important;
width: 100% !important;
height: 100% !important;
border-radius: 50% !important;
overflow: hidden !important;
}
html body .modern-meet-card .image-box img,
html body .meet-to-info .image-box img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
border-radius: 50% !important;
}
/* Info block — .user-meetto-info may or may not have .meet-card-content */
html body .modern-meet-card .user-meetto-info,
html body .meet-to-info .user-meetto-info {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
padding: 0 !important;
margin: 0 0 16px !important;
text-align: center !important;
font-size: 14px !important;
color: var(--sh-text) !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 4px !important;
}
/* Force consistent order regardless of server markup (pre/post AJAX swaps) */
html body .modern-meet-card .user-meetto-info .user-name,
html body .meet-to-info .user-meetto-info .user-name { order: 1 !important; }
html body .modern-meet-card .user-meetto-info .user-info,
html body .meet-to-info .user-meetto-info .user-info { order: 2 !important; }
html body .modern-meet-card .user-meetto-info .meet-user-link,
html body .meet-to-info .user-meetto-info .meet-user-link { order: 3 !important; }
/* User name — kept in dark text, no gradient */
html body .modern-meet-card .user-meetto-info .user-name,
html body .meet-to-info .user-meetto-info .user-name {
display: block !important;
font-size: 17px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
margin: 0 0 4px !important;
line-height: 1.2;
background: none !important;
-webkit-text-fill-color: var(--sh-text) !important;
}
html body .modern-meet-card .user-meetto-info .user-name .dspdp-medium,
html body .meet-to-info .user-meetto-info .user-name .dspdp-medium {
color: var(--sh-text) !important;
font-weight: 800 !important;
}
html body .modern-meet-card .user-meetto-info .user-name .meet-user-age,
html body .modern-meet-card .user-meetto-info .user-name .dspdp-medium .meet-user-age {
color: var(--sh-text-muted) !important;
font-weight: 500 !important;
font-size: 14px !important;
margin-left: 2px !important;
}
/* Location / age line */
html body .modern-meet-card .user-meetto-info .user-info,
html body .meet-to-info .user-meetto-info .user-info {
color: var(--sh-text-muted) !important;
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
margin: 0 !important;
padding: 0 !important;
}
/* View profile link (only present when full re-render has it) */
html body .modern-meet-card .meet-user-link .view-profile-text {
color: var(--sh-accent) !important;
font-size: 12px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
text-decoration: none !important;
display: inline-block !important;
margin-top: 6px !important;
}
/* Action wrap — both .meet-card-actions and bare .wpee-meetme-action-wrap */
html body .modern-meet-card .wpee-meetme-action-wrap,
html body .meet-to-info .wpee-meetme-action-wrap {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
margin: 14px 0 0 !important;
padding: 14px 0 0 !important;
border-top: 1px solid var(--sh-divider) !important;
background: transparent !important;
}
/* Action buttons — target persistent .button.wpee-meet-me-trigger + data-action */
html body .modern-meet-card .wpee-meetme-action-wrap .button.wpee-meet-me-trigger,
html body .meet-to-info .wpee-meetme-action-wrap .button.wpee-meet-me-trigger {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
flex: 1 1 0 !important;
padding: 11px 18px !important;
border-radius: 999px !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1 !important;
border: 1.5px solid transparent !important;
cursor: pointer !important;
text-decoration: none !important;
white-space: nowrap !important;
transition: transform 180ms var(--sh-ease-out), box-shadow 180ms var(--sh-ease-out), background 180ms, color 180ms !important;
min-height: 40px !important;
width: auto !important;
height: auto !important;
box-shadow: none !important;
text-shadow: none !important;
}
html body .modern-meet-card .wpee-meetme-action-wrap .button.wpee-meet-me-trigger i,
html body .meet-to-info .wpee-meetme-action-wrap .button.wpee-meet-me-trigger i {
font-size: 13px !important;
line-height: 1 !important;
}
/* Like / Yes — pink pill */
html body .modern-meet-card .wpee-meetme-action-wrap .button.wpee-meet-me-trigger[data-action="yes"],
html body .meet-to-info .wpee-meetme-action-wrap .button.wpee-meet-me-trigger[data-action="yes"] {
background: var(--sh-accent) !important;
color: #fff !important;
border-color: transparent !important;
box-shadow: 0 6px 16px rgba(228, 81, 158, 0.28) !important;
}
html body .modern-meet-card .wpee-meetme-action-wrap .button.wpee-meet-me-trigger[data-action="yes"]:hover,
html body .meet-to-info .wpee-meetme-action-wrap .button.wpee-meet-me-trigger[data-action="yes"]:hover {
background: var(--sh-accent-600) !important;
color: #fff !important;
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(228, 81, 158, 0.38) !important;
}
/* Skip / No — outline pill */
html body .modern-meet-card .wpee-meetme-action-wrap .button.wpee-meet-me-trigger[data-action="no"],
html body .meet-to-info .wpee-meetme-action-wrap .button.wpee-meet-me-trigger[data-action="no"] {
background: #fff !important;
color: var(--sh-text-2) !important;
border-color: var(--sh-divider) !important;
}
html body .modern-meet-card .wpee-meetme-action-wrap .button.wpee-meet-me-trigger[data-action="no"]:hover,
html body .meet-to-info .wpee-meetme-action-wrap .button.wpee-meet-me-trigger[data-action="no"]:hover {
background: var(--sh-bg-soft) !important;
color: var(--sh-text) !important;
border-color: var(--sh-text-muted) !important;
}
/* ZONE_Z50_END */
/* ==========================================================================
ZONE Z51 — Meet Me: hammer username color + link underlines (post-AJAX)
========================================================================== */
html body .modern-meet-card .user-meetto-info .user-name,
html body .modern-meet-card .user-meetto-info .user-name *,
html body .meet-to-info .user-meetto-info .user-name,
html body .meet-to-info .user-meetto-info .user-name *,
html body .meet-to-info .user-meetto-info .user-name .dspdp-medium,
html body .meet-to-info .user-meetto-info .user-name a {
color: var(--sh-text) !important;
-webkit-text-fill-color: var(--sh-text) !important;
text-decoration: none !important;
background: none !important;
}
/* ZONE_Z51_END */
/* ==========================================================================
ZONE Z52 — Account Settings form: reorder fields + polish criteria card
========================================================================== */
/* Force 2-col grid order: Username | Current Password — New | Confirm — Criteria — Email | (empty) — Submit */
html body .settings-list-wrapper .setting-page-account {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 18px 24px !important;
align-items: start !important;
}
html body .settings-list-wrapper .setting-page-account > .form-group:has(input[name="txtusername"]) { order: 1 !important; }
html body .settings-list-wrapper .setting-page-account > .form-group:has(input[name="old_password"]) { order: 2 !important; }
html body .settings-list-wrapper .setting-page-account > .form-group:has(input[name="txtpassword1"]) { order: 3 !important; }
html body .settings-list-wrapper .setting-page-account > .form-group:has(input[name="txtpassword2"]) { order: 4 !important; }
html body .settings-list-wrapper .setting-page-account > .form-group.password-criteria { order: 5 !important; }
html body .settings-list-wrapper .setting-page-account > .form-group:has(input[name="txtemailbox"]) { order: 6 !important; }
html body .settings-list-wrapper .setting-page-account > .form-group.dspdp-row { order: 7 !important; }
/* Full-width rows */
html body .settings-list-wrapper .setting-page-account > .form-group.password-criteria,
html body .settings-list-wrapper .setting-page-account > .form-group.dspdp-row,
html body .settings-list-wrapper .setting-page-account > .form-group:has(input[name="txtemailbox"]) {
grid-column: 1 / -1 !important;
}
/* Kill inline `margin-right: 24%;` on .password-criteria + pretty card */
html body .settings-list-wrapper .setting-page-account > .form-group.password-criteria {
margin: 0 !important;
padding: 18px 22px !important;
background: linear-gradient(135deg, #fdebf4 0%, #eef0fa 100%) !important;
border: 1px solid rgba(228, 81, 158, 0.15) !important;
border-radius: 16px !important;
box-shadow: none !important;
font-size: 13px !important;
color: var(--sh-text-2) !important;
display: block !important;
}
html body .settings-list-wrapper .setting-page-account > .form-group.password-criteria p {
margin: 0 0 10px !important;
font-weight: 800 !important;
font-size: 11px !important;
color: var(--sh-text) !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
}
html body .settings-list-wrapper .setting-page-account > .form-group.password-criteria > div {
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin: 0 0 6px !important;
padding: 0 !important;
}
html body .settings-list-wrapper .setting-page-account > .form-group.password-criteria > div:last-child { margin-bottom: 0 !important; }
html body .settings-list-wrapper .setting-page-account > .form-group.password-criteria > div > span {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 16px !important;
height: 16px !important;
padding: 0 !important;
color: var(--sh-text-muted) !important;
flex: 0 0 auto !important;
}
html body .settings-list-wrapper .setting-page-account > .form-group.password-criteria .bi-check-circle-fill {
color: #22c55e !important;
}
html body .settings-list-wrapper .setting-page-account > .form-group.password-criteria .bi-x-circle-fill {
color: #ef4444 !important;
}
html body .settings-list-wrapper .setting-page-account > .form-group.password-criteria > div > label {
margin: 0 !important;
padding: 0 !important;
font-size: 13px !important;
font-weight: 500 !important;
color: var(--sh-text-2) !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
html body .settings-list-wrapper .setting-page-account > .form-group.password-criteria > div > label > small {
font-size: 13px !important;
color: var(--sh-text-2) !important;
}
/* Responsive — stack on narrow screens */
@media (max-width: 700px) {
html body .settings-list-wrapper .setting-page-account {
grid-template-columns: 1fr !important;
}
html body .settings-list-wrapper .setting-page-account > .form-group.password-criteria,
html body .settings-list-wrapper .setting-page-account > .form-group.dspdp-row,
html body .settings-list-wrapper .setting-page-account > .form-group:has(input[name="txtemailbox"]) {
grid-column: 1 !important;
}
}
/* ZONE_Z52_END */
/* ==========================================================================
ZONE Z53 — Unify profile header nav (top menu + notifications + quick links)
========================================================================== */
/* Profile header menu: single cohesive row of pills */
html body:not(.wp-admin) .wpee-datebook-profile-card .profile-header-menu {
background: #fff !important;
border-top: 1px solid var(--sh-divider) !important;
padding: 10px 18px !important;
}
html body:not(.wp-admin) .wpee-datebook-profile-card .profile-menu-wrapper {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
flex-wrap: wrap !important;
}
/* Primary top tabs (Activity / Profile / Media / Message / Search / Friends) */
html body:not(.wp-admin) .wpee-datebook-profile-card .profile-menu-tab {
display: flex !important;
flex-wrap: wrap !important;
gap: 4px !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
html body:not(.wp-admin) .wpee-datebook-profile-card .profile-menu-tab > li.profile-menu-tab-list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
}
html body:not(.wp-admin) .wpee-datebook-profile-card .profile-menu-tab > li.profile-menu-tab-list > a {
display: inline-flex !important;
align-items: center !important;
padding: 10px 16px !important;
border-radius: 999px !important;
color: var(--sh-text-2) !important;
font-size: 13px !important;
font-weight: 600 !important;
text-decoration: none !important;
line-height: 1 !important;
transition: background 180ms, color 180ms !important;
background: transparent !important;
}
html body:not(.wp-admin) .wpee-datebook-profile-card .profile-menu-tab > li.profile-menu-tab-list > a:hover {
background: #fdebf4 !important;
color: var(--sh-accent) !important;
}
html body:not(.wp-admin) .wpee-datebook-profile-card .profile-menu-tab > li.profile-menu-tab-list.active > a,
html body:not(.wp-admin) .wpee-datebook-profile-card .profile-menu-tab > li.profile-menu-tab-list.current-menu-item > a {
background: var(--sh-accent) !important;
color: #fff !important;
box-shadow: 0 6px 14px rgba(228, 81, 158, 0.25) !important;
}
/* Remove old accent underline on this menu — we use pills now */
html body:not(.wp-admin) .wpee-datebook-profile-card .profile-menu-tab > li.profile-menu-tab-list.active::after,
html body:not(.wp-admin) .wpee-datebook-profile-card .profile-menu-tab > li.profile-menu-tab-list::after {
display: none !important;
content: none !important;
}
/* Notification links (Gifts / Winks / Settings) — pill icons on the right */
html body:not(.wp-admin) .wpee-datebook-profile-card .profile-notification-blocks {
padding: 0 !important;
}
html body:not(.wp-admin) .wpee-datebook-profile-card .wpee-notification-links {
display: flex !important;
align-items: center !important;
gap: 4px !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
html body:not(.wp-admin) .wpee-datebook-profile-card .wpee-notification-links > li.wpee-menu {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
}
html body:not(.wp-admin) .wpee-datebook-profile-card .wpee-notification-links > li.wpee-menu > a {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 9px 14px !important;
border-radius: 999px !important;
color: var(--sh-text-2) !important;
font-size: 13px !important;
font-weight: 600 !important;
text-decoration: none !important;
line-height: 1 !important;
background: var(--sh-bg-soft) !important;
border: 1px solid transparent !important;
transition: background 180ms, color 180ms, border-color 180ms !important;
}
html body:not(.wp-admin) .wpee-datebook-profile-card .wpee-notification-links > li.wpee-menu > a > i {
font-size: 13px !important;
color: var(--sh-accent) !important;
}
html body:not(.wp-admin) .wpee-datebook-profile-card .wpee-notification-links > li.wpee-menu > a:hover {
background: #fdebf4 !important;
color: var(--sh-accent) !important;
border-color: rgba(228, 81, 158, 0.22) !important;
}
html body:not(.wp-admin) .wpee-datebook-profile-card .wpee-notification-links > li.wpee-menu.wpee_active_link > a,
html body:not(.wp-admin) .wpee-datebook-profile-card .wpee-notification-links > li.wpee-menu.active > a {
background: var(--sh-accent) !important;
color: #fff !important;
border-color: transparent !important;
}
html body:not(.wp-admin) .wpee-datebook-profile-card .wpee-notification-links > li.wpee-menu.wpee_active_link > a > i,
html body:not(.wp-admin) .wpee-datebook-profile-card .wpee-notification-links > li.wpee-menu.active > a > i {
color: #fff !important;
}
html body:not(.wp-admin) .wpee-datebook-profile-card .wpee-notification-links .wpee-count-num {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 18px !important;
height: 18px !important;
padding: 0 6px !important;
margin-left: 4px !important;
background: var(--sh-accent) !important;
color: #fff !important;
border-radius: 999px !important;
font-size: 10px !important;
font-weight: 800 !important;
line-height: 1 !important;
}
html body:not(.wp-admin) .wpee-datebook-profile-card .wpee-notification-links > li.wpee-menu.wpee_active_link > a .wpee-count-num,
html body:not(.wp-admin) .wpee-datebook-profile-card .wpee-notification-links > li.wpee-menu.active > a .wpee-count-num {
background: #fff !important;
color: var(--sh-accent) !important;
}
/* Hide the "More" toggle — we show More panel always */
html body:not(.wp-admin) .wpee-datebook-profile-card .wpee-notification-links > li.wpee-others {
display: none !important;
}
/* ===== "Quick Links" panel (was More panel) — add label, better spacing ===== */
html body:not(.wp-admin) .wpee-datebook-more-panel {
display: block !important;
background: #fff !important;
border: 1px solid var(--sh-divider) !important;
border-radius: 22px !important;
box-shadow: 0 8px 30px rgba(26, 26, 46, 0.06) !important;
padding: 22px !important;
margin: 18px 0 !important;
position: relative;
}
html body:not(.wp-admin) .wpee-datebook-more-panel::before {
content: "Quick Links";
display: block;
font-size: 11px !important;
font-weight: 800 !important;
color: var(--sh-text-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.12em !important;
margin-bottom: 14px !important;
padding-bottom: 10px !important;
border-bottom: 1px solid var(--sh-divider) !important;
}
html body:not(.wp-admin) .wpee-datebook-more-panel ul.wpee-notification-more-tabs,
html body:not(.wp-admin) .wpee-datebook-more-panel ul[hidden],
html body:not(.wp-admin) .wpee-datebook-more-panel #wpee-notification-more-tabs {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
gap: 8px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
visibility: visible !important;
opacity: 1 !important;
}
/* ===== Settings subtabs — unified pill style matching top nav ===== */
html body:not(.wp-admin) .settings-list-wrapper > ul.profile-section-tab {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
list-style: none !important;
padding: 6px !important;
margin: 0 0 18px !important;
background: #fff !important;
border: 1px solid var(--sh-divider) !important;
border-radius: 999px !important;
box-shadow: 0 2px 8px rgba(26, 26, 46, 0.04) !important;
}
html body:not(.wp-admin) .settings-list-wrapper > ul.profile-section-tab > li.profile-section-tab-title {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
html body:not(.wp-admin) .settings-list-wrapper > ul.profile-section-tab > li.profile-section-tab-title > a {
display: inline-flex !important;
align-items: center !important;
padding: 9px 16px !important;
border-radius: 999px !important;
color: var(--sh-text-2) !important;
font-size: 13px !important;
font-weight: 600 !important;
text-decoration: none !important;
background: transparent !important;
border: 0 !important;
transition: background 180ms, color 180ms !important;
line-height: 1 !important;
white-space: nowrap !important;
}
html body:not(.wp-admin) .settings-list-wrapper > ul.profile-section-tab > li.profile-section-tab-title > a:hover {
background: #fdebf4 !important;
color: var(--sh-accent) !important;
}
html body:not(.wp-admin) .settings-list-wrapper > ul.profile-section-tab > li.profile-section-tab-title.active > a,
html body:not(.wp-admin) .settings-list-wrapper > ul.profile-section-tab > li.profile-section-tab-title.current-menu-item > a {
background: var(--sh-accent) !important;
color: #fff !important;
box-shadow: 0 4px 12px rgba(228, 81, 158, 0.28) !important;
}
/* Mobile: allow settings subtabs to scroll horizontally */
@media (max-width: 720px) {
html body:not(.wp-admin) .settings-list-wrapper > ul.profile-section-tab {
flex-wrap: nowrap !important;
overflow-x: auto !important;
scrollbar-width: thin;
}
html body:not(.wp-admin) .settings-list-wrapper > ul.profile-section-tab > li.profile-section-tab-title > a {
white-space: nowrap !important;
}
}
/* ZONE_Z53_END */
/* ==========================================================================
ZONE Z54 — Blocked members list (beat legacy .friends-favourites specificity)
========================================================================== */
html body #m_list_blocked_members,
html body .wpee-block-wrapper.friends-favourites {
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
margin: 0 !important;
}
html body #m_list_blocked_members ul.friends-section,
html body .friends-favourites ul.friends-section {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
gap: 14px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
flex-wrap: initial !important;
}
html body #m_list_blocked_members ul.friends-section > li,
html body .friends-favourites ul.friends-section > li,
html body .friends-favourites ul.friends-section > li.wpee-fav-list {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 14px !important;
background: #fff !important;
border: 1px solid var(--sh-divider) !important;
border-radius: 16px !important;
box-shadow: 0 2px 8px rgba(26, 26, 46, 0.05) !important;
list-style: none !important;
overflow: visible !important;
display: flex !important;
align-items: center !important;
gap: 14px !important;
transition: transform 200ms var(--sh-ease-out), box-shadow 200ms var(--sh-ease-out), border-color 200ms !important;
}
html body #m_list_blocked_members ul.friends-section > li:hover,
html body .friends-favourites ul.friends-section > li:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(228, 81, 158, 0.12) !important;
border-color: rgba(228, 81, 158, 0.30) !important;
}
/* Avatar — fixed 56px circle */
html body .friends-favourites ul.friends-section li figure,
html body .friends-favourites ul.friends-section li figure.img-holder,
html body #m_list_blocked_members ul.friends-section li figure.img-holder {
flex: 0 0 56px !important;
width: 56px !important;
height: 56px !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 50% !important;
overflow: hidden !important;
position: relative !important;
background: var(--sh-bg-soft) !important;
border: 2px solid #fff !important;
box-shadow: 0 2px 8px rgba(26, 26, 46, 0.08) !important;
}
html body .friends-favourites ul.friends-section li figure > a,
html body #m_list_blocked_members ul.friends-section li figure > a {
display: block !important;
width: 100% !important;
height: 100% !important;
border-radius: 50% !important;
overflow: hidden !important;
}
html body .friends-favourites ul.friends-section li figure a img,
html body .friends-favourites ul.friends-section li figure img,
html body #m_list_blocked_members ul.friends-section li figure img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: cover !important;
border-radius: 50% !important;
display: block !important;
}
/* Content — name + unblock button side by side */
html body .friends-favourites ul.friends-section li .fav-content,
html body #m_list_blocked_members ul.friends-section li .fav-content {
flex: 1 1 auto !important;
min-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
width: auto !important;
}
html body .friends-favourites ul.friends-section li .fav-content .user-name-show,
html body #m_list_blocked_members ul.friends-section li .fav-content .user-name-show {
display: block !important;
font-size: 15px !important;
font-weight: 700 !important;
color: var(--sh-text) !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
/* Unblock button — pill */
html body .friends-favourites ul.friends-section li .fav-content .dsp-btn-default,
html body #m_list_blocked_members ul.friends-section li .fav-content .dsp-btn-default {
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 8px 16px !important;
background: #fff !important;
color: var(--sh-accent) !important;
border: 1.5px solid rgba(228, 81, 158, 0.35) !important;
border-radius: 999px !important;
font-size: 12px !important;
font-weight: 700 !important;
text-decoration: none !important;
cursor: pointer !important;
white-space: nowrap !important;
min-height: 36px !important;
transition: background 180ms, color 180ms, border-color 180ms, transform 180ms !important;
}
html body .friends-favourites ul.friends-section li .fav-content .dsp-btn-default:hover,
html body #m_list_blocked_members ul.friends-section li .fav-content .dsp-btn-default:hover {
background: var(--sh-accent) !important;
color: #fff !important;
border-color: var(--sh-accent) !important;
transform: translateY(-1px);
}
/* ZONE_Z54_END */
/* ==========================================================================
ZONE Z55 — Premium upgrade page: polished active banner + plan cards + info
========================================================================== */
/* ===== Active membership banner (top) ===== */
html body:not(.wp-admin) .wpee-premium-area {
margin: 0 0 24px !important;
opacity: 1 !important;
filter: none !important;
}
html body:not(.wp-admin) .wpee-premium-area .premium-area {
background: linear-gradient(135deg, #fdebf4 0%, #eef0fa 100%) !important;
background-color: #fdebf4 !important;
color: var(--sh-text) !important;
padding: 22px 28px !important;
border-radius: 22px !important;
box-shadow: 0 4px 16px rgba(228, 81, 158, 0.10) !important;
border: 1px solid rgba(228, 81, 158, 0.18) !important;
position: relative !important;
overflow: hidden !important;
opacity: 1 !important;
filter: none !important;
}
html body:not(.wp-admin) .wpee-premium-area .premium-area *:not(.logo-premium):not(img):not(.dsp-emphasis-text):not(.dsp-strong) {
color: var(--sh-text) !important;
text-shadow: none !important;
}
html body:not(.wp-admin) .wpee-premium-area .premium-area::before {
content: none !important;
}
html body:not(.wp-admin) .wpee-premium-area .premium-area .dspdp-row {
display: flex !important;
align-items: center !important;
gap: 20px !important;
margin: 0 !important;
position: relative;
z-index: 1;
}
html body:not(.wp-admin) .wpee-premium-area .premium-area .logo-premium {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 56px !important;
height: 56px !important;
min-width: 56px !important;
min-height: 56px !important;
flex: 0 0 56px !important;
border-radius: 50% !important;
background: var(--sh-accent) !important;
font-size: 0 !important;
line-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 3px solid #fff !important;
box-shadow: 0 6px 14px rgba(228, 81, 158, 0.32) !important;
overflow: hidden !important;
color: transparent !important;
text-indent: -9999px !important;
white-space: nowrap !important;
box-sizing: border-box !important;
}
html body:not(.wp-admin) .wpee-premium-area .premium-area .logo-premium::before {
content: "\f005" !important;
font-family: "FontAwesome" !important;
font-size: 22px !important;
color: #fff !important;
line-height: 1 !important;
text-indent: 0 !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
display: block !important;
}
html body:not(.wp-admin) .wpee-premium-area .premium-area .logo-premium img,
html body:not(.wp-admin) .wpee-premium-area .premium-area .logo-premium > * {
display: none !important;
}
html body:not(.wp-admin) .wpee-premium-area .premium-area .logo-premium img {
display: none !important;
}
html body:not(.wp-admin) .wpee-premium-area .premium-area .premium-content {
flex: 1 1 auto;
color: #fff !important;
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
}
html body:not(.wp-admin) .wpee-premium-area .premium-area .premium-content-msg {
font-size: 16px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
margin: 0 !important;
line-height: 1.35 !important;
}
html body:not(.wp-admin) .wpee-premium-area .premium-area .premium-content-date {
font-size: 13px !important;
color: var(--sh-text-2) !important;
font-weight: 500 !important;
margin: 0 !important;
}
html body:not(.wp-admin) .wpee-premium-area .premium-area .dsp-emphasis-text,
html body:not(.wp-admin) .wpee-premium-area .premium-area .dsp-strong {
color: var(--sh-accent) !important;
font-weight: 800 !important;
background: #fff !important;
padding: 3px 10px !important;
border-radius: 999px !important;
display: inline-block !important;
margin-left: 6px !important;
font-size: 12px !important;
border: 1px solid rgba(228, 81, 158, 0.25) !important;
}
/* ===== Plan cards grid — Basic centered on top row, 3 premiums on row 2 ===== */
html body:not(.wp-admin) .wpee-plan-item-wrapper {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 16px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
flex-direction: initial !important;
flex-wrap: initial !important;
align-items: stretch !important;
}
html body:not(.wp-admin) .wpee-plan-item-wrapper.d-flex { display: grid !important; }
/* Basic (first) spans full width, but content is constrained + centered */
html body:not(.wp-admin) .wpee-plan-item-wrapper > .wpee-plan-item:first-child {
grid-column: 1 / -1 !important;
max-width: 420px !important;
width: 100% !important;
margin: 0 auto !important;
justify-self: center !important;
}
@media (max-width: 720px) {
html body:not(.wp-admin) .wpee-plan-item-wrapper {
grid-template-columns: 1fr !important;
}
html body:not(.wp-admin) .wpee-plan-item-wrapper > .wpee-plan-item:first-child {
max-width: 100% !important;
grid-column: 1 !important;
}
}
html body:not(.wp-admin) .wpee-plan-item {
position: relative !important;
display: flex !important;
flex-direction: column !important;
padding: 26px 22px 22px !important;
background: #fff !important;
border: 2px solid var(--sh-divider) !important;
border-radius: 22px !important;
box-shadow: 0 2px 12px rgba(26, 26, 46, 0.05) !important;
transition: transform 220ms var(--sh-ease-out), box-shadow 220ms var(--sh-ease-out), border-color 220ms !important;
list-style: none !important;
overflow: visible !important;
width: auto !important;
min-width: 0 !important;
}
html body:not(.wp-admin) .wpee-plan-item:hover {
transform: translateY(-4px);
box-shadow: 0 16px 36px rgba(228, 81, 158, 0.14) !important;
border-color: rgba(228, 81, 158, 0.30) !important;
}
/* Kill any inherited ::before badges from older zones */
html body:not(.wp-admin) .wpee-plan-item-wrapper > .wpee-plan-item::before,
html body:not(.wp-admin) .wpee-plan-item-wrapper > .wpee-plan-item:first-child::before,
html body:not(.wp-admin) .wpee-plan-item-wrapper > .wpee-plan-item:nth-child(2)::before,
html body:not(.wp-admin) .wpee-plan-item-wrapper > .wpee-plan-item:nth-child(3)::before,
html body:not(.wp-admin) .wpee-plan-item-wrapper > .wpee-plan-item:nth-child(4)::before {
content: none !important;
display: none !important;
}
/* Basic (first) card — slightly softer tone */
html body:not(.wp-admin) .wpee-plan-item-wrapper > .wpee-plan-item:first-child {
background: #fafafb !important;
border-color: var(--sh-divider) !important;
}
/* Plan inner list — clean vertical stack, no bullets */
html body:not(.wp-admin) .wpee-plan-item .wpee-plan-item-inner {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
flex: 1 !important;
}
html body:not(.wp-admin) .wpee-plan-item .wpee-plan-item-inner > li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
display: block !important;
background: transparent !important;
border: 0 !important;
}
html body:not(.wp-admin) .wpee-plan-item .wpee-plan-item-inner > li:empty {
display: none !important;
}
/* Kill the broken empty image (src ends with /dsp_images/ - no filename) */
html body:not(.wp-admin) .wpee-plan-item .wpee-plan-image-wrap {
display: none !important;
}
/* Plan name — large, bold */
html body:not(.wp-admin) .wpee-plan-item .wpee-plan-name,
html body:not(.wp-admin) .wpee-plan-item .wpee-plan-name strong {
font-size: 18px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
line-height: 1.25 !important;
margin: 6px 0 0 !important;
letter-spacing: -0.01em !important;
}
/* Plan description */
html body:not(.wp-admin) .wpee-plan-item .wpee-plan-desc {
font-size: 13px !important;
color: var(--sh-text-muted) !important;
line-height: 1.5 !important;
min-height: 58px !important;
}
/* Price ("€9") — shown as big badge above button */
html body:not(.wp-admin) .wpee-plan-item form span[style*="130%"],
html body:not(.wp-admin) .wpee-plan-item form span[style*="font-size"] {
display: block !important;
font-size: 28px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
margin: 0 0 10px !important;
line-height: 1 !important;
letter-spacing: -0.02em !important;
}
/* Hide
spacers around price/button */
html body:not(.wp-admin) .wpee-plan-item form br { display: none !important; }
html body:not(.wp-admin) .wpee-plan-item form {
display: flex !important;
flex-direction: column-reverse !important;
align-items: stretch !important;
gap: 10px !important;
margin: auto 0 0 !important;
padding: 0 !important;
}
/* Submit button — pink pill for paid, outlined for free */
html body:not(.wp-admin) .wpee-plan-item form input[type="submit"].dspdp-btn-default {
width: 100% !important;
padding: 12px 20px !important;
border-radius: 999px !important;
background: var(--sh-accent) !important;
color: #fff !important;
border: 0 !important;
font-size: 14px !important;
font-weight: 800 !important;
letter-spacing: 0.02em !important;
cursor: pointer !important;
box-shadow: 0 6px 16px rgba(228, 81, 158, 0.26) !important;
transition: transform 180ms var(--sh-ease-out), box-shadow 180ms var(--sh-ease-out), background 180ms !important;
text-shadow: none !important;
min-height: 44px !important;
}
html body:not(.wp-admin) .wpee-plan-item form input[type="submit"].dspdp-btn-default:hover {
background: var(--sh-accent-600) !important;
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(228, 81, 158, 0.38) !important;
}
/* Free (first-child) — outline style button */
html body:not(.wp-admin) .wpee-plan-item-wrapper > .wpee-plan-item:first-child form input[type="submit"].dspdp-btn-default {
background: #fff !important;
color: var(--sh-text-2) !important;
border: 1.5px solid var(--sh-divider) !important;
box-shadow: none !important;
}
html body:not(.wp-admin) .wpee-plan-item-wrapper > .wpee-plan-item:first-child form input[type="submit"].dspdp-btn-default:hover {
background: var(--sh-bg-soft) !important;
border-color: var(--sh-text-muted) !important;
color: var(--sh-text) !important;
}
/* ===== "About plans" info card (injected by JS below the grid) ===== */
html body:not(.wp-admin) .sh-premium-info {
margin: 28px 0 0 !important;
padding: 28px 30px !important;
background: linear-gradient(135deg, #fdebf4 0%, #eef0fa 100%) !important;
border: 1px solid rgba(228, 81, 158, 0.14) !important;
border-radius: 22px !important;
box-shadow: 0 6px 20px rgba(228, 81, 158, 0.06) !important;
display: grid !important;
grid-template-columns: 1fr !important;
gap: 18px !important;
position: relative;
}
html body:not(.wp-admin) .sh-premium-info__title {
font-size: 18px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
margin: 0 !important;
letter-spacing: -0.01em !important;
display: flex;
align-items: center;
gap: 10px;
}
html body:not(.wp-admin) .sh-premium-info__title::before {
content: "💘";
font-size: 22px;
}
html body:not(.wp-admin) .sh-premium-info__lead {
font-size: 14px !important;
color: var(--sh-text-2) !important;
line-height: 1.65 !important;
margin: 0 !important;
}
html body:not(.wp-admin) .sh-premium-info__cols {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
gap: 16px !important;
margin-top: 4px !important;
}
html body:not(.wp-admin) .sh-premium-info__col {
background: #fff !important;
border: 1px solid rgba(228, 81, 158, 0.12) !important;
border-radius: 16px !important;
padding: 18px 20px !important;
}
html body:not(.wp-admin) .sh-premium-info__col-title {
font-size: 13px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
margin: 0 0 10px !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
display: flex;
align-items: center;
gap: 8px;
}
html body:not(.wp-admin) .sh-premium-info__col--free .sh-premium-info__col-title::before {
content: "🆓";
}
html body:not(.wp-admin) .sh-premium-info__col--paid .sh-premium-info__col-title::before {
content: "⭐";
}
html body:not(.wp-admin) .sh-premium-info__col--paid {
border-color: rgba(228, 81, 158, 0.30) !important;
background: linear-gradient(180deg, #fff 0%, #fdf5f9 100%) !important;
}
html body:not(.wp-admin) .sh-premium-info__features {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
}
html body:not(.wp-admin) .sh-premium-info__features > li {
list-style: none !important;
margin: 0 !important;
padding: 5px 11px !important;
background: var(--sh-bg-soft) !important;
border: 1px solid var(--sh-divider) !important;
color: var(--sh-text-2) !important;
border-radius: 999px !important;
font-size: 12px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
}
html body:not(.wp-admin) .sh-premium-info__col--paid .sh-premium-info__features > li {
background: rgba(228, 81, 158, 0.08) !important;
border-color: rgba(228, 81, 158, 0.22) !important;
color: var(--sh-accent) !important;
}
/* ZONE_Z55_END */
/* ==========================================================================
ZONE Z56 — Kill decorative ::before/::after accent bars on section titles
========================================================================== */
html body:not(.wp-admin) .wpee-block-title::before,
html body:not(.wp-admin) .wpee-block-title::after,
html body:not(.wp-admin) .sh-premium-info__title::before,
html body:not(.wp-admin) .sh-premium-info__title::after,
html body:not(.wp-admin) .sh-premium-info__col-title::before,
html body:not(.wp-admin) .sh-premium-info__col-title::after,
html body:not(.wp-admin) .sh-section-header::before,
html body:not(.wp-admin) .sh-section-header::after,
html body:not(.wp-admin) .wpee-members-filter-toolbar__title::before,
html body:not(.wp-admin) .wpee-members-filter-toolbar__title::after,
html body:not(.wp-admin) .heading-submenu::before,
html body:not(.wp-admin) .heading-submenu::after,
html body:not(.wp-admin) .heading-submenu strong::before,
html body:not(.wp-admin) .heading-submenu strong::after,
html body:not(.wp-admin) .wpee-member-wrapper .sh-section-header::after,
html body:not(.wp-admin) .wpee-datebook-more-panel::before,
html body:not(.wp-admin) .wpee-datebook-more-panel::after {
content: none !important;
display: none !important;
background: none !important;
border: 0 !important;
}
/* Also kill the gradient underline on WP admin headings (we injected in redesign-admin.css) */
body.wp-admin .wrap > h1::after,
body.wp-admin .wrap > h2::after {
content: none !important;
display: none !important;
background: none !important;
}
/* ZONE_Z56_END */
/* ==========================================================================
ZONE Z57 — Credit Packages page polish (credit-plans)
========================================================================== */
/* Detect credit-packs page via :has() on the wrapper containing credit-number nodes */
html body:not(.wp-admin) .wpee-plan-item-wrapper:has(.wpee-plan-credits-number),
html body:not(.wp-admin) .wpee-plan-item-wrapper:has(.wpee-plan-item-credits) {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
gap: 16px !important;
}
/* Credit packs: kill the first-child basic override ONLY for non-manual first-child */
html body:not(.wp-admin) .wpee-plan-item-wrapper:has(.wpee-plan-credits-number) > .wpee-plan-item:first-child:not(.sh-plan-item-manual):not(:has(.wpee-plan-item-credits)),
html body:not(.wp-admin) .wpee-plan-item-wrapper:has(.wpee-plan-item-credits) > .wpee-plan-item:first-child:not(.sh-plan-item-manual):not(:has(.wpee-plan-item-credits)) {
grid-column: auto !important;
max-width: none !important;
width: auto !important;
margin: 0 !important;
justify-self: stretch !important;
background: #fff !important;
}
/* Credits number — big emphasis instead of description */
html body:not(.wp-admin) .wpee-plan-item .wpee-plan-desc.wpee-plan-credits-number {
display: inline-block !important;
padding: 6px 14px !important;
margin: 2px auto 0 !important;
background: linear-gradient(135deg, #fdebf4 0%, #eef0fa 100%) !important;
color: var(--sh-accent) !important;
border: 1px solid rgba(228, 81, 158, 0.22) !important;
border-radius: 999px !important;
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
min-height: 0 !important;
line-height: 1.2 !important;
}
/* Hide the coin image on credit packs (looks outdated) */
html body:not(.wp-admin) .wpee-plan-item-wrapper:has(.wpee-plan-credits-number) .wpee-plan-image-wrap,
html body:not(.wp-admin) .wpee-plan-item-wrapper:has(.wpee-plan-item-credits) .wpee-plan-image-wrap {
display: none !important;
}
/* Price visible near button — make it a big bold number above button */
html body:not(.wp-admin) .wpee-plan-item .credit_price {
display: block !important;
font-size: 28px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
margin: 12px 0 0 !important;
line-height: 1 !important;
letter-spacing: -0.02em !important;
padding: 0 !important;
}
/* The div containing form + price — make it a clean vertical stack */
html body:not(.wp-admin) .wpee-plan-item .wpee-plan-item-inner > li > div:has(> form[name="paymentfrm"]) {
display: flex !important;
flex-direction: column-reverse !important;
gap: 12px !important;
margin: auto 0 0 !important;
}
/* ===== Manual-amount card ("Purchase Credits") ===== */
html body:not(.wp-admin) .wpee-plan-item:has(.wpee-plan-item-credits) {
background: linear-gradient(180deg, #fff 0%, #fafafb 100%) !important;
border-color: rgba(228, 81, 158, 0.22) !important;
border-style: dashed !important;
}
html body:not(.wp-admin) .wpee-plan-item .wpee-plan-item-title {
text-align: center !important;
}
html body:not(.wp-admin) .wpee-plan-item .purchase-credit-heading {
font-size: 16px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
margin: 4px 0 10px !important;
letter-spacing: -0.01em !important;
}
html body:not(.wp-admin) .wpee-plan-item .purchase-credit-image {
display: none !important;
}
/* Input group for custom credit amount */
html body:not(.wp-admin) .wpee-plan-item .wpee-plan-item-credits {
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
html body:not(.wp-admin) .wpee-plan-item .input-credits {
margin: 0 !important;
padding: 0 !important;
}
html body:not(.wp-admin) .wpee-plan-item .dspdp-input-group {
display: flex !important;
align-items: stretch !important;
border: 1.5px solid var(--sh-divider) !important;
border-radius: 999px !important;
overflow: hidden !important;
background: #fff !important;
transition: border-color 180ms var(--sh-ease-out), box-shadow 180ms !important;
}
html body:not(.wp-admin) .wpee-plan-item .dspdp-input-group:focus-within {
border-color: var(--sh-accent) !important;
box-shadow: 0 0 0 4px rgba(228, 81, 158, 0.12) !important;
}
html body:not(.wp-admin) .wpee-plan-item .dspdp-input-group .dspdp-form-control {
flex: 1 !important;
border: 0 !important;
padding: 10px 16px !important;
background: transparent !important;
color: var(--sh-text) !important;
font-size: 15px !important;
font-weight: 700 !important;
text-align: center !important;
min-width: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
html body:not(.wp-admin) .wpee-plan-item .dspdp-input-group .dspdp-input-group-addon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 14px !important;
background: var(--sh-bg-soft) !important;
color: var(--sh-text-2) !important;
font-weight: 800 !important;
border: 0 !important;
border-left: 1px solid var(--sh-divider) !important;
font-size: 14px !important;
}
html body:not(.wp-admin) .wpee-plan-item .default-credit-value {
text-align: center !important;
color: var(--sh-text-muted) !important;
font-size: 12px !important;
font-weight: 500 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
}
/* ZONE_Z57_END */
/* ==========================================================================
ZONE Z58 — Credit Packages page: clean modern layout + manual card on top
========================================================================== */
/* Grid: manual card spans top full-width, packs below auto-fit */
html body:not(.wp-admin) .wpee-plan-item-wrapper:has(.wpee-plan-item-credits) {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 16px !important;
}
html body:not(.wp-admin) .wpee-plan-item-wrapper:has(.wpee-plan-item-credits) > .wpee-plan-item {
grid-column: auto !important;
}
/* ===== Manual Purchase Credits card — centered on top row ===== */
html body:not(.wp-admin) .wpee-plan-item-wrapper > .sh-plan-item-manual,
html body:not(.wp-admin) .wpee-plan-item-wrapper > .wpee-plan-item:has(.wpee-plan-item-credits) {
grid-column: 1 / -1 !important;
max-width: 540px !important;
width: 100% !important;
margin: 0 auto 6px !important;
justify-self: center !important;
background: linear-gradient(135deg, #fdebf4 0%, #eef0fa 100%) !important;
border: 1px solid rgba(228, 81, 158, 0.22) !important;
border-style: solid !important;
padding: 26px 28px !important;
}
/* Manual card inner — reset the
- list to clean vertical stack */
html body:not(.wp-admin) .wpee-plan-item-wrapper > .wpee-plan-item:has(.wpee-plan-item-credits) .wpee-plan-item-inner {
gap: 14px !important;
}
html body:not(.wp-admin) .wpee-plan-item .purchase-credit-heading {
font-size: 18px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
margin: 0 !important;
letter-spacing: -0.01em !important;
text-align: center !important;
}
html body:not(.wp-admin) .wpee-plan-item .purchase-credit-image { display: none !important; }
/* Input group — big friendly input */
html body:not(.wp-admin) .wpee-plan-item .dspdp-input-group {
display: flex !important;
align-items: stretch !important;
background: #fff !important;
border: 1.5px solid rgba(228, 81, 158, 0.25) !important;
border-radius: 999px !important;
overflow: hidden !important;
max-width: 360px !important;
margin: 0 auto !important;
transition: border-color 180ms var(--sh-ease-out), box-shadow 180ms !important;
box-shadow: 0 4px 12px rgba(228, 81, 158, 0.08) !important;
}
html body:not(.wp-admin) .wpee-plan-item .dspdp-input-group:focus-within {
border-color: var(--sh-accent) !important;
box-shadow: 0 0 0 4px rgba(228, 81, 158, 0.14) !important;
}
html body:not(.wp-admin) .wpee-plan-item .dspdp-input-group .dspdp-form-control {
flex: 1 !important;
border: 0 !important;
padding: 12px 18px !important;
background: transparent !important;
color: var(--sh-text) !important;
font-size: 16px !important;
font-weight: 700 !important;
text-align: center !important;
min-width: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
html body:not(.wp-admin) .wpee-plan-item .dspdp-input-group .dspdp-form-control::placeholder {
color: var(--sh-text-muted) !important;
font-weight: 500 !important;
}
html body:not(.wp-admin) .wpee-plan-item .dspdp-input-group .dspdp-input-group-addon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 18px !important;
background: var(--sh-bg-soft) !important;
color: var(--sh-text-2) !important;
font-weight: 800 !important;
border: 0 !important;
border-left: 1px solid var(--sh-divider) !important;
font-size: 14px !important;
}
html body:not(.wp-admin) .wpee-plan-item .default-credit-value {
text-align: center !important;
color: var(--sh-text-muted) !important;
font-size: 12px !important;
font-weight: 500 !important;
margin: 10px 0 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
display: block !important;
}
html body:not(.wp-admin) .sh-plan-item-manual .sh-manual-form {
margin-top: 6px !important;
}
html body:not(.wp-admin) .sh-plan-item-manual .sh-manual-form input[type="submit"] {
margin-top: 8px !important;
}
/* Live credit output */
html body:not(.wp-admin) .wpee-plan-item .sh-manual-output {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 2px !important;
padding: 12px 0 !important;
margin: 0 !important;
border-top: 1px dashed rgba(228, 81, 158, 0.25) !important;
border-bottom: 1px dashed rgba(228, 81, 158, 0.25) !important;
}
html body:not(.wp-admin) .wpee-plan-item .sh-manual-label {
font-size: 11px !important;
font-weight: 800 !important;
color: var(--sh-text-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
}
html body:not(.wp-admin) .wpee-plan-item .sh-manual-credits {
font-size: 26px !important;
font-weight: 800 !important;
color: var(--sh-accent) !important;
line-height: 1 !important;
letter-spacing: -0.02em !important;
}
/* Manual form — just the button */
html body:not(.wp-admin) .wpee-plan-item .sh-manual-form {
margin: 0 !important;
padding: 0 !important;
display: block !important;
flex-direction: initial !important;
}
html body:not(.wp-admin) .wpee-plan-item .sh-manual-form input[type="submit"] {
width: 100% !important;
max-width: 360px !important;
margin: 0 auto !important;
display: block !important;
}
/* ===== Credit pack cards — clean, simple, no gradient chip ===== */
html body:not(.wp-admin) .wpee-plan-item-wrapper:has(.wpee-plan-item-credits) > .wpee-plan-item:not(.sh-plan-item-manual):not(:has(.wpee-plan-item-credits)) {
padding: 26px 22px 22px !important;
background: #fff !important;
border: 2px solid var(--sh-divider) !important;
border-radius: 22px !important;
text-align: center !important;
}
/* Pack card: hide broken/redundant image */
html body:not(.wp-admin) .wpee-plan-item-wrapper:has(.wpee-plan-item-credits) .wpee-plan-image-wrap {
display: none !important;
}
/* Pack name = plan title big bold */
html body:not(.wp-admin) .wpee-plan-item-wrapper:has(.wpee-plan-item-credits) .wpee-plan-name,
html body:not(.wp-admin) .wpee-plan-item-wrapper:has(.wpee-plan-item-credits) .wpee-plan-name strong {
font-size: 15px !important;
font-weight: 700 !important;
color: var(--sh-text-2) !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
margin: 0 !important;
}
/* Pack credits — HUGE number, dominant */
html body:not(.wp-admin) .wpee-plan-item-wrapper:has(.wpee-plan-item-credits) .wpee-plan-desc.wpee-plan-credits-number {
display: block !important;
padding: 18px 0 10px !important;
margin: 0 !important;
background: transparent !important;
color: var(--sh-accent) !important;
border: 0 !important;
border-radius: 0 !important;
font-size: 34px !important;
font-weight: 900 !important;
letter-spacing: -0.02em !important;
text-transform: none !important;
line-height: 1 !important;
min-height: 0 !important;
}
/* Price (€12) — medium bold above button */
html body:not(.wp-admin) .wpee-plan-item-wrapper:has(.wpee-plan-item-credits) .credit_price {
display: block !important;
font-size: 22px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
margin: 4px 0 12px !important;
padding: 0 !important;
line-height: 1.2 !important;
letter-spacing: -0.02em !important;
}
/* Pack: form + price stack */
html body:not(.wp-admin) .wpee-plan-item-wrapper:has(.wpee-plan-item-credits) > .wpee-plan-item:not(.sh-plan-item-manual) .wpee-plan-item-inner > li:last-child > div {
display: flex !important;
flex-direction: column-reverse !important;
gap: 10px !important;
margin: auto 0 0 !important;
}
/* ZONE_Z58_END */
/* ==========================================================================
ZONE Z59 — Credit Packages: kill stray pseudos + definitive manual centering
========================================================================== */
/* Nuke every ::before / ::after on plan items and their children (rotated "Popular"
ribbons, ✨ emojis, gradient underlines — all noise). */
html body:not(.wp-admin) .wpee-plan-item::before,
html body:not(.wp-admin) .wpee-plan-item::after,
html body:not(.wp-admin) .wpee-plan-item *::before,
html body:not(.wp-admin) .wpee-plan-item *::after,
html body:not(.wp-admin) .wpee-plan-credits-number::before,
html body:not(.wp-admin) .wpee-plan-credits-number::after,
html body:not(.wp-admin) .wpee-plan-name::before,
html body:not(.wp-admin) .wpee-plan-name::after,
html body:not(.wp-admin) .wpee-plan-desc::before,
html body:not(.wp-admin) .wpee-plan-desc::after {
content: none !important;
display: none !important;
background: none !important;
transform: none !important;
}
/* ===== MANUAL CARD — centered, above the packs — max specificity ===== */
html body:not(.wp-admin) .wpee-plan-item-wrapper:has(.wpee-plan-item-credits) > .wpee-plan-item.sh-plan-item-manual,
html body:not(.wp-admin) .wpee-plan-item-wrapper:has(.wpee-plan-item-credits) > .wpee-plan-item:has(.wpee-plan-item-credits) {
grid-column: 1 / -1 !important;
grid-row: 1 !important;
max-width: 560px !important;
width: 100% !important;
margin: 0 auto 4px !important;
justify-self: center !important;
background: linear-gradient(135deg, #fdebf4 0%, #eef0fa 100%) !important;
border: 1.5px solid rgba(228, 81, 158, 0.28) !important;
border-radius: 24px !important;
box-shadow: 0 10px 30px rgba(228, 81, 158, 0.12) !important;
padding: 28px 32px !important;
}
/* Force packs to row 2 */
html body:not(.wp-admin) .wpee-plan-item-wrapper:has(.wpee-plan-item-credits) > .wpee-plan-item:not(:has(.wpee-plan-item-credits)):not(.sh-plan-item-manual) {
grid-row: 2 !important;
}
/* ===== CREDIT PACK CARDS — show "1500 Credits" as hero number ===== */
html body:not(.wp-admin) .wpee-plan-item-wrapper:has(.wpee-plan-item-credits) > .wpee-plan-item:not(.sh-plan-item-manual):not(:has(.wpee-plan-item-credits)) {
padding: 28px 22px 22px !important;
background: #fff !important;
border: 1.5px solid var(--sh-divider) !important;
border-radius: 22px !important;
text-align: center !important;
box-shadow: 0 4px 14px rgba(26, 26, 46, 0.05) !important;
transition: transform 220ms var(--sh-ease-out), box-shadow 220ms var(--sh-ease-out), border-color 220ms !important;
}
html body:not(.wp-admin) .wpee-plan-item-wrapper:has(.wpee-plan-item-credits) > .wpee-plan-item:not(.sh-plan-item-manual):not(:has(.wpee-plan-item-credits)):hover {
transform: translateY(-4px);
border-color: rgba(228, 81, 158, 0.35) !important;
box-shadow: 0 16px 36px rgba(228, 81, 158, 0.16) !important;
}
/* Hide the broken image wrap */
html body:not(.wp-admin) .wpee-plan-item-wrapper:has(.wpee-plan-item-credits) .wpee-plan-image-wrap {
display: none !important;
}
/* Pack title */
html body:not(.wp-admin) .wpee-plan-item-wrapper:has(.wpee-plan-item-credits) > .wpee-plan-item:not(.sh-plan-item-manual) .wpee-plan-name,
html body:not(.wp-admin) .wpee-plan-item-wrapper:has(.wpee-plan-item-credits) > .wpee-plan-item:not(.sh-plan-item-manual) .wpee-plan-name strong {
font-size: 13px !important;
font-weight: 800 !important;
color: var(--sh-text-muted) !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
margin: 0 !important;
padding: 0 !important;
}
/* Credits count — HUGE */
html body:not(.wp-admin) .wpee-plan-item-wrapper:has(.wpee-plan-item-credits) > .wpee-plan-item:not(.sh-plan-item-manual) .wpee-plan-desc.wpee-plan-credits-number {
display: block !important;
padding: 14px 0 8px !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
color: var(--sh-accent) !important;
font-size: 32px !important;
font-weight: 900 !important;
letter-spacing: -0.02em !important;
text-transform: none !important;
line-height: 1 !important;
min-height: 0 !important;
-webkit-text-fill-color: var(--sh-accent) !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
text-align: center !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Price (€12) — bold medium */
html body:not(.wp-admin) .wpee-plan-item-wrapper:has(.wpee-plan-item-credits) > .wpee-plan-item:not(.sh-plan-item-manual) .credit_price,
html body:not(.wp-admin) .wpee-plan-item-wrapper:has(.wpee-plan-item-credits) > .wpee-plan-item:not(.sh-plan-item-manual) form span[style*="130%"] {
display: block !important;
font-size: 20px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
margin: 2px 0 12px !important;
padding: 0 !important;
line-height: 1.2 !important;
letter-spacing: -0.01em !important;
text-align: center !important;
}
/* ===== MANUAL CARD internals ===== */
html body:not(.wp-admin) .sh-plan-item-manual .wpee-plan-item-inner {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
html body:not(.wp-admin) .sh-plan-item-manual .wpee-plan-item-inner > li {
display: block !important;
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
background: transparent !important;
border: 0 !important;
}
html body:not(.wp-admin) .sh-plan-item-manual .wpee-plan-item-inner > li:empty {
display: none !important;
}
html body:not(.wp-admin) .sh-plan-item-manual .purchase-credit-heading {
font-size: 20px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
letter-spacing: -0.01em !important;
margin: 0 !important;
}
html body:not(.wp-admin) .sh-plan-item-manual .purchase-credit-image { display: none !important; }
/* Hide the inline ".credit_price_change" if it renders outside the .sh-manual-output wrap
(guards against double-render on page reloads) */
html body:not(.wp-admin) .sh-plan-item-manual .wpee-plan-item-inner > li > .credit_price_change,
html body:not(.wp-admin) .sh-plan-item-manual .wpee-plan-item-form > .credit_price_change:not(.sh-manual-credits) {
display: none !important;
}
/* ZONE_Z59_END */
/* ==========================================================================
ZONE Z60 — My Activity page: fully rebuilt (stats + tabs + timeline + pagination)
========================================================================== */
/* Reset the plugin wrapper — JS rebuilds inside it */
html body:not(.wp-admin) .wpdating-history-wrapper {
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
margin: 0 !important;
}
/* Page title */
html body:not(.wp-admin) .wpdating-history-wrapper .sh-activity-heading {
font-size: 28px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
letter-spacing: -0.02em !important;
margin: 0 0 20px !important;
padding: 0 !important;
line-height: 1.2 !important;
background: none !important;
border: 0 !important;
}
/* ===== Stats row (4 tiles) ===== */
html body:not(.wp-admin) .wpdating-history-wrapper .sh-activity-stats {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
gap: 12px !important;
margin: 0 0 20px !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-stat {
display: flex !important;
align-items: center !important;
gap: 14px !important;
padding: 16px 18px !important;
background: #fff !important;
border: 1px solid var(--sh-divider) !important;
border-radius: 16px !important;
box-shadow: 0 2px 10px rgba(26, 26, 46, 0.04) !important;
transition: transform 180ms var(--sh-ease-out), box-shadow 180ms var(--sh-ease-out), border-color 180ms !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-stat:hover {
transform: translateY(-2px);
border-color: rgba(228, 81, 158, 0.28) !important;
box-shadow: 0 10px 24px rgba(228, 81, 158, 0.10) !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-stat__icon {
width: 44px !important;
height: 44px !important;
flex: 0 0 44px !important;
border-radius: 50% !important;
background: linear-gradient(135deg, #fdebf4, #eef0fa) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: var(--sh-accent) !important;
font-size: 18px !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-stat__info {
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-stat__num {
font-size: 20px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
letter-spacing: -0.02em !important;
line-height: 1.1 !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-stat__lbl {
font-size: 11px !important;
font-weight: 700 !important;
color: var(--sh-text-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
}
/* ===== Filter tabs ===== */
html body:not(.wp-admin) .wpdating-history-wrapper .sh-activity-tabs {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
padding: 6px !important;
margin: 0 0 16px !important;
background: #fff !important;
border: 1px solid var(--sh-divider) !important;
border-radius: 999px !important;
box-shadow: none !important;
filter: none !important;
width: fit-content !important;
max-width: 100% !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-activity-tabs *,
html body:not(.wp-admin) .wpdating-history-wrapper .sh-activity-tab,
html body:not(.wp-admin) .wpdating-history-wrapper .sh-activity-tab * {
box-shadow: none !important;
filter: none !important;
text-shadow: none !important;
outline: none !important;
}
/* Prevent FOUC — hide the plugin's legacy tables until JS rebuilds the page */
html body:not(.wp-admin) .wpdating-history-wrapper:not(.sh-rebuilt) {
visibility: hidden !important;
min-height: 420px !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper:not(.sh-rebuilt)::before {
content: "";
visibility: visible;
position: absolute;
inset: 0;
background: transparent;
}
html body:not(.wp-admin) .wpdating-history-wrapper.sh-rebuilt {
visibility: visible !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-activity-tab {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 9px 18px !important;
border: 0 !important;
border-radius: 999px !important;
background: transparent !important;
color: var(--sh-text-2) !important;
font-size: 13px !important;
font-weight: 700 !important;
cursor: pointer !important;
line-height: 1 !important;
transition: background 160ms, color 160ms !important;
white-space: nowrap !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-activity-tab:hover {
background: #fdebf4 !important;
color: var(--sh-accent) !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-activity-tab.is-active {
background: var(--sh-accent) !important;
color: #fff !important;
box-shadow: none !important;
filter: none !important;
text-shadow: none !important;
outline: none !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-activity-tab::before,
html body:not(.wp-admin) .wpdating-history-wrapper .sh-activity-tab::after {
content: none !important;
display: none !important;
background: none !important;
box-shadow: none !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-activity-tab:focus,
html body:not(.wp-admin) .wpdating-history-wrapper .sh-activity-tab:focus-visible,
html body:not(.wp-admin) .wpdating-history-wrapper .sh-activity-tab:active {
outline: none !important;
box-shadow: none !important;
filter: none !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-pagination .sh-page-btn.is-active {
box-shadow: none !important;
filter: none !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-activity-tab > span {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 22px !important;
height: 20px !important;
padding: 0 6px !important;
border-radius: 999px !important;
background: var(--sh-bg-soft) !important;
color: var(--sh-text-muted) !important;
font-size: 11px !important;
font-weight: 800 !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-activity-tab.is-active > span {
background: rgba(255, 255, 255, 0.25) !important;
color: #fff !important;
}
/* ===== Timeline feed ===== */
html body:not(.wp-admin) .wpdating-history-wrapper .sh-activity-feed {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
margin: 0 0 20px !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-activity-empty {
padding: 36px 24px !important;
text-align: center !important;
background: var(--sh-bg-soft) !important;
border: 1px dashed var(--sh-divider) !important;
border-radius: 16px !important;
color: var(--sh-text-muted) !important;
font-size: 13px !important;
}
/* Row card */
html body:not(.wp-admin) .wpdating-history-wrapper .sh-row {
display: grid !important;
grid-template-columns: 48px 1fr auto auto !important;
gap: 14px !important;
align-items: center !important;
padding: 14px 18px !important;
background: #fff !important;
border: 1px solid var(--sh-divider) !important;
border-radius: 16px !important;
box-shadow: 0 2px 6px rgba(26, 26, 46, 0.03) !important;
transition: transform 180ms var(--sh-ease-out), box-shadow 180ms var(--sh-ease-out), border-color 180ms !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-row:hover {
border-color: rgba(228, 81, 158, 0.26) !important;
box-shadow: 0 8px 20px rgba(228, 81, 158, 0.10) !important;
transform: translateY(-1px);
}
/* Row icons */
html body:not(.wp-admin) .wpdating-history-wrapper .sh-row__icon {
width: 48px !important;
height: 48px !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 48px !important;
font-size: 20px !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-row__icon--credit {
background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
color: #b45309 !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-row__icon--gift {
background: linear-gradient(135deg, #fdebf4, #fbcfe8) !important;
color: var(--sh-accent) !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-row__icon--gift-img {
padding: 0 !important;
background: transparent !important;
overflow: hidden !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-row__icon--gift-img img {
width: 48px !important;
height: 48px !important;
border-radius: 50% !important;
object-fit: cover !important;
display: block !important;
border: 2px solid #fff !important;
box-shadow: 0 2px 6px rgba(26, 26, 46, 0.08) !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-row__icon--wink {
background: linear-gradient(135deg, #eef0fa, #c7d2fe) !important;
color: var(--sh-primary) !important;
}
/* Row body (title, sub, date) */
html body:not(.wp-admin) .wpdating-history-wrapper .sh-row__body {
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-row__title {
font-size: 14px !important;
font-weight: 600 !important;
color: var(--sh-text) !important;
line-height: 1.3 !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-row__title strong {
font-weight: 800 !important;
color: var(--sh-accent) !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-row__title a {
color: var(--sh-accent) !important;
text-decoration: none !important;
font-weight: 700 !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-row__title a:hover { text-decoration: underline !important; }
html body:not(.wp-admin) .wpdating-history-wrapper .sh-row__sub {
font-size: 12px !important;
color: var(--sh-text-2) !important;
font-style: normal !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-row--wink .sh-row__sub {
font-style: italic !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-row__date {
font-size: 11px !important;
color: var(--sh-text-muted) !important;
margin-top: 2px !important;
}
/* Row status + action */
html body:not(.wp-admin) .wpdating-history-wrapper .sh-row__status {
display: inline-flex !important;
align-items: center !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-row__action {
display: inline-flex !important;
align-items: center !important;
}
/* Status pills */
html body:not(.wp-admin) .wpdating-history-wrapper .status-completed {
display: inline-flex !important;
align-items: center !important;
color: #16a34a !important;
background: rgba(34, 197, 94, 0.12) !important;
border: 1px solid rgba(34, 197, 94, 0.22) !important;
padding: 5px 12px !important;
border-radius: 999px !important;
font-size: 11px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
min-width: 0 !important;
line-height: 1 !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .status-pending {
display: inline-flex !important;
align-items: center !important;
color: #b45309 !important;
background: rgba(245, 158, 11, 0.14) !important;
border: 1px solid rgba(245, 158, 11, 0.26) !important;
padding: 5px 12px !important;
border-radius: 999px !important;
font-size: 11px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
min-width: 0 !important;
line-height: 1 !important;
}
/* Download invoice */
html body:not(.wp-admin) .wpdating-history-wrapper .download-invoice-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
background: #fdebf4 !important;
border: 1px solid rgba(228, 81, 158, 0.28) !important;
color: var(--sh-accent) !important;
transition: background 180ms, transform 180ms, box-shadow 180ms !important;
text-decoration: none !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .download-invoice-link:hover {
background: var(--sh-accent) !important;
color: #fff !important;
border-color: var(--sh-accent) !important;
transform: translateY(-1px);
box-shadow: 0 8px 16px rgba(228, 81, 158, 0.30) !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .download-invoice-link svg {
width: 18px !important;
height: 18px !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .no-invoice {
color: var(--sh-text-muted) !important;
font-size: 16px !important;
display: inline-flex !important;
justify-content: center !important;
width: 40px !important;
}
/* ===== Pagination ===== */
html body:not(.wp-admin) .wpdating-history-wrapper .sh-activity-pagination {
display: flex !important;
justify-content: center !important;
margin: 0 !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-pagination {
display: inline-flex !important;
gap: 4px !important;
padding: 6px !important;
background: #fff !important;
border: 1px solid var(--sh-divider) !important;
border-radius: 999px !important;
box-shadow: 0 2px 8px rgba(26, 26, 46, 0.04) !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-page-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 34px !important;
height: 34px !important;
padding: 0 10px !important;
border: 0 !important;
border-radius: 999px !important;
background: transparent !important;
color: var(--sh-text-2) !important;
font-size: 13px !important;
font-weight: 700 !important;
cursor: pointer !important;
transition: background 160ms, color 160ms !important;
line-height: 1 !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-page-btn:hover:not([disabled]) {
background: #fdebf4 !important;
color: var(--sh-accent) !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-page-btn.is-active {
background: var(--sh-accent) !important;
color: #fff !important;
box-shadow: 0 4px 10px rgba(228, 81, 158, 0.28) !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-page-btn[disabled] {
opacity: 0.35 !important;
cursor: not-allowed !important;
}
/* Mobile */
@media (max-width: 600px) {
html body:not(.wp-admin) .wpdating-history-wrapper .sh-row {
grid-template-columns: 48px 1fr !important;
grid-auto-flow: row !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-row__status {
grid-column: 2 !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-row__action {
grid-column: 2 !important;
justify-self: start !important;
}
}
/* ZONE_Z60_END */
/* ==========================================================================
ZONE Z61 — Final nuke of any glow/shadow on activity tabs (max specificity)
========================================================================== */
html body:not(.wp-admin) .wpdating-history-wrapper .sh-activity-tabs,
html body:not(.wp-admin) .wpdating-history-wrapper .sh-activity-tabs *,
html body:not(.wp-admin) .wpdating-history-wrapper button.sh-activity-tab,
html body:not(.wp-admin) .wpdating-history-wrapper button.sh-activity-tab.is-active,
html body:not(.wp-admin) .wpdating-history-wrapper button.sh-activity-tab:hover,
html body:not(.wp-admin) .wpdating-history-wrapper button.sh-activity-tab:focus,
html body:not(.wp-admin) .wpdating-history-wrapper button.sh-activity-tab:focus-visible,
html body:not(.wp-admin) .wpdating-history-wrapper button.sh-activity-tab:active,
html body:not(.wp-admin) .wpdating-history-wrapper button.sh-activity-tab > span {
box-shadow: none !important;
-webkit-box-shadow: none !important;
filter: none !important;
-webkit-filter: none !important;
text-shadow: none !important;
outline: 0 !important;
outline-offset: 0 !important;
}
/* Also clean up pagination pills */
html body:not(.wp-admin) .wpdating-history-wrapper .sh-pagination,
html body:not(.wp-admin) .wpdating-history-wrapper .sh-pagination *,
html body:not(.wp-admin) .wpdating-history-wrapper button.sh-page-btn,
html body:not(.wp-admin) .wpdating-history-wrapper button.sh-page-btn.is-active,
html body:not(.wp-admin) .wpdating-history-wrapper button.sh-page-btn:focus,
html body:not(.wp-admin) .wpdating-history-wrapper button.sh-page-btn:active {
box-shadow: none !important;
-webkit-box-shadow: none !important;
filter: none !important;
-webkit-filter: none !important;
outline: 0 !important;
}
/* ZONE_Z61_END */
/* ==========================================================================
ZONE Z62 — Wink popup polish (title, select, send button, no glow)
========================================================================== */
html body:not(.wp-admin) .wink-popup-wrapper .wink-popup-title,
html body:not(.wp-admin) .wink-popup-wrapper .popup-title,
html body:not(.wp-admin) .popup-wrapper .popup-title,
html body:not(.wp-admin) .popup-wrapper h6.popup-title {
font-size: 18px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
text-align: center !important;
margin: 0 0 18px !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
-webkit-text-fill-color: var(--sh-text) !important;
letter-spacing: -0.01em !important;
}
html body:not(.wp-admin) .wink-popup-wrapper .send-wink-popup-form,
html body:not(.wp-admin) .wink-popup-wrapper .popup-form {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
margin: 0 !important;
padding: 0 !important;
}
html body:not(.wp-admin) .wink-popup-wrapper .send-wink-popup-form .form-group {
margin: 0 !important;
padding: 0 !important;
}
html body:not(.wp-admin) .wink-popup-wrapper .send-wink-popup-form label {
display: block !important;
font-size: 11px !important;
font-weight: 800 !important;
color: var(--sh-text-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
margin: 0 0 6px !important;
}
html body:not(.wp-admin) .wink-popup-wrapper .send-wink-popup-form label:empty::before {
content: "Pick a wink";
}
html body:not(.wp-admin) .wink-popup-wrapper .send-wink-popup-form select,
html body:not(.wp-admin) .wink-popup-wrapper #wink_id {
width: 100% !important;
padding: 12px 40px 12px 18px !important;
border-radius: 999px !important;
border: 1.5px solid var(--sh-divider) !important;
background: #fff !important;
color: var(--sh-text) !important;
font-size: 14px !important;
font-weight: 600 !important;
min-height: 46px !important;
cursor: pointer !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
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'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%234a4a5e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 16px center !important;
background-size: 12px 8px !important;
transition: border-color 180ms var(--sh-ease-out), box-shadow 180ms !important;
box-shadow: none !important;
}
html body:not(.wp-admin) .wink-popup-wrapper .send-wink-popup-form select:focus {
border-color: var(--sh-accent) !important;
box-shadow: 0 0 0 4px rgba(228, 81, 158, 0.12) !important;
outline: none !important;
}
html body:not(.wp-admin) .wink-popup-wrapper .send-wink-popup-form .save-button,
html body:not(.wp-admin) .wink-popup-wrapper .save-button,
html body:not(.wp-admin) .popup-wrapper .save-button {
width: 100% !important;
padding: 12px 28px !important;
background: var(--sh-accent) !important;
color: #fff !important;
border: 0 !important;
border-radius: 999px !important;
font-size: 14px !important;
font-weight: 800 !important;
letter-spacing: 0.02em !important;
cursor: pointer !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
filter: none !important;
text-shadow: none !important;
outline: 0 !important;
min-height: 44px !important;
transition: background 180ms var(--sh-ease-out), transform 180ms !important;
}
html body:not(.wp-admin) .wink-popup-wrapper .save-button:hover,
html body:not(.wp-admin) .popup-wrapper .save-button:hover {
background: var(--sh-accent-600) !important;
transform: translateY(-1px);
box-shadow: none !important;
filter: none !important;
}
html body:not(.wp-admin) .wink-popup-wrapper .save-button:focus,
html body:not(.wp-admin) .wink-popup-wrapper .save-button:focus-visible,
html body:not(.wp-admin) .wink-popup-wrapper .save-button:active {
box-shadow: none !important;
outline: 0 !important;
filter: none !important;
}
html body:not(.wp-admin) .wink-popup-wrapper .form-error-message {
display: block !important;
margin: 6px 0 0 !important;
padding: 0 !important;
font-size: 12px !important;
color: #ef4444 !important;
background: transparent !important;
border: 0 !important;
}
/* ZONE_Z62_END */
/* ==========================================================================
ZONE Z63 — Popular Members: cards grow to fill strip + no hover border
========================================================================== */
/* Container — let cards share space evenly */
html body:not(.wp-admin) .online-members-section.online-members-section--enhanced {
display: flex !important;
justify-content: space-between !important;
align-items: stretch !important;
gap: 10px !important;
overflow: visible !important;
padding: 4px 0 !important;
margin: 0 !important;
width: 100% !important;
}
/* Each card grows to fill available horizontal space */
html body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-card {
flex: 1 1 0 !important;
min-width: 0 !important;
max-width: none !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
html body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-card > a {
display: block !important;
width: 100% !important;
height: auto !important;
}
/* Inner — keep 4:5 portrait using padding-bottom hack (reliable) */
html body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-link-inner {
position: relative !important;
width: 100% !important;
height: 0 !important;
min-height: 0 !important;
padding-bottom: 125% !important;
border: 0 !important;
border-radius: 14px !important;
overflow: hidden !important;
box-shadow: 0 2px 8px rgba(26, 26, 46, 0.06) !important;
transition: transform 200ms var(--sh-ease-out), box-shadow 200ms var(--sh-ease-out) !important;
}
/* Hover — no border, just a tiny lift */
html body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-card:hover .wpee-online-member-link-inner {
border: 0 !important;
border-color: transparent !important;
transform: translateY(-2px) !important;
box-shadow: 0 10px 20px rgba(228, 81, 158, 0.14) !important;
}
/* Photo fills the inner */
html body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-photo {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
border-radius: 14px !important;
background-size: cover !important;
background-position: center !important;
}
/* Mobile: horizontal scroll with fixed card width */
@media (max-width: 560px) {
html body:not(.wp-admin) .online-members-section.online-members-section--enhanced {
flex-wrap: nowrap !important;
overflow-x: auto !important;
justify-content: flex-start !important;
}
html body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-card {
flex: 0 0 96px !important;
width: 96px !important;
}
}
/* ZONE_Z63_END */
/* ==========================================================================
ZONE Z64 — Search tabs (Basic/Advanced/Saved/Distance/Near Me) polish
========================================================================== */
/* Container card for each tab */
html body:not(.wp-admin) .wpee-search-tab .tab-content-wrapper {
background: #fff !important;
border: 1px solid var(--sh-divider) !important;
border-radius: 22px !important;
box-shadow: 0 2px 10px rgba(26, 26, 46, 0.04) !important;
padding: 26px !important;
margin: 0 0 16px !important;
}
html body:not(.wp-admin) .wpee-search-tab .tab-content-wrapper:last-child { margin-bottom: 0 !important; }
/* Section headings inside search tabs — keep but tidy (no decoration) */
html body:not(.wp-admin) .wpee-search-tab .heading-submenu {
margin: 0 0 14px !important;
padding: 0 !important;
border: 0 !important;
}
html body:not(.wp-admin) .wpee-search-tab .heading-submenu strong {
font-size: 12px !important;
font-weight: 800 !important;
color: var(--sh-text-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
background: none !important;
padding: 0 !important;
border: 0 !important;
}
html body:not(.wp-admin) .wpee-search-tab .heading-submenu::before,
html body:not(.wp-admin) .wpee-search-tab .heading-submenu::after,
html body:not(.wp-admin) .wpee-search-tab .heading-submenu strong::before,
html body:not(.wp-admin) .wpee-search-tab .heading-submenu strong::after {
content: none !important;
display: none !important;
}
/* Split sections between General and Additional Options */
html body:not(.wp-admin) .wpee-search-tab .additional-search {
margin-top: 22px !important;
padding-top: 22px !important;
border-top: 1px solid var(--sh-divider) !important;
}
/* Fieldset containers */
html body:not(.wp-admin) .wpee-search-tab .general-search,
html body:not(.wp-admin) .wpee-search-tab .additional-search,
html body:not(.wp-admin) .wpee-search-tab .advance-search-page {
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* Form layout — grid-ify .edit-profile itself; .form-inline wrappers become transparent */
html body:not(.wp-admin) .wpee-search-tab .edit-profile,
html body:not(.wp-admin) .wpee-search-tab .general-search-container {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
gap: 14px 16px !important;
align-items: start !important;
margin: 0 !important;
padding: 0 !important;
}
html body:not(.wp-admin) .wpee-search-tab .edit-profile .form-inline,
html body:not(.wp-admin) .wpee-search-tab .edit-profile .form-inline-wrap,
html body:not(.wp-admin) .wpee-search-tab .general-search-container .form-inline,
html body:not(.wp-admin) .wpee-search-tab .general-search-container .form-inline-wrap {
display: contents !important;
}
html body:not(.wp-admin) .wpee-search-tab .form-group {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
margin: 0 !important;
padding: 0 !important;
min-width: 0 !important;
}
/* Labels */
html body:not(.wp-admin) .wpee-search-tab label {
display: block !important;
font-size: 11px !important;
font-weight: 800 !important;
color: var(--sh-text-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
margin: 0 !important;
padding: 0 !important;
}
/* Inputs + selects — pill style */
html body:not(.wp-admin) .wpee-search-tab input[type="text"],
html body:not(.wp-admin) .wpee-search-tab input[type="number"],
html body:not(.wp-admin) .wpee-search-tab select {
width: 100% !important;
padding: 11px 16px !important;
padding-right: 40px !important;
border: 1.5px solid var(--sh-divider) !important;
border-radius: 999px !important;
background: #fff !important;
color: var(--sh-text) !important;
font-size: 14px !important;
font-weight: 500 !important;
min-height: 44px !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
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'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%234a4a5e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 16px center !important;
background-size: 12px 8px !important;
box-shadow: none !important;
transition: border-color 180ms, box-shadow 180ms !important;
}
html body:not(.wp-admin) .wpee-search-tab input[type="text"],
html body:not(.wp-admin) .wpee-search-tab input[type="number"] {
background-image: none !important;
padding-right: 16px !important;
}
html body:not(.wp-admin) .wpee-search-tab input:focus,
html body:not(.wp-admin) .wpee-search-tab select:focus {
border-color: var(--sh-accent) !important;
box-shadow: 0 0 0 4px rgba(228, 81, 158, 0.12) !important;
outline: none !important;
}
/* Age range — two selects side by side, span 2 parent columns */
html body:not(.wp-admin) .wpee-search-tab .form-group.age-field {
grid-column: span 2 !important;
display: grid !important;
grid-template-columns: 1fr auto 1fr !important;
grid-template-rows: auto auto !important;
gap: 6px 10px !important;
align-items: center !important;
}
html body:not(.wp-admin) .wpee-search-tab .form-group.age-field > label {
grid-column: 1 / -1 !important;
grid-row: 1 !important;
margin: 0 !important;
}
html body:not(.wp-admin) .wpee-search-tab .form-group.age-field select[name="age_from"] {
grid-column: 1 !important;
grid-row: 2 !important;
}
html body:not(.wp-admin) .wpee-search-tab .form-group.age-field::after {
content: "to";
grid-column: 2 !important;
grid-row: 2 !important;
color: var(--sh-text-muted);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 0 4px;
}
html body:not(.wp-admin) .wpee-search-tab .form-group.age-field select[name="age_to"] {
grid-column: 3 !important;
grid-row: 2 !important;
}
/* Save-search — always full width */
html body:not(.wp-admin) .wpee-search-tab .form-group.save-search {
grid-column: 1 / -1 !important;
}
/* Submit button row — full width, centered */
html body:not(.wp-admin) .wpee-search-tab .form-group:has(> input[type="submit"]) {
grid-column: 1 / -1 !important;
}
/* Save search checkbox row */
html body:not(.wp-admin) .wpee-search-tab .form-group.save-search {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 10px !important;
padding: 14px 16px !important;
background: var(--sh-bg-soft) !important;
border: 1px dashed var(--sh-divider) !important;
border-radius: 14px !important;
margin: 14px 0 0 !important;
}
html body:not(.wp-admin) .wpee-search-tab .form-group.save-search > label {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
margin: 0 !important;
text-transform: none !important;
font-size: 13px !important;
font-weight: 700 !important;
color: var(--sh-text) !important;
letter-spacing: 0 !important;
cursor: pointer !important;
}
html body:not(.wp-admin) .wpee-search-tab .form-group.save-search input[type="checkbox"] {
width: 18px !important;
height: 18px !important;
accent-color: var(--sh-accent) !important;
margin: 0 !important;
cursor: pointer !important;
}
html body:not(.wp-admin) .wpee-search-tab .form-group.save-search input[type="text"] {
flex: 1 1 260px !important;
min-width: 200px !important;
}
/* Submit button — pink pill, full-width row */
html body:not(.wp-admin) .wpee-search-tab input[type="submit"].dsp_submit_button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 13px 36px !important;
background: var(--sh-accent) !important;
color: #fff !important;
border: 0 !important;
border-radius: 999px !important;
font-size: 14px !important;
font-weight: 800 !important;
letter-spacing: 0.02em !important;
cursor: pointer !important;
margin: 18px 0 0 !important;
min-height: 46px !important;
min-width: 200px !important;
box-shadow: none !important;
filter: none !important;
text-shadow: none !important;
transition: background 180ms, transform 180ms !important;
}
html body:not(.wp-admin) .wpee-search-tab input[type="submit"].dsp_submit_button:hover {
background: var(--sh-accent-600) !important;
transform: translateY(-1px);
box-shadow: none !important;
}
html body:not(.wp-admin) .wpee-search-tab .form-group:has(> input[type="submit"]) {
align-items: center !important;
text-align: center !important;
display: block !important;
}
/* Advanced search accordion panels */
html body:not(.wp-admin) .wpee-search-tab .panel-group {
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
html body:not(.wp-admin) .wpee-search-tab .panel-group .panel,
html body:not(.wp-admin) .wpee-search-tab .panel-group .panel-default {
border: 1px solid var(--sh-divider) !important;
border-radius: 14px !important;
box-shadow: none !important;
background: #fff !important;
overflow: hidden !important;
}
html body:not(.wp-admin) .wpee-search-tab .panel-heading {
padding: 0 !important;
background: #fff !important;
border: 0 !important;
}
html body:not(.wp-admin) .wpee-search-tab .panel-heading .panel-title {
margin: 0 !important;
}
html body:not(.wp-admin) .wpee-search-tab .panel-heading .panel-title > a {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 14px 18px !important;
text-decoration: none !important;
color: var(--sh-text) !important;
font-weight: 700 !important;
font-size: 14px !important;
transition: background 180ms !important;
}
html body:not(.wp-admin) .wpee-search-tab .panel-heading .panel-title > a:hover {
background: var(--sh-bg-soft) !important;
}
html body:not(.wp-admin) .wpee-search-tab .panel-title-toggle {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
}
html body:not(.wp-admin) .wpee-search-tab .panel-title-toggle strong {
font-weight: 700 !important;
color: var(--sh-text) !important;
font-size: 14px !important;
}
html body:not(.wp-admin) .wpee-search-tab .panel-title-toggle .icon-plus {
width: 22px !important;
height: 22px !important;
border-radius: 50% !important;
background: #fdebf4 !important;
color: var(--sh-accent) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
position: relative !important;
}
html body:not(.wp-admin) .wpee-search-tab .panel-title-toggle .icon-plus::before {
content: "+" !important;
font-size: 16px !important;
font-weight: 800 !important;
line-height: 1 !important;
}
html body:not(.wp-admin) .wpee-search-tab .panel-body {
padding: 14px 18px 18px !important;
border-top: 1px solid var(--sh-divider) !important;
background: var(--sh-bg-soft) !important;
}
html body:not(.wp-admin) .wpee-search-tab .option-btn-adv {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
gap: 8px !important;
margin: 0 !important;
}
html body:not(.wp-admin) .wpee-search-tab .option-btn-adv > div {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 10px 14px !important;
background: #fff !important;
border: 1px solid var(--sh-divider) !important;
border-radius: 999px !important;
font-size: 13px !important;
color: var(--sh-text) !important;
cursor: pointer !important;
transition: border-color 180ms, background 180ms !important;
}
html body:not(.wp-admin) .wpee-search-tab .option-btn-adv > div:hover {
border-color: var(--sh-accent) !important;
background: #fdebf4 !important;
}
html body:not(.wp-admin) .wpee-search-tab .option-btn-adv input[type="checkbox"] {
width: 16px !important;
height: 16px !important;
accent-color: var(--sh-accent) !important;
margin: 0 !important;
}
/* Empty states — Saved Searches, Near Me */
html body:not(.wp-admin) .wpee-search-tab .tab-content-wrapper .box-border,
html body:not(.wp-admin) .wpee-search-tab .tab-content-wrapper .box-pedding {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
html body:not(.wp-admin) .wpee-search-tab .tab-content-wrapper:has(> .box-border > .box-pedding > .heading-submenu:only-child),
html body:not(.wp-admin) .wpee-search-tab .tab-content-wrapper:has(.near-me-message) {
padding: 48px 28px !important;
text-align: center !important;
}
html body:not(.wp-admin) .wpee-search-tab .heading-submenu strong:only-child {
display: block !important;
font-size: 15px !important;
color: var(--sh-text-muted) !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-weight: 600 !important;
}
/* Near Me message */
html body:not(.wp-admin) .wpee-search-tab .near-me-message {
text-align: center !important;
font-size: 14px !important;
color: var(--sh-text-2) !important;
padding: 28px 20px !important;
margin: 0 !important;
background: var(--sh-bg-soft) !important;
border: 1px dashed var(--sh-divider) !important;
border-radius: 16px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 12px !important;
}
html body:not(.wp-admin) .wpee-search-tab .near-me-message a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 10px 22px !important;
background: var(--sh-accent) !important;
color: #fff !important;
border-radius: 999px !important;
font-weight: 700 !important;
font-size: 13px !important;
text-decoration: none !important;
box-shadow: none !important;
transition: background 180ms !important;
}
html body:not(.wp-admin) .wpee-search-tab .near-me-message a:hover {
background: var(--sh-accent-600) !important;
}
/* Distance search zip-list */
html body:not(.wp-admin) .wpee-search-tab ul.zip-search {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
}
html body:not(.wp-admin) .wpee-search-tab ul.zip-search > li {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
}
html body:not(.wp-admin) .wpee-search-tab ul.zip-search .dspdp-form-group {
display: grid !important;
grid-template-columns: 140px 1fr !important;
gap: 12px !important;
align-items: center !important;
padding: 0 !important;
margin: 0 !important;
}
html body:not(.wp-admin) .wpee-search-tab ul.zip-search .dspdp-col-sm-3,
html body:not(.wp-admin) .wpee-search-tab ul.zip-search .dsp-sm-3,
html body:not(.wp-admin) .wpee-search-tab ul.zip-search .dspdp-control-label {
width: auto !important;
padding: 0 !important;
font-size: 11px !important;
font-weight: 800 !important;
color: var(--sh-text-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
float: none !important;
}
html body:not(.wp-admin) .wpee-search-tab ul.zip-search .dspdp-col-sm-5,
html body:not(.wp-admin) .wpee-search-tab ul.zip-search .dsp-sm-5,
html body:not(.wp-admin) .wpee-search-tab ul.zip-search .dspdp-col-sm-2,
html body:not(.wp-admin) .wpee-search-tab ul.zip-search .dspdp-col-sm-6,
html body:not(.wp-admin) .wpee-search-tab ul.zip-search .dspdp-col-sm-offset-3 {
width: auto !important;
padding: 0 !important;
margin: 0 !important;
float: none !important;
display: block !important;
}
/* Isolate Bootstrap CDN interference — force our inputs back */
html body:not(.wp-admin) .wpee-search-tab .dspdp-form-control,
html body:not(.wp-admin) .wpee-search-tab .dsp-form-control {
height: auto !important;
line-height: 1.5 !important;
box-shadow: none !important;
}
/* Responsive */
@media (max-width: 640px) {
html body:not(.wp-admin) .wpee-search-tab .tab-content-wrapper {
padding: 20px 18px !important;
}
html body:not(.wp-admin) .wpee-search-tab .form-group.age-field {
grid-template-columns: 1fr 1fr !important;
}
html body:not(.wp-admin) .wpee-search-tab .form-group.age-field > label {
grid-column: 1 / -1 !important;
}
html body:not(.wp-admin) .wpee-search-tab .form-group.age-field::after {
display: none !important;
}
html body:not(.wp-admin) .wpee-search-tab ul.zip-search .dspdp-form-group {
grid-template-columns: 1fr !important;
}
}
/* ZONE_Z64_END */
/* ==========================================================================
ZONE Z65 — Search tabs: cleaner switcher + clearer form structure
========================================================================== */
/* ===== Search tab switcher — modern pill navbar ===== */
html body:not(.wp-admin) .wpee-search-tab > ul.profile-section-tab {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
list-style: none !important;
padding: 6px !important;
margin: 0 0 18px !important;
background: #fff !important;
border: 1px solid var(--sh-divider) !important;
border-radius: 999px !important;
box-shadow: none !important;
width: fit-content !important;
max-width: 100% !important;
}
html body:not(.wp-admin) .wpee-search-tab > ul.profile-section-tab > li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
html body:not(.wp-admin) .wpee-search-tab > ul.profile-section-tab > li > a {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 10px 18px !important;
border: 0 !important;
border-radius: 999px !important;
background: transparent !important;
color: var(--sh-text-2) !important;
font-size: 13px !important;
font-weight: 700 !important;
text-decoration: none !important;
line-height: 1 !important;
letter-spacing: 0 !important;
text-transform: none !important;
transition: background 160ms, color 160ms !important;
white-space: nowrap !important;
box-shadow: none !important;
}
html body:not(.wp-admin) .wpee-search-tab > ul.profile-section-tab > li > a:hover {
background: #fdebf4 !important;
color: var(--sh-accent) !important;
}
html body:not(.wp-admin) .wpee-search-tab > ul.profile-section-tab > li.active > a,
html body:not(.wp-admin) .wpee-search-tab > ul.profile-section-tab > li.current-menu-item > a {
background: var(--sh-accent) !important;
color: #fff !important;
box-shadow: none !important;
filter: none !important;
}
/* Scroll on mobile */
@media (max-width: 720px) {
html body:not(.wp-admin) .wpee-search-tab > ul.profile-section-tab {
flex-wrap: nowrap !important;
overflow-x: auto !important;
scrollbar-width: thin;
}
}
/* ===== Form structure — grouped sections with clearer hierarchy ===== */
/* Each section = grey section card with a tinted heading strip */
html body:not(.wp-admin) .wpee-search-tab .general-search,
html body:not(.wp-admin) .wpee-search-tab .additional-search,
html body:not(.wp-admin) .wpee-search-tab .advance-search-page {
background: var(--sh-bg-soft) !important;
border: 1px solid var(--sh-divider) !important;
border-radius: 18px !important;
padding: 22px 24px !important;
margin: 0 0 16px !important;
}
html body:not(.wp-admin) .wpee-search-tab .additional-search {
border-top: 1px solid var(--sh-divider) !important;
margin-top: 0 !important;
padding-top: 22px !important;
}
/* Override the section card heading to be more prominent */
html body:not(.wp-admin) .wpee-search-tab .general-search > .heading-submenu,
html body:not(.wp-admin) .wpee-search-tab .additional-search > .heading-submenu,
html body:not(.wp-admin) .wpee-search-tab .advance-search-page > .heading-submenu {
margin: 0 0 16px !important;
padding: 0 0 12px !important;
border-bottom: 1px solid var(--sh-divider) !important;
}
html body:not(.wp-admin) .wpee-search-tab .general-search > .heading-submenu strong,
html body:not(.wp-admin) .wpee-search-tab .additional-search > .heading-submenu strong,
html body:not(.wp-admin) .wpee-search-tab .advance-search-page > .heading-submenu strong {
display: flex !important;
align-items: center !important;
gap: 10px !important;
font-size: 13px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
}
/* Hide .dsp-none headings (plugin's display:none cleanup) */
html body:not(.wp-admin) .wpee-search-tab .heading-submenu.dsp-none {
display: none !important;
}
/* Force inner .edit-profile to sit inside section card cleanly */
html body:not(.wp-admin) .wpee-search-tab .general-search .edit-profile,
html body:not(.wp-admin) .wpee-search-tab .additional-search .edit-profile,
html body:not(.wp-admin) .wpee-search-tab .advance-search-page .edit-profile {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
/* Inputs inside section — white bg for contrast against grey section */
html body:not(.wp-admin) .wpee-search-tab .general-search input[type="text"],
html body:not(.wp-admin) .wpee-search-tab .general-search input[type="number"],
html body:not(.wp-admin) .wpee-search-tab .general-search select,
html body:not(.wp-admin) .wpee-search-tab .additional-search input[type="text"],
html body:not(.wp-admin) .wpee-search-tab .additional-search select,
html body:not(.wp-admin) .wpee-search-tab .advance-search-page input[type="text"],
html body:not(.wp-admin) .wpee-search-tab .advance-search-page select {
background-color: #fff !important;
}
/* Save-search — lighter inside already-grey section */
html body:not(.wp-admin) .wpee-search-tab .form-group.save-search {
background: #fff !important;
border: 1px dashed rgba(228, 81, 158, 0.28) !important;
}
/* Submit button container — sits outside sections */
html body:not(.wp-admin) .wpee-search-tab form > .form-group:has(> input[type="submit"]) {
margin: 22px 0 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
text-align: center !important;
display: block !important;
}
html body:not(.wp-admin) .wpee-search-tab form > input[type="submit"] {
display: block !important;
margin: 22px auto 0 !important;
}
/* ZONE_Z65_END */
/* ==========================================================================
ZONE Z66 — Universal pill switcher + edit-profile / friends polish
========================================================================== */
/* ===== Universal pill tab switcher — applies on Edit Profile, Friends, etc. ===== */
html body:not(.wp-admin) .profile-section-wrap.main-profile-mid-wrapper > ul.profile-section-tab,
html body:not(.wp-admin) .profile-section-wrap > ul.profile-section-tab.wpee-friends-profile-section-tab {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
list-style: none !important;
padding: 6px !important;
margin: 0 0 18px !important;
background: #fff !important;
border: 1px solid var(--sh-divider) !important;
border-radius: 999px !important;
box-shadow: none !important;
width: fit-content !important;
max-width: 100% !important;
}
html body:not(.wp-admin) .profile-section-wrap.main-profile-mid-wrapper > ul.profile-section-tab > li,
html body:not(.wp-admin) .profile-section-wrap > ul.profile-section-tab.wpee-friends-profile-section-tab > li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
html body:not(.wp-admin) .profile-section-wrap.main-profile-mid-wrapper > ul.profile-section-tab > li > a,
html body:not(.wp-admin) .profile-section-wrap > ul.profile-section-tab.wpee-friends-profile-section-tab > li > a {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 10px 18px !important;
border: 0 !important;
border-radius: 999px !important;
background: transparent !important;
color: var(--sh-text-2) !important;
font-size: 13px !important;
font-weight: 700 !important;
text-decoration: none !important;
line-height: 1 !important;
letter-spacing: 0 !important;
text-transform: none !important;
transition: background 160ms, color 160ms !important;
white-space: nowrap !important;
box-shadow: none !important;
}
html body:not(.wp-admin) .profile-section-wrap.main-profile-mid-wrapper > ul.profile-section-tab > li > a > i,
html body:not(.wp-admin) .profile-section-wrap > ul.profile-section-tab.wpee-friends-profile-section-tab > li > a > i {
font-size: 12px !important;
color: inherit !important;
}
html body:not(.wp-admin) .profile-section-wrap.main-profile-mid-wrapper > ul.profile-section-tab > li > a:hover,
html body:not(.wp-admin) .profile-section-wrap > ul.profile-section-tab.wpee-friends-profile-section-tab > li > a:hover {
background: #fdebf4 !important;
color: var(--sh-accent) !important;
}
html body:not(.wp-admin) .profile-section-wrap.main-profile-mid-wrapper > ul.profile-section-tab > li.active > a,
html body:not(.wp-admin) .profile-section-wrap > ul.profile-section-tab.wpee-friends-profile-section-tab > li.active > a {
background: var(--sh-accent) !important;
color: #fff !important;
box-shadow: none !important;
filter: none !important;
}
/* Mobile scroll */
@media (max-width: 720px) {
html body:not(.wp-admin) .profile-section-wrap.main-profile-mid-wrapper > ul.profile-section-tab,
html body:not(.wp-admin) .profile-section-wrap > ul.profile-section-tab.wpee-friends-profile-section-tab {
flex-wrap: nowrap !important;
overflow-x: auto !important;
scrollbar-width: thin;
}
}
/* ===== Edit Profile — section cards ===== */
html body:not(.wp-admin) .wpee-edit-profile-inner {
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
html body:not(.wp-admin) .wpee-edit-profile-inner > form {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
padding: 0 !important;
margin: 0 !important;
}
html body:not(.wp-admin) .wpee-edit-profile-inner .wpee-edit-profile-form {
background: #fff !important;
border: 1px solid var(--sh-divider) !important;
border-radius: 22px !important;
box-shadow: 0 2px 10px rgba(26, 26, 46, 0.04) !important;
padding: 24px 26px !important;
margin: 0 !important;
}
/* Section title */
html body:not(.wp-admin) .wpee-edit-profile-form > .heading-submenu {
margin: 0 0 16px !important;
padding: 0 0 12px !important;
border-bottom: 1px solid var(--sh-divider) !important;
font-size: 13px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
background: none !important;
}
html body:not(.wp-admin) .wpee-edit-profile-form > .heading-submenu strong {
font-size: 13px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
}
html body:not(.wp-admin) .wpee-edit-profile-form > .heading-submenu::before,
html body:not(.wp-admin) .wpee-edit-profile-form > .heading-submenu::after,
html body:not(.wp-admin) .wpee-edit-profile-form > .heading-submenu strong::before,
html body:not(.wp-admin) .wpee-edit-profile-form > .heading-submenu strong::after {
content: none !important;
display: none !important;
}
/* Grid for fields inside edit-profile section */
html body:not(.wp-admin) .wpee-edit-profile-form .edit-profile,
html body:not(.wp-admin) .wpee-edit-profile-form .wpee-question {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
gap: 14px 16px !important;
align-items: start !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
}
html body:not(.wp-admin) .wpee-edit-profile-form .edit-profile .form-inline,
html body:not(.wp-admin) .wpee-edit-profile-form .edit-profile .form-inline-wrap {
display: contents !important;
}
html body:not(.wp-admin) .wpee-edit-profile-form .form-group {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
margin: 0 !important;
padding: 0 !important;
min-width: 0 !important;
}
/* Labels */
html body:not(.wp-admin) .wpee-edit-profile-form label {
display: block !important;
font-size: 11px !important;
font-weight: 800 !important;
color: var(--sh-text-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
margin: 0 !important;
}
html body:not(.wp-admin) .wpee-edit-profile-form .wpee-mandatory-input {
color: var(--sh-accent) !important;
font-weight: 800 !important;
margin-left: 3px !important;
}
/* Inputs + selects — pill */
html body:not(.wp-admin) .wpee-edit-profile-form input[type="text"],
html body:not(.wp-admin) .wpee-edit-profile-form input[type="email"],
html body:not(.wp-admin) .wpee-edit-profile-form input[type="number"],
html body:not(.wp-admin) .wpee-edit-profile-form select,
html body:not(.wp-admin) .wpee-edit-profile-form input[type="file"] {
width: 100% !important;
padding: 11px 16px !important;
padding-right: 40px !important;
border: 1.5px solid var(--sh-divider) !important;
border-radius: 999px !important;
background: #fff !important;
color: var(--sh-text) !important;
font-size: 14px !important;
font-weight: 500 !important;
min-height: 44px !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
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'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%234a4a5e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 16px center !important;
background-size: 12px 8px !important;
box-shadow: none !important;
transition: border-color 180ms, box-shadow 180ms !important;
}
html body:not(.wp-admin) .wpee-edit-profile-form input[type="text"],
html body:not(.wp-admin) .wpee-edit-profile-form input[type="email"],
html body:not(.wp-admin) .wpee-edit-profile-form input[type="number"],
html body:not(.wp-admin) .wpee-edit-profile-form input[type="file"] {
background-image: none !important;
padding-right: 16px !important;
}
html body:not(.wp-admin) .wpee-edit-profile-form input:focus,
html body:not(.wp-admin) .wpee-edit-profile-form select:focus,
html body:not(.wp-admin) .wpee-edit-profile-form textarea:focus {
border-color: var(--sh-accent) !important;
box-shadow: 0 0 0 4px rgba(228, 81, 158, 0.12) !important;
outline: none !important;
}
html body:not(.wp-admin) .wpee-edit-profile-form select:disabled {
background-color: var(--sh-bg-soft) !important;
opacity: 0.7 !important;
cursor: not-allowed !important;
}
/* Textareas */
html body:not(.wp-admin) .wpee-edit-profile-form textarea {
width: 100% !important;
padding: 14px 16px !important;
border: 1.5px solid var(--sh-divider) !important;
border-radius: 16px !important;
background: #fff !important;
color: var(--sh-text) !important;
font-size: 14px !important;
font-family: inherit !important;
min-height: 120px !important;
resize: vertical !important;
transition: border-color 180ms, box-shadow 180ms !important;
box-shadow: none !important;
}
/* Textarea form-groups span full width */
html body:not(.wp-admin) .wpee-edit-profile-form .wpee-question > .form-group:has(> textarea) {
grid-column: 1 / -1 !important;
}
/* Age (date of birth) — 3 selects on one row */
html body:not(.wp-admin) .wpee-edit-profile-form .form-outer-group {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
grid-column: span 2 !important;
min-width: 0 !important;
}
html body:not(.wp-admin) .wpee-edit-profile-form .form-outer-group > label {
margin: 0 !important;
}
html body:not(.wp-admin) .wpee-edit-profile-form .form-outer-group .age-group {
display: grid !important;
grid-template-columns: 1.3fr 0.8fr 1fr !important;
gap: 8px !important;
}
html body:not(.wp-admin) .wpee-edit-profile-form .form-outer-group .age-group .form-group {
margin: 0 !important;
}
/* Make Private checkbox row */
html body:not(.wp-admin) .wpee-edit-profile-form .form-group.d-flex.align-center {
grid-column: 1 / -1 !important;
flex-direction: row !important;
align-items: center !important;
gap: 10px !important;
padding: 14px 16px !important;
background: var(--sh-bg-soft) !important;
border: 1px dashed var(--sh-divider) !important;
border-radius: 14px !important;
margin: 8px 0 0 !important;
}
html body:not(.wp-admin) .wpee-edit-profile-form .form-group.d-flex.align-center input[type="checkbox"] {
width: 18px !important;
height: 18px !important;
accent-color: var(--sh-accent) !important;
margin: 0 !important;
}
html body:not(.wp-admin) .wpee-edit-profile-form .form-group.d-flex.align-center span {
font-size: 13px !important;
font-weight: 700 !important;
color: var(--sh-text) !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
/* Photo section */
html body:not(.wp-admin) .wpee-edit-profile-form .image-edit-profile {
display: grid !important;
grid-template-columns: 120px 1fr !important;
gap: 18px !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
}
html body:not(.wp-admin) .wpee-edit-profile-form .image-edit-profile .form-group:first-child {
grid-column: 1 !important;
}
html body:not(.wp-admin) .wpee-edit-profile-form .image-edit-profile img#photo_preview {
width: 120px !important;
height: 120px !important;
border-radius: 50% !important;
object-fit: cover !important;
border: 3px solid #fff !important;
box-shadow: 0 4px 16px rgba(228, 81, 158, 0.14) !important;
}
html body:not(.wp-admin) .wpee-edit-profile-form .image-edit-profile .form-group:last-child {
grid-column: 2 !important;
}
/* Submit button — pink pill, right-aligned */
html body:not(.wp-admin) .wpee-edit-profile-form input[type="submit"].dsp_submit_button,
html body:not(.wp-admin) .wpee-edit-profile-form input[type="submit"] {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 13px 36px !important;
background: var(--sh-accent) !important;
color: #fff !important;
border: 0 !important;
border-radius: 999px !important;
font-size: 14px !important;
font-weight: 800 !important;
cursor: pointer !important;
min-height: 46px !important;
min-width: 160px !important;
box-shadow: none !important;
filter: none !important;
text-shadow: none !important;
transition: background 180ms, transform 180ms !important;
}
html body:not(.wp-admin) .wpee-edit-profile-form input[type="submit"]:hover {
background: var(--sh-accent-600) !important;
transform: translateY(-1px);
}
/* ===== Friends / Friend Request / Favourites — empty state ===== */
html body:not(.wp-admin) .profile-section-wrap:has(.wpee-friends-profile-section-tab) .profile-section-content {
background: transparent !important;
padding: 0 !important;
}
html body:not(.wp-admin) #m_list_friend_request .box-border,
html body:not(.wp-admin) #m_list_friend_request .box-pedding {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
html body:not(.wp-admin) #m_list_friend_request .page-not-found {
padding: 48px 24px !important;
text-align: center !important;
background: var(--sh-bg-soft) !important;
border: 1px dashed var(--sh-divider) !important;
border-radius: 18px !important;
color: var(--sh-text-muted) !important;
font-size: 14px !important;
font-weight: 500 !important;
}
html body:not(.wp-admin) #m_list_friend_request .page-not-found .dsp_span_pointer,
html body:not(.wp-admin) #m_list_friend_request .page-not-found span {
display: block !important;
font-weight: 600 !important;
color: var(--sh-text-2) !important;
font-size: 14px !important;
}
/* ZONE_Z66_END */
/* ==========================================================================
ZONE Z67 — Profile actions row fix + Messages page polish
========================================================================== */
/* Force actions row horizontal no matter what — children can't go full-width */
html body:not(.wp-admin) .wpee-datebook-profile-top .wpee-datebook-actions {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
width: 100% !important;
margin: 4px 0 0 !important;
}
html body:not(.wp-admin) .wpee-datebook-profile-top .wpee-datebook-actions > * {
flex: 0 0 auto !important;
width: auto !important;
max-width: 100% !important;
}
html body:not(.wp-admin) .wpee-datebook-profile-top .wpee-datebook-actions > style {
display: none !important;
}
html body:not(.wp-admin) .wpee-datebook-profile-top .wpee-datebook-actions .wpee-friend-request,
html body:not(.wp-admin) .wpee-datebook-profile-top .wpee-datebook-actions .wpee-block-user {
display: inline-flex !important;
align-items: center !important;
flex: 0 0 auto !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* ===== MESSAGES PAGE ===== */
/* Tab switcher — pill style (parent is .main-profile-mid-wrapper without .profile-section-wrap) */
html body:not(.wp-admin) .main-profile-mid-wrapper > ul.profile-section-tab {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
list-style: none !important;
padding: 6px !important;
margin: 0 0 18px !important;
background: #fff !important;
border: 1px solid var(--sh-divider) !important;
border-radius: 999px !important;
box-shadow: none !important;
width: fit-content !important;
max-width: 100% !important;
}
html body:not(.wp-admin) .main-profile-mid-wrapper > ul.profile-section-tab > li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
html body:not(.wp-admin) .main-profile-mid-wrapper > ul.profile-section-tab > li > a {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 10px 18px !important;
border: 0 !important;
border-radius: 999px !important;
background: transparent !important;
color: var(--sh-text-2) !important;
font-size: 13px !important;
font-weight: 700 !important;
text-decoration: none !important;
line-height: 1 !important;
white-space: nowrap !important;
transition: background 160ms, color 160ms !important;
box-shadow: none !important;
}
html body:not(.wp-admin) .main-profile-mid-wrapper > ul.profile-section-tab > li > a:hover {
background: #fdebf4 !important;
color: var(--sh-accent) !important;
}
html body:not(.wp-admin) .main-profile-mid-wrapper > ul.profile-section-tab > li.active > a {
background: var(--sh-accent) !important;
color: #fff !important;
box-shadow: none !important;
}
/* Messages container — card */
html body:not(.wp-admin) .main-profile-mid-wrapper > .profile-section-content .box-border {
background: #fff !important;
border: 1px solid var(--sh-divider) !important;
border-radius: 22px !important;
box-shadow: 0 2px 10px rgba(26, 26, 46, 0.04) !important;
padding: 22px 24px !important;
}
html body:not(.wp-admin) .main-profile-mid-wrapper > .profile-section-content .box-pedding {
padding: 0 !important;
background: transparent !important;
}
/* Section title */
html body:not(.wp-admin) .message-block-inbox + *,
html body:not(.wp-admin) .main-profile-mid-wrapper .box-pedding > .heading-submenu {
margin: 0 0 16px !important;
padding: 0 0 12px !important;
border-bottom: 1px solid var(--sh-divider) !important;
}
html body:not(.wp-admin) .main-profile-mid-wrapper .box-pedding > .heading-submenu strong {
font-size: 13px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
background: none !important;
}
/* Inbox thead strip */
html body:not(.wp-admin) .message-block-inbox .gray-title-head {
background: transparent !important;
padding: 0 !important;
margin: 0 0 8px !important;
border: 0 !important;
}
html body:not(.wp-admin) .message-block-inbox .gray-title-head .heading-top {
display: grid !important;
grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr) !important;
gap: 12px !important;
padding: 6px 14px !important;
}
html body:not(.wp-admin) .message-block-inbox .gray-title-head .heading-top strong:first-child {
grid-column: 2 !important;
font-size: 11px !important;
font-weight: 800 !important;
color: var(--sh-text-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
}
html body:not(.wp-admin) .message-block-inbox .gray-title-head .heading-top strong:nth-child(2) {
grid-column: 3 !important;
font-size: 11px !important;
font-weight: 800 !important;
color: var(--sh-text-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
}
/* Message row */
html body:not(.wp-admin) .message-block-inbox .dsp_vertical_scrollbar {
max-height: none !important;
overflow: visible !important;
}
html body:not(.wp-admin) .message-block-inbox ul.email-page {
display: grid !important;
grid-template-columns: 40px 1fr 1fr !important;
gap: 12px !important;
align-items: center !important;
padding: 14px !important;
margin: 0 0 8px !important;
list-style: none !important;
background: var(--sh-bg-soft) !important;
border: 1px solid var(--sh-divider) !important;
border-radius: 14px !important;
transition: background 180ms, border-color 180ms, transform 180ms !important;
}
html body:not(.wp-admin) .message-block-inbox ul.email-page:hover {
background: #fff !important;
border-color: rgba(228, 81, 158, 0.30) !important;
transform: translateY(-1px);
}
html body:not(.wp-admin) .message-block-inbox ul.email-page > li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
width: auto !important;
}
html body:not(.wp-admin) .message-block-inbox ul.email-page > li.wpee-received-checkbox {
grid-column: 1 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
html body:not(.wp-admin) .message-block-inbox ul.email-page > li.wpee-received-checkbox input[type="checkbox"] {
width: 18px !important;
height: 18px !important;
accent-color: var(--sh-accent) !important;
margin: 0 !important;
cursor: pointer !important;
}
html body:not(.wp-admin) .message-block-inbox ul.email-page > li.wpee-received-details {
grid-column: 2 !important;
display: grid !important;
grid-template-columns: 44px 1fr !important;
gap: 10px !important;
align-items: center !important;
font-size: 13px !important;
color: var(--sh-text-muted) !important;
}
html body:not(.wp-admin) .message-block-inbox ul.email-page > li.wpee-received-details br {
display: none !important;
}
html body:not(.wp-admin) .message-block-inbox ul.email-page > li.wpee-received-details .dsp-email-photo {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
width: 44px !important;
height: 44px !important;
border-radius: 50% !important;
overflow: hidden !important;
display: block !important;
background: #fff !important;
border: 1px solid var(--sh-divider) !important;
}
html body:not(.wp-admin) .message-block-inbox ul.email-page > li.wpee-received-details .dsp-email-photo img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 50% !important;
display: block !important;
}
html body:not(.wp-admin) .message-block-inbox ul.email-page > li.wpee-received-details .name {
grid-column: 2 !important;
grid-row: 1 !important;
display: block !important;
font-size: 14px !important;
font-weight: 700 !important;
color: var(--sh-text) !important;
}
html body:not(.wp-admin) .message-block-inbox ul.email-page > li.wpee-received-details .name a {
color: var(--sh-text) !important;
text-decoration: none !important;
}
html body:not(.wp-admin) .message-block-inbox ul.email-page > li.wpee-received-details .name a:hover {
color: var(--sh-accent) !important;
}
html body:not(.wp-admin) .message-block-inbox ul.email-page > li:last-child {
grid-column: 3 !important;
width: auto !important;
font-size: 13px !important;
color: var(--sh-text-2) !important;
}
html body:not(.wp-admin) .message-block-inbox ul.email-page > li:last-child a {
color: var(--sh-text) !important;
text-decoration: none !important;
font-weight: 600 !important;
display: inline-block !important;
max-width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
html body:not(.wp-admin) .message-block-inbox ul.email-page > li:last-child a:hover {
color: var(--sh-accent) !important;
}
/* Delete button */
html body:not(.wp-admin) .message-block-inbox .btn-delete {
margin: 16px 0 0 !important;
padding: 0 !important;
}
html body:not(.wp-admin) .message-block-inbox input.dspdp-btn-warning,
html body:not(.wp-admin) .message-block-inbox #delete-message-button {
padding: 10px 22px !important;
background: #fff !important;
color: #b91c1c !important;
border: 1.5px solid #fecaca !important;
border-radius: 999px !important;
font-size: 13px !important;
font-weight: 700 !important;
cursor: pointer !important;
min-height: 40px !important;
box-shadow: none !important;
filter: none !important;
transition: background 180ms, color 180ms, border-color 180ms !important;
}
html body:not(.wp-admin) .message-block-inbox input.dspdp-btn-warning:hover:not([disabled]),
html body:not(.wp-admin) .message-block-inbox #delete-message-button:hover:not([disabled]) {
background: #fef2f2 !important;
color: #991b1b !important;
border-color: #ef4444 !important;
}
html body:not(.wp-admin) .message-block-inbox input.dspdp-btn-warning[disabled],
html body:not(.wp-admin) .message-block-inbox #delete-message-button[disabled] {
opacity: 0.5 !important;
cursor: not-allowed !important;
}
/* Mobile stack */
@media (max-width: 600px) {
html body:not(.wp-admin) .message-block-inbox ul.email-page {
grid-template-columns: 40px 1fr !important;
}
html body:not(.wp-admin) .message-block-inbox ul.email-page > li:last-child {
grid-column: 2 !important;
grid-row: 2 !important;
}
html body:not(.wp-admin) .message-block-inbox .gray-title-head {
display: none !important;
}
}
/* ZONE_Z67_END */
/* ==========================================================================
ZONE Z68 — Sent message list + Media upload (Photos tab) polish
========================================================================== */
/* ===== Media tab switcher — ensure Z66 rule catches this parent ===== */
html body:not(.wp-admin) .media-list-wrapper > ul.profile-section-tab,
html body:not(.wp-admin) .media-list-wrapper.profile-section-wrap > ul.profile-section-tab {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
list-style: none !important;
padding: 6px !important;
margin: 0 0 18px !important;
background: #fff !important;
border: 1px solid var(--sh-divider) !important;
border-radius: 999px !important;
width: fit-content !important;
max-width: 100% !important;
box-shadow: none !important;
}
html body:not(.wp-admin) .media-list-wrapper > ul.profile-section-tab > li > a {
display: inline-flex !important;
align-items: center !important;
padding: 10px 18px !important;
border: 0 !important;
border-radius: 999px !important;
background: transparent !important;
color: var(--sh-text-2) !important;
font-size: 13px !important;
font-weight: 700 !important;
text-decoration: none !important;
line-height: 1 !important;
white-space: nowrap !important;
transition: background 160ms, color 160ms !important;
}
html body:not(.wp-admin) .media-list-wrapper > ul.profile-section-tab > li > a:hover {
background: #fdebf4 !important;
color: var(--sh-accent) !important;
}
html body:not(.wp-admin) .media-list-wrapper > ul.profile-section-tab > li.active > a {
background: var(--sh-accent) !important;
color: #fff !important;
box-shadow: none !important;
}
/* ===== Sent / Draft / Deleted single-thread view ===== */
html body:not(.wp-admin) .message-block-sent {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
}
/* Back to Inbox button */
html body:not(.wp-admin) .message-block-sent .dsp_back_inbox {
margin: 0 !important;
padding: 0 !important;
}
html body:not(.wp-admin) .message-block-sent .dsp_back_inbox .dspdp-btn {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 9px 18px !important;
background: #fff !important;
color: var(--sh-text) !important;
border: 1.5px solid var(--sh-divider) !important;
border-radius: 999px !important;
font-size: 13px !important;
font-weight: 700 !important;
text-decoration: none !important;
transition: background 180ms, color 180ms, border-color 180ms !important;
box-shadow: none !important;
}
html body:not(.wp-admin) .message-block-sent .dsp_back_inbox .dspdp-btn:hover {
background: #fdebf4 !important;
color: var(--sh-accent) !important;
border-color: var(--sh-accent) !important;
}
html body:not(.wp-admin) .message-block-sent .dsp_back_inbox .dspdp-btn::before {
content: "←";
font-size: 14px;
font-weight: 700;
margin-right: 4px;
}
/* Sent message list */
html body:not(.wp-admin) ul.sent-message-page {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
html body:not(.wp-admin) ul.sent-message-page > li {
display: grid !important;
grid-template-columns: 28px 52px 1fr auto !important;
gap: 14px !important;
align-items: center !important;
padding: 14px 16px !important;
margin: 0 !important;
background: #fff !important;
border: 1px solid var(--sh-divider) !important;
border-radius: 14px !important;
list-style: none !important;
transition: border-color 180ms, transform 180ms !important;
}
html body:not(.wp-admin) ul.sent-message-page > li:hover {
border-color: rgba(228, 81, 158, 0.30) !important;
transform: translateY(-1px);
}
html body:not(.wp-admin) ul.sent-message-page > li .dspdp-check {
grid-column: 1 !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
html body:not(.wp-admin) ul.sent-message-page > li .dspdp-check input[type="checkbox"] {
width: 18px !important;
height: 18px !important;
accent-color: var(--sh-accent) !important;
cursor: pointer !important;
margin: 0 !important;
}
html body:not(.wp-admin) ul.sent-message-page > li .image {
grid-column: 2 !important;
width: 52px !important;
height: 52px !important;
border-radius: 50% !important;
overflow: hidden !important;
background: var(--sh-bg-soft) !important;
border: 1px solid var(--sh-divider) !important;
display: block !important;
}
html body:not(.wp-admin) ul.sent-message-page > li .image a {
display: block !important;
width: 100% !important;
height: 100% !important;
}
html body:not(.wp-admin) ul.sent-message-page > li .image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 50% !important;
display: block !important;
float: none !important;
}
html body:not(.wp-admin) ul.sent-message-page > li .msg-info {
grid-column: 3 !important;
min-width: 0 !important;
}
html body:not(.wp-admin) ul.sent-message-page > li .msg-info ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: grid !important;
grid-template-columns: auto 1fr !important;
gap: 2px 10px !important;
}
html body:not(.wp-admin) ul.sent-message-page > li .msg-info ul > li {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
font-size: 13px !important;
color: var(--sh-text-2) !important;
display: block !important;
}
html body:not(.wp-admin) ul.sent-message-page > li .msg-info ul > li.name.age-text,
html body:not(.wp-admin) ul.sent-message-page > li .msg-info ul > li.name {
grid-column: 1 / -1 !important;
font-size: 15px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
margin: 0 0 4px !important;
}
html body:not(.wp-admin) ul.sent-message-page > li .msg-info ul > li:nth-child(2),
html body:not(.wp-admin) ul.sent-message-page > li .msg-info ul > li:nth-child(3) {
grid-column: 1 !important;
font-size: 11px !important;
font-weight: 700 !important;
color: var(--sh-text-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
}
html body:not(.wp-admin) ul.sent-message-page > li .msg-info ul > li:nth-child(4) {
grid-column: 2 !important;
grid-row: 2 / span 2 !important;
font-size: 14px !important;
color: var(--sh-text) !important;
font-weight: 500 !important;
overflow: hidden !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
}
html body:not(.wp-admin) ul.sent-message-page > li .read-message {
grid-column: 4 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 32px !important;
border-radius: 50% !important;
background: var(--sh-bg-soft) !important;
}
html body:not(.wp-admin) ul.sent-message-page > li .read-message img {
width: 16px !important;
height: 16px !important;
opacity: 0.7 !important;
display: block !important;
}
/* Delete Selected button — same as inbox */
html body:not(.wp-admin) .message-block-sent .btn-delete {
margin: 8px 0 0 !important;
}
html body:not(.wp-admin) .message-block-sent input.dspdp-btn-warning,
html body:not(.wp-admin) .message-block-sent #delete-message-button {
padding: 10px 22px !important;
background: #fff !important;
color: #b91c1c !important;
border: 1.5px solid #fecaca !important;
border-radius: 999px !important;
font-size: 13px !important;
font-weight: 700 !important;
cursor: pointer !important;
min-height: 40px !important;
box-shadow: none !important;
filter: none !important;
transition: background 180ms, color 180ms, border-color 180ms !important;
}
html body:not(.wp-admin) .message-block-sent input.dspdp-btn-warning:hover:not([disabled]),
html body:not(.wp-admin) .message-block-sent #delete-message-button:hover:not([disabled]) {
background: #fef2f2 !important;
color: #991b1b !important;
border-color: #ef4444 !important;
}
html body:not(.wp-admin) .message-block-sent input.dspdp-btn-warning[disabled],
html body:not(.wp-admin) .message-block-sent #delete-message-button[disabled] {
opacity: 0.5 !important;
cursor: not-allowed !important;
}
/* ===== Media page — Photos upload ===== */
html body:not(.wp-admin) .media-list-wrapper .photo-list-inner {
background: #fff !important;
border: 1px solid var(--sh-divider) !important;
border-radius: 22px !important;
box-shadow: 0 2px 10px rgba(26, 26, 46, 0.04) !important;
padding: 22px 24px !important;
}
/* File upload form */
html body:not(.wp-admin) .media-list-wrapper #fileupload {
margin: 0 !important;
}
html body:not(.wp-admin) .media-list-wrapper .fileupload-buttonbar {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
align-items: center !important;
padding: 0 !important;
margin: 14px 0 0 !important;
background: transparent !important;
}
html body:not(.wp-admin) .media-list-wrapper .fileupload-buttonbar .col-lg-7,
html body:not(.wp-admin) .media-list-wrapper .fileupload-buttonbar .col-lg-5 {
width: auto !important;
flex: 0 0 auto !important;
padding: 0 !important;
margin: 0 !important;
display: inline-flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
align-items: center !important;
float: none !important;
}
html body:not(.wp-admin) .media-list-wrapper .fileupload-buttonbar .col-lg-5 {
flex: 1 1 200px !important;
min-width: 200px !important;
}
/* Bootstrap buttons → our pills */
html body:not(.wp-admin) .media-list-wrapper .btn,
html body:not(.wp-admin) .media-list-wrapper .fileupload-buttonbar .btn {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 10px 20px !important;
background: var(--sh-accent) !important;
color: #fff !important;
border: 0 !important;
border-radius: 999px !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1 !important;
cursor: pointer !important;
min-height: 40px !important;
text-decoration: none !important;
box-shadow: none !important;
filter: none !important;
transition: background 180ms, transform 180ms !important;
}
html body:not(.wp-admin) .media-list-wrapper .btn:hover,
html body:not(.wp-admin) .media-list-wrapper .fileupload-buttonbar .btn:hover {
background: var(--sh-accent-600) !important;
transform: translateY(-1px);
}
html body:not(.wp-admin) .media-list-wrapper .btn.btn-warning,
html body:not(.wp-admin) .media-list-wrapper .btn.cancel {
background: #fff !important;
color: var(--sh-text-2) !important;
border: 1.5px solid var(--sh-divider) !important;
}
html body:not(.wp-admin) .media-list-wrapper .btn.btn-warning:hover,
html body:not(.wp-admin) .media-list-wrapper .btn.cancel:hover {
background: var(--sh-bg-soft) !important;
color: var(--sh-text) !important;
border-color: var(--sh-text-muted) !important;
}
html body:not(.wp-admin) .media-list-wrapper .btn.btn-danger,
html body:not(.wp-admin) .media-list-wrapper .btn.delete {
background: #fff !important;
color: #b91c1c !important;
border: 1.5px solid #fecaca !important;
}
html body:not(.wp-admin) .media-list-wrapper .btn.btn-danger:hover,
html body:not(.wp-admin) .media-list-wrapper .btn.delete:hover {
background: #fef2f2 !important;
color: #991b1b !important;
border-color: #ef4444 !important;
}
html body:not(.wp-admin) .media-list-wrapper .btn.fileinput-button {
position: relative !important;
overflow: hidden !important;
background: var(--sh-accent) !important;
color: #fff !important;
}
html body:not(.wp-admin) .media-list-wrapper .btn.fileinput-button input[type="file"] {
position: absolute !important;
inset: 0 !important;
opacity: 0 !important;
cursor: pointer !important;
width: 100% !important;
height: 100% !important;
}
html body:not(.wp-admin) .media-list-wrapper .btn .glyphicon {
font-size: 12px !important;
}
/* Progress bar */
html body:not(.wp-admin) .media-list-wrapper .progress {
width: 100% !important;
height: 8px !important;
border-radius: 999px !important;
background: var(--sh-bg-soft) !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
box-shadow: none !important;
}
html body:not(.wp-admin) .media-list-wrapper .progress-bar {
height: 100% !important;
background: var(--sh-accent) !important;
transition: width 220ms !important;
}
/* Upload table */
html body:not(.wp-admin) .media-list-wrapper table.table {
width: 100% !important;
margin: 0 !important;
background: transparent !important;
}
html body:not(.wp-admin) .media-list-wrapper table.table tbody tr,
html body:not(.wp-admin) .media-list-wrapper table.table tbody td {
border: 0 !important;
background: transparent !important;
padding: 8px !important;
vertical-align: middle !important;
}
html body:not(.wp-admin) .media-list-wrapper .template-upload,
html body:not(.wp-admin) .media-list-wrapper .template-download {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 10px 12px !important;
background: var(--sh-bg-soft) !important;
border: 1px solid var(--sh-divider) !important;
border-radius: 12px !important;
margin: 0 0 8px !important;
}
html body:not(.wp-admin) .media-list-wrapper .template-upload .preview,
html body:not(.wp-admin) .media-list-wrapper .template-download .preview {
width: 56px !important;
height: 56px !important;
border-radius: 10px !important;
overflow: hidden !important;
flex: 0 0 56px !important;
background: #fff !important;
}
html body:not(.wp-admin) .media-list-wrapper .template-upload .preview img,
html body:not(.wp-admin) .media-list-wrapper .template-download .preview img,
html body:not(.wp-admin) .media-list-wrapper .template-upload .preview .image-bg,
html body:not(.wp-admin) .media-list-wrapper .template-download .preview .image-bg {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
background-size: cover !important;
background-position: center !important;
}
/* ZONE_Z68_END */
/* ==========================================================================
ZONE Z69 — Media: Albums / Audios / Videos + Winks received polish
========================================================================== */
/* Container cards (shared for Albums, Audios, Videos) */
html body:not(.wp-admin) .media-list-wrapper .album-list-inner,
html body:not(.wp-admin) .media-list-wrapper .audio-list-inner,
html body:not(.wp-admin) .media-list-wrapper .video-list-inner {
background: #fff !important;
border: 1px solid var(--sh-divider) !important;
border-radius: 22px !important;
box-shadow: 0 2px 10px rgba(26, 26, 46, 0.04) !important;
padding: 22px 24px !important;
margin: 0 !important;
}
html body:not(.wp-admin) .media-list-wrapper .profile-user-albums-inner,
html body:not(.wp-admin) .media-list-wrapper .profile-user-audio-inner,
html body:not(.wp-admin) .media-list-wrapper .profile-user-videos-inner {
padding: 0 !important;
background: transparent !important;
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
}
/* "Add Album / Audio / Video" button */
html body:not(.wp-admin) .media-list-wrapper .wpee-create-button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
align-self: flex-start !important;
gap: 8px !important;
padding: 11px 22px !important;
background: var(--sh-accent) !important;
color: #fff !important;
border: 0 !important;
border-radius: 999px !important;
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: 0.02em !important;
text-decoration: none !important;
cursor: pointer !important;
min-height: 42px !important;
box-shadow: none !important;
filter: none !important;
transition: background 180ms, transform 180ms !important;
}
html body:not(.wp-admin) .media-list-wrapper .wpee-create-button::before {
content: "+";
font-size: 18px;
font-weight: 900;
line-height: 1;
margin-right: 2px;
}
html body:not(.wp-admin) .media-list-wrapper .wpee-create-button:hover {
background: var(--sh-accent-600) !important;
transform: translateY(-1px);
color: #fff !important;
}
/* Audio list */
html body:not(.wp-admin) ul.audio-main-wrapper,
html body:not(.wp-admin) ul.video-main-wrapper {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
}
html body:not(.wp-admin) ul.audio-main-wrapper:empty,
html body:not(.wp-admin) ul.video-main-wrapper:empty {
display: none !important;
}
html body:not(.wp-admin) ul.audio-main-wrapper > li,
html body:not(.wp-admin) ul.video-main-wrapper > li {
list-style: none !important;
margin: 0 !important;
padding: 14px 16px !important;
background: var(--sh-bg-soft) !important;
border: 1px solid var(--sh-divider) !important;
border-radius: 14px !important;
}
html body:not(.wp-admin) .audio-wrapper,
html body:not(.wp-admin) .video-wrapper {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
html body:not(.wp-admin) .audio-wrapper audio {
width: 100% !important;
border-radius: 999px !important;
}
html body:not(.wp-admin) .video-wrapper .image-holder.video-thumbnail {
margin: 0 !important;
padding: 0 !important;
border-radius: 14px !important;
overflow: hidden !important;
background: #000 !important;
}
html body:not(.wp-admin) .video-wrapper video {
width: 100% !important;
height: auto !important;
max-height: 360px !important;
display: block !important;
border-radius: 14px !important;
}
html body:not(.wp-admin) .audio-content-wrap,
html body:not(.wp-admin) .video-content-wrap {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
}
html body:not(.wp-admin) .audio-content-wrap .date-wrap,
html body:not(.wp-admin) .video-content-wrap .date-wrap {
font-size: 12px !important;
color: var(--sh-text-muted) !important;
font-weight: 500 !important;
}
html body:not(.wp-admin) .audio-content-wrap .wpee-delete-button,
html body:not(.wp-admin) .video-content-wrap .wpee-delete-button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
background: #fff !important;
color: #b91c1c !important;
border: 1.5px solid #fecaca !important;
text-decoration: none !important;
transition: background 180ms, color 180ms, border-color 180ms !important;
}
html body:not(.wp-admin) .audio-content-wrap .wpee-delete-button:hover,
html body:not(.wp-admin) .video-content-wrap .wpee-delete-button:hover {
background: #ef4444 !important;
color: #fff !important;
border-color: #ef4444 !important;
}
/* ===== Create/Edit popup (Album, Audio, Video) ===== */
html body:not(.wp-admin) .album-popup-main-wrapper,
html body:not(.wp-admin) .audio-popup-main-wrapper,
html body:not(.wp-admin) .video-popup-main-wrapper,
html body:not(.wp-admin) .create-popup-wrapper {
display: none !important;
position: fixed !important;
inset: 0 !important;
z-index: 10500 !important;
align-items: center !important;
justify-content: center !important;
padding: 20px !important;
}
html body:not(.wp-admin) .album-popup-main-wrapper.is-open,
html body:not(.wp-admin) .audio-popup-main-wrapper.is-open,
html body:not(.wp-admin) .video-popup-main-wrapper.is-open,
html body:not(.wp-admin) .create-popup-wrapper.is-open {
display: flex !important;
}
html body:not(.wp-admin) .pop-up-bg,
html body:not(.wp-admin) .album-pop-up-bg,
html body:not(.wp-admin) .audio-pop-up-bg,
html body:not(.wp-admin) .video-pop-up-bg {
position: absolute !important;
inset: 0 !important;
background: rgba(26, 26, 46, 0.55) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
z-index: -1 !important;
cursor: pointer !important;
}
html body:not(.wp-admin) .album-popup-wrapper,
html body:not(.wp-admin) .audio-popup-wrapper,
html body:not(.wp-admin) .video-popup-wrapper {
position: relative !important;
width: 92vw !important;
max-width: 480px !important;
background: #fff !important;
border-radius: 22px !important;
box-shadow: 0 30px 80px rgba(26, 26, 46, 0.32) !important;
padding: 32px 28px !important;
}
html body:not(.wp-admin) .album-popup-title,
html body:not(.wp-admin) .audio-popup-title,
html body:not(.wp-admin) .video-popup-title {
font-size: 18px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
text-align: center !important;
margin: 0 0 18px !important;
padding: 0 !important;
background: none !important;
letter-spacing: -0.01em !important;
-webkit-text-fill-color: var(--sh-text) !important;
}
/* Popup form */
html body:not(.wp-admin) .album-popup-form,
html body:not(.wp-admin) .audio-popup-form,
html body:not(.wp-admin) .video-popup-form {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
margin: 0 !important;
}
html body:not(.wp-admin) .album-popup-form .form-group,
html body:not(.wp-admin) .audio-popup-form .form-group,
html body:not(.wp-admin) .video-popup-form .form-group {
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
}
html body:not(.wp-admin) .album-popup-form label,
html body:not(.wp-admin) .audio-popup-form label,
html body:not(.wp-admin) .video-popup-form label {
font-size: 11px !important;
font-weight: 800 !important;
color: var(--sh-text-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
margin: 0 !important;
}
html body:not(.wp-admin) .album-popup-form input[type="text"],
html body:not(.wp-admin) .audio-popup-form input[type="file"],
html body:not(.wp-admin) .video-popup-form input[type="file"] {
width: 100% !important;
padding: 12px 16px !important;
border: 1.5px solid var(--sh-divider) !important;
border-radius: 14px !important;
background: #fff !important;
color: var(--sh-text) !important;
font-size: 14px !important;
font-weight: 500 !important;
min-height: 46px !important;
transition: border-color 180ms, box-shadow 180ms !important;
box-shadow: none !important;
}
html body:not(.wp-admin) .album-popup-form input[type="text"]:focus,
html body:not(.wp-admin) .audio-popup-form input[type="file"]:focus,
html body:not(.wp-admin) .video-popup-form input[type="file"]:focus {
border-color: var(--sh-accent) !important;
box-shadow: 0 0 0 4px rgba(228, 81, 158, 0.12) !important;
outline: none !important;
}
/* "Make Private" checkbox row */
html body:not(.wp-admin) .album-popup-form .form-group:has(> input[type="checkbox"]),
html body:not(.wp-admin) .audio-popup-form .form-group:has(> input[type="checkbox"]),
html body:not(.wp-admin) .video-popup-form .form-group:has(> input[type="checkbox"]) {
flex-direction: row !important;
align-items: center !important;
gap: 10px !important;
padding: 12px 14px !important;
background: var(--sh-bg-soft) !important;
border: 1px dashed var(--sh-divider) !important;
border-radius: 12px !important;
}
html body:not(.wp-admin) .album-popup-form input[type="checkbox"],
html body:not(.wp-admin) .audio-popup-form input[type="checkbox"],
html body:not(.wp-admin) .video-popup-form input[type="checkbox"] {
width: 18px !important;
height: 18px !important;
accent-color: var(--sh-accent) !important;
cursor: pointer !important;
margin: 0 !important;
}
html body:not(.wp-admin) .album-popup-form .form-group:has(> input[type="checkbox"]) label,
html body:not(.wp-admin) .audio-popup-form .form-group:has(> input[type="checkbox"]) label,
html body:not(.wp-admin) .video-popup-form .form-group:has(> input[type="checkbox"]) label {
font-size: 13px !important;
font-weight: 700 !important;
color: var(--sh-text) !important;
text-transform: none !important;
letter-spacing: 0 !important;
cursor: pointer !important;
}
/* Save button */
html body:not(.wp-admin) .album-popup-form .save-button,
html body:not(.wp-admin) .audio-popup-form .save-button,
html body:not(.wp-admin) .video-popup-form .save-button {
width: 100% !important;
padding: 12px 28px !important;
background: var(--sh-accent) !important;
color: #fff !important;
border: 0 !important;
border-radius: 999px !important;
font-size: 14px !important;
font-weight: 800 !important;
letter-spacing: 0.02em !important;
cursor: pointer !important;
min-height: 46px !important;
box-shadow: none !important;
filter: none !important;
transition: background 180ms, transform 180ms !important;
}
html body:not(.wp-admin) .album-popup-form .save-button:hover,
html body:not(.wp-admin) .audio-popup-form .save-button:hover,
html body:not(.wp-admin) .video-popup-form .save-button:hover {
background: var(--sh-accent-600) !important;
transform: translateY(-1px);
}
/* Error messages under fields */
html body:not(.wp-admin) .album-popup-form .form-error-message,
html body:not(.wp-admin) .audio-popup-form .form-error-message,
html body:not(.wp-admin) .video-popup-form .form-error-message {
font-size: 12px !important;
color: #ef4444 !important;
margin: 2px 0 0 !important;
display: block !important;
min-height: 16px !important;
background: transparent !important;
border: 0 !important;
}
/* ===== Winks received — empty state ===== */
html body:not(.wp-admin) .wpee-winks-wrapper .box-border,
html body:not(.wp-admin) .wpee-winks-wrapper .box-pedding {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
html body:not(.wp-admin) .wpee-winks-wrapper .wpee-error-message {
display: block !important;
padding: 48px 24px !important;
margin: 0 !important;
text-align: center !important;
background: var(--sh-bg-soft) !important;
border: 1px dashed var(--sh-divider) !important;
border-radius: 18px !important;
color: var(--sh-text-muted) !important;
font-size: 14px !important;
font-weight: 600 !important;
}
/* ZONE_Z69_END */
/* ==========================================================================
ZONE Z70 — Own-profile header: compact actions (Premium badge + Edit Cover)
========================================================================== */
/* Actions on own profile — vertical stack on right, compact */
html body:not(.wp-admin) .wpee-datebook-profile-top .wpee-datebook-actions {
flex: 0 0 auto !important;
width: auto !important;
min-width: 0 !important;
max-width: 280px !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
justify-content: flex-start !important;
gap: 10px !important;
margin: 0 !important;
}
@media (max-width: 720px) {
html body:not(.wp-admin) .wpee-datebook-profile-top .wpee-datebook-actions {
max-width: none !important;
width: 100% !important;
align-items: flex-start !important;
}
}
/* But on OTHER users' profile (has btn-primary) — keep horizontal row */
html body:not(.wp-admin) .wpee-datebook-profile-top .wpee-datebook-actions:has(.wpee-db-btn-primary) {
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: flex-start !important;
align-items: center !important;
max-width: none !important;
width: 100% !important;
}
/* ===== Premium Member badge ===== */
html body:not(.wp-admin) .wpee-datebook-actions .wpee-datebook-account-status {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 6px 14px !important;
background: linear-gradient(135deg, #fdebf4, #eef0fa) !important;
border: 1px solid rgba(228, 81, 158, 0.28) !important;
border-radius: 999px !important;
margin: 0 !important;
box-shadow: none !important;
}
html body:not(.wp-admin) .wpee-datebook-actions .wpee-datebook-account-status .profile-location {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
font-size: 12px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
letter-spacing: 0.02em !important;
}
html body:not(.wp-admin) .wpee-datebook-actions .wpee-datebook-account-status .profile-location::before {
content: "⭐";
font-size: 13px;
margin-right: 2px;
}
html body:not(.wp-admin) .wpee-datebook-actions .wpee-datebook-account-status .profile-status-title {
font-size: 10px !important;
font-weight: 700 !important;
color: var(--sh-text-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
background: transparent !important;
padding: 0 !important;
}
/* ===== "Edit Cover Photo" button ===== */
html body:not(.wp-admin) .wpee-datebook-actions .wpee-datebook-cover-actions,
html body:not(.wp-admin) .wpee-datebook-actions .change-cover-photo {
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
}
html body:not(.wp-admin) .wpee-datebook-actions .change-cover-photo form#formId {
display: none !important;
}
html body:not(.wp-admin) .wpee-datebook-actions .trigger-cover-photo,
html body:not(.wp-admin) .wpee-datebook-actions a.wpee-db-btn-outline.trigger-cover-photo {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
padding: 8px 16px !important;
background: #fff !important;
color: var(--sh-accent) !important;
border: 1.5px solid rgba(228, 81, 158, 0.35) !important;
border-radius: 999px !important;
font-size: 12px !important;
font-weight: 700 !important;
text-decoration: none !important;
min-height: 34px !important;
white-space: nowrap !important;
box-shadow: none !important;
transition: background 180ms, color 180ms, border-color 180ms !important;
}
html body:not(.wp-admin) .wpee-datebook-actions .trigger-cover-photo::before {
content: "\f030";
font-family: "FontAwesome";
font-size: 11px;
margin-right: 2px;
}
html body:not(.wp-admin) .wpee-datebook-actions .trigger-cover-photo:hover {
background: #fdebf4 !important;
color: var(--sh-accent-600) !important;
border-color: var(--sh-accent) !important;
}
/* ZONE_Z70_END */
/* ==========================================================================
ZONE Z71 — Mobile polish: profile header + all tab switchers
========================================================================== */
@media (max-width: 820px) {
/* ===== Profile header — stack avatar + info vertically ===== */
html body:not(.wp-admin) .profile-user-details.wpee-datebook-profile-top {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 18px !important;
padding: 22px 18px !important;
}
html body:not(.wp-admin) .wpee-datebook-profile-top .profile-img.change-profile-image {
flex: 0 0 108px !important;
width: 108px !important;
height: 108px !important;
min-width: 108px !important;
}
html body:not(.wp-admin) .wpee-datebook-profile-top .wpee-datebook-details-column {
width: 100% !important;
}
html body:not(.wp-admin) .wpee-datebook-profile-top .user-info-wrapper {
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 14px !important;
}
html body:not(.wp-admin) .wpee-datebook-profile-top .wpee-datebook-info-primary {
align-items: center !important;
text-align: center !important;
width: 100% !important;
flex: 1 1 auto !important;
}
html body:not(.wp-admin) .wpee-datebook-profile-top .wpee-user-rating-wrap,
html body:not(.wp-admin) .wpee-datebook-profile-top .age-location-wrap {
justify-content: center !important;
flex-wrap: wrap !important;
}
html body:not(.wp-admin) .wpee-datebook-profile-top h4.username {
font-size: 22px !important;
}
/* Actions — centered, full width below info */
html body:not(.wp-admin) .wpee-datebook-profile-top .wpee-datebook-actions {
width: 100% !important;
max-width: none !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: center !important;
gap: 8px !important;
}
html body:not(.wp-admin) .wpee-datebook-profile-top .wpee-datebook-actions:has(.wpee-db-btn-primary) {
justify-content: center !important;
}
}
@media (max-width: 720px) {
/* ===== Top profile menu (Activity/Profile/Media...) — horizontal scroll ===== */
html body:not(.wp-admin) .wpee-datebook-profile-card .profile-header-menu {
padding: 8px 10px !important;
}
html body:not(.wp-admin) .wpee-datebook-profile-card .profile-menu-wrapper {
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
}
html body:not(.wp-admin) .wpee-datebook-profile-card .profile-menu-tab {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
gap: 4px !important;
padding: 2px !important;
margin: 0 !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: thin;
}
html body:not(.wp-admin) .wpee-datebook-profile-card .profile-menu-tab > li > a {
white-space: nowrap !important;
padding: 8px 14px !important;
font-size: 12px !important;
}
/* Notification links (Gifts/Winks/Settings) — horizontal scroll, hide "More" */
html body:not(.wp-admin) .wpee-datebook-profile-card .profile-notification-blocks {
width: 100% !important;
}
html body:not(.wp-admin) .wpee-datebook-profile-card .wpee-notification-links {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
gap: 4px !important;
justify-content: flex-start !important;
padding: 2px !important;
margin: 0 !important;
-webkit-overflow-scrolling: touch !important;
}
html body:not(.wp-admin) .wpee-datebook-profile-card .wpee-notification-links > li > a {
white-space: nowrap !important;
padding: 7px 12px !important;
font-size: 12px !important;
}
html body:not(.wp-admin) .wpee-datebook-profile-card .wpee-notification-links > li > a > i {
font-size: 12px !important;
}
/* ===== Settings subtabs — horizontal scroll ===== */
html body:not(.wp-admin) .settings-list-wrapper > ul.profile-section-tab {
flex-wrap: nowrap !important;
overflow-x: auto !important;
gap: 4px !important;
padding: 4px !important;
-webkit-overflow-scrolling: touch !important;
max-width: 100% !important;
width: 100% !important;
}
html body:not(.wp-admin) .settings-list-wrapper > ul.profile-section-tab > li > a {
white-space: nowrap !important;
padding: 8px 14px !important;
font-size: 12px !important;
}
/* ===== Universal pill switcher (Edit Profile/Friends/Messages/Media/Search) ===== */
html body:not(.wp-admin) .profile-section-wrap > ul.profile-section-tab,
html body:not(.wp-admin) .main-profile-mid-wrapper > ul.profile-section-tab,
html body:not(.wp-admin) .media-list-wrapper > ul.profile-section-tab,
html body:not(.wp-admin) .wpee-search-tab > ul.profile-section-tab {
flex-wrap: nowrap !important;
overflow-x: auto !important;
gap: 4px !important;
padding: 4px !important;
-webkit-overflow-scrolling: touch !important;
max-width: 100% !important;
width: 100% !important;
}
html body:not(.wp-admin) .profile-section-wrap > ul.profile-section-tab > li > a,
html body:not(.wp-admin) .main-profile-mid-wrapper > ul.profile-section-tab > li > a,
html body:not(.wp-admin) .media-list-wrapper > ul.profile-section-tab > li > a,
html body:not(.wp-admin) .wpee-search-tab > ul.profile-section-tab > li > a {
white-space: nowrap !important;
padding: 8px 14px !important;
font-size: 12px !important;
}
/* Thin scrollbar */
html body:not(.wp-admin) ul.profile-section-tab::-webkit-scrollbar,
html body:not(.wp-admin) .wpee-datebook-profile-card .profile-menu-tab::-webkit-scrollbar,
html body:not(.wp-admin) .wpee-datebook-profile-card .wpee-notification-links::-webkit-scrollbar {
height: 3px !important;
}
html body:not(.wp-admin) ul.profile-section-tab::-webkit-scrollbar-thumb,
html body:not(.wp-admin) .wpee-datebook-profile-card .profile-menu-tab::-webkit-scrollbar-thumb,
html body:not(.wp-admin) .wpee-datebook-profile-card .wpee-notification-links::-webkit-scrollbar-thumb {
background: rgba(228, 81, 158, 0.25) !important;
border-radius: 999px !important;
}
}
@media (max-width: 480px) {
/* Avatar smaller on very narrow */
html body:not(.wp-admin) .wpee-datebook-profile-top .profile-img.change-profile-image {
flex: 0 0 88px !important;
width: 88px !important;
height: 88px !important;
min-width: 88px !important;
}
html body:not(.wp-admin) .wpee-datebook-profile-top h4.username {
font-size: 19px !important;
}
html body:not(.wp-admin) .wpee-datebook-profile-top .age-location-wrap > div {
font-size: 12px !important;
padding: 5px 10px !important;
}
html body:not(.wp-admin) .wpee-datebook-profile-top .wpee-datebook-meta-line {
font-size: 12px !important;
}
/* Profile photo change camera button smaller on narrow */
html body:not(.wp-admin) .wpee-datebook-profile-top .update_profile_text_div {
width: 32px !important;
height: 32px !important;
}
html body:not(.wp-admin) .wpee-datebook-profile-top .update_profile_text_div i {
font-size: 12px !important;
}
}
/* ZONE_Z71_END */
/* ==========================================================================
ZONE Z72 — Mobile: kill plugin's flex-direction: column on .profile-section-tab
========================================================================== */
@media (max-width: 720px) {
html body:not(.wp-admin) ul.profile-section-tab,
html body:not(.wp-admin) .settings-list-wrapper > ul.profile-section-tab,
html body:not(.wp-admin) .profile-section-wrap > ul.profile-section-tab,
html body:not(.wp-admin) .main-profile-mid-wrapper > ul.profile-section-tab,
html body:not(.wp-admin) .media-list-wrapper > ul.profile-section-tab,
html body:not(.wp-admin) .wpee-search-tab > ul.profile-section-tab {
flex-direction: row !important;
flex-wrap: wrap !important;
overflow: visible !important;
gap: 4px !important;
padding: 6px !important;
margin: 0 0 16px !important;
width: 100% !important;
max-width: 100% !important;
background: #fff !important;
border: 1px solid var(--sh-divider) !important;
border-radius: 16px !important;
box-shadow: none !important;
justify-content: flex-start !important;
}
html body:not(.wp-admin) ul.profile-section-tab > li,
html body:not(.wp-admin) .settings-list-wrapper > ul.profile-section-tab > li,
html body:not(.wp-admin) .profile-section-wrap > ul.profile-section-tab > li,
html body:not(.wp-admin) .main-profile-mid-wrapper > ul.profile-section-tab > li,
html body:not(.wp-admin) .media-list-wrapper > ul.profile-section-tab > li,
html body:not(.wp-admin) .wpee-search-tab > ul.profile-section-tab > li {
flex: 0 0 auto !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
html body:not(.wp-admin) ul.profile-section-tab > li > a,
html body:not(.wp-admin) .settings-list-wrapper > ul.profile-section-tab > li > a,
html body:not(.wp-admin) .profile-section-wrap > ul.profile-section-tab > li > a,
html body:not(.wp-admin) .main-profile-mid-wrapper > ul.profile-section-tab > li > a,
html body:not(.wp-admin) .media-list-wrapper > ul.profile-section-tab > li > a,
html body:not(.wp-admin) .wpee-search-tab > ul.profile-section-tab > li > a {
display: inline-flex !important;
align-items: center !important;
width: auto !important;
padding: 8px 14px !important;
font-size: 12px !important;
font-weight: 700 !important;
white-space: nowrap !important;
color: var(--sh-text-2) !important;
background: transparent !important;
border: 0 !important;
border-radius: 999px !important;
text-decoration: none !important;
transition: background 160ms, color 160ms !important;
}
html body:not(.wp-admin) ul.profile-section-tab > li.active > a,
html body:not(.wp-admin) .settings-list-wrapper > ul.profile-section-tab > li.active > a,
html body:not(.wp-admin) .profile-section-wrap > ul.profile-section-tab > li.active > a,
html body:not(.wp-admin) .main-profile-mid-wrapper > ul.profile-section-tab > li.active > a,
html body:not(.wp-admin) .media-list-wrapper > ul.profile-section-tab > li.active > a,
html body:not(.wp-admin) .wpee-search-tab > ul.profile-section-tab > li.active > a {
background: var(--sh-accent) !important;
color: #fff !important;
box-shadow: none !important;
}
}
/* ZONE_Z72_END */
/* ==========================================================================
ZONE Z73 — Member search page: remove top padding
========================================================================== */
html body:not(.wp-admin) .elementor-widget-wpee-member > .elementor-widget-container {
padding-top: 0 !important;
}
html body:not(.wp-admin) .elementor-widget-wpee-member .wpee-member {
padding-top: 0 !important;
margin-top: 0 !important;
}
html body:not(.wp-admin) .wpee-member-online-container,
html body:not(.wp-admin) .wpee-profile-online-row {
padding-top: 0 !important;
margin-top: 0 !important;
}
html body:not(.wp-admin) .wpee-online-members-inner.wpee-block.wpee-online-members-inner--enhanced {
margin-top: 0 !important;
}
/* ZONE_Z73_END */
/* ==========================================================================
ZONE Z74 — Remove border on .wpee-block-content inside datebook profile layout
========================================================================== */
html body:not(.wp-admin) .wpee-datebook-profile-layout .wpee-block .wpee-block-content,
html body:not(.wp-admin) .wpee-datebook-profile-layout .wpee-block-content {
border: 0 !important;
box-shadow: none !important;
}
/* ZONE_Z74_END */
/* ==========================================================================
ZONE Z75 — Media: uploaded photo preview (make it visible + larger)
========================================================================== */
/* The plugin renders uploaded files as .template-download inside (invalid HTML);
force the template to display as a standalone card + enlarge the photo preview. */
html body:not(.wp-admin) .media-list-wrapper tbody.files {
display: block !important;
padding: 0 !important;
}
html body:not(.wp-admin) .media-list-wrapper tbody.files .template-download,
html body:not(.wp-admin) .media-list-wrapper tbody.files .template-upload,
html body:not(.wp-admin) .media-list-wrapper .template-download,
html body:not(.wp-admin) .media-list-wrapper .template-upload {
display: flex !important;
align-items: center !important;
gap: 14px !important;
padding: 12px 14px !important;
background: #fff !important;
border: 1px solid var(--sh-divider) !important;
border-radius: 14px !important;
margin: 0 0 10px !important;
flex-wrap: wrap !important;
}
html body:not(.wp-admin) .media-list-wrapper .template-download > div:first-child,
html body:not(.wp-admin) .media-list-wrapper .template-upload > div:first-child {
flex: 1 1 auto !important;
min-width: 0 !important;
display: flex !important;
align-items: center !important;
gap: 14px !important;
}
html body:not(.wp-admin) .media-list-wrapper .template-download > div:last-child,
html body:not(.wp-admin) .media-list-wrapper .template-upload > div:last-child {
flex: 0 0 auto !important;
}
/* Photo preview — bigger, square with cover */
html body:not(.wp-admin) .media-list-wrapper .template-download .preview,
html body:not(.wp-admin) .media-list-wrapper .template-upload .preview {
display: inline-block !important;
width: 110px !important;
height: 110px !important;
min-width: 110px !important;
flex: 0 0 110px !important;
border-radius: 14px !important;
overflow: hidden !important;
background: var(--sh-bg-soft) !important;
border: 1px solid var(--sh-divider) !important;
}
html body:not(.wp-admin) .media-list-wrapper .template-download .preview > a,
html body:not(.wp-admin) .media-list-wrapper .template-upload .preview > a {
display: block !important;
width: 100% !important;
height: 100% !important;
border-radius: 14px !important;
overflow: hidden !important;
text-decoration: none !important;
}
html body:not(.wp-admin) .media-list-wrapper .template-download .preview .image-bg,
html body:not(.wp-admin) .media-list-wrapper .template-upload .preview .image-bg,
html body:not(.wp-admin) .media-list-wrapper .preview span.image-bg {
display: block !important;
width: 100% !important;
height: 100% !important;
min-height: 110px !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
border-radius: 14px !important;
}
html body:not(.wp-admin) .media-list-wrapper .template-download .preview img,
html body:not(.wp-admin) .media-list-wrapper .template-upload .preview img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
border-radius: 14px !important;
}
/* ZONE_Z75_END */
/* ==========================================================================
ZONE Z76 — Profile avatar: kill square bg behind photo, make camera visible
========================================================================== */
/* Strip any square background/shadow from the outer avatar wrapper */
html body:not(.wp-admin) .profile-img.change-profile-image,
html body:not(.wp-admin) .profile-img.profile_image_change,
html body:not(.wp-admin) .wpee-datebook-profile-top .profile-img.change-profile-image {
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
border-radius: 50% !important;
overflow: visible !important;
}
html body:not(.wp-admin) .profile-img.change-profile-image::before,
html body:not(.wp-admin) .profile-img.change-profile-image::after,
html body:not(.wp-admin) .profile-img.profile_image_change::before,
html body:not(.wp-admin) .profile-img.profile_image_change::after {
content: none !important;
display: none !important;
background: none !important;
}
html body:not(.wp-admin) .profile-img.change-profile-image figure,
html body:not(.wp-admin) .profile-img.change-profile-image figure.overflow-h,
html body:not(.wp-admin) .profile-img.profile_image_change figure {
background: transparent !important;
background-image: none !important;
border-radius: 50% !important;
overflow: hidden !important;
}
/* Avatar photo itself — circle, no square artifacts */
html body:not(.wp-admin) .profile-img.change-profile-image figure img,
html body:not(.wp-admin) .profile-img.change-profile-image img#profile_picture,
html body:not(.wp-admin) .profile-img.profile_image_change img {
border-radius: 50% !important;
box-shadow: none !important;
}
/* Camera change-photo button — prominent pink circle bottom-right */
html body:not(.wp-admin) .profile-img.change-profile-image .update_profile_text_div,
html body:not(.wp-admin) .profile-img.profile_image_change .update_profile_text_div,
html body:not(.wp-admin) .wpee-datebook-profile-top .update_profile_text_div {
position: absolute !important;
right: 2px !important;
bottom: 2px !important;
top: auto !important;
left: auto !important;
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
border-radius: 50% !important;
background: var(--sh-accent) !important;
border: 3px solid #fff !important;
box-shadow: 0 6px 16px rgba(228, 81, 158, 0.45) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
z-index: 10 !important;
opacity: 1 !important;
visibility: visible !important;
transition: transform 220ms var(--sh-ease-out), background 200ms !important;
}
html body:not(.wp-admin) .profile-img.change-profile-image .update_profile_text_div:hover,
html body:not(.wp-admin) .profile-img.profile_image_change .update_profile_text_div:hover {
transform: scale(1.08);
background: var(--sh-accent-600) !important;
}
html body:not(.wp-admin) .profile-img.change-profile-image .update_profile_text_div a,
html body:not(.wp-admin) .profile-img.change-profile-image .update_profile_text_div i,
html body:not(.wp-admin) .profile-img.profile_image_change .update_profile_text_div a,
html body:not(.wp-admin) .profile-img.profile_image_change .update_profile_text_div i {
color: #fff !important;
font-size: 14px !important;
line-height: 1 !important;
text-decoration: none !important;
}
/* Hide loader ring / hidden form that would create ghost squares */
html body:not(.wp-admin) .profile-img.change-profile-image > .loader,
html body:not(.wp-admin) .profile-img.change-profile-image > #change-profile-pic-form {
display: none !important;
}
/* ZONE_Z76_END */
/* ==========================================================================
ZONE Z77 — Nuke ALL backgrounds/shadows/borders around profile avatar
========================================================================== */
html body:not(.wp-admin) .profile-img.change-profile-image figure,
html body:not(.wp-admin) .profile-img.change-profile-image figure.overflow-h,
html body:not(.wp-admin) .profile-img.profile_image_change figure,
html body:not(.wp-admin) .wpee-profile-header .profile-user-details .profile-img figure,
html body:not(.wp-admin) .wpee-datebook-profile-top .profile-img figure {
width: 100% !important;
height: 100% !important;
border: 0 !important;
border-radius: 50% !important;
box-shadow: none !important;
background: transparent !important;
background-image: none !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
html body:not(.wp-admin) .profile-img.change-profile-image,
html body:not(.wp-admin) .profile-img.profile_image_change,
html body:not(.wp-admin) .wpee-datebook-profile-top .profile-img.change-profile-image {
background: #fff !important;
background-image: none !important;
border-radius: 50% !important;
border: 4px solid #fff !important;
box-shadow: 0 10px 24px rgba(228, 81, 158, 0.18) !important;
overflow: visible !important;
}
html body:not(.wp-admin) .profile-img.change-profile-image::before,
html body:not(.wp-admin) .profile-img.change-profile-image::after,
html body:not(.wp-admin) .profile-img.profile_image_change::before,
html body:not(.wp-admin) .profile-img.profile_image_change::after,
html body:not(.wp-admin) .profile-img.change-profile-image figure::before,
html body:not(.wp-admin) .profile-img.change-profile-image figure::after {
content: none !important;
display: none !important;
background: none !important;
background-image: none !important;
box-shadow: none !important;
}
/* Status dot — tiny, clean */
html body:not(.wp-admin) .profile-img.change-profile-image .wpee-user-status,
html body:not(.wp-admin) .wpee-datebook-profile-top .wpee-user-status {
width: 16px !important;
height: 16px !important;
min-width: 0 !important;
min-height: 0 !important;
top: 4px !important;
right: 4px !important;
left: auto !important;
bottom: auto !important;
border-radius: 50% !important;
border: 3px solid #fff !important;
z-index: 5 !important;
box-shadow: none !important;
}
html body:not(.wp-admin) .profile-img.change-profile-image .wpee-user-status.wpee-online {
background: #22c55e !important;
}
html body:not(.wp-admin) .profile-img.change-profile-image .wpee-user-status.wpee-offline {
background: var(--sh-text-muted) !important;
}
/* Camera button — bigger pink pill bottom-right with visible icon */
html body:not(.wp-admin) .profile-img.change-profile-image .update_profile_text_div,
html body:not(.wp-admin) .profile-img.profile_image_change .update_profile_text_div {
position: absolute !important;
right: -4px !important;
bottom: -4px !important;
top: auto !important;
left: auto !important;
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
border-radius: 50% !important;
background: var(--sh-accent) !important;
border: 3px solid #fff !important;
box-shadow: 0 6px 16px rgba(228, 81, 158, 0.55) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
z-index: 20 !important;
opacity: 1 !important;
visibility: visible !important;
}
html body:not(.wp-admin) .profile-img.change-profile-image .update_profile_text_div a,
html body:not(.wp-admin) .profile-img.change-profile-image .update_profile_text_div i,
html body:not(.wp-admin) .profile-img.profile_image_change .update_profile_text_div a,
html body:not(.wp-admin) .profile-img.profile_image_change .update_profile_text_div i {
color: #fff !important;
font-size: 16px !important;
line-height: 1 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
opacity: 1 !important;
visibility: visible !important;
text-decoration: none !important;
}
/* ZONE_Z77_END */
/* ==========================================================================
ZONE Z78 — Camera button force + Single message thread view
========================================================================== */
/* Camera button — hammer visibility on every possible parent */
html body:not(.wp-admin) .update_profile_text_div[title="Update Profile Picture"],
html body:not(.wp-admin) div.update_profile_text_div {
position: absolute !important;
right: -2px !important;
bottom: -2px !important;
top: auto !important;
left: auto !important;
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
min-height: 38px !important;
border-radius: 50% !important;
background-color: var(--sh-accent) !important;
background: var(--sh-accent) !important;
background-image: none !important;
border: 3px solid #fff !important;
box-shadow: 0 6px 16px rgba(228, 81, 158, 0.55) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
z-index: 20 !important;
opacity: 1 !important;
visibility: visible !important;
overflow: visible !important;
color: #fff !important;
}
html body:not(.wp-admin) div.update_profile_text_div > a,
html body:not(.wp-admin) div.update_profile_text_div a#change-profile-pic {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
color: #fff !important;
text-decoration: none !important;
opacity: 1 !important;
visibility: visible !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
html body:not(.wp-admin) div.update_profile_text_div i.fa.fa-camera,
html body:not(.wp-admin) div.update_profile_text_div a > i {
color: #fff !important;
font-size: 15px !important;
line-height: 1 !important;
opacity: 1 !important;
visibility: visible !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* ===== Single message thread view ===== */
html body:not(.wp-admin) .dsp_back_inbox {
display: flex !important;
gap: 8px !important;
flex-wrap: wrap !important;
margin: 0 0 18px !important;
padding: 0 !important;
}
html body:not(.wp-admin) .dsp_back_inbox .dspdp-btn,
html body:not(.wp-admin) .dsp_back_inbox a.dspdp-btn {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 9px 18px !important;
background: #fff !important;
color: var(--sh-text) !important;
border: 1.5px solid var(--sh-divider) !important;
border-radius: 999px !important;
font-size: 13px !important;
font-weight: 700 !important;
text-decoration: none !important;
cursor: pointer !important;
min-height: 38px !important;
box-shadow: none !important;
transition: background 180ms, color 180ms, border-color 180ms !important;
}
html body:not(.wp-admin) .dsp_back_inbox .dspdp-btn:hover {
background: #fdebf4 !important;
color: var(--sh-accent) !important;
border-color: var(--sh-accent) !important;
}
html body:not(.wp-admin) .dsp_back_inbox a[href*="reply"] {
background: var(--sh-accent) !important;
color: #fff !important;
border-color: var(--sh-accent) !important;
}
html body:not(.wp-admin) .dsp_back_inbox a[href*="reply"]:hover {
background: var(--sh-accent-600) !important;
color: #fff !important;
border-color: var(--sh-accent-600) !important;
}
/* Message thread card */
html body:not(.wp-admin) .dspdp-bordered-item-md.receiver {
background: #fff !important;
border: 1px solid var(--sh-divider) !important;
border-radius: 18px !important;
padding: 22px !important;
box-shadow: 0 2px 10px rgba(26, 26, 46, 0.04) !important;
margin: 0 0 18px !important;
}
html body:not(.wp-admin) .dspdp-bordered-item-md.receiver .view-message {
display: grid !important;
grid-template-columns: 64px 1fr !important;
gap: 16px !important;
align-items: flex-start !important;
margin: 0 !important;
padding: 0 !important;
}
html body:not(.wp-admin) .dspdp-bordered-item-md.receiver .view-message .dspdp-col-sm-2,
html body:not(.wp-admin) .dspdp-bordered-item-md.receiver .view-message > div:first-child {
width: 64px !important;
padding: 0 !important;
margin: 0 !important;
float: none !important;
}
html body:not(.wp-admin) .dspdp-bordered-item-md.receiver .view-message .dspdp-col-sm-2 img,
html body:not(.wp-admin) .dspdp-bordered-item-md.receiver .view-message img {
width: 64px !important;
height: 64px !important;
border-radius: 50% !important;
object-fit: cover !important;
display: block !important;
border: 2px solid #fff !important;
box-shadow: 0 2px 6px rgba(26, 26, 46, 0.08) !important;
float: none !important;
margin: 0 !important;
}
html body:not(.wp-admin) .dspdp-bordered-item-md.receiver .view-message .dspdp-col-sm-9,
html body:not(.wp-admin) .dspdp-bordered-item-md.receiver .view-message > div:nth-child(2) {
width: auto !important;
padding: 0 !important;
margin: 0 !important;
float: none !important;
min-width: 0 !important;
}
html body:not(.wp-admin) .dspdp-bordered-item-md.receiver .msg-info .name,
html body:not(.wp-admin) .dspdp-bordered-item-md.receiver .msg-info .dspdp-h4 {
font-size: 16px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
margin: 0 !important;
padding: 0 !important;
letter-spacing: -0.01em !important;
background: none !important;
-webkit-text-fill-color: var(--sh-text) !important;
}
html body:not(.wp-admin) .dspdp-bordered-item-md.receiver .dsp-msg-date {
font-size: 11px !important;
color: var(--sh-text-muted) !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
margin: 2px 0 14px !important;
}
html body:not(.wp-admin) .dspdp-bordered-item-md.receiver .dspdp-spacer,
html body:not(.wp-admin) .dspdp-bordered-item-md.receiver .dspdp-spacer.dsp-spacer {
margin: 0 !important;
padding: 14px 16px !important;
background: var(--sh-bg-soft) !important;
border: 1px solid var(--sh-divider) !important;
border-radius: 14px !important;
font-size: 14px !important;
color: var(--sh-text) !important;
line-height: 1.55 !important;
white-space: pre-wrap !important;
word-wrap: break-word !important;
}
/* ZONE_Z78_END */
/* ==========================================================================
ZONE Z79 — Force message view layout (high-specificity, parent-agnostic)
========================================================================== */
html body:not(.wp-admin) .view-message,
html body:not(.wp-admin) div.view-message.dspdp-row,
html body:not(.wp-admin) div.view-message.dsp-row {
display: grid !important;
grid-template-columns: 72px minmax(0, 1fr) !important;
gap: 16px !important;
align-items: flex-start !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
html body:not(.wp-admin) .view-message > div,
html body:not(.wp-admin) .view-message > .dspdp-col-sm-2,
html body:not(.wp-admin) .view-message > .dspdp-col-sm-9,
html body:not(.wp-admin) .view-message > .dsp-sm-9 {
width: auto !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
float: none !important;
min-width: 0 !important;
}
/* Avatar */
html body:not(.wp-admin) .view-message > .dspdp-col-sm-2 {
grid-column: 1 !important;
width: 72px !important;
max-width: 72px !important;
}
html body:not(.wp-admin) .view-message > .dspdp-col-sm-2 > a {
display: block !important;
width: 72px !important;
height: 72px !important;
border-radius: 50% !important;
overflow: hidden !important;
background: var(--sh-bg-soft) !important;
border: 2px solid #fff !important;
box-shadow: 0 2px 8px rgba(26, 26, 46, 0.08) !important;
}
html body:not(.wp-admin) .view-message > .dspdp-col-sm-2 img {
width: 72px !important;
height: 72px !important;
max-width: 72px !important;
max-height: 72px !important;
border-radius: 50% !important;
object-fit: cover !important;
display: block !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
/* Content column */
html body:not(.wp-admin) .view-message > .dspdp-col-sm-9,
html body:not(.wp-admin) .view-message > .dsp-sm-9 {
grid-column: 2 !important;
}
html body:not(.wp-admin) .view-message .msg-info {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
html body:not(.wp-admin) .view-message .msg-info > div {
margin: 0 !important;
padding: 0 !important;
}
/* Sender name */
html body:not(.wp-admin) .view-message .msg-info .name,
html body:not(.wp-admin) .view-message .msg-info .dspdp-h4,
html body:not(.wp-admin) .view-message .msg-info .dspdp-text-info {
font-size: 17px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
margin: 0 !important;
padding: 0 !important;
letter-spacing: -0.01em !important;
background: none !important;
background-image: none !important;
-webkit-text-fill-color: var(--sh-text) !important;
display: block !important;
line-height: 1.2 !important;
}
/* Date */
html body:not(.wp-admin) .view-message .msg-info .dsp-msg-date {
display: block !important;
font-size: 11px !important;
color: var(--sh-text-muted) !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
margin: 4px 0 14px !important;
padding: 0 !important;
background: transparent !important;
}
/* Body message bubble */
html body:not(.wp-admin) .view-message .msg-info .dspdp-spacer,
html body:not(.wp-admin) .view-message .msg-info .dspdp-spacer.dsp-spacer {
display: block !important;
margin: 0 !important;
padding: 14px 18px !important;
background: linear-gradient(135deg, #fdebf4, #fff) !important;
border: 1px solid rgba(228, 81, 158, 0.18) !important;
border-radius: 16px !important;
font-size: 14px !important;
font-weight: 500 !important;
color: var(--sh-text) !important;
line-height: 1.6 !important;
white-space: pre-wrap !important;
word-wrap: break-word !important;
box-shadow: 0 2px 8px rgba(228, 81, 158, 0.06) !important;
}
/* Mobile */
@media (max-width: 560px) {
html body:not(.wp-admin) .view-message {
grid-template-columns: 56px minmax(0, 1fr) !important;
gap: 12px !important;
}
html body:not(.wp-admin) .view-message > .dspdp-col-sm-2 {
width: 56px !important;
}
html body:not(.wp-admin) .view-message > .dspdp-col-sm-2 > a,
html body:not(.wp-admin) .view-message > .dspdp-col-sm-2 img {
width: 56px !important;
height: 56px !important;
}
}
/* ZONE_Z79_END */
/* ==========================================================================
ZONE Z80 — Sent message list (re-layout with grid, kill inline floats)
========================================================================== */
html body:not(.wp-admin) ul.sent-message-page.clearfix,
html body:not(.wp-admin) ul.sent-message-page.no-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
html body:not(.wp-admin) ul.sent-message-page > li.dspdp-clearfix,
html body:not(.wp-admin) ul.sent-message-page > li {
display: grid !important;
grid-template-columns: 28px 56px 1fr 40px !important;
gap: 14px !important;
align-items: center !important;
padding: 14px 16px !important;
margin: 0 !important;
background: #fff !important;
border: 1px solid var(--sh-divider) !important;
border-radius: 14px !important;
list-style: none !important;
transition: border-color 180ms var(--sh-ease-out), transform 180ms !important;
}
html body:not(.wp-admin) ul.sent-message-page > li:hover {
border-color: rgba(228, 81, 158, 0.32) !important;
transform: translateY(-1px);
}
/* Checkbox (kill inline float:left + margin) */
html body:not(.wp-admin) ul.sent-message-page > li > .dspdp-check,
html body:not(.wp-admin) ul.sent-message-page > li span.dspdp-check {
grid-column: 1 !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
html body:not(.wp-admin) ul.sent-message-page > li .dspdp-check input[type="checkbox"] {
width: 18px !important;
height: 18px !important;
accent-color: var(--sh-accent) !important;
margin: 0 !important;
cursor: pointer !important;
}
/* Avatar */
html body:not(.wp-admin) ul.sent-message-page > li > .image {
grid-column: 2 !important;
display: block !important;
width: 56px !important;
height: 56px !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 50% !important;
overflow: hidden !important;
background: var(--sh-bg-soft) !important;
border: 1px solid var(--sh-divider) !important;
}
html body:not(.wp-admin) ul.sent-message-page > li > .image > a {
display: block !important;
width: 100% !important;
height: 100% !important;
border-radius: 50% !important;
overflow: hidden !important;
}
html body:not(.wp-admin) ul.sent-message-page > li > .image img,
html body:not(.wp-admin) ul.sent-message-page > li > .image img.img2 {
width: 56px !important;
height: 56px !important;
max-width: 56px !important;
max-height: 56px !important;
min-width: 56px !important;
min-height: 56px !important;
object-fit: cover !important;
display: block !important;
border-radius: 50% !important;
float: none !important;
margin: 0 !important;
}
/* Info block */
html body:not(.wp-admin) ul.sent-message-page > li > .msg-info {
grid-column: 3 !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
html body:not(.wp-admin) ul.sent-message-page > li > .msg-info > ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: auto 1fr !important;
gap: 2px 10px !important;
align-items: baseline !important;
}
html body:not(.wp-admin) ul.sent-message-page > li > .msg-info > ul > li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
font-size: 13px !important;
color: var(--sh-text-2) !important;
display: block !important;
}
/* Name — full width row 1 */
html body:not(.wp-admin) ul.sent-message-page > li > .msg-info > ul > li.name,
html body:not(.wp-admin) ul.sent-message-page > li > .msg-info > ul > li.name.age-text,
html body:not(.wp-admin) ul.sent-message-page > li > .msg-info > ul > li.name.dspdp-bold {
grid-column: 1 / -1 !important;
font-size: 15px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
margin: 0 0 3px !important;
}
/* "Sent" label */
html body:not(.wp-admin) ul.sent-message-page > li > .msg-info > ul > li:nth-child(2) {
grid-column: 1 !important;
font-size: 11px !important;
font-weight: 700 !important;
color: var(--sh-text-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
}
/* "Subject" label */
html body:not(.wp-admin) ul.sent-message-page > li > .msg-info > ul > li:nth-child(3) {
grid-column: 1 !important;
font-size: 11px !important;
font-weight: 700 !important;
color: var(--sh-text-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
}
/* Body preview (spans rows 2 & 3 of col 2) */
html body:not(.wp-admin) ul.sent-message-page > li > .msg-info > ul > li:nth-child(4) {
grid-column: 2 !important;
grid-row: 2 / span 2 !important;
font-size: 14px !important;
color: var(--sh-text) !important;
font-weight: 500 !important;
overflow: hidden !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
align-self: center !important;
}
/* Read/unread indicator */
html body:not(.wp-admin) ul.sent-message-page > li > .read-message {
grid-column: 4 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
background: var(--sh-bg-soft) !important;
border: 1px solid var(--sh-divider) !important;
}
html body:not(.wp-admin) ul.sent-message-page > li > .read-message img {
width: 18px !important;
height: 18px !important;
max-width: 18px !important;
max-height: 18px !important;
opacity: 0.75 !important;
display: block !important;
object-fit: contain !important;
}
/* Clearfix helper divs — hide */
html body:not(.wp-admin) .message-block-sent > .clearfix,
html body:not(.wp-admin) .message-block-sent div[style*="float:left"][style*="width:100%"] {
display: none !important;
}
/* Mobile */
@media (max-width: 560px) {
html body:not(.wp-admin) ul.sent-message-page > li.dspdp-clearfix,
html body:not(.wp-admin) ul.sent-message-page > li {
grid-template-columns: 28px 56px 1fr !important;
}
html body:not(.wp-admin) ul.sent-message-page > li > .read-message {
grid-column: 3 !important;
grid-row: 2 !important;
justify-self: end !important;
}
}
/* ZONE_Z80_END */
/* ==========================================================================
ZONE Z81 — Flatten gradient text/underlines to single accent color
========================================================================== */
/* Footer column title underline — single pink color */
html body:not(.wp-admin) .site-footer .footer-title::after,
html body:not(.wp-admin) .site-footer .widget-title::after {
background: var(--sh-accent) !important;
background-image: none !important;
}
/* "Make memories" span — solid pink */
html body:not(.wp-admin) .sh-footer-hero__title span {
background: none !important;
background-image: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
-webkit-text-fill-color: var(--sh-accent) !important;
color: var(--sh-accent) !important;
}
/* Stat numbers (8,000+ / 150+ / 500+ / 24/7) — solid pink */
html body:not(.wp-admin) .sh-footer-stat__num {
background: none !important;
background-image: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
-webkit-text-fill-color: var(--sh-accent) !important;
color: var(--sh-accent) !important;
}
/* ZONE_Z81_END */
/* ==========================================================================
ZONE Z82 — Hide "Edit Cover Photo" button (no cover functionality)
========================================================================== */
html body:not(.wp-admin) a.trigger-cover-photo,
html body:not(.wp-admin) .trigger-cover-photo,
html body:not(.wp-admin) .change-cover-photo,
html body:not(.wp-admin) .wpee-datebook-cover-actions,
html body:not(.wp-admin) .profile-header-right.wpee-datebook-cover-actions {
display: none !important;
}
/* ZONE_Z82_END */
/* ==========================================================================
ZONE Z83 — Kill parent theme's .nav-menu > a ::before/::after underline
========================================================================== */
html body:not(.wp-admin) .menu.nav-menu > li > a::before,
html body:not(.wp-admin) .menu.nav-menu > li > a::after,
html body:not(.wp-admin) #primary-menu.menu.nav-menu > li > a::before,
html body:not(.wp-admin) #primary-menu.menu.nav-menu > li > a::after,
html body:not(.wp-admin) .main-navigation .menu-main-menu-container .current-menu-item > a::before,
html body:not(.wp-admin) .main-navigation .menu-main-menu-container .current-menu-item > a::after,
html body:not(.wp-admin) .line-animate > a::before,
html body:not(.wp-admin) .line-animate > a::after {
content: none !important;
display: none !important;
background: transparent !important;
background-color: transparent !important;
width: 0 !important;
height: 0 !important;
}
/* ZONE_Z83_END */
/* ==========================================================================
Z84 — Login/Register: frame the card + unify input styles
========================================================================== */
/* Wrap login/register card in a rounded frame */
html body:not(.wp-admin) .wpee-register-form-wrap .wpee-lr-tab-content-wrap,
html body:not(.wp-admin) .wpee-register-form--standalone .wpee-lr-tab-content-wrap {
background: #fff !important;
border: 1px solid var(--sh-divider) !important;
border-radius: 22px !important;
box-shadow: 0 10px 30px rgba(26, 26, 46, 0.06) !important;
padding: 36px 32px !important;
max-width: 480px !important;
margin: 0 auto !important;
width: 100% !important;
}
/* Unify ALL login/register inputs (username, password, email) */
html body:not(.wp-admin) .wpee-register-form-wrap input[type="text"],
html body:not(.wp-admin) .wpee-register-form-wrap input[type="email"],
html body:not(.wp-admin) .wpee-register-form-wrap input[type="password"],
html body:not(.wp-admin) .wpee-register-form-wrap .form-control,
html body:not(.wp-admin) .wpee-register-form-wrap .dsp-form-control,
html body:not(.wp-admin) .wpee-register-form-wrap .dspdp-form-control,
html body:not(.wp-admin) .wpee-lr-tab-content-wrap input[type="text"],
html body:not(.wp-admin) .wpee-lr-tab-content-wrap input[type="email"],
html body:not(.wp-admin) .wpee-lr-tab-content-wrap input[type="password"],
html body:not(.wp-admin) .wpee-lr-tab-content-wrap .form-control,
html body:not(.wp-admin) .wpee-lr-tab-content-wrap .dsp-form-control {
width: 100% !important;
height: 48px !important;
min-height: 48px !important;
padding: 0 16px !important;
padding-right: 16px !important;
border: 1.5px solid var(--sh-divider) !important;
border-radius: 14px !important;
background: var(--sh-bg-soft) !important;
background-image: none !important;
color: var(--sh-text) !important;
font-size: 15px !important;
font-weight: 500 !important;
line-height: 1 !important;
box-shadow: none !important;
transition: border-color 180ms, box-shadow 180ms, background 180ms !important;
box-sizing: border-box !important;
}
html body:not(.wp-admin) .wpee-register-form-wrap input:focus,
html body:not(.wp-admin) .wpee-lr-tab-content-wrap input:focus {
outline: none !important;
border-color: var(--sh-accent) !important;
background: #fff !important;
box-shadow: 0 0 0 4px rgba(228, 81, 158, 0.12) !important;
}
/* Password wrapper with eye icon — match input size */
html body:not(.wp-admin) .wpee-lr-tab-content-wrap .password-wrapper {
position: relative !important;
width: 100% !important;
}
html body:not(.wp-admin) .wpee-lr-tab-content-wrap .password-wrapper input {
padding-right: 48px !important;
}
html body:not(.wp-admin) .wpee-lr-tab-content-wrap .toggle-password,
html body:not(.wp-admin) .wpee-lr-tab-content-wrap #toggle-password,
html body:not(.wp-admin) .wpee-lr-tab-content-wrap #toggle-old-password,
html body:not(.wp-admin) .wpee-lr-tab-content-wrap #toggle-confirm-password {
position: absolute !important;
right: 14px !important;
top: 50% !important;
transform: translateY(-50%) !important;
color: var(--sh-text-muted) !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 22px !important;
height: 22px !important;
z-index: 2 !important;
}
html body:not(.wp-admin) .wpee-lr-tab-content-wrap .toggle-password:hover {
color: var(--sh-accent) !important;
}
/* Labels — consistent */
html body:not(.wp-admin) .wpee-lr-tab-content-wrap .form-group > label {
display: block !important;
font-size: 12px !important;
font-weight: 800 !important;
color: var(--sh-text-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
margin: 0 0 8px !important;
}
html body:not(.wp-admin) .wpee-lr-tab-content-wrap .form-group {
margin: 0 0 16px !important;
}
/* Remember me + Forgot row */
html body:not(.wp-admin) .wpee-lr-tab-content-wrap .remember-me-group {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
margin: 4px 0 20px !important;
}
html body:not(.wp-admin) .wpee-lr-tab-content-wrap .remember-me-group .form-group {
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
}
html body:not(.wp-admin) .wpee-lr-tab-content-wrap .remember-me-group .form-group label {
margin: 0 !important;
text-transform: none !important;
font-size: 13px !important;
font-weight: 600 !important;
color: var(--sh-text-2) !important;
letter-spacing: 0 !important;
cursor: pointer !important;
}
html body:not(.wp-admin) .wpee-lr-tab-content-wrap .remember-me-group input[type="checkbox"] {
width: 18px !important;
height: 18px !important;
accent-color: var(--sh-accent) !important;
margin: 0 !important;
cursor: pointer !important;
}
/* Login submit button — full-width pink pill */
html body:not(.wp-admin) .wpee-lr-tab-content-wrap input.btn.btn-primary,
html body:not(.wp-admin) .wpee-lr-tab-content-wrap input[name="login_button"],
html body:not(.wp-admin) .wpee-lr-tab-content-wrap input[type="submit"] {
width: 100% !important;
height: 50px !important;
padding: 0 24px !important;
background: var(--sh-accent) !important;
background-image: none !important;
color: #fff !important;
border: 0 !important;
border-radius: 999px !important;
font-size: 15px !important;
font-weight: 800 !important;
letter-spacing: 0.02em !important;
cursor: pointer !important;
margin: 8px 0 0 !important;
box-shadow: none !important;
filter: none !important;
text-shadow: none !important;
transition: background 180ms, transform 180ms !important;
}
html body:not(.wp-admin) .wpee-lr-tab-content-wrap input[type="submit"]:hover {
background: var(--sh-accent-600) !important;
transform: translateY(-1px);
}
/* Z84_END */
/* ==========================================================================
Z85 — Popular member card: no border on hover
========================================================================== */
html body:not(.wp-admin) .wpee-online-member-card,
html body:not(.wp-admin) .wpee-online-member-card:hover,
html body:not(.wp-admin) .online-members-section .wpee-online-member-card:hover,
html body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-card:hover,
html body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-card:hover .wpee-online-member-link-inner,
html body:not(.wp-admin) .online-members-section--enhanced .wpee-online-member-card:hover > a {
border: 0 !important;
border-color: transparent !important;
outline: 0 !important;
}
/* Z85_END */
/* ==========================================================================
Z86 — Report User popup
========================================================================== */
html body:not(.wp-admin) .wpee-report-user-form-wrap.wpee-popup-message {
display: none !important;
position: fixed !important;
inset: 0 !important;
z-index: 10500 !important;
background: rgba(26, 26, 46, 0.55) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
align-items: center !important;
justify-content: center !important;
padding: 20px !important;
}
html body:not(.wp-admin) .wpee-report-user-form-wrap.wpee-popup-message.is-open {
display: flex !important;
flex-direction: column !important;
}
/* Card sits centered */
html body:not(.wp-admin) .wpee-report-user-form-wrap.wpee-popup-message .wpee-inner-msg {
position: relative !important;
width: 92vw !important;
max-width: 480px !important;
background: #fff !important;
border-radius: 22px !important;
box-shadow: 0 30px 80px rgba(26, 26, 46, 0.32) !important;
padding: 28px !important;
margin: 0 auto !important;
}
/* Title we inject */
html body:not(.wp-admin) .wpee-report-user-form-wrap .sh-report-title {
position: absolute !important;
top: 28px !important;
left: 50% !important;
transform: translateX(-50%) !important;
font-size: 17px !important;
font-weight: 800 !important;
color: var(--sh-text) !important;
margin: 0 !important;
padding: 0 !important;
letter-spacing: -0.01em !important;
z-index: 5 !important;
white-space: nowrap !important;
pointer-events: none !important;
}
/* Close button */
html body:not(.wp-admin) .wpee-report-user-form-wrap .sh-report-close {
position: absolute !important;
top: 14px !important;
right: 14px !important;
width: 38px !important;
height: 38px !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 50% !important;
background: var(--sh-bg-soft) !important;
color: var(--sh-text) !important;
border: 1px solid var(--sh-divider) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 22px !important;
line-height: 1 !important;
cursor: pointer !important;
z-index: 10 !important;
transition: background 180ms, color 180ms, transform 180ms !important;
}
html body:not(.wp-admin) .wpee-report-user-form-wrap .sh-report-close:hover {
background: var(--sh-accent) !important;
color: #fff !important;
border-color: var(--sh-accent) !important;
transform: scale(1.05);
}
/* Form */
html body:not(.wp-admin) .wpee-report-user-form-wrap #wpee-report-user,
html body:not(.wp-admin) .wpee-report-user-form-wrap form {
margin: 48px 0 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
}
html body:not(.wp-admin) .wpee-report-user-form-wrap .form-group {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
margin: 0 !important;
}
html body:not(.wp-admin) .wpee-report-user-form-wrap label {
font-size: 11px !important;
font-weight: 800 !important;
color: var(--sh-text-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
margin: 0 !important;
}
html body:not(.wp-admin) .wpee-report-user-form-wrap textarea {
width: 100% !important;
padding: 14px 16px !important;
border: 1.5px solid var(--sh-divider) !important;
border-radius: 16px !important;
background: #fff !important;
color: var(--sh-text) !important;
font-size: 14px !important;
font-family: inherit !important;
min-height: 120px !important;
resize: vertical !important;
transition: border-color 180ms, box-shadow 180ms !important;
box-shadow: none !important;
}
html body:not(.wp-admin) .wpee-report-user-form-wrap textarea:focus {
border-color: var(--sh-accent) !important;
box-shadow: 0 0 0 4px rgba(228, 81, 158, 0.12) !important;
outline: none !important;
}
html body:not(.wp-admin) .wpee-report-user-form-wrap input[type="submit"] {
width: 100% !important;
padding: 12px 28px !important;
background: var(--sh-accent) !important;
color: #fff !important;
border: 0 !important;
border-radius: 999px !important;
font-size: 14px !important;
font-weight: 800 !important;
cursor: pointer !important;
min-height: 46px !important;
box-shadow: none !important;
transition: background 180ms, transform 180ms !important;
}
html body:not(.wp-admin) .wpee-report-user-form-wrap input[type="submit"]:hover {
background: var(--sh-accent-600) !important;
transform: translateY(-1px);
}
/* Z86_END */
/* ==========================================================================
Z87 — Delete button on profile activity feed items
========================================================================== */
html body:not(.wp-admin) .wpee-feed-list {
position: relative !important;
}
html body:not(.wp-admin) .wpee-feed-list .sh-feed-delete {
position: absolute !important;
top: 14px !important;
right: 14px !important;
width: 32px !important;
height: 32px !important;
padding: 0 !important;
border-radius: 50% !important;
background: #fff !important;
color: var(--sh-text-muted) !important;
border: 1px solid var(--sh-divider) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
opacity: 0 !important;
transition: opacity 180ms, background 180ms, color 180ms, border-color 180ms, transform 180ms !important;
z-index: 5 !important;
box-shadow: none !important;
}
html body:not(.wp-admin) .wpee-feed-list:hover .sh-feed-delete {
opacity: 1 !important;
}
html body:not(.wp-admin) .wpee-feed-list .sh-feed-delete:hover {
background: #fef2f2 !important;
color: #b91c1c !important;
border-color: #fecaca !important;
transform: scale(1.05);
}
html body:not(.wp-admin) .wpee-feed-list .sh-feed-delete i {
font-size: 12px !important;
line-height: 1 !important;
}
html body:not(.wp-admin) .wpee-feed-list .sh-feed-delete[disabled] {
opacity: 0.5 !important;
cursor: not-allowed !important;
}
/* On touch devices — always show */
@media (hover: none) {
html body:not(.wp-admin) .wpee-feed-list .sh-feed-delete {
opacity: 1 !important;
}
}
/* Z87_END */
/* ==========================================================================
Z88 — Edit Profile: cleaner, more organized grid layout
========================================================================== */
/* Personal Information — 2 or 3 col grid */
html body:not(.wp-admin) .wpee-edit-profile-form .edit-profile {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 16px 20px !important;
align-items: start !important;
}
@media (min-width: 920px) {
html body:not(.wp-admin) .wpee-edit-profile-form .edit-profile {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
@media (max-width: 560px) {
html body:not(.wp-admin) .wpee-edit-profile-form .edit-profile {
grid-template-columns: 1fr !important;
}
}
/* Birth Date group spans all columns */
html body:not(.wp-admin) .wpee-edit-profile-form .edit-profile .form-outer-group {
grid-column: 1 / -1 !important;
max-width: none !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
html body:not(.wp-admin) .wpee-edit-profile-form .form-outer-group > label {
font-size: 11px !important;
font-weight: 800 !important;
color: var(--sh-text-muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
margin: 0 !important;
}
html body:not(.wp-admin) .wpee-edit-profile-form .form-outer-group .age-group {
display: grid !important;
grid-template-columns: 1.3fr 0.7fr 1fr !important;
gap: 10px !important;
}
@media (max-width: 480px) {
html body:not(.wp-admin) .wpee-edit-profile-form .form-outer-group .age-group {
grid-template-columns: 1fr 1fr !important;
}
html body:not(.wp-admin) .wpee-edit-profile-form .form-outer-group .age-group .form-group:nth-child(3) {
grid-column: 1 / -1 !important;
}
}
/* Profile Questions — 3 col grid on desktop, 2 on tablet, 1 on mobile */
html body:not(.wp-admin) .wpee-edit-profile-form .wpee-question {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 16px 20px !important;
align-items: start !important;
}
@media (max-width: 860px) {
html body:not(.wp-admin) .wpee-edit-profile-form .wpee-question {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 540px) {
html body:not(.wp-admin) .wpee-edit-profile-form .wpee-question {
grid-template-columns: 1fr !important;
}
}
/* Textareas (About Me / My Interests) — full width */
html body:not(.wp-admin) .wpee-edit-profile-form .wpee-question > .form-group:has(textarea) {
grid-column: 1 / -1 !important;
}
/* "Make these profile questions private" checkbox — full width */
html body:not(.wp-admin) .wpee-edit-profile-form .wpee-question > .form-group.d-flex.align-center {
grid-column: 1 / -1 !important;
flex-direction: row !important;
align-items: center !important;
gap: 10px !important;
padding: 12px 16px !important;
margin: 4px 0 0 !important;
background: var(--sh-bg-soft) !important;
border: 1px dashed var(--sh-divider) !important;
border-radius: 14px !important;
}
/* Section separator between each card */
html body:not(.wp-admin) .wpee-edit-profile-form {
margin: 0 0 20px !important;
}
html body:not(.wp-admin) .wpee-edit-profile-form:last-child {
margin-bottom: 0 !important;
}
/* Photo section — cleaner row layout */
html body:not(.wp-admin) .wpee-edit-profile-form .image-edit-profile {
display: grid !important;
grid-template-columns: 120px 1fr !important;
gap: 20px !important;
align-items: center !important;
padding: 4px 0 18px !important;
border-bottom: 1px solid var(--sh-divider) !important;
margin: 0 0 18px !important;
}
html body:not(.wp-admin) .wpee-edit-profile-form .image-edit-profile > .form-group:first-child {
grid-column: 1 !important;
margin: 0 !important;
padding: 0 !important;
}
html body:not(.wp-admin) .wpee-edit-profile-form .image-edit-profile > .form-group:first-child img#photo_preview {
width: 120px !important;
height: 120px !important;
border-radius: 50% !important;
object-fit: cover !important;
border: 4px solid #fff !important;
box-shadow: 0 6px 18px rgba(228, 81, 158, 0.16) !important;
display: block !important;
}
html body:not(.wp-admin) .wpee-edit-profile-form .image-edit-profile > .form-group:last-child {
grid-column: 2 !important;
margin: 0 !important;
}
html body:not(.wp-admin) .wpee-edit-profile-form .image-edit-profile > .form-group:last-child::before {
content: "Upload new photo";
display: block;
font-size: 11px;
font-weight: 800;
color: var(--sh-text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 6px;
}
html body:not(.wp-admin) .wpee-edit-profile-form .image-edit-profile input[type="file"] {
padding: 10px 14px !important;
cursor: pointer !important;
}
/* "Make profile picture Private" checkbox row */
html body:not(.wp-admin) .wpee-edit-profile-form > .form-group.d-flex.align-center {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 10px !important;
padding: 12px 16px !important;
margin: 0 0 18px !important;
background: var(--sh-bg-soft) !important;
border: 1px dashed var(--sh-divider) !important;
border-radius: 14px !important;
}
html body:not(.wp-admin) .wpee-edit-profile-form > .form-group.d-flex.align-center input[type="checkbox"] {
width: 18px !important;
height: 18px !important;
accent-color: var(--sh-accent) !important;
margin: 0 !important;
}
html body:not(.wp-admin) .wpee-edit-profile-form > .form-group.d-flex.align-center span.text,
html body:not(.wp-admin) .wpee-edit-profile-form > .form-group.d-flex.align-center span {
font-size: 13px !important;
font-weight: 700 !important;
color: var(--sh-text) !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
/* Submit row */
html body:not(.wp-admin) .wpee-edit-profile-form > .form-group:has(> input[type="submit"]) {
margin: 6px 0 0 !important;
padding: 0 !important;
display: flex !important;
justify-content: flex-end !important;
}
/* Z88_END */
/* ==========================================================================
Z89 — Edit Profile: force inputs to fill grid cells (width 100%)
========================================================================== */
html body:not(.wp-admin) .wpee-edit-profile-form .form-group {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 6px !important;
margin: 0 !important;
}
html body:not(.wp-admin) .wpee-edit-profile-form .form-group > input,
html body:not(.wp-admin) .wpee-edit-profile-form .form-group > select,
html body:not(.wp-admin) .wpee-edit-profile-form .form-group > textarea,
html body:not(.wp-admin) .wpee-edit-profile-form .form-group > .form-control,
html body:not(.wp-admin) .wpee-edit-profile-form .form-group > .dsp-form-control,
html body:not(.wp-admin) .wpee-edit-profile-form .form-group > .dspdp-form-control,
html body:not(.wp-admin) .wpee-edit-profile-form .form-group input.form-control,
html body:not(.wp-admin) .wpee-edit-profile-form .form-group select.form-control,
html body:not(.wp-admin) .wpee-edit-profile-form .form-group select.dspdp-form-control,
html body:not(.wp-admin) .wpee-edit-profile-form .form-group select.dsp-form-control,
html body:not(.wp-admin) .wpee-edit-profile-form .form-group input.dspdp-form-control,
html body:not(.wp-admin) .wpee-edit-profile-form .form-group input.dsp-form-control {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
flex: 1 1 auto !important;
}
/* Wrapper divs for State/City selects (plugin wraps select in #state_change/#city_change) */
html body:not(.wp-admin) .wpee-edit-profile-form .form-group > #state_change,
html body:not(.wp-admin) .wpee-edit-profile-form .form-group > #city_change,
html body:not(.wp-admin) .wpee-edit-profile-form .form-group > span.dsp-sm-6,
html body:not(.wp-admin) .wpee-edit-profile-form .form-group > span.dspdp-col-sm-6 {
width: 100% !important;
display: block !important;
float: none !important;
padding: 0 !important;
margin: 0 !important;
}
html body:not(.wp-admin) .wpee-edit-profile-form .form-group > #state_change select,
html body:not(.wp-admin) .wpee-edit-profile-form .form-group > #city_change select,
html body:not(.wp-admin) .wpee-edit-profile-form .form-group > span.dsp-sm-6 input,
html body:not(.wp-admin) .wpee-edit-profile-form .form-group > span.dspdp-col-sm-6 input {
width: 100% !important;
}
/* Birth Date — 3 equal columns, each select 100% of its cell */
html body:not(.wp-admin) .wpee-edit-profile-form .form-outer-group .age-group {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 10px !important;
width: 100% !important;
}
html body:not(.wp-admin) .wpee-edit-profile-form .form-outer-group .age-group .form-group {
width: 100% !important;
min-width: 0 !important;
}
html body:not(.wp-admin) .wpee-edit-profile-form .form-outer-group .age-group select {
width: 100% !important;
min-width: 0 !important;
}
/* Z89_END */
/* ==========================================================================
Z90 — "Make these profile questions private" — pull checkbox + label together
========================================================================== */
html body:not(.wp-admin) .wpee-edit-profile-form .wpee-question > .form-group.d-flex.align-center,
html body:not(.wp-admin) .wpee-edit-profile-form > .form-group.d-flex.align-center {
justify-content: flex-start !important;
gap: 10px !important;
}
html body:not(.wp-admin) .wpee-edit-profile-form .form-group.d-flex.align-center > input[type="checkbox"] {
flex: 0 0 auto !important;
width: 18px !important;
height: 18px !important;
margin: 0 !important;
}
html body:not(.wp-admin) .wpee-edit-profile-form .form-group.d-flex.align-center > span {
flex: 0 1 auto !important;
margin: 0 !important;
text-align: left !important;
}
/* Z90_END */
/* ==========================================================================
Z91 — Gift popup: make card-wide click reliably select the radio
========================================================================== */
/* Ensure .form-group is a positioned click boundary */
html body .wpee-gift-popup-overlay .wpee-gift-inner > form > .form-group,
html body .wpee-gift-popup-overlay .wpee-gift-inner form .form-group {
position: relative !important;
cursor: pointer !important;
}
/* Radio overlay — full card, transparent, on top */
html body .wpee-gift-popup-overlay .wpee-gift-inner form .form-group input[type="radio"].wpee-gift {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0 !important;
cursor: pointer !important;
z-index: 10 !important;
pointer-events: auto !important;
}
/* Visual children — can't block the overlay */
html body .wpee-gift-popup-overlay .wpee-gift-inner form .form-group img,
html body .wpee-gift-popup-overlay .wpee-gift-inner form .form-group .wpdating-gift-price {
pointer-events: none !important;
position: relative !important;
z-index: 1 !important;
}
/* Z91_END */
/* ==========================================================================
Z92 — Activity feed: premium row icon + wink cost chip
========================================================================== */
html body:not(.wp-admin) .wpdating-history-wrapper .sh-row__icon--premium {
background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
color: #b45309 !important;
}
html body:not(.wp-admin) .wpdating-history-wrapper .sh-row__icon--premium i {
font-size: 20px !important;
}
/* Z92_END */
/* ==========================================================================
Z93 — Empty states: winks/friends/gifts no-record message (generic)
========================================================================== */
html body:not(.wp-admin) .profile-section-content .box-border,
html body:not(.wp-admin) .profile-friends-list .box-border,
html body:not(.wp-admin) #m_list_friend .box-border,
html body:not(.wp-admin) #m_list_received_winks .box-border {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
html body:not(.wp-admin) .profile-section-content .box-pedding:has(> div > .wpee-error-message),
html body:not(.wp-admin) .profile-section-content .box-pedding:has(.wpee-error-message),
html body:not(.wp-admin) .profile-friends-list .box-pedding,
html body:not(.wp-admin) #m_list_friend .box-pedding {
padding: 0 !important;
background: transparent !important;
}
html body:not(.wp-admin) .wpee-error-message {
display: block !important;
padding: 48px 24px !important;
margin: 0 !important;
background: var(--sh-bg-soft) !important;
border: 1px dashed var(--sh-divider) !important;
border-radius: 18px !important;
color: var(--sh-text-muted) !important;
font-size: 14px !important;
font-weight: 600 !important;
text-align: center !important;
}
/* Z93_END */