/* ================================
   Nade Filters Styling
   ================================ */

.nade-filters {
  max-width: 800px;
  margin: 20px auto;
  padding: 15px;
  border-radius: 8px;
}

.filter-group {
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.filter-group p {
  margin: 0;
  display: contents;
}

.filter-group:last-child {
  margin-bottom: 0;
}

.filter-group label {
  display: inline-block;
  font-weight: bold;
  margin-right: 10px;
  min-width: 100px;
}

.filter-btn {
  display: inline-block;
  padding: 6px 12px 4px 12px;
  margin: 2px;
  background: var(--wp--preset--color--secondary);
  border: 2px solid #333;
  border-radius: 8px;
  text-decoration: none;
  color: #000;
  transition: all 0.2s ease;
  font-size: 14px;
  line-height: 1.2;
}

.filter-btn br {
  display: none;
}

.filter-btn:hover {
  border-color: #999;
  background: #fafafa;
}

.filter-btn.active {
  background: var(--wp--preset--color--primary);
  color: #000;
  border-color: #333;
}

/* ================================
   Map Container & Wrapper
   ================================ */

.cs2-map-container {
  max-width: 800px;
  margin: 0px auto;
  padding: 0px;
}

.map-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.map-image {
display: block;
  width: 100%;
  height: auto;
  max-height: 800px;
  object-fit: contain;
}

/* ================================
   Markers
   ================================ */

.marker {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 10;
  text-decoration: none;
  color: inherit;
}

.marker.lineup {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 8;
}

.marker-dot {
  width: 28px;
  height: 28px;
  border: 3px solid #fff;
  border-radius: 50%;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 3px rgba(0,0,0,0.5);
}

.marker-dot-small {
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 50%;
  transition: all 0.3s ease;
}

/* ================================
   CT Team - Blue tones
   ================================ */

.marker.ct .marker-dot,
.marker.ct .marker-dot-small {
  background: rgba(70, 130, 220, 0.9);
  border-color: #4682dc;
  box-shadow: 0 0 12px rgba(70, 130, 220, 0.7);
}

.marker.landing.ct:hover .marker-dot {
  background: rgba(70, 130, 220, 1);
  box-shadow: 0 0 18px rgba(70, 130, 220, 1);
  transform: scale(1.15);
}

/* ================================
   T Team - Orange/Yellow tones
   ================================ */

.marker.t .marker-dot,
.marker.t .marker-dot-small {
  background: rgba(220, 140, 40, 0.9);
  border-color: #dc8c28;
  box-shadow: 0 0 12px rgba(220, 140, 40, 0.7);
}

.marker.landing.t:hover .marker-dot {
  background: rgba(220, 140, 40, 1);
  box-shadow: 0 0 18px rgba(220, 140, 40, 1);
  transform: scale(1.15);
}

/* ================================
   Trajectory line animation
   ================================ */

.trajectory-line {
  transition: opacity 0.3s ease;
}

/* ================================
   Icons for each utility type - using SVG paths
   ================================ */

.marker.smoke .marker-dot::before {
  content: "";
  width: 18px;
  height: 18px;
  display: block;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -1.5 35 35" fill="white"><path d="M27.873 28c0 0 5.52 0.006 6.295-5.395 0.369-5.906-5.336-7.070-5.336-7.070s0.649-8.743-7.361-9.74c-6.865-0.701-8.954 5.679-8.954 5.679s-2.068-1.988-4.873-0.364c-2.511 1.55-2.067 4.388-2.067 4.388s-5.577 1.084-5.577 6.768c0.125 5.677 6.057 5.734 6.057 5.734"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.marker.flash .marker-dot::before {
  content: "";
  width: 18px;
  height: 18px;
  display: block;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M17.9105 10.7209H14.8205V3.52087C14.8205 1.84087 13.9105 1.50087 12.8005 2.76087L12.0005 3.67087L5.2305 11.3709C4.3005 12.4209 4.6905 13.2809 6.0905 13.2809H9.1805V20.4809C9.1805 22.1609 10.0905 22.5009 11.2005 21.2409L12.0005 20.3309L18.7705 12.6309C19.7005 11.5809 19.3105 10.7209 17.9105 10.7209Z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.marker.molotov .marker-dot::before {
  content: "";
  width: 18px;
  height: 18px;
  display: block;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0 0 24 24" fill="white"><path d="M5.926 20.574a7.26 7.26 0 0 0 3.039 1.511c.107.035.179-.105.107-.175-2.395-2.285-1.079-4.758-.107-5.873.693-.796 1.68-2.107 1.608-3.865 0-.176.18-.317.322-.211 1.359.703 2.288 2.25 2.538 3.515.394-.386.537-.984.537-1.511 0-.176.214-.317.393-.176 1.287 1.16 3.503 5.097-.072 8.19-.071.071 0 .212.072.177a8.761 8.761 0 0 0 3.003-1.442c5.827-4.5 2.037-12.48-.43-15.116-.321-.317-.893-.106-.893.351-.036.95-.322 2.004-1.072 2.707-.572-2.39-2.478-5.105-5.195-6.441-.357-.176-.786.105-.75.492.07 3.27-2.063 5.352-3.922 8.059-1.645 2.425-2.717 6.89.822 9.808z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.marker.grenade .marker-dot::before {
  content: "";
  width: 18px;
  height: 18px;
  display: block;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="white"><path d="M30.79 20.247v-1.813c-3.349-1.335-5.321-2.581-5.928-4.568-0.498-1.631 1.004-3.801 3.836-6.416-2.958 1.621-5.135 2.722-5.997 1.185-0.774-1.38 0.093-3.966 1.464-7.357h-0.976c-1.094 1.731-2.025 3.044-2.371 2.72-0.301-0.283-0.305-1.301-0.174-2.72l-2.022-0.001c-1.338 2.997-2.757 4.695-4.812 4.986-1.756 0.249-4.029-1.814-6.59-4.742 1.458 2.894 1.994 5.215 1.011 5.788-1.162 0.678-3.491-0.121-6.939-1.569v0.662c2.372 1.506 4.557 2.975 4.149 3.522-0.358 0.48-1.992 0.397-4.149 0.105v1.709c3.121 1.576 4.812 3.193 4.812 4.707 0 1.302-2.601 3.961-4.812 6.067v1.011c1.995-0.654 4.443-0.908 5.265 0.558 0.839 1.495 0.276 3.611-0.802 6.695h1.848c1.958-2.645 3.819-4.766 4.812-4.672 0.703 0.066 0.375 2.225-0.105 4.672h0.558c1.743-4.845 3.892-7.814 7.078-7.706 2.796 0.096 5.449 2.91 8.368 4.916-1.526-1.867-4.337-4.526-3.731-5.021 0.637-0.521 3.367 0.432 6.207 1.464v-0.907c-1.863-1.271-3.576-2.492-3.138-2.929 0.394-0.393 1.596-0.456 3.138-0.349zM21.948 18.081c-0.335 0.334 1.759 1.577 2.956 2.438-1.81-0.632-4.092-1.582-4.518-1.234-0.308 0.252 1.12 1.603 1.897 2.553-1.485-1.021-2.845-2.448-4.267-2.496-2.092-0.071-3.29 2.442-4.323 6.282 0.272-1.823 1.089-4.679 0.502-4.733-0.833-0.078-2.846 2.892-4.351 5.106 1.051-3.185 2.006-5 1.367-6.139-0.577-1.029-2.744-0.403-3.682 0.143 1.105-1.043 3.447-3.141 3.447-4.025 0-1.286-2.32-2.733-6.599-3.951 2.572 0.405 5.888 1.149 6.275 0.631 0.303-0.405-2.192-1.813-3.71-2.811 2.672 1.146 4.365 1.92 5.122 1.479 0.5-0.292 0.222-1.47-0.52-2.942 1.303 1.489 2.471 2.538 3.364 2.411 1.884-0.267 2.698-2.76 4.166-7.518l0 0c-0.345 2.648-1.044 5.965-0.614 6.369 0.322 0.303 1.636-2.144 2.65-3.701-1.144 2.886-2.245 5.056-1.69 6.045 0.439 0.782 1.552 0.23 3.056-0.594-1.44 1.33-2.214 2.433-1.961 3.263 0.503 1.647 2.857 2.292 7.065 3.766-2.161-0.28-5.135-0.842-5.634-0.344z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ================================
   Marker Tooltip
   ================================ */

.marker-tooltip {
  position: absolute;
  bottom: 35px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.95);
  color: white;
  padding: 10px 14px;
  border-radius: 6px;
  white-space: nowrap;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  border: 2px solid rgba(255, 255, 255, 0.2);
  z-index: 100;
}

.marker.ct .marker-tooltip {
  border-color: rgba(70, 130, 220, 0.5);
}

.marker.t .marker-tooltip {
  border-color: rgba(220, 140, 40, 0.5);
}

.marker.landing:hover {
  z-index: 101;
}

.marker.landing:hover .marker-tooltip {
  opacity: 1;
}

/* ================================
   Mobile Responsive Styles
   ================================ */

@media (max-width: 768px) {
  .filter-group label {
    display: block;
    margin-bottom: 5px;
  }
  
  .filter-btn {
    font-size: 12px;
    padding: 5px 10px;
  }

  .marker-dot {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  
  .marker-dot-small {
    width: 14px;
    height: 14px;
  }
  
  .marker.smoke .marker-dot::before,
  .marker.flash .marker-dot::before,
  .marker.molotov .marker-dot::before,
  .marker.grenade .marker-dot::before {
    width: 14px;
    height: 14px;
  }
  
  .marker-tooltip {
    font-size: 12px;
    padding: 8px 10px;
  }
}