/* styles.css */
body {
    font-family: Arial, sans-serif;
}

/* Style the tab */
.tab {
    display: flex;
    justify-content: space-around; /* Distribute space evenly */
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
    flex-grow: 1; /* Make buttons grow to fill the space */
    text-align: center; /* Center text inside buttons */
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
.hidden {
    display: none;
}
/* 
.thumbnail {
    width: 50px; 
    height: auto;
} */

.tab button {
    color: black;
}

.tab button.active {
    color: black;
    background-color: #ccc;
}

/* Ensure that only the visible tab content can scroll */
.tabcontent {
    display: none; /* Hide all tab content by default */
    overflow-y: auto; /* Enable scrolling only for the active tab */
    max-height: calc(100vh - 50px); /* Adjust the height to fit within the viewport, considering any fixed header */
}

.tabcontent.active {
    display: block; /* Show the active tab */
}

#map {
    display: none; /* Hide the map by default */
    height: 100%; /* Ensure the map takes up the full height when visible */
}

.tabcontent.active #map {
    display: block; /* Show the map when the 'Home' tab is active */
}

/* Optional: You can add a transition effect when switching tabs */
.tabcontent {
    transition: opacity 0.3s ease-in-out;
}

/* Adjustments for mobile-specific behavior */
@media only screen and (max-width: 768px) {
    .tabcontent {
        overflow-y: auto; /* Ensure that each active tab content can scroll on mobile */
        max-height: calc(100vh - 100px); /* Adjust the height for mobile devices */
    }

    /* Ensure the map container resizes correctly on mobile */
    #map {
        height: 50vh; /* Adjust the map height on mobile */
    }
}
/* General hidden styling */
.hidden {
    display: none;
  }
  
  /* Zoning modals positioned like edgeModal */
  .zoning-modal {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    padding: 10px;
    border-top: 2px solid #ccc;
    z-index: 2000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    max-height: 25vh;
    overflow-y: auto;
  }
  
  /* Modal content styling */
  .zoning-modal .modal-content {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
  }
  
  /* Contribution button group with help icon */
  .zoning-modal .contribution-button-wrapper {
    display: flex;
    justify-content: center; /* optional: center if multiple elements */
    gap: 8px;
    margin: 12px 0;
  }
  
  /* Buttons */
  .zoning-modal .button-group {
    display: flex;
    gap: 10px;
    margin-top: 4px;
  }
  
  .zoning-modal .button-group button {
    padding: 4px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
    /* Ensure modal container is positioned for relative tooltips */
    .zoning-modal .modal-content {
        position: relative;
    }

    /* Token style */
    .zoning-modal .help-token {
        display: inline-block;
        background-color: #ddd;
        color: #333;
        font-weight: bold;
        border-radius: 50%;
        width: 18px;
        height: 18px;
        text-align: center;
        line-height: 18px;
        cursor: pointer;
        margin-left: 8px;
        position: relative;
        z-index: 2;
    }

    /* Tooltip that centers within modal-content */
    .zoning-modal .help-token:hover::after {
        content: attr(title);
        position: absolute;
        top: -120px; /* height above the token */
        left: 50%;
        transform: translateX(-50%);
        background: #fff;
        color: #333;
        padding: 12px;
        border-radius: 6px;
        box-shadow: 0 0 5px rgba(0,0,0,0.2);
        white-space: normal;
        width: 250px;
        max-width: 90%;
        text-align: center;
        z-index: 10;
    }

    /* Optional arrow */
    .zoning-modal .help-token:hover::before {
        content: '';
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        border-width: 6px;
        border-style: solid;
        border-color: transparent transparent #fff transparent;
    }  
  
  /* Responsive */
  /* @media (max-width: 768px) {
    .zoning-modal .modal-content {
      max-width: 90%;
    }
  }
   */
  @media (max-width: 600px) {
    .zoning-modal .help-token:hover::after {
      width: 90%;
      font-size: 14px;
      top: -140px;
    }
  }