/* ============================================================
   1. CONTAINER & BASIS
   ============================================================ */
#mapContainer {
    width: 100%;
    height: 500px; 
    border-radius: var(--border-radius-m);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(0, 0, 0, 0.05);
    background-color: var(--bg-light);
    position: relative;
    transition: var(--transition-standard);
}

@media (max-width: 768px) {
    #mapContainer {
        height: 400px;
        border-radius: 12px;
        margin-bottom: var(--space-s);
    }
}

/* Einblend-Effekt bei Initialisierung */
.map-loaded #mapContainer {
    animation: fadeInMap 0.8s ease-out forwards;
}

@keyframes fadeInMap {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Container für die Auswahl-Box */
.tour-filter-container {
    max-width: 600px;
    margin: 20px auto;
    padding: 15px;
    background: #fff;
    border-radius: var(--border-radius-m);
    box-shadow: 0 10px 25px rgba(229, 112, 34, 0.15); /* Dezenter Orange-Schatten */
    border: 2px solid var(--brand-orange);
    position: relative;
    z-index: 10;
}

/* Das Select-Feld selbst */
#ang_tour_id {
    width: 100%;
    padding: 15px 20px;
    font-size: 1.1rem;
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--brand-blue);
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    appearance: none; /* Entfernt Standard-Pfeil */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23e57022' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
}

#ang_tour_id:hover {
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 4px rgba(229, 112, 34, 0.1);
}

/* Kleiner Hinweistext über dem Select */
.select-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--brand-orange);
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 1px;
    text-align: left;
}
/* --- 1. Der Tour-Filter (High Visibility) --- */
.tour-explorer-filter {
    max-width: 650px;
    margin: var(--space-m) auto;
    padding: 25px;
    background: #ffffff;
    border-radius: var(--border-radius);
    border: 2px solid var(--brand-orange);
    box-shadow: var(--shadow-md);
    text-align: left;
    position: relative;
    /* Kleiner Puls-Effekt beim Laden */
    animation: filterPulse 2s infinite ease-in-out;
}

@keyframes filterPulse {
    0% { border-color: var(--brand-orange); }
    50% { border-color: var(--brand-blue); box-shadow: 0 0 15px rgba(71, 117, 189, 0.2); }
    100% { border-color: var(--brand-orange); }
}
/* Das Grundgerüst für das 3-Spalten-Grid */
.grid3col {
    display: grid;
    /* Drei gleich große Spalten auf Desktop */
    grid-template-columns: repeat(3, 1fr); 
    gap: var(--space-m); /* Nutzt deinen globalen Abstand */
    margin-top: var(--space-m);
    align-items: stretch;
}

/* Tablet-Ansicht: 2 Spalten, wenn es zu eng wird */
@media (max-width: 1024px) {
    .grid3col {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile Ansicht: Alle Boxen untereinander */
@media (max-width: 768px) {
    .grid3col {
        grid-template-columns: 1fr;
        gap: var(--space-s);
    }
}

/* Damit die Boxen innerhalb des Grids immer die volle Höhe nehmen */
.region-box {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.tour-explorer-filter label {
    display: block;
    font-family: var(--font-h1);
    font-weight: 800;
    color: var(--brand-blue);
    text-transform: uppercase;
    font-size: 0.85rem;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

#ang_tour_id {
    width: 100%;
    padding: 15px 20px;
    font-size: 1.1rem;
    border-radius: var(--border-radius-m);
    border: 1px solid #ddd;
    color: var(--text-dark);
    cursor: pointer;
    background-color: var(--bg-light);
    font-family: var(--font-body);
}

/* --- 2. Das Routen-Verzeichnis (Premium List) --- */
.explorer-directory {
    /* margin-top: var(--space-l); */
    padding: var(--space-m);
}

.region-box {
    background: #fff;
    padding: 25px;
    border-radius: var(--border-radius-m);
    border-left: 4px solid var(--brand-orange);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-standard);
}

.region-box:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.region-box h4 {
    margin-bottom: 15px;
    color: var(--brand-blue);
    font-family: var(--font-h2);
}

.tour-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tour-link-list li {
    margin-bottom: 12px;
}

.tour-link-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-main);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
}

.tour-link-list a i {
    color: var(--brand-orange);
    transition: transform 0.2s ease;
}

.tour-link-list a:hover {
    color: var(--brand-orange);
}

.tour-link-list a:hover i {
    transform: scale(1.3) translateX(3px);
}


/* ============================================================
   2. INFOWINDOW (Google Maps Popups) - Update mit Scrollbar
   ============================================================ */
.gm-style-iw-c {
    padding: 0 !important;
    border-radius: var(--border-radius-m) !important;
    box-shadow: var(--shadow-md) !important;
    max-width: 420px !important;
}

/* Der eigentliche Content-Bereich - Hier aktivieren wir das Scrollen */
.gm-style-iw-d {
    overflow-y: auto !important; /* Vertikales Scrollen erlauben */
    overflow-x: hidden !important; /* Horizontales Wackeln verhindern */
    max-height: 400px !important; /* Maximale Höhe, bevor die Scrollbar erscheint */
    
    /* Moderne Scrollbar-Logik (Firefox) */
    scrollbar-width: thin;
    scrollbar-color: var(--brand-orange) transparent;
}

/* Custom Scrollbar für Chrome, Safari und Edge */
.gm-style-iw-d::-webkit-scrollbar {
    width: 6px; /* Schön schmal und dezent */
}

.gm-style-iw-d::-webkit-scrollbar-track {
    background: transparent; /* Der Hintergrund der Leiste bleibt unsichtbar */
}

.gm-style-iw-d::-webkit-scrollbar-thumb {
    background-color: var(--brand-orange); /* Dein Enjoy-Nepal-Orange */
    border-radius: 10px;
    border: 1px solid transparent;
}

.gm-style-iw-d::-webkit-scrollbar-thumb:hover {
    background-color: var(--brand-orange-warm); /* Etwas dunkler beim Drüberfahren */
}

/* Unser Inhalts-Design im Popup */
.map-popup {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-family: var(--font-body);
}

/* Unser Inhalts-Design im Popup */
.map-popup {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-family: var(--font-body);
}

.map-popup .step-text {
    padding: 20px;
}

.map-popup h3 {
    margin-top: 5px;
    font-family: var(--font-h1);
    color: var(--brand-blue);
    font-size: 1.4rem;
}

.map-popup .step-location {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--brand-orange);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.map-popup p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-dark);
    margin: 10px 0;
}

/* Facts Liste im Popup */
.map-popup .step-facts-list {
    margin: 10px 0 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.map-popup .step-facts-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 600;
}

.map-popup .step-facts-list i {
    font-size: 1.1rem; /* Nutzt deine icon-font aus global.min.css */
}

/* Bild im Popup */
.map-popup .image-card {
    border-radius: 0 0 var(--border-radius-m) var(--border-radius-m);
    order: -1; /* Schiebt das Bild im Layout nach oben über den Text */
}

.map-popup .image-clip-box {
    aspect-ratio: 16 / 9;
    border-radius: 0; /* Oben bündig im InfoWindow */
}

/* ============================================================
   3. ADVANCED MARKER & HOVER
   ============================================================ */

/* Hover-Effekt für die Tabellenzeilen-Synchronisation */
.map-trigger {
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.map-trigger:hover {
    background-color: var(--bg-blue-light);
}

/* Falls wir CSS-Labels auf den Markern nutzen */
.marker-label {
    background: var(--brand-blue);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: bold;
    border: 2px solid white;
}

/* ============================================================
   4. GOOGLE UI CONTROLS (Buttons)
   ============================================================ */

/* Versteckt das Google-Logo/Copyright etwas eleganter auf kleinen Screens (optional) */
@media (max-width: 480px) {
    .gm-style-cc { display: none; }
}
/* ============================================================
   FIX: Google Maps UI Reset
   Verhindert, dass globale Styles die Steuerelemente verschieben
   ============================================================ */

/* Stellt sicher, dass Google-Bilder nicht durch responsive Regeln skaliert werden */
.gm-style img {
    max-width: none !important;
    max-height: none !important;
}

/* Verhindert, dass globale Button-Styles (Paddings/Margins) die Controls verzerren */


/* Setzt die Box-Berechnung für Google-Elemente auf den Standard zurück */
.gm-style * {
    box-sizing: content-box !important;
}

/* Stellt sicher, dass Labels innerhalb der Map korrekt fließen */
.gm-style label {
    width: auto !important;
    display: inline !important;
}