/**
 * MAP CONTROL BUTTONS
 * Styles für Transport-Modus und Zeit-Auswahl Buttons
 */

/* ===== MAP CONTAINER ===== */
/* Leaflet nutzt die volle Höhe des Parent-Containers (aspect-ratio: 3/2) */
#location-map {
    width: 100%;
    height: 100%;
    min-height: 300px; /* Minimum für Leaflet-Initialisierung */
}

/* Safari scroll-to-top fix */
#location-map.leaflet-container {
    touch-action: pan-x pan-y;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: auto;
}

/* Prevent focus outline causing scroll */
#location-map.leaflet-container:focus {
    outline: none;
    scroll-behavior: auto;
}

/* Desktop: Passt sich an Textbox an durch Grid */
@media (min-width: 1024px) {
    #location-map {
        min-height: 1px; /* Quasi kein Minimum, Grid bestimmt Höhe */
    }
}

/* Mobile: Größere Mindesthöhe für Nutzbarkeit */
@media (max-width: 1023px) {
    #location-map {
        min-height: 350px;
    }
}

/* ===== CONTROL BUTTONS ===== */
.transport-btn,
.time-btn {
    background: transparent;
    border: 2px solid var(--penn-blue);
    color: var(--penn-blue);
    padding: 0.625rem 1rem;
    min-height: 44px; /* Touch-Target Minimum */
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-interface);
    border-radius: 6px;
    text-align: center;
}

.transport-btn:hover,
.time-btn:hover {
    background: var(--penn-blue);
    color: white;
}

.transport-btn.active,
.time-btn.active {
    background: var(--penn-blue);
    color: white;
}

/* Solid/Filled CTA Buttons */
.transport-btn.cta-btn {
    transition: background 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease;
}

.transport-btn.cta-btn:hover {
    background: #1e2a5e !important; /* Subtil heller */
    box-shadow: 0 4px 16px rgba(20, 27, 77, 0.25) !important;
}

.transport-btn.cta-btn:active {
    background: #0f1638 !important; /* Dunkler beim Klick */
}

/* CTA Buttons Entrance Animation - Slide from Top (wie Hero) */
@keyframes cta-slide-from-top {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cta-btn-animated {
    opacity: 0;
}

.cta-btn-animated.visible {
    animation: cta-slide-from-top 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.cta-btn-animated:nth-child(1).visible { animation-delay: 0ms; }
.cta-btn-animated:nth-child(2).visible { animation-delay: 150ms; }
.cta-btn-animated:nth-child(3).visible { animation-delay: 300ms; }

/* Mobile: Größere Touch-Targets */
@media (max-width: 767px) {
    .transport-btn,
    .time-btn {
        padding: 0.75rem 0.5rem;
        min-height: 44px;
        font-size: 0.875rem;
    }
}

/* Map Controls Grid - Mobile 2x2 Layout */
.map-controls-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xs);
}

@media (max-width: 480px) {
    .map-controls-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-xs);
    }
}

/* CTA Buttons Container - volle Breite auf Mobile, begrenzt auf Desktop */
.cta-buttons-container {
    width: 100%;
}

@media (min-width: 768px) {
    .cta-buttons-container {
        max-width: 280px;
    }
}