/* Cuissonier Tafel: crème tafel op de groene sectie. De vorm komt uit het thema (q101 tot q123);
   hier alleen de kleuren en de foto. Vier klassen diep, zodat dit boven .q101.q101.q101 van het thema wint. */

.cq-tafel-host { position: relative; }

/* Tafelblad */
.cq-tafel.tabletop.q101.q101 {
  background: #F7F1E6;
  box-shadow: 0 40px 80px rgba(6, 30, 26, .35), inset 0 0 0 1px rgba(18, 70, 60, .08);
}

/* Foto op een bord */
.cq-tafel .cq-tf-img {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Bord van een gast: witte rand, zachtere schaduw op crème */
.cq-tafel .seats .plate.q103.q103 {
  background: #FFFFFF;
  box-shadow: 0 16px 30px rgba(18, 70, 60, .18);
}

/* Vrij bord */
.cq-tafel .seats .plate.q108.q108 {
  border-color: rgba(18, 70, 60, .35);
  background: rgba(18, 70, 60, .05);
}

/* Naamkaartjes */
.cq-tafel .seat .name.guest.q107 { background: #FFFFFF; color: #12463C; box-shadow: 0 8px 16px rgba(18, 70, 60, .14); }
.cq-tafel .seat[aria-pressed="true"] .name.guest.q107 { background: #FFA600; color: #12463C; }
.cq-tafel .seat .name.free.q111 { background: transparent; color: #12463C; border-color: #FFA600; }
.cq-tafel .seat[aria-pressed="true"] .name.free.q111 { background: #FFA600; color: #12463C; }

/* Middenbalk met kaarsjes */
.cq-tafel .seats .strip.q113.q113 { background: rgba(18, 70, 60, .06); }
.cq-tafel .seats .strip .q114.q114 { border-color: rgba(18, 70, 60, .4); }
.cq-tafel .seats .strip .q115.q115 { box-shadow: 0 0 0 7px rgba(255, 166, 0, .16), 0 0 24px 8px rgba(255, 166, 0, .28); }

/* Focusrand: groen in plaats van oranje, beter zichtbaar op crème */
.cq-tafel .seat:focus-visible { outline-color: #12463C; }

/* Mobiel en tablet (geen pop-up): de review staat onder de tafel in een crème kaart,
   zodat hij ook op de groene sectie leesbaar is. */
section:not(.cq-pop) .cq-tafel-host .cq-quotes.q117 {
  margin-top: 32px; min-height: 0; padding: 28px 24px 26px;
  background: #F7F1E6; color: #2B2B2B;
  border-top: 3px solid #FFA600; border-radius: 18px;
  box-shadow: 0 18px 40px rgba(6, 30, 26, .25);
}
section:not(.cq-pop) .cq-tafel-host .quote-xl.q119 { font-size: 1.3rem !important; line-height: 1.5; color: #12463C; }
section:not(.cq-pop) .cq-tafel-host .quote-xl.q121 { font-size: 1.7rem; color: #12463C; }
section:not(.cq-pop) .cq-tafel-host .q120.q120 { margin-top: 16px; }
section:not(.cq-pop) .cq-tafel-host .q122.q122 { margin-top: 14px; font-size: 16px; color: #2B2B2B; }

/* Telefoon en tablet (31 okt, avond): review als pop-up onderin het scherm. */
section.cq-sheet-mode .cq-tafel-host .cq-quotes.q117 {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1000;
  margin: 0; max-height: 75vh; overflow: auto; padding: 40px 24px 26px;
  transform: translateY(calc(100% + 24px)); visibility: hidden;
  transition: transform .3s ease, visibility 0s .3s;
}
section.cq-sheet-mode .cq-tafel-host .cq-quotes.q117.is-open {
  transform: none; visibility: visible; transition: transform .3s ease, visibility 0s;
}
.cq-tf-shade { position: fixed; inset: 0; z-index: 999; background: rgba(6, 30, 26, .45); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
.cq-tf-shade.is-open { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; }
.cq-tf-close {
  position: absolute; top: 8px; right: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: transparent; color: #12463C; font-size: 28px; line-height: 1; cursor: pointer;
}
.cq-tf-close:focus-visible { outline: 3px solid #FFA600; outline-offset: 0; }
@media (prefers-reduced-motion: reduce) {
  section.cq-sheet-mode .cq-tafel-host .cq-quotes.q117, .cq-tf-shade { transition: none; }
}