/* Podświetlanie refów na diagramie produktu.
 *
 * Trzy stany znacznika, celowo różne siłą:
 *   (brak)  — niewidoczny; rysunek wygląda jak dotąd
 *   .sel    — TRWAŁY: tę naklejkę klient wybrał. Widoczny cały czas, także na
 *             telefonie, bo tam jest jedyną funkcją (hover nie istnieje, a kafelków
 *             i rysunku i tak nie widać naraz).
 *   .on     — WSKAZANY: kursor jest nad tym numerem albo nad jego kafelkiem.
 *             Musi przebić .sel, więc jest mocniejszy i ma poświatę.
 *
 * Kolor: numery na rysunku są bordowe (171,2,16), więc podświetlenie jest NIEBIESKIE.
 * Czerwone (jak w panelu weryfikacji cen) zlewałoby się z samą cyfrą.
 */

.dref-host { position: relative; }

.dref-layer {
    position: absolute;
    pointer-events: none;   /* warstwa przepuszcza klik; łapią go same znaczniki */
    z-index: 3;
}

.dref-hot {
    position: absolute;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    border: 2.5px solid transparent;
    background: transparent;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
    opacity: 0;
    transition: opacity .12s ease, background-color .18s ease, border-color .18s ease;
    -webkit-tap-highlight-color: transparent;
}

.dref-hot:focus { outline: none; }

/* Odznaki L/R w legendzie — czyste WSKAŹNIKI. Zapalają się razem z numerem
   należącym do pary, ale niczego nie obsługują i nie mogą przejmować kursora
   (klient klika w legendę tak samo rzadko, jak w ramkę obrazka). */
.dref-legend {
    pointer-events: none;
    cursor: default;
}

/* Dotyk NA STRONIE: znacznik to wyłącznie WSKAŹNIK wyboru, nie przycisk. Nie może
   przejmować dotknięć, bo klient przewija i przybliża rysunek palcem po tym samym
   obszarze, a przy 578 px szerokości i tak by w niego nie trafił.
   W POWIĘKSZENIU jest odwrotnie — patrz `.dref-in-lightbox` niżej. */
@media (hover: none) {
    .dref-layer:not(.dref-in-lightbox) .dref-hot {
        pointer-events: none;
        cursor: default;
    }
}

/* Powiększenie (lightGallery) wygląda TAK SAMO jak rysunek na stronie: znacznik
 * niewidoczny, dopóki czegoś nie oznacza.
 *
 * Była tu wcześniej próba pokazywania wszystkich znaczników na stałe („żeby na
 * telefonie było widać, że są klikalne") i okazała się szkodliwa: skoro niezaznaczone
 * już świecą, to zaznaczony wygląda prawie identycznie, a zielone potwierdzenie ginie
 * wśród kilkunastu obwódek. Na desktopie różnicę ratował `:hover`, na dotyku nie było
 * jej wcale — stąd wrażenie, że kliknięcie kolejnego numeru odznacza poprzedni.
 * Afordancją są SAME NUMERY na rysunku, nie nasza obwódka. */

/* Turkus #1ABDE8 to kolor, którym motyw oznacza zaznaczony kafelek — używamy go
   wszędzie, żeby rysunek i lista mówiły tym samym językiem.
 *
 * Stany różnią się SIŁĄ, nie barwą: wybrane jest spokojne, wskazane kursorem ma
 * mocniejsze wypełnienie i poświatę. Dzięki temu na rysunku pełnym zaznaczeń
 * nadal widać, na co właśnie patrzysz. */
.dref-hot.sel {
    opacity: 1;
    border-color: #1abde8;
    background: rgba(26, 189, 232, .14);
}

/* Wskazane kursorem — z obu kierunków wygląda TAK SAMO, bo to ten sam stan. */
.dref-hot.on,
.dref-hot:focus-visible {
    opacity: 1;
    border-color: #1abde8;
    background: rgba(26, 189, 232, .34);
    box-shadow: 0 0 0 4px rgba(26, 189, 232, .28);
}

/* `:hover` WYŁĄCZNIE tam, gdzie istnieje kursor.
 *
 * Przeglądarki mobilne przypisują `:hover` ostatnio dotkniętemu elementowi i trzymają
 * go do następnego dotknięcia. Reguła bez tego ograniczenia sprawiała, że na telefonie
 * znaczniki zachowywały się jak zaznaczenie jednokrotne: dotknięcie kolejnego numeru
 * „gasiło" poprzedni, choć nic się nie odznaczało. */
@media (hover: hover) {
    .dref-hot:hover {
        opacity: 1;
        border-color: #1abde8;
        background: rgba(26, 189, 232, .34);
        box-shadow: 0 0 0 4px rgba(26, 189, 232, .28);
    }
}

/* Potwierdzenie zaznaczenia/odznaczenia — mignięcie kolorem + znaczek w rogu.
   Bez tego klik w kafelek nie zostawia śladu na rysunku i nie wiadomo, który
   numer właśnie doszedł. */
.dref-hot.flash-add,
.dref-hot.flash-add.on,
.dref-hot.flash-add.sel {
    opacity: 1;
    border-color: #1faa4b;
    background: rgba(31, 170, 75, .30);
    box-shadow: 0 0 0 4px rgba(31, 170, 75, .25);
}

.dref-hot.flash-del,
.dref-hot.flash-del.on,
.dref-hot.flash-del.sel {
    opacity: 1;
    border-color: #e5484d;
    background: rgba(229, 72, 77, .28);
    box-shadow: 0 0 0 4px rgba(229, 72, 77, .25);
}

/* Znaczek rysowany PASKAMI TŁA, nie literą.
 *
 * Centrowanie tekstem zależy od metryk fontu: interlinia centruje pole wiersza,
 * a nie sam glif, więc „+" siadał poniżej środka kółka i przy każdym kroju siadałby
 * inaczej. Przy kółku 16 px to walka o piksel, której nie da się wygrać na stałe.
 * `background-position: center` centruje pasek względem pola ELEMENTU, bez udziału
 * jakichkolwiek metryk — pasek 8x2 na polu 16x16 zajmuje rzędy 7-9, środek na 8. */
.dref-hot.flash-add::after,
.dref-hot.flash-del::after {
    content: "";
    position: absolute;
    right: -9px;
    top: -9px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-repeat: no-repeat;
    pointer-events: none;
}

.dref-hot.flash-add::after {
    background-color: #1faa4b;
    background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
    background-size: 8px 2px, 2px 8px;      /* poziomy + pionowy pasek = plus */
    background-position: center, center;
}

.dref-hot.flash-del::after {
    background-color: #e5484d;
    background-image: linear-gradient(#fff, #fff);
    background-size: 8px 2px;               /* sam poziomy pasek = minus */
    background-position: center;
}

/* Zgodność z powiększeniem Journal3 (ImageZoom).
 *
 * Przy typie „inner" panel powiększenia dostaje dokładnie `top/left/width/height`
 * obrazka i przykrywa go w całości — obwódka jest wtedy rysowana POD nim i po
 * prostu jej nie widać (kliknięcia działają, bo `.zm-viewer`/`.zm-handler` mają
 * w motywie `pointer-events: none`).
 *
 * Zamiast walczyć z-indeksem — co postawiłoby obwódkę na powiększonym kadrze,
 * czyli w miejscu nieodpowiadającym temu, co widać — wygaszamy powiększenie
 * TYLKO na czas, gdy kursor stoi na numerze. Zoom działa wszędzie indziej.
 * Przy wyłączonym powiększeniu ta reguła nie ma czego dotyczyć. */
.dref-zoom-off .zm-viewer,
.dref-zoom-off .zm-handler {
    opacity: 0 !important;
    /* Bez tego panel gaśnie pół sekundy (motyw ma `transition: opacity .25s .25s`)
       i przez ten czas zasłania obwódkę, na którą klient właśnie najechał. */
    transition: none !important;
}

/* Kierunek odwrotny: klient wodzi myszą po rysunku i widzi, który kafelek
   z ceną to jest.
 *
 * Ruszamy WYŁĄCZNIE ramkę kafelka. Tła nie tykamy, bo tłem motyw sygnalizuje
 * stan „zaznaczone" (turkusowe #1abde8 z wypełnieniem) — podświetlenie zmieniające
 * tło czytałoby się jak zaznaczenie naklejki, której klient nie wybrał.
 *
 * Selektor musi przebić regułę motywu
 * `.product-info .product-options .push-option > div .option-value`, stąd pełna
 * ścieżka zamiast samej klasy. Wariant skrócony zostaje na wypadek zmiany motywu. */
.product-info .product-options .push-option > div .option-value.dref-opt-on,
.option-value.dref-opt-on {
    border-color: #1abde8;
}