/*Search Page*/
.stores-header{width: 100vw; max-width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; 
	margin-right: -50vw; background: var(--mainColour); height: 140px;}
.stores-header > div{height: 100%; display: flex; align-items: center;}
.stores-header span{display: flex; align-items: center; gap:10px; font-family: var(--secondaryFont); color: #fff; font-size: 2.375rem;}
.stores-header span::before{content: ""; height: 34px; width: 26px; background: url(../images/map-pin.svg) center no-repeat;}

.stores-search-main{display: flex; gap:20px;}
.stores-sidebar{width: 500px; padding: 20px 0; display: flex; gap:10px; flex-direction: column; flex-shrink: 0;}
.stores-sidebar-controls{display: flex; gap:10px; flex-direction: column;}
.stores-sidebar .form-group{display: flex; flex-direction: column; gap:5px;}
.stores-sidebar label{color: var(--mainColour); font-size: 20px;}
.stores-sidebar .search-location-group{display: flex; height: 50px; background-color: #fff; border-radius: 10px; border: 1px solid #CFCFCF;} 
.stores-sidebar .search-location-group input{height: 100%; border: 0; border-radius: 10px; flex-grow: 1; } 
.stores-sidebar .search-location-group a.search-location-button{height: 100%; width: 50px; flex-shrink: 0; background: url(../images/search-purple.svg) center no-repeat; background-size: 21px;} 
.stores-sidebar .search-county-group select{border-radius: 10px; border: 1px solid #CFCFCF; width: 100%;}

.search-location-clear{height: 100%; flex-shrink: 0; width: 0; opacity: 0; background: url(../images/close-round-purple.svg) center no-repeat;}
.search-location-group.active .search-location-clear{width: 40px; opacity: 1;}
.search-location-group.active input{padding-left: 0;}

/*Store Sidebar block*/
.search-location-results{display: flex;flex-direction: column; gap:5px;}
.search-location-results > p{color: var(--mainColour);}

.store-list{display: flex; flex-direction: column; gap:10px; height: 60vh; overflow-y: scroll;}
.store-card{background: #fff; border-radius: 10px; padding: 20px 15px; border: 1px solid var(--mainColour); display: flex; flex-direction: column; gap:15px;
	transition: ease-in-out all .3s;}
.store-card > .store-card-title{font-size: 1.25rem; font-weight: bold; text-transform: capitalize; text-decoration: none; color: var(--mainColour); display: flex; align-items: center;
	justify-content: space-between; gap:20px;}
.store-card .store-card-title:hover{text-decoration: underline;}
.store-card .store-card-title > span{height: 20px; width: 20px; flex-shrink: 0; background: url(../images/arrow-down-purple.svg) center no-repeat; transition: ease-in-out all .3s; transform: rotate(90deg); cursor: pointer;}
.store-card.active, .store-card:hover{background: #DEF0F1; border-color: #7CD3D7;}
.store-card.active > a > span{background-image: url(../images/close-purple.svg); transform: rotate(0);}
.store-card.active > a > span:focus-visible { background-color: #f9dc4a; color: #000; outline: 1px solid #000; }
.store-card-info{display: none;}
.store-card-info > div{display: flex; flex-direction: column; gap:15px; font-size: 0.875rem; align-items:flex-start; }
.store-card-address{ display: flex; gap:7px;}
.store-card-address::before{content: ""; height: 16px; width: 14px; background: url(../images/pin-purple.svg) center no-repeat; flex-shrink: 0;}
.store-card-phone-direction{gap:20px; display: flex; align-items: center;}
.store-card-phone{text-decoration: underline; display: flex; align-items: center; gap: 7px;}
.store-card-phone::before{content: ""; height: 14px; width: 14px; background: url(../images/phone-purple.svg) center no-repeat; flex-shrink: 0;}

.store-card-hours{display: flex; flex-direction: column; gap:5px;}
.store-card-hours > span{font-size: 1.125rem; font-weight: bold;}
.store-card-hours > div{line-height: 2;}
.store-card-info > div > a{margin-left: auto; height: 42px; border-radius: 10px; padding: 0 15px; display: flex; align-items: center; gap:5px; font-size: 1rem;}
.store-card-info > div > a::after{content: ""; height: 8px; width: 8px; border: solid #fff; border-width: 2px 2px 0 0; transform: rotate(45deg);}

/*Store Map*/
.stores-map{position: relative; height:90vh; margin-right: -30vw; width: 65vw; max-width: 65vw;}

.stores-map::before{content: ""; height: 100vh; width: 70vw; background: #fff; z-index: -1; position: absolute; left: 0; top:0;}

.map-info{display: flex; flex-direction: column; font-family: var(--mainFont); gap:5px;}
.map-info strong{font-size: 0.938rem; color: var(--mainColour); font-weight: bold; text-transform: capitalize; padding-right: 60px;}
.map-info > div{padding-right: 60px;}
.map-info .button-primary{height: 42px; border-radius: 10px; padding: 0 15px; display: flex; align-items: center; gap:5px; font-size: 1rem; width: 100%; text-align: center; margin-top: 10px;}
.map-info .button-primary::after{content: ""; height: 8px; width: 8px; border: solid #fff; border-width: 2px 2px 0 0; transform: rotate(45deg);}

/*Google Map Styling*/
.gm-style-iw {border-radius: 10px !important; padding: 10px !important; box-shadow: none !important; border: 1px solid var(--mainColour) !important; width: 390px;}
.gm-style-iw .gm-style-iw-d{padding: 0 !important; overflow: initial !important; margin-top: -40px;}
.gm-ui-hover-effect:focus-visible{outline: 1px solid #000;}

/*Store Details Page*/
.store-header-container{width: 100vw; max-width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; 
	margin-right: -50vw; background: var(--mainColour); padding: 30px 0;}
.store-header {display: flex; flex-direction: column; gap:15px;}
.store-header > a{color: #fff; text-decoration: underline; display: flex; align-items: center; gap:5px;}
.store-header > a::before{content: ""; height: 6px; width: 6px; transform: rotate(45deg); border: solid #fff; border-width: 0 0 2px 2px; flex-shrink: 0;}
.store-header > h1{color: #fff; font-family: var(--secondaryFont); padding: 0; font-size: 2.375rem; text-transform: capitalize;}

.store-main{display: flex; gap:15px; padding: 30px 0;}
.store-images-container{width: 45%; display: flex; position: relative;}
.store-images-container > div{width: 100%;}
.store-information{width: 55%;}

.store-images-container .store-image{display: flex; width: 100%; align-items: center; justify-content: center;}
.store-images-container .store-image img{max-width: 100%;}

.store-images-container .store-gal-nav{position: absolute; height: 60px; width: 40px; background:  rgba(255, 255, 255, .85); top: calc(50% - 30px); z-index: 1000;}
.store-images-container .store-gal-nav::after{content: ""; height: 14px; width: 14px; border: solid var(--mainColour); border-width: 3px 3px 0 0; position: absolute; right: 14px; 
	top: calc(50% - 7px); transform: rotate(45deg); transition: ease-in-out all .3s;}
.store-images-container .store-gal-prev{ left: 0; transform: rotate(180deg);}
.store-images-container .store-gal-next{right: 0;}

.store-images-container .store-gal-nav.store-gal-disabled::after{opacity: .5;}

.store-information{display: flex; flex-direction: column; gap:20px; }
.store-information > div:first-child{display: flex; gap:10px;}
.store-information > div:first-child > a{font-size: 0.875rem;}

.store-information .store-address{font-weight: bold; display: flex; gap:5px; font-size: 1rem;}
.store-information .store-address::before{content: ""; flex-shrink: 0; height: 16px; width: 12px; background: url(../images/pin-pink.svg) center no-repeat;}

.store-information > div:nth-child(2){display: flex; gap:20px; align-items: center;}
.store-information .store-phone{display: flex; gap:5px; text-decoration: underline; color: var(--textColour);}
.store-information .store-phone::before{content: ""; flex-shrink: 0; height: 14px; width: 14px; background: url(../images/phone-pink.svg) center no-repeat;}

.store-information .store-website{display: flex; align-items: center; gap:5px; color: var(--textColour); text-decoration: underline;}
.store-information .store-website::before{content: ""; height:15px; width:15px; background: url(../images/sun-pink.svg) center no-repeat; background-size: contain;}

.store-social{display: flex; align-items: center; gap:10px;}
.store-social a{height: 26px; width: 26px; background-size: contain; background-repeat: no-repeat; background-position: center;}
.store-social a.fb{background-image: url(../images/facebook-purple.svg);}
.store-social a.in{background-image: url(../images/linkedin-purple.svg);}
.store-social a.ig{background-image: url(../images/instagram-purple.svg);}
.store-social a.tw{background-image: url(../images/twitter-purple.svg);}
.store-social a.yt{background-image: url(../images/youtube-purple.svg);}
.store-social a.tt{background-image: url(../images/tiktok-purple.svg);}

.store-opening-hours-container{background: #B3E6E9; border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap:5px; line-height: 1.8;}
.store-opening-hours-container > span{font-size: 1.125rem; font-weight: bold;}

.store-description-container{width: 100vw; max-width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; 
	margin-right: -50vw; background: #ffffff; padding: 30px 0;}
.store-description > span{color: var(--mainColour); font-weight: bold; font-size: 1.5rem;}

.store-email-dropdown{}
.store-email-dropdown a{font-size: 0.875rem; text-decoration:underline; color:var(--textColour); display: flex; align-items: center; gap:8px; margin-bottom: 10px;}
.store-email-dropdown a::before{content: ""; height: 8px; width: 8px; border:solid var(--mainColour); border-width: 0 2px 2px 0; transform:rotate(45deg); 
	transition: ease-in-out all .3s;}
.store-email-dropdown a.active::before{transform: rotate(225deg);}
.store-email-dropdown span{display: none; font-size: 0.875rem; padding-left: 15px; font-weight: bold;}

.store-map-container{width: 100vw; max-width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;}
.store-map-container .store-map{width: 100%; height:450px; }

/************Responsive states**************/

/* Desktop */
@media (min-width:992px) and (max-width:1199px) {
	
	/*Search Page*/
   	.stores-sidebar{width: 350px;}
   	.gm-style-iw{width: 300px;}

}

/*Mobile & Tablet*/
@media (max-width:991px) {

	/*Search Page*/
	.stores-search-main{flex-direction: column;}
	.stores-sidebar{width: 100%;}

	.stores-map{width: 100vw; max-width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;}
	.store-list{height: inherit; max-height: 60vh;}

	/*Details Page*/
	.store-header-container{padding: 20px 0;}
	.store-images-container .store-gal-nav{height: 40px; width: 20px; top: calc(50% - 20px);}
	.store-images-container .store-gal-nav::after{height: 10px; width: 10px; right: 6px; top: calc(50% - 5px); border-width: 2px 2px 0 0;}
	.store-information > div:first-child{flex-direction: column;}
	.store-information > div:first-child > a{padding-left: 20px;}
	.store-information > div:nth-child(2){flex-wrap: wrap;}
	.store-social{width: 100%;}
 
}

/*Tablet*/
@media (min-width:768px) and (max-width:991px) {

	/*Search Page*/
	.stores-sidebar-controls{flex-direction: row;}
	.stores-sidebar-controls > div{flex-grow: 1;}

	/*Details Page*/
	.gm-style-iw{width: 300px;}

}

/*Mobile*/
@media (max-width:767px) {

    /*Search Page*/
    .store-card > .store-card-title{font-size: 1.063rem;}
    .gm-style-iw {max-width: initial !important; width: 280px;}

    /*Details Page*/
    .store-header > h1{font-size: 1.75rem;}
    .store-main{flex-direction: column;}
    .store-images-container, .store-information{width: 100%;}
}