/* Root variables */
:root {
    --marker-circleColor: rgb(233, 233, 233);
    --heart-bgMap: #fefefe;
    --innerHeart-bg: #fefefe;
    --border-forZoom: 1px solid #6e6e6e;
    --bottom-sliderButton: hsl(0, 0%, 90%);
    --border-dealIcons: 2px solid #6e6e6e;
    --deal_buttonsBg: #121212;
    --zoom-butts: #131314;
    --f-inter: 'Inter';
    --slider-bg: rgba(0, 0, 0, 0.95);
    --mapMarker-bg: #007dbd;
    --bgForSmall-img: #15191c; 
    --fullDetails-col: #d1d7e2;;
    --bxShad-smIm: 0 0px 0px rgba(0, 0, 0, 0.0); 
}

/* Dark mode variables */
.dark-mode {
    --marker-circleColor: black;
    --heart-bgMap: #FEFEFE;
    --innerHeart-bg: none;
    --border-forZoom: 1px solid none;
    --bottom-sliderButton: rgb(110, 110, 110, 0.8);
    --border-dealIcons: 2px solid #6e6e6e;
    --deal_buttonsBg: white;
    --zoom-butts: white;
    --slider-bg: rgba(255, 255, 255, 0.95);
    --mapMarkers-bg: #007dbd;
    --justBlack-smNav: black;
    --bgForSmall-img:white; 
    --bxShad-smIm: 0 4px 8px rgba(0, 0, 0, 0.15); 
    --fullDetails-col: #298fcc; 
}

/* Global styles */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

body {
    max-width: 100%;
}

body.dark-mode {
    filter: brightness(94%);
}

@media screen and (min-width: 768px) {
    body {
        width: calc(100% - 17px);
    }
}

/* Map styles */
#map {
    width: 100%;
    height: 100%;
}

#map canvas {
    /* filter: invert(0%) hue-rotate(8deg) brightness(104%) contrast(97%) saturate(82%) grayscale(0%); */
    filter: invert(0%) hue-rotate(8deg) brightness(108%) contrast(97%) saturate(100%) grayscale(25%);
}

body:not(.dark-mode) #map canvas {
    /* filter: invert(81%) hue-rotate(193deg) brightness(114%) contrast(179%) saturate(121%) grayscale(38%);  */
    /* filter: invert(80%) hue-rotate(187deg) brightness(111%) contrast(194%) saturate(121%) grayscale(38%); */
    /* filter: invert(81%) hue-rotate(193deg) brightness(116%) contrast(179%) saturate(121%) grayscale(38%);  */
    filter: invert(80%) hue-rotate(187deg) brightness(111%) contrast(194%) saturate(121%) grayscale(38%);
}

/* Loading spinner */
.map_loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.map_loading_text {
    color: #155a8a;
    font-size: 1.25rem;
    font-weight: 600;
    animation: pulse2 1.5s infinite ease-in-out;
}

@media screen and (max-width: 768px) {
    .map_loading_text {
        font-size: 0.875rem;
    }
}

.map_spinner {
    border: 6px solid var(--dealCard-bg);
    border-top: 6px solid #1a8cd8;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin2 1s linear infinite;
}

@keyframes pulse2 {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

@keyframes spin2 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Modal styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    display: none;
}

.modal-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90vw;
    max-height: 90vh;
    z-index: 10001;
    display: none;
}

.modal-image {
    width: 42vw;
    height: auto;
    max-width: 100%;
    max-height: 70vh;
    min-width: 200px;
    min-height: 200px;
    object-fit: contain;
    border-radius: 5px;
}

.modal-close-btn {
    position: absolute;
    top: -30px;
    right: -30px;
    background: transparent;
    border: none;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    font-size: 16px;
    line-height: 25px;
    text-align: center;
    cursor: pointer;
}

.clickable-image {
    cursor: pointer;
}

.no-deals-notif {
    width: 400px; 
}

.noDealMainBox {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

@media screen and (max-width: 591px) {
    .no-deals-template {
        width: 90%; 
    }
}

@media screen and (max-width: 768px) {
    .modal-close-btn {
        top: -25px;
        right: -25px;
        width: 20px;
        height: 20px;
        font-size: 14px;
        line-height: 20px;
    }
    .modal-image {
        width: 85vw;
        min-width: 150px;
        min-height: 150px;
        max-height: 85vh;
    }
}

/* No deals notification */
.no-deals-notif {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--slider-bg);
    color: var(--dark-text);
    border-radius: 0.5rem;
    
    z-index: 1000;
    display: none;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
}

.no-deals-content {
    position: relative;
    text-align: center;
    padding: 1.75rem 1.25rem 1rem 1.25rem;
}

.no-deals-content p {
    text-align: left;
}

.no-deals-close-btn {
    position: absolute;
    top: 0.25rem;
    right: 0.625rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 1.375rem;
    height: 1.5rem;
}

.no-deals-close-btn:hover {
    opacity: 0.7;
}

.no-deals-post-btn {
    font-size: 0.875rem;
    font-weight: 800;
    width: 85%;
    padding: 0.65rem 0.7rem 0.65rem 0.7rem;
    background: #0066d9;
    color: White;
    border-radius: 8px;
    opacity: 1;
    transition: opacity 0.28s ease-in-out;
    cursor: pointer;
    line-height: 1;
    border: none;
    font-family: 'Inter';
}


@media screen and (max-width: 48rem) {
    .no-deals-notif {
        width: 80%;
    }
    .no-deals-content p {
        font-size: 1rem;
    }
}

/* Dropdown container */
#dropdown-container {
    position: absolute;
    display: flex;
    align-items: center;
    left: 395px;
    top: 9.75rem;
    color: var(--dark-text);
    padding: 0.05rem 0.5rem 0.25rem 0.5rem;
    border-radius: 7px;
    z-index: 100;
    font-size: 1rem;
    font-weight: 500;
    display: none;
}

#dropdown-container label {
    color: var(--dark-text);
    font-weight: 400;
}

#radius-dropdown {
    border-radius: 4px;
    padding: 0.05rem;
    margin: 0.2rem 0 0.2rem 0.40rem;
    box-shadow: var(--box-shadowLightDark);
}

@media screen and (max-width: 768px) {
    #dropdown-container {
        bottom: 4.6rem;
        font-size: 1rem;
        background-color: var(--cat-bkColor);
        border-radius: 10px;
        color: var(--dark-text);
        left: 0;
        height: 1rem;
        display: none;
        border-bottom: none;
        border-left: none;
    }
}

/* Info panel */
#info {
    display: none;
    position: absolute;
    top: 0;
    background: var(--bg-sectionWhiteBlack);
    border-radius: 10px;
    height: auto;
    z-index: 1000;
    padding: 0.5rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: translateX(-100%);
    opacity: 0;
    width: 550px;
    background-color: black;
}

#info.show {
    display: block;
    transform: translateX(0);
    opacity: 1;
}

#info h3 {
    color: var(--text-whiteBlack);
    font-weight: 700;
    font-size: 1.25rem;
}

#info h4 {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-whiteBlack);
}

#info p {
    padding: 1rem;
    font-weight: bold;
    font-size: 1rem;
    text-align: center;
    color: var(--text-black);
}

.info_Deal {
    border-radius: 10px;
    background-color: #e2e2e2;
}

/* Deals list and slider */
#dealsList {
    background-color: var(--slider-bg);
}

#dealsList a {
    opacity: 1;
    transition: opacity 0.33s ease-in-out;
    color: var(--text-hyperLink);
}

#deals {
    position: absolute;
    left: -350px;
    width: 350px;
    max-width: 350px;
    height: 100%;
    overflow-y: auto;
    opacity: 0;
    transition: left 0.2s ease, opacity 0.3s ease;
    pointer-events: none;
    z-index: 500;
    -webkit-overflow-scrolling: touch;
}

#deals.show {
    left: 0;
    opacity: 1;
    pointer-events: auto;
}

#deals::-webkit-scrollbar {
    width: 5px;
}

#deals::-webkit-scrollbar-track {
    background: var(--body-bg);
    border-radius: 10px;
}

#deals::-webkit-scrollbar-thumb {
    background: #636363;
    border-radius: 10px;
}

#deals::-webkit-scrollbar-thumb:hover {
    background: #636363;
}

#deals {
    scrollbar-width: thin;
    scrollbar-color: #636363 var(--body-bg);
}

@media screen and (max-width: 768px) {
    #dealsList {
        background: transparent;
    }
    #deals {
        max-width: 100%;
        width: 100%;
        height: auto;
        max-height: 50%;
        left: 0;
        top: 100%;
        bottom: auto;
        opacity: 0;
        transition: top 0.3s ease, opacity 0.3s ease;
        pointer-events: none;
    }
    #deals.show {
        top: 53.5%;
        opacity: 1;
        pointer-events: auto;
        z-index: 2000;
        border-top-left-radius: 1.95rem;
        border-top-right-radius: 1.95rem;
        background-color: var(--slider-bg);
    }
}

/* Map category list */
.mapCatList {
    background-color: var(--slider-bg);
    font-family: 'Poppins';
}

#mapCategoryListLeft {
    position: absolute;
    left: -350px;
    width: 350px;
    max-width: 350px;
    height: 100%;
    overflow-y: auto;
    opacity: 0;
    transition: left 0.2s ease, opacity 0.3s ease;
    pointer-events: none;
    z-index: 500;
    padding-top: 0.95rem;
    background-color: var(--slider-bg);
    -webkit-overflow-scrolling: touch;
}

#mapCategoryListLeft.show {
    left: 0;
    opacity: 1;
    pointer-events: auto;
}

#mapCategoryListLeft::-webkit-scrollbar {
    width: 5px;
}

#mapCategoryListLeft::-webkit-scrollbar-track {
    background: var(--body-bg);
    border-radius: 10px;
}

#mapCategoryListLeft::-webkit-scrollbar-thumb {
    background: #636363;
    border-radius: 10px;
}

#mapCategoryListLeft::-webkit-scrollbar-thumb:hover {
    background: #636363;
}

#mapCategoryListLeft {
    scrollbar-width: thin;
    scrollbar-color: #636363 var(--body-bg);
}

@media screen and (max-width: 768px) {
    #mapCategoryListLeft {
        left: 0;
        bottom: -100%;
        width: 100%;
        max-width: 100%;
        opacity: 0;
        transition: opacity 0.3s ease, max-height 0.25s ease;
        pointer-events: none;
        position: fixed;
        box-sizing: border-box;
        border-top-right-radius: 1.975rem;
        border-top-left-radius: 1.975rem;
    }
    #mapCategoryListLeft.show {
        opacity: 1;
        pointer-events: auto;
        bottom: 0;
        max-height: calc(0vh + 6.75rem);
        overflow-y: auto;
        padding-bottom: 1rem;
        padding-top: 0.75rem;
        z-index: 1000;
    }
    #mapCategoryListLeft.show.expanded {
        max-height: calc(0vh + 17.5rem);
    }
    
    #mapCategoryListLeft.show .deal-item:first-child {
        transition: transform 0.3s ease; /* Corrected syntax */
    }
}

/* Deal item styles */
.deal_items {
    align-items: center;
}

.dealNameLink {
    cursor: pointer;
    display: flex;
    align-items: center;
    font-family: 'Poppins';
    padding: 0rem 1.5rem 1rem 1rem;
    opacity: 1;
    transition: opacity 0.22s ease-in-out;
}

.dealNameLink:hover {
    opacity: 0.6;
}

.dealNameNumber {
    font-weight: 700;
    margin-right: 0.75rem;
    border-radius: 50%;
    color: var(--numbersCol-slidout);
    background-color: var(--numbers-slideout);
    min-width: 1.8rem;
    min-height: 1.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.05rem;
    font-family: 'Inter';
    line-height: 1;
}

.dealNameName {
    font-weight: 400; /* Lighter to de-emphasize */
    color: var(--subHead-gray);
    font-size: 0.875rem; /* Smaller for secondary role */
    font-family: 'Inter';
    letter-spacing: 0.2px; /* Looser for contrast */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: clamp(200px, 70vw, 280px); /* Fluid, matching .dealNameDescription */
    margin-bottom: 0.1rem;
    
}

.dealNameDescription {
    font-weight: 800; /* Bold for emphasis */
    color: var(--darkText-light);
    font-size: 1.05rem; /* Larger for prominence */
    font-family: 'Inter'; /* Explicitly set for contrast */
    line-height: 1.15; 
    letter-spacing: 0.1px; /* Tighter for readability */
    max-width: clamp(200px, 70vw,  700px);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media screen and (max-width: 768px) {
    .dealNameLink {
        padding: 0 0 1.2rem 1.2rem;
    }
    .deal-item .dealNameLink:first-of-type {
        padding-top: 0;
    }
    .dealNameNumber {
        font-size: 1rem;
        padding: 0.1rem;
    }
    .dealNameName {
        font-size: 0.0875rem;
    }

    .dealNameDescription {
        font-size: 1rem;
    }
}

@media screen and (max-width: 768px) {
    .dealNameDescription {
        max-width: clamp(200px, 70vw, 800px);
    }
}

/* Deal slider */
.slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
}

.slides {
    display: flex;
    transition: transform 0.5s ease;
}

.slide {
    min-width: 100%;
    max-height: 11rem;
    box-sizing: border-box;
}

.slide img {
    height: auto;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

button.prev, button.next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px;
    cursor: pointer;
    z-index: 1000;
}

button.prev {
    left: 10px;
}

button.next {
    right: 10px;
}

/* Deal card styles */

    .dealSliderInfoMain {
        border-radius: 10px;
        width: 350px;
        margin-bottom: 14rem;
        box-sizing: border-box; /* Ensure width includes padding */
        overflow: hidden; /* Clip any overflow */
    }


@media screen and (max-width: 768px) {
    .dealSliderInfoMain {
        padding: 1.75rem 0 0 0;
        width: 100%;
    }
}

@media screen and (max-width: 576px) {
    .deal_imageANDbuttons_container {
        display: grid;
        grid-template-columns: 1fr;
        margin-top: 4rem; 
    }

    .deal_slider_icons {
        margin-top: 3.6rem; 
    }
}

@media screen and (min-width: 576px) and (max-width: 768px) {
    .deal_imageANDbuttons_container {
        display: grid;
        grid-template-columns: minmax(0, 21rem) 10.5rem;
        margin-top: 4rem;
        justify-content: center; 
    }

    .deal_slider_icons {
        margin-top: 0rem; 
    }

}

.deal_image_container {
    position: relative;
    padding-top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    margin-top: 1.95rem;
    margin-bottom: 2.74rem;
    margin-left: 0.5rem; 
    margin-right: 0.5rem;
}

.deal_image_top {
    width: 100%;
    max-width: 92.5%;
    height: 175px;
    position: relative;
    overflow: hidden;
}

.deal_image_top img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 15px;
}

@media screen and (max-width: 576px) {
    .deal_image_container {
    margin-left: 2rem;
    margin-right: 2rem;
    }
}

@media screen and (max-width: 768px) {
    .deal_image_container {
        margin-top: 0;
        margin-bottom: 0;
        padding: 0.5rem; 
        justify-content: center;
        box-shadow: var(--bxShad-smIm);  
        background: var(--bgForSmall-img);
        max-width: 100%;
    }
    
    .deal_image_top {
        max-width: 100%;
        max-height: 100%;
    }
}

.deal_mileage {
    padding: 0.365rem 1rem 0.365rem 0.88rem;
    background-color: var(--body-bg);
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--nav-suggestColor);
    border-radius: 0 0 5px 0;
    white-space: nowrap;
}

.discountP {
    font-size: 1.075rem;
    font-weight: 800;
    color: var(--darkText-light);
    opacity: 1;
    margin-top: 0.1rem;
    line-height: 1.15;
    letter-spacing: 0.3px;
    font-family: 'Poppins'; 
    letter-spacing: 0.1px;
}

.discountP:hover {
    text-decoration: underline;
}

@media screen and (max-width: 576px) {
    .discountP {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .discountP-container {
        display: block;
        padding-left: 0.75rem;
        white-space: nowrap; /* Single line */
        overflow: hidden; /* Clip excess text */
        text-overflow: ellipsis; /* Show ellipsis */
        box-sizing: border-box; /* Include padding/margins */
        width: 98%; 
    }
    .discountP {
        text-align: left;
        font-size: 1.05rem;
        margin-top: 0.1rem;
        line-height: 1.6;
        letter-spacing: 0.2px;
        white-space: nowrap; /* Single line */
        overflow: hidden; /* Clip excess text */
        text-overflow: ellipsis; /* Show ellipsis */
        box-sizing: border-box; /* Include padding/margins */
    }
}

.viewDealButton_holder {
    display: flex;
    padding-bottom: 0.5rem;
}

.viewDealButton {
    padding: 0.075rem;
    margin-top: 0.45rem;
    border: 2px solid;
    background: transparent;
    color: var(--fullDetails-col);
    font-weight: 800;
    font-size: 0.9rem;
    border-radius: 50%;
    opacity: 1;
    transition: opacity 0.33s ease-in-out;
    position: relative;
    font-family: 'Inter';
    cursor: pointer;
    line-height: 1;
    text-decoration: underline;
    letter-spacing: 0.2px;
}

@media screen and (max-width: 768px) {
    .viewDealButton_holder {
        position: absolute;
        top: 3.5rem;
        left: 0;
        padding-top: 0.9rem;
    }
    .viewDealButton {
        font-size: 0.9rem;
        padding: 0.05rem;
        border-radius: 50%;
        line-height: 1.1;
        margin: 0.5rem 1.5rem;
    }
}

.deal_slider_icons {
    font-size: var(--icon-clamp);
}

.deal_slider_icons p {
    color: var(--dark-text);
    font-weight: 500;
}

@media screen and (max-width: 768px) {
    .deal_slider_icons {
        justify-content: center;
        align-items: center;
        margin-left: 0.65rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
        padding-left: 0;
    }
    .deal_slider_icons p {
        font-weight: 500;
        font-family: 'Inter';
        letter-spacing: 0.3px;
    }
    .deal_icon_container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

.ptDealSliderIcons {
    padding: 0.25rem 0.3rem;
    border-radius: 10px;
    font-size: clamp(0.875rem, 4vw + 1rem, 1.25rem);
    transition: background-color 0.13s ease-in-out;
}

.ptDealSliderIcons:hover {
    background-color: var(--body-bg);
}


@media screen and (min-width: 768px) {
    .ptDealSliderIcons {
        padding-top: 0.45rem;
        padding-bottom: 0.45rem;
    }

    
    .deal_detDescrip_container {
        margin-bottom: 2.5rem; 
    }
}

@media screen and (max-width: 768px) {
    .ptDealSliderIcons {
        width: 135px;
        padding: 0;
        display: grid;
        grid-template-columns: 36px 1fr;
        background-color: transparent;
        min-height: 2.3rem;
        margin-top: -0.1rem;
    }
    .deal_iconMT {
        margin-top: 0.85rem !important;
    }
}

.dealAddressP {
    padding-left: 1rem;
    font-family: var(--f-inter);
    font-size: 0.95rem;
    font-weight: 500;
}

.dealAddressP2 {
    font-weight: 500;
    padding-left: 0.825rem;
    font-family: var(--f-inter);
}

@media screen and (max-width: 768px) {
    .dealAddressP {
        padding-left: 0;
        line-height: 1.4;
    }
    .hideLarge, .dealAddressP2, .dealAddressP {
        font-weight: 600;
    }
}


@media screen and (max-width: 768px) {
    .deal_detDescrip_container {
        margin-top: 0.75rem;
    }
}

.deal_detDescrip_p1 {
    color: var(--dark-text);
    font-weight: 800;
    padding-left: 0.25rem;
    font-size: 1rem;
    letter-spacing: 0.15px;
    line-height: 1.6;
    margin-top: 2rem;
    margin-bottom: 0.175rem; 
}

.deal_detDescrip_p2 {
    color: var(--dark-text);
    font-weight: 400;
    padding-left: 0.25rem;
    line-height: 1.5;
    margin-bottom: 0.6rem;
    font-family: var(--f-inter);
    font-size: 1.05rem;
}

@media screen and (max-width: 768px) {
    .deal_detDescrip_p1 {
        margin-left: 0.75rem;
        font-size: 1.1rem;
        line-height: 1.4;
        margin-top: 3rem; 
        margin-bottom: 0.4rem;
    }
    .deal_detDescrip_p2 {
        margin-left: 0.75rem;
        font-size: 1rem;
        line-height: 1.6;
        max-width: 500px;
        margin-bottom: 0.6rem; 
    }

    .slider_mile p {
        margin-top: 3.5rem; 
    }
}

.detDescripArea {
    margin-bottom: 20rem;
    padding-bottom: 1rem;
    border-radius: 10px;
    font-size: 1.375rem !important;
    font-weight: 600;
}

/* Map card styles */
.map_cardContainer {
    padding: 2rem 1rem;
    display: flex;
    justify-content: center;
    max-width: 100%;
}

@media screen and (max-width: 768px) {
    .map_cardContainer {
        padding: 0 0.75rem;
        display: block;
    }
}

.map_card2 {
    position: absolute;
    top: -0.5rem;
    left: 0;
    z-index: 500;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--heart-bgMap);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.23s ease-in-out;
}

.map_card2:hover {
    opacity: 0.6;
}

@media screen and (max-width: 768px) {
    .map_card2 {
        width: 23px;
        height: 23px;
        left: -0.25rem;
        top: -0.5rem;
    }
}

.map_cardTopButtsContainer {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
}

.map_cardTopButtsChild {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.map_cardTopButton {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    width: 60px;
    border: none;
    outline: none;
    background-color: var(--bg-dealCard-bg);
    color: var(--light-grey-text);
    font-weight: 400;
    cursor: pointer;
}

.map_cardTopSpan {
    display: flex;
    justify-content: center;
    align-items: center;
}

.map_mt8 {
    margin-top: 8px;
}

/* Heart and share buttons */
.mileHeartMain {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-top: 1rem;
}

.heartButtMapMain {
    position: absolute;
    top: 0;
    right: 0;
}

.heartButtonMap {
    background-color: transparent;
    cursor: pointer;
    padding: 0.4rem 0.6rem 0.35rem 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease-in-out;
}

.heartButtonMap svg {
    width: 1.4rem;
    height: 1.3rem;
}

.shareButtMap {
    background-color: var(--body-bg);
    padding: 0.195rem 0.6rem 0.35rem 0.6rem;
    transition: transform 0.3s ease-in-out;
}

.mapLikeIcon, .mapShareIcon {
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.43s ease-in-out;
}

.mapLikeIconSvg {
    display: block;
}

/* Button styles */
button, #radius-dropdown, .heartButtonMap, .shareButtMap {
    border: none;
    outline: none;
}

#toggleMapCatListBtn:hover,
#toggleMapCatListBtn:focus,
#toggleMapCatListBtn:active {
    background-color: transparent;
    opacity: 1;
    outline: none;
    border: none;
    color: inherit;
}

#closeDealsBtn {
    position: absolute;
    right: 0.575rem;
    top: 0.25rem;
    z-index: 600;
    border: none;
    outline: none;
    opacity: 1;
    transition: opacity 0.23s ease-in-out;
    background-color: transparent;
    margin: 0;
    line-height: 0.9;
    padding: 0.25rem;
    border-bottom-left-radius: 8px;
    cursor: pointer;
}

#closeDealsBtn:hover {
    opacity: 0.5;
}

@media screen and (max-width: 768px) {
    #closeDealsBtn {
        top: -0.5rem;
        width: 100%;
        display: flex;
        justify-content: center;
        right: 0;
    }
}

.color-button {
    display: block;
    font-size: 0.9rem;
    font-family: 'Inter';
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--subHead-gray);
    font-weight: 500;
    line-height: 1.15;
    font-family: var(--f-inter);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.color-button-container {
    max-width: 100%; /* Ensure the container doesn’t exceed its parent */
    overflow: hidden; /* Clip any overflow */
    box-sizing: border-box; /* Include padding/margins in width */
}

.color-button2 {
    padding-left: 0.25rem;
    color: var(--grey-text);
    font-weight: 400;
}

@media screen and (max-width: 576px) {
    .color-button {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .color-button-container {
        display: block;
        margin-left: 0.75rem;
    }
    .color-button {
        text-align: left;
        font-size: 0.875rem;
        line-height: 1;
        position: relative;
    }
}

/* Typography */
.deal h1 {
    font-size: var(--heading-clamp);
    font-weight: 700;
    color: var(--dark-text);
    line-height: 1;
    text-align: center;
}

.deal h2 {
    font-size: 1rem;
    font-weight: 700;
    padding-top: 1rem;
    line-height: 1;
    padding-bottom: 0.20rem;
    color: var(--grey-text);
}

.slider_mile p {
    padding: 0.25rem 0 2rem 0;
    font-weight: 500 !important;
    color: var(--dark-text) !important;
    text-align: center;
    font-family: var(--f-inter);
    font-size: 1.1rem;
}

.slider_mile {
    margin-top: 2.5rem; 
}

.no-deals-message {
    color: var(--dark-text);
    text-align: center;
    font-weight: 400;
    font-size: 1rem;
}

@media screen and (max-width: 768px) {
    .no-deals-message {
        padding-bottom: 10rem;
        padding-top: 0.5rem;
    }
}

/* OpenLayers styles */
.ol-rotate {
    top: 0.75rem !important;
    left: 0.75rem !important;
    background: transparent !important;
}

.ol-touch .ol-control button {
    font-size: 1.5rem !important;
}

.ol-zoom-in,
.ol-zoom-out {
    background-color: var(--zoom-butts) !important;
}

.ol-control {
    position: relative;
    background-color: transparent;
}

.ol-control button {
    color: var(--dark-text) !important; 
    background-color: var(--slider-bg) !important; 
}   

.ol-zoom {
    color: var(--dark-text) !important; 
    background:transparent;
    font-size: 24px !important; 
    top: 0.3rem; 
}

@media screen and (min-width: 768px) {
    .ol-zoom {
        margin-left: 375px;
        margin-top: 3.25rem;
        border: none;
        font-size: 24px !important;
    }
    
    .deal_slider_icons {
        margin-bottom: 0.5rem; 
    }
}

@media screen and (max-width: 768px) {
    .ol-zoom {
        font-size: 1rem; 
        margin-top: 5.55rem;
        margin-left: 1.25rem; 
        
    }
}

.ol-popup {
    position: absolute;
    background-color: white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    min-width: 200px;
    z-index: 10000;
}

.ol-popup:after, .ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.ol-popup:after {
    border-color: rgba(255, 255, 255, 0);
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
}

.ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
}

.ol-attribution.ol-uncollapsible {
    position: absolute;
    bottom: 6.75rem;
    right: 0;
}

.ol-attribution:not(.ol-collapsed) {
    background: transparent !important;
}

.ol-attribution a,
.ol-attribution li {
    color: var(--dark-text) !important;
}

.ol-attribution ul li {
    background: transparent !important;
}

@media screen and (max-width: 768px) {
    .ol-attribution.ol-uncollapsible {
        bottom: 23vh;
        font-size: 0.825rem !important;
    }
    .ol-attribution a,
    .ol-attribution ul li {
        font-size: 0.525rem !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .ol-touch .ol-control button {
        font-size: 1.35rem !important;
    }
}

/* Responsive visibility */
.hideMapCatList {
    text-align: left;
    font-size: 1.05rem;
    letter-spacing: 0.1px;
}

@media screen and (max-width: 768px) {
    .hideMapCatList {
        padding-left: 1.5rem;
        font-size: 0.95rem;
        margin-top: 0.65rem;
    }
    .hideMapCatListSvg {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: -0.25rem;
        z-index: 1100;
    }
}

@media screen and (min-width: 768px) {
    .hideMapCatList {
        padding: 0 1rem 0.25rem 1.1rem;
    }
    .hideMapCatListSvg {
        display: none;
    }
}

.hideHeart {
    display: block;
}

@media screen and (max-width: 768px) {
    .hideHeart {
        display: none;
    }
}

.closeDealsDetailSmallbtn {
    display: none;
}

.closeDealsDetailLargebtn {
    display: block;
}

@media screen and (max-width: 768px) {
    .closeDealsDetailSmallbtn {
        display: block;
    }
    .closeDealsDetailLargebtn {
        display: none;
    }
}

@media screen and (min-width: 768px) {
    .hideSmall {
        display: block;
        padding-left: 0.7rem;
        -webkit-line-clamp: 1;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }
    .hideLarge {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .hideSmall {
        display: none;
    }
    .wwwSvger {
        width: 25px;
        padding-left: 0.1rem;
    }
    .phoneSvger {
        height: 28px;
        width: 32px;
    }
}

@media screen and (min-width: 768px) {
    #toggleHeightBtn {
        display: none;
    }
    .dealWebsiteText {
        margin-bottom: 0.075rem;
    }
}

.deals-container {
    padding-bottom: 10rem;
    padding-top: 0.5rem;
}

@media screen and (max-width: 768px) {
    .deals_secondContainer {
        margin-left: 1rem;
    }
    .closeDealsButton-containter {
        display: flex;
        justify-content: center;
    }
    .swipeButton {
        position: absolute;
        top: -0.025rem;
    }
}