/**
 * Share to Social - Frontend CSS
 *
 * Enthält alle Stile für:
 * - Inline-Modus
 * - Popup (Trigger, Overlay, Container, Animationen)
 * - Floating (Sticky Bar)
 * - Mobile Bottom Bar
 * - Icon-Styling (5 Sets, Filter, Dark Mode)
 * - Hover-Effekte und Animationen
 * - Copy-to-Clipboard Feedback
 * - Barrierefreiheit (Focus-Rahmen)
 * - Responsive Breakpoints
 *
 * @package Share_To_Social
 * @since   1.0.0
 */

/* =====================================================================
   1. BASE & RESET
   ===================================================================== */

/* Box-Sizing für alle STS-Container */
.sts-container,
.sts-container *,
.sts-popup,
.sts-popup *,
.sts-popup-overlay,
.sts-floating,
.sts-floating *,
.sts-mobile-bar,
.sts-mobile-bar * {
        box-sizing: border-box;
}

/* =====================================================================
   BUTTON-BASIS-STYLES (global, für alle Kontexte)
   Diese Styles MÜSSEN global sein, damit Buttons in Popup, Inline,
   Floating und Mobile-Bar identisch aussehen.
   ===================================================================== */

.sts-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        cursor: pointer !important;
        border: none !important;
        outline: none !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        position: relative !important;
        overflow: visible !important;
        vertical-align: middle !important;
        flex-shrink: 0 !important;
        line-height: 0 !important;
        background-size: cover !important;
        background-position: center !important;
}

/* Icon-Styling (global) */
.sts-btn .sts-icon {
        width: 60% !important;
        height: 60% !important;
        display: block !important;
        margin: auto !important;
        pointer-events: none !important;
}

.sts-btn .sts-icon-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        display: block !important;
        pointer-events: none !important;
}

/* Brand-Color-Modus: weiße Icons */
.sts-btn.sts-brand .sts-icon {
        color: #ffffff !important;
        fill: #ffffff !important;
}

/* Glass-Set: Icons behalten ihre Gradient-Füllung */
.sts-btn.sts-brand .sts-icon[style*="fill: url"],
.sts-btn .sts-icon defs {
        fill: none !important;
}

/* =====================================================================
   3. INLINE-MODUS
   ===================================================================== */

.sts-container.sts-inline {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0;
}

.sts-container.sts-inline .sts-btn {
        margin: 0;
}

/* =====================================================================
   4. POPUP-MODUS
   ===================================================================== */

.sts-popup-trigger {
        display: inline-block;
}

.sts-popup-open {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #333;
        color: #fff;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        padding: 12px;
        width: 48px;
        height: 48px;
        transition: all 0.3s ease;
}

.sts-popup-open:hover,
.sts-popup-open:focus {
        background: #555;
        transform: scale(1.05);
}

.sts-popup-open .sts-trigger-icon {
        width: 24px;
        height: 24px;
}

.sts-popup-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99998;
        opacity: 0;
        transition: opacity 0.3s ease;
}

.sts-popup-overlay[hidden],
.sts-popup[hidden] {
        display: none !important;
}

.sts-popup-overlay-visible {
        opacity: 1 !important;
}

.sts-popup {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 99999;
        max-width: 90vw;
        max-height: 90vh;
        overflow: auto;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.sts-popup-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Header ohne Titel: nur Schließen-Button oben-rechts, kein Border */
.sts-popup-header-no-title {
        justify-content: flex-end !important;
        border-bottom: none !important;
        padding: 8px 8px 0 !important;
        min-height: 0 !important;
}

.sts-popup-title {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: #333;
}

.sts-popup-close {
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px;
        color: #666;
        opacity: 0.7;
        transition: opacity 0.2s;
        line-height: 0;
}

.sts-popup-close:hover,
.sts-popup-close:focus {
        opacity: 1;
        color: #333;
}

.sts-popup-body {
        padding: 20px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        align-items: center;
}

/* Popup-Buttons: KEINE eigenen Margin/Size-Overrides, damit sie
   identisch mit Inline-Buttons aussehen (Inline-Styles vom PHP gewinnen). */
.sts-popup-body .sts-btn {
        margin: 0 !important;
        flex: 0 0 auto !important;
}

/* Popup-Animationen */
.sts-popup-anim-in {
        animation: sts-popup-in 0.3s ease forwards;
}

.sts-popup-anim-in.sts-popup-anim-fade {
        animation-name: sts-fade-in;
}

.sts-popup-anim-in.sts-popup-anim-slide {
        animation-name: sts-slide-in;
}

.sts-popup-anim-in.sts-popup-anim-zoom {
        animation-name: sts-zoom-in;
}

.sts-popup-anim-out-fade {
        animation: sts-fade-out 0.3s ease forwards;
}

.sts-popup-anim-out-slide {
        animation: sts-slide-out 0.3s ease forwards;
}

.sts-popup-anim-out-zoom {
        animation: sts-zoom-out 0.3s ease forwards;
}

@keyframes sts-fade-in {
        from { opacity: 0; }
        to   { opacity: 1; }
}

@keyframes sts-fade-out {
        from { opacity: 1; }
        to   { opacity: 0; }
}

@keyframes sts-slide-in {
        from { opacity: 0; transform: translate(-50%, -60%); }
        to   { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes sts-slide-out {
        from { opacity: 1; transform: translate(-50%, -50%); }
        to   { opacity: 0; transform: translate(-50%, -60%); }
}

@keyframes sts-zoom-in {
        from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
        to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes sts-zoom-out {
        from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        to   { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

/* =====================================================================
   5. FLOATING-MODUS
   ===================================================================== */

.sts-container.sts-floating {
        position: fixed;
        z-index: 9990;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 12px 8px;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 30px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
}

.sts-container.sts-float-right {
        right: 20px;
}

.sts-container.sts-float-left {
        left: 20px;
}

.sts-floating .sts-btn {
        margin: 0;
}

/* =====================================================================
   6. MOBILE BOTTOM BAR
   ===================================================================== */

.sts-container.sts-mobile-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9990;
        display: none;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: center;
        padding: 8px 4px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        safe-area-inset-bottom: env(safe-area-inset-bottom);
}

.sts-mobile-bar .sts-btn {
        flex: 1 1 auto;
        margin: 0 2px;
        min-width: 44px;
        min-height: 44px;
}

/* Mobile Bar nur auf Smartphones anzeigen */
@media (max-width: 768px) {
        .sts-container.sts-mobile-bar {
                display: flex;
        }

        /* Auf Mobile: Floating verbergen, falls mobile_bar auch aktiv */
        .sts-container.sts-floating {
                display: none;
        }
}

/* =====================================================================
   7. SMART DARK MODE
   ===================================================================== */

.sts-btn.sts-dark-mode {
        background-color: #1a1a1a !important;
        border: 1px solid rgba(255, 255, 255, 0.08);
}

.sts-btn.sts-dark-mode .sts-icon {
        color: #ffffff;
        fill: #ffffff;
}

.sts-container.sts-floating.sts-dark-mode,
.sts-container.sts-mobile-bar.sts-dark-mode {
        background: rgba(20, 20, 20, 0.95);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.sts-popup.sts-dark-mode {
        background: #1a1a1a !important;
        color: #fff;
}

.sts-popup.sts-dark-mode .sts-popup-title {
        color: #fff;
}

.sts-popup.sts-dark-mode .sts-popup-close {
        color: #ccc;
}

.sts-popup.sts-dark-mode .sts-popup-header {
        border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* =====================================================================
   8. COPY-LINK FEEDBACK
   ===================================================================== */

.sts-btn.sts-copied {
        background-color: #28a745 !important;
}

.sts-btn.sts-copied .sts-checkmark {
        color: #fff;
        width: 60%;
        height: 60%;
}

.sts-tooltip {
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        background: #333;
        color: #fff;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s, visibility 0.2s;
        pointer-events: none;
        z-index: 100;
}

.sts-tooltip::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: #333;
}

.sts-tooltip.sts-tooltip-visible {
        opacity: 1;
        visibility: visible;
}

.sts-tooltip.sts-tooltip-error {
        background: #dc3545;
}

.sts-tooltip.sts-tooltip-error::after {
        border-top-color: #dc3545;
}

/* =====================================================================
   9. HOVER-EFFEKTE
   ===================================================================== */

.sts-btn:hover,
.sts-btn:focus {
        z-index: 2;
        transform: translateY(-1px);
}

/* === Hover-Animationen === */
.sts-hover-wobble:hover {
        animation: sts-wobble 0.6s ease;
}

.sts-hover-pulse:hover {
        animation: sts-pulse 0.6s ease;
}

.sts-hover-float:hover {
        animation: sts-float 0.6s ease;
}

.sts-hover-flip:hover {
        animation: sts-flip 0.5s ease;
}

.sts-hover-grow:hover {
        transform: scale(1.15);
}

.sts-hover-shrink:hover {
        transform: scale(0.9);
}

@keyframes sts-wobble {
        0%, 100% { transform: rotate(0); }
        15% { transform: rotate(-8deg); }
        30% { transform: rotate(7deg); }
        45% { transform: rotate(-5deg); }
        60% { transform: rotate(3deg); }
        75% { transform: rotate(-2deg); }
}

@keyframes sts-pulse {
        0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 currentColor; }
        50% { transform: scale(1.05); box-shadow: 0 0 0 8px transparent; }
}

@keyframes sts-float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-6px); }
}

@keyframes sts-flip {
        0% { transform: rotateY(0); }
        100% { transform: rotateY(360deg); }
}

/* =====================================================================
   10. BARRIEREFREIHEIT (Accessibility / a11y)
   ===================================================================== */

/* Sichtbarer Focus-Rahmen für sehbehinderte Nutzer */
.sts-btn:focus-visible,
.sts-popup-open:focus-visible,
.sts-popup-close:focus-visible {
        outline: 3px solid #4a90d9;
        outline-offset: 3px;
}

.sts-btn:focus:not(:focus-visible) {
        outline: none;
}

/* Screenreader-Only Helper */
.sts-sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
}

/* Respektiert prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
        .sts-btn,
        .sts-popup-open,
        .sts-popup-overlay,
        .sts-popup {
                transition: none !important;
                animation: none !important;
        }
}

/* =====================================================================
   11. ENTRANCE-ANIMATIONEN
   ===================================================================== */

.sts-anim-fade:not(.sts-anim-played),
.sts-anim-slide:not(.sts-anim-played),
.sts-anim-zoom:not(.sts-anim-played),
.sts-anim-bounce:not(.sts-anim-played),
.sts-anim-flip:not(.sts-anim-played),
.sts-anim-fadeup:not(.sts-anim-played) {
        opacity: 0;
}

.sts-anim-fade.sts-anim-played {
        animation: sts-entrance-fade 0.6s ease forwards;
}

.sts-anim-slide.sts-anim-played {
        animation: sts-entrance-slide 0.6s ease forwards;
}

.sts-anim-zoom.sts-anim-played {
        animation: sts-entrance-zoom 0.6s ease forwards;
}

.sts-anim-bounce.sts-anim-played {
        animation: sts-entrance-bounce 0.7s ease forwards;
}

.sts-anim-flip.sts-anim-played {
        animation: sts-entrance-flip 0.6s ease forwards;
}

.sts-anim-fadeup.sts-anim-played {
        animation: sts-entrance-fadeup 0.6s ease forwards;
}

@keyframes sts-entrance-fade {
        from { opacity: 0; }
        to   { opacity: 1; }
}

@keyframes sts-entrance-slide {
        from { opacity: 0; transform: translateX(-20px); }
        to   { opacity: 1; transform: translateX(0); }
}

@keyframes sts-entrance-zoom {
        from { opacity: 0; transform: scale(0.6); }
        to   { opacity: 1; transform: scale(1); }
}

@keyframes sts-entrance-bounce {
        0%   { opacity: 0; transform: translateY(-40px); }
        60%  { opacity: 1; transform: translateY(8px); }
        100% { transform: translateY(0); }
}

@keyframes sts-entrance-flip {
        from { opacity: 0; transform: perspective(400px) rotateY(90deg); }
        to   { opacity: 1; transform: perspective(400px) rotateY(0); }
}

@keyframes sts-entrance-fadeup {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
   12. ADMIN DEBUG-BUTTON
   ===================================================================== */

.sts-debug-cache {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.sts-debug-cache-btn {
        display: inline-flex !important;
        align-items: center;
        gap: 4px;
        background: #2271b1 !important;
        color: #fff !important;
        border: none !important;
        border-radius: 4px !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
        transition: background 0.2s;
}

.sts-debug-cache-btn:hover {
        background: #135e96 !important;
}

.sts-debug-cache-btn.sts-loading {
        opacity: 0.7;
        cursor: wait;
}

.sts-debug-cache-btn .dashicons {
        width: 14px;
        height: 14px;
        font-size: 14px;
        line-height: 1.4;
}

.sts-debug-cache-btn.sts-loading .dashicons {
        animation: sts-spin 1s linear infinite;
}

@keyframes sts-spin {
        from { transform: rotate(0); }
        to   { transform: rotate(360deg); }
}

.sts-debug-cache-result {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 10px;
        max-width: 350px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        font-size: 12px;
}

.sts-debug-cache-result ul {
        margin: 8px 0 0;
        padding-left: 16px;
}

.sts-debug-cache-result .sts-success {
        color: #2e7d32;
}

.sts-debug-cache-result .sts-error {
        color: #c62828;
}

/* =====================================================================
   13. RESPONSIVE BREAKPOINTS
   ===================================================================== */

/* Tablet */
@media (max-width: 980px) {
        .sts-container.sts-floating {
                padding: 8px 6px;
        }

        .sts-popup {
                width: 90vw !important;
                max-width: 400px;
        }
}

/* Smartphone */
@media (max-width: 480px) {
        .sts-container.sts-floating {
                /* Auf sehr kleinen Geräten Floating leicht verkleinern */
                transform: scale(0.9);
                transform-origin: top right;
        }

        .sts-container.sts-float-left {
                transform-origin: top left;
        }

        .sts-popup-body {
                padding: 12px;
        }

        /* WICHTIG: Popup-Buttons dürfen NICHT auf 50% Breite gezwungen werden,
           sonst sehen sie anders aus als Inline-Buttons. */
        .sts-popup-body .sts-btn {
                flex: 0 0 auto !important;
        }
}

/* =====================================================================
   14. NETWORK-SPECIFIC BRAND COLORS (CSS-Variablen)
   ===================================================================== */

.sts-btn.sts-btn-copy_link { --sts-network-color: #6c757d; }
.sts-btn.sts-btn-facebook { --sts-network-color: #1877f2; }
.sts-btn.sts-btn-whatsapp { --sts-network-color: #25d366; }
.sts-btn.sts-btn-telegram { --sts-network-color: #0088cc; }
.sts-btn.sts-btn-twitter  { --sts-network-color: #000000; }
.sts-btn.sts-btn-signal   { --sts-network-color: #3a76f0; }
.sts-btn.sts-btn-email    { --sts-network-color: #ea4335; }
.sts-btn.sts-btn-linkedin { --sts-network-color: #0a66c2; }
.sts-btn.sts-btn-sms      { --sts-network-color: #4caf50; }
.sts-btn.sts-btn-pinterest { --sts-network-color: #bd081c; }
.sts-btn.sts-btn-reddit   { --sts-network-color: #ff4500; }
.sts-btn.sts-btn-tumblr   { --sts-network-color: #36465d; }
.sts-btn.sts-btn-vk       { --sts-network-color: #4a76a8; }

/* Hover mit Brand-Color via CSS-Variable */
.sts-btn.sts-brand:hover,
.sts-btn.sts-brand:focus {
        background-color: var(--sts-network-color) !important;
}

/* =====================================================================
   15. DIVI VISUAL BUILDER KOMPATIBILITÄT
   ===================================================================== */

.et-fb .sts-container.sts-floating {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;
}

.et-fb .sts-container.sts-mobile-bar {
        position: relative !important;
        display: flex !important;
}

.et-fb .sts-popup {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        display: block !important;
}

.et-fb .sts-popup-overlay {
        display: none !important;
}