@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;600;800&display=swap');

:root {
    --bronze-color: #CFAE59;
    --purple-color: #712F99;
    --gray-text-color: #525252;
}

.gmapsbuttoncontainer {
    display: flex;
}

.gmapsbuttoncontainer .gmapbtn {
    font-family: 'Work Sans', sans-serif;
    background-color: #fff;
    color: var(--bronze-color);
    font-weight: 800;
    font-size: 20px;
    padding: 17px 44px;
    border: 2px solid var(--bronze-color);
    border-radius: 50px;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-transition: background-color 300ms linear;
    -moz-transition: background-color 300ms linear;
    -o-transition: background-color 300ms linear;
    -ms-transition: background-color 300ms linear;
    transition: background-color 300ms linear;
}

.gmapsbuttoncontainer .gmapbtn:focus {
    outline: none;
}

.gmapsbuttoncontainer .gmapbtn:hover {
    background-color: var(--bronze-color);
    color: #fff;
}

.modalcontainer {
    font-family: 'Work Sans', sans-serif;
    display: flex;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* background-color: rgb(113 47 153 / 50%); */
    background-color: rgb(143 2 134 / 80%);
    justify-content: center;
    padding-top: 200px;
	z-index: 10;
}

.modalcontainer #customModal {
    background-color: #fff;
    padding: 30px 40px 50px 40px;
    width: 100%;
    max-width: 1140px;
    height: 100%;
    max-height: 75vh;
    display: grid;
    grid-template-columns: 35% 30px 1fr;
    grid-template-rows: auto auto auto;
    position: relative;
    border-radius: 20px;
    box-shadow: 0px 4px 22px 0px rgba(161, 161, 161, 0.22);
    z-index: 10;
}

.modalcontainer #map-container {
    width: 100%;
    height: 100%;
    grid-column: 3/4;
    grid-row: 2/3;
}

.modalcontainer #form-container {
    grid-column: 1/4;
    grid-row: 1/2;
    display: flex;
    position: relative;
}

.modalcontainer #stores-container {
    grid-column: 1/2;
    overflow-y: auto;
    height: 100%;
    grid-row: 2/3;
    scroll-behavior: smooth;
}

.modalcontainer #privacy-container {
    grid-column: 1/4;
    grid-row: 4/5;
    margin-top: 30px;
}

.modalcontainer #privacy-container p {
    font-size: 12px;
    color: #c1c1c1;
    margin: 0;
}

.modalcontainer #pac-input {
    width: 100%;
}

.modalcontainer #closeModal {
    position: absolute;
    right: 20px;
    top: 15px;
    font-family: 'Work Sans', sans-serif;
    font-weight: 300;
    font-size: 26px;
    color: #C6C6C6;
    background-color: transparent;
    border: none;
    cursor: pointer;
    z-index: 10;
}

.modalcontainer .highlighted-store,
.modalcontainer .store:hover {
    background-color: #ffeffa;
}

.modalcontainer .store:hover {
    cursor: pointer;
}

#form-container #pac-input {
    border-radius: 20px;
    background: #F6F6F6;
    border: 1px solid #fff;
    margin: 30px 0 65px 0;
    color: var(--gray-text-color);
    font-family: 'Work Sans', sans-serif;
    font-size: 20px;
    font-weight: 300;
    padding: 12px 110px 12px 25px;
}

#form-container #pac-input:focus-visible {
    outline: none;
}

#form-container #pac-input:focus {
    border: 1px solid var(--purple-color);
}

#form-container .gmap-search {
    width: 25px;
    height: 25px;
    position: absolute;
    right: 40px;
    top: 43px;
    /* background: url('./assets/icon-search.svg'); */
    background-image: url('data:image/svg+xml,<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="&%23240;&%23159;&%23166;&%23134; icon &%2334;Search&%2334;"><path id="Vector" d="M24.657 21.6151L19.7891 16.7472C19.5693 16.5275 19.2715 16.4054 18.959 16.4054H18.1632C19.5107 14.6819 20.3115 12.514 20.3115 10.1557C20.3115 4.54567 15.7658 0 10.1557 0C4.54567 0 0 4.54567 0 10.1557C0 15.7658 4.54567 20.3115 10.1557 20.3115C12.514 20.3115 14.6819 19.5107 16.4054 18.1632V18.959C16.4054 19.2715 16.5275 19.5693 16.7472 19.7891L21.6151 24.657C22.0741 25.1159 22.8162 25.1159 23.2703 24.657L24.6521 23.2752C25.1111 22.8162 25.1111 22.0741 24.657 21.6151ZM10.1557 16.4054C6.70377 16.4054 3.90606 13.6126 3.90606 10.1557C3.90606 6.70377 6.69888 3.90606 10.1557 3.90606C13.6077 3.90606 16.4054 6.69888 16.4054 10.1557C16.4054 13.6077 13.6126 16.4054 10.1557 16.4054Z" fill="%23712F99"/></g></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

#form-container .gmap-search:hover {
    background-image: url('data:image/svg+xml,<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="&%23240;&%23159;&%23166;&%23134; icon &%2334;Search&%2334;"><path id="Vector" d="M24.657 21.6151L19.7891 16.7472C19.5693 16.5275 19.2715 16.4054 18.959 16.4054H18.1632C19.5107 14.6819 20.3115 12.514 20.3115 10.1557C20.3115 4.54567 15.7658 0 10.1557 0C4.54567 0 0 4.54567 0 10.1557C0 15.7658 4.54567 20.3115 10.1557 20.3115C12.514 20.3115 14.6819 19.5107 16.4054 18.1632V18.959C16.4054 19.2715 16.5275 19.5693 16.7472 19.7891L21.6151 24.657C22.0741 25.1159 22.8162 25.1159 23.2703 24.657L24.6521 23.2752C25.1111 22.8162 25.1111 22.0741 24.657 21.6151ZM10.1557 16.4054C6.70377 16.4054 3.90606 13.6126 3.90606 10.1557C3.90606 6.70377 6.69888 3.90606 10.1557 3.90606C13.6077 3.90606 16.4054 6.69888 16.4054 10.1557C16.4054 13.6077 13.6126 16.4054 10.1557 16.4054Z" fill="%234c33a9"/></g></svg>');
}

#form-container .gmap-reset {
    width: 25px;
    height: 25px;
    position: absolute;
    right: 85px;
    top: 43px;
    /* background: url('./assets/crosshairs.svg'); */
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.4375 10.5H22.0142C21.3621 6.10898 17.891 2.63794 13.5 1.98581V0.5625C13.5 0.251859 13.2481 0 12.9375 0H11.0625C10.7519 0 10.5 0.251859 10.5 0.5625V1.98581C6.10898 2.63794 2.63794 6.10898 1.98581 10.5H0.5625C0.251859 10.5 0 10.7519 0 11.0625V12.9375C0 13.2481 0.251859 13.5 0.5625 13.5H1.98581C2.63794 17.891 6.10898 21.3621 10.5 22.0142V23.4375C10.5 23.7481 10.7519 24 11.0625 24H12.9375C13.2481 24 13.5 23.7481 13.5 23.4375V22.0142C17.891 21.3621 21.3621 17.891 22.0142 13.5H23.4375C23.7481 13.5 24 13.2481 24 12.9375V11.0625C24 10.7519 23.7481 10.5 23.4375 10.5ZM13.5 18.9672V17.0625C13.5 16.7519 13.2481 16.5 12.9375 16.5H11.0625C10.7519 16.5 10.5 16.7519 10.5 17.0625V18.9672C7.77309 18.3859 5.61483 16.2301 5.03278 13.5H6.9375C7.24814 13.5 7.5 13.2481 7.5 12.9375V11.0625C7.5 10.7519 7.24814 10.5 6.9375 10.5H5.03278C5.61412 7.77309 7.76986 5.61483 10.5 5.03278V6.9375C10.5 7.24814 10.7519 7.5 11.0625 7.5H12.9375C13.2481 7.5 13.5 7.24814 13.5 6.9375V5.03278C16.2269 5.61412 18.3852 7.76986 18.9672 10.5H17.0625C16.7519 10.5 16.5 10.7519 16.5 11.0625V12.9375C16.5 13.2481 16.7519 13.5 17.0625 13.5H18.9672C18.3859 16.2269 16.2301 18.3852 13.5 18.9672ZM13.5 12C13.5 12.8284 12.8284 13.5 12 13.5C11.1716 13.5 10.5 12.8284 10.5 12C10.5 11.1716 11.1716 10.5 12 10.5C12.8284 10.5 13.5 11.1716 13.5 12Z" fill="%23712F99" fill-opacity="0.92"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

#form-container .gmap-reset:hover {
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.4375 10.5H22.0142C21.3621 6.10898 17.891 2.63794 13.5 1.98581V0.5625C13.5 0.251859 13.2481 0 12.9375 0H11.0625C10.7519 0 10.5 0.251859 10.5 0.5625V1.98581C6.10898 2.63794 2.63794 6.10898 1.98581 10.5H0.5625C0.251859 10.5 0 10.7519 0 11.0625V12.9375C0 13.2481 0.251859 13.5 0.5625 13.5H1.98581C2.63794 17.891 6.10898 21.3621 10.5 22.0142V23.4375C10.5 23.7481 10.7519 24 11.0625 24H12.9375C13.2481 24 13.5 23.7481 13.5 23.4375V22.0142C17.891 21.3621 21.3621 17.891 22.0142 13.5H23.4375C23.7481 13.5 24 13.2481 24 12.9375V11.0625C24 10.7519 23.7481 10.5 23.4375 10.5ZM13.5 18.9672V17.0625C13.5 16.7519 13.2481 16.5 12.9375 16.5H11.0625C10.7519 16.5 10.5 16.7519 10.5 17.0625V18.9672C7.77309 18.3859 5.61483 16.2301 5.03278 13.5H6.9375C7.24814 13.5 7.5 13.2481 7.5 12.9375V11.0625C7.5 10.7519 7.24814 10.5 6.9375 10.5H5.03278C5.61412 7.77309 7.76986 5.61483 10.5 5.03278V6.9375C10.5 7.24814 10.7519 7.5 11.0625 7.5H12.9375C13.2481 7.5 13.5 7.24814 13.5 6.9375V5.03278C16.2269 5.61412 18.3852 7.76986 18.9672 10.5H17.0625C16.7519 10.5 16.5 10.7519 16.5 11.0625V12.9375C16.5 13.2481 16.7519 13.5 17.0625 13.5H18.9672C18.3859 16.2269 16.2301 18.3852 13.5 18.9672ZM13.5 12C13.5 12.8284 12.8284 13.5 12 13.5C11.1716 13.5 10.5 12.8284 10.5 12C10.5 11.1716 11.1716 10.5 12 10.5C12.8284 10.5 13.5 11.1716 13.5 12Z" fill="%234c33a9" fill-opacity="0.92"/></svg>');
}

#form-container .wrong-address {
    position: absolute;
    bottom: 25px;
    left: 25px;
    font-size: 16px;
    color: red;
}

#stores-container .store {
    line-height: 1.5;
    padding: 35px 10px 35px 35px;
    position: relative;
}

#stores-container .store:first-child {
    padding: 0 10px 35px 30px;
}

#stores-container .store:not(:last-child)::after {
    display: block;
    content: '';
    width: calc(100% - 10px);
    height: 1px;
    background-color: #D9D9D9;
    margin: 0 auto 0 0;
    position: absolute;
    bottom: 0;
    left: 0;
}

.store .storename {
    color: var(--purple-color);
    font-weight: 600;
    font-size: 16px;
    position: relative;
}

.store .storename::before {
    content: '';
    display: block;
    position: absolute;
    width: 15px;
    height: 20px;
    background-size: contain;
    background-image: url('./assets/map-marker.svg');
    background-repeat: no-repeat;
    background-position: center;
    left: -30px;
    top: 2px;
}

.store .zipcity,
.store .street {
    font-size: 14px;
    font-weight: 300;
    color: var(--gray-text-color);
}

.store .getdirections {
    text-decoration: none;
    font-weight: 300;
    font-size: 12px;
    color: rgba(143, 2, 134, 0.92);
}

.store .getdirections:hover {
    text-decoration: underline;
}

.store .getdirections:hover:before {
    transform: rotate(45deg);
}

.store .getdirections::before {
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 11px;
    height: 11px;
    background-size: contain;
    background-image: url('./assets/location-arrow.svg');
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transition: -webkit-transform 300ms linear;
    -moz-transition: -moz-transform 300ms linear;
    -o-transition: -o-transform 300ms linear;
    -ms-transition: -ms-transform 300ms linear;
    transition: transform 300ms linear;
}

@media (min-width: 1025px) {
	.modalcontainer {
		padding-top: 150px !important;
	}	
	.modalcontainer #customModal {
    	padding: 30px 40px 30px 40px !important;
	}
	#form-container #pac-input {
		margin: 20px 0 20px 0 !important;
	}
	.modalcontainer #closeModal {
		right: 0px !important;
		top: 0px !important;
	}
	.modalcontainer #privacy-container {
	    margin-top: 15px !important;
	}
	.modalcontainer #privacy-container p {
	    font-size: 11px !important;
	}
	#stores-container .store:first-child {
		padding: 0 10px 15px 30px !important;
	}
	#stores-container .store {
		padding: 15px 10px 15px 35px !important;
	}
}

@media (max-width: 1024px) {
    .modalcontainer {
        padding-top: 0 !important;
        z-index: 100000;
    }
    .pac-container.pac-logo {
        z-index: 100001;
    }
    .modalcontainer #customModal {
        max-height: 100vh;
        border-radius: 0;
        grid-template-columns: 1fr;
        grid-template-rows: auto 20px 300px 20px 1fr auto;
        padding: 30px 40px 30px 40px;
    }
    .modalcontainer #form-container {
        grid-column: 1/2;
    }
    .modalcontainer #stores-container {
        grid-row: 3/4;
    }
    .modalcontainer #map-container {
        grid-column: 1/2;
        grid-row: 5/6;
    }
    .modalcontainer #privacy-container {
        grid-column: 1/2;
        grid-row: 6/7;
        margin-top: 20px;
    }
    #form-container #pac-input {
        margin: 30px 0 10px 0;
    }
    #stores-container .store:first-child {
        padding: 0 10px 10px 30px;
    }
    #stores-container .store {
        padding: 15px 10px 10px 35px;
    }
    .store .zipcity {
        float: left;
    }
    .store .zipcity:after {
        content: ', ';
        display: block;
        position: relative;
        float: right;
        margin-right: 5px;
    }
}
@media (max-width: 620px) {
    #form-container #pac-input {
        font-size: 18px;
        padding: 12px 85px 12px 15px;
    }
    #form-container .gmap-reset {
        right: 60px;
    }
    #form-container .gmap-search {
        right: 18px;
    }
    #stores-container .store {
        line-height: 1.3;
    }
}
@media (max-width: 400px) {
	.modalcontainer #customModal {
		grid-template-rows: auto 20px 150px 20px 1fr auto;
	}
	#stores-container .store:first-child {
		padding: 0 10px 7px 30px;
	}
	#stores-container .store {
    	padding: 7px 10px 7px 35px;
	}
	.modalcontainer #privacy-container {
    	margin-top: 12px;
	}
	.modalcontainer #privacy-container p {
    	font-size: 10px;
	}
}