/* Omoda — Salony. Reużywa design tokeny (omoda-core.css) i wspólne przyciski
   (.omoda-btn*), kontener (.omoda-container) oraz scroll-reveal
   ([data-omoda-reveal]) z omoda-core — omoda-salons wymaga omoda-core, więc
   to bezpieczna, twarda zależność (w przeciwieństwie do klas z INNYCH sekcji).
   Header (.omoda-salons__header-band) jest wizualnie skopiowany pod WŁASNYMI
   klasami z .omoda-pricing__header-band (Cennik) — ten sam wygląd/zachowanie
   (is-revealed), ale bez zależności runtime od omoda-section-pricing (ten sam
   wzorzec co "Baner" w Modelach, patrz komentarz w class-omoda-model-sections.php). */

.omoda-salons {
    background: #f9f9f9;
    padding-bottom: 64px;
}

/* ---------- Header: 1:1 z .omoda-pricing__header-band ---------- */

.omoda-salons__header-band {
    background: var(--omoda-color-dark);
    /* Header strony jest position:fixed — ta sama zmienna offsetu co Cennik/Modele,
       ustawiana globalnie przez model-sections.js na każdej stronie. */
    padding-top: calc(28px + var(--omoda-models-header-offset, 80px));
    padding-bottom: 28px;
}

.omoda-salons__heading {
    font-size: 26px;
    font-weight: 700;
    color: var(--omoda-color-text-inverse);
    margin: 0;
}

.omoda-salons__subheading {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    margin: 6px 0 0;
}

/* ---------- Layout: akordeon salonów, opcjonalnie (ustawienie w wp-adminie,
   NIE przełącznik na froncie — user) obok WSPÓLNEJ, sticky mapy 50/50; bez
   mapy akordeon zajmuje 100% szerokości. Formularz jest OSOBNYM blokiem POD
   całością (user: "formularz rozjebany, daj na dół pod lokalizacje"), nie w
   tej siatce. ---------- */

.omoda-salons__body {
    padding-block: var(--omoda-space-xl);
}

/* transition na grid-template-columns/gap — user: "ta animacja zmiany i
   pojawienia się 1 lub 2 kolumn chce aby była płynna". Oba stany używają
   TEJ SAMEJ funkcji minmax(0, Xfr) na drugiej kolumnie (tylko X się zmienia,
   1→0) — przeglądarki animują grid-template-columns płynnie TYLKO gdy liczba
   i KSZTAŁT torów się zgadzają; zmiana samej liczby kolumn (1 vs 2) nie
   animuje się wcale, stąd druga kolumna zostaje, tylko kurczy się do zera. */
.omoda-salons__body--with-map {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--omoda-space-xl);
    transition: grid-template-columns var(--omoda-transition-base) var(--omoda-ease), gap var(--omoda-transition-base) var(--omoda-ease);
}

/* Wszystkie pozycje akordeonu zwinięte (user: "jak zamknę wszystkie accord
   menu to mapa ładnie ma znikać a lewa kolumna ma być na 100% szerokości")
   — .is-empty dodawane/zdejmowane przez JS (activate(null) w salons-section.js). */
.omoda-salons__body--with-map.is-empty {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);
    gap: 0;
}

/* overflow:hidden — żeby treść mapy nie "wylewała się"/nie zawijała się
   brzydko, gdy kolumna kurczy się w trakcie animacji; opacity zamiast
   display:none (ten się NIE animuje) daje płynne, "znikające" przejście. */
.omoda-salons__map-col {
    overflow: hidden;
    opacity: 1;
    transition: opacity var(--omoda-transition-fast);
}

.omoda-salons__body--with-map.is-empty .omoda-salons__map-col {
    opacity: 0;
    pointer-events: none;
}

/* ---------- Akordeon: pozycje "duże" (user), tylko jedna rozwinięta naraz ---------- */

.omoda-salons__accordion {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--omoda-color-border);
}

.omoda-salons__item {
    border-bottom: 1px solid var(--omoda-color-border);
}

/* !important na background/border — motyw (hello-elementor/reset.css) ma
   `[type="button"]{border:1px solid #c36; border-radius:3px}` (selektor
   atrybutu = taka sama specyficzność co klasa, ładuje się PO CSS wtyczek),
   więc bez tego każdy <button> tutaj dostawał różowy obrys. Ten sam,
   wielokrotnie udokumentowany w projekcie konflikt co .omoda-btn w
   omoda-core.css.
   Padding w poziomie (nie 4px) + plakietka tła na hover/aktywne — user:
   "zobacz jak to wygląda np w modelach jak mamy sekcję 'dane specyfikacja'"
   (.omoda-tech-specs-section__accordion-trigger, model-sections.css) —
   ten sam wzorzec akordeonu, żeby oba wyglądały spójnie; 28px to TEN SAM
   odstęp co .omoda-salons__panel-content niżej, więc nazwa salonu i treść
   pod spodem zaczynają/kończą się dokładnie w tym samym miejscu (user
   kilkukrotnie podbijał ten padding: 20px → 24px → 28px).
   !important na display/width — TEN SAM motyw dodatkowo ustawia
   `[type="button"]{display:inline-block}`, więc przycisk kurczył się do
   szerokości samego tekstu zamiast 100% — strzałka lądowała zaraz obok
   nazwy zamiast przy prawej krawędzi (user: "strzałki powinny być do prawej
   strony"). Zmierzone wprost: bez !important display wychodził
   "inline-block", width "159px" zamiast pełnej szerokości wiersza.
   !important na padding z TEGO SAMEGO powodu (user: "nadal brakuje
   paddingu w title") — motyw resetuje też padding na [type="button"],
   więc bez !important przycisk dostawał padding motywu zamiast tego tutaj. */
.omoda-salons__trigger {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: var(--omoda-space-sm);
    width: 100% !important;
    max-width: none !important;
    padding: 28px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    cursor: pointer;
    text-align: left;
    font-family: var(--omoda-font-base);
    transition: background-color var(--omoda-transition-fast);
}

.omoda-salons__trigger:hover {
    background-color: rgba(18, 18, 18, 0.04) !important;
}

/* Białe tło aktywnego title (user: zamiast poprzedniego #d6f5ff) — border-bottom
   żeby title nadal było oddzielone linią od treści po rozwinięciu (user:
   "zachowajmy ta dolna linie"), bo kontrast #d6f5ff/białe tło, który wcześniej
   robił tę granicę wizualnie, zniknął razem ze zmianą koloru. */
.omoda-salons__item.is-active .omoda-salons__trigger {
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--omoda-color-border) !important;
}

/* Nazwa + adres jeden pod drugim w TYM SAMYM, zawsze widocznym nagłówku
   (user: "popraw title tak aby tam był też ten adres") — adres nie jest już
   częścią zwijanej treści, widać go też gdy pozycja jest zamknięta. */
.omoda-salons__trigger-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    opacity: 0.7;
    transition: opacity var(--omoda-transition-fast);
}

.omoda-salons__item.is-active .omoda-salons__trigger-text {
    opacity: 1;
}

/* Waga STAŁA (nie 500→700 przy aktywnej) — user: "po kliknięciu title accord
   nie ma być bold" — wyróżnienie otwartej pozycji zostaje tylko przez
   opacity (wyżej) i podświetlone tło triggera (.is-active .omoda-salons__trigger
   wyżej), bez pogrubienia.
   text-align:left !important — globalny styl (Elementor/motyw) centruje
   tekst nagłówków z wyższą specyficznością niż text-align:left na samym
   .omoda-salons__trigger; bez tego KAŻDA nazwa była wyśrodkowana w swoim
   (pełnej szerokości) boksie, więc różne długości nazw miast ("Kraków" vs
   "Sosnowiec") zaczynały się w RÓŻNYCH miejscach — user: "nazwa miasta jest
   kopnięta w prawo niepotrzebnie" (to nie był błąd stanu aktywny/nieaktywny,
   tylko wyśrodkowanie + różne długości tekstu). */
/* 18px (nie 24px) — user: "nie podoba mi się że nazwy miejscowości są takie
   duże" — ten sam rozmiar co .omoda-tech-specs-section__accordion-name
   (model-sections.css, referencyjny akordeon). */
.omoda-salons__trigger-name {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: var(--omoda-color-text);
    line-height: 1.2;
    text-align: left !important;
}

.omoda-salons__trigger-address {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: var(--omoda-color-text-muted);
    line-height: 1.3;
    text-align: left !important;
}

/* Grupuje kropkę komunikatu + strzałkę jako JEDEN flex item po prawej —
   .omoda-salons__trigger ma justify-content:space-between na dwóch dzieciach
   (trigger-text / trigger-end), więc dodanie kropki jako trzeciego
   bezpośredniego dziecka rozjechałoby ten układ na 3 kolumny. */
.omoda-salons__trigger-end {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

/* Pulsująca kropka obok strzałki (user: "ikonka [...] powinna pulsować kolor
   koła taki jak wybrany w wp-admin") — widoczna OD RAZU w title, zwinięty czy
   nie, sygnalizuje aktywny komunikat bez rozwijania akordeonu. Pulsowanie =
   rozchodzący się, gasnący pierścień tego samego koloru (box-shadow 0→6px,
   alpha 55%→0%), klasyczny wzorzec "live dot", nie zmiana samego tła kropki. */
.omoda-salons__trigger-notice-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--omoda-salons-notice-color, #d81f26);
    animation: omoda-salons-notice-pulse 1.8s ease-in-out infinite;
}

@keyframes omoda-salons-notice-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--omoda-salons-notice-color, #d81f26) 55%, transparent);
    }
    50% {
        box-shadow: 0 0 0 6px color-mix(in srgb, var(--omoda-salons-notice-color, #d81f26) 0%, transparent);
    }
}

/* 24x24 (nie 32x32) — user: "strzałki są za duże"; ten sam rozmiar co
   .omoda-tech-specs-section__accordion-caret (model-sections.css). */
.omoda-salons__accordion-caret {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(18, 18, 18, 0.06);
    color: var(--omoda-color-text);
    transition: transform var(--omoda-transition-base), background-color var(--omoda-transition-base), color var(--omoda-transition-base);
}

.omoda-salons__item.is-active .omoda-salons__accordion-caret {
    background: var(--omoda-color-text);
    color: #ffffff;
    transform: rotate(180deg);
}

.omoda-salons__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--omoda-transition-base);
}

/* min-height:0 — bez tego element gridu (panel-inner) trzyma swój automatyczny
   minimalny rozmiar NAWET gdy wiersz grida jest ściśnięty do 0fr. Ale to
   WCIĄŻ nie wystarczało, gdy panel-inner miał WŁASNY padding (user: "zwinięty
   nie zwija się w całości, widać część treści") — padding elementu gridu
   liczy się do jego rozmiaru niezależnie od min-height/overflow (content
   może skurczyć się do 0, ale padding zostaje — zmierzone wprost: zamknięty
   panel miał wysokość DOKŁADNIE równą sumie paddingu, 36px). Dlatego
   panel-inner jest teraz BEZ paddingu (przeniesiony na .omoda-salons__panel-content
   niżej, zwykłe dziecko, nie element gridu). */
.omoda-salons__panel > .omoda-salons__panel-inner {
    overflow: hidden;
    min-height: 0;
}

.omoda-salons__item.is-active .omoda-salons__panel {
    grid-template-rows: 1fr;
}

/* Białe tło na panel-inner, BEZ zaokrąglenia/cienia (user: "na białym po
   rozwinięciu nie powinno być radius, usuń też shadow") — nie na
   .omoda-salons__hours-card, usunięte niżej) — user: "zaokrąglenia to powinno
   mieć po prostu tło
   omoda-salons__panel-inner a nie to omoda-salons__hours-card" — CAŁA
   rozwinięta treść (komunikaty, godziny, przyciski) w jednej karcie,
   font-family !important z tego samego powodu co .omoda-salons__trigger
   wyżej (konflikt z globalnym kitem Elementora na `body`). */
.omoda-salons__panel-inner {
    background: #ffffff;
    font-family: var(--omoda-font-base) !important;
}

/* Padding TU (nie na panel-inner wyżej) — zwykłe dziecko, nie element gridu,
   więc jego padding nie przeszkadza zwijaniu do zera. */
.omoda-salons__panel-content {
    display: flex;
    flex-direction: column;
    gap: var(--omoda-space-sm);
    padding: 28px;
}

/* ---------- Komunikaty ---------- */

/* BEZ border-left (user: "ten border mi w ogóle usuń") — zamiast tego całe tło
   karty jest delikatnym gradientem w kolorze wybranym w wp-adminie, gasnącym
   od lewej krawędzi w stronę prawej. */
.omoda-salons__notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--omoda-salons-notice-color, #d81f26) 14%, transparent) 0%, transparent 70%);
    border-radius: 4px;
    padding: 12px 16px;
}

/* Ikony (info/ostrzeżenie) jako mask-image pokolorowany na --omoda-salons-notice-color
   (ten sam kolor co pasek) — "none" po prostu nie dodaje .omoda-salons__notice-icon
   w ogóle (patrz notices_html() w PHP), więc nie trzeba tu żadnej reguły --none. */
.omoda-salons__notice-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    background-color: var(--omoda-salons-notice-color, #d81f26);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.omoda-salons__notice--info .omoda-salons__notice-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3C/svg%3E");
}

.omoda-salons__notice--danger .omoda-salons__notice-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
}

.omoda-salons__notice-body {
    flex: 1 1 auto;
    min-width: 0;
}

.omoda-salons__notice-headline {
    display: block;
    font-size: 14px;
    color: var(--omoda-color-text);
}

.omoda-salons__notice-text {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--omoda-color-text-muted);
}

/* Limit 150 znaków + "Rozwiń więcej" (user: "informacja może mieć max 150
   znaków [...] pojawia się TYLKO jeśli faktycznie coś jest więcej do
   rozwinięcia") — notice_text_html() w PHP dodaje tę strukturę TYLKO gdy
   tekst faktycznie przekracza limit, więc .omoda-salons__notice-more po
   prostu nie istnieje w markupie dla krótszych komunikatów. Kolor/rozmiar
   dziedziczone z .omoda-salons__notice-text (wyżej) — ta sama klasa na
   wrapperze (<p> krótki komunikat / <div> długi), tylko reset marginesu na
   zagnieżdżonych <p>. Natywny <details>/<summary>, bez JS — przełączanie
   etykiet "Rozwiń więcej"/"Zwiń" samym CSS-em przez [open]. */
.omoda-salons__notice-text-excerpt,
.omoda-salons__notice-text-rest {
    margin: 0;
}

.omoda-salons__notice-more {
    margin-top: 4px;
}

.omoda-salons__notice-more summary {
    display: inline-block;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--omoda-salons-notice-color, #d81f26);
    list-style: none;
}

.omoda-salons__notice-more summary::-webkit-details-marker {
    display: none;
}

.omoda-salons__notice-more summary::marker {
    content: '';
}

.omoda-salons__notice-more .omoda-salons__notice-more-label-less {
    display: none;
}

.omoda-salons__notice-more[open] .omoda-salons__notice-more-label-more {
    display: none;
}

.omoda-salons__notice-more[open] .omoda-salons__notice-more-label-less {
    display: inline;
}

.omoda-salons__notice-more .omoda-salons__notice-text-rest {
    margin-top: 6px;
}

/* ---------- Godziny + e-mail (Salon / Serwis) ---------- */

/* JEDNO białe tło na całą rozwiniętą treść, nie tylko na Salon/Serwis (user:
   "rozwinięcie content powinno mieć jedno białe tło nie podzielone na
   serwis/salon") — tło/zaokrąglenie jest teraz na .omoda-salons__panel-inner
   (wyżej), więc oba bloki (hours_block_html() w PHP, bez własnego tła) są
   po prostu jego dziećmi, oddzielonymi cienką linią zamiast osobnych kart. */
.omoda-salons__hours-block + .omoda-salons__hours-block {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--omoda-color-border);
}

.omoda-salons__hours-title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--omoda-color-text);
}

.omoda-salons__hours-row {
    display: flex;
    justify-content: space-between;
    gap: var(--omoda-space-xs);
    padding: 6px 0;
    font-size: 14px;
    border-top: 1px solid var(--omoda-color-border);
}

.omoda-salons__hours-row:first-of-type {
    border-top: 0;
}

.omoda-salons__hours-row span:first-child {
    color: var(--omoda-color-text-muted);
}

.omoda-salons__hours-row span:last-child {
    color: var(--omoda-color-text);
    font-weight: 600;
    text-align: right;
}

.omoda-salons__email {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--omoda-color-border);
}

/* [hidden] — motyw ma `[type="button"]{display:inline-block}` (ta sama
   specyficzność co `[hidden]{display:none}` przeglądarki, ładuje się PÓŹNIEJ),
   więc bez !important przycisk zostawał widoczny mimo atrybutu hidden po
   odsłonięciu e-maila. */
.omoda-salons__email-reveal[hidden] {
    display: none !important;
}

/* Kolor szary (nie niebieski --omoda-color-link) — user: "zachowanie pokaż
   e-mail tak samo jak w dropdown" (header, class-omoda-header.php mega menu
   "Nasze salony"): tam "Pokaż e-mail" dziedziczy stonowany, szary kolor
   otaczającego tekstu godzin zamiast wyróżniać się jako link. font-family
   !important — patrz .omoda-salons__hours-card wyżej, ten sam powód. */
/* font-size !important — bez tego motyw ([type="button"]) nadpisywał na 16px
   (zmierzone wprost), więc po kliknięciu tekst e-maila (13px, <a>, nie
   dotyczy go ten konflikt) wyglądał jakby "skurczył się" względem przycisku
   "Pokaż e-mail" — user: "ten mail [...] jest za mały względem samego
   przycisku". */
/* TEN SAM styl co "Kopiuj" (.omoda-salons__email-copy niżej) — user: "pokaz
   email powinien mieć taki styl przycisk jak 'kopiuj'" — pigułka zamiast
   ramki/obrysu. */
.omoda-salons__email-reveal {
    display: inline-flex;
    align-items: center;
    background: rgba(18, 18, 18, 0.06) !important;
    border: 0 !important;
    border-radius: 4px !important;
    padding: 4px 10px !important;
    font-family: var(--omoda-font-base) !important;
    font-size: 12px !important;
    font-weight: 600;
    color: var(--omoda-color-text) !important;
    cursor: pointer;
    text-decoration: none !important;
    transition: background-color var(--omoda-transition-fast);
}

.omoda-salons__email-reveal:hover,
.omoda-salons__email-reveal:focus-visible {
    background-color: rgba(18, 18, 18, 0.12) !important;
}

.omoda-salons__email-value {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.omoda-salons__email-link {
    font-family: var(--omoda-font-base) !important;
    font-size: 13px;
    font-weight: 600;
    word-break: break-all;
    color: var(--omoda-color-text) !important;
}

.omoda-salons__email-copy {
    flex: none;
    background: rgba(18, 18, 18, 0.06) !important;
    border: 0 !important;
    border-radius: 4px !important;
    padding: 4px 10px !important;
    font-family: var(--omoda-font-base) !important;
    font-size: 12px !important;
    font-weight: 600;
    color: var(--omoda-color-text) !important;
    cursor: pointer;
    transition: background-color var(--omoda-transition-fast), color var(--omoda-transition-fast);
}

.omoda-salons__email-copy:hover,
.omoda-salons__email-copy:focus-visible {
    background: rgba(18, 18, 18, 0.12);
}

.omoda-salons__email-copy.is-copied {
    background: var(--omoda-color-text) !important;
    color: #ffffff !important;
}

/* ---------- Akcje: "Pokaż na mapie" (dawniej "Jak dojechać", sam link do
   Google Maps bez zmian) obok "Formularz kontaktowy" (user: "obok Formularz
   kontaktowy i tam ma przewijać do formularza") — przewija do formularza
   osadzonego NIŻEJ na tej samej stronie (render_form_panel(), patrz
   .omoda-salons__form-col niżej), scrollIntoView w salons-section.js. ---------- */

.omoda-salons__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* !important NIE WYSTARCZAŁO — user: "po kliknięciu przyciski znikają"
   (konkretnie: "Formularz kontaktowy"). Przyczyna: motyw ma globalne
   "a:visited" o specyficzności (0,1,1) — WYŻSZEJ niż sama klasa (0,1,0) w
   TRZECIEJ kolumnie specyficzności (typ/pseudoelement), więc nawet z
   !important po obu stronach a:visited i tak wygrywał (remis w kolumnie
   klas, 1=1, rozstrzygnięty kolumną typu, 1>0) — samo !important podnosi
   tylko PRIORYTET, nie specyficzność, więc przy remisie priorytetu nadal
   decyduje specyficzność. Stąd DRUGA, jawna reguła `:visited` niżej z
   podbitą specyficznością (2 klasy + pseudoklasa = (0,3,0), bije (0,1,1)) —
   ten sam, już udokumentowany w tym repo wzorzec (patrz komentarz w
   omoda-forms/assets/css/forms.css przy .omoda-form__submit:visited).
   href="#" (Formularz kontaktowy, bez prawdziwego URL-a do przewinięcia JS-em)
   wskazuje na BIEŻĄCĄ stronę — przeglądarka od razu traktuje go jako
   "odwiedzony", więc po kliknięciu kolor/obrys spadały z powrotem do
   białego .omoda-btn--outline (myślanego pod ciemne tło) i przycisk
   wyglądał jakby zniknął na jasnej karcie. "Pokaż na mapie" (link do
   zewnętrznego, jeszcze nieodwiedzonego URL-a Google Maps) nie miał tego
   problemu, stąd niespójne zachowanie dwóch przycisków w tej samej regule. */
.omoda-salons__directions,
.omoda-salons__scroll-to-form,
.omoda-salons__actions .omoda-salons__directions:visited,
.omoda-salons__actions .omoda-salons__scroll-to-form:visited {
    color: var(--omoda-color-text) !important;
    border-color: rgba(18, 18, 18, 0.3) !important;
    box-shadow: none;
    padding: 10px 22px;
    font-size: 14px;
}

.omoda-salons__directions:hover,
.omoda-salons__directions:focus-visible,
.omoda-salons__scroll-to-form:hover,
.omoda-salons__scroll-to-form:focus-visible {
    background-color: rgba(18, 18, 18, 0.06);
    border-color: var(--omoda-color-text) !important;
    color: var(--omoda-color-text) !important;
}

/* ---------- Mapa: JEDNA, wspólna mapa (prawa kolumna), sticky pod headerem
   strony, podmieniana przez JS (src) przy zmianie aktywnego salonu w
   akordeonie — patrz syncMap() w salons-section.js. ---------- */

.omoda-salons__map-col {
    position: sticky;
    top: calc(var(--omoda-models-header-offset, 80px) + 20px);
}

/* Nazwa/adres salonu + "Zobacz jak dojechać" NAD mapą (user: "jak mam mapę
   po prawej stronie to tam ma być przycisk tez 'Zobacz jak dojechać' i ma
   być tam adres wraz z miejscowością pokazany") — aktualizowane przez JS
   (syncMap()) przy zmianie aktywnego salonu w akordeonie. */
.omoda-salons__map-info {
    margin-bottom: 0;
}

.omoda-salons__map-name {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 600;
    color: var(--omoda-color-text);
}

/* Adres + "Zobacz jak dojechać" w jednej linii, przycisk po prawej (user:
   "Zobacz jak dojechać w prawej kolumnie niech będzie po prawej stronie na
   linii adresu"). */
.omoda-salons__map-address-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.omoda-salons__map-address {
    margin: 0;
    font-size: 14px;
    color: var(--omoda-color-text-muted);
}

/* !important — ten sam powód co .omoda-salons__directions wyżej (a:visited
   motywu); tu dodatkowo PRAWDOPODOBNE w praktyce: to ten sam map_url co
   "Pokaż na mapie" w akordeonie — po kliknięciu TAMTEGO (otwiera Google Maps
   w nowej karcie) ten URL staje się "odwiedzony" i TEN przycisk też by
   dostał biały kolor bez !important. */
.omoda-salons__map-directions,
.omoda-salons__map-address-row .omoda-salons__map-directions:visited {
    color: var(--omoda-color-text) !important;
    border-color: rgba(18, 18, 18, 0.3) !important;
    box-shadow: none;
    padding: 10px 22px;
    font-size: 14px;
}

/* [hidden] — motyw/.omoda-btn nadpisuje display (ten sam powód co
   .omoda-salons__email-reveal[hidden]) — ukrywany przez JS, gdy żaden salon nie jest wybrany. */
.omoda-salons__map-directions[hidden] {
    display: none !important;
}

.omoda-salons__map-directions:hover,
.omoda-salons__map-directions:focus-visible {
    background-color: rgba(18, 18, 18, 0.06);
    border-color: var(--omoda-color-text) !important;
    color: var(--omoda-color-text) !important;
}

.omoda-salons__map {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #ececec;
}

/* Leaflet dolewa własny z-index na kontrolki/popupy — bez tego potrafią
   wychodzić nad fixed header strony przy przewijaniu (ten sam zabieg co
   .omoda-service-network__map w Serwisie). */
.omoda-salons__map-canvas {
    width: 100%;
    height: 100%;
}

.omoda-salons__map-canvas .leaflet-pane,
.omoda-salons__map-canvas .leaflet-control {
    z-index: 1;
}

.omoda-salons__map-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    margin: 0;
    font-size: 14px;
    color: var(--omoda-color-text-muted);
}

/* ---------- Formularz: pełna szerokość POD spisem salonów (user) — .omoda-form
   ma WŁASNY trik pełnej szerokości (forms.css), tu tylko odstęp od reszty strony. ---------- */

.omoda-salons__form-col {
    margin-top: var(--omoda-space-lg);
}

/* ---------- Mobile ---------- */

@media (max-width: 1024px) {
    .omoda-salons__body--with-map {
        grid-template-columns: 1fr;
    }

    .omoda-salons__map-col {
        position: static;
    }

    .omoda-salons__map {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 767px) {
    /* "Jak dojechać?" i "Formularz kontaktowy": jeden pod drugim, każdy na 100% szerokości */
    .omoda-salons__actions {
        flex-direction: column;
    }

    .omoda-salons__actions .omoda-btn {
        width: 100%;
        text-align: center;
    }

    /* "Zobacz jak dojechać" pod adresem, na 100% szerokości */
    .omoda-salons__map-address-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .omoda-salons__map-address-row .omoda-salons__map-directions {
        width: 100%;
        text-align: center;
    }
}