:root {

    --map-stroke-width: 4px;

    /*--map-base: var(--color-base-300);*/
    --map-base-hover: oklch(78.289% 0.07317 90.62); /* Highlight color for default map path base: oklch(84.133% 0.065 90.856); */

    --map-selected: oklch(0.64 0.16 47.19);
    --map-selected-hover: oklch(54.66% 0.14668 45.226); /* Highlight color for map path that a VPN provider serves base: oklch(64% 0.222 41.116); */

    --map-coverage: oklch(0.62 0.13 160.47);
    --map-coverage-hover: oklch(49.04% 0.0884 163.163); /* Highlight color for map path selected by user base: oklch(51% 0.096 186.391); */

    /* Vars to try get brand transition to work as intended */
    --blur-filter: 0;
    --grayscale-filter: 0;
    --drop-shadow-color: transparent;

    --sidebar-icon-size: 36px;
    --sidebar-icon-margin: 4px;

  
    --sidebar-details-indicator: 5px;
    --sidebar-details-width: 220px; /* desired width + above for indicator - increased for PIA long name */

    --sidebar-toggle-gap: 10px;
    --sidebar-toggle-height: 60px;

    --toggle-triangle-size: 20px;

    --status-green: rgb(79, 214, 79);
    --status-orange: rgb(255, 153, 0);
    --status-red: rgb(255, 34, 34);

}

body { /* Let a custom font take precedent for flags anywhere on the page! */
    font-family: "Twemoji Country Flags", var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"), serif;
    position: relative;      /* <-- make body a stacking context */
    margin: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--color-success); /* safe-area color */
  }

  


.overlay {
  position: absolute;
  z-index: 1;              /* <-- above the SVG */
  pointer-events: none;     /* let clicks fall through by default */
}

.overlay > * {
  pointer-events: auto;     /* but UI elements stay clickable */
}


#world-map {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  background-color: var(--color-base-100);

  z-index: 0;              /* <-- stay in front of background, still hoverable */
  overflow: hidden;
}

#map-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
}



#map-container.dragging {
  transition: none; /* disable transition while dragging */
}

#map-container svg {

  padding: 1.5vw;

  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center center; /* so zoom happens from the center */
  transition: transform 0.2s ease; /* optional smoothness */

}

#world-map path {

    /*fill: var(--color-base-300);*/
    stroke: var(--color-base-100);
    stroke-width: var(--map-stroke-width);
    transition: 100ms;
    paint-order: stroke fill; /* stroke first, fill on top */

    cursor: pointer;

}



.mapcolor-base {
  fill: var(--color-base-300);
}
.mapcolor-base-hovered {
  fill: var(--map-base-hover);
}

.mapcolor-selected {
  fill: var(--map-selected);
}
.mapcolor-selected-hovered {
  fill: var(--map-selected-hover);
}

.mapcolor-coverage {
  fill: var(--map-coverage);
}
.mapcolor-coverage-hovered {
  fill: var(--map-coverage-hover);
}


#country-tooltip {
  transition: opacity 0.2s ease;
}

#my-tooltip {
  transition: opacity 0.2s ease;
}



#sidebar-min {

  filter: drop-shadow(1px 0px 3px var(--color-base-200));

}


.brand-sidebar {

  cursor: pointer;
  filter: blur(var(--blur-filter)) grayscale(var(--grayscale-filter)) drop-shadow(0 0 3px var(--drop-shadow-color));
  transition: transform 0.3s ease, filter 0.3s ease;

  height: var(--sidebar-icon-size);
  width: var(--sidebar-icon-size);

  margin: var(--sidebar-icon-margin);

}

.detail-sidebar {

  position: relative;
  width: calc(var(--sidebar-details-width) - var(--sidebar-details-indicator));
  height: calc(var(--sidebar-icon-size) + 2 * var(--sidebar-icon-margin));
  background-color: var(--color-amber-50);
  transition: transform 0.3s ease, filter 0.3s ease;

}

.detail-sidebar-current {

  border-right: var(--sidebar-details-indicator) solid var(--map-coverage);
  width: var(--sidebar-details-width);

}

.detail-sidebar-zebra {

  background-color: var(--color-amber-100) !important;

}


#sidebar-detail-container {

  transition: all 0.4s ease;
  left: 0;
  height: 100%;

}

.detail-sidebar-container-hidden {

  background-color: transparent !important;
  left: calc((var(--sidebar-details-width) - var(--sidebar-details-indicator)) * -1) !important; /* Should probably move its definition into css so we can tie width and left together easier */

}



#detail-sidebar-toggle {

  position: absolute;

  top: calc(50% - (var(--sidebar-toggle-height) * 0.5));
  left: calc(var(--sidebar-details-width) - var(--sidebar-details-indicator));

  height: var(--sidebar-toggle-height);
  width: 40px;

  /*background-color: #c62d2d;*/
  cursor: pointer;
  transition: all 0.4s ease;

}

.detail-sidebar-toggle-hidden {

  left: 0px !important; /* Should probably move its definition into css so we can tie width and left together easier */

}

#detail-sidebar-bg-top {

  position: absolute;
  top: 0px; /* compensate for padding */
  z-index: -1;


  width: calc(var(--sidebar-details-width) - var(--sidebar-details-indicator));
  height: 9px; /* should only be the height of the padding */
  background-color: var(--color-amber-100);
  
}

#detail-sidebar-bg-bottom {

  position: absolute;

  top: 9px; /* compensate for padding */
  z-index: -2;

  width: calc(var(--sidebar-details-width) - var(--sidebar-details-indicator));
  height: 200vh; /* hacky solution but it works due to the abs positioning */
  background-color: var(--color-amber-50);
  
}


.brand-yes-hover {
  --drop-shadow-color: #60b574;
}

.brand-no-hover {
  --drop-shadow-color: #c62d2d;
}

.brand-excluded {
  --blur-filter: 2px;
  --grayscale-filter: 0.8;
}




html {
    scrollbar-width: none !important; /* Firefox */
}

body::-webkit-scrollbar {
    width: 0px !important; /* Chrome, Safari, Edge */
}


.stable-scrollbar {
  scrollbar-gutter: stable !important;
}

/* Hide scrollbar but keep scrolling enabled */
.hide-scrollbar {
  -ms-overflow-style: none;  /* IE/Edge legacy */
  scrollbar-width: none;     /* Firefox */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;             /* Chrome, Safari, Opera */
}



#sidebar-toggle-indicator svg {

  width: var(--toggle-triangle-size);
  height: var(--toggle-triangle-size);

  fill: var(--color-yellow-950);

  transform: rotate(90deg);

  position: relative;
  left: 10px;
  top: calc(var(--sidebar-toggle-height) / 2 - var(--toggle-triangle-size) / 2); /* minus half our height */

  transition: all 0.5s ease;

}


.sidebar-toggle-indicator-open svg {

  transform: rotate(270deg) !important;
  left: 8px !important;

}

.filtersearch-animate {

  transition: all 0.25s ease-out;

}


.update-status-circle {

  display: inline-block;

  height: 8px;
  width: 8px;
  
  border-radius: 10px;
  margin-left: 4px;

}

.mymodal {

  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(min(92%, 720px));
  transition: all;
  transition-duration: 200ms;
  transform: translate(-50%, -50%);

  /* Make modal content scrollable if content exceeds size */
  max-height: 80vh;
  overflow-y: auto;

}



/* Basic styling for the banner */
.banner-container {
  /* Key property for smooth transition */
  transition: all 0.65s linear; /* will do for now, stuck to the goofy animation due to how we're doing it.. */
  /* Start with a max-height that accommodates the content */
  max-height: 200px; /* Adjust based on expected max content height */
  overflow: hidden; /* Important to hide content when height shrinks */
  box-sizing: border-box; /* Includes padding in the total height/width */
}

.banner-content {
  /* This ensures the text wraps within the banner's width */
  white-space: normal;
  word-wrap: break-word;
}

/* State for the collapsed banner */
.banner-collapsed {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}