/* Etap 19: karta cateringu na liście ([cm_karta], listing 38), pasek wyników i karta filtrów. Tokeny jak w Etapie 15. */
.cm-karta, .cm-lista, #load-more-button {
	--cm-navy: #0C2E4B; --cm-lime: #B3BD13; --cm-lime-dark: #8E9610; --cm-ink: #1D2329; --cm-muted: #5B6672;
	--cm-line: #E3E7EC; --cm-field: #808B97; --cm-bg-soft: #F5F7F2; --cm-radius: 12px; --cm-shadow: 0 8px 24px rgba(12, 46, 75, .08);
}
.cm-karta *, .cm-lista * { box-sizing: border-box; }

/* Lista: jedna kolumna, odstęp 16 px, szerokość kontenera strony */
.jet-listing-grid__items:has(.cm-karta), .jet-listing-grid__items.jet-listing-grid--38 { display: flex !important; flex-direction: column; gap: 16px; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; --columns: 1 !important; }
.jet-listing-grid__items.jet-listing-grid--38 > .jet-listing-grid__item { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; padding: 0 !important; margin: 0 !important; }
.jet-listing-grid__items:has(.cm-karta) > .jet-listing-grid__item { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; padding: 0 !important; margin: 0 !important; }
.jet-listing-grid__item:has(.cm-karta) .elementor-widget-shortcode, .jet-listing-grid__item:has(.cm-karta) .elementor-section, .jet-listing-grid__item:has(.cm-karta) .elementor-column > .elementor-widget-wrap { margin: 0 !important; padding: 0 !important; }

/* Karta */
.cm-karta { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px 16px; padding: 16px; background: #fff; border: 1px solid var(--cm-line); border-radius: var(--cm-radius); box-shadow: var(--cm-shadow); font-family: "Open Sans", sans-serif; color: var(--cm-ink); line-height: 1.5; transition: box-shadow .2s, transform .2s; }
.cm-karta:hover { box-shadow: 0 12px 32px rgba(12, 46, 75, .14); }
.cm-karta.is-featured { border-left: 4px solid var(--cm-lime); }
.cm-karta__logo { width: 64px; height: 64px; border: 1px solid var(--cm-line); border-radius: 10px; background: #fff; overflow: hidden; display: grid; place-items: center; }
.cm-karta__logo a { display: block; width: 100%; height: 100%; }
.cm-karta__logo img, .cm-karta__logo-img { width: 100% !important; height: 100% !important; object-fit: contain; padding: 4px; border: 0 !important; box-shadow: none !important; }
.cm-karta__body { min-width: 0; display: grid; gap: 6px; align-content: start; }
.cm-karta__name { margin: 0; font: 600 18px/1.25 Poppins, sans-serif; color: var(--cm-navy); overflow-wrap: anywhere; }
.cm-karta__name a { color: inherit; text-decoration: none; }
.cm-karta__name a:hover { text-decoration: underline; }
.cm-karta__rating { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 14px; }
.cm-karta__rating strong { color: var(--cm-navy); }
.cm-karta__muted { color: var(--cm-muted); font-size: 13px; }
.cm-karta .cm-stars { position: relative; display: inline-block; width: 80px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23D5DAE0' d='m12 2 3 6.3 6.9.9-5 4.8 1.2 6.8L12 17.6l-6.1 3.2L7.1 14l-5-4.8 6.9-.9Z'/%3E%3C/svg%3E") 0 0 / 16px 16px repeat-x; vertical-align: middle; }
.cm-karta .cm-stars__fill { position: absolute; inset: 0 auto 0 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238E9610' d='m12 2 3 6.3 6.9.9-5 4.8 1.2 6.8L12 17.6l-6.1 3.2L7.1 14l-5-4.8 6.9-.9Z'/%3E%3C/svg%3E") 0 0 / 16px 16px repeat-x; }
.cm-karta .cm-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font: 600 12px/1.4 Poppins, sans-serif; }
.cm-karta .cm-badge--featured { background: var(--cm-lime); color: var(--cm-navy); }
.cm-karta .cm-badge--partner { background: var(--cm-navy); color: #fff; }
.cm-karta__chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 2px 0 0; padding: 0; }
.cm-karta .cm-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border: 1px solid var(--cm-line); border-radius: 999px; background: var(--cm-bg-soft); font-size: 13px; color: var(--cm-ink); }
.cm-karta .cm-ico { width: 14px; height: 14px; flex: none; color: var(--cm-navy); }
.cm-karta__desc { margin: 2px 0 0; font-size: 14px; color: var(--cm-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cm-karta__match { margin: 2px 0 0; font-size: 14px; }
.cm-karta__match-label { font-weight: 600; color: var(--cm-navy); }
.cm-karta .cm-stale { margin: 2px 0 0; }

/* Akcje */
.cm-karta__actions { grid-column: 1 / -1; display: grid; gap: 8px; align-content: start; min-width: 0; }
.cm-karta__price { margin: 0; font-size: 14px; color: var(--cm-ink); }
.cm-karta__price strong { font: 600 22px Poppins, sans-serif; color: var(--cm-navy); }
.cm-karta__od, .cm-karta__unit { color: var(--cm-muted); }
.cm-karta__regular { margin: -4px 0 0; font-size: 13px; color: var(--cm-muted); }
.cm-karta .cm-kod--line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 6px 8px; border: 1px dashed var(--cm-field); border-radius: 8px; background: var(--cm-bg-soft); font-size: 13px; }
.cm-karta .cm-kod--line .cm-kod__label { color: var(--cm-muted); }
.cm-karta .cm-kod--line .cm-kod__code { color: var(--cm-navy); font-size: 14px; letter-spacing: .02em; }
.cm-karta .cm-kod--line .cm-kod__value { font-weight: 600; }
.cm-karta .cm-kod--line .cm-kod__copy { margin-left: auto; min-height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: var(--cm-lime); color: var(--cm-navy); font: 600 12px Poppins, sans-serif; cursor: pointer; }
.cm-karta .cm-kod--line .cm-kod__copy.is-copied { background: var(--cm-navy); color: #fff; }

/* Przyciski (zestaw z Etapu 15): bez zawijania, min. 44 px */
.cm-karta .cm-btn, #load-more-button .elementor-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 0 16px; border: 2px solid var(--cm-navy); border-radius: 10px; background: #fff; color: var(--cm-navy) !important; font: 600 15px/1.2 Poppins, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none !important; cursor: pointer; transition: background .15s, color .15s; }
.cm-karta .cm-btn--primary { background: var(--cm-lime); border-color: var(--cm-lime); }
.cm-karta .cm-btn:hover, #load-more-button .elementor-button:hover { background: var(--cm-navy); border-color: var(--cm-navy); color: #fff !important; }
.cm-karta :focus-visible, .cm-lista :focus-visible, #load-more-button :focus-visible { outline: 3px solid var(--cm-navy); outline-offset: 2px; border-radius: 6px; }
#load-more-button { width: 100%; margin-top: 16px; }
#load-more-button .elementor-button-wrapper { width: 100%; }

/* Compact (podobne cateringi) */
.cm-karta--compact { grid-template-columns: 64px minmax(0, 1fr); align-items: center; }
.cm-karta--compact .cm-karta__name { font-size: 17px; }
.cm-karta--compact .cm-karta__price strong { font-size: 18px; }

/* Pasek wyników i karta filtrów */
.cm-lista { display: grid; gap: 16px; font-family: "Open Sans", sans-serif; }
.cm-lista__filters { background: #fff; border: 1px solid var(--cm-line); border-radius: var(--cm-radius); box-shadow: var(--cm-shadow); padding: 16px; }
.cm-lista__filters .cm-filtry { margin: 0; }
.cm-lista__toggle { display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: center; border: 2px solid var(--cm-navy); border-radius: 10px; background: #fff; color: var(--cm-navy); font: 600 15px Poppins, sans-serif; cursor: pointer; }
.cm-lista__filters.is-collapsible [hidden] { display: none !important; }
.cm-lista__filters.is-collapsible:not(.is-open) { padding: 0; border: 0; box-shadow: none; background: none; }
.cm-lista__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.cm-lista__count { margin: 0; font: 600 17px Poppins, sans-serif; color: var(--cm-navy); }
.cm-lista__chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.cm-fchip-x { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px 4px 12px; border-radius: 999px; background: var(--cm-navy); color: #fff !important; font-size: 13px; text-decoration: none !important; }
.cm-fchip-x span[aria-hidden] { font-size: 16px; line-height: 1; }
.cm-lista__clear { font-size: 13px; color: var(--cm-navy); }
.cm-lista__sort { margin: 0 0 0 auto; font-size: 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cm-lista__sort span { color: var(--cm-muted); }
.cm-lista__sort a { color: var(--cm-navy); text-decoration: none; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--cm-line); }
.cm-lista__sort a[aria-current="true"] { background: var(--cm-navy); border-color: var(--cm-navy); color: #fff; }
.cm-lista .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }

/* Sekcja z filtrami JSF na stronie głównej (karta) */
.cm-jsf-card { background: #fff; border: 1px solid #E3E7EC; border-radius: 12px; box-shadow: 0 8px 24px rgba(12, 46, 75, .08); padding: 16px !important; margin-bottom: 16px; }

/* Etap 20: Baner CTA nad listą (strona główna, miasta) */
.cm-kreator-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-radius: 12px; background: #0C2E4B; color: #fff; }
.cm-kreator-cta p { margin: 0; font: 600 17px Poppins, sans-serif; color: #fff; }
.cm-kreator-cta a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 10px; background: #B3BD13; color: #0C2E4B !important; font: 600 15px Poppins, sans-serif; text-decoration: none !important; white-space: nowrap; }
.cm-kreator-cta a:hover { background: #fff; }
.cm-kreator-cta a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

@media (min-width: 768px) {
	.cm-karta { grid-template-columns: 120px minmax(0, 1fr) 200px; gap: 20px; padding: 20px; }
	.cm-karta__logo { width: 120px; height: 120px; }
	.cm-karta__logo img, .cm-karta__logo-img { padding: 8px; }
	.cm-karta__name { font-size: 20px; }
	.cm-karta__actions { grid-column: auto; }
	.cm-karta--compact { grid-template-columns: 64px minmax(0, 1fr) 200px; padding: 16px; }
	.cm-karta--compact .cm-karta__logo { width: 64px; height: 64px; }
}
@media (min-width: 992px) {
	.cm-lista__filters .cm-filtry { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
	.cm-lista__filters .cm-filtry__field { flex: 1 1 140px; margin: 0; min-width: 0; }
	.cm-lista__filters .cm-filtry__field--city { flex: 2 1 220px; }
}
@media (prefers-reduced-motion: reduce) {
	.cm-karta { transition: none; }
}