/* ================================
   Mobile-First Styles (Gazetteer)
   ================================ */

:root{
  --brand:#198754;          /* bootstrap success */
  --soft:#f8f9fa;
  --shadow:0 10px 30px rgba(0,0,0,.15);
  --radius:16px;
  --btn-size:48px;          /* desktop/tablet touch target */
}

/* Map fills the screen */
html, body { height:100%; margin:0; }
#map { height:100vh; width:100%; }

/* Country selector — fixed, centered, thumb-friendly */
#selectContainer{
  position:fixed;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  width:min(92vw, 520px);
  z-index:1002;             /* above Leaflet controls */
  pointer-events:auto;
}

#countrySelect{
  padding:.55rem .9rem;
  font-size:clamp(.95rem, 3.2vw, 1rem);
  border-radius:12px;
  box-shadow:var(--shadow);
}

/* Ensure images (flags) scale down nicely */
img { max-width:100%; height:auto; }

/* Leaflet controls / default +/- look */
.leaflet-bar a{
  width:var(--btn-size);
  height:var(--btn-size);
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid rgba(0,0,0,.2);
  box-shadow:var(--shadow);
  padding:0;
}

/* EasyButton fix: inner span was 26x26; make it fill & center the icon */
.easy-button-container .easy-button-button{
  width:var(--btn-size);
  height:var(--btn-size);
  padding:0;
  background:#fff !important;
  border:1px solid rgba(0,0,0,.2);
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  justify-content:center;
}
.easy-button-container .easy-button-button .button-state{
  width:100% !important;
  height:100% !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  line-height:1 !important;
  background:#fff !important;
}
.easy-button-container .easy-button-button .button-state i{
  font-size:20px;
  color:#212529;
}

/* Keep controls clear of selector on small screens */
@media (max-width: 576px){
  .leaflet-top.leaflet-left{ margin-top:68px; }
  .leaflet-top.leaflet-right{ margin-top:68px; }
}

/* -------------------
   Modal presentation
   ------------------- */

/* Avoid any horizontal nudge when modals open */
html, body { overflow-x: hidden; }
body.modal-open { padding-right: 0 !important; }

/* Center dialogs by default (desktop & tablet) */
.modal-dialog{
  margin: 1rem auto;               /* auto centers horizontally */
}
.modal-content{
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* Mobile: keep a small gutter and clamp width to viewport */
@media (max-width: 576px){
  .modal-dialog{
    width: auto !important;
    max-width: calc(100vw - 20px) !important;  /* 10px gutter each side */
    margin: 10px auto !important;              /* centered */
  }
  .modal-body{
    padding: 14px;
  }
  .table{
    font-size: .95rem;
  }
}

/* Weather modal preloader */
#pre-load{
  position:absolute;
  inset:0;
  z-index:999;
  background:#fff;
}
#pre-load::before{
  content:"";
  position:absolute;
  width:60px; height:60px;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  border:6px solid #f2f2f2;
  border-top:6px solid #56829e;
  border-radius:50%;
  animation:wm-spin 1s linear infinite;
}
@keyframes wm-spin { from{transform:translate(-50%,-50%) rotate(0)} to{transform:translate(-50%,-50%) rotate(360deg)} }
.fadeOut{ visibility:hidden; opacity:0; transition:visibility 0s 300ms, opacity 300ms; }

/* Modal header colors */
#exampleModal .modal-header{ background:linear-gradient(90deg, var(--brand), #23a06b); color:#fff; }
#demographicsModal .modal-header{ background:#0d6efd; color:#fff; }
#wikiModal .modal-header{ background:#e9ecef; }
#currencyModal .modal-header{ background:#ffc107; }
#weatherModal .modal-header{ background:#0dcaf0; }
#holidaysModal .modal-header{ background:#198754; color:#fff; }

/* Gentle body background behind map on overscroll */
body{ background:var(--soft); }

/* Safe-area padding for iOS notches */
@supports(padding-top: env(safe-area-inset-top)){
  #selectContainer{ top: calc(12px + env(safe-area-inset-top)); }
}

/* ======================================
   Bigger map buttons for mobile ONLY
   ====================================== */
@media (max-width: 576px){
  /* bump the shared size token so everything that uses it grows */
  :root { --btn-size: 56px; }

  /* belt & braces: explicitly set size in case other rules override */
  .leaflet-bar a,
  .easy-button-container .easy-button-button{
    width: var(--btn-size) !important;
    height: var(--btn-size) !important;
  }

  /* Layer control toggle button */
  .leaflet-control-layers-toggle {
    width: var(--btn-size) !important;
    height: var(--btn-size) !important;
    background-size: 70% 70% !important; /* scale the layer icon */
  }

  /* bigger glyphs (+ / – text and FA icons) */
  .leaflet-bar a{ font-size: 22px; }
  .easy-button-container .easy-button-button .button-state i{
    font-size: 22px;
  }
}

/* ========= Preloader ========= */
body.loading { overflow: hidden; }

#preloader {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(12, 18, 28, 0.9);
  z-index: 4000;                 /* above #selectContainer (1002) and Leaflet */
  opacity: 1;
  transition: opacity 300ms ease;
}

#preloader.hide { opacity: 0; pointer-events: none; }
#preloader.gone { display: none; }

#preloader .preloader-card {
  display: grid;
  gap: 12px;
  place-items: center;
  padding: 20px 24px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
}

#preloader .preloader-text {
  color: #fff;
  font-size: 0.95rem;
}