/* Wspólny styl karuzeli menu. Możesz zmieniać kolory w zmiennych poniżej. */
[data-menu-carousel] {
  --mc-text-muted: #717568;
  --mc-pill-border: #e6e4da;
  --mc-card-shadow: rgba(24, 32, 20, .14);
  --mc-radius-card: 22px;
  --mc-nav-btn-size: 42px;
  box-sizing: border-box;
  display: block;
  margin: 0 auto;
  max-width: 1240px;
  padding: 8px 0 0;
}

[data-menu-carousel] *, [data-menu-carousel] *::before, [data-menu-carousel] *::after { box-sizing: border-box; }
.mc-wrap { position: relative; }

.mc-track {
  --mc-cards-visible: 3;
  --mc-gap: 22px;
  display: flex;
  gap: var(--mc-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 6px 2px 10px;
  scrollbar-width: none;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  touch-action: pan-y;
  user-select: none;
  -webkit-overflow-scrolling: touch;
  -webkit-user-drag: none;
}
.mc-track::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) { .mc-track { cursor: grab; } }
.mc-track.mc-is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.mc-track:focus-visible { border-radius: 12px; outline: 2px solid var(--accent-1); outline-offset: 4px; }

@media (max-width: 1023px) { .mc-track { --mc-cards-visible: 2; --mc-gap: 18px; } }
@media (max-width: 639px) { .mc-track { --mc-cards-visible: 1; --mc-gap: 14px; } }

.mc-card, .mc-skel-card {
  background: var(--light-background);
  border-radius: var(--mc-radius-card);
  flex: 0 0 auto;
  overflow: hidden;
  scroll-snap-align: start;
  width: calc((100% - (var(--mc-cards-visible) - 1) * var(--mc-gap)) / var(--mc-cards-visible));
}
.mc-card-header {
  align-items: center;
  background: var(--accent-1);
  color: #fdfdfa;
  display: flex;
  font-size: var(--font-md);
  font-weight: 600;
  gap: 8px;
  justify-content: center;
  padding: 12px 22px;
  text-align: center;
}
.mc-today-label { color: var(--accent-2); white-space: nowrap; }
.mc-today-dot { background: var(--accent-4); border-radius: 50%; flex: 0 0 auto; height: 5px; width: 5px; }
.mc-card-body { padding: 28px; }
.mc-meal { padding: 12px 0; text-align: center; }
.mc-meal + .mc-meal { border-top: 1px solid var(--mc-pill-border); }
.mc-meal-type { font-size: var(--font-xs); color: var(--accent-3); font-weight: 600; letter-spacing: .01em; margin: 0 0 6px; opacity: .8; }
.mc-meal-name { font-size: var(--font-sm); font-weight: 700; color: var(--color-primary); line-height: 1.35; margin: 0 0 10px; }
.mc-serving { color: var(--mc-text-muted); font-size: 12px; margin: 8px 0 0; }
.mc-no-menu { padding: 20px 0; text-align: center; }
.mc-rating { align-items: center; background: #fff; border: 1px solid var(--mc-pill-border); border-radius: 999px; color: var(--color-primary); display: inline-flex; font-size: var(--font-xs); font-weight: 600; gap: 5px; padding: 2px 8px; }
.mc-rating svg { fill: #f0b429; height: 13px; width: 13px; }

.mc-nav-btn {
  align-items: center;
  background: var(--accent-1);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 10px 22px var(--mc-card-shadow);
  color: #fdfdfa;
  cursor: pointer;
  display: flex;
  height: var(--mc-nav-btn-size);
  justify-content: center;
  margin-top: calc(var(--mc-nav-btn-size) / -2);
  position: absolute;
  top: 50%;
  transition: transform .15s ease, opacity .2s ease, background .15s ease;
  width: var(--mc-nav-btn-size);
  z-index: 2;
}
.mc-nav-btn:hover { background: var(--accent-1); transform: scale(1.07); }
.mc-nav-btn:active { transform: scale(.94); }
.mc-nav-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.mc-nav-btn svg { height: 19px; width: 19px; }
.mc-next { right: -12px; }
.mc-prev { left: -12px; }
.mc-nav-btn:disabled { opacity: 0; pointer-events: none; transform: scale(.8); }
@media (max-width: 639px) {
  .mc-nav-btn { --mc-nav-btn-size: 40px; }
  .mc-next { right: -12px; }
  .mc-prev { left: -12px; }
}

.mc-dots { display: flex; gap: 7px; justify-content: center; margin-top: 6px; }
.mc-dot { background: var(--light-border); border: 0; border-radius: 50%; cursor: pointer; height: 7px; padding: 0; transition: width .25s ease, background .25s ease; width: 7px; }
.mc-dot.mc-active { background: var(--accent-1); border-radius: 4px; width: 22px; }
.mc-dot:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 3px; }

.mc-skel-card { box-shadow: 0 10px 30px var(--mc-card-shadow); }
.mc-skel-header { animation: mc-shimmer 1.4s infinite; background: linear-gradient(90deg, #33452f, #2b3c2c, #33452f); background-size: 200% 100%; height: 66px; }
.mc-skel-body { padding: 22px; }
.mc-skel-line { animation: mc-shimmer 1.4s infinite; background: linear-gradient(90deg, #e9e7de, #f4f2ec, #e9e7de); background-size: 200% 100%; border-radius: 6px; height: 12px; margin: 0 auto 12px; }
@keyframes mc-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.mc-error { background: var(--light-background); border-radius: var(--mc-radius-card); box-shadow: 0 10px 30px var(--mc-card-shadow); padding: 44px 20px; text-align: center; width: 100%; }
.mc-error p { font-size: 14px; margin: 0 0 14px; }
.mc-retry { background: var(--accent-1); border: 0; border-radius: 999px; color: #fff; cursor: pointer; font-size: 13px; font-weight: 600; padding: 9px 18px; }
.mc-retry:hover { background: var(--accent-1); }

@media (prefers-reduced-motion: reduce) {
  .mc-track { scroll-behavior: auto; }
  .mc-nav-btn, .mc-dot { transition: none; }
  .mc-skel-header, .mc-skel-line { animation: none; }
}