:root {
    --svg-color: rgb(41, 143, 204);
    --form-bg: #ffffff; 
    --d-text: #000b27;
    --flame-bgColor2: rgb(0, 105, 170); 
    --loginIn-col: rgba(0,0,0,0.94); 
    --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); 
}

.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: #006d77; /* Deep teal for light theme button */
    --addDealButtonBorder: rgba(0, 109, 119, 0.6); /* Matching teal border */
    --addDealHoverColor: #004d61; /* Darker teal for hover */
    --addDealHoverBorderColor: rgba(0, 77, 97, 0.8); /* Darker teal border on hover */
    --addDealHoverBoxShadow: rgba(0, 109, 119, 0.8); /* Teal-tinted glow on hover */
}

.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; 
    bottom:0; 
    width: 100%; 
    z-index: 1990; 
    padding-top: 0.35rem; 
    padding-bottom: 0.35rem;
    background-color: var(--bottom-nav-color); 
    font-family: "Poppins"; 
}

.darkModeBottomToggleContainer {
    width: 35px; 
}

.bottomNavbarButtCont {
    display: flex; 
    justify-content: space-evenly; 
    align-items:center;
}

.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: 'Inter', sans-serif;
    background-color: var(--addDealButtonColor, #ff6200); 
    border-radius: 4px; 
    border: none;
    outline: none;
    color: white; 
    padding: 0.125rem 1.5rem 0.2rem 1.5rem; 
    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; 
    margin-left: 0.5rem; 
    font-size: 1rem; 
    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.12);
    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 {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    background-color: var(--searchBar-bg); 
    border: 1px solid #e7e6e6; 
}

#infoButtonHeaderButton {
    opacity: 1; 
    transition: opacity 0.22s ease-in-out; 
}

#infoButtonHeaderButton:hover {
    opacity: 0.7; 
}

@media screen and (max-width: 576px) {
    #signInDropDown {
        padding: 3rem 4rem 3rem 4rem; 
    }

    .bottomNavbarContainer {
        background-color: var(--bottom-nav-color);
    }
}

@media (min-width: 576px) and (max-width: 768px) {
    #signInDropDown {
        padding: 4rem 10rem 4rem 10rem; 
    }
}

@media screen and (max-width: 576px) {
    .p1r5r1r5r2 {
        width: 90%; 
    }
}

@media screen and (min-width: 578px) and (max-width: 768px) {
    .p1r5r1r5r2 {
        width: 500px; 
    }
}

@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:3.65rem;
        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: 'Inter', sans-serif;
    background-color: #0061bd; /* Vibrant blue */
    border-radius: 0.5rem; /* Slightly larger radius for a softer look */
    border: none;
    outline: none;
    color: #ffffff; /* Crisp white text */
    padding: 0.55rem 1rem 0.625rem 1rem; /* Increased padding for better proportions */
    font-weight: 600;
    /* margin-top: 0.075rem; */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Enhanced shadow for more depth */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease; /* Smoother transitions */
    cursor: pointer;
    line-height: 1;
    margin-left: 0.5rem;
    font-size: 0.95rem; /* Slightly larger text for readability */
    position: relative; /* For potential future animations */
    overflow: hidden; /* Ensures text stays within bounds */
}

#signInNavButton:hover {
    background-color: #0b3864; /* Darker blue for hover */
    transform: scale(1.1); /* More noticeable scale */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); /* Stronger shadow on hover */
}

/* Optional: Add a subtle animation for extra flair */
#signInNavButton::after {
    content: '';
    position: absolute;
    width: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.2); /* Subtle highlight */
    top: 0;
    left: 0;
    transition: width 0.3s ease;
}

#signInNavButton:hover::after {
    width: 100%; /* Highlight fills on hover */
}

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