:root {
    /* Padding, margin, etc. */
    --boxes-padding: 3rem 2rem;
    --boxes-margin: 4rem 0;
    --border-radius: 10px;
    --outside-border-radius: calc(var(--border-radius) * 1.5);
    --button-border-radius: 8px;
    --outside-button-border-radius: calc(var(--button-border-radius) * 1.5);
    --primary-button-padding: 1.5rem 1.7rem;

    --primary-btn-box-shadow: inset 0px -2px 0px 0px var(--tomato-color-300-light);

    /* Fonts */
    --headings-font: 'Nunito', sans-serif;
    --tiny-text-size: calc(var(--smaller-text-size) / 1.125);
    --smaller-text-size: calc(var(--small-text-size) / 1.125);
    --small-text-size: calc(var(--regular-text-size) / 1.125);
    --regular-text-size: 1.6rem;
    --large-text-size: calc(var(--regular-text-size) * 1.125);
    --heading-1-size: calc(var(--heading-2-size) * 1.067);
    --heading-2-size: calc(var(--heading-3-size) * 1.067);
    --heading-3-size: calc(var(--heading-4-size) * 1.067);
    --heading-4-size: calc(var(--heading-5-size) * 1.067);
    --heading-5-size: calc(var(--heading-6-size) * 1.067);
    --heading-6-size: calc(var(--large-text-size) * 1.125);

    /* LIGHT Colour Variables */
    --white-color: hsla(0, 0%, 100%, 1);
    --black-color: hsla(0, 0%, 5%, 1);

    --nero-color: hsla(0, 0%, 13%, 1);
    --nero-color-100: hsla(0, 0%, 28%, 1);
    --nero-color-200: hsla(0, 0%, 45%, 1);
    --nero-color-300: hsla(0, 0%, 65%, 1);
    --nero-color-400: hsla(0, 0%, 81%, 1);
    --nero-color-450: hsla(0, 0%, 94%, 1);
    --nero-color-500: hsla(0, 0%, 98%, 1);
    --nero-color-100-light: hsla(0, 0%, 31%, 0.5);
    --nero-color-200-light: hsla(0, 0%, 48%, 0.5);
    --nero-color-300-light: hsla(0, 0%, 65%, 0.5);
    --nero-color-400-light: hsla(0, 0%, 81%, 0.5);
    --nero-color-500-light: hsla(0, 0%, 98%, 0.5);

    /* DARK Colour Variables */
    --white-color: hsla(0, 0%, 100%, 1);
    --whitesmoke-color: hsla(0, 0%, 95%, 1);
    --whitesmoke-color-100: hsla(0, 0%, 78%, 1);
    --whitesmoke-color-200: hsla(0, 0%, 62%, 1);
    --whitesmoke-color-300: hsla(0, 0%, 47%, 1);
    --whitesmoke-color-400: hsla(0, 0%, 30%, 1);
    --whitesmoke-color-500: hsla(0, 0%, 13%, 1);
    --whitesmoke-color-600: hsla(0, 0%, 9%, 1);
    --whitesmoke-color-100-light: hsla(0, 0%, 80%, 0.5);
    --whitesmoke-color-200-light: hsla(0, 0%, 64%, 0.5);
    --whitesmoke-color-300-light: hsla(0, 0%, 47%, 0.5);
    --whitesmoke-color-400-light: hsla(0, 0%, 30%, 0.5);
    --whitesmoke-color-500-light: hsla(0, 0%, 13%, 0.5);

    /* Accent Colour Variables */
    --tomato-color: hsla(5, 77%, 60%, 1);
    --tomato-color-100: hsla(6, 52%, 49%, 1);
    --tomato-color-200: hsla(5, 52%, 38%, 1);
    --tomato-color-300: hsla(6, 52%, 27%, 1);
    --tomato-color-400: hsla(6, 51%, 16%, 1);
    --tomato-color-500: hsla(5, 52%, 5%, 1);
    --tomato-color-100-light: hsla(6, 52%, 49%, 0.5);
    --tomato-color-200-light: hsla(5, 52%, 38%, 0.5);
    --tomato-color-300-light: hsla(6, 52%, 27%, 0.5);
    --tomato-color-400-light: hsla(6, 51%, 16%, 0.5);
    --tomato-color-500-light: hsla(5, 52%, 5%, 0.5);

    --danube-color: #6893d0;

    --dodgerblue-color: hsla(209, 76%, 36%, 1);
    --dodgerblue-color-100: hsla(214, 64%, 50%, 1);
    --dodgerblue-color-200: hsla(214, 63%, 40%, 1);
    --dodgerblue-color-300: hsla(213, 64%, 29%, 1);
    --dodgerblue-color-400: hsla(214, 63%, 19%, 1);
    --dodgerblue-color-500: hsla(213, 64%, 9%, 1);
    --dodgerblue-color-100-light: hsla(214, 64%, 50%, 0.5);
    --dodgerblue-color-200-light: hsla(214, 63%, 40%, 0.5);
    --dodgerblue-color-300-light: hsla(213, 64%, 29%, 0.5);
    --dodgerblue-color-400-light: hsla(214, 63%, 19%, 0.5);
    --dodgerblue-color-500-light: hsla(213, 64%, 9%, 0.5);

    --darkgoldenrod-color: hsla(40, 100%, 40%, 1);
    --darkgoldenrod-color-100: hsla(40, 100%, 48%, 1);
    --darkgoldenrod-color-200: hsla(40, 100%, 32%, 1);
    --darkgoldenrod-color-300: hsla(40, 100%, 23%, 1);
    --darkgoldenrod-color-400: hsla(40, 100%, 15%, 1);
    --darkgoldenrod-color-500: hsla(41, 100%, 7%, 1);
    --darkgoldenrod-color-100-light: hsla(40, 100%, 48%, 0.5);
    --darkgoldenrod-color-200-light: hsla(40, 100%, 32%, 0.5);
    --darkgoldenrod-color-300-light: hsla(40, 100%, 23%, 0.5);
    --darkgoldenrod-color-400-light: hsla(40, 100%, 15%, 0.5);
    --darkgoldenrod-color-500-light: hsla(41, 100%, 7%, 0.5);

    --forestgreen-color: hsla(145, 100%, 31%, 1);
    --forestgreen-color-100: hsla(145, 100%, 48%, 1);
    --forestgreen-color-200: hsla(145, 100%, 39%, 1);
    --forestgreen-color-300: hsla(145, 100%, 23%, 1);
    --forestgreen-color-400: hsla(145, 100%, 14%, 1);
    --forestgreen-color-500: hsla(146, 100%, 6%, 1);
    --forestgreen-color-100-light: hsla(145, 100%, 48%, 0.5);
    --forestgreen-color-200-light: hsla(145, 100%, 39%, 0.5);
    --forestgreen-color-300-light: hsla(145, 100%, 23%, 0.5);
    --forestgreen-color-400-light: hsla(145, 100%, 14%, 0.5);
    --forestgreen-color-500-light: hsla(146, 100%, 6%, 0.5);

    --blue-background: hsl(209, 76%, 36%, 0.05);
    --blue-border: hsl(209, 76%, 36%, 0.3);

    /* Yellow */
    --yellow-background: hsl(39, 80%, 47%, 0.04);
    --yellow-border: hsl(39, 80%, 47%, 0.5);
    /* Green */
    --green-background: hsl(128, 45%, 37%, 0.04);
    --green-border: hsl(90, 30%, 50%, 0.6);
    /* Violet */
    --violet: hsl(260, 45%, 60%);
    --violet-background: hsl(260, 45%, 60%, 0.04);
    --violet-border: hsl(260, 45%, 60%, 0.5);

    /* General Variables */
    --accent-color: var(--tomato-color);
    --accent-color-hover: var(--tomato-color-100);
    --primary-badge-border: var(--tomato-color-100-light);
    --accent-background: var(--tomato-color-500-light);
    --selection-color: inherit;

    /* Notice */
    --primary-info-color: var(--dodgerblue-color-100);
    --primary-success-color: var(--forestgreen-color);
    --primary-warning-color: var(--tomato-color-100);
    --primary-caution-color: var(--darkgoldenrod-color);
}

/*-- LIGHT Colours --*/
body {
    --selection-background: var(--whitesmoke-color-100-light);
    --box-shadow-input: 0px 2px 2px 0px var(--nero-color-500);

    --primary-text-color: var(--nero-color);
    --secondary-text-color: var(--nero-color-100);
    --tertiary-text-color: var(--nero-color-200);
    --quaternary-text-color: var(--nero-color-300);

    /* Borders */
    --monochrome-border-color: var(--nero-color-400-light);
    --active-border-color: var(--whitesmoke-color-400-light);

    /* Buttons */
    --primary-btn-text-color: var(--whitesmoke-color);
    --primary-btn-background: var(--nero-color);
    --primary-btn-border-color: var(--nero-color-200-light);
    --primary-btn-background-hover: var(--nero-color-100);
    --secondary-btn-background: var(--nero-color-500);
    --secondary-btn-background-hover: var(--nero-color-400-light);
    --tertiary-btn-background-hover: var(--nero-color-500-light);

    /* Backgrounds */
    --primary-background: var(--white-color);
    --secondary-background: var(--nero-color-500);
    --secondary-background-hover: var(--nero-color-400-light);
    --input-background-color: var(--nero-color-500);
    --callout-background: var(--whitesmoke-color);
    --primary-header-background: hsl(40, 100%, 100%, 0.65);

    --primary-background-menu: var(--nero-color-500);
    --secondary-background-menu: var(--nero-color-450);
    --submenu-shadow: 0px 4px 18px #0000000a, 0px 2.025px 7.84688px rgba(0, 0, 0, 0.027), 0px 0.8px 2.925px #00000005, 0px 0.175px 1.04062px rgba(0, 0, 0, 0.013);
}

/* DARK Colours */
body.dark {
    --selection-background: var(--nero-color-100-light);
    --box-shadow-input: 0px 1px 2px 0px var(--whitesmoke-color-500);

    --primary-text-color: var(--whitesmoke-color);
    --secondary-text-color: var(--whitesmoke-color-100);
    --tertiary-text-color: var(--whitesmoke-color-200);
    --quaternary-text-color: var(--whitesmoke-color-300);

    /* Borders */
    --monochrome-border-color: var(--whitesmoke-color-400-light);
    --active-border-color: var(--nero-color-400-light);

    /* Buttons */
    --primary-btn-text-color: var(--nero-color);
    --primary-btn-background: var(--whitesmoke-color);
    --primary-btn-border-color: var(--nero-color-400-light);
    --primary-btn-background-hover: var(--whitesmoke-color-200);
    --secondary-btn-background: var(--whitesmoke-color-500);
    --secondary-btn-background-hover: var(--whitesmoke-color-400-light);
    --tertiary-btn-background-hover: var(--whitesmoke-color-500-light);

    /* Backgrounds */
    --primary-background: var(--black-color);
    --secondary-background: var(--whitesmoke-color-500);
    --secondary-background-hover: var(--whitesmoke-color-400-light);
    --input-background-color: var(--whitesmoke-color-500-light);
    --callout-background: var(--nero-color);
    --primary-header-background: hsl(0, 0%, 5%, 0.65);

    --primary-background-menu: var(--whitesmoke-color-600);
    --secondary-background-menu: var(--whitesmoke-color-500);
    --submenu-shadow: 0px 4px 18px rgba(255, 255, 255, 0.05), 0px 2.025px 7.84688px rgba(0, 0, 0, 0.15), 0px 0.8px 2.925px rgba(0, 0, 0, 0.1), 0px 0.175px 1.04062px rgba(0, 0, 0, 0.05);

    /* -- Colors -- */
    --dimgrey: hsl(0, 0%, 60%);
    --gainsboro: hsl(0, 0%, 15%);
    --gainsboro-light: hsla(0, 0%, 14.9%, 0.65);
    --whitesmoke: hsl(0, 0%, 10%);
    --whitesmoke-darker: hsl(0, 0%, 13%);

    --blue-background: hsl(219, 37%, 67%, 0.05);
    --yellow-background: hsl(36, 55%, 55%, 0.03);
    --green-background: hsl(121, 25%, 63%, 0.05);
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: "Montserrat", sans-serif !important;
    font-size: 10px;
    overflow-x: hidden;
}

h1 {
    color: var(--primary-text-color);
    font-size: var(--heading-1-size);
}

h2 {
    color: var(--primary-text-color);
    font-size: var(--heading-2-size);
}

h3 {
    color: var(--primary-text-color);
    font-size: var(--heading-3-size);
}

h4 {
    color: var(--primary-text-color);
    font-size: var(--heading-4-size);
}

h5 {
    color: var(--primary-text-color);
    font-size: var(--heading-5-size);
}

h6 {
    color: var(--primary-text-color);
    font-size: var(--heading-6-size);
}

/* Navbar Styling */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 8rem;
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100vw;
    box-sizing: border-box;
    background-color: transparent;
    z-index: 1100;
}

.navbar h1 a {
    color: var(--primary-text-color);
    text-decoration: none;
    transform: rotate(-0.25turn);
}

/* Navigation Links */
.nav-links {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* About Link */
.nav-links a {
    color: var(--primary-text-color);
    text-decoration: none;
    font-size: 1.4rem;
}

/* Ensure map does not overlap with navbar */
/* #map {
    height: calc(100vh - 10rem); 
    width: calc(100vw - 3rem); 
    position: absolute;
    bottom: 1.5rem; 
    left: 1.5rem;
    border-radius: var(--border-radius);
    user-select: none;
    -webkit-user-select: none; 
    -moz-user-select: none;
    -ms-user-select: none; 
    pointer-events: auto;
    border: 1px solid var(--monochrome-border-color);
} */


.map-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100vh;
    width: 100vw;
    ;
    display: flex;
    justify-content: center;
    align-items: center;
}

#map {
    width: 100%;
    height: 100%;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Search Bar */
.search-bar {
    display: none;
    flex-grow: 1;
    padding: 8px 12px;
    border: 1px solid var(--monochrome-border-color);
    border-radius: var(--button-border-radius);
    background: var(--input-background-color);
    font-size: var(--regular-text-size);
    max-width: 50%;
}

.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    width: 50%;
    margin: 0 auto;
    background: white;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: none;
    max-height: 250px;
    overflow-y: auto;
    z-index: 1050;
}

.search-item {
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.search-item:hover {
    background: #f0f0f0;
}

/* Custom Zoom Buttons */
.leaflet-right .leaflet-control {
    margin-bottom: 0;
    margin-right: 0;
}

.map-controls-right {
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.map-controls-left {
    bottom: 1.5rem;
    left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.custom-zoom-controls {
    position: absolute;
    z-index: 1000;
}

.button-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.button-top {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: var(--button-border-radius);
    border-top-right-radius: var(--button-border-radius);
    border-top: 1px solid;
    border-left: 1px solid;
    border-right: 1px solid;
    border-bottom: 0;
}

.button-bottom {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: var(--button-border-radius);
    border-bottom-right-radius: var(--button-border-radius);
    border-top: 1px solid;
    border-left: 1px solid;
    border-right: 1px solid;
    border-bottom: 1px solid;
}

.button-single {
    border-top-left-radius: var(--button-border-radius);
    border-top-right-radius: var(--button-border-radius);
    border-bottom-left-radius: var(--button-border-radius);
    border-bottom-right-radius: var(--button-border-radius);
    border-top: 1px solid;
    border-left: 1px solid;
    border-right: 1px solid;
    border-bottom: 1px solid;
}

.map-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    width: 3.5rem;
    height: 3.5rem;
    background-color: var(--primary-btn-background);
    border-color: var(--primary-btn-border-color);
    color: var(--primary-btn-text-color);
    cursor: pointer;
    transition: background-color 0.15s linear;
    box-shadow: var(--submenu-shadow);
    position: relative;
}

.map-button:hover {
    background-color: var(--primary-btn-background-hover);
}

.map-button .ti {
    font-size: var(--large-text-size);
    color: var(--primary-btn-text-color);
}

.map-controls-right button.map-button::after {
    content: attr(data-tooltip);
    position: absolute;
    left: -20%;
    transform: translateX(-100%);
    background-color: var(--secondary-text-color);
    color: var(--primary-btn-text-color);
    padding: 5px 8px;
    border-radius: .5rem;
    font-size: var(--smaller-text-size);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
}

.map-controls-left button.map-button::after {
    content: attr(data-tooltip);
    position: absolute;
    right: -20%;
    transform: translateX(100%);
    background-color: var(--secondary-text-color);
    color: var(--primary-btn-text-color);
    padding: 5px 8px;
    border-radius: .5rem;
    font-size: var(--smaller-text-size);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
}

.map-controls-left button.map-button:hover::after,
.map-controls-right button.map-button:hover::after {
    opacity: 1;
}

.input-group-text,
.form-control {
    border: 1px solid #ccc;
    border-radius: 8px;
}

.form-control {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* Small Red Dot in Marker */
.lab-marker {
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--accent-color);
    border-radius: 50%;
    outline: .4rem solid var(--secondary-btn-background);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s linear, background-color 0.15s linear;
}

.user-marker {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: var(--dodgerblue-color);
    position: relative;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    outline: .4rem solid var(--secondary-btn-background);
}

.user-marker::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--dodgerblue-color);
    transform: translate(-50%, -50%);
    opacity: 0.6;
    animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }

    100% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}

.lab-marker:hover {
    cursor: pointer;
    background-color: var(--accent-color-hover);
    transform: scale(1.2);
    transition: transform 0.15s linear, background-color 0.15s linear;
}

/* Modern Popup Container */
.leaflet-popup-content {
    margin: 0;
    width: 30rem !important;
}

.leaflet-popup-content-wrapper {
    padding: 1rem;
    border-radius: var(--outside-border-radius);
    font-family: "Montserrat", sans-serif;
    background: var(--secondary-btn-background);
}

.leaflet-popup-tip {
    background: var(--secondary-btn-background);
}

.leaflet-container a.leaflet-popup-close-button {
    color: var(--primary-btn-text-color);
    padding: .5rem;
    background: var(--primary-btn-background);
    border-radius: 0 var(--border-radius);
    border: 1px solid var(--primary-btn-border-color);
    box-shadow: none;
    font-size: var(--heading-6-size);
    margin: 1rem 1rem 0;
}

.leaflet-container .leaflet-control-attribution {
    background: var(--secondary-background);
    color: var(--tertiary-text-color);
    border-radius: var(--border-radius) 0 0;
}

.leaflet-container a {
    color: var(--dodgerblue-color-100);
}

.popup-container {
    border-radius: 10px;
    overflow: hidden;
    background: var(--secondary-btn-background);
}

/* Popup Image (Top Half) */
.lab-image {
    width: 100%;
    aspect-ratio: 3 / 2;
    background-size: cover;
    background-position: center;
    border-radius: var(--border-radius);
}

.lab-details {
    margin: 0 0 0.5rem;
}

.lab-details div {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.lab-details img {
    object-fit: contain;
    width: 10rem;
}

/* Popup Content (Bottom Half) */
.lab-content {
    padding: 1rem 0.5rem;
}

/* Popup Title */
.lab-title {
    margin: 0 0 0.5rem;
}

.lab-category {
    display: block;
    margin: 0.75rem 0 1.25rem;
}

.lab-category .store {
    background: hsla(209, 76.21%, 36.04%, 0.16);
    color: var(--dodgerblue-color);
}

.lab-category .default {
    background: hsl(5deg 77% 60% / 12%);
    color: var(--accent-color);
}

.lab-category .pickup {
    background: hsl(40deg 100% 40% / 12%);
    color: var(--darkgoldenrod-color);
}

.lab-category span {
    display: inline;
    margin-right: 0.5rem;
    font-size: var(--tiny-text-size);
    border-radius: var(--outside-border-radius);
    padding: 0.5rem 0.8rem;
    width: fit-content;
    font-weight: 600;
}

.lab-address {
    display: flex;
    gap: .5rem;
    align-items: baseline;
}

.lab-address-text {
    font-size: var(--smaller-text-size);
    color: var(--tertiary-text-color);
}

.lab-distance {
    margin: 1rem 0;
    font-size: var(--smaller-text-size);
}

.lab-actions {
    display: flex;
    gap: .5rem;
    margin: 1rem 0 0;
}

.lab-actions button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem 0.5rem;
    border-radius: var(--button-border-radius);
    background-color: var(--primary-btn-background);
    border: 1px solid var(--primary-btn-border-color);
    font-size: var(--small-text-size);
}

.lab-actions a {
    text-decoration: none;
    color: var(--primary-btn-text-color);
    width: 100%;
}

.lab-actions button:hover {
    background-color: var(--primary-btn-background-hover);
    cursor: pointer;
    transition: background-color .15s linear;
}

.lab-offerings {
    margin-top: 1rem;
}

.lab-offerings span {
    font-size: var(--smaller-text-size);
    margin-right: 0.25rem;
}

.lab-offerings .title {
    font-weight: 600;
}

/* Popup Details */
.lab-content p {
    font-size: 13px;
    color: #444;
    margin: 1rem 0;
    display: flex;
    align-items: center;
}

/* Icons inside Popup */
.lab-content i {
    color: var(--primary-btn-text-color);
    font-size: var(--regular-text-size);
}

.leaflet-touch .leaflet-control-attribution {
    font-size: var(--smaller-text-size);
}

.leaflet-attribution-flag {
    display: none !important;
}

@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        gap: 10px;
        padding: 10px;
    }

    .input-group {
        width: 100%;
    }

    .navbar div {
        justify-content: center;
    }

    .navbar a {
        font-size: 1.2rem;
    }

    #map {
        top: 80px;
        /* Increased to fit navbar */
    }
}

.leaflet-popup-close-button {
    position: absolute;
    top: -12px;
    right: -12px;
    background: white;
    border: 2px solid hsla(5, 77%, 60%, 1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}