/* Panel usług — wygląd zbliżony do aplikacji: lekkie litery, zakładki z podkreśleniem, małe prostokątne opcje.
 * Kolory i promienie dziedziczy z motywu (--map-*). Zmienne --ms-* na początku pozwalają szybko dostroić wygląd. */
.ms-panel {
    --ms-radius: var(--map-radius, 16px);
    --ms-chip-radius: 10px;
    --ms-chip-size: 13px;
    --ms-text: var(--map-text, #142048);
    --ms-muted: var(--map-muted, #7c87a1);
    --ms-border: var(--map-border, #dbe5f4);
    --ms-accent: var(--map-accent, #0758ff);
    --ms-tint: var(--map-active, #eaf1ff);
    --ms-bg: var(--map-bg, #f4f7fb);
    --ms-surface: var(--map-surface, #fff);
}

body.ms-services-active [data-mapeczka-slider] { display: none !important; }

.ms-panel {
    margin: 0 0 14px;
    padding: 16px 18px 14px;
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius);
    background: var(--ms-surface);
    color: var(--ms-text);
    box-shadow: none;
    font: inherit;
    box-sizing: border-box;
}
.ms-panel[hidden] { display: none; }
.ms-panel *, .ms-panel *::before, .ms-panel *::after { box-sizing: border-box; }

/* Przyciski motywu nie mogą dodawać cieni, teł ani wielkich liter. */
.ms-panel button {
    box-shadow: none !important;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.3;
    min-height: 0;
    margin: 0;
    font-family: inherit;
}

.ms-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.ms-title { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 600; color: inherit; }
.ms-sub { margin: 3px 0 0; font-size: 13px; font-weight: 400; color: var(--ms-muted); }
.ms-clear {
    background: none !important; border: 0 !important; padding: 2px 0 !important;
    color: var(--ms-accent); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.ms-clear:hover { text-decoration: underline; }
.ms-clear[hidden] { display: none; }

.ms-input {
    width: 100%; height: 42px; padding: 0 14px;
    border: 1px solid var(--ms-border); border-radius: 12px;
    background: var(--ms-bg); color: inherit; font: inherit; font-size: 14px; font-weight: 400; outline: none; box-shadow: none;
}
.ms-input::placeholder { color: var(--ms-muted); }
.ms-input:focus { border-color: var(--ms-accent); background: var(--ms-surface); }

.ms-sugg { margin-top: 8px; border: 1px solid var(--ms-border); border-radius: 12px; overflow: hidden; }
.ms-sugg[hidden] { display: none; }
.ms-sugg-item {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; padding: 10px 14px;
    border: 0; border-bottom: 1px solid var(--ms-border); background: transparent;
    color: inherit; font-size: 14px; font-weight: 400; text-align: left; cursor: pointer;
}
.ms-sugg-item strong { font-weight: 500; }
.ms-sugg-item:last-child { border-bottom: 0; }
.ms-sugg-item span { color: var(--ms-muted); font-size: 12px; white-space: nowrap; }
.ms-sugg-item:hover, .ms-sugg-item.is-on { background: var(--ms-tint); }

/* Wybrane usługi */
.ms-sel { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-sel:not(:empty) { margin-top: 12px; }

/* Branże jako zakładki z podkreśleniem (przewijane w poziomie) */
.ms-branches {
    display: flex; align-items: flex-end; gap: 26px; margin-top: 16px; padding: 0 4px 0 2px; overflow-x: auto; white-space: nowrap;
    border-bottom: 1px solid var(--ms-border); scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ms-branches::-webkit-scrollbar { display: none; }
.ms-tab {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
    width: auto !important; min-width: 0 !important; max-width: none !important;
    padding: 10px 2px 12px !important; margin: 0 0 -1px !important;
    overflow: visible !important; text-overflow: clip !important; white-space: nowrap;
    border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important;
    background: none !important; box-shadow: none !important; filter: none !important;
    color: var(--ms-muted); font-size: 15px; font-weight: 500; line-height: 1.2; cursor: pointer;
}
.ms-tab:hover { color: var(--ms-text); }
.ms-tab.is-open { color: var(--ms-text); }
.ms-tab.is-on { color: var(--ms-text); border-bottom-color: var(--ms-accent) !important; }
.ms-tab .ms-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 20px; padding: 0 7px; margin: 0;
    border-radius: 999px; background: var(--ms-bg); color: var(--ms-muted);
    font-size: 11px; font-weight: 600; line-height: 1;
}
.ms-tab.is-on .ms-count { background: var(--ms-tint); color: var(--ms-accent); opacity: 1; }

/* Rozwijana część: usługi + cena (pokazuje się po wybraniu branży) */
.ms-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.ms-more.is-open { grid-template-rows: 1fr; }
.ms-more-inner { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s linear .25s; }
.ms-more.is-open .ms-more-inner { visibility: visible; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .ms-more, .ms-more-inner { transition: none; } }
.ms-services { margin-top: 2px; }
.ms-group { margin-top: 16px; }
.ms-group-name { margin-bottom: 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ms-muted); }
.ms-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Opcje: małe zaokrąglone prostokąty, lekka czcionka */
.ms-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px;
    border: 1px solid var(--ms-border); border-radius: var(--ms-chip-radius);
    background: var(--ms-surface); color: var(--ms-text);
    font-size: var(--ms-chip-size); font-weight: 400; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.ms-chip:hover { border-color: var(--ms-muted); }
.ms-chip.is-on { background: var(--ms-tint); border-color: var(--ms-accent); color: var(--ms-accent); font-weight: 500; }
.ms-chip-sel { padding-right: 9px; }
.ms-count { font-size: 12px; font-weight: 400; color: var(--ms-muted); }
.ms-chip.is-on .ms-count { color: inherit; opacity: .8; }
.ms-note { margin: 10px 0 0; font-size: 13px; color: var(--ms-muted); }

.ms-price {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
    margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ms-border); font-size: 13px;
}
.ms-price[hidden] { display: none; }
.ms-price-label { font-weight: 500; }
.ms-price label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
.ms-pmin, .ms-pmax {
    width: 76px; height: 34px; padding: 0 10px; border: 1px solid var(--ms-border); border-radius: 10px;
    background: var(--ms-bg); color: inherit; font: inherit; font-size: 13px; text-align: right; box-shadow: none; outline: none;
}
.ms-pmin:focus, .ms-pmax:focus { border-color: var(--ms-accent); background: var(--ms-surface); }
.ms-quote { color: var(--ms-muted); }

.ms-panel button:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: 2px; }

@media (max-width: 640px) {
    .ms-panel { padding: 14px 14px 12px; }
    .ms-title { font-size: 16px; }
    .ms-branches { gap: 22px; }
    .ms-tab { font-size: 14px; }
}

/* Ciemny motyw: jeśli --map-* nie ma wariantu ciemnego, wymuszamy własny. */
.mapeczka-dark-mode .ms-panel { --ms-surface: #202020; --ms-text: #f3f7ff; --ms-border: #2d3a4f; --ms-bg: #111; --ms-tint: #1b315b; --ms-muted: #aab5c9; }

/* ===== 0.8.1: spójne rozmiary i typografia; elementy to role="button", więc style przycisków motywu ich nie dotyczą ===== */
.ms-panel { --ms-control: 36px; }
.ms-panel [role="button"] { cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; text-decoration: none; }
.ms-panel [role="button"]:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: 2px; }
.ms-panel .ms-clear { display: inline-block; padding: 4px 0; font-size: 13px; font-weight: 500; }
.ms-panel .ms-chip {
    box-sizing: border-box; min-height: var(--ms-control); padding: 0 14px; gap: 6px;
    font-size: 13px; font-weight: 500; line-height: 1;
}
.ms-panel .ms-chip-sel { padding: 0 12px 0 14px; }
.ms-panel .ms-count { font-size: 12px; font-weight: 500; }
.ms-panel .ms-tab { font-size: 15px; font-weight: 500; line-height: 1.2; }
.ms-panel .ms-input { height: 44px; font-size: 14px; }
.ms-panel .ms-pmin, .ms-panel .ms-pmax { height: var(--ms-control); font-size: 13px; }
.ms-panel .ms-sugg-item { box-sizing: border-box; min-height: 44px; align-items: center; padding: 8px 14px; font-size: 14px; font-weight: 400; }
.ms-panel .ms-sugg-item strong { font-weight: 500; }
.ms-panel .ms-group { margin-top: 18px; }
.ms-panel .ms-group-name { margin-bottom: 8px; font-size: 11px; font-weight: 600; letter-spacing: .07em; }
.ms-panel .ms-chips { gap: 8px; }
.ms-panel .ms-sel { gap: 8px; }
.ms-panel .ms-price { gap: 10px 16px; font-size: 13px; }
.ms-panel .ms-price label { gap: 8px; }
@media (max-width: 640px) {
    .ms-panel .ms-chip { padding: 0 12px; }
    .ms-panel .ms-tab { font-size: 14px; }
}

/* ===== 0.9.1: grupy usług jako kolumny obok siebie; poziome przewijanie (przeciąganie myszą, dotyk) ===== */
.ms-panel [data-ms-drag] { user-select: none; -webkit-user-select: none; cursor: grab; touch-action: pan-x pan-y; }
.ms-panel [data-ms-drag].is-dragging, .ms-panel [data-ms-drag].is-dragging * { cursor: grabbing !important; }
.ms-panel .ms-groups {
    display: flex; align-items: flex-start; gap: 12px;
    margin-top: 14px; padding: 2px 2px 8px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    --ms-fade-l: 0px; --ms-fade-r: 0px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--ms-fade-l), #000 calc(100% - var(--ms-fade-r)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--ms-fade-l), #000 calc(100% - var(--ms-fade-r)), transparent 100%);
}
.ms-panel .ms-groups::-webkit-scrollbar { display: none; }
.ms-panel .ms-groups.is-fade-left { --ms-fade-l: 28px; }
.ms-panel .ms-groups.is-fade-right { --ms-fade-r: 28px; }
.ms-panel .ms-groups.is-dragging { scroll-snap-type: none; }
.ms-panel .ms-groups .ms-group {
    flex: 0 0 auto; width: 232px; margin: 0; padding: 10px;
    border: 1px solid var(--ms-border); border-radius: 12px; background: var(--ms-bg);
    scroll-snap-align: start;
}
.ms-panel .ms-groups .ms-group-name {
    display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
    margin: 0 2px 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
}
.ms-panel .ms-groups .ms-chips { flex-direction: column; flex-wrap: nowrap; gap: 4px; }
.ms-panel .ms-groups .ms-chip {
    width: 100%; min-height: 30px; padding: 6px 10px; gap: 8px;
    justify-content: space-between; align-items: center;
    border-radius: 8px; background: var(--ms-surface);
    font-size: 12px; font-weight: 400; line-height: 1.25; text-align: left; white-space: normal;
}
.ms-panel .ms-groups .ms-chip.is-on { font-weight: 500; }
.ms-panel .ms-groups .ms-count { flex: 0 0 auto; font-size: 11px; }
@media (max-width: 640px) {
    .ms-panel .ms-groups { gap: 10px; }
    .ms-panel .ms-groups .ms-group { width: min(76vw, 240px); }
}

/* ===== 0.9.2: kompaktowo i skalowalnie (setki kategorii, dziesiątki usług) ===== */

/* Pasek kategorii: mały, czytelny; strzałki nakładają się na krawędzie; przycisk „Wszystkie” z prawej */
.ms-panel .ms-strip { display: flex; align-items: flex-end; gap: 10px; margin-top: 14px; border-bottom: 1px solid var(--ms-border); }
.ms-panel .ms-strip-scroll { position: relative; flex: 1 1 auto; min-width: 0; }
.ms-panel .ms-strip .ms-branches { margin-top: 0; border-bottom: 0; gap: 18px; padding: 0 2px; }
.ms-panel .ms-strip .ms-tab { margin-bottom: 0 !important; padding: 8px 1px 9px !important; gap: 6px; font-size: 13px; font-weight: 500; line-height: 1.2; }
.ms-panel .ms-strip .ms-tab .ms-count { min-width: 18px; height: 16px; padding: 0 5px; font-size: 10px; font-weight: 600; }
.ms-panel .ms-arrow {
    position: absolute; top: 0; bottom: 0; z-index: 2; width: 30px;
    display: flex; align-items: center; font-size: 20px; line-height: 1; color: var(--ms-text);
}
.ms-panel .ms-arrow[hidden] { display: none; }
.ms-panel .ms-arrow-prev { left: 0; justify-content: flex-start; padding-left: 4px; background: linear-gradient(90deg, var(--ms-surface) 55%, transparent); }
.ms-panel .ms-arrow-next { right: 0; justify-content: flex-end; padding-right: 4px; background: linear-gradient(270deg, var(--ms-surface) 55%, transparent); }
.ms-panel .ms-arrow:hover { color: var(--ms-accent); }
@media (hover: none) { .ms-panel .ms-arrow { display: none; } }
.ms-panel .ms-allbtn {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; height: 30px; margin-bottom: 4px; padding: 0 10px;
    border: 1px solid var(--ms-border); border-radius: 8px; background: var(--ms-surface);
    font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap;
}
.ms-panel .ms-allbtn[hidden] { display: none; }
.ms-panel .ms-allbtn .ms-allcount { font-size: 10px; font-weight: 600; color: var(--ms-muted); }
.ms-panel .ms-allbtn[aria-expanded="true"] { border-color: var(--ms-accent); color: var(--ms-accent); }

/* Lista wszystkich kategorii z wyszukiwaniem */
.ms-panel .ms-all { margin-top: 10px; padding: 10px; border: 1px solid var(--ms-border); border-radius: 12px; background: var(--ms-bg); }
.ms-panel .ms-all[hidden] { display: none; }
.ms-panel .ms-all-input {
    width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--ms-border); border-radius: 9px;
    background: var(--ms-surface); color: inherit; font: inherit; font-size: 13px; outline: none; box-shadow: none;
}
.ms-panel .ms-all-input:focus { border-color: var(--ms-accent); }
.ms-panel .ms-all-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px;
    max-height: 224px; margin-top: 8px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.ms-panel .ms-all-list .ms-note { grid-column: 1 / -1; margin: 6px 2px; }
.ms-panel .ms-cat-item {
    display: flex; justify-content: space-between; align-items: center; gap: 6px; min-height: 28px; padding: 5px 8px;
    border: 1px solid transparent; border-radius: 7px; background: var(--ms-surface); font-size: 12px; line-height: 1.25; cursor: pointer;
}
.ms-panel .ms-cat-item:hover { border-color: var(--ms-muted); }
.ms-panel .ms-cat-item.is-on { border-color: var(--ms-accent); background: var(--ms-tint); color: var(--ms-accent); font-weight: 500; }
.ms-panel .ms-cat-item .ms-cat-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-panel .ms-cat-item .ms-count { flex: 0 0 auto; font-size: 10px; }

/* Grupy usług: węższe kolumny, mniejsza typografia, własne przewijanie pionowe przy dużej liczbie usług */
.ms-panel .ms-groups { gap: 8px; margin-top: 12px; }
.ms-panel .ms-groups .ms-group { width: 176px; padding: 8px; border-radius: 10px; }
.ms-panel .ms-groups .ms-group-name { margin: 0 2px 6px; font-size: 10.5px; letter-spacing: .05em; }
.ms-panel .ms-groups .ms-chips { gap: 3px; max-height: 224px; padding-right: 2px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.ms-panel .ms-groups .ms-chip { min-height: 26px; padding: 4px 8px; gap: 6px; border-radius: 7px; font-size: 11.5px; line-height: 1.25; }
.ms-panel .ms-groups .ms-count { font-size: 10px; }
@media (max-width: 640px) {
    .ms-panel .ms-strip .ms-branches { gap: 16px; }
    .ms-panel .ms-groups { gap: 8px; }
    .ms-panel .ms-groups .ms-group { width: min(62vw, 176px); }
    .ms-panel .ms-all-list { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* ===== 0.9.3: minimalistycznie — bez ramek wokół grup i opcji, mniejsza typografia ===== */

/* Pasek kategorii: jeszcze mniejszy, liczba jako zwykły szary tekst (bez plakietki) */
.ms-panel .ms-strip { margin-top: 12px; }
.ms-panel .ms-strip .ms-branches { gap: 14px; }
.ms-panel .ms-strip .ms-tab { padding: 6px 1px 8px !important; gap: 4px; font-size: 12px; font-weight: 500; }
.ms-panel .ms-strip .ms-tab .ms-count,
.ms-panel .ms-strip .ms-tab.is-on .ms-count { min-width: 0; height: auto; padding: 0; background: none; font-size: 10px; font-weight: 500; color: var(--ms-muted); }
.ms-panel .ms-strip .ms-tab.is-on .ms-count { color: var(--ms-accent); }
.ms-panel .ms-allbtn { height: 26px; margin-bottom: 3px; padding: 0 8px; border-radius: 7px; font-size: 11px; }
.ms-panel .ms-allbtn .ms-allcount { font-size: 9.5px; }
.ms-panel .ms-arrow { font-size: 17px; width: 26px; }

/* Grupy usług: sam tekst w kolumnach, bez kart i obramowań */
.ms-panel .ms-groups { gap: 22px; margin-top: 10px; padding: 2px 2px 6px; }
.ms-panel .ms-groups .ms-group { width: 150px; padding: 0; border: 0; border-radius: 0; background: none; }
.ms-panel .ms-groups .ms-group-name {
    margin: 0 0 4px; padding: 0 0 4px; border-bottom: 1px solid var(--ms-border);
    font-size: 10px; font-weight: 600; letter-spacing: .06em; color: var(--ms-muted);
}
.ms-panel .ms-groups .ms-chips { gap: 1px; max-height: 208px; padding-right: 0; }
.ms-panel .ms-groups .ms-chip {
    position: relative; min-height: 22px; padding: 3px 4px 3px 11px; gap: 6px;
    border: 0; border-radius: 5px; background: none;
    font-size: 11px; font-weight: 400; line-height: 1.25; color: var(--ms-text);
}
.ms-panel .ms-groups .ms-chip:hover { background: var(--ms-bg); border-color: transparent; }
.ms-panel .ms-groups .ms-chip.is-on { background: none; border-color: transparent; color: var(--ms-accent); font-weight: 600; }
.ms-panel .ms-groups .ms-chip.is-on::before {
    content: ""; position: absolute; left: 3px; top: 50%; width: 4px; height: 4px; margin-top: -2px;
    border-radius: 50%; background: var(--ms-accent);
}
.ms-panel .ms-groups .ms-count { font-size: 9.5px; font-weight: 500; }

/* Lista wszystkich kategorii: też bez ramek */
.ms-panel .ms-all { padding: 8px 10px; border: 0; border-radius: 10px; }
.ms-panel .ms-cat-item { min-height: 24px; padding: 3px 6px; border: 0; background: none; font-size: 11px; }
.ms-panel .ms-cat-item:hover { background: var(--ms-surface); }
.ms-panel .ms-cat-item.is-on { background: none; color: var(--ms-accent); font-weight: 600; }
.ms-panel .ms-cat-item .ms-count { font-size: 9.5px; }

@media (max-width: 640px) {
    .ms-panel .ms-groups { gap: 18px; }
    .ms-panel .ms-groups .ms-group { width: min(46vw, 148px); }
}