/* ItAtlas Interactive World — v4.4 Final Deluxe (Cartoon Pastel) */
:root{
  --sea: #a6dcee;
  --low: #b2e6b6;
  --mid: #fce2a9;
  --high:#f9b4b9;
  --land:#e7efe9;
  --border:#ffffff;
  --border-soft: rgba(0,0,0,.25);
  --bg1:#0b0f1a; --bg2:#0a0d18;
  --text:#eaf7ff;
}
.cartoon{ background: radial-gradient(1400px 700px at 15% 20%, rgba(0,255,170,.09), transparent 60%), radial-gradient(1100px 550px at 80% 8%, rgba(0,180,255,.08), transparent 60%), linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%); border:2px solid rgba(0,255,170,.35); border-radius:16px; box-shadow:0 0 22px rgba(0,255,170,.25), inset 0 0 30px rgba(0,180,255,.15); padding:14px; color:var(--text); }
.itatlas-map-wrap{ position:relative; padding-bottom:10px; }
.map-header{ text-align:center; margin-bottom:8px;}
.map-title{ margin:0; font-weight:900; font-size:26px; letter-spacing:.3px; color:#fff; }
.map-sub{ opacity:.85; margin-top:2px; font-size:14px; }

#itadlas-map{}
#itatlas-map{ position:relative; width:100%; height:72vh; min-height:460px; border-radius:14px; outline:1px solid rgba(0,255,255,.18); box-shadow: inset 0 0 30px rgba(0,180,255,.25); overflow:hidden; }
.leaflet-container{ background: var(--sea); }
.leaflet-pane .leaflet-overlay-pane path{ filter: drop-shadow(0 1px 0 var(--border-soft)); }
.country-outline{ stroke: var(--border); stroke-width: 1; paint-order: stroke; }

/* Glow overlay */
.glow-overlay{ position:absolute; inset:0; pointer-events:none; background: radial-gradient(600px 300px at 20% 20%, rgba(255,214,140,.22), transparent 60%), radial-gradient(600px 300px at 80% 10%, rgba(255,140,180,.18), transparent 60%); animation: drift 12s ease-in-out infinite alternate; mix-blend-mode: overlay; }
@keyframes drift{ from{ transform: translateX(-2%) translateY(-2%);} to{ transform: translateX(2%) translateY(2%);} }

/* Legend */
.legend{ position:relative; margin:10px auto; background:rgba(255,255,255,.06); border:1px solid rgba(0,255,200,.35); color:#eaf7ff; border-radius:12px; box-shadow:0 0 12px rgba(0,255,200,.25); padding:10px 12px; text-align:center; max-width: 980px; }
.legend .title{ font-weight:800; margin-bottom:6px; text-transform:uppercase; letter-spacing:.6px; }
.legend .keys{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:6px; }
.legend .sw{ display:inline-block; width:14px; height:14px; border-radius:3px; margin-right:6px; border:1px solid rgba(255,255,255,.25); vertical-align:-2px; }
.legend .low{ background:var(--low);} .legend .mid{ background:var(--mid);} .legend .high{ background:var(--high);}
.legend .desc{ font-size:.9rem; opacity:.95; }

/* Popup */
.leaflet-popup-content{ margin: 8px 10px; }
.leaflet-popup-content .title{ font-weight:900; font-size: 18px; color:#1f1f1f; margin-bottom:6px; text-align:center; }
.leaflet-popup-content .row{ color:#222; font-weight:700; margin:6px 0; display:flex; gap:8px; align-items:center; }
.leaflet-popup-content .row .i{ width:18px; text-align:center; }
.leaflet-popup-content-wrapper{ background:#fffdf8; border:2px solid #ffd27a; box-shadow:0 8px 26px rgba(255,160,50,.35), 0 0 0 3px rgba(255,210,122,.25) inset; border-radius:14px; }
.leaflet-popup-tip{ background:#fffdf8; border:2px solid #ffd27a; }

/* TABLE */
.itatlas-table-wrap{ margin-top:12px; }
.table-toolbar{ display:flex; justify-content:space-between; gap:8px; margin-bottom:10px; }
.toolbar-left{ display:flex; gap:8px; }
.table-toolbar input, .table-toolbar select{ background:#0e1626; color:#eaf7ff; border:1px solid rgba(0,255,200,.3); border-radius:10px; padding:10px 12px; outline:none; }
.btn-reset{ background:#122035; color:#cfefff; border:1px solid rgba(0,255,200,.3); border-radius:10px; padding:10px 14px; cursor:pointer; }
.btn-reset:hover{ background:#16314f; }
.table-scroll{ overflow:auto; border-radius:12px; outline:1px solid rgba(0,255,255,.18); box-shadow: inset 0 0 18px rgba(0,180,255,.25); }
.wg-table{ width:100%; border-collapse:collapse; color:#eaf7ff; font-size:15px; }
.wg-table thead th{ position:sticky; top:0; background:#0f1626; border-bottom:1px solid rgba(255,255,255,.12); padding:12px 10px; text-align:left; letter-spacing:.2px; }
.wg-table tbody td{ border-bottom:1px solid rgba(255,255,255,.06); padding:11px 10px; }
.wg-table tbody tr:nth-child(odd){ background: rgba(255,255,255,.03); transition: background .2s ease; }
.wg-table tbody tr:hover{ background:rgba(0,255,200,.07); }
.sort-desc::after{ content:" ↓"; } .sort-asc::after{ content:" ↑"; }
.flag{ font-size:18px; }
@media (max-width: 768px){ #itatlas-map{ height:64vh; } .table-toolbar{ flex-direction:column; align-items:stretch; } .toolbar-left{ width:100%; } .table-toolbar input, .table-toolbar select, .btn-reset{ width:100%; } }