/**
 * DIRS21 Booking Widget Icons
 * Robuste Icon-Implementierung mit Theme-Kompatibilität
 */

/* Haupt-Icon-Klasse mit Theme-Kompatibilität */
.dirs21-calendar-icon {
    display: inline-block;
    font-size: inherit;
    line-height: 1;
    color: inherit;
    font-style: normal;
    text-decoration: none;
    speak: none;
    vertical-align: middle;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Primäres Icon - verwendet Theme Icons falls verfügbar, sonst Unicode Fallback */
.dirs21-calendar-icon::before {
    /* Versuche zuerst Theme Icons */
    font-family: 'icons', 'Font Awesome 5 Free', 'Dashicons', sans-serif;
    content: '\1f4c5'; /* Unicode Calendar Emoji als Hauptfallback */
    font-weight: normal;
}

/* Falls Theme Icons verfügbar sind, verwende diese */
body .dirs21-calendar-icon::before {
    font-family: 'icons', sans-serif;
    content: '\1f4c5'; /* Unicode Calendar als sicherer Fallback */
}

/* Theme-spezifische Icon-Codes - Falls Loewen Theme aktiv */
.loewen-theme .dirs21-calendar-icon::before,
body.loewen-theme .dirs21-calendar-icon::before {
    font-family: 'icons';
    content: '\1f4c5'; /* Calendar Unicode */
}

/* FontAwesome Fallback */
.dirs21-use-fontawesome .dirs21-calendar-icon::before {
    content: '\f073'; /* FontAwesome Calendar */
    font-family: 'Font Awesome 5 Free', 'FontAwesome', sans-serif;
    font-weight: 900;
}

/* Material Icons Fallback */
.dirs21-use-material .dirs21-calendar-icon::before {
    content: 'event'; /* Material Icons Event/Calendar */
    font-family: 'Material Icons', sans-serif;
    font-weight: normal;
}

/* Dashicons Fallback (WordPress Admin) */
.dirs21-use-dashicons .dirs21-calendar-icon::before {
    content: '\f145'; /* Dashicons Calendar */
    font-family: 'Dashicons', sans-serif;
}

/* Unicode Emoji Fallback */
.dirs21-use-emoji .dirs21-calendar-icon::before {
    content: '📅'; /* Calendar Emoji */
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', system-ui, sans-serif;
}

/* Text Fallback */
.dirs21-use-text .dirs21-calendar-icon::before {
    content: 'CAL'; /* Text Fallback */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: bold;
    font-size: 0.7em;
}

/* SVG Icon Fallback */
.dirs21-use-svg .dirs21-calendar-icon::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"%3E%3Cpath d="M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.1 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"/%3E%3C/svg%3E');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Icon-Größen-Varianten */
.dirs21-calendar-icon.dirs21-icon-small {
    font-size: 14px;
}

.dirs21-calendar-icon.dirs21-icon-medium {
    font-size: 18px;
}

.dirs21-calendar-icon.dirs21-icon-large {
    font-size: 24px;
}

/* Farbvarianten */
.dirs21-calendar-icon.dirs21-icon-white::before {
    color: #ffffff;
}

.dirs21-calendar-icon.dirs21-icon-dark::before {
    color: #333333;
}

.dirs21-calendar-icon.dirs21-icon-brand::before {
    color: #C59E5B;
}

/* Animations-Effekte */
@keyframes dirs21-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.dirs21-calendar-icon.dirs21-animate-pulse {
    animation: dirs21-pulse 2s infinite;
}

@keyframes dirs21-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

.dirs21-calendar-icon.dirs21-animate-bounce {
    animation: dirs21-bounce 1s infinite;
}

/* Browser-spezifische Anpassungen */

/* Chrome & Safari */
@supports (-webkit-appearance: none) {
    .dirs21-calendar-icon::before {
        -webkit-text-stroke: 0.5px currentColor;
    }
}

/* Firefox */
@-moz-document url-prefix() {
    .dirs21-calendar-icon::before {
        text-shadow: 0 0 1px currentColor;
    }
}

/* Edge */
@supports (-ms-ime-align: auto) {
    .dirs21-calendar-icon::before {
        font-weight: bold;
    }
}

/* Auto-Fallback-System */
.dirs21-calendar-icon {
    /* Automatisches Fallback-System durch CSS-Feature-Queries */
}

/* Wenn keine Icon-Font verfügbar ist */
@supports not (font-family: 'dirs21-calendar-font') {
    .dirs21-calendar-icon::before {
        content: '📅';
        font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', system-ui, sans-serif;
    }
}

/* Für ältere Browser */
.no-fontface .dirs21-calendar-icon::before {
    content: '[CAL]';
    font-family: monospace;
    font-weight: bold;
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .dirs21-calendar-icon::before {
        text-shadow: 0 0 2px currentColor;
        font-weight: 900;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .dirs21-calendar-icon.dirs21-animate-pulse,
    .dirs21-calendar-icon.dirs21-animate-bounce {
        animation: none;
    }
}

/* Print Styles */
@media print {
    .dirs21-calendar-icon::before {
        content: '[Kalender]';
        font-family: serif;
        font-weight: bold;
    }
}

/* RTL Support */
[dir="rtl"] .dirs21-calendar-icon {
    transform: scaleX(-1);
}

/* Mobile Optimierung */
@media screen and (max-width: 768px) {
    .dirs21-calendar-icon {
        font-size: 16px; /* Etwas kleiner auf mobilen Geräten */
    }
}

/* Kontrast-Modi für verschiedene Hintergründe */
.dirs21-on-dark .dirs21-calendar-icon::before {
    color: #ffffff;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.dirs21-on-light .dirs21-calendar-icon::before {
    color: #333333;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
}

.dirs21-on-brand .dirs21-calendar-icon::before {
    color: #ffffff;
    text-shadow: 0 0 2px rgba(197, 158, 91, 0.8);
}

/* Icon-Loading-Zustand */
.dirs21-calendar-icon.dirs21-loading::before {
    content: '⏳';
    animation: dirs21-pulse 1s infinite;
}

/* Icon-Error-Zustand */
.dirs21-calendar-icon.dirs21-error::before {
    content: '❌';
    color: #dc3545;
}

/* Icon-Success-Zustand */
.dirs21-calendar-icon.dirs21-success::before {
    content: '✅';
    color: #28a745;
}