/* Homepage hero: remove top strip under header */
.home .banner-row.homepage-row-1.section-theme-padding {
  padding-top: 0 !important;
  margin-top: 0 !important;
  overflow: visible !important;
}

/* Mobile rule in this file adds 35px top padding to all banner rows */
@media (max-width: 767px) {
  .home .banner-row.homepage-row-1 {
    padding-top: 0 !important;
  }
}

/* Homepage: hide duplicate hero login/register row under custom banner */
.home .homepage-row-1 .vc_row.logout-screens {
  display: none !important;
}

/*
Theme Name: Olympus child Theme
Theme URI: https://olympus.crumina.net/
Author: Crumina Team
Author URI: https://crumina.net/
Description: BuddyPress WordPress child theme.
Version: 1
Template:olympus
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: olympus
*/

/*****************************************************************
Add Custom styles below 
******************************************************************/
body {
    font-family: "Inter", sans-serif !important;
}
#content {
    margin: 0px !important;
}

/* Stunning header – hidden on login, register, forgot password */
body:has(#login-page) #stunning-header,
body:has(#register-page) #stunning-header,
body:has(#lost-password-page) #stunning-header,
body:has(#content .youzify-membership-form.youzify-membership-login-page) #stunning-header,
body:has(#content .youzify-membership-lost_password-page) #stunning-header,
body:has(#content .youzify-membership-lost-password-page) #stunning-header,
body:has(#profile-intro-page) #stunning-header,
/* Safari fallback: class added by inline JS when auth markup is detected. */
body.tp-auth-page #stunning-header {
  display: none !important;
}
/* Base Inter font class */
.font-inter {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}
  
/* Weight-specific classes */
.weight-100 { font-weight: 100; }
.weight-200 { font-weight: 200; }
.weight-300 { font-weight: 300; }
.weight-400 { font-weight: 400; }
.weight-500 { font-weight: 500; }
.weight-600 { font-weight: 600; }
.weight-700 { font-weight: 700; }
.weight-800 { font-weight: 800; }
.weight-900 { font-weight: 900; }

.text-xl { font-size: 1.25rem; }
.text-6xl { font-size: 4.5rem; } 

.color-dark{
    color: #000;
}
.mbt-100{
    margin: 100px auto;
}
.header-cta {
    width: 80%;
    display: block;
    text-align: center;
    padding: 10px 0px;
    border-radius: 8px;
    border: 1px solid #2C2C2C;
    text-transform: uppercase;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    margin: 0 auto;
}
a.dark-bg.header-cta{
    background: #2c2c2c;
    color: #fff;
}
body.dark-mode a.header-cta {
    border: 1px solid #fff;
    background: #20232b;
}
body.dark-mode #youzify .acomment-options .yz-post-reactors-list .yzpr-reactions-count, 
body.dark-mode #youzify .youzify-activity-statistics .yz-post-reactors-list .yzpr-reactions-count{
    background-color: #1f232b !important;
}
a.header-cta.registeration-btn {
    background: #fff;
    color: #2c2c2c;
}
/* Mobile: Log in / Register CTAs (data-show-youzify-login) – reliable tap, no delay */
@media (max-width: 767px) {
    a.header-cta,
    a[data-show-youzify-login="true"] {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        position: relative;
        z-index: 5;
    }
    /* Hero row (bottom Log in / Register): stack above adjacent content so taps register on mobile */
    .logout-screens {
        position: relative;
        z-index: 999;
    }
    .logout-screens a.header-cta,
    .logout-screens a[data-show-youzify-login="true"],
    .logout-screens a.explore-btn {
        min-height: 48px;
        width: 100%;
        z-index: 2;
    }
    /* Invisible overlay (injected by JS) captures taps when something else covers the links */
    .tp-hero-cta-overlay {
        position: absolute;
        inset: 0;
        z-index: 9999;
        display: flex;
        pointer-events: auto;
    }
    .tp-hero-cta-overlay .tp-hero-cta-zone {
        flex: 1;
        min-height: 48px;
    }
}
.section-heading{
    font-size: 48px;
    font-weight: bold;
    max-width: 600px;
    text-align: center;
    margin: 0 auto;
}

/** Places Carousel styles **/
.tresspassers-places-carousel .slick-list{
    overflow: visible;
}
.card {
    min-width: auto;
    background-color: #000;
    color: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  }
.card:not(:last-child) {
    margin-right: 25px;
}
  .card img {
    width: 100%;
    height: auto;
    display: block;
  }

  .card-text {
    position: relative;
    margin-top: -135px; /* pull text upward over the image */
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  }

  .card-text h2 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #fff !important;
    font-weight: bold;
  }

  .card-text p {
    font-size: 16px;
    line-height: 1.4;
    color: #fff !important;
  }


button.slick-arrow {
    left: 92%;
    top: 45% !important;
    height: 94px;
    display: block !important;
    background: url(https://globalrescue.com/wp-content/themes/global-rescue/img/slick-nav.svg) !important;
    width: 95px;
    margin-bottom: 30px;
}

/* Avoid z-index: -1 on disabled arrows — it leaves the circular hit-area visible behind slides. */
.disabled-slick {
    z-index: -1 !important;
}
/* Fully remove disabled control from layout/paint (mobile WebKit still showed z-index/opacity hacks). */
.tresspassers-places-carousel .slick-arrow.disabled-slick,
.tresspassers-places-carousel .slick-arrow.slick-disabled {
    display: none !important;
    pointer-events: none !important;
}
button.slick-arrow:before {
    content: "" !important;
}
/* Slick’s :before still reserves space / paints in some builds; hide it when using a background SVG. */
.tresspassers-places-carousel button.slick-arrow:before,
.tresspassers-places-carousel button.slick-arrow:after {
    display: none !important;
}
.tresspassers-places-carousel button.slick-arrow {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.tresspassers-places-carousel .slick-prev:not(.disabled-slick):not(.slick-disabled) {
    z-index: 1;
}
button.slick-prev.slick-arrow {
    transform: rotate(180deg);
}
button.slick-next.slick-arrow {
    top: 55% !important;
}

.section-inner-heading h2{
    font-size: 48px;
    font-weight: bold;
    max-width: 500px;
    text-align: left;
    line-height: 120%;
    margin-bottom: 30px !important;
}
.section-inner-desc p {
    font-size: 18px;
    max-width: 600px;
    margin-bottom: 30px !important;
    line-height: 160%;
    font-weight: 300;
}
.section-inner-desc ul{
    margin-block-start: 0px;
    margin-block-end: 0px;
    padding-inline-start: 0px;
}
.section-inner-desc ul li{
    list-style: none ;
    margin-bottom: 20px;
    font-size: 18px;
}
.section-inner-desc ul li:before{
    content: "";
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url(/wp-content/uploads/2025/05/Vector.svg);
    margin-right: 15px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-size: contain;
}
.dark-bg-radius-bordered-sec .vc_column-inner {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.bordered-image img{
    border-radius: 10px;
}
.section-inner-heading h3{
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    line-height: 120%;
    margin-bottom: 20px !important;
}
.section-inner-heading h1{
    font-size: 60px;
    font-weight: bold;
    text-align: center;
    line-height: 120%;
    margin-bottom: 50px !important;
}
a.white-bg {
    background: #fff;
    color: #000 !important;
}
.footer .logo-block img{
    width: auto;
    max-width: 100%;
}
.footer a, .site-copyright-text {
    color: #fff !important;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 300;
}

/* ── Footer – stacked, centered, compact (no divider lines) ── */
#footer,
section.footer,
.footer {
    padding: 18px 12px 10px !important;
}
#footer .container,
#footer .container-fluid,
.footer .container,
.footer .container-fluid {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

/* Stack the two text widgets vertically */
.footer .footer-content,
#footer .footer-content {
    margin-bottom: 0 !important;
}
.footer .footer-content .row,
#footer .footer-content .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
}
.footer .footer-content [class*="col-"],
#footer .footer-content [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center;
}

/* Title */
.footer-content .widget_text .title,
.footer-content #text-2 .title,
#footer .footer-content .widget_text .title {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    margin: 0 0 2px !important;
    line-height: 1.25 !important;
    color: rgba(255,255,255,0.85) !important;
}

/* Body text */
.footer-content .widget_text .textwidget p,
.footer-content #text-2 .textwidget p,
#footer .footer-content .textwidget p {
    font-size: 10px !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    margin-bottom: 0 !important;
    color: rgba(255,255,255,0.58) !important;
}

/* Space between stacked text blocks (no borders) */
.footer .footer-content [class*="col-"]:not(:first-child) {
    margin-top: 32px !important;
}

/* Logo + about block */
.footer .w-about.widget {
    text-align: center;
    padding-top: 12px;
}
.footer .logo-block {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 6px;
}
.footer .logo-block > a.logo.center,
.footer .logo-block > a.logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    line-height: 0;
}
.footer .logo-block .img-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.footer .logo-block img {
    max-height: 20px !important;
    width: auto !important;
    opacity: 0.9;
}
.footer .w-about-content-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 10px !important;
    line-height: 1.4 !important;
    margin-top: 4px;
    text-align: center;
}
.footer .w-about-content-wrap p {
    display: block;
    margin-bottom: 4px !important;
    text-align: center;
}
.footer .w-about-content-wrap p > a:not([href^="mailto:"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    text-align: center;
}
/* Theme ripple helper inside footer mail link can shift alignment; hide it here. */
.footer .w-about-content-wrap p > a .ripple-container,
#footer .w-about-content-wrap p > a .ripple-container {
    display: none !important;
}

/* Support email: inline mail icon + address (not a button) */
.footer .w-about-content-wrap a[href^="mailto:"],
#footer .w-about-content-wrap a[href^="mailto:"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    font-family: "Inter", sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.01em !important;
    color: #c4b5fd !important;
    text-decoration: none !important;
    text-align: center;
    background: none !important;
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
    transition: color 0.15s ease;
}
.footer .w-about-content-wrap a[href^="mailto:"]::before,
#footer .w-about-content-wrap a[href^="mailto:"]::before {
    content: "";
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    opacity: 0.88;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E")
        center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E")
        center / contain no-repeat;
}
.footer .w-about-content-wrap a[href^="mailto:"]:hover,
#footer .w-about-content-wrap a[href^="mailto:"]:hover {
    color: #e9d5ff !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    text-decoration-color: rgba(196, 181, 253, 0.55);
}
.footer .w-about-content-wrap a[href^="mailto:"]:focus-visible,
#footer .w-about-content-wrap a[href^="mailto:"]:focus-visible {
    outline: 2px solid rgba(167, 139, 250, 0.85);
    outline-offset: 3px;
    border-radius: 2px;
}
html[data-theme="light"] .footer .w-about-content-wrap a[href^="mailto:"],
html[data-theme="light"] #footer .w-about-content-wrap a[href^="mailto:"] {
    color: #6d28d9 !important;
}
html[data-theme="light"] .footer .w-about-content-wrap a[href^="mailto:"]:hover,
html[data-theme="light"] #footer .w-about-content-wrap a[href^="mailto:"]:hover {
    color: #5b21b6 !important;
    text-decoration-color: rgba(109, 40, 217, 0.45);
}

/* Socials row — #footer ul beats .footer .w-about .socials; reset padding so flex center is true center */
.footer .w-about .socials,
#footer .w-about .socials,
section.footer#footer .w-about ul.socials {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    list-style: none !important;
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 2px auto 0 !important;
    margin-bottom: 0 !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.footer .w-about .socials li,
#footer .w-about .socials li,
section.footer#footer .w-about .socials li {
    margin: 0 !important;
    padding: 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
    list-style-type: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    text-indent: 0;
}
.footer .w-about .socials .soc-item,
#footer .w-about .socials .soc-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    transition: background 0.2s;
    line-height: 0 !important;
    font-size: inherit;
    vertical-align: middle;
    box-sizing: border-box;
    text-decoration: none;
    overflow: hidden;
}
.footer .w-about .socials .soc-item:hover,
#footer .w-about .socials .soc-item:hover {
    background: rgba(255,255,255,0.18);
}
.footer .w-about .socials .soc-item img,
#footer .w-about .socials .soc-item img {
    display: block;
    width: 14px;
    height: 14px;
    max-width: 14px;
    max-height: 14px;
    object-fit: contain;
    object-position: center center;
    filter: brightness(0) invert(1);
    opacity: 0.85;
    margin: 0 auto;
    padding: 0;
    flex-shrink: 0;
}
/* Discord / icons8 SVGs often have uneven viewBox padding — keep glyph visually centered in circle */
.footer .w-about .socials .soc-item img.discord-icon,
#footer .w-about .socials .soc-item img.discord-icon {
    width: 15px;
    height: 15px;
    max-width: 15px;
    max-height: 15px;
    transform: translateY(0.5px);
}
/* Font / inline SVG from theme social templates — same optical box as .soc-item img */
.footer .w-about .socials .soc-item > i {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    line-height: 1;
    font-size: 14px;
}
.footer .w-about .socials .soc-item > svg {
    display: block;
    width: 14px;
    height: 14px;
    margin: 0;
    flex-shrink: 0;
}

/* Copyright */
.footer .sub-footer-copyright,
#footer .sub-footer-copyright {
    padding-top: 8px !important;
    padding-bottom: 0 !important;
    margin-top: 4px !important;
    border-top: none !important;
    text-align: center;
}
.footer .site-copyright-text,
#footer .site-copyright-text {
    font-size: 9px !important;
    line-height: 1.35 !important;
    color: rgba(255,255,255,0.38) !important;
}

/* General footer typography */
.footer a,
#footer a,
.footer .site-copyright-text {
    font-size: 10px !important;
    line-height: 1.4 !important;
}
.footer p,
#footer p {
    margin-bottom: 3px !important;
    font-size: 10px !important;
}
.footer ul,
.footer ol,
#footer ul,
#footer ol {
    margin-bottom: 3px !important;
    padding-left: 12px !important;
}

/* Undo global footer list padding for icon row — must follow #footer ul above (same specificity boost + no left indent). */
#footer ul.tp-footer-socials,
.footer ul.tp-footer-socials,
section.footer#footer ul.tp-footer-socials {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px;
    list-style: none !important;
    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 6px auto 0 !important;
    margin-bottom: 0 !important;
    width: fit-content !important;
    max-width: 100%;
    box-sizing: border-box;
}
#footer ul.tp-footer-socials > li,
.footer ul.tp-footer-socials > li {
    margin: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
    font-size: inherit !important;
    line-height: 0 !important;
    text-indent: 0 !important;
}

.footer li,
#footer li {
    margin-bottom: 2px !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
}
.footer .title,
.footer h1, .footer h2, .footer h3, .footer h4,
#footer .title,
#footer h1, #footer h2, #footer h3, #footer h4 {
    font-size: 10px !important;
    margin-bottom: 3px !important;
    line-height: 1.25 !important;
}

.youzify-membership-custom-cover{
    margin: 0 auto;
    background-size: 75%;
    background-repeat: no-repeat;
}

/* ============================================================
   Login page theme – match reference (login-page (1).html)
   Dark card, purple accent, Barlow, gradient title, social + form.
   ============================================================ */
/* Popup: full viewport + center (override Youzify template alignment) */
#youzify-popup-login,
.youzify-popup-login {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  font-family: 'Barlow', sans-serif !important;
  -webkit-overflow-scrolling: touch !important;
}
.youzify-popup-login.youzify-is-visible,
#youzify-popup-login.youzify-is-visible {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* Card in popup: true viewport center (ignores Youzify header/siblings) */
#youzify-popup-login .youzify-membership-form.youzify-membership-login-page,
.youzify-popup-login .youzify-membership-form.youzify-membership-login-page {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  max-height: calc(100vh - 48px) !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
}
/* Popup: extra gap so Facebook/Google don’t clip Account Details */
.youzify-popup-login .youzify-membership-social-buttons,
#youzify-popup-login .youzify-membership-social-buttons {
  margin-bottom: 28px !important;
}
.youzify-popup-login .youzify-membership-login-form,
#youzify-popup-login .youzify-membership-login-form {
  margin-top: 0 !important;
  padding-top: 8px !important;
}
/* Full /login/ page: even centering so card doesn't clip in the middle */
#login-page {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 80vh !important;
  padding: 40px 24px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
#login-page .youzify-membership-form.youzify-membership-login-page {
  margin: auto !important;
  flex-shrink: 0 !important;
}
/* ── Login card (exact values from login-page reference) ── */
.youzify-membership-form.youzify-membership-login-page {
  background: #161b22 !important;
  border: 1px solid rgba(167,139,250,0.18) !important;
  border-radius: 20px !important;
  width: 100% !important;
  max-width: 440px !important;
  padding: 40px 36px 36px !important;
  position: relative !important;
  overflow: visible !important;
  font-family: 'Barlow', sans-serif !important;
  box-shadow:
    0 0 0 1px rgba(167,139,250,0.10),
    0 0 18px rgba(167,139,250,0.10),
    0 0 40px rgba(124,58,237,0.06),
    inset 0 80px 60px -80px rgba(167,139,250,0.07) !important;
  transition: box-shadow 0.3s ease !important;
}
.youzify-membership-form.youzify-membership-login-page:hover {
  box-shadow:
    0 0 0 1px rgba(167,139,250,0.18),
    0 0 24px rgba(167,139,250,0.14),
    0 0 48px rgba(124,58,237,0.08),
    inset 0 80px 60px -80px rgba(167,139,250,0.09) !important;
}
.youzify-membership-form.youzify-membership-login-page::before {
  display: none !important;
}
/* Header / title */
.youzify-membership-login-page .youzify-membership-form-header {
  display: block !important;
  background: transparent !important;
  border: none !important;
  padding: 0 0 6px !important;
  margin-bottom: 6px !important;
  text-align: center !important;
}
.youzify-membership-login-page .youzify-membership-form-cover {
  display: block !important;
  background-image: none !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 0 6px !important;
  border: none !important;
}
.youzify-membership-login-page .form-cover-title {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif !important;
  font-weight: 900 !important;
  line-height: 0.95 !important;
  letter-spacing: -1px !important;
  font-size: clamp(32px, 5vw, 48px) !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 2px 0 6px !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-image: radial-gradient(circle at 50% 50%, #ffe08a 0%, #a78bfa 18%, #e6edf3 45%, #e6edf3 100%) !important;
  background-size: 300% 300% !important;
  background-position: 50% 120% !important;
  color: #e6edf3 !important;
}
/* Social buttons – grid 1fr 1fr (side by side), clear space above Account Details */
.youzify-membership-login-page .youzify-membership-social-buttons {
  margin-bottom: 24px !important;
  padding: 0 !important;
  border: none !important;
  position: relative !important;
  z-index: 0 !important;
}
.youzify-membership-login-page .youzify-membership-login-form {
  margin-top: 0 !important;
  padding-top: 4px !important;
  position: relative !important;
  z-index: 0 !important;
}
.youzify-membership-login-page .youzify-membership-social-buttons ul {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.youzify-membership-login-page .youzify-membership-social-buttons ul li {
  margin: 0 !important;
  width: auto !important;
  float: none !important;
}
.youzify-membership-login-page .youzify-membership-social-buttons ul li a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 11px 16px !important;
  background: #1c2128 !important;
  border: 1px solid rgba(167,139,250,0.2) !important;
  border-radius: 10px !important;
  color: #e6edf3 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
  cursor: pointer !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
}
.youzify-membership-login-page .youzify-membership-social-buttons ul li a:hover {
  background: #21262d !important;
  border-color: rgba(167,139,250,0.4) !important;
  color: #e6edf3 !important;
}
/* OR divider */
.youzify-membership-login-page .youzify-membership-social-title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
  position: relative !important;
  overflow: visible !important;
}
.youzify-membership-login-page .youzify-membership-social-title::before,
.youzify-membership-login-page .youzify-membership-social-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(167,139,250,0.12);
  position: relative;
  z-index: 0;
}
.youzify-membership-login-page .youzify-membership-social-title span {
  display: none !important;
}
/* Hide "or" divider row (high specificity – plugin may override) */
.youzify-membership-form.youzify-membership-login-page .youzify-membership-social-buttons .youzify-membership-social-title {
  display: none !important;
}
/* Form fields */
.youzify-membership-login-form .youzify-membership-form-item {
  margin-bottom: 14px !important;
}
.youzify-membership-login-form .youzify-membership-field-content {
  background: transparent !important;
  border: none !important;
}
.youzify-membership-login-form .youzify-membership-field-content input[type="text"],
.youzify-membership-login-form .youzify-membership-field-content input[type="password"] {
  width: 100% !important;
  padding: 12px 14px !important;
  background: #0d1117 !important;
  border: 1px solid rgba(167,139,250,0.2) !important;
  border-radius: 10px !important;
  color: #e6edf3 !important;
  font-size: 14px !important;
  font-family: 'Barlow', sans-serif !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.youzify-membership-login-form .youzify-membership-field-content input:focus {
  border-color: rgba(167,139,250,0.5) !important;
  box-shadow: 0 0 0 3px rgba(167,139,250,0.08) !important;
}
.youzify-membership-login-form .youzify-membership-field-content input::placeholder {
  color: #484f58 !important;
}
.youzify-membership-login-form .youzify-membership-field-icon {
  color: #8b949e !important;
}
/* Remember me + forgot password row */
.youzify-membership-login-form .youzify-membership-remember-me,
.youzify-membership-login-form .forgetmenot {
  margin-bottom: 20px !important;
}
.youzify-membership-login-form .youzify-membership-remember-me label,
.youzify-membership-login-form .forgetmenot label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  color: #8b949e !important;
  cursor: pointer !important;
}
.youzify-membership-login-form .youzify-membership-remember-me input[type="checkbox"],
.youzify-membership-login-form .forgetmenot input[type="checkbox"] {
  width: 15px !important;
  height: 15px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(167,139,250,0.3) !important;
  background: #0d1117 !important;
  accent-color: #a78bfa !important;
}
/* Bottom actions (stacked: submit → forgot → register link) */
.youzify-membership-login-form .youzify-membership-form-actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
.youzify-membership-login-form .youzify-membership-form-actions .youzify-membership-submit-item {
  width: 100% !important;
  order: 0 !important;
}
.youzify-membership-login-form .youzify-membership-form-actions .youzify-membership-forgot-password {
  order: 1 !important;
  text-align: center !important;
  margin: 0 !important;
}
.youzify-membership-login-form .youzify-membership-form-actions .youzify-membership-link-item {
  width: 100% !important;
  text-align: center !important;
  order: 2 !important;
}
/* Links */
.youzify-membership-login-form .youzify-membership-forgot-password {
  color: #a78bfa !important;
  font-size: 12px !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.youzify-membership-login-form .youzify-membership-forgot-password:hover {
  color: #c4b5fd !important;
}
.youzify-membership-login-form a.youzify-membership-link-button {
  color: #a78bfa !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
.youzify-membership-login-form a.youzify-membership-link-button:hover {
  color: #c4b5fd !important;
}
/* Submit button */
.youzify-membership-login-page .youzify-membership-submit-item button,
.youzify-membership-login-form .youzify-membership-submit-item button {
  width: 100% !important;
  padding: 14px !important;
  background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-family: 'Barlow Condensed', 'Barlow', sans-serif !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 8px 24px rgba(124,58,237,0.3) !important;
  transition: all 0.2s !important;
  position: relative !important;
  overflow: hidden !important;
}
.youzify-membership-login-page .youzify-membership-submit-item button:hover,
.youzify-membership-login-form .youzify-membership-submit-item button:hover {
  background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 36px rgba(124,58,237,0.45) !important;
}
.youzify-membership-login-page .youzify-membership-submit-item button:active,
.youzify-membership-login-form .youzify-membership-submit-item button:active {
  transform: scale(0.98) !important;
}

/* ── Post–Google profile intro (matches login / register card) ── */
#profile-intro-page.tp-profile-intro-outer {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 75vh !important;
  padding: 40px 24px !important;
  box-sizing: border-box !important;
  background: transparent !important;
}
.tp-profile-intro-card {
  background: #161b22 !important;
  border: 1px solid rgba(167,139,250,0.18) !important;
  border-radius: 20px !important;
  width: 100% !important;
  max-width: 440px !important;
  padding: 40px 36px 36px !important;
  position: relative !important;
  overflow: visible !important;
  font-family: 'Barlow', sans-serif !important;
  box-shadow:
    0 0 0 1px rgba(167,139,250,0.10),
    0 0 18px rgba(167,139,250,0.10),
    0 0 40px rgba(124,58,237,0.06),
    inset 0 80px 60px -80px rgba(167,139,250,0.07) !important;
  transition: box-shadow 0.3s ease !important;
}
.tp-profile-intro-card:hover {
  box-shadow:
    0 0 0 1px rgba(167,139,250,0.18),
    0 0 24px rgba(167,139,250,0.14),
    0 0 48px rgba(124,58,237,0.08),
    inset 0 80px 60px -80px rgba(167,139,250,0.09) !important;
}
.tp-profile-intro-header {
  text-align: center !important;
  margin-bottom: 22px !important;
}
.tp-profile-intro-title {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif !important;
  font-weight: 900 !important;
  line-height: 0.95 !important;
  letter-spacing: -1px !important;
  font-size: clamp(28px, 4.5vw, 42px) !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-image: radial-gradient(circle at 50% 50%, #ffe08a 0%, #a78bfa 18%, #e6edf3 45%, #e6edf3 100%) !important;
  background-size: 300% 300% !important;
  background-position: 50% 120% !important;
  color: #e6edf3 !important;
}
.tp-profile-intro-lead {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: #8b949e !important;
  font-weight: 500 !important;
}
.tp-profile-intro-notice {
  border-radius: 10px !important;
  padding: 12px 14px !important;
  margin-bottom: 18px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}
.tp-profile-intro-notice--error {
  background: rgba(248,81,73,0.12) !important;
  border: 1px solid rgba(248,81,73,0.35) !important;
  color: #ffa198 !important;
}
.tp-profile-intro-notice--success {
  background: rgba(63,185,80,0.12) !important;
  border: 1px solid rgba(63,185,80,0.35) !important;
  color: #56d364 !important;
}
.tp-profile-intro-field {
  margin-bottom: 20px !important;
}
.tp-profile-intro-label {
  font-family: 'Barlow', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #8b949e !important;
  margin-bottom: 6px !important;
  display: block !important;
}
.tp-profile-intro-input {
  width: 100% !important;
  padding: 12px 14px !important;
  background: #0d1117 !important;
  border: 1px solid rgba(167,139,250,0.2) !important;
  border-radius: 10px !important;
  color: #e6edf3 !important;
  font-size: 14px !important;
  font-family: 'Barlow', sans-serif !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.tp-profile-intro-input:focus {
  border-color: rgba(167,139,250,0.5) !important;
  box-shadow: 0 0 0 3px rgba(167,139,250,0.08) !important;
}
.tp-profile-intro-input::placeholder {
  color: #484f58 !important;
}
.tp-profile-intro-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 8px !important;
}
.tp-profile-intro-submit {
  width: 100% !important;
  padding: 14px !important;
  background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-family: 'Barlow Condensed', 'Barlow', sans-serif !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 8px 24px rgba(124,58,237,0.3) !important;
  transition: all 0.2s !important;
}
.tp-profile-intro-submit:hover {
  background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 36px rgba(124,58,237,0.45) !important;
}
.tp-profile-intro-submit:active {
  transform: scale(0.98) !important;
}
.tp-profile-intro-skip {
  width: 100% !important;
  padding: 12px !important;
  background: transparent !important;
  border: 1px solid rgba(167,139,250,0.25) !important;
  border-radius: 10px !important;
  color: #a78bfa !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: border-color 0.2s, color 0.2s, background 0.2s !important;
}
.tp-profile-intro-skip:hover {
  border-color: rgba(167,139,250,0.45) !important;
  color: #c4b5fd !important;
  background: rgba(167,139,250,0.06) !important;
}
html[data-theme="light"] .tp-profile-intro-card {
  background: #f6f8fa !important;
  border-color: rgba(124,58,237,0.22) !important;
  box-shadow:
    0 0 0 1px rgba(124,58,237,0.08),
    0 8px 28px rgba(15,23,42,0.08) !important;
}
html[data-theme="light"] .tp-profile-intro-lead {
  color: #57606a !important;
}
html[data-theme="light"] .tp-profile-intro-label {
  color: #57606a !important;
}
html[data-theme="light"] .tp-profile-intro-input {
  background: #ffffff !important;
  border-color: rgba(124,58,237,0.25) !important;
  color: #24292f !important;
}
html[data-theme="light"] .tp-profile-intro-input::placeholder {
  color: #8c959f !important;
}
body:not(.dark-mode) .tp-profile-intro-card {
  background: #f6f8fa !important;
  border-color: rgba(124,58,237,0.22) !important;
  box-shadow:
    0 0 0 1px rgba(124,58,237,0.08),
    0 8px 28px rgba(15,23,42,0.08) !important;
}
body:not(.dark-mode) .tp-profile-intro-lead,
body:not(.dark-mode) .tp-profile-intro-label {
  color: #57606a !important;
}
body:not(.dark-mode) .tp-profile-intro-input {
  background: #ffffff !important;
  border-color: rgba(124,58,237,0.25) !important;
  color: #24292f !important;
}
body:not(.dark-mode) .tp-profile-intro-input::placeholder {
  color: #8c959f !important;
}

/* All membership submit buttons with label span: center text, no clip */
.youzify-membership-form .youzify-membership-submit-item button[type="submit"],
.youzify-membership-form button[type="submit"],
.youzify-membership-item-inner button[type="submit"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: 48px !important;
  overflow: visible !important;
}
.youzify-membership-form .youzify-membership-button-title,
.youzify-membership-form button[type="submit"] .youzify-membership-button-title,
button[type="submit"] .youzify-membership-button-title {
  display: block !important;
  text-align: center !important;
  line-height: 1.2 !important;
}
/* Close (X) */
.youzify-membership-login-page .youzify-close-login {
  color: #8b949e !important;
  transition: color 0.2s !important;
}
.youzify-membership-login-page .youzify-close-login:hover {
  color: #a78bfa !important;
}
/* Light theme (login) */
html[data-theme="light"] .youzify-membership-form.youzify-membership-login-page {
  background: #f8f9fa !important;
  border-color: rgba(124,58,237,0.15) !important;
  box-shadow:
    0 0 0 1px rgba(124,58,237,0.08),
    0 0 18px rgba(124,58,237,0.07),
    0 0 40px rgba(124,58,237,0.04),
    inset 0 80px 60px -80px rgba(124,58,237,0.05) !important;
}
html[data-theme="light"] .youzify-membership-form.youzify-membership-login-page:hover {
  box-shadow:
    0 0 0 1px rgba(124,58,237,0.14),
    0 0 24px rgba(124,58,237,0.10),
    0 0 48px rgba(124,58,237,0.06),
    inset 0 80px 60px -80px rgba(124,58,237,0.07) !important;
}
html[data-theme="light"] .youzify-membership-login-page .youzify-membership-social-title span,
body:not(.dark-mode) .youzify-membership-login-page .youzify-membership-social-title span {
  background: #f8f9fa !important;
  color: #57606a !important;
}
body.dark-mode .youzify-membership-login-page .youzify-membership-social-title span,
body.dark-mode .youzify-popup-login .youzify-membership-login-page .youzify-membership-social-title span {
  background: #161b22 !important;
  color: #8b949e !important;
  position: relative !important;
  z-index: 1 !important;
  padding: 0 12px !important;
}
/* Keep divider lines behind "Or" in dark mode so they don't overlap */
body.dark-mode .youzify-membership-login-page .youzify-membership-social-title::before,
body.dark-mode .youzify-membership-login-page .youzify-membership-social-title::after {
  z-index: 0;
}
html[data-theme="light"] .youzify-membership-login-page .youzify-membership-social-buttons ul li a {
  background: #f0f2f5 !important;
  border-color: rgba(124,58,237,0.2) !important;
  color: #1a1e24 !important;
}
html[data-theme="light"] .youzify-membership-login-page .youzify-membership-social-buttons ul li a:hover {
  background: #e8eaed !important;
  color: #1a1e24 !important;
}
html[data-theme="light"] .youzify-membership-login-form .youzify-membership-field-content input[type="text"],
html[data-theme="light"] .youzify-membership-login-form .youzify-membership-field-content input[type="password"] {
  background: #fff !important;
  border-color: rgba(124,58,237,0.2) !important;
  color: #1a1e24 !important;
}
html[data-theme="light"] .youzify-membership-login-form .youzify-membership-field-content input::placeholder {
  color: #9ba3ad !important;
}
html[data-theme="light"] .youzify-membership-login-form .forgetmenot label,
html[data-theme="light"] .youzify-membership-login-form .youzify-membership-remember-me label {
  color: #57606a !important;
}
@media (max-width: 480px) {
  .youzify-membership-form.youzify-membership-login-page {
    padding: 32px 22px 28px !important;
  }
  .youzify-membership-login-page .youzify-membership-social-buttons ul {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
}

/* ============================================================
   Lost-password – same card style
   ============================================================ */
.youzify-membership-form.youzify-membership-lost_password-page,
.youzify-membership-form.youzify-membership-lost-password-page {
  background: #161b22 !important;
  border: 1px solid rgba(167,139,250,0.18) !important;
  border-radius: 20px !important;
  width: 100% !important;
  max-width: 440px !important;
  padding: 40px 36px 36px !important;
  margin: 40px auto !important;
  position: relative !important;
  overflow: visible !important;
  font-family: 'Barlow', sans-serif !important;
  box-shadow:
    0 0 0 1px rgba(167,139,250,0.10),
    0 0 18px rgba(167,139,250,0.10),
    0 0 40px rgba(124,58,237,0.06),
    inset 0 80px 60px -80px rgba(167,139,250,0.07) !important;
  transition: box-shadow 0.3s ease !important;
}
.youzify-membership-form.youzify-membership-lost_password-page:hover,
.youzify-membership-form.youzify-membership-lost-password-page:hover {
  box-shadow:
    0 0 0 1px rgba(167,139,250,0.18),
    0 0 24px rgba(167,139,250,0.14),
    0 0 48px rgba(124,58,237,0.08),
    inset 0 80px 60px -80px rgba(167,139,250,0.09) !important;
}
.youzify-membership-form.youzify-membership-lost_password-page::before,
.youzify-membership-form.youzify-membership-lost-password-page::before {
  display: none !important;
}
.youzify-membership-page-box:has(.youzify-membership-lost_password-page),
.youzify-membership-page-box:has(.youzify-membership-lost-password-page),
.youzify-membership-page-box.tp-lostpass-wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  padding: 0 !important;
  max-width: none !important;
}
.youzify-membership-lost_password-page .youzify-membership-form-header,
.youzify-membership-lost-password-page .youzify-membership-form-header {
  display: block !important;
  background: transparent !important;
  border: none !important;
  padding: 0 0 6px !important;
  margin-bottom: 6px !important;
  text-align: center !important;
}
.youzify-membership-lost_password-page .youzify-membership-form-cover,
.youzify-membership-lost-password-page .youzify-membership-form-cover {
  display: none !important;
}
.youzify-membership-lost_password-page .form-cover-title,
.youzify-membership-lost-password-page .form-cover-title {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(32px, 5vw, 48px) !important;
  color: #e6edf3 !important;
  text-align: center !important;
}
.youzify-membership-lost_password-page .youzify-membership-form-item,
.youzify-membership-lost-password-page .youzify-membership-form-item {
  margin-bottom: 14px !important;
}
.youzify-membership-lost_password-page .youzify-membership-field-content,
.youzify-membership-lost-password-page .youzify-membership-field-content {
  background: transparent !important;
  border: none !important;
}
.youzify-membership-lost_password-page input[type="text"],
.youzify-membership-lost_password-page input[type="email"],
.youzify-membership-lost-password-page input[type="text"],
.youzify-membership-lost-password-page input[type="email"] {
  width: 100% !important;
  padding: 12px 14px !important;
  background: #0d1117 !important;
  border: 1px solid rgba(167,139,250,0.2) !important;
  border-radius: 10px !important;
  color: #e6edf3 !important;
  font-size: 14px !important;
  font-family: 'Barlow', sans-serif !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.youzify-membership-lost_password-page input:focus,
.youzify-membership-lost-password-page input:focus {
  border-color: rgba(167,139,250,0.5) !important;
  box-shadow: 0 0 0 3px rgba(167,139,250,0.08) !important;
}
.youzify-membership-lost_password-page input::placeholder,
.youzify-membership-lost-password-page input::placeholder {
  color: #484f58 !important;
}
.youzify-membership-lost_password-page .youzify-membership-submit-item,
.youzify-membership-lost-password-page .youzify-membership-submit-item {
  overflow: visible !important;
}
.youzify-membership-lost_password-page .youzify-membership-submit-item .youzify-membership-item-inner,
.youzify-membership-lost-password-page .youzify-membership-submit-item .youzify-membership-item-inner {
  overflow: visible !important;
}
.youzify-membership-lost_password-page .youzify-membership-submit-item button,
.youzify-membership-lost-password-page .youzify-membership-submit-item button {
  width: 100% !important;
  min-height: 48px !important;
  padding: 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-family: 'Barlow Condensed', 'Barlow', sans-serif !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 8px 24px rgba(124,58,237,0.3) !important;
  transition: all 0.2s !important;
}
.youzify-membership-lost_password-page .youzify-membership-submit-item .youzify-membership-button-title,
.youzify-membership-lost-password-page .youzify-membership-submit-item .youzify-membership-button-title {
  display: block !important;
  text-align: center !important;
  line-height: 1.2 !important;
}
/* Forgot password page only: override login-page styles (form has both classes) */
#youzify-membership-form.youzify-membership-lost_password-form .youzify-membership-submit-item,
#youzify-membership-form.youzify-membership-lost_password-form .youzify-membership-submit-item .youzify-membership-item-inner {
  overflow: visible !important;
}
#youzify-membership-form.youzify-membership-lost_password-form .youzify-membership-submit-item button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: 48px !important;
  padding: 14px 20px !important;
  overflow: visible !important;
}
#youzify-membership-form.youzify-membership-lost_password-form .youzify-membership-submit-item .youzify-membership-button-title {
  display: block !important;
  text-align: center !important;
  line-height: 1.2 !important;
  width: 100% !important;
}
.youzify-membership-lost_password-page .youzify-membership-submit-item button:hover,
.youzify-membership-lost-password-page .youzify-membership-submit-item button:hover {
  background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 36px rgba(124,58,237,0.45) !important;
}
.youzify-membership-lost_password-page .youzify-membership-form-actions,
.youzify-membership-lost-password-page .youzify-membership-form-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.youzify-membership-lost_password-page a.youzify-membership-link-button,
.youzify-membership-lost-password-page a.youzify-membership-link-button {
  color: #a78bfa !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-align: center !important;
  text-decoration: none !important;
}
.youzify-membership-lost_password-page a.youzify-membership-link-button:hover,
.youzify-membership-lost-password-page a.youzify-membership-link-button:hover {
  color: #c4b5fd !important;
}
.youzify-membership-lost_password-page .youzify-close-login,
.youzify-membership-lost-password-page .youzify-close-login {
  color: #8b949e !important;
  transition: color 0.2s !important;
}
.youzify-membership-lost_password-page .youzify-close-login:hover,
.youzify-membership-lost-password-page .youzify-close-login:hover {
  color: #a78bfa !important;
}
html[data-theme="light"] .youzify-membership-form.youzify-membership-lost_password-page,
html[data-theme="light"] .youzify-membership-form.youzify-membership-lost-password-page {
  background: #f8f9fa !important;
  border-color: rgba(124,58,237,0.2) !important;
}
html[data-theme="light"] .youzify-membership-lost_password-page input[type="text"],
html[data-theme="light"] .youzify-membership-lost_password-page input[type="email"],
html[data-theme="light"] .youzify-membership-lost-password-page input[type="text"],
html[data-theme="light"] .youzify-membership-lost-password-page input[type="email"] {
  background: #fff !important;
  border-color: rgba(124,58,237,0.2) !important;
  color: #1a1e24 !important;
}
@media (max-width: 480px) {
  .youzify-membership-form.youzify-membership-lost_password-page,
  .youzify-membership-form.youzify-membership-lost-password-page {
    padding: 32px 22px 28px !important;
  }
}

/* ============================================================
   Register page – match login card (same shell as login-page)
   Signup markup often has no #buddypress wrapper — scope form directly.
   ============================================================ */
.youzify-membership-page-box {
  max-width: 440px !important;
  width: 100% !important;
  margin: 40px auto !important;
  background: #161b22 !important;
  background-color: #161b22 !important;
  background-image: none !important;
  border: 1px solid rgba(167,139,250,0.18) !important;
  border-radius: 20px !important;
  overflow: visible !important;
  box-shadow:
    0 0 0 1px rgba(167,139,250,0.10),
    0 0 18px rgba(167,139,250,0.10),
    0 0 40px rgba(124,58,237,0.06),
    inset 0 80px 60px -80px rgba(167,139,250,0.07) !important;
  position: relative !important;
  font-family: 'Barlow', sans-serif !important;
  transition: box-shadow 0.3s ease !important;
  padding: 40px 36px 36px !important;
  box-sizing: border-box !important;
}
/* Register: same element often has .youzify-page (plugin forces #fff) — win cascade + drop inset glow that reads as a stray gradient */
.youzify-membership.youzify-membership-page-box.youzify-page,
body.olympus-theme .youzify-membership.youzify-membership-page-box.youzify-page,
body.dark-mode .youzify-membership.youzify-membership-page-box.youzify-page,
html[data-theme='dark'] .youzify-membership.youzify-membership-page-box.youzify-page {
  background: #161b22 !important;
  background-color: #161b22 !important;
  background-image: none !important;
  box-shadow:
    0 0 0 1px rgba(167,139,250,0.10),
    0 0 18px rgba(167,139,250,0.10),
    0 0 40px rgba(124,58,237,0.06) !important;
}
body.dark-mode .youzify-membership.youzify-membership-page-box.youzify-page:hover,
html[data-theme='dark'] .youzify-membership.youzify-membership-page-box.youzify-page:hover,
.youzify-membership.youzify-membership-page-box.youzify-page:hover {
  box-shadow:
    0 0 0 1px rgba(167,139,250,0.18),
    0 0 24px rgba(167,139,250,0.14),
    0 0 48px rgba(124,58,237,0.08) !important;
}
/* Inner signup wrapper: Youzify default .youzify-membership-form is a second light “card” — flatten to match login */
.youzify-membership-page-box .youzify-membership-form.youzify-membership-signup-page {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
.youzify-membership-page-box:hover {
  box-shadow:
    0 0 0 1px rgba(167,139,250,0.18),
    0 0 24px rgba(167,139,250,0.14),
    0 0 48px rgba(124,58,237,0.08),
    inset 0 80px 60px -80px rgba(167,139,250,0.09) !important;
}
/* After generic hover: signup shell must not re-apply inset glow */
body.dark-mode .youzify-membership.youzify-membership-page-box.youzify-page:hover,
html[data-theme='dark'] .youzify-membership.youzify-membership-page-box.youzify-page:hover,
.youzify-membership.youzify-membership-page-box.youzify-page:hover {
  box-shadow:
    0 0 0 1px rgba(167,139,250,0.18),
    0 0 24px rgba(167,139,250,0.14),
    0 0 48px rgba(124,58,237,0.08) !important;
}
.youzify-membership-page-box::before {
  display: none !important;
}
/* Login wrapper should not look like a second card; keep styling on inner form only. */
#youzify-membership.youzify-membership-page-box.youzify-page,
#youzify-membership.youzify-membership-page-box.youzify-page:hover {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: none !important;
}
/* When page-box wraps the login form, the inner card provides its own glow */
.youzify-membership-page-box:has(.youzify-membership-login-page),
.youzify-membership-page-box.tp-login-wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  padding: 0 !important;
  max-width: none !important;
}
/* Center register only when #register-page wraps the card (not the inner #register-page inside the card) */
#register-page:has(> .youzify-membership-page-box),
#register-page.tp-register-outer {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 75vh !important;
  padding: 40px 24px !important;
  box-sizing: border-box !important;
  background: transparent !important;
}
#register-page .youzify-membership-page-box {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* When BP #register-page sits inside the card, drop outer duplicate padding */
.youzify-membership-page-box #register-page {
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.youzify-membership-page-box .youzify-membership-form-header {
  display: block !important;
  background: transparent !important;
  border: none !important;
  padding: 0 0 6px !important;
  margin-bottom: 6px !important;
  text-align: center !important;
}
/* Same treatment as login header strip (Youzify inline cover image can override background-image) */
.youzify-membership-page-box .youzify-membership-form-cover {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 0 6px !important;
  border: none !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: min(280px, 72%) auto !important;
}
.youzify-membership-page-box .form-cover-title {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif !important;
  font-weight: 900 !important;
  line-height: 0.95 !important;
  letter-spacing: -1px !important;
  font-size: clamp(32px, 5vw, 48px) !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 2px 0 6px !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-image: radial-gradient(circle at 50% 50%, #ffe08a 0%, #a78bfa 18%, #e6edf3 45%, #e6edf3 100%) !important;
  background-size: 300% 300% !important;
  background-position: 50% 120% !important;
  color: #e6edf3 !important;
}
/* Youzify default form padding — card already padded (matches login) */
.youzify-membership-page-box form.standard-form,
.youzify-membership-page-box #youzify_membership_signup_form,
.youzify-membership-page-box .youzify-membership-form form {
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  text-align: left !important;
}
/* Social buttons – match login page (grid, sizing, no clipping) */
.youzify-membership-page-box .youzify-membership-social-buttons {
  margin-bottom: 24px !important;
  padding: 0 !important;
  border: none !important;
  position: relative !important;
  z-index: 0 !important;
}
.youzify-membership-page-box .youzify-membership-social-buttons ul {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.youzify-membership-page-box .youzify-membership-social-buttons ul li {
  margin: 0 !important;
  width: auto !important;
  float: none !important;
}
.youzify-membership-page-box .youzify-membership-social-buttons ul li a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 11px 16px !important;
  background: #1c2128 !important;
  border: 1px solid rgba(167,139,250,0.2) !important;
  border-radius: 10px !important;
  color: #e6edf3 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
  cursor: pointer !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
}
.youzify-membership-page-box .youzify-membership-social-buttons ul li a:hover {
  background: #21262d !important;
  border-color: rgba(167,139,250,0.4) !important;
  color: #e6edf3 !important;
}
/* OR divider – hidden on register (same as login) */
.youzify-membership-page-box .youzify-membership-social-title,
.youzify-membership-form .youzify-membership-page-box .youzify-membership-social-buttons .youzify-membership-social-title,
#register-page .youzify-membership-social-title {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}
.youzify-membership-page-box .youzify-membership-social-title::before,
.youzify-membership-page-box .youzify-membership-social-title::after {
  display: none !important;
}
/* Labels (with or without #buddypress) */
.youzify-membership-page-box .standard-form label,
.youzify-membership-page-box #buddypress .standard-form label,
.youzify-membership-page-box form.standard-form label,
.youzify-membership-page-box #youzify_membership_signup_form label {
  font-family: 'Barlow', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #8b949e !important;
  margin-bottom: 6px !important;
  display: block !important;
}
/* Section chrome (Youzify + BP register) — strip plugin gradient / white strips */
.youzify-membership-page-box .youzify-membership-section-title {
  margin: 20px 0 12px !important;
  padding: 0 !important;
  text-align: center !important;
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
.youzify-membership-page-box .youzify-membership-section-title span {
  font-family: 'Barlow', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #a78bfa !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* BuddyPress “required” / “Required” chips — kill default white pill */
.youzify-membership-page-box .bp-required-field-label,
.youzify-membership-page-box .youzify-membership-form .bp-required-field-label {
  display: inline !important;
  margin: 0 0 0 6px !important;
  padding: 2px 8px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1.3 !important;
  color: #fda4af !important;
  background: rgba(248,113,113,0.12) !important;
  background-color: rgba(248,113,113,0.12) !important;
  background-image: none !important;
  border: 1px solid rgba(248,113,113,0.35) !important;
  border-radius: 999px !important;
  vertical-align: middle !important;
  box-shadow: none !important;
}
.youzify-membership-page-box legend .bp-required-field-label {
  margin-left: 8px !important;
}
.youzify-membership-page-box .register-section {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.youzify-membership-page-box .register-section h2 {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #e6edf3 !important;
  margin: 20px 0 12px !important;
  padding: 0 !important;
  border: none !important;
  text-align: center !important;
}
.youzify-membership-page-box .standard-form fieldset {
  border: 1px solid rgba(167,139,250,0.15) !important;
  border-radius: 12px !important;
  padding: 14px 14px 10px !important;
  margin: 0 0 16px !important;
  background: rgba(0,0,0,0.15) !important;
}
.youzify-membership-page-box .standard-form fieldset legend {
  font-family: 'Barlow', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #e6edf3 !important;
  padding: 0 6px !important;
}
.youzify-membership-page-box .field-visibility-settings-notoggle {
  font-size: 11px !important;
  color: #6e7681 !important;
  margin-top: 6px !important;
}
.youzify-membership-page-box #pass-strength-result {
  margin: -6px 0 10px !important;
  font-size: 12px !important;
  font-family: 'Barlow', sans-serif !important;
}
/* Inputs */
.youzify-membership-page-box #buddypress .standard-form input[type="text"],
.youzify-membership-page-box #buddypress .standard-form input[type="email"],
.youzify-membership-page-box #buddypress .standard-form input[type="password"],
.youzify-membership-page-box #buddypress .standard-form input[type="url"],
.youzify-membership-page-box form.standard-form input[type="text"],
.youzify-membership-page-box form.standard-form input[type="email"],
.youzify-membership-page-box form.standard-form input[type="password"],
.youzify-membership-page-box form.standard-form input[type="url"],
.youzify-membership-page-box #youzify_membership_signup_form input[type="text"],
.youzify-membership-page-box #youzify_membership_signup_form input[type="email"],
.youzify-membership-page-box #youzify_membership_signup_form input[type="password"],
.youzify-membership-page-box #youzify_membership_signup_form input[type="url"] {
  width: 100% !important;
  padding: 12px 14px !important;
  background: #0d1117 !important;
  border: 1px solid rgba(167,139,250,0.2) !important;
  border-radius: 10px !important;
  color: #e6edf3 !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-family: 'Barlow', sans-serif !important;
  box-sizing: border-box !important;
  outline: none !important;
  margin-bottom: 14px !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
/* Youzify signup often adds min-height / padding via .youzify-membership-signup-page — match login field box */
.youzify-membership-page-box.youzify-page .youzify-membership-signup-page #youzify_membership_signup_form input[type="text"],
.youzify-membership-page-box.youzify-page .youzify-membership-signup-page #youzify_membership_signup_form input[type="email"],
.youzify-membership-page-box.youzify-page .youzify-membership-signup-page #youzify_membership_signup_form input[type="password"],
.youzify-membership-page-box.youzify-page .youzify-membership-signup-page #youzify_membership_signup_form input[type="url"] {
  padding: 12px 14px !important;
  min-height: 0 !important;
  line-height: 1.35 !important;
}
.youzify-membership-page-box #buddypress .standard-form input:focus,
.youzify-membership-page-box form.standard-form input:focus,
.youzify-membership-page-box #youzify_membership_signup_form input:focus {
  border-color: rgba(167,139,250,0.5) !important;
  box-shadow: 0 0 0 3px rgba(167,139,250,0.08) !important;
}
/* Submit button */
.youzify-membership-page-box .youzify-membership-submit-item,
.youzify-membership-page-box .youzify-membership-submit-item .youzify-membership-item-inner {
  overflow: visible !important;
}
.youzify-membership-page-box .youzify-membership-submit-item button,
.youzify-membership-page-box button[type="submit"] {
  width: 100% !important;
  min-height: 48px !important;
  padding: 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-family: 'Barlow Condensed', 'Barlow', sans-serif !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 8px 24px rgba(124,58,237,0.3) !important;
  transition: all 0.2s !important;
  margin-bottom: 20px !important;
}
.youzify-membership-page-box .youzify-membership-submit-item .youzify-membership-button-title,
.youzify-membership-page-box button[type="submit"] .youzify-membership-button-title {
  display: block !important;
  text-align: center !important;
  line-height: 1.2 !important;
}
.youzify-membership-page-box .youzify-membership-submit-item button:hover,
.youzify-membership-page-box button[type="submit"]:hover {
  background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 36px rgba(124,58,237,0.45) !important;
}
/* Hide "Create New Account" (login) and "Log In" (register) link items on both forms */
.youzify-membership-form-actions .youzify-membership-action-item.youzify-membership-link-item,
.youzify-membership-form-actions .youzify-membership-link-item,
.youzify-membership-page-box .youzify-membership-action-item.youzify-membership-link-item,
.youzify-membership-page-box .youzify-membership-link-item,
.youzify-membership-login-form .youzify-membership-link-item,
.youzify-membership-login-form a.youzify-membership-link-button,
#register-page .youzify-membership-action-item.youzify-membership-link-item,
#register-page .youzify-membership-link-item {
  display: none !important;
}
.youzify-membership-page-box .youzify-membership-form-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
/* Terms note */
.youzify-membership-page-box .youzify-membership-form-note,
.youzify-membership-page-box .youzify-membership-terms-note {
  font-size: 12px !important;
  color: #8b949e !important;
  text-align: center !important;
  line-height: 1.5 !important;
}
.youzify-membership-page-box .youzify-membership-terms-note a,
.youzify-membership-page-box .youzify-membership-form-note a {
  color: #a78bfa !important;
  text-decoration: none !important;
}
/* Light theme (register) */
html[data-theme="light"] .youzify-membership-page-box {
  background: #f8f9fa !important;
  border-color: rgba(124,58,237,0.2) !important;
  box-shadow:
    0 0 0 1px rgba(124,58,237,0.08),
    0 0 18px rgba(124,58,237,0.07),
    0 0 40px rgba(124,58,237,0.04),
    inset 0 80px 60px -80px rgba(124,58,237,0.05) !important;
}
html[data-theme="light"] .youzify-membership-page-box:hover {
  box-shadow:
    0 0 0 1px rgba(124,58,237,0.14),
    0 0 24px rgba(124,58,237,0.10),
    0 0 48px rgba(124,58,237,0.06),
    inset 0 80px 60px -80px rgba(124,58,237,0.07) !important;
}
/* Light: signup shell (.youzify-page) — match login card, no inset band */
html[data-theme="light"] .youzify-membership.youzify-membership-page-box.youzify-page,
body:not(.dark-mode) .youzify-membership.youzify-membership-page-box.youzify-page {
  background: #f8f9fa !important;
  background-color: #f8f9fa !important;
  background-image: none !important;
  box-shadow:
    0 0 0 1px rgba(124,58,237,0.08),
    0 0 18px rgba(124,58,237,0.07),
    0 0 40px rgba(124,58,237,0.04) !important;
}
html[data-theme="light"] .youzify-membership.youzify-membership-page-box.youzify-page:hover,
body:not(.dark-mode) .youzify-membership.youzify-membership-page-box.youzify-page:hover {
  box-shadow:
    0 0 0 1px rgba(124,58,237,0.14),
    0 0 24px rgba(124,58,237,0.10),
    0 0 48px rgba(124,58,237,0.06) !important;
}
html[data-theme="light"] .youzify-membership-page-box .bp-required-field-label,
body:not(.dark-mode) .youzify-membership-page-box .bp-required-field-label {
  color: #b91c1c !important;
  background: rgba(220,38,38,0.08) !important;
  background-color: rgba(220,38,38,0.08) !important;
  border-color: rgba(220,38,38,0.28) !important;
}
html[data-theme="light"] .youzify-membership-page-box .youzify-membership-social-title span,
body:not(.dark-mode) .youzify-membership-page-box .youzify-membership-social-title span {
  background: #f8f9fa !important;
  color: #57606a !important;
}
body.dark-mode .youzify-membership-page-box .youzify-membership-social-title span {
  background: #161b22 !important;
  color: #8b949e !important;
  position: relative !important;
  z-index: 1 !important;
  padding: 0 12px !important;
}
body.dark-mode .youzify-membership-page-box .youzify-membership-social-title::before,
body.dark-mode .youzify-membership-page-box .youzify-membership-social-title::after {
  z-index: 0;
}
html[data-theme="light"] .youzify-membership-page-box .youzify-membership-social-buttons ul li a {
  background: #f0f2f5 !important;
  border-color: rgba(124,58,237,0.2) !important;
  color: #1a1e24 !important;
}
html[data-theme="light"] .youzify-membership-page-box #buddypress .standard-form input[type="text"],
html[data-theme="light"] .youzify-membership-page-box #buddypress .standard-form input[type="email"],
html[data-theme="light"] .youzify-membership-page-box #buddypress .standard-form input[type="password"],
html[data-theme="light"] .youzify-membership-page-box form.standard-form input[type="text"],
html[data-theme="light"] .youzify-membership-page-box form.standard-form input[type="email"],
html[data-theme="light"] .youzify-membership-page-box form.standard-form input[type="password"],
html[data-theme="light"] .youzify-membership-page-box #youzify_membership_signup_form input[type="text"],
html[data-theme="light"] .youzify-membership-page-box #youzify_membership_signup_form input[type="email"],
html[data-theme="light"] .youzify-membership-page-box #youzify_membership_signup_form input[type="password"] {
  background: #fff !important;
  border-color: rgba(124,58,237,0.2) !important;
  color: #1a1e24 !important;
}
html[data-theme="light"] .youzify-membership-page-box .register-section h2 {
  color: #1a1e24 !important;
}
html[data-theme="light"] .youzify-membership-page-box .standard-form fieldset {
  background: rgba(124,58,237,0.04) !important;
  border-color: rgba(124,58,237,0.12) !important;
}
html[data-theme="light"] .youzify-membership-page-box .standard-form fieldset legend {
  color: #1a1e24 !important;
}
html[data-theme="light"] .youzify-membership-page-box .standard-form label {
  color: #57606a !important;
}
@media (max-width: 480px) {
  .youzify-membership-page-box {
    margin: 20px 14px !important;
    padding: 32px 22px 28px !important;
  }
  #register-page {
    padding: 32px 16px 28px !important;
  }
  .youzify-membership-page-box .youzify-membership-social-buttons ul {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
}

/*
 * Youzify membership notices: plugin CSS often forces light backgrounds with high specificity.
 * Hard dark-theme colors here so register/login success (etc.) never flash white in dark mode.
 */
body.dark-mode #register-page #template-notices.youzify-membership-form-message.youzify-membership-success-msg,
html[data-theme='dark'] #register-page #template-notices.youzify-membership-form-message.youzify-membership-success-msg,
body.dark-mode .youzify-membership-signup-page #template-notices.youzify-membership-success-msg,
html[data-theme='dark'] .youzify-membership-signup-page #template-notices.youzify-membership-success-msg,
body.dark-mode .youzify-membership-page-box #template-notices.youzify-membership-success-msg,
html[data-theme='dark'] .youzify-membership-page-box #template-notices.youzify-membership-success-msg,
body.dark-mode .youzify-membership-form.youzify-membership-signup-page #register-page #template-notices.youzify-membership-success-msg,
html[data-theme='dark'] .youzify-membership-form.youzify-membership-signup-page #register-page #template-notices.youzify-membership-success-msg {
  background: rgba(34, 197, 94, 0.12) !important;
  background-color: rgba(34, 197, 94, 0.12) !important;
  background-image: none !important;
  border: 1px solid rgba(74, 222, 128, 0.35) !important;
  border-left: 4px solid #86efac !important;
  color: #86efac !important;
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(167, 139, 250, 0.08) !important;
}
body.dark-mode #register-page #template-notices.youzify-membership-form-message.youzify-membership-success-msg p,
html[data-theme='dark'] #register-page #template-notices.youzify-membership-form-message.youzify-membership-success-msg p,
body.dark-mode .youzify-membership-signup-page #template-notices.youzify-membership-success-msg p,
html[data-theme='dark'] .youzify-membership-signup-page #template-notices.youzify-membership-success-msg p,
body.dark-mode .youzify-membership-form.youzify-membership-signup-page #register-page #template-notices.youzify-membership-success-msg p,
html[data-theme='dark'] .youzify-membership-form.youzify-membership-signup-page #register-page #template-notices.youzify-membership-success-msg p {
  color: #c8f7d4 !important;
  background: transparent !important;
  background-color: transparent !important;
}
body.dark-mode #register-page #template-notices.youzify-membership-form-message:not(.youzify-membership-success-msg):not(.youzify-membership-error-msg):not(.youzify-membership-warning-msg),
html[data-theme='dark'] #register-page #template-notices.youzify-membership-form-message:not(.youzify-membership-success-msg):not(.youzify-membership-error-msg):not(.youzify-membership-warning-msg) {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.18) 0%, rgba(124, 58, 237, 0.08) 100%) !important;
  background-color: #1c1c22 !important;
  background-image: linear-gradient(135deg, rgba(124, 58, 237, 0.18) 0%, rgba(124, 58, 237, 0.08) 100%) !important;
  border: 1px solid rgba(167, 139, 250, 0.35) !important;
  border-left: 4px solid #a78bfa !important;
  color: #e4e4e7 !important;
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(167, 139, 250, 0.08) !important;
}
body.dark-mode #register-page #template-notices.youzify-membership-form-message.youzify-membership-error-msg,
html[data-theme='dark'] #register-page #template-notices.youzify-membership-form-message.youzify-membership-error-msg {
  background: rgba(220, 38, 38, 0.14) !important;
  background-color: rgba(220, 38, 38, 0.14) !important;
  background-image: none !important;
  border: 1px solid rgba(248, 113, 113, 0.4) !important;
  border-left: 4px solid #fca5a5 !important;
  color: #fca5a5 !important;
}
body.dark-mode #register-page #template-notices.youzify-membership-form-message.youzify-membership-warning-msg,
html[data-theme='dark'] #register-page #template-notices.youzify-membership-form-message.youzify-membership-warning-msg {
  background: rgba(245, 158, 11, 0.14) !important;
  background-color: rgba(245, 158, 11, 0.14) !important;
  background-image: none !important;
  border: 1px solid rgba(251, 191, 36, 0.35) !important;
  border-left: 4px solid #fde68a !important;
  color: #fde68a !important;
}

/*
 * Login + forgot-password: Youzify membership CSS often beats generic .youzify-membership-form-message rules.
 * Match register-page banner look (same tokens as --tp-bnr-* on body.dark-mode / html[data-theme='dark'] body).
 */
body.dark-mode .youzify-membership-form.youzify-membership-login-page .youzify-membership-form-message.youzify-membership-success-msg:not(.tp-youzify-cookie-flash),
html[data-theme='dark'] .youzify-membership-form.youzify-membership-login-page .youzify-membership-form-message.youzify-membership-success-msg:not(.tp-youzify-cookie-flash),
body.dark-mode .youzify-membership-form.youzify-membership-lost-password-page .youzify-membership-form-message.youzify-membership-success-msg:not(.tp-youzify-cookie-flash),
html[data-theme='dark'] .youzify-membership-form.youzify-membership-lost-password-page .youzify-membership-form-message.youzify-membership-success-msg:not(.tp-youzify-cookie-flash),
body.dark-mode .youzify-membership-form.youzify-membership-lost_password-page .youzify-membership-form-message.youzify-membership-success-msg:not(.tp-youzify-cookie-flash),
html[data-theme='dark'] .youzify-membership-form.youzify-membership-lost_password-page .youzify-membership-form-message.youzify-membership-success-msg:not(.tp-youzify-cookie-flash) {
  background: var(--tp-bnr-success-bg) !important;
  background-color: var(--tp-bnr-success-bg) !important;
  background-image: none !important;
  border: 1px solid var(--tp-bnr-success-border) !important;
  border-left: 4px solid var(--tp-bnr-success-text) !important;
  color: var(--tp-bnr-success-text) !important;
  box-shadow: var(--tp-bnr-shadow) !important;
}
body.dark-mode .youzify-membership-form.youzify-membership-login-page .youzify-membership-form-message.youzify-membership-success-msg:not(.tp-youzify-cookie-flash) p,
html[data-theme='dark'] .youzify-membership-form.youzify-membership-login-page .youzify-membership-form-message.youzify-membership-success-msg:not(.tp-youzify-cookie-flash) p,
body.dark-mode .youzify-membership-form.youzify-membership-lost-password-page .youzify-membership-form-message.youzify-membership-success-msg:not(.tp-youzify-cookie-flash) p,
html[data-theme='dark'] .youzify-membership-form.youzify-membership-lost-password-page .youzify-membership-form-message.youzify-membership-success-msg:not(.tp-youzify-cookie-flash) p,
body.dark-mode .youzify-membership-form.youzify-membership-lost_password-page .youzify-membership-form-message.youzify-membership-success-msg:not(.tp-youzify-cookie-flash) p,
html[data-theme='dark'] .youzify-membership-form.youzify-membership-lost_password-page .youzify-membership-form-message.youzify-membership-success-msg:not(.tp-youzify-cookie-flash) p {
  color: #c8f7d4 !important;
  background: transparent !important;
  background-color: transparent !important;
}
body.dark-mode .youzify-membership-form.youzify-membership-login-page .youzify-membership-form-message.youzify-membership-error-msg:not(.tp-youzify-cookie-flash),
html[data-theme='dark'] .youzify-membership-form.youzify-membership-login-page .youzify-membership-form-message.youzify-membership-error-msg:not(.tp-youzify-cookie-flash),
body.dark-mode .youzify-membership-form.youzify-membership-lost-password-page .youzify-membership-form-message.youzify-membership-error-msg:not(.tp-youzify-cookie-flash),
html[data-theme='dark'] .youzify-membership-form.youzify-membership-lost-password-page .youzify-membership-form-message.youzify-membership-error-msg:not(.tp-youzify-cookie-flash),
body.dark-mode .youzify-membership-form.youzify-membership-lost_password-page .youzify-membership-form-message.youzify-membership-error-msg:not(.tp-youzify-cookie-flash),
html[data-theme='dark'] .youzify-membership-form.youzify-membership-lost_password-page .youzify-membership-form-message.youzify-membership-error-msg:not(.tp-youzify-cookie-flash),
body.dark-mode .youzify-membership-form .youzify-membership-form-message.youzify-membership-error-msg.tp-lp-err-banner,
html[data-theme='dark'] .youzify-membership-form .youzify-membership-form-message.youzify-membership-error-msg.tp-lp-err-banner {
  background: var(--tp-bnr-error-bg) !important;
  background-color: var(--tp-bnr-error-bg) !important;
  background-image: none !important;
  border: 1px solid var(--tp-bnr-error-border) !important;
  border-left: 4px solid var(--tp-bnr-error-text) !important;
  color: var(--tp-bnr-error-text) !important;
  box-shadow: var(--tp-bnr-shadow) !important;
}
body.dark-mode .youzify-membership-form.youzify-membership-login-page .youzify-membership-form-message.youzify-membership-error-msg:not(.tp-youzify-cookie-flash) p,
html[data-theme='dark'] .youzify-membership-form.youzify-membership-login-page .youzify-membership-form-message.youzify-membership-error-msg:not(.tp-youzify-cookie-flash) p,
body.dark-mode .youzify-membership-form.youzify-membership-lost-password-page .youzify-membership-form-message.youzify-membership-error-msg:not(.tp-youzify-cookie-flash) p,
html[data-theme='dark'] .youzify-membership-form.youzify-membership-lost-password-page .youzify-membership-form-message.youzify-membership-error-msg:not(.tp-youzify-cookie-flash) p,
body.dark-mode .youzify-membership-form.youzify-membership-lost_password-page .youzify-membership-form-message.youzify-membership-error-msg:not(.tp-youzify-cookie-flash) p,
html[data-theme='dark'] .youzify-membership-form.youzify-membership-lost_password-page .youzify-membership-form-message.youzify-membership-error-msg:not(.tp-youzify-cookie-flash) p,
body.dark-mode .youzify-membership-form .youzify-membership-form-message.tp-lp-err-banner p,
html[data-theme='dark'] .youzify-membership-form .youzify-membership-form-message.tp-lp-err-banner p {
  color: #fecaca !important;
  background: transparent !important;
  background-color: transparent !important;
}

/*
 * Youzify cookie flash: force the same rounded banner shell as shared notices.
 * This keeps login/register/lost-password visually identical in light/dark themes.
 */
#youzify-membership .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash,
#youzify-membership.youzify-membership-page-box .youzify-membership-form-message.tp-youzify-cookie-flash,
#youzify .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash,
#content .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash,
#content .youzify-membership .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash,
#login-page .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash,
#lost-password-page .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash,
#overflow-x-wrapper .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 16px !important;
  padding: 12px 16px !important;
  border-radius: var(--tp-bnr-radius, 12px) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  font-family: var(--tp-bnr-font, 'Barlow', sans-serif) !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow: var(--tp-bnr-shadow) !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-left-width: 0 !important;
}
#youzify-membership .youzify-membership-form.form-with-header .youzify-membership-form-message.tp-youzify-cookie-flash,
#youzify .youzify-membership-form.form-with-header .youzify-membership-form-message.tp-youzify-cookie-flash,
#content .youzify-membership-form.form-with-header .youzify-membership-form-message.tp-youzify-cookie-flash,
#login-page .youzify-membership-form.form-with-header .youzify-membership-form-message.tp-youzify-cookie-flash,
#lost-password-page .youzify-membership-form.form-with-header .youzify-membership-form-message.tp-youzify-cookie-flash,
#overflow-x-wrapper .youzify-membership-form.form-with-header .youzify-membership-form-message.tp-youzify-cookie-flash {
  padding: 14px 18px !important;
  border-top-width: 1px !important;
  border-top-style: solid !important;
}
#youzify-membership .youzify-membership-form.form-with-header .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg,
#youzify .youzify-membership-form.form-with-header .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg,
#content .youzify-membership-form.form-with-header .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg,
#login-page .youzify-membership-form.form-with-header .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg,
#lost-password-page .youzify-membership-form.form-with-header .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg,
#overflow-x-wrapper .youzify-membership-form.form-with-header .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg {
  border-top-color: var(--tp-bnr-error-border, rgba(248, 113, 113, 0.4)) !important;
}
#youzify-membership .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash::before,
#youzify-membership .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash::after,
#content .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash::before,
#content .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash::after,
#login-page .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash::before,
#login-page .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash::after,
#lost-password-page .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash::before,
#lost-password-page .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash::after,
#overflow-x-wrapper .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash::before,
#overflow-x-wrapper .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash::after {
  display: none !important;
  content: none !important;
}
#youzify-membership .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash p,
#youzify-membership.youzify-membership-page-box .youzify-membership-form-message.tp-youzify-cookie-flash p,
#youzify .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash p,
#content .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash p,
#login-page .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash p,
#lost-password-page .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash p,
#overflow-x-wrapper .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash p,
#youzify-membership .youzify-membership-form.form-with-header .youzify-membership-form-message.tp-youzify-cookie-flash p,
#youzify .youzify-membership-form.form-with-header .youzify-membership-form-message.tp-youzify-cookie-flash p,
#content .youzify-membership-form.form-with-header .youzify-membership-form-message.tp-youzify-cookie-flash p,
#login-page .youzify-membership-form.form-with-header .youzify-membership-form-message.tp-youzify-cookie-flash p,
#lost-password-page .youzify-membership-form.form-with-header .youzify-membership-form-message.tp-youzify-cookie-flash p,
#overflow-x-wrapper .youzify-membership-form.form-with-header .youzify-membership-form-message.tp-youzify-cookie-flash p {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}
#youzify-membership .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg,
#youzify-membership.youzify-membership-page-box .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg,
#youzify .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg,
#content .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg,
#login-page .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg,
#lost-password-page .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg,
#overflow-x-wrapper .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg {
  background: var(--tp-bnr-error-bg, rgba(220, 38, 38, 0.14)) !important;
  background-color: var(--tp-bnr-error-bg, rgba(220, 38, 38, 0.14)) !important;
  background-image: none !important;
  border-color: var(--tp-bnr-error-border, rgba(248, 113, 113, 0.4)) !important;
  border-left-color: transparent !important;
  color: var(--tp-bnr-error-text, #fca5a5) !important;
}
#youzify-membership .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg p,
#youzify-membership.youzify-membership-page-box .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg p,
#youzify .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg p,
#content .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg p,
#login-page .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg p,
#lost-password-page .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg p,
#overflow-x-wrapper .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg p,
#youzify-membership .youzify-membership-form.form-with-header .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg p,
#youzify .youzify-membership-form.form-with-header .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg p,
#content .youzify-membership-form.form-with-header .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg p,
#login-page .youzify-membership-form.form-with-header .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg p,
#lost-password-page .youzify-membership-form.form-with-header .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg p,
#overflow-x-wrapper .youzify-membership-form.form-with-header .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg p {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--tp-bnr-error-text, #fca5a5) !important;
  -webkit-text-fill-color: var(--tp-bnr-error-text, #fca5a5) !important;
}
body.dark-mode #content .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg,
body.dark-mode #login-page .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg,
body.dark-mode #lost-password-page .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg,
body.dark-mode #overflow-x-wrapper .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg,
html[data-theme='dark'] #content .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg,
html[data-theme='dark'] #login-page .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg,
html[data-theme='dark'] #lost-password-page .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg,
html[data-theme='dark'] #overflow-x-wrapper .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg {
  color: #fecaca !important;
}
body.dark-mode #content .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg p,
body.dark-mode #login-page .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg p,
body.dark-mode #lost-password-page .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg p,
body.dark-mode #overflow-x-wrapper .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg p,
html[data-theme='dark'] #content .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg p,
html[data-theme='dark'] #login-page .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg p,
html[data-theme='dark'] #lost-password-page .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg p,
html[data-theme='dark'] #overflow-x-wrapper .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg p,
body.dark-mode #content .youzify-membership-form.form-with-header .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg p,
body.dark-mode #login-page .youzify-membership-form.form-with-header .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg p,
body.dark-mode #lost-password-page .youzify-membership-form.form-with-header .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg p,
body.dark-mode #overflow-x-wrapper .youzify-membership-form.form-with-header .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg p,
html[data-theme='dark'] #content .youzify-membership-form.form-with-header .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg p,
html[data-theme='dark'] #login-page .youzify-membership-form.form-with-header .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg p,
html[data-theme='dark'] #lost-password-page .youzify-membership-form.form-with-header .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg p,
html[data-theme='dark'] #overflow-x-wrapper .youzify-membership-form.form-with-header .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg p {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #fecaca !important;
  -webkit-text-fill-color: #fecaca !important;
}
#youzify-membership .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-success-msg,
#youzify-membership.youzify-membership-page-box .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-success-msg,
#youzify-membership .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.tp-checkemail-success,
#youzify-membership.youzify-membership-page-box .youzify-membership-form-message.tp-youzify-cookie-flash.tp-checkemail-success,
#youzify .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-success-msg,
#youzify .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.tp-checkemail-success,
#content .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-success-msg,
#content .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.tp-checkemail-success,
#login-page .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-success-msg,
#login-page .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.tp-checkemail-success,
#lost-password-page .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-success-msg,
#lost-password-page .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.tp-checkemail-success,
#overflow-x-wrapper .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-success-msg,
#overflow-x-wrapper .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.tp-checkemail-success {
  background: var(--tp-bnr-success-bg, rgba(34, 197, 94, 0.12)) !important;
  background-color: var(--tp-bnr-success-bg, rgba(34, 197, 94, 0.12)) !important;
  background-image: none !important;
  border-color: var(--tp-bnr-success-border, rgba(74, 222, 128, 0.35)) !important;
  border-left-color: transparent !important;
  color: var(--tp-bnr-success-text, #86efac) !important;
}
#youzify-membership .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-warning-msg,
#youzify-membership.youzify-membership-page-box .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-warning-msg,
#youzify .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-warning-msg,
#content .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-warning-msg,
#login-page .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-warning-msg,
#lost-password-page .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-warning-msg,
#overflow-x-wrapper .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-warning-msg {
  background: var(--tp-bnr-warn-bg, rgba(245, 158, 11, 0.14)) !important;
  background-color: var(--tp-bnr-warn-bg, rgba(245, 158, 11, 0.14)) !important;
  background-image: none !important;
  border-color: var(--tp-bnr-warn-border, rgba(251, 191, 36, 0.35)) !important;
  border-left-color: transparent !important;
  color: var(--tp-bnr-warn-text, #fde68a) !important;
}
/* Info: no youzify-* variant class */
#youzify-membership .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash:not(.youzify-membership-success-msg):not(.youzify-membership-error-msg):not(.youzify-membership-warning-msg):not(.tp-checkemail-success),
#youzify-membership.youzify-membership-page-box .youzify-membership-form-message.tp-youzify-cookie-flash:not(.youzify-membership-success-msg):not(.youzify-membership-error-msg):not(.youzify-membership-warning-msg):not(.tp-checkemail-success),
#youzify .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash:not(.youzify-membership-success-msg):not(.youzify-membership-error-msg):not(.youzify-membership-warning-msg):not(.tp-checkemail-success),
#content .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash:not(.youzify-membership-success-msg):not(.youzify-membership-error-msg):not(.youzify-membership-warning-msg):not(.tp-checkemail-success),
#login-page .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash:not(.youzify-membership-success-msg):not(.youzify-membership-error-msg):not(.youzify-membership-warning-msg):not(.tp-checkemail-success),
#lost-password-page .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash:not(.youzify-membership-success-msg):not(.youzify-membership-error-msg):not(.youzify-membership-warning-msg):not(.tp-checkemail-success),
#overflow-x-wrapper .youzify-membership-form .youzify-membership-form-message.tp-youzify-cookie-flash:not(.youzify-membership-success-msg):not(.youzify-membership-error-msg):not(.youzify-membership-warning-msg):not(.tp-checkemail-success) {
  background: var(--tp-bnr-info-bg, linear-gradient(135deg, rgba(124, 58, 237, 0.18) 0%, rgba(124, 58, 237, 0.08) 100%)) !important;
  border-color: var(--tp-bnr-info-border, rgba(167, 139, 250, 0.35)) !important;
  border-left-color: transparent !important;
  color: var(--tp-bnr-text, #e4e4e7) !important;
}

body.dark-mode .youzify-membership-form.youzify-membership-login-page .youzify-membership-form-message.youzify-membership-warning-msg:not(.tp-youzify-cookie-flash),
html[data-theme='dark'] .youzify-membership-form.youzify-membership-login-page .youzify-membership-form-message.youzify-membership-warning-msg:not(.tp-youzify-cookie-flash),
body.dark-mode .youzify-membership-form.youzify-membership-lost-password-page .youzify-membership-form-message.youzify-membership-warning-msg:not(.tp-youzify-cookie-flash),
html[data-theme='dark'] .youzify-membership-form.youzify-membership-lost-password-page .youzify-membership-form-message.youzify-membership-warning-msg:not(.tp-youzify-cookie-flash),
body.dark-mode .youzify-membership-form.youzify-membership-lost_password-page .youzify-membership-form-message.youzify-membership-warning-msg:not(.tp-youzify-cookie-flash),
html[data-theme='dark'] .youzify-membership-form.youzify-membership-lost_password-page .youzify-membership-form-message.youzify-membership-warning-msg:not(.tp-youzify-cookie-flash) {
  background: var(--tp-bnr-warn-bg) !important;
  background-color: var(--tp-bnr-warn-bg) !important;
  background-image: none !important;
  border: 1px solid var(--tp-bnr-warn-border) !important;
  border-left: 4px solid var(--tp-bnr-warn-text) !important;
  color: var(--tp-bnr-warn-text) !important;
  box-shadow: var(--tp-bnr-shadow) !important;
}
body:not(.dark-mode) .youzify-membership-form.youzify-membership-login-page .youzify-membership-form-message.youzify-membership-success-msg:not(.tp-youzify-cookie-flash),
body.light-mode .youzify-membership-form.youzify-membership-login-page .youzify-membership-form-message.youzify-membership-success-msg:not(.tp-youzify-cookie-flash),
body:not(.dark-mode) .youzify-membership-form.youzify-membership-lost-password-page .youzify-membership-form-message.youzify-membership-success-msg:not(.tp-youzify-cookie-flash),
body.light-mode .youzify-membership-form.youzify-membership-lost-password-page .youzify-membership-form-message.youzify-membership-success-msg:not(.tp-youzify-cookie-flash),
body:not(.dark-mode) .youzify-membership-form.youzify-membership-lost_password-page .youzify-membership-form-message.youzify-membership-success-msg:not(.tp-youzify-cookie-flash),
body.light-mode .youzify-membership-form.youzify-membership-lost_password-page .youzify-membership-form-message.youzify-membership-success-msg:not(.tp-youzify-cookie-flash) {
  background: var(--tp-bnr-success-bg) !important;
  background-color: var(--tp-bnr-success-bg) !important;
  background-image: none !important;
  border: 1px solid var(--tp-bnr-success-border) !important;
  border-left: 4px solid var(--tp-bnr-success-text) !important;
  color: var(--tp-bnr-success-text) !important;
  box-shadow: var(--tp-bnr-shadow) !important;
}

/* ============================================================
   General – kept from earlier
   ============================================================ */

/* ── Members tab fix ── */
.olympus-theme #buddypress div.item-list-tabs ul li#members-all a span {display:none !important;}

/* Hide Profile Details / Display Name */
#profile-details-section { display:none !important; }

/* Hide visibility toggle */
.field-visibility-settings-notoggle,
#field-visibility-settings-toggle-1 { display:none !important; }

/* ── Unified banners & notices (BP, WooCommerce, bbPress, GamiPress, WP) ── */
body:not(.dark-mode),
body.light-mode {
	--tp-bnr-font: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--tp-bnr-radius: 12px;
	--tp-bnr-accent: #7c3aed;
	--tp-bnr-accent-mid: #a78bfa;
	--tp-bnr-bg: #ffffff;
	--tp-bnr-border: #e8e6ef;
	--tp-bnr-text: #1a1a24;
	--tp-bnr-shadow: 0 4px 22px rgba(124, 58, 237, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
	--tp-bnr-info-bg: linear-gradient(135deg, rgba(124, 58, 237, 0.09) 0%, rgba(167, 139, 250, 0.06) 100%);
	--tp-bnr-info-border: rgba(124, 58, 237, 0.28);
	--tp-bnr-success-bg: rgba(22, 163, 74, 0.1);
	--tp-bnr-success-border: rgba(22, 163, 74, 0.38);
	--tp-bnr-success-text: #166534;
	--tp-bnr-warn-bg: rgba(245, 158, 11, 0.12);
	--tp-bnr-warn-border: rgba(217, 119, 6, 0.4);
	--tp-bnr-warn-text: #9a3412;
	--tp-bnr-error-bg: rgba(220, 38, 38, 0.1);
	--tp-bnr-error-border: rgba(220, 38, 38, 0.38);
	--tp-bnr-error-text: #b91c1c;
}
body.dark-mode,
html[data-theme='dark'] body {
	--tp-bnr-bg: #1c1c22;
	--tp-bnr-border: #353946;
	--tp-bnr-text: #e4e4e7;
	--tp-bnr-shadow: 0 4px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(167, 139, 250, 0.08);
	--tp-bnr-info-bg: linear-gradient(135deg, rgba(124, 58, 237, 0.18) 0%, rgba(124, 58, 237, 0.08) 100%);
	--tp-bnr-info-border: rgba(167, 139, 250, 0.35);
	--tp-bnr-success-bg: rgba(34, 197, 94, 0.12);
	--tp-bnr-success-border: rgba(74, 222, 128, 0.35);
	--tp-bnr-success-text: #86efac;
	--tp-bnr-warn-bg: rgba(245, 158, 11, 0.14);
	--tp-bnr-warn-border: rgba(251, 191, 36, 0.35);
	--tp-bnr-warn-text: #fde68a;
	--tp-bnr-error-bg: rgba(220, 38, 38, 0.14);
	--tp-bnr-error-border: rgba(248, 113, 113, 0.4);
	--tp-bnr-error-text: #fca5a5;
}

/* Shared “card” shell */
#template-notices .bp-feedback,
#template-notices.youzify-membership-form-message,
.youzify-membership #template-notices.youzify-membership-form-message,
#buddypress .bp-feedback,
.buddypress-wrap .bp-feedback,
.bp-feedback,
#buddypress div#message,
.buddypress-wrap div#message,
#youzify div#message,
div#message.updated,
div#message.error,
div#message.warning,
/* BP register / Youzify: plain class="error" (no #message) */
#buddypress div.error,
.buddypress-wrap div.error,
#register-page div.error,
.youzify-membership div.error,
#youzify_membership_signup_form div.error,
form.standard-form div.error,
.notice.updated,
.notice.error,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error,
.bbp-template-notice,
#youzify .woocommerce-message,
#youzify .woocommerce-info,
#youzify .woocommerce-error,
.gamipress-achievement-congratulations {
	font-family: var(--tp-bnr-font) !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	border-radius: var(--tp-bnr-radius) !important;
	padding: 14px 18px !important;
	margin: 0 0 16px !important;
	box-shadow: var(--tp-bnr-shadow) !important;
	box-sizing: border-box !important;
}

/* Info / default / neutral (purple, on-brand) */
#template-notices .bp-feedback:not(.error):not(.success):not(.warning):not(.updated),
#buddypress .bp-feedback:not(.error):not(.success):not(.warning):not(.updated),
.buddypress-wrap .bp-feedback:not(.error):not(.success):not(.warning):not(.updated),
.bp-feedback.info,
.woocommerce-info,
#youzify .woocommerce-info,
#buddypress div#message:not(.error):not(.warning):not(.updated),
.buddypress-wrap div#message:not(.error):not(.warning):not(.updated),
#youzify div#message.info,
#youzify div#message:not(.error):not(.warning):not(.updated),
.bbp-template-notice.info,
#template-notices.youzify-membership-form-message:not(.youzify-membership-success-msg):not(.youzify-membership-error-msg):not(.youzify-membership-warning-msg) {
	background: var(--tp-bnr-info-bg) !important;
	border: 1px solid var(--tp-bnr-info-border) !important;
	border-left: 4px solid var(--tp-bnr-accent) !important;
	color: var(--tp-bnr-text) !important;
}
body:not(.dark-mode) .woocommerce-info,
body.light-mode .woocommerce-info,
body:not(.dark-mode) .bbp-template-notice.info,
body.light-mode .bbp-template-notice.info,
body:not(.dark-mode) #buddypress div#message:not(.error):not(.warning):not(.updated),
body.light-mode #buddypress div#message:not(.error):not(.warning):not(.updated),
body:not(.dark-mode) .buddypress-wrap div#message:not(.error):not(.warning):not(.updated),
body.light-mode .buddypress-wrap div#message:not(.error):not(.warning):not(.updated),
body:not(.dark-mode) #youzify div#message.info,
body.light-mode #youzify div#message.info,
body:not(.dark-mode) #youzify div#message:not(.error):not(.warning):not(.updated),
body.light-mode #youzify div#message:not(.error):not(.warning):not(.updated) {
	background-color: #faf9ff !important;
}

/* Success */
#template-notices .bp-feedback.success,
#buddypress .bp-feedback.success,
.buddypress-wrap .bp-feedback.success,
.bp-feedback.success,
.bp-feedback.updated,
div#message.updated,
.notice.updated,
div#message.updated.bp-success,
.woocommerce-message,
#youzify .woocommerce-message,
#template-notices.youzify-membership-form-message.youzify-membership-success-msg,
.youzify-membership-form-message.youzify-membership-success-msg {
	background: var(--tp-bnr-success-bg) !important;
	border: 1px solid var(--tp-bnr-success-border) !important;
	border-left: 4px solid var(--tp-bnr-success-text) !important;
	color: var(--tp-bnr-success-text) !important;
}
body:not(.dark-mode) .woocommerce-message,
body.light-mode .woocommerce-message {
	background-color: rgba(240, 253, 244, 0.95) !important;
}

/* Warning */
#template-notices .bp-feedback.warning,
#buddypress .bp-feedback.warning,
.buddypress-wrap .bp-feedback.warning,
.bp-feedback.warning,
div#message.warning,
.bbp-template-notice.bbp-template-notice-warning,
#template-notices.youzify-membership-form-message.youzify-membership-warning-msg,
.youzify-membership-form-message.youzify-membership-warning-msg {
	background: var(--tp-bnr-warn-bg) !important;
	border: 1px solid var(--tp-bnr-warn-border) !important;
	border-left: 4px solid var(--tp-bnr-warn-text) !important;
	color: var(--tp-bnr-warn-text) !important;
}

/* Error */
#template-notices .bp-feedback.error,
#buddypress .bp-feedback.error,
.buddypress-wrap .bp-feedback.error,
.bp-feedback.error,
div#message.error,
.notice.error,
.woocommerce-error,
#youzify .woocommerce-error,
.bbp-template-notice.error,
.bbp-template-notice.important,
.bbp-template-notice.bbp-template-notice-error,
#template-notices.youzify-membership-form-message.youzify-membership-error-msg,
.youzify-membership-form-message.youzify-membership-error-msg,
#buddypress div.error,
.buddypress-wrap div.error,
#register-page div.error,
.youzify-membership div.error,
#youzify_membership_signup_form div.error,
form.standard-form div.error {
	background: var(--tp-bnr-error-bg) !important;
	background-color: var(--tp-bnr-error-bg) !important;
	background-image: none !important;
	border: 1px solid var(--tp-bnr-error-border) !important;
	border-left: 4px solid var(--tp-bnr-error-text) !important;
	color: var(--tp-bnr-error-text) !important;
}
/* tp-youzify-cookie-flash keeps a clean rounded border (no left accent line). */
.youzify-membership-form-message.tp-youzify-cookie-flash,
.youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-success-msg,
.youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-warning-msg,
.youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg {
	border-left-width: 0 !important;
	border-left-color: transparent !important;
}

/* Login (in-page): cookie flashes match register `div.error` / shared banners — padding, full border + left accent. */
#login-page .youzify-membership-form.youzify-membership-login-page .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg,
#content .youzify-membership-form.youzify-membership-login-page .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg,
#youzify-membership .youzify-membership-form.youzify-membership-login-page .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-error-msg {
	padding: 14px 18px !important;
	margin: 0 0 16px !important;
	border: 1px solid var(--tp-bnr-error-border) !important;
	border-left: 4px solid var(--tp-bnr-error-text) !important;
	box-shadow: var(--tp-bnr-shadow) !important;
}
#login-page .youzify-membership-form.youzify-membership-login-page .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-success-msg,
#content .youzify-membership-form.youzify-membership-login-page .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-success-msg,
#youzify-membership .youzify-membership-form.youzify-membership-login-page .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-success-msg,
#login-page .youzify-membership-form.youzify-membership-login-page .youzify-membership-form-message.tp-youzify-cookie-flash.tp-checkemail-success,
#content .youzify-membership-form.youzify-membership-login-page .youzify-membership-form-message.tp-youzify-cookie-flash.tp-checkemail-success,
#youzify-membership .youzify-membership-form.youzify-membership-login-page .youzify-membership-form-message.tp-youzify-cookie-flash.tp-checkemail-success {
	padding: 14px 18px !important;
	margin: 0 0 16px !important;
	border: 1px solid var(--tp-bnr-success-border) !important;
	border-left: 4px solid var(--tp-bnr-success-text) !important;
	box-shadow: var(--tp-bnr-shadow) !important;
}
#login-page .youzify-membership-form.youzify-membership-login-page .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-warning-msg,
#content .youzify-membership-form.youzify-membership-login-page .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-warning-msg,
#youzify-membership .youzify-membership-form.youzify-membership-login-page .youzify-membership-form-message.tp-youzify-cookie-flash.youzify-membership-warning-msg {
	padding: 14px 18px !important;
	margin: 0 0 16px !important;
	border: 1px solid var(--tp-bnr-warn-border) !important;
	border-left: 4px solid var(--tp-bnr-warn-text) !important;
	box-shadow: var(--tp-bnr-shadow) !important;
}

/* BuddyPress / Youzify register: `div.error` rounded in dark mode too (plugin often forces small radius). */
body.dark-mode #register-page div.error,
html[data-theme='dark'] #register-page div.error,
body.dark-mode #youzify_membership_signup_form div.error,
html[data-theme='dark'] #youzify_membership_signup_form div.error,
body.dark-mode .youzify-membership-signup-page div.error,
html[data-theme='dark'] .youzify-membership-signup-page div.error,
body.dark-mode .youzify-membership-page-box #register-page div.error,
html[data-theme='dark'] .youzify-membership-page-box #register-page div.error {
	border-radius: var(--tp-bnr-radius, 12px) !important;
}

/* Inner text & links */
#template-notices .bp-feedback p,
#template-notices.youzify-membership-form-message p,
.youzify-membership-form-message p,
#buddypress .bp-feedback p,
.buddypress-wrap .bp-feedback p,
.bp-feedback p,
#youzify div#message p,
.gamipress-achievement-congratulations p {
	margin: 0 !important;
	font-size: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
}
#template-notices .bp-feedback a,
#buddypress .bp-feedback a,
.buddypress-wrap .bp-feedback a,
.bp-feedback a,
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a,
.bbp-template-notice a,
#youzify div#message a,
#template-notices.youzify-membership-form-message a,
.youzify-membership-form-message a {
	color: var(--tp-bnr-accent) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	border-bottom: 1px solid transparent !important;
	transition: border-color 0.15s, color 0.15s !important;
}
#template-notices .bp-feedback a:hover,
#buddypress .bp-feedback a:hover,
.bp-feedback a:hover,
.woocommerce-message a:hover,
.woocommerce-info a:hover,
.woocommerce-error a:hover,
#youzify div#message a:hover,
#template-notices.youzify-membership-form-message a:hover,
.youzify-membership-form-message a:hover {
	color: var(--tp-bnr-accent-mid) !important;
	border-bottom-color: rgba(124, 58, 237, 0.45) !important;
}
body.dark-mode #template-notices .bp-feedback a:hover,
body.dark-mode .bp-feedback a:hover,
body.dark-mode #template-notices.youzify-membership-form-message a:hover,
body.dark-mode .youzify-membership-form-message a:hover,
html[data-theme='dark'] #template-notices .bp-feedback a:hover,
html[data-theme='dark'] .bp-feedback a:hover,
html[data-theme='dark'] #template-notices.youzify-membership-form-message a:hover,
html[data-theme='dark'] .youzify-membership-form-message a:hover {
	color: #c4b5fd !important;
	border-bottom-color: rgba(196, 181, 253, 0.5) !important;
}

/* Woo: hide default dingbats clutter (optional subtle FA via theme — keep layout clean) */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	display: none !important;
}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	padding-left: 18px !important;
}

/* GamiPress congratulations = same family as other banners */
.gamipress-achievement-congratulations {
	border: 1px solid var(--tp-bnr-info-border) !important;
	border-left: 4px solid var(--tp-bnr-accent) !important;
	background: var(--tp-bnr-info-bg) !important;
}
body:not(.dark-mode) .gamipress-achievement-congratulations,
body.light-mode .gamipress-achievement-congratulations {
	background-color: #faf9ff !important;
}
body.dark-mode .gamipress-achievement-congratulations,
html[data-theme='dark'] .gamipress-achievement-congratulations {
	background-color: var(--tp-bnr-bg) !important;
	border-color: var(--tp-bnr-border) !important;
	border-left-color: var(--tp-bnr-accent-mid) !important;
}

/* Youzify empty / helper lines in lists — soft banner strip */
.youzify .youzify-list-notice {
	font-family: var(--tp-bnr-font) !important;
	font-size: 13px !important;
	line-height: 1.45 !important;
	padding: 12px 14px !important;
	border-radius: var(--tp-bnr-radius) !important;
	background: var(--tp-bnr-info-bg) !important;
	border: 1px solid var(--tp-bnr-info-border) !important;
	border-left: 3px solid var(--tp-bnr-accent) !important;
	color: var(--tp-bnr-text) !important;
	margin: 8px 0 !important;
}
body:not(.dark-mode) .youzify .youzify-list-notice,
body.light-mode .youzify .youzify-list-notice {
	background-color: #faf9ff !important;
}

/**User Profile Menu**/

nav#user-profile {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* menu toggle */

nav#user-profile .menu-toggle {
    position: relative;
    width: 40px;
    height: 40px;
    cursor: not-allowed;
    display: flex;
    justify-content: center;
    align-items: center;
}

nav#user-profile .menu-toggle::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 4px;
    background: #000;
    box-shadow: 0 8px 0 #000,
                0 -8px 0 #000;
}

/* profile menu */

nav#user-profile .profile {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    cursor: default;
    text-align: end;
}

/* Only name + avatar open the dropdown — not the notifications link */
nav#user-profile .profile .user,
nav#user-profile .profile .img-box {
    cursor: pointer;
}

nav#user-profile .profile h3 {
    text-align: end;
    line-height: 1;
    margin-bottom: 4px;
    font-weight: 600;
    font-size: 16px;
}

nav#user-profile .profile p {
    line-height: 1;
    font-size: 14px;
    opacity: .6;
    margin-bottom: 0px;
}

nav#user-profile .profile .img-box {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
}

nav#user-profile .profile .img-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Header user dropdown (modernised to match profile nav dropdown) ── */

nav#user-profile .user-profile-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 200px;
    padding: 8px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 10000;
    box-sizing: border-box;
}

body.dark-mode nav#user-profile .user-profile-menu {
    background: #1e2228 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5) !important;
}

.user-profile-menu::before {
    display: none;
}

.user-profile-menu.active {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
}

.user-profile-menu ul {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 10;
    background: transparent;
    padding: 0;
    margin: 0;
    list-style: none;
    padding-inline-start: 0;
}

body.dark-mode .user-profile-menu ul {
    background: transparent;
}

.user-profile-menu ul li {
    list-style: none;
    border-radius: 10px;
    transition: background 0.15s ease;
}

.user-profile-menu ul li:hover {
    background: rgba(0, 0, 0, 0.04);
}

body.dark-mode .user-profile-menu ul li:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

.user-profile-menu ul li:hover a {
    color: inherit !important;
}

.user-profile-menu ul li a {
    text-decoration: none;
    color: var(--ol-body-font-color, #3e4265);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
    transition: background 0.15s ease, color 0.15s ease;
}

body.dark-mode .user-profile-menu ul li a {
    color: var(--ol-body-font-color, #d1d5db) !important;
}

.user-profile-menu ul li a:active {
    background: rgba(0, 0, 0, 0.08);
}

body.dark-mode .user-profile-menu ul li a:active {
    background: rgba(255, 255, 255, 0.1) !important;
}

.user-profile-menu ul li a i {
    font-size: 15px;
    width: 18px;
    text-align: center;
    opacity: 0.7;
}

.user-profile-menu ul li:last-child {
    margin-top: 4px;
    border-top: 1px solid var(--ol-border-color, #e6ecf5);
    padding-top: 4px;
    border-radius: 0 0 10px 10px;
}

body.dark-mode .user-profile-menu ul li:last-child {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

.user-profile-menu ul li:last-child a {
    color: #ef4444;
}

.user-profile-menu ul li:last-child a i {
    opacity: 0.9;
}

.user-profile-menu ul li:last-child:hover {
    background: rgba(239, 68, 68, 0.08);
}

body.dark-mode .user-profile-menu ul li:last-child a {
    color: #f87171 !important;
}

body.dark-mode .user-profile-menu ul li:last-child:hover {
    background: rgba(248, 113, 113, 0.1) !important;
}

.tp-view-in-explore {
    display: inline-block;
    padding: 6px 12px;
    font-size: 13px;
    background: #548cff;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
}
.tp-view-in-explore:hover {
    background: #4570d8;
    color: #fff;
}
.tp-location-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 20px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding-left: 8px;
    padding-right: 8px;
    text-align: center;
}
.tp-location-meta-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 12px;
}
a.tp-location-feed-edit-map {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 8px;
    color: #fff !important;
    background: rgba(99, 102, 241, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.08);
    text-decoration: none !important;
    box-sizing: border-box;
    transition: background 0.15s ease, transform 0.1s ease;
}
a.tp-location-feed-edit-map:hover,
a.tp-location-feed-edit-map:focus-visible {
    background: #4f46e5;
    color: #fff !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.35);
}
a.tp-location-feed-edit-map:active {
    transform: scale(0.96);
}
a.tp-location-feed-edit-map i {
    font-size: 16px;
    line-height: 1;
}
body.dark-mode a.tp-location-feed-edit-map {
    background: rgba(129, 140, 248, 0.35);
    border-color: rgba(255, 255, 255, 0.12);
    color: #e0e7ff !important;
}
body.dark-mode a.tp-location-feed-edit-map:hover,
body.dark-mode a.tp-location-feed-edit-map:focus-visible {
    background: rgba(129, 140, 248, 0.55);
    color: #fff !important;
}
@media (max-width: 600px) {
    a.tp-location-feed-edit-map {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }
    a.tp-location-feed-edit-map i {
        font-size: 17px;
    }
}
/* Forum / activity: Reports — reset native mobile button chrome (iOS/WebKit) so theme styles apply */
button.tp-location-reports-open,
.tp-location-meta-row .tp-location-reports-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    min-height: 40px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff !important;
    background-color: #6b7280 !important;
    background-image: none !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    box-sizing: border-box;
    text-decoration: none;
    vertical-align: middle;
}
.tp-location-meta-row .tp-location-reports-open:hover,
.tp-location-meta-row .tp-location-reports-open:focus-visible {
    background-color: #4b5563 !important;
    color: #fff !important;
}
.tp-location-meta-row .tp-location-reports-open:active {
    background-color: #374151 !important;
    color: #fff !important;
}
body.dark-mode .tp-location-meta-row .tp-location-reports-open {
    background-color: rgba(255, 255, 255, 0.14) !important;
    color: #f3f4f6 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
body.dark-mode .tp-location-meta-row .tp-location-reports-open:hover,
body.dark-mode .tp-location-meta-row .tp-location-reports-open:focus-visible {
    background-color: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
}
@media (max-width: 600px) {
    .tp-location-meta-row .tp-location-reports-open {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 14px;
    }
}
.tp-location-meta-row .tp-difficulty-rating,
.tp-location-meta-row .chck.tp-difficulty-rating {
    margin-bottom: 0;
    margin-right: 0;
    margin-left: 0;
    text-align: center;
}
.tp-difficulty-rating {
    text-align: right;
    margin-bottom: 10px;
    margin-right: 10px;
    font-size: 16px;
}
.difficulty-easy i{
    color: #57F287;
}
  
.difficulty-moderate i{
    color: #f4d82d;
  
}
  
  .difficulty-hard i{
    color: #ED4245;
  }
  
  .difficulty-extreme i{
    color:  #000;
  }
/* ── Activity footer: pill toolbar (aligned with youzify-inline-mobile-nav) ── */
/* Hide Youzify’s duplicate Verify (direct child); real control is .tp-verify-wrapper */
.activity-meta a.button.yzpr-verify-location,
.activity-meta a.button.yzpr-verified-location {
    display: none !important;
}
.tp-verify-wrapper a.button.yzpr-verify-location,
.tp-verify-wrapper a.button.yzpr-verified-location {
    display: inline-flex !important;
}

body .youzify .activity-meta,
body.logged-in .youzify .activity-meta,
#buddypress.youzify .activity-meta,
.youzify .activity-list > li .activity-meta {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap !important;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100%;
    padding: 6px 0 0 !important;
    margin: 0 !important;
    table-layout: auto !important;
    border-spacing: 0 !important;
    line-height: 1.3 !important;
    box-sizing: border-box;
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: transparent !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
body .youzify .activity-meta::-webkit-scrollbar {
    display: none;
}

/* Hide built-in reactions strip (empty container); count is mirrored on .tp-like-wrapper (JS). */
body .youzify .activity-list > li .youzify-activity-statistics,
#buddypress.youzify li.activity-item .youzify-activity-statistics,
body .youzify ul#activity-stream > li .youzify-activity-statistics,
#youzify ul#activity-stream > li .youzify-activity-statistics {
    display: none !important;
}

/* Activity ⋯ button — pinned top-right of .activity-content */
body .youzify li.activity-item .activity-content,
#youzify li.activity-item .activity-content {
    position: relative !important;
}
body .youzify li.activity-item .youzify-show-item-tools,
#youzify li.activity-item .youzify-show-item-tools {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 32px;
    margin: 0 !important;
    padding: 4px 8px !important;
    cursor: pointer;
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute !important;
    top: 8px;
    right: 8px;
    left: auto !important;
    z-index: 10;
    color: #64748b !important;
    background: transparent !important;
    border-radius: 8px;
    flex-shrink: 0;
    box-sizing: border-box;
}
body .youzify li.activity-item .youzify-show-item-tools:hover,
#youzify li.activity-item .youzify-show-item-tools:hover {
    color: #334155 !important;
    background: rgba(0, 0, 0, 0.06) !important;
}
body .youzify li.activity-item .youzify-show-item-tools i,
#youzify li.activity-item .youzify-show-item-tools i {
    display: inline-block !important;
    opacity: 1 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    color: inherit !important;
}
body.dark-mode .youzify li.activity-item .youzify-show-item-tools,
html[data-theme='dark'] .youzify li.activity-item .youzify-show-item-tools,
body.dark-mode #youzify li.activity-item .youzify-show-item-tools,
html[data-theme='dark'] #youzify li.activity-item .youzify-show-item-tools {
    color: #a1a1aa !important;
}
body.dark-mode .youzify li.activity-item .youzify-show-item-tools:hover,
html[data-theme='dark'] .youzify li.activity-item .youzify-show-item-tools:hover,
body.dark-mode #youzify li.activity-item .youzify-show-item-tools:hover,
html[data-theme='dark'] #youzify li.activity-item .youzify-show-item-tools:hover {
    color: #e4e4e7 !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Single “like” only — hide Youzify multi-emoji reaction bar (saves still use default reaction server-side). */
body .youzify .yzpr-bar,
#buddypress.youzify .yzpr-bar {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Comments: hide emoji strip; keep out of flex layout (display:none can still leave odd gaps in some builds) */
body .youzify .acomment-options .yz-post-reactors-list {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    pointer-events: none !important;
}

/* ── Friendship embed card ("X and Y are now friends") ── */

/* Friend / connection actions: hidden in activity embeds & stream user cards (use profile cover strip instead) */
body .youzify .youzify-activity-embed .youzify-embed-action .friendship-button,
body .youzify #activity-stream .youzify-embed-action .friendship-button,
body .youzify ul.activity-list .youzify-embed-action .friendship-button,
body .youzify li.activity-item .youzify-wall-embed-user .youzify-embed-action .friendship-button {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    pointer-events: none !important;
}

.youzify-activity-embed .youzify-wall-embed.youzify-wall-embed-user {
    position: relative !important;
    overflow: visible !important;
    border-radius: 14px !important;
    border: 1px solid var(--ol-border-color, #e6ecf5) !important;
    background: var(--ol-card-bg-color, #fff) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    margin: 8px 0 4px !important;
}

.youzify-activity-embed {
    overflow: visible !important;
}

.youzify-activity-embed .youzify-wall-embed-user .youzify-cover {
    position: relative !important;
    height: 110px !important;
    overflow: hidden !important;
    border-radius: 14px 14px 0 0 !important;
}
.youzify-activity-embed .youzify-wall-embed-user .youzify-cover img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
.youzify-activity-embed .youzify-wall-embed-user .youzify-cover::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.35) 100%) !important;
    pointer-events: none !important;
}

/* All embed avatars: rounded box, image fills */
.youzify-embed-avatar img {
    border-radius: 12px !important;
    object-fit: cover !important;
}

/* Activity embed avatar — small inline circle (JS moves it into .youzify-embed-head) */
.youzify-activity-embed .youzify-wall-embed-user .youzify-embed-avatar {
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    z-index: auto !important;
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 2px solid var(--ol-card-bg-color, #fff) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10) !important;
    box-sizing: border-box !important;
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
}
.youzify-activity-embed .youzify-wall-embed-user .youzify-embed-avatar img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    border: none !important;
    box-shadow: none !important;
    object-fit: cover !important;
    display: block !important;
}

.youzify-activity-embed .youzify-wall-embed-user .youzify-embed-data {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 16px 16px 18px !important;
    text-align: center !important;
}

/* Head: inline-grid so avatar + name sit side by side, centered in card */
.youzify-activity-embed .youzify-wall-embed-user .youzify-embed-head {
    display: inline-grid !important;
    grid-template-columns: 40px 1fr !important;
    grid-template-rows: auto auto !important;
    column-gap: 10px !important;
    row-gap: 0 !important;
    align-items: center !important;
    text-align: left !important;
    margin-bottom: 14px !important;
}
.youzify-activity-embed .youzify-wall-embed-user .youzify-embed-name {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: block !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--heading-font-color, #515365) !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
}
.youzify-activity-embed .youzify-wall-embed-user .youzify-embed-name:hover {
    color: #6d28d9 !important;
}
.youzify-activity-embed .youzify-wall-embed-user .youzify-embed-meta {
    grid-column: 2 !important;
    grid-row: 2 !important;
    font-size: 12.5px !important;
    color: var(--tpp-muted, var(--body-font-color, #888da8)) !important;
    margin-top: 2px !important;
}

body .youzify .youzify-activity-embed .youzify-embed-action,
body .youzify .youzify-wall-embed-user .youzify-embed-action,
.youzify .youzify-embed-action {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    justify-content: center !important;
    align-items: stretch !important;
    align-self: stretch !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Collapse wrapper divs so <a> tags become direct flex children */
body .youzify .youzify-embed-action > div,
.youzify .youzify-embed-action > div {
    display: contents !important;
}
body .youzify .youzify-embed-action a,
body .youzify .youzify-embed-action a.friendship-button,
body .youzify .youzify-embed-action a.youzify-send-message,
.youzify .youzify-embed-action a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex: 1 1 0% !important;
    height: 36px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    border: none !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
    box-sizing: border-box !important;
    float: none !important;
    line-height: 1 !important;
}

/* Unfriend / Remove — soft rose secondary style */
body .youzify .youzify-embed-action .friendship-button a.remove,
body .youzify .youzify-embed-action a[rel="remove"],
body .youzify .youzify-embed-action a.remove {
    background: linear-gradient(180deg, rgba(254, 242, 242, 0.95), rgba(254, 226, 226, 0.88)) !important;
    color: #b91c1c !important;
    box-shadow: 0 1px 4px rgba(185, 28, 28, 0.08) !important;
}
body .youzify .youzify-embed-action .friendship-button a.remove:hover,
body .youzify .youzify-embed-action a[rel="remove"]:hover,
body .youzify .youzify-embed-action a.remove:hover {
    background: linear-gradient(180deg, #fee2e2, #fecaca) !important;
    box-shadow: 0 2px 8px rgba(185, 28, 28, 0.15) !important;
    transform: translateY(-1px) !important;
}

/* Add Friend / Accept — purple primary style */
body .youzify .youzify-embed-action .friendship-button a.add,
body .youzify .youzify-embed-action .friendship-button a.accept,
body .youzify .youzify-embed-action a[rel="add"],
body .youzify .youzify-embed-action a.add,
body .youzify .youzify-embed-action a.accept {
    background: linear-gradient(145deg, #7c3aed, #a78bfa) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25) !important;
}
body .youzify .youzify-embed-action .friendship-button a.add:hover,
body .youzify .youzify-embed-action .friendship-button a.accept:hover,
body .youzify .youzify-embed-action a[rel="add"]:hover,
body .youzify .youzify-embed-action a.add:hover,
body .youzify .youzify-embed-action a.accept:hover {
    background: linear-gradient(145deg, #6d28d9, #8b5cf6) !important;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35) !important;
    transform: translateY(-1px) !important;
}

/* Awaiting / Pending / Cancel Request — amber pill */
body .youzify .youzify-embed-action .friendship-button a.awaiting,
body .youzify .youzify-embed-action a.requested,
body .youzify .youzify-embed-action a.awaiting,
body .youzify .youzify-embed-action a.pending_friend {
    background: rgba(245, 158, 11, 0.14) !important;
    color: #b45309 !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
    box-shadow: none !important;
}

/* ── Friendship embed card — dark mode ── */
body.dark-mode .youzify-activity-embed .youzify-wall-embed.youzify-wall-embed-user,
html[data-theme='dark'] .youzify-activity-embed .youzify-wall-embed.youzify-wall-embed-user {
    background: var(--ol-card-bg-color, #20232b) !important;
    border-color: var(--ol-border-color, #353946) !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3) !important;
}
body.dark-mode .youzify-activity-embed .youzify-wall-embed-user .youzify-embed-avatar,
html[data-theme='dark'] .youzify-activity-embed .youzify-wall-embed-user .youzify-embed-avatar {
    border-color: var(--ol-card-bg-color, #20232b) !important;
}
body.dark-mode .youzify-activity-embed .youzify-wall-embed-user .youzify-embed-name,
html[data-theme='dark'] .youzify-activity-embed .youzify-wall-embed-user .youzify-embed-name {
    color: #f0f0f0 !important;
}
body.dark-mode .youzify-activity-embed .youzify-wall-embed-user .youzify-embed-name:hover,
html[data-theme='dark'] .youzify-activity-embed .youzify-wall-embed-user .youzify-embed-name:hover {
    color: #c4b5fd !important;
}
body.dark-mode .youzify-activity-embed .youzify-wall-embed-user .youzify-embed-meta,
html[data-theme='dark'] .youzify-activity-embed .youzify-wall-embed-user .youzify-embed-meta {
    color: var(--body-font-color, #949cb5) !important;
}

/* Dark unfriend button */
body.dark-mode .youzify .youzify-embed-action .friendship-button a.remove,
body.dark-mode .youzify .youzify-embed-action a.remove,
html[data-theme='dark'] .youzify .youzify-embed-action .friendship-button a.remove,
html[data-theme='dark'] .youzify .youzify-embed-action a.remove {
    background: linear-gradient(180deg, rgba(127, 29, 29, 0.25), rgba(153, 27, 27, 0.18)) !important;
    color: #fca5a5 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}
body.dark-mode .youzify .youzify-embed-action .friendship-button a.remove:hover,
body.dark-mode .youzify .youzify-embed-action a.remove:hover,
html[data-theme='dark'] .youzify .youzify-embed-action .friendship-button a.remove:hover,
html[data-theme='dark'] .youzify .youzify-embed-action a.remove:hover {
    background: linear-gradient(180deg, rgba(153, 27, 27, 0.35), rgba(185, 28, 28, 0.25)) !important;
    color: #fecaca !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
/* Dark add/accept button */
body.dark-mode .youzify .youzify-embed-action .friendship-button a.add,
body.dark-mode .youzify .youzify-embed-action .friendship-button a.accept,
body.dark-mode .youzify .youzify-embed-action a.add,
body.dark-mode .youzify .youzify-embed-action a.accept,
html[data-theme='dark'] .youzify .youzify-embed-action .friendship-button a.add,
html[data-theme='dark'] .youzify .youzify-embed-action .friendship-button a.accept,
html[data-theme='dark'] .youzify .youzify-embed-action a.add,
html[data-theme='dark'] .youzify .youzify-embed-action a.accept {
    background: linear-gradient(145deg, #7c3aed, #a78bfa) !important;
    color: #fff !important;
}
/* Dark pending / cancel request */
body.dark-mode .youzify .youzify-embed-action .friendship-button a.awaiting,
body.dark-mode .youzify .youzify-embed-action a.awaiting,
body.dark-mode .youzify .youzify-embed-action a.requested,
body.dark-mode .youzify .youzify-embed-action a.pending_friend,
html[data-theme='dark'] .youzify .youzify-embed-action .friendship-button a.awaiting,
html[data-theme='dark'] .youzify .youzify-embed-action a.awaiting,
html[data-theme='dark'] .youzify .youzify-embed-action a.requested,
html[data-theme='dark'] .youzify .youzify-embed-action a.pending_friend {
    background: rgba(245, 158, 11, 0.18) !important;
    color: #fcd34d !important;
    border-color: rgba(251, 191, 36, 0.35) !important;
}

/* ── Responsive: friendship embed card ── */
@media (max-width: 480px) {
    .youzify-activity-embed .youzify-wall-embed-user .youzify-cover {
        height: 85px !important;
    }
    .youzify-activity-embed .youzify-wall-embed-user .youzify-embed-avatar {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
    }
    .youzify-activity-embed .youzify-wall-embed-user .youzify-embed-head {
        grid-template-columns: 34px 1fr !important;
        column-gap: 8px !important;
    }
    .youzify-activity-embed .youzify-wall-embed-user .youzify-embed-data {
        padding: 12px 12px 14px !important;
    }
    .youzify-activity-embed .youzify-wall-embed-user .youzify-embed-name {
        font-size: 14px !important;
    }
}

/* Wall location: Leaflet container or static feed preview (linked image) */
body .youzify .activity-content:has(.tresspassers-posted-locations),
body .youzify .activity-content:has(.tp-location-feed-preview),
body .youzify li.tp-is-location-post .activity-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow: visible !important;
}
body .youzify .activity-content .tresspassers-posted-locations {
    flex-shrink: 0 !important;
    align-self: stretch !important;
    width: 100% !important;
    min-height: 220px !important;
    max-height: none !important;
    position: relative !important;
    z-index: 1 !important;
    margin-top: 12px !important;
    box-sizing: border-box !important;
    background-color: #c5c5c5 !important;
}
body .youzify .activity-content .tresspassers-posted-locations.leaflet-container {
    overflow: hidden !important;
}
body.dark-mode .youzify .activity-content .tresspassers-posted-locations,
html[data-theme='dark'] .youzify .activity-content .tresspassers-posted-locations {
    background-color: #3d3d3d !important;
}

/* Activity feed: static location preview (no Leaflet) */
body .youzify .activity-content a.tp-location-feed-preview {
    flex-shrink: 0 !important;
    align-self: stretch !important;
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    min-height: 220px !important;
    max-height: none !important;
    margin-top: 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    color: inherit !important;
    background-color: #c5c5c5 !important;
}
/* Uploaded photos stay 16:9 by default for the regular feed frame. */
body .youzify .activity-content a.tp-location-feed-preview:not(.tp-location-feed-preview--placeholder) {
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
}
/* No-photo map previews are portrait-leaning to feel more native in feed. */
body .youzify .activity-content a.tp-location-feed-preview.tp-location-feed-preview--map-only:not(.tp-location-feed-preview--placeholder) {
    aspect-ratio: 9 / 16 !important;
}
body .youzify .activity-content a.tp-location-feed-preview.tp-location-feed-preview--map-only:not(.tp-location-feed-preview--placeholder) .tp-location-feed-preview__img {
    object-fit: cover !important;
    background: transparent !important;
}
body .youzify .activity-content .tp-location-feed-preview__pin {
    position: absolute !important;
    z-index: 3 !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -92%) !important;
    width: 36px !important;
    height: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.38)) !important;
    pointer-events: none !important;
}
body .youzify .activity-content .tp-location-feed-preview__pin .tp-location-feed-preview__pin-svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}
.tpp-map-preview-pin {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 42px;
    transform: translate(-50%, -90%);
    z-index: 3;
    pointer-events: none;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
}
.tpp-map-preview-pin svg {
    display: block;
    width: 100%;
    height: 100%;
}
body .youzify .activity-content a.tp-location-feed-preview--placeholder {
    min-height: 220px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}
body .youzify .activity-content .tp-location-feed-preview__img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 480px !important;
    object-fit: cover !important;
    vertical-align: middle !important;
}
body .youzify .activity-content a.tp-location-feed-preview:not(.tp-location-feed-preview--placeholder) .tp-location-feed-preview__img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
}
body .youzify .activity-content .tp-location-feed-preview__ph-icon {
    font-size: 2.5rem !important;
    color: rgba(0, 0, 0, 0.35) !important;
}
body .youzify .activity-content .tp-location-feed-preview__label {
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 14px !important;
    padding: 10px 22px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: rgba(15, 15, 18, 0.82) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.2) inset !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    transform: translateX(-50%) !important;
    pointer-events: none !important;
    max-width: calc(100% - 32px) !important;
    box-sizing: border-box !important;
}
body .youzify .activity-content a.tp-location-feed-preview--placeholder .tp-location-feed-preview__label {
    position: static !important;
    transform: none !important;
    margin: 12px auto 0 !important;
    background: rgba(0, 0, 0, 0.06) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    color: rgba(0, 0, 0, 0.75) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
}
body.dark-mode .youzify .activity-content a.tp-location-feed-preview,
html[data-theme='dark'] .youzify .activity-content a.tp-location-feed-preview {
    background-color: #3d3d3d !important;
}
body.dark-mode .youzify .activity-content .tp-location-feed-preview__ph-icon,
html[data-theme='dark'] .youzify .activity-content .tp-location-feed-preview__ph-icon {
    color: rgba(255, 255, 255, 0.35) !important;
}
body.dark-mode .youzify .activity-content a.tp-location-feed-preview--placeholder .tp-location-feed-preview__label,
html[data-theme='dark'] .youzify .activity-content a.tp-location-feed-preview--placeholder .tp-location-feed-preview__label {
    color: rgba(255, 255, 255, 0.82) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

body.dark-mode .youzify .activity-content .tp-location-feed-preview__label,
html[data-theme='dark'] .youzify .activity-content .tp-location-feed-preview__label {
    background: rgba(8, 8, 12, 0.88) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06) inset !important;
}

/* Activity feed: country / state / city line (📍 City - State - Country) */
body .youzify .activity-content .tp-location-place {
    margin-top: 10px !important;
    margin-bottom: 2px !important;
    padding: 0 2px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: rgba(0, 0, 0, 0.78) !important;
}
body .youzify .activity-content .tp-location-place__labels {
    font-weight: 600 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 0 0.15em !important;
}
body .youzify .activity-content .tp-location-place__pin {
    margin-right: 0.2em !important;
    font-style: normal !important;
}
body .youzify .activity-content .tp-location-place__sep {
    font-weight: 500 !important;
    opacity: 0.55 !important;
    margin: 0 0.2em !important;
}
body.dark-mode .youzify .activity-content .tp-location-place,
html[data-theme='dark'] .youzify .activity-content .tp-location-place {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ═══════════════════════════════════════════════
   COMMENTS – modern, compact, thread-style
   ═══════════════════════════════════════════════ */

/* --- Comments wrapper: kill default bg/border/padding --- */
body .youzify .activity-comments {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 15px 10px !important;
    margin: 0 !important;
}
body .youzify .activity-comments > ul {
    padding: 0 !important;
    margin: 0 !important;
}
body .youzify .activity-comments li {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* --- Comment bubble ---- (transparent: inherits activity card / page) --- */
body .youzify .activity-comments li .comment-container {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 0 10px !important;
    padding: 10px 12px !important;
    margin: 0 0 2px !important;
    border-radius: 10px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    position: relative;
}
body .youzify .activity-comments li .comment-container:hover {
    background: transparent !important;
}

/* --- Avatar: small circle, no border/shadow --- */
body .youzify .activity-comments .acomment-avatar {
    flex: 0 0 32px !important;
    width: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}
body .youzify .activity-comments .acomment-avatar a {
    display: block;
}
body .youzify .activity-comments .acomment-avatar img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    object-fit: cover;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
}

/* --- Comment body (name + text) --- */
body .youzify .activity-comments .comment-inner {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Username row */
body .youzify .activity-comments .acomment-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 0 6px !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}
body .youzify .activity-comments .acomment-meta > a {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: var(--tpp-text, var(--heading-font-color, #515365)) !important;
    text-decoration: none !important;
}
body .youzify .activity-comments .acomment-meta-time {
    font-size: 11px !important;
    color: var(--tpp-muted, var(--body-font-color, #888da8)) !important;
    line-height: 1.3 !important;
}
body .youzify .activity-comments .acomment-meta-time .activity-time-since {
    font-size: inherit !important;
    color: inherit !important;
}
body .youzify .activity-comments .acomment-meta-time i {
    font-size: 10px !important;
    margin-right: 6px !important;
}

/* Space between clock (or similar) icon and “5 minutes ago” on activity + comment timestamps */
body .youzify a.activity-time-since > i:first-child {
    margin-right: 6px !important;
}

/* Comment text */
body .youzify .activity-comments .acomment-content {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.45 !important;
    font-size: 13px !important;
    color: var(--tpp-text, var(--body-font-color, #888da8)) !important;
}
body .youzify .activity-comments .acomment-content p {
    margin: 0 !important;
    padding: 0 !important;
}
body .youzify .activity-comments .acomment-content .gamipress-buddypress-user-details-activity {
    display: none !important;
}

/* --- Actions row sits below avatar+body, full width --- */
body .youzify .activity-comments .acomment-options {
    flex-basis: 100% !important;
    padding-left: 42px !important;
    margin-top: 2px !important;
    font-size: 12px !important;
}
body .youzify .activity-comments .acomment-options > a {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--tpp-muted, var(--body-font-color, #888da8)) !important;
}
body .youzify .activity-comments .acomment-options > a:hover {
    color: var(--tpp-text, var(--heading-font-color, #515365)) !important;
}
body .youzify .activity-comments .acomment-options > a.delete {
    color: var(--tpp-red, #c23535) !important;
    opacity: 0.7;
}
body .youzify .activity-comments .acomment-options > a.delete:hover {
    opacity: 1;
}
body .youzify .activity-comments .acomment-options .tp-like-wrapper a.yzpr-reacto-post {
    font-size: 12px !important;
}

/* Kill float clearfix divs */
body .youzify .activity-comments .youzify-clear {
    display: none !important;
}

/* --- Nested replies: indent, no extra bg --- */
body .youzify .activity-comments ul ul {
    padding-left: 28px !important;
    margin-left: 14px !important;
    border-left: 2px solid var(--tpp-border, var(--ol-border-color, #e6ecf5)) !important;
}

/* --- Comment form --- */
body .youzify .activity-comments .ac-form {
    background: var(--ol-card-bg-color, #fff) !important;
    border: 1px solid var(--tpp-border, var(--ol-border-color, #e6ecf5)) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    margin: 8px 0 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
body .youzify .activity-comments .ac-form .ac-textarea {
    margin: 0 !important;
    padding: 0 !important;
}
body .youzify .activity-comments .ac-form textarea.ac-input {
    background: var(--ol-card-bg-color, #fafafa) !important;
    border: 1px solid var(--tpp-border, var(--ol-border-color, #e6ecf5)) !important;
    border-radius: 10px !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    color: var(--tpp-text, var(--ol-input-text-color, #3f4257)) !important;
    min-height: 40px !important;
    max-height: 120px !important;
    resize: none !important;
    line-height: 1.45 !important;
    box-shadow: none !important;
}
/*
 * Activity comment field (Youzify): label → textarea → .youzify-load-emojis → buttons below.
 * Flex row aligns the plain textarea with the smile trigger; after Emojione init the wrapper grows
 * and the duplicate .youzify-load-emojis is hidden. No absolute overrides on Emojione’s inner button.
 */
body .youzify .activity-comments .ac-form .ac-textarea.youzify-comments-emojis {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    position: relative !important;
}
body .youzify .activity-comments .ac-form .ac-textarea.youzify-comments-emojis > textarea.ac-input,
body .youzify .activity-comments .ac-form .ac-textarea.youzify-comments-emojis > .youzify-emojionearea {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
}
body .youzify .activity-comments .ac-form .ac-textarea.youzify-comments-emojis > .youzify-load-emojis {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    color: var(--body-font-color, #888da8) !important;
    background: rgba(0, 0, 0, 0.06) !important;
    cursor: pointer !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}
body .youzify .activity-comments .ac-form .ac-textarea.youzify-comments-emojis > .youzify-load-emojis:hover {
    background: rgba(124, 58, 237, 0.12) !important;
    color: #7c3aed !important;
}
body .youzify .activity-comments .ac-form .youzify-comments-emojis:has(> .youzify-emojionearea) > .youzify-load-emojis {
    display: none !important;
}
/* Community feed comment box: hide emoji launcher icons completely. */
body .youzify .activity-comments .ac-form .ac-textarea.youzify-comments-emojis > .youzify-load-emojis,
body .youzify .activity-comments .ac-form .youzify-comments-emojis .youzify-emojionearea .youzify-emojionearea-button {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}
body .youzify .activity-comments .ac-form .youzify-comments-emojis .youzify-emojionearea {
    position: relative !important;
    overflow: visible !important;
}
/* Picker anchored to the comment composer (scrolls with the feed). Overrides plugin/mobile fixed positioning. */
body .youzify .activity-comments .ac-form .youzify-comments-emojis .youzify-emojionearea .youzify-emojionearea-picker {
    position: absolute !important;
    left: auto !important;
    right: 0 !important;
    top: 100% !important;
    bottom: auto !important;
    width: min(100%, 340px) !important;
    max-width: min(92vw, 340px) !important;
    margin: 4px 0 0 !important;
    transform: none !important;
    z-index: 120 !important;
    box-sizing: border-box !important;
}
body .youzify .activity-comments .ac-form .youzify-comments-emojis .youzify-emojionearea .youzify-emojionearea-picker.youzify-emojionearea-picker-position-top {
    top: auto !important;
    bottom: 100% !important;
    margin: 0 0 4px !important;
}
body .youzify .activity-comments .ac-form textarea.ac-input:focus {
    border-color: rgba(124, 58, 237, 0.5) !important;
    outline: none !important;
}
@media (max-width: 768px) {
    body .youzify .activity-comments .ac-form textarea.ac-input {
        font-size: 16px !important;
    }
}
body .youzify .activity-comments .ac-form .youzify-wall-comments-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 8px !important;
    flex-wrap: wrap !important;
    position: relative !important;
    z-index: 6 !important;
}
body .youzify .activity-comments .ac-form .youzify-wall-comments-buttons .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border-radius: 18px !important;
    line-height: 1 !important;
    min-height: 0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: none !important;
    white-space: nowrap !important;
    letter-spacing: 0.01em !important;
}
body .youzify .activity-comments .ac-form .youzify-wall-comments-buttons .btn i {
    font-size: 12px !important;
}
/* Upload button — subtle outline style */
body .youzify .activity-comments .ac-form .youzify-wall-upload-btn {
    background: transparent !important;
    color: var(--body-font-color, #888da8) !important;
    border: 1px solid var(--ol-border-color, rgba(0, 0, 0, 0.12)) !important;
    box-shadow: none !important;
}
body .youzify .activity-comments .ac-form .youzify-wall-upload-btn:hover {
    background: rgba(124, 58, 237, 0.06) !important;
    color: #7c3aed !important;
    border-color: rgba(124, 58, 237, 0.3) !important;
}
/* GIF button — subtle outline style; position/overflow so popover isn’t clipped (esp. after AJAX prepend) */
body .youzify .activity-comments .ac-form .youzify-wall-add-gif {
    position: relative !important;
    overflow: visible !important;
    background: transparent !important;
    color: var(--body-font-color, #888da8) !important;
    border: 1px solid var(--ol-border-color, rgba(0, 0, 0, 0.12)) !important;
    box-shadow: none !important;
}
body .youzify .activity-comments .ac-form .ac-reply-content,
body .youzify li.activity-item .activity-comments {
    overflow: visible !important;
}
body .youzify .activity-comments .ac-form .youzify-wall-add-gif .youzify-comment-giphy-form.youzify-wall-giphy-form {
    left: 0 !important;
    right: auto !important;
    margin-left: 0 !important;
    transform: none !important;
    width: min(360px, calc(100vw - 40px)) !important;
    max-width: calc(100vw - 40px) !important;
    box-sizing: border-box !important;
    z-index: 100 !important;
}
body .youzify .activity-comments .ac-form .youzify-wall-add-gif:hover {
    background: rgba(124, 58, 237, 0.06) !important;
    color: #7c3aed !important;
    border-color: rgba(124, 58, 237, 0.3) !important;
}
/* Comment (submit) button — purple gradient primary */
body .youzify .activity-comments .ac-form .youzify-send-comment {
    background: linear-gradient(145deg, #7c3aed, #a78bfa) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25) !important;
    margin-left: auto !important;
}
body .youzify .activity-comments .ac-form .youzify-send-comment:hover {
    background: linear-gradient(145deg, #6d28d9, #8b5cf6) !important;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35) !important;
    transform: translateY(-1px) !important;
}
body .youzify .activity-comments .ac-form .youzify-send-comment:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 4px rgba(124, 58, 237, 0.2) !important;
}

/* ── Dark mode ── */
body.dark-mode .youzify .activity-comments li .comment-container,
html[data-theme='dark'] .youzify .activity-comments li .comment-container {
    background: transparent !important;
}
body.dark-mode .youzify .activity-comments li .comment-container:hover,
html[data-theme='dark'] .youzify .activity-comments li .comment-container:hover {
    background: transparent !important;
}
body.dark-mode .youzify .activity-comments .acomment-meta > a,
html[data-theme='dark'] .youzify .activity-comments .acomment-meta > a {
    color: var(--tpp-text, #e4e6eb) !important;
}
body.dark-mode .youzify .activity-comments .acomment-content,
html[data-theme='dark'] .youzify .activity-comments .acomment-content {
    color: var(--tpp-text, #ccc) !important;
}
body.dark-mode .youzify .activity-comments .acomment-options > a,
html[data-theme='dark'] .youzify .activity-comments .acomment-options > a {
    color: var(--tpp-muted, #888) !important;
}
body.dark-mode .youzify .activity-comments .acomment-options > a:hover,
html[data-theme='dark'] .youzify .activity-comments .acomment-options > a:hover {
    color: var(--tpp-text, #e4e6eb) !important;
}
body.dark-mode .youzify .activity-comments ul ul,
html[data-theme='dark'] .youzify .activity-comments ul ul {
    border-left-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode .youzify .activity-comments .ac-form,
html[data-theme='dark'] .youzify .activity-comments .ac-form {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}
body.dark-mode .youzify .activity-comments .ac-form textarea.ac-input,
html[data-theme='dark'] .youzify .activity-comments .ac-form textarea.ac-input {
    background: rgba(0, 0, 0, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: var(--tpp-text, #e4e6eb) !important;
}
body.dark-mode .youzify .activity-comments .ac-form .ac-textarea.youzify-comments-emojis > .youzify-load-emojis,
html[data-theme='dark'] .youzify .activity-comments .ac-form .ac-textarea.youzify-comments-emojis > .youzify-load-emojis {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--tpp-muted, #a1a1aa) !important;
}
body.dark-mode .youzify .activity-comments .ac-form .ac-textarea.youzify-comments-emojis > .youzify-load-emojis:hover,
html[data-theme='dark'] .youzify .activity-comments .ac-form .ac-textarea.youzify-comments-emojis > .youzify-load-emojis:hover {
    background: rgba(124, 58, 237, 0.2) !important;
    color: #c4b5fd !important;
}
body.dark-mode .youzify .activity-comments .ac-form textarea.ac-input:focus,
html[data-theme='dark'] .youzify .activity-comments .ac-form textarea.ac-input:focus {
    border-color: #7c3aed !important;
}
/* Dark mode: comment action buttons */
body.dark-mode .youzify .activity-comments .ac-form .youzify-wall-upload-btn,
html[data-theme='dark'] .youzify .activity-comments .ac-form .youzify-wall-upload-btn,
body.dark-mode .youzify .activity-comments .ac-form .youzify-wall-add-gif,
html[data-theme='dark'] .youzify .activity-comments .ac-form .youzify-wall-add-gif {
    background: transparent !important;
    color: var(--body-font-color, #949cb5) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
body.dark-mode .youzify .activity-comments .ac-form .youzify-wall-upload-btn:hover,
html[data-theme='dark'] .youzify .activity-comments .ac-form .youzify-wall-upload-btn:hover,
body.dark-mode .youzify .activity-comments .ac-form .youzify-wall-add-gif:hover,
html[data-theme='dark'] .youzify .activity-comments .ac-form .youzify-wall-add-gif:hover {
    background: rgba(124, 58, 237, 0.12) !important;
    color: #c4b5fd !important;
    border-color: rgba(167, 139, 250, 0.3) !important;
}
body.dark-mode .youzify .activity-comments .ac-form .youzify-send-comment,
html[data-theme='dark'] .youzify .activity-comments .ac-form .youzify-send-comment {
    background: linear-gradient(145deg, #7c3aed, #a78bfa) !important;
    color: #fff !important;
}

/* @mention autocomplete (At.js) — BP / Youzify activity & wall; dropdown is portaled, not inside #youzify */
body.dark-mode .atwho-view,
html[data-theme='dark'] .atwho-view {
    background: var(--ol-card-bg-color, #1c1c22) !important;
    background-color: #1c1c22 !important;
    border: 1px solid var(--ol-border-color, #353946) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
    color: #e4e4e7 !important;
    overflow: hidden !important;
}
body.dark-mode .atwho-view .atwho-view-ul,
html[data-theme='dark'] .atwho-view .atwho-view-ul {
    background: transparent !important;
}
body.dark-mode .atwho-view .atwho-view-ul li,
html[data-theme='dark'] .atwho-view .atwho-view-ul li {
    background: transparent !important;
    color: #e4e4e7 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}
body.dark-mode .atwho-view .atwho-view-ul li:hover,
body.dark-mode .atwho-view .atwho-view-ul li.cur,
body.dark-mode .atwho-view .atwho-view-ul li.atwho-selected,
html[data-theme='dark'] .atwho-view .atwho-view-ul li:hover,
html[data-theme='dark'] .atwho-view .atwho-view-ul li.cur,
html[data-theme='dark'] .atwho-view .atwho-view-ul li.atwho-selected {
    background: rgba(124, 58, 237, 0.22) !important;
    color: #fafafa !important;
}
body.dark-mode .atwho-view .username,
html[data-theme='dark'] .atwho-view .username {
    color: #e4e4e7 !important;
}
body.dark-mode .atwho-view small,
html[data-theme='dark'] .atwho-view small {
    color: #949cb5 !important;
}
body.dark-mode .atwho-view img,
html[data-theme='dark'] .atwho-view img {
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* BP/Youzify “share-activity” = repost/quote — moved into … menu via JS as “Reply”; not in meta bar */
body .youzify .activity-meta a.share-activity:not(.youzify-social-share-activity) {
    display: none !important;
}

/* Repost (“Reply”) inside ellipsis menu — same row as Bookmark/Delete (icon | label); padding stays on .youzify-item-tool */
body .youzify .youzify-item-tools .tp-activity-repost-tool a.share-activity {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    align-self: stretch;
    padding: 0;
    margin: 0;
    text-decoration: none !important;
    color: inherit !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: inherit;
    font-weight: inherit;
    cursor: pointer;
    box-sizing: border-box;
    float: none !important;
}

/* Repost (“Reply”) — amber share icon, aligned with Bookmark / Delete */
body .youzify .youzify-item-tools .tp-activity-repost-tool .youzify-tool-icon {
    color: #e8940c;
}
body .youzify .youzify-item-tools .tp-activity-repost-tool .youzify-tool-icon .tp-activity-repost-icon {
    color: inherit;
}
body.dark-mode .youzify .youzify-item-tools .tp-activity-repost-tool .youzify-tool-icon {
    color: #fbbf24;
}

/* Icon font helper (Font Awesome 6 Free — theme loads on front) */
body .youzify .activity-meta > a.acomment-reply::before,
body .youzify .activity-meta > a.youzify-social-share-activity::before,
body .youzify .activity-meta > button.tp-admin-delete-location::before,
body .youzify .activity-meta .tp-verify-wrapper a.button::before {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    flex-shrink: 0;
}

/* Per-action pills (match .youzify-inline-mobile-nav container feel) */
body .youzify .activity-meta > a.button:not(.yzpr-verify-location):not(.yzpr-verified-location),
body .youzify .activity-meta > a.bp-primary-action:not(.yzpr-verify-location):not(.yzpr-verified-location),
body .youzify .activity-meta > a.yzpr-reacto-post,
body .youzify .activity-meta > .tp-like-wrapper,
body .youzify .activity-meta > a.youzify-social-share-activity,
body .youzify .activity-meta > button.tp-admin-delete-location,
body .youzify .activity-meta > .tp-verify-wrapper {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 1 1 0;
    min-width: 0;
    height: 42px;
    padding: 0 6px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--yzfy-text-color, #515365) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    font-family: inherit;
    text-decoration: none !important;
    float: none !important;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
    box-sizing: border-box;
}
body .youzify .activity-meta > a.button:hover,
body .youzify .activity-meta > a.bp-primary-action:hover,
body .youzify .activity-meta > a.yzpr-reacto-post:hover,
body .youzify .activity-meta > .tp-like-wrapper:hover,
body .youzify .activity-meta > a.youzify-social-share-activity:hover,
body .youzify .activity-meta > button.tp-admin-delete-location:hover,
body .youzify .activity-meta > .tp-verify-wrapper:hover {
    background: rgba(0, 0, 0, 0.04) !important;
}
body .youzify .activity-meta > a.button:active,
body .youzify .activity-meta > a.bp-primary-action:active,
body .youzify .activity-meta > a.yzpr-reacto-post:active,
body .youzify .activity-meta > .tp-like-wrapper:active,
body .youzify .activity-meta > a.youzify-social-share-activity:active,
body .youzify .activity-meta > button.tp-admin-delete-location:active,
body .youzify .activity-meta > .tp-verify-wrapper:active {
    background: rgba(0, 0, 0, 0.08) !important;
}

/* Like: custom FA heart — hide Youzify native content, show only our marked heart */
body .youzify .activity-meta .yzpr-reacto-post .yzpr-post-reaction::after,
body .youzify .activity-meta .yzpr-reacto-post .yzpr-post-reaction::before,
body .youzify .acomment-options .yzpr-reacto-post .yzpr-post-reaction::after,
body .youzify .acomment-options .yzpr-reacto-post .yzpr-post-reaction::before {
    content: none !important;
    display: none !important;
}
body .youzify .activity-meta .yzpr-reacto-post .yzpr-post-reaction img,
body .youzify .acomment-options .yzpr-reacto-post .yzpr-post-reaction img {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
}
body .youzify .activity-meta .yzpr-reacto-post .yzpr-post-reaction i:not([data-tp-heart]),
body .youzify .acomment-options .yzpr-reacto-post .yzpr-post-reaction i:not([data-tp-heart]) {
    display: none !important;
}
body .youzify .activity-meta .yzpr-reacto-post .yzpr-post-reaction,
body .youzify .acomment-options .yzpr-reacto-post .yzpr-post-reaction {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 0;
    margin: 0 !important;
}
/* Heart sits inside .yzpr-post-reaction; Youzify stops propagation there so delegated
   $(document).on('click','.yzpr-reacto-post') never runs. Let hits register on the <a>. */
body .youzify .activity-meta .yzpr-reacto-post .yzpr-post-reaction,
body .youzify .activity-meta .yzpr-reacto-post .yzpr-post-reaction *,
body .youzify .acomment-options .yzpr-reacto-post .yzpr-post-reaction,
body .youzify .acomment-options .yzpr-reacto-post .yzpr-post-reaction * {
    pointer-events: none;
}
body .youzify .yzpr-post-reaction i[data-tp-heart] {
    font-size: 15px;
    line-height: 1;
    color: inherit;
    opacity: 0.9;
}
body .youzify .yzpr-post-reaction.yzpr-yes-reaction i[data-tp-heart] {
    color: #e11d48;
    opacity: 1;
    font-weight: 900;
}
/* Main post row: .activity-meta > .tp-like-wrapper sets color !important; anchor uses inherit !important.
   Comments skip that wrapper rule, so their heart picked up #e11d48 — match that here. */
body .youzify .activity-meta .tp-like-wrapper .yzpr-post-reaction.yzpr-yes-reaction i[data-tp-heart] {
    color: #e11d48 !important;
    opacity: 1 !important;
    font-weight: 900 !important;
}
body .youzify .activity-meta .yzpr-react-title {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: nowrap !important;
    border: 0 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    line-height: 1.3;
}

/* Comment: speech bubble icon only */
body .youzify .activity-meta > a.acomment-reply {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--yzfy-text-color, #515365) !important;
}
body .youzify .activity-meta > a.acomment-reply::before {
    content: "\f075";
    font-weight: 400;
    font-size: 14px;
    color: inherit;
    margin-right: 5px;
}

/* Share */
body .youzify .activity-meta > a.youzify-social-share-activity {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--yzfy-text-color, #515365) !important;
}
body .youzify .activity-meta > a.youzify-social-share-activity::before {
    content: "\f1e0";
    font-weight: 900;
    font-size: 13px;
    color: inherit;
    margin-right: 5px;
}

/* Admin delete: compact destructive pill */
body .youzify .activity-meta > button.tp-admin-delete-location {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #b91c1c !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
body .youzify .activity-meta > button.tp-admin-delete-location::before {
    content: "\f2ed";
    font-weight: 900;
    font-size: 13px;
    color: inherit;
    margin-right: 5px;
}
body .youzify .activity-meta > button.tp-admin-delete-location:hover {
    background: rgba(185, 28, 28, 0.06) !important;
}

/* Verify + count: equal column; label + optional count grouped and centered */
body .youzify .activity-meta > .tp-verify-wrapper {
    order: -1;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    flex-wrap: nowrap;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
}
body .youzify .activity-meta .tp-verify-wrapper a.button.yzpr-verify-location,
body .youzify .activity-meta .tp-verify-wrapper a.button.yzpr-verified-location {
    display: inline-flex !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    gap: 5px;
    flex: none !important;
    width: auto !important;
    max-width: max-content !important;
}
body .youzify .activity-meta .tp-verify-wrapper a.button::before {
    content: "\f058";
    font-weight: 900;
    font-size: 14px;
    color: #22c55e;
    flex-shrink: 0;
}
body .youzify .activity-meta .tp-verify-wrapper a.button.yzpr-verified-location::before {
    color: #16a34a;
}
/* Verified: whole control reads clearly as “on” (green) */
body .youzify .activity-meta > .tp-verify-wrapper:has(a.yzpr-verified-location) {
    background: rgba(34, 197, 94, 0.14) !important;
}
body .youzify .activity-meta > .tp-verify-wrapper:has(a.yzpr-verified-location):hover {
    background: rgba(34, 197, 94, 0.2) !important;
}
body .youzify .activity-meta > .tp-verify-wrapper:has(a.yzpr-verified-location):active {
    background: rgba(34, 197, 94, 0.24) !important;
}
body .youzify .activity-meta .tp-verify-wrapper a.button.yzpr-verified-location {
    color: #166534 !important;
}
body .youzify .activity-meta > .tp-verify-wrapper:has(a.yzpr-verified-location) .tp-verify-count,
body .youzify .activity-meta > .tp-verify-wrapper:has(a.yzpr-verified-location) .tp-verify-count-circle {
    background: rgba(34, 197, 94, 0.22) !important;
    color: #14532d !important;
}

/* Like + count: same column width as other actions; inner link stays content-sized so badge stays beside Like */
body .youzify .activity-meta > .tp-like-wrapper {
    order: 0;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    flex-wrap: nowrap;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    cursor: pointer !important;
    position: relative;
}
/* Like link content-sized so the count badge sits beside “Like”, not at the far edge of the column */
body .youzify .activity-meta .tp-like-wrapper a.yzpr-reacto-post,
body .youzify .activity-meta .tp-like-wrapper a.yzpr-reacto-post.button,
body .youzify .activity-meta .tp-like-wrapper a.button.yzpr-reacto-post {
    display: inline-flex !important;
    align-items: center;
    align-self: center !important;
    justify-content: center;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    gap: 4px !important;
    flex: 0 1 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 1 !important;
    flex-basis: auto !important;
    width: auto !important;
    max-width: max-content !important;
    cursor: pointer;
}
body .youzify .activity-meta > .tp-like-wrapper .tp-like-count,
body .youzify .activity-meta > .tp-like-wrapper .tp-like-count-circle {
    font-size: 10px !important;
    font-weight: 700;
    line-height: 1;
    padding: 2px 6px !important;
    margin: 0 !important;
    min-width: 0 !important;
    height: auto !important;
    border-radius: 999px !important;
    /* Unliked: lighter pill + explicit digit color (inherit was too muted) */
    background: rgba(0, 0, 0, 0.05) !important;
    color: #3f4257 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    cursor: pointer;
    flex-shrink: 0;
    flex-grow: 0 !important;
    position: relative;
    z-index: 2;
    pointer-events: auto;
}
body .youzify .activity-meta > .tp-like-wrapper.tp-like-has-reaction {
    background: rgba(225, 29, 72, 0.1) !important;
}
body .youzify .activity-meta > .tp-like-wrapper.tp-like-has-reaction:hover {
    background: rgba(225, 29, 72, 0.14) !important;
}
body .youzify .activity-meta > .tp-like-wrapper.tp-like-has-reaction:active {
    background: rgba(225, 29, 72, 0.18) !important;
}
body .youzify .activity-meta .tp-like-wrapper.tp-like-has-reaction a.yzpr-reacto-post {
    color: #9f1239 !important;
}
body .youzify .activity-meta > .tp-like-wrapper.tp-like-has-reaction .tp-like-count,
body .youzify .activity-meta > .tp-like-wrapper.tp-like-has-reaction .tp-like-count-circle {
    background: rgba(225, 29, 72, 0.2) !important;
    color: #881337 !important;
    border-color: rgba(225, 29, 72, 0.35) !important;
}

/* Activity comments — one straight row (Youzify uses float:right + line-height:22px which skews flex alignment) */
body .youzify .acomment-options {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    line-height: normal !important;
    float: none !important;
    clear: none !important;
}
body .youzify .acomment-options > a,
body .youzify .acomment-options > .tp-like-wrapper {
    float: none !important;
    align-self: center !important;
}
body .youzify .acomment-options > a {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    vertical-align: middle !important;
}
body .youzify .acomment-options > .tp-like-wrapper {
    order: 0;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    line-height: 1 !important;
}
body .youzify .acomment-options .tp-like-wrapper a.yzpr-reacto-post {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: inherit !important;
    gap: 5px !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: max-content !important;
    line-height: 1.25 !important;
    cursor: pointer;
}
body .youzify .acomment-options .yzpr-post-reaction {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}
body .youzify .acomment-options .yzpr-react-title {
    line-height: 1.25 !important;
    white-space: nowrap !important;
}
body .youzify .acomment-options .tp-like-wrapper .tp-like-count,
body .youzify .acomment-options .tp-like-wrapper .tp-like-count-circle {
    font-size: 10px !important;
    font-weight: 700;
    line-height: 1;
    padding: 2px 6px !important;
    margin: 0 !important;
    min-width: 0 !important;
    height: auto !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, 0.05) !important;
    color: #3f4257 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    cursor: pointer;
    flex-shrink: 0;
}
body .youzify .acomment-options .tp-like-wrapper.tp-like-has-reaction {
    background: rgba(225, 29, 72, 0.1) !important;
    border-radius: 8px !important;
    padding: 2px 6px !important;
}
body .youzify .acomment-options .tp-like-wrapper.tp-like-has-reaction:hover {
    background: rgba(225, 29, 72, 0.14) !important;
}
body .youzify .acomment-options .tp-like-wrapper.tp-like-has-reaction a.yzpr-reacto-post {
    color: #9f1239 !important;
}
body .youzify .acomment-options .tp-like-wrapper.tp-like-has-reaction .tp-like-count,
body .youzify .acomment-options .tp-like-wrapper.tp-like-has-reaction .tp-like-count-circle {
    background: rgba(225, 29, 72, 0.2) !important;
    color: #881337 !important;
    border-color: rgba(225, 29, 72, 0.35) !important;
}

@media screen and (max-width: 475px) {
    body .youzify .acomment-options {
        flex-wrap: wrap !important;
        row-gap: 6px !important;
    }
}

.tp-verify-count-circle,
.tp-verify-count {
    font-size: 10px !important;
    font-weight: 700;
    line-height: 1;
    padding: 2px 5px !important;
    margin: 0 !important;
    min-width: 0 !important;
    height: auto !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, 0.08) !important;
    color: inherit !important;
}

/* Dark mode */
body.dark-mode .youzify .activity-meta {
    border-top-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .youzify .activity-meta > a.button:not(.yzpr-verify-location):not(.yzpr-verified-location),
body.dark-mode .youzify .activity-meta > a.bp-primary-action:not(.yzpr-verify-location):not(.yzpr-verified-location),
body.dark-mode .youzify .activity-meta > a.yzpr-reacto-post,
body.dark-mode .youzify .activity-meta > .tp-like-wrapper,
body.dark-mode .youzify .activity-meta > a.youzify-social-share-activity,
body.dark-mode .youzify .activity-meta > button.tp-admin-delete-location,
body.dark-mode .youzify .activity-meta > .tp-verify-wrapper {
    color: var(--yzfy-text-color, #e4e6eb) !important;
}
body.dark-mode .youzify .activity-meta .tp-like-wrapper a.yzpr-reacto-post {
    color: var(--yzfy-text-color, #e4e6eb) !important;
}
body.dark-mode .youzify .activity-meta > a:hover,
body.dark-mode .youzify .activity-meta > button:hover,
body.dark-mode .youzify .activity-meta > .tp-like-wrapper:hover,
body.dark-mode .youzify .activity-meta > .tp-verify-wrapper:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}
body.dark-mode .youzify .activity-meta > a:active,
body.dark-mode .youzify .activity-meta > button:active,
body.dark-mode .youzify .activity-meta > .tp-like-wrapper:active,
body.dark-mode .youzify .activity-meta > .tp-verify-wrapper:active {
    background: rgba(255, 255, 255, 0.1) !important;
}
body.dark-mode .youzify .activity-meta > .tp-like-wrapper .tp-like-count,
body.dark-mode .youzify .activity-meta > .tp-like-wrapper .tp-like-count-circle {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #f4f4f5 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
}
body.dark-mode .youzify .activity-meta > .tp-like-wrapper.tp-like-has-reaction {
    background: rgba(244, 63, 94, 0.14) !important;
}
body.dark-mode .youzify .activity-meta > .tp-like-wrapper.tp-like-has-reaction:hover {
    background: rgba(244, 63, 94, 0.2) !important;
}
body.dark-mode .youzify .activity-meta > .tp-like-wrapper.tp-like-has-reaction:active {
    background: rgba(244, 63, 94, 0.26) !important;
}
body.dark-mode .youzify .activity-meta .tp-like-wrapper.tp-like-has-reaction a.yzpr-reacto-post {
    color: #fda4af !important;
}
body.dark-mode .youzify .activity-meta .tp-like-wrapper .yzpr-post-reaction.yzpr-yes-reaction i[data-tp-heart] {
    color: #e11d48 !important;
    opacity: 1 !important;
    font-weight: 900 !important;
}
body.dark-mode .youzify .activity-meta > .tp-like-wrapper.tp-like-has-reaction .tp-like-count,
body.dark-mode .youzify .activity-meta > .tp-like-wrapper.tp-like-has-reaction .tp-like-count-circle {
    background: rgba(244, 63, 94, 0.28) !important;
    color: #ffe4e6 !important;
    border-color: rgba(244, 63, 94, 0.45) !important;
}
body.dark-mode .youzify .acomment-options .tp-like-wrapper a.yzpr-reacto-post {
    color: var(--yzfy-text-color, #e4e6eb) !important;
}
body.dark-mode .youzify .acomment-options .tp-like-wrapper .tp-like-count,
body.dark-mode .youzify .acomment-options .tp-like-wrapper .tp-like-count-circle {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #f4f4f5 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
}
body.dark-mode .youzify .acomment-options .tp-like-wrapper.tp-like-has-reaction {
    background: rgba(244, 63, 94, 0.14) !important;
}
body.dark-mode .youzify .acomment-options .tp-like-wrapper.tp-like-has-reaction:hover {
    background: rgba(244, 63, 94, 0.2) !important;
}
body.dark-mode .youzify .acomment-options .tp-like-wrapper.tp-like-has-reaction a.yzpr-reacto-post {
    color: #fda4af !important;
}
body.dark-mode .youzify .acomment-options .tp-like-wrapper.tp-like-has-reaction .tp-like-count,
body.dark-mode .youzify .acomment-options .tp-like-wrapper.tp-like-has-reaction .tp-like-count-circle {
    background: rgba(244, 63, 94, 0.28) !important;
    color: #ffe4e6 !important;
    border-color: rgba(244, 63, 94, 0.45) !important;
}
body.dark-mode .youzify .activity-meta .tp-verify-count-circle,
body.dark-mode .youzify .activity-meta .tp-verify-count {
    background: rgba(255, 255, 255, 0.12) !important;
}
body.dark-mode .youzify .activity-meta > button.tp-admin-delete-location {
    color: #f87171 !important;
}
body.dark-mode .youzify .activity-meta > .tp-verify-wrapper:has(a.yzpr-verified-location) {
    background: rgba(34, 197, 94, 0.16) !important;
}
body.dark-mode .youzify .activity-meta > .tp-verify-wrapper:has(a.yzpr-verified-location):hover {
    background: rgba(34, 197, 94, 0.22) !important;
}
body.dark-mode .youzify .activity-meta > .tp-verify-wrapper:has(a.yzpr-verified-location):active {
    background: rgba(34, 197, 94, 0.28) !important;
}
body.dark-mode .youzify .activity-meta .tp-verify-wrapper a.button.yzpr-verified-location {
    color: #86efac !important;
}
body.dark-mode .youzify .activity-meta .tp-verify-wrapper a.button.yzpr-verified-location::before {
    color: #4ade80 !important;
}
body.dark-mode .youzify .activity-meta > .tp-verify-wrapper:has(a.yzpr-verified-location) .tp-verify-count,
body.dark-mode .youzify .activity-meta > .tp-verify-wrapper:has(a.yzpr-verified-location) .tp-verify-count-circle {
    background: rgba(34, 197, 94, 0.25) !important;
    color: #bbf7d0 !important;
}

@media (max-width: 768px) {
    body .youzify .activity-meta,
    #buddypress.youzify .activity-meta {
        padding: 4px 0 0 !important;
        min-height: 40px;
    }
    body .youzify .activity-meta > a.button:not(.yzpr-verify-location):not(.yzpr-verified-location),
    body .youzify .activity-meta > a.bp-primary-action:not(.yzpr-verify-location):not(.yzpr-verified-location),
    body .youzify .activity-meta > a.yzpr-reacto-post,
    body .youzify .activity-meta > .tp-like-wrapper,
    body .youzify .activity-meta > a.youzify-social-share-activity,
    body .youzify .activity-meta > button.tp-admin-delete-location,
    body .youzify .activity-meta > .tp-verify-wrapper {
        height: 40px;
        font-size: 10px !important;
    }
    body .youzify .activity-meta > .tp-like-wrapper {
        justify-content: center !important;
    }
    /* Keep count beside “Like” on small screens (do not re-stretch the link) */
    body .youzify .activity-meta .tp-like-wrapper a.yzpr-reacto-post.button,
    body .youzify .activity-meta .tp-like-wrapper a.button.yzpr-reacto-post {
        flex: 0 1 auto !important;
        flex-grow: 0 !important;
        flex-shrink: 1 !important;
        flex-basis: auto !important;
        width: auto !important;
        max-width: max-content !important;
        align-self: center !important;
    }
    body .youzify .activity-meta .tp-verify-wrapper a.button.yzpr-verify-location,
    body .youzify .activity-meta .tp-verify-wrapper a.button.yzpr-verified-location {
        flex: none !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: auto !important;
        width: auto !important;
        max-width: max-content !important;
    }
}

/* ═══ Reactors modal (who liked this post) ═══ */
.yzpr-wall-modal.yzpr-modal-post-reactors {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 99999 !important;
    width: 360px !important;
    max-width: 92vw !important;
    max-height: 65vh !important;
    background: var(--ol-card-bg-color, #fff) !important;
    border-radius: 18px !important;
    border: 1px solid var(--ol-border-color, rgba(0,0,0,0.06)) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.06) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Hide the emoji tab header */
.yzpr-modal-reactors-head {
    display: none !important;
}

.yzpr-wall-modal-content {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 6px 0 !important;
    min-height: 60px !important;
    max-height: 55vh !important;
    scrollbar-width: thin !important;
}

.yzpr-users-who-list {
    display: flex !important;
    flex-direction: column !important;
}

.yzpr-list-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 16px !important;
    transition: background 0.15s ease !important;
}
.yzpr-list-item:hover {
    background: rgba(124, 58, 237, 0.04) !important;
}

.yzpr-item-avatar {
    flex-shrink: 0 !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    display: block !important;
}
.yzpr-item-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    display: block !important;
}

.yzpr-item-data {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}
.yzpr-item-name {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}
.yzpr-item-name a {
    color: var(--heading-font-color, #23253a) !important;
    text-decoration: none !important;
}
.yzpr-item-name a:hover {
    color: #7c3aed !important;
}
.yzpr-item-meta {
    font-size: 11.5px !important;
    color: var(--body-font-color, #888da8) !important;
    line-height: 1.3 !important;
}

.yzpr-modal-list-loader {
    text-align: center !important;
    padding: 14px !important;
    color: var(--body-font-color, #888da8) !important;
    font-size: 13px !important;
}

.yzpr-wall-modal-actions {
    display: flex !important;
    justify-content: center !important;
    padding: 8px 16px 10px !important;
    border-top: 1px solid var(--ol-border-color, rgba(0,0,0,0.06)) !important;
    flex-shrink: 0 !important;
}
.yzpr-wall-modal-button.yzpr-wall-modal-close {
    padding: 5px 16px !important;
    border-radius: 8px !important;
    border: none !important;
    background: transparent !important;
    color: var(--body-font-color, #888da8) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
}
.yzpr-wall-modal-button.yzpr-wall-modal-close:hover {
    background: rgba(124, 58, 237, 0.08) !important;
    color: #7c3aed !important;
}

/* Reactors modal — dark mode */
body.dark-mode .yzpr-wall-modal.yzpr-modal-post-reactors,
html[data-theme='dark'] .yzpr-wall-modal.yzpr-modal-post-reactors {
    background: var(--ol-card-bg-color, #1a1d25) !important;
    border-color: var(--ol-border-color, #2a2d38) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}
body.dark-mode .yzpr-list-item:hover,
html[data-theme='dark'] .yzpr-list-item:hover {
    background: rgba(124, 58, 237, 0.08) !important;
}
body.dark-mode .yzpr-item-name a,
html[data-theme='dark'] .yzpr-item-name a {
    color: #f0f0f0 !important;
}
body.dark-mode .yzpr-item-meta,
html[data-theme='dark'] .yzpr-item-meta {
    color: #7a7f8e !important;
}
body.dark-mode .yzpr-wall-modal-actions,
html[data-theme='dark'] .yzpr-wall-modal-actions {
    border-color: var(--ol-border-color, #2a2d38) !important;
}
body.dark-mode .yzpr-wall-modal-button.yzpr-wall-modal-close,
html[data-theme='dark'] .yzpr-wall-modal-button.yzpr-wall-modal-close {
    color: #7a7f8e !important;
}
body.dark-mode .yzpr-wall-modal-button.yzpr-wall-modal-close:hover,
html[data-theme='dark'] .yzpr-wall-modal-button.yzpr-wall-modal-close:hover {
    background: rgba(124, 58, 237, 0.15) !important;
    color: #c4b5fd !important;
}

/* ═══ Popup Card (tpp-*) — respects dark/light mode via body class ═══ */
body {
  --tpp-bg: #161616;
  --tpp-surface: #1e1e1e;
  --tpp-surface2: #252525;
  --tpp-border: #2a2a2a;
  --tpp-text: #f0ede8;
  --tpp-muted: #888;
  --tpp-title-c: #f0ede8;
}
/* Light mode colors from urbex-popup light mode reference (no .dark-mode = light, or explicit .light-mode) */
body:not(.dark-mode),
body.light-mode {
  --tpp-bg: #ffffff;
  --tpp-surface: #f5f6f3;
  --tpp-surface2: #eceeed;
  --tpp-border: #dde0da;
  --tpp-border-light: #c8cdc4;
  --tpp-text: #1a1e1a;
  --tpp-muted: #6b7268;
  --tpp-dim: #a0a89e;
  --tpp-title-c: #1a1e1a;
  --tpp-amber: #b86e00;
  --tpp-amber-dim: rgba(184,110,0,0.09);
  --tpp-amber-mid: rgba(184,110,0,0.22);
  --tpp-green: #1a8f4a;
  --tpp-red: #c23535;
  --tpp-red-dim: rgba(194,53,53,0.08);
  --tpp-yellow: #9a7200;
}
.tpp-card {
  font-family: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--tpp-bg);
  border: 1px solid var(--tpp-border);
  border-radius: 14px;
  overflow: hidden;
  color: var(--tpp-text);
  font-size: 13px;
  min-width: 0;
  max-width: none;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.04);
}
body.dark-mode .tpp-card {
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.03);
}
/* Force light card appearance when not in dark mode (overrides any conflicting rules) */
body:not(.dark-mode) .tpp-card,
body.light-mode .tpp-card {
  background: #ffffff !important;
  border-color: #dde0da !important;
  color: #1a1e1a !important;
  box-shadow: 0 2px 0 0 rgba(255,255,255,0.9) inset, 0 8px 32px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.06) !important;
}
body:not(.dark-mode) .tpp-card .tpp-body,
body.light-mode .tpp-card .tpp-body { background: #ffffff !important; }
body:not(.dark-mode) .tpp-card .tpp-title,
body.light-mode .tpp-card .tpp-title { color: #1a1e1a !important; }
body:not(.dark-mode) .tpp-card .tpp-location-type,
body.light-mode .tpp-card .tpp-location-type { color: var(--tpp-amber, #b86e00) !important; }
body:not(.dark-mode) .tpp-card .tpp-last-visit,
body.light-mode .tpp-card .tpp-last-visit { color: #a0a89e !important; }
body:not(.dark-mode) .tpp-card .tpp-visit-dot,
body.light-mode .tpp-card .tpp-visit-dot { background: var(--tpp-green, #1a8f4a) !important; box-shadow: 0 0 4px rgba(26,143,74,0.4); }
body:not(.dark-mode) .tpp-card .tpp-visit-dot-place,
body.light-mode .tpp-card .tpp-visit-dot-place { background: #a0a89e !important; box-shadow: none; }
body:not(.dark-mode) .tpp-card .tpp-stat-val,
body.light-mode .tpp-card .tpp-stat-val { color: #1a1e1a !important; }
body:not(.dark-mode) .tpp-card .tpp-stat-lbl,
body.light-mode .tpp-card .tpp-stat-lbl { color: #6b7268 !important; }
body:not(.dark-mode) .tpp-card .tpp-photo-strip,
body.light-mode .tpp-card .tpp-photo-strip { background: transparent !important; }
body:not(.dark-mode) .tpp-card .tpp-verified-section,
body.light-mode .tpp-card .tpp-verified-section { background: #f5f6f3 !important; border-color: #dde0da !important; }
body:not(.dark-mode) .tpp-card .tpp-icon-btn,
body.light-mode .tpp-card .tpp-icon-btn { background: #f5f6f3 !important; border-color: #dde0da !important; color: #6b7268 !important; }
body:not(.dark-mode) .tpp-card .tpp-stats-row,
body.light-mode .tpp-card .tpp-stats-row { border-color: #dde0da !important; }
body:not(.dark-mode) .tpp-card .tpp-stat-item + .tpp-stat-item::before,
body.light-mode .tpp-card .tpp-stat-item + .tpp-stat-item::before { background: #dde0da !important; }
body:not(.dark-mode) .tpp-card .tpp-added-by,
body.light-mode .tpp-card .tpp-added-by { border-top-color: #dde0da !important; }
body:not(.dark-mode) .tpp-card .tpp-maps-menu,
body.light-mode .tpp-card .tpp-maps-menu { background: #f5f6f3 !important; border-color: #dde0da !important; }
body:not(.dark-mode) .tpp-card .tpp-action-btn,
body.light-mode .tpp-card .tpp-action-btn { background: #f5f6f3 !important; border-color: #dde0da !important; color: #1a1e1a !important; }
body:not(.dark-mode) .tpp-card .tpp-demo-status-bar,
body.light-mode .tpp-card .tpp-demo-status-bar { background: #f5f6f3 !important; border-bottom-color: #dde0da !important; }
body:not(.dark-mode) .tpp-card .tpp-demo-status-bar.tpp-status-standing,
body.light-mode .tpp-card .tpp-demo-status-bar.tpp-status-standing { background: rgba(26, 143, 74, 0.08) !important; border-bottom-color: rgba(26, 143, 74, 0.2); }
body:not(.dark-mode) .tpp-card .tpp-demo-status-bar.tpp-status-pending,
body.light-mode .tpp-card .tpp-demo-status-bar.tpp-status-pending { background: rgba(184, 110, 0, 0.08) !important; border-bottom-color: rgba(184, 110, 0, 0.2); }
body:not(.dark-mode) .tpp-card .tpp-demo-status-bar.tpp-status-demolished,
body.light-mode .tpp-card .tpp-demo-status-bar.tpp-status-demolished { background: rgba(194, 53, 53, 0.08) !important; border-bottom-color: rgba(194, 53, 53, 0.2); }
body:not(.dark-mode) .tpp-card .tpp-demo-status-label,
body.light-mode .tpp-card .tpp-demo-status-label { color: #1a8f4a !important; }
body:not(.dark-mode) .tpp-card .tpp-demo-status-bar.tpp-status-pending .tpp-demo-status-label,
body.light-mode .tpp-card .tpp-demo-status-bar.tpp-status-pending .tpp-demo-status-label { color: #b86e00 !important; }
body:not(.dark-mode) .tpp-card .tpp-demo-status-bar.tpp-status-demolished .tpp-demo-status-label,
body.light-mode .tpp-card .tpp-demo-status-bar.tpp-status-demolished .tpp-demo-status-label { color: #c23535 !important; }
body:not(.dark-mode) .tpp-card .tpp-demo-report-btn,
body.light-mode .tpp-card .tpp-demo-report-btn { background: #fff !important; border-color: #dde0da !important; color: #6b7268 !important; }
body:not(.dark-mode) .tpp-card .tpp-demo-report-btn:hover,
body.light-mode .tpp-card .tpp-demo-report-btn:hover { border-color: #e74c3c !important; color: #e74c3c !important; background: rgba(231, 76, 60, 0.08) !important; }
.tpp-title { color: var(--tpp-title-c); }
.tpp-stat-val { color: var(--tpp-text); }
.tpp-stat-lbl { color: var(--tpp-muted); }
.tpp-diff-label { color: var(--tpp-muted); }
.tpp-entrance-text { color: var(--tpp-muted); }
.tpp-entrance-text strong { color: var(--tpp-text); }
.tpp-added-name { color: #f5a623; }
body:not(.dark-mode) .tpp-added-name,
body.light-mode .tpp-added-name { color: var(--tpp-amber, #b86e00); }
.tpp-icon-btn { background: var(--tpp-surface); border-color: var(--tpp-border); color: var(--tpp-muted); }
.tpp-body { background: var(--tpp-bg); }
.tpp-stats-row { border-color: var(--tpp-border); }
.tpp-stat-item + .tpp-stat-item::before { background: var(--tpp-border); }
.tpp-difficulty-row { border-color: transparent; }
.tpp-added-by { border-top-color: var(--tpp-border); }
.tpp-verified-section { background: var(--tpp-surface); border-color: var(--tpp-border); }
.tpp-verified-title { color: var(--tpp-muted); }
.tpp-maps-menu { background: var(--tpp-surface); border-color: var(--tpp-border); }
.tpp-maps-option:hover { background: var(--tpp-border); color: var(--tpp-text); }
.tpp-action-btn { background: var(--tpp-surface); border-color: var(--tpp-border); color: var(--tpp-text); }
.tpp-action-detail { color: #4ade80; }
body:not(.dark-mode) .tpp-action-detail,
body.light-mode .tpp-action-detail { color: var(--tpp-green, #1a8f4a); }
.tpp-bottom-row .tpp-icon-btn { background: var(--tpp-surface); border-color: var(--tpp-border); color: var(--tpp-muted); }
body:not(.dark-mode) .tpp-entrance-note,
body.light-mode .tpp-entrance-note {
  background: #fffbf4;
  border: 1px solid rgba(184,110,0,0.18);
  border-left: 3px solid var(--tpp-amber);
}
body:not(.dark-mode) .tpp-entrance-text strong,
body.light-mode .tpp-entrance-text strong { color: var(--tpp-amber); }
body:not(.dark-mode) .tpp-stat-clickable:hover .tpp-stat-val,
body:not(.dark-mode) .tpp-stat-clickable:hover .tpp-stat-lbl,
body.light-mode .tpp-stat-clickable:hover .tpp-stat-val,
body.light-mode .tpp-stat-clickable:hover .tpp-stat-lbl { color: var(--tpp-amber, #b86e00) !important; }
body:not(.dark-mode) .tpp-btn-save:hover,
body:not(.dark-mode) .tp-pin-btn-save:hover,
body.light-mode .tpp-btn-save:hover,
body.light-mode .tp-pin-btn-save:hover {
  color: var(--tpp-amber) !important;
  border-color: var(--tpp-amber-mid) !important;
  background: var(--tpp-amber-dim) !important;
}
body:not(.dark-mode) .tp-pin-btn-share:hover,
body.light-mode .tp-pin-btn-share:hover {
  color: #7c3aed !important;
  border-color: rgba(124,58,237,0.35) !important;
  background: rgba(124,58,237,0.08) !important;
}
body:not(.dark-mode) .tpp-btn-report:hover,
body:not(.dark-mode) .tp-pin-btn-report:hover,
body.light-mode .tpp-btn-report:hover,
body.light-mode .tp-pin-btn-report:hover {
  color: var(--tpp-red) !important;
  border-color: rgba(194,53,53,0.25) !important;
  background: var(--tpp-red-dim) !important;
}
body:not(.dark-mode) .tpp-diff-bar,
body.light-mode .tpp-diff-bar { background: var(--tpp-border-light, #c8cdc4); }
body:not(.dark-mode) .tpp-diff-bar[style*="background"],
body.light-mode .tpp-diff-bar[style*="background"] { background: var(--tpp-yellow) !important; }
body:not(.dark-mode) .tpp-diff-name,
body.light-mode .tpp-diff-name { color: var(--tpp-yellow); }
body:not(.dark-mode) .tpp-verified-count,
body.light-mode .tpp-verified-count { color: var(--tpp-amber); }
body:not(.dark-mode) .tpp-star-rating .tpp-star:not(.empty),
body.light-mode .tpp-star-rating .tpp-star:not(.empty) { color: var(--tpp-amber); }

/* Photo strip — one cell per image (equal columns when 2–4); tap opens lightbox. First cell keeps .tpp-photo-main for close button. */
.tpp-photo-strip {
  position: relative;
  height: 140px;
  background: transparent;
  overflow: hidden;
  display: flex;
  gap: 0;
  align-items: stretch;
}
.tpp-photo-strip--multi {
  gap: 2px;
}
.tpp-photo-strip--scroll {
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
}
.tpp-photo-strip-cell {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  min-width: 0;
  flex: 1 1 100%;
}
.tpp-photo-strip--multi:not(.tpp-photo-strip--scroll) .tpp-photo-strip-cell {
  flex: 1 1 0;
}
.tpp-photo-strip--scroll .tpp-photo-strip-cell {
  flex: 0 0 auto;
  width: 32%;
  min-width: 76px;
  max-width: 120px;
}
.tpp-photo-main {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.tpp-photo-strip--multi:not(.tpp-photo-strip--scroll) .tpp-photo-main.tpp-photo-strip-cell {
  flex: 1 1 0;
}
.tpp-photo-strip--scroll .tpp-photo-main.tpp-photo-strip-cell {
  flex: 0 0 auto;
  width: 32%;
  min-width: 76px;
  max-width: 120px;
}
.tpp-photo-main img,
.tpp-photo-strip-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tpp-photo-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
}
.tpp-photo-side {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  gap: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.tpp-photo-thumb {
  flex: 0 0 auto;
  width: 56px;
  min-height: 100%;
  overflow: hidden;
  background: var(--tpp-surface, #1e1e1e);
  cursor: pointer;
  scroll-snap-align: start;
}
.tpp-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Demolished overlay on photo strip (reference: demo-photo-overlay) — pointer-events: none so photos remain clickable */
.tpp-demo-photo-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(194, 53, 53, 0.18);
  backdrop-filter: grayscale(0.7);
  z-index: 4;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.tpp-demo-photo-overlay.tpp-demo-photo-overlay-show { display: flex; }
.tpp-demo-stamp {
  border: 3px solid rgba(194, 53, 53, 0.7);
  border-radius: 6px;
  padding: 5px 14px;
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: rgba(194, 53, 53, 0.85);
  letter-spacing: 3px;
  text-transform: uppercase;
  transform: rotate(-12deg);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
/* No photos: slim top row — close button is injected here (explore side panel) */
.tpp-no-photo-header-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 2px 6px;
  min-height: 30px;
  box-sizing: border-box;
  background: var(--tpp-surface2, #1e1e1e);
  border-bottom: 1px solid var(--tpp-border, #333);
}
body:not(.dark-mode) .tpp-card .tpp-no-photo-header-bar,
body.light-mode .tpp-card .tpp-no-photo-header-bar {
  background: #eceeed !important;
  border-bottom-color: #dde0da !important;
}
.tp-loc-info-close--no-photo-header {
  position: static;
  width: 26px;
  height: 26px;
  font-size: 15px;
  line-height: 22px;
  padding: 0 0 1px;
  flex-shrink: 0;
}
/* Street View disabled — hide any leftover markup from cached pages */
.tpp-sv-toggle-btn,
.tpp-sv-overlay {
  display: none !important;
}
.tpp-photo-count {
  position: absolute;
  bottom: 7px;
  right: 7px;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  color: #f0ede8;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.1);
  letter-spacing: 0.3px;
}

/* Body */
.tpp-body {
  padding: 10px 14px;
}

/* Status bar (Standing + Report Change) at top of popup */
.tpp-demo-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  border-bottom: 1px solid var(--tpp-border, #333);
  font-size: 10px;
  font-weight: 600;
  background: var(--tpp-surface2, #1e1e1e);
  gap: 6px;
}
.tpp-demo-status-bar.tpp-status-standing {
  background: rgba(26, 143, 74, 0.06);
  border-bottom-color: rgba(26, 143, 74, 0.15);
}
.tpp-demo-status-bar.tpp-status-pending {
  background: rgba(184, 110, 0, 0.07);
  border-bottom-color: rgba(184, 110, 0, 0.2);
}
.tpp-demo-status-bar.tpp-status-pending .tpp-demo-status-dot { background: var(--tpp-amber, #b86e00); box-shadow: 0 0 5px rgba(184, 110, 0, 0.4); }
.tpp-demo-status-bar.tpp-status-pending .tpp-demo-status-label { color: var(--tpp-amber, #b86e00); }
.tpp-demo-status-bar.tpp-status-demolished {
  background: rgba(194, 53, 53, 0.07);
  border-bottom-color: rgba(194, 53, 53, 0.2);
}
.tpp-demo-status-bar.tpp-status-demolished .tpp-demo-status-dot { background: #c23535; box-shadow: 0 0 5px rgba(194, 53, 53, 0.4); }
.tpp-demo-status-bar.tpp-status-demolished .tpp-demo-status-label { color: #c23535; }
.tpp-demo-status-left {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
  min-width: 0;
}
.tpp-demo-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--tpp-green, #4ade80);
  box-shadow: 0 0 4px rgba(74, 222, 128, 0.45);
}
.tpp-demo-status-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.25px;
  color: var(--tpp-green, #4ade80);
}
.tpp-demo-report-btn {
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: 16px;
  border: 1px solid var(--tpp-border, #333);
  background: var(--tpp-bg, #1a1a1a);
  color: var(--tpp-muted, #888);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}
.tpp-demo-report-btn:hover {
  border-color: #e74c3c;
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.1);
}

/* Explore candidates: AI Scraper first-use disclaimer (premium) */
.tp-cand-ai-scraper-disclaimer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(0, 0, 0, 0.58);
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.tp-cand-ai-scraper-disclaimer-backdrop.open {
  display: flex;
}
body.tp-cand-ai-scraper-disclaimer-open {
  overflow: hidden;
}
.tp-cand-ai-scraper-disclaimer-modal {
  width: 100%;
  max-width: 460px;
  max-height: min(88vh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--mc-surface, #1a1a1a);
  border: 1px solid var(--mc-border-light, #333);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  animation: tpp-riseIn 0.25s ease both;
  overflow: hidden;
}
.tp-cand-ai-scraper-disclaimer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 10px;
  border-bottom: 1px solid var(--mc-border, #2a2a2a);
}
.tp-cand-ai-scraper-disclaimer-title {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--mc-text, #f0ede8);
  margin: 0 0 4px;
  line-height: 1.1;
}
.tp-cand-ai-scraper-disclaimer-sub {
  margin: 0;
  font-size: 12px;
  color: var(--mc-text-dim, #888);
  line-height: 1.4;
}
.tp-cand-ai-scraper-disclaimer-close {
  border: none;
  background: none;
  color: var(--mc-text-dim, #888);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  flex-shrink: 0;
}
.tp-cand-ai-scraper-disclaimer-close:hover {
  color: var(--mc-text, #f0ede8);
}
.tp-cand-ai-scraper-disclaimer-body {
  padding: 14px 18px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--mc-text-dim, #c8c8c8);
}
.tp-cand-ai-scraper-disclaimer-body p {
  margin: 0 0 12px;
}
.tp-cand-ai-scraper-disclaimer-body ul {
  margin: 0 0 12px 18px;
  padding: 0;
}
.tp-cand-ai-scraper-disclaimer-body li {
  margin: 0 0 6px;
}
.tp-cand-ai-scraper-disclaimer-body strong {
  color: var(--mc-text, #f0ede8);
  font-weight: 600;
}
.tp-cand-ai-scraper-disclaimer-foot {
  margin: 4px 0 0 !important;
  font-style: italic;
  color: var(--mc-amber, #f5a623);
}
.tp-cand-ai-scraper-disclaimer-agree-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 18px 6px;
  padding: 10px 12px;
  border: 1px solid var(--mc-border-light, #333);
  border-radius: 10px;
  background: var(--mc-surface2, #222);
  font-size: 12px;
  line-height: 1.45;
  color: var(--mc-text, #f0ede8);
  cursor: pointer;
}
.tp-cand-ai-scraper-disclaimer-agree-row input {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--mc-amber, #f5a623);
}
.tp-cand-ai-scraper-disclaimer-agree-row input:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.tp-cand-ai-scraper-disclaimer-wait {
  margin: 0 18px 10px;
  font-size: 11px;
  color: var(--mc-text-muted, #6b7269);
  min-height: 14px;
}
.tp-cand-ai-scraper-disclaimer-footer {
  display: flex;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--mc-border, #2a2a2a);
}
.tp-cand-ai-scraper-disclaimer-cancel,
.tp-cand-ai-scraper-disclaimer-accept {
  flex: 1;
  min-height: 40px;
  border-radius: 10px;
  font-family: 'Barlow', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--mc-border-light, #333);
}
.tp-cand-ai-scraper-disclaimer-cancel {
  background: var(--mc-surface2, #222);
  color: var(--mc-text-muted, #888);
}
.tp-cand-ai-scraper-disclaimer-cancel:hover {
  background: #2a2a2a;
  color: var(--mc-text, #f0ede8);
}
.tp-cand-ai-scraper-disclaimer-accept {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  border-color: rgba(167, 139, 250, 0.45);
  color: #fff;
}
.tp-cand-ai-scraper-disclaimer-accept:hover:not(:disabled) {
  filter: brightness(1.06);
}
.tp-cand-ai-scraper-disclaimer-accept:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
}
@media (max-width: 767px) {
  .tp-cand-ai-scraper-disclaimer-backdrop {
    --tp-ai-scraper-modal-top-gap: calc(122px + env(safe-area-inset-top, 0px));
    padding: var(--tp-ai-scraper-modal-top-gap) 10px calc(10px + env(safe-area-inset-bottom, 0px));
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tp-cand-ai-scraper-disclaimer-modal {
    max-height: calc(100vh - var(--tp-ai-scraper-modal-top-gap) - 12px - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - var(--tp-ai-scraper-modal-top-gap) - 12px - env(safe-area-inset-bottom, 0px));
    border-radius: 14px 14px 0 0;
    min-height: 0;
  }
  .tp-cand-ai-scraper-disclaimer-header,
  .tp-cand-ai-scraper-disclaimer-agree-row,
  .tp-cand-ai-scraper-disclaimer-wait,
  .tp-cand-ai-scraper-disclaimer-footer {
    flex-shrink: 0;
  }
  .tp-cand-ai-scraper-disclaimer-header {
    padding: 12px 14px 8px;
  }
  .tp-cand-ai-scraper-disclaimer-title {
    font-size: 18px;
  }
  .tp-cand-ai-scraper-disclaimer-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 10px 14px;
    font-size: 12px;
    line-height: 1.45;
  }
  .tp-cand-ai-scraper-disclaimer-body p,
  .tp-cand-ai-scraper-disclaimer-body ul {
    margin-bottom: 9px;
  }
  .tp-cand-ai-scraper-disclaimer-agree-row {
    margin: 0 14px 5px;
    padding: 8px 10px;
  }
  .tp-cand-ai-scraper-disclaimer-wait {
    margin: 0 14px 7px;
  }
  .tp-cand-ai-scraper-disclaimer-footer {
    padding: 9px 14px 12px;
  }
  .tp-cand-ai-scraper-disclaimer-cancel,
  .tp-cand-ai-scraper-disclaimer-accept {
    min-height: 36px;
  }
}

/* Report Status Change modal */
.tp-report-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.tp-report-modal-backdrop.open {
  display: flex;
}
.tp-report-modal {
  background: var(--mc-surface, #1a1a1a);
  border: 1px solid var(--mc-border-light, #333);
  border-radius: 16px;
  padding: 20px;
  width: 100%;
  max-width: 320px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  animation: tpp-riseIn 0.25s ease both;
}
@keyframes tpp-riseIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.tp-report-modal-title {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--mc-text, #f0ede8);
  margin-bottom: 4px;
}
.tp-report-modal-sub {
  font-size: 11px;
  color: var(--mc-text-dim, #888);
  line-height: 1.5;
}
.tp-report-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}
.tp-report-modal-header .tp-report-modal-sub { margin-bottom: 0; }
.tp-report-modal-close {
  background: none;
  border: none;
  font-size: 16px;
  color: var(--mc-text-dim, #888);
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
}
.tp-report-modal-close:hover { color: var(--mc-text, #f0ede8); }
.tp-report-type-wrap { margin-bottom: 12px; }
.tp-report-type-select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--mc-border-light, #333);
  border-radius: 9px;
  background: var(--mc-surface2, #222);
  color: var(--mc-text, #f0ede8);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  box-sizing: border-box;
}
.tp-report-status-section { margin-bottom: 14px; }
.tp-report-optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--mc-text-dim, #666); font-size: 10px; }
.tp-report-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.tp-report-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--mc-border-light, #333);
  background: var(--mc-surface2, #222);
  color: var(--mc-text, #f0ede8);
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  font-family: inherit;
  width: 100%;
}
.tp-report-option:hover {
  border-color: #444;
  background: #2a2a2a;
}
.tp-report-option.selected {
  border-color: rgba(231, 76, 60, 0.5);
  background: rgba(231, 76, 60, 0.1);
}
.tp-report-option-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.tp-report-option-label {
  font-size: 13px;
  font-weight: 600;
}
.tp-report-option-desc {
  font-size: 10px;
  color: var(--mc-text-dim, #888);
  margin-top: 1px;
}
.tp-report-details-wrap {
  margin-bottom: 14px;
}
.tp-report-details-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--mc-text-dim, #888);
  margin-bottom: 4px;
}
.tp-report-details {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--mc-border-light, #333);
  border-radius: 8px;
  background: var(--mc-surface2, #222);
  color: var(--mc-text, #f0ede8);
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  min-height: 60px;
  box-sizing: border-box;
}
.tp-report-details::placeholder {
  color: var(--mc-text-dim, #666);
}
.tp-report-modal-footer {
  display: flex;
  gap: 8px;
}
.tp-report-cancel {
  flex: 1;
  padding: 9px;
  border-radius: 9px;
  border: 1px solid var(--mc-border-light, #333);
  background: var(--mc-surface2, #222);
  color: var(--mc-text-muted, #888);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.tp-report-cancel:hover {
  background: #2a2a2a;
  color: var(--mc-text, #f0ede8);
}
.tp-report-submit {
  flex: 1.5;
  padding: 9px;
  border-radius: 9px;
  border: none;
  background: #e74c3c;
  color: #fff;
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.15s;
}
.tp-report-submit:hover:not(:disabled) {
  background: #c0392b;
}
.tp-report-submit:disabled {
  background: #444;
  color: #888;
  cursor: not-allowed;
}
.tp-report-msg {
  margin-top: 10px;
  font-size: 12px;
  min-height: 18px;
}
.tp-report-msg-ok { color: var(--tpp-green, #4ade80); }
.tp-report-msg-err { color: #e74c3c; }
@media (max-width: 400px) {
  .tp-report-modal-backdrop { padding: 12px; }
  .tp-report-modal { padding: 16px; max-width: none; }
  .tp-report-modal-title { font-size: 16px; }
  .tp-report-option { padding: 10px; }
  .tp-report-option-label { font-size: 12px; }
}

/* Header */
.tpp-header {
  margin-bottom: 10px;
}
.tpp-location-type {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tpp-amber, #f5a623);
  margin-bottom: 4px;
}
.tpp-title {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #f0ede8;
  line-height: 1.15;
  letter-spacing: 0.3px;
}
.tpp-last-visit {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--tpp-muted, #888);
  margin-top: 6px;
  margin-bottom: 2px;
}
.tpp-visit-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tpp-green, #4ade80);
  box-shadow: 0 0 4px rgba(74, 222, 128, 0.5);
  flex-shrink: 0;
}
.tpp-visit-dot-place {
  background: var(--tpp-muted, #666);
  box-shadow: none;
}

/* Stats row */
.tpp-stats-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 6px 0;
  border-top: 1px solid #2a2a2a;
  border-bottom: 1px solid #2a2a2a;
  margin-bottom: 8px;
}
.tpp-stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  position: relative;
  text-decoration: none;
  color: inherit;
  padding: 2px 4px;
  min-width: 0;
}
.tpp-stat-item + .tpp-stat-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: #2a2a2a;
}
.tpp-stat-clickable {
  cursor: pointer;
  transition: color 0.15s;
}
.tpp-stat-clickable:hover .tpp-stat-val,
.tpp-stat-clickable:hover .tpp-stat-lbl {
  color: #f5a623;
}
.tpp-stat-val {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--tpp-text, #f0ede8);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}
.tpp-stat-lbl {
  font-size: 10px;
  color: var(--tpp-muted, #888);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
}
.tpp-star { color: #f5a623; font-size: 14px; }
.tpp-star.empty { color: #333; }

/* Premium blur for stats */
.tpp-stats-row .premium-blur {
  filter: blur(5px);
  pointer-events: none;
  user-select: none;
}

/* Photo lightbox */
.tpp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tpp-lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.92);
}
.tpp-lb-img {
  position: relative;
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  z-index: 1;
}
.tpp-lb-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.tpp-lb-close:hover { background: rgba(255,255,255,0.2); }
.tpp-lb-prev, .tpp-lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.tpp-lb-prev { left: 16px; }
.tpp-lb-next { right: 16px; }
.tpp-lb-prev:hover, .tpp-lb-next:hover { background: rgba(255,255,255,0.2); }
.tpp-lb-counter {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 16px;
  z-index: 2;
  letter-spacing: 0.5px;
}

/* Street View toggle pill — sits in photo strip, bottom-left */
.tpp-sv-toggle-btn {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 20px;
  font-family: 'Barlow', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #1a1e1a;
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: all 0.15s;
}
.tpp-sv-toggle-btn:hover {
  background: rgba(255,255,255,1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transform: translateY(-1px);
}
.tpp-sv-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4285f4;
  flex-shrink: 0;
}
/* Street View overlay — covers photo strip */
.tpp-sv-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  overflow: hidden;
}
.tpp-sv-overlay.tpp-sv-visible {
  opacity: 1;
  pointer-events: auto;
}
.tpp-sv-static-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
}
.tpp-sv-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.tpp-sv-arrow:hover { background: rgba(0,0,0,0.7); }
.tpp-sv-arrow-left { left: 6px; }
.tpp-sv-arrow-right { right: 6px; }
.tpp-sv-heading-label {
  position: absolute;
  bottom: 6px; right: 8px;
  z-index: 7;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.5);
  padding: 2px 8px;
  border-radius: 12px;
  pointer-events: none;
  letter-spacing: 0.4px;
  transition: background 0.2s;
}
/* Difficulty row: "Difficulty" left; bars + tier + avg stars grouped on the right */
.tpp-difficulty-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.tpp-difficulty-left {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.tpp-difficulty-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}
.tpp-difficulty-scale {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.tpp-diff-label {
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}
.tpp-diff-bars {
  display: flex;
  gap: 3px;
  align-items: flex-end;
}
.tpp-diff-bar {
  width: 5px;
  border-radius: 2px;
  background: #2a2a2a;
}
.tpp-diff-bar:nth-child(1) { height: 7px; }
.tpp-diff-bar:nth-child(2) { height: 11px; }
.tpp-diff-bar:nth-child(3) { height: 15px; }
.tpp-diff-bar:nth-child(4) { height: 19px; }
.tpp-diff-name {
  font-size: 12px;
  font-weight: 700;
}
.tpp-star-rating {
  display: flex;
  gap: 2px;
  align-items: center;
}
.tpp-star-rating .tpp-star {
  font-size: 13px;
}
.tpp-star-rating .premium-blur {
  filter: blur(5px);
  pointer-events: none;
  user-select: none;
  font-size: 12px;
  color: #f5a623;
}

/* Access notes (reference: entrance-note — label "Access Notes") */
.tpp-entrance-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: var(--tpp-surface2, rgba(30, 28, 24, 0.6));
  border: 1px solid rgba(184, 110, 0, 0.2);
  border-left: 3px solid var(--tpp-amber, #f5a623);
  border-radius: 8px;
  margin-bottom: 12px;
}
.tpp-entrance-icon {
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}
.tpp-entrance-text {
  font-size: 12px;
  color: var(--tpp-muted, #888);
  line-height: 1.55;
  word-break: break-word;
  white-space: pre-wrap;
}
.tpp-entrance-text strong {
  color: var(--tpp-amber, #f5a623);
  font-weight: 700;
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 3px;
}
.tpp-entrance-inline {
  display: block;
  margin-top: 0;
}
.tpp-entrance-expand {
  display: inline-block;
  margin-top: 8px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--tpp-amber, #f5a623);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(245, 166, 35, 0.45);
}
.tpp-entrance-expand:hover {
  color: #ffc14d;
  text-decoration-color: rgba(255, 193, 77, 0.65);
}
.tpp-entrance-expand:focus-visible {
  outline: 2px solid var(--tpp-amber, #f5a623);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Added by */
.tpp-added-by {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid #2a2a2a;
  margin-bottom: 8px;
}
.tpp-added-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2a3a2a, #3a2a1a);
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #f5a623;
  flex-shrink: 0;
  overflow: hidden;
}
.tpp-added-avatar-img {
  padding: 0;
  background: #1e1e1e;
}
.tpp-added-avatar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.tpp-added-info {
  flex: 1;
  min-width: 0;
}
.tpp-added-name {
  font-size: 12px;
  font-weight: 600;
  color: #f5a623;
  text-decoration: none;
  line-height: 1.2;
}
.tpp-added-name:hover {
  text-decoration: underline;
}
.tpp-added-meta {
  font-size: 11px;
  color: var(--tpp-muted, #888);
  margin-top: 2px;
  line-height: 1.3;
}
.tpp-edit-spot-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 20px;
  border: 1px solid var(--tpp-border, #444);
  background: rgba(255,255,255,0.06);
  color: var(--tpp-muted, #888);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  text-transform: uppercase;
  font-family: inherit;
}
.tpp-edit-spot-btn:hover {
  border-color: var(--tpp-amber, rgba(245,166,35,0.5));
  background: rgba(245,166,35,0.1);
  color: var(--tpp-amber, #f5a623);
}
.tpp-delete-spot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--tpp-border, #444);
  background: rgba(255,255,255,0.06);
  color: var(--tpp-muted, #888);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  font-family: inherit;
}
.tpp-delete-spot-btn:hover {
  border-color: rgba(194,53,53,0.5);
  background: rgba(194,53,53,0.12);
  color: #c23535;
}
.tpp-delete-spot-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.tpp-action-row-links {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.tpp-action-row-links .tpp-action-btn {
  flex: 1;
}

/* View details link-button */
.tpp-action-detail {
  display: block;
  width: 100%;
  text-align: center;
  padding: 6px 12px;
  border-radius: 9px;
  border: 1px solid rgba(74,222,128,0.25);
  background: linear-gradient(135deg, #1e2e1a, #1a2a1a);
  color: #4ade80;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
  text-decoration: none;
  margin-bottom: 8px;
  box-sizing: border-box;
}
.tpp-action-detail:hover {
  background: linear-gradient(135deg, #263820, #223a20);
  border-color: rgba(74,222,128,0.4);
  transform: translateY(-1px);
  color: #4ade80;
}

/* Actions area */
.tpp-actions {
  margin-bottom: 6px;
}

/* Maps dropdown */
.tpp-maps-wrap {
  position: relative;
}

/* Moderator candidates map: notice + summary + flat tag lines */
.tp-candidate-pin-popup .tp-candidate-popup-notice {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(251, 191, 36, 0.55);
  background: rgba(251, 191, 36, 0.16);
  color: #ffe8a3;
  font-size: 12px;
  line-height: 1.4;
}
.tp-candidate-pin-popup .tp-candidate-summary-row {
  font-size: 13px;
  margin: 6px 0 0;
  line-height: 1.35;
}
.tp-candidate-pin-popup .tp-candidate-description {
  font-size: 13px;
  margin: 6px 0 0;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
}
.tp-candidate-pin-popup .tp-candidate-summary-label {
  opacity: 0.72;
  margin-right: 6px;
}
.tp-candidate-pin-popup .tp-candidate-tags-block {
  margin-top: 10px;
}
.tp-candidate-pin-popup .tp-candidate-tag-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  line-height: 1.35;
  margin: 4px 0 0;
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.03);
}
.tp-candidate-pin-popup .tp-candidate-tags-block:not(.is-expanded) .tp-candidate-tag-line.is-extra {
  display: none;
}
.tp-candidate-pin-popup .tp-candidate-tag-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-weight: 700;
  color: #f3f6f4;
  flex: 0 0 44%;
  max-width: 44%;
  word-break: break-word;
  opacity: 0.95;
}
.tp-candidate-pin-popup .tp-candidate-tag-value {
  flex: 1 1 auto;
  min-width: 0;
  color: rgba(255, 255, 255, 0.9);
  word-break: break-word;
}
.tp-candidate-pin-popup .tp-candidate-tags-toggle {
  margin-top: 8px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.92);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 600;
  padding: 6px 8px;
  cursor: pointer;
}
.tp-candidate-pin-popup .tp-candidate-tags-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}
body.light-mode .tp-candidate-pin-popup .tp-candidate-popup-notice {
  border-color: rgba(184, 134, 11, 0.5);
  background: rgba(251, 191, 36, 0.22);
  color: #6b4e00;
}
body.light-mode .tp-candidate-pin-popup .tp-candidate-tag-line {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.025);
}
body.light-mode .tp-candidate-pin-popup .tp-candidate-description {
  color: rgba(0, 0, 0, 0.84);
}
body.light-mode .tp-candidate-pin-popup .tp-candidate-tag-key {
  color: rgba(0, 0, 0, 0.95);
}
body.light-mode .tp-candidate-pin-popup .tp-candidate-tag-value {
  color: rgba(0, 0, 0, 0.85);
}
body.light-mode .tp-candidate-pin-popup .tp-candidate-tags-toggle {
  border-color: rgba(0, 0, 0, 0.16);
  background: rgba(0, 0, 0, 0.035);
  color: rgba(0, 0, 0, 0.78);
}
body.light-mode .tp-candidate-pin-popup .tp-candidate-tags-toggle:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.24);
}
body:not(.dark-mode) .tp-candidate-pin-popup .tp-candidate-popup-notice,
body.light-mode .tp-candidate-pin-popup .tp-candidate-popup-notice {
  border-color: rgba(184, 134, 11, 0.5);
  background: rgba(251, 191, 36, 0.22);
  color: #6b4e00;
}
body:not(.dark-mode) .tp-candidate-pin-popup .tp-candidate-tag-line,
body.light-mode .tp-candidate-pin-popup .tp-candidate-tag-line {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.025);
}
body:not(.dark-mode) .tp-candidate-pin-popup .tp-candidate-description,
body.light-mode .tp-candidate-pin-popup .tp-candidate-description {
  color: rgba(0, 0, 0, 0.84);
}
body:not(.dark-mode) .tp-candidate-pin-popup .tp-candidate-tag-key,
body.light-mode .tp-candidate-pin-popup .tp-candidate-tag-key {
  color: rgba(0, 0, 0, 0.95);
}
body:not(.dark-mode) .tp-candidate-pin-popup .tp-candidate-tag-value,
body.light-mode .tp-candidate-pin-popup .tp-candidate-tag-value {
  color: rgba(0, 0, 0, 0.85);
}
body:not(.dark-mode) .tp-candidate-pin-popup .tp-candidate-tags-toggle,
body.light-mode .tp-candidate-pin-popup .tp-candidate-tags-toggle {
  border-color: rgba(0, 0, 0, 0.16);
  background: rgba(0, 0, 0, 0.035);
  color: rgba(0, 0, 0, 0.78);
}

/* Side panel (mobile + desktop): same OSM candidate popup rules — beats stale/generic .tpp-card overrides */
.tp-loc-info-body .tp-pin-popup-card.tp-candidate-pin-popup .tp-candidate-popup-notice {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(251, 191, 36, 0.55);
  background: rgba(251, 191, 36, 0.16);
  color: #ffe8a3;
  font-size: 12px;
  line-height: 1.4;
  box-sizing: border-box;
}
.tp-loc-info-body .tp-pin-popup-card.tp-candidate-pin-popup .tp-candidate-description {
  font-size: 13px;
  margin: 6px 0 0;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
}
.tp-loc-info-body .tp-pin-popup-card.tp-candidate-pin-popup .tp-candidate-tags-block {
  margin-top: 10px;
}
.tp-loc-info-body .tp-pin-popup-card.tp-candidate-pin-popup .tp-candidate-tag-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  line-height: 1.35;
  margin: 4px 0 0;
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.03);
  box-sizing: border-box;
}
.tp-loc-info-body .tp-pin-popup-card.tp-candidate-pin-popup .tp-candidate-tags-block:not(.is-expanded) .tp-candidate-tag-line.is-extra {
  display: none;
}
.tp-loc-info-body .tp-pin-popup-card.tp-candidate-pin-popup .tp-candidate-tag-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-weight: 700;
  color: #f3f6f4;
  flex: 0 0 44%;
  max-width: 44%;
  word-break: break-word;
}
.tp-loc-info-body .tp-pin-popup-card.tp-candidate-pin-popup .tp-candidate-tag-value {
  flex: 1 1 auto;
  min-width: 0;
  color: rgba(255, 255, 255, 0.9);
  word-break: break-word;
}
.tp-loc-info-body .tp-pin-popup-card.tp-candidate-pin-popup .tp-candidate-tags-toggle {
  display: block;
  margin-top: 8px;
  width: 100%;
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.92);
  font-family: 'Barlow', sans-serif;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 600;
  padding: 8px 10px;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}
body:not(.dark-mode) .tp-loc-info-body .tp-pin-popup-card.tp-candidate-pin-popup .tp-candidate-popup-notice,
body.light-mode .tp-loc-info-body .tp-pin-popup-card.tp-candidate-pin-popup .tp-candidate-popup-notice {
  border-color: rgba(184, 134, 11, 0.5);
  background: rgba(251, 191, 36, 0.22);
  color: #6b4e00;
}
body:not(.dark-mode) .tp-loc-info-body .tp-pin-popup-card.tp-candidate-pin-popup .tp-candidate-tag-line,
body.light-mode .tp-loc-info-body .tp-pin-popup-card.tp-candidate-pin-popup .tp-candidate-tag-line {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.025);
}
body:not(.dark-mode) .tp-loc-info-body .tp-pin-popup-card.tp-candidate-pin-popup .tp-candidate-description,
body.light-mode .tp-loc-info-body .tp-pin-popup-card.tp-candidate-pin-popup .tp-candidate-description {
  color: rgba(0, 0, 0, 0.84);
}
body:not(.dark-mode) .tp-loc-info-body .tp-pin-popup-card.tp-candidate-pin-popup .tp-candidate-tag-key,
body.light-mode .tp-loc-info-body .tp-pin-popup-card.tp-candidate-pin-popup .tp-candidate-tag-key {
  color: rgba(0, 0, 0, 0.95);
}
body:not(.dark-mode) .tp-loc-info-body .tp-pin-popup-card.tp-candidate-pin-popup .tp-candidate-tag-value,
body.light-mode .tp-loc-info-body .tp-pin-popup-card.tp-candidate-pin-popup .tp-candidate-tag-value {
  color: rgba(0, 0, 0, 0.85);
}
body:not(.dark-mode) .tp-loc-info-body .tp-pin-popup-card.tp-candidate-pin-popup .tp-candidate-tags-toggle,
body.light-mode .tp-loc-info-body .tp-pin-popup-card.tp-candidate-pin-popup .tp-candidate-tags-toggle {
  border-color: rgba(0, 0, 0, 0.16);
  background: rgba(0, 0, 0, 0.035);
  color: rgba(0, 0, 0, 0.78);
}

@media (max-width: 767px) {
  /* Candidates map: pin detail panel (narrow column on phone) */
  .tp-loc-info-body .tp-pin-popup-card.tp-candidate-pin-popup .tp-candidate-popup-notice {
    font-size: 11px;
    padding: 7px 9px;
  }
  .tp-loc-info-body .tp-pin-popup-card.tp-candidate-pin-popup .tp-candidate-tags-toggle {
    min-height: 40px;
    font-size: 12px;
    padding: 9px 10px;
  }
  .tp-loc-info-body .tp-pin-popup-card.tp-candidate-pin-popup .tp-candidate-tag-key {
    flex: 0 0 42%;
    max-width: 42%;
    font-size: 10px;
  }
  .tp-loc-info-body .tp-pin-popup-card.tp-candidate-pin-popup .tp-candidate-tag-value {
    font-size: 10px;
  }

  /* AI Scraper row: keep purple "New" badge visible in narrow menu */
  body.page-explore .tp-explore-panel .ctrl-btn.tp-cand-ai-scraper-btn {
    flex-wrap: wrap;
    row-gap: 4px;
    align-items: center;
  }
  body.page-explore .tp-explore-panel .ctrl-btn.tp-cand-ai-scraper-btn .btn-label {
    flex: 1 1 auto;
    min-width: 0;
  }
  body.page-explore .tp-explore-panel .tp-cand-new-badge {
    display: inline-block !important;
    flex: 0 0 auto;
    margin-left: 4px;
    padding: 2px 6px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 6px;
    color: #fff !important;
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    vertical-align: middle;
    line-height: 1.2;
  }
  body.page-explore .tp-explore-panel .tp-cand-scrape-view-btn {
    display: block !important;
    width: 100% !important;
    min-height: 40px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    border: 1px solid rgba(191, 128, 76, 0.55) !important;
    background: linear-gradient(135deg, #bf8a58 0%, #a97146 55%, #8e5f3e 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(125, 86, 52, 0.24) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    touch-action: manipulation;
  }
  body.page-explore .tp-explore-panel .tp-cand-ai-scraper-desc {
    font-size: 11px;
    line-height: 1.4;
    color: var(--mc-text-muted, #6b7269);
  }
}

.tpp-action-btn {
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid #333;
  background: #1e1e1e;
  color: #f0ede8;
  font-family: 'Barlow', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.18s;
  letter-spacing: 0.3px;
  width: 100%;
  box-sizing: border-box;
}
.tpp-action-btn:hover {
  background: #252525;
  border-color: rgba(255,255,255,0.15);
  transform: translateY(-1px);
}
.tpp-action-full {
  display: block;
  text-decoration: none;
  margin-bottom: 8px;
  text-align: center;
}
.tpp-action-full:hover {
  color: inherit;
}
.tpp-action-primary {
  background: linear-gradient(135deg, #1e2e1a, #1a2a1a);
  border-color: rgba(74,222,128,0.25);
  color: #4ade80;
}
.tpp-action-primary:hover {
  background: linear-gradient(135deg, #263820, #223a20);
  border-color: rgba(74,222,128,0.4);
  color: #4ade80;
}
.tpp-maps-menu {
  display: none;
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 10px;
  overflow: hidden;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.tpp-maps-menu.open {
  display: block;
}
.tpp-maps-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #f0ede8;
  cursor: pointer;
  transition: background 0.12s;
  text-decoration: none;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: 'Barlow', sans-serif;
}
.tpp-maps-option:hover {
  background: #252525;
  color: #f0ede8;
}
.tpp-maps-option + .tpp-maps-option {
  border-top: 1px solid #2a2a2a;
}

/* Bottom row: save, share, report */
.tpp-bottom-row {
  display: flex;
  gap: 5px;
  margin-top: 2px;
}
.tpp-bottom-row .tpp-icon-btn {
  flex: 1;
}
.tpp-icon-btn {
  padding: 6px 4px;
  border-radius: 8px;
  border: 1px solid #2a2a2a;
  background: #1e1e1e;
  color: #888;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: 'Barlow', sans-serif;
  transition: all 0.18s;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.tpp-icon-btn:hover {
  background: #252525;
  color: #f0ede8;
  transform: translateY(-1px);
}
.tpp-btn-save:hover,
.tp-pin-btn-save:hover {
  color: #f5a623 !important;
  border-color: rgba(245,166,35,0.4) !important;
}
.tp-pin-btn-share:hover {
  color: #a78bfa !important;
  border-color: rgba(167,139,250,0.4) !important;
}
.tpp-btn-report:hover,
.tp-pin-btn-report:hover {
  color: #f87171 !important;
  border-color: rgba(248,113,113,0.4) !important;
}

/* Side panel overrides: the popup card inside the info panel */
.tp-loc-info-body .tpp-card {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* ═══ End Popup Card ═══ */

/* Explore map: red dot on cluster when it contains a saved pin (do not override .marker-cluster position – library uses absolute) */
.tp-cluster-saved-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7c3aed;
    border: 1px solid #fff;
    box-sizing: border-box;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.25);
}

/* Verify + Review modal */
.tp-verify-review-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.tp-verify-review-modal.tp-hidden { display: none !important; }
.tp-verify-review-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.tp-verify-review-box { position: relative; background: #fff; border-radius: 12px; padding: 20px; max-width: 400px; width: 100%; box-shadow: 0 8px 32px rgba(0,0,0,0.2); max-height: min(92vh, 720px); overflow-y: auto; }
.tp-verify-review-title { margin: 0 0 4px; font-size: 18px; }
.tp-verify-review-sub { margin: 0 0 12px; font-size: 13px; color: #666; }
.tp-verify-review-stars { margin-bottom: 12px; font-size: 28px; letter-spacing: 2px; }
.tp-verify-review-stars .tp-review-star { cursor: pointer; color: #ddd; user-select: none; }
.tp-verify-review-stars .tp-review-star.tp-star-selected { color: #f5a623; }
.tp-verify-review-comment { width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid #ccc; border-radius: 6px; font-family: inherit; font-size: 14px; margin-bottom: 12px; resize: vertical; }
.tp-verify-review-actions { display: flex; gap: 10px; justify-content: flex-end; }
.tp-verify-review-actions button { padding: 8px 16px; border-radius: 6px; font-size: 14px; cursor: pointer; border: 1px solid #ccc; background: #f5f5f5; }
.tp-verify-review-actions .tp-verify-review-submit { background: #548cff; color: #fff; border-color: #548cff; }

/* Verify modal — optional spot photos (same flow as Explore: staff moderation) */
.tp-verify-spot-photo-field { margin-top: 4px; margin-bottom: 12px; padding-top: 12px; border-top: 1px solid #e8e8e8; }
.tp-verify-spot-photo-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #666; margin-bottom: 6px; }
.tp-verify-spot-photo-opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: #888; font-size: 11px; }
.tp-verify-spot-photo-upload {
    display: block;
    border: 1.5px dashed #ccc;
    border-radius: 10px;
    padding: 12px 10px;
    text-align: center;
    cursor: pointer;
    background: #fafafa;
    transition: border-color 0.15s, background 0.15s;
}
.tp-verify-spot-photo-upload:hover { border-color: #f5a623; background: #fff9f0; }
.tp-verify-spot-photo-icon { display: block; font-size: 22px; line-height: 1; margin-bottom: 4px; }
.tp-verify-spot-photo-tap { display: block; font-size: 13px; font-weight: 600; color: #444; }
.tp-verify-spot-photo-sub { display: block; font-size: 11px; color: #888; margin-top: 4px; }
.tp-verify-spot-photo-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tp-verify-spot-photo-thumb {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #ddd;
    background: #f0f0f0;
}
.tp-verify-spot-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-verify-spot-photo-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tp-verify-spot-photo-note {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: #1d4ed8;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.28);
}

/* Location reviews block (stars + comments on post) */
.tp-location-reviews { margin-top: 16px; padding-top: 12px; border-top: 1px solid #eee; }
.tp-location-reviews-header { margin-bottom: 10px; font-size: 14px; font-weight: 600; }
.tp-reviews-count { font-weight: 400; color: #666; }
.tp-reviews-list { list-style: none; margin: 0; padding: 0; }
.tp-review-item { padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
.tp-review-item:last-child { border-bottom: none; }
.tp-review-meta { font-size: 12px; color: #666; margin-bottom: 4px; }
.tp-review-author { font-weight: 600; color: #333; }
.tp-review-date { margin-left: 6px; }
.tp-review-stars { font-size: 14px; color: #f5a623; margin-bottom: 4px; }
.tp-review-stars .tp-star { color: #ddd; }
.tp-review-stars .tp-star-filled { color: #f5a623; }
.tp-review-comment { font-size: 13px; line-height: 1.5; color: #333; }

/* Admin delete buttons (reviews + listings) */
.tp-review-item { position: relative; padding-right: 36px; }
.tp-admin-delete-review {
    position: absolute;
    top: 4px;
    right: 0;
    margin: 0 !important;
}
.tp-admin-delete-review,
.tp-admin-delete-location {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0 0 0 6px;
    border: none;
    border-radius: 4px;
    background: rgba(0,0,0,0.06);
    color: #999;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.tp-admin-delete-review:hover,
.tp-admin-delete-location:hover {
    background: rgba(229, 57, 53, 0.15);
    color: #e53935;
}
.tp-admin-delete-review:disabled,
.tp-admin-delete-location:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.tp-admin-delete-location { margin-left: 4px; }
body.dark-mode .tp-admin-delete-review,
body.dark-mode .tp-admin-delete-location {
    background: rgba(255,255,255,0.08);
    color: #888;
}
body.dark-mode .tp-admin-delete-review:hover,
body.dark-mode .tp-admin-delete-location:hover {
    background: rgba(229, 57, 53, 0.25);
    color: #ef5350;
}

/* Deep-link target for Discord "Reports" URL; list is in modal for admins / poster */
.tp-reports-scroll-anchor {
    display: block;
    height: 0;
    overflow: hidden;
    scroll-margin-top: 72px;
}

/* Location reports modal */
.tp-reports-modal {
    position: fixed;
    inset: 0;
    z-index: 100050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}
.tp-reports-modal-open {
    overflow: hidden;
}
.tp-reports-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    cursor: pointer;
}
.tp-reports-modal-dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 520px;
    max-height: min(85vh, 640px);
    display: flex;
    flex-direction: column;
    padding: 20px 20px 16px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}
body.dark-mode .tp-reports-modal-dialog {
    background: #1e1e1e;
    color: #e5e5e5;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.tp-reports-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: #6b7280;
    border-radius: 6px;
}
.tp-reports-modal-close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #111;
}
body.dark-mode .tp-reports-modal-close {
    color: #9ca3af;
}
body.dark-mode .tp-reports-modal-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.tp-reports-modal-heading {
    margin: 0 40px 12px 0;
    font-size: 18px;
    font-weight: 700;
}
.tp-reports-modal-body {
    flex: 1;
    overflow-y: auto;
    min-height: 80px;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.45;
}
.tp-reports-modal-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tp-reports-modal-item {
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
body.dark-mode .tp-reports-modal-item {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}
.tp-reports-modal-item:last-child {
    border-bottom: none;
}
.tp-reports-modal-cat {
    font-weight: 700;
    color: #b45309;
    margin-bottom: 4px;
}
body.dark-mode .tp-reports-modal-cat {
    color: #fbbf24;
}
.tp-reports-modal-reason {
    font-weight: 600;
    margin-bottom: 2px;
}
.tp-reports-modal-reporter {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 4px;
}
.tp-reports-modal-reporter a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
}
.tp-reports-modal-reporter a:hover {
    text-decoration: underline;
}
body.dark-mode .tp-reports-modal-reporter {
    color: #9ca3af;
}
body.dark-mode .tp-reports-modal-reporter a {
    color: #93c5fd;
}
.tp-reports-modal-time {
    font-size: 11px;
    opacity: 0.75;
    margin-bottom: 4px;
}
.tp-reports-modal-msg {
    margin-top: 6px;
    white-space: pre-wrap;
    word-break: break-word;
}
.tp-reports-modal-loading,
.tp-reports-modal-empty,
.tp-reports-modal-error {
    margin: 12px 0;
    color: inherit;
    opacity: 0.85;
}
.tp-reports-modal-error {
    color: #c62828;
}
.tp-reports-modal-error-hint {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: #555;
    opacity: 0.95;
}
body.dark-mode .tp-reports-modal-error-hint {
    color: #b0b0b0;
}
body.dark-mode .tp-reports-modal-error {
    color: #f87171;
}
.tp-reports-modal-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
body.dark-mode .tp-reports-modal-pager {
    border-top-color: rgba(255, 255, 255, 0.1);
}
.tp-reports-pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.2;
    color: #374151;
    background: #f3f4f6;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    cursor: pointer;
}
.tp-reports-pager-btn:hover:not(:disabled) {
    background: #e5e7eb;
}
.tp-reports-pager-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
body.dark-mode .tp-reports-pager-btn {
    color: #e5e7eb;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
}
body.dark-mode .tp-reports-pager-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.16);
}
.tp-reports-page-info {
    font-size: 12px;
    opacity: 0.85;
    flex: 1;
    text-align: center;
}

/* Legacy: inline reports section (replaced by modal); keep rules if cached HTML exists */
.tp-activity-reports-section {
    margin-top: 14px;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    scroll-margin-top: 20px;
}
body.dark-mode .tp-activity-reports-section {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}
.tp-activity-reports-title {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 10px 0;
    color: inherit;
}
.tp-activity-reports-count { font-weight: 600; opacity: 0.85; }
.tp-activity-reports-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tp-activity-report-item {
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 12px;
}
body.dark-mode .tp-activity-report-item { border-bottom-color: rgba(255, 255, 255, 0.06); }
.tp-activity-report-item:last-child { border-bottom: none; }
.tp-report-category { font-weight: 700; color: #b86e00; }
body.dark-mode .tp-report-category { color: #f5a623; }
.tp-report-reason { color: inherit; }
.tp-report-time { font-size: 11px; opacity: 0.8; }
.tp-report-details {
    margin-top: 4px;
    padding-left: 0;
    line-height: 1.4;
    color: inherit;
    opacity: 0.9;
}

/* Verify + Reviews: dark mode */
body.dark-mode .tp-verify-count { color: #aaa; }
body.dark-mode .tp-verify-count-circle { background: #3a6ea5; color: #fff; }

/* Profile location map popup: name + View in Explore button */
.tp-location-popup-box { min-width: 160px; }
.tp-location-popup-row { display: flex; align-items: flex-start; gap: 10px; }
.tp-location-popup-thumbs { display: flex; flex-wrap: wrap; max-width: 180px; gap: 4px; }
.tp-location-popup-thumbs img { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; }
.tp-location-popup-info { display: flex; flex-direction: column; gap: 8px; }
.tp-location-popup-title { display: block; margin: 0; }
.tp-location-popup-photo-count { font-size: 13px; color: #555; margin-top: 2px; }
body.dark-mode .tp-location-popup-photo-count { color: #aaa; }
.tp-popup-view-explore {
    display: inline-block;
    padding: 6px 12px;
    font-size: 13px;
    background: #548cff;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    text-align: center;
}
.tp-popup-view-explore:hover { background: #4570d8; color: #fff; }
body.dark-mode .leaflet-popup .tp-popup-view-explore { background: #3a6ea5; color: #fff; }
body.dark-mode .leaflet-popup .tp-popup-view-explore:hover { background: #548cff; color: #fff; }
body.dark-mode .tp-verify-review-backdrop { background: rgba(0,0,0,0.7); }
body.dark-mode .tp-verify-review-box {
    background: #2a2e36;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
body.dark-mode .tp-verify-review-title { color: #e4e4e4; }
body.dark-mode .tp-verify-review-sub { color: #aaa; }
body.dark-mode .tp-verify-review-stars .tp-review-star { color: #555; }
body.dark-mode .tp-verify-review-stars .tp-review-star.tp-star-selected { color: #f5a623; }
body.dark-mode .tp-verify-review-comment {
    background: #1e2228;
    border-color: #444;
    color: #e4e4e4;
}
body.dark-mode .tp-verify-review-comment::placeholder { color: #888; }
body.dark-mode .tp-verify-review-actions button {
    background: #3a3e46;
    border-color: #555;
    color: #e4e4e4;
}
body.dark-mode .tp-verify-review-actions button.tp-verify-review-submit {
    background: #548cff;
    border-color: #548cff;
    color: #fff;
}
body.dark-mode .tp-verify-spot-photo-field { border-top-color: #3a3e46; }
body.dark-mode .tp-verify-spot-photo-label { color: #aaa; }
body.dark-mode .tp-verify-spot-photo-opt { color: #777; }
body.dark-mode .tp-verify-spot-photo-upload {
    border-color: #555;
    background: #23272e;
}
body.dark-mode .tp-verify-spot-photo-upload:hover { border-color: #f5a623; background: #2a2218; }
body.dark-mode .tp-verify-spot-photo-tap { color: #ddd; }
body.dark-mode .tp-verify-spot-photo-sub { color: #888; }
body.dark-mode .tp-verify-spot-photo-thumb { border-color: #444; background: #1e2228; }
body.dark-mode .tp-verify-spot-photo-note {
    color: #93c5fd;
    background: rgba(56, 169, 255, 0.09);
    border-color: rgba(56, 169, 255, 0.28);
}
body.dark-mode .tp-location-reviews { border-top-color: #3a3e46; }
body.dark-mode .tp-location-reviews-header { color: #e4e4e4; }
body.dark-mode .tp-reviews-count { color: #aaa; }
body.dark-mode .tp-review-item { border-bottom-color: #3a3e46; }
body.dark-mode .tp-review-author { color: #e4e4e4; }
body.dark-mode .tp-review-date { color: #888; }
body.dark-mode .tp-review-stars .tp-star { color: #555; }
body.dark-mode .tp-review-stars .tp-star-filled { color: #f5a623; }
body.dark-mode .tp-review-comment { color: #ccc; }

body.dark-mode .tp-view-in-explore {
    background: #3a6ea5;
    color: #fff;
}
body.dark-mode .tp-view-in-explore:hover {
    background: #548cff;
    color: #fff;
}

/* Dark Mode */
body.dark-mode{
    background-color: #121419 !important;
    color: #ffffff;
}


body.dark-mode div#header--standard
/* body.dark-mode #youzify-profile-header,
body.dark-mode #youzify-profile-navmenu .youzify-inner-content */
 {
    background-color: #20232b !important;
}

/* ═══ Youzify header: modern quick buttons + hide profile dropdown ═══ */
.youzify-settings-area .youzify-nav-settings,
.youzify-settings-area .youzify-settings-menu {
    display: none !important;
}
.youzify-quick-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
}
.youzify-quick-buttons .youzify-button-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.06);
    color: inherit;
    transition: background 0.2s, color 0.2s;
}
.youzify-quick-buttons .youzify-button-item:hover {
    background: rgba(0, 0, 0, 0.12);
}
body:not(.dark-mode) .youzify-quick-buttons .youzify-button-item {
    background: #d5d8d2;
    border: 1px solid #b8bdb4;
    color: #3f4257;
}
body:not(.dark-mode) .youzify-quick-buttons .youzify-button-item:hover {
    background: #c7cbc2;
    border-color: #a3a99c;
    color: #3f4257;
}
body.dark-mode .youzify-quick-buttons .youzify-button-item {
    background: rgba(255, 255, 255, 0.08);
}
body.dark-mode .youzify-quick-buttons .youzify-button-item:hover {
    background: rgba(255, 255, 255, 0.15);
}
/* Replace icons with modern Font Awesome (bell, envelope, user-friends) */
.youzify-friends-btn .dashicons,
.youzify-messages-btn .dashicons,
.youzify-notification-btn > i.fas {
    display: none !important;
}
.youzify-friends-btn::before {
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", sans-serif;
    font-weight: 900;
    content: "\f500";
    font-size: 16px;
}
.youzify-messages-btn::before {
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", sans-serif;
    font-weight: 900;
    content: "\f0e0";
    font-size: 16px;
}
.youzify-notification-btn::before {
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", sans-serif;
    font-weight: 900;
    content: "\f0f3";
    font-size: 16px;
}
/* Notification count badge (keep visible on bell) */
.youzify-notification-btn .youzify-button-count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    background: #7c3aed;
    color: #fff;
    box-sizing: border-box;
}
body.dark-mode .youzify-notification-btn .youzify-button-count {
    background: #a78bfa;
    color: #0f0f0f;
}

/* Friends requests: same count pill as notifications / messages */
.youzify-friends-btn {
    position: relative;
}
.youzify-friends-btn .youzify-button-count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    background: #7c3aed;
    color: #fff;
    box-sizing: border-box;
}
body.dark-mode .youzify-friends-btn .youzify-button-count {
    background: #a78bfa;
    color: #0f0f0f;
}

/* Messages quick button: same count pill as notifications */
.youzify-messages-btn {
    position: relative;
}
.youzify-messages-btn .youzify-button-count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border-radius: 9px;
    background: #7c3aed;
    color: #fff;
    box-sizing: border-box;
}
body.dark-mode .youzify-messages-btn .youzify-button-count {
    background: #a78bfa;
    color: #0f0f0f;
}

/* Olympus header: Map link + same Youzify notification control as profile quick bar */
/*
 * Header stacking: scroll-hide uses transform on .sticky-wrap, which creates a stacking context.
 * Without an explicit z-index, that context can paint below Youzify/wall layers (1k–10k+).
 * Keep below site modals/backdrops (99998+).
 */
.sticky-wrap {
    z-index: 25000 !important;
}
#header--standard {
    z-index: 25000 !important;
}
#header--standard .primary-menu,
#header--standard nav.primary-menu {
    position: relative;
    z-index: 2;
}
#desktop-header .primary-menu {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px 14px !important;
}
/* Header notification — bell only (no tile); profile quick bar keeps boxed .youzify-button-item */
.tp-header-notif-btn.youzify-notification-btn {
    position: relative;
    z-index: 3;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    min-width: 36px;
    min-height: 36px;
    padding: 6px;
    flex-shrink: 0;
    border: none !important;
    border-radius: 0;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    box-sizing: border-box;
    transition: color 0.15s, opacity 0.15s;
}
.tp-header-notif-btn.youzify-notification-btn::before {
    line-height: 1;
}
body:not(.dark-mode) .tp-header-notif-btn.youzify-notification-btn,
html[data-theme='light'] .tp-header-notif-btn.youzify-notification-btn {
    color: var(--ol-icon-color, #9a9fbf);
}
body:not(.dark-mode) .tp-header-notif-btn.youzify-notification-btn:hover,
html[data-theme='light'] .tp-header-notif-btn.youzify-notification-btn:hover {
    color: var(--heading-font-color, #515365);
    opacity: 1;
}
body.dark-mode .tp-header-notif-btn.youzify-notification-btn,
html[data-theme='dark'] .tp-header-notif-btn.youzify-notification-btn {
    color: var(--ol-icon-color, #949cb5);
}
body.dark-mode .tp-header-notif-btn.youzify-notification-btn:hover,
html[data-theme='dark'] .tp-header-notif-btn.youzify-notification-btn:hover {
    color: #e4e6eb;
}

/* ═══ Youzify profile navbar – mobile: quick bar + no overlap on tab strip ═══ */
/* 768px matches Youzify’s own mobile breakpoint (767px would miss 768-wide viewports) */
@media screen and (max-width: 768px) {
    /* Kill fixed/sticky/absolute bar that paints over the Activity|Friends strip below */
    #youzify-profile-navmenu,
    #youzify-profile-navmenu.youzify-navbar-block-icons {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 10 !important;
        transform: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }
    #youzify-profile-navmenu.tp-main-nav-open {
        z-index: 2000 !important;
    }
    /* Native UL hidden — JS builds hamburger dropdown + subnav strip separately.
       position: absolute + clip removes it from grid flow entirely. */
    #youzify-profile-navmenu ul.youzify-profile-navmenu,
    #youzify-profile-navmenu .youzify-nav-view-more-menu {
        display: none !important;
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }
    /* `nav#…` + grid beat Youzify’s .youzify-inner-content { display:block } */
    #youzify-profile-navmenu .youzify-inner-content,
    nav#youzify-profile-navmenu .youzify-inner-content {
        --tp-toolbar-gap: 6px;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: var(--tp-toolbar-gap) !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        padding: 8px 10px !important;
        margin: 0 !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 1 !important;
        float: none !important;
        overflow: visible !important;
        /* Flush inside nav box — no separate card */
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    body.dark-mode #youzify-profile-navmenu .youzify-inner-content {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    /* Wrapper + button: flex stack so icon centers like quick-action links */
    #youzify-profile-navmenu .youzify-inner-content > .youzify-open-nav {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        z-index: 2 !important;
        float: none !important;
        clear: none !important;
        transform: none !important;
        box-sizing: border-box !important;
    }
    /* Hamburger — square icon tile (matches .youzify-button-item) */
    #youzify-profile-navmenu .youzify-responsive-menu {
        position: relative !important;
        /* Cancel Youzify .youzify-responsive-menu top/left (meant for absolute); else relative box shifts */
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        z-index: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 8px !important;
        line-height: 1 !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        font: inherit !important;
        vertical-align: top !important;
        background: rgba(0, 0, 0, 0.06) !important;
        color: inherit !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        box-sizing: border-box !important;
        transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
    }
    #youzify-profile-navmenu .youzify-responsive-menu:hover,
    #youzify-profile-navmenu .youzify-responsive-menu:focus-visible {
        background: rgba(0, 0, 0, 0.12) !important;
        outline: none !important;
    }
    #youzify-profile-navmenu .youzify-responsive-menu:active {
        background: rgba(0, 0, 0, 0.15) !important;
    }
    #youzify-profile-navmenu .youzify-responsive-menu span {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
    /* Hamburger icon: pure CSS (no Font Awesome — FA often won’t render on ::before) */
    #youzify-profile-navmenu .youzify-responsive-menu::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 18px !important;
        height: 2px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 1px !important;
        background: currentColor !important;
        box-shadow: 0 -6px 0 0 currentColor, 0 6px 0 0 currentColor !important;
        font: 0/0 a !important;
        line-height: 0 !important;
        pointer-events: none !important;
    }
    body.dark-mode #youzify-profile-navmenu .youzify-responsive-menu {
        background: rgba(255, 255, 255, 0.08) !important;
    }
    body.dark-mode #youzify-profile-navmenu .youzify-responsive-menu:hover,
    body.dark-mode #youzify-profile-navmenu .youzify-responsive-menu:focus-visible {
        background: rgba(255, 255, 255, 0.15) !important;
    }
    body.dark-mode #youzify-profile-navmenu .youzify-responsive-menu:active {
        background: rgba(255, 255, 255, 0.18) !important;
    }
    /* Light mode: hamburger + quick icons — darker grey, visible on white */
    body:not(.dark-mode) #youzify-profile-navmenu .youzify-inner-content {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    body:not(.dark-mode) #youzify-profile-navmenu .youzify-responsive-menu {
        background: #d5d8d2 !important;
        border: 1px solid #b8bdb4 !important;
        color: #3f4257 !important;
    }
    body:not(.dark-mode) #youzify-profile-navmenu .youzify-responsive-menu:hover,
    body:not(.dark-mode) #youzify-profile-navmenu .youzify-responsive-menu:focus-visible {
        background: #c7cbc2 !important;
        border-color: #a3a99c !important;
        color: #3f4257 !important;
    }
    body:not(.dark-mode) #youzify-profile-navmenu .youzify-responsive-menu:active {
        background: #bcc1b6 !important;
    }
    body:not(.dark-mode) #youzify-profile-navmenu .youzify-button-item {
        background: #d5d8d2 !important;
        border: 1px solid #b8bdb4 !important;
        color: #3f4257 !important;
    }
    body:not(.dark-mode) #youzify-profile-navmenu .youzify-button-item:hover,
    body:not(.dark-mode) #youzify-profile-navmenu .youzify-button-item:focus-visible {
        background: #c7cbc2 !important;
        border-color: #a3a99c !important;
        color: #3f4257 !important;
    }

    /* Active quick-button (current page) — purple highlight */
    #youzify-profile-navmenu .youzify-button-item.tp-btn-active {
        background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
        border-color: transparent !important;
        color: #fff !important;
        box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35) !important;
    }
    body:not(.dark-mode) #youzify-profile-navmenu .youzify-button-item.tp-btn-active {
        background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
        border-color: transparent !important;
        color: #fff !important;
    }

    /* Main menu: JS mounts this inside .youzify-inner-content — align to pill left/right */
    #youzify-profile-navmenu .youzify-inner-content .tp-profile-main-nav-dropdown,
    #youzify-profile-navmenu .tp-profile-main-nav-dropdown {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        top: calc(100% + 6px) !important;
        margin-top: 0 !important;
        padding: 8px !important;
        max-height: min(65vh, 400px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        z-index: 100 !important;
        display: none !important;
        flex-direction: column !important;
        gap: 4px !important;
        background: #fff !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        border-radius: 12px !important;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
        box-sizing: border-box !important;
    }
    #youzify-profile-navmenu.tp-main-nav-open .tp-profile-main-nav-dropdown:not([hidden]) {
        display: flex !important;
    }
    #youzify-profile-navmenu .tp-profile-main-nav-link {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        border-radius: 10px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        color: inherit !important;
        background: rgba(0, 0, 0, 0.04) !important;
        border: 1px solid transparent !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    #youzify-profile-navmenu .tp-profile-main-nav-link:active {
        background: rgba(0, 0, 0, 0.08) !important;
    }
    #youzify-profile-navmenu .tp-profile-main-nav-link.tp-active {
        background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
        color: #fff !important;
    }
    #youzify-profile-navmenu .tp-profile-main-nav-link .count {
        margin-left: auto !important;
        font-size: 12px !important;
        padding: 2px 8px !important;
        border-radius: 999px !important;
        background: rgba(0, 0, 0, 0.08) !important;
    }
    #youzify-profile-navmenu .tp-profile-main-nav-link.tp-active .count {
        background: rgba(255, 255, 255, 0.25) !important;
        color: #fff !important;
    }
    #youzify-profile-navmenu .tp-profile-main-nav-link .tp-nav-link-trailing {
        margin-left: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        max-width: 58% !important;
    }
    #youzify-profile-navmenu .tp-profile-main-nav-link .tp-nav-link-trailing .count {
        margin-left: 0 !important;
        flex-shrink: 0 !important;
    }
    #youzify-profile-navmenu .tp-profile-main-nav-link .tp-nav-reviews-stars {
        display: inline-flex !important;
        align-items: center !important;
        gap: 1px !important;
        font-size: 10px !important;
        line-height: 1 !important;
        color: #ca8a04 !important;
    }
    #youzify-profile-navmenu .tp-profile-main-nav-link .tp-nav-reviews-stars .far {
        color: rgba(15, 23, 42, 0.22) !important;
    }
    #youzify-profile-navmenu .tp-profile-main-nav-link .tp-nav-reviews-avg {
        font-size: 12px !important;
        font-weight: 700 !important;
        color: inherit !important;
        flex-shrink: 0 !important;
    }
    #youzify-profile-navmenu .tp-profile-main-nav-link.tp-active .tp-nav-reviews-stars .far {
        color: rgba(255, 255, 255, 0.35) !important;
    }
    #youzify-profile-navmenu .tp-profile-main-nav-link.tp-active .tp-nav-reviews-avg {
        color: #fff !important;
    }
    body.dark-mode #youzify-profile-navmenu .tp-profile-main-nav-dropdown {
        background: #1e2228 !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5) !important;
    }
    body.dark-mode #youzify-profile-navmenu .tp-profile-main-nav-link {
        background: rgba(255, 255, 255, 0.06) !important;
    }
    body.dark-mode #youzify-profile-navmenu .tp-profile-main-nav-link:active {
        background: rgba(255, 255, 255, 0.1) !important;
    }
    body.dark-mode #youzify-profile-navmenu .tp-profile-main-nav-link .tp-nav-reviews-stars .far {
        color: rgba(255, 255, 255, 0.25) !important;
    }
    /* Badge is position:absolute — anchor to the link, not the nav (buttons sit outside .youzify-quick-buttons) */
    #youzify-profile-navmenu .youzify-notification-btn .youzify-button-count,
    #youzify-profile-navmenu .youzify-messages-btn .youzify-button-count,
    #youzify-profile-navmenu .youzify-friends-btn .youzify-button-count {
        position: absolute !important;
        top: -2px !important;
        right: -2px !important;
        left: auto !important;
        bottom: auto !important;
        z-index: 3 !important;
    }
    /* JS moves .youzify-button-item to be direct children of .youzify-inner-content;
       these selectors match both the original and relocated positions */
    #youzify-profile-navmenu .youzify-button-item {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        flex: 0 0 40px !important;
        border-radius: 8px !important;
        background: rgba(0, 0, 0, 0.06) !important;
        transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
        line-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    #youzify-profile-navmenu .youzify-button-item:hover,
    #youzify-profile-navmenu .youzify-button-item:focus-visible {
        background: rgba(0, 0, 0, 0.12) !important;
    }
    body.dark-mode #youzify-profile-navmenu .youzify-button-item {
        background: rgba(255, 255, 255, 0.08) !important;
    }
    body.dark-mode #youzify-profile-navmenu .youzify-button-item:hover,
    body.dark-mode #youzify-profile-navmenu .youzify-button-item:focus-visible {
        background: rgba(255, 255, 255, 0.15) !important;
    }
    body.dark-mode #youzify-profile-navmenu .youzify-button-item.tp-btn-active {
        background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
        border-color: transparent !important;
        color: #fff !important;
        box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35) !important;
    }
    #youzify-profile-navmenu .youzify-friends-btn::before,
    #youzify-profile-navmenu .youzify-messages-btn::before,
    #youzify-profile-navmenu .youzify-notification-btn::before {
        font-size: 15px !important;
    }

    nav#youzify-profile-navmenu .youzify-inner-content > .youzify-open-nav {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        float: none !important;
        clear: none !important;
    }

    /* Social buttons (Add Friend / Message) — even with hamburger in the toolbar row */
    #youzify-profile-navmenu #item-header.youzify-social-buttons {
        display: contents !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        float: none !important;
    }
    #youzify-profile-navmenu #item-header.youzify-social-buttons .generic-button,
    #youzify-profile-navmenu #item-header.youzify-social-buttons .friendship-button,
    #youzify-profile-navmenu #item-header.youzify-social-buttons .message-button {
        display: contents !important;
    }
    #youzify-profile-navmenu #item-header.youzify-social-buttons .generic-button a,
    #youzify-profile-navmenu #item-header.youzify-social-buttons .friendship-button a,
    #youzify-profile-navmenu #item-header.youzify-social-buttons .message-button a,
    #youzify-profile-navmenu #item-header.youzify-social-buttons a.youzify-send-message {
        flex: 1 1 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        min-height: 40px !important;
        padding: 0 14px !important;
        border-radius: 10px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }
}

/* Inline mobile nav strip */
@media screen and (max-width: 768px) {
    .youzify-mobile-nav-item.youzify-show-tab-menu {
        display: none !important;
    }
    /* BuddyPress #subnav mirrored here — hide duplicate block */
    #subnav.item-list-tabs.tp-subnav-mirrored-mobile {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
        border: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }

    /* ── youzify-inline-mobile-nav: sub-section pills (Friendships, Requests, …) ── */
    .youzify-mobile-nav.youzify-inline-mobile-nav.tp-subnav-strip-empty {
        display: none !important;
    }
    .youzify-mobile-nav.youzify-inline-mobile-nav {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 6px 10px 8px !important;
        margin: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        position: relative !important;
        z-index: 4 !important;
        isolation: isolate !important;
        background: transparent !important;
    }
    .youzify-mobile-nav.youzify-inline-mobile-nav::-webkit-scrollbar {
        display: none;
    }
    .youzify-mobile-nav.youzify-inline-mobile-nav .youzify-mobile-nav-item,
    .youzify-mobile-nav.youzify-inline-mobile-nav > .youzify-mobile-nav-item {
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
    }
    .youzify-mobile-nav.youzify-inline-mobile-nav .youzify-mobile-nav-container,
    .youzify-mobile-nav.youzify-inline-mobile-nav .youzify-mobile-nav-item .youzify-mobile-nav-container {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 6px 14px !important;
        margin: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        border-radius: 20px !important;
        background: transparent !important;
        border: 1px solid var(--ol-border-color, #e0e3eb) !important;
        font-size: 12.5px !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        color: var(--body-font-color, #6b7280) !important;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent;
        transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
        box-sizing: border-box !important;
    }
    .youzify-mobile-nav.youzify-inline-mobile-nav .youzify-mobile-nav-container:hover {
        border-color: rgba(124, 58, 237, 0.4) !important;
        color: #7c3aed !important;
        background: rgba(124, 58, 237, 0.06) !important;
    }
    .youzify-mobile-nav.youzify-inline-mobile-nav .youzify-mobile-nav-container:active {
        background: rgba(124, 58, 237, 0.1) !important;
    }
    .youzify-mobile-nav.youzify-inline-mobile-nav .youzify-mobile-nav-container i,
    .youzify-mobile-nav.youzify-inline-mobile-nav .youzify-mobile-nav-container a i {
        font-size: 12px !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        line-height: 1 !important;
        opacity: 0.8;
        background: none !important;
        background-color: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        color: inherit !important;
        display: inline !important;
        vertical-align: baseline !important;
    }
    .youzify-mobile-nav.youzify-inline-mobile-nav .youzify-mobile-nav-item.youzify-active-item .youzify-mobile-nav-container i,
    .youzify-mobile-nav.youzify-inline-mobile-nav .youzify-mobile-nav-item.current .youzify-mobile-nav-container i,
    .youzify-mobile-nav.youzify-inline-mobile-nav .youzify-mobile-nav-item.youzify-active-item .youzify-mobile-nav-container a i,
    .youzify-mobile-nav.youzify-inline-mobile-nav .youzify-mobile-nav-item.current .youzify-mobile-nav-container a i {
        color: #fff !important;
        opacity: 1;
    }
    .youzify-mobile-nav.youzify-inline-mobile-nav .youzify-mobile-nav-container a,
    .youzify-mobile-nav.youzify-inline-mobile-nav .youzify-mobile-nav-container > a {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        color: inherit !important;
        text-decoration: none !important;
        font-weight: 500 !important;
        font-size: 12.5px !important;
        line-height: 1.3 !important;
        background: none !important;
    }
    .youzify-mobile-nav.youzify-inline-mobile-nav .youzify-mobile-nav-container .count {
        font-size: 10px !important;
        padding: 1px 5px !important;
        margin: 0 !important;
        border-radius: 999px !important;
        background: rgba(0, 0, 0, 0.08) !important;
        line-height: 1.3 !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }
    .youzify-mobile-nav.youzify-inline-mobile-nav .youzify-mobile-nav-item.youzify-active-item .youzify-mobile-nav-container,
    .youzify-mobile-nav.youzify-inline-mobile-nav .youzify-mobile-nav-item.current .youzify-mobile-nav-container {
        background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
        color: #fff !important;
        border-color: transparent !important;
        box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25) !important;
    }
    .youzify-mobile-nav.youzify-inline-mobile-nav .youzify-mobile-nav-item.youzify-active-item .youzify-mobile-nav-container a,
    .youzify-mobile-nav.youzify-inline-mobile-nav .youzify-mobile-nav-item.current .youzify-mobile-nav-container a {
        color: #fff !important;
    }
    .youzify-mobile-nav.youzify-inline-mobile-nav .youzify-mobile-nav-item.youzify-active-item .youzify-mobile-nav-container .count,
    .youzify-mobile-nav.youzify-inline-mobile-nav .youzify-mobile-nav-item.current .youzify-mobile-nav-container .count {
        background: rgba(255, 255, 255, 0.25) !important;
        color: #fff !important;
    }
    body.dark-mode .youzify-mobile-nav.youzify-inline-mobile-nav .youzify-mobile-nav-container,
    html[data-theme='dark'] .youzify-mobile-nav.youzify-inline-mobile-nav .youzify-mobile-nav-container {
        background: transparent !important;
        border-color: var(--ol-border-color, #3f4354) !important;
        color: var(--ol-icon-color, #b4b9d0) !important;
    }
    body.dark-mode .youzify-mobile-nav.youzify-inline-mobile-nav .youzify-mobile-nav-container:hover,
    html[data-theme='dark'] .youzify-mobile-nav.youzify-inline-mobile-nav .youzify-mobile-nav-container:hover {
        border-color: rgba(167, 139, 250, 0.4) !important;
        color: #c4b5fd !important;
        background: rgba(167, 139, 250, 0.08) !important;
    }
    body.dark-mode .youzify-mobile-nav.youzify-inline-mobile-nav .youzify-mobile-nav-container:active,
    html[data-theme='dark'] .youzify-mobile-nav.youzify-inline-mobile-nav .youzify-mobile-nav-container:active {
        background: rgba(167, 139, 250, 0.14) !important;
    }
    body.dark-mode .youzify-mobile-nav.youzify-inline-mobile-nav .youzify-mobile-nav-container .count,
    html[data-theme='dark'] .youzify-mobile-nav.youzify-inline-mobile-nav .youzify-mobile-nav-container .count {
        background: rgba(255, 255, 255, 0.1) !important;
    }
    body.dark-mode .youzify-mobile-nav.youzify-inline-mobile-nav .youzify-mobile-nav-container i,
    html[data-theme='dark'] .youzify-mobile-nav.youzify-inline-mobile-nav .youzify-mobile-nav-container i,
    body.dark-mode .youzify-mobile-nav.youzify-inline-mobile-nav .youzify-mobile-nav-container a i,
    html[data-theme='dark'] .youzify-mobile-nav.youzify-inline-mobile-nav .youzify-mobile-nav-container a i {
        background: none !important;
        background-color: transparent !important;
        color: inherit !important;
    }

    /* JS expands strip with real links; hide the old “Menu” trigger */
    .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-show-tab-menu {
        display: none !important;
    }

    /* Hide directory “Menu” when using stacked Filters + search */
    .youzify-mobile-nav.tp-directory-tools-ready:not(.youzify-inline-mobile-nav) #directory-show-menu {
        display: none !important;
    }

    /* ── Members directory: Filters button + inline search; modal = filters only ── */
    .youzify-mobile-nav.tp-members-nav-stacked:not(.youzify-inline-mobile-nav) {
        flex-wrap: wrap !important;
        align-items: stretch !important;
    }
    .youzify-mobile-nav.tp-directory-tools-ready:not(.youzify-inline-mobile-nav) .youzify-mobile-nav-item {
        display: none !important;
    }
    /* Same .youzify-directory-filter node is moved into the modal by JS; hide its in-page slot so tabs/order only appear in Filters */
    #youzify-members-directory:has(.youzify-mobile-nav.tp-directory-tools-ready:not(.youzify-inline-mobile-nav)) > .youzify-directory-filter,
    #youzify-members-directory > .youzify-mobile-nav.tp-directory-tools-ready:not(.youzify-inline-mobile-nav) ~ .youzify-directory-filter {
        display: none !important;
    }
    .tp-members-directory-stack {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        flex: 1 1 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 0 12px;
        margin: 0 auto 10px;
    }
    .tp-members-directory-stack .tp-directory-tools-open {
        display: flex !important;
    }
    .tp-directory-tools-open {
        display: none;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100% !important;
        max-width: none;
        margin: 0;
        padding: 14px 18px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 14px;
        background: rgba(0, 0, 0, 0.04);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 2px 10px rgba(0, 0, 0, 0.06);
        font-family: inherit;
        font-size: 15px;
        font-weight: 600;
        color: var(--yzfy-text-color, #3f4257);
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.15s ease, border-color 0.15s ease;
        box-sizing: border-box;
    }
    .tp-directory-tools-open i {
        font-size: 18px;
        opacity: 0.9;
    }
    /* Light mode: Youzify --yzfy-text-color is often too faint on pale gray button */
    body:not(.dark-mode) .tp-directory-tools-open,
    body.light-mode .tp-directory-tools-open,
    html[data-theme='light'] .tp-directory-tools-open {
        color: #1a1e24 !important;
    }
    body:not(.dark-mode) .tp-directory-tools-open i,
    body.light-mode .tp-directory-tools-open i,
    html[data-theme='light'] .tp-directory-tools-open i {
        color: #1a1e24 !important;
        opacity: 1 !important;
    }
    body:not(.dark-mode) .tp-directory-tools-open span,
    body.light-mode .tp-directory-tools-open span,
    html[data-theme='light'] .tp-directory-tools-open span {
        color: inherit !important;
    }
    .tp-directory-tools-open:active {
        background: rgba(0, 0, 0, 0.08);
    }
    body.dark-mode .tp-directory-tools-open {
        color: #e8eaef !important;
        border-color: rgba(255, 255, 255, 0.14) !important;
        background: rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 4px 20px rgba(0, 0, 0, 0.25);
    }
    body.dark-mode .tp-directory-tools-open:active {
        background: rgba(255, 255, 255, 0.12) !important;
    }
    body.dark-mode .tp-directory-tools-open i {
        color: #e8eaef !important;
    }
    .tp-directory-tools-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 99998;
        background: rgba(0, 0, 0, 0.45);
        -webkit-tap-highlight-color: transparent;
    }
    .tp-directory-tools-backdrop.tp-directory-tools-visible {
        display: block;
    }

    .tp-directory-tools-modal {
        display: none;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 99999;
        width: calc(100% - 28px);
        max-width: 440px;
        max-height: min(88vh, 640px);
        flex-direction: column;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.06);
        box-sizing: border-box;
        overflow: hidden;
        -webkit-tap-highlight-color: transparent;
    }
    .tp-directory-tools-modal.tp-directory-tools-visible {
        display: flex;
    }
    body.dark-mode .tp-directory-tools-modal {
        background: #1e222b;
        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
    }
    .tp-md-head {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-shrink: 0;
        padding: 10px 10px 0 16px;
    }
    .tp-md-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 12px;
        background: rgba(0, 0, 0, 0.06);
        color: #3f4257;
        font-size: 18px;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        transition: background 0.15s ease;
    }
    .tp-md-close:active {
        background: rgba(0, 0, 0, 0.11);
    }
    body.dark-mode .tp-md-close {
        background: rgba(255, 255, 255, 0.1);
        color: #e8eaef;
    }
    body.dark-mode .tp-md-close:active {
        background: rgba(255, 255, 255, 0.16);
    }
    .tp-md-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding: 4px 18px 18px;
        -webkit-overflow-scrolling: touch;
    }
    .tp-md-section {
        margin-bottom: 20px;
    }
    .tp-md-section:last-child {
        margin-bottom: 0;
    }
    .tp-md-section-label {
        display: block;
        margin: 0 0 8px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: #6b7280;
    }
    body.dark-mode .tp-md-section-label {
        color: #9ca3af;
    }

    /* Inline search below Filters button */
    .tp-members-inline-search {
        position: relative;
        width: 100%;
        min-height: 0;
    }
    .tp-members-search-inner {
        position: relative;
    }
    /* Icon on label (input row only) — inner::before sat at 50% of input+submit, so it looked below the field */
    .tp-members-search-inner label {
        position: relative;
        display: block;
        flex: 1 1 100%;
        min-width: 0;
        margin: 0;
    }
    .tp-members-search-inner label::before {
        content: "\f002";
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
        font-weight: 900;
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;
        color: #9ca3af;
        pointer-events: none;
        z-index: 1;
    }
    body.dark-mode .tp-members-search-inner label::before {
        color: #9ca3af;
    }
    .tp-members-search-inner form {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 10px;
    }
    .tp-members-search-inner input[type="text"],
    .tp-members-search-inner input[type="search"] {
        flex: 1 1 100%;
        min-width: 0;
        margin: 0 !important;
        padding: 13px 14px 13px 42px !important;
        border: 1px solid rgba(0, 0, 0, 0.12) !important;
        border-radius: 12px !important;
        background: #f9fafb !important;
        font-size: 16px !important;
        line-height: 1.35 !important;
        color: #1a1d24 !important;
        box-sizing: border-box !important;
        -webkit-appearance: none;
        appearance: none;
    }
    body.dark-mode .tp-members-search-inner input[type="text"],
    body.dark-mode .tp-members-search-inner input[type="search"] {
        border-color: rgba(255, 255, 255, 0.14) !important;
        background: rgba(0, 0, 0, 0.25) !important;
        color: #f3f4f6 !important;
    }
    .tp-members-search-inner input::placeholder {
        color: #9ca3af;
    }
    .tp-members-search-inner button[type="submit"],
    .tp-members-search-inner input[type="submit"] {
        flex: 1 1 100%;
        min-width: 0;
        padding: 12px 16px !important;
        border: none !important;
        border-radius: 12px !important;
        background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
        color: #fff !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }
    .tp-members-search-inner button[type="submit"]:active,
    .tp-members-search-inner input[type="submit"]:active {
        opacity: 0.92;
    }

    /* Filters / order-by / checkboxes in modal */
    .tp-md-filter-host .standard-form label,
    .tp-md-filter-host label {
        display: block;
        margin: 12px 0 6px;
        font-size: 13px;
        font-weight: 600;
        color: #374151;
    }
    body.dark-mode .tp-md-filter-host .standard-form label,
    body.dark-mode .tp-md-filter-host label {
        color: #d1d5db;
    }
    .tp-md-filter-host select,
    .tp-md-filter-host .standard-form select {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 10px !important;
        padding: 12px 14px !important;
        border: 1px solid rgba(0, 0, 0, 0.12) !important;
        border-radius: 12px !important;
        background: #f9fafb !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        color: #1a1d24 !important;
        box-sizing: border-box !important;
        -webkit-appearance: none;
        appearance: none;
    }
    body.dark-mode .tp-md-filter-host select,
    body.dark-mode .tp-md-filter-host .standard-form select {
        border-color: rgba(255, 255, 255, 0.14) !important;
        background: rgba(0, 0, 0, 0.25) !important;
        color: #f3f4f6 !important;
    }
    .tp-md-filter-host input[type="checkbox"],
    .tp-md-filter-host input[type="radio"] {
        width: 18px;
        height: 18px;
        margin-right: 8px;
        vertical-align: middle;
    }
    .tp-md-filter-host li {
        list-style: none;
        margin: 0 0 8px;
        padding: 0;
    }
    .tp-md-filter-host ul {
        margin: 0;
        padding: 0;
    }

    /* Members modal: Youzify nice-select dropdown paints below the fold — show options inline */
    .tp-md-filter-host .nice-select {
        float: none !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 0 12px !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    .tp-md-filter-host .nice-select::after {
        display: none !important;
    }
    .tp-md-filter-host .nice-select .current {
        display: none !important;
    }
    .tp-md-filter-host .nice-select .list {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        max-height: none !important;
        overflow: visible !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        z-index: auto !important;
    }
    .tp-md-filter-host .nice-select .option {
        display: block !important;
        padding: 14px 16px !important;
        margin: 0 0 8px !important;
        line-height: 1.35 !important;
        border-radius: 12px !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        background: rgba(0, 0, 0, 0.04) !important;
        color: #1a1d24 !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        transition: background 0.15s ease, border-color 0.15s ease !important;
    }
    .tp-md-filter-host .nice-select .option:last-child {
        margin-bottom: 0 !important;
    }
    /* Inline list: hover/focus must not match .selected or several rows look “picked” */
    .tp-md-filter-host .nice-select .option:hover:not(.selected),
    .tp-md-filter-host .nice-select .option.focus:not(.selected) {
        background: rgba(0, 0, 0, 0.07) !important;
        border-color: rgba(0, 0, 0, 0.14) !important;
        color: #1a1d24 !important;
    }
    .tp-md-filter-host .nice-select .option.selected {
        background: rgba(124, 58, 237, 0.12) !important;
        border-color: rgba(124, 58, 237, 0.35) !important;
        color: #5b21b6 !important;
        font-weight: 700 !important;
    }
    .tp-md-filter-host .nice-select .option.selected:hover,
    .tp-md-filter-host .nice-select .option.selected.focus {
        background: rgba(124, 58, 237, 0.16) !important;
        border-color: rgba(124, 58, 237, 0.45) !important;
    }
    body.dark-mode .tp-md-filter-host .nice-select .option {
        border-color: rgba(255, 255, 255, 0.12) !important;
        background: rgba(255, 255, 255, 0.06) !important;
        color: #f3f4f6 !important;
    }
    body.dark-mode .tp-md-filter-host .nice-select .option:hover:not(.selected),
    body.dark-mode .tp-md-filter-host .nice-select .option.focus:not(.selected) {
        background: rgba(255, 255, 255, 0.1) !important;
        border-color: rgba(255, 255, 255, 0.18) !important;
        color: #f3f4f6 !important;
    }
    body.dark-mode .tp-md-filter-host .nice-select .option.selected {
        background: rgba(167, 139, 250, 0.18) !important;
        border-color: rgba(167, 139, 250, 0.45) !important;
        color: #fff !important;
        font-weight: 700 !important;
    }
    body.dark-mode .tp-md-filter-host .nice-select .option.selected:hover,
    body.dark-mode .tp-md-filter-host .nice-select .option.selected.focus {
        background: rgba(167, 139, 250, 0.24) !important;
        border-color: rgba(167, 139, 250, 0.55) !important;
    }
}

/* ═══ Desktop profile navmenu — full reset + modern bar ═══ */
/* 769px avoids overlap with max-width:768px mobile toolbar rules */
@media screen and (min-width: 769px) {
    /* Mobile-only elements: hide on desktop (do NOT hide .youzify-nav-view-more-menu — that is the "More" flyout) */
    #youzify-profile-navmenu .tp-profile-main-nav-dropdown,
    #youzify-profile-navmenu .youzify-open-nav {
        display: none !important;
    }

    /* ── Full reset: kill all Youzify positioning / overflow / dimensions ── */
    nav#youzify-profile-navmenu,
    #youzify-profile-navmenu,
    #youzify-profile-navmenu.youzify-boxed-navbar,
    #youzify-profile-navmenu.youzify-navbar-block-icons,
    #youzify-profile-navmenu.youzify-boxed-navbar.youzify-navbar-block-icons {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        transform: none !important;
        box-sizing: border-box !important;
        /* Breathing room below overlapping profile photo (desktop only; mobile keeps flush toolbar) */
        margin-top: 32px !important;
    }
    #youzify-profile-navmenu::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* ── Inner content: flex row — nav tabs left, action buttons right ── */
    nav#youzify-profile-navmenu .youzify-inner-content,
    #youzify-profile-navmenu .youzify-inner-content {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        float: none !important;
        position: relative !important;
        top: auto !important;
        box-sizing: border-box !important;
    }
    #youzify-profile-navmenu .youzify-inner-content::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* ── Nav tab list: horizontal, fill available space ── */
    nav#youzify-profile-navmenu ul.youzify-profile-navmenu,
    #youzify-profile-navmenu ul.youzify-profile-navmenu,
    .youzify-navbar-block-icons ul.youzify-profile-navmenu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        float: none !important;
        border: none !important;
    }

    /* ── Each nav tab ── */
    nav#youzify-profile-navmenu .youzify-navbar-item,
    #youzify-profile-navmenu .youzify-navbar-item,
    .youzify-navbar-block-icons .youzify-navbar-item {
        display: flex !important;
        align-items: stretch !important;
        flex: 0 0 auto !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        border: none !important;
        background: transparent !important;
    }
    nav#youzify-profile-navmenu .youzify-navbar-item a,
    #youzify-profile-navmenu .youzify-navbar-item a,
    .youzify-navbar-block-icons .youzify-navbar-item a {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 7px !important;
        white-space: nowrap !important;
        padding: 14px 18px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        text-decoration: none !important;
        transition: color 0.2s, background 0.2s !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
        width: auto !important;
        height: auto !important;
        float: none !important;
        text-align: left !important;
    }
    nav#youzify-profile-navmenu .youzify-navbar-item a i,
    .youzify-navbar-block-icons .youzify-navbar-item a i {
        display: inline !important;
        font-size: 15px !important;
        line-height: 1 !important;
        margin: 0 !important;
        width: auto !important;
        height: auto !important;
        float: none !important;
    }
    #youzify-profile-navmenu .youzify-navbar-item a .count {
        font-size: 11px !important;
        font-weight: 700 !important;
        padding: 1px 7px !important;
        border-radius: 999px !important;
        background: rgba(0, 0, 0, 0.08) !important;
        line-height: 1.4 !important;
    }
    /* Active nav tab: purple highlight so you know which section you're on */
    #youzify-profile-navmenu .youzify-navbar-item.youzify-active-menu a {
        background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
        color: #fff !important;
        border-radius: 8px !important;
        border-bottom-color: transparent !important;
    }
    #youzify-profile-navmenu .youzify-navbar-item.youzify-active-menu a i {
        color: #fff !important;
    }
    #youzify-profile-navmenu .youzify-navbar-item.youzify-active-menu a .count {
        background: rgba(255, 255, 255, 0.25) !important;
        color: #fff !important;
    }

    /* "More" flyout — was hidden with display:none !important; restore positioning + hover/click visibility */
    #youzify-profile-navmenu .youzify-navbar-item.youzify-navbar-view-more {
        position: relative !important;
        overflow: visible !important;
    }
    #youzify-profile-navmenu .youzify-nav-view-more-menu {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: auto !important;
        min-width: 210px !important;
        margin: 0 !important;
        padding: 6px 0 !important;
        list-style: none !important;
        z-index: 1200 !important;
        background: var(--ol-card-bg-color, #fff) !important;
        border: 1px solid var(--ol-border-color, #e6ecf5) !important;
        border-radius: 8px !important;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12) !important;
    }
    #youzify-profile-navmenu .youzify-nav-view-more-menu > li {
        display: block !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #youzify-profile-navmenu .youzify-nav-view-more-menu > li > a {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 10px 16px !important;
        white-space: nowrap !important;
        border-radius: 0 !important;
    }
    #youzify-profile-navmenu .youzify-navbar-view-more.tp-more-open .youzify-nav-view-more-menu {
        display: block !important;
    }

    /* ── Social buttons: right side of nav ── */
    #youzify-profile-navmenu #item-header.youzify-social-buttons {
        flex: 0 0 auto !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        width: auto !important;
        height: auto !important;
        float: none !important;
        clear: none !important;
    }
    #youzify-profile-navmenu #item-header.youzify-social-buttons .generic-button,
    #youzify-profile-navmenu #item-header.youzify-social-buttons .friendship-button,
    #youzify-profile-navmenu #item-header.youzify-social-buttons .message-button {
        display: contents !important;
    }
    #youzify-profile-navmenu #item-header.youzify-social-buttons .generic-button a,
    #youzify-profile-navmenu #item-header.youzify-social-buttons .friendship-button a,
    #youzify-profile-navmenu #item-header.youzify-social-buttons .message-button a,
    #youzify-profile-navmenu #item-header.youzify-social-buttons a.youzify-send-message {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        min-height: 34px !important;
        padding: 0 16px !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
        border: 1px solid transparent !important;
        transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s !important;
    }
}

/* Friends tab subnav: modern pill buttons (Friendships, Requests) */
#subnav.item-list-tabs {
    margin: 0 0 1.25rem;
    padding: 0;
    border: none;
    background: transparent;
}
#subnav.item-list-tabs ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
}
#subnav.item-list-tabs ul li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
}
/* Members directory (desktop): card + pills aligned with mobile Filters modal */
@media screen and (min-width: 769px) {
    body.directory.members #buddypress .youzify-directory-filter {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 16px 18px;
        margin-bottom: 16px;
        border-radius: 14px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        background: rgba(0, 0, 0, 0.03);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 2px 10px rgba(0, 0, 0, 0.04);
        box-sizing: border-box;
    }
    body.dark-mode.directory.members #buddypress .youzify-directory-filter,
    html[data-theme='dark'] body.directory.members #buddypress .youzify-directory-filter {
        border-color: rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.06);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 4px 20px rgba(0, 0, 0, 0.2);
    }

    body.directory.members #buddypress .youzify-directory-filter > div.item-list-tabs:not(#subnav) {
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
    }
    body.directory.members #buddypress .youzify-directory-filter > div.item-list-tabs:not(#subnav) ul {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        list-style: none;
        margin: 0;
        padding: 0;
        border: none;
    }
    body.directory.members #buddypress .youzify-directory-filter > div.item-list-tabs:not(#subnav) ul li {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        align-items: center;
    }
    body.directory.members #buddypress .youzify-directory-filter > div.item-list-tabs:not(#subnav) ul li a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 12.5px;
        font-weight: 500;
        line-height: 1.3;
        text-decoration: none;
        background: transparent;
        color: var(--body-font-color, #6b7280);
        border: 1px solid var(--ol-border-color, #e0e3eb);
        transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
        white-space: nowrap;
    }
    body.directory.members #buddypress .youzify-directory-filter > div.item-list-tabs:not(#subnav) ul li a:hover {
        border-color: rgba(124, 58, 237, 0.4);
        color: #7c3aed;
        background: rgba(124, 58, 237, 0.06);
    }
    body.directory.members #buddypress .youzify-directory-filter > div.item-list-tabs:not(#subnav) ul li.selected a,
    body.directory.members #buddypress .youzify-directory-filter > div.item-list-tabs:not(#subnav) ul li.current a {
        background: linear-gradient(135deg, #7c3aed, #a78bfa);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
    }
    body.directory.members #buddypress .youzify-directory-filter > div.item-list-tabs:not(#subnav) ul li.selected a:hover,
    body.directory.members #buddypress .youzify-directory-filter > div.item-list-tabs:not(#subnav) ul li.current a:hover {
        background: linear-gradient(135deg, #6d28d9, #8b5cf6);
        color: #fff;
    }
    body.dark-mode.directory.members #buddypress .youzify-directory-filter > div.item-list-tabs:not(#subnav) ul li a,
    html[data-theme='dark'] body.directory.members #buddypress .youzify-directory-filter > div.item-list-tabs:not(#subnav) ul li a {
        background: transparent;
        border-color: var(--ol-border-color, #3f4354);
        color: var(--ol-icon-color, #b4b9d0);
    }
    body.dark-mode.directory.members #buddypress .youzify-directory-filter > div.item-list-tabs:not(#subnav) ul li a:hover,
    html[data-theme='dark'] body.directory.members #buddypress .youzify-directory-filter > div.item-list-tabs:not(#subnav) ul li a:hover {
        border-color: rgba(167, 139, 250, 0.45);
        color: #e9d5ff;
        background: rgba(124, 58, 237, 0.12);
    }
    body.dark-mode.directory.members #buddypress .youzify-directory-filter > div.item-list-tabs:not(#subnav) ul li.selected a,
    body.dark-mode.directory.members #buddypress .youzify-directory-filter > div.item-list-tabs:not(#subnav) ul li.current a,
    html[data-theme='dark'] body.directory.members #buddypress .youzify-directory-filter > div.item-list-tabs:not(#subnav) ul li.selected a,
    html[data-theme='dark'] body.directory.members #buddypress .youzify-directory-filter > div.item-list-tabs:not(#subnav) ul li.current a {
        background: linear-gradient(135deg, #7c3aed, #a78bfa);
        color: #fff;
        border-color: transparent;
    }

    .olympus-theme.directory.members #buddypress .youzify-directory-filter ul li a span,
    body.directory.members #buddypress .youzify-directory-filter ul li a span {
        display: inline !important;
        font-size: 10px;
        font-weight: 700;
        padding: 1px 5px;
        margin: 0 0 0 4px;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.08);
        line-height: 1.3;
    }
    body.directory.members #buddypress .youzify-directory-filter > div.item-list-tabs:not(#subnav) ul li.selected a span,
    body.directory.members #buddypress .youzify-directory-filter > div.item-list-tabs:not(#subnav) ul li.current a span {
        background: rgba(255, 255, 255, 0.25);
        color: #fff;
    }
    body.dark-mode.directory.members #buddypress .youzify-directory-filter ul li a span,
    html[data-theme='dark'] body.directory.members #buddypress .youzify-directory-filter ul li a span {
        background: rgba(255, 255, 255, 0.1);
    }

    body.directory.members #buddypress .youzify-directory-filter #subnav.item-list-tabs {
        margin: 0 !important;
    }
    body.directory.members #buddypress .youzify-directory-filter #subnav.item-list-tabs ul li#members-order-select {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 10px;
        margin-left: 0 !important;
    }
    body.directory.members #buddypress .youzify-directory-filter #subnav.item-list-tabs ul li#members-order-select label {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }
    body.directory.members #buddypress .youzify-directory-filter #subnav.item-list-tabs ul li#members-order-select .nice-select {
        align-self: center !important;
        margin: 0 !important;
        min-width: 160px;
        border-radius: 12px !important;
        border: 1px solid rgba(0, 0, 0, 0.12) !important;
        padding: 8px 12px !important;
        height: auto !important;
        line-height: 1.35 !important;
        background: #f9fafb !important;
    }
    body.dark-mode.directory.members #buddypress .youzify-directory-filter #subnav.item-list-tabs ul li#members-order-select .nice-select,
    html[data-theme='dark'] body.directory.members #buddypress .youzify-directory-filter #subnav.item-list-tabs ul li#members-order-select .nice-select {
        border-color: rgba(255, 255, 255, 0.14) !important;
        background: rgba(0, 0, 0, 0.25) !important;
        color: #f3f4f6 !important;
    }
    body.directory.members #buddypress .youzify-directory-filter #subnav.item-list-tabs ul li#youzify-directory-search-box {
        flex: 1 1 220px;
        min-width: 0;
        margin-left: auto;
        display: flex;
        align-items: center;
    }
}

/* Activity subnav: hide Mentions (mobile strip already skips this href in JS) */
#subnav.item-list-tabs ul li[id*="activity-mentions"] {
    display: none !important;
}

/* Sort / filter (e.g. “Order By” on profile → Friends) — same row, right-aligned; NOT on public members directory */
body:not(.directory) #subnav.item-list-tabs ul li#members-order-select,
body:not(.directory) #subnav.item-list-tabs ul li.last.filter {
    margin-left: auto !important;
    flex-wrap: wrap;
    gap: 8px 12px;
}
body:not(.directory) #subnav.item-list-tabs ul li#members-order-select label,
body:not(.directory) #subnav.item-list-tabs ul li.last.filter label {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    align-self: center !important;
}
body:not(.directory) #subnav.item-list-tabs ul li#members-order-select .nice-select,
body:not(.directory) #subnav.item-list-tabs ul li.last.filter .nice-select {
    align-self: center !important;
    margin: 0 !important;
}
#subnav.item-list-tabs ul li a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    background: transparent;
    color: inherit;
    border: 1px solid var(--ol-border-color, #e0e3eb);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;
}
#subnav.item-list-tabs ul li a:hover {
    border-color: rgba(124, 58, 237, 0.4);
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.06);
}
#subnav.item-list-tabs ul li a i {
    font-size: 12px;
    opacity: 0.85;
    flex-shrink: 0;
    line-height: 1;
    width: auto !important;
    height: auto !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline !important;
    vertical-align: baseline !important;
}
#subnav.item-list-tabs ul li.selected a i,
#subnav.item-list-tabs ul li.current a i {
    color: #fff !important;
    opacity: 1;
}
/* Friends subnav — now uses same outline-pill style as Activity/Media (old colored fills removed) */

/* All subnav pills — unified outline style (old per-link colored fills removed) */
#subnav.item-list-tabs ul li.selected a,
#subnav.item-list-tabs ul li.current a {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
    border-color: transparent;
}
#subnav.item-list-tabs ul li.selected a:hover,
#subnav.item-list-tabs ul li.current a:hover {
    background: linear-gradient(135deg, #6d28d9, #8b5cf6);
    color: #fff;
}
/* Activity category tabs: stronger selected state (plugin/theme overrides) */
#subnav.item-list-tabs ul li[id^="activity-"].selected a,
#subnav.item-list-tabs ul li[id^="activity-"].current a,
#subnav.item-list-tabs ul li[id^="activity-"] > a.current {
    background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
    color: #fff !important;
    border-color: transparent !important;
}
#subnav.item-list-tabs ul li[id^="activity-"].selected a:hover,
#subnav.item-list-tabs ul li[id^="activity-"].current a:hover,
#subnav.item-list-tabs ul li[id^="activity-"] > a.current:hover {
    background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
    color: #fff !important;
}
body.dark-mode #subnav.item-list-tabs ul li a {
    background: transparent;
    border-color: var(--ol-border-color, #3f4354);
    color: var(--ol-icon-color, #b4b9d0);
}
body.dark-mode #subnav.item-list-tabs ul li a:hover {
    border-color: rgba(167, 139, 250, 0.45);
    color: #e9d5ff;
    background: rgba(124, 58, 237, 0.12);
}
body.dark-mode #subnav.item-list-tabs ul li.selected a,
body.dark-mode #subnav.item-list-tabs ul li.current a {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
    border-color: transparent;
}
body.dark-mode #subnav.item-list-tabs ul li[id^="activity-"].selected a,
body.dark-mode #subnav.item-list-tabs ul li[id^="activity-"].current a,
body.dark-mode #subnav.item-list-tabs ul li[id^="activity-"] > a.current,
html[data-theme='dark'] #subnav.item-list-tabs ul li[id^="activity-"].selected a,
html[data-theme='dark'] #subnav.item-list-tabs ul li[id^="activity-"].current a,
html[data-theme='dark'] #subnav.item-list-tabs ul li[id^="activity-"] > a.current {
    background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* Desktop: Activity subnav (Personal / Locations / …) — same metrics as .youzify-inline-mobile-nav pills; scope beyond body.bp-user for Youzify */
@media screen and (min-width: 769px) {
    body.bp-user #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select),
    #buddypress #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select),
    #youzify-bp #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select) {
        align-items: center;
    }
    body.bp-user #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select) a,
    #buddypress #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select) a,
    #youzify-bp #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select) a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 12.5px;
        font-weight: 500;
        line-height: 1.3;
        min-height: 0;
        height: auto;
        overflow: visible;
        align-self: center;
        background: transparent;
        color: var(--body-font-color, #6b7280);
        border: 1px solid var(--ol-border-color, #e0e3eb);
        box-shadow: none;
        text-decoration: none;
        box-sizing: border-box;
        transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
    }
    body.bp-user #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select) a:hover,
    #buddypress #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select) a:hover,
    #youzify-bp #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select) a:hover {
        border-color: rgba(124, 58, 237, 0.4);
        color: #7c3aed;
        background: rgba(124, 58, 237, 0.06);
    }
    body.bp-user #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select) a i,
    #buddypress #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select) a i,
    #youzify-bp #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select) a i {
        font-size: 12px;
        line-height: 1;
        opacity: 0.8;
        color: inherit;
        background: none !important;
        background-color: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: inline !important;
        vertical-align: baseline !important;
        flex-shrink: 0;
    }
    body.bp-user #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select).selected a,
    body.bp-user #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select).current a,
    #buddypress #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select).selected a,
    #buddypress #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select).current a,
    #youzify-bp #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select).selected a,
    #youzify-bp #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select).current a {
        background: linear-gradient(135deg, #7c3aed, #a78bfa);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
    }
    body.bp-user #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select).selected a:hover,
    body.bp-user #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select).current a:hover,
    #buddypress #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select).selected a:hover,
    #buddypress #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select).current a:hover,
    #youzify-bp #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select).selected a:hover,
    #youzify-bp #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select).current a:hover {
        background: linear-gradient(135deg, #6d28d9, #8b5cf6);
        color: #fff;
    }
    body.bp-user #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select).selected a i,
    body.bp-user #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select).current a i,
    #buddypress #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select).selected a i,
    #buddypress #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select).current a i,
    #youzify-bp #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select).selected a i,
    #youzify-bp #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select).current a i {
        color: #fff !important;
        opacity: 1;
    }
    body.dark-mode.bp-user #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select) a,
    html[data-theme='dark'] body.bp-user #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select) a,
    body.dark-mode #buddypress #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select) a,
    html[data-theme='dark'] #buddypress #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select) a,
    body.dark-mode #youzify-bp #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select) a,
    html[data-theme='dark'] #youzify-bp #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select) a {
        background: transparent;
        border-color: var(--ol-border-color, #3f4354);
        color: var(--ol-icon-color, #b4b9d0);
        box-shadow: none;
    }
    body.dark-mode.bp-user #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select) a:hover,
    html[data-theme='dark'] body.bp-user #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select) a:hover,
    body.dark-mode #buddypress #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select) a:hover,
    html[data-theme='dark'] #buddypress #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select) a:hover,
    body.dark-mode #youzify-bp #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select) a:hover,
    html[data-theme='dark'] #youzify-bp #subnav.item-list-tabs ul li[id^="activity-"]:not(#activity-filter-select) a:hover {
        border-color: rgba(167, 139, 250, 0.5);
        color: #f5f3ff;
        background: rgba(124, 58, 237, 0.12);
    }

    /* Desktop: Media subnav (All / Photos / Videos / …) — same pills as Activity */
    body.bp-user #subnav.item-list-tabs ul li[id^="media-"] {
        align-items: center;
    }
    body.bp-user #subnav.item-list-tabs ul li[id^="media-"] a {
        border-radius: 20px;
        padding: 6px 14px;
        gap: 6px;
        font-size: 12.5px;
        font-weight: 500;
        line-height: 1.3;
        min-height: 0;
        height: auto;
        overflow: visible;
        align-items: center;
        align-self: center;
        background: transparent;
        border: 1px solid var(--ol-border-color, #e0e3eb);
    }
    body.bp-user #subnav.item-list-tabs ul li[id^="media-"] a:hover {
        border-color: rgba(124, 58, 237, 0.4);
        color: #7c3aed;
        background: rgba(124, 58, 237, 0.06);
    }
    body.bp-user #subnav.item-list-tabs ul li[id^="media-"] a i {
        font-size: 12px;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        line-height: 1 !important;
        opacity: 0.85;
        background: none !important;
        background-color: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: inline !important;
        vertical-align: baseline !important;
        flex-shrink: 0;
    }
    body.bp-user #subnav.item-list-tabs ul li[id^="media-"].selected a,
    body.bp-user #subnav.item-list-tabs ul li[id^="media-"].current a {
        background: linear-gradient(135deg, #7c3aed, #a78bfa);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
    }
    body.bp-user #subnav.item-list-tabs ul li[id^="media-"].selected a:hover,
    body.bp-user #subnav.item-list-tabs ul li[id^="media-"].current a:hover {
        background: linear-gradient(135deg, #6d28d9, #8b5cf6);
        color: #fff;
    }
    body.bp-user #subnav.item-list-tabs ul li[id^="media-"].selected a i,
    body.bp-user #subnav.item-list-tabs ul li[id^="media-"].current a i {
        color: #fff !important;
        opacity: 1;
    }
    body.dark-mode.bp-user #subnav.item-list-tabs ul li[id^="media-"] a,
    html[data-theme='dark'] body.bp-user #subnav.item-list-tabs ul li[id^="media-"] a {
        background: transparent;
        border-color: var(--ol-border-color, #3f4354);
        color: var(--ol-icon-color, #b4b9d0);
    }
    body.dark-mode.bp-user #subnav.item-list-tabs ul li[id^="media-"] a:hover,
    html[data-theme='dark'] body.bp-user #subnav.item-list-tabs ul li[id^="media-"] a:hover {
        border-color: rgba(167, 139, 250, 0.45);
        color: #e9d5ff;
        background: rgba(124, 58, 237, 0.12);
    }
    body.dark-mode.bp-user #subnav.item-list-tabs ul li[id^="media-"].selected a,
    body.dark-mode.bp-user #subnav.item-list-tabs ul li[id^="media-"].current a,
    html[data-theme='dark'] body.bp-user #subnav.item-list-tabs ul li[id^="media-"].selected a,
    html[data-theme='dark'] body.bp-user #subnav.item-list-tabs ul li[id^="media-"].current a {
        background: linear-gradient(135deg, #7c3aed, #a78bfa);
        color: #fff;
        border-color: transparent;
    }
    body.dark-mode.bp-user #subnav.item-list-tabs ul li[id^="media-"].selected a:hover,
    body.dark-mode.bp-user #subnav.item-list-tabs ul li[id^="media-"].current a:hover,
    html[data-theme='dark'] body.bp-user #subnav.item-list-tabs ul li[id^="media-"].selected a:hover,
    html[data-theme='dark'] body.bp-user #subnav.item-list-tabs ul li[id^="media-"].current a:hover {
        background: linear-gradient(135deg, #6d28d9, #8b5cf6);
        color: #fff;
    }
    body.dark-mode.bp-user #subnav.item-list-tabs ul li[id^="media-"].selected a i,
    body.dark-mode.bp-user #subnav.item-list-tabs ul li[id^="media-"].current a i,
    html[data-theme='dark'] body.bp-user #subnav.item-list-tabs ul li[id^="media-"].selected a i,
    html[data-theme='dark'] body.bp-user #subnav.item-list-tabs ul li[id^="media-"].current a i {
        color: #fff !important;
        opacity: 1;
    }

    /* Desktop: Friends subnav (Friendships / Requests) — same outline pills as Activity + Media */
    body.bp-user #subnav.item-list-tabs ul li[id^="friends-"] {
        align-items: center;
    }
    body.bp-user #subnav.item-list-tabs ul li[id^="friends-"] a {
        border-radius: 20px !important;
        padding: 6px 14px !important;
        gap: 6px;
        font-size: 12.5px;
        font-weight: 500;
        line-height: 1.3;
        min-height: 0;
        height: auto;
        overflow: visible;
        align-items: center;
        align-self: center;
        background: transparent !important;
        border: 1px solid var(--ol-border-color, #e0e3eb) !important;
    }
    body.bp-user #subnav.item-list-tabs ul li[id^="friends-"] a:hover {
        border-color: rgba(124, 58, 237, 0.4) !important;
        color: #7c3aed !important;
        background: rgba(124, 58, 237, 0.06) !important;
    }
    body.bp-user #subnav.item-list-tabs ul li[id^="friends-"] a i {
        font-size: 12px;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        max-height: none !important;
        line-height: 1 !important;
        opacity: 0.85;
        background: none !important;
        background-color: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: inline !important;
        vertical-align: baseline !important;
        flex-shrink: 0;
    }
    body.bp-user #subnav.item-list-tabs ul li[id^="friends-"].selected a,
    body.bp-user #subnav.item-list-tabs ul li[id^="friends-"].current a {
        background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
        color: #fff !important;
        border-color: transparent !important;
        box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
    }
    body.bp-user #subnav.item-list-tabs ul li[id^="friends-"].selected a:hover,
    body.bp-user #subnav.item-list-tabs ul li[id^="friends-"].current a:hover {
        background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
        color: #fff !important;
    }
    body.bp-user #subnav.item-list-tabs ul li[id^="friends-"].selected a i,
    body.bp-user #subnav.item-list-tabs ul li[id^="friends-"].current a i {
        color: #fff !important;
        opacity: 1;
    }
    body.dark-mode.bp-user #subnav.item-list-tabs ul li[id^="friends-"] a,
    html[data-theme='dark'] body.bp-user #subnav.item-list-tabs ul li[id^="friends-"] a {
        background: transparent !important;
        border-color: var(--ol-border-color, #3f4354) !important;
        color: var(--ol-icon-color, #b4b9d0) !important;
    }
    body.dark-mode.bp-user #subnav.item-list-tabs ul li[id^="friends-"] a:hover,
    html[data-theme='dark'] body.bp-user #subnav.item-list-tabs ul li[id^="friends-"] a:hover {
        border-color: rgba(167, 139, 250, 0.45) !important;
        color: #e9d5ff !important;
        background: rgba(124, 58, 237, 0.12) !important;
    }
    body.dark-mode.bp-user #subnav.item-list-tabs ul li[id^="friends-"].selected a,
    body.dark-mode.bp-user #subnav.item-list-tabs ul li[id^="friends-"].current a,
    html[data-theme='dark'] body.bp-user #subnav.item-list-tabs ul li[id^="friends-"].selected a,
    html[data-theme='dark'] body.bp-user #subnav.item-list-tabs ul li[id^="friends-"].current a {
        background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
        color: #fff !important;
        border-color: transparent !important;
    }
    body.dark-mode.bp-user #subnav.item-list-tabs ul li[id^="friends-"].selected a:hover,
    body.dark-mode.bp-user #subnav.item-list-tabs ul li[id^="friends-"].current a:hover,
    html[data-theme='dark'] body.bp-user #subnav.item-list-tabs ul li[id^="friends-"].selected a:hover,
    html[data-theme='dark'] body.bp-user #subnav.item-list-tabs ul li[id^="friends-"].current a:hover {
        background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
        color: #fff !important;
    }
    body.dark-mode.bp-user #subnav.item-list-tabs ul li[id^="friends-"].selected a i,
    body.dark-mode.bp-user #subnav.item-list-tabs ul li[id^="friends-"].current a i,
    html[data-theme='dark'] body.bp-user #subnav.item-list-tabs ul li[id^="friends-"].selected a i,
    html[data-theme='dark'] body.bp-user #subnav.item-list-tabs ul li[id^="friends-"].current a i {
        color: #fff !important;
        opacity: 1;
    }
}

/* Desktop: expanded inline activity sub-tabs (Personal, Locations, …) — readable pills (mobile rules are max-width:768 only) */
@media (min-width: 769px) {
    .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 10px 0 14px !important;
        margin: 0 !important;
        background: transparent !important;
    }
    .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-show-tab-menu {
        display: none !important;
    }
    .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-item {
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-container {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 10px 18px !important;
        border-radius: 999px !important;
        background: #f3f4f6 !important;
        border: 1px solid #d1d5db !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        color: #1f2937 !important;
        text-decoration: none !important;
        transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
        box-sizing: border-box !important;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    }
    .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-container:hover {
        border-color: rgba(124, 58, 237, 0.45) !important;
        color: #5b21b6 !important;
        background: #f5f3ff !important;
        box-shadow: 0 2px 8px rgba(124, 58, 237, 0.12);
    }
    .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-container i,
    .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-container a i {
        font-size: 15px !important;
        opacity: 1 !important;
        color: #4b5563 !important;
        background: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-container:hover i,
    .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-container:hover a i {
        color: #6d28d9 !important;
    }
    .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-container a {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        color: inherit !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        text-decoration: none !important;
        background: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-item.youzify-active-item .youzify-mobile-nav-container,
    .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-item.current .youzify-mobile-nav-container {
        background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
        color: #fff !important;
        border-color: transparent !important;
        box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35) !important;
    }
    .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-item.youzify-active-item .youzify-mobile-nav-container a,
    .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-item.current .youzify-mobile-nav-container a {
        color: #fff !important;
    }
    .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-item.youzify-active-item .youzify-mobile-nav-container i,
    .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-item.current .youzify-mobile-nav-container i,
    .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-item.youzify-active-item .youzify-mobile-nav-container a i,
    .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-item.current .youzify-mobile-nav-container a i {
        color: #fff !important;
        opacity: 1 !important;
    }
    body.dark-mode .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-container,
    html[data-theme='dark'] .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-container {
        background: rgba(255, 255, 255, 0.08) !important;
        border-color: rgba(255, 255, 255, 0.16) !important;
        color: #e5e7eb !important;
        box-shadow: none;
    }
    body.dark-mode .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-container i,
    body.dark-mode .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-container a i,
    html[data-theme='dark'] .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-container i,
    html[data-theme='dark'] .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-container a i {
        color: #d1d5db !important;
    }
    body.dark-mode .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-container:hover,
    html[data-theme='dark'] .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-container:hover {
        border-color: rgba(167, 139, 250, 0.5) !important;
        color: #f5f3ff !important;
        background: rgba(167, 139, 250, 0.12) !important;
    }
    body.dark-mode .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-container:hover i,
    body.dark-mode .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-container:hover a i,
    html[data-theme='dark'] .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-container:hover i,
    html[data-theme='dark'] .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-container:hover a i {
        color: #e9d5ff !important;
    }
    body.dark-mode .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-item.youzify-active-item .youzify-mobile-nav-container,
    body.dark-mode .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-item.current .youzify-mobile-nav-container,
    html[data-theme='dark'] .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-item.youzify-active-item .youzify-mobile-nav-container,
    html[data-theme='dark'] .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-item.current .youzify-mobile-nav-container {
        background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
        color: #fff !important;
        border-color: transparent !important;
        box-shadow: 0 4px 14px rgba(124, 58, 237, 0.4) !important;
    }
    body.dark-mode .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-item.youzify-active-item .youzify-mobile-nav-container a,
    body.dark-mode .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-item.current .youzify-mobile-nav-container a,
    html[data-theme='dark'] .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-item.youzify-active-item .youzify-mobile-nav-container a,
    html[data-theme='dark'] .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-item.current .youzify-mobile-nav-container a,
    body.dark-mode .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-item.youzify-active-item .youzify-mobile-nav-container i,
    body.dark-mode .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-item.current .youzify-mobile-nav-container i,
    html[data-theme='dark'] .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-item.youzify-active-item .youzify-mobile-nav-container i,
    html[data-theme='dark'] .youzify-mobile-nav.youzify-inline-mobile-nav.tp-inline-nav-expanded .youzify-mobile-nav-item.current .youzify-mobile-nav-container i {
        color: #fff !important;
    }
}

/* Compose message form: modern Upload Attachment + Send buttons */
#send_message_form .youzify-upload-btn,
#send_message_form .submit {
    margin-top: 12px;
}
#send_message_form .youzify-upload-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: rgba(58, 62, 78, 0.2);
    border: 1px solid rgba(58, 62, 78, 0.35);
    color: inherit;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
#send_message_form .youzify-upload-btn:hover {
    background: rgba(58, 62, 78, 0.3);
    border-color: rgba(58, 62, 78, 0.5);
    transform: translateY(-1px);
}
#send_message_form .youzify-upload-btn i {
    font-size: 16px;
    opacity: 0.9;
}
#send_message_form .submit input[type="submit"],
#send_message_form #send {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 12px 28px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    border: none !important;
    background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
    color: #fff !important;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s !important;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35) !important;
}
#send_message_form .submit input[type="submit"]:hover,
#send_message_form #send:hover {
    background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.45) !important;
}
body.dark-mode #send_message_form .youzify-upload-btn {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}
body.dark-mode #send_message_form .youzify-upload-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Compose — Send To / Subject / body: readable surfaces (light + dark); beat stray global input rules */
#send_message_form.standard-form .youzify-msg-form-item > label:not(.youzify-cs-checkbox-field) {
    color: var(--tpp-text, var(--heading-font-color, #515365)) !important;
}
#send_message_form #subject {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    border: 1px solid var(--tpp-border, var(--ol-border-color, #e6ecf5)) !important;
    background-color: var(--tpp-bg, var(--ol-card-bg-color, #fff)) !important;
    background-image: none !important;
    color: var(--ol-input-text-color, var(--tpp-text, #3f4257)) !important;
}
#send_message_form ul.acfb-holder {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 8px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    list-style: none !important;
    border-radius: 8px !important;
    border: 1px solid var(--tpp-border, var(--ol-border-color, #e6ecf5)) !important;
    background-color: var(--tpp-bg, var(--ol-card-bg-color, #fff)) !important;
}
/* Youzify/BP often leaves an empty <li class="youzify-compose-input-item"> while the real input is a sibling — that li had flex:1 and shoved chips to the far right */
#send_message_form ul.acfb-holder li.youzify-compose-input-item:not(:has(input)) {
    flex: 0 0 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
#send_message_form ul.acfb-holder .youzify-compose-input-item:has(input) {
    flex: 1 1 140px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
#send_message_form ul.acfb-holder li.friend-tab {
    flex: 0 0 auto !important;
    order: -1 !important;
    max-width: 100% !important;
}
#send_message_form #send-to-input.send-to-input,
#send_message_form input.send-to-input.ac_input {
    flex: 1 1 140px !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 32px !important;
    padding: 6px 8px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--ol-input-text-color, var(--tpp-text, #3f4257)) !important;
}
/* Input lives inside the compose li on some builds */
#send_message_form ul.acfb-holder .youzify-compose-input-item input.send-to-input {
    width: 100% !important;
    flex: none !important;
}
#send_message_form #send-to-input.send-to-input::placeholder,
#send_message_form #subject::placeholder {
    color: var(--tpp-muted, var(--body-font-color, #888da8)) !important;
    opacity: 1 !important;
}
#send_message_form .youzify-compose-message-textarea textarea#message_content {
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    border: 1px solid var(--tpp-border, var(--ol-border-color, #e6ecf5)) !important;
    background-color: var(--tpp-bg, var(--ol-card-bg-color, #fff)) !important;
    background-image: none !important;
    color: var(--ol-input-text-color, var(--tpp-text, #3f4257)) !important;
    padding: 12px 14px !important;
}
#send_message_form #subject:focus,
#send_message_form #send-to-input:focus,
#send_message_form #message_content:focus {
    border-color: var(--secondary-accent-color, #38a9ff) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(56, 169, 255, 0.22) !important;
}
#send_message_form ul.acfb-holder:focus-within {
    border-color: var(--secondary-accent-color, #38a9ff) !important;
    box-shadow: 0 0 0 2px rgba(56, 169, 255, 0.22) !important;
}

/* Dark + html[data-theme='dark'] */
body.dark-mode #send_message_form.standard-form .youzify-msg-form-item > label:not(.youzify-cs-checkbox-field),
html[data-theme='dark'] #send_message_form.standard-form .youzify-msg-form-item > label:not(.youzify-cs-checkbox-field) {
    color: var(--tpp-text, var(--body-font-color, #e4e6eb)) !important;
}
body.dark-mode #send_message_form #subject,
html[data-theme='dark'] #send_message_form #subject {
    background-color: var(--ol-input-bg-color, var(--tpp-surface, #2f323d)) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: var(--ol-input-text-color, var(--tpp-text, #e8eaef)) !important;
}
body.dark-mode #send_message_form ul.acfb-holder,
html[data-theme='dark'] #send_message_form ul.acfb-holder {
    background-color: var(--ol-input-bg-color, var(--tpp-surface, #2f323d)) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}
body.dark-mode #send_message_form #send-to-input.send-to-input,
body.dark-mode #send_message_form input.send-to-input.ac_input,
html[data-theme='dark'] #send_message_form #send-to-input.send-to-input,
html[data-theme='dark'] #send_message_form input.send-to-input.ac_input {
    color: var(--ol-input-text-color, var(--tpp-text, #e8eaef)) !important;
    background-color: transparent !important;
    background-image: none !important;
}
body.dark-mode #send_message_form #send-to-input::placeholder,
body.dark-mode #send_message_form #subject::placeholder,
html[data-theme='dark'] #send_message_form #send-to-input::placeholder,
html[data-theme='dark'] #send_message_form #subject::placeholder {
    color: var(--tpp-muted, #9ca3af) !important;
}
body.dark-mode #send_message_form .youzify-compose-message-textarea textarea#message_content,
html[data-theme='dark'] #send_message_form .youzify-compose-message-textarea textarea#message_content {
    background-color: var(--ol-input-bg-color, var(--tpp-surface, #2f323d)) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: var(--ol-input-text-color, var(--tpp-text, #e8eaef)) !important;
}

/* Recipient chips inside Send To */
#send_message_form ul.acfb-holder li.friend-tab {
    background: var(--tpp-surface2, rgba(0, 0, 0, 0.06)) !important;
    border-radius: 6px !important;
    padding: 3px 8px !important;
}
#send_message_form ul.acfb-holder li.friend-tab span,
#send_message_form ul.acfb-holder li.friend-tab a {
    color: var(--ol-input-text-color, var(--tpp-text, #3f4257)) !important;
}
body.dark-mode #send_message_form ul.acfb-holder li.friend-tab,
html[data-theme='dark'] #send_message_form ul.acfb-holder li.friend-tab {
    background: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode #send_message_form ul.acfb-holder li.friend-tab span,
body.dark-mode #send_message_form ul.acfb-holder li.friend-tab a,
html[data-theme='dark'] #send_message_form ul.acfb-holder li.friend-tab span,
html[data-theme='dark'] #send_message_form ul.acfb-holder li.friend-tab a {
    color: var(--tpp-text, #e8eaef) !important;
}

/* ── Messages: single thread view — mirrors comment/reply style ── */

/* --- Thread header: subject + participants + delete --- */
#youzify #message-thread {
    color: var(--body-font-color, #888da8);
}
#youzify #message-recipients,
body .youzify #message-recipients {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 12px 16px !important;
    margin: 0 0 6px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--tpp-border, var(--ol-border-color, #e6ecf5)) !important;
    text-align: left !important;
}
/* Thread header icon — modern tile + FA glyph (hides template .far.fa-comments) */
#youzify #message-recipients .highlight-icon,
body .youzify #message-recipients .highlight-icon {
    flex-shrink: 0 !important;
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    background: linear-gradient(
        145deg,
        rgba(124, 58, 237, 0.14) 0%,
        rgba(124, 58, 237, 0.05) 100%
    ) !important;
    border: 1px solid rgba(124, 58, 237, 0.22) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    color: #6d28d9 !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

#youzify #message-recipients .highlight-icon > i,
body .youzify #message-recipients .highlight-icon > i {
    display: none !important;
}

#youzify #message-recipients .highlight-icon::before,
body .youzify #message-recipients .highlight-icon::before {
    content: '\f4ad' !important;
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    color: inherit !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}
#youzify #message-recipients .highlight,
body .youzify #message-recipients .highlight {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    text-align: left !important;
}
#youzify #message-subject,
body .youzify #message-subject {
    margin: 0 0 4px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--heading-font-color, #515365) !important;
    line-height: 1.3 !important;
    text-align: left !important;
}
#youzify #message-recipients .highlight-meta,
body .youzify #message-recipients .highlight-meta {
    display: block !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    color: var(--tpp-muted, var(--body-font-color, #888da8)) !important;
    text-align: left !important;
}
#youzify #message-recipients .highlight-meta a,
body .youzify #message-recipients .highlight-meta a {
    color: var(--heading-font-color, #515365) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
#youzify #message-recipients .highlight-button,
body .youzify #message-recipients .highlight-button {
    flex-shrink: 0 !important;
    margin-left: auto !important;
}
/* Delete thread — icon-only square (label text collapsed; ::before = trash) */
#youzify #message-recipients .highlight-button .button.confirm,
body .youzify #message-recipients .highlight-button .button.confirm {
    position: relative !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    font-size: 0 !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    border: 1px solid rgba(249, 37, 82, 0.22) !important;
    background: rgba(249, 37, 82, 0.08) !important;
    color: var(--danger, #e11d48) !important;
    opacity: 1 !important;
    line-height: 0 !important;
    overflow: hidden !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s !important;
    box-shadow: none !important;
}

#youzify #message-recipients .highlight-button .button.confirm i,
body .youzify #message-recipients .highlight-button .button.confirm i {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

#youzify #message-recipients .highlight-button .button.confirm::before,
body .youzify #message-recipients .highlight-button .button.confirm::before {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    content: '\f2ed' !important;
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    display: block !important;
    margin: 0 !important;
    pointer-events: none !important;
    color: inherit !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

#youzify #message-recipients .highlight-button .button.confirm:hover,
body .youzify #message-recipients .highlight-button .button.confirm:hover {
    color: var(--danger, #f92552) !important;
    background: rgba(249, 37, 82, 0.14) !important;
    border-color: rgba(249, 37, 82, 0.4) !important;
    box-shadow: 0 1px 4px rgba(249, 37, 82, 0.12) !important;
}

/* --- Message bubbles — flat, comment-thread style --- */
#youzify #message-thread .message-box {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--tpp-border, var(--ol-border-color, #e6ecf5)) !important;
    background: transparent !important;
}
#youzify #message-thread .message-box:last-of-type {
    border-bottom: none !important;
}

/* Avatar */
#youzify #message-thread .message-metadata,
body .youzify #message-thread .message-metadata {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 0 !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
}
#youzify #message-thread .message-metadata > img.avatar,
body .youzify #message-thread .message-metadata > img.avatar {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: none !important;
    box-shadow: none !important;
}

/* Name + time — single horizontal row next to avatar */
#youzify #message-thread .message-metadata-head,
body .youzify #message-thread .message-metadata-head {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
}
#youzify #message-thread .message-metadata-head a,
#youzify #message-thread .message-metadata-head a.tp-msg-sender-profile,
body .youzify #message-thread .message-metadata-head a,
body .youzify #message-thread .message-metadata-head a.tp-msg-sender-profile {
    flex-shrink: 0 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    color: var(--heading-font-color, #515365) !important;
    text-decoration: none !important;
}

#youzify #message-thread .message-metadata-head a.tp-msg-sender-profile:hover,
body .youzify #message-thread .message-metadata-head a.tp-msg-sender-profile:hover {
    color: #6d28d9 !important;
    text-decoration: underline !important;
}
#youzify #message-thread .message-meta,
body .youzify #message-thread .message-meta {
    margin-top: 0 !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
}
#youzify #message-thread .message-meta .activity,
body .youzify #message-thread .message-meta .activity {
    font-size: 11px !important;
    color: var(--tpp-muted, var(--body-font-color, #888da8)) !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

/* Star action */
#youzify #message-thread .message-star-actions,
body .youzify #message-thread .message-star-actions {
    flex-shrink: 0 !important;
    margin-left: auto !important;
}
#youzify #message-thread .message-star-actions .message-action-star,
body .youzify #message-thread .message-star-actions .message-action-star {
    opacity: 0.55 !important;
    font-size: 12px !important;
}
#youzify #message-thread .message-star-actions .message-action-star:hover,
body .youzify #message-thread .message-star-actions .message-action-star:hover {
    opacity: 1 !important;
}

/* Message text */
#youzify #message-thread .message-content {
    flex-basis: 100% !important;
    padding-left: 42px !important;
    margin-top: -4px !important;
}
#youzify #message-thread .message-content p {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    color: var(--tpp-text, var(--body-font-color, #515365)) !important;
}

/* Clear divs */
#youzify #message-thread .message-box .clear {
    display: none !important;
}

/* --- Unread highlight glow (new messages on thread open + live poll arrivals) --- */
@keyframes tp-msg-unread-glow {
    0%   { background: rgba(124, 58, 237, 0.12); box-shadow: inset 3px 0 0 #7c3aed, 0 0 12px rgba(124, 58, 237, 0.10); }
    60%  { background: rgba(124, 58, 237, 0.06); box-shadow: inset 3px 0 0 rgba(124, 58, 237, 0.5), 0 0 0 transparent; }
    100% { background: transparent; box-shadow: inset 3px 0 0 transparent, 0 0 0 transparent; }
}
#youzify #message-thread .message-box.tp-msg-unread-highlight {
    animation: tp-msg-unread-glow 3s ease-out forwards !important;
    border-radius: 6px !important;
    margin-left: -6px !important;
    margin-right: -6px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}
body.dark-mode #youzify #message-thread .message-box.tp-msg-unread-highlight,
html[data-theme='dark'] #youzify #message-thread .message-box.tp-msg-unread-highlight {
    animation-name: tp-msg-unread-glow-dark !important;
}
@keyframes tp-msg-unread-glow-dark {
    0%   { background: rgba(167, 139, 250, 0.16); box-shadow: inset 3px 0 0 #a78bfa, 0 0 14px rgba(167, 139, 250, 0.12); }
    60%  { background: rgba(167, 139, 250, 0.06); box-shadow: inset 3px 0 0 rgba(167, 139, 250, 0.4), 0 0 0 transparent; }
    100% { background: transparent; box-shadow: inset 3px 0 0 transparent, 0 0 0 transparent; }
}

/* --- Reply form — matches comment .ac-form style --- */
#youzify #send-reply {
    margin-top: 4px !important;
    padding: 12px 0 0 !important;
    border: none !important;
    border-top: 1px solid var(--tpp-border, var(--ol-border-color, #e6ecf5)) !important;
    background: transparent !important;
    box-shadow: none !important;
}
/* Grid: avatar + tools on row 1; textarea full-width row 2 (beats Youzify flex + 100px padding squeeze) */
#youzify #send-reply .message-reply-content {
    display: grid !important;
    grid-template-columns: 40px 1fr auto auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 8px 12px !important;
    margin-bottom: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
}
#youzify #send-reply .message-reply-content > img.avatar,
#youzify #send-reply .message-reply-content > .lazyload {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    align-self: start !important;
}
#youzify #send-reply textarea#message_content {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 96px !important;
    max-height: 220px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border-radius: 8px !important;
    border: 1px solid var(--tpp-border, var(--ol-border-color, #e6ecf5)) !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--tpp-text, var(--ol-input-text-color, #3f4257)) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    resize: vertical !important;
    box-sizing: border-box !important;
}
/* Kill Youzify / theme padding on this field at every breakpoint (was 35px 100px — leaves a tiny typing column) */
@media screen and (max-width: 768px) {
    body #youzify #send-reply textarea#message_content,
    #youzify #send-reply textarea#message_content {
        padding: 12px 14px !important;
    }
}
@media screen and (max-width: 475px) {
    body #youzify #send-reply textarea#message_content,
    #youzify #send-reply textarea#message_content {
        padding: 12px 14px !important;
    }
}
#youzify #send-reply textarea#message_content::placeholder {
    color: var(--tpp-muted, #9a9fbf) !important;
    opacity: 1 !important;
}
#youzify #send-reply textarea#message_content:focus {
    border-color: var(--secondary-accent-color, #38a9ff) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Emoji + attachment — top row, right of avatar */
#youzify #send-reply .youzify-message-form-tools {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    margin: 0 !important;
}
#youzify #send-reply .youzify-message-form-tools .youzify-load-emojis i {
    color: var(--tpp-muted, var(--ol-icon-color, #9a9fbf)) !important;
    font-size: 16px !important;
    cursor: pointer !important;
}
#youzify #send-reply .youzify-upload-btn {
    grid-column: 3 / -1 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    color: var(--tpp-muted, var(--body-font-color, #888da8)) !important;
    white-space: nowrap !important;
}
#youzify #send-reply .youzify-upload-btn:hover {
    color: var(--heading-font-color, #515365) !important;
}
#youzify #send-reply .youzify-upload-btn i {
    font-size: 14px !important;
}

/* Submit row — flush with full-width textarea */
#youzify #send-reply .submit {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding-left: 0 !important;
}
#youzify #send-reply #send_reply_button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border: none !important;
    cursor: pointer !important;
    background: var(--secondary-accent-color, #38a9ff) !important;
    color: #fff !important;
    box-shadow: none !important;
    line-height: 1.4 !important;
}
#youzify #send-reply #send_reply_button:hover {
    background: var(--secondary-accent-color-darken, #0593ff) !important;
}

/* Mobile: Youzify EmojioneArea — pin to viewport where the picker would clip (messages, etc.).
   Activity wall comments use absolute positioning under the composer instead (see .activity-comments rules above). */
@media screen and (max-width: 768px) {
    .youzify-emojionearea-picker.youzify-emojionearea-picker-position-bottom {
        position: fixed !important;
        left: max(8px, env(safe-area-inset-left, 0px)) !important;
        right: max(8px, env(safe-area-inset-right, 0px)) !important;
        width: auto !important;
        max-width: none !important;
        bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
        top: auto !important;
        transform: none !important;
        margin: 0 !important;
        max-height: min(58vh, 480px) !important;
        z-index: 2147483000 !important;
        box-sizing: border-box !important;
    }
    .youzify-emojionearea-picker.youzify-emojionearea-picker-position-top {
        position: fixed !important;
        left: max(8px, env(safe-area-inset-left, 0px)) !important;
        right: max(8px, env(safe-area-inset-right, 0px)) !important;
        width: auto !important;
        max-width: none !important;
        top: max(12px, env(safe-area-inset-top, 0px)) !important;
        bottom: auto !important;
        transform: none !important;
        margin: 0 !important;
        max-height: min(58vh, 480px) !important;
        z-index: 2147483000 !important;
        box-sizing: border-box !important;
    }
    body .youzify .activity-comments .ac-form .youzify-comments-emojis .youzify-emojionearea .youzify-emojionearea-picker.youzify-emojionearea-picker-position-bottom {
        position: absolute !important;
        left: auto !important;
        right: 0 !important;
        top: 100% !important;
        bottom: auto !important;
        width: min(100%, 340px) !important;
        max-width: min(92vw, 340px) !important;
        margin: 4px 0 0 !important;
        transform: none !important;
        max-height: min(50vh, 400px) !important;
        z-index: 120 !important;
        box-sizing: border-box !important;
    }
    body .youzify .activity-comments .ac-form .youzify-comments-emojis .youzify-emojionearea .youzify-emojionearea-picker.youzify-emojionearea-picker-position-top {
        position: absolute !important;
        left: auto !important;
        right: 0 !important;
        top: auto !important;
        bottom: 100% !important;
        width: min(100%, 340px) !important;
        max-width: min(92vw, 340px) !important;
        margin: 0 0 4px !important;
        transform: none !important;
        max-height: min(50vh, 400px) !important;
        z-index: 120 !important;
        box-sizing: border-box !important;
    }
    .youzify-emojionearea-picker .youzify-emojionearea-scroll-area {
        max-height: min(42vh, 360px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    body .youzify .activity-comments .ac-form .youzify-comments-emojis .youzify-emojionearea .youzify-emojionearea-picker .youzify-emojionearea-scroll-area {
        max-height: min(38vh, 320px) !important;
    }
    /* Avoid clipping if picker is nested under reply grid */
    #youzify #send-reply,
    #youzify #send-reply .message-reply-content {
        overflow: visible !important;
    }
}

/* ── Thread view — dark mode ── */
body.dark-mode #youzify #message-recipients,
html[data-theme='dark'] #youzify #message-recipients {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode #youzify #message-subject,
html[data-theme='dark'] #youzify #message-subject {
    color: var(--heading-font-color, #fff) !important;
}
body.dark-mode #youzify #message-recipients .highlight-meta,
html[data-theme='dark'] #youzify #message-recipients .highlight-meta {
    color: var(--tpp-muted, #888) !important;
}
body.dark-mode #youzify #message-recipients .highlight-meta a,
html[data-theme='dark'] #youzify #message-recipients .highlight-meta a {
    color: var(--tpp-text, #e4e6eb) !important;
}
body.dark-mode #youzify #message-recipients .highlight-icon,
html[data-theme='dark'] #youzify #message-recipients .highlight-icon,
body.dark-mode .youzify #message-recipients .highlight-icon,
html[data-theme='dark'] .youzify #message-recipients .highlight-icon {
    background: linear-gradient(
        145deg,
        rgba(167, 139, 250, 0.2) 0%,
        rgba(167, 139, 250, 0.06) 100%
    ) !important;
    border-color: rgba(196, 181, 253, 0.35) !important;
    color: #c4b5fd !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

body.dark-mode #youzify #message-recipients .highlight-button .button.confirm,
html[data-theme='dark'] #youzify #message-recipients .highlight-button .button.confirm,
body.dark-mode .youzify #message-recipients .highlight-button .button.confirm,
html[data-theme='dark'] .youzify #message-recipients .highlight-button .button.confirm {
    color: #fb7185 !important;
    border-color: rgba(251, 113, 133, 0.35) !important;
    background: rgba(249, 37, 82, 0.12) !important;
}

body.dark-mode #youzify #message-recipients .highlight-button .button.confirm:hover,
html[data-theme='dark'] #youzify #message-recipients .highlight-button .button.confirm:hover,
body.dark-mode .youzify #message-recipients .highlight-button .button.confirm:hover,
html[data-theme='dark'] .youzify #message-recipients .highlight-button .button.confirm:hover {
    color: #fecaca !important;
    border-color: rgba(252, 165, 165, 0.5) !important;
    background: rgba(249, 37, 82, 0.2) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}
body.dark-mode #youzify #message-thread .message-box,
html[data-theme='dark'] #youzify #message-thread .message-box {
    background: transparent !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode #youzify #message-thread .message-metadata-head a.tp-msg-sender-profile:hover,
html[data-theme='dark'] #youzify #message-thread .message-metadata-head a.tp-msg-sender-profile:hover {
    color: #c4b5fd !important;
}

body.dark-mode #youzify #message-thread .message-metadata-head a,
html[data-theme='dark'] #youzify #message-thread .message-metadata-head a {
    color: var(--tpp-text, #e4e6eb) !important;
}
body.dark-mode #youzify #message-thread .message-meta .activity,
html[data-theme='dark'] #youzify #message-thread .message-meta .activity {
    color: var(--tpp-muted, #888) !important;
}
body.dark-mode #youzify #message-thread .message-content p,
html[data-theme='dark'] #youzify #message-thread .message-content p {
    color: var(--tpp-text, #ccc) !important;
}
body.dark-mode #youzify #send-reply,
html[data-theme='dark'] #youzify #send-reply {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode #youzify #send-reply textarea#message_content,
html[data-theme='dark'] #youzify #send-reply textarea#message_content {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: var(--tpp-text, #e4e6eb) !important;
}
body.dark-mode #youzify #send-reply textarea#message_content:focus,
html[data-theme='dark'] #youzify #send-reply textarea#message_content:focus {
    border-color: var(--secondary-accent-color, #38a9ff) !important;
}
body.dark-mode #youzify #send-reply textarea#message_content::placeholder,
html[data-theme='dark'] #youzify #send-reply textarea#message_content::placeholder {
    color: var(--tpp-muted, #9ca3af) !important;
}
body.dark-mode #youzify #send-reply .youzify-upload-btn,
html[data-theme='dark'] #youzify #send-reply .youzify-upload-btn {
    color: var(--tpp-muted, #888) !important;
}
body.dark-mode #youzify #send-reply .youzify-upload-btn:hover,
html[data-theme='dark'] #youzify #send-reply .youzify-upload-btn:hover {
    color: var(--tpp-text, #e4e6eb) !important;
}

/* Compose “Send To” member search: dropdown clipped by column overflow or hidden under sidebar */
body #youzify #send_message_form,
body #youzify #send_message_form .youzify-msg-form-item,
body #youzify #send_message_form ul.acfb-holder,
body #youzify #send_message_form ul.first.acfb-holder {
    overflow: visible !important;
}
body #youzify .youzify-right-sidebar-layout .youzify-main-column.grid-column:first-of-type {
    overflow: visible !important;
    position: relative;
    z-index: 5;
}

/* Profile sidebar: hide Media, Friends list, balance, Discord card, Youzify social widget — same links show as cover icons */
#youzify .youzify-profile-sidebar.youzify-right-sidebar .youzify-widget.youzify-wall_media,
#youzify .youzify-profile-sidebar.youzify-right-sidebar .youzify-widget.youzify-friends,
#youzify .youzify-profile-sidebar.youzify-right-sidebar .youzify-widget.youzify-user_balance,
#youzify .youzify-profile-sidebar.youzify-right-sidebar #tp-profile-sidebar-discord-root,
#youzify .youzify-profile-sidebar.youzify-right-sidebar .youzify-widget.youzify-social_networks,
.youzify-profile-sidebar.youzify-right-sidebar .youzify-widget.youzify-wall_media,
.youzify-profile-sidebar.youzify-right-sidebar .youzify-widget.youzify-friends,
.youzify-profile-sidebar.youzify-right-sidebar .youzify-widget.youzify-user_balance,
.youzify-profile-sidebar.youzify-right-sidebar #tp-profile-sidebar-discord-root,
.youzify-profile-sidebar.youzify-right-sidebar .youzify-widget.youzify-social_networks {
    display: none !important;
}

/* Profile right sidebar: card chrome for remaining widgets (Social links + injected Discord) */
#youzify .youzify-profile-sidebar.youzify-right-sidebar .youzify-widget,
.youzify-profile-sidebar.youzify-right-sidebar .youzify-widget {
    border-radius: 14px !important;
    border: 1px solid var(--ol-border-color, #e6ecf5) !important;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 14px !important;
    overflow: hidden !important;
    background: var(--ol-card-bg-color, #fff) !important;
}
#youzify .youzify-profile-sidebar.youzify-right-sidebar .youzify-widget-head,
.youzify-profile-sidebar.youzify-right-sidebar .youzify-widget-head {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--ol-border-color, #eef2f7) !important;
    background: linear-gradient(180deg, rgba(124, 58, 237, 0.04) 0%, transparent 100%) !important;
}
#youzify .youzify-profile-sidebar.youzify-right-sidebar .youzify-widget-title,
.youzify-profile-sidebar.youzify-right-sidebar .youzify-widget-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    margin: 0 !important;
    color: var(--ol-heading-font-color, #1f2937) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
#youzify .youzify-profile-sidebar.youzify-right-sidebar .youzify-widget-content,
.youzify-profile-sidebar.youzify-right-sidebar .youzify-widget-content {
    padding: 12px 14px 14px !important;
}
/* User balance: tone down default loud gradient strip */
#youzify .youzify-profile-sidebar .youzify-user_balance .youzify-user-balance-box,
.youzify-profile-sidebar .youzify-user_balance .youzify-user-balance-box {
    border-radius: 10px !important;
    min-height: 0 !important;
    padding: 10px 12px !important;
}
/* Social links widget — icon-only row, no card / title (profile right sidebar only) */
#youzify .youzify-profile-sidebar.youzify-right-sidebar .youzify-widget.youzify-social_networks,
.youzify-profile-sidebar.youzify-right-sidebar .youzify-widget.youzify-social_networks {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 10px !important;
    overflow: visible !important;
}
#youzify .youzify-profile-sidebar .youzify-social_networks .youzify-widget-head,
.youzify-profile-sidebar .youzify-social_networks .youzify-widget-head {
    display: none !important;
}
#youzify .youzify-profile-sidebar .youzify-social_networks .youzify-widget-content,
.youzify-profile-sidebar .youzify-social_networks .youzify-widget-content {
    padding: 0 !important;
}
#youzify .youzify-profile-sidebar .youzify-social_networks .youzify-wg-networks,
.youzify-profile-sidebar .youzify-social_networks .youzify-wg-networks {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
}
#youzify .youzify-profile-sidebar .youzify-social_networks .youzify-wg-networks li,
.youzify-profile-sidebar .youzify-social_networks .youzify-wg-networks li {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
}
#youzify .youzify-profile-sidebar .youzify-social_networks .youzify-wg-networks li a,
.youzify-profile-sidebar .youzify-social_networks .youzify-wg-networks li a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    text-decoration: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    letter-spacing: 0 !important;
    overflow: hidden !important;
    color: transparent !important;
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease !important;
}
#youzify .youzify-profile-sidebar .youzify-social_networks .youzify-wg-networks li a:hover,
.youzify-profile-sidebar .youzify-social_networks .youzify-wg-networks li a:hover {
    filter: brightness(1.08) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
}
#youzify .youzify-profile-sidebar .youzify-social_networks .youzify-wg-networks li a i,
.youzify-profile-sidebar .youzify-social_networks .youzify-wg-networks li a i {
    font-size: 18px !important;
    line-height: 1 !important;
    width: auto !important;
    color: #fff !important;
    opacity: 1 !important;
    margin: 0 !important;
    text-indent: 0 !important;
}
/* Friends widget */
#youzify .youzify-profile-sidebar .youzify-profile-friends-widget .youzify-list-item,
.youzify-profile-sidebar .youzify-profile-friends-widget .youzify-list-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--ol-border-color, #f0f2f5) !important;
}
#youzify .youzify-profile-sidebar .youzify-profile-friends-widget .youzify-list-item:last-of-type,
.youzify-profile-sidebar .youzify-profile-friends-widget .youzify-list-item:last-of-type {
    border-bottom: none !important;
}
#youzify .youzify-profile-sidebar .youzify-profile-friends-widget .youzify-item-avatar img,
.youzify-profile-sidebar .youzify-profile-friends-widget .youzify-item-avatar img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid rgba(124, 58, 237, 0.12) !important;
}
#youzify .youzify-profile-sidebar .youzify-item-name,
.youzify-profile-sidebar .youzify-item-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ol-heading-font-color, #111827) !important;
}
#youzify .youzify-profile-sidebar .youzify-meta-item,
.youzify-profile-sidebar .youzify-meta-item {
    font-size: 11px !important;
    color: var(--ol-body-font-color, #6b7280) !important;
    opacity: 0.9 !important;
}
#youzify .youzify-profile-sidebar .youzify-more-items a,
.youzify-profile-sidebar .youzify-more-items a {
    display: inline-flex !important;
    margin-top: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #7c3aed !important;
    text-decoration: none !important;
}
#youzify .youzify-profile-sidebar .youzify-more-items a:hover,
.youzify-profile-sidebar .youzify-more-items a:hover {
    text-decoration: underline !important;
}
/* Media widget shell */
#youzify .youzify-profile-sidebar .youzify-media.youzify-media-box,
.youzify-profile-sidebar .youzify-media.youzify-media-box {
    border-radius: 10px !important;
}
#youzify .youzify-profile-sidebar .youzify-media-view-all,
.youzify-profile-sidebar .youzify-media-view-all {
    margin-top: 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #7c3aed !important;
}

/* Injected Discord widget (matches Youzify widget shell) */
.tp-tq-sidebar-widget.tp-tq-sidebar-discord .youzify-widget-head {
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.12) 0%, rgba(124, 58, 237, 0.08) 100%) !important;
}
.tp-tq-sidebar-discord__title-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    background: #5865f2 !important;
    color: #fff !important;
    font-size: 15px !important;
}
.tp-tq-sidebar-discord__body {
    padding-top: 4px !important;
}
.tp-tq-conn-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 4px 0 !important;
}
.tp-tq-conn-row__icon {
    flex-shrink: 0 !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: #5865f2 !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 17px !important;
}
.tp-tq-conn-row__text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
}
.tp-tq-conn-row__label {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--ol-body-font-color, #6b7280) !important;
}
.tp-tq-conn-row__value {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--ol-heading-font-color, #111827) !important;
    word-break: break-word !important;
}
.tp-tq-conn-row__value--muted {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--ol-body-font-color, #6b7280) !important;
}
.tp-tq-sidebar-discord__hint {
    font-size: 12px !important;
    line-height: 1.45 !important;
    color: var(--ol-body-font-color, #4b5563) !important;
    margin: 0 0 10px !important;
}
.tp-tq-sidebar-discord__hint--muted {
    opacity: 0.85 !important;
}
.tp-tq-sidebar-discord__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    color: #fff !important;
    background: #5865f2 !important;
    border: none !important;
    cursor: pointer !important;
    transition: filter 0.15s ease, box-shadow 0.15s ease !important;
}
.tp-tq-sidebar-discord__btn:hover {
    filter: brightness(1.05) !important;
    box-shadow: 0 4px 14px rgba(88, 101, 242, 0.45) !important;
    color: #fff !important;
}
.tp-tq-sidebar-discord__manage {
    margin: 12px 0 0 !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--ol-border-color, #eef2f7) !important;
    font-size: 12px !important;
}
.tp-tq-sidebar-discord__manage-link {
    font-weight: 600 !important;
    color: #7c3aed !important;
    text-decoration: none !important;
}
.tp-tq-sidebar-discord__manage-link:hover {
    text-decoration: underline !important;
}

body.dark-mode #youzify .youzify-profile-sidebar.youzify-right-sidebar .youzify-widget,
html[data-theme="dark"] #youzify .youzify-profile-sidebar.youzify-right-sidebar .youzify-widget {
    background: var(--ol-card-bg-color, #1e2128) !important;
    border-color: var(--ol-border-color, #353946) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
}
body.dark-mode #youzify .youzify-profile-sidebar .youzify-widget-title,
html[data-theme="dark"] #youzify .youzify-profile-sidebar .youzify-widget-title {
    color: var(--heading-font-color, #e8eaef) !important;
}
body.dark-mode #youzify .youzify-profile-sidebar .youzify-profile-friends-widget .youzify-list-item,
html[data-theme="dark"] #youzify .youzify-profile-sidebar .youzify-profile-friends-widget .youzify-list-item {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode #youzify .youzify-profile-sidebar .youzify-item-name,
html[data-theme="dark"] #youzify .youzify-profile-sidebar .youzify-item-name {
    color: #e8eaef !important;
}
body.dark-mode .tp-tq-sidebar-discord__hint,
html[data-theme="dark"] .tp-tq-sidebar-discord__hint {
    color: #b8c0cc !important;
}
body.dark-mode .tp-tq-conn-row__value,
html[data-theme="dark"] .tp-tq-conn-row__value {
    color: #e8eaef !important;
}
body.dark-mode .tp-tq-sidebar-discord__manage,
html[data-theme="dark"] .tp-tq-sidebar-discord__manage {
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}
body #youzify .youzify-page-main-content:has(#send_message_form) {
    overflow: visible !important;
}
/* Legacy BP / jQuery autocomplete (.ac_results) */
.ac_results,
body > .ac_results,
#youzify .ac_results {
    z-index: 100060 !important;
    position: absolute !important;
    max-height: 260px !important;
    overflow-y: auto !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
    border-radius: 8px !important;
}
.ac_results li {
    padding: 8px 12px !important;
    cursor: pointer !important;
}
body.dark-mode .ac_results,
html[data-theme='dark'] .ac_results {
    background: #2a2d36 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
body.dark-mode .ac_results li,
html[data-theme='dark'] .ac_results li {
    color: #e8eaef !important;
    background: transparent !important;
}
body.dark-mode .ac_results li.ac_over,
body.dark-mode .ac_results li:hover,
html[data-theme='dark'] .ac_results li.ac_over,
html[data-theme='dark'] .ac_results li:hover {
    background: #3d4452 !important;
    color: #fff !important;
}
/* jQuery UI autocomplete (some BP / Youzify builds) */
body #youzify .ui-autocomplete.ui-front,
body #youzify ul.ui-autocomplete {
    z-index: 100060 !important;
    max-height: 280px;
    overflow-y: auto;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
body.dark-mode #youzify .ui-autocomplete .ui-menu-item-wrapper,
html[data-theme='dark'] #youzify .ui-autocomplete .ui-menu-item-wrapper {
    color: #e8eaef;
}
body.dark-mode #youzify .ui-autocomplete .ui-state-active,
body.dark-mode #youzify .ui-autocomplete .ui-menu-item-wrapper:hover,
html[data-theme='dark'] #youzify .ui-autocomplete .ui-state-active,
html[data-theme='dark'] #youzify .ui-autocomplete .ui-menu-item-wrapper:hover {
    background: #3d4452 !important;
    color: #fff !important;
    border: none !important;
}

/* Profile Media widget: modernized filter chips */
.youzify-media-filter {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 4px !important;
    margin-bottom: 12px;
    padding: 6px 8px !important;
    background: transparent !important;
    overflow-x: auto;
}
.youzify-media-filter .youzify-filter-item {
    width: auto !important;
    flex: 1 1 0;
    min-width: 0;
}
.youzify-media-filter .youzify-filter-content {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    background: #d5d8d2;
    border: 1px solid #b8bdb4;
    color: #3f4257;
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
    min-height: 34px;
    box-sizing: border-box;
    overflow: visible;
    white-space: nowrap;
}
.youzify-media-filter .youzify-filter-content:hover {
    background: #c7cbc2;
    border-color: #a3a99c;
}
.youzify-media-filter .youzify-filter-content.youzify-current-filter {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.22);
}
.youzify-media-filter .youzify-filter-content.youzify-current-filter:hover {
    background: linear-gradient(135deg, #6d28d9, #8b5cf6);
    color: #fff;
}
.youzify-media-filter .youzify-filter-content i {
    font-size: 13px;
    width: 1em;
    height: 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.85;
}
.youzify-media-filter .youzify-filter-content.youzify-current-filter i {
    opacity: 1;
}
/* Media item tools — hidden; lightbox triggered via JS on image click */
body.dark-mode .youzify-media-filter .youzify-filter-content {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e4e4e7;
}
body.dark-mode .youzify-media-filter .youzify-filter-content:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.18);
}
body.dark-mode .youzify-media-filter .youzify-filter-content.youzify-current-filter {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
    border-color: transparent;
}
body.dark-mode .youzify-media-filter .youzify-filter-content.youzify-current-filter:hover {
    background: linear-gradient(135deg, #6d28d9, #8b5cf6);
    color: #fff;
}

/* ═══════════════ MEDIA TAB — Redesigned ═══════════════ */

/* Section spacing */
.youzify-tab.youzify-media .youzify-media-group {
    margin-bottom: 24px !important;
}
.youzify-tab.youzify-media .youzify-media-group:last-child {
    margin-bottom: 0 !important;
}

/* ── Section header ── */
.youzify-media-group-head {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    margin: 0 0 14px !important;
    border: 1px solid var(--ol-border-color, #e6ecf5) !important;
    border-radius: 12px !important;
    background: var(--ol-card-bg-color, #fff) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
.youzify-media-head-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

/* Icon tile — white SVG on gradient (no FA webfont; works with FA SVG+JS) */
.youzify-media-group-icon {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}
.youzify-media-group-icon::before {
    content: '' !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}
/* Template <i> is redundant once ::before draws the glyph */
.youzify-media-group-icon i {
    display: none !important;
}

/* Title */
.youzify-media-group-title {
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--heading-font-color, #515365) !important;
    letter-spacing: 0.01em !important;
    line-height: 1.3 !important;
}

/* View All link */
.youzify-media-head-right {
    flex-shrink: 0 !important;
}
.youzify-media-group-view-all {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    color: #7c3aed !important;
    text-decoration: none !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    background: rgba(124, 58, 237, 0.08) !important;
    border: 1px solid rgba(124, 58, 237, 0.15) !important;
    transition: all 0.2s ease !important;
}
.youzify-media-group-view-all:hover {
    background: rgba(124, 58, 237, 0.16) !important;
    border-color: rgba(124, 58, 237, 0.3) !important;
    color: #6d28d9 !important;
    transform: translateY(-1px) !important;
}

/* Remove inner padding and clearfix from media group wrappers */
.youzify-media-group-content {
    padding: 0 !important;
}
.youzify-media-group::after,
.youzify-media-group-content::after,
.youzify-media-items::after {
    content: none !important;
    display: none !important;
}

/* ── Media grid (default) ── */
.youzify-media-items {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3px !important;
    width: 100% !important;
}
/* Desktop: slightly smaller strip (still 3 tight columns) */
@media (min-width: 769px) {
    .youzify-media-items {
        max-width: 360px !important;
        width: 100% !important;
    }
}

/* Profile media sub-tabs (infinite scroll): use full width + more columns on desktop */
@media (min-width: 769px) {
    body.tp-profile-media-infinite .youzify-tab.youzify-media .youzify-media-items {
        max-width: none !important;
        width: 100% !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 10px !important;
    }
}
@media (min-width: 1200px) {
    body.tp-profile-media-infinite .youzify-tab.youzify-media .youzify-media-items {
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 12px !important;
    }
}

.youzify-media-items::after {
    content: none !important;
    display: none !important;
}
.youzify-media-item {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 4px !important;
    aspect-ratio: 1 / 1 !important;
    background: var(--ol-smoke-light, #f2f4f8) !important;
    border: none !important;
    box-shadow: none !important;
    transition: opacity 0.2s ease !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.youzify-media-item:hover {
    opacity: 0.85 !important;
}
.youzify-media-item-img {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}
.youzify-media-item-img img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.4s ease !important;
}
.youzify-media-item:hover .youzify-media-item-img img {
    transform: scale(1.08) !important;
}

/* Hidden tool overlay (lightbox triggered via JS on image click) */
.youzify-media-item-tools {
    position: absolute !important;
    inset: 0 !important;
    display: none !important;
}

/* ── Empty state ── */
.youzify-media-no-items {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 40px 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--body-font-color, #888da8) !important;
    background: var(--ol-smoke-light, #f8f9fb) !important;
    border-radius: 12px !important;
    border: 1px dashed var(--ol-border-color, #e6ecf5) !important;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .youzify-media-items {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }
    .youzify-tab.youzify-media .youzify-media-items {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 3px !important;
    }
    .youzify-media-item {
        border-radius: 10px !important;
    }
    .youzify-media-group-head {
        padding: 10px 12px !important;
        gap: 10px !important;
    }
}
@media (max-width: 480px) {
    .youzify-media-items {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }
    .youzify-tab.youzify-media .youzify-media-items {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 3px !important;
    }
    .youzify-media-item {
        border-radius: 8px !important;
    }
    .youzify-media-group-icon {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        border-radius: 8px !important;
    }
    .youzify-media-group-icon::before {
        width: 15px !important;
        height: 15px !important;
    }
    .youzify-media-group-title {
        font-size: 13px !important;
    }
    .youzify-media-group-view-all {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }
}

/* ── Dark mode ── */
body.dark-mode .youzify-media-group-head,
html[data-theme='dark'] .youzify-media-group-head {
    background: var(--ol-card-bg-color, #20232b) !important;
    border-color: var(--ol-border-color, #353946) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}
body.dark-mode .youzify-media-group-icon,
html[data-theme='dark'] .youzify-media-group-icon {
    background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
}
body.dark-mode .youzify-media-group-title,
html[data-theme='dark'] .youzify-media-group-title {
    color: #e4e6eb !important;
}
body.dark-mode .youzify-media-group-view-all,
html[data-theme='dark'] .youzify-media-group-view-all {
    color: #c4b5fd !important;
    background: rgba(167, 139, 250, 0.1) !important;
    border-color: rgba(167, 139, 250, 0.2) !important;
}
body.dark-mode .youzify-media-group-view-all:hover,
html[data-theme='dark'] .youzify-media-group-view-all:hover {
    background: rgba(167, 139, 250, 0.2) !important;
    border-color: rgba(167, 139, 250, 0.35) !important;
    color: #e9d5ff !important;
}
body.dark-mode .youzify-media-item,
html[data-theme='dark'] .youzify-media-item {
    background: #1a1d25 !important;
    border: none !important;
    box-shadow: none !important;
}
body.dark-mode .youzify-media-item:hover,
html[data-theme='dark'] .youzify-media-item:hover {
    opacity: 0.85 !important;
}
body.dark-mode .youzify-media-no-items,
html[data-theme='dark'] .youzify-media-no-items {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #9ca3af !important;
}

/* ── Per-category gradients + SVG glyphs (base64) ── */

/* Photos: blue gradient + camera */
.youzify-media-group-photos .youzify-media-group-icon {
    background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
}
.youzify-media-group-photos .youzify-media-group-icon::before {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nd2hpdGUnIGQ9J005IDNMNy4xNyA1SDRjLTEuMSAwLTIgLjktMiAydjEyYzAgMS4xLjkgMiAyIDJoMTZjMS4xIDAgMi0uOSAyLTJWN2MwLTEuMS0uOS0yLTItMmgtMy4xN0wxNSAzSDl6bTMgMTNhNSA1IDAgMSAxIDAtMTAgNSA1IDAgMCAxIDAgMTB6Jy8+PC9zdmc+') !important;
}

/* Videos: red-orange + play rectangle */
.youzify-media-group-videos .youzify-media-group-icon {
    background: linear-gradient(135deg, #ef4444, #f97316) !important;
}
.youzify-media-group-videos .youzify-media-group-icon::before {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nd2hpdGUnIGQ9J00xNyAxMC41VjdjMC0uNTUtLjQ1LTEtMS0xSDRjLS41NSAwLTEgLjQ1LTEgMXYxMGMwIC41NS40NSAxIDEgMWgxMmMuNTUgMCAxLS40NSAxLTF2LTMuNWw0IDR2LTExbC00IDR6Jy8+PC9zdmc+') !important;
}

/* Audios: green + speaker */
.youzify-media-group-audios .youzify-media-group-icon {
    background: linear-gradient(135deg, #10b981, #34d399) !important;
}
.youzify-media-group-audios .youzify-media-group-icon::before {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nd2hpdGUnIGQ9J00zIDl2Nmg0bDUgNVY0TDcgOUgzem0xMy41IDNhNC41IDQuNSAwIDAgMC0yLjUtNHY4YTQuNSA0LjUgMCAwIDAgMi41LTR6Jy8+PC9zdmc+') !important;
}

/* Files: amber + import arrow */
.youzify-media-group-files .youzify-media-group-icon {
    background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
}
.youzify-media-group-files .youzify-media-group-icon::before {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nd2hpdGUnIGQ9J00xNCAySDZhMiAyIDAgMCAwLTIgMnYxNmEyIDIgMCAwIDAgMiAyaDEyYTIgMiAwIDAgMCAyLTJWOGwtNi02em00IDE4SDZWNGg3djVoNXYxMXptLTYtNy00IDMgNCAzdi02eicvPjwvc3ZnPg==') !important;
}

/* Dark mode: keep per-section tile colours (beats generic rule above) */
body.dark-mode .youzify-media-group-photos .youzify-media-group-icon,
html[data-theme='dark'] .youzify-media-group-photos .youzify-media-group-icon {
    background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
}
body.dark-mode .youzify-media-group-videos .youzify-media-group-icon,
html[data-theme='dark'] .youzify-media-group-videos .youzify-media-group-icon {
    background: linear-gradient(135deg, #ef4444, #f97316) !important;
}
body.dark-mode .youzify-media-group-audios .youzify-media-group-icon,
html[data-theme='dark'] .youzify-media-group-audios .youzify-media-group-icon {
    background: linear-gradient(135deg, #10b981, #34d399) !important;
}
body.dark-mode .youzify-media-group-files .youzify-media-group-icon,
html[data-theme='dark'] .youzify-media-group-files .youzify-media-group-icon {
    background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
}

/* Media → All: cap photos at 15 when another media group follows (+ “more” tile from JS). Photos-only sub-tab has a single group — no cap. */
.youzify-tab.youzify-media .youzify-media-group-photos:has(~ .youzify-media-group) .youzify-media-items .youzify-media-item:nth-child(n+16) {
    display: none !important;
}


/* “+N more” tile (Media → All, photos row) */
.youzify-tab.youzify-media .youzify-media-item.tp-youzify-media-more {
    min-height: 0;
}
.youzify-tab.youzify-media .tp-youzify-media-more-link {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    height: 100%;
    width: 100%;
    border-radius: 12px;
    text-decoration: none !important;
    box-sizing: border-box;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(56, 169, 255, 0.14)) !important;
    border: 2px dashed var(--ol-border-color, #d1d5db) !important;
    color: var(--ol-body-font-color, #4b5563) !important;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    padding: 12px;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.youzify-tab.youzify-media .tp-youzify-media-more-link:hover {
    border-color: rgba(124, 58, 237, 0.45) !important;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(56, 169, 255, 0.2)) !important;
    transform: translateY(-1px);
}
body.dark-mode .youzify-tab.youzify-media .tp-youzify-media-more-link,
html[data-theme='dark'] .youzify-tab.youzify-media .tp-youzify-media-more-link {
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--ol-body-font-color, #e5e7eb) !important;
}

/* Youzify profile media pagination (photos / videos sub-tabs) — match messages pill row */
/* Pagination lives outside the thumbnail grid (moved by JS) — full width, centered */
.youzify-media-group-content > nav.youzify-pagination {
    grid-column: unset !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    clear: both !important;
}

#youzify .youzify-tab.youzify-media nav.youzify-pagination {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 28px !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
#youzify .youzify-tab.youzify-media .youzify-pagination-pages {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--body-font-color, #888da8) !important;
}
#youzify .youzify-tab.youzify-media .youzify-pagination .comments-nav-links.youzify-nav-links {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 auto !important;
    padding: 14px 18px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    background: var(--ol-card-bg-color, #fff) !important;
    border: 1px solid var(--ol-border-color, #e6ecf5) !important;
}
#youzify .youzify-tab.youzify-media .youzify-pagination .page-numbers {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    border: 1px solid var(--ol-border-color, #e6ecf5) !important;
    background: var(--ol-input-bg-color, #f2f4f8) !important;
    color: var(--ol-body-font-color, #4b5563) !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}
#youzify .youzify-tab.youzify-media .youzify-pagination a.page-numbers:hover {
    background: rgba(124, 58, 237, 0.1) !important;
    border-color: rgba(124, 58, 237, 0.35) !important;
    color: #7c3aed !important;
}
#youzify .youzify-tab.youzify-media .youzify-pagination span.page-numbers.current {
    background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 2px 12px rgba(124, 58, 237, 0.35) !important;
}
#youzify .youzify-tab.youzify-media .youzify-pagination span.page-numbers.dots {
    border: none !important;
    background: transparent !important;
    min-width: auto !important;
    padding: 0 6px !important;
}
body.dark-mode #youzify .youzify-tab.youzify-media .youzify-pagination .comments-nav-links.youzify-nav-links,
html[data-theme='dark'] #youzify .youzify-tab.youzify-media .youzify-pagination .comments-nav-links.youzify-nav-links {
    background: var(--ol-card-bg-color, #1f2937) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode #youzify .youzify-tab.youzify-media .youzify-pagination .page-numbers,
html[data-theme='dark'] #youzify .youzify-tab.youzify-media .youzify-pagination .page-numbers {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--ol-body-font-color, #e5e7eb) !important;
}

/* Profile media sub-tabs (body.tp-profile-media-infinite from PHP): hide Youzify pager <nav> — JS still reads data-* in the DOM. */
body.tp-profile-media-infinite .youzify-tab.youzify-media nav.youzify-pagination,
body.tp-profile-media-infinite .youzify-tab.youzify-media .youzify-media-group-content nav.youzify-pagination,
.youzify-tab.youzify-media.tp-media-infinite-active nav.youzify-pagination,
.youzify-tab.youzify-media.tp-media-infinite-active .youzify-media-group-content nav.youzify-pagination {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    pointer-events: none !important;
}
.youzify-media-items .tp-media-infinite-sentinel {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    height: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: hidden;
}
.youzify-media-items .tp-media-infinite-loading,
.youzify-media-items .tp-media-infinite-end {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    text-align: center !important;
    padding: 14px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--body-font-color, #888da8) !important;
    box-sizing: border-box !important;
}
.youzify-media-items .tp-media-infinite-error {
    color: #dc2626 !important;
}
body.dark-mode .youzify-media-items .tp-media-infinite-loading,
html[data-theme='dark'] .youzify-media-items .tp-media-infinite-loading,
body.dark-mode .youzify-media-items .tp-media-infinite-end,
html[data-theme='dark'] .youzify-media-items .tp-media-infinite-end {
    color: var(--ol-body-font-color, #9ca3af) !important;
}

/* ═══════════════ END MEDIA TAB ═══════════════ */

/* Friends list: keep buttons on same row at end of box, modern style */
.youzify-user-data {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
}
.youzify-user-data .youzify-user-actions {
    margin-left: auto !important;
    margin-top: 0 !important;
}
/* Wrappers are display:contents so <a> tags are direct flex items — same baseline/height */
.youzify-user-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    float: none !important;
    clear: none !important;
}
.youzify-user-actions .generic-button,
.youzify-user-actions .friendship-button,
.youzify-user-actions .message-button {
    display: contents !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
.youzify-user-actions .generic-button a,
.youzify-user-actions .friendship-button a,
.youzify-user-actions .message-button a,
.youzify-user-actions a.youzify-send-message {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    min-height: 42px !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    border: 1px solid transparent;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
.youzify-user-actions .message-button a,
.youzify-user-actions a.youzify-send-message {
    background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
    color: #fff !important;
}
.youzify-user-actions .message-button a:hover,
.youzify-user-actions a.youzify-send-message:hover {
    background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
    color: #fff !important;
    transform: translateY(-1px);
}
.youzify-user-actions .friendship-button.is_friend a,
.youzify-user-actions .friendship-button a.remove {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #555 !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}
.youzify-user-actions .friendship-button.is_friend a:hover,
.youzify-user-actions .friendship-button a.remove:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    color: #dc2626 !important;
}
body.dark-mode .youzify-user-actions .message-button a,
body.dark-mode .youzify-user-actions a.youzify-send-message {
    background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
    color: #fff !important;
}
body.dark-mode .youzify-user-actions .friendship-button.is_friend a,
body.dark-mode .youzify-user-actions .friendship-button a.remove {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ccc !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}
body.dark-mode .youzify-user-actions .friendship-button.is_friend a:hover,
body.dark-mode .youzify-user-actions .friendship-button a.remove:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #fca5a5 !important;
}

/* ═══════════════ FRIENDS PAGE — MODERNIZED (matches notifications / messages) ═══════════════ */

/* List container → vertical card stack (Friends + Visitors history — same markup) */
body.bp-user #friend-list.item-list,
body.bp-user .yzbpv-profile-viewers #youzify-members-list.item-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Each friend = full-width card row */
body.bp-user #friend-list.item-list > li,
body.bp-user .yzbpv-profile-viewers #youzify-members-list.item-list > li {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    list-style: none !important;
}

/* Card wrapper */
body.bp-user #friend-list .youzify-user-data,
body.bp-user .yzbpv-profile-viewers #youzify-members-list > li .youzify-user-data {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 16px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    border: 1px solid var(--ol-border-color, #e6ecf5) !important;
    background: var(--ol-card-bg-color, #fff) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    transition: background 0.15s, box-shadow 0.15s !important;
}
body.bp-user #friend-list .youzify-user-data:hover,
body.bp-user .yzbpv-profile-viewers #youzify-members-list > li .youzify-user-data:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Dark mode card */
body.dark-mode.bp-user #friend-list .youzify-user-data,
body.dark-mode #friend-list .youzify-user-data,
body.dark-mode.bp-user .yzbpv-profile-viewers #youzify-members-list > li .youzify-user-data,
body.dark-mode .yzbpv-profile-viewers #youzify-members-list > li .youzify-user-data {
    background: var(--ol-card-bg-color, #20232b) !important;
    border-color: var(--ol-border-color, #353946) !important;
}
body.dark-mode.bp-user #friend-list .youzify-user-data:hover,
body.dark-mode #friend-list .youzify-user-data:hover,
body.dark-mode.bp-user .yzbpv-profile-viewers #youzify-members-list > li .youzify-user-data:hover,
body.dark-mode .yzbpv-profile-viewers #youzify-members-list > li .youzify-user-data:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Avatar */
body.bp-user #friend-list .youzify-item-avatar,
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-item-avatar {
    flex: 0 0 auto !important;
    margin: 0 !important;
}
body.bp-user #friend-list .youzify-item-avatar img.avatar,
body.bp-user #friend-list .youzify-item-avatar img,
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-item-avatar img {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    border: 2px solid var(--ol-border-color, #e6ecf5) !important;
    display: block !important;
}
body.dark-mode.bp-user #friend-list .youzify-item-avatar img.avatar,
body.dark-mode #friend-list .youzify-item-avatar img,
body.dark-mode.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-item-avatar img,
body.dark-mode .yzbpv-profile-viewers #youzify-members-list .youzify-item-avatar img {
    border-color: var(--ol-border-color, #353946) !important;
}

/* Name + meta */
body.bp-user #friend-list .youzify-user-data .item,
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-data .item {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}
body.bp-user #friend-list .youzify-user-data .item-title,
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-data .item-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    margin: 0 0 2px !important;
    color: var(--heading-font-color, #515365) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
}
body.bp-user #friend-list .youzify-user-data .item-title a,
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-data .item-title a {
    color: inherit !important;
    text-decoration: none !important;
    transition: color 0.15s !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: inline-block !important;
    vertical-align: bottom !important;
}
body.bp-user #friend-list .youzify-user-data .item-title a:hover,
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-data .item-title a:hover {
    color: #7c3aed !important;
}
body.bp-user #friend-list .youzify-user-data .item-meta,
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-data .item-meta {
    font-size: 12px !important;
    margin: 0 !important;
    color: var(--body-font-color, #888da8) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Beat visitors plugin inline CSS: meta spans must stay inline, not stacked blocks */
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-data .item-meta span {
    display: inline !important;
    margin: 0 !important;
    margin-top: 0 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    text-transform: none !important;
    color: inherit !important;
}

/* Action buttons row — stay on the right */
body.bp-user #friend-list .youzify-user-data .youzify-user-actions,
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-data .youzify-user-actions {
    margin-left: auto !important;
    width: auto !important;
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    display: flex !important;
    align-items: center !important;
    float: none !important;
    text-align: unset !important;
    vertical-align: unset !important;
}
body.bp-user #friend-list .youzify-user-actions .generic-button,
body.bp-user #friend-list .youzify-user-actions .friendship-button,
body.bp-user #friend-list .youzify-user-actions .message-button,
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .generic-button,
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button,
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .message-button {
    display: flex !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    float: none !important;
}
body.bp-user #friend-list .youzify-user-actions .generic-button a,
body.bp-user #friend-list .youzify-user-actions .friendship-button a,
body.bp-user #friend-list .youzify-user-actions .message-button a,
body.bp-user #friend-list .youzify-user-actions a.youzify-send-message,
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .generic-button a,
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button a,
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .message-button a,
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions a.youzify-send-message {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    min-height: 36px !important;
    height: auto !important;
    padding: 6px 14px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    text-align: center !important;
    line-height: 1.25 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Friend request accept / reject (Youzify wrapper on #friend-list + profile viewers list) — match green/red inline */
body.bp-user #friend-list .youzify-user-actions .generic-button a.accept,
body.bp-user #friend-list .youzify-user-actions .friendship-button a.accept,
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .generic-button a.accept,
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button a.accept {
    background: linear-gradient(135deg, #15803d, #22c55e) !important;
    color: #fff !important;
    border: 1px solid rgba(21, 128, 61, 0.9) !important;
}
body.bp-user #friend-list .youzify-user-actions .generic-button a.accept:hover,
body.bp-user #friend-list .youzify-user-actions .friendship-button a.accept:hover,
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .generic-button a.accept:hover,
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button a.accept:hover {
    background: linear-gradient(135deg, #166534, #16a34a) !important;
    border-color: #14532d !important;
    transform: translateY(-1px) !important;
}
body.bp-user #friend-list .youzify-user-actions .generic-button a.reject,
body.bp-user #friend-list .youzify-user-actions .friendship-button a.reject,
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .generic-button a.reject,
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button a.reject {
    background: linear-gradient(135deg, #b91c1c, #dc2626) !important;
    color: #fff !important;
    border: 1px solid rgba(153, 27, 27, 0.95) !important;
}
body.bp-user #friend-list .youzify-user-actions .generic-button a.reject:hover,
body.bp-user #friend-list .youzify-user-actions .friendship-button a.reject:hover,
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .generic-button a.reject:hover,
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button a.reject:hover {
    background: linear-gradient(135deg, #991b1b, #b91c1c) !important;
    border-color: #7f1d1d !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}
body.dark-mode.bp-user #friend-list .youzify-user-actions .generic-button a.accept,
body.dark-mode #friend-list .youzify-user-actions .friendship-button a.accept,
body.dark-mode.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .generic-button a.accept,
body.dark-mode .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button a.accept,
html[data-theme='dark'] body.bp-user #friend-list .youzify-user-actions .friendship-button a.accept,
html[data-theme='dark'] .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button a.accept {
    background: linear-gradient(135deg, #166534, #4ade80) !important;
    border-color: rgba(74, 222, 128, 0.45) !important;
    color: #f0fdf4 !important;
}
body.dark-mode.bp-user #friend-list .youzify-user-actions .generic-button a.accept:hover,
body.dark-mode #friend-list .youzify-user-actions .friendship-button a.accept:hover,
body.dark-mode.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .generic-button a.accept:hover,
body.dark-mode .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button a.accept:hover,
html[data-theme='dark'] body.bp-user #friend-list .youzify-user-actions .friendship-button a.accept:hover,
html[data-theme='dark'] .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button a.accept:hover {
    background: linear-gradient(135deg, #14532d, #22c55e) !important;
    border-color: #4ade80 !important;
}
body.dark-mode.bp-user #friend-list .youzify-user-actions .generic-button a.reject,
body.dark-mode #friend-list .youzify-user-actions .friendship-button a.reject,
body.dark-mode.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .generic-button a.reject,
body.dark-mode .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button a.reject,
html[data-theme='dark'] body.bp-user #friend-list .youzify-user-actions .friendship-button a.reject,
html[data-theme='dark'] .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button a.reject {
    background: linear-gradient(135deg, #7f1d1d, #dc2626) !important;
    border-color: rgba(248, 113, 113, 0.4) !important;
    color: #fef2f2 !important;
}
body.dark-mode.bp-user #friend-list .youzify-user-actions .generic-button a.reject:hover,
body.dark-mode #friend-list .youzify-user-actions .friendship-button a.reject:hover,
body.dark-mode.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .generic-button a.reject:hover,
body.dark-mode .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button a.reject:hover,
html[data-theme='dark'] body.bp-user #friend-list .youzify-user-actions .friendship-button a.reject:hover,
html[data-theme='dark'] .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button a.reject:hover {
    background: linear-gradient(135deg, #991b1b, #ef4444) !important;
    border-color: #fca5a5 !important;
    color: #fff !important;
}

/* Inline incoming-request Accept (green) / Reject (red): profile nav + all user-action rows (incl. #youzify-members-list) */
#item-header.youzify-social-buttons .friendship-button.tp-friend-awaiting-inline a.accept,
#youzify-members-list .youzify-user-actions .friendship-button.tp-friend-awaiting-inline a.accept,
.youzify-user-actions .friendship-button.tp-friend-awaiting-inline a.accept {
    background: linear-gradient(135deg, #15803d, #22c55e) !important;
    color: #fff !important;
    border: 1px solid rgba(21, 128, 61, 0.9) !important;
}
#item-header.youzify-social-buttons .friendship-button.tp-friend-awaiting-inline a.accept:hover,
#youzify-members-list .youzify-user-actions .friendship-button.tp-friend-awaiting-inline a.accept:hover,
.youzify-user-actions .friendship-button.tp-friend-awaiting-inline a.accept:hover {
    background: linear-gradient(135deg, #166534, #16a34a) !important;
    border-color: #14532d !important;
    transform: translateY(-1px) !important;
}
#item-header.youzify-social-buttons .friendship-button.tp-friend-awaiting-inline a.reject,
#youzify-members-list .youzify-user-actions .friendship-button.tp-friend-awaiting-inline a.reject,
.youzify-user-actions .friendship-button.tp-friend-awaiting-inline a.reject {
    background: linear-gradient(135deg, #b91c1c, #dc2626) !important;
    color: #fff !important;
    border: 1px solid rgba(153, 27, 27, 0.95) !important;
}
#item-header.youzify-social-buttons .friendship-button.tp-friend-awaiting-inline a.reject:hover,
#youzify-members-list .youzify-user-actions .friendship-button.tp-friend-awaiting-inline a.reject:hover,
.youzify-user-actions .friendship-button.tp-friend-awaiting-inline a.reject:hover {
    background: linear-gradient(135deg, #991b1b, #b91c1c) !important;
    border-color: #7f1d1d !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}
body.dark-mode #item-header.youzify-social-buttons .friendship-button.tp-friend-awaiting-inline a.accept,
html[data-theme='dark'] #item-header.youzify-social-buttons .friendship-button.tp-friend-awaiting-inline a.accept,
body.dark-mode #youzify-members-list .youzify-user-actions .friendship-button.tp-friend-awaiting-inline a.accept,
html[data-theme='dark'] #youzify-members-list .youzify-user-actions .friendship-button.tp-friend-awaiting-inline a.accept,
body.dark-mode .youzify-user-actions .friendship-button.tp-friend-awaiting-inline a.accept,
html[data-theme='dark'] .youzify-user-actions .friendship-button.tp-friend-awaiting-inline a.accept {
    background: linear-gradient(135deg, #166534, #4ade80) !important;
    border-color: rgba(74, 222, 128, 0.45) !important;
    color: #f0fdf4 !important;
}
body.dark-mode #item-header.youzify-social-buttons .friendship-button.tp-friend-awaiting-inline a.accept:hover,
html[data-theme='dark'] #item-header.youzify-social-buttons .friendship-button.tp-friend-awaiting-inline a.accept:hover,
body.dark-mode #youzify-members-list .youzify-user-actions .friendship-button.tp-friend-awaiting-inline a.accept:hover,
html[data-theme='dark'] #youzify-members-list .youzify-user-actions .friendship-button.tp-friend-awaiting-inline a.accept:hover,
body.dark-mode .youzify-user-actions .friendship-button.tp-friend-awaiting-inline a.accept:hover,
html[data-theme='dark'] .youzify-user-actions .friendship-button.tp-friend-awaiting-inline a.accept:hover {
    background: linear-gradient(135deg, #14532d, #22c55e) !important;
    border-color: #4ade80 !important;
}
body.dark-mode #item-header.youzify-social-buttons .friendship-button.tp-friend-awaiting-inline a.reject,
html[data-theme='dark'] #item-header.youzify-social-buttons .friendship-button.tp-friend-awaiting-inline a.reject,
body.dark-mode #youzify-members-list .youzify-user-actions .friendship-button.tp-friend-awaiting-inline a.reject,
html[data-theme='dark'] #youzify-members-list .youzify-user-actions .friendship-button.tp-friend-awaiting-inline a.reject,
body.dark-mode .youzify-user-actions .friendship-button.tp-friend-awaiting-inline a.reject,
html[data-theme='dark'] .youzify-user-actions .friendship-button.tp-friend-awaiting-inline a.reject {
    background: linear-gradient(135deg, #7f1d1d, #dc2626) !important;
    border-color: rgba(248, 113, 113, 0.4) !important;
    color: #fef2f2 !important;
}
body.dark-mode #item-header.youzify-social-buttons .friendship-button.tp-friend-awaiting-inline a.reject:hover,
html[data-theme='dark'] #item-header.youzify-social-buttons .friendship-button.tp-friend-awaiting-inline a.reject:hover,
body.dark-mode #youzify-members-list .youzify-user-actions .friendship-button.tp-friend-awaiting-inline a.reject:hover,
html[data-theme='dark'] #youzify-members-list .youzify-user-actions .friendship-button.tp-friend-awaiting-inline a.reject:hover,
body.dark-mode .youzify-user-actions .friendship-button.tp-friend-awaiting-inline a.reject:hover,
html[data-theme='dark'] .youzify-user-actions .friendship-button.tp-friend-awaiting-inline a.reject:hover {
    background: linear-gradient(135deg, #991b1b, #ef4444) !important;
    border-color: #fca5a5 !important;
    color: #fff !important;
}

/* Youzify/BP: .friendship-button.loading often sets pointer-events:none on links — never block Accept/Reject */
#item-header.youzify-social-buttons .friendship-button.tp-friend-awaiting-inline.loading,
#youzify-members-list .youzify-user-actions .friendship-button.tp-friend-awaiting-inline.loading,
.youzify-user-actions .friendship-button.tp-friend-awaiting-inline.loading {
    pointer-events: auto !important;
}
#item-header.youzify-social-buttons .friendship-button.tp-friend-awaiting-inline.loading a,
#youzify-members-list .youzify-user-actions .friendship-button.tp-friend-awaiting-inline.loading a,
.youzify-user-actions .friendship-button.tp-friend-awaiting-inline.loading a {
    pointer-events: auto !important;
    cursor: pointer !important;
    opacity: 1 !important;
}

/* Friends → Requests: BuddyPress empty state is #youzify div#message.info (“no pending…”).
   It uses the unified --tp-bnr-* notice styles above. Override here if you want this screen only:
   e.g. body.bp-user #youzify #message.info { max-width: 42rem; margin-inline: auto; } */

/* Friend requests (BP-native markup: li > .item-avatar + .item + .action) */
body.bp-user #friend-list > li {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    border: 1px solid var(--ol-border-color, #e6ecf5) !important;
    background: var(--ol-card-bg-color, #fff) !important;
    transition: background 0.15s, box-shadow 0.15s !important;
}
body.bp-user #friend-list > li:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
}
body.dark-mode.bp-user #friend-list > li {
    background: var(--ol-card-bg-color, #20232b) !important;
    border-color: var(--ol-border-color, #353946) !important;
}
body.dark-mode.bp-user #friend-list > li:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Avatar cell (BP native) */
body.bp-user #friend-list > li > .item-avatar {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.bp-user #friend-list > li > .item-avatar img.avatar {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    border: 2px solid var(--ol-border-color, #e6ecf5) !important;
}
body.dark-mode.bp-user #friend-list > li > .item-avatar img.avatar {
    border-color: var(--ol-border-color, #353946) !important;
}
body.bp-user #friend-list > li > .item-avatar .gamipress-buddypress-user-details {
    display: none !important;
}

/* Name + meta (BP native) */
body.bp-user #friend-list > li > .item {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.bp-user #friend-list > li > .item .item-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    margin: 0 0 2px !important;
}
body.bp-user #friend-list > li > .item .item-title a {
    color: var(--heading-font-color, #515365) !important;
    text-decoration: none !important;
    transition: color 0.15s !important;
}
body.bp-user #friend-list > li > .item .item-title a:hover {
    color: #7c3aed !important;
}
body.bp-user #friend-list > li > .item .item-meta {
    font-size: 12px !important;
    margin: 0 !important;
    color: var(--body-font-color, #888da8) !important;
}

/* Friend requests — Accept / Reject: modern paired buttons + uniform FA icons (::before) */
body.bp-user #friend-list > li > .action,
body.bp-user .youzify #friend-list > li > .action,
#youzify #friend-list > li > .action {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 !important;
    float: none !important;
    position: static !important;
    clear: none !important;
}

/* Strip theme/plugin icons so glyph size is never mismatched */
body.bp-user #friend-list > li > .action a.button i,
body.bp-user #friend-list > li > .action a.button .dashicons,
body.bp-user #friend-list > li > .action a.button img,
#youzify #friend-list > li > .action a.button i,
#youzify #friend-list > li > .action a.button .dashicons,
#youzify #friend-list > li > .action a.button img {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

body.bp-user #friend-list > li > .action a.button.accept,
body.bp-user #friend-list > li > .action a.button.reject,
#youzify #friend-list > li > .action a.button.accept,
#youzify #friend-list > li > .action a.button.reject {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 132px !important;
    width: 132px !important;
    max-width: 132px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    float: none !important;
    text-transform: none !important;
    -webkit-font-smoothing: antialiased !important;
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s !important;
}

/* Same icon box for both — FA solid, fixed metrics */
body.bp-user #friend-list > li > .action a.button.accept::before,
body.bp-user #friend-list > li > .action a.button.reject::before,
#youzify #friend-list > li > .action a.button.accept::before,
#youzify #friend-list > li > .action a.button.reject::before {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-style: normal !important;
    -webkit-font-smoothing: antialiased !important;
    pointer-events: none !important;
}

body.bp-user #friend-list > li > .action a.button.accept::before,
#youzify #friend-list > li > .action a.button.accept::before {
    content: '\f00c' !important;
}

body.bp-user #friend-list > li > .action a.button.reject::before,
#youzify #friend-list > li > .action a.button.reject::before {
    content: '\f00d' !important;
}

/* Accept — green (match profile / members inline) */
body.bp-user #friend-list > li > .action a.button.accept,
#youzify #friend-list > li > .action a.button.accept {
    background: linear-gradient(135deg, #15803d, #22c55e) !important;
    color: #fff !important;
    border: 1px solid rgba(21, 128, 61, 0.9) !important;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
body.bp-user #friend-list > li > .action a.button.accept:hover,
#youzify #friend-list > li > .action a.button.accept:hover {
    background: linear-gradient(135deg, #166534, #16a34a) !important;
    border-color: #14532d !important;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    transform: translateY(-1px) !important;
    color: #fff !important;
}
body.bp-user #friend-list > li > .action a.button.accept:focus-visible,
#youzify #friend-list > li > .action a.button.accept:focus-visible {
    outline: 2px solid #4ade80 !important;
    outline-offset: 2px !important;
}

/* Reject — red (solid, paired with Accept) */
body.bp-user #friend-list > li > .action a.button.reject,
#youzify #friend-list > li > .action a.button.reject {
    background: linear-gradient(135deg, #b91c1c, #dc2626) !important;
    color: #fff !important;
    border: 1px solid rgba(153, 27, 27, 0.95) !important;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
body.bp-user #friend-list > li > .action a.button.reject:hover,
#youzify #friend-list > li > .action a.button.reject:hover {
    background: linear-gradient(135deg, #991b1b, #b91c1c) !important;
    border-color: #7f1d1d !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35) !important;
    transform: translateY(-1px) !important;
}
body.bp-user #friend-list > li > .action a.button.reject:focus-visible,
#youzify #friend-list > li > .action a.button.reject:focus-visible {
    outline: 2px solid #fca5a5 !important;
    outline-offset: 2px !important;
}

/* Dark mode */
body.dark-mode.bp-user #friend-list > li > .action a.button.accept,
body.dark-mode #youzify #friend-list > li > .action a.button.accept {
    background: linear-gradient(135deg, #166534, #4ade80) !important;
    border-color: rgba(74, 222, 128, 0.45) !important;
    color: #f0fdf4 !important;
    box-shadow: 0 2px 10px rgba(34, 197, 94, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
body.dark-mode.bp-user #friend-list > li > .action a.button.accept:hover,
body.dark-mode #youzify #friend-list > li > .action a.button.accept:hover {
    background: linear-gradient(135deg, #14532d, #22c55e) !important;
    border-color: #4ade80 !important;
}
body.dark-mode.bp-user #friend-list > li > .action a.button.reject,
body.dark-mode #youzify #friend-list > li > .action a.button.reject {
    background: linear-gradient(135deg, #7f1d1d, #dc2626) !important;
    color: #fef2f2 !important;
    border-color: rgba(248, 113, 113, 0.4) !important;
    box-shadow: 0 2px 10px rgba(220, 38, 38, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
body.dark-mode.bp-user #friend-list > li > .action a.button.reject:hover,
body.dark-mode #youzify #friend-list > li > .action a.button.reject:hover {
    background: linear-gradient(135deg, #991b1b, #ef4444) !important;
    color: #fff !important;
    border-color: #fca5a5 !important;
}

html[data-theme='dark'] .bp-user #friend-list > li > .action a.button.accept,
html[data-theme='dark'] #youzify #friend-list > li > .action a.button.accept {
    background: linear-gradient(135deg, #166534, #4ade80) !important;
    border-color: rgba(74, 222, 128, 0.45) !important;
    color: #f0fdf4 !important;
    box-shadow: 0 2px 10px rgba(34, 197, 94, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
html[data-theme='dark'] .bp-user #friend-list > li > .action a.button.accept:hover,
html[data-theme='dark'] #youzify #friend-list > li > .action a.button.accept:hover {
    background: linear-gradient(135deg, #14532d, #22c55e) !important;
    border-color: #4ade80 !important;
}
html[data-theme='dark'] .bp-user #friend-list > li > .action a.button.reject,
html[data-theme='dark'] #youzify #friend-list > li > .action a.button.reject {
    background: linear-gradient(135deg, #7f1d1d, #dc2626) !important;
    color: #fef2f2 !important;
    border-color: rgba(248, 113, 113, 0.4) !important;
    box-shadow: 0 2px 10px rgba(220, 38, 38, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
html[data-theme='dark'] .bp-user #friend-list > li > .action a.button.reject:hover,
html[data-theme='dark'] #youzify #friend-list > li > .action a.button.reject:hover {
    background: linear-gradient(135deg, #991b1b, #ef4444) !important;
    color: #fff !important;
    border-color: #fca5a5 !important;
}

@keyframes tp-frq-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Accept in-flight: centered spinner (BuddyPress may add .loading; we add .tp-frq-accept-loading on click) */
body.bp-user #friend-list > li > .action a.button.accept.tp-frq-accept-loading,
body.bp-user #friend-list > li > .action a.button.accept.loading,
#youzify #friend-list > li > .action a.button.accept.tp-frq-accept-loading,
#youzify #friend-list > li > .action a.button.accept.loading {
    pointer-events: none !important;
    position: relative !important;
    color: transparent !important;
    text-shadow: none !important;
}
body.bp-user #friend-list > li > .action a.button.accept.tp-frq-accept-loading::before,
body.bp-user #friend-list > li > .action a.button.accept.loading::before,
#youzify #friend-list > li > .action a.button.accept.tp-frq-accept-loading::before,
#youzify #friend-list > li > .action a.button.accept.loading::before {
    opacity: 0 !important;
    width: 0 !important;
    flex-basis: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
}
body.bp-user #friend-list > li > .action a.button.accept.tp-frq-accept-loading::after,
body.bp-user #friend-list > li > .action a.button.accept.loading::after,
#youzify #friend-list > li > .action a.button.accept.tp-frq-accept-loading::after,
#youzify #friend-list > li > .action a.button.accept.loading::after {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 18px !important;
    height: 18px !important;
    margin: -9px 0 0 -9px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.28) !important;
    border-top-color: #fff !important;
    animation: tp-frq-spin 0.7s linear infinite !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
}

/* Post-AJAX status: same footprint as Accept pill (JS adds .tp-frq-status--accepted / --rejected) */
body.bp-user #friend-list > li > .action.tp-frq-status,
body.bp-user .youzify #friend-list > li > .action.tp-frq-status,
#youzify #friend-list > li > .action.tp-frq-status {
    justify-content: center !important;
    min-width: 132px !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    line-height: 1 !important;
    gap: 8px !important;
    overflow: visible !important;
    flex-wrap: nowrap !important;
}

body.bp-user #friend-list > li > .action.tp-frq-status a.button.reject,
#youzify #friend-list > li > .action.tp-frq-status a.button.reject {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
}

body.bp-user #friend-list > li > .action.tp-frq-status--accepted,
#youzify #friend-list > li > .action.tp-frq-status--accepted {
    background: linear-gradient(145deg, #059669 0%, #34d399 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 2px 10px rgba(5, 150, 105, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

body.bp-user #friend-list > li > .action.tp-frq-status--accepted::before,
#youzify #friend-list > li > .action.tp-frq-status--accepted::before {
    content: '\f00c' !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-style: normal !important;
    -webkit-font-smoothing: antialiased !important;
    pointer-events: none !important;
}

body.bp-user #friend-list > li > .action.tp-frq-status--rejected,
#youzify #friend-list > li > .action.tp-frq-status--rejected {
    background: linear-gradient(180deg, rgba(254, 242, 242, 0.95) 0%, rgba(254, 226, 226, 0.88) 100%) !important;
    color: #b91c1c !important;
    border: 1px solid rgba(248, 113, 113, 0.45) !important;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}

body.bp-user #friend-list > li > .action.tp-frq-status--rejected::before,
#youzify #friend-list > li > .action.tp-frq-status--rejected::before {
    content: '\f00d' !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    font-style: normal !important;
    -webkit-font-smoothing: antialiased !important;
    pointer-events: none !important;
}

body.dark-mode.bp-user #friend-list > li > .action.tp-frq-status--accepted,
body.dark-mode #youzify #friend-list > li > .action.tp-frq-status--accepted {
    background: linear-gradient(145deg, #047857 0%, #10b981 100%) !important;
    box-shadow: 0 2px 12px rgba(16, 185, 129, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

body.dark-mode.bp-user #friend-list > li > .action.tp-frq-status--rejected,
body.dark-mode #youzify #friend-list > li > .action.tp-frq-status--rejected {
    background: linear-gradient(180deg, rgba(127, 29, 29, 0.35) 0%, rgba(69, 10, 10, 0.45) 100%) !important;
    color: #fecaca !important;
    border-color: rgba(248, 113, 113, 0.35) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

html[data-theme='dark'] .bp-user #friend-list > li > .action.tp-frq-status--accepted,
html[data-theme='dark'] #youzify #friend-list > li > .action.tp-frq-status--accepted {
    background: linear-gradient(145deg, #047857 0%, #10b981 100%) !important;
    box-shadow: 0 2px 12px rgba(16, 185, 129, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

html[data-theme='dark'] .bp-user #friend-list > li > .action.tp-frq-status--rejected,
html[data-theme='dark'] #youzify #friend-list > li > .action.tp-frq-status--rejected {
    background: linear-gradient(180deg, rgba(127, 29, 29, 0.35) 0%, rgba(69, 10, 10, 0.45) 100%) !important;
    color: #fecaca !important;
    border-color: rgba(248, 113, 113, 0.35) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Accepted / Rejected only: center pill without stretching its background (flex spacers, pill stays auto width) */
body.bp-user #friend-list > li:has(> .action.tp-frq-status) > .item-avatar,
body.bp-user .youzify #friend-list > li:has(> .action.tp-frq-status) > .item-avatar,
#youzify #friend-list > li:has(> .action.tp-frq-status) > .item-avatar {
    order: 1 !important;
}
body.bp-user #friend-list > li:has(> .action.tp-frq-status) > .item,
body.bp-user .youzify #friend-list > li:has(> .action.tp-frq-status) > .item,
#youzify #friend-list > li:has(> .action.tp-frq-status) > .item {
    order: 2 !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
}
body.bp-user #friend-list > li:has(> .action.tp-frq-status)::before,
body.bp-user .youzify #friend-list > li:has(> .action.tp-frq-status)::before,
#youzify #friend-list > li:has(> .action.tp-frq-status)::before {
    content: '' !important;
    order: 3 !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    align-self: stretch !important;
}
body.bp-user #friend-list > li:has(> .action.tp-frq-status) > .action.tp-frq-status,
body.bp-user .youzify #friend-list > li:has(> .action.tp-frq-status) > .action.tp-frq-status,
#youzify #friend-list > li:has(> .action.tp-frq-status) > .action.tp-frq-status {
    order: 4 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: center !important;
}
body.bp-user #friend-list > li:has(> .action.tp-frq-status)::after,
body.bp-user .youzify #friend-list > li:has(> .action.tp-frq-status)::after,
#youzify #friend-list > li:has(> .action.tp-frq-status)::after {
    content: '' !important;
    order: 5 !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    align-self: stretch !important;
}

/* Pagination at bottom */
body.bp-user #friend-list + .pagination-links,
body.bp-user #pag-bottom {
    margin-top: 16px !important;
}

/* Mobile: card wraps, buttons go full-width below name */
@media (max-width: 560px) {
    body.bp-user #friend-list > li {
        flex-wrap: wrap !important;
    }
    body.bp-user #friend-list > li > .action {
        width: 100% !important;
        flex: 1 1 100% !important;
        margin-left: 0 !important;
    }
    /* Status pill: content-width only (avoid full-width green bar) */
    body.bp-user #friend-list > li:has(> .action.tp-frq-status)::before,
    body.bp-user #friend-list > li:has(> .action.tp-frq-status)::after,
    body.bp-user .youzify #friend-list > li:has(> .action.tp-frq-status)::before,
    body.bp-user .youzify #friend-list > li:has(> .action.tp-frq-status)::after,
    #youzify #friend-list > li:has(> .action.tp-frq-status)::before,
    #youzify #friend-list > li:has(> .action.tp-frq-status)::after {
        display: none !important;
        content: none !important;
        flex: 0 0 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    body.bp-user #friend-list > li:has(> .action.tp-frq-status) > .item-avatar,
    body.bp-user .youzify #friend-list > li:has(> .action.tp-frq-status) > .item-avatar,
    #youzify #friend-list > li:has(> .action.tp-frq-status) > .item-avatar,
    body.bp-user #friend-list > li:has(> .action.tp-frq-status) > .item,
    body.bp-user .youzify #friend-list > li:has(> .action.tp-frq-status) > .item,
    #youzify #friend-list > li:has(> .action.tp-frq-status) > .item,
    body.bp-user #friend-list > li:has(> .action.tp-frq-status) > .action.tp-frq-status,
    body.bp-user .youzify #friend-list > li:has(> .action.tp-frq-status) > .action.tp-frq-status,
    #youzify #friend-list > li:has(> .action.tp-frq-status) > .action.tp-frq-status {
        order: unset !important;
    }
    body.bp-user #friend-list > li > .action.tp-frq-status--accepted,
    body.bp-user #friend-list > li > .action.tp-frq-status--rejected,
    #youzify #friend-list > li > .action.tp-frq-status--accepted,
    #youzify #friend-list > li > .action.tp-frq-status--rejected {
        width: fit-content !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        align-self: center !important;
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    body.bp-user #friend-list > li > .action a.button,
    body.bp-user #friend-list > li > .action a.button.accept,
    body.bp-user #friend-list > li > .action a.button.reject,
    #youzify #friend-list > li > .action a.button,
    #youzify #friend-list > li > .action a.button.accept,
    #youzify #friend-list > li > .action a.button.reject {
        flex: 1 1 0% !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        text-align: center !important;
    }
    body.bp-user #friend-list .youzify-user-data {
        flex-wrap: wrap !important;
    }
    body.bp-user #friend-list .youzify-user-data .youzify-user-actions {
        width: 100% !important;
        flex: 1 1 100% !important;
        flex-direction: row !important;
        margin-left: 0 !important;
    }
    body.bp-user #friend-list .youzify-user-actions .generic-button,
    body.bp-user #friend-list .youzify-user-actions .friendship-button,
    body.bp-user #friend-list .youzify-user-actions .message-button {
        flex: 1 1 0% !important;
    }
    body.bp-user #friend-list .youzify-user-actions .generic-button a,
    body.bp-user #friend-list .youzify-user-actions .friendship-button a,
    body.bp-user #friend-list .youzify-user-actions .message-button a,
    body.bp-user #friend-list .youzify-user-actions a.youzify-send-message {
        flex: 1 1 0% !important;
        width: 100% !important;
        text-align: center !important;
    }
}

/* Add Friend (not yet friends) — same look on list row + profile header */
.youzify-user-actions .friendship-button.not_friends a,
.youzify-user-actions .friendship-button a.add,
#item-header.youzify-social-buttons .friendship-button.not_friends a,
#item-header.youzify-social-buttons .friendship-button a.add {
    background: rgba(124, 58, 237, 0.12) !important;
    color: #6d28d9 !important;
    border: 1px solid rgba(124, 58, 237, 0.35) !important;
}
.youzify-user-actions .friendship-button.not_friends a:hover,
.youzify-user-actions .friendship-button a.add:hover,
#item-header.youzify-social-buttons .friendship-button.not_friends a:hover,
#item-header.youzify-social-buttons .friendship-button a.add:hover {
    background: rgba(124, 58, 237, 0.2) !important;
    border-color: rgba(124, 58, 237, 0.55) !important;
    color: #5b21b6 !important;
    transform: translateY(-1px);
}
body.dark-mode .youzify-user-actions .friendship-button.not_friends a,
body.dark-mode .youzify-user-actions .friendship-button a.add,
body.dark-mode #item-header.youzify-social-buttons .friendship-button.not_friends a,
body.dark-mode #item-header.youzify-social-buttons .friendship-button a.add {
    background: rgba(167, 139, 250, 0.15) !important;
    color: #e9d5ff !important;
    border-color: rgba(167, 139, 250, 0.45) !important;
}
body.dark-mode .youzify-user-actions .friendship-button.not_friends a:hover,
body.dark-mode .youzify-user-actions .friendship-button a.add:hover,
body.dark-mode #item-header.youzify-social-buttons .friendship-button.not_friends a:hover,
body.dark-mode #item-header.youzify-social-buttons .friendship-button a.add:hover {
    background: rgba(167, 139, 250, 0.25) !important;
    border-color: rgba(196, 181, 253, 0.55) !important;
    color: #fff !important;
}
/* Pending / Cancel Request — amber style */
.youzify-user-actions .friendship-button.pending a,
.youzify-user-actions .friendship-button.waiting a,
.youzify-user-actions .friendship-button.pending_friend a,
#item-header.youzify-social-buttons .friendship-button.pending a,
#item-header.youzify-social-buttons .friendship-button.waiting a,
#item-header.youzify-social-buttons .friendship-button.pending_friend a,
a.friendship-button.requested,
a.friendship-button.pending_friend {
    background: rgba(245, 158, 11, 0.14) !important;
    color: #b45309 !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
}
.youzify-user-actions .friendship-button.pending a:hover,
.youzify-user-actions .friendship-button.waiting a:hover,
.youzify-user-actions .friendship-button.pending_friend a:hover,
#item-header.youzify-social-buttons .friendship-button.pending a:hover,
#item-header.youzify-social-buttons .friendship-button.waiting a:hover,
#item-header.youzify-social-buttons .friendship-button.pending_friend a:hover,
a.friendship-button.requested:hover,
a.friendship-button.pending_friend:hover {
    background: rgba(245, 158, 11, 0.22) !important;
    color: #92400e !important;
    border-color: rgba(245, 158, 11, 0.55) !important;
}
body.dark-mode .youzify-user-actions .friendship-button.pending a,
body.dark-mode .youzify-user-actions .friendship-button.waiting a,
body.dark-mode .youzify-user-actions .friendship-button.pending_friend a,
body.dark-mode #item-header.youzify-social-buttons .friendship-button.pending a,
body.dark-mode #item-header.youzify-social-buttons .friendship-button.waiting a,
body.dark-mode #item-header.youzify-social-buttons .friendship-button.pending_friend a,
body.dark-mode a.friendship-button.requested,
body.dark-mode a.friendship-button.pending_friend {
    background: rgba(245, 158, 11, 0.18) !important;
    color: #fcd34d !important;
    border-color: rgba(251, 191, 36, 0.35) !important;
}
body.dark-mode .youzify-user-actions .friendship-button.pending a:hover,
body.dark-mode .youzify-user-actions .friendship-button.waiting a:hover,
body.dark-mode .youzify-user-actions .friendship-button.pending_friend a:hover,
body.dark-mode #item-header.youzify-social-buttons .friendship-button.pending a:hover,
body.dark-mode #item-header.youzify-social-buttons .friendship-button.waiting a:hover,
body.dark-mode #item-header.youzify-social-buttons .friendship-button.pending_friend a:hover,
body.dark-mode a.friendship-button.requested:hover,
body.dark-mode a.friendship-button.pending_friend:hover {
    background: rgba(245, 158, 11, 0.28) !important;
    color: #fde68a !important;
    border-color: rgba(251, 191, 36, 0.5) !important;
}

/* (profile navmenu friendship buttons: no special overrides — global styles apply for consistency) */

/* ═══ Global: Friendship / Message button icons (mask-image inherits text color) ═══ */
.friendship-button a::before,
.message-button a::before,
a.youzify-send-message::before,
a[rel="add"]::before,
a[rel="remove"]::before,
a.add.friendship-button::before,
a.remove.friendship-button::before,
a.requested.friendship-button::before,
a.pending_friend.friendship-button::before {
    content: '' !important;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    background-color: currentColor !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
}
/* Add Friend icon (user-plus) */
.friendship-button a.add::before,
.friendship-button.not_friends a::before,
a[rel="add"]::before,
a.add.friendship-button::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='white' d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM504 312V248H440c-13.3 0-24-10.7-24-24s10.7-24 24-24h64V136c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H552v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='white' d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM504 312V248H440c-13.3 0-24-10.7-24-24s10.7-24 24-24h64V136c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H552v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/svg%3E") !important;
}
/* Unfriend / Remove icon (user-minus) */
.friendship-button a.remove::before,
.friendship-button.is_friend a::before,
a[rel="remove"]::before,
a.remove.friendship-button::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='white' d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM600 240H440c-13.3 0-24-10.7-24-24s10.7-24 24-24H600c13.3 0 24 10.7 24 24s-10.7 24-24 24z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='white' d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM600 240H440c-13.3 0-24-10.7-24-24s10.7-24 24-24H600c13.3 0 24 10.7 24 24s-10.7 24-24 24z'/%3E%3C/svg%3E") !important;
}
/* Accept icon (check) */
.friendship-button a.accept::before,
a.accept.friendship-button::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='white' d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E") !important;
}
/* Reject icon (x-mark) */
.friendship-button a.reject::before,
a.reject.friendship-button::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='white' d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 12.5 32.8 0 45.3s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='white' d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 12.5 32.8 0 45.3s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E") !important;
}
/* Pending / Awaiting / Cancel Request icon (clock) */
.friendship-button a.awaiting::before,
.friendship-button.pending a::before,
.friendship-button.waiting a::before,
.friendship-button.pending_friend a::before,
a.awaiting.friendship-button::before,
a.requested.friendship-button::before,
a.pending_friend.friendship-button::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M256 0a256 256 0 1 1 0 512A256 256 0 1 1 256 0zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M256 0a256 256 0 1 1 0 512A256 256 0 1 1 256 0zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z'/%3E%3C/svg%3E") !important;
}
/* Message icon (envelope) */
.message-button a::before,
a.youzify-send-message::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='white' d='M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z'/%3E%3C/svg%3E") !important;
}

/* ═══ Embed card: Message button — match Add Friend sizing + purple gradient ═══ */
body .youzify .youzify-embed-action .message-button a,
body .youzify .youzify-embed-action a.youzify-send-message {
    background: linear-gradient(145deg, #7c3aed, #a78bfa) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25) !important;
}
body .youzify .youzify-embed-action .message-button a:hover,
body .youzify .youzify-embed-action a.youzify-send-message:hover {
    background: linear-gradient(145deg, #6d28d9, #8b5cf6) !important;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35) !important;
    transform: translateY(-1px) !important;
}
/* Dark mode embed Message button */
body.dark-mode .youzify .youzify-embed-action .message-button a,
html[data-theme='dark'] .youzify .youzify-embed-action .message-button a,
body.dark-mode .youzify .youzify-embed-action a.youzify-send-message,
html[data-theme='dark'] .youzify .youzify-embed-action a.youzify-send-message {
    background: linear-gradient(145deg, #7c3aed, #a78bfa) !important;
    color: #fff !important;
}

/* Profile header (#item-header): Add Friend / Message — mirror .youzify-user-actions */
#item-header.youzify-social-buttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
#item-header.youzify-social-buttons .generic-button,
#item-header.youzify-social-buttons .friendship-button,
#item-header.youzify-social-buttons .message-button {
    display: contents !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}
#item-header.youzify-social-buttons .generic-button a,
#item-header.youzify-social-buttons .friendship-button a,
#item-header.youzify-social-buttons .message-button a,
#item-header.youzify-social-buttons a.youzify-send-message {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    min-height: 42px !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    border: 1px solid transparent;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}
#item-header.youzify-social-buttons .message-button a,
#item-header.youzify-social-buttons a.youzify-send-message {
    background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
    color: #fff !important;
}
#item-header.youzify-social-buttons .message-button a:hover,
#item-header.youzify-social-buttons a.youzify-send-message:hover {
    background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
    color: #fff !important;
    transform: translateY(-1px);
}
#item-header.youzify-social-buttons .friendship-button.is_friend a,
#item-header.youzify-social-buttons .friendship-button a.remove {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #555 !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}
#item-header.youzify-social-buttons .friendship-button.is_friend a:hover,
#item-header.youzify-social-buttons .friendship-button a.remove:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    color: #dc2626 !important;
}
body.dark-mode #item-header.youzify-social-buttons .message-button a,
body.dark-mode #item-header.youzify-social-buttons a.youzify-send-message {
    background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
    color: #fff !important;
}
body.dark-mode #item-header.youzify-social-buttons .friendship-button.is_friend a,
body.dark-mode #item-header.youzify-social-buttons .friendship-button a.remove {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #e4e4e7 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}
body.dark-mode #item-header.youzify-social-buttons .friendship-button.is_friend a:hover,
body.dark-mode #item-header.youzify-social-buttons .friendship-button a.remove:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #fca5a5 !important;
}

/* body.dark-mode .youzify-navbar-item.youzify-active-menu{
    border-bottom-color: #fff !important;
} */

/* body.dark-mode .item-list-tabs{
    background: #000 !important;
    border-top: 1px solid #fff;
} */
/* body.dark-mode form#youzify-wall-form,
body.dark-mode form#youzify-wall-form *:not(div#map *){
    background: #000 !important;
} */
p{
color: #000
}
body.dark-mode a,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode p{
    color: #fff !important;
}
body.dark-mode .tpp-card.tpp-card {
    color: #f0ede8 !important;
}
body.dark-mode .tpp-card.tpp-card a {
    color: inherit !important;
    text-decoration: none !important;
}
body.dark-mode .tpp-card.tpp-card .tpp-added-name {
    color: #f5a623 !important;
}
body.dark-mode .tpp-card.tpp-card .tpp-action-detail {
    color: #4ade80 !important;
}
body.dark-mode .tpp-card.tpp-card .tpp-stat-clickable {
    color: #888 !important;
}
body.dark-mode .tpp-card.tpp-card .tpp-stat-clickable .tpp-stat-val {
    color: #f0ede8 !important;
}
body.dark-mode .tpp-card.tpp-card .tpp-icon-btn {
    color: #888 !important;
}
body.dark-mode .tpp-card.tpp-card .tpp-stat-lbl {
    color: #888 !important;
}
body.dark-mode .default-font-color{
    color: #333 !important;
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip{
    background: #333;
}
  
body.dark-mode .navbar, body.dark-mode .footer,
body.dark-mode .vc_col-has-fill .vc_column-inner {
    background-color: #20232b !important;
}

body.dark-mode .dark-bg-sec{
    background-color: #20232b !important;
}


#dark-mode-toggle {
    position: fixed;
    bottom: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    right: 20px;
    z-index: 9999;
    background-color: #fff;
    color: #000;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
}
@media (max-width: 767px) {
    #dark-mode-toggle {
        right: auto !important;
        left: 12px !important;
        bottom: 12px !important;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
}

body.dark-mode #dark-mode-toggle {
    background-color: #333;
    color: #fff;
}
/* body.dark-mode ul#activity-stream li.activity-item *:not(.tresspassers-posted-locations *),
body.dark-mode .yzpr-bar,
body.dark-mode .leaflet-popup *:not(.leaflet-popup-tip-container),
body.dark-mode .youzify-widget-main-content,
body.dark-mode .youzify-media.youzify-media-box,
body.dark-mode .youzify-media-filter,
body.dark-mode .youzify-media-no-items,
body.dark-mode .info,
body.dark-mode ul.youzify-nav-view-more-menu,
body.dark-mode .bbp-search-form,
body.dark-mode .youzify-user-data,
body.dark-mode .youzify-settings-menu{
    background: #000000 !important;
} */

/* body.dark-mode div#message.info, #message.info,
body.dark-mode .bbp-template-notice{
    background: #000000 !important;
    border-left: 4px solid #fff !important;
} */
/* body.dark-mode #youzify .acomment-options .yz-post-reactors-list a,
body.dark-mode #youzify .youzify-activity-statistics .yz-post-reactors-list a:not(.yzpr-reactions-count){
    border: none !important
} */
.leaflet-popup-content
/* body.dark-mode .youzify-post-comments-count,
body.dark-mode textarea.ac-input.bp-suggestions,
body.dark-mode .youzify-infos-content .youzify-info-label,
body.dark-mode .youzify-settings-menu a,
body.dark-mode #youzify-profile-navmenu .youzify-settings-menu a:hover span,
body.dark-mode .youzify-tool-name { */
{
    color: #20232b !important;
}
body.dark-mode .leaflet-popup-content{
    color: #fff !important;
}
/* body.dark-mode .leaflet-popup,
body.dark-mode .leaflet-popup-tip{
    border: 1px solid #fff !important;
} */
body.dark-mode .leaflet-control-zoom a span{
    color: #20232b !important;
}
body.dark-mode select#location-difficulty {
    border: 1px solid #fff !important;
    color: #fff !important;
}
@media (max-width: 576px) {
   
    .card-text h2 {
      font-size: 1.2rem;
    }

    .card-text p {
      font-size: 0.85rem;
    }
    .order-3{
        order: 3;
    }
}
/* Full screen overlay */
#site-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* Spinner style */
.loader-spinner {
    border: 6px solid #f3f3f3;
    border-top: 6px solid #000;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Hide when loaded */
#site-loader.loaded {
    opacity: 0;
    visibility: hidden;
}

.premium-blur {
    position: relative;
    display: inline-block;
    filter: blur(5px);
    cursor: not-allowed;
    pointer-events: auto;
}
span.premium-blur:hover {
    filter: none !important;
}
/* Verify count, reviews, and explore stats: never unblur on hover */
.premium-blur.tp-blur-locked,
.tp-reviews-blurred .premium-blur,
.tp-pin-popup-stats-blurred .premium-blur {
    pointer-events: none;
    user-select: none;
}
.premium-blur.tp-blur-locked:hover,
.tp-reviews-blurred .premium-blur:hover,
.tp-pin-popup-stats-blurred .premium-blur:hover {
    filter: blur(5px) !important;
    cursor: not-allowed;
}
.premium-blur.tp-blur-locked::after,
.tp-reviews-blurred .premium-blur::after,
.tp-pin-popup-stats-blurred .premium-blur::after {
    content: "Upgrade to premium to see this";
}
  /* Tooltip on hover */
.premium-blur::after {
    content: "Become a premium member to see the rating";
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    margin-top: 4px;
    z-index: 10;
}
  
.premium-blur:hover::after {
    opacity: 1;
}
/* Apply/Reset removed from explore; hide if any old/cached script injects them */
body #filter-apply,
body #map-clear,
body form#map-filter-form .form-cta,
body .form-cta button,
#filter-apply,
#map-clear,
form#map-filter-form .form-cta {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}



.tp-contact-form {
    max-width: 100%;
    margin: 0 auto;
    font-family: Arial, sans-serif;
  }
  
.tp-contact-form .form-row {
    display: flex;
    gap: 20px;
  }
  
  .tp-contact-form .form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 45px;
  }
  
  .tp-contact-form label {
    margin-bottom: 8px;
    font-size: 15px;
    color: #222;
  }
 
  .tp-contact-form input,
  .tp-contact-form textarea {
    border: none;
    border-bottom: 1px solid #000 !important;
    padding: 6px 2px !important;
    font-size: 15px;
    outline: none;
    resize: none;
    border-radius: 0px;
    background: transparent !important;
  }
body.dark-mode .tp-contact-form input, 
body.dark-mode .tp-contact-form textarea{
    border-bottom: 1px solid #fff !important;
}
.tp-contact-form textarea {
    min-height: 80px;
}
  
  .tp-contact-form .form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
  
  .tp-contact-form button {
    background: #000;
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    transition: background 0.3s ease;
  }
  
  .tp-contact-form button:disabled {
    background: #555;
    cursor: not-allowed;
  }

  /* Style placeholder text */
.tp-contact-form input::placeholder,
.tp-contact-form textarea::placeholder {
  color: #000;        /* light gray */
  font-size: 16px;    /* adjust size */
  opacity: 1;         /* ensure full visibility across browsers */
  font-family: "Inter", sans-serif;
}

/* Firefox specific fix */
.tp-contact-form input:-moz-placeholder,
.tp-contact-form textarea:-moz-placeholder {
  color: #000;
  font-size: 16px;
  opacity: 1;
  font-family: "Inter", sans-serif;
}

/* Most modern browsers */
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #fff;     
}

/* WebKit/Blink (Safari/older Chrome fallback) */
body.dark-mode input::-webkit-input-placeholder,
body.dark-mode textarea::-webkit-input-placeholder {
  color: #fff;
}

/* Firefox */
body.dark-mode input::-moz-placeholder,
body.dark-mode textarea::-moz-placeholder {
  color: #fff;
}
button#submitBtn{
    background: #20232b;
    color: #fff;
    padding: 10px 58px;
    font-size: 16px;
}

body.dark-mode button#submitBtn{
    background: #fff;
    color: #1E1E1E;
}

.tp-contact-form .is-invalid{
    border-bottom-color: #dc3545 !important;
    padding-right: calc(1.5em + .75rem) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right calc(.375em + .1875rem) center !important;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem) !important;
  }
  
  .tp-contact-form .is-invalid:focus{
    border-color: #dc3545;
    box-shadow: 0 0 0 .2rem rgba(220,53,69,.25)
  }
  
  .tp-contact-form textarea.invalid,
  .tp-contact-form textarea.is-invalid {
    padding-right: calc(1.5em + .75rem);
    background-position: top calc(.375em + .1875rem) right calc(.375em + .1875rem)
  }
  
  .form-check-input.is-invalid~.form-check-label,.was-validated .form-check-input:invalid~.form-check-label {
    color: #dc3545
  }
  .field-error{
  text-transform: capitalize;
  margin-top: 10px;
  color: #fe2854;
}
to makle it/* Report location form (shortcode tp_report_location) */
.tp-report-form-wrap { max-width: 480px; margin: 1em 0; }
.tp-report-intro { margin-bottom: 0.25em; }
.tp-report-location-name { margin-bottom: 1em; font-size: 1.05em; }
.tp-report-id { color: #666; font-weight: normal; }
.tp-report-form .form-group { margin-bottom: 1em; }
.tp-report-form label { display: block; margin-bottom: 0.25em; font-weight: 600; }
.tp-report-form select,
.tp-report-form textarea { width: 100%; padding: 8px 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
.tp-report-form .form-actions { margin-top: 1.25em; }
.tp-report-form button[type="submit"] { padding: 10px 20px; background: #1a1a1a; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
.tp-report-form button[type="submit"]:hover { background: #333; }
.tp-report-form button[type="submit"]:disabled { opacity: 0.7; cursor: not-allowed; }
.tp-report-response { margin-top: 10px; }
.tp-report-success { padding: 1em; background: #d4edda; border-radius: 6px; }
.tp-report-empty { padding: 1em; color: #666; }

#contact-success-message {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    padding: 15px 20px;
    border-radius: 6px;
    font-weight: 500;
    margin-bottom: 20px;
    font-size: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: .2em;
  }
  .spinner-border {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: text-bottom;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: spinner-border .75s linear infinite;
    animation: spinner-border .75s linear infinite;
    margin-left: 10px;
  }
  @-webkit-keyframes spinner-border {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
  }
  
  @keyframes spinner-border {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
  }

.contact-info-box{
    background: #F3F3F3;
    border-radius: 8px;
    padding: 10px 25px;
}

body.dark-mode .contact-info-box{
    background: #3B3B3B;
}

.contact-info-box h1 {
    font-size: 18px;
    font-weight: bold;
    color: #000;
}
.contact-info-box p{
    font-size: 14px;
    margin-bottom: 10px;
}
.body.dark-mode .contact-info-box h1 {
    color: #fff;
}

.aboutus-tagline p{
    text-align: center;
    font-size: 20px;
    font-family: "Inter", sans-serif;
    font-weight: 300;
    width: 100%;
    margin: 0 auto;
    line-height: 160%;
    max-width: 65%;
}
.aboutus-desc p{
    text-align: left;
    font-size: 20px;
    font-family: "Inter", sans-serif;
    font-weight: 300;
    width: 100%;
    line-height: 160%;
}
body.page-template-template-map .leaflet-popup-content{
    min-width: 300px !important;
}
/* Add location mode: crosshair when placing a spot */
#map.add-location-cursor {
  cursor: crosshair !important;
}

/* Temporary red pin shown at searched city/address; disappears on map click or new search */
#map .tp-search-temp-pin,
#map path.tp-search-temp-pin {
  cursor: pointer;
}
/* Zoom control removed (map uses zoomControl: false) */
#map .leaflet-control-zoom {
  display: none !important;
}

/* Add location + Saved places (right side with search/Layers/Filters); button icons */
.tp-btn-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.35em;
  vertical-align: -0.15em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.tp-icon-plus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}
.tp-icon-saved {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}
.add-location-control {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.add-location-control .add-location-btn {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
  color: #1a1a1a;
  border: 2px solid #333;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  display: inline-flex;
  align-items: center;
}
.add-location-control .add-location-btn:hover {
  background: #f0f0f0;
  border-color: #555;
}
.add-location-control .saved-places-btn {
  display: inline-flex;
  align-items: center;
  width: 100%;
}
.add-location-control .saved-places-btn.active {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}
.add-location-control .saved-places-btn.active .tp-icon-saved {
  filter: brightness(0) invert(1);
}
.add-location-control .saved-places-btn.active:hover {
  background: #333;
  color: #fff;
}
.add-location-btn.active {
  background: #4a9cf6 !important;
  color: #fff !important;
  border-color: #4a9cf6 !important;
}
.add-location-btn.active:hover {
  background: #5aacff !important;
  border-color: #5aacff !important;
}
body.dark-mode .add-location-btn.active {
  background: #4a9cf6 !important;
  color: #fff !important;
  border-color: #4a9cf6 !important;
}
body.dark-mode .add-location-btn.active:hover {
  background: #5aacff !important;
  border-color: #5aacff !important;
}

/* Saved places: separate control (same button style as when it was under add-location-control) */
.saved-places-control .saved-places-btn {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
  color: #1a1a1a;
  border: 2px solid #333;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  display: inline-flex;
  align-items: center;
  width: 100%;
}
.saved-places-control .saved-places-btn:hover {
  background: #f0f0f0;
  border-color: #555;
}
.saved-places-control .saved-places-btn.active {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}
.saved-places-control .saved-places-btn.active .tp-icon-saved {
  filter: brightness(0) invert(1);
}
.saved-places-control .saved-places-btn.active:hover {
  background: #333;
  color: #fff;
}

/* Old popup card rules removed — see tpp-* styles */

/* 📷 Pin image lightbox (click thumb = open on screen, not new tab) */
.tp-pin-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.2s, opacity 0.2s;
}
.tp-pin-lightbox.tp-pin-lightbox-open {
  visibility: visible;
  opacity: 1;
}
.tp-pin-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}
.tp-pin-lightbox-inner {
  position: relative;
  max-width: 95vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.tp-pin-lightbox-img {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.tp-pin-lightbox-close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  color: #333;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.tp-pin-lightbox-close:hover {
  background: #fff;
}
/* Old popup button/notes/difficulty rules removed — see tpp-* styles */

/* Share link copied toast */
.tp-share-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 18px;
  background: #1a1a1a;
  color: #fff;
  font-size: 14px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 100000;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.tp-share-toast.tp-share-toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

p.chck.tp-difficulty-rating {
    font-size: 14px;
    color: #000;
    text-align: left !important;
}

p.chck.tp-difficulty-rating span.dif-rating{
    font-size: 13px;
    margin-left: 5px;
}
.our-values img {
    max-width: 75%;
}
/* (legacy footer overrides removed — see stacked footer block near top of file) */
/* ═══ Badges tab: modern centered card grid ═══ */
/* Hide filter dropdown on profile badge tab (only earned badges shown) */
.youzify-tab div#gamipress-achievements-filters-wrap,
.youzify-custom-tab div#gamipress-achievements-filters-wrap {
    display: none;
}
/* All-badges catalog page: show & style the filter/search controls */
#gamipress-achievements-filters-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
#gamipress-achievements-filter {
    display: flex;
    align-items: center;
    gap: 8px;
}
#gamipress-achievements-filter label {
    font-size: 14px;
    font-weight: 600;
}
#gamipress-achievements-filter select,
#achievements_list_filter {
    padding: 10px 14px !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 10px !important;
    background: #f9fafb !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1a1d24 !important;
    -webkit-appearance: none;
    appearance: none;
    min-width: 180px;
}
body.dark-mode #gamipress-achievements-filter select,
body.dark-mode #achievements_list_filter {
    border-color: rgba(255, 255, 255, 0.14) !important;
    background: rgba(0, 0, 0, 0.25) !important;
    color: #f3f4f6 !important;
}
#gamipress-achievements-search {
    flex: 1 1 auto;
    min-width: 200px;
}
#gamipress-achievements-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
}
#gamipress-achievements-search-form label {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}
#gamipress-achievements-search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 14px !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 10px !important;
    background: #f9fafb !important;
    font-size: 14px !important;
    color: #1a1d24 !important;
    box-sizing: border-box;
}
body.dark-mode #gamipress-achievements-search-input {
    border-color: rgba(255, 255, 255, 0.14) !important;
    background: rgba(0, 0, 0, 0.25) !important;
    color: #f3f4f6 !important;
}
#gamipress-achievements-search-submit {
    padding: 10px 18px !important;
    border: none !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer;
    white-space: nowrap;
}
#gamipress-achievements-search-submit:hover {
    background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
}
/* Hide the nice-select override on catalog page (use native select) */
#gamipress-achievements-filter .nice-select {
    display: none !important;
}
#gamipress-achievements-filter select {
    display: block !important;
}
.gamipress-achievements-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 16px !important;
    padding: 0 !important;
}
.gamipress-achievement {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: auto !important;
    padding: 20px 16px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: rgba(0, 0, 0, 0.02) !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}
.gamipress-achievement:hover {
    border-color: rgba(124, 58, 237, 0.3) !important;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.08) !important;
}
.gamipress-achievement.user-has-earned {
    border-color: rgba(124, 58, 237, 0.2) !important;
    background: rgba(124, 58, 237, 0.04) !important;
    position: relative !important;
}
.gamipress-achievement.user-has-earned::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: 50%;
    background: #059669;
    color: #fff;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.3);
    pointer-events: none;
}
body.dark-mode .gamipress-achievement {
    border-color: rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.03) !important;
}
body.dark-mode .gamipress-achievement:hover {
    border-color: rgba(167, 139, 250, 0.35) !important;
    box-shadow: 0 4px 16px rgba(167, 139, 250, 0.1) !important;
}
body.dark-mode .gamipress-achievement.user-has-earned {
    border-color: rgba(167, 139, 250, 0.2) !important;
    background: rgba(167, 139, 250, 0.06) !important;
}
body.dark-mode .gamipress-achievement.user-has-earned::after {
    background: #10b981;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
}
.gamipress-achievement-image {
    width: auto !important;
    margin: 0 0 12px !important;
    float: none !important;
}
.gamipress-achievement-image img {
    width: 64px !important;
    height: 64px !important;
    display: block !important;
    margin: 0 auto !important;
}
.gamipress-achievement-description {
    width: 100% !important;
    float: none !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
}
.gamipress-achievement-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 0 8px !important;
    line-height: 1.3 !important;
}
.gamipress-achievement-title a {
    text-decoration: none !important;
    color: inherit !important;
}
.gamipress-achievement-excerpt {
    font-size: 13px !important;
    line-height: 1.45 !important;
    opacity: 0.75;
    margin: 0 0 8px !important;
}
/* Show steps (how to earn) below each badge */
.gamipress-achievement-attached {
    display: block !important;
    width: 100% !important;
    margin-top: 6px !important;
}
.gamipress-open-close-switch {
    display: none !important;
}
.gamipress-extras-window {
    display: block !important;
}
.gamipress-achievement-steps-heading {
    display: none !important;
}
.gamipress-achievement-steps,
.gamipress-required-achievements {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.gamipress-achievement-steps li,
.gamipress-required-achievements li {
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #6b7280 !important;
    padding: 4px 10px !important;
    margin: 0 !important;
    background: rgba(0, 0, 0, 0.04) !important;
    border-radius: 8px !important;
    text-decoration: none !important;
}
.gamipress-required-achievements li.user-has-earned {
    color: #059669 !important;
    background: rgba(5, 150, 105, 0.08) !important;
}
body.dark-mode .gamipress-achievement-steps li,
body.dark-mode .gamipress-required-achievements li {
    color: #9ca3af !important;
    background: rgba(255, 255, 255, 0.06) !important;
}
body.dark-mode .gamipress-required-achievements li.user-has-earned {
    color: #6ee7b7 !important;
    background: rgba(110, 231, 183, 0.1) !important;
}
/* Badge earned date on profile badges tab */
.tp-badge-earned-date {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 500;
    color: #059669;
    opacity: 0.85;
}
.tp-badge-earned-date i {
    margin-right: 4px;
    font-size: 10px;
}
body.dark-mode .tp-badge-earned-date {
    color: #6ee7b7;
}
/* Total badge count header on all-badges page */
.tp-all-badges-header {
    text-align: center;
    margin-bottom: 24px;
}
.tp-all-badges-header h1 {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 4px;
}
.tp-all-badges-count {
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
}
body.dark-mode .tp-all-badges-count {
    color: #9ca3af;
}
.gamipress-achievements-list .gamipress-no-results {
    text-align: center;
    padding: 2rem 1rem;
    color: #6b7280;
    font-size: 15px;
}
.gamipress-achievements-list .gamipress-no-results p {
    margin: 0;
}
body.dark-mode .gamipress-achievements-list .gamipress-no-results {
    color: #9ca3af;
}
@media (max-width: 600px) {
    .gamipress-achievements-container {
        grid-template-columns: 1fr !important;
    }
}

/* 🌍 Map popup container */
.leaflet-popup-content-wrapper {
    border-radius: 3px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    background-color: #fff;
    font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  }
  /* New card: transparent wrapper so card handles its own styling */
  .leaflet-popup-content-wrapper:has(.tpp-card) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 14px !important;
    padding: 0 !important;
  }
  .leaflet-popup-content:has(.tpp-card) {
    padding: 0 !important;
    margin: 0 !important;
  }
  .leaflet-popup:has(.tpp-card) .leaflet-popup-tip {
    background: #161616 !important;
    border: none !important;
    box-shadow: none !important;
  }
  
  .leaflet-popup-content {
    padding: 15px 0px !important;
  }
  
  /* Old popup form styles removed — replaced by tpf-* styles */
  
  /* Old submit button styles removed — replaced by tpf-submit */
  
form#map-filter-form {
    display: inline-flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    min-width: 0;
    column-gap: 15px;
}
/* Search bar: single clean bar, address-only (no location name suggestions) */
.map-search-box-wrap {
    position: relative;
}
.map-search-input,
input#map-search.map-search-input {
    box-sizing: border-box;
    width: 340px;
    padding: 12px 14px 12px 36px;
    min-height: 44px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.4;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 12px 50%;
    background-size: 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.map-search-input:focus {
    outline: none;
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}
.map-search-input::placeholder {
    color: #6c757d;
}
body.dark-mode .map-search-input,
body.dark-mode input#map-search.map-search-input {
    background-color: #2a2e36;
    border-color: #444;
    color: #e4e4e4;
}
body.dark-mode .map-search-input:focus {
    border-color: #5a9cf6;
    box-shadow: 0 0 0 3px rgba(90, 156, 246, 0.2);
}
body.dark-mode .map-search-input::placeholder {
    color: #888;
}

/* ========== Explore panel (new format – map-controls light/dark) ========== */
.tp-explore-panel.panel {
  --mc-bg: #f0f2f0;
  --mc-surface: #ffffff;
  --mc-surface2: #f5f6f4;
  --mc-surface3: #eceeed;
  --mc-border: #dde0dc;
  --mc-border-light: #c8ccc7;
  --mc-text: #1a1f1a;
  --mc-text-muted: #6b7269;
  --mc-text-dim: #a0a89e;
  --mc-amber: #c97d10;
  --mc-amber-dim: rgba(201,125,16,0.1);
  --mc-green: #1e9e52;
  --mc-red: #d43f3f;
  --mc-yellow: #b08800;
  --mc-purple: #6d4fc2;
  --mc-blue: #2563c4;
  position: relative;
  z-index: 10;
  width: 272px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: tp-panel-slideIn 0.35s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes tp-panel-slideIn {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}
body.dark-mode .tp-explore-panel.panel {
  --mc-bg: #0f0f0f;
  --mc-surface: #161616;
  --mc-surface2: #1e1e1e;
  --mc-surface3: #252525;
  --mc-border: #2a2a2a;
  --mc-border-light: #333;
  --mc-text: #f0ede8;
  --mc-text-muted: #888;
  --mc-text-dim: #444;
  --mc-amber: #f5a623;
  --mc-amber-dim: rgba(245,166,35,0.12);
  --mc-green: #4ade80;
  --mc-red: #f87171;
  --mc-yellow: #fbbf24;
  --mc-purple: #a78bfa;
  --mc-blue: #60a5fa;
}

/* Explore-candidates only (test): whole menu stack ~20% transparent so the map reads through */
body.tp-explore-candidates .tp-explore-panel.panel {
  opacity: 0.8;
}

.tp-explore-panel .search-wrap { position: relative; }
.tp-explore-panel .search-wrap form,
.tp-explore-panel .search-wrap form#map-filter-form {
  margin: 0;
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  min-width: 0 !important;
  column-gap: 0 !important;
}
.tp-explore-panel .search-input,
.tp-explore-panel .map-search-input,
.tp-explore-panel #map-search {
  width: 100% !important;
  max-width: 100%;
  padding: 11px 42px 11px 38px !important;
  min-height: auto !important;
  background: var(--mc-surface) !important;
  border: 1px solid var(--mc-border) !important;
  border-radius: 12px;
  color: var(--mc-text);
  font-family: 'Barlow', sans-serif;
  font-size: 13px;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
  background-image: none !important;
}
.tp-explore-panel .search-input::placeholder,
.tp-explore-panel .map-search-input::placeholder { color: var(--mc-text-dim); }
.tp-explore-panel .search-input:focus,
.tp-explore-panel .map-search-input:focus,
.tp-explore-panel #map-search:focus {
  border-color: rgba(245,166,35,0.4) !important;
  box-shadow: 0 0 0 3px rgba(245,166,35,0.07);
  outline: none;
}
.tp-explore-panel .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mc-text-dim);
  font-size: 14px;
  pointer-events: none;
}

.tp-explore-panel .search-locate-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--mc-border);
  background: var(--mc-surface2);
  color: var(--mc-text-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.tp-explore-panel .search-locate-btn:hover {
  color: var(--mc-text);
  border-color: #5a5a5a;
}

.tp-explore-panel .search-locate-btn svg {
  width: 14px;
  height: 14px;
}

.tp-explore-panel .search-locate-btn.is-loading {
  opacity: 0.7;
}

/* Moderator explore-candidates: loading abandoned GeoJSON (ID = high specificity vs theme resets) */
.tp-explore-panel .tp-candidates-geojson-loading,
#tp-candidates-geojson-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 4px;
  padding: 8px 12px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  font-family: 'Barlow', sans-serif;
  line-height: 1.35;
  color: var(--mc-text, #1a1f1a);
  background: var(--mc-surface2, #f5f6f4);
  border-radius: 10px;
  border: 1px solid var(--mc-border, #dde0dc);
}
body.dark-mode .tp-explore-panel .tp-candidates-geojson-loading,
body.dark-mode #tp-candidates-geojson-loading {
  color: var(--mc-text, #f0ede8);
  background: var(--mc-surface3, #252525);
  border-color: var(--mc-border, #2a2a2a);
}
body.light-mode .tp-explore-panel .tp-candidates-geojson-loading,
body.light-mode #tp-candidates-geojson-loading {
  color: var(--mc-text-muted, #6b7269);
  background: var(--mc-surface3, #eceeed);
  border-color: var(--mc-border, #dde0dc);
}
.tp-explore-panel .tp-candidates-geojson-loading[hidden],
#tp-candidates-geojson-loading[hidden] {
  display: none !important;
}
.tp-explore-panel .tp-cand-geojson-spin,
#tp-candidates-geojson-loading .tp-cand-geojson-spin {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border: 2px solid var(--mc-border, #dde0dc);
  border-top-color: var(--mc-amber, #f5a623);
  border-radius: 50%;
  animation: tpCandGeojsonSpin 0.65s linear infinite;
}
body.dark-mode #tp-candidates-geojson-loading .tp-cand-geojson-spin {
  border-color: #3a3f48;
  border-top-color: var(--mc-amber, #f5a623);
}
.tp-explore-panel .tp-candidates-geojson-loading-text,
#tp-candidates-geojson-loading .tp-candidates-geojson-loading-text {
  flex: 1;
  min-width: 0;
  font-weight: 500;
}
@keyframes tpCandGeojsonSpin {
  to {
    transform: rotate(360deg);
  }
}
.leaflet-container.tp-candidates-geojson-loading {
  cursor: progress;
}

/* Explore-candidates: bottom-center map strip (zoom hint + scraping; moved out of panel) */
.leaflet-container .tp-cand-map-foot {
  position: absolute;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 700;
  pointer-events: none;
  max-width: min(96vw, 560px);
  text-align: center;
}
.leaflet-container .tp-cand-map-foot #tp-candidates-geojson-loading.tp-cand-map-foot-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 11px 18px;
  box-sizing: border-box;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  font-family: 'Barlow', sans-serif;
  color: var(--mc-text, #1a1f1a);
  background: rgba(245, 246, 244, 0.95);
  border: 2px solid rgba(255, 122, 0, 0.45);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.dark-mode .leaflet-container .tp-cand-map-foot #tp-candidates-geojson-loading.tp-cand-map-foot-loading {
  color: var(--mc-text, #f0ede8);
  background: rgba(26, 28, 34, 0.9);
  border-color: rgba(255, 122, 0, 0.55);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.leaflet-container .tp-cand-map-foot #tp-cand-map-foot-spin[hidden] {
  display: none !important;
}
.leaflet-container .tp-cand-map-foot #tp-cand-map-foot-zoom-btn {
  pointer-events: auto;
  margin-left: 8px;
  min-height: 30px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(191, 128, 76, 0.55);
  background: linear-gradient(135deg, #bf8a58 0%, #a97146 55%, #8e5f3e 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(125, 86, 52, 0.28);
  cursor: pointer;
}
.leaflet-container .tp-cand-map-foot #tp-cand-map-foot-zoom-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
body.dark-mode .leaflet-container .tp-cand-map-foot #tp-cand-map-foot-zoom-btn {
  border-color: rgba(191, 128, 76, 0.65);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4);
}
.tp-explore-panel .ctrl-btn.tp-cand-ai-scraper-btn.ctrl-btn--new-feature {
  border-color: var(--mc-border, #dde0dc);
}
.tp-explore-panel .ctrl-btn.tp-cand-ai-scraper-btn.ctrl-btn--new-feature.open,
.tp-explore-panel .ctrl-btn.tp-cand-ai-scraper-btn.ctrl-btn--new-feature.active {
  border-color: var(--mc-border, #dde0dc);
}
.tp-explore-panel .tp-cand-new-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  vertical-align: middle;
}
.tp-explore-panel .tp-cand-ai-scraper-desc {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--mc-text-muted, #6b7269);
}
.tp-explore-panel .tp-cand-scrape-view-btn {
  width: 100%;
  margin: 4px 0 8px;
  min-height: 40px;
  font-weight: 700;
  border-radius: 10px;
  border: 1px solid rgba(191, 128, 76, 0.55);
  background: linear-gradient(135deg, #bf8a58 0%, #a97146 55%, #8e5f3e 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(125, 86, 52, 0.24);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}
.tp-explore-panel .tp-cand-scrape-view-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 6px 16px rgba(125, 86, 52, 0.3);
}
.tp-explore-panel .tp-cand-scrape-view-btn:disabled {
  opacity: 0.72;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
body.dark-mode .tp-explore-panel .tp-cand-scrape-view-btn {
  border-color: rgba(191, 128, 76, 0.65);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.35);
}
.tp-explore-panel #tp-cand-ai-geo-count {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--mc-text-muted, #6b7269);
}

.tp-explore-panel .btn-group {
  background: var(--mc-surface);
  border: 1px solid var(--mc-border);
  border-radius: 14px;
  overflow: visible;
}

/* Candidates: Clear map pins + pin count (under OSM toggle inside filter panel, or legacy). */
.tp-explore-panel .tp-cand-clear-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--mc-surface);
  border: 1px solid var(--mc-border);
  border-radius: 14px;
  overflow: hidden;
  box-sizing: border-box;
}
.tp-explore-panel .tp-cand-pins-count-badge {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Barlow', sans-serif;
  line-height: 1;
  color: var(--mc-text, #1a1f1a);
  background: var(--mc-amber-dim, rgba(245, 166, 35, 0.22));
  border: 2px solid var(--mc-amber, #f5a623);
  box-sizing: border-box;
}
body.dark-mode .tp-explore-panel .tp-cand-pins-count-badge {
  color: var(--mc-text, #f0ede8);
  background: rgba(245, 166, 35, 0.12);
  border-color: var(--mc-amber, #f5a623);
}
.tp-explore-panel .tp-cand-clear-wrap .ctrl-btn.tp-cand-clear-viewport-pins-btn {
  flex: 1;
  min-width: 0;
  border-radius: 12px;
}
.tp-explore-panel .tp-cand-clear-wrap .ctrl-btn.tp-cand-clear-viewport-pins-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.tp-explore-panel.panel.is-minimized #tp-candidates-geojson-loading {
  display: none;
}
/* In filter panel: tuck under viewport OSM toggle, match panel rhythm */
.tp-explore-panel #filter-panel .tp-cand-clear-wrap--in-filters {
  margin-top: 10px;
  margin-bottom: 4px;
  width: 100%;
}

/* Explore view limits: quota row + popover (non-premium) */
.tp-explore-evl-wrap {
  position: relative;
  width: 100%;
}
.tp-explore-evl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 6px 10px;
  margin: 0;
  border: 1px solid var(--mc-border);
  border-radius: 12px;
  background: var(--mc-surface);
  color: var(--mc-text-muted);
  font-family: 'Barlow', sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  opacity: 0.82;
  transition: opacity 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.tp-explore-evl-btn:hover,
.tp-explore-evl-btn.open {
  opacity: 1;
  background: var(--mc-surface2);
  border-color: var(--mc-border-light);
  color: var(--mc-text);
}
.tp-explore-evl-count {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.tp-explore-evl-icon {
  font-size: 14px;
  line-height: 1;
  opacity: 0.75;
}
.tp-explore-evl-popover {
  position: absolute;
  right: 0;
  left: 0;
  top: calc(100% + 6px);
  z-index: 1200;
  max-height: min(52vh, 320px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--mc-border);
  background: var(--mc-surface);
  color: var(--mc-text);
  font-family: 'Barlow', sans-serif;
  font-size: 12px;
  line-height: 1.45;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}
body.dark-mode .tp-explore-evl-popover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}
.tp-evl-pop-head {
  font-weight: 700;
  font-size: 13px;
  margin: 0 0 6px;
  color: var(--mc-text);
}
.tp-evl-pop-hint {
  margin: 0 0 10px;
  color: var(--mc-text-muted);
  font-size: 11px;
}
.tp-evl-pop-hint strong { color: var(--mc-text); font-weight: 600; }
.tp-evl-empty,
.tp-evl-err,
.tp-evl-loading {
  margin: 0;
  color: var(--mc-text-muted);
  font-size: 11px;
}
.tp-pin-popup-loading .tp-pin-loading-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  color: var(--mc-text-muted);
  font-size: 12px;
}
.tp-pin-popup-loading .tp-pin-loading-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tp-pin-popup-loading .tp-pin-loading-dots i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.35;
  animation: tp-pin-loading-dot 1s ease-in-out infinite;
}
.tp-pin-popup-loading .tp-pin-loading-dots i:nth-child(2) { animation-delay: 0.16s; }
.tp-pin-popup-loading .tp-pin-loading-dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes tp-pin-loading-dot {
  0%, 80%, 100% { opacity: 0.35; transform: scale(0.85); }
  40% { opacity: 1; transform: scale(1); }
}
.tp-evl-slot-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tp-evl-slot-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  padding: 6px 0;
  border-top: 1px solid var(--mc-border);
  font-size: 11px;
}
.tp-evl-slot-list li:first-child { border-top: none; padding-top: 0; }
.tp-evl-slot-link {
  color: var(--mc-amber);
  text-decoration: none;
  display: inline;
  line-height: 1.3;
}
.tp-evl-slot-link:hover { text-decoration: underline; }
.tp-evl-slot-name {
  font-weight: 700;
  font-size: 11px;
}
.tp-evl-slot-id {
  font-weight: 400;
  font-size: 9px;
  opacity: 0.6;
}
.tp-evl-slot-time {
  color: var(--mc-text-muted);
  font-size: 10px;
}
.tp-explore-panel.panel.is-minimized .tp-explore-evl-wrap {
  display: none;
}

/* Explore view limit: blurred real card + overlay (right panel) */
.tp-explore-limit-panel-stack {
  position: relative;
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
}
.tp-explore-limit-blur-layer {
  filter: blur(7px);
  opacity: 0.5;
  user-select: none;
  pointer-events: none;
  transform: scale(1.01);
  max-height: min(55vh, 420px);
  overflow: hidden;
}
.tp-explore-limit-overlay-msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 12px;
  background: rgba(20, 22, 20, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: auto;
}
.tp-explore-limit-overlay-inner {
  max-width: 280px;
  text-align: center;
  background: var(--mc-surface, #fff);
  border: 1px solid var(--mc-border, #dde0dc);
  border-radius: 14px;
  padding: 18px 16px 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
body.dark-mode .tp-explore-limit-overlay-inner {
  background: var(--mc-surface, #161616);
  border-color: var(--mc-border, #2a2a2a);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.tp-explore-limit-overlay-inner .tp-premium-gate-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 8px;
}
.tp-explore-limit-overlay-inner .tp-premium-gate-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--mc-text, #1a1f1a);
}
body.dark-mode .tp-explore-limit-overlay-inner .tp-premium-gate-title {
  color: var(--mc-text, #f0ede8);
}
.tp-explore-limit-overlay-server,
.tp-explore-limit-overlay-lead,
.tp-explore-limit-overlay-sub {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--mc-text-muted, #6b7269);
}
.tp-explore-limit-overlay-lead strong,
.tp-explore-limit-overlay-sub strong {
  color: var(--mc-text, #1a1f1a);
  font-weight: 600;
}
body.dark-mode .tp-explore-limit-overlay-lead strong,
body.dark-mode .tp-explore-limit-overlay-sub strong {
  color: var(--mc-text, #f0ede8);
}
.tp-explore-limit-overlay-sub {
  margin-bottom: 14px;
  font-size: 12px;
}
.tp-explore-limit-overlay-inner .tp-premium-gate-link {
  display: inline-block;
  padding: 10px 22px;
  font-size: 13px;
}
.tp-explore-limit-fallback-card .tp-explore-limit-fallback-note {
  margin: 8px 0 0;
  font-size: 13px;
  opacity: 0.75;
}
.tp-explore-limit-secondary {
  margin-top: 12px;
}
.tp-explore-limit-secondary-link {
  font-size: 13px;
  font-weight: 600;
  color: #4a9cf6;
  text-decoration: none;
}
.tp-explore-limit-secondary-link:hover {
  text-decoration: underline;
}
body.dark-mode .tp-explore-limit-secondary-link {
  color: #7ab8ff;
}

/* Shared minimize/show-menu pill tokens across explore + location panels */
.leaflet-top.leaflet-right {
  --tp-menu-pill-bg: #f5f6f4;
  --tp-menu-pill-bg-hover: #eceeed;
  --tp-menu-pill-border: #dde0dc;
  --tp-menu-pill-border-hover: #c8ccc7;
  --tp-menu-pill-text: #6b7269;
  --tp-menu-pill-text-hover: #1a1f1a;
}
body.dark-mode .leaflet-top.leaflet-right,
html[data-theme='dark'] .leaflet-top.leaflet-right {
  --tp-menu-pill-bg: #1e1e1e;
  --tp-menu-pill-bg-hover: #252525;
  --tp-menu-pill-border: #2a2a2a;
  --tp-menu-pill-border-hover: #333;
  --tp-menu-pill-text: #888;
  --tp-menu-pill-text-hover: #f0ede8;
}
.tp-explore-panel-minimize {
  margin-top: 2px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  background: var(--tp-menu-pill-bg);
  border: 1px solid var(--tp-menu-pill-border);
  border-radius: 999px;
  color: var(--tp-menu-pill-text);
  font-family: 'Barlow', sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.tp-explore-panel-minimize:hover {
  background: var(--tp-menu-pill-bg-hover);
  color: var(--tp-menu-pill-text-hover);
  border-color: var(--tp-menu-pill-border-hover);
}
.tp-explore-panel-minimize-icon {
  font-size: 11px;
  line-height: 1;
  transform: translateY(-1px);
}
.tp-explore-panel.panel.is-minimized {
  gap: 0;
}
.tp-explore-panel.panel.is-minimized .search-wrap,
.tp-explore-panel.panel.is-minimized .btn-group {
  display: none;
}
.tp-explore-panel.panel.is-minimized .tp-explore-panel-minimize {
  margin-top: 0;
}
.tp-explore-panel .ctrl-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 14px;
  background: none;
  border: none;
  color: var(--mc-text);
  font-family: 'Barlow', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
}
.tp-explore-panel .ctrl-btn:first-child { border-radius: 14px 14px 0 0; }
.tp-explore-panel .ctrl-btn:last-child { border-radius: 0 0 14px 14px; }
.tp-explore-panel .ctrl-btn:only-child { border-radius: 14px; }
.tp-explore-panel .ctrl-btn + .ctrl-btn { border-top: 1px solid var(--mc-border); }
/* Explore-candidates: single divider after Add location only (no line under AI Scraper before Filters). */
.tp-explore-panel .btn-group .ctrl-btn.tp-cand-ai-scraper-btn + #filters-toggle-btn {
  border-top: none;
}
.tp-explore-panel .ctrl-btn:hover { background: var(--mc-surface2); }
.tp-explore-panel .ctrl-btn.active { background: var(--mc-amber-dim); }
.tp-explore-panel .ctrl-btn.active .btn-icon { color: var(--mc-amber); }
.tp-explore-panel .ctrl-btn.active .btn-label { color: var(--mc-amber); }
.tp-explore-panel .btn-icon {
  font-size: 15px;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--mc-text-muted);
  transition: color 0.15s;
}
.tp-explore-panel .btn-label { flex: 1; color: var(--mc-text); transition: color 0.15s; }
.tp-explore-panel .btn-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--mc-text-dim);
  background: var(--mc-surface3);
  border: 1px solid var(--mc-border);
  padding: 1px 7px;
  border-radius: 20px;
}
.tp-explore-panel .btn-chevron {
  font-size: 10px;
  color: var(--mc-text-dim);
  transition: transform 0.2s;
}
.tp-explore-panel .ctrl-btn.open .btn-chevron { transform: rotate(180deg); }

.tp-explore-panel .expand-panel {
  display: none;
  padding: 0 14px 13px;
  background: var(--mc-surface2);
  border-top: 1px solid var(--mc-border);
  animation: tp-panel-expandIn 0.2s ease both;
  /* Prefer scrolling this region over map pan / pinch zoom passing through */
  touch-action: pan-y;
}
@keyframes tp-panel-expandIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tp-explore-panel .expand-panel.open { display: block; }

.tp-explore-panel .filter-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mc-text-dim);
  margin-bottom: 8px;
  margin-top: 13px;
}
.tp-explore-panel .filter-title:first-child { margin-top: 0; }

.tp-explore-panel .saved-toggle-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 11px;
  background: var(--mc-surface3);
  border: 1px solid var(--mc-border-light);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s;
  font-family: 'Barlow', sans-serif;
}
.tp-explore-panel .saved-toggle-chip:hover { border-color: #444; }
/* Saved-spots toggle — purple theme */
.tp-explore-panel .saved-toggle-chip.on {
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(167, 139, 250, 0.45);
}
.tp-explore-panel .saved-toggle-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--mc-text-muted);
}
.tp-explore-panel .saved-toggle-chip.on .saved-toggle-left { color: #c4b5fd; }
.tp-explore-panel .saved-toggle-count {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 20px;
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    color: var(--mc-text-dim);
}
.tp-explore-panel .saved-toggle-chip.on .saved-toggle-count {
    background: rgba(124, 58, 237, 0.2);
    border-color: rgba(167, 139, 250, 0.35);
    color: #ddd6fe;
}
.tp-explore-panel .saved-toggle-chip + .saved-toggle-chip {
    margin-top: 8px;
}
.tp-explore-panel .tp-hide-demolished-ico {
    font-size: 14px;
    line-height: 1;
}
.tp-explore-panel .saved-toggle-chip.tp-hide-demolished-chip.on {
    background: rgba(185, 28, 28, 0.1);
    border-color: rgba(248, 113, 113, 0.4);
}
.tp-explore-panel .saved-toggle-chip.tp-hide-demolished-chip.on .saved-toggle-left {
    color: #fecaca;
}
.tp-explore-panel .saved-toggle-chip.tp-hide-demolished-chip.on .mini-toggle {
    background: #b91c1c;
    border-color: #b91c1c;
}
.tp-explore-panel .mini-toggle {
  width: 28px;
  height: 16px;
  border-radius: 8px;
  background: var(--mc-surface);
  border: 1px solid var(--mc-border-light);
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s;
}
.tp-explore-panel .saved-toggle-chip.on .mini-toggle { background: #7c3aed; border-color: #7c3aed; }
.tp-explore-panel .mini-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #bbb;
  transition: left 0.2s, background 0.2s;
}
body.dark-mode .tp-explore-panel .mini-toggle::after { background: #aaa; }
.tp-explore-panel .saved-toggle-chip.on .mini-toggle::after { left: 14px; background: #fff; }

.tp-explore-panel .diff-chip-row { display: flex; gap: 5px; }
.tp-explore-panel .diff-chip {
  flex: 1;
  padding: 8px 6px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  background: var(--mc-surface3);
  border: 1px solid var(--mc-border-light);
  color: var(--mc-text-muted);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  font-family: 'Barlow', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  line-height: 1.2;
}
.tp-explore-panel .diff-chip:hover { border-color: #444; color: var(--mc-text); }
.tp-explore-panel .diff-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tp-explore-panel .diff-chip.active-easy { background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.45); color: var(--mc-green); }
.tp-explore-panel .diff-chip.active-mod { background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.45); color: var(--mc-yellow); }
.tp-explore-panel .diff-chip.active-hard { background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.45); color: var(--mc-red); }
.tp-explore-panel .diff-chip.active-extreme { background: rgba(30,30,30,0.08); border-color: #666; color: #1a1a1a; }
body.dark-mode .tp-explore-panel .diff-chip.active-extreme { background: rgba(220,220,220,0.12); border-color: #888; color: #e0e0e0; }

.tp-explore-panel .loc-type-chip-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.tp-explore-panel .loc-type-chip {
  padding: 8px 6px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  background: var(--mc-surface3);
  border: 1px solid var(--mc-border-light);
  color: var(--mc-text-muted);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* More air than difficulty chips (5px gap): emoji is larger than the 8px dot */
  row-gap: 10px;
  column-gap: 0;
  transition: all 0.15s;
  font-family: 'Barlow', sans-serif;
  text-align: center;
  line-height: 1.2;
  min-height: 44px;
  box-sizing: border-box;
  width: 100%;
}
.tp-explore-panel .loc-type-chip .loc-type-icon {
  font-size: 1em;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.tp-explore-panel .loc-type-chip .loc-type-icon .emoji,
.tp-explore-panel .loc-type-chip .loc-type-icon img {
  display: block;
}
.tp-explore-panel .loc-type-chip:hover { border-color: #444; color: var(--mc-text); }
.tp-explore-panel .loc-type-chip.active {
  background: rgba(96, 165, 250, 0.15);
  border-color: rgba(96, 165, 250, 0.5);
  color: var(--mc-text);
}

.tp-explore-panel .filter-apply {
  width: 100%;
  margin-top: 13px;
  padding: 9px;
  border-radius: 9px;
  background: var(--mc-amber);
  border: none;
  color: #ffffff;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
}
.tp-explore-panel .filter-apply:hover { background: #b36d0a; }
body.dark-mode .tp-explore-panel .filter-apply { color: #0c0c0c; }
body.dark-mode .tp-explore-panel .filter-apply:hover { background: #ffb830; }
.tp-explore-panel .filter-clear {
  width: 100%;
  margin-top: 6px;
  padding: 7px;
  border-radius: 9px;
  background: transparent;
  border: 1px solid var(--mc-border-light);
  color: var(--mc-text-muted);
  font-family: 'Barlow', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.tp-explore-panel .filter-clear:hover { color: var(--mc-text); border-color: #444; }

.tp-explore-panel .min-views-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tp-explore-panel .min-views-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--mc-text);
  white-space: nowrap;
}
.tp-explore-panel .min-views-input {
  width: 72px;
  padding: 6px 8px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  color: var(--mc-text);
  background: var(--mc-surface3);
  border: 1px solid var(--mc-border-light);
  border-radius: 8px;
  text-align: center;
  outline: none;
  transition: border-color 0.15s;
  -moz-appearance: textfield;
}
.tp-explore-panel .min-views-input::-webkit-inner-spin-button,
.tp-explore-panel .min-views-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
.tp-explore-panel .min-views-input:focus {
  border-color: var(--mc-amber);
}
.tp-explore-panel .min-views-input::placeholder {
  color: var(--mc-text-dim);
  font-weight: 400;
}

.tp-explore-panel .basemap-selector {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.tp-explore-panel .basemap-opt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--mc-border-light, #333);
  background: var(--mc-surface3, #1e1e1e);
  color: var(--mc-text-muted, #888);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.tp-explore-panel .basemap-opt:hover {
  border-color: #555;
  color: var(--mc-text, #f0ede8);
}
.tp-explore-panel .basemap-opt.active {
  background: var(--mc-amber-dim, rgba(245,166,35,0.1));
  border-color: var(--mc-amber, #f5a623);
  color: var(--mc-amber, #f5a623);
}
.tp-explore-panel .basemap-icon {
  font-size: 14px;
}

.tp-explore-panel .layer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  cursor: pointer;
}
.tp-explore-panel .layer-row + .layer-row { border-top: 1px solid var(--mc-border); }
.tp-explore-panel .layer-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.tp-explore-panel .layer-name { font-size: 12px; font-weight: 600; color: var(--mc-text); flex: 1; }
.tp-explore-panel .layer-desc { font-size: 10px; color: var(--mc-text-dim); margin-top: 1px; }
.tp-explore-panel .layer-row-wayback { align-items: flex-start; }
.tp-explore-panel .layer-row-wayback .layer-wayback-select {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-family: inherit;
  color: var(--mc-text);
  background: var(--mc-surface2);
  border: 1px solid var(--mc-border);
  border-radius: 6px;
  cursor: pointer;
}
body.dark-mode .tp-explore-panel .layer-wayback-select {
  color: #e4e4e4;
  background: #252525;
  border-color: #444;
}
.wayback-loading {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  padding: 3px 0;
}
.wayback-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(80,200,120,0.25);
  border-top-color: #4ade80;
  border-radius: 50%;
  animation: wayback-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes wayback-spin { to { transform: rotate(360deg); } }
.wayback-loading-text {
  font-size: 10px;
  color: #4ade80;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.wayback-avail-info {
  font-size: 9px;
  color: #4ade80;
  font-weight: 600;
  margin-top: 4px;
  min-height: 13px;
}
.wayback-capture-info {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  font-size: 9px;
  color: #888;
  line-height: 1.3;
  word-break: break-word;
}

/* Shared ?pin= deep link: loading overlay on map */
#map .tp-explore-pin-url-loading {
  position: absolute;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
#map .tp-explore-pin-url-loading__box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: 14px;
  background: #1a1a1a;
  color: #e8e8e8;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
body:not(.dark-mode) #map .tp-explore-pin-url-loading__box,
body.light-mode #map .tp-explore-pin-url-loading__box {
  background: #fff;
  color: #1a1a1a;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}
#map .tp-explore-pin-url-loading__spinner {
  width: 22px;
  height: 22px;
  border: 3px solid rgba(59, 130, 246, 0.25);
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: tp-explore-pin-url-spin 0.75s linear infinite;
  flex-shrink: 0;
}
@keyframes tp-explore-pin-url-spin {
  to { transform: rotate(360deg); }
}
#map .tp-explore-pin-url-loading__text {
  max-width: 220px;
  line-height: 1.35;
}
.tp-explore-panel .toggle {
  width: 32px;
  height: 18px;
  border-radius: 9px;
  background: var(--mc-surface3);
  border: 1px solid var(--mc-border-light);
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.2s;
}
.tp-explore-panel .toggle.on { background: var(--mc-amber); border-color: var(--mc-amber); }
.tp-explore-panel .toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #bbb;
  transition: left 0.2s, background 0.2s;
}
body.dark-mode .tp-explore-panel .toggle::after { background: #aaa; }
.tp-explore-panel .toggle.on::after { left: 16px; background: #fff; }

/* Desktop: right-side spot panel (compact sidebar), near center vertically, more to the left */
.tp-explore-right-panel {
  position: fixed;
  top: 50%;
  right: 80px;
  width: 240px;
  max-width: calc(100vw - 48px);
  height: auto;
  max-height: 55vh;
  background: #fff;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  transform: translate(calc(100% + 24px), -50%);
  transition: transform 0.25s ease;
  overflow: hidden;
  border-radius: 12px;
}
.tp-explore-right-panel:not(.tp-explore-right-panel-open) {
  visibility: hidden;
  pointer-events: none;
}
.tp-explore-right-panel.tp-explore-right-panel-open {
  visibility: visible;
  transform: translate(0, -50%);
}
.tp-explore-right-panel-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: #f0f0f0;
  color: #333;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  z-index: 2;
}
.tp-explore-right-panel-close:hover {
  background: #e0e0e0;
}
.tp-explore-right-panel-content {
  padding: 36px 12px 16px;
  overflow-y: auto;
  flex: 0 1 auto;
  max-height: 50vh;
  font-size: 12px;
}
.tp-explore-right-panel-content .tp-pin-popup-card {
  max-width: none;
  min-width: 0;
}
.tp-explore-right-panel-content .tp-pin-popup-title {
  font-size: 1.05em;
  margin-bottom: 4px;
}
.tp-explore-right-panel-content .tp-pin-popup-thumbs {
  gap: 4px;
}
.tp-explore-right-panel-content .tp-pin-thumb {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
}
.tp-explore-right-panel-content .tp-pin-popup-desc-block {
  padding: 6px;
  font-size: 11px;
  max-height: 4em;
  overflow-y: auto;
}
.tp-explore-right-panel-content .tp-pin-popup-actions {
  margin-top: 6px;
  gap: 4px;
}
.tp-explore-right-panel-content .tp-pin-btn {
  padding: 5px 8px;
  font-size: 11px;
}
body.dark-mode .tp-explore-right-panel {
  background: #1e2228;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.4);
}
body.dark-mode .tp-explore-right-panel-close {
  background: #3a3e46;
  color: #e4e4e4;
}
body.dark-mode .tp-explore-right-panel-close:hover {
  background: #4a4e56;
}

/* When a spot popup is open: hide all other map UI (mobile + desktop) */
#map.tp-explore-popup-open .leaflet-top.leaflet-left,
#map.tp-explore-popup-open .leaflet-top.leaflet-right,
#map.tp-explore-popup-open .leaflet-control-zoom,
body.tp-explore-popup-open .leaflet-top.leaflet-left,
body.tp-explore-popup-open .leaflet-top.leaflet-right,
body.tp-explore-popup-open .leaflet-control-zoom {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
#map .leaflet-top.leaflet-left,
#map .leaflet-top.leaflet-right,
#map .leaflet-control-zoom {
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Map controls (search, Add location, Layers, etc.): stack on top of map, stay below header (inside #map) */
#map .leaflet-control-container {
  z-index: 1000;
  pointer-events: none;
}
#map .leaflet-control-container .leaflet-top,
#map .leaflet-control-container .leaflet-bottom {
  pointer-events: auto;
}
#map .leaflet-control-container .leaflet-control {
  pointer-events: auto;
}
/* Non–explore maps: offset controls below a ~56px bar */
#map .leaflet-top.leaflet-left {
  margin-top: 56px;
}

/* Explore: vertical inset for map controls + search (raise value to sit lower under header) */
body.page-explore #map .leaflet-top.leaflet-left,
body.page-explore #map .leaflet-top.leaflet-right {
  margin-top: var(--tp-explore-leaflet-top-inset, 20px) !important;
}

/* Top-right: Layers and Filters buttons on the same row; shifted left from edge */
.leaflet-top.leaflet-right {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-top: 56px;
    margin-right: 100px;
}
/* Desktop: transparent container, panel handles its own styling */
@media (min-width: 768px) {
    .leaflet-top.leaflet-right {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 280px;
        padding: 0;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0;
        box-sizing: border-box;
        overflow: visible;
    }
    .leaflet-top.leaflet-right > .leaflet-control {
        margin: 0;
        border: none !important;
        box-shadow: none !important;
        box-sizing: border-box;
    }
    .leaflet-top.leaflet-right > .leaflet-control-layers:not(.tp-filters-control) {
        display: none !important;
    }
    .map-search-box form#map-filter-form,
    .map-search-box .map-search-box-wrap,
    .map-search-box .user-search-container {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        background: transparent !important;
        box-sizing: border-box;
    }
    .map-search-box .map-search-input,
    .map-search-box input#map-search,
    .map-search-box .location-search-fields {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        box-sizing: border-box;
        padding: 7px 10px 7px 32px;
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1.35;
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-radius: 6px;
        background: #f8f9fa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 10px 50%;
        background-size: 13px;
        min-height: 0;
        outline: none;
    }
    .map-search-box .map-search-input:focus,
    .map-search-box input#map-search:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
    }
    .add-location-control .add-location-btn,
    .saved-places-control .saved-places-btn {
        width: 100%;
        padding: 7px 10px;
        font-size: 13px !important;
        font-weight: 500 !important;
        border-radius: 6px;
        border: 1px solid rgba(0, 0, 0, 0.12) !important;
        box-shadow: none !important;
        background: #fff;
        color: #1a1a1a;
    }
    .tp-filters-control .tp-filters-toggle {
        width: 100%;
        display: block;
        padding: 7px 10px;
        font-size: 13px !important;
        font-weight: 500 !important;
        border-radius: 6px;
        border: 1px solid rgba(0, 0, 0, 0.12) !important;
        box-shadow: none !important;
        background: #fff;
        color: #1a1a1a;
        text-decoration: none;
        box-sizing: border-box;
    }
    .tp-add-loc-form-wrap,
    .tp-edit-loc-form-wrap {
        order: 0;
        box-shadow: none;
        border-radius: 8px !important;
    }
}

/* Desktop: filter toggle shows icon + text in connected box */
@media (min-width: 768px) {
    .tp-filters-control .tp-filters-toggle {
        background-image: none !important;
        display: flex !important;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        touch-action: manipulation;
    }
    .tp-filters-control .tp-filters-toggle::before {
        content: "";
        display: inline-block;
        flex-shrink: 0;
        width: 13px;
        height: 13px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23231f20' stroke-width='2'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/%3E%3C/svg%3E") no-repeat center;
        background-size: 13px 13px;
    }
    .tp-filters-toggle .tp-filters-toggle-text {
        display: inline !important;
        font-size: 13px;
        font-weight: 500;
        color: inherit;
    }
    .tp-filters-control .tp-filters-toggle::after {
        content: none !important;
    }
}
/* Filters expanded panel: white background in light mode */
.tp-filters-control .tp-filters-panel {
    background: #fff;
    padding: 10px 12px;
}
.tp-filters-control .leaflet-control-layers-list {
    background: #fff;
}
.tp-filters-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e0e0e0;
}
.tp-filters-panel-title {
    font-weight: 600;
    font-size: 14px;
}
.tp-filters-close {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: #f0f0f0;
    color: #333;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
}
.tp-filters-close:hover {
    background: #e0e0e0;
    color: #111;
}
body.dark-mode .tp-filters-panel-header { border-bottom-color: #444; }
body.dark-mode .tp-filters-panel-title { color: #e4e4e4; }
body.dark-mode .tp-filters-close {
    background: #3a3e46;
    color: #e4e4e4;
}
body.dark-mode .tp-filters-close:hover {
    background: #4a4e56;
}

/* Address autocomplete dropdown (geocode results only) */
.tp-address-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    max-height: 280px;
    overflow-y: auto;
    z-index: 2000;
}
.tp-address-autocomplete li {
    padding: 10px 14px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}
.tp-address-autocomplete li:last-child { border-bottom: none; }
.tp-address-autocomplete li:hover,
.tp-address-autocomplete li.active {
    background: #f0f7ff;
    color: #111;
}
body.dark-mode .tp-address-autocomplete {
    background: #2a2e36;
    border-color: #444;
}
body.dark-mode .tp-address-autocomplete li {
    color: #e4e4e4;
    border-bottom-color: #3a3e46;
}
body.dark-mode .tp-address-autocomplete li:hover,
body.dark-mode .tp-address-autocomplete li.active {
    background: #1e2228;
}

/* ========== Explore map dark mode: all buttons, menus, controls ========== */
@media (min-width: 768px) {
    body.dark-mode .leaflet-top.leaflet-right {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    body.dark-mode .leaflet-top.leaflet-right > .leaflet-control {
        border: none !important;
    }
}
body.dark-mode .leaflet-control:not(.tp-explore-panel) {
    background: #2a2e36 !important;
    border-color: #444 !important;
    box-sizing: border-box !important;
}
body.dark-mode .tp-explore-panel.leaflet-control {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
body.dark-mode .map-search-box .tp-address-autocomplete {
    z-index: 3;
}

/* When location info or add-location form is open, hide all other controls in the box */
.leaflet-top.leaflet-right:has(.tp-loc-info-wrap) > :not(.tp-loc-info-wrap),
.leaflet-top.leaflet-right:has(.tp-add-loc-form-wrap) > :not(.tp-add-loc-form-wrap),
.leaflet-top.leaflet-right:has(.tp-edit-loc-form-wrap) > :not(.tp-edit-loc-form-wrap) {
    display: none !important;
}
.leaflet-top.leaflet-right:has(.tp-loc-info-wrap),
.leaflet-top.leaflet-right:has(.tp-add-loc-form-wrap),
.leaflet-top.leaflet-right:has(.tp-edit-loc-form-wrap) {
    background: transparent !important;
    border-radius: 14px !important;
    border: none !important;
    box-shadow: none !important;
}

/* ========== Inline Location Info (replaces menu when clicking a pin) ========== */
.tp-loc-info-wrap {
    width: 100% !important;
    padding: 0 !important;
    background: var(--tpp-bg, #161616) !important;
    border: none !important;
    border-radius: 8px !important;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    order: 0;
    max-height: calc(100vh - 84px);
    max-height: calc(100dvh - 84px);
    /* Outer clips; inner .tp-loc-info-body scrolls (reliable on iOS + avoids map stealing vertical pans). */
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
    touch-action: pan-y;
}
/* Explore: panel is inside #map — match map stack height (100dvh−constant was taller than map → clipped Save/Share on desktop) */
body.page-explore .tp-loc-info-wrap {
    max-height: calc(100vh - var(--tp-explore-admin-h) - var(--tp-explore-header-offset) - var(--tp-explore-leaflet-top-inset, 20px) - 16px) !important;
}
@supports (height: 100dvh) {
    body.page-explore .tp-loc-info-wrap {
        max-height: calc(100dvh - var(--tp-explore-admin-h) - var(--tp-explore-header-offset) - var(--tp-explore-leaflet-top-inset, 20px) - 16px) !important;
    }
}
.tp-loc-info-body::-webkit-scrollbar {
    width: 4px;
}
.tp-loc-info-body::-webkit-scrollbar-track {
    background: transparent;
}
.tp-loc-info-body::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}
.tp-loc-info-header {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding: 8px 10px;
    cursor: default;
}
.tp-loc-info-minimize,
.tp-loc-info-close {
    width: 24px;
    height: 24px;
    border: 1px solid var(--tp-menu-pill-border);
    background: var(--tp-menu-pill-bg);
    color: var(--tp-menu-pill-text);
    font-size: 17px;
    line-height: 24px;
    border-radius: 50%;
    cursor: pointer;
    padding: 0 0 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.tp-loc-info-minimize:hover,
.tp-loc-info-close:hover {
    background: var(--tp-menu-pill-bg-hover);
    color: var(--tp-menu-pill-text-hover);
    border-color: var(--tp-menu-pill-border-hover);
}
/* Explore side panel: close on photo strip / card (no separate header row) */
.tp-loc-info-wrap .tpp-card {
    position: relative;
}
/* Close control: strip direct child → top-right of entire photo area (multi-image = over last column) */
.tpp-photo-strip > .tp-loc-info-close--photo-corner {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 15;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.tp-loc-info-toggle-rail {
    display: none !important;
    width: calc(100% - 20px) !important;
    margin: 0 10px 8px !important;
    justify-content: center !important;
}
.tp-loc-info-wrap.is-collapsed {
    overflow: hidden;
}
.tp-loc-info-wrap.is-collapsed .tp-loc-info-body {
    display: none;
}
.tp-loc-info-wrap.is-collapsed .tp-loc-info-header {
    display: none;
}
.tp-loc-info-wrap.is-collapsed .tp-loc-info-toggle-rail {
    display: inline-flex !important;
}
.tp-loc-info-body {
    font-size: 12px;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    scrollbar-width: thin;
    scrollbar-color: #333 transparent;
}
.tp-loc-info-body .tp-pin-popup-card {
    max-width: none;
    min-width: 0;
}
body.dark-mode .tp-loc-info-wrap {
    background: #161616 !important;
}
body:not(.dark-mode) .tp-loc-info-wrap,
body.light-mode .tp-loc-info-wrap {
    background: #ffffff !important;
}
body:not(.dark-mode) .leaflet-top.leaflet-right:has(.tp-loc-info-wrap),
body.light-mode .leaflet-top.leaflet-right:has(.tp-loc-info-wrap) {
    background: #ffffff !important;
    border-color: #dde0da;
}
body.dark-mode .tp-loc-info-body .tp-pin-popup-card .tp-pin-popup-title,
body.dark-mode .tp-loc-info-body .tp-pin-popup-card .tp-pin-popup-photos-label,
body.dark-mode .tp-loc-info-body .tp-pin-popup-card .tp-pin-popup-notes-label,
body.dark-mode .tp-loc-info-body .tp-pin-popup-card .tp-pin-popup-difficulty-line,
body.dark-mode .tp-loc-info-body .tp-pin-popup-card .tp-pin-popup-by,
body.dark-mode .tp-loc-info-body .tp-pin-popup-card .tp-pin-popup-stats,
body.dark-mode .tp-loc-info-body .tp-pin-popup-card .tpp-location-type,
body.dark-mode .tp-loc-info-body .tp-pin-popup-card .tpp-last-visit {
    color: #e4e4e4 !important;
}
body.dark-mode .tp-loc-info-body .tp-pin-popup-card .tpp-location-type { color: #f5a623 !important; }
body.dark-mode .tp-loc-info-body .tp-pin-popup-card .tpp-last-visit { color: #a0a89e !important; }
body.dark-mode .tp-loc-info-body .tp-pin-popup-card .tpp-visit-dot { background: #4ade80 !important; }
body.dark-mode .tp-loc-info-body .tp-pin-popup-card .tpp-visit-dot-place { background: #666 !important; }
body.dark-mode .tp-loc-info-body .tp-pin-popup-card .tpp-stat-clickable:hover .tpp-stat-val,
body.dark-mode .tp-loc-info-body .tp-pin-popup-card .tpp-stat-clickable:hover .tpp-stat-lbl {
    color: #f5a623 !important;
}
body:not(.dark-mode) .tp-loc-info-body .tp-pin-popup-card .tpp-stat-clickable:hover .tpp-stat-val,
body:not(.dark-mode) .tp-loc-info-body .tp-pin-popup-card .tpp-stat-clickable:hover .tpp-stat-lbl,
body.light-mode .tp-loc-info-body .tp-pin-popup-card .tpp-stat-clickable:hover .tpp-stat-val,
body.light-mode .tp-loc-info-body .tp-pin-popup-card .tpp-stat-clickable:hover .tpp-stat-lbl {
    color: var(--tpp-amber, #b86e00) !important;
}
body.dark-mode .tp-loc-info-body .tp-pin-popup-card .tp-pin-popup-details-link a {
    color: #7eb8ff !important;
}
body.dark-mode .tp-loc-info-body .tp-pin-popup-card .tp-pin-popup-desc-block {
    background: #1e2228 !important;
    border-color: #444 !important;
    color: #ccc !important;
}
body.dark-mode .tp-loc-info-body .tp-pin-popup-card .tp-pin-btn {
    background: #3a3e46 !important;
    border-color: #555 !important;
    color: #e4e4e4 !important;
}
body.dark-mode .tp-loc-info-body .tp-pin-popup-card .tp-pin-btn:hover {
    background: #4a4e56 !important;
}
body.dark-mode .tp-loc-info-body .tp-pin-popup-card .tp-pin-btn-gmap {
    background: #1e3a5f !important;
    color: #7eb8ff !important;
    border-color: #3a6ea5 !important;
}
body.dark-mode .tp-loc-info-body .tp-pin-popup-card .tp-pin-btn-earth {
    background: #1e3d1e !important;
    color: #66bb6a !important;
    border-color: #2e7d32 !important;
}
body.dark-mode .tp-loc-info-body .tp-pin-popup-card .tp-pin-btn-share {
    background: #3d2a5f !important;
    color: #c4b5fd !important;
    border-color: #6b21a8 !important;
}
body.dark-mode .tp-loc-info-body .tp-pin-popup-card .tp-pin-btn-share:hover {
    background: #4a3570 !important;
}
@media (max-width: 767px) {
    .leaflet-top.leaflet-right:has(.tp-loc-info-wrap) {
        background: #161616 !important;
        border-radius: 14px !important;
    }
    .tp-loc-info-wrap {
        box-shadow: none;
        /* Fallback if not body.page-explore */
        max-height: calc(100vh - 92px);
        max-height: calc(100dvh - 92px);
        background: #161616 !important;
        border-radius: 14px !important;
        padding-bottom: 0;
    }
    /* Scroll slack + home indicator (avoid max(56px,…) — it read as a huge empty footer) */
    .tp-loc-info-body {
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    }
    /* Shorter hero in side panel → more room for body + buttons */
    .tp-loc-info-body .tpp-photo-strip {
        height: 88px !important;
    }
    .tpp-photo-strip { height: 120px; }
    .tpp-title { font-size: 18px; }
    .tpp-location-type { font-size: 9px; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .tpp-difficulty-row { flex-wrap: nowrap; gap: 8px; align-items: center; }
    .tpp-difficulty-left { flex-shrink: 0; }
    .tpp-difficulty-right { gap: 8px; flex-shrink: 0; }
    .tpp-difficulty-scale { gap: 6px; flex-shrink: 0; }
    .tpp-diff-label { font-size: 10px; letter-spacing: 0.5px; white-space: nowrap; }
    .tpp-diff-name { font-size: 11px; white-space: nowrap; }
    .tpp-star-rating { flex-shrink: 0; }
    .tpp-stat-val { font-size: 11px; }
    .tpp-stat-lbl { font-size: 8px; letter-spacing: 0.3px; }
    .tpp-star { font-size: 11px; }
    .tpp-stat-item { gap: 2px; padding: 1px 2px; }
    .tpp-bottom-row { gap: 4px; }
    .tp-loc-info-body .tpp-bottom-row {
        padding-bottom: 0 !important;
    }
    .tpp-icon-btn { font-size: 10px; padding: 6px 3px; }
    .tpp-body { padding: 8px 10px; }
    .tpp-header { margin-bottom: 6px; }
    /* Status bar: compact; Report still tappable */
    .tpp-demo-status-bar {
        padding: 5px 8px;
        gap: 5px;
        min-height: 30px;
    }
    .tpp-demo-status-left {
        min-width: 0;
        gap: 4px;
    }
    .tpp-demo-status-label {
        font-size: 9px;
        letter-spacing: 0.15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .tpp-demo-report-btn {
        padding: 5px 8px;
        font-size: 8px;
        letter-spacing: 0.25px;
        min-height: 28px;
        min-width: 0;
        flex-shrink: 0;
    }
    .tpp-no-photo-header-bar {
        min-height: 28px;
        padding: 2px 5px;
    }
    .tp-loc-info-close--no-photo-header {
        width: 28px;
        height: 28px;
    }
}

/* ═══ Add / Edit Location Form (tpf-*) — dark default to match explore panel ═══ */
.tp-add-loc-form-wrap,
.tp-edit-loc-form-wrap {
    --tpf-bg: #0f0f0f;
    --tpf-surface: #161616;
    --tpf-surface2: #1e1e1e;
    --tpf-surface3: #252525;
    --tpf-border: #2a2a2a;
    --tpf-border-light: #333;
    --tpf-text: #f0ede8;
    --tpf-text-muted: #888;
    --tpf-text-dim: #444;
    --tpf-amber: #f5a623;
    --tpf-amber-dim: rgba(245,166,35,0.12);
    --tpf-amber-mid: rgba(245,166,35,0.35);
    --tpf-green: #4ade80;
    --tpf-green-dim: rgba(74,222,128,0.12);
    --tpf-red: #e05a5a;
    --tpf-red-dim: rgba(224,90,90,0.1);
    --tpf-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    --tpf-option-bg: #1a1a1a;
    --tpf-submit-text: #0c0c0c;
    width: 100% !important;
    padding: 0 !important;
    background: var(--tpf-bg) !important;
    border: none !important;
    border-radius: 14px !important;
    box-sizing: border-box;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.03);
    font-family: 'Barlow', -apple-system, BlinkMacSystemFont, sans-serif;
    overflow: hidden;
}
/* Dark mode: Pin Location / Add form use same palette as explore menu */
body.dark-mode .tp-add-loc-form-wrap,
body.dark-mode .tp-edit-loc-form-wrap {
    --tpf-bg: #0f0f0f;
    --tpf-surface: #161616;
    --tpf-surface2: #1e1e1e;
    --tpf-surface3: #252525;
    --tpf-border: #2a2a2a;
    --tpf-border-light: #333;
    --tpf-text: #f0ede8;
    --tpf-text-muted: #888;
    --tpf-text-dim: #444;
    --tpf-amber: #f5a623;
    --tpf-amber-dim: rgba(245,166,35,0.12);
    --tpf-amber-mid: rgba(245,166,35,0.35);
    --tpf-green: #4ade80;
    --tpf-green-dim: rgba(74,222,128,0.12);
    --tpf-red: #f87171;
    --tpf-red-dim: rgba(248,113,113,0.1);
    --tpf-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    --tpf-option-bg: #1a1a1a;
    --tpf-submit-text: #0c0c0c;
    /* Hazard category colors (match add-location-form reference) */
    --tpf-cat-structural: #c23535;
    --tpf-cat-structural-dim: rgba(194,53,53,0.08);
    --tpf-cat-structural-mid: rgba(194,53,53,0.22);
    --tpf-cat-access: #7c3aed;
    --tpf-cat-access-dim: rgba(124,58,237,0.08);
    --tpf-cat-access-mid: rgba(124,58,237,0.22);
    --tpf-cat-security: #1a6fab;
    --tpf-cat-security-dim: rgba(26,111,171,0.08);
    --tpf-cat-security-mid: rgba(26,111,171,0.22);
    --tpf-cat-environmental: #2e7d32;
    --tpf-cat-environmental-dim: rgba(46,125,50,0.08);
    --tpf-cat-environmental-mid: rgba(46,125,50,0.22);
    --tpf-cat-animals: #b86e00;
    --tpf-cat-animals-dim: rgba(184,110,0,0.09);
    --tpf-cat-animals-mid: rgba(184,110,0,0.22);
}
body:not(.dark-mode) .tp-add-loc-form-wrap,
body:not(.dark-mode) .tp-edit-loc-form-wrap,
body.light-mode .tp-add-loc-form-wrap,
body.light-mode .tp-edit-loc-form-wrap {
    --tpf-bg: #ffffff;
    --tpf-surface: #f5f6f3;
    --tpf-surface2: #f5f6f3;
    --tpf-surface3: #eceeed;
    --tpf-border: #dde0da;
    --tpf-border-light: #c8cdc4;
    --tpf-text: #1a1e1a;
    --tpf-text-muted: #6b7268;
    --tpf-text-dim: #a0a89e;
    --tpf-amber: #b86e00;
    --tpf-amber-dim: rgba(184,110,0,0.09);
    --tpf-amber-mid: rgba(184,110,0,0.22);
    --tpf-green: #1a8f4a;
    --tpf-green-dim: rgba(26,143,74,0.1);
    --tpf-red: #c23535;
    --tpf-red-dim: rgba(194,53,53,0.08);
    --tpf-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a0a89e' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    --tpf-option-bg: #ffffff;
    --tpf-submit-text: #ffffff;
    box-shadow: 0 2px 0 0 rgba(255,255,255,0.9) inset, 0 8px 32px rgba(0,0,0,0.09), 0 2px 8px rgba(0,0,0,0.05);
    /* Hazard category colors (match add-location-form reference) */
    --tpf-cat-structural: #c23535;
    --tpf-cat-structural-dim: rgba(194,53,53,0.08);
    --tpf-cat-structural-mid: rgba(194,53,53,0.22);
    --tpf-cat-access: #7c3aed;
    --tpf-cat-access-dim: rgba(124,58,237,0.08);
    --tpf-cat-access-mid: rgba(124,58,237,0.22);
    --tpf-cat-security: #1a6fab;
    --tpf-cat-security-dim: rgba(26,111,171,0.08);
    --tpf-cat-security-mid: rgba(26,111,171,0.22);
    --tpf-cat-environmental: #2e7d32;
    --tpf-cat-environmental-dim: rgba(46,125,50,0.08);
    --tpf-cat-environmental-mid: rgba(46,125,50,0.22);
    --tpf-cat-animals: #b86e00;
    --tpf-cat-animals-dim: rgba(184,110,0,0.09);
    --tpf-cat-animals-mid: rgba(184,110,0,0.22);
}
.tpf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--tpf-border);
    background: var(--tpf-surface2);
}
.tpf-adjust-pin-row {
    padding: 0 14px 10px;
    flex-shrink: 0;
}
.tpf-adjust-pin-btn {
    width: 100%;
    padding: 8px 12px;
    background: var(--tpf-surface2);
    border: 1px dashed var(--tpf-border);
    border-radius: 8px;
    color: var(--tpf-text-muted);
    font-size: 12px;
    font-family: 'Barlow', sans-serif;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.tpf-adjust-pin-btn:hover {
    background: var(--tpf-surface3);
    border-color: var(--tpf-amber-mid);
    color: var(--tpf-text);
}

.tpf-title {
    font-family: 'Barlow Condensed', 'Barlow', sans-serif;
    font-size: 17px;
    font-weight: 800;
    color: var(--tpf-text);
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tpf-close {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--tpf-surface3);
    border: 1px solid var(--tpf-border);
    color: var(--tpf-text-muted);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    padding: 0;
    line-height: 1;
}
.tpf-close:hover {
    background: var(--tpf-border-light);
    color: var(--tpf-text);
}
.tpf-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--tpf-border-light) transparent;
}
/* Mobile: prevent edit location form from clipping under Safari bottom bar / nav */
@media (max-width: 767px) {
    .tp-edit-loc-form-wrap {
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .tp-edit-loc-form-wrap .tpf-form {
        max-height: calc(100vh - 180px);
        max-height: calc(100dvh - 180px);
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
        -webkit-overflow-scrolling: touch;
    }
}
.tpf-form::-webkit-scrollbar { width: 4px; }
.tpf-form::-webkit-scrollbar-track { background: transparent; }
.tpf-form::-webkit-scrollbar-thumb { background: var(--tpf-border-light); border-radius: 4px; }
.tpf-form::-webkit-scrollbar-thumb:hover { background: var(--tpf-text-dim); }
.tpf-field {}
.tpf-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--tpf-text-muted);
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tpf-optional {
    font-size: 10px;
    color: var(--tpf-text-dim);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.tpf-input, .tpf-select, .tpf-textarea {
    width: 100%;
    padding: 9px 11px;
    background: var(--tpf-surface);
    border: 1px solid var(--tpf-border);
    border-radius: 8px;
    color: var(--tpf-text);
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.tpf-input::placeholder, .tpf-textarea::placeholder {
    color: var(--tpf-text-dim);
}
.tpf-input:focus, .tpf-select:focus, .tpf-textarea:focus {
    border-color: var(--tpf-amber);
    box-shadow: 0 0 0 3px var(--tpf-amber-dim);
}
.tpf-input.tpf-error {
    border-color: var(--tpf-red) !important;
    box-shadow: 0 0 0 3px var(--tpf-red-dim) !important;
}
.tpf-select {
    cursor: pointer;
    appearance: none;
    font-weight: 600;
    background-image: var(--tpf-select-arrow);
    background-repeat: no-repeat;
    background-position: right 11px center;
}
.tpf-select option {
    background: var(--tpf-option-bg);
}
.tpf-textarea {
    resize: vertical;
    min-height: 64px;
    max-height: 120px;
    line-height: 1.5;
}

/* Type grid – 3 columns; extra rows for additional location categories */
.tpf-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 8px;
    align-items: stretch;
}
.tpf-type-btn {
    min-height: 52px;
    padding: 8px 6px;
    background: var(--tpf-surface);
    border: 1px solid var(--tpf-border);
    border-radius: 10px;
    color: var(--tpf-text-muted);
    font-family: 'Barlow', sans-serif;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    user-select: none;
}
.tpf-type-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}
.tpf-type-btn:hover {
    background: var(--tpf-surface3);
    color: var(--tpf-text);
    border-color: var(--tpf-border-light);
}
.tpf-type-btn.selected {
    background: var(--tpf-amber-dim);
    border-color: var(--tpf-amber-mid);
    color: var(--tpf-amber);
    box-shadow: 0 0 0 1px var(--tpf-amber-dim) inset;
}

/* Photo upload */
.tpf-upload-area {
    border: 1.5px dashed var(--tpf-border-light);
    border-radius: 10px;
    padding: 14px 12px;
    background: var(--tpf-surface);
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    display: block;
}
.tpf-upload-area:hover {
    border-color: var(--tpf-amber);
    background: var(--tpf-amber-dim);
}
.tpf-upload-icon {
    font-size: 20px;
    margin-bottom: 4px;
}
.tpf-upload-text {
    font-size: 12px;
    color: var(--tpf-text-muted);
    font-weight: 600;
}
.tpf-upload-sub {
    font-size: 10px;
    color: var(--tpf-text-dim);
    margin-top: 2px;
}
.tpf-photo-preview {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.tpf-photo-thumb {
    width: 56px;
    height: 56px;
    border-radius: 7px;
    background: var(--tpf-surface3);
    border: 1px solid var(--tpf-border);
    overflow: hidden;
    position: relative;
}
.tpf-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tpf-photo-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    padding: 0;
    line-height: 1;
}

/* Premium: private spot toggle (add / edit location) */
.tpf-private-field .tpf-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--tpf-border, rgba(255, 255, 255, 0.12));
    background: var(--tpf-surface, rgba(0, 0, 0, 0.2));
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--tpf-text, rgba(255, 255, 255, 0.9));
    box-sizing: border-box;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.tpf-private-field .tpf-toggle-row:hover {
    border-color: rgba(124, 58, 237, 0.45);
    background: rgba(124, 58, 237, 0.08);
}
.tpf-private-field .tpf-toggle-row:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.35);
}
.tpf-toggle-track {
    flex-shrink: 0;
    width: 44px;
    height: 26px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.14);
    position: relative;
    transition: background 0.2s ease;
}
.tpf-toggle-row.is-on .tpf-toggle-track {
    background: linear-gradient(145deg, #7c3aed, #a78bfa);
}
.tpf-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease;
}
.tpf-toggle-row.is-on .tpf-toggle-knob {
    transform: translateX(18px);
}
.tpf-toggle-label {
    font-size: 13px;
    line-height: 1.4;
    color: var(--tpf-text-muted, rgba(255, 255, 255, 0.78));
}

.tpf-toggle-copy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.tpf-private-field .tpf-toggle-copy .tpf-toggle-label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--tpf-text, rgba(255, 255, 255, 0.95));
    text-transform: none;
}

/* Explore map toggle: same idea as Premium badge, flatter — no shimmer */
.tpf-premium-badge.tpf-premium-badge--simple {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px 3px 7px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(145deg, #6d28d9 0%, #7c3aed 50%, #8b5cf6 100%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.22) inset,
        0 1px 4px rgba(0, 0, 0, 0.2);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.tpf-premium-badge--simple .tpf-premium-badge-icon {
    font-size: 9px;
    line-height: 1;
    opacity: 0.9;
    filter: none;
}

.tpf-premium-badge--simple .tpf-premium-badge-txt {
    position: relative;
    z-index: 1;
}

/* Coords display */
.tpf-coords {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    background: var(--tpf-surface);
    border: 1px solid var(--tpf-border);
    border-radius: 8px;
    font-size: 12px;
    color: var(--tpf-text-muted);
}
.tpf-coords-pin {
    font-size: 13px;
}
.tpf-coords-val {
    font-family: 'Barlow Condensed', 'Barlow', sans-serif;
    font-size: 13px;
    color: var(--tpf-green);
    font-weight: 700;
    letter-spacing: 0.3px;
}
.tpf-coords-ok {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    color: var(--tpf-green);
    background: var(--tpf-green-dim);
    padding: 2px 7px;
    border-radius: 10px;
    border: 1px solid rgba(74,222,128,0.3);
}
body:not(.dark-mode) .tpf-coords-ok,
body.light-mode .tpf-coords-ok {
    border-color: rgba(26,143,74,0.25);
}

/* Submit button */
.tpf-submit {
    width: 100%;
    padding: 10px;
    background: var(--tpf-amber);
    border: none;
    border-radius: 9px;
    color: var(--tpf-submit-text);
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
}
.tpf-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(184,110,0,0.25);
}
body.dark-mode .tpf-submit:hover { background: #ffb820; }
body:not(.dark-mode) .tpf-submit:hover,
body.light-mode .tpf-submit:hover { background: #9e5e00; }
.tpf-submit:active {
    transform: scale(0.99);
}
.tpf-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Messages */
.tpf-msg {
    font-size: 11px;
    text-align: center;
    min-height: 0;
    color: var(--tpf-text-muted);
}
.tpf-msg.success { color: var(--tpf-green); }
.tpf-msg.error { color: var(--tpf-red); }

/* Toast (e.g. after edit save) */
.tpf-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.tpf-toast-success {
    background: var(--tpf-green, #22c55e);
    color: #fff;
}

/* Hint */
.tpf-hint {
    text-align: center;
    font-size: 11px;
    color: var(--tpf-text-dim);
    padding: 6px 0 10px;
}

/* Success state */
.tpf-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 20px;
    text-align: center;
    gap: 8px;
}
.tpf-success-icon {
    font-size: 40px;
    animation: tpfPopIn 0.4s cubic-bezier(0.16,1,0.3,1);
}
@keyframes tpfPopIn {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.tpf-success-title {
    font-family: 'Barlow Condensed', 'Barlow', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #4ade80;
}
.tpf-success-sub {
    font-size: 13px;
    color: #888;
    line-height: 1.5;
}

/* Pin markers */
.tp-add-loc-pin,
.tp-saved-pin,
.tp-default-pin,
.tp-demolished-pin,
.tp-premium-private-pin {
    background: none !important;
    border: none !important;
}

/* ═══ End Add Location Form ═══ */

/* Mobile: one connected box – Search, Add location, Saved places, Filters (with Layers inside) */
@media (max-width: 767px) {
    .leaflet-top.leaflet-right {
        margin-top: 62px;
        margin-right: 6px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: min(220px, calc(100vw - 28px));
        max-width: none;
        padding: 0;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        box-sizing: border-box;
    }
    .leaflet-top.leaflet-right > .leaflet-control {
        margin: 0;
        border: none !important;
        box-shadow: none !important;
    }
    .tp-explore-panel.panel {
        width: 100% !important;
    }
    /* Tighter explore menu on phone — frees vertical space; location card uses separate max-height */
    body.page-explore .tp-explore-panel.panel {
        gap: 4px;
    }
    body.page-explore .tp-explore-panel .search-input,
    body.page-explore .tp-explore-panel .map-search-input,
    body.page-explore .tp-explore-panel #map-search {
        padding: 7px 38px 7px 32px !important;
        font-size: 12px !important;
    }
    body.page-explore .tp-explore-panel .search-icon {
        left: 10px;
        font-size: 13px;
    }
    body.page-explore .tp-explore-panel .search-locate-btn {
        width: 24px;
        height: 24px;
        right: 7px;
    }
    body.page-explore .tp-explore-panel .ctrl-btn {
        padding: 8px 10px !important;
        gap: 8px;
        font-size: 12px !important;
    }
    body.page-explore .tp-explore-panel .btn-icon {
        font-size: 14px;
        width: 18px;
    }
    body.page-explore .tp-explore-evl-btn {
        padding: 5px 8px !important;
        font-size: 11px !important;
    }
    body.page-explore .tp-explore-panel-minimize {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }

    /* Filters / Map layers: when expanded, scroll inside panel so content isn’t clipped below the map */
    body.page-explore .tp-explore-panel .expand-panel.open {
        max-height: min(
            62vh,
            calc(
                100vh - var(--tp-explore-admin-h) - var(--tp-explore-header-offset) - var(--tp-explore-leaflet-top-inset, 20px) - 220px - env(safe-area-inset-bottom, 0px)
            )
        );
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        touch-action: pan-y;
        scrollbar-width: thin;
        scrollbar-color: var(--mc-border-light, #333) transparent;
    }
    @supports (height: 100dvh) {
        body.page-explore .tp-explore-panel .expand-panel.open {
            max-height: min(
                62vh,
                calc(
                    100dvh - var(--tp-explore-admin-h) - var(--tp-explore-header-offset) - var(--tp-explore-leaflet-top-inset, 20px) - 220px - env(safe-area-inset-bottom, 0px)
                )
            );
        }
    }
    body.page-explore .tp-explore-panel .expand-panel.open::-webkit-scrollbar {
        width: 4px;
    }
    body.page-explore .tp-explore-panel .expand-panel.open::-webkit-scrollbar-thumb {
        background: var(--mc-border-light, #333);
        border-radius: 4px;
    }

    /* Filter chips: narrow panel + flex/grid min sizes caused “Extreme” / location types to clip the box */
    .tp-explore-panel .diff-chip-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }
    .tp-explore-panel .diff-chip {
        flex: none;
        min-width: 0;
        padding: 8px 5px;
        font-size: 10px;
        gap: 4px;
    }
    .tp-explore-panel .diff-chip .emoji,
    .tp-explore-panel .loc-type-chip .emoji {
        width: 1em;
        height: 1em;
        max-width: 14px;
        max-height: 14px;
        object-fit: contain;
        flex-shrink: 0;
        vertical-align: middle;
    }
    .tp-explore-panel .loc-type-chip-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }
    .tp-explore-panel .loc-type-chip {
        min-width: 0;
        padding: 8px 5px;
        font-size: 10px;
        row-gap: 9px;
        line-height: 1.15;
        overflow-wrap: anywhere;
        text-wrap: balance;
    }
    .tp-explore-panel .loc-type-chip .loc-type-icon {
        line-height: 0;
    }

    /* Add location form: mobile override */
    .tp-add-loc-form-wrap {
        order: 0;
        box-shadow: none;
    }

    /* ========== Connected box: Search (1), Add location (2), Saved places (3), Filters (4) ========== */
    .leaflet-top.leaflet-right > .leaflet-control-layers:not(.tp-filters-control) {
        display: none !important;
    }
    .leaflet-top.leaflet-right > .map-search-box {
        order: 1;
        display: block !important;
        width: 100% !important;
        padding: 6px 6px 3px !important;
        background: #fff !important;
        border: none !important;
        border-radius: 8px 8px 0 0 !important;
    }
    .leaflet-top.leaflet-right > .add-location-control {
        order: 2;
        padding: 0 6px 3px !important;
        background: #fff !important;
        border: none !important;
        border-radius: 0 !important;
    }
    .leaflet-top.leaflet-right > .saved-places-control {
        order: 3;
        padding: 0 6px 3px !important;
        background: #fff !important;
        border: none !important;
        border-radius: 0 !important;
    }
    .map-search-box form#map-filter-form,
    .map-search-box .map-search-box-wrap,
    .map-search-box .user-search-container {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        background: transparent !important;
        box-sizing: border-box;
    }
    /* Top box: all controls same look – 1px border, 12px font, font-weight 500, 6px radius */
    .map-search-box .map-search-input,
    .map-search-box input#map-search,
    .map-search-box .location-search-fields {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        box-sizing: border-box;
        padding: 6px 8px 6px 30px;
        font-size: 12px !important;
        font-weight: 500 !important;
        line-height: 1.35;
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-radius: 6px;
        background: #f8f9fa;
        outline: none;
        -webkit-tap-highlight-color: transparent;
    }
    .map-search-box .map-search-input:focus,
    .map-search-box input#map-search:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.2);
    }
    .add-location-control .add-location-btn,
    .saved-places-control .saved-places-btn {
        width: 100%;
        padding: 6px 8px;
        font-size: 12px !important;
        font-weight: 500 !important;
        border-radius: 6px;
        border: 1px solid rgba(0, 0, 0, 0.12) !important;
        box-shadow: none !important;
        background: #fff;
        color: #1a1a1a;
    }
    .add-location-control .add-location-btn .tp-btn-icon,
    .saved-places-control .saved-places-btn .tp-btn-icon {
        width: 12px;
        height: 12px;
        background-size: 12px;
    }

    /* Active state: blue highlight (Add location + Saved places) */
    .add-location-control .add-location-btn.active,
    .saved-places-control .saved-places-btn.active {
        background: #4a9cf6 !important;
        color: #fff !important;
        border-color: #4a9cf6 !important;
    }
    .add-location-control .add-location-btn.active:hover,
    .saved-places-control .saved-places-btn.active:hover {
        background: #5aacff !important;
        border-color: #5aacff !important;
    }

    /* ========== Filters: last item in connected box, icon + text ========== */
    .leaflet-top.leaflet-right > .tp-filters-control {
        order: 4;
        width: 100% !important;
        padding: 0 6px 6px !important;
        background: #fff !important;
        border: none !important;
        border-radius: 0 0 8px 8px !important;
        overflow: visible !important;
        position: relative;
    }
    .tp-filters-control .tp-filters-toggle {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 6px 8px !important;
        border-radius: 6px;
        border: 1px solid rgba(0, 0, 0, 0.12) !important;
        background-color: #fff !important;
        background-image: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px;
        text-decoration: none;
        font-size: 12px !important;
        font-weight: 500 !important;
        color: #1a1a1a !important;
    }
    .tp-filters-control .tp-filters-toggle::before {
        content: "";
        display: inline-block;
        flex-shrink: 0;
        width: 12px;
        height: 12px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23231f20' stroke-width='2'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/%3E%3C/svg%3E") no-repeat center;
        background-size: 12px 12px;
    }
    .tp-filters-control .tp-filters-toggle::after {
        content: none !important;
    }
    .tp-filters-toggle .tp-filters-toggle-text {
        display: inline !important;
        font-size: 12px;
        font-weight: 500;
        color: inherit;
    }
    .leaflet-top.leaflet-right .leaflet-control-layers-toggle span:not(.tp-filters-toggle-text) {
        display: none !important;
    }
    /* Layers/Filters expanded panel: open to the left so it’s on screen, not clipped */
    .leaflet-top.leaflet-right .tp-filters-control.leaflet-control-layers-expanded {
        position: relative;
        overflow: visible;
    }
    .leaflet-top.leaflet-right .leaflet-control-layers-expanded .leaflet-control-layers-list {
        position: fixed !important;
        left: 12px !important;
        right: auto !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        min-width: 220px;
        max-width: min(280px, calc(100vw - 24px));
        max-height: 70vh;
        overflow-y: auto;
        z-index: 2000;
        border-radius: 8px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }
    .tp-filters-section-layers {
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        padding-top: 8px;
        margin-top: 4px;
    }
    .tp-filters-section-layers label {
        display: block;
        padding: 4px 0;
        font-size: 13px;
        cursor: pointer;
    }

    /* ========== Mobile dark ========== */
    body.dark-mode .leaflet-top.leaflet-right {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
}

body.dark-mode .leaflet-control:not(.tp-explore-panel) a,
body.dark-mode .leaflet-control-layers-toggle {
    background-color: #2a2e36 !important;
    color: #e4e4e4 !important;
    border-color: #444 !important;
}
body.dark-mode .leaflet-control:not(.tp-explore-panel) a:hover,
body.dark-mode .leaflet-control-layers-toggle:hover {
    background-color: #3a3e46 !important;
}
body.dark-mode .leaflet-control-zoom a span {
    color: #e4e4e4 !important;
}
body.dark-mode .leaflet-control-layers-list,
body.dark-mode .leaflet-control-layers-expanded .leaflet-control-layers-list {
    background: #2a2e36 !important;
    border-color: #444 !important;
    color: #e4e4e4 !important;
}
body.dark-mode .leaflet-control-layers label,
body.dark-mode .leaflet-control-layers select {
    color: #e4e4e4 !important;
}
body.dark-mode .leaflet-control-layers select {
    background: #1e2228 !important;
    border-color: #555 !important;
}
/* Default Layers button icon: invert so it's visible on dark background */
body.dark-mode .leaflet-control-layers:not(.tp-filters-control) .leaflet-control-layers-toggle {
    filter: invert(1);
}

/* Filters control: light icon on dark background (desktop) */
@media (min-width: 768px) {
    body.dark-mode .tp-filters-control .tp-filters-toggle::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23e4e4e4' stroke-width='2'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/%3E%3C/svg%3E");
    }
}
body.dark-mode .tp-filters-control .tp-filters-panel,
body.dark-mode .tp-filters-control .leaflet-control-layers-list {
    background: #2a2e36 !important;
}
body.dark-mode .tp-filters-control .tp-filters-section label,
body.dark-mode .tp-filters-control .tp-filters-label {
    color: #e4e4e4 !important;
}
body.dark-mode .tp-filters-control select#filter-layer-type,
body.dark-mode .tp-filters-control select#filter-layer-popularity {
    background: #1e2228 !important;
    border-color: #555 !important;
    color: #e4e4e4 !important;
}

/* Add location / Saved places: each is its own .leaflet-control (separate boxes like Layers/Filter); button styling in dark mode */
body.dark-mode .add-location-control .add-location-btn {
    background: #2a2e36 !important;
    color: #e4e4e4 !important;
    border-color: #555 !important;
}
body.dark-mode .add-location-control .add-location-btn:hover {
    background: #3a3e46 !important;
    border-color: #666 !important;
    color: #fff !important;
}
body.dark-mode .saved-places-control .saved-places-btn {
    background: #2a2e36 !important;
    color: #e4e4e4 !important;
    border-color: #555 !important;
}
body.dark-mode .saved-places-control .saved-places-btn:hover {
    background: #3a3e46 !important;
    border-color: #666 !important;
    color: #fff !important;
}
body.dark-mode .saved-places-control .saved-places-btn.active {
    background: #4a9cf6 !important;
    color: #fff !important;
    border-color: #4a9cf6 !important;
}
body.dark-mode .saved-places-control .saved-places-btn.active:hover {
    background: #5aacff !important;
    border-color: #5aacff !important;
}

/* Pin popup card (inside dark wrapper): text and buttons */
body.dark-mode .leaflet-popup-content-wrapper .tp-pin-popup-card .tp-pin-popup-title,
body.dark-mode .leaflet-popup-content-wrapper .tp-pin-popup-card .tp-pin-popup-photos-label,
body.dark-mode .leaflet-popup-content-wrapper .tp-pin-popup-card .tp-pin-popup-notes-label,
body.dark-mode .leaflet-popup-content-wrapper .tp-pin-popup-card .tp-pin-popup-difficulty-line,
body.dark-mode .leaflet-popup-content-wrapper .tp-pin-popup-card .tp-pin-popup-by,
body.dark-mode .leaflet-popup-content-wrapper .tp-pin-popup-card .tp-pin-popup-stats,
body.dark-mode .leaflet-popup-content-wrapper .tp-pin-popup-card .tpp-location-type,
body.dark-mode .leaflet-popup-content-wrapper .tp-pin-popup-card .tpp-last-visit {
    color: #e4e4e4 !important;
}
body.dark-mode .leaflet-popup-content-wrapper .tp-pin-popup-card .tpp-location-type { color: #f5a623 !important; }
body.dark-mode .leaflet-popup-content-wrapper .tp-pin-popup-card .tpp-last-visit { color: #a0a89e !important; }
body.dark-mode .leaflet-popup-content-wrapper .tp-pin-popup-card .tpp-visit-dot { background: #4ade80 !important; box-shadow: 0 0 4px rgba(74,222,128,0.5); }
body.dark-mode .leaflet-popup-content-wrapper .tp-pin-popup-card .tpp-visit-dot-place { background: #666 !important; box-shadow: none; }

/* Pin popup: make links (author, likes, comments) match normal text in dark mode so they don’t get bright link styling */
body.dark-mode .leaflet-popup-content-wrapper .tp-pin-popup-card a {
    color: #e4e4e4 !important;
    text-decoration: none !important;
}
body.dark-mode .leaflet-popup-content-wrapper .tp-pin-popup-card a:hover {
    color: #f0ede8 !important;
}
body.dark-mode .leaflet-popup-content-wrapper .tp-pin-popup-card .tpp-added-name {
    color: #e4e4e4 !important;
}
body.dark-mode .leaflet-popup-content-wrapper .tp-pin-popup-card .tpp-added-name:hover {
    color: #f0ede8 !important;
}
body.dark-mode .leaflet-popup-content-wrapper .tp-pin-popup-card .tpp-stat-clickable .tpp-stat-val,
body.dark-mode .leaflet-popup-content-wrapper .tp-pin-popup-card .tpp-stat-clickable .tpp-stat-lbl {
    color: #e4e4e4 !important;
}
body.dark-mode .leaflet-popup-content-wrapper .tp-pin-popup-card .tpp-stat-clickable:hover .tpp-stat-val,
body.dark-mode .leaflet-popup-content-wrapper .tp-pin-popup-card .tpp-stat-clickable:hover .tpp-stat-lbl {
    color: #f5a623 !important;
}
body:not(.dark-mode) .leaflet-popup-content-wrapper .tp-pin-popup-card .tpp-stat-clickable:hover .tpp-stat-val,
body:not(.dark-mode) .leaflet-popup-content-wrapper .tp-pin-popup-card .tpp-stat-clickable:hover .tpp-stat-lbl,
body.light-mode .leaflet-popup-content-wrapper .tp-pin-popup-card .tpp-stat-clickable:hover .tpp-stat-val,
body.light-mode .leaflet-popup-content-wrapper .tp-pin-popup-card .tpp-stat-clickable:hover .tpp-stat-lbl {
    color: var(--tpp-amber, #b86e00) !important;
}
body.dark-mode .leaflet-popup-content-wrapper .tp-pin-popup-card .tp-pin-popup-details-link a {
    color: #7eb8ff !important;
}
body.dark-mode .leaflet-popup-content-wrapper .tp-pin-popup-card .tp-pin-popup-details-link a:hover {
    color: #9ecaff !important;
}
body.dark-mode .leaflet-popup-content-wrapper .tp-pin-popup-card .tp-pin-popup-desc-block {
    background: #1e2228 !important;
    border-color: #444 !important;
    color: #c4c4c4 !important;
}
body.dark-mode .leaflet-popup-content-wrapper .tp-pin-popup-card .tp-pin-thumb {
    border-color: #555 !important;
}
body.dark-mode .leaflet-popup-content-wrapper .tp-pin-popup-card .tp-pin-btn {
    background: #3a3e46 !important;
    color: #e4e4e4 !important;
    border-color: #555 !important;
}
body.dark-mode .leaflet-popup-content-wrapper .tp-pin-popup-card .tp-pin-btn:hover {
    background: #4a4e56 !important;
    border-color: #666 !important;
    color: #fff !important;
}
body.dark-mode .leaflet-popup-content-wrapper .tp-pin-popup-card .tp-pin-btn-gmap {
    background: #1e3a5f !important;
    color: #7eb8ff !important;
    border-color: #2a4a6f !important;
}
body.dark-mode .leaflet-popup-content-wrapper .tp-pin-popup-card .tp-pin-btn-gmap:hover {
    background: #2a4a7f !important;
    color: #9ecaff !important;
}
body.dark-mode .leaflet-popup-content-wrapper .tp-pin-popup-card .tp-pin-btn-earth {
    background: #1e3d1e !important;
    color: #7ed07e !important;
    border-color: #2a4d2a !important;
}
body.dark-mode .leaflet-popup-content-wrapper .tp-pin-popup-card .tp-pin-btn-earth:hover {
    background: #2a4d2a !important;
    color: #9ee09e !important;
}
body.dark-mode .leaflet-popup-content-wrapper .tp-pin-popup-card .tp-pin-btn-share {
    background: #3d2a5f !important;
    color: #c4b5fd !important;
    border-color: #6b21a8 !important;
}
body.dark-mode .leaflet-popup-content-wrapper .tp-pin-popup-card .tp-pin-btn-share:hover {
    background: #4a3570 !important;
}

/* Lightbox close button (overlay is dark; keep button visible) */
body.dark-mode .tp-pin-lightbox-close {
    background: rgba(255, 255, 255, 0.95);
    color: #1a1a1a;
}
body.dark-mode .tp-pin-lightbox-close:hover {
    background: #fff;
}

.location-search-fields {
    padding: 10px 0px;
    width: 175px;
}
h2.gamipress-achievement-title {
    font-size: 16px;
}
  /* 🧠 Responsive tweaks */
@media (max-width: 480px) {
    .leaflet-popup-content-wrapper {
      width: auto !important;
      max-width: 260px !important;
    }
    .leaflet-popup-content {
      padding: 10px 12px !important;
    }
    .tp-pin-popup-card {
      min-width: 0;
      max-width: 100%;
      font-size: 11px;
    }
    .tp-pin-popup-card .tp-pin-popup-title {
      font-size: 1em;
      margin-bottom: 4px;
    }
    .tp-pin-popup-card .tp-pin-popup-photos-label,
    .tp-pin-popup-card .tp-pin-popup-notes-label {
      font-size: 11px;
    }
    .tp-pin-popup-card .tp-pin-popup-thumbs {
      gap: 4px;
    }
    .tp-pin-popup-card .tp-pin-thumb {
      width: 40px;
      height: 40px;
    }
    .tp-pin-popup-card .tp-pin-popup-desc-block {
      padding: 6px;
      font-size: 11px;
      max-height: 4.5em;
      overflow-y: auto;
    }
    .tp-pin-popup-card .tp-pin-popup-actions {
      margin-top: 6px;
      gap: 3px;
    }
    .tp-pin-popup-card .tp-pin-btn {
      padding: 5px 6px;
      font-size: 10px;
    }
    #add-location-form {
      font-size: 13px;
    }
}
/* Explore page (all viewports): lock scroll, fit to viewport, reduce accidental browser zoom so map zoom keeps buttons visible */
html:has(body.page-explore),
body.page-explore {
    overflow: hidden !important;
    height: 100% !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    position: relative;
    margin: 0;
    padding: 0;
    touch-action: manipulation;
    /* WP admin bar (0 when logged out); map top = this + header offset below */
    --tp-explore-admin-h: 0px;
    /* Site header height from its top edge to bottom (below admin bar when admin is shown) */
    --tp-explore-header-offset: 118px;
    /* Distance from top of #map to Leaflet controls / search panel (increase = lower on screen) */
    --tp-explore-leaflet-top-inset: 20px;
}
body.admin-bar.page-explore {
    --tp-explore-admin-h: var(--wp-admin--admin-bar--height, 32px);
}
@media screen and (max-width: 782px) {
    body.admin-bar.page-explore {
        --tp-explore-admin-h: var(--wp-admin--admin-bar--height, 46px);
    }
}
@media (min-width: 768px) {
    body.page-explore {
        /* Match theme .sticky-wrap (~70px) + small buffer; 94px left a white band above map/search */
        --tp-explore-header-offset: 72px;
    }
}
body.page-explore footer,
body.page-explore .site-footer,
body.page-explore #footer,
body.page-explore .footer-wrapper {
    display: none !important;
}
body.page-explore .sticky-wrap,
body.page-explore #header--standard,
body.page-explore header,
body.page-explore .header {
    position: fixed !important;
    top: var(--tp-explore-admin-h) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 25000 !important;
    transform: none !important;
}
@supports (height: 100dvh) {
    body.page-explore {
        min-height: 100dvh !important;
        max-height: 100dvh !important;
    }
}
body.page-explore #map {
    position: fixed !important;
    top: calc(var(--tp-explore-admin-h) + var(--tp-explore-header-offset)) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: calc(100vh - var(--tp-explore-admin-h) - var(--tp-explore-header-offset)) !important;
    max-height: calc(100vh - var(--tp-explore-admin-h) - var(--tp-explore-header-offset)) !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1;
}
@supports (height: 100dvh) {
    body.page-explore #map {
        height: calc(100dvh - var(--tp-explore-admin-h) - var(--tp-explore-header-offset)) !important;
        max-height: calc(100dvh - var(--tp-explore-admin-h) - var(--tp-explore-header-offset)) !important;
    }
}
/* No stray band between fixed header and fixed map (theme #content background / padding) */
body.page-explore #content,
body.page-explore #content.hfeed.site {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
body.page-explore #overflow-x-wrapper {
    background: transparent !important;
}
/* Prevent any theme wrapper from scrolling on explore (keeps buttons visible) */
body.page-explore .site,
body.page-explore #page,
body.page-explore .content-area,
body.page-explore main {
    overflow: hidden !important;
    max-height: 100vh !important;
}
/* Mobile: filter button and panel work with touch; panel visible and tappable */
@media (max-width: 767px) {
    .tp-filters-control .tp-filters-toggle {
        min-width: 44px;
        min-height: 44px;
        -webkit-tap-highlight-color: transparent;
    }
    .tp-filters-control.leaflet-control-layers-expanded .leaflet-control-layers-list {
        min-width: 220px;
        z-index: 2000;
    }
    body.dark-mode .tp-filters-control .tp-filters-toggle {
        touch-action: manipulation;
    }
}
/* Mobile: popup fits in viewport, text/buttons wrap so nothing clips */
@media (max-width: 767px) {
    /* Keep entire popup on screen (map is below 56px header) */
    .leaflet-popup-content-wrapper {
      max-width: min(280px, 90vw) !important;
      width: min(280px, 90vw) !important;
      max-height: calc(100vh - 100px) !important;
      overflow: hidden;
      box-sizing: border-box;
    }
    .leaflet-popup-content {
      padding: 10px 12px !important;
      max-height: calc(100vh - 120px) !important;
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
      box-sizing: border-box !important;
      margin: 0 !important;
    }
    .leaflet-popup-content .tp-pin-popup-card {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
      max-width: 100%;
      box-sizing: border-box;
      word-break: break-word;
      overflow-wrap: break-word;
    }
    .leaflet-popup-content .tp-pin-popup-card .tp-pin-popup-actions {
      flex-shrink: 0;
      margin-top: 8px;
    }
    .tp-pin-popup-card {
      font-size: 11px;
      max-width: 100%;
      word-break: break-word;
      overflow-wrap: break-word;
    }
    .tp-pin-popup-card .tp-pin-popup-title {
      font-size: 1em;
      margin-bottom: 4px;
      word-break: break-word;
      overflow-wrap: break-word;
    }
    .tp-pin-popup-card .tp-pin-popup-details-link,
    .tp-pin-popup-card .tp-pin-popup-details-link a,
    .tp-pin-popup-card .tp-pin-popup-photos,
    .tp-pin-popup-card .tp-pin-popup-notes {
      margin: 4px 0;
      word-break: break-word;
      overflow-wrap: break-word;
    }
    .tp-pin-popup-card .tp-pin-popup-thumbs {
      gap: 4px;
    }
    .tp-pin-popup-card .tp-pin-thumb {
      width: 36px;
      height: 36px;
    }
    .tp-pin-popup-card .tp-pin-popup-desc-block {
      max-height: 4.5em;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      word-break: break-word;
    }
    /* Buttons: compact on mobile so they don't clip */
    .tp-pin-popup-card .tp-pin-popup-actions {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 3px;
      min-width: 0;
    }
    .tp-pin-popup-card .tp-pin-btn {
      padding: 3px 10px;
      font-size: 9px;
      line-height: 1.2;
      white-space: nowrap;
      text-align: center;
      min-width: 0;
      width: auto;
      box-sizing: border-box;
    }
}
  body.dark-mode .leaflet-popup-content-wrapper {
    background: linear-gradient(to bottom right, #121419, #121419);
    border: 1px solid #121419;
  }
  .leaflet-popup-content-wrapper {
    background: linear-gradient(to bottom right, #ffffff, #f8f8f8);
    border: 1px solid #eaeaea;
  }
  
  #add-location-form {
    background: transparent;
    border-radius: 0;
  }
button#gamipress-achievements-load-more {
    /* Do not use display: ... !important — GamiPress hides the button with .hide() when
       there are no more badges; !important would override inline display:none. */
    display: block;
    width: auto !important;
    background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
    color: #fff !important;
    padding: 14px 32px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    border: none !important;
    margin: 20px auto 30px !important;
    cursor: pointer !important;
    transition: background 0.2s, transform 0.15s !important;
}
button#gamipress-achievements-load-more:hover {
    background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
    transform: translateY(-1px) !important;
}
body.dark-mode button#gamipress-achievements-load-more {
    background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
    color: #fff !important;
}
li#activity-activity-favs-personal-li {
    display: none;
}
a.gamipress-share-copy {
    background: #20232b;
    color: #fff;
}

/* Hide share buttons (Facebook, X, Pinterest, Copy Link) on badge cards */
.gamipress-share-buttons-label,
.gamipress-share-buttons {
    display: none !important;
}

.tp-view-all-badges-wrap {
    margin-bottom: 1.25rem;
    text-align: center;
}
.tp-view-all-badges-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: background 0.2s, transform 0.15s;
}
.tp-view-all-badges-btn:hover {
    background: linear-gradient(135deg, #6d28d9, #8b5cf6);
    color: #fff;
    transform: translateY(-1px);
}

/* Badge congratulations banner: purple (premium) accent, readable in all modes */
.gamipress-achievement-congratulations {
    background: #f5f6f3;
    border: 1px solid #e0e0dc;
    border-left: 4px solid #7c3aed;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 12px 0;
}
.gamipress-achievement-congratulations p {
    margin: 0;
    color: #1a1a1a !important;
    font-size: 14px;
    line-height: 1.45;
}
body.dark-mode .gamipress-achievement-congratulations {
    background: #252525;
    border-color: #3a3a3a;
    border-left-color: #a78bfa;
}
body.dark-mode .gamipress-achievement-congratulations p {
    color: #e6e6e6 !important;
}

/* Badge steps: no strikethrough on earned steps (e.g. "5 Spots Added") */
li.user-has-earned,
.gamipress-achievement-steps .user-has-earned,
.gamipress-required-achievements .user-has-earned {
    text-decoration: none !important;
}

/* Hide "Latest Posts" widget on badge pages */
#olympus_latest_posts-2 {
    display: none !important;
}
body.my-activity .leaflet-top.leaflet-right {
    display: none;
}

/* Header logo — larger mark (desktop + mobile) */
#header--standard #desktop-header .logo .img-wrap,
#header--standard #mobile-header .header-logo .logo .img-wrap {
    display: flex;
    align-items: center;
}
#header--standard #desktop-header .logo .img-wrap img,
#header--standard #mobile-header .header-logo .logo .img-wrap img {
    max-height: 68px;
    width: auto;
    max-width: min(100%, 320px);
    height: auto;
    object-fit: contain;
    vertical-align: middle;
}
@media (min-width: 768px) {
    /* Stable 3-column desktop/tablet header: logo | nav | profile controls.
       This avoids Bootstrap col-sm/md conflicts around 768-1024. */
    #header--standard #desktop-header.header--standard-wrap {
        display: grid !important;
        grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 12px;
        width: 100%;
    }
    #header--standard #desktop-header.header--standard-wrap > .logo,
    #header--standard #desktop-header.header--standard-wrap > .menu,
    #header--standard #desktop-header.header--standard-wrap > .tp-header-menu,
    #header--standard #desktop-header.header--standard-wrap > .cta.tp-header-menu {
        width: auto !important;
        max-width: none !important;
        min-width: 0;
    }
    #header--standard #desktop-header .logo a.logo {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }
    #header--standard #desktop-header .logo .img-wrap {
        max-width: 100%;
        min-width: 0;
    }
    #header--standard #desktop-header .logo .img-wrap img {
        display: block;
        max-height: 70px;
        max-width: 100%;
        width: auto;
        height: auto;
    }

    #header--standard #desktop-header > .menu .primary-menu {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0;
        overflow: hidden;
    }
    /* Force desktop links visible (theme may inline display:none awaiting hamburger toggle). */
    #header--standard #desktop-header nav.primary-menu ul#primary-menu.primary-menu-menu {
        display: flex !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 4px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    #header--standard #desktop-header nav.primary-menu ul#primary-menu.primary-menu-menu::-webkit-scrollbar {
        height: 4px;
    }
    #header--standard #desktop-header .open-responsive-menu.showhide {
        display: none !important;
    }

    #header--standard #desktop-header > .tp-header-menu,
    #header--standard #desktop-header > .cta.tp-header-menu {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        flex-wrap: nowrap;
        min-width: max(120px, min-content);
    }
    #header--standard #desktop-header > .tp-header-menu > [class*="col-"],
    #header--standard #desktop-header > .cta.tp-header-menu > [class*="col-"] {
        width: auto !important;
        max-width: none !important;
        flex: 0 0 auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #header--standard #desktop-header > .tp-header-menu > .col-md-12,
    #header--standard #desktop-header > .cta.tp-header-menu > .col-md-12 {
        width: auto !important;
        max-width: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #header--standard #desktop-header > .tp-header-menu .header-cta,
    #header--standard #desktop-header > .cta.tp-header-menu .header-cta {
        width: auto !important;
        min-width: 98px;
        margin: 0 !important;
        padding: 9px 14px;
        white-space: nowrap;
        line-height: 1.1;
    }
}

@media screen and (max-width :767px) {
    /* Header scrolls with the page (normal flow). Keep overflow visible so large logo is not clipped. */
    body:not(.page-explore) #header--standard #mobile-header,
    body:not(.page-explore) #header--standard #mobile-header .row {
        overflow: visible;
    }
	#desktop-header{
    	display:none;
    }
    #mobile-header{
        display: block !important;
        /* Room below the whole mobile header; logo/toolbar gap tightened separately */
        padding: 4px 0 12px;
    }
    .header-logo {
        margin-bottom: 0;
    }
    .page-id-1602 .header-logo {
        margin-bottom: 0px !important;
    }
    /* Stack image above site title so the mark isn’t squeezed beside text (common parent-theme row layout) */
    #header--standard #mobile-header .header-logo .logo {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        width: 100%;
        text-align: center;
    }
    /* Less air between logo row and Map / menu row (default; logged-in keeps this) */
    #header--standard #mobile-header > .row:first-child {
        margin-bottom: 0 !important;
    }
    #header--standard #mobile-header > .row:first-child .header-logo {
        padding-bottom: 0 !important;
    }
    #header--standard #mobile-header > .row.align-items-center {
        margin-top: -10px !important;
        padding-top: 0 !important;
    }
    /* Guests only: extra space above Log in / Register so logo doesn’t crowd the buttons */
    body:not(.logged-in) #header--standard #mobile-header > .row:first-child {
        margin-bottom: 6px !important;
    }
    body:not(.logged-in) #header--standard #mobile-header > .row:first-child .header-logo {
        padding-bottom: 1px !important;
    }
    body:not(.logged-in) #header--standard #mobile-header > .row.align-items-center {
        margin-top: 0 !important;
        padding-top: 2px !important;
    }
    #header--standard #mobile-header .header-logo .logo .img-wrap {
        width: 100%;
        max-width: 100%;
        justify-content: center;
    }
    #mobile-header .logo {
        justify-content: center;
    }
    #header--standard #mobile-header .header-logo .logo .title-block {
        max-width: 100%;
        margin-bottom: 0;
    }
    #header--standard #mobile-header .header-logo .logo .title-block .logo-title,
    #header--standard #mobile-header .header-logo .logo .title-block .sub-title {
        margin-bottom: 0 !important;
    }
    #header--standard #mobile-header .header-logo .logo .img-wrap img {
        max-height: 60px !important;
        max-width: min(100%, 75vw, 260px) !important;
        width: auto !important;
        height: auto !important;
    }
    .header--standard .primary-menu{
    	display: flex !important;
    	align-items: center !important;
    	justify-content: flex-start !important;
    	gap: 14px !important;
    	flex-wrap: nowrap !important;
    	min-width: 0;
    	position: relative !important;
    	z-index: 27000 !important;
    }
    #mobile-header a.open-responsive-menu.showhide {
    	margin: 0px !important;
    	flex-shrink: 0 !important;
    	min-width: 44px !important;
    	position: relative !important;
    	z-index: 27001 !important;
    }
    .tp-header-map-link {
    	display: inline-flex !important;
    	align-items: center;
    	justify-content: center;
    	min-height: 44px;
    	min-width: 44px;
    	padding: 0 14px;
    	flex-shrink: 0 !important;
    	font-size: 15px;
    	font-weight: 600;
    	color: inherit;
    	text-decoration: none;
    	border-radius: 8px;
    	-webkit-tap-highlight-color: transparent;
    	position: relative !important;
    	z-index: 27001 !important;
    }
    .tp-header-map-link:hover,
    .tp-header-map-link:focus {
    	opacity: 0.85;
    	text-decoration: none;
    	color: inherit;
    }
    body.dark-mode .tp-header-map-link {
    	color: #e4e4e4;
    }
    body.dark-mode .tp-header-map-link:hover,
    body.dark-mode .tp-header-map-link:focus {
    	color: #fff;
    }
    .cta-btn{
    	display: flex !important;
    }
    .cta-btn .col-6 {
        padding-right: 0px;
    }
    .text-6xl {
        font-size: 2.5rem;
        line-height: 120%;
    }
    .mobile-no-margin{
        margin: 0px;
    }
    .mobile-no-top-margin{
        margin-top: 0px;
    }
    .mobile-no-bottom-margin{
        margin-bottom: 0px;
    }
    .banner-row, .mobile-top-paddding-3x{
        padding-top: 35px !important;
    }
    .section-heading {
        font-size: 2rem !important;
        line-height: 120% !important;
    }
    /* ──── Mobile nav: modern card matching profile dropdown ──── */
    /* Theme JS toggles display:block / display:none inline — never override that. */
    ul#primary-menu {
        position: absolute !important;
        z-index: 26000 !important;
        top: 100% !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        width: calc(100vw - 24px) !important;
        max-width: 280px !important;
        margin-top: 8px !important;
        padding: 8px !important;
        list-style: none !important;
        flex-direction: column !important;
        gap: 4px !important;
        background: #fff !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        border-radius: 12px !important;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
        box-sizing: border-box !important;
    }
    /* When the theme shows the menu (display:block), switch to flex column */
    ul#primary-menu[style*="display: block"],
    ul#primary-menu[style*="display:block"] {
        display: flex !important;
    }
    body.dark-mode ul#primary-menu {
        background: #1e2228 !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5) !important;
    }
    ul#primary-menu > li {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 10px !important;
        transition: background 0.15s ease !important;
    }
    ul#primary-menu > li:hover {
        background: rgba(0, 0, 0, 0.04) !important;
    }
    body.dark-mode ul#primary-menu > li:hover {
        background: rgba(255, 255, 255, 0.06) !important;
    }
    ul#primary-menu > li > a {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        border-radius: 10px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--ol-body-font-color, #3e4265) !important;
        text-decoration: none !important;
        border: 1px solid transparent !important;
        transition: background 0.15s ease, color 0.15s ease !important;
        line-height: 1.4 !important;
    }
    body.dark-mode ul#primary-menu > li > a {
        color: var(--ol-body-font-color, #d1d5db) !important;
    }
    ul#primary-menu > li > a:active {
        background: rgba(0, 0, 0, 0.08) !important;
    }
    body.dark-mode ul#primary-menu > li > a:active {
        background: rgba(255, 255, 255, 0.1) !important;
    }
    ul#primary-menu > li.current-menu-item > a,
    ul#primary-menu > li.current_page_item > a {
        background: rgba(124, 58, 237, 0.08) !important;
        color: #7c3aed !important;
    }
    body.dark-mode ul#primary-menu > li.current-menu-item > a,
    body.dark-mode ul#primary-menu > li.current_page_item > a {
        background: rgba(167, 139, 250, 0.12) !important;
        color: #a78bfa !important;
    }
    /* Hide the filler item */
    ul#primary-menu > li.scrollable-fix {
        display: none !important;
    }
    .youzify-wall-options.tresspassers-overriden {
        flex-wrap: nowrap !important;
        gap: 5px !important;
        padding: 8px 10px 6px !important;
    }
    .youzify-wall-options .youzify-wall-opts-item label.youzify-btn {
        padding: 5px 10px !important;
        font-size: 11px !important;
        min-height: 0 !important;
    }
    .youzify-wall-actions{
        align-items: flex-start !important;
    }
    .youzify-posting-form-actions,
    .youzify-posting-form-actions .youzify-wall-post{
        width: 100% !important;
    }
    .aboutus-tagline p{
        max-width: 100% !important;
        text-align: left !important;
    }
    .tp-counters .row-cols-wrap{
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
    }
    .tp-counters .row-cols-wrap .mobile-col-6{
        flex: 1 1 50%;
        padding: 0px;
        text-align: center;
    }
    .section-inner-heading h2{
        font-size: 35px !important;
        margin-bottom: 15px !important; 
    }
    .tresspassers-step .vc_column-inner {
        padding-top: 20px;
    }
    .tresspassers-step .wpb_single_image,
    .tresspassers-step .section-inner-heading h3 {
        margin-bottom: 10px !important;
    }
    .section-inner-heading h1{
        font-size: 40px;
        margin-bottom: 35px !important;
    }
    .mobile-border-nill img.vc_single_image-img {
        width: 100%;
        border-radius: 0px !important;
    }
    button.slick-arrow {
        height: 70px;
        width: 70px;
        background-size: 70px !important;
        background-repeat: no-repeat !important;
    }
    /* Prev/next share a column on small screens; hide disabled arrow entirely (see base carousel rules). */
    .tresspassers-places-carousel .slick-arrow.disabled-slick,
    .tresspassers-places-carousel .slick-arrow.slick-disabled {
        display: none !important;
    }
    button.slick-next.slick-arrow{
        top: 55% !important;
    }
    form#map-filter-form{
        flex-direction: column;
        min-width: 100%;
    }
    .location-search-fields{
        width: 175px !important;
        margin-bottom: 15px !important;
    }
    .page-id-1602 #content{
        margin-top: 18px !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px)  {
    /* Tablet: use compact menu button (like mobile), not horizontal scrolling desktop links. */
    #header--standard #desktop-header .open-responsive-menu.showhide {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        margin: 0 !important;
    }
    #header--standard #desktop-header > .menu .primary-menu {
        position: relative;
        overflow: visible;
        justify-content: flex-start !important;
    }
    #header--standard #desktop-header nav.primary-menu ul#primary-menu.primary-menu-menu {
        display: none !important;
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 0 !important;
        right: auto !important;
        width: min(86vw, 320px) !important;
        max-width: 320px !important;
        margin: 0 !important;
        padding: 8px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
        background: #fff !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
        border-radius: 12px !important;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
        overflow: hidden !important;
        z-index: 26010 !important;
    }
    /* Respect theme JS toggle state on tablet */
    #header--standard #desktop-header nav.primary-menu ul#primary-menu.primary-menu-menu[style*="display: block"],
    #header--standard #desktop-header nav.primary-menu ul#primary-menu.primary-menu-menu[style*="display:block"] {
        display: flex !important;
    }
    body.dark-mode #header--standard #desktop-header nav.primary-menu ul#primary-menu.primary-menu-menu,
    html[data-theme='dark'] #header--standard #desktop-header nav.primary-menu ul#primary-menu.primary-menu-menu {
        background: #1e2228 !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5) !important;
    }

    .container{
        max-width: 95% !important;
        padding: 0px;
    }
    .homepage-row-1 .banner-tagline,
    .homepage-row-1 .banner-heading {
        margin-bottom: 20px;
        line-height: 120%;
    }
    .homepage-row-1 .mbt-100 {
        margin: 0px auto !important;
    }
    .homepage-row-2{
        padding-top: 20px !important;
        padding-bottom: 40px !important;
    }
}
@media (max-width: 1155px) {
    .gamipress-achievement {
        padding: 16px 12px !important;
    }
}
/* ──── Desktop nav links: clean modern style matching profile dropdown ──── */
@media (min-width: 768px) {
    .primary-menu-menu {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .primary-menu-menu > li > a {
        display: inline-flex !important;
        align-items: center !important;
        padding: 10px 18px !important;
        border-radius: 10px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--ol-body-font-color, #3e4265) !important;
        text-decoration: none !important;
        transition: background 0.15s ease, color 0.15s ease !important;
        white-space: nowrap !important;
    }
    body.dark-mode .primary-menu-menu > li > a {
        color: var(--ol-body-font-color, #d1d5db) !important;
    }
    .primary-menu-menu > li > a:hover {
        background: rgba(0, 0, 0, 0.04) !important;
    }
    body.dark-mode .primary-menu-menu > li > a:hover {
        background: rgba(255, 255, 255, 0.06) !important;
    }
    .primary-menu-menu > li > a:active {
        background: rgba(0, 0, 0, 0.08) !important;
    }
    body.dark-mode .primary-menu-menu > li > a:active {
        background: rgba(255, 255, 255, 0.1) !important;
    }
    .primary-menu-menu > li.current-menu-item > a,
    .primary-menu-menu > li.current_page_item > a {
        background: rgba(124, 58, 237, 0.08) !important;
        color: #7c3aed !important;
    }
    body.dark-mode .primary-menu-menu > li.current-menu-item > a,
    body.dark-mode .primary-menu-menu > li.current_page_item > a {
        background: rgba(167, 139, 250, 0.12) !important;
        color: #a78bfa !important;
    }
    .primary-menu-menu > li.scrollable-fix {
        display: none !important;
    }
}
@media (max-width: 1400px) {
	.primary-menu-menu > li > a {
		padding: 10px 14px !important;
	}
}
.premium-section {
    background: transparent;
    color: #fff;
    max-width: 650px;
    padding: 40px 30px;
    border-radius: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  }
  
  .premium-section h1 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 10px;
  }
  
  .premium-section p.intro {
    font-size: 17px;
    line-height: 1.6;
    color: #cfcfcf;
    margin-bottom: 35px;
  }
  
  .feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 22px;
  }
  
  .feature-item span.icon {
    font-size: 22px;
    width: 28px;
  }
  
  .feature-item h3 {
    font-size: 18px;
    margin: 0;
    font-weight: 700;
  }
  
  .feature-item p {
    margin: 4px 0 0;
    font-size: 15px;
    color: #cfcfcf;
  }
  
  /* Color dots for difficulty row */
  .dots span {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 6px;
  }
  .dot-green { background: #45d442; }
  .dot-yellow { background: #ffd633; }
  .dot-red { background: #ff4747; }
  .dot-black { background: #000; border: 1px solid #fff; }

  body.logged-in .logout-screens{
    display: none;
    }
    .login-screens{
        display: none;
    }

    body.logged-in .login-screens{
    display: block;
    }
    .gmap-location{
        background: #000;
        color: #fff !important;
        box-shadow: none;
        padding: 5px 10px;
        border-radius: 5px;
    }
.dark-mode .gmap-location{
    background: #fff !important;
    color: #000 !important;
}

body.dark-mode .apexcharts-tooltip,
body.dark-mode .apexcharts-tooltip-title{
background-color: #121419 !important;
}
.map-autocomplete {
    position: absolute;
    background: #fff;
    color: #1f232b;
    border: 1px solid #ddd;
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 9999;
    box-shadow: 0 4px 10px rgba(0,0,0,.15);
    margin-block-start: 0px;
    margin-block-end: 0px;
    padding-inline-start: 0px !important;
}
body.dark-mode .map-autocomplete{
    background: #1f232b !important;
    color: #fff !important;
}
  
  .map-autocomplete li {
    padding: 6px 10px;
    cursor: pointer;
    list-style: none;
  }
  
  .map-autocomplete li:hover,
  .map-autocomplete li.active {
    background: #f1f1f1;
  }

/* ========== Premium gate popup ========== */
.tp-premium-gate-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.tp-premium-gate-box {
    position: relative;
    background: #fff;
    border-radius: 12px;
    padding: 28px 24px;
    max-width: 320px;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
.tp-premium-gate-close {
    position: absolute;
    top: 8px;
    right: 10px;
    border: none;
    background: none;
    font-size: 22px;
    color: #999;
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
}
.tp-premium-gate-close:hover {
    color: #333;
}
.tp-premium-gate-icon {
    font-size: 36px;
    margin-bottom: 8px;
}
.tp-premium-gate-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 6px;
}
.tp-premium-gate-msg {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 16px;
}
.tp-premium-gate-link {
    display: inline-block;
    padding: 10px 28px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: #4a9cf6;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s;
}
.tp-premium-gate-link:hover {
    background: #3a8ce6;
}
body.dark-mode .tp-premium-gate-box {
    background: #2a2e36;
}
body.dark-mode .tp-premium-gate-close {
    color: #888;
}
body.dark-mode .tp-premium-gate-close:hover {
    color: #e4e4e4;
}
body.dark-mode .tp-premium-gate-title {
    color: #e4e4e4;
}
body.dark-mode .tp-premium-gate-msg {
    color: #aaa;
}

/* Guests: hide Youzify “Sign in to your account” sidebar widget on all pages (header + popup stay) */
body.not-logged-in .youzify-widget.youzify-login {
  display: none !important;
}

/* Activity stream: gated private spots / broken placeholders (hide share, bogus timestamps) */
#activity-stream li.tp-activity-access-gated .activity-meta,
#buddypress #activity-stream li.tp-activity-access-gated .activity-meta,
#activity-stream li[data-acitvity-id="0"] .activity-meta,
#buddypress #activity-stream li[data-acitvity-id="0"] .activity-meta {
  display: none !important;
}
#activity-stream li#activity-0 .activity-meta,
#buddypress #activity-stream li#activity-0 .activity-meta {
  display: none !important;
}

/* Hide “56 years…” / livestamp output; show access chip (PHP filters often miss permalink / JS overwrites) */
#activity-stream li.tp-activity-access-gated .youzify-timestamp-area .time-since,
#activity-stream li[data-acitvity-id="0"] .youzify-timestamp-area .time-since {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
#activity-stream li.tp-activity-access-gated .youzify-timestamp-area a.activity-time-since,
#activity-stream li[data-acitvity-id="0"] .youzify-timestamp-area a.activity-time-since {
  pointer-events: none !important;
  cursor: default !important;
  text-decoration: none !important;
  color: inherit !important;
}
#activity-stream li.tp-activity-access-gated .youzify-timestamp-area,
#activity-stream li[data-acitvity-id="0"] .youzify-timestamp-area {
  display: inline-flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 1.25em;
}
#activity-stream li.tp-activity-access-gated .youzify-timestamp-area i:empty,
#activity-stream li[data-acitvity-id="0"] .youzify-timestamp-area i:empty {
  display: none !important;
}
/* Guest gated: CTA is “Sign in to view” in the gate body — no duplicate chip in the timestamp row */
body.not-logged-in #activity-stream li.tp-activity-access-gated .youzify-timestamp-area::after,
body.not-logged-in #activity-stream li[data-acitvity-id="0"] .youzify-timestamp-area::after {
  content: none;
  display: none;
}
body.not-logged-in #activity-stream li.tp-activity-access-gated .youzify-timestamp-area .youzify-separator-point,
body.not-logged-in #activity-stream li[data-acitvity-id="0"] .youzify-timestamp-area .youzify-separator-point {
  display: none;
}
body.logged-in #activity-stream li.tp-activity-access-gated .youzify-timestamp-area::after,
body.logged-in #activity-stream li[data-acitvity-id="0"] .youzify-timestamp-area::after {
  content: "Premium only";
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  line-height: 1.3;
  background: linear-gradient(135deg, rgba(76, 29, 149, 0.22) 0%, rgba(124, 58, 237, 0.16) 100%);
  border: 1px solid rgba(167, 139, 250, 0.4);
  color: #6d28d9;
}
body.dark-mode.logged-in #activity-stream li.tp-activity-access-gated .youzify-timestamp-area::after,
html[data-theme='dark'] body.logged-in #activity-stream li.tp-activity-access-gated .youzify-timestamp-area::after,
body.dark-mode.logged-in #activity-stream li[data-acitvity-id="0"] .youzify-timestamp-area::after,
html[data-theme='dark'] body.logged-in #activity-stream li[data-acitvity-id="0"] .youzify-timestamp-area::after {
  color: #ddd6fe;
  background: linear-gradient(135deg, rgba(76, 29, 149, 0.35) 0%, rgba(124, 58, 237, 0.18) 100%);
  border-color: rgba(167, 139, 250, 0.35);
}

.tp-activity-access-gate {
  margin: 8px 0 12px;
  padding: 16px 18px;
  border-radius: 14px;
  text-align: center;
  background: linear-gradient(145deg, rgba(124, 58, 237, 0.1) 0%, rgba(167, 139, 250, 0.06) 50%, rgba(124, 58, 237, 0.08) 100%);
  border: 1px solid rgba(124, 58, 237, 0.22);
  box-shadow: 0 4px 24px rgba(76, 29, 149, 0.08);
}
.tp-activity-access-gate--guest {
  text-align: center;
}
.tp-activity-access-gate-signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  border-radius: 10px;
  color: #fff !important;
  background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 45%, #7c3aed 100%);
  box-shadow: 0 4px 18px rgba(76, 29, 149, 0.35);
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.tp-activity-access-gate-signin:hover {
  color: #fff !important;
  box-shadow: 0 6px 22px rgba(76, 29, 149, 0.45);
  transform: translateY(-1px);
}
body.dark-mode .tp-activity-access-gate-signin,
html[data-theme='dark'] .tp-activity-access-gate-signin {
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.35);
}
/* Poster starts in gate then moves to .activity-head (JS) — fallback if head missing */
.tp-activity-access-gate .tp-gated-activity-poster {
  text-align: left;
  margin: 0 0 14px;
  padding: 0;
  line-height: 1.4;
}
#activity-stream li.tp-activity-access-gated .activity-head .tp-gated-activity-poster,
.youzify .activity-list li.tp-activity-access-gated .activity-head .tp-gated-activity-poster {
  margin: 0 0 6px;
  padding: 0;
  line-height: 1.4;
  width: 100%;
  flex: 1 1 100%;
  order: -1;
}
#activity-stream li.tp-activity-access-gated .activity-head .tp-gated-activity-poster a,
.youzify .activity-list li.tp-activity-access-gated .activity-head .tp-gated-activity-poster a {
  font-weight: 600;
  text-decoration: none;
}
.tp-activity-access-gate-msg {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #3f4257;
  max-width: 28em;
  margin-left: auto;
  margin-right: auto;
}
.tp-activity-access-gate-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  border-radius: 10px;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.tp-activity-access-gate-link--premium {
  flex-wrap: wrap;
  color: #fff !important;
  background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 40%, #7c3aed 100%);
  box-shadow: 0 4px 20px rgba(76, 29, 149, 0.4);
}
.tp-activity-access-gate-link--premium:hover {
  color: #fff !important;
  box-shadow: 0 6px 26px rgba(76, 29, 149, 0.5);
  transform: translateY(-1px);
}
.tp-activity-access-gate-link--premium .tp-activity-access-gate-cta-txt {
  font-weight: 700;
}
.tp-activity-access-gate-badge {
  flex-shrink: 0;
}
body.dark-mode .tp-activity-access-gate-msg,
html[data-theme='dark'] .tp-activity-access-gate-msg {
  color: #e4e4e7;
}
body.dark-mode .tp-activity-access-gate,
html[data-theme='dark'] .tp-activity-access-gate {
  background: linear-gradient(145deg, rgba(124, 58, 237, 0.16) 0%, rgba(124, 58, 237, 0.06) 100%);
  border-color: rgba(167, 139, 250, 0.28);
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.25);
}

/* ═══════════════════ HAZARD TAGS — ADD FORM ═══════════════════ */
.tpf-hazard-section {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.tpf-hazard-cat {
    background: var(--tpf-surface2, #1e1e1e);
    border: 1px solid var(--tpf-border, #2a2a2a);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.15s;
}
/* Per-category border when has selection */
.tpf-hazard-cat[data-cat="structural"].has-selected { border-color: var(--tpf-cat-structural-mid); }
.tpf-hazard-cat[data-cat="access"].has-selected { border-color: var(--tpf-cat-access-mid); }
.tpf-hazard-cat[data-cat="security"].has-selected { border-color: var(--tpf-cat-security-mid); }
.tpf-hazard-cat[data-cat="environmental"].has-selected { border-color: var(--tpf-cat-environmental-mid); }
.tpf-hazard-cat[data-cat="animals"].has-selected { border-color: var(--tpf-cat-animals-mid); }
.tpf-hazard-cat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.tpf-hazard-cat-header:hover {
    background: var(--tpf-surface3, #252525);
}
.tpf-hazard-cat-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tpf-hazard-cat-icon {
    font-size: 14px;
}
.tpf-hazard-cat-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--tpf-text, #f0ede8);
}
.tpf-hazard-cat-right {
    display: flex;
    align-items: center;
    gap: 7px;
}
.tpf-hazard-count {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    display: none;
}
.tpf-hazard-cat[data-cat="structural"] .tpf-hazard-count { background: var(--tpf-cat-structural-dim); border: 1px solid var(--tpf-cat-structural-mid); color: var(--tpf-cat-structural); }
.tpf-hazard-cat[data-cat="access"] .tpf-hazard-count { background: var(--tpf-cat-access-dim); border: 1px solid var(--tpf-cat-access-mid); color: var(--tpf-cat-access); }
.tpf-hazard-cat[data-cat="security"] .tpf-hazard-count { background: var(--tpf-cat-security-dim); border: 1px solid var(--tpf-cat-security-mid); color: var(--tpf-cat-security); }
.tpf-hazard-cat[data-cat="environmental"] .tpf-hazard-count { background: var(--tpf-cat-environmental-dim); border: 1px solid var(--tpf-cat-environmental-mid); color: var(--tpf-cat-environmental); }
.tpf-hazard-cat[data-cat="animals"] .tpf-hazard-count { background: var(--tpf-cat-animals-dim); border: 1px solid var(--tpf-cat-animals-mid); color: var(--tpf-cat-animals); }
.tpf-hazard-count.visible {
    display: block;
}
/* Left accent border when open or has selection */
.tpf-hazard-cat[data-cat="structural"].open,
.tpf-hazard-cat[data-cat="structural"].has-selected { border-left-width: 3px; border-left-style: solid; border-left-color: var(--tpf-cat-structural); }
.tpf-hazard-cat[data-cat="access"].open,
.tpf-hazard-cat[data-cat="access"].has-selected { border-left-width: 3px; border-left-style: solid; border-left-color: var(--tpf-cat-access); }
.tpf-hazard-cat[data-cat="security"].open,
.tpf-hazard-cat[data-cat="security"].has-selected { border-left-width: 3px; border-left-style: solid; border-left-color: var(--tpf-cat-security); }
.tpf-hazard-cat[data-cat="environmental"].open,
.tpf-hazard-cat[data-cat="environmental"].has-selected { border-left-width: 3px; border-left-style: solid; border-left-color: var(--tpf-cat-environmental); }
.tpf-hazard-cat[data-cat="animals"].open,
.tpf-hazard-cat[data-cat="animals"].has-selected { border-left-width: 3px; border-left-style: solid; border-left-color: var(--tpf-cat-animals); }
.tpf-hazard-arrow {
    color: var(--tpf-text-dim, #555);
    font-size: 10px;
    transition: transform 0.2s;
    line-height: 1;
}
.tpf-hazard-cat.open .tpf-hazard-arrow {
    transform: rotate(180deg);
}
.tpf-hazard-tags {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 8px 10px 10px;
    border-top: 1px solid var(--tpf-border, #2a2a2a);
    align-items: stretch;
}
.tpf-hazard-cat.open .tpf-hazard-tags {
    display: grid;
}
.tpf-hazard-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 36px;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--tpf-surface3, #252525);
    border: 1px solid var(--tpf-border, #2a2a2a);
    color: var(--tpf-text-muted, #888);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
    text-align: center;
    word-break: break-word;
    line-height: 1.25;
}
.tpf-hazard-tag:hover {
    border-color: var(--tpf-border-light, #333);
    color: var(--tpf-text, #f0ede8);
    background: var(--tpf-surface2, #2a2a2a);
}
/* Selected tag colors per category */
.tpf-hazard-cat[data-cat="structural"] .tpf-hazard-tag.selected {
    background: var(--tpf-cat-structural-dim); border-color: var(--tpf-cat-structural-mid); color: var(--tpf-cat-structural);
}
.tpf-hazard-cat[data-cat="access"] .tpf-hazard-tag.selected {
    background: var(--tpf-cat-access-dim); border-color: var(--tpf-cat-access-mid); color: var(--tpf-cat-access);
}
.tpf-hazard-cat[data-cat="security"] .tpf-hazard-tag.selected {
    background: var(--tpf-cat-security-dim); border-color: var(--tpf-cat-security-mid); color: var(--tpf-cat-security);
}
.tpf-hazard-cat[data-cat="environmental"] .tpf-hazard-tag.selected {
    background: var(--tpf-cat-environmental-dim); border-color: var(--tpf-cat-environmental-mid); color: var(--tpf-cat-environmental);
}
.tpf-hazard-cat[data-cat="animals"] .tpf-hazard-tag.selected {
    background: var(--tpf-cat-animals-dim); border-color: var(--tpf-cat-animals-mid); color: var(--tpf-cat-animals);
}

/* ═══════════════════ HAZARD TAGS — POPUP ═══════════════════ */
.hazard-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}
.hazard-tag {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 20px;
    font-size: 11px;
    color: #888;
    font-weight: 500;
}
.hazard-tag.warn {
    background: rgba(248,113,113,0.08);
    border-color: rgba(248,113,113,0.2);
    color: #f87171;
}
/* Popup hazard tag colors by category (match add-location-form reference) */
.hazard-tag[data-cat="structural"] {
    background: rgba(194,53,53,0.08); border-color: rgba(194,53,53,0.22); color: #c23535;
}
.hazard-tag[data-cat="access"] {
    background: rgba(124,58,237,0.08); border-color: rgba(124,58,237,0.22); color: #7c3aed;
}
.hazard-tag[data-cat="security"] {
    background: rgba(26,111,171,0.08); border-color: rgba(26,111,171,0.22); color: #1a6fab;
}
.hazard-tag[data-cat="environmental"] {
    background: rgba(46,125,50,0.08); border-color: rgba(46,125,50,0.22); color: #2e7d32;
}
.hazard-tag[data-cat="animals"] {
    background: rgba(184,110,0,0.09); border-color: rgba(184,110,0,0.22); color: #b86e00;
}
body:not(.dark-mode) .hazard-tag,
body.light-mode .hazard-tag {
    background: var(--tpp-surface, #f5f6f3);
    border-color: var(--tpp-border, #dde0da);
    color: var(--tpp-muted, #6b7268);
}
body:not(.dark-mode) .hazard-tag[data-cat="structural"],
body.light-mode .hazard-tag[data-cat="structural"] {
    background: rgba(194,53,53,0.08); border-color: rgba(194,53,53,0.22); color: #c23535;
}
body:not(.dark-mode) .hazard-tag[data-cat="access"],
body.light-mode .hazard-tag[data-cat="access"] {
    background: rgba(124,58,237,0.08); border-color: rgba(124,58,237,0.22); color: #7c3aed;
}
body:not(.dark-mode) .hazard-tag[data-cat="security"],
body.light-mode .hazard-tag[data-cat="security"] {
    background: rgba(26,111,171,0.08); border-color: rgba(26,111,171,0.22); color: #1a6fab;
}
body:not(.dark-mode) .hazard-tag[data-cat="environmental"],
body.light-mode .hazard-tag[data-cat="environmental"] {
    background: rgba(46,125,50,0.08); border-color: rgba(46,125,50,0.22); color: #2e7d32;
}
body:not(.dark-mode) .hazard-tag[data-cat="animals"],
body.light-mode .hazard-tag[data-cat="animals"] {
    background: rgba(184,110,0,0.09); border-color: rgba(184,110,0,0.22); color: #b86e00;
}
body:not(.dark-mode) .hazard-tag.warn,
body.light-mode .hazard-tag.warn {
    background: var(--tpp-red-dim, rgba(194,53,53,0.08));
    border-color: rgba(194,53,53,0.2);
    color: var(--tpp-red, #c23535);
}
body:not(.dark-mode) .hazard-more-btn,
body.light-mode .hazard-more-btn {
    background: var(--tpp-surface, #f5f6f3);
    border-color: var(--tpp-border-light, #c8cdc4);
    color: var(--tpp-dim, #a0a89e);
}
body:not(.dark-mode) .hazard-more-btn:hover,
body.light-mode .hazard-more-btn:hover {
    background: var(--tpp-amber-dim);
    border-color: rgba(184,110,0,0.35);
    color: var(--tpp-amber);
}
.hazard-more-btn {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    background: #252525;
    border: 1px dashed #333;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: #888;
    cursor: pointer;
    font-family: 'Barlow', sans-serif;
    letter-spacing: 0.3px;
    transition: all 0.18s;
    gap: 4px;
}
.hazard-more-btn:hover {
    background: rgba(245,166,35,0.12);
    border-color: rgba(245,166,35,0.35);
    color: #f5a623;
    border-style: solid;
}

/* ═══════════════════ VERIFIED SECTION — POPUP ═══════════════════ */
.tpp-verified-section {
    background: #1e1e1e;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 8px;
}
/* Avg spot rating (from difficulty row) — full width above header so ★ row never clips next to "Extreme" */
.tpp-verified-spot-rating {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 8px;
    padding: 0;
    border: none;
}
.tpp-verified-spot-rating .tpp-star-rating {
    gap: 5px;
    flex-wrap: nowrap;
    justify-content: center;
}
.tpp-verified-spot-rating .tpp-star {
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}
.tpp-verified-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.tpp-verified-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px !important;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    min-width: 0;
    flex-shrink: 1;
    line-height: 1.25;
}
.tpp-verified-count {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #f5a623;
}
/* Verify star picker — top of box, above "Explorers Confirmed" (shown when flow is open) */
.tpp-vf-rating-wrap {
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.tpp-vf-rating-wrap .tpp-vf-label {
    margin-bottom: 6px;
    text-align: center;
}
.tpp-vf-rating-wrap .tpp-vf-stars {
    margin-bottom: 0;
    justify-content: center;
    gap: 6px;
    flex-wrap: nowrap;
}
.tpp-vf-rating-wrap .tpp-vf-star {
    flex-shrink: 0;
}
body:not(.dark-mode) .tpp-vf-rating-wrap,
body.light-mode .tpp-vf-rating-wrap {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}
.tpp-explorer-avatars {
    display: flex;
    margin-bottom: 10px;
}
.tpp-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #1e1e1e;
    background: #252525;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #888;
    margin-right: -6px;
}
.tpp-avatar-img {
    padding: 0;
    overflow: hidden;
}
.tpp-avatar-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}
.tpp-avatar-more {
    background: #252525;
    color: #888;
    font-size: 10px;
}
.tpp-been-here-btn {
    width: 100%;
    padding: 9px;
    background: rgba(245,166,35,0.12);
    border: 1px solid rgba(245,166,35,0.3);
    border-radius: 8px;
    color: #f5a623;
    font-family: 'Barlow', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: all 0.2s;
    text-transform: uppercase;
}
.tpp-been-here-btn:hover {
    background: rgba(245,166,35,0.2);
    border-color: rgba(245,166,35,0.5);
    transform: translateY(-1px);
}
.tpp-been-here-btn:active {
    transform: scale(0.98);
}
.tpp-been-here-done {
    background: rgba(74,222,128,0.15);
    border-color: rgba(74,222,128,0.4);
    color: #4ade80;
    cursor: default;
}
.tpp-been-here-done:hover {
    background: rgba(74,222,128,0.15);
    border-color: rgba(74,222,128,0.4);
    transform: none;
}

/* ═══════ INLINE VERIFY FORM ═══════ */
.tpp-verify-form {
    margin-top: 10px;
    --tpf-surface: #161616;
    --tpf-surface3: #252525;
    --tpf-border: #2a2a2a;
    --tpf-border-light: #333;
    --tpf-text-muted: #888;
    --tpf-text-dim: #666;
    --tpf-amber: #f5a623;
    --tpf-amber-dim: rgba(245, 166, 35, 0.12);
    --tpf-amber-mid: rgba(245, 166, 35, 0.35);
}
body:not(.dark-mode) .tpp-verify-form,
body.light-mode .tpp-verify-form {
    --tpf-surface: #f5f6f3;
    --tpf-surface3: #eceeed;
    --tpf-border: #dde0da;
    --tpf-border-light: #c8ccc4;
    --tpf-text-muted: #5c5f57;
    --tpf-text-dim: #7a7d74;
    --tpf-amber: #c47f00;
    --tpf-amber-dim: rgba(196, 127, 0, 0.1);
    --tpf-amber-mid: rgba(196, 127, 0, 0.35);
}
.tpp-vf-label {
    font-size: 11px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
}
.tpp-vf-stars {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}
.tpp-vf-star {
    font-size: 22px;
    color: #333;
    cursor: pointer;
    transition: color 0.15s, transform 0.15s;
    user-select: none;
    line-height: 1;
}
.tpp-vf-star:hover,
.tpp-vf-star.active {
    color: #fbbf24;
}
.tpp-vf-star:hover {
    transform: scale(1.15);
}
.tpp-vf-shake {
    animation: vfShake 0.4s ease;
}
@keyframes vfShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}
.tpp-vf-comment {
    width: 100%;
    padding: 8px 10px;
    background: #161616;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    color: #f0ede8;
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    resize: vertical;
    min-height: 50px;
    max-height: 120px;
    margin-bottom: 0;
}
.tpp-vf-comment::placeholder {
    color: #555;
}
.tpp-vf-comment:focus {
    outline: none;
    border-color: rgba(245,166,35,0.4);
}
.tpp-vf-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.tpp-verify-form .tpp-vf-photo-field {
    margin-top: 8px;
    margin-bottom: 0;
}
.tpp-vf-cancel {
    flex: 0 0 auto;
    padding: 7px 14px;
    background: #252525;
    border: 1px solid #333;
    border-radius: 6px;
    color: #888;
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.tpp-vf-cancel:hover {
    background: #2a2a2a;
    color: #f0ede8;
}
.tpp-vf-submit {
    flex: 1;
    padding: 7px 14px;
    background: rgba(74,222,128,0.12);
    border: 1px solid rgba(74,222,128,0.3);
    border-radius: 6px;
    color: #4ade80;
    font-family: 'Barlow', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}
.tpp-vf-submit:hover {
    background: rgba(74,222,128,0.2);
    border-color: rgba(74,222,128,0.5);
}
.tpp-vf-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.tpp-vf-msg {
    font-size: 11px;
    margin-top: 6px;
    min-height: 14px;
}
.tpp-vf-msg.error {
    color: #f87171;
}
.tpp-vf-msg.success {
    color: #4ade80;
}

/* Spot photos in verify form — reuses .tpf-upload-area / .tpf-photo-preview (vars on .tpp-verify-form) */
.tpp-spot-photo-note {
    font-size: 11px;
    line-height: 1.45;
    color: #777;
    margin: 8px 0 0;
}
body:not(.dark-mode) .tpp-spot-photo-note,
body.light-mode .tpp-spot-photo-note {
    color: #555;
}
.tpp-spot-photo-info {
    margin-top: 6px;
    margin-bottom: 0;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.45;
    color: #93c5fd;
    background: rgba(56, 169, 255, 0.09);
    border: 1px solid rgba(56, 169, 255, 0.28);
    box-shadow: 0 0 0 1px rgba(56, 169, 255, 0.06) inset;
}
body:not(.dark-mode) .tpp-spot-photo-info,
body.light-mode .tpp-spot-photo-info {
    color: #1d4ed8;
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.28);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.06) inset;
}
.tpp-verify-result-msg {
    font-size: 11px;
    line-height: 1.45;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 6px;
}
.tpp-verify-result-msg.success {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.08);
    border: 1px solid rgba(74, 222, 128, 0.2);
}
.tpp-verify-result-msg.error {
    color: #f87171;
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.2);
}

/* Hide Leaflet attribution watermark */
.leaflet-control-attribution {
    display: none !important;
}

/* Safari safe-area: prevent bottom toolbar (arrows, share bar) from covering form */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 767px) {
        .tp-add-loc-form-wrap,
        .tp-edit-loc-form-wrap {
            padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
        }
        .tp-edit-loc-form-wrap .tpf-form,
        .tp-add-loc-form-wrap .tpf-form {
            padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
        }
        .leaflet-popup-content-wrapper {
            max-height: calc(100dvh - 100px) !important;
        }
        .leaflet-popup-content {
            max-height: calc(100dvh - 120px) !important;
        }
        #map {
            height: 100dvh !important;
        }
    }
}

/* Premium indicator next to Display Name profile field */
.tp-premium-field-badge {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.15);
  border-radius: 999px;
  border: 1px solid rgba(167, 139, 250, 0.35);
}
body:not(.dark-mode) .tp-premium-field-badge,
html[data-theme="light"] .tp-premium-field-badge {
  color: #6d28d9;
  background: rgba(109, 40, 217, 0.08);
  border-color: rgba(109, 40, 217, 0.25);
}

/* Profile edit: keep Save button from stretching in section title row */
.options-section-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.options-section-title .youzify-account-form-actions {
  flex-shrink: 0;
}
.options-section-title .youzify-account-form-actions .youzify-save-options,
.options-section-title button.youzify-save-options {
  width: auto;
  min-width: 120px;
}

/* Display Name page only: hide the Save button in the section title row */
body.tpp-display-name-edit .options-section-title .youzify-account-form-actions {
  display: none !important;
}

body.tpp-display-name-edit #youzify_field_1 .youzify-field-content,
body.tpp-display-name-edit #youzify_field_1 .field-content {
  display: flex !important;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* Clear display name button — pill style, white, with light/dark variants */
body.tpp-display-name-edit .tp-display-name-clear {
  flex-shrink: 0;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
body:not(.dark-mode) .tpp-display-name-edit .tp-display-name-clear,
html[data-theme="light"] .tpp-display-name-edit .tp-display-name-clear {
  color: #374151;
  background: #fff;
  border-color: rgba(0, 0, 0, 0.12);
}
body:not(.dark-mode) .tpp-display-name-edit .tp-display-name-clear:hover,
html[data-theme="light"] .tpp-display-name-edit .tp-display-name-clear:hover {
  background: #f9fafb;
  border-color: rgba(0, 0, 0, 0.2);
}
body.dark-mode .tpp-display-name-edit .tp-display-name-clear {
  color: #e5e7eb;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}
body.dark-mode .tpp-display-name-edit .tp-display-name-clear:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Profile header: show name as stored, not forced uppercase */
.youzify-account-head-content h2 {
  text-transform: none !important;
}

/* Profile header: legacy star (kept for backwards compat) */
.youzify-account-head-content .tp-head-premium-star {
  display: inline-block;
  margin-left: 6px;
  color: #7c3aed;
  font-size: 0.85em;
  vertical-align: middle;
}

/* Premium badge — gradient pill + ✦ + “Premium” (tp_get_premium_badge_html) */
.tp-premium-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  vertical-align: middle;
  padding: 6px 14px 6px 11px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.2;
  font-family: inherit;
  background: linear-gradient(145deg, #5b21b6 0%, #7c3aed 35%, #a78bfa 70%, #ddd6fe 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.35) inset,
    0 2px 10px rgba(124, 58, 237, 0.45),
    0 1px 2px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  flex-shrink: 0;
  isolation: isolate;
  box-sizing: border-box;
}

.tp-premium-badge--shimmer .tp-premium-badge-shine {
  position: absolute;
  inset: -50%;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.12) 48%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0.12) 52%,
    transparent 65%
  );
  animation: tp-premium-badge-shine-move 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes tp-premium-badge-shine-move {
  0% {
    transform: translateX(-60%);
  }
  100% {
    transform: translateX(60%);
  }
}

.tp-premium-badge-icon {
  font-size: 11px;
  line-height: 1;
  opacity: 0.95;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.tp-premium-badge-txt {
  position: relative;
  z-index: 2;
  line-height: 1.25;
  padding-top: 0.5px;
  white-space: nowrap;
}

/* Settings sidebar: badge on its own row under display name */
.tp-premium-badge-row--settings {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.youzify-account-head-content .tp-premium-badge-row {
  display: flex;
  align-items: center;
}

/* Profile cover: under username, above ratings */
.tp-premium-badge-row--profile {
  margin-top: 6px;
  margin-bottom: 4px;
}

#youzify-profile-header .youzify-name .tp-premium-badge-row--profile {
  display: block;
}

/* Name block: follow Youzify / theme layout (no forced center column — keeps avatar + text column natural on desktop) */

/* Profile URL / @ handle — under display name; align with name column (see tp_profile_cover_stats) */
#youzify-profile-header .youzify-name .tp-youzify-profile-handle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  box-sizing: border-box;
  margin-top: 4px;
  margin-bottom: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.92);
  text-align: left;
}
#youzify-profile-header .youzify-name .tp-youzify-profile-handle i {
  font-size: 12px;
  opacity: 0.9;
}
body.dark-mode #youzify-profile-header .youzify-name .tp-youzify-profile-handle,
html[data-theme='dark'] #youzify-profile-header .youzify-name .tp-youzify-profile-handle {
  color: rgba(255, 255, 255, 0.88);
}
html[data-theme='light'] #youzify-profile-header .youzify-name .tp-youzify-profile-handle {
  color: rgba(255, 255, 255, 0.95);
}

/* Optional: hide empty head row so it does not add stray vertical gap in the cover */
#youzify-profile-header .youzify-header-cover .youzify-head-content:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.youzify-account-head-content .tp-account-spots {
  display: block;
  font-size: 0.875em;
  color: inherit;
  opacity: 0.85;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   SETTINGS PAGE — full modern restyle (sidebar + main content + forms)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Sidebar container ── */
.youzify-settings-sidebar {
  background: var(--ol-card-bg-color, #fff) !important;
  border-radius: 16px !important;
  border: 1px solid var(--ol-border-color, #e6ecf5) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
  padding: 0 !important;
  /* Sit above #content (often z-index: 1) so the main column cannot eat clicks meant for accordion headers */
  position: relative !important;
  z-index: 2 !important;
}

/* Desktop: stop sidebar vs main overlap (float widths + borders often exceed 100%) */
@media screen and (min-width: 1025px) {
  #youzify .youzify-sidebar.youzify-settings-sidebar,
  .youzify .youzify-sidebar.youzify-settings-sidebar {
    box-sizing: border-box !important;
    width: 25% !important;
    max-width: 340px !important;
    margin-right: 2% !important;
    float: left !important;
    overflow: visible !important;
  }

  #youzify .youzify-main-content.settings-main-content,
  .youzify .youzify-main-content.settings-main-content {
    box-sizing: border-box !important;
    width: 73% !important;
    float: right !important;
    min-width: 0 !important;
  }
}

/* ── Sidebar header (avatar + name + since) ── */
.youzify-account-header {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.youzify-account-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 20px 16px !important;
  border-bottom: 1px solid var(--ol-border-color, #e6ecf5) !important;
  background: transparent !important;
}

.youzify-account-head-container {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.youzify-account-img {
  flex-shrink: 0 !important;
}

.youzify-account-img img {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid rgba(124, 58, 237, 0.15) !important;
}

.youzify-account-head-content h2 {
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 0 0 2px !important;
  color: var(--ol-heading-font-color, #1f2937) !important;
}

/* Sidebar meta (e.g. member since) — do NOT target premium badge innards */
.youzify-account-head-content span:not(.tp-premium-badge):not(.tp-premium-badge-icon):not(.tp-premium-badge-txt):not(.tp-premium-badge-shine) {
  font-size: 12px !important;
  color: var(--ol-body-font-color, #6b7280) !important;
  font-weight: 500 !important;
}

/* Premium badge in settings header: reset inherited sidebar span rules */
.youzify-account-head-content .tp-premium-badge {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  line-height: 1.2 !important;
}

.youzify-account-head-content .tp-premium-badge .tp-premium-badge-txt {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  color: #fff !important;
}

.youzify-account-head-content .tp-premium-badge .tp-premium-badge-icon {
  font-size: 11px !important;
  color: #fff !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

/* Settings header: stack name / badge / meta cleanly; compact badge (default pill is tall + heavy shadow) */
.youzify-account-head-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  min-width: 0 !important;
}

.youzify-account-head-content .tp-premium-badge-row--settings {
  margin-top: 4px !important;
  margin-bottom: 6px !important;
  max-width: 100%;
}

.youzify-account-head-content .tp-premium-badge-row--settings .tp-premium-badge {
  padding: 3px 9px 3px 7px !important;
  gap: 4px !important;
  font-size: 9px !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.32) inset,
    0 1px 5px rgba(124, 58, 237, 0.32) !important;
}

.youzify-account-head-content .tp-premium-badge-row--settings .tp-premium-badge--shimmer .tp-premium-badge-shine {
  inset: -35% !important;
}

.youzify-account-head-content .tp-premium-badge-row--settings .tp-premium-badge .tp-premium-badge-txt {
  font-size: 9px !important;
  letter-spacing: 0.07em !important;
  padding-top: 0 !important;
  line-height: 1.15 !important;
}

.youzify-account-head-content .tp-premium-badge-row--settings .tp-premium-badge .tp-premium-badge-icon {
  font-size: 9px !important;
}

/* Sidebar clips overflow; keep badge shadow from being cut off */
.youzify-settings-sidebar .youzify-account-head {
  overflow: visible !important;
}

/* Hide the Youzify dark/light toggle in settings sidebar (we have our own in the header) */
.youzify-lighting-mode {
  display: none !important;
}

/* ── Quick-link buttons bar ── */
.youzify-head-buttons {
  border-bottom: 1px solid var(--ol-border-color, #e6ecf5) !important;
  background: transparent !important;
  padding: 0 !important;
}

.youzify-head-buttons-inner {
  display: flex !important;
  align-items: stretch !important;
}

.youzify-head-buttons .youzify-button-item {
  flex: 1 !important;
  width: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.youzify-head-buttons .youzify-button-item a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 12px 0 !important;
  color: var(--ol-body-font-color, #6b7280) !important;
  font-size: 15px !important;
  transition: color 0.15s ease, background 0.15s ease !important;
  text-decoration: none !important;
}

.youzify-head-buttons .youzify-button-item a:hover {
  color: #7c3aed !important;
  background: rgba(124, 58, 237, 0.06) !important;
}

.youzify-head-buttons .youzify-logout-button a:hover {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.06) !important;
}

/* ── Accordion menus ── */
.youzify-account-settings-menu {
  padding: 8px !important;
}

.youzify-account-menu {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.youzify-account-menu:hover {
  background: rgba(0, 0, 0, 0.03) !important;
}

.youzify-account-menu .youzify-menu-icon {
  flex-shrink: 0 !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  background: rgba(124, 58, 237, 0.08) !important;
  color: #7c3aed !important;
  font-size: 16px !important;
}

.youzify-account-menu .youzify-menu-head {
  flex: 1 !important;
  min-width: 0 !important;
}

.youzify-account-menu .youzify-menu-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ol-heading-font-color, #1f2937) !important;
}

.youzify-account-menu .youzify-menu-description {
  font-size: 12px !important;
  color: var(--ol-body-font-color, #6b7280) !important;
  font-weight: 500 !important;
  margin-top: 2px !important;
}

.youzify-account-menu .youzify-arrow-bottom {
  border-color: var(--ol-body-font-color, #9ca3af) !important;
  transition: transform 0.2s ease !important;
}

/* Sub-menu list */
.youzify-account-menus {
  padding: 0 8px 8px !important;
  background: transparent !important;
  border: none !important;
}

.youzify-account-menus ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.youzify-account-menus ul li {
  list-style: none !important;
}

.youzify-account-menus ul li a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ol-body-font-color, #4b5563) !important;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.youzify-account-menus ul li a:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--ol-heading-font-color, #1f2937) !important;
}

.youzify-account-menus ul li a.youzify-active-menu {
  background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
  color: #fff !important;
}

.youzify-account-menus ul li i {
  font-size: 13px !important;
  width: 18px !important;
  text-align: center !important;
  opacity: 0.7 !important;
  color: inherit !important;
}

.youzify-account-menus ul li a.youzify-active-menu i {
  opacity: 1 !important;
  color: #fff !important;
}

/* Active sidebar row is purple; default premium pill is also purple — invert pill for contrast */
.youzify-account-menus ul li a.youzify-active-menu .tp-premium-field-badge {
  color: #4c1d95 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* Delete account link — red styling */
.youzify-account-menus ul li.youzify-delete-account a {
  color: #ef4444 !important;
}

.youzify-account-menus ul li.youzify-delete-account a:hover {
  background: rgba(239, 68, 68, 0.08) !important;
}

.youzify-account-menus ul li.youzify-delete-account a.youzify-active-menu {
  background: linear-gradient(135deg, #ef4444, #f87171) !important;
  color: #fff !important;
}

/* ── Main content area ── */
.settings-main-content,
.youzify-main-content.settings-main-content {
  background: var(--ol-card-bg-color, #fff) !important;
  border-radius: 16px !important;
  border: 1px solid var(--ol-border-color, #e6ecf5) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.settings-inner-content,
.youzify-inner-content.settings-inner-content {
  padding: 0 !important;
}

/* Section title bar — compact */
.options-section-title {
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--ol-border-color, #e6ecf5) !important;
  margin: 0 !important;
  background: transparent !important;
}

.options-section-title h2 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ol-heading-font-color, #1f2937) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.options-section-title h2 i {
  color: #7c3aed !important;
  font-size: 14px !important;
}

/* Save button — compact pill */
.youzify-save-options,
button.youzify-save-options {
  padding: 7px 18px !important;
  border-radius: 8px !important;
  border: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
  color: #fff !important;
  box-shadow: 0 1px 6px rgba(124, 58, 237, 0.25) !important;
  transition: transform 0.1s ease, box-shadow 0.15s ease !important;
  line-height: 1.4 !important;
}

.youzify-save-options:hover,
button.youzify-save-options:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px rgba(124, 58, 237, 0.35) !important;
}

/* Form fields section — compact */
.youzify-section-content {
  padding: 16px 20px !important;
}

.uk-option-item {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--ol-border-color, #e6ecf5) !important;
}

.uk-option-item:last-child {
  border-bottom: none !important;
}

.uk-option-item .option-infos {
  flex: 1 1 200px !important;
  min-width: 0 !important;
}

.uk-option-item .option-infos .option-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ol-heading-font-color, #1f2937) !important;
  margin: 0 0 4px !important;
  display: block !important;
}

.uk-option-item .option-infos .option-desc {
  font-size: 12px !important;
  color: var(--ol-body-font-color, #6b7280) !important;
  font-weight: 500 !important;
  margin: 0 !important;
}

.uk-option-item .option-content {
  flex: 1 1 280px !important;
  min-width: 0 !important;
}

.uk-option-item .option-content input[type="text"],
.uk-option-item .option-content input[type="email"],
.uk-option-item .option-content input[type="password"],
.uk-option-item .option-content input[type="url"],
.uk-option-item .option-content input[type="number"],
.uk-option-item .option-content textarea,
.uk-option-item .option-content select {
  width: 100% !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  border: 1px solid var(--ol-border-color, #e6ecf5) !important;
  background: var(--ol-input-bg-color, #f2f4f8) !important;
  color: var(--ol-body-font-color, #1f2937) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  outline: none !important;
}

.uk-option-item .option-content input:focus,
.uk-option-item .option-content textarea:focus,
.uk-option-item .option-content select:focus {
  border-color: rgba(124, 58, 237, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12) !important;
}

/* ── Checkbox / notification rows — extra compact ── */
.youzify-main-content.settings-main-content .uk-option-item.youzify-checkbox-field {
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 0 !important;
}

.youzify-main-content.settings-main-content .uk-option-item.youzify-checkbox-field .option-infos {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.youzify-main-content.settings-main-content .uk-option-item.youzify-checkbox-field .option-infos .option-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  margin: 0 0 2px !important;
  line-height: 1.25 !important;
}

.youzify-main-content.settings-main-content .uk-option-item.youzify-checkbox-field .option-infos .option-desc {
  font-size: 11px !important;
  line-height: 1.35 !important;
  opacity: 0.92 !important;
}

/* Toggle column: don’t grow to 280px — kills empty space beside the switch */
.youzify-main-content.settings-main-content .youzify-checkbox-field .option-content {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
}

/* ── Notification toggles — visually smaller (scale; avoids breaking Youzify pseudo-elements) ── */
.youzify-main-content.settings-main-content .ukai-checkbox-item {
  display: inline-block !important;
  transform: scale(0.58) !important;
  transform-origin: right center !important;
  /* Pull back empty space left by transform (layout box stays full-size) */
  margin-left: -26px !important;
  margin-right: -10px !important;
  margin-top: -10px !important;
  margin-bottom: -10px !important;
}

/* Bottom save actions — compact */
.youzify-settings-actions {
  padding: 12px 20px !important;
  border-top: 1px solid var(--ol-border-color, #e6ecf5) !important;
  display: flex !important;
  justify-content: flex-end !important;
  background: transparent !important;
}

/* ── Settings page: dark mode ── */
body.dark-mode .youzify-settings-sidebar {
  background: var(--ol-card-bg-color, #20232b) !important;
  border-color: var(--ol-border-color, #353946) !important;
}

body.dark-mode .youzify-account-head {
  border-bottom-color: var(--ol-border-color, #353946) !important;
}

body.dark-mode .youzify-account-head-content h2 {
  color: var(--ol-heading-font-color, #f3f4f6) !important;
}

/* (youzify-lighting-mode hidden globally — no dark-mode override needed) */

body.dark-mode .youzify-head-buttons {
  border-bottom-color: var(--ol-border-color, #353946) !important;
}

body.dark-mode .youzify-head-buttons .youzify-button-item a {
  color: var(--ol-body-font-color, #9ca3af) !important;
}

body.dark-mode .youzify-head-buttons .youzify-button-item a:hover {
  color: #a78bfa !important;
  background: rgba(167, 139, 250, 0.1) !important;
}

body.dark-mode .youzify-account-menu:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

body.dark-mode .youzify-account-menu .youzify-menu-icon {
  background: rgba(167, 139, 250, 0.12) !important;
  color: #a78bfa !important;
}

body.dark-mode .youzify-account-menu .youzify-menu-title {
  color: var(--ol-heading-font-color, #f3f4f6) !important;
}

body.dark-mode .youzify-account-menus ul li a {
  color: var(--ol-body-font-color, #d1d5db) !important;
}

body.dark-mode .youzify-account-menus ul li a:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .youzify-account-menus ul li.youzify-delete-account a {
  color: #f87171 !important;
}

body.dark-mode .youzify-account-menus ul li.youzify-delete-account a:hover {
  background: rgba(248, 113, 113, 0.1) !important;
}

body.dark-mode .settings-main-content,
body.dark-mode .youzify-main-content.settings-main-content {
  background: var(--ol-card-bg-color, #20232b) !important;
  border-color: var(--ol-border-color, #353946) !important;
}

body.dark-mode .options-section-title {
  border-bottom-color: var(--ol-border-color, #353946) !important;
}

body.dark-mode .options-section-title h2 {
  color: var(--ol-heading-font-color, #f3f4f6) !important;
}

body.dark-mode .uk-option-item {
  border-bottom-color: var(--ol-border-color, #353946) !important;
}

body.dark-mode .uk-option-item .option-infos .option-title {
  color: var(--ol-heading-font-color, #f3f4f6) !important;
}

body.dark-mode .uk-option-item .option-content input,
body.dark-mode .uk-option-item .option-content textarea,
body.dark-mode .uk-option-item .option-content select {
  background: var(--ol-input-bg-color, #2f323d) !important;
  border-color: var(--ol-border-color, #353946) !important;
  color: var(--ol-input-text-color, #e5e7eb) !important;
}

body.dark-mode .youzify-settings-actions {
  border-top-color: var(--ol-border-color, #353946) !important;
}

/* ── BuddyPress Settings → Discord (matches Olympus / Youzify settings cards) ── */
.tp-di-discord-settings {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 20px 24px;
  box-sizing: border-box;
  --tp-di-blurple: #5865f2;
  --tp-di-blurple-dim: #4752c4;
  --tp-di-violet: #7c3aed;
  --tp-di-text: var(--heading-font-color, var(--ol-heading-font-color, #1f2937));
  --tp-di-muted: var(--body-font-color, #6b7280);
  --tp-di-surface: var(--ol-smoke-light, #f8fafc);
  --tp-di-line: var(--ol-border-color, #e6ecf5);
}

.tp-di-discord-card {
  border-radius: 16px;
  border: 1px solid var(--tp-di-line);
  background: var(--ol-card-bg-color, #fff);
  box-shadow: var(--ol-box-shadow, 0 2px 12px rgba(0, 0, 0, 0.06));
  overflow: hidden;
}

.tp-di-discord-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--tp-di-line);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--tp-di-blurple) 12%, transparent) 0%,
    color-mix(in srgb, var(--tp-di-violet) 8%, transparent) 100%
  );
}

.tp-di-discord-card__brand {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
  background: linear-gradient(145deg, var(--tp-di-blurple), var(--tp-di-blurple-dim));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--tp-di-blurple) 45%, transparent);
}

.tp-di-discord-card__head-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.tp-di-discord-card__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tp-di-text);
  line-height: 1.25;
}

.tp-di-discord-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #15803d;
  background: color-mix(in srgb, #22c55e 18%, transparent);
  border: 1px solid color-mix(in srgb, #22c55e 35%, transparent);
}

.tp-di-discord-card__body {
  padding: 20px;
}

.tp-di-discord-card__lead {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--tp-di-muted);
}

.tp-di-discord-notice {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
}

.tp-di-discord-notice p {
  margin: 0;
}

.tp-di-discord-notice--success {
  background: color-mix(in srgb, #22c55e 12%, var(--ol-card-bg-color, #fff));
  border: 1px solid color-mix(in srgb, #22c55e 28%, transparent);
  color: var(--tp-di-text);
}

.tp-di-discord-notice--error {
  background: color-mix(in srgb, #ef4444 10%, var(--ol-card-bg-color, #fff));
  border: 1px solid color-mix(in srgb, #ef4444 30%, transparent);
  color: var(--tp-di-text);
}

.tp-di-discord-notice--muted {
  background: var(--tp-di-surface);
  border: 1px dashed var(--tp-di-line);
  color: var(--tp-di-muted);
}

.tp-di-discord-meta {
  margin: 0 0 20px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--tp-di-line);
  background: var(--tp-di-surface);
  overflow: hidden;
}

.tp-di-discord-meta__row {
  display: grid;
  grid-template-columns: minmax(100px, 34%) 1fr;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--tp-di-line);
  align-items: baseline;
}

.tp-di-discord-meta__row:last-child {
  border-bottom: none;
}

.tp-di-discord-meta dt {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--tp-di-muted);
}

.tp-di-discord-meta dd {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--tp-di-text);
  word-break: break-word;
}

.tp-di-discord-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--ol-card-bg-color, #fff);
  border: 1px solid var(--tp-di-line);
}

.tp-di-discord-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.tp-di-discord-card__actions--stack {
  flex-direction: column;
  align-items: stretch;
}

.tp-di-discord-card__actions--row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.tp-di-discord-form {
  margin: 0;
  width: auto;
}

.tp-di-discord-card__actions--stack .tp-di-discord-form {
  width: 100%;
}

.tp-di-discord-btn.button {
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 10px 18px !important;
  line-height: 1.35 !important;
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease !important;
  box-shadow: none !important;
}

.tp-di-discord-btn--primary.button.button-primary {
  border: none !important;
  background: linear-gradient(135deg, var(--tp-di-blurple), var(--tp-di-blurple-dim)) !important;
  color: #fff !important;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--tp-di-blurple) 40%, transparent) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.tp-di-discord-btn--primary.button.button-primary:hover,
.tp-di-discord-btn--primary.button.button-primary:focus {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--tp-di-blurple) 45%, transparent) !important;
  color: #fff !important;
}

.tp-di-discord-btn--refresh.button {
  border: none !important;
  background: linear-gradient(
    135deg,
    var(--primary-accent-color, #ff5e3a),
    var(--primary-accent-color-darken, #e65535)
  ) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--primary-accent-color, #ff5e3a) 35%, transparent) !important;
}

.tp-di-discord-btn--refresh.button:hover,
.tp-di-discord-btn--refresh.button:focus {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-accent-color, #ff5e3a) 42%, transparent) !important;
  color: #fff !important;
}

.tp-di-discord-btn--unlink.button {
  border: none !important;
  background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px color-mix(in srgb, #dc2626 35%, transparent) !important;
}

.tp-di-discord-btn--unlink.button:hover,
.tp-di-discord-btn--unlink.button:focus {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px color-mix(in srgb, #dc2626 42%, transparent) !important;
  color: #fff !important;
}

body.dark-mode .tp-di-discord-card__badge,
html[data-theme="dark"] .tp-di-discord-card__badge {
  color: #86efac;
  background: color-mix(in srgb, #22c55e 22%, transparent);
  border-color: color-mix(in srgb, #22c55e 40%, transparent);
}

body.dark-mode .tp-di-discord-meta,
html[data-theme="dark"] .tp-di-discord-meta {
  background: var(--ol-input-bg-color, #2f323d);
}

body.dark-mode .tp-di-discord-code,
html[data-theme="dark"] .tp-di-discord-code {
  background: var(--ol-main-bg-color, #121419);
}

body.dark-mode .tp-di-discord-btn--refresh.button,
html[data-theme="dark"] .tp-di-discord-btn--refresh.button {
  color: #fff !important;
}

body.dark-mode .tp-di-discord-btn--unlink.button,
html[data-theme="dark"] .tp-di-discord-btn--unlink.button {
  color: #fff !important;
}

/* ── Youzify Profile → Social Networks: one Save bar, no Pinterest row ── */
#youzify-social_networks > .options-section-title .youzify-account-form-actions {
  display: none !important;
}

/* Duplicate header save when Youzify prints .options-section-title above the form */
.youzify-inner-content.settings-inner-content:has(#youzify-social_networks) > .options-section-title .youzify-account-form-actions {
  display: none !important;
}

#youzify-social_networks .uk-option-item.tp-yz-sn-row--hidden {
  display: none !important;
}

/* FB / X / IG rows: icon + label aligned like Discord */
#youzify-social_networks .tp-yz-sn-row .option-infos {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tp-yz-sn-icon-wrap {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1;
  border: 1px solid transparent;
}

.tp-yz-sn-icon-wrap--facebook {
  color: #1877f2;
  background: color-mix(in srgb, #1877f2 12%, transparent);
  border-color: color-mix(in srgb, #1877f2 22%, transparent);
}

.tp-yz-sn-icon-wrap--twitter {
  color: #0f1419;
  background: color-mix(in srgb, #0f1419 8%, transparent);
  border-color: color-mix(in srgb, #0f1419 16%, transparent);
}

.tp-yz-sn-icon-wrap--instagram {
  color: #e4405f;
  background: color-mix(in srgb, #e4405f 12%, transparent);
  border-color: color-mix(in srgb, #e4405f 22%, transparent);
}

body.dark-mode .tp-yz-sn-icon-wrap--twitter,
html[data-theme="dark"] .tp-yz-sn-icon-wrap--twitter {
  color: #e7e9ea;
  background: color-mix(in srgb, #e7e9ea 10%, transparent);
  border-color: color-mix(in srgb, #e7e9ea 18%, transparent);
}

#youzify-social_networks .tp-yz-sn-row .option-content input[type="text"] {
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#youzify-social_networks .tp-yz-sn-row .option-content input[type="text"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-accent-color, #ff5e3a) 22%, transparent);
}

/* Profile Settings: Connections — Discord + green/red dot (sidebar list + top quick-link bar) */
.youzify-account-menus li.youzify-networks,
.youzify-head-buttons .youzify-networks-button {
  overflow: visible !important;
}

li.youzify-networks a {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  overflow: visible !important;
}

.youzify-head-buttons .youzify-networks-button a {
  overflow: visible !important;
  position: relative;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

/* Discord + dot appended after “Connections” / after share icon in quick bar */
.tp-yz-sidebar-connections-brand--trailing {
  flex-shrink: 0;
}

li.youzify-networks .tp-yz-sidebar-connections-brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.15em;
  height: 1em;
  margin: 0;
}

.youzify-networks-button .tp-yz-sidebar-connections-brand {
  width: 1.2em;
  height: 1.1em;
}

li.youzify-networks .tp-yz-sidebar-connections-discord,
.youzify-networks-button .tp-yz-sidebar-connections-discord {
  font-size: 13px !important;
  line-height: 1 !important;
  color: #5865f2 !important;
  display: block !important;
  width: 1em !important;
  height: 1em !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.youzify-networks-button .tp-yz-sidebar-connections-discord {
  font-size: 15px !important;
}

.tp-yz-sidebar-connections-dot {
  position: absolute;
  right: -4px;
  bottom: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--ol-card-bg-color, #fff);
  box-sizing: content-box;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.tp-yz-sidebar-connections-dot--on {
  background: #22c55e;
}

.tp-yz-sidebar-connections-dot--off {
  background: #ef4444;
}

body.dark-mode .tp-yz-sidebar-connections-dot,
html[data-theme="dark"] .tp-yz-sidebar-connections-dot {
  border-color: var(--ol-card-bg-color, #20232b);
}

body.dark-mode li.youzify-networks .tp-yz-sidebar-connections-discord,
html[data-theme="dark"] li.youzify-networks .tp-yz-sidebar-connections-discord,
body.dark-mode .youzify-networks-button .tp-yz-sidebar-connections-discord,
html[data-theme="dark"] .youzify-networks-button .tp-yz-sidebar-connections-discord {
  color: #a5b4fc !important;
}

.youzify-account-menus ul li a.youzify-active-menu .tp-yz-sidebar-connections-discord {
  color: #e0e7ff !important;
}

.youzify-account-menus ul li a.youzify-active-menu .tp-yz-sidebar-connections-dot {
  border-color: #7c3aed;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

/* Discord block: same visual plane as Connections form (no inner card) */
.tp-di-discord-social-mount {
  display: block;
  width: 100%;
  margin: 0;
}

.tp-di-discord-youzify {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible;
}

.tp-di-discord-youzify__head.options-section-title {
  justify-content: flex-start !important;
}

.tp-di-discord-youzify__head {
  border-bottom: 1px solid var(--ol-border-color, #e6ecf5);
  margin: 0 !important;
  padding: 14px 20px !important;
  background: transparent !important;
}

.tp-di-discord-youzify__head h2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--heading-font-color, #515365) !important;
}

.tp-di-discord-youzify__title-text {
  flex: 0 1 auto;
  min-width: 0;
}

/* Plain Discord glyph only — overrides global .options-section-title h2 i purple “chip” look */
.tp-di-discord-youzify__head h2 i.tp-di-discord-youzify__brand-icon.fab.fa-discord {
  font-size: 1.2rem !important;
  line-height: 1 !important;
  width: 1em !important;
  height: 1em !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #5865f2 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: block !important;
}

.tp-di-discord-btn--primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Youzify “Link Discord” — modern CTA (inner shell so WP .button doesn’t flatten layout) */
.tp-di-discord-youzify__link-cta {
  margin: 4px 0 0 !important;
}

.tp-di-discord-youzify__link-cell .tp-di-discord-youzify__link-btn.button.button-primary,
.tp-di-discord-youzify__link-cell a.tp-di-discord-youzify__link-btn,
.tp-di-discord-card__actions .tp-di-discord-youzify__link-btn.button.button-primary,
.tp-di-discord-card__actions a.tp-di-discord-youzify__link-btn {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  text-decoration: none !important;
}

.tp-di-discord-youzify__link-btn-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 8px;
  border-radius: 11px;
  background: linear-gradient(145deg, #6974f3 0%, #5865f2 38%, #4752c4 100%);
  color: #fff !important;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.025em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 2px 0 rgba(0, 0, 0, 0.08),
    0 6px 22px rgba(88, 101, 242, 0.38);
  transition:
    transform 0.18s ease,
    box-shadow 0.22s ease,
    filter 0.18s ease;
}

.tp-di-discord-youzify__link-btn:hover .tp-di-discord-youzify__link-btn-inner,
.tp-di-discord-youzify__link-btn:focus .tp-di-discord-youzify__link-btn-inner,
.tp-di-discord-youzify__link-btn:focus-visible .tp-di-discord-youzify__link-btn-inner {
  transform: translateY(-1px);
  filter: brightness(1.06) saturate(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 2px 0 rgba(0, 0, 0, 0.06),
    0 10px 28px rgba(88, 101, 242, 0.46);
}

.tp-di-discord-youzify__link-btn:active .tp-di-discord-youzify__link-btn-inner {
  transform: translateY(0);
  filter: brightness(0.98);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.12),
    0 3px 12px rgba(88, 101, 242, 0.32);
}

.tp-di-discord-youzify__link-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.tp-di-discord-youzify__link-btn-icon .fab.fa-discord {
  font-size: 15px !important;
  line-height: 1 !important;
  color: #fff !important;
  margin: 0 !important;
  padding: 0 !important;
}

.tp-di-discord-youzify__link-btn-text {
  padding-right: 2px;
}

.tp-di-discord-youzify__link-btn:focus-visible {
  outline: none !important;
}

.tp-di-discord-youzify__link-btn:focus-visible .tp-di-discord-youzify__link-btn-inner {
  outline: 2px solid color-mix(in srgb, #fff 70%, transparent);
  outline-offset: 2px;
}

body.dark-mode .tp-di-discord-youzify__link-btn-inner,
html[data-theme="dark"] .tp-di-discord-youzify__link-btn-inner {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 0 rgba(0, 0, 0, 0.25),
    0 6px 24px rgba(88, 101, 242, 0.34);
}

body.dark-mode .tp-di-discord-youzify__link-btn:hover .tp-di-discord-youzify__link-btn-inner,
html[data-theme="dark"] .tp-di-discord-youzify__link-btn:hover .tp-di-discord-youzify__link-btn-inner,
body.dark-mode .tp-di-discord-youzify__link-btn:focus .tp-di-discord-youzify__link-btn-inner,
html[data-theme="dark"] .tp-di-discord-youzify__link-btn:focus .tp-di-discord-youzify__link-btn-inner {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 2px 0 rgba(0, 0, 0, 0.2),
    0 10px 30px rgba(88, 101, 242, 0.42);
}

.tp-di-discord-youzify__btn-icon {
  font-size: 15px !important;
  line-height: 1 !important;
  margin: 0 !important;
  color: inherit !important;
  opacity: 0.95;
}

.tp-di-discord-youzify__section {
  padding: 16px 20px !important;
}

.tp-di-discord-youzify__section .tp-di-discord-notice {
  margin-bottom: 14px;
}

.tp-di-discord-youzify__intro {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--yzfy-option-description-color, var(--body-font-color, #888da8));
}

.tp-di-discord-youzify__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.tp-di-discord-youzify__link-cell .description {
  margin-bottom: 12px;
}

body.dark-mode .tp-di-discord-youzify,
html[data-theme="dark"] .tp-di-discord-youzify {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.dark-mode .tp-di-discord-youzify__head,
html[data-theme="dark"] .tp-di-discord-youzify__head {
  border-bottom-color: var(--ol-border-color, #353946);
}

body.dark-mode .tp-di-discord-youzify__head h2,
html[data-theme="dark"] .tp-di-discord-youzify__head h2 {
  color: var(--heading-font-color, #fff) !important;
}

body.dark-mode .tp-di-discord-youzify__head h2 i.tp-di-discord-youzify__brand-icon.fab.fa-discord,
html[data-theme="dark"] .tp-di-discord-youzify__head h2 i.tp-di-discord-youzify__brand-icon.fab.fa-discord {
  color: #a5b4fc !important;
}

/* ── Fix black box: ensure no plugin inline bg leaks through ── */
.youzify-account-menu,
.youzify-account-menus,
.youzify-account-settings-menu,
.youzify-account-header,
.youzify-account-head,
.youzify-head-buttons,
.youzify-account-head-container {
  background-color: transparent !important;
}

.youzify-account-menus ul {
  background: transparent !important;
}

.youzify-account-menus ul li {
  background: transparent !important;
}

/* Accordion icons: class swaps run in JS (FA webfont/SVG ignores ::before content hacks) */

/* Single open section: tpSyncYouzifySettingsAccordionOpen in tp_profile_edit_rework toggles .youzify-show-account-menus */
.youzify-settings-sidebar .youzify-account-settings-menu > .youzify-account-menus:not(.youzify-show-account-menus) {
  display: none !important;
}

/* ── Profile vs Account accordion: easier to tell apart ── */
.youzify-settings-sidebar .youzify-account-settings-menu > .youzify-account-menu {
  border: 1px solid var(--ol-border-color, #e5e7eb) !important;
  background: rgba(0, 0, 0, 0.028) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04) !important;
}

.youzify-settings-sidebar .youzify-account-settings-menu > .youzify-account-menu:hover {
  background: rgba(0, 0, 0, 0.045) !important;
  border-color: var(--ol-border-color, #d1d5db) !important;
}

/* Section that contains the current page: stronger frame */
.youzify-settings-sidebar
  .youzify-account-menu:has(+ .youzify-account-menus .youzify-active-menu) {
  border-color: rgba(124, 58, 237, 0.42) !important;
  background: rgba(124, 58, 237, 0.09) !important;
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.06) !important;
}

/* The other top-level row stays calmer */
.youzify-settings-sidebar
  .youzify-account-settings-menu
  > .youzify-account-menu:not(:has(+ .youzify-account-menus .youzify-active-menu)) {
  border-color: rgba(0, 0, 0, 0.07) !important;
  background: rgba(0, 0, 0, 0.02) !important;
}

/* Space + rule between Profile block and Account block */
.youzify-settings-sidebar .youzify-account-settings-menu > .youzify-account-menus {
  margin-top: 12px !important;
  padding-top: 4px !important;
}

.youzify-settings-sidebar
  .youzify-account-settings-menu
  > .youzify-account-menus:not(:last-of-type) {
  margin-bottom: 14px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--ol-border-color, #e6ecf5) !important;
}

/* Account Settings row vs Email & Password: clear divider + extra air */
.youzify-settings-sidebar
  .youzify-account-menu:has(.youzify-account-account-settings)
  + .youzify-account-menus {
  margin-top: 18px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--ol-border-color, #e6ecf5) !important;
}

/* Profile submenu: no double rule (keep lighter gap only) */
.youzify-settings-sidebar
  .youzify-account-menu:has(.youzify-account-profile-settings)
  + .youzify-account-menus {
  border-top: none !important;
}

/* Profile Settings = violet; Account Settings = blue (readable at a glance) */
.youzify-settings-sidebar
  .youzify-account-menu:has(.youzify-account-profile-settings)
  .youzify-menu-icon {
  background: rgba(124, 58, 237, 0.14) !important;
  color: #6d28d9 !important;
}

.youzify-settings-sidebar
  .youzify-account-menu:has(.youzify-account-account-settings)
  .youzify-menu-icon {
  background: rgba(37, 99, 235, 0.12) !important;
  color: #1d4ed8 !important;
}

body.dark-mode .youzify-settings-sidebar .youzify-account-settings-menu > .youzify-account-menu {
  border-color: var(--ol-border-color, #353946) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  box-shadow: none !important;
}

body.dark-mode .youzify-settings-sidebar .youzify-account-settings-menu > .youzify-account-menu:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: var(--ol-border-color, #4b5563) !important;
}

body.dark-mode
  .youzify-settings-sidebar
  .youzify-account-menu:has(+ .youzify-account-menus .youzify-active-menu) {
  border-color: rgba(167, 139, 250, 0.55) !important;
  background: rgba(124, 58, 237, 0.14) !important;
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.12) !important;
}

body.dark-mode
  .youzify-settings-sidebar
  .youzify-account-settings-menu
  > .youzify-account-menu:not(:has(+ .youzify-account-menus .youzify-active-menu)) {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

body.dark-mode
  .youzify-settings-sidebar
  .youzify-account-settings-menu
  > .youzify-account-menus:not(:last-of-type) {
  border-bottom-color: var(--ol-border-color, #353946) !important;
}

body.dark-mode
  .youzify-settings-sidebar
  .youzify-account-menu:has(.youzify-account-account-settings)
  + .youzify-account-menus {
  border-top-color: var(--ol-border-color, #353946) !important;
}

body.dark-mode
  .youzify-settings-sidebar
  .youzify-account-menu:has(.youzify-account-profile-settings)
  .youzify-menu-icon {
  background: rgba(167, 139, 250, 0.18) !important;
  color: #c4b5fd !important;
}

body.dark-mode
  .youzify-settings-sidebar
  .youzify-account-menu:has(.youzify-account-account-settings)
  .youzify-menu-icon {
  background: rgba(96, 165, 250, 0.16) !important;
  color: #93c5fd !important;
}

/* ── Mobile: settings layout ── */
@media screen and (max-width: 768px) {
  .youzify-settings-sidebar {
    border-radius: 12px !important;
    margin-bottom: 16px !important;
  }

  .settings-main-content,
  .youzify-main-content.settings-main-content {
    border-radius: 12px !important;
  }

  /* Stack form fields vertically */
  .uk-option-item {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 16px 0 !important;
  }

  .uk-option-item .option-infos {
    flex: 1 1 auto !important;
  }

  .uk-option-item .option-content {
    flex: 1 1 auto !important;
    width: 100% !important;
  }

  /* Notification toggles: keep one tight row (don’t stack + huge padding) */
  .youzify-main-content.settings-main-content .uk-option-item.youzify-checkbox-field {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 8px 0 !important;
  }

  .youzify-main-content.settings-main-content .uk-option-item.youzify-checkbox-field .option-content {
    flex: 0 0 auto !important;
    width: auto !important;
  }

  /* Compact padding */
  .youzify-section-content {
    padding: 16px !important;
  }

  .options-section-title {
    padding: 16px !important;
  }

  .youzify-settings-actions {
    padding: 12px 16px !important;
  }

  /* Quick-links: smaller touch targets */
  .youzify-head-buttons .youzify-button-item a {
    padding: 10px 0 !important;
    font-size: 14px !important;
  }

  /* Accordion compact */
  .youzify-account-menu {
    padding: 12px 10px !important;
    gap: 10px !important;
  }

  .youzify-account-menu .youzify-menu-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
  }

  .youzify-account-menu .youzify-menu-title {
    font-size: 13px !important;
  }

  .youzify-account-menu .youzify-menu-description {
    font-size: 11px !important;
  }

  .youzify-account-menus ul li a {
    padding: 9px 12px !important;
    font-size: 13px !important;
  }
}

/* ═══════════════ YOUZIFY MEMBERS DIRECTORY (minimal) ═══════════════ */

/* Very long display names (unicode, no spaces) — never stretch the layout.
   Every ancestor in the flex column must allow shrinking. */
.youzify .youzify-user-data {
  overflow: hidden !important;
  min-width: 0 !important;
}
.youzify .youzify-user-data .item {
  overflow: hidden !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.youzify .youzify-user-data .item-title {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.youzify a.youzify-fullname {
  display: inline-block !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-break: break-all !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
}
.youzify a.youzify-fullname > i {
  vertical-align: middle !important;
}

/* Override masonry/isotope absolute positioning with CSS grid for uniform card heights */
ul#youzify-members-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  height: auto !important;
  position: relative !important;
  /* visible: Youzify badge tooltips (data-youzify-tooltip) render above/below — hidden clipped them */
  overflow: visible !important;
}
ul#youzify-members-list > li {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  float: none !important;
  /* visible: avoid clipping Message / Account Settings (shadows, flex quirks); long text still clipped in .item */
  overflow: visible !important;
  min-width: 0 !important;
}
ul#youzify-members-list > li > .youzify-user-data {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  /* Must override global .youzify-user-data { flex-wrap: wrap } — column+wrap+height
     creates extra flex columns to the right, shifting/clipping .youzify-user-actions */
  flex-wrap: nowrap !important;
  overflow: visible !important;
}
ul#youzify-members-list > li > .youzify-user-data > .youzify-user-actions {
  margin-top: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
}
@media screen and (max-width: 1024px) {
  ul#youzify-members-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media screen and (max-width: 600px) {
  ul#youzify-members-list {
    grid-template-columns: 1fr !important;
  }
}

/* Hide the x / verify / review / share tools at top of each card */
#members-directory-form .youzify-user-tools.youzify-tools,
#youzify-members-list .youzify-user-tools {
  display: none !important;
}

/* ── Hide statistics bar on member cards ── */
#youzify-members-list .youzify-user-statistics {
  display: none !important;
}

/* ── Members directory: consistent card layout ── */
#youzify-members-list .youzify-user-data {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  text-align: center !important;
  overflow: visible !important;
}
#youzify-members-list .youzify-user-data .item {
  width: 100% !important;
  text-align: center !important;
}
#youzify-members-list .item-title {
  text-align: center !important;
}
#youzify-members-list .item-title .youzify-fullname {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: center !important;
}
#youzify-members-list .item-meta {
  text-align: center !important;
}

/* ── Badges: consistent row, capped height, even sizing ── */
#youzify-members-list .youzify-md-user-badges {
  width: 100% !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
#youzify-members-list .youzify-user-badges {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}
#youzify-members-list .youzify-badge-item {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
}
#youzify-members-list .youzify-badge-item img {
  width: 32px !important;
  height: 32px !important;
  display: block !important;
}
#youzify-members-list .youzify-badge-item.youzify-more-items {
  flex: 0 0 auto !important;
}
#youzify-members-list .youzify-badge-item.youzify-more-items a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: rgba(124, 58, 237, 0.12) !important;
  color: #6d28d9 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  line-height: 1 !important;
}
body.dark-mode #youzify-members-list .youzify-badge-item.youzify-more-items a {
  background: rgba(167, 139, 250, 0.18) !important;
  color: #e9d5ff !important;
}
/* Cap visible badges at 6 (hide 7th+ unless it's the "+X" overflow link) */
#youzify-members-list .youzify-user-badges .youzify-badge-item:nth-child(n+7):not(.youzify-more-items) {
  display: none !important;
}
/* Always show the "+X more" pill */
#youzify-members-list .youzify-user-badges .youzify-badge-item.youzify-more-items {
  display: inline-flex !important;
}

/* ── Ratings row: consistent centered ── */
#youzify-members-list .youzify-user-ratings-details {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px 8px !important;
  font-size: 12px !important;
  padding: 4px 0 !important;
}

/* ── Premium badge on cards ── */
.tp-member-card-premium-wrap {
  display: block;
  margin-top: 4px;
  text-align: center;
}
.tp-member-card-premium-wrap .tp-premium-badge {
  padding: 4px 12px 4px 5px;
  font-size: 11px;
  gap: 6px;
}

/* ── User actions: flex row — two equal-width buttons, centered ── */
#youzify-members-list .youzify-user-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  align-self: stretch !important;
  padding: 12px !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  float: none !important;
  border-top: none !important;
  border: none !important;
}
/* Wrapper divs — equal flex columns, NOT display:contents */
#youzify-members-list .youzify-user-actions .generic-button,
#youzify-members-list .youzify-user-actions .friendship-button,
#youzify-members-list .youzify-user-actions .message-button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: flex !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* Links — fill their wrapper, equal sizing.
   Must reset height/margin/min-width/background the plugin sets
   (.youzify-user-actions a { height:50px; display:block; background-color:var(--yzfy-button-bg-color) }
    and block/inline-block modes add margin:15px / min-width:140px) */
#youzify-members-list .youzify-user-actions .generic-button a,
#youzify-members-list .youzify-user-actions .friendship-button a,
#youzify-members-list .youzify-user-actions .message-button a,
#youzify-members-list .youzify-user-actions a.youzify-send-message {
  flex: 1 1 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 44px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 10px !important;
  float: none !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  border: 1px solid transparent !important;
  background-color: transparent !important;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s !important;
}
/* Profile Settings / Account Settings — own profile card (direct <a> children) */
#youzify-members-list .youzify-user-actions > a.youzify-profile-settings,
#youzify-members-list .youzify-user-actions > a.yzmd-second-btn {
  flex: 1 1 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 44px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 10px !important;
  float: none !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
  background-color: transparent !important;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s !important;
  border: 1px solid transparent !important;
}
/* Add Friend — purple outline (matches global social-buttons style) */
#youzify-members-list .youzify-user-actions .friendship-button.not_friends a,
#youzify-members-list .youzify-user-actions .friendship-button a.add {
  background: rgba(124, 58, 237, 0.12) !important;
  color: #6d28d9 !important;
  border: 1px solid rgba(124, 58, 237, 0.35) !important;
  box-shadow: none !important;
}
#youzify-members-list .youzify-user-actions .friendship-button.not_friends a:hover,
#youzify-members-list .youzify-user-actions .friendship-button a.add:hover {
  background: rgba(124, 58, 237, 0.2) !important;
  border-color: rgba(124, 58, 237, 0.55) !important;
  color: #5b21b6 !important;
  transform: translateY(-1px) !important;
}
/* Message — purple gradient */
#youzify-members-list .youzify-user-actions .message-button a,
#youzify-members-list .youzify-user-actions a.youzify-send-message {
  background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.22) !important;
}
#youzify-members-list .youzify-user-actions .message-button a:hover,
#youzify-members-list .youzify-user-actions a.youzify-send-message:hover {
  background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 12px rgba(124, 58, 237, 0.3) !important;
}
/* Pending / cancel request — amber accent, still equal width */
#youzify-members-list .youzify-user-actions .friendship-button.pending a,
#youzify-members-list .youzify-user-actions .friendship-button.waiting a,
#youzify-members-list .youzify-user-actions .friendship-button.pending_friend a {
  background: rgba(245, 158, 11, 0.16) !important;
  color: #b45309 !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  box-shadow: none !important;
}
#youzify-members-list .youzify-user-actions .friendship-button.pending a:hover,
#youzify-members-list .youzify-user-actions .friendship-button.waiting a:hover,
#youzify-members-list .youzify-user-actions .friendship-button.pending_friend a:hover {
  background: rgba(245, 158, 11, 0.26) !important;
  color: #92400e !important;
  border-color: rgba(245, 158, 11, 0.55) !important;
}
/* Already friends — neutral outline with red hover */
#youzify-members-list .youzify-user-actions .friendship-button.is_friend a,
#youzify-members-list .youzify-user-actions .friendship-button a.remove {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #555 !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: none !important;
}
#youzify-members-list .youzify-user-actions .friendship-button.is_friend a:hover,
#youzify-members-list .youzify-user-actions .friendship-button a.remove:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
  color: #dc2626 !important;
}
/* Dark mode — Add Friend: purple outline */
body.dark-mode #youzify-members-list .youzify-user-actions .friendship-button.not_friends a,
body.dark-mode #youzify-members-list .youzify-user-actions .friendship-button a.add,
html[data-theme='dark'] #youzify-members-list .youzify-user-actions .friendship-button.not_friends a,
html[data-theme='dark'] #youzify-members-list .youzify-user-actions .friendship-button a.add {
  background: rgba(167, 139, 250, 0.15) !important;
  color: #e9d5ff !important;
  border-color: rgba(167, 139, 250, 0.45) !important;
  box-shadow: none !important;
}
body.dark-mode #youzify-members-list .youzify-user-actions .friendship-button.not_friends a:hover,
body.dark-mode #youzify-members-list .youzify-user-actions .friendship-button a.add:hover,
html[data-theme='dark'] #youzify-members-list .youzify-user-actions .friendship-button.not_friends a:hover,
html[data-theme='dark'] #youzify-members-list .youzify-user-actions .friendship-button a.add:hover {
  background: rgba(167, 139, 250, 0.25) !important;
  border-color: rgba(196, 181, 253, 0.55) !important;
  color: #fff !important;
}
/* Dark mode — Message: purple gradient */
body.dark-mode #youzify-members-list .youzify-user-actions .message-button a,
body.dark-mode #youzify-members-list .youzify-user-actions a.youzify-send-message,
html[data-theme='dark'] #youzify-members-list .youzify-user-actions .message-button a,
html[data-theme='dark'] #youzify-members-list .youzify-user-actions a.youzify-send-message {
  background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
}
/* Dark mode — Pending: amber */
body.dark-mode #youzify-members-list .youzify-user-actions .friendship-button.pending a,
body.dark-mode #youzify-members-list .youzify-user-actions .friendship-button.waiting a,
body.dark-mode #youzify-members-list .youzify-user-actions .friendship-button.pending_friend a,
html[data-theme='dark'] #youzify-members-list .youzify-user-actions .friendship-button.pending a,
html[data-theme='dark'] #youzify-members-list .youzify-user-actions .friendship-button.waiting a,
html[data-theme='dark'] #youzify-members-list .youzify-user-actions .friendship-button.pending_friend a {
  background: rgba(245, 158, 11, 0.18) !important;
  color: #fcd34d !important;
  border-color: rgba(251, 191, 36, 0.35) !important;
}
body.dark-mode #youzify-members-list .youzify-user-actions .friendship-button.pending a:hover,
body.dark-mode #youzify-members-list .youzify-user-actions .friendship-button.waiting a:hover,
body.dark-mode #youzify-members-list .youzify-user-actions .friendship-button.pending_friend a:hover,
html[data-theme='dark'] #youzify-members-list .youzify-user-actions .friendship-button.pending a:hover,
html[data-theme='dark'] #youzify-members-list .youzify-user-actions .friendship-button.waiting a:hover,
html[data-theme='dark'] #youzify-members-list .youzify-user-actions .friendship-button.pending_friend a:hover {
  background: rgba(245, 158, 11, 0.28) !important;
  color: #fde68a !important;
  border-color: rgba(251, 191, 36, 0.5) !important;
}
/* Dark mode — Unfriend: neutral with red hover */
body.dark-mode #youzify-members-list .youzify-user-actions .friendship-button.is_friend a,
html[data-theme='dark'] #youzify-members-list .youzify-user-actions .friendship-button.is_friend a {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ccc !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
body.dark-mode #youzify-members-list .youzify-user-actions .friendship-button.is_friend a:hover,
html[data-theme='dark'] #youzify-members-list .youzify-user-actions .friendship-button.is_friend a:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
  color: #fca5a5 !important;
}
/* Profile Settings — purple outline (matches Add Friend) */
#youzify-members-list .youzify-user-actions a.youzify-profile-settings {
  background: rgba(124, 58, 237, 0.12) !important;
  color: #6d28d9 !important;
  border: 1px solid rgba(124, 58, 237, 0.35) !important;
  box-shadow: none !important;
}
#youzify-members-list .youzify-user-actions a.youzify-profile-settings:hover {
  background: rgba(124, 58, 237, 0.2) !important;
  border-color: rgba(124, 58, 237, 0.55) !important;
  color: #5b21b6 !important;
  transform: translateY(-1px) !important;
}
/* Account Settings — neutral outline (matches Unfriend) */
#youzify-members-list .youzify-user-actions a.yzmd-second-btn {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #555 !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}
#youzify-members-list .youzify-user-actions a.yzmd-second-btn:hover {
  background: rgba(0, 0, 0, 0.1) !important;
  border-color: rgba(0, 0, 0, 0.18) !important;
  color: #374151 !important;
  transform: translateY(-1px) !important;
}
/* Dark mode */
body.dark-mode #youzify-members-list .youzify-user-actions a.youzify-profile-settings,
html[data-theme='dark'] #youzify-members-list .youzify-user-actions a.youzify-profile-settings {
  background: rgba(167, 139, 250, 0.15) !important;
  color: #e9d5ff !important;
  border-color: rgba(167, 139, 250, 0.45) !important;
}
body.dark-mode #youzify-members-list .youzify-user-actions a.youzify-profile-settings:hover,
html[data-theme='dark'] #youzify-members-list .youzify-user-actions a.youzify-profile-settings:hover {
  background: rgba(167, 139, 250, 0.25) !important;
  border-color: rgba(196, 181, 253, 0.55) !important;
  color: #fff !important;
}
body.dark-mode #youzify-members-list .youzify-user-actions a.yzmd-second-btn,
html[data-theme='dark'] #youzify-members-list .youzify-user-actions a.yzmd-second-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ccc !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
body.dark-mode #youzify-members-list .youzify-user-actions a.yzmd-second-btn:hover,
html[data-theme='dark'] #youzify-members-list .youzify-user-actions a.yzmd-second-btn:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
}
#youzify-members-list .youzify-user-actions a.youzify-profile-settings i,
#youzify-members-list .youzify-user-actions a.yzmd-second-btn i {
  font-size: 14px !important;
  margin: 0 !important;
}

/* ── My friends list: Message + Unfriend — locked equal 50/50, theme-matched ──
   The Unfriend <a> has class="friendship-button is_friend remove" (same as the wrapper div),
   so class-based selectors match both wrapper AND link. We use > child combinators to
   separate wrapper rules from link rules, and lock every link to identical fixed sizing. */
body.bp-user .members.friends #youzify-members-list .youzify-user-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  /* Keep margin-top:auto so Unfriend/Message sit on the card bottom like premium rows (margin:0 killed it). */
  margin-top: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  padding: 12px 0 0 !important;
  box-sizing: border-box !important;
}
/* Pending request: one wrapper holds Accept + Reject — 2-col grid squeezed both into half the row. */
body.bp-user .members.friends #youzify-members-list .youzify-user-actions:has(.friendship-button.tp-friend-awaiting-inline) {
  grid-template-columns: 1fr 1fr 1fr !important;
}
body.bp-user .members.friends #youzify-members-list .youzify-user-actions:has(.friendship-button.tp-friend-awaiting-inline) > div.friendship-button.tp-friend-awaiting-inline {
  grid-column: 1 / span 2;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  align-items: stretch !important;
}
body.bp-user .members.friends #youzify-members-list .youzify-user-actions:has(.friendship-button.tp-friend-awaiting-inline) > div.message-button {
  grid-column: 3;
}
/* Wrapper divs (.generic-button / .friendship-button / .message-button) — grid cells */
body.bp-user .members.friends #youzify-members-list .youzify-user-actions > div {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* Every <a> inside a wrapper — identical fixed box */
body.bp-user .members.friends #youzify-members-list .youzify-user-actions > div > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  -webkit-font-smoothing: antialiased !important;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s !important;
}

/* Message — purple primary (matches Accept / compose / etc.) */
body.bp-user .members.friends #youzify-members-list .youzify-user-actions > div.message-button > a {
  background: linear-gradient(145deg, #7c3aed 0%, #a78bfa 100%) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}
body.bp-user .members.friends #youzify-members-list .youzify-user-actions > div.message-button > a:hover {
  background: linear-gradient(145deg, #6d28d9 0%, #8b5cf6 100%) !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-1px) !important;
}

/* Unfriend — soft rose secondary (matches Reject) */
body.bp-user .members.friends #youzify-members-list .youzify-user-actions > div.friendship-button > a {
  background: linear-gradient(180deg, rgba(254, 242, 242, 0.95) 0%, rgba(254, 226, 226, 0.88) 100%) !important;
  color: #b91c1c !important;
  border-color: rgba(248, 113, 113, 0.45) !important;
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}
body.bp-user .members.friends #youzify-members-list .youzify-user-actions > div.friendship-button > a:hover {
  background: linear-gradient(180deg, #fef2f2 0%, #fecaca 100%) !important;
  color: #991b1b !important;
  border-color: rgba(220, 38, 38, 0.55) !important;
  box-shadow: 0 2px 10px rgba(220, 38, 38, 0.14) !important;
  transform: translateY(-1px) !important;
}

/* Incoming requests on friends/members cards: green Accept + red Reject (overrides generic friendship-button > a above) */
body.bp-user .members.friends #youzify-members-list .youzify-user-actions > div.friendship-button.tp-friend-awaiting-inline > a.accept,
body.bp-user.directory.members #youzify-members-list .youzify-user-actions > div.friendship-button.tp-friend-awaiting-inline > a.accept {
  background: linear-gradient(135deg, #15803d, #22c55e) !important;
  color: #fff !important;
  border-color: rgba(21, 128, 61, 0.9) !important;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}
body.bp-user .members.friends #youzify-members-list .youzify-user-actions > div.friendship-button.tp-friend-awaiting-inline > a.accept:hover,
body.bp-user.directory.members #youzify-members-list .youzify-user-actions > div.friendship-button.tp-friend-awaiting-inline > a.accept:hover {
  background: linear-gradient(135deg, #166534, #16a34a) !important;
  border-color: #14532d !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.4) !important;
}
body.bp-user .members.friends #youzify-members-list .youzify-user-actions > div.friendship-button.tp-friend-awaiting-inline > a.reject,
body.bp-user.directory.members #youzify-members-list .youzify-user-actions > div.friendship-button.tp-friend-awaiting-inline > a.reject {
  background: linear-gradient(135deg, #b91c1c, #dc2626) !important;
  color: #fff !important;
  border-color: rgba(153, 27, 27, 0.95) !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
body.bp-user .members.friends #youzify-members-list .youzify-user-actions > div.friendship-button.tp-friend-awaiting-inline > a.reject:hover,
body.bp-user.directory.members #youzify-members-list .youzify-user-actions > div.friendship-button.tp-friend-awaiting-inline > a.reject:hover {
  background: linear-gradient(135deg, #991b1b, #b91c1c) !important;
  border-color: #7f1d1d !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35) !important;
}

/* Dark mode */
body.dark-mode.bp-user .members.friends #youzify-members-list .youzify-user-actions > div.message-button > a,
html[data-theme='dark'] body.bp-user .members.friends #youzify-members-list .youzify-user-actions > div.message-button > a {
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
body.dark-mode.bp-user .members.friends #youzify-members-list .youzify-user-actions > div.friendship-button > a,
html[data-theme='dark'] body.bp-user .members.friends #youzify-members-list .youzify-user-actions > div.friendship-button > a {
  background: linear-gradient(180deg, rgba(127, 29, 29, 0.35) 0%, rgba(69, 10, 10, 0.45) 100%) !important;
  color: #fecaca !important;
  border-color: rgba(248, 113, 113, 0.35) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
body.dark-mode.bp-user .members.friends #youzify-members-list .youzify-user-actions > div.friendship-button > a:hover,
html[data-theme='dark'] body.bp-user .members.friends #youzify-members-list .youzify-user-actions > div.friendship-button > a:hover {
  background: linear-gradient(180deg, rgba(153, 27, 27, 0.5) 0%, rgba(127, 29, 29, 0.55) 100%) !important;
  color: #fff !important;
  border-color: rgba(252, 165, 165, 0.45) !important;
}

body.dark-mode.bp-user .members.friends #youzify-members-list .youzify-user-actions > div.friendship-button.tp-friend-awaiting-inline > a.accept,
html[data-theme='dark'] body.bp-user .members.friends #youzify-members-list .youzify-user-actions > div.friendship-button.tp-friend-awaiting-inline > a.accept,
body.dark-mode.bp-user.directory.members #youzify-members-list .youzify-user-actions > div.friendship-button.tp-friend-awaiting-inline > a.accept,
html[data-theme='dark'] body.bp-user.directory.members #youzify-members-list .youzify-user-actions > div.friendship-button.tp-friend-awaiting-inline > a.accept {
  background: linear-gradient(135deg, #166534, #4ade80) !important;
  border-color: rgba(74, 222, 128, 0.45) !important;
  color: #f0fdf4 !important;
  box-shadow: 0 2px 10px rgba(34, 197, 94, 0.35) !important;
}
body.dark-mode.bp-user .members.friends #youzify-members-list .youzify-user-actions > div.friendship-button.tp-friend-awaiting-inline > a.accept:hover,
html[data-theme='dark'] body.bp-user .members.friends #youzify-members-list .youzify-user-actions > div.friendship-button.tp-friend-awaiting-inline > a.accept:hover,
body.dark-mode.bp-user.directory.members #youzify-members-list .youzify-user-actions > div.friendship-button.tp-friend-awaiting-inline > a.accept:hover,
html[data-theme='dark'] body.bp-user.directory.members #youzify-members-list .youzify-user-actions > div.friendship-button.tp-friend-awaiting-inline > a.accept:hover {
  background: linear-gradient(135deg, #14532d, #22c55e) !important;
  border-color: #4ade80 !important;
}
body.dark-mode.bp-user .members.friends #youzify-members-list .youzify-user-actions > div.friendship-button.tp-friend-awaiting-inline > a.reject,
html[data-theme='dark'] body.bp-user .members.friends #youzify-members-list .youzify-user-actions > div.friendship-button.tp-friend-awaiting-inline > a.reject,
body.dark-mode.bp-user.directory.members #youzify-members-list .youzify-user-actions > div.friendship-button.tp-friend-awaiting-inline > a.reject,
html[data-theme='dark'] body.bp-user.directory.members #youzify-members-list .youzify-user-actions > div.friendship-button.tp-friend-awaiting-inline > a.reject {
  background: linear-gradient(135deg, #7f1d1d, #dc2626) !important;
  border-color: rgba(248, 113, 113, 0.4) !important;
  color: #fef2f2 !important;
  box-shadow: 0 2px 10px rgba(220, 38, 38, 0.35) !important;
}
body.dark-mode.bp-user .members.friends #youzify-members-list .youzify-user-actions > div.friendship-button.tp-friend-awaiting-inline > a.reject:hover,
html[data-theme='dark'] body.bp-user .members.friends #youzify-members-list .youzify-user-actions > div.friendship-button.tp-friend-awaiting-inline > a.reject:hover,
body.dark-mode.bp-user.directory.members #youzify-members-list .youzify-user-actions > div.friendship-button.tp-friend-awaiting-inline > a.reject:hover,
html[data-theme='dark'] body.bp-user.directory.members #youzify-members-list .youzify-user-actions > div.friendship-button.tp-friend-awaiting-inline > a.reject:hover {
  background: linear-gradient(135deg, #991b1b, #ef4444) !important;
  border-color: #fca5a5 !important;
  color: #fff !important;
}

/* Profile edit header: hide all icon buttons and the button row (including separator) */
.youzify-head-buttons {
  display: none !important;
}

/* Avatar editor: hide Take Photo tab */
#bp-avatar-camera {
  display: none !important;
}

/* Avatar editor: dark Upload tab + dark active state */
.bp-avatar-nav-item[data-nav="upload"] {
  background: #111827 !important;
  color: #f9fafb !important;
  border: 1px solid #374151 !important;
  border-radius: 8px !important;
}
.bp-avatar-nav-item[data-nav="upload"]:hover,
.bp-avatar-nav-item[data-nav="upload"].current,
.bp-avatar-nav-item[data-nav="upload"].selected,
.bp-avatar-nav-item[data-nav="upload"].active {
  background: #0b1220 !important;
  color: #ffffff !important;
  border-color: #4b5563 !important;
}

/* Avatar editor: danger style for Delete tab */
.bp-avatar-nav-item[data-nav="delete"] {
  background: #dc2626 !important;
  color: #fff !important;
  border: 1px solid #b91c1c !important;
  border-radius: 8px !important;
}
.bp-avatar-nav-item[data-nav="delete"]:hover,
.bp-avatar-nav-item[data-nav="delete"].current,
.bp-avatar-nav-item[data-nav="delete"].selected,
.bp-avatar-nav-item[data-nav="delete"].active {
  background: #b91c1c !important;
  color: #fff !important;
  border-color: #991b1b !important;
}

/* Avatar editor: green Recycle tab */
.bp-avatar-nav-item[data-nav="recycle"] {
  background: #16a34a !important;
  color: #fff !important;
  border: 1px solid #15803d !important;
  border-radius: 8px !important;
}
.bp-avatar-nav-item[data-nav="recycle"]:hover,
.bp-avatar-nav-item[data-nav="recycle"].current,
.bp-avatar-nav-item[data-nav="recycle"].selected,
.bp-avatar-nav-item[data-nav="recycle"].active {
  background: #15803d !important;
  color: #fff !important;
  border-color: #166534 !important;
}

/* BuddyPress avatar history / recycle UI: readable black text + room for dates */
.youzify-bp-uploader-popup-content .avatars-history,
.youzify-uploader-change-item .avatars-history {
  min-width: 0;
  max-width: 100%;
}
.youzify-bp-uploader-popup-content .avatar-history-table,
.youzify-uploader-change-item .avatar-history-table {
  width: 100% !important;
  min-width: 280px;
  table-layout: fixed;
  border-collapse: collapse;
}
.youzify-bp-uploader-popup-content .avatar-history-table th,
.youzify-bp-uploader-popup-content .avatar-history-table td,
.youzify-uploader-change-item .avatar-history-table th,
.youzify-uploader-change-item .avatar-history-table td {
  color: #111111 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  padding: 10px 8px !important;
  vertical-align: middle !important;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.youzify-bp-uploader-popup-content #bp-avatars-history-list .time,
.youzify-uploader-change-item #bp-avatars-history-list .time {
  display: block;
  color: #111111 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  max-width: 100%;
}
body.dark-mode .youzify-bp-uploader-popup-content .avatar-history-table th,
body.dark-mode .youzify-bp-uploader-popup-content .avatar-history-table td,
body.dark-mode .youzify-uploader-change-item .avatar-history-table th,
body.dark-mode .youzify-uploader-change-item .avatar-history-table td,
body.dark-mode .youzify-bp-uploader-popup-content #bp-avatars-history-list .time,
body.dark-mode .youzify-uploader-change-item #bp-avatars-history-list .time {
  color: #111111 !important;
}
.youzify-bp-uploader-popup-content .avatar-history-table thead th:first-child,
.youzify-uploader-change-item .avatar-history-table thead th:first-child {
  width: 72px;
}
.youzify-bp-uploader-popup-content .avatar-history-actions p.warning,
.youzify-uploader-change-item .avatar-history-actions p.warning {
  color: #111111 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  white-space: normal !important;
}
body.dark-mode .youzify-bp-uploader-popup-content .avatar-history-actions p.warning,
body.dark-mode .youzify-uploader-change-item .avatar-history-actions p.warning {
  color: #111111 !important;
}
.youzify-bp-uploader-popup-content.youzify-change-avatar-item,
.youzify-bp-uploader-popup-content.youzify-change-cover-item,
.youzify-uploader-change-item.youzify-bp-uploader-popup-content {
  min-width: min(100vw - 32px, 420px) !important;
  max-width: min(100vw - 24px, 480px) !important;
  box-sizing: border-box !important;
}

/* Avatar + cover upload modals: status / hint messages (BuddyPress .warning) */
body.dark-mode .bp-avatar-status .warning,
body.dark-mode .bp-avatar-status p.warning,
body.dark-mode .bp-cover-image-status .warning,
body.dark-mode .bp-cover-image-status p.warning {
  background: rgba(220, 38, 38, 0.16) !important;
  color: #111111 !important;
  border: 1px solid rgba(248, 113, 113, 0.6) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

body:not(.dark-mode) .bp-avatar-status .warning,
body:not(.dark-mode) .bp-avatar-status p.warning,
body:not(.dark-mode) .bp-cover-image-status .warning,
body:not(.dark-mode) .bp-cover-image-status p.warning {
  color: #2f2f2f !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

/* ═══════════════ HIDE OLD STATS BAR (Posts / Comments / Views) ═══════════════ */
.youzify-header-content {
  display: none !important;
}

/* Profile header: strip under cover looked “grey” — it was page background (#edf2f6) showing through
   the cover’s collapsed margin-bottom. Use padding on the header so the spacer uses the card color. */
#youzify-profile-header.youzify-hdr-v2 {
  position: relative !important;
  background-color: var(--ol-card-bg-color, #fff) !important;
  margin-bottom: 0 !important;
  padding-bottom: 60px !important;
  box-sizing: border-box;
}
body.dark-mode #youzify-profile-header.youzify-hdr-v2 {
  background-color: var(--ol-card-bg-color, #20232b) !important;
}

/* Mobile: remove the “grey bar” under the cover — no extra spacer; kill hidden stats row box */
@media screen and (max-width: 768px) {
  #youzify-profile-header.youzify-hdr-v2 {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
    border-bottom: none !important;
  }
  body:not(.dark-mode) #youzify-profile-header.youzify-hdr-v2 {
    background-color: var(--ol-card-bg-color, #fff) !important;
  }
  #youzify-profile-header .youzify-header-content {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    visibility: hidden !important;
  }
  #youzify-profile-header .youzify-header-cover {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* ═══════════════ COVER STATS (Spots Added / Views) ═══════════════ */
.tp-cover-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.tp-cover-stats .tp-cover-stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.tp-cover-stats .tp-cover-stat-icon {
  font-size: 14px;
  line-height: 1;
}

/* Match stats to the name column (global .tp-cover-stats centers; cover header reads better left-aligned with Youzify) */
#youzify-profile-header .youzify-header-cover .tp-cover-stats {
  align-items: flex-start;
}
#youzify-profile-header .youzify-header-cover .tp-cover-stats .tp-cover-stat {
  justify-content: flex-start;
}

/* Mobile cover: stack reads centered under the avatar (link row + spots/views) */
@media screen and (max-width: 768px) {
  #youzify-profile-header .youzify-header-cover .youzify-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 100%;
  }
  #youzify-profile-header .youzify-header-cover .youzify-name h2 {
    text-align: center;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
  }
  #youzify-profile-header .youzify-name .tp-youzify-profile-handle {
    justify-content: center !important;
    text-align: center !important;
    width: 100%;
  }
  #youzify-profile-header .youzify-header-cover .tp-premium-badge-row--profile {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  #youzify-profile-header .youzify-header-cover .tp-cover-stats {
    align-items: center !important;
    width: 100%;
  }
  #youzify-profile-header .youzify-header-cover .tp-cover-stats .tp-cover-stat {
    justify-content: center !important;
  }
}

/* Space below cover lives on #youzify-profile-header padding-bottom (see above) — not margin here */
#youzify-profile-header .youzify-header-cover {
  margin-bottom: 0 !important;
  position: relative !important;
}

/* Youzify often fades the cover CTA until :hover on the cover — invisible on touch / with overlays */
#youzify-profile-header .youzify-change-cover-photo,
#youzify-profile-header .youzify-cover-buttons,
#youzify-profile-header .youzify-header-cover .youzify-cover-uploader {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Change cover: above cover overlays + frosted pill (matches typical Youzify profile-photo camera chip) */
#youzify-profile-header .youzify-open-upload-cover.youzify-open-bp-uploader,
#youzify-profile-header .youzify-open-bp-uploader[data-type="cover"] {
  opacity: 1 !important;
  visibility: visible !important;
  position: relative !important;
  z-index: 50 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.5) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  transition: background 0.2s, border-color 0.2s, transform 0.15s !important;
}

#youzify-profile-header .youzify-open-upload-cover.youzify-open-bp-uploader:hover,
#youzify-profile-header .youzify-open-bp-uploader[data-type="cover"]:hover {
  background: rgba(0, 0, 0, 0.62) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  transform: translateY(-1px);
}

#youzify-profile-header .youzify-open-upload-cover .youzify-cover-uploader-label,
#youzify-profile-header .youzify-open-bp-uploader[data-type="cover"] .youzify-cover-uploader-label {
  color: inherit !important;
}

#youzify-profile-header .youzify-open-upload-cover i,
#youzify-profile-header .youzify-open-bp-uploader[data-type="cover"] i {
  color: inherit !important;
  font-size: 13px !important;
}

/* Retired: friend avatar strip (replaced by .tp-cover-conn-icons) */
#youzify-profile-header .youzify-header-cover .tp-profile-friends-strip {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Profile cover: IG / X / Facebook (from Youzify social widget) + Discord — see tpMountCoverConnIcons */
#youzify-profile-header .youzify-header-cover .tp-cover-conn-icons {
  position: absolute !important;
  z-index: 52 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  pointer-events: auto !important;
}
#youzify-profile-header .youzify-header-cover .tp-cover-conn-icons > a.tp-cover-conn-icon,
#youzify-profile-header .youzify-header-cover .tp-cover-conn-icon {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  text-decoration: none !important;
  color: #fff !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  background-image: none !important;
  background: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  transform: translateZ(0) !important;
  transition: background-color 0.2s, border-color 0.2s, transform 0.15s !important;
}
#youzify-profile-header .youzify-header-cover .tp-cover-conn-icons > a.tp-cover-conn-icon:hover,
#youzify-profile-header .youzify-header-cover .tp-cover-conn-icon:hover {
  background-color: rgba(0, 0, 0, 0.62) !important;
  background: rgba(0, 0, 0, 0.62) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  transform: translateY(-1px) translateZ(0) !important;
  color: #fff !important;
}
#youzify-profile-header .youzify-header-cover .tp-cover-conn-icon i {
  font-size: 16px !important;
  line-height: 1 !important;
}
#youzify-profile-header .youzify-header-cover .tp-cover-conn-icon--discord i {
  font-size: 18px !important;
}
/* Own profile: left side, stepped below Change Cover / tools row */
#youzify-profile-header .youzify-header-cover .tp-cover-conn-icons.tp-cover-conn-icons--own {
  top: max(70px, calc(env(safe-area-inset-top, 0px) + 58px)) !important;
  left: max(12px, env(safe-area-inset-left, 0px)) !important;
  right: auto !important;
  bottom: auto !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
}
/* Other members: same top-left band */
#youzify-profile-header .youzify-header-cover .tp-cover-conn-icons.tp-cover-conn-icons--public {
  top: max(70px, calc(env(safe-area-inset-top, 0px) + 58px)) !important;
  left: max(12px, env(safe-area-inset-left, 0px)) !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
}
@media screen and (max-width: 768px) {
  #youzify-profile-header .youzify-header-cover .tp-cover-conn-icons.tp-cover-conn-icons--own,
  #youzify-profile-header .youzify-header-cover .tp-cover-conn-icons.tp-cover-conn-icons--public {
    top: max(64px, calc(env(safe-area-inset-top, 0px) + 50px)) !important;
  }
  #youzify-profile-header .youzify-header-cover .tp-cover-conn-icon {
    width: 34px !important;
    height: 34px !important;
  }
}

/* Let clicks reach the cover button (some themes stack a full-bleed layer on the cover) */
#youzify-profile-header .youzify-header-cover .youzify-cover-overlay,
#youzify-profile-header .youzify-cover-overlay {
  pointer-events: none !important;
}

/* Hide Feeling / Activity tool, Tag Friends tool + panel, and inline emoji button */
.youzify-user-mood-tool.youzify-form-tool,
.youzify-tag-users-tool.youzify-form-tool,
.youzify-wall-tagusers,
.youzify-wall-feeling,
#youzify-wall-form .youzify-wall-content > .youzify-load-emojis.youzify-load-posts-emojis {
  display: none !important;
}
/* EmojioneArea: hide smiley picker toggle next to status field (launcher only; editor stays) */
#youzify-wall-form .youzify-emojionearea .youzify-emojionearea-button {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  position: absolute !important;
  pointer-events: none !important;
}
/* Extra-strength selectors (Youzify JS may inject inline styles) */
#youzify-wall-form .youzify-form-tools .youzify-user-mood-tool,
#youzify-wall-form .youzify-form-tools .youzify-tag-users-tool,
#youzify-wall-form .youzify-form-tools [data-youzify-tooltip="Feeling / Activity"],
#youzify-wall-form .youzify-form-tools [data-youzify-tooltip="Tag Friends"],
.youzify .youzify-user-mood-tool,
.youzify .youzify-tag-users-tool {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* ═══════════════ MODERNIZED WALL POST FORM ═══════════════ */

/* Hide the original pills row — replaced by a compact dropdown */
.youzify-wall-options.tresspassers-overriden {
  display: none !important;
}

/* Form needs relative positioning for the dropdown overlay */
#youzify-wall-form,
.youzify-wall-form,
form.youzify-wall-form {
  position: relative !important;
  overflow: visible !important;
}

/* ── Post-type dropdown removed — no trigger needed ── */
.tp-posttype-trigger {
  display: none !important;
}

/* ── GIF / Media toggle buttons in the actions bar ── */
.tp-tool-gif,
.tp-tool-media {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 4px;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--ol-icon-color, #9a9fbf);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease;
}
.tp-tool-gif:hover,
.tp-tool-media:hover {
  color: #7c3aed;
}
.tp-tool-gif.tp-tool-active,
.tp-tool-media.tp-tool-active {
  color: #7c3aed;
}
body.dark-mode .tp-tool-gif,
body.dark-mode .tp-tool-media,
html[data-theme='dark'] .tp-tool-gif,
html[data-theme='dark'] .tp-tool-media {
  color: var(--ol-icon-color, #949cb5);
}
body.dark-mode .tp-tool-gif:hover,
body.dark-mode .tp-tool-media:hover,
html[data-theme='dark'] .tp-tool-gif:hover,
html[data-theme='dark'] .tp-tool-media:hover {
  color: #c4b5fd;
}
body.dark-mode .tp-tool-gif.tp-tool-active,
body.dark-mode .tp-tool-media.tp-tool-active,
html[data-theme='dark'] .tp-tool-gif.tp-tool-active,
html[data-theme='dark'] .tp-tool-media.tp-tool-active {
  color: #c4b5fd;
}

/* ── Actions bar (privacy + tools + post button) ── */
#youzify-wall-form .youzify-wall-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px 10px !important;
  border-top: 1px solid var(--ol-border-color, #e6ecf5) !important;
}
#youzify-wall-form .youzify-form-tools {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
/* Upload / tool buttons — simple icon, no circle border */
#youzify-wall-form .youzify-form-tool {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--ol-icon-color, #9a9fbf) !important;
  cursor: pointer !important;
  transition: color 0.15s ease !important;
  font-size: 16px !important;
  padding: 4px !important;
  line-height: 1 !important;
}
#youzify-wall-form .youzify-form-tool:hover {
  color: #7c3aed !important;
  background: none !important;
  border: none !important;
}

/* Hide broken attachment upload in the main post form (works fine in comment forms) */
#youzify-wall-form .youzify-wall-upload-btn.youzify-form-tool {
  display: none !important;
}

/* ── Post button ── */
#youzify-wall-form .youzify-wall-post {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 28px !important;
  border-radius: 20px !important;
  border: none !important;
  background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25) !important;
  white-space: nowrap !important;
  min-height: 36px !important;
}
#youzify-wall-form .youzify-wall-post:hover {
  background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35) !important;
  transform: translateY(-1px) !important;
}
#youzify-wall-form .youzify-wall-post:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 4px rgba(124, 58, 237, 0.2) !important;
}

/* ── Privacy selector ── */
#youzify-wall-form .youzify-privacy-tool {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
#youzify-wall-form .youzify-privacy-tool .youzify-privacy-title {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--body-font-color, #888da8) !important;
}
#youzify-wall-form .youzify-privacy-tool .nice-select {
  border-radius: 16px !important;
  border: 1px solid var(--ol-border-color, #e6ecf5) !important;
  background: transparent !important;
  padding: 4px 28px 4px 10px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--body-font-color, #888da8) !important;
  min-height: 28px !important;
  height: auto !important;
  line-height: 20px !important;
}

/* (old post-type pill dark mode styles removed — now using dropdown) */
body.dark-mode #youzify-wall-form .youzify-wall-actions {
  border-top-color: var(--ol-border-color, #353946) !important;
}
body.dark-mode #youzify-wall-form .youzify-form-tool {
  color: var(--ol-icon-color, #949cb5) !important;
}
body.dark-mode #youzify-wall-form .youzify-form-tool:hover {
  color: #c4b5fd !important;
}
body.dark-mode #youzify-wall-form .youzify-privacy-tool .nice-select {
  border-color: var(--ol-border-color, #353946) !important;
  color: var(--ol-icon-color, #949cb5) !important;
}

/* (old post-type pill light mode / responsive styles removed — now using dropdown) */

/* ── Responsive — actions bar ── */
@media (max-width: 480px) {
  #youzify-wall-form .youzify-wall-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px 10px !important;
  }
  #youzify-wall-form .youzify-posting-form-actions {
    width: 100% !important;
  }
  #youzify-wall-form .youzify-wall-post {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* GIF wall: keep search above the grid (Youzify often uses floats / absolute on .youzify-giphy-items-content).
   Only when GIF is selected: a bare display:flex !important on .youzify-wall-giphy-form overrides jQuery’s
   inline display:none from fadeOut(), so “Search for GIFs” stayed visible on Status. */
body .youzify form.youzify-wall-form:has(input[name="post_type"][value="activity_giphy"]:checked) .youzify-wall-giphy-form,
body .youzify #youzify-wall-form.tp-wall-giphy-addon .youzify-wall-giphy-form {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  position: relative !important;
  width: 100% !important;
  float: none !important;
  clear: both !important;
}

body .youzify #youzify-wall-form .youzify-wall-giphy-form > .youzify-wall-cf-item,
body .youzify #youzify-wall-form.tp-wall-giphy-addon .youzify-wall-giphy-form > .youzify-wall-cf-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: both !important;
  position: relative !important;
}

body .youzify #youzify-wall-form .youzify-wall-giphy-form .youzify-giphy-search-form,
body .youzify #youzify-wall-form.tp-wall-giphy-addon .youzify-wall-giphy-form .youzify-giphy-search-form {
  order: 1 !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  z-index: 2 !important;
  float: none !important;
}

body .youzify #youzify-wall-form .youzify-wall-giphy-form .youzify-giphy-search-form .youzify-giphy-search-input,
body .youzify #youzify-wall-form .youzify-wall-giphy-form .youzify-giphy-search-form .youzify-wall-cf-input,
body .youzify #youzify-wall-form.tp-wall-giphy-addon .youzify-wall-giphy-form .youzify-giphy-search-form .youzify-giphy-search-input,
body .youzify #youzify-wall-form.tp-wall-giphy-addon .youzify-wall-giphy-form .youzify-giphy-search-form .youzify-wall-cf-input {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body .youzify #youzify-wall-form .youzify-wall-giphy-form > .youzify-wall-cf-item > .youzify-cf-input-loader,
body .youzify #youzify-wall-form.tp-wall-giphy-addon .youzify-wall-giphy-form > .youzify-wall-cf-item > .youzify-cf-input-loader {
  order: 2 !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
  float: none !important;
}

body .youzify #youzify-wall-form .youzify-wall-giphy-form .youzify-giphy-items-content,
body .youzify #youzify-wall-form.tp-wall-giphy-addon .youzify-wall-giphy-form .youzify-giphy-items-content {
  order: 3 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  float: none !important;
  clear: both !important;
  margin-top: 0 !important;
  max-height: min(50vh, 420px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

body .youzify #youzify-wall-form .youzify-wall-giphy-form .youzify-giphy-item,
body .youzify #youzify-wall-form.tp-wall-giphy-addon .youzify-wall-giphy-form .youzify-giphy-item {
  float: none !important;
  display: block !important;
  width: 100% !important;
  vertical-align: top !important;
}

/* Stronger than display:block on .youzify-giphy-item — collapsed hidden tiles must not extend scroll. */
body .youzify #youzify-wall-form .youzify-wall-giphy-form .youzify-giphy-item.tp-giphy-item-hidden,
body .youzify #youzify-wall-form.tp-wall-giphy-addon .youzify-wall-giphy-form .youzify-giphy-item.tp-giphy-item-hidden {
  display: none !important;
}

body .youzify #youzify-wall-form .youzify-wall-giphy-form .youzify-giphy-item img,
body .youzify #youzify-wall-form.tp-wall-giphy-addon .youzify-wall-giphy-form .youzify-giphy-item img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 6px !important;
}
body .youzify #youzify-wall-form.tp-wall-giphy-addon .youzify-giphy-loading-preview {
  display: none !important;
}

@media (max-width: 599px) {
  body .youzify #youzify-wall-form .youzify-wall-giphy-form .youzify-giphy-items-content,
  body .youzify #youzify-wall-form.tp-wall-giphy-addon .youzify-wall-giphy-form .youzify-giphy-items-content {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
}

/* ═══════════════ TAG FRIENDS / SEARCH PANELS — DARK MODE ═══════════════ */

/* Outer search wrapper (Youzify sets --yzfy-card-secondary-bg-color: #f4f4f4 = white box) */
body.dark-mode .youzify .youzify-list-search-box {
  background-color: var(--ol-card-bg-color, #20232b) !important;
  border-color: var(--ol-border-color, #353946) !important;
}

/* Inner search container bar */
body.dark-mode .youzify .youzify-list-search-container {
  background: var(--ol-input-bg-color, #2f323d) !important;
  border-color: var(--ol-border-color, #353946) !important;
  border-radius: 8px !important;
}

/* Search input */
body.dark-mode .youzify .youzify-list-search-input {
  background: transparent !important;
  color: var(--ol-input-text-color, #ddd) !important;
}

body.dark-mode .youzify .youzify-list-search-input::placeholder {
  color: var(--ol-icon-color, #949cb5) !important;
  opacity: 0.7 !important;
}

/* Search icon */
body.dark-mode .youzify .youzify-list-search-icon i {
  color: var(--ol-icon-color, #949cb5) !important;
}

/* Close icon */
body.dark-mode .youzify .youzify-list-close-icon i {
  color: var(--ol-icon-color, #949cb5) !important;
}

body.dark-mode .youzify .youzify-list-close-icon:hover i {
  color: #f87171 !important;
}

/* Results list (friends / feelings / checkin) */
body.dark-mode .youzify .youzify-wall-list-items {
  background: var(--ol-card-bg-color, #20232b) !important;
  border-color: var(--ol-border-color, #353946) !important;
}

/* Individual friend row */
body.dark-mode .youzify .youzify-wall-tag-user {
  color: var(--ol-input-text-color, #ddd) !important;
  border-bottom-color: var(--ol-border-color, #353946) !important;
}

body.dark-mode .youzify .youzify-wall-tag-user:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

body.dark-mode .youzify .youzify-wall-tag-user .youzify-list-item-name {
  color: #e4e4e7 !important;
}

/* "No friends found" / empty state */
body.dark-mode .youzify .youzify-list-notice {
  color: var(--ol-icon-color, #949cb5) !important;
}

body.dark-mode .youzify .youzify-list-notice i {
  color: var(--ol-icon-color, #949cb5) !important;
}

/* Tagged user chips (selected friends) */
body.dark-mode .youzify .youzify-tagged-users .youzify-wall-tag-user,
body.dark-mode .youzify .youzify-list-selected-items .youzify-list-item {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e4e4e7 !important;
  border-color: var(--ol-border-color, #353946) !important;
}

/* Delete tagged user X */
body.dark-mode .youzify .youzify-tagusers-delete-user i,
body.dark-mode .youzify .youzify-list-delete-item i {
  color: var(--ol-icon-color, #949cb5) !important;
}

body.dark-mode .youzify .youzify-tagusers-delete-user:hover i,
body.dark-mode .youzify .youzify-list-delete-item:hover i {
  color: #f87171 !important;
}

/* "with" label */
body.dark-mode .youzify .youzify-list-items-title {
  color: var(--ol-icon-color, #949cb5) !important;
}

/* Feeling items in dropdown */
body.dark-mode .youzify .youzify-feeling-item {
  color: var(--ol-input-text-color, #ddd) !important;
}

body.dark-mode .youzify .youzify-feeling-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Submit / Enter button in search */
body.dark-mode .youzify .youzify-list-submit-button {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--ol-input-text-color, #ddd) !important;
  border-color: var(--ol-border-color, #353946) !important;
}

body.dark-mode .youzify .youzify-list-submit-button:hover {
  background: rgba(255, 255, 255, 0.18) !important;
}

/* ═══════════════ PROFILE: tools in cover top band (tpMountProfileToolsIntoCover) — w/ Change Cover; ≤768px icon-only ═══════════════ */
#youzify-profile-header .youzify-header-cover .youzify-user-tools.youzify-tools,
#youzify-profile-header .youzify-header-cover .youzify-user-tools.youzify-tools-full-btns {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: flex-end !important;
  align-items: center !important;
  align-content: flex-start !important;
  /* Youzify often fades tools until header:hover — keep visible like Change Cover */
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: absolute !important;
  top: max(12px, env(safe-area-inset-top, 0px)) !important;
  right: max(12px, env(safe-area-inset-right, 0px)) !important;
  left: auto !important;
  width: auto !important;
  max-width: min(520px, calc(100% - 24px)) !important;
  z-index: 55 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  margin: 0 !important;
}

@media screen and (min-width: 601px) {
  #youzify-profile-header .youzify-header-cover .youzify-user-tools.youzify-tools,
  #youzify-profile-header .youzify-header-cover .youzify-user-tools.youzify-tools-full-btns {
    max-width: min(520px, calc(100% - 150px)) !important;
  }
}

#youzify-profile-header .youzify-user-tools .youzify-tool-btn {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  min-height: 36px !important;
  box-sizing: border-box !important;
  width: auto !important;
  height: auto !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  border: 1px solid var(--ol-border-color, #e6ecf5) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s !important;
  background: var(--ol-input-bg-color, #f2f4f8) !important;
  color: var(--ol-input-text-color, #3f4257) !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  float: none !important;
  margin: 0 !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1 !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
}

#youzify-profile-header .youzify-user-tools .youzify-tool-btn:hover {
  border-color: rgba(124, 58, 237, 0.35) !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.12) !important;
  transform: translateY(-1px) !important;
}

#youzify-profile-header .youzify-user-tools .youzify-tool-btn:active {
  transform: translateY(0) !important;
}

#youzify-profile-header .youzify-user-tools .youzify-tool-btn .youzify-tool-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  font-size: 15px !important;
  line-height: 1 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: auto !important;
}

#youzify-profile-header .youzify-user-tools .youzify-tool-btn .youzify-tool-icon i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

#youzify-profile-header .youzify-user-tools .youzify-tool-btn .youzify-tool-name {
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.01em;
  pointer-events: auto !important;
}

/* Cover stars: same tap behavior when they open the review modal */
#youzify-profile-header .youzify-user-ratings {
  position: relative !important;
  z-index: 46 !important;
  pointer-events: auto !important;
}
#youzify-profile-header .youzify-user-ratings .youzify-star-rating,
#youzify-profile-header .youzify-user-ratings .youzify-user-rating-stars {
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* Review: gold star; Share: accent purple (classic) */
#youzify-profile-header .youzify-user-tools .youzify-review-btn .youzify-tool-icon,
#youzify-profile-header .youzify-user-tools .youzify-review-btn .youzify-tool-icon i {
  color: #ca8a04 !important;
}
#youzify-profile-header .youzify-user-tools .youzify-review-btn .youzify-tool-icon i {
  filter: drop-shadow(0 0.5px 0 rgba(180, 83, 9, 0.2));
}

#youzify-profile-header .youzify-user-tools .youzify-social-share-btn .youzify-tool-icon,
#youzify-profile-header .youzify-user-tools .youzify-social-share-btn .youzify-tool-icon i {
  color: #7c3aed !important;
}

#youzify-profile-header .youzify-user-tools .youzify-tool-btn.tp-profile-copied {
  border-color: rgba(16, 185, 129, 0.45) !important;
  background: rgba(16, 185, 129, 0.1) !important;
}
#youzify-profile-header .youzify-user-tools .tp-profile-copied .youzify-tool-icon,
#youzify-profile-header .youzify-user-tools .tp-profile-copied .youzify-tool-icon i,
#youzify-profile-header .youzify-user-tools .tp-profile-copied .youzify-tool-name {
  color: #059669 !important;
  filter: none !important;
}

body.dark-mode #youzify-profile-header .youzify-user-tools .youzify-tool-btn,
html[data-theme='dark'] #youzify-profile-header .youzify-user-tools .youzify-tool-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: var(--ol-border-color, #353946) !important;
  color: #e4e4e7 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}
body.dark-mode #youzify-profile-header .youzify-user-tools .youzify-tool-btn:hover,
html[data-theme='dark'] #youzify-profile-header .youzify-user-tools .youzify-tool-btn:hover {
  border-color: rgba(167, 139, 250, 0.45) !important;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.2) !important;
}
body.dark-mode #youzify-profile-header .youzify-user-tools .youzify-review-btn .youzify-tool-icon,
body.dark-mode #youzify-profile-header .youzify-user-tools .youzify-review-btn .youzify-tool-icon i,
html[data-theme='dark'] #youzify-profile-header .youzify-user-tools .youzify-review-btn .youzify-tool-icon,
html[data-theme='dark'] #youzify-profile-header .youzify-user-tools .youzify-review-btn .youzify-tool-icon i {
  color: #fbbf24 !important;
}
body.dark-mode #youzify-profile-header .youzify-user-tools .youzify-review-btn .youzify-tool-icon i,
html[data-theme='dark'] #youzify-profile-header .youzify-user-tools .youzify-review-btn .youzify-tool-icon i {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

/* Mobile: icon-only + compact row on cover */
@media screen and (max-width: 768px) {
  #youzify-profile-header .youzify-header-cover .youzify-user-tools.youzify-tools,
  #youzify-profile-header .youzify-header-cover .youzify-user-tools.youzify-tools-full-btns {
    gap: 6px !important;
    justify-content: flex-end !important;
    max-width: calc(100% - 16px) !important;
    top: max(10px, env(safe-area-inset-top, 0px)) !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
  }
  #youzify-profile-header .youzify-user-tools .youzify-tool-btn {
    padding: 10px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    gap: 0 !important;
    flex: 0 0 auto !important;
  }
  #youzify-profile-header .youzify-user-tools .youzify-tool-btn .youzify-tool-name {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  #youzify-profile-header .youzify-user-tools .youzify-tool-btn .youzify-tool-icon {
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    font-size: 17px !important;
  }
  #youzify-profile-header .youzify-user-tools .youzify-tool-btn .youzify-tool-icon i {
    font-size: 17px !important;
  }
}

body.dark-mode #youzify-profile-header .youzify-user-tools .youzify-social-share-btn .youzify-tool-icon,
body.dark-mode #youzify-profile-header .youzify-user-tools .youzify-social-share-btn .youzify-tool-icon i,
html[data-theme='dark'] #youzify-profile-header .youzify-user-tools .youzify-social-share-btn .youzify-tool-icon,
html[data-theme='dark'] #youzify-profile-header .youzify-user-tools .youzify-social-share-btn .youzify-tool-icon i {
  color: #a78bfa !important;
}
body.dark-mode #youzify-profile-header .youzify-user-tools .youzify-tool-btn.tp-profile-copied,
html[data-theme='dark'] #youzify-profile-header .youzify-user-tools .youzify-tool-btn.tp-profile-copied {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(52, 211, 153, 0.5) !important;
}
body.dark-mode #youzify-profile-header .youzify-user-tools .tp-profile-copied .youzify-tool-name,
body.dark-mode #youzify-profile-header .youzify-user-tools .tp-profile-copied .youzify-tool-icon,
body.dark-mode #youzify-profile-header .youzify-user-tools .tp-profile-copied .youzify-tool-icon i,
html[data-theme='dark'] #youzify-profile-header .youzify-user-tools .tp-profile-copied .youzify-tool-name,
html[data-theme='dark'] #youzify-profile-header .youzify-user-tools .tp-profile-copied .youzify-tool-icon,
html[data-theme='dark'] #youzify-profile-header .youzify-user-tools .tp-profile-copied .youzify-tool-icon i {
  color: #34d399 !important;
}

/* Hide legacy share dialog if it still mounts */
.youzify-dialog-container:has(.youzify-share-buttons) {
  display: none !important;
}

/* Youzify modal overlay + cards (bookmark success, notices) — theme match */
/* True viewport center: flex + safe-area padding (fixes top clip from plugin top/% positioning) */
body .youzify-dialog {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: max(20px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px))
    max(20px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)) !important;
  box-sizing: border-box !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

body .youzify-dialog > .youzify-dialog-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}

body .youzify-dialog .youzify-dialog-container:not(:has(.youzify-share-buttons)) {
  position: relative !important;
  z-index: 1 !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: none !important;
  flex-shrink: 0 !important;
}

body .youzify-dialog-overlay {
  background: rgba(15, 23, 42, 0.52) !important;
  backdrop-filter: saturate(1.1) blur(8px) !important;
  -webkit-backdrop-filter: saturate(1.1) blur(8px) !important;
}

body .youzify-dialog-container:not(:has(.youzify-share-buttons)) {
  max-width: 400px !important;
  width: calc(100vw - 40px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border-radius: 18px !important;
  border: 1px solid var(--ol-border-color, #e6ecf5) !important;
  background: var(--ol-card-bg-color, #fff) !important;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(124, 58, 237, 0.06) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body .youzify-dialog-container:not(:has(.youzify-share-buttons)) .youzify-dialog-header {
  background: transparent !important;
  border: none !important;
  padding: 28px 24px 12px !important;
  text-align: center !important;
}

body .youzify-dialog-container:not(:has(.youzify-share-buttons)) .youzify-dialog-header i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  margin: 0 auto !important;
  border-radius: 50% !important;
  font-size: 22px !important;
  line-height: 1 !important;
  color: #64748b !important;
  background: rgba(100, 116, 139, 0.12) !important;
  box-shadow: inset 0 0 0 1px rgba(100, 116, 139, 0.12) !important;
}

body .youzify-dialog-container:not(:has(.youzify-share-buttons)) .youzify-dialog-header i.fa-check {
  color: #7c3aed !important;
  background: rgba(124, 58, 237, 0.12) !important;
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.15) !important;
}

body .youzify-dialog-container:not(:has(.youzify-share-buttons)) .youzify-dialog-header i.fa-times,
body .youzify-dialog-container:not(:has(.youzify-share-buttons)) .youzify-dialog-header i.fa-exclamation-triangle,
body .youzify-dialog-container:not(:has(.youzify-share-buttons)) .youzify-dialog-header i.fa-exclamation-circle {
  color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.12) !important;
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.15) !important;
}

body .youzify-dialog-container:not(:has(.youzify-share-buttons)) .youzify-dialog-msg {
  padding: 8px 24px 4px !important;
  margin: 0 !important;
  background: transparent !important;
}

body .youzify-dialog-container:not(:has(.youzify-share-buttons)) .youzify-dialog-desc {
  text-align: center !important;
}

body .youzify-dialog-container:not(:has(.youzify-share-buttons)) .youzify-dialog-title {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 0 0 8px !important;
  color: var(--ol-heading-font-color, var(--heading-font-color, #515365)) !important;
  letter-spacing: -0.02em !important;
}

body .youzify-dialog-container:not(:has(.youzify-share-buttons)) .youzify-dialog-msg-content {
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  color: var(--ol-body-font-color, #888da8) !important;
}

body .youzify-dialog-container:not(:has(.youzify-share-buttons)) ul.youzify-dialog-buttons {
  list-style: none !important;
  margin: 0 !important;
  padding: 16px 24px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

body .youzify-dialog-container:not(:has(.youzify-share-buttons)) ul.youzify-dialog-buttons li {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

body .youzify-dialog-container:not(:has(.youzify-share-buttons)) a.youzify-close-dialog {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
  padding: 12px 20px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  border: none !important;
  color: #fff !important;
  background: linear-gradient(145deg, #7c3aed, #a78bfa) !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35) !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease !important;
}

body .youzify-dialog-container:not(:has(.youzify-share-buttons)) a.youzify-close-dialog:hover {
  filter: brightness(1.05) !important;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4) !important;
}

body.dark-mode .youzify-dialog-container:not(:has(.youzify-share-buttons)),
html[data-theme='dark'] .youzify-dialog-container:not(:has(.youzify-share-buttons)) {
  border-color: var(--ol-border-color, #353946) !important;
  background: var(--ol-card-bg-color, #20232b) !important;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(167, 139, 250, 0.12) !important;
}

body.dark-mode .youzify-dialog-container:not(:has(.youzify-share-buttons)) .youzify-dialog-header i,
html[data-theme='dark'] .youzify-dialog-container:not(:has(.youzify-share-buttons)) .youzify-dialog-header i {
  color: #94a3b8 !important;
  background: rgba(148, 163, 184, 0.12) !important;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.15) !important;
}

body.dark-mode .youzify-dialog-container:not(:has(.youzify-share-buttons)) .youzify-dialog-header i.fa-check,
html[data-theme='dark'] .youzify-dialog-container:not(:has(.youzify-share-buttons)) .youzify-dialog-header i.fa-check {
  color: #c4b5fd !important;
  background: rgba(167, 139, 250, 0.15) !important;
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.2) !important;
}

body.dark-mode .youzify-dialog-container:not(:has(.youzify-share-buttons)) .youzify-dialog-header i.fa-times,
body.dark-mode .youzify-dialog-container:not(:has(.youzify-share-buttons)) .youzify-dialog-header i.fa-exclamation-triangle,
body.dark-mode .youzify-dialog-container:not(:has(.youzify-share-buttons)) .youzify-dialog-header i.fa-exclamation-circle,
html[data-theme='dark'] .youzify-dialog-container:not(:has(.youzify-share-buttons)) .youzify-dialog-header i.fa-times,
html[data-theme='dark'] .youzify-dialog-container:not(:has(.youzify-share-buttons)) .youzify-dialog-header i.fa-exclamation-triangle,
html[data-theme='dark'] .youzify-dialog-container:not(:has(.youzify-share-buttons)) .youzify-dialog-header i.fa-exclamation-circle {
  color: #f87171 !important;
  background: rgba(248, 113, 113, 0.12) !important;
  box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.2) !important;
}

body.dark-mode .youzify-dialog-container:not(:has(.youzify-share-buttons)) .youzify-dialog-title,
html[data-theme='dark'] .youzify-dialog-container:not(:has(.youzify-share-buttons)) .youzify-dialog-title {
  color: var(--ol-heading-font-color, #e4e4e7) !important;
}

body.dark-mode .youzify-dialog-container:not(:has(.youzify-share-buttons)) .youzify-dialog-msg-content,
html[data-theme='dark'] .youzify-dialog-container:not(:has(.youzify-share-buttons)) .youzify-dialog-msg-content {
  color: var(--ol-body-font-color, #a1a1aa) !important;
}

body.dark-mode .youzify-dialog-overlay,
html[data-theme='dark'] .youzify-dialog-overlay {
  background: rgba(0, 0, 0, 0.65) !important;
}

/* ═══════════════ Share / Reply activity modal (#youzify-share-activity-form) ═══════════════ */
.youzify-modal-overlay:has(#youzify-share-activity-form),
body .youzify-modal-overlay:has(#youzify-share-activity-form),
#youzify-edit-activity-wrapper:has(#youzify-share-activity-form) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)) !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

body #youzify-share-activity-form.youzify-modal {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 auto !important;
  transform: none !important;
  width: min(720px, calc(100vw - 32px)) !important;
  max-width: 720px !important;
  max-height: calc(100vh - 48px) !important;
  max-height: min(92vh, calc(100dvh - 48px)) !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid var(--ol-border-color, rgba(0, 0, 0, 0.08)) !important;
  background: var(--ol-card-bg-color, #fff) !important;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(124, 58, 237, 0.08) !important;
}

body #youzify-share-activity-form .youzify-modal-title {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 14px 52px 14px 18px !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 0 !important;
  background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 45%, #a78bfa 100%) !important;
  color: #fff !important;
  box-shadow: none !important;
}

body #youzify-share-activity-form .youzify-modal-title > i.far.fa-share-square {
  font-size: 18px !important;
  line-height: 1 !important;
  color: rgba(255, 255, 255, 0.95) !important;
  opacity: 1 !important;
}

body #youzify-share-activity-form .youzify-modal-title-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
  color: #fff !important;
}

body #youzify-share-activity-form .youzify-modal-close-icon {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  line-height: 1 !important;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.18) !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  box-shadow: none !important;
}

body #youzify-share-activity-form .youzify-modal-close-icon:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
}

body #youzify-share-activity-form .youzify-modal-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 0 !important;
  background: var(--ol-card-bg-color, #fff) !important;
}

body.dark-mode #youzify-share-activity-form.youzify-modal,
html[data-theme='dark'] #youzify-share-activity-form.youzify-modal {
  border-color: var(--ol-border-color, #353946) !important;
  background: var(--ol-card-bg-color, #20232b) !important;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(167, 139, 250, 0.12) !important;
}

body.dark-mode #youzify-share-activity-form .youzify-modal-content,
html[data-theme='dark'] #youzify-share-activity-form .youzify-modal-content {
  background: var(--ol-card-bg-color, #20232b) !important;
}

/* ═══════════════ Add Review modal (#youzify-review-form / #youzify-modal) ═══════════════ */
#youzify-modal {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)) !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: saturate(1.1) blur(8px) !important;
  -webkit-backdrop-filter: saturate(1.1) blur(8px) !important;
}

body.dark-mode #youzify-modal,
html[data-theme='dark'] #youzify-modal {
  background: rgba(0, 0, 0, 0.68) !important;
}

/* Extra id specificity beats theme rules like `#youzify-modal .youzify-modal { background: … }` */
#youzify-modal form#youzify-review-form.youzify-modal,
#youzify-modal #youzify-review-form.youzify-modal,
#youzify-review-form.youzify-modal {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 auto !important;
  transform: none !important;
  width: min(520px, calc(100vw - 32px)) !important;
  min-width: 0 !important;
  max-width: 520px !important;
  max-height: min(92vh, calc(100dvh - 32px)) !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid var(--ol-border-color, rgba(0, 0, 0, 0.08)) !important;
  background: var(--ol-card-bg-color, #fff) !important;
  background-color: var(--ol-card-bg-color, #fff) !important;
  background-image: none !important;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(124, 58, 237, 0.08) !important;
  font-family: var(--body-font-family, inherit) !important;
}

#youzify-review-form .youzify-modal-title {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 14px 52px 14px 18px !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 0 !important;
  /* Match #item-header message button */
  background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
  color: #fff !important;
  box-shadow: none !important;
}

#youzify-review-form .youzify-modal-title-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.25 !important;
  color: #fff !important;
}

#youzify-review-form .youzify-modal-close-icon {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  line-height: 1 !important;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.2) !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  box-shadow: none !important;
}

#youzify-review-form .youzify-modal-close-icon:hover {
  background: rgba(255, 255, 255, 0.32) !important;
  color: #fff !important;
}

#youzify-review-form .youzify-modal-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 20px 18px 8px !important;
  background: var(--ol-card-bg-color, #fff) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

#youzify-review-form .youzify-modal-content > .youzify-networks-form {
  width: 100% !important;
  max-width: 100% !important;
  align-self: stretch !important;
}

/*
 * Add-review markup is usually radios 5→1 in DOM (5★ first). row-reverse packs labels so 1★ is on the left.
 * Edit markup is often 1→5; row (no reverse) keeps 1★ on the left. Avoid per-star order — it breaks when modes differ.
 */
#youzify-review-form .youzify-rate-user {
  position: relative !important;
  display: flex !important;
  flex-direction: row-reverse !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  align-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  gap: 2px 6px !important;
  row-gap: 10px !important;
  direction: ltr !important;
}

/* Set when first rating radio in DOM is 1 and last is 5 (ascending markup) — see tpTagYouzifyReviewFormMode */
#youzify-review-form.tp-yz-review-edit .youzify-rate-user {
  flex-direction: row !important;
}

#youzify-review-form .youzify-rate-user-desc {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--heading-font-color, #515365) !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  order: -1 !important;
}

#youzify-review-form .youzify-rate-user input[type='radio'] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0.01 !important;
}

#youzify-review-form .youzify-rate-user label.full {
  position: relative !important;
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  text-indent: 0 !important;
  overflow: visible !important;
  background: transparent none !important;
  background-color: transparent !important;
  background-image: none !important;
  transition: transform 0.12s ease !important;
}

/* Youzify often adds a second pseudo with sprites — strip it */
#youzify-review-form .youzify-rate-user label.full::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}

/* Unicode star — purple family (empty / hover / selected) */
#youzify-review-form .youzify-rate-user label.full::before {
  content: '\2605' !important;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 34px !important;
  line-height: 1 !important;
  display: block !important;
  background: transparent none !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #a78bfa !important;
  opacity: 0.42 !important;
  text-shadow: none !important;
  -webkit-font-smoothing: antialiased !important;
  transition: color 0.15s ease, opacity 0.15s ease, transform 0.12s ease !important;
}

#youzify-review-form .youzify-rate-user label.full:hover::before {
  opacity: 0.95 !important;
  color: #8b5cf6 !important;
  transform: scale(1.06) !important;
}

#youzify-review-form .youzify-rate-user label.full.tp-yz-review-star-on::before {
  opacity: 1 !important;
  color: #7c3aed !important;
  text-shadow: 0 0 14px rgba(124, 58, 237, 0.35) !important;
}

#youzify-review-form .youzify-rate-user label.full:active {
  transform: scale(0.94) !important;
}

@media screen and (max-width: 480px) {
  #youzify-review-form .youzify-rate-user label.full {
    width: 40px !important;
    height: 40px !important;
  }
  #youzify-review-form .youzify-rate-user label.full::before {
    font-size: 30px !important;
  }
}

@media screen and (max-width: 360px) {
  #youzify-review-form .youzify-rate-user {
    gap: 0 4px !important;
  }
  #youzify-review-form .youzify-rate-user label.full {
    width: 36px !important;
    height: 36px !important;
  }
  #youzify-review-form .youzify-rate-user label.full::before {
    font-size: 26px !important;
  }
}

#youzify-review-form .youzify-networks-form {
  margin: 0 !important;
  padding: 0 !important;
}

#youzify-review-form .youzify-textarea-field .option-infos {
  margin-bottom: 8px !important;
}

#youzify-review-form .youzify-textarea-field .option-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--heading-font-color, #515365) !important;
}

#youzify-review-form .youzify-textarea-field .option-desc {
  font-size: 12px !important;
  color: var(--body-font-color, #888da8) !important;
  margin: 4px 0 0 !important;
}

#youzify-review-form textarea[name='review'] {
  width: 100% !important;
  min-height: 110px !important;
  box-sizing: border-box !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  border: 1px solid var(--ol-border-color, #e6ecf5) !important;
  background: var(--ol-input-bg-color, #f2f4f8) !important;
  color: var(--ol-input-text-color, #3f4257) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  resize: vertical !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

#youzify-review-form textarea[name='review']:focus {
  outline: none !important;
  border-color: rgba(124, 58, 237, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.25) !important;
}

#youzify-review-form .youzify-modal-actions {
  flex-shrink: 0 !important;
  padding: 16px 18px 18px !important;
  margin: 0 !important;
  border: none !important;
  background: var(--ol-card-bg-color, #fff) !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

#youzify-review-form #youzify-add-review.youzify-modal-button.youzify-modal-save {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 12px 22px !important;
  min-height: 44px !important;
  border: none !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  color: #fff !important;
  background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4) !important;
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease !important;
}

#youzify-review-form #youzify-add-review.youzify-modal-button.youzify-modal-save:hover {
  filter: brightness(1.06) !important;
  box-shadow: 0 6px 22px rgba(124, 58, 237, 0.5) !important;
}

#youzify-review-form #youzify-add-review.youzify-modal-button.youzify-modal-save:active {
  transform: translateY(1px) !important;
}

/* Delete Review — same chrome as Update; destructive red gradient */
#youzify-review-form #youzify-delete-review.youzify-modal-delete,
#youzify-review-form #youzify-delete-review.youzify-md-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 12px 22px !important;
  min-height: 44px !important;
  border: none !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  color: #fff !important;
  background: linear-gradient(135deg, #dc2626, #f87171) !important;
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.38) !important;
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease !important;
  line-height: 1.2 !important;
  font-family: inherit !important;
}

#youzify-review-form #youzify-delete-review.youzify-modal-delete:hover,
#youzify-review-form #youzify-delete-review.youzify-md-button:hover {
  filter: brightness(1.06) !important;
  box-shadow: 0 6px 22px rgba(220, 38, 38, 0.48) !important;
}

#youzify-review-form #youzify-delete-review.youzify-modal-delete:active,
#youzify-review-form #youzify-delete-review.youzify-md-button:active {
  transform: translateY(1px) !important;
}

#youzify-review-form #youzify-delete-review i {
  font-size: 14px !important;
  line-height: 1 !important;
}

body.dark-mode #youzify-review-form #youzify-delete-review.youzify-modal-delete,
html[data-theme='dark'] #youzify-review-form #youzify-delete-review.youzify-modal-delete,
body.dark-mode #youzify-review-form #youzify-delete-review.youzify-md-button,
html[data-theme='dark'] #youzify-review-form #youzify-delete-review.youzify-md-button {
  background: linear-gradient(135deg, #b91c1c, #ef4444) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(248, 113, 113, 0.25) !important;
}

body.dark-mode #youzify-review-form.youzify-modal,
html[data-theme='dark'] #youzify-review-form.youzify-modal {
  border-color: var(--ol-border-color, #353946) !important;
  background: var(--ol-card-bg-color, #20232b) !important;
  background-color: var(--ol-card-bg-color, #20232b) !important;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(167, 139, 250, 0.12) !important;
}

body.dark-mode #youzify-review-form .youzify-modal-content,
html[data-theme='dark'] #youzify-review-form .youzify-modal-content {
  background: var(--ol-card-bg-color, #20232b) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

body.dark-mode #youzify-review-form .youzify-modal-actions,
html[data-theme='dark'] #youzify-review-form .youzify-modal-actions {
  background: var(--ol-card-bg-color, #20232b) !important;
}

body.dark-mode #youzify-review-form .youzify-rate-user,
html[data-theme='dark'] #youzify-review-form .youzify-rate-user {
  background: transparent none !important;
  border: none !important;
}

body.dark-mode #youzify-review-form .youzify-rate-user-desc,
html[data-theme='dark'] #youzify-review-form .youzify-rate-user-desc {
  color: var(--heading-font-color, #fff) !important;
}

body.dark-mode #youzify-review-form .youzify-rate-user label.full::before,
html[data-theme='dark'] #youzify-review-form .youzify-rate-user label.full::before {
  color: #a78bfa !important;
  opacity: 0.45 !important;
}

body.dark-mode #youzify-review-form .youzify-rate-user label.full:hover::before,
html[data-theme='dark'] #youzify-review-form .youzify-rate-user label.full:hover::before {
  color: #c4b5fd !important;
  opacity: 0.95 !important;
}

body.dark-mode #youzify-review-form .youzify-rate-user label.full.tp-yz-review-star-on::before,
html[data-theme='dark'] #youzify-review-form .youzify-rate-user label.full.tp-yz-review-star-on::before {
  opacity: 1 !important;
  color: #c4b5fd !important;
}

body.dark-mode #youzify-review-form textarea[name='review'],
html[data-theme='dark'] #youzify-review-form textarea[name='review'] {
  border-color: var(--ol-border-color, #353946) !important;
  background: var(--ol-input-bg-color, #2f323d) !important;
  color: var(--ol-input-text-color, #ddd) !important;
}

/* (Modernized media filter tabs now in main block above — duplicate removed) */

/* URL / social share stays on the meta bar (youzify-social-share-activity) */

/* ═══════════════ NOTIFICATIONS PAGE — MODERNIZED ═══════════════ */

/* Container form */
#notifications-bulk-management {
  width: 100% !important;
}

/* Table → card list: hide header row, stack rows into cards */
.youzify table.notifications {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 10px !important;
  border: none !important;
}

.youzify table.notifications thead {
  display: none !important;
}

.youzify table.notifications tbody {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.youzify table.notifications tbody tr {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  background: var(--ol-card-bg-color, #fff) !important;
  border: 1px solid var(--ol-border-color, #e6ecf5) !important;
  transition: background 0.15s, box-shadow 0.15s !important;
}

.youzify table.notifications tbody tr:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
}

body.dark-mode .youzify table.notifications tbody tr {
  background: var(--ol-card-bg-color, #20232b) !important;
  border-color: var(--ol-border-color, #353946) !important;
}

body.dark-mode .youzify table.notifications tbody tr:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Hide empty icon <td> */
.youzify table.notifications td.icon {
  display: none !important;
}

/* Checkbox cell */
.youzify table.notifications td.bulk-select-check {
  flex: 0 0 auto !important;
  padding: 0 !important;
  border: none !important;
}

.youzify table.notifications td.bulk-select-check .youzify_field_indication {
  width: 20px !important;
  height: 20px !important;
  border-radius: 6px !important;
  border: 2px solid var(--ol-border-color-darken, #9a9fbf) !important;
  transition: border-color 0.15s, background 0.15s !important;
}

.youzify table.notifications td.bulk-select-check input:checked + .youzify_field_indication {
  background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
  border-color: #7c3aed !important;
}

/* Description: grows to fill */
.youzify table.notifications td.notification-description {
  flex: 1 1 0% !important;
  padding: 0 !important;
  border: none !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}

.youzify table.notifications td.notification-description a {
  color: var(--heading-font-color, #515365) !important;
  text-decoration: none !important;
  transition: color 0.15s !important;
}

.youzify table.notifications td.notification-description a:hover {
  color: var(--primary-accent-color, #ff5e3a) !important;
}

body.dark-mode .youzify table.notifications td.notification-description a {
  color: #e4e4e7 !important;
}

body.dark-mode .youzify table.notifications td.notification-description a:hover {
  color: var(--primary-accent-color, #ff5e3a) !important;
}

/* Date */
.youzify table.notifications td.notification-since {
  flex: 0 0 auto !important;
  padding: 0 !important;
  border: none !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--body-font-color, #888da8) !important;
  white-space: nowrap !important;
}

/* Action buttons — JS replaces dashicons <span> with FA <i>; CSS just styles the link + icon */
#youzify table.notifications td.notification-actions,
body .youzify table.notifications td.notification-actions {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

#youzify table.notifications td.notification-actions a,
body .youzify table.notifications td.notification-actions a {
  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;
  margin: 0 !important;
  border: none !important;
  border-radius: 10px !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--ol-icon-color, #9a9fbf) !important;
  text-decoration: none !important;
  font-size: 16px !important;
  line-height: 1 !important;
  transition: color 0.15s ease, background-color 0.15s ease !important;
}

#youzify table.notifications td.notification-actions a::before,
body .youzify table.notifications td.notification-actions a::before {
  content: none !important;
}

#youzify table.notifications td.notification-actions a.mark-read:hover,
body .youzify table.notifications td.notification-actions a.mark-read:hover {
  background-color: rgba(124, 58, 237, 0.1) !important;
  color: #7c3aed !important;
}

#youzify table.notifications td.notification-actions a.delete:hover,
body .youzify table.notifications td.notification-actions a.delete:hover {
  background-color: rgba(220, 38, 38, 0.1) !important;
  color: #dc2626 !important;
}

body.dark-mode #youzify table.notifications td.notification-actions a,
body.dark-mode .youzify table.notifications td.notification-actions a {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--ol-icon-color, #949cb5) !important;
}

body.dark-mode #youzify table.notifications td.notification-actions a.mark-read:hover,
body.dark-mode .youzify table.notifications td.notification-actions a.mark-read:hover {
  background-color: rgba(167, 139, 250, 0.15) !important;
  color: #c4b5fd !important;
}

body.dark-mode #youzify table.notifications td.notification-actions a.delete:hover,
body.dark-mode .youzify table.notifications td.notification-actions a.delete:hover {
  background-color: rgba(220, 38, 38, 0.18) !important;
  color: #f87171 !important;
}

/* FA icon inside buttons (inserted by JS) */
#youzify table.notifications td.notification-actions a .tp-notif-icon,
body .youzify table.notifications td.notification-actions a .tp-notif-icon {
  font-size: 16px !important;
  line-height: 1 !important;
  color: inherit !important;
  pointer-events: none !important;
}

/* ── Notification avatar (injected by JS) ── */
.youzify table.notifications td.tp-notif-avatar {
  flex: 0 0 auto !important;
  padding: 0 !important;
  border: none !important;
  position: relative;
  width: 44px;
  height: 44px;
}
.youzify table.notifications td.tp-notif-avatar img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  border: 2px solid var(--ol-border-color, #e6ecf5) !important;
}
body.dark-mode .youzify table.notifications td.tp-notif-avatar img {
  border-color: var(--ol-border-color, #353946) !important;
}
.youzify table.notifications .tp-notif-type-badge {
  position: absolute;
  bottom: -2px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ol-card-bg-color, #fff);
  z-index: 1;
}
body.dark-mode .youzify table.notifications .tp-notif-type-badge {
  border-color: var(--ol-card-bg-color, #20232b);
}
.youzify table.notifications .tp-notif-type-badge i {
  font-size: 9px !important;
  color: #fff !important;
  line-height: 1 !important;
}
.youzify table.notifications .tp-notif-avatar-placeholder {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(167,139,250,0.15));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ol-border-color, #e6ecf5);
}
body.dark-mode .youzify table.notifications .tp-notif-avatar-placeholder {
  background: linear-gradient(135deg, rgba(124,58,237,0.2), rgba(167,139,250,0.18));
  border-color: var(--ol-border-color, #353946);
}
.youzify table.notifications .tp-notif-avatar-placeholder i {
  font-size: 18px !important;
  color: #7c3aed !important;
  line-height: 1 !important;
}
body.dark-mode .youzify table.notifications .tp-notif-avatar-placeholder i {
  color: #c4b5fd !important;
}

/* Mark-unread button (on Read tab) — same style as mark-read */
#youzify table.notifications td.notification-actions a.mark-unread:hover,
body .youzify table.notifications td.notification-actions a.mark-unread:hover {
  background-color: rgba(124, 58, 237, 0.1) !important;
  color: #7c3aed !important;
}
body.dark-mode #youzify table.notifications td.notification-actions a.mark-unread:hover,
body.dark-mode .youzify table.notifications td.notification-actions a.mark-unread:hover {
  background-color: rgba(167, 139, 250, 0.15) !important;
  color: #c4b5fd !important;
}

/* "Mark All as Read" top bar button (injected by JS) */
.tp-notif-mark-all-bar {
  display: flex !important;
  justify-content: flex-end !important;
  margin-bottom: 8px !important;
}

.tp-notif-mark-all-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  border: none !important;
  background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: opacity 0.15s, transform 0.1s !important;
}

.tp-notif-mark-all-btn:hover {
  opacity: 0.9 !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}

.tp-notif-mark-all-btn i {
  font-size: 13px !important;
}

/* Bulk actions bar */
.youzify .notifications-options-nav {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 12px !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  background: var(--ol-card-bg-color, #fff) !important;
  border: 1px solid var(--ol-border-color, #e6ecf5) !important;
}

body.dark-mode .youzify .notifications-options-nav {
  background: var(--ol-card-bg-color, #20232b) !important;
  border-color: var(--ol-border-color, #353946) !important;
}

.youzify .notifications-options-nav .nice-select {
  min-width: 140px !important;
  border-radius: 8px !important;
  background: var(--ol-input-bg-color, #f2f4f8) !important;
  border: 1px solid var(--ol-border-color, #e6ecf5) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 32px 8px 12px !important;
  height: auto !important;
  line-height: 1.4 !important;
}

body.dark-mode .youzify .notifications-options-nav .nice-select {
  background: var(--ol-input-bg-color, #2f323d) !important;
  border-color: var(--ol-border-color, #353946) !important;
  color: var(--ol-input-text-color, #ddd) !important;
}

.youzify .notifications-options-nav #notification-bulk-manage {
  padding: 8px 20px !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
  color: #fff !important;
  border: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: opacity 0.15s, transform 0.1s !important;
}

.youzify .notifications-options-nav #notification-bulk-manage:hover {
  opacity: 0.9 !important;
  transform: translateY(-1px) !important;
}

.youzify .notifications-options-nav #notification-bulk-manage:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Mobile: stack description + date vertically */
@media screen and (max-width: 600px) {
  .youzify table.notifications tbody tr {
    flex-wrap: wrap !important;
    padding: 12px !important;
    gap: 8px !important;
  }

  .youzify table.notifications td.bulk-select-check {
    order: 0 !important;
  }

  .youzify table.notifications td.tp-notif-avatar {
    order: 1 !important;
  }

  .youzify table.notifications td.notification-description {
    order: 2 !important;
    flex: 1 1 0% !important;
    font-size: 13px !important;
  }

  .youzify table.notifications td.notification-actions {
    order: 3 !important;
  }

  .youzify table.notifications td.notification-since {
    order: 4 !important;
    flex-basis: 100% !important;
    font-size: 11.5px !important;
    padding-left: 56px !important;
  }
}

/* Notifications pagination (BP: #notifications-pag-top / #notifications-pag-bottom) */
.pagination.no-ajax:has(#notifications-pag-bottom),
.pagination.no-ajax:has(#notifications-pag-top) {
  margin-top: 20px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

#notifications-pag-bottom,
#notifications-pag-top,
#youzify #notifications-pag-bottom,
#youzify #notifications-pag-top {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 auto !important;
  padding: 14px 18px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
  background: var(--ol-card-bg-color, #fff) !important;
  border: 1px solid var(--ol-border-color, #e6ecf5) !important;
}

#notifications-pag-bottom .page-numbers,
#notifications-pag-top .page-numbers,
#youzify #notifications-pag-bottom .page-numbers,
#youzify #notifications-pag-top .page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  border: 1px solid var(--ol-border-color, #e6ecf5) !important;
  background: var(--ol-input-bg-color, #f2f4f8) !important;
  color: var(--ol-body-font-color, #4b5563) !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease !important;
}

#notifications-pag-bottom a.page-numbers:hover,
#notifications-pag-top a.page-numbers:hover,
#youzify #notifications-pag-bottom a.page-numbers:hover,
#youzify #notifications-pag-top a.page-numbers:hover {
  background: rgba(124, 58, 237, 0.1) !important;
  border-color: rgba(124, 58, 237, 0.35) !important;
  color: #6d28d9 !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

#notifications-pag-bottom span.page-numbers.current,
#notifications-pag-top span.page-numbers.current,
#youzify #notifications-pag-bottom span.page-numbers.current,
#youzify #notifications-pag-top span.page-numbers.current {
  background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.35) !important;
  cursor: default !important;
  transform: none !important;
}

#notifications-pag-bottom .page-numbers.dots,
#notifications-pag-top .page-numbers.dots,
#youzify #notifications-pag-bottom .page-numbers.dots,
#youzify #notifications-pag-top .page-numbers.dots {
  min-width: auto !important;
  padding: 0 6px !important;
  border: none !important;
  background: transparent !important;
  color: var(--ol-body-font-color, #9ca3af) !important;
  font-weight: 500 !important;
}

#notifications-pag-bottom a.page-numbers.prev,
#notifications-pag-bottom a.page-numbers.next,
#notifications-pag-top a.page-numbers.prev,
#notifications-pag-top a.page-numbers.next,
#youzify #notifications-pag-bottom a.page-numbers.prev,
#youzify #notifications-pag-bottom a.page-numbers.next,
#youzify #notifications-pag-top a.page-numbers.prev,
#youzify #notifications-pag-top a.page-numbers.next {
  min-width: 44px !important;
  padding: 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

body.dark-mode #notifications-pag-bottom,
body.dark-mode #notifications-pag-top,
body.dark-mode #youzify #notifications-pag-bottom,
body.dark-mode #youzify #notifications-pag-top {
  background: var(--ol-card-bg-color, #20232b) !important;
  border-color: var(--ol-border-color, #353946) !important;
}

body.dark-mode #notifications-pag-bottom .page-numbers,
body.dark-mode #notifications-pag-top .page-numbers,
body.dark-mode #youzify #notifications-pag-bottom .page-numbers,
body.dark-mode #youzify #notifications-pag-top .page-numbers {
  background: var(--ol-input-bg-color, #2f323d) !important;
  border-color: var(--ol-border-color, #353946) !important;
  color: var(--ol-input-text-color, #d1d5db) !important;
}

body.dark-mode #notifications-pag-bottom a.page-numbers:hover,
body.dark-mode #notifications-pag-top a.page-numbers:hover,
body.dark-mode #youzify #notifications-pag-bottom a.page-numbers:hover,
body.dark-mode #youzify #notifications-pag-top a.page-numbers:hover {
  background: rgba(167, 139, 250, 0.15) !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
  color: #c4b5fd !important;
}

body.dark-mode #notifications-pag-bottom span.page-numbers.current,
body.dark-mode #notifications-pag-top span.page-numbers.current,
body.dark-mode #youzify #notifications-pag-bottom span.page-numbers.current,
body.dark-mode #youzify #notifications-pag-top span.page-numbers.current {
  box-shadow: 0 2px 14px rgba(124, 58, 237, 0.45) !important;
}

html[data-theme='dark'] #notifications-pag-bottom,
html[data-theme='dark'] #notifications-pag-top,
html[data-theme='dark'] #youzify #notifications-pag-bottom,
html[data-theme='dark'] #youzify #notifications-pag-top {
  background: var(--ol-card-bg-color, #20232b) !important;
  border-color: var(--ol-border-color, #353946) !important;
}

html[data-theme='dark'] #notifications-pag-bottom .page-numbers,
html[data-theme='dark'] #notifications-pag-top .page-numbers,
html[data-theme='dark'] #youzify #notifications-pag-bottom .page-numbers,
html[data-theme='dark'] #youzify #notifications-pag-top .page-numbers {
  background: var(--ol-input-bg-color, #2f323d) !important;
  border-color: var(--ol-border-color, #353946) !important;
  color: var(--ol-input-text-color, #d1d5db) !important;
}

html[data-theme='dark'] #notifications-pag-bottom a.page-numbers:hover,
html[data-theme='dark'] #notifications-pag-top a.page-numbers:hover,
html[data-theme='dark'] #youzify #notifications-pag-bottom a.page-numbers:hover,
html[data-theme='dark'] #youzify #notifications-pag-top a.page-numbers:hover {
  background: rgba(167, 139, 250, 0.15) !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
  color: #c4b5fd !important;
}

html[data-theme='dark'] #notifications-pag-bottom span.page-numbers.current,
html[data-theme='dark'] #notifications-pag-top span.page-numbers.current,
html[data-theme='dark'] #youzify #notifications-pag-bottom span.page-numbers.current,
html[data-theme='dark'] #youzify #notifications-pag-top span.page-numbers.current {
  box-shadow: 0 2px 14px rgba(124, 58, 237, 0.45) !important;
}

/* Members directory pagination — same card + pill style as notifications */
#members-directory-form #pag-top.pagination,
#members-directory-form #pag-bottom.pagination {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 24px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
#members-directory-form #pag-top.pagination {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}
#member-dir-count-top.pag-count,
#member-dir-count-bottom.pag-count {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--body-font-color, #888da8) !important;
  text-align: center !important;
}
#member-dir-pag-bottom,
#member-dir-pag-top,
#youzify #member-dir-pag-bottom,
#youzify #member-dir-pag-top {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 auto !important;
  padding: 14px 18px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
  background: var(--ol-card-bg-color, #fff) !important;
  border: 1px solid var(--ol-border-color, #e6ecf5) !important;
}
#member-dir-pag-bottom .page-numbers,
#member-dir-pag-top .page-numbers,
#youzify #member-dir-pag-bottom .page-numbers,
#youzify #member-dir-pag-top .page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  border: 1px solid var(--ol-border-color, #e6ecf5) !important;
  background: var(--ol-input-bg-color, #f2f4f8) !important;
  color: var(--ol-body-font-color, #4b5563) !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease !important;
}
#member-dir-pag-bottom a.page-numbers:hover,
#member-dir-pag-top a.page-numbers:hover,
#youzify #member-dir-pag-bottom a.page-numbers:hover,
#youzify #member-dir-pag-top a.page-numbers:hover {
  background: rgba(124, 58, 237, 0.1) !important;
  border-color: rgba(124, 58, 237, 0.35) !important;
  color: #6d28d9 !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}
#member-dir-pag-bottom span.page-numbers.current,
#member-dir-pag-top span.page-numbers.current,
#youzify #member-dir-pag-bottom span.page-numbers.current,
#youzify #member-dir-pag-top span.page-numbers.current {
  background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.35) !important;
  cursor: default !important;
  transform: none !important;
}
#member-dir-pag-bottom .page-numbers.dots,
#member-dir-pag-top .page-numbers.dots,
#youzify #member-dir-pag-bottom .page-numbers.dots,
#youzify #member-dir-pag-top .page-numbers.dots {
  min-width: auto !important;
  padding: 0 6px !important;
  border: none !important;
  background: transparent !important;
  color: var(--ol-body-font-color, #9ca3af) !important;
  font-weight: 500 !important;
}
#member-dir-pag-bottom a.page-numbers.prev,
#member-dir-pag-bottom a.page-numbers.next,
#member-dir-pag-top a.page-numbers.prev,
#member-dir-pag-top a.page-numbers.next,
#youzify #member-dir-pag-bottom a.page-numbers.prev,
#youzify #member-dir-pag-bottom a.page-numbers.next,
#youzify #member-dir-pag-top a.page-numbers.prev,
#youzify #member-dir-pag-top a.page-numbers.next {
  min-width: 44px !important;
  padding: 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}
body.dark-mode #member-dir-pag-bottom,
body.dark-mode #member-dir-pag-top,
body.dark-mode #youzify #member-dir-pag-bottom,
body.dark-mode #youzify #member-dir-pag-top {
  background: var(--ol-card-bg-color, #20232b) !important;
  border-color: var(--ol-border-color, #353946) !important;
}
body.dark-mode #member-dir-pag-bottom .page-numbers,
body.dark-mode #member-dir-pag-top .page-numbers,
body.dark-mode #youzify #member-dir-pag-bottom .page-numbers,
body.dark-mode #youzify #member-dir-pag-top .page-numbers {
  background: var(--ol-input-bg-color, #2f323d) !important;
  border-color: var(--ol-border-color, #353946) !important;
  color: var(--ol-input-text-color, #d1d5db) !important;
}
body.dark-mode #member-dir-pag-bottom a.page-numbers:hover,
body.dark-mode #member-dir-pag-top a.page-numbers:hover,
body.dark-mode #youzify #member-dir-pag-bottom a.page-numbers:hover,
body.dark-mode #youzify #member-dir-pag-top a.page-numbers:hover {
  background: rgba(167, 139, 250, 0.15) !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
  color: #c4b5fd !important;
}
body.dark-mode #member-dir-pag-bottom span.page-numbers.current,
body.dark-mode #member-dir-pag-top span.page-numbers.current,
body.dark-mode #youzify #member-dir-pag-bottom span.page-numbers.current,
body.dark-mode #youzify #member-dir-pag-top span.page-numbers.current {
  box-shadow: 0 2px 14px rgba(124, 58, 237, 0.45) !important;
}
html[data-theme='dark'] #member-dir-pag-bottom,
html[data-theme='dark'] #member-dir-pag-top,
html[data-theme='dark'] #youzify #member-dir-pag-bottom,
html[data-theme='dark'] #youzify #member-dir-pag-top {
  background: var(--ol-card-bg-color, #20232b) !important;
  border-color: var(--ol-border-color, #353946) !important;
}
html[data-theme='dark'] #member-dir-pag-bottom .page-numbers,
html[data-theme='dark'] #member-dir-pag-top .page-numbers,
html[data-theme='dark'] #youzify #member-dir-pag-bottom .page-numbers,
html[data-theme='dark'] #youzify #member-dir-pag-top .page-numbers {
  background: var(--ol-input-bg-color, #2f323d) !important;
  border-color: var(--ol-border-color, #353946) !important;
  color: var(--ol-input-text-color, #d1d5db) !important;
}
html[data-theme='dark'] #member-dir-pag-bottom a.page-numbers:hover,
html[data-theme='dark'] #member-dir-pag-top a.page-numbers:hover,
html[data-theme='dark'] #youzify #member-dir-pag-bottom a.page-numbers:hover,
html[data-theme='dark'] #youzify #member-dir-pag-top a.page-numbers:hover {
  background: rgba(167, 139, 250, 0.15) !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
  color: #c4b5fd !important;
}
html[data-theme='dark'] #member-dir-pag-bottom span.page-numbers.current,
html[data-theme='dark'] #member-dir-pag-top span.page-numbers.current,
html[data-theme='dark'] #youzify #member-dir-pag-bottom span.page-numbers.current,
html[data-theme='dark'] #youzify #member-dir-pag-top span.page-numbers.current {
  box-shadow: 0 2px 14px rgba(124, 58, 237, 0.45) !important;
}

/* Messages list pagination — match members directory pills.
   Youzify uses #user-pag + #messages-dir-pag (not #pag-bottom / #youzify ancestor). */
.messages #user-pag.pagination,
.messages #pag-top.pagination,
.messages #pag-bottom.pagination,
main.youzify-page-main-content .messages #user-pag.pagination,
main.youzify-page-main-content .messages #pag-top.pagination,
main.youzify-page-main-content .messages #pag-bottom.pagination,
#youzify .messages #user-pag.pagination,
#youzify .messages #pag-top.pagination,
#youzify .messages #pag-bottom.pagination {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 24px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.messages #pag-top.pagination,
main.youzify-page-main-content .messages #pag-top.pagination,
#youzify .messages #pag-top.pagination {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}
.messages #user-pag .pag-count,
.messages #pag-top .pag-count,
.messages #pag-bottom .pag-count,
main.youzify-page-main-content .messages #user-pag .pag-count,
main.youzify-page-main-content .messages #pag-top .pag-count,
main.youzify-page-main-content .messages #pag-bottom .pag-count,
#youzify .messages #user-pag .pag-count,
#youzify .messages #pag-top .pag-count,
#youzify .messages #pag-bottom .pag-count {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--body-font-color, #888da8) !important;
  text-align: center !important;
}
.messages #messages-dir-pag,
.messages #messages-dir-pag-top,
.messages #messages-dir-pag-bottom,
.messages #pag-top .pagination-links,
.messages #pag-bottom .pagination-links,
main.youzify-page-main-content .messages #messages-dir-pag,
main.youzify-page-main-content .messages #messages-dir-pag-top,
main.youzify-page-main-content .messages #messages-dir-pag-bottom,
main.youzify-page-main-content .messages #pag-top .pagination-links,
main.youzify-page-main-content .messages #pag-bottom .pagination-links,
#youzify .messages #messages-dir-pag,
#youzify .messages #messages-dir-pag-top,
#youzify .messages #messages-dir-pag-bottom,
#youzify .messages #pag-top .pagination-links,
#youzify .messages #pag-bottom .pagination-links {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 auto !important;
  padding: 14px 18px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
  background: var(--ol-card-bg-color, #fff) !important;
  border: 1px solid var(--ol-border-color, #e6ecf5) !important;
}
.messages #messages-dir-pag .page-numbers,
.messages #messages-dir-pag-top .page-numbers,
.messages #messages-dir-pag-bottom .page-numbers,
.messages #pag-top .pagination-links .page-numbers,
.messages #pag-bottom .pagination-links .page-numbers,
main.youzify-page-main-content .messages #messages-dir-pag .page-numbers,
main.youzify-page-main-content .messages #messages-dir-pag-top .page-numbers,
main.youzify-page-main-content .messages #messages-dir-pag-bottom .page-numbers,
main.youzify-page-main-content .messages #pag-top .pagination-links .page-numbers,
main.youzify-page-main-content .messages #pag-bottom .pagination-links .page-numbers,
#youzify .messages #messages-dir-pag .page-numbers,
#youzify .messages #messages-dir-pag-top .page-numbers,
#youzify .messages #messages-dir-pag-bottom .page-numbers,
#youzify .messages #pag-top .pagination-links .page-numbers,
#youzify .messages #pag-bottom .pagination-links .page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  border: 1px solid var(--ol-border-color, #e6ecf5) !important;
  background: var(--ol-input-bg-color, #f2f4f8) !important;
  color: var(--ol-body-font-color, #4b5563) !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease !important;
}
.messages #messages-dir-pag a.page-numbers:hover,
.messages #messages-dir-pag-top a.page-numbers:hover,
.messages #messages-dir-pag-bottom a.page-numbers:hover,
.messages #pag-top .pagination-links a.page-numbers:hover,
.messages #pag-bottom .pagination-links a.page-numbers:hover,
main.youzify-page-main-content .messages #messages-dir-pag a.page-numbers:hover,
main.youzify-page-main-content .messages #messages-dir-pag-top a.page-numbers:hover,
main.youzify-page-main-content .messages #messages-dir-pag-bottom a.page-numbers:hover,
#youzify .messages #messages-dir-pag a.page-numbers:hover,
#youzify .messages #messages-dir-pag-top a.page-numbers:hover,
#youzify .messages #messages-dir-pag-bottom a.page-numbers:hover {
  background: rgba(124, 58, 237, 0.1) !important;
  border-color: rgba(124, 58, 237, 0.35) !important;
  color: #6d28d9 !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}
.messages #messages-dir-pag span.page-numbers.current,
.messages #messages-dir-pag-top span.page-numbers.current,
.messages #messages-dir-pag-bottom span.page-numbers.current,
.messages #pag-top .pagination-links span.page-numbers.current,
.messages #pag-bottom .pagination-links span.page-numbers.current,
main.youzify-page-main-content .messages #messages-dir-pag span.page-numbers.current,
#youzify .messages #messages-dir-pag span.page-numbers.current {
  background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.35) !important;
  cursor: default !important;
  transform: none !important;
}
.messages #messages-dir-pag .page-numbers.dots,
.messages #messages-dir-pag-top .page-numbers.dots,
.messages #messages-dir-pag-bottom .page-numbers.dots,
.messages #pag-top .pagination-links .page-numbers.dots,
.messages #pag-bottom .pagination-links .page-numbers.dots,
#youzify .messages #messages-dir-pag .page-numbers.dots {
  min-width: auto !important;
  padding: 0 6px !important;
  border: none !important;
  background: transparent !important;
  color: var(--ol-body-font-color, #9ca3af) !important;
  font-weight: 500 !important;
}
.messages #messages-dir-pag a.page-numbers.prev,
.messages #messages-dir-pag a.page-numbers.next,
.messages #messages-dir-pag-top a.page-numbers.prev,
.messages #messages-dir-pag-top a.page-numbers.next,
.messages #messages-dir-pag-bottom a.page-numbers.prev,
.messages #messages-dir-pag-bottom a.page-numbers.next,
.messages #pag-top .pagination-links a.page-numbers.prev,
.messages #pag-top .pagination-links a.page-numbers.next,
.messages #pag-bottom .pagination-links a.page-numbers.prev,
.messages #pag-bottom .pagination-links a.page-numbers.next,
#youzify .messages #messages-dir-pag a.page-numbers.prev,
#youzify .messages #messages-dir-pag a.page-numbers.next {
  min-width: 44px !important;
  padding: 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}
body.dark-mode .messages #messages-dir-pag,
body.dark-mode .messages #messages-dir-pag-top,
body.dark-mode .messages #messages-dir-pag-bottom,
body.dark-mode .messages #pag-top .pagination-links,
body.dark-mode .messages #pag-bottom .pagination-links,
body.dark-mode main.youzify-page-main-content .messages #messages-dir-pag,
body.dark-mode #youzify .messages #messages-dir-pag {
  background: var(--ol-card-bg-color, #20232b) !important;
  border-color: var(--ol-border-color, #353946) !important;
}
body.dark-mode .messages #messages-dir-pag .page-numbers,
body.dark-mode .messages #messages-dir-pag-top .page-numbers,
body.dark-mode .messages #messages-dir-pag-bottom .page-numbers,
body.dark-mode .messages #pag-top .pagination-links .page-numbers,
body.dark-mode .messages #pag-bottom .pagination-links .page-numbers,
body.dark-mode #youzify .messages #messages-dir-pag .page-numbers {
  background: var(--ol-input-bg-color, #2f323d) !important;
  border-color: var(--ol-border-color, #353946) !important;
  color: var(--ol-input-text-color, #d1d5db) !important;
}
body.dark-mode .messages #messages-dir-pag a.page-numbers:hover,
body.dark-mode .messages #pag-top .pagination-links a.page-numbers:hover,
body.dark-mode .messages #pag-bottom .pagination-links a.page-numbers:hover,
body.dark-mode #youzify .messages #messages-dir-pag a.page-numbers:hover {
  background: rgba(167, 139, 250, 0.15) !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
  color: #c4b5fd !important;
}
body.dark-mode .messages #messages-dir-pag span.page-numbers.current,
body.dark-mode .messages #pag-top .pagination-links span.page-numbers.current,
body.dark-mode .messages #pag-bottom .pagination-links span.page-numbers.current,
body.dark-mode #youzify .messages #messages-dir-pag span.page-numbers.current {
  box-shadow: 0 2px 14px rgba(124, 58, 237, 0.45) !important;
}
html[data-theme='dark'] .messages #messages-dir-pag,
html[data-theme='dark'] .messages #messages-dir-pag-top,
html[data-theme='dark'] .messages #messages-dir-pag-bottom,
html[data-theme='dark'] .messages #pag-top .pagination-links,
html[data-theme='dark'] .messages #pag-bottom .pagination-links,
html[data-theme='dark'] main.youzify-page-main-content .messages #messages-dir-pag,
html[data-theme='dark'] #youzify .messages #messages-dir-pag {
  background: var(--ol-card-bg-color, #20232b) !important;
  border-color: var(--ol-border-color, #353946) !important;
}
html[data-theme='dark'] .messages #messages-dir-pag .page-numbers,
html[data-theme='dark'] .messages #messages-dir-pag-top .page-numbers,
html[data-theme='dark'] .messages #messages-dir-pag-bottom .page-numbers,
html[data-theme='dark'] .messages #pag-top .pagination-links .page-numbers,
html[data-theme='dark'] .messages #pag-bottom .pagination-links .page-numbers,
html[data-theme='dark'] #youzify .messages #messages-dir-pag .page-numbers {
  background: var(--ol-input-bg-color, #2f323d) !important;
  border-color: var(--ol-border-color, #353946) !important;
  color: var(--ol-input-text-color, #d1d5db) !important;
}
html[data-theme='dark'] .messages #messages-dir-pag a.page-numbers:hover,
html[data-theme='dark'] .messages #pag-top .pagination-links a.page-numbers:hover,
html[data-theme='dark'] .messages #pag-bottom .pagination-links a.page-numbers:hover,
html[data-theme='dark'] #youzify .messages #messages-dir-pag a.page-numbers:hover {
  background: rgba(167, 139, 250, 0.15) !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
  color: #c4b5fd !important;
}
html[data-theme='dark'] .messages #messages-dir-pag span.page-numbers.current,
html[data-theme='dark'] .messages #pag-top .pagination-links span.page-numbers.current,
html[data-theme='dark'] .messages #pag-bottom .pagination-links span.page-numbers.current,
html[data-theme='dark'] #youzify .messages #messages-dir-pag span.page-numbers.current {
  box-shadow: 0 2px 14px rgba(124, 58, 237, 0.45) !important;
}

/* ═══════════════ MESSAGE INBOX LIST — MODERNIZED (matches notification cards) ═══════════════ */

/* Youzify/BP renders inbox as a <table id="message-threads"> with rows per thread.
   Standard cells: .thread-checkbox, .thread-from, .thread-info (.thread-subject + .thread-excerpt),
   .thread-options, .thread-date, .thread-star.
   We hide the thead, flex the rows into cards, show avatar + name + last message excerpt. */

#youzify #message-threads,
body .youzify #message-threads {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: none !important;
}

#youzify #message-threads thead,
body .youzify #message-threads thead {
    display: none !important;
}

#youzify #message-threads tbody,
body .youzify #message-threads tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

#youzify #message-threads tbody tr,
body .youzify #message-threads tbody tr {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    background: var(--ol-card-bg-color, #fff) !important;
    border: 1px solid var(--ol-border-color, #e6ecf5) !important;
    transition: background 0.15s, box-shadow 0.15s !important;
    text-decoration: none !important;
    cursor: pointer;
}

/* Keep compact controls visually centered when the message column is taller (multi-line preview) */
#youzify #message-threads td.thread-checkbox,
#youzify #message-threads td.bulk-select-check,
body .youzify #message-threads td.thread-checkbox,
body .youzify #message-threads td.bulk-select-check,
#youzify #message-threads td.thread-star,
body .youzify #message-threads td.thread-star,
#youzify #message-threads td.thread-options,
body .youzify #message-threads td.thread-options,
#youzify #message-threads td.thread-date,
body .youzify #message-threads td.thread-date {
    align-self: center !important;
}

#youzify #message-threads tbody tr:hover,
body .youzify #message-threads tbody tr:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Whole row opens thread (handled in tp-bp-message-interactions.js) */
#youzify #message-threads tbody tr[id^='m-'],
body .youzify #message-threads tbody tr[id^='m-'],
#message-threads.messages-notices tbody tr[id^='m-'] {
    cursor: pointer !important;
}

/* Unread threads: strong accent + tint + badge (easy to scan) */
#youzify #message-threads tbody tr.unread,
body .youzify #message-threads tbody tr.unread,
#message-threads.messages-notices tbody tr.unread {
    border-left: 4px solid #6d28d9 !important;
    background: linear-gradient(
        90deg,
        rgba(124, 58, 237, 0.11) 0%,
        rgba(124, 58, 237, 0.04) 42%,
        var(--ol-card-bg-color, #fff) 72%
    ) !important;
    box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.12) !important;
}

#youzify #message-threads tbody tr.unread td.thread-info,
body .youzify #message-threads tbody tr.unread td.thread-info,
#message-threads.messages-notices tbody tr.unread td.thread-info {
    position: relative !important;
}

#youzify #message-threads tbody tr.unread td.thread-info::before,
body .youzify #message-threads tbody tr.unread td.thread-info::before,
#message-threads.messages-notices tbody tr.unread td.thread-info::before {
    content: 'Unread' !important;
    display: inline-block !important;
    align-self: flex-start !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    padding: 4px 8px !important;
    margin: 0 0 6px 0 !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #6d28d9, #7c3aed) !important;
    box-shadow: 0 1px 2px rgba(109, 40, 217, 0.25) !important;
}

#youzify #message-threads tbody tr.unread td.thread-info > p:first-child a,
body .youzify #message-threads tbody tr.unread td.thread-info > p:first-child a,
#message-threads.messages-notices tbody tr.unread td.thread-info > p:first-child a {
    font-weight: 800 !important;
    color: #4c1d95 !important;
}

#youzify #message-threads tbody tr.unread td.thread-info .thread-excerpt,
body .youzify #message-threads tbody tr.unread td.thread-info .thread-excerpt,
#message-threads.messages-notices tbody tr.unread td.thread-info .thread-excerpt {
    color: var(--heading-font-color, #3f4257) !important;
    font-weight: 500 !important;
}

#youzify #message-threads tbody tr.unread td.thread-sender .from a,
body .youzify #message-threads tbody tr.unread td.thread-sender .from a,
#message-threads.messages-notices tbody tr.unread td.thread-sender .from a,
#youzify #message-threads tbody tr.unread td.thread-from .from a,
body .youzify #message-threads tbody tr.unread td.thread-from .from a,
#message-threads.messages-notices tbody tr.unread td.thread-from .from a {
    font-weight: 700 !important;
}

/* Checkbox cell (inbox + sent use .bulk-select-check) */
#youzify #message-threads td.thread-checkbox,
#youzify #message-threads td.bulk-select-check,
body .youzify #message-threads td.thread-checkbox,
body .youzify #message-threads td.bulk-select-check {
    flex: 0 0 auto !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
}

#youzify #message-threads td.thread-checkbox .youzify_field_indication,
#youzify #message-threads td.bulk-select-check .youzify_field_indication,
body .youzify #message-threads td.thread-checkbox .youzify_field_indication,
body .youzify #message-threads td.bulk-select-check .youzify_field_indication {
    width: 20px !important;
    height: 20px !important;
    border-radius: 6px !important;
    border: 2px solid var(--ol-border-color-darken, #9a9fbf) !important;
}

#youzify #message-threads td.thread-checkbox input:checked + .youzify_field_indication,
#youzify #message-threads td.bulk-select-check input:checked + .youzify_field_indication,
body .youzify #message-threads td.thread-checkbox input:checked + .youzify_field_indication,
body .youzify #message-threads td.bulk-select-check input:checked + .youzify_field_indication {
    background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
    border-color: #7c3aed !important;
}

/* Avatar / From cell */
#youzify #message-threads td.thread-from,
body .youzify #message-threads td.thread-from {
    flex: 0 0 auto !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
}

#youzify #message-threads td.thread-from img.avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Sent normalized sender cell: mirror inbox avatar sizing */
#youzify #message-threads td.thread-sender .thread-avatar,
body .youzify #message-threads td.thread-sender .thread-avatar {
    flex: 0 0 auto !important;
}
#youzify #message-threads td.thread-sender .thread-avatar img.avatar,
body .youzify #message-threads td.thread-sender .thread-avatar img.avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

#youzify #message-threads td.thread-from a {
    font-weight: 600 !important;
    font-size: 13.5px !important;
    color: var(--heading-font-color, #515365) !important;
    text-decoration: none !important;
}

/* Sent box: .thread-sender wraps avatars + .thread-from (same card row as inbox) */
#youzify #message-threads td.thread-sender,
body .youzify #message-threads td.thread-sender {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
}
#youzify #message-threads td.thread-sender .thread-avatars,
body .youzify #message-threads td.thread-sender .thread-avatars {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}
#youzify #message-threads td.thread-sender .thread-avatars img.avatar,
body .youzify #message-threads td.thread-sender .thread-avatars img.avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: none !important;
    box-shadow: none !important;
}
#youzify #message-threads td.thread-sender .thread-from,
body .youzify #message-threads td.thread-sender .thread-from {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
    flex: 1 1 0% !important;
}

/* Sent: “To” + date lifted to this wrapper — Youzify hides inner div.thread-from */
#youzify #message-threads td.thread-sender > .tp-sentbox-recipient-column,
body .youzify #message-threads td.thread-sender > .tp-sentbox-recipient-column,
body.tp-bp-messages-sentbox #message-threads.messages-notices td.thread-sender > .tp-sentbox-recipient-column,
body.tp-bp-messages-sentbox table#message-threads td.thread-sender > .tp-sentbox-recipient-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex: 1 1 auto !important;
    min-width: 120px !important;
    min-height: 1px !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 2 !important;
}
#youzify #message-threads td.thread-sender .tp-sentbox-to-label,
body .youzify #message-threads td.thread-sender .tp-sentbox-to-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--body-font-color, #888da8) !important;
}
#youzify #message-threads td.thread-sender .to,
body .youzify #message-threads td.thread-sender .to {
    display: block !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    color: var(--heading-font-color, #515365) !important;
}
#youzify #message-threads td.thread-sender .to a,
body .youzify #message-threads td.thread-sender .to a {
    font-weight: 600 !important;
    color: var(--heading-font-color, #515365) !important;
    text-decoration: none !important;
}
/* Sent “To”: avatar + name, one tap target to profile */
#youzify #message-threads td.thread-sender .to .tp-sentbox-recipients,
body .youzify #message-threads td.thread-sender .to .tp-sentbox-recipients {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px 14px !important;
    margin-top: 4px !important;
}
#youzify #message-threads td.thread-sender .tp-sentbox-recipient-link,
body .youzify #message-threads td.thread-sender .tp-sentbox-recipient-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 5px 12px 5px 5px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    background: #f0ecfc !important;
    border: 1.5px solid #d4c4f7 !important;
    color: var(--heading-font-color, #515365) !important;
    text-decoration: none !important;
    transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}
#youzify #message-threads td.thread-sender .tp-sentbox-recipient-link:hover,
body .youzify #message-threads td.thread-sender .tp-sentbox-recipient-link:hover {
    background: rgba(124, 58, 237, 0.08) !important;
    border-color: rgba(124, 58, 237, 0.35) !important;
    color: #6d28d9 !important;
}
#youzify #message-threads td.thread-sender .tp-sentbox-recipient-link img.tp-sentbox-recipient-avatar,
#youzify #message-threads td.thread-sender .tp-sentbox-recipient-link img.avatar.tp-sentbox-recipient-avatar,
body .youzify #message-threads td.thread-sender .tp-sentbox-recipient-link img.tp-sentbox-recipient-avatar,
body .youzify #message-threads td.thread-sender .tp-sentbox-recipient-link img.avatar.tp-sentbox-recipient-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}
#youzify #message-threads td.thread-sender .tp-sentbox-recipient-name,
body .youzify #message-threads td.thread-sender .tp-sentbox-recipient-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--heading-font-color, #3f4257) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 220px !important;
}
#youzify #message-threads td.thread-sender .activity,
body .youzify #message-threads td.thread-sender .activity {
    font-size: 12px !important;
    color: var(--body-font-color, #888da8) !important;
}

/* Sent: hide old dual-avatar strip on filled rows — the recipient chip IS the visual */
body.tp-bp-messages-sentbox #youzify #message-threads tr.tp-sentbox-row-filled td.thread-sender .thread-avatars,
body.tp-bp-messages-sentbox .youzify #message-threads tr.tp-sentbox-row-filled td.thread-sender .thread-avatars,
#youzify #message-threads tr.tp-sentbox-row-filled td.thread-sender .thread-avatars,
body .youzify #message-threads tr.tp-sentbox-row-filled td.thread-sender .thread-avatars {
    display: none !important;
}
/* Hide the small "TO" label — the chip with avatar + name is self-explanatory */
body.tp-bp-messages-sentbox #youzify #message-threads tr.tp-sentbox-row-filled .tp-sentbox-to-label,
body.tp-bp-messages-sentbox .youzify #message-threads tr.tp-sentbox-row-filled .tp-sentbox-to-label,
#youzify #message-threads tr.tp-sentbox-row-filled .tp-sentbox-to-label,
body .youzify #message-threads tr.tp-sentbox-row-filled .tp-sentbox-to-label {
    display: none !important;
}
/* Remove extra top margin when avatar strip is hidden */
body.tp-bp-messages-sentbox #youzify #message-threads tr.tp-sentbox-row-filled .tp-sentbox-recipients,
body.tp-bp-messages-sentbox .youzify #message-threads tr.tp-sentbox-row-filled .tp-sentbox-recipients,
#youzify #message-threads tr.tp-sentbox-row-filled .tp-sentbox-recipients,
body .youzify #message-threads tr.tp-sentbox-row-filled .tp-sentbox-recipients {
    margin-top: 0 !important;
}

/* Sent row layout should mirror inbox "From" column */
#youzify #message-threads tr.tp-sentbox-row-filled td.thread-sender .tp-sentbox-recipient-column,
body .youzify #message-threads tr.tp-sentbox-row-filled td.thread-sender .tp-sentbox-recipient-column {
    justify-content: center !important;
}
#youzify #message-threads tr.tp-sentbox-row-filled td.thread-sender .to.tp-sentbox-to,
body .youzify #message-threads tr.tp-sentbox-row-filled td.thread-sender .to.tp-sentbox-to {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
}
#youzify #message-threads tr.tp-sentbox-row-filled td.thread-sender .tp-sentbox-recipient-link,
body .youzify #message-threads tr.tp-sentbox-row-filled td.thread-sender .tp-sentbox-recipient-link {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
#youzify #message-threads tr.tp-sentbox-row-filled td.thread-sender .tp-sentbox-recipient-name,
body .youzify #message-threads tr.tp-sentbox-row-filled td.thread-sender .tp-sentbox-recipient-name {
    font-size: 13.5px !important;
    font-weight: 600 !important;
}

/* ===== Sent box: force chip + avatar visibility (override Youzify defaults) ===== */
#youzify #message-threads td.thread-sender .to.tp-sentbox-to,
body .youzify #message-threads td.thread-sender .to.tp-sentbox-to,
body #message-threads td.thread-sender .to.tp-sentbox-to,
#message-threads td.thread-sender .to.tp-sentbox-to {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    width: auto !important;
    position: static !important;
    clip: auto !important;
    clip-path: none !important;
}
#youzify #message-threads .tp-sentbox-recipients,
body .youzify #message-threads .tp-sentbox-recipients,
body #message-threads .tp-sentbox-recipients,
#message-threads .tp-sentbox-recipients {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
}
#youzify #message-threads .tp-sentbox-recipient,
body .youzify #message-threads .tp-sentbox-recipient,
#message-threads .tp-sentbox-recipient {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}
#youzify #message-threads .tp-sentbox-recipient-link,
body .youzify #message-threads .tp-sentbox-recipient-link,
body #message-threads .tp-sentbox-recipient-link,
#message-threads .tp-sentbox-recipient-link {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    gap: 10px !important;
    overflow: visible !important;
}
#youzify #message-threads img.tp-sentbox-recipient-avatar,
body .youzify #message-threads img.tp-sentbox-recipient-avatar,
body #message-threads img.tp-sentbox-recipient-avatar,
#message-threads img.tp-sentbox-recipient-avatar,
img.tp-sentbox-recipient-avatar {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    clip: auto !important;
    clip-path: none !important;
    position: static !important;
}
#youzify #message-threads .tp-sentbox-recipient-name,
body .youzify #message-threads .tp-sentbox-recipient-name,
body #message-threads .tp-sentbox-recipient-name,
#message-threads .tp-sentbox-recipient-name {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* Thread info — subject high in row + readable preview; overflow shows … */
#youzify #message-threads td.thread-info,
body .youzify #message-threads td.thread-info,
#message-threads.messages-notices td.thread-info {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    align-self: flex-start !important;
    padding: 0 10px 2px 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    align-items: stretch !important;
}

#youzify #message-threads td.thread-info > p,
body .youzify #message-threads td.thread-info > p,
#message-threads.messages-notices td.thread-info > p {
    margin: 0 !important;
}

#youzify #message-threads td.thread-info > p:first-child,
body .youzify #message-threads td.thread-info > p:first-child,
#message-threads.messages-notices td.thread-info > p:first-child {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    min-width: 0 !important;
    line-height: 1.3 !important;
}

#youzify #message-threads td.thread-info > p:first-child::before,
body .youzify #message-threads td.thread-info > p:first-child::before,
#message-threads.messages-notices td.thread-info > p:first-child::before {
    content: '\f0e0' !important;
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    margin-top: 3px !important;
    color: var(--body-font-color, #888da8) !important;
    flex-shrink: 0 !important;
    opacity: 0.75 !important;
}

#youzify #message-threads td.thread-info a,
body .youzify #message-threads td.thread-info a,
#message-threads.messages-notices td.thread-info a {
    text-decoration: none !important;
}

#youzify #message-threads td.thread-info .thread-subject,
body .youzify #message-threads td.thread-info .thread-subject,
#message-threads.messages-notices td.thread-info .thread-subject {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--heading-font-color, #515365) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.35 !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

#youzify #message-threads td.thread-info .thread-excerpt,
body .youzify #message-threads td.thread-info .thread-excerpt,
#message-threads.messages-notices td.thread-info .thread-excerpt {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--body-font-color, #5c6275) !important;
    line-height: 1.5 !important;
    margin-top: 6px !important;
    padding-top: 6px !important;
    border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-top: 1px solid color-mix(in srgb, var(--ol-border-color, #e6ecf5) 80%, transparent) !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

/* Sent / alternate markup: subject is first <p><a> without .thread-subject */
#youzify #message-threads td.thread-info > p:first-child a,
body .youzify #message-threads td.thread-info > p:first-child a,
#message-threads.messages-notices td.thread-info > p:first-child a {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--heading-font-color, #515365) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    letter-spacing: -0.01em !important;
    transition: color 0.15s ease !important;
}

#youzify #message-threads td.thread-info > p:first-child a:hover,
body .youzify #message-threads td.thread-info > p:first-child a:hover,
#message-threads.messages-notices td.thread-info > p:first-child a:hover {
    color: #6d28d9 !important;
}

/* Date cell */
#youzify #message-threads td.thread-date,
body .youzify #message-threads td.thread-date {
    flex: 0 0 auto !important;
    padding: 0 !important;
    border: none !important;
    font-size: 12px !important;
    color: var(--body-font-color, #888da8) !important;
    white-space: nowrap !important;
}

/* Star + row actions: same pill + Font Awesome (inbox + sent) */
#youzify #message-threads td.thread-star,
body .youzify #message-threads td.thread-star {
    flex: 0 0 auto !important;
    padding: 0 !important;
    border: none !important;
}

#youzify #message-threads td.thread-options,
body .youzify #message-threads td.thread-options {
    flex: 0 0 auto !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

#youzify #message-threads td.thread-star a,
body .youzify #message-threads td.thread-star a,
#message-threads.messages-notices td.thread-star a,
#youzify #message-threads td.thread-options a,
body .youzify #message-threads td.thread-options a,
#message-threads.messages-notices td.thread-options a {
    box-sizing: border-box !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    border: 1px solid rgba(124, 58, 237, 0.22) !important;
    background: rgba(124, 58, 237, 0.1) !important;
    color: #7c3aed !important;
    line-height: 1 !important;
    overflow: visible !important;
    text-decoration: none !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}

#youzify #message-threads td.thread-star a .icon,
body .youzify #message-threads td.thread-star a .icon,
#message-threads.messages-notices td.thread-star a .icon,
#youzify #message-threads td.thread-options a .dashicons,
body .youzify #message-threads td.thread-options a .dashicons,
#message-threads.messages-notices td.thread-options a .dashicons {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

#youzify #message-threads td.thread-star a .bp-screen-reader-text,
body .youzify #message-threads td.thread-star a .bp-screen-reader-text,
#message-threads.messages-notices td.thread-star a .bp-screen-reader-text,
#youzify #message-threads td.thread-options a .bp-screen-reader-text,
body .youzify #message-threads td.thread-options a .bp-screen-reader-text,
#message-threads.messages-notices td.thread-options a .bp-screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Star glyph: real <i.tp-msg-star-icon> from tp-bp-message-list-icons.js (Youzify owns a::after for tooltips) */
#youzify #message-threads td.thread-star a .tp-msg-star-icon,
body .youzify #message-threads td.thread-star a .tp-msg-star-icon,
#message-threads.messages-notices td.thread-star a .tp-msg-star-icon {
    font-size: 15px !important;
    line-height: 1 !important;
    display: block !important;
    margin: 0 !important;
    pointer-events: none !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    color: inherit !important;
}

#youzify #message-threads td.thread-star a .tp-msg-star-icon.tp-msg-star-filled,
body .youzify #message-threads td.thread-star a .tp-msg-star-icon.tp-msg-star-filled,
#message-threads.messages-notices td.thread-star a .tp-msg-star-icon.tp-msg-star-filled {
    color: #eab308 !important;
}

#youzify #message-threads td.thread-star a.message-action-star:hover,
body .youzify #message-threads td.thread-star a.message-action-star:hover,
#message-threads.messages-notices td.thread-star a.message-action-star:hover {
    background: rgba(234, 179, 8, 0.14) !important;
    border-color: rgba(234, 179, 8, 0.35) !important;
    color: #ca8a04 !important;
}

#youzify #message-threads td.thread-star a.message-action-unstar:hover,
body .youzify #message-threads td.thread-star a.message-action-unstar:hover,
#message-threads.messages-notices td.thread-star a.message-action-unstar:hover,
#youzify #message-threads td.thread-star a[data-star-status='unstar']:hover,
body .youzify #message-threads td.thread-star a[data-star-status='unstar']:hover,
#message-threads.messages-notices td.thread-star a[data-star-status='unstar']:hover {
    background: rgba(234, 179, 8, 0.18) !important;
    border-color: rgba(202, 138, 4, 0.45) !important;
}

/* Read / unread / delete: real <i.tp-msg-row-action-icon> from tp-bp-message-list-icons.js */
#youzify #message-threads td.thread-options a .tp-msg-row-action-icon,
body .youzify #message-threads td.thread-options a .tp-msg-row-action-icon,
#message-threads.messages-notices td.thread-options a .tp-msg-row-action-icon {
    font-size: 15px !important;
    line-height: 1 !important;
    display: block !important;
    margin: 0 !important;
    pointer-events: none !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    color: inherit !important;
}

#youzify #message-threads td.thread-options a.delete:hover,
body .youzify #message-threads td.thread-options a.delete:hover,
#message-threads.messages-notices td.thread-options a.delete:hover {
    background: rgba(249, 37, 82, 0.12) !important;
    border-color: rgba(249, 37, 82, 0.35) !important;
    color: var(--danger, #f92552) !important;
}

#youzify #message-threads td.thread-options a.read:hover,
body .youzify #message-threads td.thread-options a.read:hover,
#message-threads.messages-notices td.thread-options a.read:hover,
#youzify #message-threads td.thread-options a.unread:hover,
body .youzify #message-threads td.thread-options a.unread:hover,
#message-threads.messages-notices td.thread-options a.unread:hover {
    background: rgba(124, 58, 237, 0.16) !important;
    border-color: rgba(124, 58, 237, 0.35) !important;
    color: #6d28d9 !important;
}

/* ── Sent messages: compact cards, no read/unread, delete top-right (accent + FA) ── */
body.tp-bp-messages-sentbox #youzify #message-threads tbody tr,
body.tp-bp-messages-sentbox .youzify #message-threads tbody tr {
    position: relative !important;
    padding: 10px 12px 10px 12px !important;
    padding-right: 88px !important;
    gap: 10px !important;
    align-items: flex-start !important;
}

body.tp-bp-messages-sentbox #youzify #message-threads td.thread-options a.unread,
body.tp-bp-messages-sentbox .youzify #message-threads td.thread-options a.unread,
body.tp-bp-messages-sentbox #youzify #message-threads td.thread-options a.read,
body.tp-bp-messages-sentbox .youzify #message-threads td.thread-options a.read {
    display: none !important;
}

/* Star + delete: fixed top-right cluster (delete outermost) */
body.tp-bp-messages-sentbox #youzify #message-threads td.thread-star,
body.tp-bp-messages-sentbox .youzify #message-threads td.thread-star {
    position: absolute !important;
    top: 8px !important;
    right: 48px !important;
    margin: 0 !important;
    flex: none !important;
    width: auto !important;
    z-index: 4 !important;
}

body.tp-bp-messages-sentbox #youzify #message-threads td.thread-options,
body.tp-bp-messages-sentbox .youzify #message-threads td.thread-options {
    position: absolute !important;
    top: 8px !important;
    right: 10px !important;
    left: auto !important;
    margin: 0 !important;
    width: auto !important;
    flex: none !important;
    z-index: 5 !important;
    gap: 0 !important;
}

/* Bulk bar: hide read/unread in Nice Select clone */
body.tp-bp-messages-sentbox .messages-options-nav .nice-select .list .option[data-value='read'],
body.tp-bp-messages-sentbox .messages-options-nav .nice-select .list .option[data-value='unread'] {
    display: none !important;
}

/* ── Inbox list — dark mode ── */
body.dark-mode #youzify #message-threads tbody tr,
html[data-theme='dark'] #youzify #message-threads tbody tr {
    background: var(--ol-card-bg-color, #20232b) !important;
    border-color: var(--ol-border-color, #353946) !important;
}

body.dark-mode #youzify #message-threads tbody tr:hover,
html[data-theme='dark'] #youzify #message-threads tbody tr:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
}

body.dark-mode #youzify #message-threads tbody tr.unread,
html[data-theme='dark'] #youzify #message-threads tbody tr.unread,
body.dark-mode #message-threads.messages-notices tbody tr.unread,
html[data-theme='dark'] #message-threads.messages-notices tbody tr.unread {
    border-left-color: #a78bfa !important;
    background: linear-gradient(
        90deg,
        rgba(167, 139, 250, 0.18) 0%,
        rgba(167, 139, 250, 0.06) 45%,
        var(--ol-card-bg-color, #20232b) 72%
    ) !important;
    box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.22) !important;
}

body.dark-mode #youzify #message-threads tbody tr.unread td.thread-info::before,
html[data-theme='dark'] #youzify #message-threads tbody tr.unread td.thread-info::before,
body.dark-mode body .youzify #message-threads tbody tr.unread td.thread-info::before,
html[data-theme='dark'] body .youzify #message-threads tbody tr.unread td.thread-info::before,
body.dark-mode #message-threads.messages-notices tbody tr.unread td.thread-info::before,
html[data-theme='dark'] #message-threads.messages-notices tbody tr.unread td.thread-info::before {
    background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
    color: #fafafa !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
}

body.dark-mode #youzify #message-threads tbody tr.unread td.thread-info > p:first-child a,
html[data-theme='dark'] #youzify #message-threads tbody tr.unread td.thread-info > p:first-child a,
body.dark-mode body .youzify #message-threads tbody tr.unread td.thread-info > p:first-child a,
html[data-theme='dark'] body .youzify #message-threads tbody tr.unread td.thread-info > p:first-child a,
body.dark-mode #message-threads.messages-notices tbody tr.unread td.thread-info > p:first-child a,
html[data-theme='dark'] #message-threads.messages-notices tbody tr.unread td.thread-info > p:first-child a {
    color: #f3e8ff !important;
}

body.dark-mode #youzify #message-threads tbody tr.unread td.thread-info .thread-excerpt,
html[data-theme='dark'] #youzify #message-threads tbody tr.unread td.thread-info .thread-excerpt,
body.dark-mode body .youzify #message-threads tbody tr.unread td.thread-info .thread-excerpt,
html[data-theme='dark'] body .youzify #message-threads tbody tr.unread td.thread-info .thread-excerpt,
body.dark-mode #message-threads.messages-notices tbody tr.unread td.thread-info .thread-excerpt,
html[data-theme='dark'] #message-threads.messages-notices tbody tr.unread td.thread-info .thread-excerpt {
    color: #e4e4e7 !important;
}

body.dark-mode #youzify #message-threads td.thread-from a,
html[data-theme='dark'] #youzify #message-threads td.thread-from a {
    color: #e4e4e7 !important;
}

body.dark-mode #youzify #message-threads td.thread-sender .to,
body.dark-mode #youzify #message-threads td.thread-sender .to a,
html[data-theme='dark'] #youzify #message-threads td.thread-sender .to,
html[data-theme='dark'] #youzify #message-threads td.thread-sender .to a {
    color: #e4e4e7 !important;
}

body.dark-mode #youzify #message-threads td.thread-sender .tp-sentbox-recipient-link,
html[data-theme='dark'] #youzify #message-threads td.thread-sender .tp-sentbox-recipient-link,
body.dark-mode .youzify #message-threads td.thread-sender .tp-sentbox-recipient-link,
html[data-theme='dark'] .youzify #message-threads td.thread-sender .tp-sentbox-recipient-link {
    background: rgba(167, 139, 250, 0.15) !important;
    border-color: rgba(167, 139, 250, 0.45) !important;
    color: #e4e4e7 !important;
}
body.dark-mode #youzify #message-threads td.thread-sender .tp-sentbox-recipient-link:hover,
html[data-theme='dark'] #youzify #message-threads td.thread-sender .tp-sentbox-recipient-link:hover,
body.dark-mode .youzify #message-threads td.thread-sender .tp-sentbox-recipient-link:hover,
html[data-theme='dark'] .youzify #message-threads td.thread-sender .tp-sentbox-recipient-link:hover {
    background: rgba(167, 139, 250, 0.25) !important;
    border-color: rgba(167, 139, 250, 0.6) !important;
    color: #f3f0ff !important;
}
body.dark-mode #youzify #message-threads td.thread-sender .tp-sentbox-recipient-name,
html[data-theme='dark'] #youzify #message-threads td.thread-sender .tp-sentbox-recipient-name,
body.dark-mode .youzify #message-threads td.thread-sender .tp-sentbox-recipient-name,
html[data-theme='dark'] .youzify #message-threads td.thread-sender .tp-sentbox-recipient-name {
    color: #f0ecff !important;
}

body.dark-mode #youzify #message-threads td.thread-sender .tp-sentbox-to-label,
html[data-theme='dark'] #youzify #message-threads td.thread-sender .tp-sentbox-to-label {
    color: var(--body-font-color, #949cb5) !important;
}

body.dark-mode #youzify #message-threads td.thread-sender .activity,
html[data-theme='dark'] #youzify #message-threads td.thread-sender .activity {
    color: var(--body-font-color, #949cb5) !important;
}

body.dark-mode #youzify #message-threads td.thread-info > p:first-child::before,
html[data-theme='dark'] #youzify #message-threads td.thread-info > p:first-child::before,
body.dark-mode body .youzify #message-threads td.thread-info > p:first-child::before,
html[data-theme='dark'] body .youzify #message-threads td.thread-info > p:first-child::before,
body.dark-mode #message-threads.messages-notices td.thread-info > p:first-child::before,
html[data-theme='dark'] #message-threads.messages-notices td.thread-info > p:first-child::before {
    color: var(--body-font-color, #949cb5) !important;
    opacity: 0.85 !important;
}

body.dark-mode #youzify #message-threads td.thread-info > p:first-child a,
html[data-theme='dark'] #youzify #message-threads td.thread-info > p:first-child a,
body.dark-mode body .youzify #message-threads td.thread-info > p:first-child a,
html[data-theme='dark'] body .youzify #message-threads td.thread-info > p:first-child a,
body.dark-mode #message-threads.messages-notices td.thread-info > p:first-child a,
html[data-theme='dark'] #message-threads.messages-notices td.thread-info > p:first-child a {
    color: #e4e4e7 !important;
}

body.dark-mode #youzify #message-threads td.thread-info > p:first-child a:hover,
html[data-theme='dark'] #youzify #message-threads td.thread-info > p:first-child a:hover,
body.dark-mode body .youzify #message-threads td.thread-info > p:first-child a:hover,
html[data-theme='dark'] body .youzify #message-threads td.thread-info > p:first-child a:hover,
body.dark-mode #message-threads.messages-notices td.thread-info > p:first-child a:hover,
html[data-theme='dark'] #message-threads.messages-notices td.thread-info > p:first-child a:hover {
    color: #ddd6fe !important;
}

body.dark-mode #youzify #message-threads td.thread-info .thread-subject,
html[data-theme='dark'] #youzify #message-threads td.thread-info .thread-subject,
body.dark-mode body .youzify #message-threads td.thread-info .thread-subject,
html[data-theme='dark'] body .youzify #message-threads td.thread-info .thread-subject,
body.dark-mode #message-threads.messages-notices td.thread-info .thread-subject,
html[data-theme='dark'] #message-threads.messages-notices td.thread-info .thread-subject {
    color: #e4e4e7 !important;
}

body.dark-mode #youzify #message-threads td.thread-info .thread-excerpt,
html[data-theme='dark'] #youzify #message-threads td.thread-info .thread-excerpt,
body.dark-mode body .youzify #message-threads td.thread-info .thread-excerpt,
html[data-theme='dark'] body .youzify #message-threads td.thread-info .thread-excerpt,
body.dark-mode #message-threads.messages-notices td.thread-info .thread-excerpt,
html[data-theme='dark'] #message-threads.messages-notices td.thread-info .thread-excerpt {
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--body-font-color, #949cb5) !important;
}

body.dark-mode #youzify #message-threads td.thread-date,
html[data-theme='dark'] #youzify #message-threads td.thread-date {
    color: var(--body-font-color, #949cb5) !important;
}

body.dark-mode #youzify #message-threads td.thread-star a,
html[data-theme='dark'] #youzify #message-threads td.thread-star a,
body.dark-mode #youzify #message-threads td.thread-options a,
html[data-theme='dark'] #youzify #message-threads td.thread-options a {
    background: rgba(167, 139, 250, 0.14) !important;
    border-color: rgba(167, 139, 250, 0.32) !important;
    color: #c4b5fd !important;
}

body.dark-mode #youzify #message-threads td.thread-star a .tp-msg-star-icon.tp-msg-star-filled,
html[data-theme='dark'] #youzify #message-threads td.thread-star a .tp-msg-star-icon.tp-msg-star-filled {
    color: #facc15 !important;
}

body.dark-mode #youzify #message-threads td.thread-star a.message-action-star:hover,
html[data-theme='dark'] #youzify #message-threads td.thread-star a.message-action-star:hover {
    background: rgba(250, 204, 21, 0.12) !important;
    border-color: rgba(250, 204, 21, 0.35) !important;
    color: #facc15 !important;
}

body.dark-mode #youzify #message-threads td.thread-star a.message-action-unstar:hover,
html[data-theme='dark'] #youzify #message-threads td.thread-star a.message-action-unstar:hover,
body.dark-mode #youzify #message-threads td.thread-star a[data-star-status='unstar']:hover,
html[data-theme='dark'] #youzify #message-threads td.thread-star a[data-star-status='unstar']:hover {
    background: rgba(250, 204, 21, 0.16) !important;
    border-color: rgba(250, 204, 21, 0.4) !important;
}

body.dark-mode #youzify #message-threads td.thread-options a.delete:hover,
html[data-theme='dark'] #youzify #message-threads td.thread-options a.delete:hover {
    background: rgba(249, 37, 82, 0.18) !important;
    border-color: rgba(248, 113, 113, 0.45) !important;
    color: #f87171 !important;
}

body.dark-mode #youzify #message-threads td.thread-options a.read:hover,
html[data-theme='dark'] #youzify #message-threads td.thread-options a.read:hover,
body.dark-mode #youzify #message-threads td.thread-options a.unread:hover,
html[data-theme='dark'] #youzify #message-threads td.thread-options a.unread:hover {
    background: rgba(167, 139, 250, 0.22) !important;
    border-color: rgba(196, 181, 253, 0.45) !important;
    color: #e9d5ff !important;
}

body.dark-mode #youzify #message-threads td.thread-checkbox .youzify_field_indication,
body.dark-mode #youzify #message-threads td.bulk-select-check .youzify_field_indication,
html[data-theme='dark'] #youzify #message-threads td.thread-checkbox .youzify_field_indication,
html[data-theme='dark'] #youzify #message-threads td.bulk-select-check .youzify_field_indication {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* ── Inbox list — responsive ── */
@media (max-width: 600px) {
    #youzify #message-threads tbody tr,
    body .youzify #message-threads tbody tr {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 12px !important;
    }

    #youzify #message-threads td.thread-info,
    body .youzify #message-threads td.thread-info {
        flex-basis: 100% !important;
        order: 2 !important;
    }

    #youzify #message-threads td.thread-date,
    body .youzify #message-threads td.thread-date {
        order: 3 !important;
    }

    #youzify #message-threads td.thread-options,
    body .youzify #message-threads td.thread-options {
        order: 4 !important;
        margin-left: auto !important;
    }

    /* Sent box: let recipient row use full width when the row wraps */
    body.tp-bp-messages-sentbox #youzify #message-threads td.thread-sender,
    body.tp-bp-messages-sentbox .youzify #message-threads td.thread-sender {
        flex-basis: 100% !important;
    }

    body.tp-bp-messages-sentbox #youzify #message-threads tbody tr,
    body.tp-bp-messages-sentbox .youzify #message-threads tbody tr {
        padding-right: 84px !important;
    }

    body.tp-bp-messages-sentbox #youzify #message-threads td.thread-star,
    body.tp-bp-messages-sentbox .youzify #message-threads td.thread-star {
        top: 6px !important;
        right: 46px !important;
    }

    body.tp-bp-messages-sentbox #youzify #message-threads td.thread-options,
    body.tp-bp-messages-sentbox .youzify #message-threads td.thread-options {
        top: 6px !important;
        right: 8px !important;
        margin-left: 0 !important;
        order: unset !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   Profile Visitors page (Youzify BPV plugin) – modern restyle
   ═══════════════════════════════════════════════════════════ */

/* Hide the "Recent Visitors" sub-tab (removed server-side, CSS fallback) */
#subnav li#visitors-visitors-personal-li {
  display: none !important;
}
.youzify-mobile-nav-item a[href*="/visitors/visitors/"] {
  display: none !important;
}
.youzify-mobile-nav-item:has(a[href*="/visitors/visitors/"]) {
  display: none !important;
}

/* ── Visitors pagination — match notifications pill style ── */
.yzbpv-profile-viewers .youzify-pagination {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin: 20px auto 0 !important;
  padding: 14px 18px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
  background: var(--ol-card-bg-color, #fff) !important;
  border: 1px solid var(--ol-border-color, #e6ecf5) !important;
}

.yzbpv-profile-viewers .youzify-pagination .youzify-pagination-pages {
  display: none !important;
}

.yzbpv-profile-viewers .youzify-pagination .youzify-nav-links,
.yzbpv-profile-viewers .youzify-pagination .comments-nav-links {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.yzbpv-profile-viewers .youzify-pagination .page-numbers {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  border: 1px solid var(--ol-border-color, #e6ecf5) !important;
  background: var(--ol-input-bg-color, #f2f4f8) !important;
  color: var(--ol-body-font-color, #4b5563) !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease !important;
}

.yzbpv-profile-viewers .youzify-pagination a.page-numbers:hover {
  background: rgba(124, 58, 237, 0.1) !important;
  border-color: rgba(124, 58, 237, 0.35) !important;
  color: #6d28d9 !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

.yzbpv-profile-viewers .youzify-pagination span.page-numbers.current {
  background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.35) !important;
  cursor: default !important;
  transform: none !important;
}

.yzbpv-profile-viewers .youzify-pagination .page-numbers.dots {
  min-width: auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 4px !important;
  border: none !important;
  background: transparent !important;
  color: var(--ol-body-font-color, #9ca3af) !important;
  font-weight: 500 !important;
  align-self: center !important;
  display: inline-flex !important;
}

.yzbpv-profile-viewers .youzify-pagination a.page-numbers.prev,
.yzbpv-profile-viewers .youzify-pagination a.page-numbers.next {
  min-width: 40px !important;
  width: 40px !important;
  max-width: 40px !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* Hide inner span wrappers so only the number/symbol shows */
.yzbpv-profile-viewers .youzify-pagination .youzify-page-nbr,
.yzbpv-profile-viewers .youzify-pagination .youzify-next-nbr,
.yzbpv-profile-viewers .youzify-pagination .youzify-page-symbole {
  display: contents !important;
}

/* Next/prev: only show the symbol, hide the redundant page number */
.yzbpv-profile-viewers .youzify-pagination a.next .youzify-next-nbr,
.yzbpv-profile-viewers .youzify-pagination a.prev .youzify-prev-nbr {
  display: none !important;
}

/* Dark mode */
body.dark-mode .yzbpv-profile-viewers .youzify-pagination {
  background: var(--ol-card-bg-color, #20232b) !important;
  border-color: var(--ol-border-color, #353946) !important;
}

body.dark-mode .yzbpv-profile-viewers .youzify-pagination .page-numbers {
  background: var(--ol-input-bg-color, #2f323d) !important;
  border-color: var(--ol-border-color, #353946) !important;
  color: var(--ol-input-text-color, #d1d5db) !important;
}

body.dark-mode .yzbpv-profile-viewers .youzify-pagination a.page-numbers:hover {
  background: rgba(167, 139, 250, 0.15) !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
  color: #c4b5fd !important;
}

body.dark-mode .yzbpv-profile-viewers .youzify-pagination span.page-numbers.current {
  background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
  border-color: transparent !important;
  color: #fff !important;
}

body.dark-mode .yzbpv-profile-viewers .youzify-pagination .page-numbers.dots {
  background: transparent !important;
  border: none !important;
  color: var(--ol-input-text-color, #6b7280) !important;
}

/* Visitors history list: layout matches Friends (#friend-list rules above).
   Below = visitors-only accents + pagination. Plugin inline <style> is overridden via body.bp-user + .yzbpv-profile-viewers. */

/* Desktop only: pull name + meta closer to avatar (do not apply on mobile — breaks wrap + buttons). */
@media screen and (min-width: 769px) {
    body.bp-user .yzbpv-profile-viewers #youzify-members-list > li .youzify-user-data {
        gap: 0 !important;
        justify-content: flex-start !important;
    }
    body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-item-avatar {
        margin-right: 8px !important;
    }
    body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-data .youzify-user-actions {
        padding-left: 14px !important;
    }
}

/* Top-align row (avoid centering .item vs tall buttons); stack title above meta, flush left.
   Members directory uses #youzify-members-list { text-align: center } — override for visitors only. */
body.bp-user .yzbpv-profile-viewers #youzify-members-list > li .youzify-user-data {
    align-items: flex-start !important;
    text-align: left !important;
}
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-data .youzify-user-actions {
    align-self: flex-start !important;
}
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-data .item {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
}
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-data .item-title {
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
}
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-data .item-title a {
    vertical-align: baseline !important;
    text-align: left !important;
}
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-data .item-meta {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
}

body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-data .item-meta span.yzbpv-visited-tab {
    flex-shrink: 0 !important;
    background: rgba(124, 58, 237, 0.1) !important;
    color: #7c3aed !important;
    padding: 2px 10px !important;
    border-radius: 20px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions a.youzify-send-message {
    background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
    color: #fff !important;
    border-color: transparent !important;
}
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions a.youzify-send-message:hover {
    background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important;
    transform: translateY(-1px) !important;
}
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button.not_friends a,
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button a.add {
    background: rgba(124, 58, 237, 0.12) !important;
    color: #6d28d9 !important;
    border: 1px solid rgba(124, 58, 237, 0.35) !important;
}
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button.not_friends a:hover,
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button a.add:hover {
    background: rgba(124, 58, 237, 0.2) !important;
    border-color: rgba(124, 58, 237, 0.55) !important;
    color: #5b21b6 !important;
}
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button.pending a,
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button.waiting a,
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button.pending_friend a {
    background: rgba(245, 158, 11, 0.14) !important;
    color: #b45309 !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
}
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button.is_friend a,
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button a.remove {
    background: rgba(0, 0, 0, 0.06) !important;
    color: #555 !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
}
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button.is_friend a:hover,
body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button a.remove:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    color: #dc2626 !important;
}

body.dark-mode .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button.not_friends a,
body.dark-mode .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button a.add,
html[data-theme="dark"] .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button.not_friends a,
html[data-theme="dark"] .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button a.add {
    background: rgba(167, 139, 250, 0.15) !important;
    color: #e9d5ff !important;
    border-color: rgba(167, 139, 250, 0.45) !important;
}
body.dark-mode .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button.not_friends a:hover,
body.dark-mode .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button a.add:hover,
html[data-theme="dark"] .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button.not_friends a:hover,
html[data-theme="dark"] .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button a.add:hover {
    background: rgba(167, 139, 250, 0.25) !important;
    border-color: rgba(196, 181, 253, 0.55) !important;
    color: #fff !important;
}
body.dark-mode .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button.is_friend a,
body.dark-mode .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button a.remove,
html[data-theme="dark"] .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button.is_friend a,
html[data-theme="dark"] .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button a.remove {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ccc !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}
body.dark-mode .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button.is_friend a:hover,
body.dark-mode .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button a.remove:hover,
html[data-theme="dark"] .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button.is_friend a:hover,
html[data-theme="dark"] .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button a.remove:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    color: #fca5a5 !important;
}

body.dark-mode .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button.pending a,
body.dark-mode .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button.waiting a,
body.dark-mode .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button.pending_friend a,
html[data-theme="dark"] .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button.pending a,
html[data-theme="dark"] .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button.waiting a,
html[data-theme="dark"] .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button.pending_friend a {
    background: rgba(245, 158, 11, 0.18) !important;
    color: #fcd34d !important;
    border-color: rgba(251, 191, 36, 0.35) !important;
}

body.dark-mode.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-data .item-title a,
body.dark-mode .yzbpv-profile-viewers #youzify-members-list .youzify-user-data .item-title a,
html[data-theme="dark"] .yzbpv-profile-viewers #youzify-members-list .youzify-user-data .item-title a {
    color: #e4e6eb !important;
}
body.dark-mode.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-data .item-title a:hover,
body.dark-mode .yzbpv-profile-viewers #youzify-members-list .youzify-user-data .item-title a:hover,
html[data-theme="dark"] .yzbpv-profile-viewers #youzify-members-list .youzify-user-data .item-title a:hover {
    color: #a78bfa !important;
}
body.dark-mode.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-data .item-meta span:not(.yzbpv-visited-tab),
html[data-theme="dark"] .yzbpv-profile-viewers #youzify-members-list .youzify-user-data .item-meta span:not(.yzbpv-visited-tab) {
    color: #9ca3af !important;
}

body.dark-mode .yzbpv-profile-viewers #youzify-members-list .youzify-user-data .item-meta span.yzbpv-visited-tab,
html[data-theme="dark"] .yzbpv-profile-viewers #youzify-members-list .youzify-user-data .item-meta span.yzbpv-visited-tab {
    background: rgba(167, 139, 250, 0.15) !important;
    color: #a78bfa !important;
}

/* "No visitors" notice */
.yzbpv-no-visitors-found {
    border-radius: 12px !important;
    padding: 24px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-align: center !important;
    background: var(--ol-card-bg-color, #fff) !important;
    color: var(--body-font-color, #888da8) !important;
    border: 1px solid var(--ol-border-color, #e6ecf5) !important;
}

/* Premium types banner (plugin CTA) */
.yzbpv-list-premium-types {
    margin-bottom: 10px !important;
}

body.dark-mode .yzbpv-no-visitors-found,
html[data-theme="dark"] .yzbpv-no-visitors-found {
    background: var(--ol-card-bg-color, #20232b) !important;
    border-color: var(--ol-border-color, #353946) !important;
    color: #9ca3af !important;
}

/* ── Visitors list: mobile / tablet (matches theme 768px breakpoint) ── */
@media screen and (max-width: 768px) {
    body.bp-user .yzbpv-profile-viewers #youzify-members-list > li .youzify-user-data {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 14px !important;
    }

    body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-item-avatar {
        margin-right: 10px !important;
        flex-shrink: 0 !important;
    }

    body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-data .item {
        flex: 1 1 0% !important;
        min-width: 0 !important;
    }

    /* Equal-width buttons; overrides friend-list flex row + global .youzify-user-actions */
    body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-data .youzify-user-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        margin-left: 0 !important;
        margin-top: 6px !important;
        padding-left: 0 !important;
        justify-content: stretch !important;
        align-items: stretch !important;
    }

    body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .generic-button,
    body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button,
    body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .message-button {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        margin: 0 !important;
    }

    body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .generic-button a,
    body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .friendship-button a,
    body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions .message-button a,
    body.bp-user .yzbpv-profile-viewers #youzify-members-list .youzify-user-actions a.youzify-send-message {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        box-sizing: border-box !important;
    }
}

/* Media image click — cursor handled in main media tab block */
.youzify-media-item .youzify-media-item-img img {
    cursor: pointer !important;
}

/* Full-screen media lightbox */
.tp-youzify-media-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    pointer-events: none;
}
.tp-youzify-media-lightbox.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
.tp-youzify-media-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
}
.tp-youzify-media-lightbox-inner {
    position: relative;
    z-index: 1;
    max-width: min(96vw, 1600px);
    max-height: 92vh;
    margin: 0;
    animation: tp-lb-img-in 0.3s ease both;
}
@keyframes tp-lb-img-in {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
.tp-youzify-media-lightbox-inner img {
    display: block;
    max-width: min(96vw, 1600px);
    max-height: 92vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.6);
}
.tp-youzify-media-lightbox-prev,
.tp-youzify-media-lightbox-next {
    position: fixed;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.15s ease;
}
.tp-youzify-media-lightbox-prev {
    left: 16px;
}
.tp-youzify-media-lightbox-next {
    right: 16px;
}
.tp-youzify-media-lightbox-prev:hover,
.tp-youzify-media-lightbox-next:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: translateY(-50%) scale(1.06);
}
.tp-youzify-media-lightbox-close {
    position: fixed;
    top: 16px;
    right: 20px;
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.15s ease;
}
.tp-youzify-media-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.1);
}
@media (max-width: 480px) {
    .tp-youzify-media-lightbox {
        padding: 12px;
    }
    .tp-youzify-media-lightbox-inner img {
        border-radius: 8px;
    }
    .tp-youzify-media-lightbox-prev,
    .tp-youzify-media-lightbox-next {
        width: 42px;
        height: 42px;
        font-size: 24px;
    }
    .tp-youzify-media-lightbox-prev {
        left: 8px;
    }
    .tp-youzify-media-lightbox-next {
        right: 8px;
    }
    .tp-youzify-media-lightbox-close {
        top: 10px;
        right: 12px;
        width: 36px;
        height: 36px;
        font-size: 20px;
    }
}

/* Audio/File post types are now visible in the wall composer (all options shown inline) */

/* ═══════════════════════════════════════════════════════════
   Hide Audios and Files sections on Media page
   ═══════════════════════════════════════════════════════════ */
.youzify-media-group-audios,
.youzify-media-group-files {
    display: none !important;
}

/* Hide Audios/Files tabs in media subnav (desktop) */
#subnav li[id*="media-audios"],
#subnav li[id*="media-files"] {
    display: none !important;
}

/* Hide Audios/Files tabs in media subnav (mobile inline nav) */
.youzify-mobile-nav-item a[href*="/media/audios"],
.youzify-mobile-nav-item a[href*="/media/files"] {
    display: none !important;
}
.youzify-mobile-nav-item:has(a[href*="/media/audios"]),
.youzify-mobile-nav-item:has(a[href*="/media/files"]) {
    display: none !important;
}

/* Hide Audios/Files filter tabs in sidebar media widget */
.youzify-media-filter .youzify-filter-item:has([data-type="audios"]),
.youzify-media-filter .youzify-filter-item:has([data-type="files"]) {
    display: none !important;
}

/* ═══════════════ LIVE TOAST NOTIFICATIONS ═══════════════ */
#tp-toast-container {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 80px;
    pointer-events: none;
    width: 100%;
    max-width: 460px;
    box-sizing: border-box;
}

.tp-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 14px;
    background: var(--ol-card-bg-color, #fff);
    border: 1px solid var(--ol-border-color, #e6ecf5);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(124, 58, 237, 0.08);
    text-decoration: none !important;
    color: var(--ol-body-font-color, #374151) !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    width: calc(100% - 32px);
    box-sizing: border-box;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-20px) scale(0.96);
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.2s ease;
    will-change: transform, opacity;
}

.tp-toast:hover {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(124, 58, 237, 0.14);
    text-decoration: none !important;
    color: var(--ol-body-font-color, #374151) !important;
}

.tp-toast.tp-toast-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.tp-toast.tp-toast-out {
    animation: tp-toast-exit 0.3s ease forwards;
}

@keyframes tp-toast-exit {
    to {
        opacity: 0;
        transform: translateY(-16px) scale(0.94);
    }
}

.tp-toast-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
    font-size: 15px;
}

.tp-toast-msg {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-toast-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tp-toast-title {
    display: block;
    color: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
}

.tp-toast-text .tp-toast-msg,
.tp-toast-announcement .tp-toast-msg {
    display: block;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.tp-toast-announcement {
    border-color: rgba(124, 58, 237, 0.55);
    box-shadow:
        0 0 0 1px rgba(167, 139, 250, 0.18),
        0 10px 38px rgba(124, 58, 237, 0.18),
        0 8px 32px rgba(0, 0, 0, 0.12);
    background:
        linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(167, 139, 250, 0.05)),
        var(--ol-card-bg-color, #fff);
}

.tp-toast-announcement .tp-toast-icon {
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
}

.tp-toast-announcement .tp-toast-title {
    color: #7c3aed;
}

.tp-toast-announcement:hover {
    box-shadow:
        0 0 0 1px rgba(167, 139, 250, 0.28),
        0 12px 44px rgba(124, 58, 237, 0.24),
        0 10px 40px rgba(0, 0, 0, 0.16);
}

.tp-toast-close {
    flex: 0 0 auto;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    color: var(--ol-body-font-color, #9ca3af);
    font-size: 20px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s, color 0.15s;
}

.tp-toast-close:hover {
    opacity: 1;
    color: #7c3aed;
}

/* Progress bar at bottom of toast */
.tp-toast-visible::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 14px;
    right: 14px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #7c3aed, #a78bfa);
    animation: tp-toast-timer var(--tp-toast-duration, 5s) linear forwards;
    opacity: 0.5;
}

@keyframes tp-toast-timer {
    from { transform: scaleX(1); transform-origin: left; }
    to   { transform: scaleX(0); transform-origin: left; }
}

/* Dark mode */
body.dark-mode .tp-toast,
html[data-theme='dark'] .tp-toast {
    background: var(--ol-card-bg-color, #20232b);
    border-color: var(--ol-border-color, #353946);
    color: var(--ol-body-font-color, #e5e7eb) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(124, 58, 237, 0.15);
}

body.dark-mode .tp-toast:hover,
html[data-theme='dark'] .tp-toast:hover {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(167, 139, 250, 0.2);
    color: var(--ol-body-font-color, #e5e7eb) !important;
}

body.dark-mode .tp-toast-announcement,
html[data-theme='dark'] .tp-toast-announcement {
    border-color: rgba(167, 139, 250, 0.5);
    background:
        linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(167, 139, 250, 0.08)),
        var(--ol-card-bg-color, #20232b);
    box-shadow:
        0 0 0 1px rgba(167, 139, 250, 0.18),
        0 10px 38px rgba(124, 58, 237, 0.22),
        0 8px 32px rgba(0, 0, 0, 0.35);
}

body.dark-mode .tp-toast-announcement .tp-toast-title,
html[data-theme='dark'] .tp-toast-announcement .tp-toast-title {
    color: #c4b5fd;
}

body.dark-mode .tp-toast-close,
html[data-theme='dark'] .tp-toast-close {
    color: #9ca3af;
}

body.dark-mode .tp-toast-close:hover,
html[data-theme='dark'] .tp-toast-close:hover {
    color: #c4b5fd;
}

/* Mobile: slightly narrower, smaller padding */
@media screen and (max-width: 600px) {
    #tp-toast-container {
        padding-top: 70px;
        max-width: 100%;
    }
    .tp-toast {
        padding: 12px 14px;
        gap: 10px;
        font-size: 13px;
        border-radius: 12px;
        width: calc(100% - 24px);
    }
    .tp-toast-icon {
        width: 32px;
        height: 32px;
        font-size: 13px;
        border-radius: 8px;
    }
}

/* ═══════════════ ACTIVITY PAGE — CENTERED LAYOUT ═══════════════ */

/* body.tp-activity-directory is added by PHP on the sitewide
   /activity/ page so we can safely scope styles here without
   affecting profile activity tabs, group pages, etc.              */

body.tp-activity-directory .youzify-left-sidebar-layout {
  display: block !important;
}
body.tp-activity-directory .youzify-left-sidebar-layout > .youzify-sidebar-column.youzify-left-sidebar {
  display: none !important;
}
/* Left-aligned like the member profile activity column (was centered max-width 680px). */
body.tp-activity-directory .youzify-left-sidebar-layout > .youzify-main-column,
body.tp-activity-directory .youzify-right-sidebar-layout > .youzify-main-column.grid-column:first-of-type {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  margin-right: auto !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}
@media (max-width: 768px) {
  body.tp-activity-directory .youzify-left-sidebar-layout > .youzify-main-column,
  body.tp-activity-directory .youzify-right-sidebar-layout > .youzify-main-column.grid-column:first-of-type {
    padding: 0 10px !important;
  }
}

/* Profile navbar injected above the directory stream (functions.php). */
body.tp-activity-directory .tp-profile-nav-on-directory {
  margin: 0 0 18px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Directory only: no outer “card” — quick buttons + tabs sit on the page background */
body.tp-activity-directory #youzify-profile-navmenu.tp-profile-nav-on-directory,
body.tp-activity-directory nav#youzify-profile-navmenu.tp-profile-nav-on-directory {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}
body.tp-activity-directory #youzify-profile-navmenu.tp-profile-nav-on-directory .youzify-inner-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
/* Don’t let the tab list grow to full width — keeps the whole toolbar centered as one group */
body.tp-activity-directory #youzify-profile-navmenu.tp-profile-nav-on-directory ul.youzify-profile-navmenu {
  flex: 0 1 auto !important;
  justify-content: center !important;
}
@media screen and (min-width: 769px) {
  body.tp-activity-directory #youzify-profile-navmenu.tp-profile-nav-on-directory {
    margin-top: 0 !important;
  }
  body.tp-activity-directory #youzify-profile-navmenu.tp-profile-nav-on-directory .youzify-inner-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media screen and (max-width: 768px) {
  body.tp-activity-directory #youzify-profile-navmenu.tp-profile-nav-on-directory .youzify-inner-content {
    padding: 6px 0 !important;
    justify-content: center !important;
  }
}
body.dark-mode.tp-activity-directory #youzify-profile-navmenu.tp-profile-nav-on-directory,
html[data-theme='dark'] body.tp-activity-directory #youzify-profile-navmenu.tp-profile-nav-on-directory {
  background: transparent !important;
}
body.dark-mode.tp-activity-directory #youzify-profile-navmenu.tp-profile-nav-on-directory .youzify-inner-content,
html[data-theme='dark'] body.tp-activity-directory #youzify-profile-navmenu.tp-profile-nav-on-directory .youzify-inner-content {
  background: transparent !important;
}

/* ── "Community Feed" header banner ── */
.tp-community-feed-header {
  text-align: center;
  padding: 36px 20px 28px;
  margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(167, 139, 250, 0.06) 100%);
  border-radius: 16px;
  border: 1px solid rgba(124, 58, 237, 0.12);
}
.tp-community-feed-title {
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  color: var(--body-font-color, #515365);
  margin: 0 0 4px !important;
  line-height: 1.2 !important;
}
.tp-community-feed-subtitle {
  font-size: 15px;
  font-weight: 400;
  color: var(--body-font-color, #888da8);
  opacity: 0.7;
  margin: 0 !important;
}
body.dark-mode .tp-community-feed-header,
html[data-theme='dark'] .tp-community-feed-header {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.14) 0%, rgba(167, 139, 250, 0.08) 100%);
  border-color: rgba(167, 139, 250, 0.18);
}
body.dark-mode .tp-community-feed-title,
html[data-theme='dark'] .tp-community-feed-title {
  color: #e8e6f0;
}
body.dark-mode .tp-community-feed-subtitle,
html[data-theme='dark'] .tp-community-feed-subtitle {
  color: #b0adc0;
}
@media (max-width: 480px) {
  .tp-community-feed-header {
    padding: 24px 16px 20px;
    margin-bottom: 14px;
    border-radius: 12px;
  }
  .tp-community-feed-title {
    font-size: 22px !important;
  }
  .tp-community-feed-subtitle {
    font-size: 13px;
  }
}

/* Community feed: “new posts” pill — refresh stream without full page load */
.tp-feed-new-posts-banner {
  position: fixed;
  bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  z-index: 26000;
  max-width: min(420px, calc(100vw - 24px));
  padding: 12px 22px;
  margin: 0;
  border: none;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 55%, #8b5cf6 100%);
  box-shadow: 0 8px 28px rgba(109, 40, 217, 0.45), 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: transform 0.28s ease, opacity 0.2s ease, box-shadow 0.2s ease;
  opacity: 0;
  pointer-events: none;
}
.tp-feed-new-posts-banner.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.tp-feed-new-posts-banner:hover,
.tp-feed-new-posts-banner:focus-visible {
  box-shadow: 0 10px 32px rgba(109, 40, 217, 0.55), 0 2px 10px rgba(0, 0, 0, 0.15);
  outline: none;
}
.tp-feed-new-posts-banner:disabled {
  opacity: 0.75;
  cursor: wait;
}
body.dark-mode .tp-feed-new-posts-banner,
html[data-theme='dark'] .tp-feed-new-posts-banner {
  background: linear-gradient(135deg, #5b21b6 0%, #6d28d9 50%, #7c3aed 100%);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

/* Scroll-linked header (X-style): fixed to viewport, JS moves via translate3d */
body.tp-scroll-hide-header .sticky-wrap {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 25000 !important;
  will-change: transform;
  transition: none;
}
body.tp-scroll-hide-header.tp-scroll-header-no-wrap #header--standard {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 25000 !important;
  will-change: transform;
  transition: none;
}
/* Desktop: no hide-on-scroll; pin with sticky (script only runs scroll-hide ≤768px). */
@media screen and (min-width: 769px) {
  body.tp-scroll-hide-header .sticky-wrap,
  body.tp-scroll-hide-header.tp-scroll-header-no-wrap #header--standard {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    will-change: auto !important;
    pointer-events: auto !important;
  }
  body.tp-scroll-hide-header #tp-header-spacer {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.tp-scroll-hide-header .sticky-wrap,
  body.tp-scroll-hide-header #header--standard {
    will-change: auto;
  }
}
/* Explore page: header is always pinned/visible (no scroll-hide behavior). */
body.page-explore .sticky-wrap,
body.page-explore #header--standard {
  position: fixed !important;
  top: var(--tp-explore-admin-h) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 25000 !important;
  transform: none !important;
}
body.page-explore #tp-header-spacer {
  display: none !important;
  height: 0 !important;
}

/* Hide the mobile nav bar (Menu / Search / Filter) on the activity page */
body.tp-activity-directory .youzify-mobile-nav,
.tp-community-feed-header ~ .youzify-mobile-nav {
  display: none !important;
}

/* Hide the top navigation/filter bar (All Members / Friends / Mentions / Filter) */
#youzify-wall-nav {
  display: none !important;
}

/* ═══════════════ MODERNIZED ELLIPSIS TOOLS ═══════════════ */

/* Dropdown card container */
.youzify-item-tools.youzify-activity-tools {
  z-index: 100 !important;
  display: none;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 6px 0 !important;
  background: #fff !important;
  background-color: #fff !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06) !important;
  min-width: 160px !important;
  width: auto !important;
}
/* Kill any inherited backgrounds on all children */
.youzify-item-tools.youzify-activity-tools *:not(.youzify-tool-icon) {
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: none !important;
}
.youzify-item-tools.youzify-activity-tools[style*="display: block"],
.youzify-item-tools.youzify-activity-tools[style*="display:block"] {
  display: flex !important;
}

/* Each menu row */
.youzify-item-tools.youzify-activity-tools .youzify-item-tool {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 16px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: background 0.12s ease !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  float: none !important;
  width: 100% !important;
  height: auto !important;
}
/* Make nested <a> wrappers invisible to layout so all rows match.
   Exclude Reply (a.share-activity): display:contents on <a> breaks click/hit-testing in browsers. */
.youzify-item-tools.youzify-activity-tools .youzify-item-tool:not(.tp-activity-repost-tool) a {
  display: contents !important;
}
.youzify-item-tools.youzify-activity-tools .youzify-item-tool:hover {
  background: #f5f5f5 !important;
  background-color: #f5f5f5 !important;
}

/* Labels */
.youzify-item-tools.youzify-activity-tools .youzify-item-tool .youzify-tool-name {
  display: block !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #3f4257 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Hide original FA <i> icons */
.youzify-item-tools.youzify-activity-tools .youzify-item-tool .youzify-tool-icon i {
  display: none !important;
}

/* Icon base — rendered via ::before on the div */
.youzify-item-tools.youzify-activity-tools .youzify-item-tool .youzify-tool-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Pin — blue thumbtack */
.youzify-item-tools.youzify-activity-tools .youzify-pin-tool .youzify-tool-icon {
  color: #3b82f6 !important;
}
.youzify-item-tools.youzify-activity-tools .youzify-pin-tool .youzify-tool-icon::before {
  content: "\f08d" !important;
}

/* Bookmark — theme violet (matches primary actions) */
.youzify-item-tools.youzify-activity-tools .youzify-bookmark-tool:hover {
  background: rgba(124, 58, 237, 0.08) !important;
  background-color: rgba(124, 58, 237, 0.08) !important;
}
.youzify-item-tools.youzify-activity-tools .youzify-bookmark-tool .youzify-tool-icon {
  color: #7c3aed !important;
}
.youzify-item-tools.youzify-activity-tools .youzify-bookmark-tool .youzify-tool-icon::before {
  content: "\f02e" !important;
}

/* Reply — green paper plane */
.youzify-item-tools.youzify-activity-tools .tp-activity-repost-tool .youzify-tool-icon {
  color: #10b981 !important;
}
.youzify-item-tools.youzify-activity-tools .tp-activity-repost-tool .youzify-tool-icon::before {
  content: "\f1d8" !important;
}

/* Delete — red trash can */
.youzify-item-tools.youzify-activity-tools .youzify-delete-tool .youzify-tool-icon {
  color: #ef4444 !important;
}
.youzify-item-tools.youzify-activity-tools .youzify-delete-tool .youzify-tool-icon::before {
  content: "\f2ed" !important;
}

/* ── Dark mode ── */
body.dark-mode .youzify-item-tools.youzify-activity-tools,
html[data-theme='dark'] .youzify-item-tools.youzify-activity-tools {
  background: #1e1f2b !important;
  background-color: #1e1f2b !important;
  border-color: rgba(255,255,255,0.08) !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2) !important;
}
body.dark-mode .youzify-item-tools.youzify-activity-tools .youzify-item-tool .youzify-tool-name,
html[data-theme='dark'] .youzify-item-tools.youzify-activity-tools .youzify-item-tool .youzify-tool-name {
  color: #e4e4e7 !important;
}
body.dark-mode .youzify-item-tools.youzify-activity-tools .youzify-item-tool:hover,
body.dark-mode .youzify-item-tools.youzify-activity-tools .youzify-item-tool a:hover,
html[data-theme='dark'] .youzify-item-tools.youzify-activity-tools .youzify-item-tool:hover,
html[data-theme='dark'] .youzify-item-tools.youzify-activity-tools .youzify-item-tool a:hover {
  background: rgba(255,255,255,0.06) !important;
  background-color: rgba(255,255,255,0.06) !important;
}
body.dark-mode .youzify-item-tools.youzify-activity-tools .youzify-pin-tool .youzify-tool-icon,
html[data-theme='dark'] .youzify-item-tools.youzify-activity-tools .youzify-pin-tool .youzify-tool-icon {
  color: #60a5fa !important;
}
body.dark-mode .youzify-item-tools.youzify-activity-tools .youzify-bookmark-tool:hover,
html[data-theme='dark'] .youzify-item-tools.youzify-activity-tools .youzify-bookmark-tool:hover {
  background: rgba(167, 139, 250, 0.12) !important;
  background-color: rgba(167, 139, 250, 0.12) !important;
}
body.dark-mode .youzify-item-tools.youzify-activity-tools .youzify-bookmark-tool .youzify-tool-icon,
html[data-theme='dark'] .youzify-item-tools.youzify-activity-tools .youzify-bookmark-tool .youzify-tool-icon {
  color: #a78bfa !important;
}
body.dark-mode .youzify-item-tools.youzify-activity-tools .tp-activity-repost-tool .youzify-tool-icon,
html[data-theme='dark'] .youzify-item-tools.youzify-activity-tools .tp-activity-repost-tool .youzify-tool-icon {
  color: #34d399 !important;
}
body.dark-mode .youzify-item-tools.youzify-activity-tools .youzify-delete-tool .youzify-tool-icon,
html[data-theme='dark'] .youzify-item-tools.youzify-activity-tools .youzify-delete-tool .youzify-tool-icon {
  color: #f87171 !important;
}

/* Wall composer: mirror [tp_giphy] tokens as small chips (textarea cannot show GIFs) */
#youzify-wall-form .tp-wall-message-giphy-preview {
  margin: 8px 0 4px 52px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  max-width: 100%;
}
#youzify-wall-form .tp-wall-giphy-preview-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.65;
  margin-bottom: 6px;
}
#youzify-wall-form .tp-wall-giphy-preview-chips {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
#youzify-wall-form .tp-wall-giphy-chip-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
#youzify-wall-form .tp-wall-giphy-chip-thumb {
  line-height: 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}
#youzify-wall-form .tp-wall-giphy-chip-thumb img {
  display: block;
  width: 92px;
  height: 92px;
  object-fit: cover;
  vertical-align: top;
}
#youzify-wall-form .tp-wall-giphy-chip-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
}
#youzify-wall-form .tp-wall-giphy-chip-remove {
  position: static;
  flex-shrink: 0;
  min-width: 36px;
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
#youzify-wall-form .tp-wall-giphy-chip-remove:hover {
  background: rgba(220, 38, 38, 0.15);
  color: #dc2626;
}
/* URL live-preview card: don’t let a pasted Giphy link blow up the preview */
#youzify-wall-form .youzify-lp-prepost img[src*="giphy.com"] {
  max-height: 100px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* Inline GIFs in post text: block so a new line in the composer becomes a real line below the GIF, not beside it */
.activity-inner.tresspassers .tp-inline-giphy,
#buddypress #activity-stream .activity-inner.tresspassers .tp-inline-giphy {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0.35em 0;
  clear: both;
}
.activity-inner.tresspassers .tp-inline-giphy img.tp-giphy-inline,
#buddypress #activity-stream .activity-inner.tresspassers .tp-inline-giphy img.tp-giphy-inline {
  display: block;
  margin: 0;
  max-width: 160px !important;
  width: auto !important;
  height: auto !important;
  max-height: 160px !important;
  object-fit: contain !important;
  border-radius: 6px;
}

/* Attachment / legacy embed GIFs: keep compact inline flow next to other media */
#activity-stream .youzify-post-attachments .tp-giphy-with-media img.tp-giphy-inline,
#activity-stream .youzify-post-attachments .youzify-wall-embed-giphy img.tp-giphy-inline {
  display: inline-block;
  vertical-align: middle;
  margin: 0.2em 0.25em 0.2em 0;
  max-width: 160px !important;
  width: auto !important;
  height: auto !important;
  max-height: 160px !important;
  object-fit: contain !important;
  border-radius: 6px;
}

/* Activity feed: Giphy-only posts + legacy Youzify blocks — same compact cap */
@media screen and (min-width: 769px) {
  #activity-stream li.activity_giphy .youzify-post-attachments .youzify-img-with-padding,
  #buddypress #activity-stream li.activity_giphy .youzify-post-attachments .youzify-img-with-padding {
    display: inline-block;
    max-width: min(160px, 100%);
    vertical-align: top;
  }
  #activity-stream li.activity_giphy .youzify-post-attachments .youzify-img-with-padding img,
  #activity-stream li.activity_giphy .youzify-post-attachments > img,
  #buddypress #activity-stream li.activity_giphy .youzify-post-attachments img {
    max-width: min(160px, 100%) !important;
    width: auto !important;
    height: auto !important;
    max-height: 160px !important;
    object-fit: contain !important;
    display: block;
    margin-left: 0;
    margin-right: auto;
  }
  /* Giphy in comments */
  #activity-stream .acomment-content img.youzify-comment-gif,
  #buddypress #activity-stream .acomment-content img[src*="giphy.com"] {
    max-width: min(160px, 100%) !important;
    width: auto !important;
    height: auto !important;
    max-height: 160px !important;
    object-fit: contain !important;
    vertical-align: middle;
  }
}

/* Hide the "Show: Everything" activity filter dropdown everywhere (profile + directory) */
#activity-filter-select {
  display: none !important;
}

/* ── CSS fallback: hide friendship, badge, avatar/cover, new member items ── */
#activity-stream > li.friendship_created,
#activity-stream > li.gamipress,
#activity-stream > li.new_avatar,
#activity-stream > li.new_cover,
#activity-stream > li.new_member {
  display: none !important;
}

/* ── Seamless infinite-scroll: restyle "Load More" as a subtle spinner ── */
#activity-stream > li.load-more {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
  padding: 24px 0 !important;
  list-style: none !important;
}
#activity-stream > li.load-more a {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 40px;
  color: transparent !important;
  font-size: 0 !important;
  overflow: hidden;
  cursor: pointer;
}
#activity-stream > li.load-more a i {
  display: none !important;
}
#activity-stream > li.load-more a::after {
  content: '';
  display: block;
  width: 28px;
  height: 28px;
  border: 3px solid rgba(124, 58, 237, 0.15);
  border-top-color: #7c3aed;
  border-radius: 50%;
  animation: tp-spin 0.7s linear infinite;
}
@keyframes tp-spin {
  to { transform: rotate(360deg); }
}
body.dark-mode #activity-stream > li.load-more a::after,
html[data-theme='dark'] #activity-stream > li.load-more a::after {
  border-color: rgba(167, 139, 250, 0.2);
  border-top-color: #a78bfa;
}

/* ── Premium Alerts in Youzify settings ── */
.tp-settings-inline-premium-alerts .options-section-title h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tp-settings-inline-premium-alerts .tp-pa-upgrade-notice {
  padding: 10px 14px;
  margin: 0 0 8px;
  background: rgba(234, 179, 8, 0.08);
  border-left: 3px solid #eab308;
  border-radius: 4px;
  font-size: 13px;
  color: var(--ol-body-font-color, #6b7280);
}

.tp-settings-inline-premium-alerts .tp-pa-upgrade-notice a {
  color: var(--ol-heading-font-color, #1f2937);
  font-weight: 600;
  text-decoration: underline;
}

.tp-settings-inline-premium-alerts .tp-pa-enable-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.tp-settings-inline-premium-alerts .tp-pa-enable-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #7c3aed;
}

.tp-settings-inline-premium-alerts .button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  border: 1px solid var(--ol-border-color, #e6ecf5) !important;
  background: var(--ol-input-bg-color, #f2f4f8) !important;
  color: var(--ol-body-font-color, #4b5563) !important;
}

.tp-settings-inline-premium-alerts .button:hover {
  border-color: rgba(124, 58, 237, 0.4) !important;
  background: rgba(124, 58, 237, 0.06) !important;
}

.tp-settings-inline-premium-alerts #tp-nearby-alerts-card .uk-option-item .option-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tp-settings-inline-premium-alerts .tp-pa-msg {
  padding: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  min-height: 1em;
}

.tp-settings-inline-premium-alerts .tp-pa-map-wrap {
  margin-top: 4px;
  border-top: 1px solid var(--ol-border-color, #e6ecf5);
  padding-top: 16px;
}

.tp-settings-inline-premium-alerts .tp-pa-map-preview {
  width: 100%;
  height: 220px;
  border-radius: 10px;
  border: 1px solid var(--ol-border-color, #e6ecf5);
  overflow: hidden;
  z-index: 0;
}

.tp-settings-inline-premium-alerts .tp-pa-map-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  border-radius: 10px;
  border: 1px dashed var(--ol-border-color, #e6ecf5);
  background: var(--ol-input-bg-color, #f2f4f8);
  color: var(--ol-body-font-color, #6b7280);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  padding: 20px;
}

/* Premium Settings menu active state */
.tp-premium-settings-menus .tp-premium-alerts a.youzify-active-menu,
.tp-premium-settings-menus .youzify-edit-group-1 a.youzify-active-menu,
.tp-premium-settings-menus .tp-premium-display-name a.youzify-active-menu {
  color: #5b21b6 !important;
  font-weight: 700 !important;
}

/* Dark mode */
body.dark-mode .tp-settings-inline-premium-alerts .tp-pa-upgrade-notice,
html[data-theme='dark'] .tp-settings-inline-premium-alerts .tp-pa-upgrade-notice {
  background: rgba(234, 179, 8, 0.1);
  color: #d1d5db;
}

body.dark-mode .tp-settings-inline-premium-alerts .button,
html[data-theme='dark'] .tp-settings-inline-premium-alerts .button {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: var(--ol-border-color, #353946) !important;
  color: #d1d5db !important;
}

body.dark-mode .tp-settings-inline-premium-alerts .button:hover,
html[data-theme='dark'] .tp-settings-inline-premium-alerts .button:hover {
  background: rgba(124, 58, 237, 0.15) !important;
  border-color: rgba(167, 139, 250, 0.4) !important;
}

body.dark-mode .tp-settings-inline-premium-alerts .tp-pa-map-wrap,
html[data-theme='dark'] .tp-settings-inline-premium-alerts .tp-pa-map-wrap {
  border-top-color: var(--ol-border-color, #353946);
}

body.dark-mode .tp-settings-inline-premium-alerts .tp-pa-map-preview,
html[data-theme='dark'] .tp-settings-inline-premium-alerts .tp-pa-map-preview {
  border-color: var(--ol-border-color, #353946);
}

body.dark-mode .tp-settings-inline-premium-alerts .tp-pa-map-empty,
html[data-theme='dark'] .tp-settings-inline-premium-alerts .tp-pa-map-empty {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--ol-border-color, #353946);
  color: #9ca3af;
}

/* Mobile compact layout for Nearby Alerts settings */
@media (max-width: 767px) {
  .tp-settings-inline-premium-alerts .options-section-title h2 {
    font-size: 18px;
    gap: 6px;
  }

  .tp-settings-inline-premium-alerts .tp-pa-upgrade-notice {
    font-size: 12px;
    padding: 8px 10px;
    margin-bottom: 6px;
  }

  .tp-settings-inline-premium-alerts #tp-nearby-alerts-card .uk-option-item {
    padding: 10px 0 !important;
    gap: 8px !important;
  }

  .tp-settings-inline-premium-alerts #tp-nearby-alerts-card .uk-option-item .option-infos .option-title {
    font-size: 13px !important;
  }

  .tp-settings-inline-premium-alerts #tp-nearby-alerts-card .uk-option-item .option-infos .option-desc {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  .tp-settings-inline-premium-alerts #tp-nearby-alerts-card .uk-option-item .option-content {
    width: 100%;
    justify-content: flex-start;
  }

  .tp-settings-inline-premium-alerts .tp-pa-enable-label {
    font-size: 13px;
  }

  .tp-settings-inline-premium-alerts .button {
    padding: 8px 12px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .tp-settings-inline-premium-alerts #tp-near-radius {
    min-height: 36px !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
  }

  .tp-settings-inline-premium-alerts .tp-pa-map-wrap {
    margin-top: 2px;
    padding-top: 10px;
  }

  .tp-settings-inline-premium-alerts .tp-pa-map-preview {
    height: 170px;
    border-radius: 8px;
  }

  .tp-settings-inline-premium-alerts .tp-pa-map-empty {
    height: 100px;
    border-radius: 8px;
    padding: 12px;
    font-size: 12px;
  }

  .tp-settings-inline-premium-alerts .youzify-settings-actions {
    padding: 10px 0 !important;
  }
}