/* ===================== Design tokens ===================== */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);

  --topbar-h: 48px;
  --catbar-h: 56px;
  --total-h:  28px;

  --price-w: 86px;
  --qty-w:   36px;
  --gap:      8px;
  --row-pad: 10px;
  --radius:  12px;
  --btn-size: 36px;

  --green:   #4caf50;

  /* Onderknop (één vaste zone) */
  --btn-h:   56px;

  --banner-offset: calc(var(--safe-top) + var(--topbar-h) + var(--catbar-h) + var(--total-h) + 8px);
}

/* ===================== Base / mobiele scroll fix ===================== */
html, body{
  margin:0; padding:0; background:#fff; font-family: Arial, sans-serif;
  -webkit-text-size-adjust:100%;
  height: 100vh;                 /* fallback */
  overflow: hidden;              /* body mag NIET scrollen */
  overscroll-behavior: none;     /* geen bounce/chain naar viewport */
  overflow-x: clip;              /* voorkom horizontale micro-scroll */
}
@supports (height: 100svh){
  html, body{ height: 100svh; }  /* correcte mobiele viewport hoogte */
}


.order-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10050;
  opacity: 0;
  transition: opacity .25s ease;
}

.order-overlay.show { opacity: 1; }

.order-overlay-card {
  background: #fff;
  border-radius: 14px;
  padding: 28px 24px;
  text-align: center;
  max-width: 90%;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
}

.order-overlay-check {
  font-size: 54px;
  color: #27ae60;
  font-weight: 700;
  margin-bottom: 10px;
}

.order-overlay-msg {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}

.order-overlay-sub {
  font-size: 14px;
  color: #555;
}


.hidden{ display:none !important; }

/* ===================== Top bar ===================== */
.top-container{ background:#f2f2f2; padding:0; text-align:center; margin:0; flex-shrink:0; }
.back-btn,#backButton{
  position:fixed; top:var(--safe-top); left:0; right:0; height:var(--topbar-h);
  display:flex; align-items:center; justify-content:center; margin:0; border:0; border-radius:0;
  padding:0 12px; background:var(--green); color:#fff; cursor:pointer; font-weight:700;
  font-size: clamp(16px, 7.5vw, 22px); white-space:nowrap; z-index:999;
}

/* ===================== Category bar ===================== */
.category-buttons-container{
  margin-top: calc(var(--safe-top) + var(--topbar-h));
  padding:6px 8px 8px; overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch; touch-action:pan-x;
}
.category-buttons{ display:flex; gap:8px; justify-content:flex-start; }
.category-button{
  font-family: Segoe UI, sans-serif; padding:8px 14px; background:#f2f2f2; cursor:pointer;
  font-weight:700; font-size: clamp(14px, 6.5vw, 20px); color:darkblue; border:0; border-radius:5px;
  white-space:nowrap; flex:0 0 auto;
}

/* ===================== Totaal ===================== */
.total-price{ text-align:right; padding:4px 12px 0; font-weight:800; color:#111; }

/* ===================== Scroll area ===================== */
/* Standaard: volle hoogte tot onderaan (géén onderknop) */
.scrollable-container{
  position: fixed;
  left: 0; right: 0;
  top: calc(var(--safe-top) + var(--topbar-h) + var(--catbar-h) + var(--total-h));
  bottom: 0;                       /* geen reservering */
  padding: 10px;
  background: transparent; z-index: 1;

  overflow-y: auto; overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;  /* scroll chain stopt hier */
  touch-action: pan-y;
}

/* Wanneer er ECHT een onderknop is, reserveer 1 knop-hoogte */
.has-order .scrollable-container,
.has-toggle .scrollable-container{
  bottom: calc(var(--btn-h) + var(--safe-bot));
}

/* Visuele scrollbar weg (optioneel) */
.scrollable-container::-webkit-scrollbar{ width: 0; height: 0; }
.scrollable-container{ scrollbar-width: none; }

/* ===================== Lijsten ===================== */
.product-list,.order-list{ list-style:none; margin:0; padding:0; }

.product-item,.modifier-item,.order-item{
  display:flex; align-items:center; justify-content:space-between; gap:var(--gap);
  padding:var(--row-pad); margin:6px 0; background:#f9f9f9; border-radius:var(--radius);
  box-sizing:border-box; width:100%;
}

.product-details,.modifier-details,.order-item-details{
  flex:1 1 auto; display:grid; align-items:center; column-gap:var(--gap);
  grid-template-columns:minmax(0,1fr) var(--price-w) var(--qty-w); min-width:0;
}

.order-list-container .modifier-item.in-order .modifier-details{
  grid-template-columns: minmax(0,1fr) var(--qty-w) !important;
}
.order-list-container .modifier-item.in-order .modifier-quantity{ text-align: right; }

.product-name,.modifier-name,.order-item-name{
  min-width:0; white-space:normal; overflow-wrap:break-word; word-break:normal;
  hyphens:auto; -webkit-hyphens:auto; font-weight:400;
}

.product-price,.modifier-price{ text-align:right; width:var(--price-w); font-weight:400; }
.product-quantity,.modifier-quantity,.order-item-quantity{ text-align:center; width:var(--qty-w); font-weight:400; }

.modifier-item .modifier-name{ font-weight:700; font-style:italic; }

/* ===================== Qty buttons ===================== */
.quantity-buttons{ display:flex; align-items:center; justify-content:center; gap:8px; }
.quantity-button{
  width:var(--btn-size); height:var(--btn-size); border:0; border-radius:6px;
  font-weight:700; cursor:pointer; color:#fff; font-size: clamp(16px, 5vw, 20px);
}
.quantity-button.plus{ background:#000; }
.quantity-button.minus{ background:gray; }
/* Alleen groen/rood als .active gezet wordt door JS bij qty>0 */
.quantity-button.plus.active{ background:green; }
.quantity-button.minus.active{ background:red; }

/* ===================== Order list layout ===================== */
.order-item{ display:grid !important; grid-template-columns:1fr auto; align-items:center; column-gap:8px; }
.order-item-details{ display:grid !important; grid-template-columns:1fr auto; align-items:center; column-gap:6px; min-width:0; }
.order-item-buttons{ display:flex !important; align-items:center; justify-content:flex-end; gap:8px; white-space:nowrap; flex:0 0 auto; }

.order-list-container .modifier-item{
  display:grid !important; grid-template-columns:1fr auto; align-items:center; column-gap:8px; padding-left: 16px;
}
.order-list-container .modifier-details{
  display:grid !important; grid-template-columns:minmax(0,1fr) var(--qty-w); align-items:center; column-gap:6px; min-width:0;
}
.order-list-container .modifier-quantity{ text-align:right; width:var(--qty-w); }

/* ===================== Onderknoppen (één vaste plek) ===================== */
/* Bestellen-knop (zichtbaar op bestellijst) */
.order-summary{
  position: fixed;
  left: 0; right: 0;
  bottom: var(--safe-bot);
  padding: 0;
  background: transparent;
  z-index: 4;
}
.order-button{
  width: 100%;
  height: var(--btn-h);
  border: 0;
  border-radius: 0;
  padding: 0 12px;
  font-weight: 900;
  font-size: clamp(18px, 5.5vw, 22px);
  text-align: center;
  cursor: pointer;
  background: var(--green);
  color: #fff;
  -webkit-appearance: none; appearance: none;
}

/* “Keuzes zonder Extra” (zichtbaar op modifiers) */
#toggleModifiersButton{
  position: fixed !important;
  left: 0; right: 0;
  bottom: var(--safe-bot);
  z-index: 5;
  height: var(--btn-h);
  border: 0;
  border-radius: 0;
  padding: 0 12px;
  font-weight: 900;
  font-size: clamp(18px, 5.5vw, 22px);
  text-align: center;
  cursor: pointer;
  background: var(--green);
  color: #fff;
  -webkit-appearance: none; appearance: none;
}

/* ===================== Notice / highlights ===================== */
.notice-banner{
  position:fixed; top:var(--banner-offset); left:8px; right:8px; z-index:500;
  padding:12px 14px; border-radius:8px; background:#fffbe6; border:1px solid #ffe58f;
  color:#614700; font-weight:800; box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.order-item.highlight,.modifier-item.highlight{
  animation:hiFlash 1.2s ease-in-out 2; outline:2px solid #1890ff; background:#e6f7ff!important;
}
@keyframes hiFlash{0%{background:#e6f7ff}50%{background:#fff}100%{background:#e6f7ff}}

/* ===================== Splash/logo ===================== */
.splash{ position:fixed; inset:0; z-index:1200; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; }
.logo{ width:50%; max-width:420px; margin:24px auto; display:block; }
.c-green{ color: green; } .c-red{ color: red; }

/* ===================== Company badge ===================== */
.company-badge{
  position: fixed;
  top: calc(var(--safe-top) + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.08);
  color: #111;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  z-index: 1200;
  backdrop-filter: saturate(1.2) blur(2px);
  -webkit-backdrop-filter: saturate(1.2) blur(2px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.company-badge small{ opacity: .7; font-weight:600; margin-right:6px; }

/* ===================== Responsiveness ===================== */
@media (orientation:landscape){
  :root{ --topbar-h:44px; }
}
@media (max-width:390px){
  :root{ --price-w:74px; --qty-w:32px; --gap:6px; }
  .product-price,.modifier-price, .product-quantity,.modifier-quantity{ font-size:.95em; }
}
@media (max-width:360px){
  :root{ --price-w:70px; --qty-w:30px; --gap:6px; --btn-h:50px; }
}

/* Zorg dat grid-items niet uitrekken */
.product-details>*, .modifier-details>*, .order-item-details>*{ min-width:0; }

/* ====== Menu verbergen op Bestellijst en Modifiers ====== */
.no-cat .category-buttons-container,
.no-cat .total-price{ display: none !important; }
.no-cat .scrollable-container{
  top: calc(var(--safe-top) + var(--topbar-h)); /* geen catbar + geen total */
}