/* Global Root Styles - rounded, modern, beautiful */
:root {
  --color-bg: #f7f9fc;
  --color-surface: #ffffff;
  --color-text: #1f2937;
  --color-muted: #6b7280;
  --color-border: rgba(15, 23, 42, 0.06);
  --color-primary: #2563eb;
  --color-primary-2: #7c3aed;
  --color-accent: #10b981;

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 9999px;

  --shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 30px rgba(0,0,0,0.12);
}

html, body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Inter, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Links */
 a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
 }
 a:hover { text-decoration: underline; }

/* Breadcrumbs */
.breadcrumb, nav {
  font-size: 14px;
}
.breadcrumb a, nav a { color: var(--color-primary); }
.breadcrumb a:hover, nav a:hover { color: #1e40af; }

/* Cards - unified rounded look */
.info-card, .country-card, .city-card, .map-section, .hero, .country-intro {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.info-card, .country-card, .city-card { transition: transform .2s ease, box-shadow .2s ease; }
.info-card:hover, .country-card:hover, .city-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Info cards layout tweaks */
.info-cards { gap: 16px; }
.info-card { padding: 16px 18px; }
.info-card h4, .info-card h3 { font-size: 1.05rem; margin-bottom: 10px; color: #0f172a; }
.info-card p { color: var(--color-muted); }
.info-card ul { list-style: none; padding-left: 0; margin: 8px 0 0; }
.info-card li { padding: 6px 0; border-bottom: 1px dashed var(--color-border); }
.info-card li:last-child { border-bottom: none; }

/* Pills / Chips (used for quick badges and links) */
.pill, .chip, .badge, .info-card a.pill, .info-card a.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  margin: 6px 6px 0 0;
  border-radius: var(--radius-pill);
  background: #f1f5f9;
  border: 1px solid var(--color-border);
  color: #0f172a;
  text-decoration: none;
  font-size: 0.92rem;
}
.pill:hover, .chip:hover, .badge:hover, .info-card a.pill:hover, .info-card a.chip:hover {
  background: #e2e8f0;
  transform: translateY(-1px);
  text-decoration: none;
}
.badge.success { background: #ecfdf5; color: #065f46; border-color: rgba(16,185,129,.25); }
.badge.warn { background: #fffbeb; color: #92400e; border-color: rgba(245,158,11,.25); }
.badge.info { background: #eff6ff; color: #1e40af; border-color: rgba(37,99,235,.25); }

/* Buttons */
.btn, button, .button {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-2) 100%);
  color: white;
  padding: 10px 14px;
  border: none;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.btn:hover, button:hover, .button:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn:active, button:active, .button:active { transform: translateY(0); }

/* Tables (if present) */
.table, table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.table th, table th { background: #f8fafc; font-weight: 600; color: #0f172a; }
.table th, .table td, table th, table td { padding: 10px 12px; border-bottom: 1px solid var(--color-border); }
.table tr:last-child td, table tr:last-child td { border-bottom: none; }

/* Map containers */
.map-section { padding: 20px; }
.airport-map { border-radius: var(--radius-sm); border: 1px solid var(--color-border); }
.map-loading, .map-error {
  background: rgba(248, 250, 252, 0.9);
  backdrop-filter: blur(2px);
  border-radius: var(--radius-sm);
}

/* Lists / definition rows */
.key-value, .kv, .booking-row, .bookingRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #f8fafc;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--color-border);
  margin: 8px 0;
}
.key-value .key, .kv .key { color: var(--color-muted); }
.key-value .value, .kv .value { color: var(--color-text); font-weight: 600; }

/* Section headings */
.section-title, .info-card h4, h2, h3 {
  letter-spacing: .2px;
}

/* Hero / headers keep rounded corners */
header, .hero {
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

/* Footer / small text */
small, .muted { color: var(--color-muted); }

/* Responsive tweaks */
@media (max-width: 768px) {
  .container { padding: 16px; }
  .info-card { padding: 14px 16px; }
  .info-card h4 { font-size: 1rem; }
}

/* Leaflet compatibility fixes: prevent global img rules from breaking tiles */
.leaflet-container img,
.leaflet-container .leaflet-tile,
.leaflet-pane > img,
.leaflet-tile,
.leaflet-image-layer {
  max-width: none !important;
  border-radius: 0 !important;
}

/* Ensure Leaflet map fills its container */
.leaflet-container {
  width: 100%;
  height: 100%;
  line-height: 0; /* avoid tiny gaps between tiles */
}

/* Hero placeholder and fallback visuals */
.hero-image {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.hero-image img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
  background: #f0f4f8;
}
.hero-image .hero-placeholder {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eef2ff 0%, #f0f9ff 100%);
  color: #334155;
}
.hero-image .hero-placeholder-text {
  background: rgba(255,255,255,0.75);
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
}
.hero-image.no-image {
  min-height: 260px;
  background: linear-gradient(135deg, #eef2ff 0%, #f0f9ff 100%);
}
.hero-image.no-image .hero-placeholder { display: flex; }

/* Map fallback banner */
.map-fallback {
  display: none;
  padding: 12px 14px;
  margin-top: 12px;
  background: #fffbeb;
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #92400e;
  border-radius: var(--radius-sm);
}