html, body {
height: 100%;
margin: 0;
padding: 0;
background-color: var(--bg);
}

#map {
height: calc(100vh - 60px);
width: 100%;
border-radius: 16px;
overflow: hidden;
box-shadow: var(--shadow-1);
transition: opacity 0.6s ease-out;
}

.leaflet-container {
    background: var(--bg) !important;
}

.leaflet-popup-content-wrapper {
    background: var(--surface) !important;
    color: var(--text) !important;
}

.leaflet-popup-tip {
    background: var(--surface) !important;
}

/* Leaflet UI (controls + attribution) */
.leaflet-control {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--control-shadow) !important;
}

.leaflet-control a {
  color: var(--text) !important;
}

.leaflet-control a:hover {
  background: var(--step-bg) !important;
}

.leaflet-control-attribution {
  background: color-mix(in srgb, var(--surface) 85%, transparent) !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border) !important;
}
.leaflet-control-attribution a {
  color: var(--primary) !important;
}

.leaflet-popup-content {
  color: var(--text) !important;
}

/* Toast */
.map-toast {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%) translateY(20px);
background: var(--toast-bg);
color: var(--toast-text);
padding: 10px 18px;
border-radius: 10px;
font-size: 0.9rem;
opacity: 0;
transition: opacity 0.4s ease, transform 0.4s ease;
box-shadow: var(--shadow-2);
z-index: 1000;
}
.map-toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}

/* Cluster */
.marker-cluster-small div {
background: linear-gradient(145deg, var(--pin-news-1), var(--pin-news-2));
border: 3px solid var(--cluster-border);
color: var(--cluster-text);
font-weight: 600;
font-size: 14px;
}

/* Fix Leaflet injecting opacity on popup (causing faded button text) */
.leaflet-popup-content-wrapper,
.leaflet-popup-content {
    opacity: 1 !important;
}

/* Fix uneven padding between left/right */
.leaflet-popup-content {
    padding: 0 !important;
}

/* Fix the internal container Leaflet adds */
.leaflet-popup-content > div {
    margin: 0 !important;
    padding: 0 !important;
}

/* Photo styling */
.popup-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    background: var(--map-surface-2);
}

/* Title */
.popup-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}

/* Summary text */
.popup-description {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.45;
    margin-bottom: 1.3rem;
}

/* Footer container */
.popup-footer {
    display: flex;
    justify-content: flex-start;
    margin-top: 10px;
}

/* Button — FIXED version */
.popup-button {
    display: inline-block;
    background: var(--primary);
    color: var(--primary-contrast) !important;
    padding: 0.65rem 1.3rem;
    border-radius: 10px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    transition: background 0.15s ease;
}

/* Header row container */
.popup-header {
display: flex;
gap: 14px;
align-items: flex-start;
margin-bottom: 14px;
}

/* Thumbnail */
.popup-thumb {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--map-surface-2);
    flex-shrink: 0;
}

/* NEWS / EVENT chip */
.popup-type {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 6px;
    margin-bottom: 6px;
}

.popup-type.news {
    background: var(--chip-news-bg);
    color: var(--chip-news-text);
}

.popup-type.event {
    background: var(--chip-event-bg);
    color: var(--chip-event-text);
}

/* Title + date container */
.popup-info {
    flex: 1;
}

.popup-date {
    font-size: 0.78rem;
    color: var(--map-muted);
    margin-top: 4px;
}

.popup-button:hover {
    background: var(--primary-hover);
}

/* Map Pins */
.custom-pin {
position: relative;
width: 38px;
height: 38px;
background: var(--pin-base);
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
box-shadow: var(--shadow-3);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pin-news {
background: linear-gradient(145deg, var(--pin-news-1), var(--pin-news-2));
}
.pin-event {
background: linear-gradient(145deg, var(--pin-event-1), var(--pin-event-2));
}
.pin-icon {
transform: rotate(45deg);
color: var(--pin-icon);
font-size: 18px;
}

/* Controls */
.map-controls {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2000;
}

.map-btn {
  width: 42px;
  height: 42px;
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  border: none;
  box-shadow: var(--control-shadow);
  font-size: 22px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.map-btn:hover {
  background: var(--step-bg);
}

.map-btn i {
font-size: 18px;
color: var(--text);
}

.map-btn:hover i {
color: var(--icon-hover);
}