@font-face {
  font-family: 'Manrope';
  src: url("../fonts/Manrope/Manrope-Light.ttf");
  font-weight: 100;
}

@font-face {
  font-family: 'Manrope';
  src: url("../fonts/Manrope/Manrope-Regular.ttf");
  font-weight: normal;
}

@font-face {
  font-family: 'Manrope';
  src: url("../fonts/Manrope/Manrope-Bold.ttf");
  font-weight: bold;
}

@font-face {
  font-family: 'Bystone';
  src: url("../fonts/Bystone/Bystone-Regular.otf");
}


*,
body {
  font-family: 'Manrope';
  font-weight: normal;
  font-size: 15px;
  cursor: auto;
}


h2 {
  font-size: 1.1em;
  font-weight: bold;
  padding-top: .5em;
}

a,
a>img {
  text-decoration: none;
  cursor: pointer;
}


.bystone {
  font-family: 'Bystone';
}


a:hover>img {
  scale: 2;
}


/*************************************
            TIPPY Lineup
*************************************/
.lineup {
  display: grid;
  grid-template-columns: auto 1fr auto;
  row-gap: 6px;
}

.lineup .nextup {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  column-gap: 12px;
  align-items: baseline;
}

.lineup .info {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 150px;
}

.lineup .icon {
  display: flex;
  justify-content: center;
}

.lineup .nextup.dim {
  opacity: .4;
}

.lineup .icon,
.lineup .icon img {
  width: 15px;
}


a.tippy-link {
  text-decoration: none;
  color: white;
  font-weight: bold;
  font-style: italic;
}

a.tippy-link:hover {
  color: #25378d;
}


/*************************************
              TIPPY
*************************************/
.tippy-box[data-theme~="tooltip-blue"] {
  background: #6d78ee;
}

.tippy-box[data-theme~="tooltip-blue"] a {
  color: #FFD166;
}

.tippy-box[data-theme~="tooltip-blue"] a:hover {
  color: #FFF4B8;
}


.tippy-box[data-theme^="tooltip-blue"][data-placement^="top"]>.tippy-arrow::before {
  border-top-color: #6d78ee;
}

.tippy-box[data-theme^="tooltip-blue"][data-placement^="bottom"]>.tippy-arrow::before {
  border-bottom-color: #6d78ee;
}

.tippy-box[data-theme^="tooltip-blue"][data-placement^="left"]>.tippy-arrow::before {
  border-left-color: #6d78ee;
}

.tippy-box[data-theme^="tooltip-blue"][data-placement^="right"]>.tippy-arrow::before {
  border-right-color: #6d78ee;
}

.tippy-box[data-theme~="tooltip-yellow"] {
  background: #f9d970;
  color: black;
}

.tippy-box[data-theme~="tooltip-yellow"] a {
  color: #2455A4;
  
}

.tippy-box[data-theme~="tooltip-yellow"] a:hover {
  color: #00656B;
}

.tippy-box[data-theme^="tooltip-yellow"][data-placement^="top"]>.tippy-arrow::before {
  border-top-color: #f9d970;
}

.tippy-box[data-theme^="tooltip-yellow"][data-placement^="bottom"]>.tippy-arrow::before {
  border-bottom-color: #f9d970;
}

.tippy-box[data-theme^="tooltip-yellow"][data-placement^="left"]>.tippy-arrow::before {
  border-left-color: #f9d970;
}

.tippy-box[data-theme^="tooltip-yellow"][data-placement^="right"]>.tippy-arrow::before {
  border-right-color: #f9d970;
}


.tippy-box[data-theme^="tooltip-"] {
  border-radius: 20px;
  min-width: 150px;
  min-height: 100px;
  padding: 0em;
}

.tippy-box[data-theme^="tooltip-"] .tippy-content {
  padding: 0 1em 0.5em 1em;
}

.tippy-box[data-theme^="tooltip-"]>.tippy-svg-arrow {
  overflow: visible;
}

.tippy-box[data-theme^="tooltip-"]>.tippy-svg-arrow svg {
  width: 50px;
  height: 70px;

}


.small {
  font-size: .75em;
}

.bold {
  font-weight: bold;
}


/*************************************
            MAP (OpenLayers)
*************************************/
#map {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: white; /* Matches the water color for a nice background */
}

/* SVG Overlay Hitbox styling */
#svg-overlay svg path,
#svg-overlay svg rect,
#svg-overlay svg circle,
#svg-overlay svg polygon {
  fill: rgba(0, 0, 0, 0) !important;
  stroke: rgba(0, 0, 0, 0) !important;
  transition: fill 0.4s ease-in-out !important;
}

/* Darken the SVG path when the tooltip is active/hovered */
#svg-overlay svg .active-hitbox path,
#svg-overlay svg .active-hitbox rect,
#svg-overlay svg .active-hitbox circle,
#svg-overlay svg .active-hitbox polygon,
#svg-overlay svg path.active-hitbox,
#svg-overlay svg rect.active-hitbox,
#svg-overlay svg circle.active-hitbox,
#svg-overlay svg polygon.active-hitbox {
  fill: rgba(0, 0, 0, 0.35) !important;
}

/* Pan Navigation Controls */
.pan-controls {
  position: absolute;
  bottom: 30px;
  right: 20px;
  display: grid;
  grid-template-columns: 45px 45px 45px;
  grid-template-rows: 45px 45px 45px;
  gap: 6px;
  z-index: 99999;
  pointer-events: none; /* Let clicks pass through empty areas between buttons */
}

.pan-btn {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #25378d; /* Match the dark blue color from the theme */
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 0;
}

.pan-btn svg {
  width: 24px;
  height: 24px;
}

.pan-btn:hover {
  background: rgba(255, 255, 255, 1);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  color: #6d78ee; /* Lighter blue on hover */
}

.pan-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  background: #f0f0f0;
}

#pan-up { grid-column: 2; grid-row: 1; }
#pan-left { grid-column: 1; grid-row: 2; }
#pan-right { grid-column: 3; grid-row: 2; }
#pan-down { grid-column: 2; grid-row: 3; }

/* OpenLayers Zoom Controls Custom Styling */
.ol-zoom {
  top: 30px !important;
  left: 20px !important;
  background: transparent !important;
  padding: 0 !important;
  z-index: 99999 !important;
}

.ol-zoom button {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #25378d !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
  width: 45px !important;
  height: 45px !important;
  margin-bottom: 6px !important;
  font-size: 24px !important;
  font-weight: normal !important;
}

.ol-zoom button:hover {
  background: rgba(255, 255, 255, 1) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important;
  color: #6d78ee !important;
}

.ol-zoom button:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  background: #f0f0f0 !important;
}

/*************************************
          LOADING INDICATOR
*************************************/
#loading-indicator {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

#loading-indicator p {
  margin-top: 20px;
  color: #25378d;
  font-weight: bold;
  font-size: 1.2em;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(37, 55, 141, 0.2);
  border-top-color: #25378d;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media only screen and (max-width: 767px) {
  *,
  body {
    font-size: 12px;
  }
  
  .pan-controls {
    bottom: 20px;
    right: 15px;
    grid-template-columns: 40px 40px 40px;
    grid-template-rows: 40px 40px 40px;
    gap: 4px;
  }
  
  .pan-btn {
    border-radius: 8px;
  }

  .ol-zoom {
    top: 20px !important;
    left: 15px !important;
  }

  .ol-zoom button {
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    margin-bottom: 4px !important;
  }
}