/* 
Contents:
Main interface CSS
Navigation menu CSS
Explore section CSS
Nature section CSS
Transport section CSS
Compare section CSS
Media queries
*/


/* Main interface */

html, body, #map {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Barlow, sans-serif;
}

.sidebar {
    height: 100vh;
    width: 10%;
    background-color: #f4f2ec;
    overflow: auto;
}

.content-panel {
    max-height: 100vh;
    overflow-y: auto;
    width: 30%;
    scroll-behavior: smooth;
}

#map {
    height: 100vh;
    width: 60%;
}

.floating-button {
    position: absolute;
    bottom: 3.5%; /* Distance from the bottom */
    right: 1%; /* Distance from the right */
    background-color: #f4f2ec; /* Button background color */
    border: 1px solid #ccc; /* Button border */
    border-radius: 5px; /* Rounded corners */
    padding: 10px 15px; /* Padding for button */
    cursor: pointer; /* Cursor style */
    z-index: 1000; /* Ensure it is above other elements */
}

.floating-button:hover {
    background-color: #cccccc; /* Change color on hover */
}

.game-svg {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.game-svg:hover {
    transform: scale(1.2); /* Slightly enlarge on hover */
}

#score-counter {
    position: fixed;
    top: 10px;
    right: 20px;
    font-size: 24px;
    font-family: 'Barlow', sans-serif;
    background-color: #453f3f;
    color: white;
    padding: 10px;
    border-radius: 5px;
    z-index: 1000; /* Ensure the score counter is always visible */
    display: none; /* Initially hidden */
  }

.modal {
    display: none; 
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.3); 
    padding-top: 30px;
    opacity: 0; /* Set initial opacity */
    transition: opacity 0.3s ease; /* Transition for fade effect */
}

.modal.show { 
    display: block; /* Display the modal when the class is added */
    opacity: 1; /* Fade in effect */
}

.modal-content {
    background-color: #f3f1ed;
    position: absolute; 
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%); 
    padding: 20px;
    border: 1px solid #888;
    width: 30vw; 
    height: 40vh; 
    box-sizing: border-box; 
    transition: transform 0.3s ease; /* Optional transition for the content */
}

.modal-content.show {
    transform: translate(-50%, -50%) scale(1); /* Scale up to normal size */
}

.modal-content.hide {
    transform: translate(-50%, -50%) scale(0.9); /* Scale down for close effect */
}
  
.close {
color: #aaa;
float: right;
font-size: 48px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

/* Navigation menu */

.sidebar button {
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: left;
    font-size: 0.9em;
    text-align: left;
    line-height: 1.2;
}

.sidebar button:hover {
    background-color: #f4f2ec;
    color:  black;
}

.site-icon svg {
    transition: transform 0.3s ease; /* Smooth transition */
  }

.site-icon:hover svg {
    transform: scale(1.1); /* Enlarge the icon slightly */
  }

.sidebar-header {
    font-size: 1rem;
    margin-top: 5px;
}

.icon {
    width: 90%; /* Set the width to 90% of the button */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensure it behaves like a block element */
}

/* Explore section */

.form-check.form-switch {
    border-bottom: 2px solid #ded9ca; /* Light gray color for the border */
    padding-bottom: 10px; /* Add some padding for spacing */
    margin-bottom: 15px; /* Add margin to separate from the dropdown */
}

.form-check-input:checked {
    background-color: #a5a296; /* Custom color when checked */
    border-color: #a5a296; /* Custom border color */
}

.project-details-table {
    margin-top: 10px;
    width: 100%;
    max-width: 600px;
    font-size: 0.8em;
}

.project-details-table td, .project-details-table th {
    padding: 4px 8px; /* Reduce padding to make the rows smaller */
    border: 1px solid #dee2e6; /* Maintain the border */
}

.project-details-table tr:nth-child(odd) {
    background-color: white; /* White for odd rows */
}

.project-details-table tr:nth-child(even) {
    background-color: #f3f1ed; /* Custom stripe color for even rows */
}

/* Nature section */

.tooltip {
    position: absolute;
    text-align: left;
    width: auto;
    padding: 5px;
    font: 12px "Barlow";
    background: #f3f1ed;
    border: 0px;
    border-radius: 2px;
    pointer-events: none;
    transition: opacity 0.1s ease;
}

/* Transport section */
.transport-buttons .btn-primary {
    background-color: #e1e0dc; /* Inactive state */
    color: black; /* Text color for inactive state */
    border: none; /* Remove border */
}

.transport-buttons #compare-mrt.active {
    background-color: #0054b7; /* Active state */
    color: white; /* Text color for active state */
    border: none; /* Remove border */
}

.transport-buttons #compare-cycling.active {
    background-color: #e16d7c; /* Active state */
    color: white; /* Text color for active state */
    border: none; /* Remove border */
}

/* Amenities section */
/* General button styling for inactive state */
.amenities-buttons .btn-primary {
    background-color: #e1e0dc; /* Inactive state */
    color: black; /* Text color for inactive state */
    border: none; /* Remove border */
}

/* Specific active state for Compare Hawkers button */
.amenities-buttons #compare-hawker.active {
    background-color: #c64a06; /* Active state for Compare Hawkers */
    color: white; /* Text color for active state */
    border: none; /* Remove border */
}

/* Specific active state for Compare Libraries button */
.amenities-buttons #compare-lib.active {
    background-color: #0088cd; /* Active state for Compare Libraries */
    color: white; /* Text color for active state */
    border: none; /* Remove border */
}

/* Compare section */
.compare-buttons .btn-primary {
    background-color: #e1e0dc; /* Inactive state */
    color: black; /* Text color for inactive state */
    border: none; /* Remove border */
}

/* Specific active state for Compare Hawkers button */
.compare-buttons #compare-rankings.active {
    background-color: #bdb180; /* Active state for Compare Hawkers */
    color: white; /* Text color for active state */
    border: none; /* Remove border */
}

/* Specific active state for Compare Libraries button */
.compare-buttons #compare-price.active {
    background-color: #bd7385; /* Active state for Compare Libraries */
    color: white; /* Text color for active state */
    border: none; /* Remove border */
}

/* Compare section */

.value-cell {
    font-size: 1.2em; /* Adjust the size as needed */
    /* Add any additional styles if needed */
}

/* Media queries */

@media (max-width: 1100px) {
    .sidebar h5, .sidebar button span, .sidebar button br {
        display: none; /* Hide text and line break */
    }
    
    /* Ensure buttons are still displayed with icons only */
    .sidebar button i {
        font-size: 2em; /* Enlarge icons if needed */
    }

    /* Reduce padding in the buttons to better fit */
    .sidebar button {
        padding: 10px; /* Adjust as needed */
    }

    /* Optionally reduce size of the siteIcon to fit the smaller sidebar */
    /* .site-icon svg {
        width: 100%;
        height: 100%;
    } */

    .sidebar-header {
        display: none;
    }
}