/*
Theme Name:   Edstheme
Version:      1.0
*/

body{
	background:#fff;
}

.ps-main-content{
	margin-bottom:60px;
}

.hidden{
	display:none;
}

/*** HEADER ***/

header {
    background: rgb(6, 122, 70);
	color:#fff;
	position:fixed;
	top:0;
	width:100%;
	z-index:1;
	padding:15px 0;
	box-shadow: 0 3px 8px rgb(119 119 119 / 15%);
	z-index:99;
}

header .ps-basket{
	text-decoration:underline;
	text-align:right;
	position:relative;
}

header .ps-basket svg{
	width:24px;
	height:24px;
}

span.ps-basket-count.open {
    width: 8px;
    height: 8px;
    position: absolute;
    background: red;
    right: -4px;
	top:-2px;
    border-radius: 100px;
}

button#ps-lijst-download-button {
    border: none;
    background: #333;
    color: #fff;
    height: 44px;
    width: 100%;
    font-size: 14px;
    border-radius: 100px;
}

/*** FILTERS ***/

.ps-filter{
	margin:20px 0;
}

.ps-filter ul {
    display: flex;
    justify-content: center;
	gap:10px;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
}

.ps-filter ul li{
	padding:5px 20px;
	background:#f6f6f6;
	border-radius:100px;
	font-size:16px;
}

.ps-filter-item {
    cursor: pointer;
    padding: 10px 15px;
    display: inline-block;
    background-color: #f4f4f4;
    border-radius: 5px;
    transition: 0.3s;
}

.ps-filter-item.active {
    background-color: rgb(6, 122, 70);
    color: white;
}

@media (min-width:768px){
	
	.ps-filter-item:hover {
		background-color: #ddd;
	}
	
}

/*** Banner ***/

.ps-banner{
	height:190px;
	width:100%;
    margin-top: 54px;
	position:relative;
    display: flex;
    align-items: center;
}

.ps-banner img{
	position:absolute;
	top:0;
	right:0;
	left:0;
	bottom:0;
	width:100%;
	height:100%;
	object-fit:cover;
	z-index:0;
}

.ps-banner input#ps-global-search{
	z-index:1;
	max-width:500px;
	width:100%;
    margin: auto;
    height: 50px;
    display: flex;
    padding: 0 20px;
    align-items: center;
	border-radius:100px;
	position:relative;
	z-index:1;
}

/*** GERECHTEN / CARDS ***/

.ps-label-wrapper{
	display:flex;
	gap:5px;
	margin-bottom:10px;
}

.ps-label{
	padding: 0 10px 3px 10px;
	font-size:14px;
	line-height:normal;
	width:fit-content;
    border-radius: 3px;
	background:#f6f6f6;
}

.ps-label-kip{
	color:#fff;
	background:#FFC107;
}

.ps-label-pasta{
	color:#fff;
	background:#FF9800;
}

.ps-label-vlees{
	color:#fff;
	background:#D32F2F;
}

.ps-label-snel{
	color:#fff;
	background:#4CAF50;
}

.ps-label-snel{
	color:#fff;
	background:#9C27B0;
}

.ps-gerecht.ps-selected {
    outline: solid 3px #333;
    border-radius: 5px;
}

.ps-gerecht.ps-selected:before {
    content: 'Gekozen';
    background: #333;
    color: #fff;
    position: absolute;
    left: 20px;
    height: 25px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 5px 5px 0 0;
    top: -25px;
}

.ps-gerechten-wrapper {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 10px;
}

span.ps-info-button {
    position: absolute;
    top: 10px;
    right: 10px;
	cursor:pointer;
}

.ps-gerecht{
	background:#fff;
	position:relative;
	padding:30px;
	border-radius:5px;
	z-index:0;
	box-shadow: 0 3px 8px rgb(119 119 119 / 15%);
}

.ps-gerecht.open {
    z-index: 2;
}

.ps-gerecht input {
    position: absolute;
    top: 0;
    left: 0;
	width:30px;
	height:30px;
	border:solid 1px #dedede;
	border-radius:0;
	display:none;
}

h2.ps-gerecht-titel {
    font-size: 24px;
	margin:0 0 15px 0;
}

.ps-gerecht-content ul {
    padding: 0 20px;
}

.ps-gerecht .ps-gerecht-content {
	display:none;
}

.ps-gerecht .ps-gerecht-content.open {
	display:block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: fit-content;
    z-index: 4;
    background: #fff;
    margin: auto;
    padding: 20px;
    max-width: 500px;
}

.ps-gerecht-content-header {
    font-size: 18px;
    font-weight: 600;
	line-height:22px;
	margin-bottom:10px;
    display: flex;
	gap:5px;
    align-items: center;
    justify-content: space-between;
}


.ps-gerecht-content-header .ps-gerecht-content-close svg{
	width:24px;
	height:24px;
	cursor:pointer;
}

.ps-gerecht .ps-gerecht-content ul{
	padding:0;
	list-style:none;
}

.ps-gerecht .ps-gerecht-content ul li {
    padding: 5px 15px;
	border-radius:5px;
}

.ps-gerecht .ps-gerecht-content ul li:nth-child(odd){
    background: #f6f6f6;
}

.ps-gerecht img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    margin: -30px -30px 30px -30px;
    width: calc(100% + 60px);
}

.ps-gerecht-categorieen {
    font-size: 16px;
    font-weight: 400;
    color: #cf972d;
	margin:0 0 5px 0;
}

@media (min-width:992px){
	
	.ps-gerechten-wrapper {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
	}
	
}

/*** BOODSCHAPPENLIJSTJE / BASKET ***/

.ps-boodschappenlijstje-icon {
	margin-left: auto;
    width: fit-content;
}

.ps-boodschappen-lijst-alert {
    background: #ffa9a9;
    color: red;
    padding: 5px 15px;
    border: solid 2px red;
    margin: 15px 0;
}

.ps-alert-boodschappenlijstje-item {
    background-color: yellow !important;
    font-weight: bold;
}

.ps-boodschappenlijstje-wrapper {
    background: #fff;
    padding: 20px 20px;
    position: fixed;
    top: 0;
    bottom: 0;
    right: -100%;
    width: 80vw;
    z-index: 9999;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    overflow: auto;
}

.ps-boodschappenlijstje-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
	margin-bottom:10px;
}

.ps-boodschappenlijstje-wrapper.open {
	right:0;
}

.ps-boodschappenlijstje-bg,
.ps-info-bg{
    position: fixed;
    background: rgb(0 0 0 / 50%);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	z-index:2;
    visibility: hidden;
    opacity: 0;
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	transition: all .3s ease-out;
}

.ps-boodschappenlijstje-bg.open,
.ps-info-bg.open{
    visibility: visible;
    opacity: 1;
}

.ps-boodschappenlijstje-close svg{
	width:24px;
	height:24px;
}

ul#boodschappenlijstje{
	padding:0;
	list-style:none;
}

ul#boodschappenlijstje li{
	padding:5px 15px;
	border-radius:5px;
}

ul#boodschappenlijstje li:nth-child(odd) {
    background: #f6f6f6;
}

li.ps-alert {
    color: #d3b200;
    background: #f5f0d2 !important;
}

.ps-boodschappenlijstje-alert {
    margin-bottom: 20px;
    background: #ffdddd;
    color: red;
    padding: 10px;
    font-size: 14px;
    border-radius: 5px;
}

@media (min-width:992px){
	
	.ps-boodschappenlijstje-wrapper {
		width:33vw;
    	padding: 60px;
	}
	
}