/* CLAUDE: Cookie Notice Custom Styles */
/* CLAUDE: Passt Cookie-Banner an Löwenherz Immobilien Theme an */
/* CLAUDE: Nutzt Theme-Variablen für konsistentes Design */

/* ========================================
   CLAUDE: COOKIE BANNER CONTAINER
   ======================================== */

/* CLAUDE: Hauptcontainer - nutzt Theme-Farben */
/* CLAUDE: z-index 100001 garantiert Sichtbarkeit über allen anderen Elementen */
#cookie-notice {
    font-family: var(--lhi-font-sans) !important;
    background-color: var(--lhi-color-text) !important;
    border-top: 3px solid var(--lhi-color-gold) !important;
    padding: var(--lhi-space-md) var(--lhi-space-lg) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
    z-index: 100001 !important;
}

/* CLAUDE: Innerer Container - zentriert auf Content-Breite */
/* CLAUDE: WICHTIG: Kein display: flex !important hier, da .cookie-notice-hidden display: none braucht */
#cookie-notice .cookie-notice-container {
    max-width: var(--lhi-content-wide) !important;
    margin: 0 auto !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--lhi-space-md) !important;
}

/* CLAUDE: Flex-Layout nur wenn Banner sichtbar ist (nicht hidden) */
#cookie-notice:not(.cookie-notice-hidden) .cookie-notice-container {
    display: flex !important;
}

/* ========================================
   CLAUDE: TEXT STYLING
   ======================================== */

/* CLAUDE: Banner-Text */
#cookie-notice .cn-text-container {
    flex: 1 !important;
    min-width: 300px !important;
}

#cookie-notice .cn-text-container p {
    color: var(--lhi-color-bg) !important;
    font-size: var(--lhi-font-size-sm) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* CLAUDE: Datenschutz-Link im Text */
#cookie-notice .cn-text-container a,
#cookie-notice a.cn-privacy-policy-link {
    color: var(--lhi-color-gold-light) !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
    transition: color var(--lhi-transition-fast) !important;
}

#cookie-notice .cn-text-container a:hover,
#cookie-notice a.cn-privacy-policy-link:hover {
    color: var(--lhi-color-white) !important;
}

/* ========================================
   CLAUDE: BUTTONS
   ======================================== */

/* CLAUDE: Button-Container */
#cookie-notice .cn-buttons-container {
    display: flex !important;
    gap: var(--lhi-space-sm) !important;
    flex-wrap: wrap !important;
}

/* CLAUDE: Basis-Button-Styles */
/* CLAUDE: pointer-events: auto stellt sicher, dass Buttons klickbar sind */
#cookie-notice .cn-buttons-container a,
#cookie-notice .cn-buttons-container button {
    font-family: var(--lhi-font-sans) !important;
    font-size: var(--lhi-font-size-sm) !important;
    font-weight: 600 !important;
    padding: 0.625rem 1.25rem !important;
    border-radius: var(--lhi-radius-sm) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all var(--lhi-transition-fast) !important;
    border: 2px solid transparent !important;
    pointer-events: auto !important;
    position: relative !important;
}

/* CLAUDE: Akzeptieren-Button (Primary) */
#cookie-notice .cn-buttons-container .cn-set-cookie,
#cookie-notice .cn-buttons-container #cn-accept-cookie {
    background-color: var(--lhi-color-gold) !important;
    color: var(--lhi-color-white) !important;
    border-color: var(--lhi-color-gold) !important;
}

#cookie-notice .cn-buttons-container .cn-set-cookie:hover,
#cookie-notice .cn-buttons-container #cn-accept-cookie:hover {
    background-color: var(--lhi-color-secondary) !important;
    border-color: var(--lhi-color-secondary) !important;
}

/* CLAUDE: Ablehnen-Button (Secondary/Outline) */
#cookie-notice .cn-buttons-container .cn-refuse-cookie,
#cookie-notice .cn-buttons-container #cn-refuse-cookie {
    background-color: transparent !important;
    color: var(--lhi-color-bg) !important;
    border-color: var(--lhi-color-bg) !important;
}

#cookie-notice .cn-buttons-container .cn-refuse-cookie:hover,
#cookie-notice .cn-buttons-container #cn-refuse-cookie:hover {
    background-color: var(--lhi-color-bg) !important;
    color: var(--lhi-color-text) !important;
}

/* CLAUDE: Datenschutz-Link als Button */
#cookie-notice .cn-buttons-container .cn-more-info {
    background-color: transparent !important;
    color: var(--lhi-color-gold-light) !important;
    border-color: transparent !important;
    text-decoration: underline !important;
}

#cookie-notice .cn-buttons-container .cn-more-info:hover {
    color: var(--lhi-color-white) !important;
}

/* ========================================
   CLAUDE: REVOKE CONTAINER - AUSGEBLENDET
   ======================================== */

/* CLAUDE: Revoke-Container und schwebendes Element komplett ausblenden */
/* CLAUDE: Stattdessen wird ein Cookie-Einstellungen Link im Footer angezeigt */
/* CLAUDE: Dies ist eine bessere UX als das störende schwebende Banner */

/* CLAUDE: Schwebendes Revoke-Element ausblenden */
#cookie-notice-revoke {
    display: none !important;
}

/* CLAUDE: Revoke-Container innerhalb des Banners ausblenden */
#cookie-notice .cookie-revoke-container {
    display: none !important;
}

/* CLAUDE: Wenn nur Revoke sichtbar wäre, Banner komplett verstecken */
#cookie-notice.cookie-notice-hidden:not(.cookie-revoke-hidden) {
    display: none !important;
}

/* ========================================
   CLAUDE: FOOTER COOKIE-EINSTELLUNGEN BUTTON
   ======================================== */

/* CLAUDE: Button im Footer-Bottom für Cookie-Einstellungen */
/* CLAUDE: Erscheint nur wenn User bereits Cookies akzeptiert/abgelehnt hat */
.footer-cookie-settings {
    font-family: var(--lhi-font-sans) !important;
    font-size: var(--lhi-font-size-xs) !important;
    color: inherit !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-left: 1rem !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    opacity: 0.8 !important;
    transition: opacity var(--lhi-transition-fast) !important;
}

.footer-cookie-settings:hover,
.footer-cookie-settings:focus {
    opacity: 1 !important;
    text-decoration: underline !important;
}

.footer-cookie-settings:focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: 2px !important;
}

/* CLAUDE: Mobile Anpassung für Cookie-Einstellungen Button */
@media (max-width: 768px) {
    .footer-cookie-settings {
        display: block !important;
        margin-left: 0 !important;
        margin-top: 0.5rem !important;
        font-size: 0.75rem !important;
    }
}

/* ========================================
   CLAUDE: RESPONSIVE - MOBILE OPTIMIERUNG
   ======================================== */

/* CLAUDE: Tablet Breakpoint (768px) */
/* CLAUDE: Erstes Layout-Anpassung für mittlere Screens */
@media (max-width: 768px) {
    #cookie-notice {
        padding: var(--lhi-space-sm) var(--lhi-space-md) !important;
        /* CLAUDE: Safe-Area für iPhone X+ - Padding unten für Home-Indicator */
        padding-bottom: calc(var(--lhi-space-sm) + env(safe-area-inset-bottom, 0px)) !important;
    }

    #cookie-notice .cookie-notice-container {
        flex-direction: column !important;
        text-align: center !important;
        gap: var(--lhi-space-sm) !important;
    }

    #cookie-notice .cn-text-container {
        min-width: 100% !important;
        width: 100% !important;
    }

    /* CLAUDE: Text etwas größer für bessere Lesbarkeit auf Tablet */
    #cookie-notice .cn-text-container,
    #cookie-notice .cn-text-container p {
        font-size: 0.9375rem !important; /* 15px */
        line-height: 1.5 !important;
    }

    #cookie-notice .cn-buttons-container {
        justify-content: center !important;
        width: 100% !important;
        gap: var(--lhi-space-xs) !important;
    }

    /* CLAUDE: Touch-freundliche Buttons - min 44px Höhe (Apple HIG) */
    #cookie-notice .cn-buttons-container a,
    #cookie-notice .cn-buttons-container button {
        flex: 1 1 auto !important;
        min-width: 140px !important;
        min-height: 44px !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.9375rem !important; /* 15px */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* CLAUDE: Mobile Breakpoint (480px) */
/* CLAUDE: Optimierung für Standard-Smartphones */
@media (max-width: 480px) {
    #cookie-notice {
        padding: var(--lhi-space-sm) !important;
        padding-bottom: calc(var(--lhi-space-sm) + env(safe-area-inset-bottom, 0px)) !important;
        /* CLAUDE: Etwas mehr Schatten für bessere Abgrenzung */
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.2) !important;
    }

    #cookie-notice .cookie-notice-container {
        gap: var(--lhi-space-xs) !important;
    }

    /* CLAUDE: Kompakterer Text auf Mobile */
    #cookie-notice .cn-text-container,
    #cookie-notice .cn-text-container p {
        font-size: 0.875rem !important; /* 14px */
        line-height: 1.45 !important;
    }

    /* CLAUDE: Buttons als Stack (untereinander) auf Mobile */
    #cookie-notice .cn-buttons-container {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    /* CLAUDE: Full-Width Buttons auf Mobile */
    #cookie-notice .cn-buttons-container a,
    #cookie-notice .cn-buttons-container button {
        width: 100% !important;
        min-width: unset !important;
        max-width: 100% !important;
        min-height: 48px !important; /* Größer für bessere Touch-Targets */
        padding: 0.875rem 1rem !important;
        font-size: 1rem !important; /* 16px - verhindert iOS Zoom */
    }

    /* CLAUDE: Datenschutz-Link als kleinerer Text-Link (nicht als Button) */
    #cookie-notice .cn-buttons-container .cn-more-info {
        width: auto !important;
        min-height: 36px !important;
        padding: 0.5rem !important;
        font-size: 0.8125rem !important; /* 13px */
        order: 3 !important; /* Nach den Hauptbuttons */
    }

    /* CLAUDE: Close-Button (X) größer für Touch */
    #cookie-notice .cn-close-icon {
        width: 44px !important;
        height: 44px !important;
        right: 8px !important;
        top: 8px !important;
        margin: 0 !important;
        padding: 12px !important;
    }

    #cookie-notice .cn-close-icon:before,
    #cookie-notice .cn-close-icon:after {
        height: 18px !important;
        width: 2px !important;
        top: 13px !important;
        left: 21px !important;
    }
}

/* CLAUDE: Sehr kleine Screens (375px und kleiner) */
/* CLAUDE: iPhone SE, ältere Geräte */
@media (max-width: 375px) {
    #cookie-notice {
        padding: 0.75rem 0.625rem !important;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* CLAUDE: Noch kompakterer Text */
    #cookie-notice .cn-text-container,
    #cookie-notice .cn-text-container p {
        font-size: 0.8125rem !important; /* 13px */
        line-height: 1.4 !important;
    }

    /* CLAUDE: Buttons etwas schmaler */
    #cookie-notice .cn-buttons-container a,
    #cookie-notice .cn-buttons-container button {
        padding: 0.75rem 0.875rem !important;
        font-size: 0.9375rem !important; /* 15px */
    }

    #cookie-notice .cn-buttons-container .cn-more-info {
        font-size: 0.75rem !important; /* 12px */
    }
}

/* CLAUDE: Landscape-Modus auf Mobile */
/* CLAUDE: Kompakteres Layout wenn Höhe begrenzt ist */
@media (max-width: 896px) and (max-height: 450px) and (orientation: landscape) {
    #cookie-notice {
        padding: 0.5rem 1rem !important;
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)) !important;
        /* CLAUDE: Auch Safe-Area links/rechts für Notch im Landscape */
        padding-left: calc(1rem + env(safe-area-inset-left, 0px)) !important;
        padding-right: calc(1rem + env(safe-area-inset-right, 0px)) !important;
    }

    #cookie-notice .cookie-notice-container {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        text-align: left !important;
        gap: 1rem !important;
    }

    #cookie-notice .cn-text-container {
        flex: 1 !important;
        min-width: 0 !important;
    }

    #cookie-notice .cn-text-container,
    #cookie-notice .cn-text-container p {
        font-size: 0.8125rem !important; /* 13px */
        line-height: 1.35 !important;
    }

    #cookie-notice .cn-buttons-container {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        flex-shrink: 0 !important;
    }

    #cookie-notice .cn-buttons-container a,
    #cookie-notice .cn-buttons-container button {
        width: auto !important;
        min-width: auto !important;
        min-height: 40px !important;
        padding: 0.5rem 0.875rem !important;
        font-size: 0.8125rem !important;
    }

    /* CLAUDE: Datenschutz-Link verstecken im Landscape (Platzsparen) */
    #cookie-notice .cn-buttons-container .cn-more-info {
        display: none !important;
    }
}

/* ========================================
   CLAUDE: ACCESSIBILITY
   ======================================== */

/* CLAUDE: Fokus-States für Tastaturnavigation */
#cookie-notice .cn-buttons-container a:focus-visible,
#cookie-notice .cn-buttons-container button:focus-visible {
    outline: 2px solid var(--lhi-color-gold-light) !important;
    outline-offset: 2px !important;
}

/* CLAUDE: Reduced Motion */
/* CLAUDE: WICHTIG - Bei deaktivierten Animationen muss das Banner trotzdem verstecken */
/* CLAUDE: Das Plugin wartet auf animationend Event, das bei animation:none nie feuert */
@media (prefers-reduced-motion: reduce) {
    #cookie-notice,
    #cookie-notice * {
        transition: none !important;
        animation: none !important;
    }

    /* CLAUDE: Fallback - Banner sofort verstecken wenn nicht mehr visible */
    /* CLAUDE: Normalerweise setzt JS cookie-notice-hidden nach animationend */
    /* CLAUDE: Bei animation:none feuert animationend nie - daher dieser Fallback */
    #cookie-notice:not(.cookie-notice-visible) .cookie-notice-container {
        display: none !important;
    }
}

/* CLAUDE: Fallback wenn hidden-Klasse gesetzt */
/* CLAUDE: Verstärkt die Plugin-Regeln mit !important */
#cookie-notice.cookie-notice-hidden {
    display: none !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* CLAUDE: Sicherstellen dass Banner bei hidden-Klasse wirklich versteckt ist */
#cookie-notice.cookie-notice-hidden .cookie-notice-container {
    display: none !important;
}