/* ==========================================================================
   PopUpMood — Frontend Styles
   Funktional nach dh_popup-Vorbild (9 Positionen, Overlay-Modi),
   stilistisch konsistent mit StyleMood/PopUpMood-Adminbereich.
   ========================================================================== */

:root {
    --pumood-dark:      #083d35;
    --pumood-mid:       #0e4f40;
    --pumood-primary:   #607571;
    --pumood-secondary: #7f938f;
    --pumood-light:     #eef1f0;
    --pumood-text:      #202020;
    --pumood-white:     #fff;
    --pumood-error:     #d63638;
}

/* --------------------------------------------------------------------------
   Overlay (Hintergrund)
   -------------------------------------------------------------------------- */
.pumood-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99998;
    background: rgba(0, 0, 0, 0.6);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* Fade-In/Out per Opacity. Visibility verhindert Klicks und versteckt
       das Element ohne reflow. --pumood-fade-duration wird pro PopUp via
       Inline-Style aus _pumood_overlay_fade_ms gesetzt (Default 300 ms). */
    opacity: 0;
    visibility: hidden;
    transition-property: opacity, visibility;
    transition-duration: var(--pumood-fade-duration, 300ms);
    transition-timing-function: ease;
    /* visibility-Übergang: beim Schließen verzögert (erst nach opacity 0
       wird visibility:hidden), beim Öffnen sofort. Geregelt über die
       active-Klasse, die den delay überschreibt. */
    transition-delay: 0s, var(--pumood-fade-duration, 300ms);
}

.pumood-overlay.pumood-overlay--disabled {
    background: transparent;
    pointer-events: none; /* Klicks gehen durch zur Seite */
}

.pumood-overlay.pumood-overlay--disabled .pumood-box {
    pointer-events: auto; /* Box selbst bleibt klickbar */
}

.pumood-overlay.pumood-active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s, 0s;
}

/* --------------------------------------------------------------------------
   Box (eigentlicher PopUp-Container)
   -------------------------------------------------------------------------- */
.pumood-box {
    background: var(--pumood-white);
    position: absolute;
    z-index: 99999;
    max-width: 95vw;
    max-height: 95vh;
    /* Scrollbar wandert auf die Box selbst — so erscheint sie NUR wenn der
       Inhalt tatsächlich größer als die Box ist, nicht wegen Subpixel-
       Rundung wie bei einem zweistufigen Scroll-Container. */
    overflow: hidden auto;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.25);
    /* Schrift, Schriftgröße, Textfarbe etc. werden NICHT gesetzt — der Inhalt
       erbt automatisch vom Theme bzw. von eigenen WPBakery-Element-Stilen. */
    padding: 0;

    /* Default: 500 px breit, automatische Höhe */
    width: 500px;

    /* Default-Position: Bildschirmmitte */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* --------------------------------------------------------------------------
   Position-Modifikatoren (9-Punkt-Raster wie dh_popup)
   -------------------------------------------------------------------------- */
.pumood-overlay[data-position="left-top"]      .pumood-box { top:   30px; left:  30px; right: auto; bottom: auto; transform: none; }
.pumood-overlay[data-position="center-top"]    .pumood-box { top:   30px; left:  50%; right: auto; bottom: auto; transform: translateX(-50%); }
.pumood-overlay[data-position="right-top"]     .pumood-box { top:   30px; right: 30px; left:  auto; bottom: auto; transform: none; }

.pumood-overlay[data-position="left-center"]   .pumood-box { top:   50%; left:  30px; right: auto; bottom: auto; transform: translateY(-50%); }
.pumood-overlay[data-position="center"]        .pumood-box { top:   50%; left:  50%; right: auto; bottom: auto; transform: translate(-50%, -50%); }
.pumood-overlay[data-position="right-center"]  .pumood-box { top:   50%; right: 30px; left:  auto; bottom: auto; transform: translateY(-50%); }

.pumood-overlay[data-position="left-bottom"]   .pumood-box { bottom: 30px; left:  30px; right: auto; top: auto; transform: none; }
.pumood-overlay[data-position="center-bottom"] .pumood-box { bottom: 30px; left:  50%; right: auto; top: auto; transform: translateX(-50%); }
.pumood-overlay[data-position="right-bottom"]  .pumood-box { bottom: 30px; right: 30px; left:  auto; top: auto; transform: none; }

/* --------------------------------------------------------------------------
   Schließen-Button — sitzt über dem Inhalt im oberen rechten Eck der Box.
   Text-Shadow sorgt dafür, dass das X auf jedem Content-Hintergrund lesbar
   bleibt — kein eigener Hintergrund-Kreis, damit es schlicht wirkt.
   -------------------------------------------------------------------------- */
.pumood-close {
    position: absolute;
    top: 8px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 0;
    font-size: 28px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    color: var(--pumood-secondary);
    z-index: 2;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, transform 0.15s ease;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.7), 0 0 4px rgba(255, 255, 255, 0.7);
}

.pumood-close:hover,
.pumood-close:focus {
    color: var(--pumood-dark);
    transform: scale(1.1);
    outline: none;
}

.pumood-overlay[data-hide-close="1"] .pumood-close {
    display: none;
}

/* --------------------------------------------------------------------------
   Content-Bereich
   -------------------------------------------------------------------------- */
.pumood-content {
    /* Kein Padding — der eigentliche Inhalt (z.B. WPBakery-Element mit eigenem
       Hintergrund) füllt die Box randlos. Hat der Inhalt keinen eigenen
       Hintergrund, scheint der weiße Box-Background durch. */
    padding: 0;
    box-sizing: border-box;
    /* KEIN eigenes overflow oder max-height — den Scroll macht .pumood-box,
       sonst doppelter Scroll-Container und Subpixel-Scrollbar-Bug. */
}

.pumood-content > *:first-child { margin-top: 0; }
.pumood-content > *:last-child  { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Mobile — versteckt, falls hide_on_mobile aktiv ist
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .pumood-overlay[data-hide-mobile="1"] {
        display: none !important;
    }

    /* Auf kleinen Screens: Position auf Center, sonst läuft Box raus */
    .pumood-box {
        width: calc(100vw - 40px) !important;
        max-width: calc(100vw - 40px);
    }
}

/* --------------------------------------------------------------------------
   Animationen beim Öffnen und Schließen des PopUps.
   Eigenständige Implementierung der animate.css-/WPBakery-Animationen, damit
   PopUpMood unabhängig von WPBakery funktioniert.
   - Beim Öffnen ist .pumood-active gesetzt — Eingangs-Animation greift
   - Beim Schließen wird .pumood-closing zusätzlich gesetzt — Ausgangs-
     Animation überschreibt; nach Animationsende entfernt JS .pumood-active
   -------------------------------------------------------------------------- */
.pumood-overlay.pumood-active:not(.pumood-closing)[data-animation-in]:not([data-animation-in=""]) .pumood-box,
.pumood-overlay.pumood-closing[data-animation-out]:not([data-animation-out=""]) .pumood-box {
    animation-duration: 0.6s;
    animation-fill-mode: both;
}

/* In-Animationen (greifen, solange nicht .pumood-closing gesetzt ist) */
.pumood-overlay.pumood-active:not(.pumood-closing)[data-animation-in="fadeIn"]       .pumood-box { animation-name: pumood-fadeIn; }
.pumood-overlay.pumood-active:not(.pumood-closing)[data-animation-in="fadeInDown"]   .pumood-box { animation-name: pumood-fadeInDown; }
.pumood-overlay.pumood-active:not(.pumood-closing)[data-animation-in="fadeInUp"]     .pumood-box { animation-name: pumood-fadeInUp; }
.pumood-overlay.pumood-active:not(.pumood-closing)[data-animation-in="fadeInLeft"]   .pumood-box { animation-name: pumood-fadeInLeft; }
.pumood-overlay.pumood-active:not(.pumood-closing)[data-animation-in="fadeInRight"]  .pumood-box { animation-name: pumood-fadeInRight; }
.pumood-overlay.pumood-active:not(.pumood-closing)[data-animation-in="zoomIn"]       .pumood-box { animation-name: pumood-zoomIn; }
.pumood-overlay.pumood-active:not(.pumood-closing)[data-animation-in="zoomInDown"]   .pumood-box { animation-name: pumood-zoomInDown; animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.pumood-overlay.pumood-active:not(.pumood-closing)[data-animation-in="zoomInUp"]     .pumood-box { animation-name: pumood-zoomInUp; animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.pumood-overlay.pumood-active:not(.pumood-closing)[data-animation-in="bounceIn"]     .pumood-box { animation-name: pumood-bounceIn; animation-duration: 0.75s; }
.pumood-overlay.pumood-active:not(.pumood-closing)[data-animation-in="bounceInDown"] .pumood-box { animation-name: pumood-bounceInDown; animation-duration: 0.75s; }
.pumood-overlay.pumood-active:not(.pumood-closing)[data-animation-in="bounceInUp"]   .pumood-box { animation-name: pumood-bounceInUp; animation-duration: 0.75s; }
.pumood-overlay.pumood-active:not(.pumood-closing)[data-animation-in="slideInDown"]  .pumood-box { animation-name: pumood-slideInDown; }
.pumood-overlay.pumood-active:not(.pumood-closing)[data-animation-in="slideInUp"]    .pumood-box { animation-name: pumood-slideInUp; }
.pumood-overlay.pumood-active:not(.pumood-closing)[data-animation-in="slideInLeft"]  .pumood-box { animation-name: pumood-slideInLeft; }
.pumood-overlay.pumood-active:not(.pumood-closing)[data-animation-in="slideInRight"] .pumood-box { animation-name: pumood-slideInRight; }
.pumood-overlay.pumood-active:not(.pumood-closing)[data-animation-in="flipInX"]      .pumood-box { animation-name: pumood-flipInX; backface-visibility: visible; }
.pumood-overlay.pumood-active:not(.pumood-closing)[data-animation-in="flipInY"]      .pumood-box { animation-name: pumood-flipInY; backface-visibility: visible; }
.pumood-overlay.pumood-active:not(.pumood-closing)[data-animation-in="rotateIn"]     .pumood-box { animation-name: pumood-rotateIn; transform-origin: center; }

/* Out-Animationen */
.pumood-overlay.pumood-closing[data-animation-out="fadeOut"]       .pumood-box { animation-name: pumood-fadeOut; }
.pumood-overlay.pumood-closing[data-animation-out="fadeOutDown"]   .pumood-box { animation-name: pumood-fadeOutDown; }
.pumood-overlay.pumood-closing[data-animation-out="fadeOutUp"]     .pumood-box { animation-name: pumood-fadeOutUp; }
.pumood-overlay.pumood-closing[data-animation-out="fadeOutLeft"]   .pumood-box { animation-name: pumood-fadeOutLeft; }
.pumood-overlay.pumood-closing[data-animation-out="fadeOutRight"]  .pumood-box { animation-name: pumood-fadeOutRight; }
.pumood-overlay.pumood-closing[data-animation-out="zoomOut"]       .pumood-box { animation-name: pumood-zoomOut; }
.pumood-overlay.pumood-closing[data-animation-out="zoomOutDown"]   .pumood-box { animation-name: pumood-zoomOutDown; }
.pumood-overlay.pumood-closing[data-animation-out="zoomOutUp"]     .pumood-box { animation-name: pumood-zoomOutUp; }
.pumood-overlay.pumood-closing[data-animation-out="bounceOut"]     .pumood-box { animation-name: pumood-bounceOut; animation-duration: 0.75s; }
.pumood-overlay.pumood-closing[data-animation-out="bounceOutDown"] .pumood-box { animation-name: pumood-bounceOutDown; animation-duration: 0.75s; }
.pumood-overlay.pumood-closing[data-animation-out="bounceOutUp"]   .pumood-box { animation-name: pumood-bounceOutUp; animation-duration: 0.75s; }
.pumood-overlay.pumood-closing[data-animation-out="slideOutDown"]  .pumood-box { animation-name: pumood-slideOutDown; }
.pumood-overlay.pumood-closing[data-animation-out="slideOutUp"]    .pumood-box { animation-name: pumood-slideOutUp; }
.pumood-overlay.pumood-closing[data-animation-out="slideOutLeft"]  .pumood-box { animation-name: pumood-slideOutLeft; }
.pumood-overlay.pumood-closing[data-animation-out="slideOutRight"] .pumood-box { animation-name: pumood-slideOutRight; }
.pumood-overlay.pumood-closing[data-animation-out="flipOutX"]      .pumood-box { animation-name: pumood-flipOutX; backface-visibility: visible; }
.pumood-overlay.pumood-closing[data-animation-out="flipOutY"]      .pumood-box { animation-name: pumood-flipOutY; backface-visibility: visible; }
.pumood-overlay.pumood-closing[data-animation-out="rotateOut"]     .pumood-box { animation-name: pumood-rotateOut; transform-origin: center; }

/* === In-Keyframes === */
@keyframes pumood-fadeIn      { from { opacity: 0; }             to { opacity: 1; } }
@keyframes pumood-fadeInDown  { from { opacity: 0; transform: translate(-50%, calc(-50% - 30px)); } to { opacity: 1; } }
@keyframes pumood-fadeInUp    { from { opacity: 0; transform: translate(-50%, calc(-50% + 30px)); } to { opacity: 1; } }
@keyframes pumood-fadeInLeft  { from { opacity: 0; transform: translate(calc(-50% - 30px), -50%); } to { opacity: 1; } }
@keyframes pumood-fadeInRight { from { opacity: 0; transform: translate(calc(-50% + 30px), -50%); } to { opacity: 1; } }
@keyframes pumood-zoomIn      { from { opacity: 0; transform: translate(-50%, -50%) scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } }
@keyframes pumood-zoomInDown  { from { opacity: 0; transform: translate(-50%, calc(-50% - 60px)) scale3d(0.1, 0.1, 0.1); } 60% { opacity: 1; } }
@keyframes pumood-zoomInUp    { from { opacity: 0; transform: translate(-50%, calc(-50% + 60px)) scale3d(0.1, 0.1, 0.1); } 60% { opacity: 1; } }
@keyframes pumood-bounceIn {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale3d(0.3, 0.3, 0.3); }
    50%  { opacity: 1; transform: translate(-50%, -50%) scale3d(1.05, 1.05, 1.05); }
    70%  { transform: translate(-50%, -50%) scale3d(0.95, 0.95, 0.95); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale3d(1, 1, 1); }
}
@keyframes pumood-bounceInDown {
    0%   { opacity: 0; transform: translate(-50%, calc(-50% - 60px)); }
    60%  { opacity: 1; transform: translate(-50%, calc(-50% + 12px)); }
    80%  { transform: translate(-50%, calc(-50% - 6px)); }
    100% { transform: translate(-50%, -50%); }
}
@keyframes pumood-bounceInUp {
    0%   { opacity: 0; transform: translate(-50%, calc(-50% + 60px)); }
    60%  { opacity: 1; transform: translate(-50%, calc(-50% - 12px)); }
    80%  { transform: translate(-50%, calc(-50% + 6px)); }
    100% { transform: translate(-50%, -50%); }
}
@keyframes pumood-slideInDown  { from { transform: translate(-50%, -100vh); } to { transform: translate(-50%, -50%); } }
@keyframes pumood-slideInUp    { from { transform: translate(-50%, 100vh); }  to { transform: translate(-50%, -50%); } }
@keyframes pumood-slideInLeft  { from { transform: translate(-100vw, -50%); } to { transform: translate(-50%, -50%); } }
@keyframes pumood-slideInRight { from { transform: translate(100vw, -50%); }  to { transform: translate(-50%, -50%); } }
@keyframes pumood-flipInX {
    0%   { opacity: 0; transform: translate(-50%, -50%) perspective(400px) rotate3d(1, 0, 0, 90deg); }
    100% { opacity: 1; transform: translate(-50%, -50%) perspective(400px); }
}
@keyframes pumood-flipInY {
    0%   { opacity: 0; transform: translate(-50%, -50%) perspective(400px) rotate3d(0, 1, 0, 90deg); }
    100% { opacity: 1; transform: translate(-50%, -50%) perspective(400px); }
}
@keyframes pumood-rotateIn {
    0%   { opacity: 0; transform: translate(-50%, -50%) rotate3d(0, 0, 1, -200deg); }
    100% { opacity: 1; transform: translate(-50%, -50%); }
}

/* === Out-Keyframes (Reverse-Pendants) === */
@keyframes pumood-fadeOut      { from { opacity: 1; } to { opacity: 0; } }
@keyframes pumood-fadeOutDown  { from { opacity: 1; } to { opacity: 0; transform: translate(-50%, calc(-50% + 30px)); } }
@keyframes pumood-fadeOutUp    { from { opacity: 1; } to { opacity: 0; transform: translate(-50%, calc(-50% - 30px)); } }
@keyframes pumood-fadeOutLeft  { from { opacity: 1; } to { opacity: 0; transform: translate(calc(-50% - 30px), -50%); } }
@keyframes pumood-fadeOutRight { from { opacity: 1; } to { opacity: 0; transform: translate(calc(-50% + 30px), -50%); } }
@keyframes pumood-zoomOut      { from { opacity: 1; } 50% { opacity: 0; transform: translate(-50%, -50%) scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } }
@keyframes pumood-zoomOutDown  { 40% { opacity: 1; transform: translate(-50%, calc(-50% - 60px)) scale3d(0.475, 0.475, 0.475); } to { opacity: 0; transform: translate(-50%, 100vh) scale3d(0.1, 0.1, 0.1); } }
@keyframes pumood-zoomOutUp    { 40% { opacity: 1; transform: translate(-50%, calc(-50% + 60px)) scale3d(0.475, 0.475, 0.475); } to { opacity: 0; transform: translate(-50%, -100vh) scale3d(0.1, 0.1, 0.1); } }
@keyframes pumood-bounceOut {
    20%  { transform: translate(-50%, -50%) scale3d(0.9, 0.9, 0.9); }
    50%, 55% { opacity: 1; transform: translate(-50%, -50%) scale3d(1.1, 1.1, 1.1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale3d(0.3, 0.3, 0.3); }
}
@keyframes pumood-bounceOutDown {
    20%  { transform: translate(-50%, calc(-50% + 10px)); }
    40%, 45% { opacity: 1; transform: translate(-50%, calc(-50% - 20px)); }
    100% { opacity: 0; transform: translate(-50%, 100vh); }
}
@keyframes pumood-bounceOutUp {
    20%  { transform: translate(-50%, calc(-50% - 10px)); }
    40%, 45% { opacity: 1; transform: translate(-50%, calc(-50% + 20px)); }
    100% { opacity: 0; transform: translate(-50%, -100vh); }
}
@keyframes pumood-slideOutDown  { from { transform: translate(-50%, -50%); } to { transform: translate(-50%, 100vh); } }
@keyframes pumood-slideOutUp    { from { transform: translate(-50%, -50%); } to { transform: translate(-50%, -100vh); } }
@keyframes pumood-slideOutLeft  { from { transform: translate(-50%, -50%); } to { transform: translate(-100vw, -50%); } }
@keyframes pumood-slideOutRight { from { transform: translate(-50%, -50%); } to { transform: translate(100vw, -50%); } }
@keyframes pumood-flipOutX {
    0%   { transform: translate(-50%, -50%) perspective(400px); }
    100% { opacity: 0; transform: translate(-50%, -50%) perspective(400px) rotate3d(1, 0, 0, 90deg); }
}
@keyframes pumood-flipOutY {
    0%   { transform: translate(-50%, -50%) perspective(400px); }
    100% { opacity: 0; transform: translate(-50%, -50%) perspective(400px) rotate3d(0, 1, 0, 90deg); }
}
@keyframes pumood-rotateOut {
    0%   { transform: translate(-50%, -50%); }
    100% { opacity: 0; transform: translate(-50%, -50%) rotate3d(0, 0, 1, 200deg); }
}

/* Trigger-Element vom Shortcode — unsichtbar, aber im Layout präsent */
.pumood-trigger {
    display: inline-block;
    width: 0;
    height: 0;
    pointer-events: none;
    overflow: hidden;
}