/* Cateromedia Core: panel klienta (Etap 2). Mobile first. */
.cm-panel { --cm-accent: #0c2e4b; --cm-accent-2: #1f7a4d; --cm-border: #dfe3e8; --cm-muted: #66707a; --cm-danger: #b3261e; max-width: 1100px; margin: 0 auto; padding: 16px 12px 48px; font-size: 16px; line-height: 1.5; color: #1d2329; }
.cm-panel *, .cm-panel *::before, .cm-panel *::after { box-sizing: border-box; }
.cm-panel h2, .cm-panel h3, .cm-panel h4 { margin: 0 0 8px; line-height: 1.25; }
.cm-panel__header { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.cm-panel__title { font-size: 1.5em; }
.cm-panel__nav ul { display: flex; gap: 6px; overflow-x: auto; list-style: none; margin: 0 0 16px; padding: 0 0 6px; -webkit-overflow-scrolling: touch; }
.cm-panel__nav a { display: block; white-space: nowrap; padding: 8px 12px; border: 1px solid var(--cm-border); border-radius: 999px; text-decoration: none; color: var(--cm-accent); background: #fff; }
.cm-panel__nav a.is-active { background: var(--cm-accent); color: #fff; border-color: var(--cm-accent); }
/* Hotfix 2026-10-14: poniżej 480 px zakładki zawijają się do wierszy (wcześniej „Konto” było ucięte w przewijanym pasku). */
@media (max-width: 479px) {
	.cm-panel__nav ul { flex-wrap: wrap; overflow-x: visible; padding-bottom: 0; }
	.cm-panel__nav li { flex: 1 1 calc(33.333% - 6px); }
	.cm-panel__nav a { text-align: center; padding: 8px 6px; font-size: .92em; }
}
/* 480-719 px: przewijany pasek z gradientem po prawej jako wskazówka, że są dalsze zakładki. */
@media (min-width: 480px) and (max-width: 719px) {
	.cm-panel__nav { position: relative; }
	.cm-panel__nav::after { content: ""; position: absolute; top: 0; right: 0; bottom: 6px; width: 32px; pointer-events: none; background: linear-gradient(to right, rgba(255,255,255,0), #fff); }
}
.cm-card { background: #fff; border: 1px solid var(--cm-border); border-radius: 10px; padding: 16px; margin-bottom: 14px; }
.cm-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }
.cm-grid .cm-card { margin-bottom: 0; }
.cm-muted { color: var(--cm-muted); font-size: .92em; }
.cm-big { font-size: 1.4em; font-weight: 700; margin: 4px 0; }
.cm-form label { display: block; font-weight: 600; margin-bottom: 4px; }
.cm-form input[type="text"], .cm-form input[type="email"], .cm-form input[type="url"], .cm-form input[type="tel"], .cm-form input[type="password"], .cm-form input[type="search"], .cm-form textarea, .cm-switch select { width: 100%; padding: 10px 12px; border: 1px solid var(--cm-border); border-radius: 8px; font: inherit; background: #fff; }
.cm-form p { margin: 0 0 12px; }
.cm-check label, label.cm-check { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; }
.cm-check input { margin-top: 4px; }
.cm-btn { display: inline-block; padding: 10px 16px; border-radius: 8px; border: 1px solid var(--cm-accent); background: #fff; color: var(--cm-accent); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; text-align: center; }
.cm-btn--primary { background: var(--cm-accent-2); border-color: var(--cm-accent-2); color: #fff; }
.cm-btn--danger { border-color: var(--cm-danger); color: var(--cm-danger); }
.cm-btn--small { padding: 4px 10px; font-size: .9em; }
.cm-btn:disabled { opacity: .6; cursor: wait; }
.cm-actions { position: sticky; bottom: 0; background: rgba(255,255,255,.95); padding: 10px 0; margin: 0; }
.cm-actions .cm-btn { width: 100%; }
.cm-notice { padding: 12px 14px; border-radius: 8px; margin-bottom: 12px; border-left: 4px solid; background: #f4f6f8; }
.cm-notice--success { border-color: var(--cm-accent-2); background: #edf7f1; }
.cm-notice--error { border-color: var(--cm-danger); background: #fdecea; }
.cm-notice--info { border-color: var(--cm-accent); }
.cm-notice--warning { border-color: #c98a00; background: #fff6d6; }
.cm-list { margin: 0; padding-left: 18px; }
.cm-login { max-width: 460px; margin: 0 auto; }
.cm-inline { display: inline-block; margin: 0 8px 8px 0; }
.cm-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.cm-logo__img { max-width: 220px; max-height: 160px; height: auto; display: block; margin-bottom: 8px; }
.cm-gallery { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cm-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; display: block; }
.cm-columns { columns: 1; }
.cm-diets { list-style: none; margin: 0; padding: 0; counter-reset: diet; }
.cm-diet { position: relative; }
.cm-diet__tools { display: flex; gap: 6px; justify-content: flex-end; margin-bottom: 8px; }
.cm-city-list { list-style: none; margin: 0 0 12px; padding: 0; columns: 1; max-height: 60vh; overflow-y: auto; border: 1px solid var(--cm-border); border-radius: 8px; padding: 8px 12px; }
.cm-city-list li { break-inside: avoid; }
.cm-city-list label { font-weight: 400; display: flex; gap: 8px; }
.cm-js-counter.is-over { color: var(--cm-danger); }
.cm-product.is-current { border-color: var(--cm-accent-2); box-shadow: 0 0 0 2px var(--cm-accent-2) inset; }
.cm-features { margin: 8px 0; padding-left: 18px; }
.cm-inquiry summary { list-style: none; margin-top: 8px; }
.cm-inquiry summary::-webkit-details-marker { display: none; }
.cm-inquiry[open] summary { margin-bottom: 12px; }
.cm-table { width: 100%; border-collapse: collapse; }
.cm-table th { display: none; }
.cm-table td { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--cm-border); }
.cm-table td::before { content: attr(data-label); font-weight: 600; color: var(--cm-muted); }
.cm-table tr { display: block; margin-bottom: 12px; }
.cm-status { padding: 2px 8px; border-radius: 999px; background: #eef1f4; font-size: .9em; white-space: nowrap; }
.cm-status--aktywne { background: #e3f4ea; }
.cm-status--anulowane, .cm-status--wygasle { background: #f5e4e2; }
.cm-panel .screen-reader-text { position: absolute; left: -9999px; }
@media (min-width: 720px) {
	.cm-panel { padding: 24px 20px 64px; }
	.cm-panel__header { flex-direction: row; justify-content: space-between; align-items: flex-end; }
	.cm-grid { grid-template-columns: repeat(2, 1fr); }
	.cm-columns { columns: 3; }
	.cm-city-list { columns: 3; }
	.cm-gallery { grid-template-columns: repeat(6, 1fr); }
	.cm-actions .cm-btn { width: auto; }
	.cm-table th { display: table-cell; text-align: left; padding: 8px; border-bottom: 2px solid var(--cm-border); }
	.cm-table tr { display: table-row; }
	.cm-table td { display: table-cell; padding: 8px; }
	.cm-table td::before { content: none; }
}
@media (min-width: 1024px) {
	.cm-grid { grid-template-columns: repeat(4, 1fr); }
	.cm-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
/* Etap 7: rodzaj diety, kaloryczności (chipy), posiłki, ceny per kaloryczność. Mobile first. */
.cm-diet.is-review { border-color: #c98a00; }
.cm-diet__review { margin: 0 0 8px; padding: 6px 10px; border-radius: 6px; background: #fff6d6; font-size: .92em; }
.cm-diet__struct select, .cm-diet__struct input[type="text"] { width: 100%; max-width: 420px; }
.cm-input-short { width: 90px; max-width: 100%; }
.cm-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px; border: 1px solid var(--cm-border); border-radius: 6px; background: #fff; max-width: 420px; }
.cm-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 999px; background: #e8eef4; font-size: .92em; white-space: nowrap; }
.cm-chip button { border: 0; background: transparent; cursor: pointer; font-size: 1.1em; line-height: 1; padding: 4px 6px; min-width: 32px; min-height: 32px; }
.cm-chips input.cm-chips__input { flex: 1 1 110px; min-width: 110px; border: 0; padding: 6px 4px; }
.cm-chips input.cm-chips__input:focus { outline: none; }
.cm-chips__error { color: var(--cm-danger); font-size: .9em; margin: 4px 0 0; }
.cm-diet__adv { margin: 0 0 12px; }
.cm-diet__adv summary { cursor: pointer; padding: 6px 0; font-weight: 600; }
.cm-kcal-prices th { text-align: left; font-weight: 400; padding: 4px 12px 4px 0; white-space: nowrap; }
.cm-kcal-prices input { width: 90px; }
@media (min-width: 720px) {
	.cm-diet__struct { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
	.cm-diet__struct .cm-diet__adv { grid-column: 1 / -1; }
}