/* ============================================================
   GLOBAL PAGE
   ============================================================ */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background: #f5f5f5;
    font-family: "Segoe UI", Arial, sans-serif;
}

/* ============================================================
   MAP
   ============================================================ */
#map {
    height: 100vh;
    width: 100%;
    position: relative;
}

/* ============================================================
   LEAFLET SAFE FIXES (DO NOT STYLE MARKERS HERE)
   ============================================================ */

/* Remove default PNG shadow (JS uses divIcon / SVG only) */
.leaflet-marker-shadow {
    display: none !important;
}

/* ============================================================
   MARKER POLISH (VISUAL ONLY – NO SHAPE / SIZE CONTROL)
   ============================================================ */

/* Hover feedback only */
.extra-marker:hover {
    transform: scale(1.12);
    filter: brightness(1.1);
    cursor: pointer;
}

/* Weather icon slightly larger */
.extra-marker.weather-icon i {
    font-size: 22px !important;
}

/* ============================================================
   CLUSTERS – NUMBERED CIRCLES ONLY
   (JS CONTROLS WHEN THESE APPEAR)
   ============================================================ */

.marker-cluster-custom {
    background: transparent !important;
    border: none !important;
}

.cluster-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #fff;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* Cluster colours */
.cluster-blue   { background: #007bff; }
.cluster-red    { background: #dc3545; }
.cluster-green  { background: #28a745; }
.cluster-yellow { background: #ffc107; }

/* ============================================================
   REMOVE SPIDERFY LEGS (CLEAN LOOK)
   ============================================================ */
.leaflet-marker-icon.leaflet-marker-icon-spider-leg,
.leaflet-marker-icon.leaflet-marker-cluster-spider-leg,
.leaflet-spider-leg {
    display: none !important;
}

/* ============================================================
   COUNTRY SELECT CONTROL
   ============================================================ */
#countrySelectControl {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background: #ffffff;
    padding: 8px 12px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

#countrySelect {
    min-width: 220px;
}

/* ============================================================
   PRELOADER
   ============================================================ */
#preloader {
    position: fixed;
    inset: 0;
    background: #ffffff;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #ddd;
    border-top: 4px solid #2e7d32;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   EASY BUTTON – MODERN CODEPEN STYLE
   ============================================================ */

.leaflet-bar.easy-button-container {
    box-shadow: none;
    border: none;
    background: transparent;
}

.leaflet-bar.easy-button-container a {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #ffffff;
    margin-bottom: 10px;
    border: none;
    box-shadow: 0 3px 8px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.leaflet-bar.easy-button-container a:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 14px rgba(0,0,0,0.35);
}

.leaflet-bar.easy-button-container a i {
    font-size: 18px;
    color: #2e7d32; /* tutor green */
}

/* =====================================================
   MODAL INFO CARDS (GLOBAL)
   ===================================================== */

.info-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    margin-bottom: 16px;
}

.info-card h6 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
}

.info-card small {
    color: #666;
    font-size: 12px;
}

.info-card p {
    margin: 8px 0;
    font-size: 14px;
}

/* Container for dynamically injected cards */
.modal-card-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* =====================================================
   CARD ACCENT BARS (TOP BORDER)
   ===================================================== */

.card-green  { border-top: 4px solid #2e7d32; }
.card-blue   { border-top: 4px solid #1976d2; }
.card-yellow { border-top: 4px solid #f9a825; }
.card-red    { border-top: 4px solid #d32f2f; }

/* =====================================================
   WEATHER MODAL – CODEPEN STYLE
   ===================================================== */

/* Blue header band */
.modal-header.weather-header {
    background: linear-gradient(135deg, #1e90ff, #0d6efd);
    color: #fff;
    border-bottom: none;
}

.modal-header.weather-header h4 {
    margin: 0;
    font-weight: 600;
}

/* Weather cards */
.weather-card {
    border: 1px solid #e3e3e3;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Today card emphasis */
.weather-card.today {
    background: #f8fbff;
}

/* Weather icon */
.weather-icon {
    font-size: 34px;
    color: #f4b400;
}

/* Temperature block */
.weather-temp {
    text-align: right;
}

.weather-temp .main {
    font-size: 24px;
    font-weight: 700;
}

.weather-temp .sub {
    font-size: 14px;
    color: #666;
}

/* =====================================================
   MODAL INFO CARDS – NEWS
   ===================================================== */

.info-card.news {
    border-left: 6px solid #28a745;
}

.info-card.news .icon {
    background: #28a745;
    color: #fff;
}

/* Optional thumbnail image */
.info-card.news img {
    width: 90px;
    height: 70px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

/* News title */
.info-card.news h6 {
    margin-bottom: 4px;
}

/* Meta line */
.info-card.news small {
    color: #666;
}

/* News headline links */
#newsContent a {
    color: #dc3545; /* Bootstrap danger (same family as weather/overview headers) */
    text-decoration: none;
}

#newsContent a:hover {
    text-decoration: underline;
}

/* ============================================================
   MOBILE PORTRAIT – LEAFLET HARD FIX (iOS SAFE)
   ============================================================ */
@media (max-width: 768px) and (orientation: portrait) {

  /* Full usable viewport on iOS */
  #map {
    height: 100svh;
  }

  /* Country select stays visible */
  #countrySelectControl {
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
  }

  /* Zoom control only */
  .leaflet-control-zoom {
    top: 70px !important;
    left: 10px !important;
  }

  /* 🔥 Hide complex controls on small screens */
  .leaflet-bar.easy-button-container {
    display: none !important;
  }

  .leaflet-control-layers {
    display: none !important;
  }
}