/* Lightbox overlay (fullscreen image viewer) in dark mode: apply a soft transparent black background Peepso Modal  */
:root:not(.femdoo-lightmode) .ps-lightbox {
    background-color: rgba(0, 0, 0, 0.3) !important; /* soft transparent black */
    filter: none !important; /* prevent double inverts */
}

/* Elementor Lightbox full-screen viewer: override default dark background and use white instead/ Writing area / Post */
:root:not(.femdoo-lightmode) .elementor-lightbox {
    background-color: #fff !important; /* looks cleaner in dark mode */
    filter: none !important;
}

/* Avatar image inside the author box in dark mode: remove default border, shadow, and background */
:root:not(.femdoo-lightmode) .elementor-author-box__avatar img {
  border: none !important;
  box-shadow: none !important;
  background: none !important;
}

/* Avatar container in the author box in dark mode: remove styling and set background color */
:root:not(.femdoo-lightmode) .elementor-author-box__avatar {
  background-color: #fff !important; /* change to #000 if you want a black circle */
  border: none !important;
  box-shadow: none !important;
}

.femdoo-9pforjuhedbr6569vg-urhgiur-94jur {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
border: 2px solid #fff;
border-radius: 999px;
background-color: transparent;
color: #fff;
font-size: 16px;
font-family: inherit;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
}

.femdoo-9pforjuhedbr6569vg-urhgiur-94jur span {
display: inline-flex;
align-items: center;
}

/* Toggle switch styling */
.femdoo-darkmode-toggle {
width: 40px;
height: 20px;
background-color: #4a90e2;
border-radius: 999px;
position: relative;
flex-shrink: 0;
transition: background-color 0.3s ease;
}

.femdoo-darkmode-toggle::before {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
background: #000;
border-radius: 50%;
transition: transform 0.3s ease, background 0.3s ease;
}

/* Shift circle right when in light mode */
:root.femdoo-lightmode .femdoo-darkmode-toggle::before {
transform: translateX(20px);
background: #fff;
}

/* Optional: soften text/icon on hover */
.femdoo-9pforjuhedbr6569vg-urhgiur-94jur:hover {
background-color: rgba(255, 255, 255, 0.05);
}
/* Default (light mode) — gray background */
:root.femdoo-lightmode .femdoo-darkmode-toggle {
background-color: #ccc;
}

/* Dark mode — blue background */
:root:not(.femdoo-lightmode) .femdoo-darkmode-toggle {
background-color: #4a90e2;
}







/* =========================================
   FEMDOO — PEEPSO Plyr DARK MODE
   Match WPUF: white bubble → pink on hover
   ========================================= */

/* -------------------------------------------------
   1) FEED & COMPOSER CONTROLS (mute / settings / fs)
   ------------------------------------------------- */

/* Default: white bubble + pink icon */
:root:not(.femdoo-lightmode)
.fd-bunny-embed .plyr__controls [data-plyr="mute"],
:root:not(.femdoo-lightmode)
.fd-bunny-embed .plyr__controls [data-plyr="settings"],
:root:not(.femdoo-lightmode)
.fd-bunny-embed .plyr__controls [data-plyr="fullscreen"],
:root:not(.femdoo-lightmode)
.fd-r2a-video-card .plyr__controls [data-plyr="mute"],
:root:not(.femdoo-lightmode)
.fd-r2a-video-card .plyr__controls [data-plyr="settings"],
:root:not(.femdoo-lightmode)
.fd-r2a-video-card .plyr__controls [data-plyr="fullscreen"] {
  background: #ffffff !important;   /* white bubble */
  color: #82024D !important;        /* Femdoo pink icon */
  border-radius: 999px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.25) !important;
}

/* SVG inside those buttons follows the color */
:root:not(.femdoo-lightmode)
.fd-bunny-embed .plyr__controls [data-plyr="mute"] svg,
:root:not(.femdoo-lightmode)
.fd-bunny-embed .plyr__controls [data-plyr="settings"] svg,
:root:not(.femdoo-lightmode)
.fd-bunny-embed .plyr__controls [data-plyr="fullscreen"] svg,
:root:not(.femdoo-lightmode)
.fd-r2a-video-card .plyr__controls [data-plyr="mute"] svg,
:root:not(.femdoo-lightmode)
.fd-r2a-video-card .plyr__controls [data-plyr="settings"] svg,
:root:not(.femdoo-lightmode)
.fd-r2a-video-card .plyr__controls [data-plyr="fullscreen"] svg {
  filter: none !important;
  fill: currentColor !important;
}

/* Hover / focus: pink bubble + white icon */
:root:not(.femdoo-lightmode)
.fd-bunny-embed .plyr__controls [data-plyr="mute"]:hover,
:root:not(.femdoo-lightmode)
.fd-bunny-embed .plyr__controls [data-plyr="mute"]:focus,
:root:not(.femdoo-lightmode)
.fd-bunny-embed .plyr__controls [data-plyr="settings"]:hover,
:root:not(.femdoo-lightmode)
.fd-bunny-embed .plyr__controls [data-plyr="settings"]:focus,
:root:not(.femdoo-lightmode)
.fd-bunny-embed .plyr__controls [data-plyr="fullscreen"]:hover,
:root:not(.femdoo-lightmode)
.fd-bunny-embed .plyr__controls [data-plyr="fullscreen"]:focus,
:root:not(.femdoo-lightmode)
.fd-r2a-video-card .plyr__controls [data-plyr="mute"]:hover,
:root:not(.femdoo-lightmode)
.fd-r2a-video-card .plyr__controls [data-plyr="mute"]:focus,
:root:not(.femdoo-lightmode)
.fd-r2a-video-card .plyr__controls [data-plyr="settings"]:hover,
:root:not(.femdoo-lightmode)
.fd-r2a-video-card .plyr__controls [data-plyr="settings"]:focus,
:root:not(.femdoo-lightmode)
.fd-r2a-video-card .plyr__controls [data-plyr="fullscreen"]:hover,
:root:not(.femdoo-lightmode)
.fd-r2a-video-card .plyr__controls [data-plyr="fullscreen"]:focus {
  background: #82024D !important;   /* pink bubble */
  color: #ffffff !important;        /* white icon */
}

/* Hover icon → white */
:root:not(.femdoo-lightmode)
.fd-bunny-embed .plyr__controls [data-plyr="mute"]:hover svg,
:root:not(.femdoo-lightmode)
.fd-bunny-embed .plyr__controls [data-plyr="mute"]:focus svg,
:root:not(.femdoo-lightmode)
.fd-bunny-embed .plyr__controls [data-plyr="settings"]:hover svg,
:root:not(.femdoo-lightmode)
.fd-bunny-embed .plyr__controls [data-plyr="settings"]:focus svg,
:root:not(.femdoo-lightmode)
.fd-bunny-embed .plyr__controls [data-plyr="fullscreen"]:hover svg,
:root:not(.femdoo-lightmode)
.fd-bunny-embed .plyr__controls [data-plyr="fullscreen"]:focus svg,
:root:not(.femdoo-lightmode)
.fd-r2a-video-card .plyr__controls [data-plyr="mute"]:hover svg,
:root:not(.femdoo-lightmode)
.fd-r2a-video-card .plyr__controls [data-plyr="mute"]:focus svg,
:root:not(.femdoo-lightmode)
.fd-r2a-video-card .plyr__controls [data-plyr="settings"]:hover svg,
:root:not(.femdoo-lightmode)
.fd-r2a-video-card .plyr__controls [data-plyr="settings"]:focus svg,
:root:not(.femdoo-lightmode)
.fd-r2a-video-card .plyr__controls [data-plyr="fullscreen"]:hover svg,
:root:not(.femdoo-lightmode)
.fd-r2a-video-card .plyr__controls [data-plyr="fullscreen"]:focus svg {
  fill: #ffffff !important;
}

/* -------------------------------------------
   2) CENTER OVERLAID PLAY BUTTON (feed+composer)
   ------------------------------------------- */

/* Default: white bubble + pink play icon */
:root:not(.femdoo-lightmode)
.fd-bunny-embed .plyr__control--overlaid,
:root:not(.femdoo-lightmode)
.fd-r2a-video-card .plyr__control--overlaid {
  filter: none !important;              /* cancel any extra invert on icon */
  background: #ffffff !important;
  color: #82024D !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45) !important;
}

/* SVG follows button color */
:root:not(.femdoo-lightmode)
.fd-bunny-embed .plyr__control--overlaid svg,
:root:not(.femdoo-lightmode)
.fd-r2a-video-card .plyr__control--overlaid svg {
  filter: none !important;
  fill: currentColor !important;
}

/* Hover: pink bubble + white icon */
:root:not(.femdoo-lightmode)
.fd-bunny-embed .plyr__control--overlaid:hover,
:root:not(.femdoo-lightmode)
.fd-bunny-embed .plyr__control--overlaid:focus,
:root:not(.femdoo-lightmode)
.fd-r2a-video-card .plyr__control--overlaid:hover,
:root:not(.femdoo-lightmode)
.fd-r2a-video-card .plyr__control--overlaid:focus {
  background: #82024D !important;
  color: #ffffff !important;
}

/* -------------------------------------------
   3) GENERAL SVG FIX (avoid double invert)
   ------------------------------------------- */

:root:not(.femdoo-lightmode)
.fd-bunny-embed .plyr__controls svg,
:root:not(.femdoo-lightmode)
.fd-r2a-video-card .plyr__controls svg {
  filter: none !important;
}

/* ----------------------------------------------------
   4) FULLSCREEN – fix inverted colors in dark mode
   (keep existing behavior: real colors while fullscreen)
   ---------------------------------------------------- */

:root:not(.femdoo-lightmode)
.fd-bunny-embed:fullscreen,
:root:not(.femdoo-lightmode)
.fd-bunny-embed .plyr:fullscreen,
:root:not(.femdoo-lightmode)
.fd-bunny-embed .plyr__video-wrapper:fullscreen,
:root:not(.femdoo-lightmode)
.fd-bunny-embed video:fullscreen,
/* Safari/WebKit aliases */
:root:not(.femdoo-lightmode)
.fd-bunny-embed:-webkit-full-screen,
:root:not(.femdoo-lightmode)
.fd-bunny-embed .plyr:-webkit-full-screen,
:root:not(.femdoo-lightmode)
.fd-bunny-embed .plyr__video-wrapper:-webkit-full-screen,
:root:not(.femdoo-lightmode)
.fd-bunny-embed video:-webkit-full-screen {
  /* Double-invert the fullscreen subtree → returns colors to normal */
  filter: invert(1) hue-rotate(180deg) !important;
  background:#000 !important;

  /* keep bubble colors consistent while fullscreen */
  --fd-bubble-bg:#000;
  --fd-bubble-ink:#fff;
  --fd-bubble-bg-hover:#82024D;
  --fd-bubble-ink-hover:#fff;
}

/* Same fullscreen fix for composer card if it is the fullscreen element */
:root:not(.femdoo-lightmode)
.fd-r2a-video-card:fullscreen,
:root:not(.femdoo-lightmode)
.fd-r2a-video-card .plyr:fullscreen,
:root:not(.femdoo-lightmode)
.fd-r2a-video-card .plyr__video-wrapper:fullscreen,
:root:not(.femdoo-lightmode)
.fd-r2a-video-card video:fullscreen,
/* Safari/WebKit aliases */
:root:not(.femdoo-lightmode)
.fd-r2a-video-card:-webkit-full-screen,
:root:not(.femdoo-lightmode)
.fd-r2a-video-card .plyr:-webkit-full-screen,
:root:not(.femdoo-lightmode)
.fd-r2a-video-card .plyr__video-wrapper:-webkit-full-screen,
:root:not(.femdoo-lightmode)
.fd-r2a-video-card video:-webkit-full-screen {
  filter: invert(1) hue-rotate(180deg) !important;
  background:#000 !important;

  --fd-bubble-bg:#000;
  --fd-bubble-ink:#fff;
  --fd-bubble-bg-hover:#82024D;
  --fd-bubble-ink-hover:#fff;
}



/* =========================================
   FEMDOO — WPUF Plyr DARK MODE (like PeepSo)
   Background white by default, pink on hover
   ========================================= */

/* ---------- 1. Main round buttons (mute / cog / fullscreen) ---------- */
/* Default: white bubble + pink icon */
:root:not(.femdoo-lightmode) .fd-uwv-player .plyr__controls [data-plyr="mute"],
:root:not(.femdoo-lightmode) .fd-uwv-player .plyr__controls [data-plyr="settings"],
:root:not(.femdoo-lightmode) .fd-uwv-player .plyr__controls [data-plyr="fullscreen"],
:root:not(.femdoo-lightmode) span.fd-uwv-inline .plyr__controls [data-plyr="mute"],
:root:not(.femdoo-lightmode) span.fd-uwv-inline .plyr__controls [data-plyr="settings"],
:root:not(.femdoo-lightmode) span.fd-uwv-inline .plyr__controls [data-plyr="fullscreen"] {
  background: #ffffff !important;   /* white bubble */
  color: #82024D !important;        /* Femdoo pink icon (currentColor) */
  border-radius: 999px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.25) !important;
}

/* Make the SVG inside those buttons follow the color */
:root:not(.femdoo-lightmode) .fd-uwv-player .plyr__controls [data-plyr="mute"] svg,
:root:not(.femdoo-lightmode) .fd-uwv-player .plyr__controls [data-plyr="settings"] svg,
:root:not(.femdoo-lightmode) .fd-uwv-player .plyr__controls [data-plyr="fullscreen"] svg,
:root:not(.femdoo-lightmode) span.fd-uwv-inline .plyr__controls [data-plyr="mute"] svg,
:root:not(.femdoo-lightmode) span.fd-uwv-inline .plyr__controls [data-plyr="settings"] svg,
:root:not(.femdoo-lightmode) span.fd-uwv-inline .plyr__controls [data-plyr="fullscreen"] svg {
  fill: currentColor !important;     /* use button color */
}

/* Hover / focus: pink bubble + white icon */
:root:not(.femdoo-lightmode) .fd-uwv-player .plyr__controls [data-plyr="mute"]:hover,
:root:not(.femdoo-lightmode) .fd-uwv-player .plyr__controls [data-plyr="mute"]:focus,
:root:not(.femdoo-lightmode) .fd-uwv-player .plyr__controls [data-plyr="settings"]:hover,
:root:not(.femdoo-lightmode) .fd-uwv-player .plyr__controls [data-plyr="settings"]:focus,
:root:not(.femdoo-lightmode) .fd-uwv-player .plyr__controls [data-plyr="fullscreen"]:hover,
:root:not(.femdoo-lightmode) .fd-uwv-player .plyr__controls [data-plyr="fullscreen"]:focus,
:root:not(.femdoo-lightmode) span.fd-uwv-inline .plyr__controls [data-plyr="mute"]:hover,
:root:not(.femdoo-lightmode) span.fd-uwv-inline .plyr__controls [data-plyr="mute"]:focus,
:root:not(.femdoo-lightmode) span.fd-uwv-inline .plyr__controls [data-plyr="settings"]:hover,
:root:not(.femdoo-lightmode) span.fd-uwv-inline .plyr__controls [data-plyr="settings"]:focus,
:root:not(.femdoo-lightmode) span.fd-uwv-inline .plyr__controls [data-plyr="fullscreen"]:hover,
:root:not(.femdoo-lightmode) span.fd-uwv-inline .plyr__controls [data-plyr="fullscreen"]:focus {
  background: #82024D !important;   /* pink bubble */
  color: #ffffff !important;        /* white icon */
}

/* Hover icon → white */
:root:not(.femdoo-lightmode) .fd-uwv-player .plyr__controls [data-plyr="mute"]:hover svg,
:root:not(.femdoo-lightmode) .fd-uwv-player .plyr__controls [data-plyr="mute"]:focus svg,
:root:not(.femdoo-lightmode) .fd-uwv-player .plyr__controls [data-plyr="settings"]:hover svg,
:root:not(.femdoo-lightmode) .fd-uwv-player .plyr__controls [data-plyr="settings"]:focus svg,
:root:not(.femdoo-lightmode) .fd-uwv-player .plyr__controls [data-plyr="fullscreen"]:hover svg,
:root:not(.femdoo-lightmode) .fd-uwv-player .plyr__controls [data-plyr="fullscreen"]:focus svg,
:root:not(.femdoo-lightmode) span.fd-uwv-inline .plyr__controls [data-plyr="mute"]:hover svg,
:root:not(.femdoo-lightmode) span.fd-uwv-inline .plyr__controls [data-plyr="mute"]:focus svg,
:root:not(.femdoo-lightmode) span.fd-uwv-inline .plyr__controls [data-plyr="settings"]:hover svg,
:root:not(.femdoo-lightmode) span.fd-uwv-inline .plyr__controls [data-plyr="settings"]:focus svg,
:root:not(.femdoo-lightmode) span.fd-uwv-inline .plyr__controls [data-plyr="fullscreen"]:hover svg,
:root:not(.femdoo-lightmode) span.fd-uwv-inline .plyr__controls [data-plyr="fullscreen"]:focus svg {
  fill: #ffffff !important;
}

/* ---------- 2. Center overlaid PLAY button (if present) ---------- */
/* Default: white bubble + pink icon */
:root:not(.femdoo-lightmode) .fd-uwv-player .plyr__control--overlaid,
:root:not(.femdoo-lightmode) span.fd-uwv-inline .plyr__control--overlaid {
  background: #ffffff !important;
  color: #82024D !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45) !important;
}

/* SVG follows current color */
:root:not(.femdoo-lightmode) .fd-uwv-player .plyr__control--overlaid svg,
:root:not(.femdoo-lightmode) span.fd-uwv-inline .plyr__control--overlaid svg {
  fill: currentColor !important;
}

/* Hover: pink bubble + white icon */
:root:not(.femdoo-lightmode) .fd-uwv-player .plyr__control--overlaid:hover,
:root:not(.femdoo-lightmode) .fd-uwv-player .plyr__control--overlaid:focus,
:root:not(.femdoo-lightmode) span.fd-uwv-inline .plyr__control--overlaid:hover,
:root:not(.femdoo-lightmode) span.fd-uwv-inline .plyr__control--overlaid:focus {
  background: #82024D !important;
  color: #ffffff !important;
}












/* =========================================
   FEMDOO — WPUF Plyr DARK MODE fullscreen
   (undo page invert + force black background)
   ========================================= */

:root:not(.femdoo-lightmode)
.fd-uwv-player:fullscreen,
:root:not(.femdoo-lightmode)
.fd-uwv-player .plyr:fullscreen,
:root:not(.femdoo-lightmode)
.fd-uwv-player .plyr__video-wrapper:fullscreen,
:root:not(.femdoo-lightmode)
.fd-uwv-player video:fullscreen,
:root:not(.femdoo-lightmode)
span.fd-uwv-inline:fullscreen,
:root:not(.femdoo-lightmode)
span.fd-uwv-inline .plyr:fullscreen,
:root:not(.femdoo-lightmode)
span.fd-uwv-inline .plyr__video-wrapper:fullscreen,
:root:not(.femdoo-lightmode)
span.fd-uwv-inline video:fullscreen,
/* Safari / WebKit aliases */
:root:not(.femdoo-lightmode)
.fd-uwv-player:-webkit-full-screen,
:root:not(.femdoo-lightmode)
.fd-uwv-player .plyr:-webkit-full-screen,
:root:not(.femdoo-lightmode)
.fd-uwv-player .plyr__video-wrapper:-webkit-full-screen,
:root:not(.femdoo-lightmode)
.fd-uwv-player video:-webkit-full-screen,
:root:not(.femdoo-lightmode)
span.fd-uwv-inline:-webkit-full-screen,
:root:not(.femdoo-lightmode)
span.fd-uwv-inline .plyr:-webkit-full-screen,
:root:not(.femdoo-lightmode)
span.fd-uwv-inline .plyr__video-wrapper:-webkit-full-screen,
:root:not(.femdoo-lightmode)
span.fd-uwv-inline video:-webkit-full-screen {
  /* double-invert fullscreen subtree → returns colors to normal */
  filter: invert(1) hue-rotate(180deg) !important;
  background: #fff !important;

  /* (optional) keep same bubble vars if you ever use them */
  --fd-bubble-bg: #000;
  --fd-bubble-ink: #fff;
  --fd-bubble-bg-hover: #82024D;
  --fd-bubble-ink-hover: #fff;
}






/* Femdoo – WPUF lightbox overlay in dark mode
   (same idea as PeepSo .ps-lightbox rule) */
:root:not(.femdoo-lightmode) .fdmwpuf-lb {
  background-color: rgba(0, 0, 0, 0.3) !important; /* soft black overlay */
  filter: none !important;                          /* avoid double-invert */
}

/* (optional) if you also want a solid white stage behind the image,
   which will appear black if your global dark mode inverts colors: */
:root:not(.femdoo-lightmode) .fdmwpuf-lb-stage {
  background-color: #ffffff !important;
}











/* ===== RimLB BACKDROP: light mode = black, dark(inverted) = white (renders black) ===== */

/* Light mode (normal) -> real black overlay */
:root.femdoo-lightmode .femdoo-rimlb.is-open,
html.femdoo-lightmode .femdoo-rimlb.is-open,
body.femdoo-lightmode .femdoo-rimlb.is-open{
  background: rgba(0,0,0,.88) !important;
}

/* Dark mode (your site is inverted) -> set WHITE so it becomes BLACK */
:root:not(.femdoo-lightmode) .femdoo-rimlb.is-open,
html:not(.femdoo-lightmode) .femdoo-rimlb.is-open,
body:not(.femdoo-lightmode) .femdoo-rimlb.is-open{
  background: #fff !important;   /* or #f1f1f1 for slightly softer black */
}

/* Don’t let the stage paint any color */
.femdoo-rimlb.is-open .femdoo-rimlb__stage{
  background: transparent !important;
}






/* Hide the moon emoji inside the dark mode button */
button[class*="femdoo-"] #femdoo-icon,
button[class*="femdoo-"] #femdoo-icon .emoji,
button[class*="femdoo-"] #femdoo-icon img.emoji {
    display: none !important;
}




/* Dark mode — make spinner arc white for visibility */
:root:not(.femdoo-lightmode) .femdoo-arc {
  color: #fff !important;
}
/* Dark mode – Elementor lightbox close "X"
   black circle + white X + soft white glow */
:root:not(.femdoo-lightmode)
a.dialog-close-button.dialog-lightbox-close-button {
  background: #fff !important;              /* black bubble */
  border-radius: 999px !important;             /* keep circle */
  box-shadow: 0 0 18px rgba(255, 255, 255, .35) !important; /* halo glow */
}

/* Dark mode – make the X white */
:root:not(.femdoo-lightmode)
a.dialog-close-button.dialog-lightbox-close-button svg {
  color: #fff !important;
  fill:  #fff !important;
  stroke:#fff !important;
}

/* Dark mode – make Femdoo lightbox background white */
:root:not(.femdoo-lightmode) .fdm-lb-stage,
:root:not(.femdoo-lightmode) .fdm-lb.is-open {
  background: #ffffff !important;
}