/* ===================================================================
   Smaakverzet Order System - Shared Stylesheet
   Version: 10.6 - Finale Positionering
   - POSITIE: Logo en stempel zijn omhoog verplaatst.
   - POSITIE: Popup is nu onderaan gepositioneerd, met ademruimte.
   - VERWIJDERD: Alle 'grab' en 'drag' gerelateerde CSS is verwijderd.
   =================================================================== */

:root { --font-family-primary: sans-serif; --primary-color: #909090; --background-color: #1a1a1a; --text-color: #f0f0f0; --dark-grey: #2c2c2c; --light-grey: #f0f0f0; --header-text-color: #f0f0f0; --logo-height: 55px; --menu-max-width: 85%; --column-min-width: 300px; --column-gap: 2rem; }
.hidden { display: none !important; }
html, body { height: 100%; margin: 0; font-family: var(--font-family-primary, sans-serif); }
body { background-color: var(--background-color); color: var(--text-color); display: flex; flex-direction: column; min-height: 100vh; box-sizing: border-box; }

/* --- HOME PAGE (index.html) --- */
body.index-page { background-color: black; }
.background-container { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; z-index: 1; }
/* [AANGEPAST] Logo omhoog verplaatst */
#background-logo { width: 45%; height: auto; object-fit: contain; position: absolute; z-index: 2; transform: translateY(-50px); }
#closed-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; display: flex; justify-content: center; align-items: center; z-index: 3; }
/* [AANGEPAST] Stempel omhoog verplaatst, gesynchroniseerd met logo */
#closed-stamp { max-width: 45%; height: auto; transform: translate(120px, -150px); z-index: 4; }
body > #language-switcher-container { position: fixed; top: 1rem; right: 1rem; z-index: 2100; }

/* --- LOADING SPINNERS --- */
.loading-spinner { width: 40px; height: 40px; border: 4px solid var(--dark-grey); border-top-color: var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; }
.loading-spinner-small { display: inline-block; width: 24px; height: 24px; border: 3px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#loading-indicator { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: var(--background-color); z-index: 10000; opacity: 1; }
body:not(.is-loading) #loading-indicator { opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }

/* --- MENU PAGE --- */
#app-wrapper { width: 100%; display: flex; flex-direction: column; flex-grow: 1; padding-bottom: 70px; box-sizing: border-box; }
header { display: flex; justify-content: center; align-items: center; background-color: var(--primary-color); padding: 0.3rem 0; box-sizing: border-box; flex-shrink: 0; position: relative; z-index: 100; }
#client-logo { height: var(--logo-height); width: auto; vertical-align: middle; cursor: pointer; }
header #language-switcher-container { display: none; }
main { padding: 1rem; box-sizing: border-box; flex: 1; }
footer { padding: 0.25rem 0; text-align: center; font-size: 0.7em; color: #888; background-color: var(--background-color); position: fixed; bottom: 0; width: 100%; z-index: 1001; }

#marquee-container { background-color: var(--marquee-bg-color); color: var(--marquee-text-color); overflow: hidden; display: flex; min-height: 1.5em; padding: 0.2em 0; }
#marquee-text { display: flex; flex-shrink: 0; animation: marquee-scroll var(--marquee-speed, 20s) linear infinite; will-change: transform; }
.marquee-segment { flex-shrink: 0; white-space: nowrap; padding-right: var(--marquee-gap, 100px); }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

#menu-container { display: flex; flex-wrap: wrap; gap: var(--column-gap); margin: 0 auto; padding: 0; width: 100%; max-width: var(--menu-max-width); justify-content: center; align-items: flex-start; }
.menu-column { flex: 1; min-width: var(--column-min-width); align-self: flex-start; }
.category-title-compact { font-size: 1.2em; font-weight: bold; color: var(--text-color-category, var(--primary-color)); margin-top: 0.5rem; padding-bottom: 0.3rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--category-line-color); }
.menu-list-compact { list-style: none; padding: 0; margin: 0; }
.menu-item-compact { margin-bottom: 0.7rem; }
.item-header { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.item-header h3 { margin: 0; font-size: 0.95em; font-weight: normal; }
.item-header .price { margin: 0; font-size: 0.95em; white-space: nowrap; }
.menu-item-compact p { margin: 4px 0 0 0; font-size: 0.75em; color: var(--light-grey); line-height: 1.3; }
.item-badge { font-size: 0.8em; }
.price-separator { color: var(--price-separator-color); padding: 0 0.6rem; }
.menu-item-compact.interactive { cursor: pointer; transition: background-color 0.2s; }
.menu-item-compact.interactive:hover { background-color: var(--dark-grey); }

/* --- POPUPS --- */
#order-item-popup, #language-selection-popup { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); justify-content: center; align-items: center; padding: 1rem; box-sizing: border-box; }
#order-item-popup:not(.hidden), #language-selection-popup:not(.hidden) { display: flex; }
.popup-content-small { background-color: var(--dark-grey); padding: 25px; border-radius: 8px; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.5); width: 90%; max-width: 350px; }
.popup-content-small h3 { margin-top: 0; color: var(--primary-color); }
.popup-content-small p { margin-bottom: 20px; }
.popup-content-small button, .popup-content-small a.button { background-color: var(--primary-color); color: var(--header-text-color); border: none; padding: 12px 25px; font-size: 1em; font-weight: bold; border-radius: 5px; cursor: pointer; width: 100%; margin-top: 5px; text-decoration: none; display: inline-block; box-sizing: border-box; }
#popup-item-options { display: flex; flex-direction: column; gap: 10px; }
#cancel-order-item-button { background-color: #555 !important; }

/* [AANGEPAST] Finale positionering voor de index-pagina popup */
#info-popup { display: flex; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: transparent; /* [AANGEPAST] Hier kunt u de positie van de popup aanpassen. */ justify-content: center; align-items: flex-end; /* Verticaal onderaan uitlijnen */ padding-bottom: 8vh; /* Ademruimte vanaf de onderkant */ pointer-events: none; }
#info-popup .popup-content-small { display: inline-block; width: auto; max-width: 90%; position: relative; pointer-events: auto; background-color: rgba(44, 44, 44, 0.95); }
#info-popup .popup-content-small button, #info-popup .popup-content-small a.button { width: auto; min-width: 120px; }

/* TAAL-SWITCHER */
#language-switcher-container { display: flex; align-items: center; gap: 0.75rem; background-color: rgba(44, 44, 44, 0.5); padding: 5px 10px; border-radius: 8px; }
.language-option { font-size: 1.8rem; text-decoration: none; opacity: 0.4; transition: opacity 0.2s ease; cursor: pointer; line-height: 1; }
.language-option.active { opacity: 1; }
.language-separator { color: rgba(255,255,255,0.4); }
#current-language-display, #language-options-list { display: none; }

/* --- ORDER BALK --- */
#order-bar { position: fixed; bottom: 0; left: 0; width: 100%; background-color: var(--dark-grey); box-shadow: 0 -2px 10px rgba(0,0,0,0.5); z-index: 1002; display: flex; flex-direction: column; transition: transform 0.3s ease-in-out; }
#order-bar.hidden { transform: translateY(100%); }
#order-summary-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; cursor: pointer; border-bottom: 1px solid #444; }
#order-summary-header span { font-weight: bold; }
.toggle-icon { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 8px solid var(--text-color); transition: transform 0.3s ease; transform: rotate(180deg); }
#order-bar.is-expanded .toggle-icon { transform: rotate(0deg); }
#order-items-wrapper { overflow-y: auto; max-height: 0; transition: max-height 0.3s ease-out; }
#order-bar.is-expanded #order-items-wrapper { max-height: 150px; }
#order-items-list { list-style: none; margin: 0; padding: 10px 15px; }
#order-items-list li { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.item-name { flex-grow: 1; }
.item-controls { display: flex; align-items: center; gap: 10px; }
.cart-btn { background: none; border: 1px solid var(--primary-color); color: var(--primary-color); border-radius: 50%; width: 24px; height: 24px; text-align: center; cursor: pointer; font-weight: bold; }
#order-total-section { display: flex; justify-content: space-between; align-items: center; background-color: #111; padding: 12px 15px; gap: 10px; }
#order-total { font-weight: bold; font-size: 1.1em; flex-grow: 1; text-align: center; }
#place-order-button { padding: 10px 20px; font-size: 1em; font-weight: bold; border-radius: 5px; cursor: pointer; }
#place-order-button.disabled { background-color: #555; color: #888; cursor: not-allowed; }
#clear-order-button { background: none; border: 1px solid #555; color: #888; width: 28px; height: 28px; border-radius: 50%; font-size: 18px; cursor: pointer; padding: 0; }

@media (max-width: 768px) {
    #background-logo, #closed-stamp { width: 80%; }
    #closed-stamp { transform: translate(60px, -50px); }
    main { padding: 0.5rem 1rem; }
    #menu-container { flex-direction: column; gap: 0; max-width: 100% !important; }
    .menu-column { width: 100%; min-width: unset; }
}