/***************/
/* MAIN COLORS */
/***************/

:root {
    --primary-light-one: #5daa68;
    --primary-light-two: #4a9455;
    --primary-semidark-one: #356c3c;
    --primary-dark-one: #17311b;
    --secondary-light-one: #faf1cf;
    --secondary-light-two: #e1d7b5;
    --background-one: var(--primary-light-one);
    --background-two: var(--primary-light-two);
    --background-three: var(--secondary-light-one);
    --background-four: var(--primary-dark-one);
    --highlight-one: var(--primary-dark-one);
    --highlight-one-text: var(--secondary-light-one);
    --highlight-two: var(--primary-semidark-one);
    --text-one: var(--secondary-light-one);
    --shadow-one: var(--primary-dark-one);
    --text-two: var(--primary-dark-one);
    --text-three: var(--primary-light-one);
    --shadow-three: var(--primary-dark-one);
}

.content {
    padding: 10px;
}

/*******/
/* MAP */
/*******/

.map {
    border-radius: 8px;
    width: 100%;
    height: 100%
}

.marker {
    background-image: url('../img/logo_transparent.png');
    background-size: cover;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

.animal-shelter-marker {
    background-image: url('../img/animal_shelter.png');
!important;
}

.map-in-content #map {
    max-height: 500px;
    width: 90%;
}

@media only screen and (min-width: 768px) {
    .maplibregl-popup {
        max-width: 280px !important;
    }
}

@media only screen and (max-width: 768px) {
    .maplibregl-popup {
        max-width: 150px !important;
    }
}

.maplibregl-popup-close-button {
    all: unset; /* Remove all inherited styles */
    font-size: 1.2rem;
    background: none;
    border: none;
    color: black;
    cursor: pointer;
    position: absolute;
    top: 0.25rem;
    right: 0.5rem;
    padding: 0.25rem;
}

.popup-content {
    line-height: 1.4;
}


/*****
IMAGES
 *****/

.gallery .main-photo img {
    width: 100%;
    height: 150px;
    object-fit: cover; /* Crops the images */
    border-radius: 6px;
}

.thumbnail-row {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.thumbnail img {
    width: 100%;
    height: 50px;
    object-fit: cover; /* Crops the images */
    border-radius: 4px;
}

/* Ensure each thumbnail takes equal width */
.thumbnail {
    flex: 1;
}


/**
AN Cards
 */

.an-card {
    width: 100%;
    height: 100%;
}