/**
 * Bottom-Right Stack Layout
 * Intelligente Positionierung für alle fixed Bottom-Right Elemente
 *
 * Elemente (von unten nach oben):
 * 1. Sticky Footer (wenn aktiviert)
 * 2. Cookie Notice Banner (mittig über Footer, stört Chatbot nicht)
 * 3. Cookie Revoke Button (rechts)
 * 4. Language Switcher (Floating, rechts)
 * 5. Chatbot Icon (rechts, oberster Element)
 *
 * ⚠️ WICHTIG: Cookie Notice wird MITTIG positioniert, damit Chatbot rechts frei bleibt!
 *
 * @package SMG_Mall_Theme
 * @since 2.1.6
 */

:root {
    /* ========================================
       BOTTOM-RIGHT STACK SPACING
       ======================================== */
    --br-base-bottom: 20px;          /* Basis-Abstand vom Boden */
    --br-base-right: 20px;           /* Basis-Abstand von rechts */
    --br-element-gap: 16px;          /* Abstand zwischen Elementen */
    --br-footer-height: 0px;         /* Dynamisch: Footer-Höhe */
    --br-cookie-notice-height: 0px;  /* Dynamisch: Cookie Notice Höhe */

    /* Z-Index Hierarchie (von unten nach oben) */
    --z-footer-compact: 1000;
    --z-cookie-banner: 999999;       /* Höchste Priorität - Cookie Notice */
    --z-cookie-revoke: 999998;       /* Cookie Revoke Button */
    --z-lang-switcher: 10001;        /* Language Switcher */
    --z-chatbot: 10002;              /* Chatbot (oberster Element rechts) */
    --z-ai-modal: 1500;              /* AI Fullscreen Modal */
}

/* ========================================
   STICKY FOOTER HEIGHT DETECTION
   ======================================== */

/* Wenn Sticky Footer aktiv ist */
body.has-sticky-footer {
    --br-footer-height: 80px; /* Standard Footer Höhe */
}

/* ========================================
   COOKIE NOTICE BANNER
   Mittig über Sticky Footer positioniert
   ======================================== */

/* ⚠️ WICHTIG: Cookie Notice wird in cookie-consent/_styles.css positioniert
 *
 * Positionierung:
 * - Bar Style: bottom: var(--br-footer-height, 0px)
 * - Centered Variant: bottom: calc(var(--br-footer-height, 0px) + var(--br-base-bottom, 20px))
 * - Corner Style: Links positioniert, damit Chatbot rechts frei bleibt
 * - Bottom Sheet: bottom: var(--br-footer-height, 0px)
 *
 * Z-Index: var(--z-cookie-banner) = 999999 (höchste Priorität)
 *
 * Konflikte vermieden:
 * - Cookie Notice ist MITTIG → Chatbot Button rechts bleibt frei
 * - Cookie Notice ist ÜBER Footer → Footer bleibt sichtbar
 * - Cookie Revoke Button ist RECHTS → Neben Chatbot gestapelt
 */

/* ========================================
   LANGUAGE SWITCHER - FLOATING
   Optimierte Position über Footer & Cookie Button
   ======================================== */

.smg-lang-switcher-floating,
.trp-floater,
.trp-language-switcher-container.trp-floater,
[data-no-translation].trp-floater {
    position: fixed !important;
    right: var(--br-base-right) !important;
    z-index: var(--z-lang-switcher) !important;
    
    /* Desktop: Mittig vertikal */
    top: 50% !important;
    transform: translateY(-50%) !important;
    bottom: auto !important;
}

/* Mobile: Bottom statt Center */
@media (max-width: 768px) {
    .smg-lang-switcher-floating,
    .trp-floater,
    .trp-language-switcher-container.trp-floater,
    [data-no-translation].trp-floater {
        top: auto !important;
        transform: none !important;
        bottom: calc(
            var(--br-footer-height) + 
            var(--br-base-bottom) + 
            80px  /* Platz für Cookie Revoke + Chatbot */
        ) !important;
    }
    
    /* Mit Chatbot aktiv */
    body.has-chatbot .smg-lang-switcher-floating,
    body.has-chatbot .trp-floater,
    body.has-chatbot .trp-language-switcher-container.trp-floater,
    body.has-chatbot [data-no-translation].trp-floater {
        bottom: calc(
            var(--br-footer-height) + 
            var(--br-base-bottom) + 
            140px  /* Mehr Platz wenn Chatbot da ist */
        ) !important;
    }
    
    /* Mit Cookie Revoke aktiv */
    body.has-cookie-revoke .smg-lang-switcher-floating,
    body.has-cookie-revoke .trp-floater,
    body.has-cookie-revoke .trp-language-switcher-container.trp-floater,
    body.has-cookie-revoke [data-no-translation].trp-floater {
        bottom: calc(
            var(--br-footer-height) + 
            var(--br-base-bottom) + 
            120px  /* Cookie Button Höhe berücksichtigen */
        ) !important;
    }
    
    /* Mit beiden aktiv */
    body.has-chatbot.has-cookie-revoke .smg-lang-switcher-floating,
    body.has-chatbot.has-cookie-revoke .trp-floater,
    body.has-chatbot.has-cookie-revoke .trp-language-switcher-container.trp-floater,
    body.has-chatbot.has-cookie-revoke [data-no-translation].trp-floater {
        bottom: calc(
            var(--br-footer-height) + 
            var(--br-base-bottom) + 
            180px  /* Beide Elemente berücksichtigen */
        ) !important;
    }
}

/* ========================================
   COOKIE REVOKE BUTTON
   Optimierte Position über Footer
   ======================================== */

.smg-cookie-revoke-btn--sticky-bottom-right {
    position: fixed !important;
    right: var(--br-base-right) !important;
    z-index: var(--z-cookie-revoke) !important;
    bottom: calc(
        var(--br-footer-height) + 
        var(--br-base-bottom)
    ) !important;
}

/* Mit Chatbot aktiv: Höher positionieren */
body.has-chatbot .smg-cookie-revoke-btn--sticky-bottom-right {
    bottom: calc(
        var(--br-footer-height) + 
        var(--br-base-bottom) + 
        var(--br-element-gap) + 
        60px  /* Chatbot Icon Höhe */
    ) !important;
}

/* ========================================
   CHATBOT ICON/BUTTON
   Optimierte Position (oberster Element)
   ======================================== */

.ai-assistant-trigger,
.chatbot-trigger-btn {
    position: fixed !important;
    right: var(--br-base-right) !important;
    z-index: var(--z-chatbot) !important;
    bottom: calc(
        var(--br-footer-height) +
        var(--br-base-bottom)
    ) !important;
}

/* Chatbot Floating Button - NUR wenn Footer aktiv */
body.has-sticky-footer .chatbot-floating-btn {
    bottom: calc(
        var(--br-footer-height) +
        var(--br-base-bottom)
    ) !important;
}

/* ========================================
   MOBILE OPTIMIERUNGEN
   Kompaktere Positionierung & Stack
   ======================================== */

@media (max-width: 640px) {
    :root {
        --br-base-bottom: 16px;
        --br-base-right: 16px;
        --br-element-gap: 12px;
    }
    
    /* Sticky Footer Höhe auf Mobile anpassen */
    body.has-sticky-footer {
        --br-footer-height: 60px;
    }
    
    /* Language Switcher: Kompaktere Position */
    .smg-lang-switcher-floating,
    .trp-floater,
    .trp-language-switcher-container.trp-floater,
    [data-no-translation].trp-floater {
        right: 12px !important;
    }
    
    .smg-lang-switcher-floating .trp-language-switcher-container,
    .trp-floater .trp-language-switcher-container,
    .trp-language-switcher-container.trp-floater {
        padding: 8px !important;
        gap: 8px !important;
    }
    
    .smg-lang-switcher-floating .trp-ls-shortcode-language,
    .trp-floater .trp-ls-shortcode-language,
    .trp-language-switcher-container.trp-floater .trp-ls-shortcode-language {
        width: 40px !important;
        height: 40px !important;
    }
    
    /* Cookie Revoke: Kompakter */
    .smg-cookie-revoke-btn--sticky-bottom-right {
        right: 12px !important;
        padding: 0.625rem !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
    }
    
    .smg-cookie-revoke-btn--sticky-bottom-right .smg-cookie-revoke-btn-text {
        display: none !important;
    }
    
    .smg-cookie-revoke-btn--sticky-bottom-right svg {
        width: 18px !important;
        height: 18px !important;
    }
    
    /* Chatbot: Kompakter */
    .ai-assistant-trigger,
    .chatbot-trigger-btn {
        right: 12px !important;
        width: 56px !important;
        height: 56px !important;
    }

    body.has-sticky-footer .chatbot-floating-btn {
        right: 12px !important;
        width: 56px !important;
        height: 56px !important;
    }
}

/* ========================================
   LANDSCAPE MODE (Mobile)
   Weniger Platz vertikal
   ======================================== */

@media (max-width: 896px) and (max-height: 414px) and (orientation: landscape) {
    .smg-lang-switcher-floating,
    .trp-floater,
    .trp-language-switcher-container.trp-floater,
    [data-no-translation].trp-floater {
        top: auto !important;
        bottom: calc(
            var(--br-footer-height) + 
            10px
        ) !important;
        transform: none !important;
        right: 12px !important;
    }
    
    .smg-lang-switcher-floating .trp-language-switcher-container,
    .trp-floater .trp-language-switcher-container,
    .trp-language-switcher-container.trp-floater {
        flex-direction: row !important;
        padding: 6px !important;
        gap: 6px !important;
    }
    
    .smg-lang-switcher-floating .trp-ls-shortcode-language,
    .trp-floater .trp-ls-shortcode-language,
    .trp-language-switcher-container.trp-floater .trp-ls-shortcode-language {
        width: 36px !important;
        height: 36px !important;
    }
}

/* ========================================
   VISUAL DEBUG (Development Only)
   Auskommentieren für Production
   ======================================== */

/*
.smg-lang-switcher-floating,
.smg-cookie-revoke-btn--sticky-bottom-right,
.ai-assistant-trigger,
.chatbot-trigger-btn {
    outline: 2px dashed red !important;
    outline-offset: 2px !important;
}

.smg-lang-switcher-floating::before {
    content: 'Lang';
    position: absolute;
    top: -20px;
    left: 0;
    font-size: 10px;
    background: red;
    color: white;
    padding: 2px 4px;
    border-radius: 4px;
}

.smg-cookie-revoke-btn--sticky-bottom-right::before {
    content: 'Cookie';
    position: absolute;
    top: -20px;
    left: 0;
    font-size: 10px;
    background: orange;
    color: white;
    padding: 2px 4px;
    border-radius: 4px;
}

.ai-assistant-trigger::before,
.chatbot-trigger-btn::before {
    content: 'Chatbot';
    position: absolute;
    top: -20px;
    left: 0;
    font-size: 10px;
    background: blue;
    color: white;
    padding: 2px 4px;
    border-radius: 4px;
}
*/

/* ========================================
   ACCESSIBILITY
   Sicherstellen dass Elemente nicht überlappen
   ======================================== */

/* Wenn Language Switcher UND Cookie Button aktiv */
body.has-lang-switcher.has-cookie-revoke .smg-lang-switcher-floating {
    /* Zusätzlicher Abstand auf Mobile */
    @media (max-width: 768px) {
        bottom: calc(
            var(--br-footer-height) + 
            var(--br-base-bottom) + 
            80px  /* Cookie Button Höhe + Gap */
        ) !important;
    }
}

/* Wenn alle 3 Elemente aktiv (Lang + Cookie + Chatbot) */
body.has-lang-switcher.has-cookie-revoke.has-chatbot {
    /* Language Switcher ganz oben */
    @media (max-width: 768px) {
        .smg-lang-switcher-floating {
            bottom: calc(
                var(--br-footer-height) + 
                var(--br-base-bottom) + 
                200px  /* Maximaler Stack-Höhe */
            ) !important;
        }
    }
    
    /* Cookie Button in der Mitte */
    .smg-cookie-revoke-btn--sticky-bottom-right {
        bottom: calc(
            var(--br-footer-height) + 
            var(--br-base-bottom) + 
            80px  /* Über Chatbot */
        ) !important;
    }
    
    /* Chatbot ganz unten (Standard) */
    .ai-assistant-trigger,
    .chatbot-trigger-btn {
        bottom: calc(
            var(--br-footer-height) +
            var(--br-base-bottom)
        ) !important;
    }

    body.has-sticky-footer .chatbot-floating-btn {
        bottom: calc(
            var(--br-footer-height) +
            var(--br-base-bottom)
        ) !important;
    }
}

/* ========================================
   SMOOTH TRANSITIONS
   Sanfte Übergänge beim Ein-/Ausblenden
   ======================================== */

.smg-lang-switcher-floating,
.trp-floater,
.trp-language-switcher-container.trp-floater,
[data-no-translation].trp-floater,
.smg-cookie-revoke-btn--sticky-bottom-right,
.ai-assistant-trigger,
.chatbot-trigger-btn {
    transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                right 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ========================================
   PRINT STYLES
   Alle Bottom-Right Elemente ausblenden beim Drucken
   ======================================== */

@media print {
    .smg-lang-switcher-floating,
    .trp-floater,
    .trp-language-switcher-container.trp-floater,
    [data-no-translation].trp-floater,
    .smg-cookie-revoke-btn--sticky-bottom-right,
    .ai-assistant-trigger,
    .chatbot-trigger-btn {
        display: none !important;
    }
}