/* Rubik zelf hosten, niets van buiten het eigen domein. Scheelt bij het opstarten twee
   externe verbindingen (DNS + TLS naar Google) en de kassa werkt zo ook zonder internet.
   Losse bestanden per dikte (geen variabel font): dat werkt ook op oudere Chrome-versies.
   swap = meteen tekenen met Arial en omwisselen zodra Rubik binnen is; nooit onzichtbare tekst. */
@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../font/rubik-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../font/rubik-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../font/rubik-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../font/rubik-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url('../font/rubik-900-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url('../font/rubik-900-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--accent: #ea7f2f;    /* huisstijl-oranje; per toestel overschreven door thema.js (kleurthema) */
	--bg: #000;           /* app-canvas (body/footer); thema.js tint dit mee */
	--vlak: rgb(77,42,16);/* donkere sectiebalk (.wijkWrap); thema.js tint dit mee */
	/* Vaste knoppaletten (header-/menu-/type-/betaalknoppen); thema.js tint ze mee (grijs/mono). */
	--kRood: #ff595e; --kGeel: #ffca3a; --kGroen: #8ac926; --kBlauw: #1982c4; --kPaars: #9478BA;
	--kModuleGroen: #2e7d32; --kModuleGeel: #f5b301;   /* afwijkende tint van de agenda-/layout-headerknop */
	--c1: #1A535C;
	--c2: #FFFFFF;
	--c3: #F7FFF7;
	--c4: #ffffff;
	--c5: #FFE66D;
	
	--d1: #0C262A;
	--d2: #050505;
	--d3: #444644;
	--d4: #461E1E;
	--d5: #463F1E;
	
	--l1: #ABC0C3;
	--l2: #BEECE9;
	--l3: #FCFFFC;
	--l4: #FFC9C9;
	--l5: #FFF5C9;

	
	--kleur1: #fff;
	--kleur2: #fff;
    --main: #333; 
    --main2: #ddd; 
    --main3: var(--accent); 
    --header: #FF851B; 
    --chess1odd: #222; 
    --chess1even: var(--main); 
    --keypadodd: #FF851B; 
    --keypadeven: #FF851B; 
    --color6: #ffffff; 
    --color7: #7245f2; 
    --wrapper: #202020; 
    --wrapper2: #232323; 
	--kassaWidth: 350px;
	--catWidth: 160px;
	--buttonFontSize: 18px;
	--tafelFontSize: 18px;
	
	--blockSpacing: 2px;
	--footerHeight: 215px;
	--wrapper2Height: 176px;
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	cursor: pointer;
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
								  
	xtext-transform: uppercase;
	font-weight:bold;
	-webkit-tap-highlight-color: transparent;
}


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	xbackground-color:#000;
	
	
	line-height: 1;
}

body:after{
      content:"";
      position:fixed; /* stretch a fixed position to the whole screen */
      top:0;
      height:100vh; /* fix for mobile browser address bar appearing disappearing */
      left:0;
      right:0;
      z-index:-1; /* needed to keep in the background */
      
}


ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

html {
	-ms-touch-action: none;
	touch-action: manipulation;
	/* De kassa past altijd in het venster: scrollen doen de iScroll-panelen, nooit de pagina.
	   Zonder dit levert één pixel overloop meteen een scrollbar op (en die versmalt het
	   venster, waardoor er ook een horizontale verschijnt). */
	height: 100%;
	overflow: hidden;
}

body,ul,li {
	padding: 0;
	margin: 0;
}

body {
	font-size: 12px;
	font-family:rubik,arial;
	overflow: hidden; /* this is important to prevent the whole page to bounce */
	background-color:var(--bg);
}

#fullLogo {
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background-color:#1c1c1e;
	background-color:#000;
	text-align:center;
	z-index:1000;
}
#fullLogo img {
	height:100%;
}

#header {
	position: absolute;
	z-index: 2;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 50px;
	line-height: 45px;
	background-color:var(--header);
	color:white;
	padding: 0;
	color: #eee;
	font-size: 20px;
	text-align: center;
	font-weight: bold;
	display: table;
	xtransition: width 0.5s, left 0.5s;
}
#header b p {
	font-size:15px;
	text-align:center;
	width:100%;
	float:left;
	color:var(--kleur2);
	line-height: 15px;
	font-weight:100;
}
#header b {
	line-height: 17px;
	display: table-cell;
	vertical-align: middle;
}


#footer {
	position: absolute;
	z-index: 2;
	bottom: 0px;
	left: 5px;
	left: 0px;
	width: calc(100%);
	height: var(--footerHeight);
	padding: 0;
	background: var(--bg);
    box-shadow: 0px -10px 30px rgb(0 0 0 / 100%);
	display:none;
}

#wrapper {
	display:none;
	position: absolute;
	z-index: 1;
	top: 0px;
	bottom: calc(var(--footerHeight));
	left: 0px;
	width: 100%;
	overflow: hidden;
}

#scroller {
	padding:0px;
	position: absolute;
	z-index: 1;
	-webkit-tap-highlight-color: rgb(0,0,0);
	width:100%;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-text-size-adjust: auto;
	-moz-text-size-adjust: auto;
	-ms-text-size-adjust: auto;
	-o-text-size-adjust: auto;
	text-size-adjust: auto;
}
.key {
	float:left;
	width:calc(100% / 3);
	margin:0px;
	height:50px;
	text-align:center;
	font-size:15px;
	font-weight:200;
	line-height:18px;
	display:table;
	padding-top:5px;
	z-index:200;
	position:relative;
	touch-action: manipulation; /* geen ~350ms dubbeltik-wachttijd -> toetsen reageren direct */
}

.keyleft {
	margin-left:0;
	width:calc(100% / 3);
}

.leftkey svg, .rightkey svg {
	height:50px;
	margin-top:0px;
	fill:var(--accent);
}

.key b {
	color:#fff;
	font-size:25px;
	font-weight:500;
	display: table-cell;
    text-align: center;
    vertical-align: middle;
}

/* Laden: een ronddraaiende ring midden-onderin zolang er een API-call loopt (zie
   backend.js:zetLaadSpinner). Boven het toetsenblok, klein en onopdringerig. */
#laadSpinner {
	position: fixed; left: 50%; top: 50%;   /* left/top worden vers gezet op de message-balk */
	transform: translate(-50%, -50%); z-index: 200000;
	display: none; pointer-events: none;   /* geen fade: meteen aan/uit */
	width: 58px; height: 58px;   /* alleen de ring, geen achtergrond-schijf */
}
#laadSpinner.aan { display: flex; align-items: center; justify-content: center; }
.laadRing {
	width: 34px; height: 34px; border-radius: 50%;
	border: 4px solid rgba(0,0,0,.14); border-top-color: var(--accent);   /* oranje draaiende boog (huisstijl) */
	animation: laadDraai .7s linear infinite;
	box-sizing: border-box;
	/* Zonder schijf eronder: een schaduw houdt de ring zichtbaar op zowel donkere als lichte schermen. */
	filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
}
@keyframes laadDraai { to { transform: rotate(360deg); } }

.keyPress {
	animation: presser 0.7s normal forwards ease-in-out;
}
.keyPress svg {
	animation: presser 0.7s normal forwards ease-in-out;
}

@keyframes presser {
	0% { color: var(--main3); fill:white; }
	50% { color: var(--main3);  fill:var(--main3); }
	100% { color: white;  fill:var(--main3); }
}

.corr {
	width:calc(100% / 4);
	text-align:left;
	padding-left:30px;
}



.enter {
	width:calc(100% / 4);
	text-align:right;
	padding-right:30px;
}

.message {
	width:calc(100% / 2);
	overflow:hidden;
}

.message b {
	font-size:15px;
	font-weight:light;
	line-height:1.15;
}
/* Restaurantnaam onder de begroeting: kleiner en in het accent-oranje. */
.message b .groetZaak { font-size:.8em; color:var(--accent); font-weight:700; }
/* Korte fade-in als de begroeting verschijnt (◄ op het tafeloverzicht). */
.message b.groetIn { animation:groetFade .4s ease-out; }
@keyframes groetFade { from { opacity:0; } to { opacity:1; } }

.menu b {
	color:var(--accent);
}

.menuImg {
	height:35px;
	margin-top:8px;
	fill:var(--accent);
}


/* Het tafelnummer staat altijd exact in het midden van de tegel -- vrij of bezet, met of
   zonder bedrag. Bedrag en tijd liggen als losse strook over de onderrand heen, dus ze
   nemen geen ruimte in en kunnen het nummer niet verschuiven. */
.tafel {
	float:left;
	position:relative;
	overflow:hidden;
	width:calc((100% / 5) - (var(--blockSpacing) * 2));
	margin:var(--blockSpacing);
	height:46px;
	color:#fff;
	text-align:center;
	z-index:100;
	cursor: pointer;
	display: table;
	padding-left:4px;
	padding-right:4px;
}
	
.tafel b {
	font-size:25px;
	font-weight:500;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	line-height:1;
	/* Een cijfer heeft geen staart, dus de letterbak (ascent+descent) zit lager dan de inkt.
	   Deze padding zet de zichtbare inkt precies in het midden; in em, dus hij schaalt mee. */
	padding-top:.1em;
}

.tafel b small {
	font-size:12px;
	text-align:center;
	width:100%;
	float:left;
	line-height: 11px;
	font-weight:400;
	padding-top:1px;
	color:#e2bea0;
}

.tafel svg {
	height:25px;
	margin-top:2px;
}

/* Menu-/terugknoppen zijn geen tafels: die hebben de infostrook niet nodig. */
.module {
	height:50px;
}
.module b { padding-top:0; }
.module b {
	font-size:30px;
	line-height:30px;
	font-weight:700;
}


.wijkWrap {
	margin-top:5px;
	margin-bottom:10px;
	padding:5px;
	margin-left:0px;
	width:calc(100% - 0px);
	background: var(--vlak);
}

.wijk {
	/* Kopregel over de volle breedte. GEEN float: alles wat erna komt en een eigen
	   block-formatting-context maakt (flex-grid, input, .telRij) mag een float niet
	   overlappen en belandt er dan náást, buiten beeld. clear:both zet de kop netjes
	   onder de voorgaande rij tafel-/artikelknoppen. */
	clear:both;
	width:calc(100% - 0px);
	margin-left:0px;
	margin-right:1px;
	margin-top:2px;
	margin-bottom:2px;
	min-height:22px;   /* was height: een kop van twee regels liep over de rest heen */
	color:var(--accent);
	text-align:left;
	z-index:100;
	cursor: pointer;
	display: table;
	padding-left:4px;
	padding-right:4px;
	text-transform:uppercase;
}
	
.wijk b {
	font-size:19px;
	font-weight:600;
	display: table-cell;
	text-align: left;
	vertical-align: middle;
}

.klant b {
	text-align:left;
}

.tafelLarge {
	width:calc(100% - (var(--blockSpacing) * 2));
	padding-left:10px;
	text-align:left !important;
}

.tafelLarge b, .tafelLarge b small {
	text-align:left !important;
}

.tafelMedium {
	width:calc(50% - (var(--blockSpacing) * 2));
	text-align:center !important;
}

.tafelMedium b, .tafelMedium b small {
	text-align:center !important;
}

.tafelInUse {
	background-color:white;
}

.tafelInUse b, .tafelInUse b small {
	color:var(--main);
}
/* zelfde lettergrootte en -dikte als een vrije tafel: alleen de kleur verandert */
.tafelInUse b { font-size:25px; font-weight:500; }




.cat {
	float:left;
	width:50%;
	height:50px;
	background-color:var(--main);
	color:white;
	text-align:center;
	z-index:100;
	display: table;
	padding:0 5px;
	font-weight: bold;
}

.cat b p {
	font-size:15px;
	text-align:center;
	width:100%;
	float:left;
	color:var(--kleur2);
	line-height: 14px;
	font-weight:100;
}
.cat b {
	font-size:var(--buttonFontSize);
	line-height: 15px;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}




#wrapper3 {
	position: absolute;
	z-index: 60;
	display:none;
	top: 0px;
	bottom: 0px;
	left: 0;
	width: 100%;
	overflow: hidden;
	xtransition: width 0.5s, left 0.5s;
	background-color:#1c1c1e;
	background-color:#000;
	padding-top:60px;
}

#scroller3 {
	position: absolute;
	z-index: 1;
	-webkit-tap-highlight-color: rgb(0,0,0);
	width: 100%;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-text-size-adjust: auto;
	-moz-text-size-adjust: auto;
	-ms-text-size-adjust: auto;
	-o-text-size-adjust: auto;
	text-size-adjust: auto;
	padding:5px;
}






#wrapper2 {
	display:none;
	position: absolute;
	z-index: 56;
	top: 2px;
	/* Niet de volle vensterhoogte: die begint hier pas op 2px, dus de bak liep er 2px onderuit.
	   Dat gaf een verticale scrollbar, en die versmalde het venster zodat er ook een
	   horizontale bijkwam. Zelfde aanpak als #wrapper2b hieronder. */
	bottom: 2px;
	left: calc(var(--kassaWidth) + 4px);
	width: var(--catWidth);
	overflow: hidden;
}

#scroller2 {
	position: absolute;
	z-index: 1;
	-webkit-tap-highlight-color: rgb(0,0,0);
	width: 100%;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-text-size-adjust: auto;
	-moz-text-size-adjust: auto;
	-ms-text-size-adjust: auto;
	-o-text-size-adjust: auto;
	text-size-adjust: auto;
	padding:3px;
	padding-top:5px;
}

#wrapper2b {
	position: absolute;
	display:none;
	z-index: 56;
	top: 2px;
	bottom: 2px;
	left: calc(var(--kassaWidth) + var(--catWidth) + 8px);
	width: calc(var(--windowWidth) - var(--kassaWidth) - var(--catWidth) - 12px);
	overflow: hidden;
}

#scroller2b {
	position: absolute;
	z-index: 1;
	-webkit-tap-highlight-color: rgb(0,0,0);
	width: 100%;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-text-size-adjust: auto;
	-moz-text-size-adjust: auto;
	-ms-text-size-adjust: auto;
	-o-text-size-adjust: auto;
	text-size-adjust: auto;
	padding:3px;
	padding-top:5px;
}

.knop {
	float:left;
	height:50px;
	width:calc((100% / 5) - (var(--blockSpacing) * 2));
	margin:0px;
	text-align:center;
	word-break: break-word;
	z-index:100;
	display: table;
	padding:0 5px;
	margin-left: var(--blockSpacing);
	margin-right: var(--blockSpacing);
	margin-bottom:calc(var(--blockSpacing) * 2);
}

#scroller2 .knop {
	width:100%;
}

.knop b {
	font-size:25px;
	line-height: 21px;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	font-weight:500;
	color:white;
}
/* Zoekresultaten passen via CSS (geen JS-schaal-lus): iets kleiner font + overflow verbergen. */
.knop.zoek { overflow:hidden; position:relative; }
.knop.zoek b { font-size:20px; line-height:19px; }
/* De bovenste treffer: die voegt de ►-toets toe, dus laat zien welke dat is. */
.knop.zoek.zoekEerst { box-shadow:inset 0 0 0 3px rgba(255,255,255,.9), 0 0 0 2px rgba(0,0,0,.15); }
/* Badge met het al bestelde aantal, rechtsboven op de zoekknop */
.zoekAantal { position:absolute; top:3px; right:4px; min-width:19px; height:19px; line-height:19px; padding:0 4px; border-radius:10px; background:#fff; color:#1a1a1a; font-size:12px; font-weight:800; text-align:center; box-shadow:0 1px 2px rgba(0,0,0,.35); }

.knop strong {
	font-weight:700;
	border-bottom:dotted 2px red;
}

.knop b small {
	font-size:12px;
	text-align:center;
	width:100%;
	float:left;
	line-height: 11px;
	font-weight:200;
	padding-top:0px;
	color:#ffffff;
}

.subCatTitel {
	font-size:20px;
	text-align:left;
	width:100%;
	float:left;
	line-height: 20px;
	font-weight:500;
	padding-top:0px;
	color:#ffffff;
}

.links b small {
	font-size:12px;
	text-align:left;
	width:100%;
	float:left;
	line-height: 11px;
	font-weight:400;
	margin:0;
	padding:0;
	padding-top:1px;
	color:#e2bea0;
}

.knopicon {
	padding-left:50px !important;
}

.knop svg {
	height:30px;
	position:absolute;
	margin-top:1px;
	margin-left:-40px;
	margin-right:20px;
}








.wide {
	position:fixed;
	left:0px;
	top:7px;
	width:calc(var(--windowWidth) - 4px) !important;
	text-align:left;
}

.wide b {
	text-align:left;
	padding-left:10px;
	font-weight:400;
}

.wideButton {
	position:relative;
	top:0;
	right:0;
	width:45px;
	text-align:center;
	float:right;
}

.wideButton svg {
	margin:0;
	position:relative;
	margin-top:11px;
}

.breed {
	width:calc(100% - 4px) !important;
}
.breed b {
	text-align:left;
	padding-left:0px;
}

.links b, .links {
	text-align:left;
	padding-left:0px;
}



.pTafel {
	float:left;
	position:absolute;
	font-size:20px;
	z-index:100;
}

.pTafel2 {
	position:fixed;
	z-index:100;
	float:left;
	height:40px;
	width:40px;
	margin:0px;
	text-align:center;
	word-break: break-word;
	z-index:100;
	display: table;
	padding:0 5px;
	margin-left: var(--blockSpacing);
	margin-right: var(--blockSpacing);
	margin-bottom:calc(var(--blockSpacing) * 2);
	border-radius:100px;
}

.pTafel2 b {
	font-size:20px;
	line-height: 15px;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	font-weight:500;
	color:white;
}

.pTafel2 b svg {
	height:30px;
}

.type1 {
	border-radius:150px;
	width:40px;
	height:40px;
	text-align:center;
	line-height:40px;
	color:white;
	background-color:#333;
	font-weight:bold;
}

.type2 {
	border-radius:300px;
	width:80px;
	height:80px;
	text-align:center;
	line-height:80px;
	color:white;
	background-color:#333;
	font-weight:bold;
}

.type3 {
	width:40px;
	height:40px;
	text-align:center;
	line-height:40px;
	color:white;
	background-color:#333;
	font-weight:bold;
}

.type4 {
	width:80px;
	height:40px;
	text-align:center;
	line-height:40px;
	color:white;
	background-color:#333;
	font-weight:bold;
}

.type5 {
	width:40px;
	height:80px;
	text-align:center;
	line-height:80px;
	color:white;
	background-color:#333;
	font-weight:bold;
}













.oranje { background-color:#ffffff; } .oranje b, .oranje b small, .oranje svg { color:var(--accent); fill:var(--accent);}
.rood { background-color:var(--kRood); } .rood b, .rood b small, .rood svg { color:#290001; fill:#290001; }
.geel { background-color:var(--kGeel); } .geel b, .geel b small, .geel svg { color:#291E00; fill:#291E00; }
.groen { background-color:var(--kGroen); } .groen b, .groen b small, .groen svg { color:#182207; fill:#182207; }
.blauw { background-color:var(--kBlauw); } .blauw b, .blauw b small, .blauw svg { color:#051824; fill:#051824; }
.paars { background-color:var(--kPaars); } .paars b, .paars b small, .paars svg { color:#130E1B; fill:#130E1B; }

.oranje2 { background-color:var(--accent); } .oranje2 b, .oranje2 b small, .oranje2 svg { color:#ffffff; fill:#ffffff;}
.rood2 { background-color:#290001; } .rood2 b, .rood2 b small, .rood2 svg { color:var(--kRood); fill:var(--kRood); }
.geel2 { background-color:#291E00; } .geel2 b, .geel2 b small, .geel2 svg { color:var(--kGeel); fill:var(--kGeel); }
.groen2 { background-color:#182207; } .groen2 b, .groen2 b small, .groen2 svg { color:var(--kGroen); fill:var(--kGroen); }
.blauw2 { background-color:#051824; } .blauw2 b, .blauw2 b small, .blauw2 svg { color:var(--kBlauw); fill:var(--kBlauw); }
.paars2 { background-color:#130E1B; } .paars2 b, .paars2 b small, .paars2 svg { color:var(--kPaars); fill:var(--kPaars); }

.oranje3 { background-color:#ffffff; } .oranje3 b, .oranje3 b small, .oranje3 svg { color:var(--accent); fill:var(--accent);}
.rood3 { background-color:#ffffff; } .rood3 b, .rood3 b small, .rood3 svg { color:var(--kRood); fill:var(--kRood); }
.geel3 { background-color:#ffffff; } .geel3 b, .geel3 b small, .geel3 svg { color:#e9ae0c; fill:#e9ae0c; }
.groen3 { background-color:#ffffff; } .groen3 b, .groen3 b small, .groen3 svg { color:var(--kGroen); fill:var(--kGroen); }
.blauw3 { background-color:#ffffff; } .blauw3 b, .blauw3 b small, .blauw3 svg { color:var(--kBlauw); fill:var(--kBlauw); }
.paars3 { background-color:#ffffff; } .paars3 b, .paars3 b small, .paars3 svg { color:var(--kPaars); fill:var(--kPaars); }

.oranje4 { background-color:var(--accent); } .oranje4 b, .oranje4 b small, .oranje4 svg { color:#ffffff; fill:#ffffff;}
.rood4 { background-color:var(--kRood); } .rood4 b, .rood4 b small, .rood4 svg { color:#ffffff; fill:#ffffff; }
.geel4 { background-color:var(--kGeel); } .geel4 b, .geel4 b small, .geel4 svg { color:#ffffff; fill:#ffffff; }
.groen4 { background-color:var(--kGroen); } .groen4 b, .groen4 b small, .groen4 svg { color:#ffffff; fill:#ffffff; }
.blauw4 { background-color:var(--kBlauw); } .blauw4 b, .blauw4 b small, .blauw4 svg { color:#ffffff; fill:#ffffff; }
.paars4 { background-color:var(--kPaars); } .paars4 b, .paars4 b small, .paars4 svg { color:#ffffff; fill:#ffffff; }

.zoek {
	width:calc(50% - (var(--blockSpacing) * 2));
}







/* LIGGEND ALL */
@media only screen 
and (min-width : 550px)  {
  #header, #wrapper, #footer { width:var(--kassaWidth); }
  #footer { width:calc(var(--kassaWidth) - 0px); }
  #wrapper2 { display:block; }
  #wrapper2b { display:block; }
  #header { top:0px; left:0px; }
  #wrapper { top:0px; left:0px; bottom:var(--footerHeight); }
  #footer { bottom:0px;	left:0px; }
}


@media only screen 
and (min-width : 1600px) {
	.knop { width:calc((100% / 6) - (var(--blockSpacing) * 2)); }
	.zoek { width:calc((100% / 2) - (var(--blockSpacing) * 2)); }
	.tafel { width:calc((100% / 5) - (var(--blockSpacing) * 2)); margin:var(--blockSpacing); height:60px; }
	.tafel b { font-size:35px; line-height:35px; }
	.tafel b small { font-size:15px; line-height:15px; }
	.tafel b svg { height:30px; }
	:root { --kassaWidth: 500px; }
	:root { --catWidth: 210px; }
	:root { --footerHeight: 300px; }
	:root { --wrapper2Height: 225px; }
	:root { --blockSpacing: 3px; }
	.key { height:70px; }
	.key b { font-size:35px; }
	.knop { height:65px; }
	.knop b { font-size:35px; line-height:35px; }
	.knop b small { font-size:20px; line-height:30px; }
	.menuImg { height:40px; }
	.rightkey svg, .leftkey svg { height:70px; }
	.message b { font-size:23px; line-height:23px; }
	.tafelLarge { width:calc(100% - (var(--blockSpacing) * 2)); }
	.tafelMedium { width:calc(50% - (var(--blockSpacing) * 2)); text-align:center !important; }
	.wijk b { font-size:25px; }
}

@media only screen 
and (max-width : 1330px)
and (min-width : 550px) {
	.knop { width:calc((100% / 4) - 4px); }
	:root { --catWidth: 155px; }
	.zoek { width:calc((100% / 2) - 4px); }
}

@media only screen 
and (max-width : 1190px)
and (min-width : 550px) {
	.knop { width:calc((100% / 4) - 4px); }
	:root { --catWidth: 145px; }
	.zoek { width:calc((100% / 2) - 4px); }
}

@media only screen 
and (max-width : 990px)
and (min-width : 550px) {
	.knop { width:calc((100% / 3) - 4px); }
	:root { --catWidth: 125px; }
	.zoek { width:calc((100% / 2) - 4px); }
}

@media only screen 
and (max-width : 820px)
and (min-width : 550px) {
	.knop { width:calc((100% / 2) - 4px); }
	:root { --catWidth: 110px; }
	.zoek { width:calc((100% / 2) - 4px); }
}

@media only screen 
and (max-width : 650px) 
and (min-width : 550px) {
	.knop { width:calc((100% / 1) - 4px); }
	.zoek { width:calc((100% / 2) - 4px); }
}

@media only screen 
and (max-height : 500px) {
	:root { --footerHeight: 150px; }
	.key { height:35px; }
	.menuImg { height:20px; }
	.rightkey svg, .leftkey svg { height:30px; }
	.message b { font-size:15px; }
}

/* ===== V7.1 bestellijst (order op een tafel) ===== */
/* Tafelkop: nummer groot, naam/personen klein eronder. Zelfde opzet als de oude kassa,
   zodat je van een meter afstand ziet op welke tafel je aanslaat. */
.tafelKop {
	background:#2b1708; color:#fff; margin:5px 0; padding:9px 10px 10px;
	text-align:center; border-radius:5px; line-height:1.05;
}
.tafelKop b     { display:block; font-size:26px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; }
.tafelKop small { display:block; font-size:13px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.06em; margin-top:3px; }

.bestelregel {
	display:flex; align-items:center; gap:8px;
	background:transparent; margin:0; padding:9px 12px; border-radius:0;
	font-size:15px; color:#f3ede4; line-height:1.1;   /* donkere (bruine) achtergrond, lichte letters */
}
/* Opeenvolgende bestelregels vormen samen één doorlopende witte lijst, zonder scheidslijnen
   of losse vakjes ertussen. */
/* Lege-melding ('nog geen bestelling', 'Geen ... gevonden'): geen witte balk -- die leek op
   een invoerveld. Gewoon gecentreerde grijze tekst zonder achtergrond. */
.bestelregel.leeg { background:none; justify-content:center; text-align:center; padding:14px 10px; }
.bestelregel.leeg .bn { flex:0 1 auto; color:#9aa0a6; font-style:italic; }
.bestelregel .ba { font-weight:700; color:var(--accent); min-width:34px; text-align:center; }
/* Een artikelnaam wordt nooit afgekapt: hij loopt door op een volgende regel. */
.bestelregel .bn { flex:1; min-width:0; }
.bestelregel .bn b { display:block; font-weight:700; overflow-wrap:anywhere; }
/* toevoegingen + opmerking: kleine oranje regel onder de artikelnaam */
.bestelregel .btoev { display:block; font-size:12px; font-weight:600; color:var(--accent); margin-top:2px; overflow-wrap:anywhere; }
.bestelregel .btoev.opm { color:#c26a1b; font-style:italic; }
.bestelregel .bknop { width:30px; height:30px; line-height:30px; text-align:center; border-radius:5px; background:#eee; color:#333; font-weight:700; font-size:18px; flex:0 0 auto; }
/* prijskolom: regeltotaal groot, stukprijs klein eronder. Tik = regelmenu. */
.bestelregel .bp { white-space:nowrap; min-width:56px; text-align:right; cursor:pointer; line-height:1.05; }
.bestelregel .bp b     { display:block; font-weight:700; }
.bestelregel .bp small { display:block; font-size:11px; font-weight:600; color:var(--accent); margin-top:2px; }
.bestelToev { background:#fff; margin:-1px 2px 2px; padding:5px 12px 7px 34px; border-radius:0 0 5px 5px; font-size:13px; color:#777; display:flex; justify-content:space-between; }
.gangKop { margin:8px 4px 2px; padding:3px 10px; font-size:11px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:1px; }
.bestelregel .gangBadge { width:26px; height:26px; line-height:26px; text-align:center; border-radius:50%; background:var(--accent); color:#fff; font-weight:700; font-size:13px; flex:0 0 auto; }
/* Gang als kale letter (niet klikbaar): wijzigen gaat via het item-menu op de prijs. */
.bestelregel .gangLet { flex:0 0 auto; min-width:16px; text-align:center; color:var(--accent); font-weight:800; font-size:14px; opacity:.85; }

/* Deels verhuizen: lift mee op .bestelregel (zelfde look als de bon). Links = .ba (blijft),
   rechts = .vhMove (verhuist). Grotere tap-targets, want je tikt hier op de aantallen. */
.verhuisRij .vhTik { cursor:pointer; font-size:20px; }
.verhuisRij .vhMove { flex:0 0 auto; min-width:64px; text-align:right; cursor:pointer; font-weight:800; font-size:17px; color:#cbbfae; }
.verhuisRij .vhMove.aan { color:var(--accent); }
.verhuisRij.verhuisAlle { border-bottom:1px solid rgba(255,255,255,.18); }
.verhuisRij.verhuisAlle .ba, .verhuisRij.verhuisAlle .vhMove { color:#fff; }
.afrekenKnop.accent.uit { background:#8a8a8a; }
.bestelKop { font-size:13px; font-weight:800; color:#999; text-transform:uppercase; letter-spacing:.04em; margin:10px 2px 4px; }
/* Geen streep boven de koppen ('Reeds besteld' / 'Nieuw'); alleen kleur onderscheidt ze. */
.bestelKop.nieuw { color:var(--accent); }
.bestelregel.besteld { opacity:.62; }   /* al doorgevoerd: iets gedimd op de donkere bon */
/* De laatste handeling oplichten (vertrouwde V3-bon): groen bij een plus, rood bij een min.
   Verzadigde kleur + fel accentbalkje links, lichte letters. Ook bij 'reeds besteld' (vol). */
.bestelregel.laatste-plus { background:#1f5c24; box-shadow:inset 5px 0 0 #47d15e; opacity:1; }
.bestelregel.laatste-min  { background:#8e2020; box-shadow:inset 5px 0 0 #ff5a4d; opacity:1; }
.bestelregel.besteld .ba { color:#c9a06a; }
.bestelregel.besteld .bn { color:#cbbfae; }
.bestelregel.correctie .ba, .bestelregel.correctie .bn, .bestelregel.correctie .bp { color:#e74c3c; }
.bestelregel.correctie .btoev, .bestelregel.correctie .bp small { color:#e74c3c; }
.bestelregel.besteld .btoev { color:#b98c62; }
.bestelregel .opmBadge { width:26px; height:26px; line-height:26px; text-align:center; border-radius:50%; background:#eceef1; color:#9aa0a6; font-size:13px; flex:0 0 auto; cursor:pointer; }
.bestelregel .opmBadge.aan { background:#ffe0b8; color:#c26a1b; }
.bestelOpm { font-style:italic; color:#c26a1b; font-size:13px; padding:1px 2px 3px 34px; cursor:pointer; }
.bestelTotaal {
	display:flex; align-items:center; justify-content:space-between;
	background:#2b1708; color:#fff; margin:7px 2px 2px; padding:13px 12px;
	border-radius:5px; font-weight:700; font-size:17px;
}
.bestelTotaal .bp { color:var(--accent); }
.bestelSub { display:flex; justify-content:space-between; padding:6px 12px 0; margin:0 2px; font-size:14px; color:#cbbfae; }
.kortingKnop { background:#f0f0f0; color:#333; margin:4px 2px 0; padding:11px; border-radius:5px; text-align:center; font-weight:700; cursor:pointer; }
/* Spoed-item: ⚡ vóór de naam op de bestelling, en de spoed-knop in het item-menu licht rood op. */
.spoedMerk { color:#e23b2e; }
/* Write-off-regel (breuk/eigen verbruik/derving/representatie): telt niet mee in het totaal. */
.typeMerk { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:9px; background:#8a5a2b; color:#fff; font-size:11px; font-weight:700; vertical-align:middle; }
.bestelregel.writeoffRegel { opacity:.72; }
.bestelregel .bp.writeoff s { color:#9aa0a6; }
.bestelregel .bp.writeoff b { color:#8a5a2b; }
.imKnop.spoedAan { background:#e23b2e; color:#fff; }
/* Knoppen naast elkaar (bespaart verticale ruimte). Even hoog en even breed, tekst gecentreerd.
   Strak op elkaar: één margin rond de rij, geen dubbele marges tussen de knoppen. */
.knopRij { display:flex; gap:4px; margin:4px 2px 0; }
.knopRij > * { flex:1 1 0; min-width:0; margin:0; display:flex; align-items:center; justify-content:center; }
/* Specifieker dan de losse .kortingKnop-override, anders wint diens padding. */
.knopRij .kortingKnop { padding:8px 5px; }
.knopRij .kortingKnop b { overflow-wrap:anywhere; }
.afrekenKnop { background:#27ae60; color:#fff; margin:4px 2px 0; padding:14px; border-radius:5px; text-align:center; font-weight:700; font-size:17px; cursor:pointer; }
.afrekenKnop.accent { background:var(--accent); color:#fff; }
/* Losse betaalknop (keuzemenu, annuleren): breed en wit, zoals hij was. */
.betaalKnop { background:#fff; color:#222; margin:3px 2px; padding:14px 12px; border-radius:5px; font-weight:700; text-align:center; cursor:pointer; }

/* Betaalknoppen staan met z'n drieen op een rij, net als in de oude kassa: oranje,
   hoofdletters, en een klein bijschrift voor de variant ('automaat', de klantnaam).
   flex-wrap i.p.v. floats, zodat de knoppen in een rij even hoog zijn. */
.betaalRij { display:flex; flex-wrap:wrap; align-items:stretch; }
.betaalRij .betaalKnop {
	width:calc((100% / 3) - 4px); box-sizing:border-box; min-height:56px; overflow:hidden;
	display:flex; flex-direction:column; align-items:center; justify-content:center;
	background:var(--accent); color:#fff; margin:2px; padding:8px 3px; border-radius:5px;
	font-weight:700; text-align:center; cursor:pointer; text-transform:uppercase; line-height:1.05;
}
.betaalRij .betaalKnop b     { display:block; width:100%; overflow-wrap:break-word; }
.betaalRij .betaalKnop small { display:block; width:100%; font-size:11px; font-weight:600; text-transform:none; opacity:.85; margin-top:2px; overflow-wrap:break-word; }
.pinDisplay { background:#fff; margin:4px 2px 8px; padding:16px; border-radius:5px; text-align:center; font-size:26px; letter-spacing:6px; min-height:30px; color:#333; }
.pinKnop { float:left; width:calc((100% / 3) - 4px); margin:2px; padding:18px 0; border-radius:5px; background:#fff; color:#222; text-align:center; font-weight:700; font-size:20px; cursor:pointer; }
.pinKnop.groen { background:#27ae60; color:#fff; }

/* ===== V7.1 bestelpagina: leesbaar maar compact (op verzoek kleiner + minder ruimte) ===== */
/* align-items:flex-start -> aantal, artikelnaam en prijs staan met hun eerste regel op dezelfde
   hoogte; eventuele subregels (stukprijs, toevoegingen) hangen eronder. margin:0 -> één lijst. */
.bestelregel { font-size:19px; padding:5px 12px; margin:0; align-items:flex-start; }
.bestelregel .ba { min-width:34px; font-size:19px; line-height:1.25; }
.bestelregel .bn b { line-height:1.25; }
.bestelregel .bp { min-width:70px; font-size:19px; }
.bestelregel .bp b { line-height:1.25; }
.bestelregel .btoev { font-size:12px; }
.bestelregel .bp small { font-size:11px; }
.bestelToev { font-size:14px; padding-left:40px; }
.gangKop { font-size:13px; }
.bestelSub { font-size:16px; }
.bestelTotaal { font-size:22px; padding:11px 12px; }
.kortingKnop { font-size:18px; padding:10px; }
.betaalKnop { font-size:20px; padding:14px; }
.betaalRij .betaalKnop { font-size:15px; padding:8px 2px; letter-spacing:-.01em; }
.afrekenKnop { font-size:21px; padding:14px; }
.pinDisplay { font-size:34px; }
.pinKnop { font-size:26px; padding:22px 0; }

.regelTandwiel { flex:0 0 auto; width:32px; height:32px; cursor:pointer; text-align:center; }
.regelTandwiel svg { width:22px; height:22px; fill:#b0b0b0; vertical-align:middle; }
.regelActies { display:flex; gap:6px; flex-wrap:wrap; align-items:center; background:#f3f3f3; margin:-2px 2px 3px; padding:8px; border-radius:0 0 6px 6px; }
.regelActie { background:#fff; border-radius:6px; padding:12px 16px; font-size:20px; font-weight:700; text-align:center; cursor:pointer; color:#333; }
.regelActie.vast { background:none; cursor:default; min-width:26px; }
.regelActie.rood { background:#e74c3c; color:#fff; margin-left:auto; }

/* Invoervelden zijn divs, geen <input>: iOS biedt bij een input 'automatisch invullen' aan en
   schuift zijn eigen toetsenbord in beeld. De waarde staat in data-val, de hint in data-plh. */
.vrijInput { display:block; width:calc(100% - 4px); margin:3px 2px; padding:16px; border:2px solid #ddd; border-radius:6px; font-size:22px; font-family:rubik,arial; box-sizing:border-box; background:#fff; color:#222; }
.kbVeld, .kbKies { cursor:pointer; line-height:1.2; white-space:pre-wrap; overflow-wrap:anywhere; -webkit-user-select:none; user-select:none; }
/* De zero-width space houdt een leeg veld precies één regel hoog. Zonder dat is een leeg veld
   lager dan een gevuld: door box-sizing:border-box slokt de padding een min-height in em op. */
.kbVeld:empty::before, .kbKies:empty::before { content:attr(data-plh) '\200B'; color:#aaa; }
.kbVeld.kbActief { border-color:var(--accent); }
/* Het pijltje van een kies-veld hangt altijd verticaal in het midden, ook bij een lager veld. */
.kbKies { position:relative; padding-right:32px; }
.kbKies::after { content:'\25BC'; position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:12px; color:#bbb; }

/* Kalender in de datumkiezer */
.kbKalKop { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; font-size:18px; }
.kbKalNav { padding:6px 14px; background:#f0f0f0; border-radius:6px; cursor:pointer; }
.kbKalGrid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; margin-bottom:12px; }
.kbKalNaam { text-align:center; font-size:12px; font-weight:700; color:#999; padding:4px 0; }
.kbKalDag { text-align:center; padding:10px 0; border-radius:6px; background:#f6f6f6; font-weight:700; cursor:pointer; }
.kbKalDag.actief { background:var(--accent); color:#fff; }

/* Uren/minuten in de tijdkiezer */
.kbTijdGrid { display:grid; grid-template-columns:repeat(6,1fr); gap:3px; margin-bottom:8px; }
.kbTijdGrid.min { grid-template-columns:repeat(6,1fr); margin-bottom:14px; }
.kbTijdKnop { text-align:center; padding:9px 0; border-radius:6px; background:#f6f6f6; font-weight:700; cursor:pointer; }
.kbTijdKnop.actief { background:var(--accent); color:#fff; }
.tbPersonen { display:flex; flex-wrap:wrap; gap:6px; margin:4px 2px 8px; }
.tbPer { flex:0 0 auto; width:52px; height:52px; line-height:52px; text-align:center; background:#fff; color:#222; border-radius:6px; font-weight:700; font-size:22px; cursor:pointer; }
.tbPer.actief { background:var(--accent); color:#fff; }
/* Popup 'Met hoeveel personen?': aantikbare tegels. */
.perGrid { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:14px; }
.perTegel { flex:0 0 auto; width:60px; height:60px; line-height:60px; text-align:center; background:#f0f0f0; color:#222; border-radius:8px; font-weight:800; font-size:26px; cursor:pointer; }
.perTegel:active { background:var(--accent); color:#fff; }
/* Een dialoog met een invoerveld mag het schermtoetsenbord niet bedekken: anders landt elke
   tik op de overlay in plaats van op een toets en kun je niets typen. De overlay stopt daarom
   boven de footer zodra het toetsenbord open staat, en de footer ligt er sowieso bovenop. */
.v71dialog { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.55); z-index:99999; display:flex; align-items:center; justify-content:center; }
body.kbOpen .v71dialog { bottom:var(--footerHeight); }
.v71dialogCard { background:#fff; border-radius:14px; padding:22px; max-width:360px; width:calc(100% - 40px); box-shadow:0 14px 50px rgba(0,0,0,.35); }
.v71dialogTekst { font-size:20px; font-weight:700; color:#222; margin-bottom:16px; line-height:1.4; text-align:center; }
.v71dialogKnop { background:#f0f0f0; color:#222; border-radius:8px; padding:16px; font-size:20px; font-weight:700; text-align:center; cursor:pointer; margin-top:8px; }
.v71dialogKnop.rood { background:#e74c3c; color:#fff; }
.telGrid { margin:4px 2px 6px; }
.telRij { display:flex; align-items:center; gap:6px; margin-bottom:5px; }
.telCoup { width:64px; font-weight:700; color:var(--accent); font-size:16px; }
.telKnop { width:44px; height:44px; line-height:44px; text-align:center; background:#fff; color:#222; border-radius:6px; font-weight:700; font-size:22px; cursor:pointer; flex:0 0 auto; }
.telInput { width:64px; height:44px; line-height:40px; text-align:center; border:2px solid #ddd; border-radius:6px; font-size:20px; font-family:rubik,arial; box-sizing:border-box; background:#fff; color:#222; flex:0 0 auto; }
.telSub { flex:1; text-align:right; font-weight:700; color:#333; font-size:16px; }
.splitRij { display:flex; flex-wrap:wrap; gap:6px; margin:6px 2px 8px; }
.splitKnop { display:inline-flex; align-items:center; gap:6px; background:#fff; color:#3a3f45; border:1px solid #e3e5e8; border-radius:20px; padding:8px 13px; font-weight:700; font-size:14px; line-height:1; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.05); }
.splitKnop .splitIco { width:15px; height:15px; color:var(--accent); flex:0 0 auto; }   /* icoon in huisstijl-oranje */
.splitKnop.rood { background:#e74c3c; color:#fff; border-color:#e74c3c; }
.splitKnop.aan { background:var(--accent); color:#fff; border-color:var(--accent); }   /* bv. gekoppelde klant / badge gezet */
.splitKnop.rood .splitIco, .splitKnop.aan .splitIco { color:#fff; }
/* 'Meer instellingen' + 'Afrekenen' naast elkaar op de bon. */
.bonActieRij { display:flex; gap:8px; align-items:stretch; margin:8px 2px 2px; }
.bonActieRij > .kortingKnop { flex:1; margin:0; }
.bonActieRij > .afrekenKnop { flex:1.35; margin:0; }
/* Compacter/consistent font zodat beide knoppen netjes naast elkaar passen. */
.bonActieRij > .kortingKnop, .bonActieRij > .afrekenKnop { font-size:16px; padding:13px 10px; white-space:nowrap; }
/* Icoontje in een knop: schaalt op de knop-tekst (em) en zit op de tekstregel gecentreerd,
   zodat lange labels gewoon blijven afbreken. */
.bonActieIcoon { width:1.05em; height:1.05em; vertical-align:-.15em; margin-right:8px; opacity:.95; }
.bestelTotaal.nuaf { color:var(--accent); }
.bestelTotaal.nuaf .bn, .bestelTotaal.nuaf .bp { color:var(--accent); }
/* Multi-methode rekenscherm: bedrag per betaalmethode op de donkere wijkWrap. */
.rekenRij { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08); }
.rekenRij .rekenNaam { flex:1; min-width:0; font-weight:700; color:#fff; cursor:pointer; overflow-wrap:anywhere; }
.rekenRij .rekenBedrag { min-width:96px; text-align:right; font-weight:800; color:#cbbfae; background:rgba(0,0,0,.20); border-radius:6px; padding:8px 12px; cursor:pointer; }
.rekenRij.aan .rekenBedrag { color:#fff; background:var(--accent); }
.bestelTotaal.wissel { color:#b06bd6; }
.bestelTotaal.wissel .bn, .bestelTotaal.wissel .bp { color:#b06bd6; }
.splitUitleg { color:#888; font-size:13px; margin:2px 2px 8px; }
.splitItem { display:flex; align-items:center; gap:10px; padding:12px 12px; margin:4px 2px; background:#fff; border:2px solid #eee; border-radius:8px; cursor:pointer; }
.splitItem .si-sel { min-width:44px; text-align:center; font-weight:700; background:#eef0f2; border-radius:6px; padding:4px 0; color:#555; }
.splitItem .si-naam { flex:1; font-weight:700; color:#222; }
.splitItem .si-naam em { color:#9aa0a6; font-weight:400; font-size:12px; }
.splitItem .si-bedr { font-weight:700; color:#333; }
.splitItem.aan { border-color:var(--accent); background:#fff4ec; }
.splitItem.aan .si-sel { background:var(--accent); color:#fff; }
.splitItem.opTafel { opacity:.5; cursor:default; }
.betaalKnop.rood { background:#e74c3c; color:#fff; }
.afrekenKnop.rood { background:#e74c3c; color:#fff; }   /* .rood staat eerder in het bestand en verloor van de groene .afrekenKnop */
/* Fullscreen pin-statuspagina (Pay.nl terminal). Opaak -- dekt de hele kassa tot de betaling
   klaar is; groen bij geslaagd, rood bij mislukt. */
.pinOverlay { position:fixed; top:0; left:0; right:0; bottom:0; z-index:100000;
	display:flex; align-items:center; justify-content:center; padding:24px;
	background:#1c1206; color:#fff; }
.pinOverlay.pin-geslaagd { background:#123a1c; }
.pinOverlay.pin-mislukt  { background:#3a1414; }
.pinKaart { width:100%; max-width:420px; text-align:center; }
.pinBedragXL { font-size:56px; font-weight:900; margin-bottom:22px; }
.pinIcoon { width:110px; height:110px; margin:0 auto 20px; display:flex; align-items:center; justify-content:center;
	font-size:66px; font-weight:900; border-radius:50%; line-height:1; }
.pinIcoon.pinOk   { background:#1e7e34; color:#fff; }
.pinIcoon.pinFout { background:#c62828; color:#fff; }
.pinRing { width:88px; height:88px; border-radius:50%;
	border:8px solid rgba(255,255,255,.22); border-top-color:#fff; box-sizing:border-box;
	animation:laadDraai .8s linear infinite; }
.pinQr { display:block; width:240px; max-width:72%; height:auto; margin:0 auto 20px; background:#fff; padding:14px; border-radius:12px; }
/* Heropen-bon plaatsen: balk boven het tafeloverzicht. */
.heropenBanner { display:flex; justify-content:space-between; align-items:center; gap:10px; clear:both;
	background:var(--accent); color:#fff; border-radius:8px; padding:11px 14px; margin:0 2px 8px; font-weight:700; }
.heropenBanner .heropenAnnuleer { background:rgba(0,0,0,.22); border-radius:6px; padding:6px 12px; font-weight:800; cursor:pointer; white-space:nowrap; }
/* Bestelhistorie: kaart per bon met samenvatting. */
.histKaart { background:#fff; border-radius:10px; margin:6px 2px; padding:12px 14px; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.18); }
.histKop { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.histTitel { font-weight:800; color:#222; font-size:16px; overflow-wrap:anywhere; }
.histBedrag { font-weight:800; color:var(--accent); white-space:nowrap; text-align:right; }
.histBedrag small { display:block; font-size:11px; font-weight:700; color:#8a8f98; }
.histMeta { color:#8a8f98; font-size:12px; font-weight:600; margin-top:3px; }
.histSamenvatting { color:#444; font-size:13px; margin-top:6px; line-height:1.35;
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pinStatusTekst { font-size:22px; font-weight:700; margin:6px 0 26px; line-height:1.35; }
.pinKnop { display:block; width:100%; box-sizing:border-box; background:#fff; color:#1c1206; border-radius:10px;
	padding:18px; font-size:22px; font-weight:800; margin-top:12px; cursor:pointer; }
.pinKnop.rood { background:#e74c3c; color:#fff; }
.directeKnop { width:calc(100% - 4px); margin:0 2px 6px; padding:16px; border-radius:8px; background:var(--accent); color:#fff; text-align:center; font-weight:700; cursor:pointer; float:left; }
.directeKnop small { display:block; font-weight:400; font-size:13px; opacity:.9; margin-top:2px; }
/* infostrook onder het nummer: valt buiten de table-flow, dus zonder invloed op de hoogte */
/* Bedrag linksonder, tijd rechtsonder: klein, in een strook die over de tegel heen ligt. */
.tafel .tinfo   { position:absolute; left:4px; right:4px; bottom:0; display:flex; justify-content:space-between; align-items:baseline; gap:3px; line-height:11px; pointer-events:none; }
.tafel .tbedrag { flex:0 1 auto; font-size:9px; font-weight:700; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tafel .tbedrag.tdeels { opacity:1; background:rgba(255,255,255,.85); color:#b3261e; border-radius:4px; padding:0 3px; }
.tafel .ttijd   { flex:0 0 auto; font-size:8px; font-weight:600; opacity:.65; white-space:nowrap; }
/* Tafelnaam op de tegel: neemt de volle breedte, breekt netjes af als hij niet past. */
.tafel .tnaam   { flex:1 1 auto; min-width:0; font-size:10px; font-weight:700; opacity:.9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; }
.tafelLarge .tnaam { font-size:12px; text-align:left; }
.tafelLarge .tinfo { justify-content:flex-start; left:10px; gap:8px; }
.tafelInUse .tinfo { color:var(--main); }
.terugKnop { background:#e74c3c; color:#fff; border-radius:6px; padding:3px 10px; font-size:13px; font-weight:700; cursor:pointer; }

/* Online / afhaal / bezorg-bestellingen */
.onlineKaart { float:left; width:calc(100% - 4px); margin:0 2px 8px; background:#fff; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.12); overflow:hidden; }
.onlineKaart.oNieuw { box-shadow:0 0 0 2px var(--accent); }
.onlineKaart .oKop { display:flex; align-items:center; gap:8px; padding:9px 11px 4px; cursor:pointer; }
.onlineKaart .oNaam { flex:1; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.onlineKaart .oTot { font-weight:700; white-space:nowrap; }
.onlineKaart .oInfo { padding:0 11px 9px; font-size:13px; color:#666; cursor:pointer; }
.oChip { display:inline-block; padding:2px 8px; border-radius:11px; font-size:12px; font-weight:700; color:#fff; flex:0 0 auto; }
.oChipAfh { background:#2e7d32; } .oChipBez { background:#1565c0; } .oChipTaf { background:#8e24aa; }
.oKnoppen { display:flex; gap:6px; padding:0 8px 8px; }
.oAccept { flex:1; background:#2e7d32; color:#fff; text-align:center; padding:12px; border-radius:6px; font-weight:700; cursor:pointer; }
.oAfwijs { width:52px; background:#e74c3c; color:#fff; text-align:center; padding:12px 0; border-radius:6px; font-weight:700; cursor:pointer; }
.tafel.module.groen { background:var(--kModuleGroen); color:#fff; }

/* Klanten / op rekening */
.klantKort { background:var(--accent); color:#fff; border-radius:11px; padding:1px 8px; font-size:12px; font-weight:700; margin-left:6px; }
/* Klant als brede tafelknop (.tafel.tafelLarge): naam links + plaats/telefoon eronder, rechts korting/saldo/edit. */
.tafel.tafelLarge.klantKnop { display:flex; align-items:center; justify-content:space-between; gap:10px; height:auto; min-height:46px; padding:7px 12px; text-align:left; overflow:visible; }
.klantKnop b { display:block; text-align:left; font-size:19px; font-weight:600; line-height:1.15; padding-top:0; overflow-wrap:anywhere; }
.klantKnop b small { display:block; float:none; width:auto; text-align:left; font-size:12px; font-weight:400; color:#e2bea0; margin-top:2px; line-height:1.15; }
.klantKnop .klantRechts { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.klantKnop .klantSaldo { color:#ffb4a8; font-weight:800; white-space:nowrap; font-size:15px; }
.klantKnop .opmBadge { width:28px; height:28px; line-height:28px; text-align:center; border-radius:50%; background:rgba(255,255,255,.18); color:#fff; font-size:14px; flex:0 0 auto; cursor:pointer; }
.klantSub { color:#9aa0a6; font-weight:400; font-style:normal; }
/* Handmatige bezorgbon: adres onder de bestelling, tikbaar om het te wijzigen. */
.bezorgBalk { display:block; box-sizing:border-box; width:calc(100% - 4px); margin:0 2px 6px; padding:9px 11px; border-radius:8px; background:#fff3e6; border:1px solid #f0d3b0; cursor:pointer; }
.bezorgBalk b { display:block; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:#b9691a; }
.bezorgBalk span { display:block; font-weight:700; overflow-wrap:anywhere; }

.klantBalk { box-sizing:border-box; width:calc(100% - 4px); margin:0 2px 6px; padding:9px 11px; border-radius:8px; background:#eef4ff; display:flex; align-items:center; justify-content:space-between; gap:8px; font-weight:700; }
.klantBalk span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* "Geopend door <naam>": een andere medewerker heeft deze tafel open. Zachte fade-in. */
.openDoor { float:left; width:calc(100% - 4px); margin:0 2px 6px; padding:8px 11px; border-radius:8px;
	background:#fff3e6; color:#b25c14; font-weight:700; font-size:14px; animation:openDoorFade .35s ease-out; }
@keyframes openDoorFade { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
/* Formulierveld: klein bovenschrift, daaronder het invoerveld. Niet floaten -- een float op
   volle breedte duwt elke volgende flex-/blokcontainer ernaast (zie de .wijk-valkuil). */
/* Buiten een kaart staat het label op de bruine wijkWrap, daar moet het licht zijn. */
.kfLabel { display:block; width:100%; margin:0 0 11px; font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:#d3bda8; font-weight:700; }
.kfKaart .kfLabel { color:#8a8f94; }
/* Alleen het bovenschrift is uppercase; de waarde en de grijze hint niet. */
.kfLabel .vrijInput { display:block; width:100%; margin:5px 0 0; padding:12px 12px; font-size:18px; font-weight:600; border:1px solid #e3e5e8; border-radius:8px; text-transform:none; letter-spacing:normal; }
.kfLabel .kbVeld.kbActief { border-color:var(--accent); box-shadow:0 0 0 3px rgba(234,127,47,.14); }

/* Een formulier staat op een witte kaart; korte velden mogen naast elkaar. */
.kfKaart { background:#fff; border-radius:10px; padding:14px 12px 4px; margin:0 2px 8px; }
.kfRij { display:flex; gap:10px; }
.kfRij .kfLabel { flex:1; min-width:0; }
/* Inklapbare sectie-knop (tafelnaam / bezorgadres): icoon + titel, chevron rechts.
   clear:both is cruciaal -- zonder komt de sectie (en de flex-velden erin) náást de gefloate
   knoppen-rij erboven en verdwijnt rechts uit beeld (zoals de oude .wijk-kop deed). */
.kortingKnop.sectieKop { clear:both; width:calc(100% - 4px); box-sizing:border-box; }
.kortingKnop.sectieKop b { display:flex; align-items:center; gap:8px; }
.kortingKnop.sectieKop .sectieChevron { font-size:12px; line-height:1; color:var(--accent); margin-left:auto; }
/* De uitklapkaart eronder ook onder de floats houden. */
.kortingKnop.sectieKop + .kfKaart { clear:both; }
.kfGroot .vrijInput { min-height:64px; }   /* opmerking: ruimte voor een paar regels */
.betaalRij .opRekeningKnop { background:#5b6bb5; }

/* Voorraad */
.vrdAantal { font-weight:800; min-width:44px; text-align:right; }
.vrdAantal.laag { color:#c62828; }
.tafel.module.geel { background:var(--kModuleGeel); color:#3a2a00; }

/* Reserveringen / agenda */
.resNav { display:flex; align-items:center; justify-content:space-between; padding:2px 4px 8px; }
.resNav b { font-size:18px; }
.resNav b small { font-weight:400; color:#9aa0a6; font-size:13px; margin-left:4px; }
.resNavKnop { width:44px; height:38px; line-height:38px; text-align:center; border-radius:6px; background:var(--accent); color:#fff; font-weight:700; flex:0 0 auto; }
.resTijd { font-weight:800; color:var(--accent); min-width:44px; }
.resStatus { font-size:11px; font-weight:700; color:#fff; padding:2px 7px; border-radius:10px; white-space:nowrap; }
.resStatRij, .resStatRij { display:flex; flex-wrap:wrap; gap:6px; padding:2px; }
.resStatKnop { font-size:13px; font-weight:700; color:#fff; padding:9px 11px; border-radius:6px; cursor:pointer; opacity:.55; }
.resStatKnop.actief { opacity:1; box-shadow:0 0 0 2px #333; }
.resBlauw { background:#3f6fb5; } .resOranje { background:var(--accent); } .resGroen { background:#2e7d32; }
.resGrijs { background:#8a8f98; } .resRood { background:#c0392b; }

/* Cadeaubon */
.betaalRij .cadeaubonKnop { background:#7245c9; }

/* Personeel / in-uitklokken */
.personeelRij.ingeklokt { border-left:4px solid #2e7d32; }
.klokKnop { font-size:13px; font-weight:700; color:#fff; padding:8px 12px; border-radius:6px; flex:0 0 auto; }
.klokKnop.in { background:#2e7d32; }
.klokKnop.uit { background:#c0392b; }

/* Bijproducten / keuzemenu */
.keuzeKnop { background:#4a6fa5; }

/* Burgbieren-toggle actieve knop */
.splitKnop.aanKeuze { background:var(--accent); opacity:1; }

/* Tijdelijke tafel */
.tafelTijdelijk { border:2px dashed var(--accent); color:var(--accent); }
/* Sub-tafel (5A, 5B, ...): staat direct achter z'n hoofdtafel, met een inset-ring als markering. */
.tafel.tafelSub { box-shadow:inset 0 0 0 2px rgba(255,255,255,.5); }
.tafel.tafelSub b { font-size:20px; }

/* Eigen schermtoetsenbord (alfa/123) in de footer */
/* Het alfa-toetsenbord is hoger dan het T9-blok. Zet de hoogte op de variabele die #footer
   én #wrapper gebruiken: anders blijft #wrapper doorlopen tot achter het toetsenbord en
   berekent iScroll maxScrollY = 0, waardoor een lange lijst niet meer te scrollen is. */
body.kbOpen { --footerHeight:280px; }
#footer.kbGroot { z-index:100000; }   /* boven een eventuele dialoog, zodat de toetsen aantikbaar blijven */
#footer .kbRij { display:flex; width:100%; padding:0 3px; }
#footer .kbKey {
	flex:1; height:60px; margin:3px; display:flex; align-items:center; justify-content:center;
	background:#2b2b2b; color:#fff; border-radius:7px; font-size:27px; font-weight:600;
	touch-action:manipulation; -webkit-user-select:none; user-select:none; cursor:pointer;
}
#footer .kbKey.kbAct { background:#454545; color:var(--accent); font-size:20px; }
#footer .kbKey.kbSpace { flex:4; font-size:17px; color:#bbb; }
#footer .kbKey.kbOk { background:#2e7d32; color:#fff; }
#footer .kbKey:active { opacity:.7; }

/* Cijferblok (bedragen, gewicht, telefoon, koppelcode): drie brede toetsen per rij, zoals
   op een telefoon. Vijf rijen i.p.v. vier, dus de footer moet een stukje hoger. */
/* Cijferblok even hoog als het qwerty-toetsenbord (footer blijft 280px). Vijf rijen i.p.v.
   vier, dus de toetsen zijn wat lager -- maar breed genoeg om blind te raken. */
#footer.kbCijfers .kbRij { max-width:420px; margin:0 auto; }
#footer.kbCijfers .kbKey { height:46px; }
#footer .kbKey.kbNum { font-size:28px; }

/* Keukenscherm (KDS) */
/* Fullscreen: het toetsenblok en de categorie-/artikelpanelen weg, de bonnenlijst over de
   volle breedte en hoogte. Op een breed scherm passen er dan meer bonnen naast elkaar. */
body.keukenFull #footer,
body.keukenFull #wrapper2,
body.keukenFull #wrapper2b { display:none !important; }
body.keukenFull #wrapper { width:100% !important; left:0 !important; top:0 !important; bottom:0 !important; }
@media only screen and (min-width:1000px) { body.keukenFull .kdsBon { width:calc(33.333% - 8px); } }
@media only screen and (min-width:1500px) { body.keukenFull .kdsBon { width:calc(25% - 8px); } }

.kdsBon { float:left; width:calc(50% - 8px); margin:4px; background:#fff; border-radius:10px; box-shadow:0 1px 4px rgba(0,0,0,.15); overflow:hidden; }
/* Spoed-regel: pulseert rood, zodat de keuken 'm van een meter afstand ziet. Spoed zit per
   regel (it.voorrang), niet op de hele bon. */
.kdsItem.spoed { animation:kdsSpoed 1s ease-in-out infinite; }
.kdsItem.spoed .kdsNaam { color:#c0392b; font-weight:800; }
@keyframes kdsSpoed { 0%,100% { background:rgba(226,59,46,.14); } 50% { background:rgba(226,59,46,.34); } }
.kdsKop { display:flex; justify-content:space-between; align-items:center; padding:9px 11px; background:#333; color:#fff; font-weight:700; }
.kdsTijd { font-weight:800; padding:2px 8px; border-radius:10px; }
.kwGroen { background:#2e7d32; } .kwOranje { background:var(--accent); } .kwRood { background:#c0392b; }
.kdsGang { padding:3px 11px; background:#f0f0f0; font-size:12px; font-weight:700; color:#666; }
.kdsItem { display:flex; align-items:center; gap:8px; padding:9px 11px; border-bottom:1px solid #eee; cursor:pointer; font-size:17px; }
.kdsItem.klaar { opacity:.45; text-decoration:line-through; }
.kdsItem.correctie { color:#c62828; }
.kdsCheck { width:22px; color:#2e7d32; font-weight:800; flex:0 0 auto; }
.kdsAantal { font-weight:800; color:var(--accent); flex:0 0 auto; }
.kdsNaam { flex:1; font-weight:600; }
.kdsOpm { padding:0 11px 4px 41px; font-size:13px; color:#777; }
.kdsKlaar { margin:6px; padding:11px; text-align:center; background:#2e7d32; color:#fff; border-radius:7px; font-weight:700; cursor:pointer; }
@media (max-width:700px) { .kdsBon { width:calc(100% - 8px); } }

/* Multi-inlog: snel-wissel-medewerkers */
/* Inlogscherm 'wie ben je': twee medewerkers naast elkaar, ruim genoeg om met een duim
   te raken. Eigen klasse, want de tafeltegels hebben een heel ander raster. */
.oberKnop {
	float:left;
	width:calc(50% - (var(--blockSpacing) * 2));
	margin:var(--blockSpacing);
	height:64px;
	display:table;
	background:var(--accent);
	color:#fff;
	border-radius:4px;
	cursor:pointer;
	overflow:hidden;
}
.oberKnop b {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
	padding:0 8px;
	font-size:22px;
	line-height:24px;
	font-weight:700;
	word-break:break-word;
}
.oberKnop:active { background:#d9701f; }

/* Long-press item-menu */
.imKnop { padding:14px; margin:6px 0 0; border-radius:7px; background:#eee; color:#222; text-align:center; font-weight:700; font-size:16px; cursor:pointer; }
.imKnop.rood { background:#e74c3c; color:#fff; }
.imKnop:active { opacity:.7; }
/* Artikel-infopopup (long-press): label links, waarde rechts. */
.aiRij { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 2px; border-bottom:1px solid #eee; }
.aiRij .aiLabel { color:#666; font-weight:600; font-size:15px; }
.aiRij .aiWaarde { font-weight:800; color:#222; font-size:17px; text-align:right; overflow-wrap:anywhere; }
/* Tafel-snelmenu: sub-tafels A/B/C/D. */
.tmSubLabel { font-size:13px; color:#888; margin:2px 0 6px; text-align:center; }
.tmSubRij { display:flex; gap:8px; margin:0 0 2px; }
.tmSub { flex:1; text-align:center; padding:14px 0; border-radius:8px; background:#eef0f2; color:#333; font-weight:800; font-size:20px; cursor:pointer; }
.tmSub:active { background:var(--accent); color:#fff; }
/* Keuzemenu (vervolgvragen): per optie een stepper -- min links, plus rechts; meerdere per vraag. */
.keuzeRij { display:flex; align-items:center; gap:10px; padding:8px; margin:5px 2px; background:#fff; border:2px solid #eee; border-radius:9px; }
.keuzeRij.aan { border-color:var(--accent); background:#fff4ec; }
.keuzeRij .keuzeMin, .keuzeRij .keuzePlus { flex:0 0 auto; width:46px; height:46px; line-height:46px; text-align:center; border-radius:8px; background:#eef0f2; color:#333; font-weight:800; font-size:26px; cursor:pointer; -webkit-user-select:none; user-select:none; }
.keuzeRij .keuzePlus { background:var(--accent); color:#fff; }
.keuzeRij .keuzeNaam { flex:1; min-width:0; font-weight:700; color:#222; font-size:16px; overflow-wrap:anywhere; cursor:pointer; padding:6px 0; }
.keuzeRij .keuzeAantal { flex:0 0 auto; min-width:26px; text-align:center; font-weight:800; font-size:20px; color:#222; }

/* QR / iDEAL-betaling */
.betaalRij .qrKnop { background:#0a7d3f; }
.qrBox { text-align:center; padding:10px; }
.qrTekst { font-size:14px; color:#555; margin-bottom:8px; }
.qrImg { width:280px; max-width:80%; height:auto; border:6px solid #fff; border-radius:8px; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.2); }

/* Instellingen — de rijen zitten in de donkerbruine .wijkWrap, dus ze krijgen een eigen
   lichte kaart-achtergrond, anders valt de donkere tekst weg tegen het bruin. */
.insRij { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 14px; margin:6px 0; background:#fff; border-radius:10px; box-shadow:0 1px 2px rgba(0,0,0,.18); cursor:pointer; }
.insRij:active { background:#f6f6f6; }
.insLabel { font-weight:700; color:#222; line-height:1.25; } .insLabel small { display:block; font-weight:400; color:#777; font-size:12.5px; margin-top:3px; }
.insSchakel { flex:0 0 auto; padding:6px 16px; border-radius:16px; background:#c2c2c2; color:#fff; font-weight:800; font-size:13px; letter-spacing:.5px; }
.insSchakel.aan { background:#2e7d32; }

/* Compacte, nette 'Bon printen'-schakelaar onderaan het afreken-scherm. */
.bonPrintRij { display:flex; align-items:center; gap:9px; width:fit-content; max-width:100%; margin:10px auto 4px;
	padding:6px 8px 6px 14px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22);
	border-radius:22px; color:#fff; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.bonPrintRij:active { background:rgba(255,255,255,.18); }
.bonPrintRij .bonPrintSvg { opacity:.9; flex:0 0 auto; }
.bonPrintRij .bonPrintLabel { font-weight:700; font-size:14px; white-space:nowrap; }
.bonSwitch { position:relative; width:42px; height:24px; border-radius:12px; background:rgba(255,255,255,.30); transition:background .15s; flex:0 0 auto; }
.bonSwitch.aan { background:#2e7d32; }
.bonSwitch .bonKnop { position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.35); transition:left .15s; }
.bonSwitch.aan .bonKnop { left:20px; }
.insInfo { cursor:default; }
.insInfo:active { background:#fff; }
.insWaarde { color:#555; font-weight:600; text-align:right; overflow-wrap:anywhere; }

/* Kleurthema-kiezer (instellingen) */
.themaKeuze { display:flex; gap:6px; margin:6px 0; }
.themaModus { flex:1 1 0; min-width:0; text-align:center; padding:12px 6px; border-radius:10px; background:#fff;
	color:#444; font-weight:700; font-size:14px; box-shadow:0 1px 2px rgba(0,0,0,.18); cursor:pointer; }
.themaModus:active { background:#f2f2f2; }
.themaModus.aan { background:var(--accent); color:#fff; box-shadow:0 1px 3px rgba(0,0,0,.28); }
.themaStalen { display:flex; flex-wrap:wrap; gap:10px; padding:10px 4px 4px; }
.themaStaal { width:40px; height:40px; border-radius:50%; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.3);
	border:3px solid transparent; }
.themaStaal.aan { border-color:#222; transform:scale(1.08); }

/* Hotel/PMS knop */
.betaalRij .hotelKnop { background:#8a5a2b; }

/* Verbinding-status (offline) */
#verbindingBadge { position:fixed; top:6px; left:50%; transform:translateX(-50%); z-index:3000; display:none;
	background:#c0392b; color:#fff; font-weight:800; font-size:14px; padding:6px 16px; border-radius:16px; box-shadow:0 2px 8px rgba(0,0,0,.35); }

/* Wisselgeld / contant */
.wisselBedrag { font-size:44px; font-weight:900; color:#2e7d32; text-align:center; padding:10px 0 6px; }
/* Compacte munten/briefjes-uitsplitsing onder het wisselgeldbedrag. */
.wisselCoupures { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:2px 4px 14px; }
.wisselChip { background:#f0f0f0; border-radius:6px; padding:6px 10px; font-size:15px; font-weight:600; color:#333; white-space:nowrap; }
.wisselChip b { color:var(--accent); }
.betaalKnop.groen { background:#2e7d32; }

/* Plattegrond: verwijder-knop */
.pTafel2.rood { background:#c0392b; }

/* Artikelknop: waarschuwing als de voorraad onder het minimum zit. */
.knop .voorraadLaag { display:block; font-size:11px; font-weight:600; color:#fff; text-shadow:0 0 3px #c62828, 0 0 2px #c62828; }
/* prijs op de artikelknop (kassa.prijsOpKnop): klein en ingetogen onder de naam */
.knop .knopPrijs { display:block; font-size:12px; font-weight:500; opacity:.8; margin-top:2px; }

/* Tafeltegel: timer naast het bedrag (V3-signaal 'hoe lang zit deze tafel er al'). */


/* Koppelscherm (pairing.js): het enige scherm dat een ongekoppeld toestel toont. */
.koppelUitleg { margin:6px 2px 10px; padding:12px; background:#fff; border-radius:6px; color:#555; font-size:14px; line-height:1.45; }
.koppelFout   { margin:6px 2px 10px; padding:12px; background:#e74c3c; color:#fff; border-radius:6px; font-weight:700; }
.koppelCode   { text-align:center; font-size:34px; font-weight:700; letter-spacing:12px; }

/* Plattegrond: het regeltje onder een tafel (bonnaam, en bij kassa.infoOpPlattegrond ook
   het aantal personen + de timer). Het hangt ONDER de tafelvorm, zodat een bezette tafel
   even groot blijft als een vrije en de vormen niet verspringen. */
.pTafel .pNr { pointer-events:none; }
.pTafel .tafelSub {
	position:absolute;
	top:100%;
	left:50%;
	transform:translateX(-50%);
	line-height:1.1;
	font-size:11px;
	font-weight:600;
	color:#fff;
	white-space:nowrap;
	text-shadow:0 1px 2px rgba(0,0,0,.85);
	pointer-events:none;
}

/* Keukenscherm: een regel waarvan de gang nog niet aan de beurt is (kassa.keukenschermPerGangTonen).
   Zichtbaar, maar gedimd en niet afvinkbaar -- de keuken werkt gang voor gang af. */
.kdsItem.wacht { opacity:.4; cursor:default; }
.kdsItem.wacht .kdsCheck { visibility:hidden; }

/* Plattegrond: een tafel die voor een reservering is aangetikt. */
.pTafel.gekozen { background-color:#27ae60 !important; box-shadow:0 0 0 3px rgba(39,174,96,.35); }
.wideButton.kiesKlaar { background:#27ae60; color:#fff; border-radius:6px; }

/* ===== Bestelzuil (zelfbestel-kiosk, zuil.js) ===== */
/* Fullscreen overlay boven de hele kassa-app; grote tap-doelen voor een staand touchscreen. */
/* z-index boven alle kassa-panelen (~60) maar ONDER de dialoog (99999) en het schermtoetsenbord
   (100000), zodat de naam-invoer en vraag()-dialogen wél over de kiosk verschijnen. */
#zuil { position:fixed; inset:0; z-index:90000; background:#f4f4f5; color:#222; font-family:rubik,arial; display:flex; flex-direction:column; overflow:hidden; -webkit-user-select:none; user-select:none; }
/* Op een kiosk mag het schermtoetsenbord de volle breedte gebruiken (de kassa-layout maakt de
   footer anders maar ~350px, wat op een staand scherm te smal is). */
body.zuilActief #footer { width:100%; left:0; }
#zuil * { box-sizing:border-box; }

/* Rustscherm */
.zRust { position:relative; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--accent); color:#fff; cursor:pointer; text-align:center; padding:40px; }
/* Geüpload startscherm: één of meer afbeeldingen vullen het vlak (cover) als crossfade-slideshow,
   met een donkere sluier zodat de tekst leesbaar blijft. Zonder afbeelding blijft het accent-vlak. */
.zRustFoto { background-color:#1c1c1e; }
.zRustLaag { position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; opacity:0; transition:opacity 1.6s ease-in-out; z-index:0; }
.zRustLaag.aan { opacity:1; }
.zRustFoto::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(rgba(0,0,0,.22), rgba(0,0,0,.58)); }
.zRustBinnen { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
.zRustZaak { font-size:40px; font-weight:800; opacity:.95; }
.zRustGroot { font-size:74px; font-weight:900; margin:24px 0 10px; letter-spacing:1px; }
.zRustTik { font-size:26px; font-weight:600; opacity:.9; animation:zTik 1.4s ease-in-out infinite; }
.zRustFoto .zRustZaak, .zRustFoto .zRustGroot, .zRustFoto .zRustTik { text-shadow:0 2px 14px rgba(0,0,0,.7); }
@keyframes zTik { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }

/* Kop + balk */
.zKop { flex:0 0 auto; background:#fff; padding:20px 24px; font-size:30px; font-weight:800; border-bottom:2px solid #eee; }
.zBalk { flex:0 0 auto; display:flex; gap:10px; padding:12px; background:#fff; border-top:2px solid #eee; }
.zBalkTerug { flex:0 0 auto; display:flex; align-items:center; padding:0 24px; border-radius:10px; background:#eceef1; color:#444; font-size:20px; font-weight:700; cursor:pointer; }
.zBalkCart { flex:1; display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-radius:10px; background:#27ae60; color:#fff; font-size:24px; font-weight:800; cursor:pointer; }
.zBalkCart.leeg { background:#c9ccd1; cursor:default; }
.zBalkAfreken { flex:1; display:flex; align-items:center; justify-content:center; padding:18px; border-radius:10px; background:#27ae60; color:#fff; font-size:26px; font-weight:800; cursor:pointer; }

/* Menu: categorieën links, artikelen rechts */
.zMenu { flex:1; display:flex; min-height:0; }
.zCats { flex:0 0 34%; overflow-y:auto; background:#fff; border-right:2px solid #eee; }
.zCat { padding:24px 20px; font-size:22px; font-weight:700; color:#555; border-bottom:1px solid #f0f0f0; cursor:pointer; }
.zCat.aan { background:#fff3e6; color:#c26a1b; border-left:6px solid var(--accent); }
.zArts { flex:1; overflow-y:auto; padding:10px; }
.zArt { position:relative; background:#fff; border-radius:12px; padding:20px 64px 20px 20px; margin:8px 4px; box-shadow:0 1px 3px rgba(0,0,0,.12); cursor:pointer; }
.zArtNaam { font-size:23px; font-weight:700; }
.zArtPrijs { font-size:20px; font-weight:700; color:var(--accent); margin-top:4px; }
.zArtPlus { position:absolute; right:16px; top:50%; transform:translateY(-50%); width:48px; height:48px; line-height:44px; text-align:center; border-radius:50%; background:var(--accent); color:#fff; font-size:32px; font-weight:700; }
/* Tegel met artikelfoto: vierkante thumbnail links, tekst ernaast. Valt de foto weg (laadfout),
   dan verbergt .zArtFoutFoto de thumbnail en oogt de tegel weer als de tekst-variant. */
.zArtMetFoto { display:flex; align-items:center; gap:16px; padding:10px 64px 10px 10px; }
.zArtFoto { flex:0 0 auto; width:90px; height:90px; border-radius:10px; overflow:hidden; background:#f0f0f0; }
.zArtFoto img { width:100%; height:100%; object-fit:cover; display:block; }
.zArtMetFoto .zArtTekst { flex:1; min-width:0; }
.zArtFoutFoto .zArtFoto { display:none; }

/* Artikel-popup */
.zPopupWrap { position:fixed; inset:0; z-index:10; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; padding:24px; }
.zPopup { width:100%; max-width:560px; max-height:90%; overflow-y:auto; background:#fff; border-radius:16px; padding:26px; }
.zPopKop { font-size:30px; font-weight:800; margin-bottom:14px; }
.zVraag { font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#8a8f94; margin:18px 0 8px; }
.zOpties { display:flex; flex-wrap:wrap; gap:8px; }
.zOptie { padding:14px 18px; border-radius:10px; background:#eceef1; font-size:20px; font-weight:600; cursor:pointer; }
.zOptie.aan { background:var(--accent); color:#fff; }
.zOptie small { font-weight:700; opacity:.85; }
.zOpm { padding:14px 16px; border-radius:10px; background:#f5f5f6; font-size:19px; min-height:52px; cursor:pointer; }
.zOpmLeeg { color:#aaa; }
.zAantalRij { display:flex; align-items:center; justify-content:center; gap:20px; margin:24px 0; }
.zAantalKnop { width:64px; height:64px; line-height:60px; text-align:center; border-radius:50%; background:#eceef1; font-size:38px; font-weight:700; cursor:pointer; }
.zAantalGetal { min-width:60px; text-align:center; font-size:34px; font-weight:800; }
.zPopKnoppen { display:flex; gap:10px; margin-top:10px; }
.zPopAnnuleer { flex:0 0 auto; padding:18px 26px; border-radius:10px; background:#eceef1; color:#444; font-size:20px; font-weight:700; cursor:pointer; }
.zPopOk { flex:1; text-align:center; padding:18px; border-radius:10px; background:#27ae60; color:#fff; font-size:22px; font-weight:800; cursor:pointer; }

/* Winkelwagen */
.zWagen { flex:1; overflow-y:auto; padding:12px; }
.zWagenLeeg { text-align:center; color:#9aa0a6; font-style:italic; font-size:22px; padding:60px 20px; }
.zRegel { display:flex; align-items:center; gap:12px; background:#fff; border-radius:12px; padding:14px 16px; margin:8px 4px; box-shadow:0 1px 3px rgba(0,0,0,.1); }
.zRegelMin, .zRegelPlus { width:48px; height:48px; line-height:44px; text-align:center; border-radius:50%; background:#eceef1; font-size:28px; font-weight:700; cursor:pointer; flex:0 0 auto; }
.zRegelAantal { min-width:34px; text-align:center; font-size:24px; font-weight:800; flex:0 0 auto; }
.zRegelNaam { flex:1; min-width:0; font-size:22px; font-weight:700; overflow-wrap:anywhere; }
.zRegelOpt { font-size:16px; font-weight:600; color:var(--accent); margin-top:2px; }
.zRegelOpt.zRegelOpm { color:#c26a1b; font-style:italic; }
.zRegelPrijs { font-size:22px; font-weight:800; white-space:nowrap; flex:0 0 auto; }
.zRegelWeg { font-size:26px; cursor:pointer; flex:0 0 auto; padding:0 4px; }
.zTotaal { display:flex; justify-content:space-between; background:#2b1708; color:#fff; border-radius:12px; padding:20px 22px; margin:14px 4px 4px; font-size:28px; font-weight:800; }
.zTotaal span:last-child { color:var(--accent); }

/* Afrekenscherm */
.zAfreken { flex:1; overflow-y:auto; padding:24px; }
.zAfrekenVraag { font-size:26px; font-weight:800; margin:18px 0 12px; }
.zNaamVeld { display:block; }
.zNaamVeld .vrijInput { font-size:26px; padding:20px; }
.zEetKeuze { display:flex; gap:14px; margin-top:8px; }
.zEet { flex:1; text-align:center; padding:34px 16px; border-radius:14px; background:var(--accent); color:#fff; font-size:26px; font-weight:800; cursor:pointer; }

/* Betaalmethode kiezen */
.zBetaalKeuze { flex:1; overflow-y:auto; padding:24px; display:flex; flex-direction:column; gap:14px; }
.zBetaalMethode { padding:34px 24px; border-radius:14px; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.12); font-size:28px; font-weight:800; text-align:center; cursor:pointer; }

/* Betaalscherm */
.zBetaal { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; }
.zPinIcoon { font-size:90px; margin:10px 0; }
.zBetaalBedrag { font-size:52px; font-weight:900; color:var(--accent); }
.zBetaalTekst { font-size:26px; font-weight:600; margin:16px 0 22px; }
.zQr { width:300px; height:300px; max-width:70vw; max-height:70vw; border:8px solid #fff; border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,.2); }
.zBetaalWacht { font-size:22px; color:#888; margin-top:22px; }

/* Bedankt */
.zBedankt { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:#27ae60; color:#fff; padding:40px; }
.zBedanktCheck { width:120px; height:120px; line-height:116px; border-radius:50%; background:rgba(255,255,255,.2); font-size:70px; animation:zPop .4s ease-out; }
@keyframes zPop { from{ transform:scale(.4); opacity:0; } to{ transform:scale(1); opacity:1; } }
.zBedanktGroot { font-size:52px; font-weight:900; margin:24px 0 8px; }
.zBedanktTekst { font-size:24px; opacity:.95; }
.zBedanktNr { margin-top:30px; background:rgba(255,255,255,.15); border-radius:16px; padding:20px 40px; }
.zBedanktNr span { display:block; font-size:20px; font-weight:600; opacity:.9; }
.zBedanktNr b { display:block; font-size:80px; font-weight:900; line-height:1; }
.zBedanktNaam { margin-top:16px; font-size:28px; font-weight:700; }

/* ===== Afhaal-/oproepscherm (toestelrol 'afhaalscherm') ===== */
/* Klantgericht fullscreen bord: twee kolommen 'In de maak' / 'Klaar om af te halen'. */
body.afhaalActief #footer,
body.afhaalActief #wrapper,
body.afhaalActief #wrapper2,
body.afhaalActief #wrapper2b { display:none !important; }
#afhaal { position:fixed; inset:0; z-index:5000; background:var(--bg); color:#fff; display:flex; flex-direction:column; overflow:hidden; }
.afHead { flex:0 0 auto; padding:16px 24px 8px; text-align:center; }
.afZaak { font-size:32px; font-weight:800; letter-spacing:.02em; color:var(--accent); }
.afKolommen { flex:1 1 auto; display:flex; gap:16px; padding:12px 20px 20px; min-height:0; }
.afKolom { flex:1 1 0; display:flex; flex-direction:column; background:rgba(255,255,255,.05); border-radius:16px; overflow:hidden; min-width:0; }
.afKop { flex:0 0 auto; padding:14px; text-align:center; font-size:26px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.afKolMaak .afKop { background:rgba(234,127,47,.22); color:#ffcc99; }
.afKolKlaar .afKop { background:rgba(39,174,96,.30); color:#c4f3d3; }
.afLijst { flex:1 1 auto; overflow:auto; padding:16px; display:flex; flex-wrap:wrap; gap:12px; align-content:flex-start; justify-content:center; }
.afKaart { min-width:140px; max-width:100%; padding:14px 22px; border-radius:14px; background:rgba(255,255,255,.10); text-align:center; display:flex; flex-direction:column; align-items:center; gap:2px; }
.afKaart .afGroot { font-size:52px; font-weight:900; line-height:1; overflow-wrap:anywhere; }
.afKaart.afNaam .afGroot { font-size:32px; }
.afKaart .afSub { font-size:19px; font-weight:700; opacity:.6; }
.afKaart.afKlaar { background:#27ae60; color:#fff; box-shadow:0 4px 18px rgba(39,174,96,.4); }
.afKaart.afKlaar .afSub { opacity:.85; }
.afLeeg { margin:auto; font-size:44px; opacity:.22; }