/* poppins-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/poppins-v22-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/poppins-v23-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-600 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/poppins-v22-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-700 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/poppins-v22-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/inter-v18-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/inter-v18-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/inter-v18-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/inter-v18-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
    --bg-cityAreaOnload: #181818; 
    --bg-valueProp2: #181818;
    --bg-valueProp: black;
    --introContent-Bg: #121212;
    --bg-confirmButt: #3d4a5c;
    --popup-txtcolor: #21D900; 
    --white-only: #ffffff;
    --popup-txtColorBlue: #ffffff;
    --text-forTutorial: #dddddd; 
    --feat-gridBg: transparent;  
    --bord-locationInput: 1px solid #676767; 
    --bg-changeUseLocButtModal: #3d4a5c; 
    --bg-seeDeetsButt: #3d4a5c;
    --headerCol: #ececec;
    --minHeaderCol: #d1d7e2;
    --textCol: #ececec;
    --featuredTextCol: #2d4a6f; 
    --bordForNav: #353535; 
    --signInNavHoverBG: #1e1e1e; 
    --locationInputBG: #ffffff;
    --locationInputText: #2d4a6f; 
    --locationPin: #53abff;
    --bord-locationPopup: 1px solid rgba(119, 119, 119, 0.18);
}

.dark-mode {
    --white-only: black;
    --bg-cityAreaOnload: #ffffff; 
    --bg-valueProp: transparent;
    --bg-valueProp2: transparent;
    --introContent-Bg: linear-gradient(135deg, #f5f5f5 25%, #f0f0f0 25%, #f0f0f0 50%, #f5f5f5 50%, #f5f5f5 75%, #f0f0f0 75%);
    --bg-confirmButt: #ffffff; 
    --popup-txtcolor: #36A621;  
    --popup-txtColorBlue: black;  
    --text-forTutorial: var(--flame-bgColor); 
    --feat-gridBg: linear-gradient(
        135deg,
        #ffffff 25%,
        #f8f8f8 25%,
        #f8f8f8 50%,
        #ffffff 50%,
        #ffffff 75%,
        #f8f8f8 75%
    );
    --bord-locationInput: 1px solid #cdcdcd; 
    --bg-changeUseLocButtModal: white; 
    --bg-seeDeetsButt: #F0F7FF;
    --headerCol: #2d4a6f;
    --minHeaderCol: #1e3b60;
    --textCol:#2d4a6f;
    --featuredTextCol: #2d4a6f;
    --bordForNav: rgba(0, 0, 0, 0.18); 
    --signInNavHoverBG: #004a91; 
    --locationInputBG: #ffffff; 
    --locationInputText: #2d4a6f;
    --locationPin: #0061bd;
    --bord-locationPopup: 1px solid rgba(0, 0, 0, 0.18);
}

#intro-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000001;
    transition: opacity 0.22s ease;
}

.valuePropBox, .valuePropBox2 {
    padding-top: 0.5rem; 
    padding-bottom: 0.7rem;
}

.valuePropBox2 {
    color: var(--popup-txtColorBlue) !important; 
}

.tutorialText {
    color: var(--text-forTutorial); 
    text-decoration: underline; 
    font-weight:600;
    opacity: 1; 
    transition: opacity 0.22s ease-in-out; 
}

.tutorialText:hover {
    opacity: 0.75; 
}

.page-blur {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.3);
    z-index: -1;
}

.intro-content {
    background: var(--introContent-Bg);
    background-size:2px 2px; 
    padding: 1.5rem 2rem;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    text-align: left;
    color: var(--header-color, #333);
    position: relative;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
}

.close-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    color: var(--header-color, #333);
    font-size: 1.4rem;
    cursor: pointer;
}

.introH3Main {
    margin-bottom: 0.35rem; 
    line-height: 1; 
    font-size: 1.2rem; 
    text-align:center;
    color: var(--header-color, #333);
    margin-bottom: 0.5rem;
    font-family: 'Poppins', sans-serif;
    margin-top: 0.15rem;
    font-weight: 800;
}

.close-btn {
    opacity: 1; 
    transition: opacity 0.22s ease-in-out;
}

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

.close-btn:hover {
    color: var(--clickableText-color2, #1a8cd8);
}

.valuePropBox ul li {
    color: var(--white-only) !important; 
}

.intro-content h4 {
    font-size: 1.17rem;
    margin: 0.75rem 0rem 0.5rem 0rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}

.intro-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem 0;
}

.intro-content li {
    margin-bottom: 0.1rem;
    font-size: 0.9rem;
}

.intro-content li strong {
     font-weight: 800;
}

.features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 1rem;
    background: var(--feat-gridBg);
    background-size: 4px 4px; 
   
    border-radius: 0.75rem; 
    position: relative; 
}

.features-grid>div {
    display: flex;
    flex-direction: column;
}

.features-grid h4 {
    font-weight: 600; 
    margin-bottom: 0rem; 
    font-size: 1rem; 
    margin-top: 0.2rem; 
    color:var(--white-only); 
}

.featureGridFlexAlicen {
    display: flex; 
    align-items:center; 
}

.location-input {
    padding: 0.55rem 1rem;
    border: var(--bord-locationInput);
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    color: var(--dark-text);
    background: var(--bg-confirmButt);
    font-size: 0.9rem;
    box-sizing: border-box;
    flex-grow: 1;
}

.location-section {
    margin-bottom: 0rem; 
    display: flex; 
    justify-content: flex-end;
}

.location-section p {
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.intro-buttons,
.location-section div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
}

.locationPopupArea {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    align-items: center; 
    padding: 0.85rem 1.5rem;
    overflow: hidden; 
}

.locationPopupAreaContainer {
    max-width: 1100px;
    margin: 0rem auto;
    background: var(--changeLocationAreaBg);
    border-radius: 8px;
    border: var(--bord-locationPopup);
}

.locationPopupAreaMainContainer {
    margin: 1.75rem 2rem 0rem 3.5rem;
}

.intro-buttons button,
.location-section button {
    padding: 0.6rem 0.5rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
}

.intro-buttons button.location-btn
{
    background: var(--bg-confirmButt);
    border: 1px solid; 
    color: var(--signInButton-text);
    transition: opacity 0.3s ease-in-out, transform 0.2s ease-in-out; 
    font-size: 0.9rem; 
    font-weight:600; 
    border-radius: 6px; 
    outline: none; 
}

.location-section button.location-btn {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.18);
    background: var(--bg-changeUseLocButtModal);
    color: var(--textCol);
    transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out;
    font-size: 0.95rem;
    font-weight:600;
    border-radius: 0.35rem;
    outline: none;
}


.intro-buttons button.add-deal-btn {
    background: #0066d9;
    color: #fff;
    box-shadow: 0 2px 4px rgba(26, 140, 216, 0.2);
}

.intro-buttons button.dismiss-btn {
    background: #e0e0e0;
    color: #333;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* .intro-buttons button:hover,
.location-section button:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
} */

.intro-buttons button.location-btn:hover,
.location-section button.location-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.25);
}

.intro-buttons button.add-deal-btn:hover {
    opacity: 0.7;
}

.intro-buttons button.dismiss-btn:hover {
    background: #d5d5d5;
}

.intro-buttons button:active,
.location-section button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.intro-content ul,
.intro-content li {
    background: none;
    background-color: transparent;
    transition: none;
}

.intro-content li:hover,
.intro-content li:active,
.intro-content li:focus,
.intro-content ul:hover,
.intro-content ul:active,
.intro-content ul:focus {
    background: none;
    background-color: transparent;
    outline: none;
}

.distanceBoxMain {
    font-size: 0.9rem; 
    font-weight: 800;
}

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

.welcomeSubHeads {
    margin-top: 0rem;
    padding-bottom: 0rem; 
    font-size: 0.9rem;
    font-weight: 600; 
}

.welcomeSubPs {
    font-size: 0.875rem;
}

.mtSubHeadsIntroPopFirstChild {
    margin-top: 0.165rem; 
}

.mtSubHeadsIntroPop {
    margin-top: 0.45rem; 
}

.mlSubHeads {
    margin-left: 0.15rem; 
}

.mlSubHeadsP {
    margin-left: 1.175rem;
}

@media screen and (max-width: 576px) {
    .topTextDiv {
        margin-top: 0.75rem;
    }
    
    .intro-content {
        padding: 0rem 1.25rem 1.25rem 1.25rem;
        max-width: 90%;
        display: flex; 
        flex-direction: column; 
        align-items:center; 
    }

    .features-grid {
        grid-template-columns: 1fr;
        width: 290px; 
    }

    .intro-buttons,
    .location-section div {
        flex-direction: column;
    }

    .intro-buttons button,
    .location-section button {
        width: 100%;
        min-width: unset;
        font-size: 0.9rem;
    }

    .intro-content h3 {
        font-size: 1.3rem;
    }

    .intro-content h4 {
        font-size: 1.1rem;
    }

    .intro-content {
        padding: 1rem;
    }

    .close-btn {
        font-size: 1.2rem;
    }

    .valuePropBox {
        border-radius: 10px;
        padding-top: 0.5rem; 
        padding-bottom: 0.7rem;
    }

    .valuePropBox2 {
        border-radius: 10px;
        padding-top: 0.5rem; 
        padding-bottom: 0.7rem;
    }

    .intro-content h3 {
        font-size: 1.15rem;
    }

    .inline-container {
        flex-direction: column;
        align-items: flex-start; 
    }

    .firstWelcomeCont {
        width: 201px; 
    }
}

@media screen and (min-width: 577px) {
    .valuePropBox {
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    .valuePropBox2 {
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .firstWelcomeCont {
        max-width: 203px; 
    }

    .features-grid h4 {
        margin-bottom: 0.1rem;
    }
}

#radius-select {
    padding: 1px 4px;
    font-size: 0.9rem;
    border:1px solid lightblue;
    border-radius: 4px;
    background-color: var(--searchBar-bg);
    color: black; 
    cursor: pointer;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z" fill="black"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    min-width: 85px;
}

#radius-select:hover,
#radius-select:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

.changeYourCitySmall {
    display: flex; 
    margin-bottom: 1.25rem; 
    font-family: 'Inter'; font-weight: 800; font-size: 1rem; color: var(--dark-text);
}

#mileRadiusGridListContainer {
    display: flex;
    align-items:center; 
    justify-content: space-between;
    margin-top: 0rem;
    padding-right: 0.5rem;
}

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

@media (min-width: 577px) and (max-width: 767px) {
     .intro-buttons button {
        padding: 0rem;
    }
}

@media screen and (max-width: 768px) {
    .locationPopupArea {
        grid-template-columns: 1fr;
        margin-left: 0rem; 
        margin-right: 0rem; 
    }

    .locationPopupArea {
        padding: 0.7rem 0.95rem;
    }

    .locationPopupAreaContainer {
       border-radius: 0px; 
    }

    .locationPopupAreaMainContainer {
        margin: 1.85rem 0rem 0rem 0rem;
    }

    .location-section {
        margin-bottom: 0rem;
        margin-top: 1.25rem;
        display: flex;
        justify-content: flex-start;
    }

    .changeYourCityLarge {
        display: none; 
    }

    .changeYourCitySmall {
        margin-bottom: 0.4rem;
        font-size: 0.875rem;
    }

    .location-section {
        margin-top: 1rem;
    }

    .location-input {
        max-width: 280px;
    }
}

:root {
    --navBar-bgColor: transparent; 
    --lighter-gray: #0e0e0e; 
    --lighter-graybutts: #131314; 
    --all-buttons: #232a31; 
    --numbers-slideout: rgb(79, 156, 213,0.95); 
    --navbar-txt: #E0E0E0; 
    --bg-graybutts: rgb(19, 19, 20, 0.8); 
    --numbersCol-slidout: black; 
    --border-bottomOfNav: 1px solid #6e6e6e;
    --signInButton-text: #E0E0E0; 
    --svg-bg-deals:white; 
    --searchBar-maps: white;
    --borderBottom-nav: #5b5b5b; 
}

.dark-mode {
    --navBar-bgColor: #ffffff; 
    --lighter-gray: #f8fafd;  
    --all-buttons: #f9f9f9; 
    --navbar-txt: black; 
    --bg-graybutts: rgb(255, 255, 255, 0.8); 
    --numbers-slideout: rgb(0, 125, 189, 0.9); 
    --numbersCol-slidout: #ffffff; 
    --border-bottomOfNav: 1px solid rgba(0, 0, 0, 0.2);
    --signInButton-text: #024769;
    --svg-bg-deals:#024769;
    --searchBar-maps: white; 
    --borderBottom-nav: rgba(45, 74, 111, 0.3);
}

:root {
    --nav-mapBg2: #0066d9;
}

.dark-mode {
    --nav-mapBg2: #0066d9;
}

.mainLogoContainer {
    padding: 1rem 0.45rem 1rem 0.45rem; 
    font-family: 'Poppins'; 
    
}

.logoContainer img {
    padding-left: 1rem; 
    margin-bottom: .15rem;
}

.logoContainer {
    opacity: 1; 
    transition: opacity 0.22s ease-in-out
}

.logoContainer:hover {
    opacity: 0.75; 
}

.infoLinks {
    color:var(--text-whiteBlack); 
    opacity: 1; 
    
}

#locationInput::placeholder {
    color:var(--dark-text); 
    opacity: 0.9; 
    font-size: 0.925rem;
    font-weight: 400; 
}

@media screen and (max-width: 625px) {
    .logoContainer {
        justify-content: center; 
    }

    .logoContainer img {
        padding-left: 0; 
    }
}

#darkMode {
    border: none; 
    cursor:pointer; 
    background-color: var(--bg-slate); 
    padding: .5rem .5rem;
    color: white; 
    border-radius: 5px; 
    font-weight: bold; 
}

.mx-w-1120 {
    width: 1120px; 
}

.spBetween {
    justify-content: space-between; 
}

.pl1 {
    padding-left: 1rem; 
}

.pr1 {
    padding-right: 1rem; 
}

.ml1 {
    margin-left: 2rem; 
}

.mt1 {
    margin-top: 0.35rem; 
}

.logo_container_button {
    border: none; 
    color: var(--login-button-text);
    background: var(--bg-login-button-bg);  
    padding: 0.15rem 0.15rem;
    border-radius: 10px; 
    font-size: 1rem;
    font-weight: 600;
    transition: background-color 0.33s ease-in-out, opacity 0.23s ease-in-out; 
    opacity: 1; 
    cursor: pointer; 
    margin-left: 1rem;
}

.logo_container_button:hover {
    opacity: 0.5; 
}

.mobileNavButton {
    background: none; 
    border: none; 
    cursor: pointer; 
    padding: 10px; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-around; 
    width: 2.6rem; 
    height: 2.6rem; 
}

.bar {
    display: block; 
    width: 100%; 
    height: 0.190rem;
    background-color: var(--mobile-bar); 
    opacity: 1; 
    transition: all 0.3s ease; 
    border-radius: 10px; 
}

.mobileNavButton:hover .bar {
    opacity: 0.6; 
}

.navItemUlMob li a {
    color: var(--white-color); 
    font-size: 1.5rem; 
    font-weight: 500; 
    padding-top: 0.35rem; 
    padding-bottom: 0.75rem; 
    padding-left: 0.75rem; 
    padding-right: 0.75rem;  
    border-radius: 10px; 
    margin-left: 1rem; 
}

.navItemUlMob li:nth-child(n+2) {
    margin-top: 1.25rem; 
}

.navItemUlMob {
    padding-top: 3.25rem; 
}

.mobileMenu {
    position: fixed;
    top: 0;
    left: -100%; 
    height: 100%;
    width: 300px; 
    background: var(--nav-bg2);
    color: var(--dark-text);
    transition: left 0.6s ease; 
    z-index: 2000; 
    box-shadow: var(--box-shadowLightDark); 
}

.mobileMenu.open {
    left: 0; 
}

.closeButton {
    color: var(--text-black); 
    cursor: pointer;
    width: 40px; 
    height: 41px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

.closeButton:hover {
    opacity: 0.6; 
}

.lineContainer {
    position: relative; 
    width: 100%; 
    height: 100%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    opacity: 1; 
    transition: opacity .33s ease-in-out; 
}

.line {
    display: block;
    width: 60%; 
    height: 3px; 
    background-color: var(--dark-text); 
    transition: background-color 0.33s; 
    position: absolute;
    border-radius: 10px; 
    opacity: 1; 
}

.line-x:first-child {
    transform: rotate(45deg); 
}

.line-x:last-child {
    transform: rotate(-45deg); 
}

.lineContainer:hover  {
    opacity: 0.6 
}

.mobile-links li:nth-child(n+2) {
    margin-top: 0.5rem; 
}

.mobile-links li a {
    font-size: 1.35rem;
    line-height: 1; 
    font-weight: 600;  
    color: var(--dark-Text); 
    opacity: 1; 
    transition: opacity 0.23s ease-in-out; 
}

.mobile-links li a:hover {
    opacity: 0.6; 
}

.mobileDarkModeXOutContainer {
    justify-content: space-between; 
    padding: 0.2rem 0.25rem;  
}

.profileA {
    transition: opacity 0.23s ease-in-out; 
    opacity: 1; 
}

.profileA:hover {
    opacity: 0.6; 
}

.hiddenSunMoon {
    display: none;
}



@media screen and (max-width: 576px) {
    .secLogoContainer {
        background-color: var(--bg-navSmallScreen);
    }

    .mainLogoContainer {
        background-color: var(--bg-navSmallScreen);
        border-bottom: none; 
    }
}

@media screen and (max-width: 768px) {
    #signInNavButton {
       display: none !important; 
    }

    .mainLogoContainer {
        padding: 1rem 1rem 1rem .45rem; 
        
    }

    .navbarUI {
        margin-top: -0.2rem; 
    }

    .p1r5r1r5r2 {
        display: none; 
    }

    .profileClickHide {
        display: none; 
    }
}
   
@media screen and (min-width: 769px) {
    .mobileNavButton {
        display: none; 
    }

    #mobileMenu {
        display: none; 
    }

    .mainLogoContainer {
        padding-left: 0rem; 
        border-bottom: 1px solid var(--borderBottom-nav) ;
    }

    #signInNavButton2 {
        display: none; 
    }
}

:root {
    --svg-color: rgb(41, 143, 204);
    --form-bg: #ffffff; 
    --d-text: #000b27;
    --flame-bgColor2: rgb(0, 105, 170); 
    --loginIn-col: #14181c; 
    --bord-searchBar: 2px solid #6e6e6e;
    --addDealButtonColor: #E65100;
    --addDealButtonBorder: rgba(255, 98, 0, 0.6);
    --addDealHoverColor: #cc4e00;
    --addDealHoverBorderColor: rgba(255, 98, 0, 0.8);
    --addDealHoverBoxShadow: rgba(255, 98, 0, 0.8);
    --addDealBGCol: #121212;
    --addDealTextCol: #ebf1f8; 
}

.dark-mode {
    --svg-color: rgb(41, 143, 204); 
    --form-bg: #ffffff; 
    --d-text: #000b27;  
    --flame-bgColor2: #298fcc;
    --loginIn-col: #fefefe;
    --bord-searchBar: 1px solid rgba(0, 0, 0, 0.2);
    --addDealButtonColor: #F5F9FF; /* White with hint of blue */
    --addDealButtonBorder: rgba(0, 97, 189, 0.3); /* Blue border */
    --addDealHoverColor: #E8F1FC; /* Slightly deeper blue-white on hover */
    --addDealHoverBorderColor: rgba(0, 97, 189, 0.5); /* Darker blue border on hover */
    --addDealHoverBoxShadow: rgba(0, 97, 189, 0.3); /* Blue-tinted glow on hover */
    --addDealBGCol: #0073e6d9;
    --addDealTextCol: #1a1a1a; 
}

.navbarUl {
    gap: 0.8rem;
}


.darkModeSunMoon {
    transition: transform 0.3s ease; /* Smooth transition for any manual interactions */
}

.dark-mode .darkModeSunMoon:hover {
    animation: spin 20s linear infinite; /* Spin starts on hover only if body has dark-mode */
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.nav_flex_col {
    flex-direction: column; 
}

.nav_space_around {
    justify-content: space-around; 
}

.nav_justify_center {
    justify-content: center; 
}

.nav_text_alignCen {
    text-align:center; 
}

.navArea_container {
    width: 100%; 
}

.secLogoContainer {
    width: 1450px; 
}

.logoContainersvg {
    padding-left: .35rem; 
    margin-top: -0.25rem;
}

.heartButtonNav {
    background-color: transparent; 
    outline:none;
    border: none; 
    cursor: pointer; 
    padding: 0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: transform 0.2s ease-in-out; 
    opacity: 1; 
    transition: opacity .3s ease-in-out; 
}

.heartButtonNav:hover {
    opacity: 0.75; 
}

.navbarMainContainer {
    width: 100%; 
    background-color: var(--nav-mapBg2); 
    border-bottom: var(--border-bottomOfNav);
}

.navInformational ul li {
    font-weight: 400; 
    font-size: 1rem;
    border-radius: 4px;  
}

ul li {
    padding: 0.45rem 0.45rem;
    background-color: #155a8a; 
    margin-top: 0.35rem; 
    margin-bottom: 0.35rem; 
    border-radius: 2px; 
    transition: background-color 0.33s ease-in-out; 
    opacity: 1; 
}

ul li:hover {
    background-color: var(--mobile-nav-buttBg);
}

.logoButton_container {
    width: 1.95rem; 
    height: 1rem; 
    margin-left: 0.90rem;    
}

.toggle-checkbox {
    display: none; 
}

.toggle-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    background-color: #1a8cd8; 
    border-radius: 25px; 
    height: 100%; 
    width: 100%; 
    position: relative; 
    transition: background-color 0.3s; 
    box-shadow: var(--box-shadowLightDark); 
}

.toggle-switch {
    position: absolute; 
    width: 1rem; 
    height: 1rem; 
    background-color: white; 
    border-radius: 50%;
    transition: transform 0.3s; 
}

.toggle-checkbox:checked + .toggle-label .toggle-switch {
    transform: translateX(0.925rem); 
}

.toggle-label:active .toggle-switch {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); 
}

.toggle-checkbox-bottom {
    display: none; 
}

.toggle-label-bottom {
    display: flex;
    align-items: center;
    cursor: pointer;
    background-color: #1a8cd8; 
    border-radius: 25px; 
    height: 1.25rem; 
    width: 2.5rem; 
    position: relative; 
    transition: background-color 0.3s;
    box-shadow: var(--box-shadowLightDark);  
}

.toggle-switch-bottom {
    position: absolute; 
    width: 20px; 
    height: 18px; 
    background-color: #ffffff; 
    border-radius: 50%; 
    transition: transform 0.3s; 
}

.toggle-checkbox-bottom:checked + .toggle-label-bottom .toggle-switch-bottom {
    transform: translateX(20px); 
}

.toggle-label-bottom:active .toggle-switch-bottom {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); 
}

.navNewCust {
    font-weight: 700; 
    font-size: 0.875rem; 
    color: var(--text-whiteBlack); 
    transition: underline 0.23s ease-in-out; 
    font-weight: 800; 
}

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

/* #signInNavButton {
    position: relative;
    margin-right: 0.8rem;
    margin-top: 0.03rem;
    opacity: 1; 
    transition: opacity 0.22s ease-in-out; 
}

#signInNavButton:hover {
    opacity: 0.8; 
} */

#signInDropDown {
    display: none; 
    padding: 1.5rem; 
    position: absolute; 
    background-color: var(--loginIn-col); 
    z-index: 1000; 
    right: 0; 
    top: 100%; 
    width: 275px; 
    border-radius: 10px; 
    box-shadow: var(--box-shadowLightDark); 
}

#heartButtonNav {
    position: relative; 
}

#likesNavDropDown {
    display:none;
    position: absolute;
    padding: 1rem;  
    top: 100%;
    right: 2rem; 
    background-color: var(--body-bg); 
    color: var(--text-whiteBlack); 
    z-index: 1000; 
    width: 275px; 
    border-radius: 10px; 
    box-shadow: var(--box-shadowLightDark); 
    flex-direction: column; 
}

#likesNavDropDown.modal {
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 300px; 
    background-color: var(--body-bg); 
    color: var(--text-whiteBlack);
    box-shadow: var(--box-shadowLightDark); 
    border-radius: 10px;
    padding: 1.5rem;
    z-index: 1000;
    display: block;
}

/* #signInNavButton::after {
    content: '';
    position: absolute;
    right: 10px; 
    top: 50%; 
    transform: translateY(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--text-whiteBlack); 
    transition: transform 0.3s ease; 
}

#signInNavButton.flipped::after {
    transform: translateY(-50%) rotate(180deg);
} */

.navSuggestColor {
    color: var(--nav-suggestColor);
    font-size: 0.875rem; 
}

.navSuggestColor2 {
    color: var(--nav-suggestColor);
    font-size: 0.7rem; 
    text-align: center; 
}

.padTopStandNav {
    padding-top: 0.5rem; 
}

.padBotStandNav {
    padding-bottom: 0.5rem; 
}

.padTopStandNav2 {
    padding-top:1.2rem; 
}

.padBotStandNav2 {
    padding-bottom:1.2rem; 
}

.padBotStandNav4 {
    padding-bottom: 0.2rem; 
}

.nav_form_control {
    font-family: 'Inter'; 
    width: 100%; 
    padding: 0.6rem; 
    border: var(--bord-location);; 
    outline: none; 
    box-sizing: border-box; 
    border-radius: 7px; 
    background-color: var(--form-bg); 
    color: var(--d-text); 
}

.nav_form_control:focus {
    border-color: black; 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); 
}

.nav_form_control::placeholder {
    color: var(--d-text);  
    opacity: 1; 
    font-family: 'Inter'; 
}

.navLogInButt {
    width: 100%;
    margin: 0 auto; 
    cursor: pointer;
    border: none; 
    background: #0066d9; 
    color: white; 
    font-weight: bold; 
    font-size: 1rem;
    padding-top: 0.65rem; 
    padding-bottom: 0.65rem; 
    opacity: 1; 
    transition: opacity .33s ease-in-out; 
    border-radius: 20px; 
    margin-top: 0.5rem; 
}

.navForgotPW {
    padding-bottom: 1.5rem; 
    padding-top: 0.85rem; 
    padding-left: 0.25rem; 
    opacity: 1; 
    transition: opacity .33s ease-in-out; 
}

.navForgotPW a {
    color: var(--nav-suggestColor);
    font-size: 0.875rem; 
    transition: color 0.23s ease-in-out; 
}

.navForgotPW a:hover {
    border-bottom: var(--text-blackWhite);  
}

#closeMobileSignIn {
    cursor: pointer; 
    font-size: 2.25rem; 
    color: var(--text-whiteBlack); 
    position: absolute; 
    top: 0px; 
    right: 10px; 
    z-index: 1001; 
    font-weight: 400; 
}

.logoButtMobile {
    padding: 0.75rem 1rem 1rem 0.5rem; 
}

/**************bottom Navbar*********************/ 
.bottomNavbarContainer {
    position: fixed;
    display: flex; 
    justify-content: center; 
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1990;
    padding-top: 0.325rem;
    padding-bottom: 0.325rem;
    padding-left: 0.35rem; 
    padding-right: 0.35rem;
    background: var(--bottom-nav-color); /* Or 0.6 for more translucency */
    backdrop-filter: blur(20px); /* Key for the blur effect */
    -webkit-backdrop-filter: blur(20px); /* Safari support */
    border-top: 1px solid rgba(255, 255, 255, 0.3); /* Optional subtle divider */
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05); /* Light elevation */
    font-family: "Poppins";
    border-radius: 0px;
    margin-right: 2rem;
    width: 100%;
}

.darkModeBottomToggleContainer {
    width: 35px; 
}

.bottomNavbarButtCont {
    display: flex;
    align-items:center;
    width: 100%;
    justify-content: space-between;
    padding-left: 1rem;
    padding-right: 1rem; 
    
}

.bottomNavbarButt:hover {
    opacity: 0.6; 
}

.copyright {
    color: var(--nav-suggestColor); 
    font-size: 0.65rem; 
    text-align:center;
    padding-top: 0.55rem; 
    padding-bottom: 0.55rem;  
}

.header_link_button {
    background: transparent;
    color: #e6e6e6;
    font-weight: 500;
    padding: 0.5rem 0.75rem 0.4rem 0.75rem;;
    font-size: 0.9rem;
    transition: opacity 0.33s ease-in-out;
    opacity: 1;
    font-family: "Inter";
    border: none;
    outline: none;
    cursor: pointer;
}

.header_link_button:hover {
    opacity: 0.6; 
}

#addYourDealButton {
    min-width: 6.5rem;
    font-family: 'Poppins', sans-serif;
    background-color: var(--addDealButtonColor, #ff6200);
    border-radius: 6px;
    border: none;
    outline: none;
    color: var(--addDealTextCol);
    padding: 0.45rem 1rem 0.44rem 1rem;
    font-weight: 600;
    transition: background-color 0.25s ease, transform 0.15s ease, box-shadow 0.2s ease, border 0.2s ease;
    cursor: pointer;
    line-height: 1;
    margin-left: 0.5rem;
    font-size: 0.9rem; 
    position: relative;
    border: 2px solid var(--addDealButtonBorder, transparent); 
    background-clip: padding-box; 
    overflow: hidden; 
    -webkit-tap-highlight-color: transparent; 
    margin-top: 0.35rem; 
    margin-bottom: 0.35rem
}

/* #addYourDealButton {
    box-shadow: 0 0 12px var(--addDealHoverBoxShadow, rgba(255, 98, 0, 0.7)); 
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 
} */

#addYourDealButton:hover {
    background-color: var(--addDealHoverColor, #cc4e00); 
    transform: scale(1.05);
    border: 2px solid var(--addDealHoverBorderColor, rgba(255, 98, 0, 0.9));
    /* box-shadow: 0 0 20px var(--addDealHoverBoxShadow, rgba(255, 98, 0, 0.9));  */
}

#addYourDealButton::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1)); 
    border-radius: 4px; 
    animation: pulse 1.6s infinite ease-in-out; 
    z-index: -1;
    top: 0;
    left: 0;
}

#addYourDealButton:active {
    transform: scale(0.98); 
    box-shadow: 0 0 8px var(--addDealHoverBoxShadow, rgba(255, 98, 0, 0.6)); 
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.05); opacity: 0; }
    100% { transform: scale(1); opacity: 0.7; }
}

.p1r5r1r5r2 {
    border-radius: 4px;
    background-color: var(--searchBar-bg); 
    border: 1px solid rgba(0, 0, 0, 0.18);; 
}

#infoButtonHeaderButton {
    opacity: 1; 
    transition: opacity 0.22s ease-in-out; 
    background: rgba(0,0,0,0.0);
}

#infoButtonHeaderButton:hover {
    opacity: 0.7; 
}

@media screen and (max-width: 768px) {
    #signInDropDown {
        /* Dynamic padding: centers ~300px content area, min 1.5rem on tiny screens */
        padding: 3rem max(1.5rem, calc((100vw - 300px) / 2));
    }
}

@media screen and (max-width: 576px) {
    .bottomNavbarContainer {
        background-color: var(--bottom-nav-color);
    }
}

@media screen and (max-width: 768px) {
    .p1r5r1r5r2 {
        width: calc(100% - 3rem);
    }
}

@media screen and (max-width: 768px) {
    #signInDropDown {
        display: none; 
        position: fixed; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100vh; 
        border-radius: 0; 
        z-index: 2100; 
        overflow: hidden; 
        box-sizing: border-box; 
        justify-content: center; 
        align-items: center; 
    }

    .p1r5r1r5r2 {
        position: absolute;
        top:4rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1900; 
    }

    ul li {
        background-color: var(--nav-bg2); 
        color: var(--dark-text); 
        margin: 0rem 0.5rem; 
    }

    .logoButton_container {
        display:  none; 
    }

    #heartButtonNav {
        display: none; 
    }

    #signInNavButton2 {
       display: none; 
    }

    .logoContainersvg {
        padding-left: 0.25rem; 
    }

    .scrollLeft2 {
        visibility: hidden;
    }

    .scrollRight2 {
        visibility: hidden;
    }

    .navbarUl {
        gap: 1.3rem;
    }
    
    .arrowAfterLocate {
        margin-right: 0.25rem;
    }
}

@media screen and (min-width: 769px) {
    #closeMobileSignIn {
        display: none; 
    }

    .bottomNavbarButtCont {
        display: none; 
    }

    .bottomNavbarContainer {
        padding-top: 0rem;
        display: none;
    }

    .logoContainersvg {
        padding-left: 1.1rem; 
    }

    .p1r5r1r5r2 {
        position: static;
    }
}

@media screen and (min-width: 1125px) {
    .logoContainersvg {
        padding-left: 1.3rem; 
    }
}

@media screen and (min-width: 1550px) {
    .secLogoContainer {
        width: 1600px;
     }

     .navArea_container {
        width: 1600px; 
     }
}

#signInNavButton {
    min-width: 5.5rem;
    font-family: 'Poppins', sans-serif;
    background-color: var(--signInNavBg);
    border-radius: 6px;
    border: none;
    outline: none;
    color: #ffffff;
    padding: 0.5rem 1.1rem 0.55rem 1.1rem;
    font-weight: 600;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    line-height: 1;
    margin-left: 0.5rem;
    font-size: 0.9rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

#signInNavButton:hover {
    background-color: var(--signInNavHoverBG);
}



@media screen and (max-width: 1550px) {
    #addYourDealButton {
        margin-right: 0.25rem;
    }
}

:root {
  --body-bg: #121212;
  --body-bg2: #121212; 
  --nav-bg: #121212;  
  --nav-bg2: #14181c;
  --nav-bg3: #535353;
  --white-text: #3a3a3a; 
  --text-justWhite: #eae8ea;
  --text-whiteBlack: #e0e0e0;
  --bg-sectionWhiteBlack: #000000;
  --border-blackWhite: #464646; 
  --bg-slateButton: #1a8cd8; 
  --text-slateButton: #464646;  
  --text-hyperLink: #1d9bf0;
  --sign-in-logo: hsl(0, 0%, 90%); 
  --border-slate-red: rgb(173, 178, 189); 
  --login-button-bg: #141414;  
  --login-button-text: #E0E0E0;
  --mobile-bar: #eae8ea; 
  --mobile-menu-bg: #000000; 
  --bg-sectionDealsPage: #1f1e1f; 
  --searchBar-bg: #121212;  
  --searchBar-outline: black; 
  --dealCard-bg: #373737; 
  --searchButton-bg: #191919; 
  --nav-suggestColor: rgb(173, 178, 189);
  --text-black: #1f1e1f;
  --box-shadowLightDark:  rgba(255, 255, 255, 0.1) 0px 20px 25px -5px, rgba(255, 255, 255, 0.04) 0px 10px 10px -5px;
  --nav-mobileX: rgb(239, 244, 255); 
  --coupon-highlight: red;
  --color-blackLightGreen: #30d158; 
  --color-heartHighlight: #30d158;
  --color-fillInput: #86868b; 
  --bg-navSmallScreen: #14181c;
  --dark-text: #ececec;
  --darkText-light: #ececec; 
  --darkText-light2: hsl(0, 0%, 90%); 
  --grey-text: hsl(0, 0%, 90%);
  --light-grey-text: hsl(0, 0%, 95%);
  --headingDeals-clamp: 1rem; 
  --refine-text: hsl(0, 0%, 74%);
  --refine-text2: #474747; 
  --heart-NavColor: hsl(0, 0%, 95%); 
  --mobile-nav-buttBg: #000000; 
  --mobile-footer: #000000;
  --indiv-deal-bg: #121212; 
  --indiv-deal-bgHover: #191919;
  --indiv-deal-picBg: #e2e2e2; 
  --login-bg: #121212;   
  --bottom-nav-color: hsla(0, 0%, 7%, 0.6); 
  --searchBar-bg: #F5F6F5;
  --bottom-navPostBG: blue; 
  --log-bg: #121212; 
  --subHead-gray: #d1d7e2; 
  --signInNavBg: #3d4a5c;
}

.dark-mode {
  --body-bg2: white; 
  --body-bg: #f2f1f7; 
  --nav-bg: #155a8a; 
  --nav-bg2: #fefefe; 
  --nav-bg3: #f2f1f7;
  --white-text: #eae8ea; 
  --bg-slate: #334155;
  --text-justWhite: #f1f1f1; 
  --text-black: #111827; 
  --sign-in-logo: #1a8cd8; 
  --text-whiteBlack: #111827; 
  --bg-sectionWhiteBlack: #f1f1f1;
  --bg-sectionDealsPage: #e2e2e2;  
  --border-blackWhite: #d1d1d1; 
  --bg-slateButton: #1a8cd8; 
  --text-slateButton: #f1f1f1; 
  --text-hyperLink: #1d9bf0; 
  --border-slate-red: rgb(51, 65, 85);
  --login-button-bg: #e2e2e2; 
  --login-button-text: #1d1d1d; 
  --mobile-bar: #1f1e1f; 
  --mobile-menu-bg: #155a8a; 
  --searchBar-bg: #ffffff;
  --searchButton-bg: white; 
  --searchBar-outline: black; 
  --dealCard-bg: #ffffff; 
  --nav-suggestColor: rgb(111, 115, 123);
  --box-shadowLightDark:  rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
  --nav-mobileX: rgb(239, 244, 255); 
  --font-size-xs: 0.75rem; /* 12px */
  --coupon-highlight: red; 
  --color-blackLightGreen: #1a8cd8; 
  --color-heartHighlight: #1a8cd8;
  --color-fillInput: #86868b;
  --bg-navSmallScreen: #ffffff;
  --dark-text: #1A2526;
  --darkText-light: #1A2526; 
  --darkText-light2: #006add; 
  --grey-text: hsl(0, 0%, 29%);
  --light-grey-text: hsl(0, 0%, 45%);
  --refine-text: hsl(0, 0%, 41%); 
  --refine-text2: #dee2e6; 
  --heart-NavColor: hsl(0, 0%, 13%); 
  --mobile-nav-buttBg: #ffffff; 
  --mobile-footer: #f2f1f7;
  --indiv-deal-bg: #ffffff;
  --indiv-deal-bgHover: #f2f1f7;
  --indiv-deal-picBg: #f2f2f2;   
  --login-bg: #ffffff; 
  --bottom-nav-color: hsl(210deg 100% 45% / 85%);
  --bottom-navPostBG: rbg(182,255,219); 
  --log-bg: #ffffff; 
  --subHead-gray: #1A2526; 
  --signInNavBg: #0061bd; 
}



blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
    text-decoration: none; 
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
}

html, body {
  height: 100%;
  margin: 0;
}

.text-bl {
  color: var(--text-black); 
}

body {
    font-family: 'Poppins';
    background-color: var(--body-bg); 
    -webkit-font-smoothing: antialiased; /* For Chrome/Safari */
    -moz-osx-font-smoothing: grayscale; /* For Firefox */
}   

.flex {
    display: flex; 
}

.justify-center {
    justify-content: center; 
}

.items-center {
    align-items: center; 
}

.bg-slate {
    background-color: var(--bg-slate); 
}

.bg-sectionWhiteBlack {
  background-color: var(--bg-sectionWhiteBlack); 
}

.text-w {
  color: var(--white-text); 
}

.text-b {
  color: var(--text-whiteBlack); 
}

.text-bw {
  color:var(--text-whiteBlack); 
}

.text-wb {
  color: var(--text-justWhite); 
  line-height: 1; 
  font-size: 1.2rem; 
  font-weight: 600; 
  font-family: 'Inter'; 
}

.text-wblack {
  color: var(--text-whiteBlack); 
}

.fw-bold {
  font-weight: 600; 
}

.grid {
  display: grid; 
}

#mapBtn {
    border: none; 
    background-color: var(--bg-slate); 
    color: white; 
    font-weight: 600; 
    width: 5rem; 
    padding-top: 0.3rem; 
    padding-bottom: 0.3rem;  
    opacity: 1; 
    transition: opacity 0.33s ease-in-out; 
    border-radius: 15px; 
}

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

.map_mt8 {
  margin-top: 8px;
}

.w-1120 {
  width: 1232px; 
}

.toolTipHead {
  width:100%; 
  font-weight: 600; 
  color: var(--text-whiteBlack); 
  padding: .5rem; 
}

.bg-slate-gradient {
  background: linear-gradient(to top, #252f3d, #334155);
}

.margAut {
  margin: 0 auto; 
}

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


:root {
    --mag-color: #bdbdbd;
    --overlay-color: #1c2127;
    --x-color: #bdbdbd; 
    --noDeal-bxshad: none;
    --bg-ohno: rgba(0,0,0,0.8);
    --cat-bg: #14181c; 
    --deal-bodyBg: #141414; 
    --clickableText-color: #d1d7e2; 
    --clickableText-color2: #ececec; 
    --border-ListView: 1px solid #6e6e6e; 
    --deals-mainBackground: #14181c; 
    --bg-forSwitchView: #141414; 
    --searchbar-color: white; 
    --bord-categories: 1px solid #6e6e6e;
    --changeLocationAreaBg:#181d22;
    --stickyNav-bg: #1a1a1a; 
    --shareMapetc-btn: white;
    --otherIcons: #0066d9; 
    --borderForSvg: none; 
    --bdy-bright: brightness(0.95) contrast(1.16); 
    --box-shadow-card:0 4px 8px rgba(255, 255, 255, 0.048); 
    --box-shadow-card-highlight:0 4px 8px rgba(255, 255, 255, 0.096); 
    --carousel-butt-col: #E8E8E4; 
    --bg-svgShareDeals: #3d4a5c;
    --bg-svgLikeBtn: white;
    --col-likeButtStroke: #14181c;
    --col-svgShareDeals: #d1d7e2; 
    --bord-svgShareDeals: #4a5568;
    --load-text: rgb(136, 136, 136); 
    --viewBtn-bg: #585858;
    --grid-list-svg: #d1d7e2;
    --svg-borda: 1px solid #4a5568;
    --viewBtn-hover-bg: #4a4a4a;
    --viewBtn-hover-border: #888888;
    --viewBtn-active-bg: #3a3a3a;
    --viewBtn-active-border: #007bf3;
    --viewBtn-inactive-icon: #ececec;
}

.dark-mode {
    --mag-color: #1d1d1d;
    --overlay-color: rgba(255, 255, 255, 1);
    --x-color: #848484; 
    --noDeal-bxshad: 0 4px 6px rgba(0, 0, 0, 0.1);
    --bg-ohno: #ffffff; 
    --cat-bg: #fefefe; 
    --deal-bodyBg: white;
    --clickableText-color: #007dbd; 
    --clickableText-color2: #007dbd; 
    --border-ListView: 1px solid rgba(0, 0, 0, 0.1);
    --deals-mainBackground: #ffffff; 
    --bg-forSwitchView: #ffffff; 
    --searchbar-color: black; 
    --bord-categories: 1px solid rgba(0, 0, 0, 0.2);
    --changeLocationAreaBg: #f4faff; 
    /*linear-gradient(180deg, #eff1f7 36%, #c3c9d8 100%);*/
    --stickyNav-bg: #ffffff; 
    --shareMapetc-btn:#0066d9;
    --otherIcons: #024769; 
    --borderForSvg: 1px solid gray;
    --bdy-bright: brightness(0.98) contrast(1.03);
    --box-shadow-card: 0 8px 16px rgba(0, 0, 0, 0.1);   
    --box-shadow-card-highlight: 0 8px 16px rgba(0, 0, 0, 0.2);   
    --carousel-butt-col: rgb(29, 29, 29); 
    --bg-svgShareDeals: #ffffff; 
    --bg-svgLikeBtn: white;
    --col-likeButtStroke: #14181c;
    --col-svgShareDeals: #024769;
    --bord-svgShareDeals: #024769;
    --load-text: black; 
    --viewBtn-bg: rgb(240, 240, 240);
    --grid-list-svg: #024769;
    --svg-borda: 1px solid rgb(179, 177, 177);
    --viewBtn-hover-bg: #e0e0e0;
    --viewBtn-hover-border: #999999;
    --viewBtn-active-bg: #d4e8f7;
    --viewBtn-active-border: #007bf3;
    --viewBtn-inactive-icon: #2d4a6f
}

body {
    background-color: var(--deals-mainBackground);
}

h1, h2, h3, h4, h5, h6, p, span, button,svg {
    filter: var(--bdy-bright); 
}

body h1 {
    font-size: 1rem; 
    font-weight: 600;  
    color: var(--text-whiteBlack); 
    line-height: 1;
}

.deal_pt1 {
    padding-top: 0.85rem;
}

.deal_pt05 {
    padding-top: 0.25rem; 
}

.deal_mt05 {
    margin-top: 0.25rem; 
}

.deal_fw600 {
    font-weight: 400;
}

h2 {
    padding-top: 0rem; 
}

.flex-end {
    justify-content: flex-end; 
}

.deals_mainContainer {
    max-width: 1232px;
    margin: 0 auto;
}

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


.searchContainer {
    background-color: var(--searchBar-bg); 
    height: 2.1rem; 
    display: flex; 
    align-items: center; 
    border-radius: 4px; 
    box-sizing: border-box;
     width: 100%; 
}

.searchContainer input {
    color:  black; 
    font-weight: 400; 
    font-size: 0.95rem; 
    font-family: 'Inter'; 
}

input:-webkit-autofill {
    background-color: var(--searchBar-bg) !important;
    color:  black !important;
    font-family:'Inter'; 
}

input:-webkit-autofill::first-line {
    background-color: var(--searchBar-bg) !important;
    font-family:'Inter'; 
    color:black !important; 
}

input:-internal-autofill-selected {
    background-color: var(--searchBar-bg) !important;
    color:  black !important;
    font-family: 'Inter'; 
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color:  black !important;
    transition: background-color 5000s ease-in-out 0s;
}

#searchDeals input:-webkit-autofill {
    color: black;
}

.sBarBg {
    font-family: 'Poppins'; 
    border: none; 
    outline: none; 
    width: 100%; 
    padding: 0.25rem 0.20rem 0.285rem 0.20rem; 
    border-radius: 20px; 
    font-size: 1rem; 
    background-color: var(--searchBar-bg);
    letter-spacing: 0.1px;  
}

.sBarBg::placeholder {
    color: #2d4a6f; 
    font-family: 'Inter'; 
    font-weight: 500; 
    font-size: 0.9rem; 
    letter-spacing: 0.1px; 
}

.popularCategories {
    font-weight: 700; 
    font-size: 0.875rem;
    margin-left: 0.35rem; 
    color: var(--dark-text); 
    font-family: 'Inter';
    margin-bottom: -0.4rem;
}

.headerSearchMagnifyButton {
    background: transparent;
    border: none;
    padding: 0.45rem 0.4rem 0.375rem 0.45rem;
    border-radius: 100%;
}

.searchBarCloseButt {
    border-radius: 50%; 
    width: 2.45rem; 
    height: 2.0rem; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    margin-left: 0.25rem; 
    margin-right: 0.2rem; 
}

.close-button {
    background: transparent;
    border: none;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    padding: 0;
    color: var(--x-color);
    line-height: 1;
    margin-left: 0.45rem;
    margin-right: 0.8rem;
}

.scrollLeft2 {
    position: absolute;
    top: 18%;
    left: -2px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 400;
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0.8; 
    padding: 0.15rem; 
    transition: opacity 0.33s ease-in-out; 
}

.scrollLeft2:hover {
    opacity: 1; 
}

.scrollRight2 {
    position: absolute;
    top: 18%;
    right: -2px;
    background: none;
    border: none;
    color: var(--text-whiteBlack);
    cursor: pointer;
    background-color: var(--body-bg);
    z-index: 400;
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0.8; 
    padding:0.15rem; 
    transition: opacity 0.33s ease-in-out; 
}

.scrollRight2:hover {
    opacity: 1; 
}

.carouselWrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

.carousel {
    display: flex;             
    flex-wrap: nowrap;          
    height: 3rem;          
    overflow-x: auto;           
    -webkit-overflow-scrolling: touch;  
    scroll-behavior: smooth;    
    cursor: grab; 
    display: flex; 
    align-items:center;
}

.carousel button {
    position: relative;
    font-family: 'Poppins'; 
    flex-shrink: 0;             
    margin-right: 1.2rem;        
    white-space: nowrap;
    border: none; 
    outline: none; 
    background: rgba(0,0,0,0.0); 
    color:var(--headerCol); 
    border-radius: 20px; 
    font-weight: 500;
    font-size: 1rem;
    padding-top: 0.325rem;
    padding-bottom: 0.325rem;
    cursor: pointer; 
    user-select: none;         
    transition: font-size 0.3s ease, text-decoration-color 0.3s ease, color 0.3s ease; /* Transition font-size along with color and underline */
}

.carousel button.active {
    color: var(--headerCol); 
    text-decoration: underline; 
    text-decoration-color: var(--header-color); 
    font-size: 1rem; 
    font-weight: 600; 
}

.carousel::-webkit-scrollbar {
    display: none;             
}

.carousel button:last-child {
    margin-right: 35px; 
}

.items-align {
    align-items: center; 
}

.p1r5r1r5r {
    padding: 1.5rem 1.5rem 1.25rem 1.5rem;
    justify-content: center; 
  
}

@media screen and (max-width: 768px) {
    .p1r5r1r5r {
        padding: 1rem 1.25rem 0rem 1.25rem; 
    }
}
 
.sortFormContainer {
    display:flex; 
}
 
 #sortForm {
    display: flex; 
    flex-direction: column; 
    border:none; 
    outline:none; 
    margin-left: 1.05rem; 
}
 
#sortForm label {
    padding-bottom: 0.1rem; 
    color: var(--light-grey-text); 
    border-radius: 5px; 
    font-size: 1rem; 
}
 
#sortOptions {
    border: none; 
    outline:none; 
    width: fit-content; 
    padding-top: 0.2rem; 
    padding-bottom: 0.2rem; 
    margin-top: 0.125rem; 
    margin-bottom: 1rem; 
    background-color: var(--body-bg); 
    color: var(--text-whiteBlack); 
    border-radius: 5px; 
    font-size: 0.95rem;
}

#sortOptions option {
    padding: .25rem; 
}

.deal_card_container {
    position: relative;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: none;
    transition: transform 0.22s ease-in-out;
    will-change: transform;
    box-shadow:var(--box-shadow-card);
    
}

.deal_card_container:hover,
.deal_card_container:has(.featuredSeeDetailsButt2:hover) {
    transform: translateY(-2px); /* Lift the card slightly */
    box-shadow:var(--box-shadow-card-highlight); /* Stronger shadow for depth */
}
.deal_card_leftImage {
    image-rendering: -webkit-optimize-contrast; /* For WebKit browsers */
    image-rendering: crisp-edges; /* For others */
}


.deal_card_container::after {
    content: ''; 
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--overlay-color); 
    pointer-events: none; 
    z-index: -1; 
    border-radius: 10px;
}

.coupon_mileAway {
    font-size: 0.875rem; 
    font-weight: 400; 
    color:var(--grey-text);
    line-height: 1;
    padding-top: 0.25rem; 
    padding-left: 0.5rem; 
}

.main_coupon_description {
    position: relative; 
    flex-grow: 1; 
    padding-left: 0.5rem; 
    padding-right: 0.5rem;
    padding-top: 0.1rem; 
    display: flex;
    flex-direction: column; 
    justify-content: space-between; 
}

.listViewDealsLarge .main_coupon_description {
    padding-top: 0rem;
}

.coupon_address {
    line-height: 1.2;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--dark-text);
    opacity: 0.8;
    margin-top: 0.05rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Inter';
}

.deals_topCats {
    display: flex; 
    justify-content: space-around; 
}

.deals_topCats a {
    font-weight: 400; 
    font-size: 0.875rem; 
    color: var(--light-grey-text); 
}

.coupon_dealType {
    width: fit-content; 
    background-color: transparent; 
    color:var(--grey-text);
    font-weight: 400; 
    line-height: 0; 
    font-size: 0.75rem; 
    padding: 0.6rem 0.4rem 0rem 0.55rem;
    margin-bottom: 1.25rem; 
    border-bottom-left-radius: 10px;
    font-family: 'Inter'; 
}

.coupon_dealType2 {
    width: fit-content; 
    color:var(--light-grey-text);
    font-weight: 400; 
    line-height: 0; 
    font-size: 0.875rem; 
    padding: 1rem 0.4rem 0rem 0rem;
    margin-bottom: 0.5rem; 
    border-bottom-left-radius: 10px;
    position: absolute;
    bottom: 0;  
    font-family: 'Inter'; 
}

.playingWithMobile img {
    display: flex; 
    opacity: 1; 
    cursor:pointer; 
    transition: opacity 0.33s ease-in-out; 
}

.playingWithMobile img:hover {
    opacity: 0.6;
}

.deal_card_mediaLayout {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.deal_category_label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--minHeaderCol);
    opacity: 0.75;
    text-transform: capitalize;
    letter-spacing: 0.3px;
    padding-left: 0.5rem;
    padding-top: 0.5rem;
    font-family: 'Inter';
}

.coupon_businessName {
    font-size: 1.15rem;
    color: var(--headerCol);
    padding-left: 0.5rem;
    padding-top: 0.15rem;
    font-weight: 700;
    font-family: 'Poppins';
    letter-spacing: 0.1px;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-wrap: balance;
}

.coupon_detail_description {
    font-size: 1rem;
    font-weight: 500;
    color: var(--textCol);
    line-height: 1.4;
    transition: text-decoration 0.32s ease-in-out;
    cursor: pointer;
    font-family: 'Inter';
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

.space-between {
    justify-content: space-around; 
}

.header_content {
    padding-top: 0rem; 
}

hr {
    height: 0.175rem;
    border: none;  
    background-color: var(--text-whiteBlack);   
}

.buttContainer {
    background-color: var(--bg-sectionDealsPage); 
    padding-bottom: 1rem; 
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-top: 2rem; 
}

.buttContainer button:nth-child(2),
.buttContainer button:nth-child(3) {
   margin-left:1rem; 
}
 
.viewDealButton2  {
    cursor: pointer;
    border: none; 
    background: var(--bg-slateButton); 
    color: var(--text-justWhite); 
    min-width: 8rem;  
    font-weight: 600; 
    font-size: 1.1rem;
    padding-top: 0.65rem; 
    padding-bottom: 0.65rem; 
    opacity: 1; 
    transition: opacity .33s ease-in-out; 
    border-radius: 20px; 
}
 
.viewDealButton:hover {
    opacity: 0.6; 
}

.coupon_hours {
    font-size: 1rem; 
}

.plIcon {
    padding-left: 0.5rem; 
}

.f1rem {
    font-size: 1rem; 
}

.dealsShareContainer {
    outline: none;
    border: none;
    background-color: transparent;
}   

.dealListHeart {
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
    padding: 0.4rem 0.4rem 0rem 0.4rem;
}

.hotDealsMapGridButt {
    border: none;
    outline: none;
    opacity: 0.8;
    transition: opacity 0.22s ease-in-out;
    cursor: pointer;
    background: transparent;
    padding: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--textCol);
}

.hotDealsMapGridButt svg {
    width: 88%;
    height: 88%;
}

.hotDealsMapGridButt:hover {
    opacity: 1;
}

.deal_card_leftImage {
    width: 100%;
    padding-top: 58%; /* 16:9 aspect ratio (9/16 = 0.5625) */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px 10px 0px 0px;
    position: relative; 
     overflow: hidden; /* Clip any overflowing background */
}

.dealListHeart svg {
    width: 24px; 
    height: 22px; 
    color: #1881d9; 
}

.likeBtn {
    opacity: 1;
    background:var(--bg-svgLikeBtn);
    height: 2rem;
    width: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius:50%;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.22s ease-in-out;
    border: 1.5px solid var(--bord-svgShareDeals);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    --heart-fill: none;
    --heart-stroke: #000000;
}

.likeBtn.liked {
    --heart-fill: #cc0000;
    --heart-stroke: #cc0000;
}

.likeBtn svg {
    width: 58%;
    height: 58%;
}

.likeBtn svg path {
    transition: all 0.2s ease-in-out;
}

.likeBtn:hover {
    opacity: 0.8; 
}

.deal_errorMessage {
    color: var(--grey-text); 
    font-size: 1rem; 
    font-weight: 600; 
}

.padSignInbottom {
    padding-bottom: 0.5rem; 
}

.padSignInTop {
    padding-top: 0.5rem; 
}

.deals_sortingBarMain {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 3.75rem; 
}

.deals_sortingBarSecond {
    margin-top: 0.3rem;
    padding: 0.5rem 0.5rem 3rem 0.5rem;
    background-color: var(--dealCard-bg); 
    border-radius: 10px;  
    z-index: 1000;  
    font-size: 0.875rem; 
}

.sorting-option2 {
    display: flex; 
    flex-direction: column; 
    padding-bottom: 1rem; 
}

.sorting-option {
    display: flex; 
    flex-direction: column; 
    padding-bottom: 1rem; 
}

.deals_sortingBarSecond p {
    color: var(--dark-text); 
    font-size: 0.875rem; 
}

.refineDealsP {
    font-size: 1rem; 
}

.deals_sortingBarSecond label {
    color: var(--refine-text);  
    display: flex; 
    align-items: center;   
    padding-top: 0.25rem;  
    font-size: 0.75rem; 
    transition: color 0.1s ease-in-out; 
}

.deals_sortingBarSecond label:hover {
    color: var(--dark-text);  
    display: flex; 
    align-items: center;   
}

input[type="radio"] {
    appearance: none; 
    width: 0.75rem; 
    height: 0.75rem;
    margin-right: 0.5rem;
    margin-bottom:0.2rem;
    border: 2px solid #86868b; 
    border-radius: 8px; 
    background-color: transparent; 
    position: relative;
    cursor: pointer;
    box-sizing: border-box;
}

input[type="radio"]:checked {
    background-color: var(--light-grey-text);
    border-color: var(--light-grey-text); 
}

#businessTypeSearch {
    background-color: var(--searchBar-bg);
    color: var(--text-whiteBlack);
    border: none;
    outline: none;
    padding: 0.20rem 0.5rem 0.2rem 0.5rem; 
    border-radius: 16px;
    font-size: 0.9rem;
    border: 2px solid rgba(112, 116, 125, 0.5);
}

.deal_notFoundContainer {
    z-index: 1899;
    min-height: 25rem; 
    box-sizing: border-box;
    display:flex; 
    justify-content:center;
}

.deal_noDealFound {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.25rem;
    color: var(--minHeaderCol);
    opacity: 0.75;
    margin: 0.25rem 0 0.75rem 0;
}

.deals_loading {
    color: var(--dark-text); 
    font-size: 1.25rem;
    font-weight: 800; 
    animation: pulse 1.5s infinite ease-in-out;
}

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

.spinner {
    border: 6px solid var(--text-whiteBlack);  
    border-top: 6px solid #1a8cd8;   
    border-radius: 50%;                           
    width: 30px;                                 
    height: 30px;                               
    animation: spin 1s linear infinite;            
}

/* Spinner spinning animation */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); 
    display: none; 
    z-index: 1000; 
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    max-width: 400px;
    width: 100%;
}

.shareBtn {
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.22s ease-in-out;
    padding: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    border: none;
    color: var(--textCol);
}

.shareBtn svg {
    width: 88%;
    height: 88%;
}

.shareBtn:hover {
    opacity: 1;
}

.deals_description_text {
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.4;
    min-height: calc(2 * 1.4em);
    -webkit-line-clamp: 3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
    margin-top: 0.75rem;
}

.deals_like_card {
    position: absolute; 
    top:0.15rem;
    right:0.25rem;
    background:transparent; 
}

.deals_backToList {
    color: var(--grey-text); 
}

.deals_share_svg {
    width: 1.75rem; 
}

#locationButton {
    font-family: 'Poppins'; 
    cursor: pointer;
    outline: none;
    position: relative;
    background: transparent;
    color: var(--minHeaderCol);
    font-size: 1rem;
    border: none;
    border-radius: 8px;
    opacity: 1;
    transition: opacity 0.26s ease-in-out;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 115px; 
    max-width: 165px; 
    display: inline-block;
    line-height: 1.1; 
    font-weight: 800; 
}

#changeLocationModal {
    display: none;
  }

#changeLocationModal.open {
   display: block;  
}
  
#arrowAfterLocate {
    content: '';
    margin-right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--text-whiteBlack);
    transition: transform 0.3s ease;
}
  
#arrowAfterLocate.rotated {
    transform: translateY(-50%) rotate(180deg);
}
  
#locationButton:hover {
    opacity: 0.6; 
}

.listViewGrid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
}

.listViewDealsLarge {
    border-bottom: var(--border-ListView);
    padding: 1rem 0;
}

.listViewImage .deal_card_leftImage {
    border-radius: 10px;
    padding-top: 75%;
    
}

.listContentArea {
    display: flex;
    flex-direction: column;
    padding: 0.25rem 0;
}

.view-toggle-buttons {
    margin-left: 2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.viewToggleBtn {
    margin-left: 1.25rem; 
    margin-top: 1rem;
    background:var(--deals-mainBackground); 
    color: var(--clickableText-color); 
    border: none; 
    outline:none;
    font-size: 0.925rem; 
    opacity: 1; 
    transition: opacity 0.3s ease-in-out; 
    font-family:'Poppins'; 
    border-radius: 1rem; 
    padding: 0.6rem 0.75rem; 
    line-height: 1; 
    position: relative; 
    cursor: pointer; 
    font-weight: 500; 
}

.viewToggleBtn:hover {
    opacity: 0.7;
}

#dealsLocationHeader {
    color: var(--headerCol); 
    font-weight: 700;
    font-size: 1.7rem; 
}

.view-btn {
    padding: 5px;
    border-radius: 6px;
    background-color: var(--bg-changeUseLocButtModal);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    box-sizing: border-box;
    border: var(--svg-borda);
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    outline: none;
}

.view-btn:hover {
    background-color: var(--viewBtn-hover-bg);
    border-color: var(--viewBtn-hover-border);
}

.view-btn.active {
    background-color: var(--viewBtn-active-bg);
    border-color: var(--viewBtn-active-border);
}

.view-btn.grid-btn.active svg path {
    fill: var(--grid-list-svg) !important;
}

.view-btn.list-btn.active svg path {
    stroke: var(--grid-list-svg) !important;
}

.view-btn.grid-btn:not(.active) svg path {
    fill: var(--viewBtn-inactive-icon) !important;
}

.view-btn.list-btn:not(.active) svg path {
    stroke: var(--viewBtn-inactive-icon) !important;
}

.postDealFromMessage {
    border: none; 
    outline: none; 
    font-size: 1rem;
    font-weight: 600;
    width: 11rem;
    padding-top: 0.725rem;
    padding-bottom: 0.65rem;
    background:var(--all-buttons);
    color: var(--navbar-txt);
    border-radius: 1.2rem;
    opacity: 1;
    transition: opacity 0.28s ease-in-out;
    cursor: pointer;
    line-height: 1;
    font-family: 'Inter';
    display: block; 
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.5rem; 
}

.list-deals-container {
    margin-top: 1.15rem;
    padding-bottom: 4rem;
}

.hotDealsInCity {
    color: var(--headerCol);
    font-weight: 800;
    font-size: 1.75rem;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -0.5px;
    margin-left: 2rem;
}

.suggestions-container {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--body-bg2);
  border: 1px solid var(--border-color, #ccc);
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: none;
}

.suggestions-container.visible {
  display: block;
}

.suggestion-item {
  padding: 8px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: var(--dark-text);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.suggestion-item:hover {
  background-color: var(--bg-hover, #f0f0f0);
}

.gridDealButton {
    background: transparent;
    border: none; 
    outline: none;
    padding: 0rem;
}

.gridDealButton:hover, .listSmallDealButton:hover {
    opacity: 0.7; 
}

.listLargeDealButton {
    font-size: 0.85rem;
    width: 100%;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    color: var(--textCol);
    background: var(--bg-seeDeetsButt);
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 6px;
    padding: 0.45rem 0rem;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.listLargeDealButton::after {
    content: '›';
    margin-left: 0.4rem;
    display: inline-block;
    transition: transform 0.3s ease;
    font-size: 1em;
    vertical-align: baseline;
    line-height: 1;
}

.listLargeDealButton:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
}

.listLargeDealButton:active {
    transform: scale(0.98);
    filter: brightness(0.95);
}

/* .listLargeDealButton:focus {
    outline: 2px solid rgba(0, 123, 243, 0.6);
    outline-offset: px;
} */

/* List view footer layout */
.listFooter {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: auto;
    padding-top: 0.75rem;
    gap: 0.75rem;
}

.listActionButtons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.listLargeDealButton {
    width: auto;
    padding: 0.45rem 1rem;
}

/* Image container for list view - relative for heart overlay */
.listViewImage {
    position: relative;
    display: flex; 
    align-items:center;
}

.listViewImage .deals_like_card {
    position: absolute;
    top: 0.1rem;
    right: 0.1rem;
}

.listSmallDealButton {
    padding: 0.15rem;
    margin-right: 0.6rem;
}

#confirmLocationBtn {
    border: 1px solid rgba(0, 0, 0, 0.18);
    outline: none;
    background-color: var(--bg-changeUseLocButtModal);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--textCol);
    border-radius: 6px;
    width: 70px;
    padding: 0.415rem 0.5rem 0.475rem 0.5rem;
    font-family: 'Inter';
    transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out;
    cursor: pointer;
}

#confirmLocationBtn:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.25);
}

.location-section button.location-btn {
    max-width: 300px;
    padding: 0.425rem 0.5rem 0.475rem 0.5rem;
}

#closeIntroLocationSearch {
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

#closeIntroLocationSearch:hover {
    opacity: 1;
    transform: scale(1.1);
}

.deals-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    align-items: stretch;
    padding-bottom: 4rem;
    margin-top: 2rem;
}

@media screen and (min-width: 591px) and (max-width: 769px) {
    .viewToggleBtn {
        margin-left: 0.7rem; 
    }
}

@media screen and (max-width: 591px) {
    .listViewDealsSmall .main_coupon_description {
        padding-top: 1rem;
    }
    
    .listViewDealsSmall .coupon_detail_description {
        padding-top: 0.75rem;
    }

    .list_coupon_businessName {
        padding-top: 0.25rem;
    }

    .main_coupon_description {
        padding-top: 0rem;
        padding-bottom: 0.5rem;
    }

    .coupon_detail_description {
        line-height: 1.35;
        min-height: 2.2rem;
        font-size: 0.95rem;
    }

    .coupon_address {
        font-size: 0.75rem;
    }

    .deals_description_text {
        min-height: 2.5rem; 
    }

    .likeBtn {
        width: 1.8rem;
        height: 1.8rem;
    }
    
    .deals_share_svg {
        width: 1.65rem; 
    }

    .coupon_dealType {
        padding-top: 0.75rem;
    }

    .list-deals-container {
        display: grid; 
        padding: 0rem 0.25rem 0rem 0.75rem; 
        gap: 0rem; 
        padding-bottom: 8rem; 
    }

    .list-deals-container article .coupon_detail_description {
        padding-left: 0.5rem;
    }

    .viewToggleBtn {
        margin-top: -0.6rem;
        margin-left: 0.6rem;
    }

    #confirmLocationBtn {
        padding: 0.4rem 0.5rem;
    }

    .location-section button.location-btn {
        padding: 0.4rem 0.5rem;
    }
}

@media screen and (min-width:592px) {
    .listViewDealsSmall {
        display: none; 
    }
    
    .listViewDealsLarge {
        display: block; 
    }

    .list-deals-container {
        padding-left: 2rem; 
        padding-right: 2rem; 
    }

    .viewToggleBtn {
        margin-top: 0rem;
    }

    .deals-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media screen and (max-width: 625px) {
    .sortFormContainer {
        justify-content: center; 
    }

    #sortForm {
        margin-left: 0rem;
    }

    .deals_sortingBarMain {
        display: none; 
    }
}
 
@media screen and (max-width:750px) {
    .buttContainer {
        flex-direction: column; 
        align-items: center; 
    }

    .buttContainer button:nth-child(2),
    .buttContainer button:nth-child(3) {
        margin-left:0rem; 
        margin-top: 1.25rem; 
    }

    .coupon_meat_content {
        padding: 0rem 1rem 0rem 1rem; 
    }

    .viewDealButton2 {
        min-width: 10rem; 
        padding-top:0.5rem; 
        padding-bottom: 0.5rem; 
    }

    .coupon_meat_content {
        padding-top: 1rem; 
    }

    .distanceHolder {
        padding-top: 2rem; 
    }
}

@media screen and (max-width: 560px) {
    .deal_card_leftImage {
        padding-top: 55%;
    }

    .listViewGrid {
        grid-template-columns: 110px 1fr;
        gap: 0.25rem;
    }

    .listViewImage .deal_card_leftImage {
        padding-top: 100%;
    }

    .listViewDealsLarge {
        padding: 0.75rem 0;
    }

    .listTitleP {
        font-size: 1rem;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .listViewBizName {
        font-size: 0.9rem;
        margin-top: 0.25rem;
    }

    .listFooter {
        gap: 0.5rem;
        margin-top: 0rem;
        padding-top: 0.55rem;
    }

    .listLargeDealButton {
        padding: 0.4rem 0.5rem;
        font-size: 0.8rem;
    }
}

@media screen and (min-width: 630px) and (max-width: 768px) {
    .deals-container {
        margin: 0rem 1.5rem 4rem 1.5rem;
        gap: 1.5rem;
    }
}

@media screen and (max-width: 768px) {
    .searchBarCloseButt {
        width: 2.4rem; 
        height: 1.8rem; 
        margin-right: 0.22rem; 
    }

    .deals_loading {
        font-size: 0.85rem; 
    }

    .carousel button {
        font-size: 0.875rem;
        padding-top: 0.35rem;
        padding-bottom: 0.32rem;
        padding-right: 0.65rem;
        padding-left: 0.65rem;
        /* border: var(--bord-searchBar);  */
        margin-right:0rem;
    }

    .carousel button.active {
        font-size: 0.95rem;
        padding-top: 0.325rem;
        padding-bottom: 0.325rem;
    }

    #locationButton {
        font-size: 1rem; 
        min-width: 0px; 
        padding-right: 0.45rem;
    }

    #arrowAfterLocate {
        margin-right: 0.35rem;
    }

    .popularCategories {
        margin-top: 4.2rem; 
        margin-left: 1rem; 
    }

    .hotDealsInCity {
        font-size: 1.5rem; 
    }

    .listContentArea {
        margin-left: 1rem; 
    }
}

@media screen and (max-width: 576px) {
    .coupon_businessName {
        font-size: 1.15rem;
    }

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

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

    .searchContainer {
        height: 2.1rem;
        border: none; 
        border-radius: 4px;  
    }

    .carousel {
        height: 2.75rem;
    }

    .location-section button.location-btn {
        margin-top: 0.15rem;
    }
}

@media screen and (min-width: 769px) {
    .p1r5r1r5r {
        display: none; 
    }

    .carouselWrapper {
        padding-top: 0rem; 
        margin-top: 0.6rem;
    }

    .carousel button {
        line-height: 1; 
        padding-top: 0.5rem; 
        padding-bottom: 0.5rem;
        padding-left: 0.65rem; 
    }

    .carousel button::after {
        content: ''; 
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.0); 
        pointer-events: none; 
        z-index: -1; 
        border-radius: 20px;
    }

    .location-section button.location-btn {
        margin-right: 1rem;
    }

    .listContentArea {
        margin-left: 1rem; 
    }
}

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

    .deals_secondContainer {
        grid-template-columns: 1fr; 
        padding:0; 
    }

    .popularCategories {
        display: none; 
    }

    .carouselWrapper {
        margin: 3rem auto 0rem auto; 
    }
}


@media screen and (min-width: 769px) and (max-width: 1549px) {
    .popularCategories {
        margin-left: 2.1rem;
    }
}

@media screen and (min-width: 300px) and (max-width: 350px) {
    .carouselWrapper {
        max-width: 20.625rem;
    }
}

@media screen and (min-width: 351px) and (max-width: 399px) {
    .carouselWrapper {
        max-width: 23.5rem;
    }
}

@media screen and (min-width: 400px) and (max-width: 449px) {
    .carouselWrapper {
        max-width: 24.625rem;
    }
}

@media screen and (min-width: 450px) and (max-width: 499px) {
    .carouselWrapper {
        max-width: 26.625rem;
    }
}

@media screen and (min-width: 500px) and (max-width: 549px) {
    .carouselWrapper {
        max-width: 29.5rem;
    }
}

@media screen and (min-width: 550px) and (max-width: 599px) {
    .carouselWrapper {
        max-width: 33rem;
    }
}

@media screen and (min-width: 600px) and (max-width: 649px) {
    .carouselWrapper {
        max-width: 36.6rem;
    }
}

@media screen and (min-width: 650px) and (max-width: 699px) {
    .carouselWrapper {
        max-width: 36.625rem;
    }
}

@media screen and (min-width: 700px) and (max-width: 749px) {
    .carouselWrapper {
        max-width: 42.125rem;
    }
}

@media screen and (min-width: 750px) and (max-width: 799px) {
    .carouselWrapper {
        max-width: 45rem;
    }
}
@media screen and (min-width: 800px) and (max-width: 849px) {
    .carouselWrapper {
        max-width: 46rem;
    }
}
@media screen and (min-width: 850px) and (max-width: 899px) {
    .carouselWrapper {
        max-width: 51rem;
    }
}
@media screen and (min-width: 900px) and (max-width: 949px) {
    .carouselWrapper {
        max-width: 54rem;
    }
}
@media screen and (min-width: 950px) and (max-width: 999px) {
    .carouselWrapper {
        max-width: 55rem;
    }
}
@media screen and (min-width: 1000px) and (max-width: 1099px) {
    .carouselWrapper {
        max-width: 63.5rem;
    }
}

@media screen and (min-width: 1100px) and (max-width: 1199px) {
    .carouselWrapper {
        max-width: 66rem;
    }
}

@media screen and (min-width: 1199px) and (max-width: 1299px) {
    .carouselWrapper {
        max-width: 69rem;
    }
}


@media screen and (min-width: 1200px) {
    .carouselWrapper {
        max-width: 73.5rem;
    }
}
@media screen and (min-width: 1400px) {
    .carouselWrapper {
        max-width: 84.5rem;
    }
}

@media screen and (min-width: 1550px) {
    .carouselWrapper {
        max-width: 94.5rem;
    }
}

@media screen and (min-width: 1200px) {
    .deals_share_svg {
        width: 1.75rem; 
    }
}

@media screen and (min-width: 768px) {
    .deals_mainContainer {
        max-width: 1500px;
    }
}

@media screen and (min-width: 1161px) {
    #viewToggleBtn {
        margin-bottom: 0rem; 
    }
}

@media screen and (max-width: 591px) {
     .list-deals-container .deal_card_footer {
        display: flex;
        align-items: center;
        /* margin-top: 0.45rem; */
        margin-left: 0.5rem;
        margin-bottom: 0.65rem;
        justify-content: flex-end;
    }
}

@media screen and (max-width: 591px) {
      .deals-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin: 2rem 1.5rem 4rem 1.5rem;
    }
}

@media screen and (min-width: 591.1px ) {
    .deals-container {
        grid-template-columns: 6fr 6fr;
        gap: 1.5rem 1.5rem;
        margin-top: 1.5rem;
    }
}

@media screen and (min-width: 950px) {
    .deals-container {
        grid-template-columns: 4fr 4fr 4fr;
        gap: 2.5rem 2rem;
    }
}


@media screen and (min-width: 1250px) {
     .deals-container {
        grid-template-columns: 3fr 3fr 3fr 3fr;
        gap: 2.75rem 2.5rem;
    }
}

@media screen and (min-width: 1450px) {
    .deals-container {
        gap: 3rem 3rem;
    }
}

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

@media screen and (min-width: 576.1px) {
    .searchRangeText {
        display: none; 
    }

    .p1r5r1r5r2 {
        max-width: 30rem;
    }
}

@media screen and (min-width: 768px) {
    .p1r5r1r5r2 {
        margin-left: 1rem;
        margin-right: 1rem; 
        width: 100%;
    }

    .p1r5r1r5r2 {
        max-width: 29rem;
    }
}

@media screen and (min-width: 1300px) {
    .p1r5r1r5r2 {
        max-width: 30rem;
    }
}

@media screen and (min-width: 1276px) {
    .searchRangeText {
        display: block; 
    }
}


@media (max-width: 768px) {
    .hotDealsInCity {
        line-height: 1.05;
    }

    .view-toggle-buttons {
        margin-left: 1.2rem; 
        margin-top: 1rem;
    }
}

.deals-container {
    padding-bottom: 1rem; 
}


.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    /* Space between buttons */
    margin-top: 1rem;
    padding-bottom: 6rem;
}

.pagination button {
    font-family: 'Inter';
    background-color: rgb(0, 97, 189);
    box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 8px;
    outline: none;
    border-radius: 0.5rem;
    border: none;
    outline: none;
    color: white;
    padding: 0.55rem 1rem 0.625rem 1rem;
    font-weight: 700;
    margin-top: 0.075rem;
    margin-left: 1rem;
    opacity: 1;
    transition: opacity 0.22s ease;
    font-size: 0.95rem;
}

.pagination button:hover {
    opacity: 0.8;
}

.pagination button:active {
    transform: translateY(0);
}

.pagination button:disabled {
    background: #cccccc;
    cursor: not-allowed;
}

#backToTopButt {
    font-size: 0.95rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    color: var(--minHeaderCol);
    background: transparent;
    border: 2px solid var(--dark-text, #ccc);
    padding: 0.5rem 1.5rem;
    cursor: pointer;
    box-shadow: none;
    transition: all 0.25s ease;
    letter-spacing: 0.3px;
    border-radius: 6px;
    opacity: 0.7;
    min-width: 16.25rem;
    margin-top: 0.75rem;
}

#backToTopButt:active {
    transform: scale(0.98);
}

#backToTopButt:focus {
    outline: 2px solid var(--dark-text, #666);
    outline-offset: 2px;
}

#backToTopButt::after {
    content: '↑';
    margin-left: 0.4rem;
    display: inline-block;
    transition: transform 0.2s ease;
    font-size: 0.9em;
}

#backToTopButt:hover::after {
    transform: translateY(-2px);
}

#backToTopButt:hover {
    opacity: 1;
    background: var(--dark-text, #333);
    color: var(--body-bg2, #fff);
    border-color: var(--dark-text, #333);
}

.post-button-container {
    display: flex;
    justify-content: center;
}

.noDealsButtonGroup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}


.featuredSliderWrapper {
    position: relative;
    overflow: hidden;
}

.purchase-featured-btn {
    display: block;
    background: white;
    color: #1a8cd8;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    font-family: system-ui, sans-serif;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s ease, transform 0.1s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    max-width: 220px;
}

.purchase-featured-btn:hover {
    background: rgb(239, 239, 240);
    transform: translateY(-2px);
}

.purchase-featured-btn:active {
    transform: translateY(0);
}

@media screen and (max-width: 768px) {
    .purchase-featured-btn {
        padding: 10px 20px;
        font-size: 0.9rem;
        max-width: 200px;
    }
}

.no-deals-post-btn {
    min-width: 16.25rem;
    font-family: 'Inter', sans-serif;
    background-color: var(--addDealButtonColor, #ff6200);
    border-radius: 6px;
    border: none;
    outline: none;
    color: var(--headerCol);
    padding: 0.6rem 1.75rem;
    font-weight: 700;
    transition: background-color 0.25s ease, transform 0.15s ease, box-shadow 0.2s ease, border 0.2s ease;
    cursor: pointer;
    line-height: 1.2;
    font-size: 1rem;
    position: relative;
    border: 2px solid var(--addDealButtonBorder, transparent);
    background-clip: padding-box;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* .no-deals-post-btn {
    box-shadow: 0 0 12px var(--addDealHoverBoxShadow, rgba(255, 98, 0, 0.7)); 
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 
} */

.no-deals-post-btn:hover {
    background-color: var(--addDealHoverColor, #e55800);
    transform: scale(1.03);
    border: 2px solid var(--addDealHoverBorderColor, rgba(255, 98, 0, 0.9));
    box-shadow: 0 4px 12px var(--addDealHoverBoxShadow, rgba(255, 98, 0, 0.4));
}

.no-deals-post-btn::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1)); 
    border-radius: 4px; 
    animation: pulse5 1.6s infinite ease-in-out; 
    z-index: -1;
    top: 0;
    left: 0;
}

.no-deals-post-btn:active {
    transform: scale(0.98);
    box-shadow: 0 0 8px var(--addDealHoverBoxShadow, rgba(255, 98, 0, 0.6));
}

.dark-mode .no-deals-post-btn {
    background-color: #0061bd;
    color: #ffffff;
}

.dark-mode .no-deals-post-btn:hover {
    background-color: #004a91;
}

@keyframes pulse5 {
    0% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.05); opacity: 0; }
    100% { transform: scale(1); opacity: 0.7; }
}

.noDealsSubContainer {
   
    border-radius: 0.85rem;
    max-width: 500px;
    margin-bottom: 3rem;
    background-color: var(--body-bg2);
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}

.noDealsFoundTitle {
    line-height: 1.2;
    font-family: 'Poppins';
    font-size: 1.75rem;
    font-weight: 800;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: var(--headerCol); 
}

.noDealsTitleSpan {
    font-size: 1.75rem;
    display: inline-flex;
    align-items: center;
}

#dealsLocationHeader {
    font-size: 1.75rem;
}

#categoryDisplayAreaAboveDeals {
    margin-left: 2rem;
    margin-top: -0.25rem;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 1.2rem;
    color: var(--minHeaderCol);
    opacity: 0.8;
}

.listTitleP {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: var(--headerCol);
    max-width: 450px;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.listViewBizName {
    font-size: 1rem;
    font-weight: 500;
    font-family:'Inter';
    color: var(--minHeaderCol);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hotDealsInandLocation {
        display: flex; 
        align-items:center;
}

@media screen and (max-width: 576px) {
    .noDealsFoundTitle {
        font-size: 1.375rem;
    }

    .noDealsTitleSpan {
        font-size: 1.375rem;
    }

    .noDealsSubContainer {
        padding: 1.5rem 1rem;
    }
}

@media screen and (max-width: 768px) {
    #dealsLocationHeader {
        font-size: 1.5rem;
        line-height: 1;
    }

    .noDealsSubContainer {
        padding: 1.75rem 1.25rem;
    }

    .deal_noDealFound {
        font-size: 1.15rem;
    }

    #categoryDisplayAreaAboveDeals {
        margin-top: 0.125rem;
        margin-left: 1.25rem;
    }

    .listViewBizName {
        font-size: 1.1rem; 
        margin-top: 0.75rem;
    }
}

@media screen and (min-width: 768.1px) {
    .deal_notFoundContainer {
        justify-content: center;
    }


    .hotDealsInandLocation {
        display: flex; 
        align-items:center;
        margin-top: 0.15rem;
    }

    .listTitleP {
        font-size: 1.5rem;
    }

    .listViewBizName {
        font-size: 1.25rem; 
    }
}

@media screen and (max-width: 560px) {
    .listContentArea {
        margin-top: -0.2rem; 
    }

     .listTitleP {
        font-size: 1.1rem; 
    }
}

@media screen and (min-width: 561px) {
    .listViewGrid {
        grid-template-columns: 180px 1fr;
    }

    .listTitleP {
        line-height: 1.2;
        font-size: 1.2rem;
    }

    .listViewBizName {
        margin-top: 0.5rem;
    }
}

@media screen and (min-width: 768px) {
    .listViewGrid {
        grid-template-columns: 220px 1fr;
    }

    .listTitleP {
        font-size: 1.3rem;
    }

    .listViewBizName {
        font-size: 1.15rem;
    }
}

@media screen and (min-width: 0px) {
    .deals-container {
        padding-bottom: 7.5rem; 
    }
}

@media screen and (min-width:592px ) {
    .deals-container {
        padding-bottom: 7.5rem; 
    }
}


@media screen and (min-width: 768px) {
    .deals-container {
        padding-bottom: 7rem; 
    }
}

#backToTopBtn3 {
  position: fixed;
  background: var(--bg-seeDeetsButt);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
  color: var(--textCol);
  border: none;
  outline: none;
  font-size: 0.95rem;
  border-radius: 50%;
  width: 2.25rem;
  height: 2.25rem;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

#backToTopBtn3:hover {
  opacity: 0.85;
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

#backToTopBtn3:focus {
  outline: 2px solid white;
  outline-offset: 2px;
}

#backToTopBtn3 svg {
  transition: transform 0.3s ease;
}

#backToTopBtn3:hover svg {
  transform: translateY(-2px);
}

@media screen and (max-width: 768px) {
    #backToTopBtn3 {
        bottom: 4.35rem; 
        right: 0.25rem;
    }
}

@media screen and (min-width: 768px) {
    #backToTopBtn3 {
        bottom: 1rem;
        right: 2%;
    }
}

@media screen and (max-width: 591px) {
    #categoryDisplayAreaAboveDeals {
        font-size: 0.9rem;
    }
}

#deals_container {
  transition: opacity 0.5s ease;
}

@media screen and (min-width: 1176px) {
    .listViewDealsLarge {
        border-bottom: 0px solid black;
    }
}

:root {
    --featured-bg: #007bf3; 
    --featured-bg2: linear-gradient(90deg, #0061bd 0.36%, #0544a1 99.27%); 
    --see-deetsBg:  linear-gradient(90deg, #007bf3 50%, #45b7d1 100%);
    --txt-backWBlack: #e0e0e0; 
}

.dark-mode {
    --featured-bg: #0084fe;  
    --featured-bg2: linear-gradient(90deg, #0061bd 0.36%, #0048b3 99.27%);
    --see-deetsBg: linear-gradient(90deg, #007bf3 50%, #45b7d1 100%);
    --txt-backWBlack: #e0e0e0; 
}

.dealsFeaturedContainer {
    background: var(--featured-bg2);
    height:465px; 
    max-width: 100%; 
    margin: 0 auto; 
    padding: 1.1rem 0rem 0rem 0rem;
    margin: 1rem 1.25rem 2rem 0.75rem; 
    overflow: hidden;
    box-sizing: border-box; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.oLineNoDealsFeat {
    background:linear-gradient(98deg, #ffffff 30.36%, #e9e9e9 99.27%); 
}

.featuredDealsHeader {
    color: #ffffff;
    font-size: 2.6rem;
    font-weight: 800;
    font-family: 'Poppins', sans-serif;
    z-index: 5;
    letter-spacing: -0.5px;
    line-height: 1.1;
    margin-bottom: 0.75rem;
    margin-left: 0;
}


.noFeaturedDealButton {
    background: #ffffff;
    border: 1px solid;
    color:#007dbd;
    transition: opacity 0.3s ease-in-out, transform 0.2s ease-in-out;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 6px;
    outline: none;
    cursor: pointer; 
    padding: 0.3rem 0.45rem;
}

.noFeaturedDealButton:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.regularDealsHeader {
    color: var(--dark-text);
    font-weight: 600; 
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    margin-left: 2rem;
}

.featured_deal_image {
    width: 100%;
    padding-top: 50.25%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px 10px 0px 0px;
    position: relative;
}

.arrow {
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10;
    opacity: 0.9; 
    transition: opacity 0.22s ease-in-out; 
    padding: 0rem 0.25rem; 
}

.arrow:hover {
    opacity: 1; 
}

.left-arrow.disabled,
.right-arrow.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sliderWithArrows {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.5rem;
}

.sliderWithArrows .arrow {
    flex-shrink: 0;
}

.featuredSliderWrapper {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

.featuredSlider {
    display: flex;
    transition: transform 0.5s ease-in-out;
    transform: translateX(0);
    width: 100%; 
    height: 100%; 
}

.slider_businessName {
    font-size: 0.875rem;
    font-weight: 400;
    color: #212121;
    padding-left: 0.5rem;
    padding-top: 0.5rem;
}

.slider_detail_description {
    font-size: 1rem;
    font-weight: 700;
    color: #006add;
    padding-top: 1rem;
    opacity: 1;
    transition: text-decoration 0.32sease-in-out;
}



.featHeaderAndCallToAction {
    display: flex; 
    justify-content: space-between; 
}

.HotDealsNearbySVG {
    width: 150px; 
    height: auto; 
}

.noDealsFeatButton {
    font-family: "Inter"; 
    font-weight: 800; 
    color: #024769;
    background-color: #f9f9f9;
    border: 1px solid #024769;
    border-radius: 0.3rem;
    padding-top: 0.3rem; 
    padding-bottom: 0.3rem;
    opacity: 1; 
    transition: opacity 0.22s ease-in-out;  
    font-size: 1rem;
}

.noDealsFeatButton:hover {
    opacity: 0.7; 
}

.doYouWantToFeatureP {
    font-weight: 500;
    font-size: 0.875rem;
    font-family: 'Inter'; 
    color: #f3f3f3;
}

.doYouWantToFeatureButt {
    position: absolute;
    font-family: 'Inter', sans-serif;
    background: #0061bd;
    outline: none;
    border-radius: 6px;
    border: none;
    color: #ffffff;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 1.05rem;
    padding: 0.6rem 1rem;
    top: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    overflow: hidden;
}

.doYouWantToFeatureButt:hover {
    background: #004a94;
    transform: translateY(-1px);
}

.doYouWantToFeatureButt:active {
    transform: scale(0.98);
}

.doYouWantToFeatureButt::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shine 2s ease-in-out 3;
}

@keyframes shine {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

.doYouWantToFeatureButt::after {
    content: "★";
    margin-left: 0.4rem;
    color: white;
    rotate: 62deg;
}
.featuredSliderWrapper,
.featuredSlider,
.outLine,
.dealsH {
  -webkit-user-select: none;
  user-select: none;
  pointer-events: auto; 
}

.featuredSlider.dragging {
  pointer-events: auto;
}

.dealsH,
.dealsH * {
  pointer-events: auto;
  touch-action: manipulation; 
}


.featuredSliderWrapper {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
 
}

.featuredSlider {
  display: flex;
  transition: transform 0.3s ease-in-out; 
  transform: translateX(0);
  width: 100%;
  height: 100%;
  will-change: transform; 
  backface-visibility: hidden; 
  transform-style: preserve-3d; 
}

.dealsH {
  height: 100%;
  border-radius: 6px;
  position: relative;
  transform: translateZ(0);
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.changeToFlexCard {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.deal_card_content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.featured_deal_image {
  width: 100%;
  padding-top: 50.25%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 10px 10px 0px 0px;
  position: relative;
  image-rendering: optimizeQuality; 
}

.featuredSlider.dragging {
  transition: none; 
  pointer-events: auto;
}

.outLine {
    width: 17rem;
    height: 20rem;
    background-color: #ffffff;
    border-radius: 10px;
    margin: 0.6rem 1rem 0.6rem 1rem;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.outLine:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.featuredImageContainer {
    width: 100%;
    overflow: hidden;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.featuredImageDiv {
    width: 100%;
    padding-top: 56.25%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.featuredMainTitle {
    color: #2d4a6f;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0.5rem 0.5rem 0.25rem 0.5rem;
    overflow-wrap: break-word;
    font-family: 'Inter', sans-serif;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
    letter-spacing: -0.2px;
    text-overflow: ellipsis;
}

.featuredSubTitle {
    color: var(--featuredTextCol);
    font-size: 1rem;
    min-height: 3.2rem;
    font-weight: 500;
    line-height: 1.3;
    padding: 0;
    overflow-wrap: break-word;
    font-family: 'Inter', sans-serif;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    margin: 0.25rem 0.5rem 0 0.5rem;
}

.deal_card_footer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: auto;
}

.featuredSeeDetailsButt, .featuredSeeDetailsButt2 {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 1rem;
    font-weight: 800;
    font-family: 'Inter', sans-serif;
    /* color: #ffffff; */
    color: #1a2634; 
    /* background: linear-gradient(90deg, #007bf3 75%, #45b7d1 100%); */
    /* background: #ffe86c;  */
    background: #ffd54f; 
    border: none;
    border-radius: 0 0 0px 0px;
    padding: 0.65rem 0;
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 0 10px rgba(0, 123, 243, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    overflow: hidden;
}

.featuredSeeDetailsButt:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2), 0 0 15px rgba(0, 123, 243, 0.5);
}

.featuredSeeDetailsButt:active {
    transform: scale(0.98);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 123, 243, 0.2);
    filter: brightness(0.95);
}

.featuredSeeDetailsButt:focus {
    outline: 2px solid rgba(0, 123, 243, 0.6);
    outline-offset: 2px;
}

.featuredSeeDetailsButt::after, .featuredSeeDetailsButt2::after {
    content: '›';
    margin-left: 0.4rem;
    display: inline-block;
    transition: transform 0.3s ease;
    font-size: 1em;
    vertical-align: baseline;
    line-height: 1;
}

.leftRightFeaturedContainer {
    display:flex; 
    position: absolute; 
}

.featuredSeeDetailsButt2 {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    bottom: -34px;
    padding: 0.65rem 0rem;
    background: var(--bg-seeDeetsButt);
    color: var(--textCol);
    /* border: 1px solid rgba(0, 0, 0, 0.18); */
    font-weight: 700;
}

.featuredSeeDetailsButt2:focus {
    outline: none;
}

.leftRightFeaturedContainer {
    display:flex; 
    position: absolute; 
}

.hotDealsInCityContainer {
    display:flex;
    justify-content: space-between;
    margin-top: 1.35rem;
    font-size: 1.75rem;
}

.featuredSeeDetailsButt2 {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    bottom: -34px;
    padding: 0.65rem 0rem;
    box-shadow: none;
}

.deal_card_footer .featuredSeeDetailsButt2 {
    position: static;
    width: auto;
    padding: 0.45rem 0.5rem;
    border-radius: 6px;
    font-size: 0.85rem;
}

.deal_card_footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0.75rem 0.5rem 0.5rem 0.5rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(128, 128, 128, 0.15);
    gap: 0.65rem;
}

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

@media screen and (max-width: 476px) {
    .featuredDealMainTitle {
       -webkit-line-clamp: 2; 
        min-height: 2.1rem; 
    }

    .featuredSubTitle {
        -webkit-line-clamp: 3; 
        overflow: hidden; 
        min-height: 3.35rem;
    }

    .featuredMainTitle {
        margin-top: 0.3rem;
    }

}

@media screen and (max-width: 591px) {
    .featHeaderAndCallToAction {
        display: block;
    }

    .leftRightFeaturedContainer {
        top: 0.82rem;
        right: 1rem;
    }

    .doYouWantToFeatureP {
        margin-left: -0.35rem;
        margin-top: 0rem;
    }
}

@media screen and (min-width: 592px) and (max-width: 768px) {
    .leftRightFeaturedContainer {
        top: 0.875rem;
        left: 11.3rem;
    }
}

@media screen and (max-width: 767.9px) {
    .featuredDealsHeader {
        margin-left: 0.9rem; 
        margin-top: 0.35rem;
    }

    .dealsFeaturedContainer {
        height: 387px;
    }
}

@media screen and (min-width: 768px) {
    .featuredDealsHeader {
        margin-left: 1.45rem;
        margin-top: 0.35rem; 
    }

    .dealsFeaturedContainer {
        height: 430px;
    }
}

@media screen and (min-width: 1476px) {
    .featuredDealsHeader {
        margin-left: 1.85rem;
    }

    .dealsFeaturedContainer {
        height: 462px; 
    }
}

@media screen and (max-width: 1476px) {
    .dealsFeaturedContainer {
        margin: 0.5rem 0rem 0rem 0rem;
        border-radius: 0px;
        padding: 0.65rem 0rem 0rem 0rem;
    }

    .regularDealsHeader {
        margin-left: 0.95rem;
    }

    .outLine {
        margin: 0.6rem 0.75rem 0.6rem 0.75rem;
    }

    .featuredSubTitle {
        font-size: 1rem;
    }

    .featuredMainTitle {
        font-size: 0.9rem;
    }

    .featuredImageDiv {
        padding-top: 62%;
    }

    .featuredDealsHeader {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }
}

@media screen and (max-width: 768px) {
    .starFeatured {
        position: absolute;
        margin-left: 1.3rem;
        margin-top: 1.5rem;
        z-index: 2;
        rotate: 30deg;
    }
}

@media screen and (min-width: 768px) {
    .starFeatured {
        position: absolute;
        margin-left: 2.85rem;
        margin-top: 1.525rem;
        z-index: 2;
        rotate: 30deg;
    }

    .hotDealsInCityContainer {
        margin-top: 1.5rem;
    }

    .locationPopupAreaMainContainer {
        margin: 2.25rem 2rem 0rem 3.5rem;
    }
}

@media screen and (min-width: 768.1px) {
    .leftRightFeaturedContainer {
        bottom: 0.95rem;
        left: 2.6rem;
    }
}

@media screen and (min-width: 1476px) {
    .dealsFeaturedContainer {
        margin: 0.75rem 0rem 0.35rem 0rem;
    }

    .featuredDealsHeader {
        margin-left: 2.5rem;
    }
}

@media screen and (min-width: 1500px) {
    .dealsFeaturedContainer {
        border-radius: 1rem;
    }
}

/*Stuff for no featured deal section */
.outLineNoFeatured {
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.noFeaturedTextPrimary {
    font-size: 2.2rem;
    color: #2d4a6f;
    font-weight: 800;
    line-height: 1.2;
    font-family: 'Inter';
}

.noFeaturedTextSecondary {
    font-size: 1.25rem;
    color: #1e3b60;
    font-weight: 500;
    line-height: 1.3;
    font-family: 'Inter';
    margin-top: 0.5rem;
}

.noFeaturedDealsButton {
    font-size: 1rem;
    font-weight: 800;
    font-family: 'Poppins';
    /* color: #ffffff; */
        color: #1a2634;
    /* background: linear-gradient(90deg, #007bf3 50%, #45b7d1 100%); */
    background: #F5C518;
    border: none;
    border-radius:6px;
    padding: 0.6rem 1rem;
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 0 10px rgba(214, 165, 0, 0.4);
    transition: all 0.3s ease-in-out, transform 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    overflow: hidden;
    will-change: transform;
    backface-visibility: hidden;
}

.noFeaturedDealsButton:active {
    transform: scale(0.98);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 8px rgba(214, 165, 0, 0.3);
    filter: brightness(0.95);
}

.noFeaturedDealsButton:focus {
    outline: 2px solid rgba(214, 165, 0, 0.7);
    outline-offset: 2px;
}

.noFeaturedDealsButton::after {
    content: '›';
    margin-left: 0.4rem;
    display: inline-block;
    transition: transform 0.3s ease;
    font-size: 1em;
    vertical-align: baseline;
    line-height: 1;
}

.noFeaturedDealsButton:hover::after {
    transform: translateX(6px);
}

.noFeaturedDealsButton:hover {
    opacity: 0.8; 
}

@media screen and (max-width: 475.9px) {
    .outline {
        height: 264px;
    }

    .noFeatCont {
        margin-top: -0.5rem;
    }
}

@media screen and (min-width: 476px) {
     .noFeatCont {
        margin-top: 0.25rem;
    }
}

@media screen and (max-width: 576px) {
    .noDealsSVGTextContainer {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        height: 100%;
    }

    .outLineNoFeatured {
        margin: 0.75rem 0rem;
        height: 250px;
        padding-left: 0.75rem; 
        padding-right: 0.75rem;
    }

    .HotDealsNearbySVG {
        width: 111px;
        height: auto;
        margin-top: 0.5rem;
    }

    .noFeaturedTextPrimary {
        font-size: 1.5rem;
        line-height: 1.3;
    }

    .noFeaturedTextSecondary {
        font-size: 0.95rem;
        margin-top: 0.15rem;
    }

    .noFeaturedDealsButton {
        margin-top: 0.75rem;
    }

    #confirmLocationBtn {
        max-width: 75px;
    }
}

@media screen and (min-width: 576.1px) {
    .HotDealsNearbySVG {
        margin-right: 2rem;
        width: 130px;
        height: auto;
        margin-top: -0.5rem;
    }

    .outLineNoFeatured {
        margin: 1rem auto 0rem auto;
        height: 250px;
        padding: 1rem 1.5rem;
    }

    .noDealsSVGTextContainer {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    .noFeaturedTextPrimary {
        font-size: 1.8rem;
        line-height: 1.2;
    }

    .noFeaturedTextSecondary {
        font-size: 1.1rem;
        margin-top: 0.5rem;
    }

    .noFeaturedDealsButton {
        margin-top: 1.4rem;
        font-size: 1.1rem;
    }
}

@media screen and (min-width: 1476px) {
    .HotDealsNearbySVG {
        margin-right: 1.35rem;
        width: 133px;
        height: auto;
        margin-top: -0.5rem;
    }

    .outLineNoFeatured {
        margin: 1rem auto 0rem auto;
        height: 260px;
        padding: 1rem 1.75rem;
    }

    .noFeaturedTextPrimary {
        font-size: 2.2rem;
        line-height: 1.2;
    }

    .noFeaturedTextSecondary {
        font-size: 1.25rem;
        /* margin-top: 0.65rem; */
    }

    .noFeaturedDealsButton {
        margin-top: 1.5rem;
        font-size: 1rem;
    }
}

@media screen and (max-width: 476px) {
    .noFeaturedTextPrimary {
        font-size: 1.4rem;
    }

    .noFeaturedTextSecondary {
        font-size: 0.9rem;
    }

    .noFeaturedDealsButton {
        font-size: 0.9rem;
        padding: 0.7rem 0.9rem;
        margin-top: 0.75rem;
        width: 100%;
    }
}

@media screen and (max-width: 767.9px) {
        .outLine {
        width: 215px;
        height: 280px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1476px) {
    .outLine {
        width: 16rem;
        height: 323px;
    }
}

/* Large screens - fit all 5 featured cards */
@media screen and (min-width: 1477px) {
    .outLine {
        width: 16.05rem;
        height: 20rem;
        margin: 0.6rem 0.9rem;
    }

    .sliderWithArrows .arrow {
        opacity: 0;
        pointer-events: none;
    }
}

@media screen and (max-width: 576px) {
    .featuredDealsHeader {
        margin-bottom: 0.5rem;
    }
}

@media  screen and (max-width: 768px) {
    .hotDealsInCity {
        margin-left: 1.25rem;
    }

    .hotDealsInCityContainer {
        font-size: 1.4rem;
        margin-top: 1.55rem;
    }
}

:root {
    --locationButt-white: white; 
    --locationButt-black: black; 
    --locationMagnify-color: black; 
    --border-inputs: none; 
    --location-modalbg: linear-gradient(to bottom right, #141414 60%, #000000 100%);
    --trans-bgMaps: rgb(20, 24, 28); 
    --bord-location: 1px solid #494949;
}

.dark-mode {
    --locationButt-white: white; 
    --locationButt-black: black;
    --locationMagnify-color: black; 
    --border-inputs: 2px solid #4d4d4d; 
    --location-modalbg: #fefefe; 
    --trans-bgMaps: rgba(255, 255, 255, 1); 
    --bord-location: 1px solid rgba(0, 0, 0, 0.2);
}

.location-button-wrapper {
    display: flex;
    align-items: center;
    position: relative;
}

#changeLocationModal {
    display: none;
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    background: var(--trans-bgMaps);
    padding: 1.25rem 1.35rem 1rem 1.35rem;
    border-radius: 12px;
    width: 290px;
    border: var(--bord-location);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    animation: locationModalFadeIn 0.2s ease-out;
}

@keyframes locationModalFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.location-icon-container {
    width: 40px;
    height: 40px;
    background: var(--bg-changeUseLocButtModal);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    color: #0061bd;
    border: var(--bord-location);
}

.location-modal-title {
    text-align: center;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--headerCol);
    font-family: 'Poppins', sans-serif;
    margin: 0 0 0.25rem 0;
}

.location-modal-subtitle {
    text-align: center;
    font-size: 0.875rem;
    color: var(--textCol);
    opacity: 0.75;
    font-family: 'Inter', sans-serif;
    margin: 0;
    line-height: 1.4;
}

.location-divider {
    margin: 0.5rem 0 1rem 0;
}

.location-attribution {
    display: block;
    text-align: center;
    font-size: 0.65rem;
    color: var(--textCol);
    opacity: 0.5;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    margin-top: 0.25rem;
    transition: opacity 0.2s ease;
}

.location-attribution:hover {
    opacity: 0.8;
}

#closeLocationModal {
    position: absolute;
    color: var(--textCol);
    background: transparent;
    border: none;
    font-size: 1.4rem;
    z-index: 600;
    opacity: 0.6;
    margin: 0;
    line-height: 1;
    padding: 0.5rem;
    cursor: pointer;
    right: 0.25rem;
    top: 0.25rem;
    transition: opacity 0.2s ease;
}

#closeLocationModal:hover {
    opacity: 1;
}

#changeLocationStatement {
    font-family: 'Inter' !important; 
}

#locationCorrectBtn, #useGeolocationBtn {
    border: none;
    font-size: 0.925rem;
    font-weight: 600;
    width: 100%;
    padding-top: 0.725rem;
    padding-bottom: 0.725rem;
    background: #0061bd;
    color: white;
    border-radius: 0.35rem;
    opacity: 1;
    transition: opacity 0.28s ease-in-out;
    cursor: pointer;
    line-height: 1;
    font-family: 'Inter'; 
}

#confirmLocation {
    border: none;
    font-size: 0.925rem;
    font-weight: 600;
    width: 100%;
    padding-top: 0.725rem;
    padding-bottom: 0.725rem;
    margin-bottom: 1.35rem;
    background: var(--all-buttons);
    color: var(--navbar-txt) ;
    border-radius: 0.35rem;
    opacity: 1;
    transition: opacity 0.28s ease-in-out;
    cursor: pointer;
    line-height: 1;
    font-family: 'Inter'; 
    border: var(--bord-location); 
}

#useGeolocationBtn:hover, #locationCorrectBtn:hover {
    opacity: 0.75; 
}

.locationTextArea {
    background-color: var(--locationInputBG);
    color: var(--textCol);
    display: flex;
    align-items: center;
    border-radius: 6px;
    margin-bottom: 0;
    margin-top: 1rem;
    border: var(--bord-location);
    padding: 0.15rem;
}

#searchInput::placeholder {
    color: var(--locationButt-black); 
    font-weight: 500; 
    font-size: 0.95rem;
    font-family: 'Inter'; 
    
}

.enterCityStateInput::placeholder {
    color: var(--locationInputText) !important;
    font-weight: 500 !important; 
    font-family: 'Inter';  
    font-size: 0.95rem !important; 
}

#searchBtn {
    background: #0061bd;
    color: white; 
    border: none; 
    padding: 0rem 0.25rem 0rem 0.15rem; 
    cursor: pointer;
    position: absolute;
    right: -0.05rem; 
    border: none; 
    font-size: 0.875rem; 
    font-weight: 700; 
    height: 100%; 
    opacity: 1; 
    transition: opacity 0.22s ease-in-out; 
    padding-left: 0.75rem; 
    padding-right: 0.75rem; 
    border-top-right-radius: 0.4rem; 
    border-bottom-right-radius: 0.4rem; 
}

#searchBtn:hover {
    opacity: 0.7; 
}

#searchLocationToggle {
    position: absolute;
    right: -0.05rem;
    background: #0061bd;
    color: white;
    border: none; 
    cursor: pointer;  
    border: none; 
    font-weight: bold; 
    opacity: 1; 
    transition: opacity 0.22s ease-in-out; 
    font-family: 'Inter'; 
    height: 100%;
    font-weight: 700; 
    padding-left: 0.75rem; 
    padding-right: 0.75rem;  
    border-top-right-radius: 0.4rem;
    border-bottom-right-radius: 0.4rem;  
}

#useMyLocation {
    border: none;
    font-size: 0.95rem;
    font-weight: 700;
    width: 100%;
    padding: 0.8rem 1rem;
    background: #0061bd;
    color: white;
    border-radius: 6px;
    opacity: 1;
    transition: opacity 0.22s ease-in-out;
    cursor: pointer;
    line-height: 1;
    font-family: 'Inter', sans-serif;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

#useMyLocation:hover, #searchLocationToggle:hover {
    opacity: 0.7; 
}

.enterCityStateInput {
    background-color: var(--locationInputBG);
    font-family: 'Inter', sans-serif;
    color: var(--locationInputText);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    border: none;
    outline: none;
    font-size: 0.925rem;
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    font-weight: 500;
}

@media screen and (max-width: 400px) {
    #changeLocationModal {
        position: fixed;
        width: 85%;
        top: 3rem;
        left: 7.5%;
        right: 7.5%;
        transform: none;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
    }
}

.listCategoryP {
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: 'Inter';
    color: var(--minHeaderCol);
    opacity: 0.75;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.15rem;
}

.svg32 {
    width: 29px; 
    height: 29px; 
}


@media screen and (max-width: 576px) {
.listViewBizName {
    font-size: 0.95rem; 
}
}

@media screen and (max-width: 576px) {
    .svg32 {
        width: 25px; 
        height: 25px;
    }

    .listViewImage .deals_like_card {
        top: 0.0rem; 
        right: 0rem; 
    }
}

.topDealBadge {
    position: absolute;
    top: -3px;
    left: 2px;
    color: #ffd700;
    rotate: 52deg;
    z-index: 10;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    line-height: 1;
}

@media screen and (max-width: 576px) {
    .featuredSubTitle {
        line-height: 1.15rem;
    }
}

@media screen and (max-width:767.9px) {
    .topDealBadge svg {
        width: 2.3rem;
        height: 2.4rem;
    }
}

@media screen and (min-width:768px) {
    .topDealBadge svg {
        width: 2.4rem;
        height: 2.8rem;
    }
}

@media screen and (min-width:1476px) {
    .topDealBadge {
        top: -0.25rem;
        left: 3.1px;
    }
    .topDealBadge svg {
        width: 2.4rem;
        height: 2.9rem;
    }
}