/* Import local font */
@font-face {
   font-family: "Anton";
   src: url("src/Anton.ttf") format("ttf");
   font-weight: normal;
   font-style: normal;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body,
html {
   height: 100%;
   width: 100%;
   text-justify: auto;
   font-family: "Anton", sans-serif;
}

/* Main container to hold both map and right panel */
.map-container {
   display: flex;
   height: 100%;
   width: 100%;
}

/* Map takes 100% of the width */
#map {
   flex: 1;
   height: 100%;
}

/* Right panel (hidden by default) */
.panel {
   position: relative;
   width: 0;
   height: 100%;
   overflow-y: auto;
   background-color: white;
   transition: width 0.3s ease;
   box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
}

/* Show the right panel when expanded */
#right-panel.open {
   width: 20%;
   padding: 10px;
   z-index: 501;
}

/* Show the left panel when expanded */
#left-panel.open {
   width: 20%;
   padding: 10px;
   z-index: 501;
}

.toggle-left-panel>img {
   width: 60px;
   height: auto;
}

/* Content inside the panel */
.exhibition-item {
   margin-bottom: 20px;
   padding: 10px;
   background-color: #fff;
   border-radius: 5px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.exhibition-item h4 {
   margin: 0;
}

.exhibition-item p {
   margin: 5px 0;
}

.exhibition-item a {
   text-decoration: none;
   color: #007bff;
}

/* Buttons */
button {
   color: white;
   border: none;
   padding: 10px;
   cursor: pointer;
   font-size: 16px;
   border-radius: 5px;
   margin-bottom: 20px;
}

/* Close button */
.close-button {
   position: relative;
   top: 10px;
   left: 10px;
   background-color: #e63946;
}

.close-button:hover {
   background-color: #ff6060;
}

/* Validate button */
.validate-button {
   background-color: green;
   position: relative;
   margin-left: 10%;
}

.validate-button:hover {
   background-color: rgb(1, 96, 1);
}

/* Malplaced button */
.unknown-place {
   color: white;
   background-color: rgb(123, 2, 179);
   font-size: 14px;
   border-radius: 2px;
   margin-bottom: 10px;
}

.unknown-place:hover {
   background-color: rgb(58, 1, 108);
}

/* Malplaced text */
.certified-unknown-place {
   color: rgb(101, 0, 0);
   font-size: 14px;
   border-radius: 2px;
   margin-bottom: 10px;
}

/* Tags */
.tag {
   display: inline-block;
   border-radius: 3px;
   padding: 0.2em 0.5em 0.3em;
   border-radius: 2px;
   background: blue;
   color: white;
   font-weight: 600;
   margin: 0.25em 0.1em;
   transition: background-color 0.3s ease, color 0.3s ease;
   cursor: pointer;
}

.tag:hover {
   background-color: #7d08e9;
   /* New color on hover */
   color: #ffd700;
   /* Text color on hover */
}

.tag-sm {
   font-size: 0.7em;
   display: inline-block;
   letter-spacing: 0.15ch;
}

.tag-green {
   background: green;
}

/* Centered header */
.center-header {
   top: 20px;
   height: 10%;
   position: fixed;
   transform: translateX(-50%);
   text-align: center;
   left: 50%;
   z-index: 500;
   width: auto;
}

.center-header .logo,
.center-header .switch-event-type {
   display: block;
   /* stack vertically */
   margin: 0 auto 10px;
   /* auto horizontal center, 10px spacing between them */
   height: auto;
}

.center-header .logo {
   width: 35%;
   height: auto;
}

/* Toggler for event type */
.center-header .switch-event-type {
   height: auto;
}

.switch-event-type {
   display: flex;
   gap: 20px;
   justify-content: center;
   align-items: center;
   padding-top: 7px;
}

.switch-event-type img {
   width: 50px;
   height: 50px;
   filter: grayscale(100%);
   /* make dark/white */
   cursor: pointer;
   transition: filter 0.3s, transform 0.2s;
}

.switch-event-type img.selected {
   filter: none;
   /* show colored */
   transform: scale(1.2);
   /* optional: slight zoom on selection */
}

/* Search bar */
.search-bar {
   position: fixed;
   font-size: 20px;
   width: 15%;
   top: 3%;
   right: 20%;
   box-sizing: border-box;
   border: 1px solid #ccc;
   border-radius: 7px;
   z-index: 500;
   margin-right: 1%;
   padding: 3px;
}

/* Date pick */
#daterange {
   width: 48px;
   height: 48px;
}

/* "Tool" buttons */
.left-tools {
   position: absolute;
   top: 2%;
   left: 22%;
  display: flex;
  flex-direction: column;      /* stack items vertically */
  align-items: center;         /* center horizontally */
  justify-content: center;     /* optional: center vertically inside box */
  gap: 12px;                   /* spacing between buttons */
  padding: 10px;
  border-radius: 8px;
  z-index: 500;               /* make sure it floats above other elements */
}

.tool-button {
   cursor: pointer;
   /* indicates clickable */
   border-radius: 6px;
   /* soft rounded corners */
   transition: transform 0.2s, box-shadow 0.2s;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
   /* subtle shadow */
   background-color: transparent;
}

.tool-button:hover {
  transform: scale(1.1);    /* slight zoom on hover */
  box-shadow: 0 4px 12px rgba(0,0,0,0.25); /* deeper shadow on hover */
}

.tool-button:active {
  transform: scale(0.95);   /* click feedback */
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Share link button */
.share img {
   width: 16px;
   height: 16px;
}