.python-app-wrapper {
        position: relative;
        width: 100vw;
        height: auto;
        min-height: 100vh;
        left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        margin-bottom: 0;
        background: none;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        z-index: 0;
        padding-bottom: 25px;
        font-family: Arial, sans-serif;
    }

    .python-app-wrapper::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
    }

    /* Fullscreen Video Background */
    .video-background {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: -1;
        overflow: hidden;
        background: #000;
    }
    .video-background video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        pointer-events: none;
    }
    .video-background,
    .video-background * {
        pointer-events: none;
    }
    
    /* Film ausblenden wenn nicht auf Homepage - CSS Fallback */
    body:has(.map-view) .video-background,
    body:has(.map-view-below) .video-background,
    body:has(.results-view) .video-background,
    body:has(.py-results-container) .video-background {
        opacity: 0 !important;
        /* transition: opacity 0.5s ease; - ENTFERNT: Verursacht Video-Flash zwischen Seiten */
    }
    
    /* Weißer Hintergrund als Fallback für Map und Results Seiten */
    body:has(.map-view),
    body:has(.map-view-below),
    body:has(.results-view),
    body:has(.py-results-container) {
        background-color: #f8f8f8 !important;
    }
    
    /* Dunklen Overlay auf Map und Results Seiten entfernen */
    body:has(.map-view) .python-app-wrapper::before,
    body:has(.map-view-below) .python-app-wrapper::before,
    body:has(.results-view) .python-app-wrapper::before,
    body:has(.py-results-container) .python-app-wrapper::before {
        display: none !important;
    }

    .py-card-content {
        width: 100%;
        padding: 0 30px 30px 30px;
        box-sizing: border-box;
    }

    .py-content {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 1800px;
        padding-top: 3vh;
        padding-bottom: 25px;
        text-align: center;
        margin-bottom: 0;
        font-family: Arial, sans-serif;
    }

    /* Startseite-spezifisches Layout - Content weiter nach unten */
    .python-app-wrapper .py-content.homepage-mode {
        padding-top: 10vh !important;
        margin-top: 2vh !important;
    }

    .py-card {
        background: transparent;
        color: rgba(255, 255, 255, 0.95);
        padding: 30px;
        border-radius: 10px;
        backdrop-filter: none;
        max-width: 1800px;
        margin: 0 auto;
        width: 95%;
        font-family: Arial, sans-serif;
    }

    .py-card h2 {
        font-size: 2rem;
        margin-bottom: 15px;
        color: rgba(255, 255, 255, 0.95);
        font-weight: 300;
        text-align: center;
        font-family: Arial, sans-serif;
    }

    .py-search-container {
        display: flex;
        flex-direction: column;
        max-width: 300px;
        margin: 0;
        padding: 0;
        position: relative;
    }

    /* STARTSEITE - Suchmaske mittig (nur wenn KEINE Map-Klassen vorhanden sind) */
    .py-search-container.homepage-center:not(.map-view):not(.map-view-below) {
        margin: 0 auto;
        max-width: 400px;
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 100;
    }

    /* MAP-SEITE - homepage-center komplett verstecken wenn Map-Klassen da sind */
    .py-search-container.homepage-center.map-view,
    .py-search-container.homepage-center.map-view-below {
        display: none !important;
    }

    /* MAP-SEITE - homepage-center KOMPLETT deaktivieren */
    .py-search-container.map-view.homepage-center,
    .py-search-container.map-view-below.homepage-center,
    .py-search-container.map-view,
    .py-search-container.map-view-below {
        position: static !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
    }

    /* Universelle Regel: Bei Map-Klassen immer statische Position */
    .py-search-container[class*="map-view"] {
        position: static !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        margin: 10px auto 20px auto !important;
    }

    /* NUKLEAR-OPTION: Verstecke homepage-center Suchmasken wenn Map-view Klassen vorhanden sind */
    .py-card-content .py-search-container.homepage-center.map-view,
    .py-card-content .py-search-container.homepage-center.map-view-below,
    .py-search-container.homepage-center[class*="map-view"] {
        display: none !important;
    }

    /* Nur map-view-below soll sichtbar sein */
    .py-card-content .py-search-container.map-view-below {
        display: flex !important;
        position: static !important;
    }

    /* Anpassung der PY-Card für Startseite */
    .python-app-wrapper .py-card-content.homepage-layout {
        position: relative !important;
        min-height: 650px !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding-top: 50px !important;
        padding-bottom: 25px !important;
    }

    /* Suchfeld auf Startseite größer und schöner */
    .py-search-container.homepage-center .py-search-input {
        width: 100%;
        padding: 15px 20px;
        font-size: 18px;
        border-radius: 12px;
        margin-bottom: 15px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.95);
        box-sizing: border-box;
        font-family: Arial, sans-serif;
        transition: all 0.3s ease;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

    .py-search-container.homepage-center .py-search-input:focus {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.5);
        outline: none;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
        transform: scale(1.02);
    }

    .py-search-container.homepage-center .py-btn-search {
        width: 100%;
        padding: 15px 20px;
        font-size: 18px;
        border-radius: 12px;
        font-weight: 500;
        box-sizing: border-box;
    }

    /* MAP-SEITE - Suchmaske oben links VERSTECKEN */
    .py-search-container.map-view {
        display: none !important;
    }

    /* MAP-SEITE - Suchmaske unterhalb der Map (neue Position) */
    .py-search-container.map-view-below {
        position: static !important;
        max-width: 400px !important;
        width: 100% !important;
        margin: 10px auto 20px auto !important;
        z-index: 100 !important;
        display: flex !important;
        flex-direction: column !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
    }

    /* Wenn beide Klassen gesetzt sind - homepage-center überschreiben */
    .py-search-container.homepage-center.map-view-below {
        position: static !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        margin: 10px auto 20px auto !important;
        display: flex !important;
    }

    /* Überschreibe alle anderen Positionierungen für map-view-below */
    .py-card-content .py-search-container.map-view-below {
        position: static !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
    }

    /* Suchfeld auf Map-Seite unterhalb der Map - schöner gestylt */
    .py-search-container.map-view-below .py-search-input {
        width: 100%;
        padding: 12px 16px;
        font-size: 16px;
        border-radius: 8px;
        margin-bottom: 10px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.95);
        font-family: Arial, sans-serif;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
    }

    .py-search-container.map-view-below .py-search-input:focus {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.4);
        outline: none;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    }

    .py-search-container.map-view-below .py-btn-search {
        width: 100%;
        padding: 12px 16px;
        font-size: 16px;
        border-radius: 8px;
        font-weight: normal;
        box-sizing: border-box;
    }

    /* RESULT-SEITE - Suchmaske in linker Spalte (bereits vorhanden) */
    .py-search-container.results-view {
        /* Wird über .py-left-column .py-search-container gesteuert */
    }

    .py-search-container::after {
        display: none; /* Remove separator */
    }

    .py-search-input {
        width: 100%;
        max-width: none;
        margin-bottom: 10px;
        font-family: Arial, sans-serif;
    }

    .py-btn-search {
        width: 100%; /* Buttons nehmen die volle Breite ein */
        padding: 12px 24px;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        background: #33383c !important;
        color: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 8px;
        cursor: pointer;
        font-size: 16px;
        transition: all 0.3s ease;
        text-align: center;
        font-family: Arial, sans-serif;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
    }

    .py-btn-search:hover {
        background: #5d676c !important;
        box-shadow: 0 8px 20px rgba(93, 103, 108, 0.3);
        transform: translateY(-2px);
    }

    /* Shimmer-Effekt für Suchbutton */
    .py-btn-search::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transform: translateX(-100%);
        transition: transform 0.7s ease-out;
    }

    .py-btn-search:hover::before {
        transform: translateX(100%);
    }

    .py-message {
        color: rgba(255, 255, 255, 0.9);
        margin-top: 15px;
        font-family: Arial, sans-serif;
    }

    #map.py-map {
        height: 480px !important;
        width: 100% !important;
        margin: 20px 0 10px 0 !important;
        border-radius: 10px !important;
        z-index: 1 !important;
        position: relative !important;
        background-color: #f8f8f8 !important;
        border: 1px solid #9ca3af !important;
        box-sizing: border-box !important;
    }

    .leaflet-container {
        background-color: white !important;
    }

    .leaflet-control-container .leaflet-bottom {
        display: none !important;
    }

    .leaflet-control-attribution,
    .leaflet-control-minimap,
    .leaflet-control-zoom-indicator {
        display: none !important;
    }

    .leaflet-marker-icon {
        background: none !important;
        border: none !important;
    }

    .heart-marker {
        background: none;
        border: none;
    }

    .heart-marker svg {
        filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5));
    }

    /* Radio Buttons verstecken */
    #cityForm input[type="radio"] {
        display: none !important;
    }

    /* Optional: Auch das gesamte Formular verstecken */
    #cityForm {
        display: none !important;
    }

    /* Category selection panel styles mit Glassmorphism */
    .category-selection-panel {
        display: none;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 12px;
        padding: 20px;
        margin-top: 20px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }

    .category-selection-panel h3 {
        color: white;
        margin-bottom: 15px;
        font-size: 1.4rem;
        font-weight: 300;
        text-align: center;
        font-family: Arial, sans-serif;
    }

    .category-groups {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }

    .category-group {
        flex: 1 1 300px;
        max-width: 400px;
        margin-bottom: 10px;
    }

    .category-group h4 {
        color: white;
        margin-bottom: 10px;
        font-size: 1.2rem;
        text-transform: capitalize;
        font-weight: 300;
        font-family: Arial, sans-serif;
    }

    .multiselect-dropdown {
        position: relative;
        width: 100%;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        background: #4a5568;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 8px;
        color: white;
        cursor: pointer;
        font-family: Arial, sans-serif;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 1;
    }

    .multiselect-dropdown.open {
        z-index: 1001;
    }

    .multiselect-dropdown:hover {
        background: #6b7280;
        border-color: rgba(255, 255, 255, 0.4);
    }

    .multiselect-dropdown-header {
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: Arial, sans-serif;
        background: #4a5568 !important;
        color: #ffffff !important;
    }

    .multiselect-dropdown-header span {
        color: #ffffff !important;
        font-family: Arial, sans-serif;
    }

    .multiselect-dropdown-list {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        max-height: 250px;
        overflow-y: auto;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        background: #5d676c;
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-top: none;
        border-radius: 0 0 8px 8px;
        z-index: 1000;
        font-family: Arial, sans-serif;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    }

    .multiselect-dropdown-list.show {
        display: block;
    }

    .multiselect-option {
        padding: 8px 10px;
        display: flex;
        align-items: center;
        transition: all 0.3s ease;
        cursor: pointer;
        font-family: Arial, sans-serif;
        background: #4a5568;
        color: #ffffff;
    }

    .multiselect-option:hover {
        background: #5a6570;
        backdrop-filter: blur(8px);
    }

    .multiselect-option input {
        display: none;
    }

    .multiselect-option.selected {
        background: #374151;
        backdrop-filter: blur(8px);
        font-weight: bold;
        border-left: 3px solid rgba(255, 255, 255, 0.6);
    }

    .category-actions {
        display: flex;
        justify-content: center;
        margin-top: 20px;
        gap: 10px;
    }

    .category-actions button {
        padding: 10px 20px;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        background: rgba(37, 99, 235, 0.3);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 8px;
        cursor: pointer;
        font-size: 16px;
        transition: all 0.3s ease;
        font-family: Arial, sans-serif;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        position: relative;
        overflow: hidden;
    }

    .category-actions button:hover {
        background: rgba(37, 99, 235, 0.5);
        box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
        transform: translateY(-2px);
    }

    .category-actions button.cancel {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .category-actions button.cancel:hover {
        background: rgba(255, 255, 255, 0.2);
        box-shadow: 0 8px 20px rgba(255, 255, 255, 0.1);
    }

    /* Shimmer-Effekt für Aktionsbuttons */
    .category-actions button::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transform: translateX(-100%);
        transition: transform 0.7s ease-out;
    }

    .category-actions button:hover::before {
        transform: translateX(100%);
    }

    /* Accessibility für linke Spalte */
    .py-left-column:focus-within {
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(255, 255, 255, 0.3);
    }

    .multiselect-dropdown:focus-within {
        border-color: rgba(255, 255, 255, 0.5);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    }

    .category-actions button:focus {
        outline: 2px solid rgba(255, 255, 255, 0.5);
        outline-offset: 2px;
    }

    /* Glass Action Button - für refreshDesignsBtn und ähnliche */
    .glass-action-button {
        padding: 10px 20px;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        background: rgba(37, 99, 235, 0.3);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 8px;
        cursor: pointer;
        font-size: 16px;
        transition: all 0.3s ease;
        font-family: Arial, sans-serif;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        position: relative;
        overflow: hidden;
    }

    .glass-action-button:hover {
        background: rgba(37, 99, 235, 0.5);
        box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
        transform: translateY(-2px);
    }

    .glass-action-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transform: translateX(-100%);
        transition: transform 0.7s ease-out;
    }

    .glass-action-button:hover::before {
        transform: translateX(100%);
    }

    .glass-action-button:focus {
        outline: 2px solid rgba(255, 255, 255, 0.5);
        outline-offset: 2px;
    }

    /* Reduced Motion für linke Spalte */
    @media (prefers-reduced-motion: reduce) {
        .py-left-column,
        .py-left-column .py-search-input,
        .py-btn-search,
        .multiselect-dropdown,
        .multiselect-option,
        .category-actions button,
        .glass-action-button,
        .py-btn-search::before,
        .category-actions button::before,
        .glass-action-button::before {
            transition: none;
        }
    }

    /* Anpassung des Results Grid */
    .py-results-container {
        display: grid;
        grid-template-columns: 300px 600px 1fr;
        gap: 25px; /* Einheitlicher Abstand zwischen allen Spalten */
        width: 100%;
        margin: -10px auto 20px auto;
        padding-bottom: 20px;
    }

    /* Linke Spalte mit Glassmorphism-Effekt */
    .py-left-column {
        grid-column: 1;
        display: flex;
        flex-direction: column;
        gap: 0;
        position: sticky;
        top: 70px;
        align-self: start;
        max-height: calc(100vh - 40px);
        overflow-y: auto;
        overflow-x: hidden;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        background: rgba(255, 255, 255, 0.6);
        border: 1px solid #9ca3af;
        border-radius: 12px;
        padding: 24px;
        width: 300px;
        box-sizing: border-box;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
        transition: all 0.3s ease;
    }

    .py-left-column:hover {
        border-color: #6b7280;
        transform: translateY(-2px);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    .py-left-column h3,
    .py-left-column label {
        font-size: 14px;
        font-weight: 500;
        color: #111827;
        margin-bottom: 16px;
        margin-top: 0;
        display: block;
        text-transform: uppercase;
        letter-spacing: 0.025em;
    }

    /* Mockup-Container mit Sticky-Positionierung */
    .py-mockup-container {
        grid-column: 2;
        background: rgb(45, 45, 45);
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.1);
        width: 100%;
        max-width: 600px;
        position: sticky;
        top: 70px;
        align-self: start;
    }

    /* Regenerate Controls */
    .py-regenerate-controls {
        padding: 15px;
        text-align: center;
        background: rgba(0, 0, 0, 0.3);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .py-regenerate-btn {
        background: linear-gradient(135deg, #4f46e5, #7c3aed);
        color: white;
        border: none;
        padding: 12px 20px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
    }

    .py-regenerate-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
        background: linear-gradient(135deg, #5b52e8, #8b42f0);
    }

    .py-regenerate-btn:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(79, 70, 229, 0.3);
    }

    .py-regenerate-btn span {
        margin-right: 8px;
        font-size: 16px;
    }

    /* Toggle Switches Styles - adapted for py-left-column */
    .py-left-column .py-regenerate-controls {
        margin: 12px 0;
        padding: 16px;
        background: #ffffff !important;
        border: 1px solid #9ca3af !important;
        border-radius: 8px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
        font-size: 14px;
        line-height: 1.4;
    }

    .py-left-column .py-regenerate-options {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-bottom: 20px;
    }

    .py-left-column .py-checkbox-group {
        display: flex;
        align-items: center;
    }

    .py-left-column .py-toggle-label {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        cursor: pointer;
        font-size: 13px;
        color: #1f2937 !important;
        gap: 8px;
        width: 100%;
        padding: 8px 0 10px 0;
        transition: all 0.3s ease;
    }

    .py-left-column .py-toggle-label:hover {
        color: #111827 !important;
    }

    .py-left-column .py-toggle-checkbox {
        display: none;
    }

    .py-left-column .py-toggle-slider {
        position: relative;
        width: 64px;
        height: 28px;
        background: #f3f4f6 !important;
        border-radius: 28px;
        transition: all 0.3s ease;
        border: 2px solid #6b7280 !important;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .py-left-column .py-toggle-label:hover .py-toggle-slider {
        background: #e5e7eb !important;
        border-color: #4b5563 !important;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.15);
    }

    .py-left-column .py-toggle-label:hover .py-toggle-checkbox:checked + .py-toggle-slider {
        background: #059669 !important;
        border-color: #065f46 !important;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(5, 150, 105, 0.5), 0 0 12px rgba(5, 150, 105, 0.4) !important;
    }

    .py-left-column .py-toggle-slider::before {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 24px;
        height: 24px;
        background: #ffffff;
        border-radius: 50%;
        transition: all 0.3s ease;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        border: 1px solid #d1d5db;
    }

    .py-left-column .py-toggle-checkbox:checked + .py-toggle-slider {
        background: #10b981 !important;
        border-color: #047857 !important;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(16, 185, 129, 0.4), 0 0 8px rgba(16, 185, 129, 0.3);
    }

    .py-left-column .py-toggle-checkbox:checked + .py-toggle-slider::before {
        transform: translateX(36px);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        border-color: #f3f4f6;
    }

    .py-left-column .py-toggle-text {
        font-weight: 500;
        user-select: none;
        font-family: Arial, sans-serif;
        color: #1f2937 !important;
        font-size: 12.5px;
        margin-top: 6px;
    }

    .py-left-column .py-update-btn {
        width: 100%;
        padding: 12px 24px;
        background: #33383c !important;
        color: white !important;
        border: 1px solid #33383c !important;
        border-radius: 8px !important;
        cursor: pointer;
        font-size: 15px !important;
        font-weight: 500 !important;
        transition: all 0.3s ease;
        text-align: center;
        font-family: Arial, sans-serif;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
        position: relative;
        overflow: hidden;
    }

    .py-left-column .py-update-btn:hover {
        background: #5d676c !important;
        border-color: #5d676c !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(93, 103, 108, 0.2) !important;
    }

    /* Shimmer-Effekt für Aktualisieren-Button (gleich wie Suchen-Button) */
    .py-left-column .py-update-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transform: translateX(-100%);
        transition: transform 0.7s ease-out;
    }

    .py-left-column .py-update-btn:hover::before {
        transform: translateX(100%);
    }

    .py-left-column .py-update-btn:active {
        transform: translateY(0);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
        background: #5d676c !important;
    }

    .py-left-column .py-regenerate-controls h3 {
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        font-family: Arial, sans-serif;
        color: #1f2937 !important;
        overflow-wrap: anywhere;
    }

    /* Legacy styles for backward compatibility */
    .py-regenerate-options {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 15px;
    }

    .py-checkbox-group {
        display: flex;
        align-items: center;
    }

    .py-toggle-label {
        display: flex;
        align-items: center;
        cursor: pointer;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.9);
        gap: 12px;
    }

    .py-toggle-checkbox {
        display: none;
    }

    .py-toggle-slider {
        position: relative;
        width: 50px;
        height: 24px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 24px;
        transition: all 0.3s ease;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .py-toggle-slider::before {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 18px;
        height: 18px;
        background: white;
        border-radius: 50%;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .py-toggle-checkbox:checked + .py-toggle-slider {
        background: rgba(37, 99, 235, 0.5);
        border-color: rgba(37, 99, 235, 0.7);
        box-shadow: 0 0 12px rgba(37, 99, 235, 0.3);
    }

    .py-toggle-checkbox:checked + .py-toggle-slider::before {
        transform: translateX(26px);
    }

    .py-toggle-text {
        font-weight: 500;
        user-select: none;
    }

    /* Disabled state for toggle */
    .py-toggle-label.disabled {
        pointer-events: none; /* Completely disable interaction, no popups */
        opacity: 0.5;
        cursor: not-allowed;
    }

    .py-toggle-checkbox:disabled + .py-toggle-slider {
        background: rgba(100, 100, 100, 0.3) !important;
        border-color: rgba(100, 100, 100, 0.3) !important;
        opacity: 0.5;
        cursor: not-allowed;
        box-shadow: none !important;
    }

    .py-toggle-checkbox:disabled + .py-toggle-slider::before {
        background: rgba(200, 200, 200, 0.7);
    }

    .py-toggle-checkbox:disabled:checked + .py-toggle-slider {
        background: rgba(100, 100, 100, 0.3) !important;
        border-color: rgba(100, 100, 100, 0.3) !important;
    }

    .py-toggle-label.disabled .py-toggle-text {
        opacity: 0.5;
        color: rgba(255, 255, 255, 0.5);
    }

    .py-toggle-label.disabled:hover .py-toggle-slider {
        background: rgba(100, 100, 100, 0.3) !important;
        box-shadow: none !important;
    }

    .py-update-btn {
        margin-top: 10px;
        width: 100%;
        padding: 12px 24px;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        background: #33383c !important;
        color: rgba(255, 255, 255, 0.95);
        border: 1px solid #33383c;
        border-radius: 8px;
        cursor: pointer;
        font-size: 16px;
        transition: all 0.3s ease;
        text-align: center;
        font-family: Arial, sans-serif;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        position: relative;
        overflow: hidden;
    }

    .py-update-btn:hover {
        background: #5d676c !important;
        box-shadow: 0 8px 20px rgba(93, 103, 108, 0.3);
        transform: translateY(-2px);
    }

    .py-update-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transform: translateX(-100%);
        transition: transform 0.7s ease-out;
    }

    .py-update-btn:hover::before {
        transform: translateX(100%);
    }

    .py-update-btn:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(93, 103, 108, 0.3);
    }

    /* Ergebnisse rechts */
    .py-results-grid {
        grid-column: 3;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 12px;
        width: 100%;
        box-sizing: border-box;
        align-content: start;
    }

    /* Suchcontainer-Stil in der linken Spalte */
    .py-left-column .py-search-container {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
        margin: 0 0 15px 0;
        padding: 0;
    }

    .py-left-column .py-search-input {
        width: 100%;
        margin-bottom: 10px;
        padding: 12px 24px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 8px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.95);
        font-size: 16px;
        font-family: Arial, sans-serif;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        box-sizing: border-box;
    }

    .py-left-column .py-search-input:focus {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.5);
        outline: none;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    }

    .py-left-column .py-search-input::placeholder {
        color: rgba(255, 255, 255, 0.7);
    }

    /* Kategorie-Bereich in der linken Spalte */
    .py-left-column .category-selection-area {
        margin-top: 0px;
    }

    .py-left-column .category-groups {
        gap: 5px;
    }

    .py-left-column .category-group {
        margin-bottom: 5px;
    }

    .py-left-column .category-selection-area h3 {
        margin-bottom: 8px;
        font-size: 0.75rem !important;
        padding-top: 5px;
        font-family: Arial, sans-serif;
        color: #4b5563 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .py-left-column .py-search-container:after {
        content: '';
        display: block;
        height: 1px;
        background: rgba(255, 255, 255, 0.1);
        margin-top: 20px;
        width: 100%;
    }

    .py-mockup-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 2.5s ease-in-out;
        object-fit: cover;
        display: block;
    }

    .py-mockup-image.active {
        opacity: 1;
        z-index: 1;
    }

    .py-price-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 2.5s ease-in-out;
        object-fit: cover;
        display: block;
        z-index: 2;
    }

    .py-price-overlay.active {
        opacity: 1;
    }



    .next-item-loader {
        position: relative;
        background: rgb(45, 45, 45);
        padding: 0;
        border-radius: 12px;
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        aspect-ratio: 1/1;
        border: 1px solid rgba(255, 255, 255, 0.1);
        min-width: 160px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Arial, sans-serif;
    }

    .next-item-loader::after {
        content: '';
        width: 30px;
        height: 30px;
        border: 3px solid rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        border-top-color: #fff;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    .py-result-item.loading::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 30px;
        height: 30px;
        border: 3px solid rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        border-top-color: #fff;
        animation: spinLoader 1s linear infinite;
        z-index: 2;
    }

    .py-result-item.loading .py-image-container {
        opacity: 0;
    }

    @keyframes spinLoader {
        to {
            transform: translate(-50%, -50%) rotate(360deg);
        }
    }

    .py-image-container {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        transition: opacity 0.3s ease;
        z-index: 10;
        border: 1px solid #9ca3af !important;
        box-sizing: border-box;
    }
    
    .py-image-container:hover {
        border-color: #6b7280 !important;
    }
    
    /* Ensure gray border for all result items and containers */
    .py-results-grid .py-result-item,
    .py-results-container .py-result-item,
    div.py-result-item {
        border: 1px solid #9ca3af !important;
    }
    
    .py-results-grid .py-result-item:hover,
    .py-results-container .py-result-item:hover,
    div.py-result-item:hover {
        border-color: #6b7280 !important;
    }
    
    .py-results-grid .py-image-container,
    .py-results-container .py-image-container,
    .py-result-item .py-image-container {
        border: 1px solid #9ca3af !important;
    }
    
    .py-results-grid .py-image-container:hover,
    .py-results-container .py-image-container:hover,
    .py-result-item .py-image-container:hover {
        border-color: #6b7280 !important;
    }
    
    /* Hide all category labels */
    .category-label,
    div.category-label {
        display: none !important;
    }

    /* SVG Loader Styles */
    .svg-loader {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 30px;
        height: 30px;
        border: 3px solid rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        border-top-color: #fff;
        animation: spin 1s ease-in-out infinite;
        display: none;
    }

    .loading .svg-loader {
        display: block;
    }

    .loading .py-image-container {
        opacity: 0;
    }

    @keyframes spin {
        to { transform: translate(-50%, -50%) rotate(360deg); }
    }



    /* Glassmorphism Effects für py-result-items */
    .py-result-item {
        position: relative;
        overflow: hidden;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        background: var(--theme-color-default, #5d676c) !important;
        border: 1px solid #9ca3af !important;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.3s ease;
        aspect-ratio: 1/1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Arial, sans-serif;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }

    /* Shimmer Effect */
    .py-result-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transform: translateX(-100%);
        transition: transform 0.7s ease-out;
        z-index: 1;
    }

    /* Soft Glow */
    .py-result-item::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, rgba(59, 130, 246, 0.2), rgba(147, 51, 234, 0.2));
        border-radius: 12px;
        opacity: 0;
        filter: blur(24px);
        z-index: -1;
        transition: opacity 0.3s ease;
    }

    .py-image-container::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.3) 100%
        );
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    /* Hover Effects - Only for devices with true hover capability (mouse/trackpad)
       Prevents sticky hover on touch devices */
    @media (hover: hover) {
        .py-result-item:hover {
            background: var(--theme-color-default, #5d676c);
            border-color: #6b7280 !important;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
            transform: translateY(-8px);
        }

        .py-result-item:hover::before {
            transform: translateX(100%);
        }

        .py-result-item:hover::after {
            opacity: 1;
        }

        .py-result-item:hover .py-image-container::after {
            opacity: 1;
        }

        .py-result-item:hover img:not(.info-icon) {
            transform: scale(1.05);
        }
    }

    /* Accessibility */
    .py-result-item:focus {
        outline: 2px solid rgba(255, 255, 255, 0.5);
        outline-offset: 2px;
    }

    /* Reduced Motion */
    @media (prefers-reduced-motion: reduce) {
        .py-result-item,
        .py-result-item::before,
        .py-result-item::after {
            transition: none;
        }
    }

    .py-image-container a {
        display: block;
        height: 100%;
        width: 100%;
        cursor: pointer;
    }

    .py-image-container img:not(.info-icon) {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: transform 0.2s;
    }

    /* Responsive Anpassungen */
    @media (max-width: 1800px) {
        .py-results-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media (max-width: 1400px) {
        .py-results-container {
            grid-template-columns: 1fr;
            gap: 15px;
        }
        
        .py-left-column {
            grid-column: 1;
            position: static;
            max-height: none;
            margin-bottom: 15px;
        }
        
        .py-mockup-container {
            grid-column: 1;
            position: static;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .py-results-grid {
            grid-column: 1;
        }
    }

    @media (max-width: 900px) {
        .py-results-container {
            grid-template-columns: 1fr;
        }
        
        .py-left-column {
            grid-column: 1;
        }
        
        .py-mockup-container {
            grid-column: 1;
            margin: 20px auto;
        }
        
        .py-results-grid {
            grid-column: 1;
            margin-top: -30px;
            margin-left: 0;
        }
    }

    @media (max-width: 768px) {
        .py-results-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 4px;
            padding: 0 4px;
            margin-bottom: 10px;
            margin-left: 0;
            margin-right: 0;
            width: 100%;
            box-sizing: border-box;
        }

        .py-mockup-container {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            height: 0 !important;
            overflow: hidden !important;
        }

        .py-result-item {
            max-width: none;
            margin: 0;
            width: 100%;
        }
    }

    /* Erfolgsmeldung ausblenden */
    .py-message {
        display: none;
    }

    /* Loader Styles */
    .loader-container {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(5px);
        z-index: 9999;
        justify-content: center;
        align-items: center;
        font-family: Arial, sans-serif;
    }

    .loader-wrapper {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        font-family: Arial, sans-serif;
    }

    .loader {
        width: 50px;
        height: 50px;
        border: 3px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        border-top-color: #fff;
        animation: spin 1s ease-in-out infinite;
        margin: 0 auto;
    }

    .loader-text {
        color: white;
        margin-top: 20px;
        font-size: 1.2rem;
        text-align: center;
        font-family: Arial, sans-serif;
    }

    .loader-heart {
        display: inline-block;
        vertical-align: middle;
        margin: 0 5px;
        line-height: 0;
    }

    .loader-heart svg {
        width: 32px;
        height: 32px;
        vertical-align: middle;
        filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5));
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    /* Add styles for footer area */
    .footer-spacer {
        display: none;
    }

    .py-card-content {
        width: 100%;
    }

    /* Add separator styles */
    .py-search-container::after {
        content: '';
        position: absolute;
        bottom: -20px;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.2) 20%,
            rgba(255, 255, 255, 0.2) 80%,
            transparent
        );
    }

    /* Results container spacing */
    #results-container {
        margin-top: 0px;
        padding-top: 20px;
    }

    /* Adjust search container when results are shown */
    .py-results-container + .py-search-container,
    #results-container .py-search-container {
       /* margin-left: 620px;*/
        margin-right: 20px;
        padding: 0;
    }

    /* Responsive adjustments */
    @media (max-width: 1400px) {
        .py-results-container + .py-search-container,
        #results-container .py-search-container {
            margin-left: auto;
            margin-right: auto;
            padding: 0 20px;
        }
    }

    /* Unified slideshow styles */
    .slideshow-container {
        position: relative;
        width: 100%;
        padding-bottom: 150%;
        height: 0;
        overflow: hidden;
        font-family: Arial, sans-serif;
    }

    .py-mockup-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 2.5s ease-in-out;
        object-fit: cover;
        display: block;
    }

    .py-mockup-image.active {
        opacity: 1;
        z-index: 1;
    }

    .fade {
        animation-name: fade;
        animation-duration: 2s;
    }

    @keyframes fade {
        from {opacity: 0} 
        to {opacity: 1}
    }

    .loader-placeholder {
        position: relative;
        width: 100%;
        aspect-ratio: 1;
        background: rgba(45, 45, 45, 0.9);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .loader-placeholder::before {
        content: '';
        position: absolute;
        width: 40px;
        height: 40px;
        border: 4px solid #ffffff;
        border-top-color: transparent;
        border-radius: 50%;
        animation: loader-spin 1s linear infinite;
    }

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

    .result-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 20px;
        padding: 20px;
    }
    
    .result-item {
        position: relative;
        border: 1px solid #ddd;
        padding: 10px;
        text-align: center;
    }
    
    .result-item img {
        max-width: 100%;
        height: auto;
    }
    
    .info-icon {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 24px;
        height: 24px;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        padding: 3px;
        cursor: pointer;
        z-index: 35;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    /* Mobile search form centering and spacing */
    @media (max-width: 768px) {
        /* Make info icon always visible on mobile devices (no hover on touch screens) */
        .info-icon {
            opacity: 1 !important;
        }

        /* Mobile Popup - Full screen below mobile tab navigation */
        .popup-overlay {
            align-items: stretch !important;
            justify-content: center !important;
            top: 121px !important; /* 10px padding from mobile tabs (111px + 10px) */
            bottom: 0 !important; /* Go to bottom of screen */
            height: auto !important; /* Auto height based on top/bottom */
            z-index: 3000 !important; /* Above mobile tab navigation */
            overflow: hidden !important; /* Prevent background scroll on mobile */
        }

        .popup-content {
            max-width: 100% !important;
            max-height: none !important;
            width: 100%;
            height: 100%;
            margin: 0;
            border-radius: 0 !important; /* Square corners for clean edges */
            display: flex;
            flex-direction: column;
            overflow: hidden !important; /* Prevent content scroll on mobile */
        }

        .popup-image {
            max-height: none;
            height: auto;
            flex: 1;
            object-fit: contain;
            pointer-events: auto; /* Enable touch events for zoom/pan on mobile */
        }

        .mobile-search-form {
            display: flex;
            flex-direction: column;
            gap: 15px;
            padding: 30px 20px 20px 20px; /* Extra top padding for mobile tabs */
            align-items: center;
            justify-content: center;
            max-width: 400px;
            margin: 0 auto;
        }
        
        .mobile-search-input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            text-align: center;
            box-sizing: border-box;
        }
        
        .mobile-search-btn {
            width: 100%;
            max-width: 200px;
            padding: 12px 20px;
            background: #6c757d;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            margin-top: 5px;
        }
        
        .mobile-content-wrapper {
            background: white;
            margin: 30px 0 20px 0;
            padding: 0;
            border-radius: 8px;
            max-height: calc(100vh - 150px);
            width: 100%;
            overflow-y: auto;
            text-align: center;
        }
        
        /* Mobile search form styling when inside mobile tabs - OVERRIDE LEFT COLUMN STYLES */
        .mobile-tab-content .py-search-container,
        .mobile-content-wrapper .py-search-container,
        .mobile-tab-content .py-left-column .py-search-container,
        .mobile-content-wrapper .py-left-column .py-search-container {
            width: 100% !important;
            max-width: none !important;
            margin: 0 !important;
            padding: 40px 0 20px 0 !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
        }

        .mobile-tab-content .py-search-input,
        .mobile-content-wrapper .py-search-input {
            display: block !important;
            width: 80% !important;
            max-width: 320px !important;
            padding: 12px 15px !important;
            border: 1px solid #ddd !important;
            border-radius: 8px !important;
            font-size: 16px !important;
            text-align: center !important;
            box-sizing: border-box !important;
            margin: 0 auto 15px auto !important;
        }

        .mobile-tab-content .py-btn-search,
        .mobile-tab-content button[type="submit"],
        .mobile-content-wrapper .py-btn-search,
        .mobile-content-wrapper button[type="submit"] {
            display: block !important;
            width: auto !important;
            min-width: 180px !important;
            max-width: 220px !important;
            padding: 12px 30px !important;
            background: #6c757d !important;
            color: white !important;
            border: none !important;
            border-radius: 8px !important;
            font-size: 14px !important;
            font-weight: 500 !important;
            cursor: pointer !important;
            transition: all 0.2s ease !important;
            margin: 0 auto !important;
        }
        
        .mobile-tab-content .py-country-select,
        .mobile-content-wrapper .py-country-select {
            width: 100% !important;
            max-width: 350px !important;
            padding: 12px 15px !important;
            border: 1px solid #ddd !important;
            border-radius: 8px !important;
            font-size: 16px !important;
            box-sizing: border-box !important;
            margin: 0 auto !important;
        }
        
        /* Mobile tab content - fix checkbox and label text visibility */
        .mobile-tab-content label,
        .mobile-content-wrapper label,
        .mobile-tab-content .py-toggle-text,
        .mobile-content-wrapper .py-toggle-text,
        .mobile-tab-content span,
        .mobile-content-wrapper span {
            color: #ffffff !important;
            font-weight: 500 !important;
            font-family: Arial, sans-serif !important;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
        }
        
        .mobile-tab-content input[type="checkbox"] + label,
        .mobile-tab-content input[type="radio"] + label,
        .mobile-content-wrapper input[type="checkbox"] + label,
        .mobile-content-wrapper input[type="radio"] + label {
            color: #ffffff !important;
            font-weight: 500 !important;
            font-family: Arial, sans-serif !important;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
            margin-left: 8px !important;
        }
        
        .mobile-tab-content .py-toggle-label,
        .mobile-content-wrapper .py-toggle-label {
            color: #ffffff !important;
            font-family: Arial, sans-serif !important;
        }
        
        .mobile-tab-content .py-toggle-label .py-toggle-text,
        .mobile-content-wrapper .py-toggle-label .py-toggle-text {
            color: #ffffff !important;
            font-weight: 500 !important;
            font-family: Arial, sans-serif !important;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
        }
    }
    
    .py-image-container:hover .info-icon {
        opacity: 1;
    }
    
    .popup-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.85);
        z-index: 1000;
        justify-content: center;
        align-items: center;
        font-family: Arial, sans-serif;
        overflow: hidden; /* Prevent background scroll */
    }

    .popup-content {
        position: relative;
        max-width: 90%;
        max-height: 90%;
        background-color: #333;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        font-family: Arial, sans-serif;
        overflow: hidden; /* Prevent content scroll */
    }
    
    .popup-image {
        max-width: 100%;
        max-height: 500px;
        object-fit: contain;
        touch-action: none; /* Disable browser default touch actions */
        user-select: none;
        -webkit-user-select: none;
        transition: transform 0.1s ease-out;
        pointer-events: auto; /* Explicitly enable pointer events for zoom/pan */
        position: relative;
        z-index: 1; /* Base layer for image */
    }

    .popup-image.zoomed {
        cursor: grab;
    }

    .popup-image.zoomed:active {
        cursor: grabbing;
    }
    
    .popup-close {
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
        font-size: 24px;
        background: none;
        border: none;
        color: #999;
        z-index: 20; /* Higher than image and other buttons */
        pointer-events: auto; /* Explicitly enable pointer events */
    }

    /* Heart marker styles - unified definition */
    .heart-marker {
        background: none !important;
        border: none !important;
        box-shadow: none !important;
    }

    .heart-marker svg {
        filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5));
        transition: transform 0.3s ease;
    }

    .heart-marker:hover svg {
        transform: scale(1.2);
    }

    /* Popup styles */
    .event-popup-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        z-index: 9999;
        justify-content: center;
        align-items: center;
        font-family: Arial, sans-serif;
    }
    
    .event-popup-container {
        position: relative;
        max-width: 90%;
        width: 550px;
        background: #fff;
        border-radius: 8px;
        padding: 30px;
        box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
        font-family: Arial, sans-serif;
    }
    
    .event-popup-close {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 24px;
        background: none;
        border: none;
        cursor: pointer;
        color: #333;
    }
    
    .event-popup-content {
        margin-top: 15px;
        text-align: center;
    }
    
    .event-popup-title {
        font-size: 1.5rem;
        margin-bottom: 15px;
        font-weight: bold;
        color: #333;
        font-family: Arial, sans-serif;
    }

    /* Special Event Popup Grid Styles */
    #special-events-popup-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 90%;
        max-height: 85%;
        overflow: auto;
        background-color: rgba(30, 30, 30, 0.9);
        border-radius: 10px;
        padding: 30px;
        box-shadow: 0 4px 30px rgba(0,0,0,0.3);
        z-index: 10000;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,0.3) rgba(0,0,0,0.3);
        font-family: Arial, sans-serif;
    }
    
    #special-events-popup-grid::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    
    #special-events-popup-grid::-webkit-scrollbar-track {
        background: rgba(0,0,0,0.2);
        border-radius: 4px;
    }
    
    #special-events-popup-grid::-webkit-scrollbar-thumb {
        background-color: rgba(255,255,255,0.3);
        border-radius: 4px;
    }
    
    #special-events-popup-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.7);
        z-index: 9999;
        backdrop-filter: blur(3px);
    }
    
    .special-event-popup-card {
        display: flex;
        flex-direction: column;
        background-color: white;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        min-height: 300px;
        font-family: Arial, sans-serif;
    }
    
    .special-event-popup-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    }
    
    .popup-card-header {
        padding: 15px;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        font-family: Arial, sans-serif;
    }
    
    .popup-design-container {
        padding: 15px;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(0,0,0,0.02);
    }
    
    .popup-card-footer {
        padding: 15px;
        border-top: 1px solid rgba(0,0,0,0.1);
        background-color: rgba(0,0,0,0.04);
    }
    
    /* Event location badge */
    .event-location-badge {
        display: inline-block;
        padding: 2px 6px;
        background-color: rgba(0,0,0,0.05);
        border-radius: 3px;
        margin-right: 5px;
        font-size: 0.8rem;
        font-family: Arial, sans-serif;
    }
    
    .event-distance {
        font-size: 0.8rem;
        color: #888;
        margin-left: 5px;
        font-family: Arial, sans-serif;
    }
    
    .event-dates {
        font-size: 0.85rem;
        color: #666;
        margin-top: 5px;
        font-family: Arial, sans-serif;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        #special-events-popup-grid {
            grid-template-columns: 1fr !important;
            max-width: 98%;
            width: 98%;
            max-height: 90%;
            padding: 10px;
            gap: 15px;
        }

        .special-event-popup-card {
            min-height: auto;
            width: 100% !important;
            max-width: 100%;
            box-sizing: border-box;
        }

        .popup-card-header,
        .popup-design-container,
        .popup-card-footer {
            padding: 12px;
        }

        /* Ensure color buttons have equal spacing on left and bottom in mobile popups */
        .popup-content .color-buttons {
            bottom: 20px;
            left: 20px;
        }
    }

    /* CSS für die Farb-Buttons im Popup hinzufügen */
    .color-buttons {
        position: absolute;
        bottom: 20px;
        left: 20px;
        display: flex;
        gap: 10px;
        pointer-events: none; /* Let touch events pass through container to image */
        z-index: 10; /* Above image, below close button */
    }

    .color-button {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.3);
        cursor: pointer;
        transition: transform 0.2s ease, border-color 0.2s ease;
        position: relative;
        overflow: hidden;
        pointer-events: auto; /* Re-enable pointer events for individual buttons */
    }

    .color-button:hover {
        transform: scale(1.1);
        border-color: rgba(255, 255, 255, 0.8);
    }

    .color-button.active {
        border: 3px solid #2563eb;
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
        transform: scale(1.1);
    }

    .color-button.dark {
        background: 
            /* Dunkle Stoff-Textur */
            repeating-linear-gradient(
                45deg,
                #090c12 0px,
                #090c12 1px,
                #0f1419 1px,
                #0f1419 2px
            ),
            repeating-linear-gradient(
                -45deg,
                #090c12 0px,
                #090c12 1px,
                #06080c 1px,
                #06080c 2px
            ),
            #090c12;
    }

    .color-button.light {
        background: 
            /* Leinen-Textur */
            repeating-linear-gradient(
                0deg,
                #f9fafb 0px,
                #f9fafb 1px,
                #f3f4f6 1px,
                #f3f4f6 2px,
                #ffffff 2px,
                #ffffff 3px
            ),
            repeating-linear-gradient(
                90deg,
                #f9fafb 0px,
                #f9fafb 1px,
                #f1f5f9 1px,
                #f1f5f9 2px
            ),
            #f9fafb;
        border-color: rgba(100, 100, 100, 0.5);
    }

    .color-button.light:hover {
        border-color: rgba(100, 100, 100, 0.8);
    }

    .color-button.blue {
        background:
            /* Navy Stoff-Textur */
            repeating-linear-gradient(
                30deg,
                #0b2673 0px,
                #0b2673 1px,
                #0d2b7d 1px,
                #0d2b7d 2px
            ),
            repeating-linear-gradient(
                -30deg,
                #0b2673 0px,
                #0b2673 1px,
                #092063 1px,
                #092063 2px
            ),
            #0b2673;
    }

    /* 🛒 Popup Footer Actions Container (Farbbuttons + Cart Button) */
    .popup-footer-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 15px;
        padding-top: 10px;
        border-top: 1px solid rgba(0,0,0,0.1);
    }

    .popup-color-buttons {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    /* Popup Color Buttons - 30% smaller (35px instead of 50px) */
    .popup-footer-actions .color-button,
    .popup-content .color-buttons .color-button {
        width: 35px !important;
        height: 35px !important;
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        position: relative;
    }

    .popup-footer-actions .color-button:hover {
        transform: scale(1.1);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    .popup-footer-actions .color-button.active {
        border: 3px solid #10b981;
        box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
    }

    /* 🛒 Shopping Cart Button im Popup Footer - Styled like X-Button */
    .popup-cart-button {
        position: absolute;
        bottom: 20px;
        right: 20px;
        width: auto;
        height: auto;
        padding: 10px 14px;
        border-radius: 8px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        background-color: rgba(60, 60, 60, 0.8);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease;
        z-index: 10;
    }

    .popup-cart-button:hover {
        background-color: rgba(80, 80, 80, 0.9);
        transform: scale(1.05);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
        border-color: rgba(255, 255, 255, 0.5);
    }

    .popup-cart-button:active {
        transform: scale(0.98);
    }

    .popup-cart-button svg {
        width: 20px;
        height: 20px;
        stroke: rgba(255, 255, 255, 0.9);
        fill: none;
        stroke-width: 2;
    }

    /* Responsive Anpassungen */
    @media (max-width: 1024px) {
        .popup-cart-button {
            padding: 9px 12px;
            bottom: 10px;
            right: 10px;
        }

        .popup-cart-button svg {
            width: 18px;
            height: 18px;
        }

        .popup-footer-actions .color-button,
        .popup-content .color-buttons .color-button {
            width: 32px !important;
            height: 32px !important;
        }
    }

    /* Mobile symmetry with X-button */
    @media (max-width: 768px) {
        .popup-cart-button {
            padding: 8px 12px;
            bottom: 50px;
            right: 10px;
        }

        .popup-cart-button svg {
            width: 16px;
            height: 16px;
        }
    }

    /* Transition Loader Overlay */
    .transition-loader-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        z-index: 99999;
        display: none;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 20px;
    }

    .transition-loader-overlay.active {
        display: flex;
    }

    .transition-loader-spinner {
        width: 50px;
        height: 50px;
        border: 4px solid #e5e7eb;
        border-top: 4px solid #3b82f6;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    .transition-loader-text {
        color: #4b5563;
        font-size: 16px;
        font-weight: 500;
        font-family: Arial, sans-serif;
    }

    /* ========================================
       DELETED: Hardcoded Popup Fabric-Texturen
       These styles were overriding the dynamic CSS from /api/theme/css
       Theme Editor changes had no effect due to this!
       Now using ONLY dynamic CSS generation from Overpass_Anfrage.py
       ======================================== */

    /* SVG Opacity in allen Popups */
    .popup-content svg,
    .event-popup-content svg,
    .special-event-popup-card svg {
        opacity: 1;
        transition: opacity 0.3s ease;
    }

    /* Batch Template Styles - kompatibel mit Glassmorphism */
    .py-result-item.batch-template-item .template-info-overlay {
        background: linear-gradient(transparent, rgba(0,0,0,0.7)) !important;
        backdrop-filter: blur(8px);
        z-index: 25;
    }
    
    .py-result-item.batch-template-item .type-badge {
        font-family: 'Arial', sans-serif;
        font-weight: bold;
        letter-spacing: 0.5px;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        z-index: 30;
    }
    
    .py-result-item.batch-template-item .order-number {
        font-family: 'Arial', sans-serif;
        font-weight: bold;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        z-index: 30;
    }
    
    /* Template-spezifische Styles nutzen jetzt das globale Glassmorphism-Design */
    
    /* FORM ELEMENTS - Gray borders and proper contrast for white background */
    
    /* Search Input Fields */
    input[type="text"],
    input[type="search"],
    .py-search-input {
        border: 1px solid #9ca3af !important;
        background-color: #ffffff !important;
        color: #1f2937 !important;
        border-radius: 8px !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
        transition: all 0.3s ease !important;
    }
    
    input[type="text"]:focus,
    input[type="search"]:focus,
    .py-search-input:focus {
        border-color: #6b7280 !important;
        box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.1) !important;
        outline: none !important;
        background-color: #f9fafb !important;
    }
    
    input[type="text"]::placeholder,
    input[type="search"]::placeholder,
    .py-search-input::placeholder {
        color: #6b7280 !important;
    }
    
    /* Dropdown Selects */
    .py-country-select,
    select,
    .py-select {
        border: 1px solid #9ca3af !important;
        background-color: #ffffff !important;
        color: #1f2937 !important;
        border-radius: 8px !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
        transition: all 0.3s ease !important;
        cursor: pointer !important;
        appearance: none !important;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
        background-repeat: no-repeat !important;
        background-position: right 12px center !important;
        background-size: 16px !important;
        padding-right: 40px !important;
    }
    
    .py-country-select:focus,
    select:focus,
    .py-select:focus {
        border-color: #6b7280 !important;
        box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.1) !important;
        outline: none !important;
        background-color: #f9fafb !important;
    }
    
    .py-country-select:hover,
    select:hover,
    .py-select:hover {
        border-color: #6b7280 !important;
    }
    
    /* Buttons */
    .py-btn-search,
    .py-search-button,
    button,
    .btn,
    input[type="button"],
    input[type="submit"] {
        border: 1px solid #9ca3af !important;
        background-color: #33383c !important;
        color: white !important;
        border-radius: 8px !important;
        padding: 12px 24px !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        transition: all 0.3s ease !important;
        cursor: pointer !important;
        text-align: center !important;
        text-decoration: none !important;
        display: inline-block !important;
    }
    
    .py-btn-search:hover,
    .py-search-button:hover,
    button:hover,
    .btn:hover,
    input[type="button"]:hover,
    input[type="submit"]:hover {
        border-color: #6b7280 !important;
        background-color: #5d676c !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(93, 103, 108, 0.15) !important;
    }
    
    .py-btn-search:active,
    .py-search-button:active,
    button:active,
    .btn:active,
    input[type="button"]:active,
    input[type="submit"]:active {
        transform: translateY(0) !important;
        box-shadow: 0 2px 4px rgba(156, 163, 175, 0.1) !important;
    }
    
    /* Form Labels */
    label {
        color: #1f2937 !important;
        font-weight: 500 !important;
        font-size: 14px !important;
        margin-bottom: 8px !important;
        display: inline-block !important;
        cursor: pointer !important;
    }
    
    /* Category Group Dropdown - Override styles for white background pages */
    .py-left-column .multiselect-dropdown,
    .multiselect-dropdown:not(.homepage-style) {
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        background-color: #5d676c !important;
        color: white !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }
    
    .py-left-column .multiselect-dropdown:hover,
    .multiselect-dropdown:not(.homepage-style):hover {
        border-color: rgba(255, 255, 255, 0.4) !important;
        background-color: #6b7280 !important;
        box-shadow: 0 4px 12px rgba(156, 163, 175, 0.15) !important;
    }
    
    .py-left-column .multiselect-dropdown-header span,
    .multiselect-dropdown:not(.homepage-style) .multiselect-dropdown-header span {
        color: rgba(255, 255, 255, 0.9) !important;
    }
    
    .py-left-column .multiselect-dropdown-header,
    .multiselect-dropdown:not(.homepage-style) .multiselect-dropdown-header {
        color: rgba(255, 255, 255, 0.9) !important;
    }
    
    /* Ensure dropdown lists are hidden by default */
    .py-left-column .multiselect-dropdown-list:not(.show),
    .multiselect-dropdown:not(.homepage-style) .multiselect-dropdown-list:not(.show) {
        display: none !important;
    }
    
    /* Only show dropdown lists when .show class is present */
    .py-left-column .multiselect-dropdown-list.show,
    .multiselect-dropdown:not(.homepage-style) .multiselect-dropdown-list.show {
        background: #5d676c !important;
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
        display: block !important;
        flex-direction: column !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        margin-top: 2px !important;
    }
    
    .py-left-column .multiselect-option,
    .multiselect-dropdown:not(.homepage-style) .multiselect-option {
        color: rgba(255, 255, 255, 0.9) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        display: block !important;
        width: 100% !important;
        padding: 10px 12px !important;
        margin: 0 !important;
        clear: both !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
    }
    
    .py-left-column .multiselect-option:hover,
    .multiselect-dropdown:not(.homepage-style) .multiselect-option:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
    }
    
    .py-left-column .multiselect-option.selected,
    .multiselect-dropdown:not(.homepage-style) .multiselect-option.selected {
        background-color: rgba(255, 255, 255, 0.2) !important;
        color: #ffffff !important;
        border-left: 3px solid rgba(255, 255, 255, 0.6);
    }
    
    .py-left-column .multiselect-option.selected:hover,
    .multiselect-dropdown:not(.homepage-style) .multiselect-option.selected:hover {
        background-color: rgba(255, 255, 255, 0.25) !important;
        color: #ffffff !important;
    }
    
    /* Dropdown arrow styling for non-homepage */
    .py-left-column .multiselect-dropdown-header i,
    .multiselect-dropdown:not(.homepage-style) .multiselect-dropdown-header i {
        color: rgba(255, 255, 255, 0.7) !important;
        transition: transform 0.3s ease !important;
    }
    
    .py-left-column .multiselect-dropdown.open .multiselect-dropdown-header i,
    .multiselect-dropdown:not(.homepage-style).open .multiselect-dropdown-header i {
        transform: rotate(180deg) !important;
    }
    
    /* Focus states for accessibility */
    .py-left-column .multiselect-dropdown:focus-within,
    .multiselect-dropdown:not(.homepage-style):focus-within {
        border-color: #6b7280 !important;
        box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.1) !important;
    }
    
    /* ========================================
       MOBILE TAB NAVIGATION - PAGE-SPECIFIC CONTROL
       ======================================== */
    
    /* Mobile Tab Navigation - Default Hidden on All Pages */
    .mobile-tab-navigation {
        display: none !important;
    }
    
    /* Mobile Tab Navigation - Show ONLY on Result Pages & Mobile Devices */
    @media screen and (max-width: 768px) {

        /* MOBILE FIX - Viewport overflow korrigieren */
        .python-app-wrapper {
            width: 100% !important;
            left: 0 !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            overflow-x: hidden !important;
        }

        /* MOBILE STARTSEITE - Footer scrollbar sichtbar */
        body:not(:has(.py-results-container)):not(:has(.py-results-grid)) {
            overflow-y: auto !important;
            overflow-x: hidden !important;
            height: auto !important;
            min-height: 100vh !important;
            display: flex !important;
            flex-direction: column !important;
            -webkit-overflow-scrolling: touch !important;
        }

        /* MOBILE STARTSEITE - HTML scrollbar erlauben */
        body:not(:has(.py-results-container)):not(:has(.py-results-grid)) html {
            height: auto !important;
            min-height: 100% !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
        }

        /* MOBILE RESULTS-SEITE - Normales Scrollen erlauben */
        body:has(.py-results-container),
        body:has(.py-results-grid) {
            overflow-y: auto !important;
            overflow-x: hidden !important;
            height: auto !important;
            min-height: 100vh !important;
            -webkit-overflow-scrolling: touch !important;
        }

        /* MOBILE FIX - Video Hintergrund ohne schwarze Balken */
        .video-background {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            overflow: hidden !important;
            background: #000 !important;
            z-index: -1 !important;
        }

        .video-background video {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            object-position: center !important;
        }

        /* MOBILE STARTSEITE - Shopify Header fixiert */
        body:not(:has(.py-results-container)):not(:has(.py-results-grid)) #shopify-header-container {
            flex-shrink: 0 !important;
            z-index: 1000 !important;
        }

        /* MOBILE STARTSEITE - Main Content flex grow */
        body:not(:has(.py-results-container)):not(:has(.py-results-grid)) .python-app-wrapper {
            flex: 1 !important;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch !important;
            display: flex !important;
            flex-direction: column !important;
            min-height: 0 !important;
        }

        /* MOBILE STARTSEITE - Footer immer sichtbar am unteren Rand */
        body:not(:has(.py-results-container)):not(:has(.py-results-grid)) #shopify-footer-container {
            flex-shrink: 0 !important;
            z-index: 1000 !important;
            position: relative !important;
        }

        /* MOBILE RESULTS-SEITE - Python Wrapper normal */
        body:has(.py-results-container) .python-app-wrapper,
        body:has(.py-results-grid) .python-app-wrapper {
            overflow: visible !important;
            height: auto !important;
            min-height: auto !important;
        }

        /* MOBILE MAP - Proper sizing */
        #map.py-map {
            height: 450px !important;
            width: 100% !important;
            margin: 10px 0 !important;
            border-radius: 8px !important;
        }

        .leaflet-container {
            height: 100% !important;
            width: 100% !important;
            min-height: 450px !important;
        }

        /* MOBILE STARTSEITE - Alle Parent-Container zurücksetzen */
        .py-content {
            width: 100% !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        .py-card {
            width: 100% !important;
            padding: 0 !important;
            margin: 0 !important;
        }

        .py-card-content {
            text-align: center !important;
            padding: 0 !important;
            width: 100% !important;
        }

        /* MOBILE STARTSEITE - Form Container */
        .py-search-container.homepage-center:not(.map-view):not(.map-view-below) {
            position: static !important;
            transform: none !important;
            margin: 75px 0 !important;  /* 35px mehr Abstand vom Header (war 40px) */
            padding: 0 !important;
            width: 100% !important;
            text-align: center !important;
            display: block !important;
        }

        /* MOBILE STARTSEITE - Input zentriert via inline-block */
        .py-search-container.homepage-center .py-search-input {
            display: inline-block !important;
            width: 80% !important;
            max-width: 300px !important;
            margin: 0 0 15px 0 !important;
            text-align: center !important;
            padding: 15px 20px !important;
            font-size: 16px !important;
            box-sizing: border-box !important;
        }

        /* MOBILE STARTSEITE - Button zentriert via inline-block */
        .py-search-container.homepage-center .py-btn-search {
            display: inline-block !important;
            width: auto !important;
            min-width: 180px !important;
            margin: 0 !important;
            padding: 15px 30px !important;
            font-size: 16px !important;
            box-sizing: border-box !important;
        }

        /* MOBILE MAP-SEITE - Search Input und Button schmaler */
        .py-search-container.map-view-below {
            max-width: 320px !important;
            margin: 45px auto -10px !important;  /* 10px mehr oben, 10px negativer Abstand zur Map */
            text-align: center !important;
        }

        .py-search-container.map-view-below .py-search-input {
            width: 100% !important;
            max-width: 320px !important;
            padding: 12px 15px !important;
            margin-bottom: 10px !important;
            box-sizing: border-box !important;
        }

        .py-search-container.map-view-below .py-btn-search {
            width: auto !important;
            min-width: 180px !important;
            max-width: 200px !important;
            padding: 12px 20px !important;
            margin: 0 auto !important;
            display: block !important;
            box-sizing: border-box !important;
        }

        /* Show mobile navigation ONLY on Result pages */
        body:has(.py-results-container) .mobile-tab-navigation,
        body:has(.py-results-grid) .mobile-tab-navigation,
        body:has(.py-result-item) .mobile-tab-navigation,
        body:has(.results-view) .mobile-tab-navigation {
            display: block !important;
            position: fixed !important;
            top: 55px !important;
            left: 0 !important;
            right: 0 !important;
            width: 100% !important;
            z-index: 2999 !important;
        }

        /* FORCE HIDE mobile navigation on Start and Map pages */
        body:has(.py-search-input):not(:has(.py-results-container)):not(:has(.py-results-grid)) .mobile-tab-navigation,
        body:has(.homepage-center) .mobile-tab-navigation,
        body:has(.map-view) .mobile-tab-navigation,
        body:has(.map-view-below) .mobile-tab-navigation,
        body:has(#map) .mobile-tab-navigation {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
        }

        /* Adjust body padding when mobile navigation is visible on Result pages */
        body:has(.py-results-container) {
            padding-top: 45px !important;
        }

        body:has(.py-results-grid) {
            padding-top: 45px !important;
        }
    }
    
    /* Desktop - Always hide mobile navigation */
    @media screen and (min-width: 769px) {
        .mobile-tab-navigation {
            display: none !important;
        }
    }

    /* Enhanced Toggle Switches */
    .toggle-switch {
        position: relative !important;
        display: inline-block !important;
        width: 70px !important;
        height: 40px !important;
        margin: 8px 0 !important;
    }
    
    .toggle-switch input {
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    .slider {
        position: absolute !important;
        cursor: pointer !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background-color: #dc2626 !important;
        border: 2px solid #b91c1c !important;
        transition: all 0.4s ease !important;
        border-radius: 34px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    }
    
    .slider:before {
        position: absolute !important;
        content: "" !important;
        height: 32px !important;
        width: 32px !important;
        left: 2px !important;
        bottom: 2px !important;
        background-color: #ffffff !important;
        border: 2px solid #b91c1c !important;
        transition: all 0.4s ease !important;
        border-radius: 50% !important;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* ON state (checked) */
    input:checked + .slider {
        background-color: #10b981 !important;
        border-color: #059669 !important;
        box-shadow: 0 2px 12px rgba(16, 185, 129, 0.4) !important;
    }
    
    input:checked + .slider:before {
        transform: translateX(30px) !important;
        border-color: #059669 !important;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) !important;
    }
    
    /* Hover states */
    .slider:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
        transform: translateY(-1px) !important;
    }
    
    input:checked + .slider:hover {
        box-shadow: 0 4px 16px rgba(16, 185, 129, 0.5) !important;
    }
    
    /* Focus states */
    input:focus + .slider {
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2) !important;
        outline: none !important;
    }
    
    input:checked:focus + .slider {
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3), 0 2px 12px rgba(16, 185, 129, 0.4) !important;
    }
    
    /* Toggle container styling */
    .toggle-reuse {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 12px 16px !important;
        margin: 8px 0 !important;
        background: #ffffff !important;
        border: 2px solid #9ca3af !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
        transition: all 0.3s ease !important;
    }
    
    .toggle-reuse:hover {
        border-color: #6b7280 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        background: #f9fafb !important;
    }
    
    .toggle-reuse label {
        font-weight: 600 !important;
        font-size: 15px !important;
        color: #1f2937 !important;
        margin: 0 !important;
        cursor: pointer !important;
        user-select: none !important;
    }
    /* Immediate mobile navigation styles */
    @media screen and (min-width: 769px) {
        .mobile-tab-navigation {
            display: none !important;
        }
        
        /* Hide mobile tab contents on desktop - but NOT popup color buttons */
        #mobile-tab-background,
        #mobile-tab-search,
        #mobile-tab-categories,
        #mobile-tab-options,
        .mobile-tab-content,
        .mobile-tab-content .color-button,  /* Only hide mobile tab color buttons */
        #mobile-tab-background .color-button,  /* Only hide mobile tab color buttons */
        .color-button-container,
        #mobile-background-content {
            display: none !important;
        }
    }
    
    /* Ensure popup color buttons are visible on desktop */
    @media screen and (min-width: 769px) {
        .popup-overlay .color-button,
        .popup-content .color-button {
            display: inline-block !important;
        }
    }
    
    /* Color Button Styles */
    @media screen and (max-width: 768px) {
        .color-button {
            position: relative;
            margin-bottom: 30px;
        }
        
        .color-button:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
        }
        
        .color-button.active {
            border: 3px solid #28a745 !important;
            box-shadow: 0 0 20px rgba(40, 167, 69, 0.4) !important;
        }
        
        .color-button span {
            position: absolute;
            bottom: -25px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 12px;
            color: #666;
            white-space: nowrap;
        }
        
        #mobile-tab-background .color-button-container {
            padding: 10px;
        }
    }
    
    /* Mobile Tab Content Styles - Unified */
    @media screen and (max-width: 768px) {
        .mobile-tab-content {
            position: fixed !important;
            bottom: 50px !important; /* Above the bottom tabs */
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            background-color: rgba(0, 0, 0, 0.9) !important;
            z-index: 2998 !important; /* Below tabs (2999) but above page content */
            display: none !important;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch !important;
            padding: 0 !important;
            margin: 0 !important;
            text-align: center !important;
        }
        
        .mobile-tab-content.active {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
        
        /* Fix dropdown functionality in mobile tabs */
        .mobile-tab-content .multiselect-dropdown {
            position: relative !important;
            z-index: 1 !important;
            width: 80% !important;
            max-width: 320px !important;
            margin: 5px auto !important;
        }
        
        /* Ensure closed dropdowns stay behind open ones */
        .mobile-tab-content .multiselect-dropdown:not(.open) {
            z-index: 1 !important;
        }
        
        /* Opened dropdown gets higher z-index */
        .mobile-tab-content .multiselect-dropdown.open {
            z-index: 19999 !important;
        }
        
        /* When any dropdown is open, reduce opacity of subsequent dropdowns to make the list more visible */
        .mobile-tab-content .multiselect-dropdown.open ~ .multiselect-dropdown {
            opacity: 0.3 !important;
            pointer-events: none !important;
            transition: opacity 0.2s ease !important;
        }
        
        .mobile-tab-content .multiselect-dropdown-list {
            position: absolute !important;
            z-index: 999999 !important;
            background: #ffffff !important;
            border: 1px solid #ddd !important;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3) !important;
            display: none !important;
            max-height: 300px !important;
            overflow-y: auto !important;
            left: 0 !important;
            right: 0 !important;
            top: 100% !important;
            width: 100% !important;
            box-sizing: border-box !important;
        }
        
        .mobile-tab-content .multiselect-dropdown-list.show {
            display: block !important;
        }
        
        .mobile-tab-content .multiselect-dropdown-header {
            cursor: pointer !important;
            user-select: none !important;
            background: #4a5568 !important;
            color: #ffffff !important;
            padding: 10px !important;
            border: 1px solid rgba(255, 255, 255, 0.3) !important;
            border-radius: 4px !important;
        }
        
        .mobile-tab-content .multiselect-dropdown.open .multiselect-dropdown-header {
            border-bottom-left-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
        }
        
        .mobile-content-wrapper {
            background: white;
            margin: 30px 0 20px 0;
            padding: 0;
            border-radius: 8px;
            max-height: calc(100vh - 150px);
            width: 100%;
            overflow-y: auto;
            text-align: center;
        }
        
        /* Mobile search form styling when inside mobile tabs - OVERRIDE LEFT COLUMN STYLES */
        .mobile-tab-content .py-search-container,
        .mobile-content-wrapper .py-search-container,
        .mobile-tab-content .py-left-column .py-search-container,
        .mobile-content-wrapper .py-left-column .py-search-container {
            width: 100% !important;
            max-width: none !important;
            margin: 0 !important;
            padding: 40px 0 20px 0 !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
        }

        .mobile-tab-content .py-search-input,
        .mobile-content-wrapper .py-search-input {
            display: block !important;
            width: 80% !important;
            max-width: 320px !important;
            padding: 12px 15px !important;
            border: 1px solid #ddd !important;
            border-radius: 8px !important;
            font-size: 16px !important;
            text-align: center !important;
            box-sizing: border-box !important;
            margin: 0 auto 15px auto !important;
        }

        .mobile-tab-content .py-btn-search,
        .mobile-tab-content button[type="submit"],
        .mobile-content-wrapper .py-btn-search,
        .mobile-content-wrapper button[type="submit"] {
            display: block !important;
            width: auto !important;
            min-width: 180px !important;
            max-width: 220px !important;
            padding: 12px 30px !important;
            background: #6c757d !important;
            color: white !important;
            border: none !important;
            border-radius: 8px !important;
            font-size: 14px !important;
            font-weight: 500 !important;
            cursor: pointer !important;
            transition: all 0.2s ease !important;
            margin: 0 auto !important;
        }
        
        .mobile-tab-content .py-country-select,
        .mobile-content-wrapper .py-country-select {
            width: 100% !important;
            max-width: 350px !important;
            padding: 12px 15px !important;
            border: 1px solid #ddd !important;
            border-radius: 8px !important;
            font-size: 16px !important;
            box-sizing: border-box !important;
            margin: 0 auto !important;
        }
        
        /* Mobile tab content - fix checkbox and label text visibility */
        .mobile-tab-content label,
        .mobile-content-wrapper label,
        .mobile-tab-content .py-toggle-text,
        .mobile-content-wrapper .py-toggle-text,
        .mobile-tab-content span,
        .mobile-content-wrapper span {
            color: #ffffff !important;
            font-weight: 500 !important;
            font-family: Arial, sans-serif !important;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
        }
        
        .mobile-tab-content input[type="checkbox"] + label,
        .mobile-tab-content input[type="radio"] + label,
        .mobile-content-wrapper input[type="checkbox"] + label,
        .mobile-content-wrapper input[type="radio"] + label {
            color: #ffffff !important;
            font-weight: 500 !important;
            font-family: Arial, sans-serif !important;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
            margin-left: 8px !important;
        }
        
        .mobile-tab-content .py-toggle-label,
        .mobile-content-wrapper .py-toggle-label {
            color: #ffffff !important;
            font-family: Arial, sans-serif !important;
        }
        
        .mobile-tab-content .py-toggle-label .py-toggle-text,
        .mobile-content-wrapper .py-toggle-label .py-toggle-text {
            color: #ffffff !important;
            font-weight: 500 !important;
            font-family: Arial, sans-serif !important;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
        }
        
        .mobile-content-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
            background: #f8f9fa;
            border-radius: 8px 8px 0 0;
        }
        
        .mobile-content-header h3 {
            margin: 0;
            font-size: 1.2em;
            color: #333;
        }
        
        .mobile-close-btn {
            background: none;
            border: none;
            font-size: 24px;
            color: #666;
            cursor: pointer;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .mobile-content-body {
            padding: 20px;
        }
        
        .mobile-select-group,
        .mobile-option-group {
            margin-bottom: 15px;
        }
        
        .mobile-select-group label,
        .mobile-option-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #333;
        }
        
        .mobile-search-form {
            display: flex;
            flex-direction: column;
            gap: 15px;
            padding: 30px 20px 20px 20px; /* Extra top padding for mobile tabs */
            align-items: center;
            justify-content: center;
            max-width: 400px;
            margin: 0 auto;
        }
        
        .mobile-search-input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            text-align: center;
            box-sizing: border-box;
        }
        
        .mobile-search-btn {
            width: 100%;
            max-width: 200px;
            padding: 12px 20px;
            background: #6c757d;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            margin-top: 5px;
        }
        
        .mobile-search-btn:hover {
            background: #5a6268;
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .mobile-search-btn:active {
            background: #495057;
            transform: translateY(0);
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }
    }

/* ========================================
   PHASE 1 CLEANUP: Mobile Tab Navigation
   Theme-System Integration
   ======================================== */

/* Mobile Tab Navigation Base Styles */
.mobile-tab-navigation {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 56px !important;
    background-color: var(--mobile-tab-bar-bg, #f8f9fa) !important;
    border-top: 1px solid var(--mobile-tab-bar-border, #dee2e6) !important;
    z-index: 2999 !important;
    margin: 0 !important;
    padding: 4px !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
}

.mobile-tabs {
    display: flex !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    gap: 4px !important;
}

.mobile-tab {
    flex: 1;
    display: flex;
}

.mobile-tab-link {
    color: var(--mobile-tab-link-color, #ffffff) !important;
    text-decoration: none !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 12px 8px !important;
    background: var(--mobile-tab-link-bg, #4a5568) !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
}

.mobile-tab-link.active {
    background: var(--mobile-tab-link-active-bg, #2d3748) !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2) !important;
}

/* ========================================
   PHASE 1 CLEANUP: Color Buttons
   Theme-System Integration
   ======================================== */

/* Mobile Tab Background Content Heading */
#mobile-background-content h3 {
    color: var(--mobile-tab-heading-color, #333);
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
    font-family: Arial, sans-serif;
}

/* Color Button Container */
.color-button-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* Color Button Base Styles - Mobile Tab only */
.mobile-tab-content .color-button,
#mobile-tab-background .color-button {
    width: 80px;
    height: 80px;
    border: 2px solid var(--color-button-border, #dee2e6);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
}

/* Default Button Special Border */
.color-button[data-color="default"] {
    border: 3px solid var(--color-button-default-border, #007bff);
}

/* Color Button Labels */
.color-button span {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: var(--color-button-label-color, #666);
    white-space: nowrap;
}

/* Star Icon for Default Button */
.color-button i.fa-star {
    position: absolute;
    top: 8px;
    right: 8px;
    color: var(--color-button-star-color, #007bff);
    font-size: 16px;
}

/* Active State */
.color-button.active {
    border-width: 3px;
    border-color: var(--color-button-active-border, #007bff);
    box-shadow: 0 4px 12px rgba(0,123,255,0.3);
}

/* ========================================
   PHASE 1 CLEANUP: Popup Color Buttons Container
   Theme-System Integration
   ======================================== */

/* Popup Color Buttons Container */
.popup-content .color-buttons {
    display: flex;
    gap: 8px;
    padding: 0 10px;
}

/* ========================================
   PHASE 1 CLEANUP: Herz-SVG-Farben
   Theme-System Integration
   ======================================== */

/* Loader Heart SVG Colors */
.loader-heart svg {
    fill: var(--loader-heart-fill, red);
    stroke: var(--loader-heart-stroke, white);
}

/* ========================================
   NODE FILTERING: Visual Indicators
   Warning Badges & Pulsing Markers
   ======================================== */

/* Node Warning Badge */
.node-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ff9800;
    color: white;
    font-size: 14px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    z-index: 1000;
    cursor: help;
}

/* Heart Marker Styling */
.heart-marker {
    position: relative;
}

.heart-marker-node {
    opacity: 0.9;
}

/* Pulsing Animation für Node-Marker */
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.pulse-marker {
    animation: pulse 2s ease-in-out infinite;
}

/* Hover-Effekt für Node-Marker */
.heart-marker-node:hover {
    opacity: 1;
    transform: scale(1.15);
    transition: all 0.2s ease;
}

/* ===================================================================
   MOBILE LOADING OVERLAY - Optimized for Fast Feedback
   =================================================================== */

/* Mobile Loading Overlay - Shows immediately when marker is clicked */
.mobile-loading-overlay {
    position: fixed;
    top: 121px; /* Below Shopify header + mobile nav */
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: fadeIn 0.2s ease forwards;
    font-family: Arial, sans-serif; /* Arial font for all overlay text */
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.mobile-loading-content {
    text-align: center;
    padding: 30px;
    color: white;
    font-family: Arial, sans-serif;
}

.mobile-loading-city-name {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #fff;
    font-family: Arial, sans-serif;
}

.mobile-loading-message {
    font-size: 16px;
    margin-bottom: 25px;
    color: rgba(255, 255, 255, 0.9);
    font-family: Arial, sans-serif;
}

/* Spinner Animation */
.mobile-loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Progress Counter (shows when designs start arriving) */
.mobile-loading-progress {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 10px;
}

/* Hide overlay on desktop */
@media (min-width: 769px) {
    .mobile-loading-overlay {
        display: none !important;
    }
}

/* ========================================
   MULTI-LANGUAGE FEATURE: Alternative Languages Dropdown
   ======================================== */

.alternative-languages-section {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.alternative-languages-label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 12px;
    text-align: center;
    font-family: "Noto Sans Myanmar", "Noto Sans Arabic", "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Telugu", "Noto Sans Tamil", "Noto Sans Ethiopic", "Noto Sans Thai", "Noto Sans Gujarati", "Noto Sans Kannada", "Noto Sans Malayalam", "Noto Sans Gurmukhi", "Noto Sans Lao", "Noto Sans Sinhala", "Noto Sans Khmer", "Noto Sans Hebrew", "Noto Sans Armenian", "Noto Serif Tibetan", "Noto Sans Georgian", "Noto Sans Canadian Aboriginal", "Noto Sans", "Noto Serif", "Noto Sans CJK", Arial, sans-serif;
    font-feature-settings: "liga" 1, "calt" 1;
}

.alternative-language-dropdown {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 15px;
    font-family: "Noto Sans Myanmar", "Noto Sans Arabic", "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Telugu", "Noto Sans Tamil", "Noto Sans Ethiopic", "Noto Sans Thai", "Noto Sans Gujarati", "Noto Sans Kannada", "Noto Sans Malayalam", "Noto Sans Gurmukhi", "Noto Sans Lao", "Noto Sans Sinhala", "Noto Sans Khmer", "Noto Sans Hebrew", "Noto Sans Armenian", "Noto Serif Tibetan", "Noto Sans Georgian", "Noto Sans Canadian Aboriginal", "Noto Sans", "Noto Serif", "Noto Sans CJK", Arial, sans-serif;
    font-feature-settings: "liga" 1, "calt" 1;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 15px;
}

.alternative-language-dropdown:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
}

.alternative-language-dropdown:focus {
    outline: none;
    border-color: #4CAF50;
    background: rgba(255, 255, 255, 0.2);
}

.alternative-language-dropdown option {
    background: #2c2c2c;
    color: white;
    padding: 10px;
    font-family: "Noto Sans Myanmar", "Noto Sans Arabic", "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Telugu", "Noto Sans Tamil", "Noto Sans Ethiopic", "Noto Sans Thai", "Noto Sans Gujarati", "Noto Sans Kannada", "Noto Sans Malayalam", "Noto Sans Gurmukhi", "Noto Sans Lao", "Noto Sans Sinhala", "Noto Sans Khmer", "Noto Sans Hebrew", "Noto Sans Armenian", "Noto Serif Tibetan", "Noto Sans Georgian", "Noto Sans Canadian Aboriginal", "Noto Sans", "Noto Serif", "Noto Sans CJK", Arial, sans-serif;
    font-feature-settings: "liga" 1, "calt" 1;
}

.btn-alternative {
    width: 100%;
    padding: 15px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    font-family: Arial, sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.btn-alternative:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.btn-alternative:active:not(:disabled) {
    transform: translateY(0);
}

.btn-alternative:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: linear-gradient(135deg, #555 0%, #777 100%);
    box-shadow: none;
}

/* Mobile optimization for dropdown section */
@media (max-width: 768px) {
    .alternative-languages-section {
        margin-top: 25px;
        padding-top: 20px;
    }

    .alternative-language-dropdown {
        font-size: 16px; /* Prevent zoom on iOS */
        padding: 14px 15px;
    }

    .btn-alternative {
        padding: 16px 20px;
        font-size: 15px;
    }
}

/* ========================================
   Leaflet Heart Marker - Click Fix
   ======================================== */
/* Fix: SVG inside marker should not intercept clicks */
.heart-marker {
    cursor: pointer !important;
}

.heart-marker svg,
.heart-marker svg * {
    pointer-events: none !important; /* Let clicks pass through to marker */
}

/* Ensure the marker div itself receives clicks */
.leaflet-marker-icon.heart-marker {
    pointer-events: auto !important;
}

/* ========================================
   DESKTOP CENTERING FIX
   ======================================== */
@media (min-width: 769px) {
    /* Fix python-app-wrapper centering on desktop */
    .python-app-wrapper {
        left: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Ensure py-content is centered */
    .py-content {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Ensure map is centered */
    #map.py-map {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}