body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    padding: 20px;
}

.card-box {
    max-width: 100%; 
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.custom-store-location input[type="text"] {
    width: 100%;
    margin-bottom: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.suggestions {
    position: relative;
    width: 100%;
    margin-top: -1px;
    /* Align with input field bottom */
    /* border: 1px solid #ccc;
    border-top: none; */
    /* border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
    z-index: 1000;
    /* Ensure suggestions appear above other content */
    background-color: #fff;
    display: none;
    /* Hide initially */
}

#zipCodeSuggestions .suggestion-item span{display: flex; align-items: center;  justify-content: space-between;}

.suggestion-item {
    padding: 6px 10px;
    cursor: pointer;
    background: #ffffff;
    margin-bottom: 3px;
}
.suggestion-item:hover {
    background: #e8f2ff;
}


.btn-map {
    float: right;
}

/* Ensure full height for the body */
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
}

/* Loader container styling */
.loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 9999;
    display: none;
    /* Hide loader by default */
}

/* Loader styling */
.loader {
    border: 8px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top: 8px solid #3498db;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

/* Keyframes for spinner animation */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Styling for input-container and other elements */
.input-container {
    text-align: center;
    margin: 20px 0;
}

.custom-store-location input[type="text"] {
    font-size: 16px;
    width: 70%;
    max-width: 400px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

h2 {
    text-align: center;
}

@media print {
    #printButton {
        display: none;
    }
}




/* lowers page css */

.search-heading {
    text-transform: uppercase;
    font-weight: 500;
    color: #06205c;
}

.custom-input-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.btn--primary {
    padding: 15px 30px 15px 30px !important;
    border-radius: 0px;
    background-color: #06205c;
    color: white;
    font-weight: bold;
}

.btn--primary:hover {
    color: #e7e7e7;
}


.custom-color .location-link {
    color: #02216a !important;
}

.radius-0 {
    border-radius: 0px;
}



.custom-store-location {
    background-color: white;
    padding: 20px;
    box-shadow: 2px 2px 10px #0000001f;
    margin-bottom: 20px;

}

.custom-store-location h4 {
    margin-bottom: 20px;
    color: #02216a !important;

}

.custom-store-location .availability h6 {
    padding-bottom: 16px;
}

.custom-store-location .address {
    display: flex;
    align-items: center;
    padding-bottom: 16px;
}

.text--primary {
    color: #02216a !important;
}

.custom-store-location .delivary-date-style {
    display: flex;
    align-items: center;
    padding-bottom: 16px;

    margin-top: 16px;
}

.next-delivery-date {

    color: #629B5E;
    font-size: 23px;
    font-weight: 700;

}


/* lowers page css */

.search-heading {
	text-transform: uppercase;
	font-weight: 500;
	color: #06205c;
} 

.custom-input-button{
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    justify-content: start;

}
.btn--primary{
    padding: 15px 30px 15px 30px !important;
    border-radius: 0px;
    background-color: #06205c;
    color: white;
    font-weight: bold;
}
.btn--primary:hover{
    color: #e7e7e7;
}

.custom-zip-input[type="text"] {
	width: 100%;
	padding: 15px 30px 13px 15px;
	font-size: 16px;
    border-radius: 0px;
}


.custom-color .location-link {
	color: #02216a !important;
}

.radius-0{
    border-radius: 0px;
}



.custom-store-location {
	background-color: white;
	padding: 20px;
	box-shadow: 2px 2px 10px #0000001f;
    margin-bottom: 20px;
    
}
.custom-store-location h4{
    margin-bottom: 20px;
    color: #02216a !important;

}
.custom-store-location .availability h6{
    padding-bottom: 16px;
}

.custom-store-location  .address {
	display: flex;
	align-items: center;
    padding-bottom: 16px;
}

.text--primary{
color: #02216a !important;
}

.custom-store-location .delivary-date-style{
    display: flex;
	align-items: center;
    padding-bottom: 16px;

    margin-top: 16px;
}

.next-delivery-date {

    color: #629B5E;
    font-size: 23px;
    font-weight: 700;

}

@media screen (max-width:767px) {
    .btn--primary {
        padding: 15px 20px !important;
    }
    
}

@media (max-width:575px) {
    .custom-input-button {
        display: block;}
 
        .custom-input-button    .btn--primary {
            margin-bottom: 15px;
        }

}
.suggestion-item-no-data {
	padding: 10px;
}
.no-date {
    font-size: 1rem;
    font-weight: 600;
}


.suggestions_dropdown {
    margin: 0 !important;
    min-height: 150px;
    max-height: 180px;
    overflow-y: auto;
    width: auto;
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
    background: rgba(0, 0, 0, .05);
    padding: 10px;
    border-radius: 10px;
}
.custom-card{
    padding: 20px;
    border-radius: 20px;
}
.suggestions_dropdown span.h6 {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    display: block;
    background-color: #f2f2f2;
    box-shadow: 0px 12px 10px rgba(0, 0, 0, .03);
}
.suggestions_dropdown .get-address{
    font-size: 14px;
}
.suggestions_dropdown .location-link {
    font-size: 14px;
}
/* Width of scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

/* Track (the area behind the scrollbar) */
.custom-scrollbar::-webkit-scrollbar-track {
    background: #d6d6d6; 
    border-radius: 10px;
    border-radius: 99px;
}

/* Handle (the moving part) */
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #4e4e4e; 
    border-radius: 10px;
    border-radius: 99px;
}

/* Handle on hover */
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #777777; 
}

.info-text {
    font-weight: bolder;
}