/* =========================================================================
   Caterings Menu CZ — widget Elementora (jasny motyw wg Figmy)
   Oliwka #c8c84a, czerwień #f0203d, plakietka #bfe8ff/#1f5d8a.
   Fonty: Rubik (nagłówki/etykiety) + Montserrat (treść).
   ========================================================================= */

.cmecz-menu {
    --cmecz-primary: #c8c84a;
    --cmecz-primary-dark: #b3b33f;
    --cmecz-accent: #f0203d;
    --cmecz-accent-dark: #8c1023;
    --cmecz-badge-bg: #bfe8ff;
    --cmecz-badge-text: #1f5d8a;
    --cmecz-text: #333333;
    --cmecz-muted: #595959;
    --cmecz-line: #e5e5e5;
    --cmecz-card: #ffffff;

    padding: 40px 0;
    box-sizing: border-box;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--cmecz-text);
}

.cmecz-menu *,
.cmecz-menu *::before,
.cmecz-menu *::after { box-sizing: border-box; }

.cmecz-menu__container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ---- Nagłówek ---- */
.cmecz-menu__title {
    margin: 0 0 32px;
    text-align: center;
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    font-size: 34px;
    line-height: 1.2;
    color: var(--cmecz-text);
}

/* ---- Wybór diet (pigułki) ---- */
.cmecz-menu__diets {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    max-width: 1216px;
    margin: 0 auto 36px;
}

.cmecz-menu__diet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 24px;
    border-radius: 999px;
    border: 1.5px solid rgba(51, 51, 51, .45);
    background: transparent;
    color: var(--cmecz-text);
    font-family: 'Rubik', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: all .2s;
    cursor: pointer;
}
.cmecz-menu__diet:hover { border-color: var(--cmecz-primary-dark); color: var(--cmecz-text); }
.cmecz-menu__diet.is-active {
    background: var(--cmecz-primary);
    border-color: var(--cmecz-primary-dark);
    color: var(--cmecz-text);
}

/* ---- Wybór diety (dropdown — mobile) ---- */
.cmecz-menu__diets-mobile { display: none; max-width: 520px; margin: 0 auto 32px; }
.cmecz-menu__diets-label {
    display: block;
    margin-bottom: 10px;
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--cmecz-text);
}
.cmecz-menu__select-wrap { position: relative; }
.cmecz-menu__select {
    width: 100%;
    padding: 14px 44px 14px 18px;
    border: 1.5px solid rgba(51, 51, 51, .25);
    border-radius: 12px;
    background: var(--cmecz-card);
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--cmecz-text);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.cmecz-menu__select-wrap::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 14px;
    height: 8px;
    transform: translateY(-50%);
    pointer-events: none;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---- Karta wyboru daty ---- */
.cmecz-menu__datecard {
    max-width: 684px;
    margin: 0 auto 40px;
    padding: 8px 12px 12px;
    background: var(--cmecz-card);
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 16px;
    box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .15);
}

.cmecz-menu__month {
    padding-left: 34px;
    margin-bottom: 6px;
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    color: var(--cmecz-text);
}

.cmecz-menu__dates-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cmecz-menu__dates {
    display: flex;
    gap: 8px;
    flex: 1;
    justify-content: safe center;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.cmecz-menu__dates::-webkit-scrollbar { display: none; }

.cmecz-menu__date {
    flex: 0 0 auto;
    scroll-snap-align: center;
    width: 62px;
    padding: 8px 4px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border: 1.5px solid var(--cmecz-line);
    border-radius: 12px;
    background: var(--cmecz-card);
    text-decoration: none;
    transition: all .2s;
    cursor: pointer;
}
.cmecz-menu__day-name {
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    color: var(--cmecz-muted);
}
.cmecz-menu__day-num {
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--cmecz-text);
}
.cmecz-menu__date:hover { border-color: var(--cmecz-primary); }
.cmecz-menu__date.is-active {
    background: var(--cmecz-primary);
    border-color: var(--cmecz-primary-dark);
}
.cmecz-menu__date.is-active .cmecz-menu__day-name,
.cmecz-menu__date.is-active .cmecz-menu__day-num { color: var(--cmecz-text); }

/* chevrony wewnątrz karty dat */
.cmecz-menu__datenav {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent no-repeat center / 12px 20px;
    cursor: pointer;
    opacity: .55;
    transition: opacity .2s;
}
.cmecz-menu__datenav:hover,
.cmecz-menu__datenav:focus,
.cmecz-menu__datenav:active { opacity: 1; background-color: transparent; outline: none; }
.cmecz-menu__datenav--prev { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20' viewBox='0 0 12 20' fill='none'%3E%3Cpath d='M11 1L2 10l9 9' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.cmecz-menu__datenav--next { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20' viewBox='0 0 12 20' fill='none'%3E%3Cpath d='M1 1l9 9-9 9' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ---- Dania + strzałki zewnętrzne ---- */
.cmecz-menu__meals-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
}

.cmecz-menu__arrow {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 12px;
    background: var(--cmecz-card) no-repeat center / 10px 18px;
    box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .3);
    cursor: pointer;
    transition: transform .15s;
}
.cmecz-menu__arrow:hover { transform: scale(1.05); }
.cmecz-menu__arrow:hover,
.cmecz-menu__arrow:focus,
.cmecz-menu__arrow:active { background-color: var(--cmecz-card); outline: none; }
.cmecz-menu__arrow--prev { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='18' viewBox='0 0 10 18' fill='none'%3E%3Cpath d='M9 1L1 9l8 8' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.cmecz-menu__arrow--next { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='18' viewBox='0 0 10 18' fill='none'%3E%3Cpath d='M1 1l8 8-8 8' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

.cmecz-menu__meals {
    display: flex;
    gap: 40px;
    flex: 1;
    justify-content: safe center;
    padding: 24px 4px 8px;
    min-height: 300px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    transition: opacity .3s;
}
.cmecz-menu__meals::-webkit-scrollbar { display: none; }
.cmecz-menu__meals.is-loading { opacity: .5; pointer-events: none; }

/* ---- Karta dania ---- */
.cmecz-dish {
    position: relative;
    flex: 0 0 auto;
    width: 256px;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    background: var(--cmecz-card);
    border: 2px solid var(--cmecz-primary);
    border-radius: 16px;
    box-shadow: 0 3px 4px rgba(0, 0, 0, .10);
}

.cmecz-dish__badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    padding: 4px 16px;
    border-radius: 999px;
    background: var(--cmecz-badge-bg);
    color: var(--cmecz-badge-text);
    font-family: 'Rubik', sans-serif;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
}

.cmecz-dish__top {
    padding: 18px 10px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 178px;
}
.cmecz-dish__img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 150px;
    object-fit: contain;
    object-position: center;
}

.cmecz-dish__bottom {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 14px;
    min-height: 64px;
}
.cmecz-dish__name {
    margin: 0;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: var(--cmecz-text);
}

/* ---- Strzałki pod kartą (mobile) ---- */
.cmecz-menu__arrows-mobile {
    display: none;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
}
.cmecz-menu__marrow {
    width: 48px;
    height: 48px;
    border: 1.5px solid var(--cmecz-primary);
    border-radius: 12px;
    background: var(--cmecz-card) no-repeat center / 11px 20px;
    cursor: pointer;
}
.cmecz-menu__marrow--prev { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='20' viewBox='0 0 11 20' fill='none'%3E%3Cpath d='M10 1L2 10l8 9' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.cmecz-menu__marrow--next { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='20' viewBox='0 0 11 20' fill='none'%3E%3Cpath d='M1 1l8 9-8 9' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.cmecz-menu__marrow:hover,
.cmecz-menu__marrow:focus,
.cmecz-menu__marrow:active { background-color: var(--cmecz-card); outline: none; }

/* ---- Błąd ---- */
.cmecz-menu__error {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cmecz-menu__error[hidden] { display: none; }
.cmecz-menu__error h3 { text-align: center; color: var(--cmecz-muted); }

/* ---- Przycisk ---- */
.cmecz-menu__cta-wrap {
    display: flex;
    justify-content: center;
    margin-top: 36px;
}
.cmecz-menu__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 48px;
    border-radius: 999px;
    background: var(--cmecz-accent);
    color: #fff;
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 8px 20px -8px rgba(240, 32, 61, .6);
    transition: filter .2s;
}
.cmecz-menu__cta:hover,
.cmecz-menu__cta:focus,
.cmecz-menu__cta:active { color: #fff; }
.cmecz-menu__cta:hover { filter: brightness(1.12); }

/* ---- Responsywność ---- */

/* Desktop (szeroki): dokładnie 5 kart naraz w widocznym pasie, bez ucięcia.
   Każda karta = 1/5 szerokości pasa minus 4 przerwy; kolejne dania przewijają
   się strzałkami. 2px zapasu chroni przed zaokrągleniem sub-pikselowym. */
@media (min-width: 1200px) {
    .cmecz-menu__meals { gap: 24px; }
    .cmecz-dish {
        flex: 0 0 calc((100% - 98px) / 5);
        width: auto;
    }
}

@media (max-width: 960px) {
    .cmecz-menu__title { font-size: 26px; }
    .cmecz-menu__diet { font-size: 14px; min-height: 40px; padding: 0 18px; }
    .cmecz-menu__meals { justify-content: flex-start; gap: 24px; }
}

/* Zamiana układu na mobilny (breakpoint Elementora 767px) */
@media (max-width: 767px) {
    /* diety: pigułki → dropdown */
    .cmecz-menu__diets { display: none; }
    .cmecz-menu__diets-mobile { display: block; }

    /* daty przewijane od lewej */
    .cmecz-menu__dates { justify-content: flex-start; }

    /* strzałki boczne → wyśrodkowane pod kartą */
    .cmecz-menu__arrow { display: none; }
    .cmecz-menu__arrows-mobile { display: flex; }
    .cmecz-menu__meals-wrap { gap: 0; }

    /* karta dania: szeroka, z oliwkową ramką, następna wystaje */
    .cmecz-menu__meals { justify-content: flex-start; gap: 16px; padding-left: 4px; padding-right: 4px; }
    .cmecz-dish { width: min(78vw, 320px); }

    /* przycisk na całą szerokość */
    .cmecz-menu__cta { width: 100%; }
}