/* ************************************************************************
* File: menu.css
*
* Purpose: Menu spesific css
*
* This file is part of a software by Jens Gienau.
* (c)1999 - 2025 Jens Gienau / www.gienau.com / mail@gienau.com
************************************************************************ */


/* ------------------------------------------------------------------------
speisekarte
------------------------------------------------------------------------ */

#body-speisekarte main .container-inside:first-of-type {
	position:relative;
}

#body-speisekarte main .openclosed-sign {
	position:fixed;
	display:none;
	background-color:gold;
	bottom:0;
	left: 50%;
	min-width:140px;
	border-top-left-radius: .15rem;
	border-top-right-radius: .15rem;
	transform: translateX(-50%);
	text-align:center;
	font-size: .9rem;
}

#body-speisekarte .openclosed-sign span  {
	display: none;
}

#body-speisekarte .openclosed-sign.closed  {
	color:#f2f2f2;
	background-color: #333;
}

#body-speisekarte .openclosed-sign.open span:last-of-type  {
	display: none;
}

#body-speisekarte .openclosed-sign.open span:first-of-type  {
	display: inline;
}

#body-speisekarte .openclosed-sign.closed span:last-of-type  {
	display: inline;
}

#body-speisekarte .openclosed-sign.closed span:first-of-type  {
	display: none;
}

#body-speisekarte main .container-inside:first-of-type #scart-count {
	position:fixed;
	top:71px;
	left: 50%;
	transform: translateX(-50%);
	right:center;
	min-width: 100px;
	color:#fff;
	background-color: #e32;
	border-bottom: 1px soid #fff;
	border-left: 1px soid #fff;
	border-right: 1px soid #fff;
	border-bottom-left-radius: .15rem;
	border-bottom-right-radius: .15rem;
	padding:.45rem .75rem;
	text-align: center;
	display:none;
	cursor:pointer;
	font-size:1.5rem;
}
#body-speisekarte main .container-inside:first-of-type #scart-count.show {
	display:inline-block;
}

#body-speisekarte .scart-order-phone {
	text-align: center;
	font-family: 'satoshibold', sans-serif;
	color:rgb(158, 248, 247);
	text-decoration: none;
	font-size:1.2rem;
	padding: 1rem;
	background-color: darkcyan;
	margin: 1rem 0;
}

#body-speisekarte .scart-summary {
	text-align: center;
	font-family: 'satoshibold', sans-serif;
	color:darkcyan;
	text-decoration: none;
	font-size:1.2rem;
	margin: 1rem 0 .5rem 0;
}


#body-speisekarte .scart-order-phone a {
	color:#fff;
	text-decoration: none;
}

#body-speisekarte .scart-order-phone a:hover {
	color:rgb(158, 248, 247);
	text-decoration: none;
}

#body-speisekarte .order-note-header {
	font-family: 'satoshiregular', sans-serif;
	background-color: darkcyan;
	color:#fff;
	border-radius: .25rem;
	padding: 1rem;
	text-align:center;
	font-size: 1.4rem;
	line-height: 1.8rem;
	margin: 0 0 2rem 0 ;
}

#body-speisekarte .order-note-header a {
	font-family: 'satoshibold', sans-serif;
	color:#fff;
	text-decoration: none;
}

#body-speisekarte .order-note-header a:hover {
	font-family: 'satoshibold', sans-serif;
	color:#fff;
	text-decoration: underline;
}

#body-speisekarte .order-note-footer {
	font-family: 'satoshiregular', sans-serif;
	background-color: darkcyan;
	color:#fff;
	border-radius: .25rem;
	padding: 1rem;
	text-align:center;
	margin: 0 0 2rem 0 ;
}

#body-speisekarte .order-note-header a {
	font-family: 'satoshibold', sans-serif;
	color:#fff;
	text-decoration: none;
}

#body-speisekarte .order-note-header a:hover {
	font-family: 'satoshibold', sans-serif;
	color:#fff;
	text-decoration: underline;
}

#body-speisekarte table tr.item {
	
}

#body-speisekarte table tr.menugroup-name button {
	padding: .25rem;
	margin-top: .5rem;
	cursor: pointer;
	font-family: 'satoshiregular', sans-serif;
	font-size: .9rem;
	background-color: rgb(158, 248, 247);
	border: 1px solid rgb(158, 248, 247);
	border-radius: .15rem;
	color:darkcyan;
	min-width: 140px;
}

#body-speisekarte table tr.menugroup-name button:last-of-type {
	display:none;
}

#body-speisekarte table tr.menugroup-name button:hover {
	background-color: #fff;
	border: 1px solid #fff;
	color:darkcyan;
}

#body-speisekarte table tr.menugroup-name.close {
	cursor: pointer;
}

#body-speisekarte table tr.menugroup-text td {
	background-color: rgb(158, 248, 247);
	color:darkcyan;
	padding-left:1rem;
	padding-right:1rem;
}

#body-speisekarte table tr.menugroup-name.open button {
	display: none;
}

#body-speisekarte table tr.menugroup-name.open {
	cursor: pointer;
}

#body-speisekarte table tr.menugroup-name {
	font-family: 'satoshibold', sans-serif;
	background-color: darkcyan;
	color:#fff;
	font-size: 1.3rem;
}

#body-speisekarte table tr.menugroup-name td {
	padding:1rem;
}

#body-speisekarte table .subgroup-name {
	font-family: 'satoshibold', sans-serif;
	background-color: rgb(158, 248, 247);
}

#body-speisekarte table .subgroup-name td {
	padding-left:1rem;
	padding-right:1rem;
}

#body-speisekarte table .menuitem-name {
	font-family: 'satoshimedium', sans-serif;
}



#body-speisekarte table .menuitem-amount-button {
	background-color: #f2f2f2;
	display: inline-block;
	padding: .15rem .35rem;
	border: 1px solid gray;
	border-radius: .15rem;
	margin: .15rem;
}

#body-speisekarte table .menuitem-amount-button.online {
	background-color: rgb(158, 248, 247);
	border: 1px solid rgb(158, 248, 247);
	cursor: pointer;
}

#body-speisekarte table .menuitem-amount-button i {
	color: darkcyan;
	font-size: .9rem;
}

#body-speisekarte table .item-nb-type {
	text-align: center;
	padding: .5rem;
}

#body-speisekarte table .item-nb {
	display: inline-block;
	padding: .15rem .35rem;
	border-radius: 5px;
	color:#fff;
	font-family: 'satoshimedium', sans-serif;
	min-width: 4rem;
	text-align:center;
	background-color: gray;
	margin: 0 auto;
}

#body-speisekarte table .item-type {
	background-color: green;
	display: inline-block;
	padding: .15rem .35rem;
	border-radius: 5px;
	color:#fff;
	font-family: 'satoshimedium', sans-serif;
	min-width: 4rem;
	text-align:center;
	margin: 0 auto;
	font-size: .6rem;
	line-height: .8rem;
}

#body-speisekarte table .item-nb.online{
	background-color: #e32;
}


#body-speisekarte table .menuitem-amount-button span {
	font-family: 'satoshimedium', sans-serif;
}

#body-speisekarte .ingredients {
	margin-top:2rem;
	border-top: 1px solid silver;
	padding-top: .5rem;
	color:silver;
}

#scart-order-form.modal {
  max-width: 600px;
  padding: 15px 15px;
}

#scart-order-form h2 {
	margin:0 0 .5rem 0;
}

#scart-order-form p,
#scart-order-form {
	font-size: .8rem;
	line-height: 1rem;
}
#scart-order-form table {
	
	margin-bottom:1rem;
}

#scart-order-form table tr td {
	vertical-align: top;
}

#scart-order-form table td.scart-item-quantity {
	width: 30px;
	padding-left:0;
	padding-right:0;
	overflow:hidden;
}

#scart-order-form table td.scart-item-amount {
	padding-left:0;
	padding-right:.15rem;
	width: 60px;
	overflow:hidden;
}
#scart-order-form table td.scart-item-quantity span {
	display:block;
	border:2px solid #e32;
	border-radius: .15rem;
	text-align: center;
}
#scart-order-form table tr .item-nb {
	font-size: .9rem;
	line-height: auto;
	padding: .1rem;
	min-width:2.5rem;
	background-color:#e32;
	border-radius: .15rem;
}

#scart-order-form table .scart-item-cmd {
	font-size: 2rem;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
}
#scart-order-form table .scart-item-cmd i {
	margin: .25rem .5rem 0 0;
	color:darkcyan;
	cursor: pointer;
}

#scart-order-form table .scart-item-cmd i.progressing {
	color:gray;
}

#scart-order-form table tr.inactive .scart-item-cmd div:first-of-type i:first-of-type {
	color:silver;
	cursor:default;
}

#scart-order-form table tr .scart-item-cmd div:last-of-type {
	padding-top:.4rem;
}
#scart-order-form table tr .scart-item-cmd div:last-of-type i {
	display: none;
	font-size: 1.7rem;
}

#scart-order-form table tr.inactive .scart-item-cmd div:last-of-type i {
	display: inline;
}

#scart-order-form .scart-cmd-footer {
	text-align: center;
	margin: 2rem 0 2rem 0;
}
#scart-order-form .scart-cmd-footer a {
	font-size: 1rem;
	padding: .3rem 1rem;
	border: 2px red solid;
	border-radius: .15rem;
	background-color:#f2f2f2;
	margin: 0 1rem;
	color:#333;
	text-decoration: none;
}


#scart-order-form .scart-cmd-footer a:first-of-type {
	border-color:darkcyan;
	background-color:darkcyan;
	color:#fff;
	text-decoration: none;
}

#scart-order-form .scart-cmd-footer a:last-of-type {
	border-color:#e43;
	background-color:#e43;
	color:#fff;
	text-decoration: none;
}

#scart-order-form .scart-item-unit {
	background-color:#e32;
	color: #fff;
	padding: .1rem .25rem;
	display:inline-block;
	border-radius: .15rem;
}



/* ========================================================================
MEDIA QUERY: DESKTOP SMALL
======================================================================== */

@media only screen and (min-width: 1100px) {

	
	/* ------------------------------------------------------------------------
	MQ: speisekarte
	------------------------------------------------------------------------ */
	#body-speisekarte .scart-order-phone {
		font-size:2rem;
	}
		
	#body-speisekarte .scart-summary {
		font-size:1.5rem;
		margin: 1.5rem 0 1rem 0;
	}
	
	#scart-order-form p,
	#scart-order-form {
		font-size: .95rem;
		line-height: 1.2rem;
	}
	#scart-order-form table .item-nb {
		font-size: .95rem;
		line-height: auto;
		padding: .1rem;
		min-width:2.5rem;
	}
	
	#scart-order-form .scart-cmd-footer a {
		font-size: 1.2rem;
	}
	
	#scart-order-form table td.scart-item-quantity {
		width: 40px;
	}

	#scart-order-form table td.scart-item-amount {
		width: 80px;
	}

}

/* ========================================================================
MEDIA QUERY: HOVER ABILITY (NO TOUCH DEVICE)
======================================================================== */

@media(hover: hover) and (pointer: fine) {
	
	#body-speisekarte table .menuitem-amount-button.online:hover {
		background-color: darkcyan;
		border: 1px solid darkcyan;
		color:#fff;
		cursor: pointer;
	}
	
	#body-speisekarte table .menuitem-amount-button.online:hover i {
		color:#fff;
	}

	#scart-order-form .scart-cmd-footer a:hover {
		border-color:gray;
		background-color:gray;
		color:#fff;
	} 
	#scart-order-form table tr.active .scart-item-cmd i:hover {
		color:gray;
	}
	#scart-order-form table tr .scart-item-cmd i:last-of-type:hover {
		color:gray;
	}
}