/* pages.css - Page specific styles */
.map-container {
    height: 400px;
    width: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-lg);
    position: relative;
    z-index: 1;
}

.how-to-get-box {
    background: #fff;
    border: 1px solid #eee;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-top: var(--space-lg);
}

.province-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-md);
}

/* Quick Info Sidebar */
.info-sidebar {
    background: var(--bg-card);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 100px;
}

/* Map Marker Icons */
.custom-marker-icon {
    background: transparent !important;
    border: none !important;
}

/* Map Legend */
.map-legend {
    background: #fff;
    padding: 10px 15px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    font-size: 0.85rem;
}

.map-legend strong {
    display: block;
    margin-bottom: 8px;
    color: #333;
}

/* Map Wrapper */
.map-wrapper {
    position: relative;
}

.map-wrapper #main-map {
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Sidebar Map Fix */
.sidebar .map-container,
.card .map-container {
    height: 250px;
    margin-bottom: 0;
}