/* =======================================================
   MAPS – InfoWindow (Google Maps)
   Enhetlig stil för popup-kort
   ======================================================= */

.gm-style .gm-style-iw-c {
  padding: 0 !important;
  border-radius: var(--radius-lg);
}

.gm-style .map-info-window {
  max-width: 280px;
}

/* Card wrapper */
.gm-style .iw-card {
  display: block;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-lg);
}

/* Titel */
.gm-style .iw-title {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text);
}

/* Beskrivning */
.gm-style .iw-desc {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-text-light);
}

/* CTA */
.gm-style .iw-cta {
  display: inline-block;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: underline;
}

.gm-style .iw-card:hover .iw-cta {
  text-decoration: none;
}

/* Fokus (accessibility) */
.gm-style .iw-card:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-lg);
}


/* =======================================================
   MAP FALLBACK LIST (under kartan)
   Grid layout för platser
   ======================================================= */

.map-fallback-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-sm);
  margin: var(--spacing-md) 0 var(--spacing-lg);
}

/* Item */
.map-fallback-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs);

  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);

  padding: var(--spacing-sm) var(--spacing-md);

  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s, border-color .2s;
}

.map-fallback-item:hover {
  border-color: var(--color-border);
  box-shadow: var(--shadow-md);
}

/* Icon */
.mf-icon {
  font-size: 16px;
  line-height: 1;
  margin-top: 2px;
}

/* Text wrapper */
.mf-text {
  flex: 1;
}

/* Link */
.mf-link {
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
}

.mf-link:hover {
  text-decoration: underline;
}

/* Titel */
.mf-title {
  font-weight: 600;
}

/* Subtext */
.mf-sub {
  display: block;
  font-size: 12px;
  color: var(--color-text-light);
  margin-top: 2px;
}