/* ═══════════════════════════════════════════════════════
   Visitor Globe Tracker — Frontend Styles
   Style : Terminal LED Matrix
═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700&display=swap');

/* ─── CSS Variables ────────────────────────────── */
.vgt-counter {
  --vgt-bg:         #0d120d;
  --vgt-bg2:        #111811;
  --vgt-led:        #00ff41;
  --vgt-led-off:    #0a3010;
  --vgt-text:       #b0d4b0;
  --vgt-accent:     #00ff41;
  --vgt-accent2:    #7c3aed;
  --vgt-dot:        #00ff41;
  --vgt-border:     #1a3a1a;
  --vgt-shadow:     0 0 18px rgba(0,255,65,.25);
  --vgt-radius:     10px;
  --vgt-font-mono:  'Share Tech Mono', monospace;
  --vgt-font-title: 'Orbitron', sans-serif;
}

/* Cyber (blue neon) */
.vgt-theme-cyber {
  --vgt-bg:     #050b1a;
  --vgt-bg2:    #0a1628;
  --vgt-led:    #00d4ff;
  --vgt-led-off:#001f33;
  --vgt-text:   #80c8e0;
  --vgt-accent: #00d4ff;
  --vgt-dot:    #00d4ff;
  --vgt-border: #0a2a4a;
  --vgt-shadow: 0 0 18px rgba(0,212,255,.2);
}

/* Light */
.vgt-theme-light {
  --vgt-bg:     #f0f4f0;
  --vgt-bg2:    #e4eae4;
  --vgt-led:    #1a7a1a;
  --vgt-led-off:#c0d4c0;
  --vgt-text:   #2a4a2a;
  --vgt-accent: #1a7a1a;
  --vgt-dot:    #22c55e;
  --vgt-border: #b0ccb0;
  --vgt-shadow: 0 2px 12px rgba(0,0,0,.1);
}

/* ─── Container ────────────────────────────────── */
.vgt-counter {
  background:    var(--vgt-bg);
  border:        1px solid var(--vgt-border);
  border-radius: var(--vgt-radius);
  padding:       18px 20px;
  max-width:     320px;
  font-family:   var(--vgt-font-mono);
  box-shadow:    var(--vgt-shadow), inset 0 0 30px rgba(0,0,0,.4);
  position:      relative;
  overflow:      hidden;
}

/* scanline overlay */
.vgt-counter::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,.07) 2px,
    rgba(0,0,0,.07) 4px
  );
  pointer-events: none;
  z-index: 0;
}

.vgt-counter > * { position: relative; z-index: 1; }

/* ─── LED Display ──────────────────────────────── */
.vgt-led-display {
  display:          flex;
  justify-content:  center;
  gap:              4px;
  background:       #060e06;
  border:           2px solid var(--vgt-border);
  border-radius:    6px;
  padding:          10px 14px;
  margin-bottom:    16px;
  box-shadow:       inset 0 0 14px rgba(0,0,0,.7),
                    0 0 8px rgba(0,255,65,.1);
}

.vgt-digit {
  font-family:    var(--vgt-font-title);
  font-size:      28px;
  font-weight:    700;
  color:          var(--vgt-led);
  text-shadow:    0 0 8px var(--vgt-led),
                  0 0 20px var(--vgt-led),
                  0 0 40px rgba(0,255,65,.3);
  min-width:      22px;
  text-align:     center;
  letter-spacing: 2px;
  animation:      vgt-flicker 8s infinite;
}

.vgt-digit:nth-child(2) { animation-delay: .3s; }
.vgt-digit:nth-child(3) { animation-delay: .1s; }
.vgt-digit:nth-child(5) { animation-delay: .5s; }

@keyframes vgt-flicker {
  0%,97%,100% { opacity: 1; }
  98%          { opacity: .85; }
  99%          { opacity: 1; }
}

/* ─── Stats list ───────────────────────────────── */
.vgt-stats {
  list-style: none;
  margin:     0 0 10px;
  padding:    0;
}

.vgt-stats li {
  display:        flex;
  align-items:    center;
  gap:            8px;
  padding:        6px 0;
  border-bottom:  1px solid var(--vgt-border);
  color:          var(--vgt-text);
  font-size:      13px;
  transition:     background .2s;
}

.vgt-stats li:last-child { border-bottom: none; }

.vgt-stats li.vgt-today:hover {
  background:    rgba(0,255,65,.05);
  border-radius: 4px;
  padding-left:  6px;
}

.vgt-stats li strong {
  margin-left: auto;
  color:        var(--vgt-accent);
  font-size:    15px;
  text-shadow:  0 0 6px var(--vgt-accent);
}

.vgt-icon {
  font-size:  15px;
  opacity:    .7;
  flex-shrink: 0;
}
.vgt-icon-multi { font-size: 13px; }

/* Online dot */
.vgt-dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  background:    var(--vgt-dot);
  flex-shrink:   0;
  box-shadow:    0 0 6px var(--vgt-dot);
  animation:     vgt-pulse 2s ease-in-out infinite;
}

@keyframes vgt-pulse {
  0%,100% { box-shadow: 0 0 6px var(--vgt-dot); }
  50%      { box-shadow: 0 0 14px var(--vgt-dot), 0 0 20px var(--vgt-dot); }
}

/* ─── Server time ──────────────────────────────── */
.vgt-server-time {
  margin:    6px 0 0;
  font-size: 11px;
  color:     color-mix(in srgb, var(--vgt-text) 60%, transparent);
  letter-spacing: 1px;
}

/* ─── Modal ────────────────────────────────────── */
.vgt-overlay {
  display:    none;
  position:   fixed;
  inset:      0;
  background: rgba(0,0,0,.75);
  z-index:    99998;
  backdrop-filter: blur(4px);
}

.vgt-modal {
  display:    none;
  position:   fixed;
  top:        50%;
  left:       50%;
  transform:  translate(-50%, -50%) scale(.95);
  z-index:    99999;
  width:      min(900px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--vgt-bg);
  border:     1px solid var(--vgt-border);
  border-radius: 14px;
  box-shadow: 0 0 60px rgba(0,255,65,.15), 0 24px 80px rgba(0,0,0,.6);
  padding:    28px;
  transition: transform .25s ease, opacity .25s ease;
}

.vgt-modal.vgt-open {
  display:   block;
  animation: vgt-modal-in .25s ease forwards;
}

@keyframes vgt-modal-in {
  from { transform: translate(-50%,-50%) scale(.9); opacity: 0; }
  to   { transform: translate(-50%,-50%) scale(1);  opacity: 1; }
}

.vgt-modal-close {
  position:   absolute;
  top:        16px;
  right:      18px;
  background: transparent;
  border:     none;
  color:      var(--vgt-text);
  font-size:  22px;
  cursor:     pointer;
  line-height: 1;
  transition: color .2s;
}
.vgt-modal-close:hover { color: var(--vgt-accent); }

.vgt-modal-title {
  font-family: var(--vgt-font-title);
  font-size:   18px;
  color:       var(--vgt-accent);
  margin:      0 0 16px;
  text-shadow: 0 0 10px var(--vgt-accent);
}

/* Tabs */
.vgt-globe-tabs {
  display: flex;
  gap:     6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.vgt-tab {
  background:    var(--vgt-bg2);
  border:        1px solid var(--vgt-border);
  color:         var(--vgt-text);
  font-family:   var(--vgt-font-mono);
  font-size:     12px;
  padding:       5px 14px;
  border-radius: 20px;
  cursor:        pointer;
  transition:    all .2s;
}
.vgt-tab:hover { border-color: var(--vgt-accent); color: var(--vgt-accent); }
.vgt-tab.active {
  background:  var(--vgt-accent);
  color:       #000;
  border-color: var(--vgt-accent);
  font-weight: bold;
}

/* Globe container */
.vgt-globe-container {
  display:  flex;
  gap:      20px;
  margin-bottom: 20px;
  align-items: flex-start;
}

#vgt-globe-canvas {
  flex:       0 0 auto;
  width:      400px;
  height:     400px;
  max-width:  100%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #1a2e1a, #050e05);
  box-shadow: 0 0 30px rgba(0,255,65,.1);
}

.vgt-globe-legend {
  flex:      1;
  min-width: 0;
}

.vgt-globe-legend h3 {
  font-family: var(--vgt-font-mono);
  font-size:   13px;
  color:       var(--vgt-accent);
  margin:      0 0 10px;
}

.vgt-legend-item {
  display:        flex;
  align-items:    center;
  gap:            8px;
  padding:        4px 0;
  font-size:      12px;
  color:          var(--vgt-text);
  border-bottom:  1px solid var(--vgt-border);
}

.vgt-legend-dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  flex-shrink:   0;
}

.vgt-legend-item span:last-child {
  margin-left: auto;
  color:       var(--vgt-accent);
  font-weight: bold;
}

/* Country table */
.vgt-country-table {
  width:           100%;
  border-collapse: collapse;
  font-family:     var(--vgt-font-mono);
  font-size:       12px;
  color:           var(--vgt-text);
}

.vgt-country-table th {
  text-align:   left;
  padding:      8px 10px;
  border-bottom: 2px solid var(--vgt-border);
  color:         var(--vgt-accent);
  font-size:     11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.vgt-country-table td {
  padding:       6px 10px;
  border-bottom: 1px solid var(--vgt-border);
}

.vgt-country-table tr:hover td {
  background: rgba(0,255,65,.04);
}

/* ─── Responsive ───────────────────────────────── */
@media (max-width: 640px) {
  .vgt-globe-container { flex-direction: column; }
  #vgt-globe-canvas    { width: 280px; height: 280px; }
  .vgt-modal           { padding: 16px; }
}