/* Drobne poprawki calego sklepu: checkboxy, kolor linkow. */

:root {
  /* Pola wyboru - jeden rozmiar i jeden odstep w calym sklepie. */
  --mx-cb-size: 16px;
  --mx-cb-gap: 10px;
  --mx-cb-line: 1.45;          /* wysokosc wiersza etykiety pola wyboru */
  --mx-cb-border: #808080;

  /* Slajd 268: jeden kolor odnosnikow w tresci. Wartosc podana przez klientke. */
  --mx-link: rgb(26, 13, 171);
  --mx-link-hover: rgb(15, 7, 110);
}

/* ==========================================================================
   SLAJD 267 - pola wyboru rozjezdzaly sie wzgledem etykiet
   --------------------------------------------------------------------------
   Co bylo zle (pomiary z zywej strony, 1280x800):

   1) ODSTEP POZIOMY. leoelements/custom.css ma
        .custom-checkbox label > a { margin-left: .85rem }
      Zgoda, ktorej napis jest odnosnikiem ("Zgadzam sie na warunki."),
      dostawala 13,6 px doklejki, ktorej nie dostawala zgoda z golym tekstem
      ("Zapisz sie na nasz newsletter"). W kasie doklejala sie do tego jeszcze
      czerwona gwiazdka, bo regula
        body#checkout .custom-checkbox span { float: left }
      lapie KAZDY span w srodku etykiety, wiec <span style="color:red">*</span>
      tez plynie w lewo i wchodzi miedzy kwadracik a napis.
      Zmierzone odstepy kwadracik->tekst w kroku 1 kasy:
        "Zgadzam sie na warunki."       24,41 px
        "Zapisz sie na nasz newsletter"  4,00 px
      Te dwa wiersze leza jeden pod drugim - to jest ten rozjazd ze zrzutu.

   2) ODSTEP PIONOWY. Ten sam kwadracik jest ustawiany dwoma sprzecznymi
      sposobami. Poza kasa dziala vertical-align: middle z theme.css - srodek
      kwadracika laduje 1,15 px PONIZEJ srodka tekstu. W kasie wygrywa
      float: left - kwadracik przykleja sie do gory wiersza i laduje 2,50 px
      POWYZEJ srodka tekstu. Ta sama kontrolka odchylona w dwie rozne strony.

   3) ROZMIAR. 15 px (motyw), 17 px (modal leoquicklogin), 13 px ("Zapamietaj
      mnie"), 18 px (radio). Cztery rozmiary tej samej kontrolki.

   Jak to jest naprawione: kwadracik wychodzi z ukladu liniowego i jest
   pozycjonowany bezwzglednie w etykiecie, ktora dostaje wciecie z lewej
   rowne (rozmiar + odstep). Gorna krawedz liczona jako
   (wysokosc wiersza - rozmiar) / 2, wiec srodek kwadracika pokrywa sie ze
   srodkiem PIERWSZEGO wiersza tekstu niezaleznie od tego, czy napis jest
   odnosnikiem, golym tekstem, czy zawija sie na kilka linii.

   Uwaga o specyficznosci: motyw stroi te pola z selektorow z id
   (body#checkout, #authentication, #identity #customer-form), ktorych nie da
   sie przebic sama kolejnoscia arkuszy. Dlatego selektory nizej powtarzaja
   te konteksty zamiast siegac po !important.
   ========================================================================== */

.custom-checkbox,
body#checkout .custom-checkbox,
#authentication .custom-checkbox,
#identity .custom-checkbox {
  position: relative;
  display: block;
}

/* Etykieta niesie wciecie, w ktorym siedzi kwadracik. */
.custom-checkbox > label,
body#checkout .custom-checkbox > label,
#authentication .custom-checkbox > label,
#identity #customer-form .custom-checkbox > label {
  position: relative;
  display: block;
  min-height: var(--mx-cb-size);
  margin: 0;
  padding: 0 0 0 calc(var(--mx-cb-size) + var(--mx-cb-gap));
  overflow: visible;             /* kasuje overflow:hidden z body#checkout */
  line-height: var(--mx-cb-line);
  text-align: left;
  cursor: pointer;
}

/* Pole i jego wizualny kwadracik leza dokladnie na sobie, wysrodkowane
   na pierwszym wierszu tekstu. */
.custom-checkbox > label > input[type="checkbox"],
.custom-checkbox > label > input[type="checkbox"] + span,
body#checkout .custom-checkbox > label > input[type="checkbox"],
body#checkout .custom-checkbox > label > input[type="checkbox"] + span {
  position: absolute;
  top: calc((var(--mx-cb-line) * 1em - var(--mx-cb-size)) / 2);
  left: 0;
  float: none;
  width: var(--mx-cb-size);
  height: var(--mx-cb-size);
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

.custom-checkbox > label > input[type="checkbox"] + span,
body#checkout .custom-checkbox > label > input[type="checkbox"] + span {
  display: block;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--mx-cb-border);
  border-radius: 2px;
}

/* Ptaszek na srodku kwadracika (motyw ustawial mu margines -0.125rem). */
.custom-checkbox > label > input[type="checkbox"] + span > .checkbox-checked,
body#checkout .custom-checkbox > label > input[type="checkbox"] + span > .checkbox-checked {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  font-size: 18px;
  line-height: 1;
  transform: translate(-50%, -50%);
}

/* Widoczny stan skupienia dla klawiatury - samo pole jest przezroczyste. */
.custom-checkbox > label > input[type="checkbox"]:focus-visible + span,
body#checkout .custom-checkbox > label > input[type="checkbox"]:focus-visible + span {
  outline: 2px solid var(--mx-link);
  outline-offset: 2px;
}

/* Zdejmujemy doklejki, ktore rozjezdzaly odstep poziomy. Odstep jest teraz
   raz ustawiony na etykiecie (padding-left) i taki sam dla kazdej zgody. */
.custom-checkbox > label > a,
body#checkout .custom-checkbox > label > a {
  margin-left: 0;
}

/* Gwiazdka wymagalnosci wraca do tekstu zamiast plynac pod kwadracik. */
body#checkout .custom-checkbox > label > span {
  float: none;
}

/* --- pola jednokrotnego wyboru (Pan / Pani) ------------------------------
   Kolko zostaje w ukladzie liniowym (inaczej niz kwadracik pola wielokrotnego
   wyboru): kasa ma regule
     body#checkout section.checkout-step #customer-form .radio-inline {padding:0}
   z dwoma id w selektorze, ktora zerowalaby wciecie etykiety - a takich
   regul jest kilka (#customer-form, #delivery-address, #invoice-address).
   Zamiast gonic je wszystkie, ustawiamy odstep na samym kolku.
   vertical-align: -3px bierze sie z metryk fontu: przy 14 px srodek pudelka
   tekstu lezy 5,1 px nad linia bazowa, wiec dol kolka 16 px ma byc 2,9 px pod
   nia. Zmierzone odchylenie po zmianie: 0,1 px.
   Poza tym motyw zerowal .custom-radio margin-right w kasie, przez co napis
   dotykal kolka (odstep 0 px), a na /rejestracja mial 8 px. Teraz wszedzie 10. */
label.radio-inline,
body#checkout label.radio-inline,
#identity label.radio-inline,
#authentication label.radio-inline,
#customer-form .form-control-valign label.radio-inline {
  display: inline-block;
  line-height: var(--mx-cb-line);
  vertical-align: top;
}

label.radio-inline > .custom-radio,
#identity label.radio-inline > .custom-radio,
#authentication label.radio-inline > .custom-radio,
body#checkout section.checkout-step label.radio-inline > .custom-radio {
  position: relative;
  display: inline-block;
  width: var(--mx-cb-size);
  height: var(--mx-cb-size);
  margin: 0 var(--mx-cb-gap) 0 0;
  vertical-align: -3px;
}

label.radio-inline > .custom-radio > input[type="radio"],
body#checkout section.checkout-step label.radio-inline > .custom-radio > input[type="radio"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

label.radio-inline > .custom-radio > input[type="radio"]:checked + span,
body#checkout section.checkout-step label.radio-inline > .custom-radio > input[type="radio"]:checked + span {
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: 0;
  transform: translate(-50%, -50%);
}

label.radio-inline > .custom-radio:focus-within {
  outline: 2px solid var(--mx-link);
  outline-offset: 2px;
}

/* --- modal "Logowanie / Rejestracja" (leoquicklogin) ---------------------
   Tu motyw NIE uzywa .custom-checkbox - to sa natywne pola przegladarki,
   czyli druga, konkurencyjna stylizacja tej samej kontrolki. Zostawiamy
   natywny wyglad (zawsze czytelny stan zaznaczenia), ale wyrownujemy
   rozmiar i odstep do reszty sklepu.
   vertical-align: -3px wynika z pomiaru: przy foncie 14 px srodek pudelka
   tekstu lezy 5,1 px nad linia bazowa, wiec dol kwadracika 16 px musi byc
   2,9 px pod nia. */
.lql-form-content input[type="checkbox"] {
  width: var(--mx-cb-size);
  height: var(--mx-cb-size);
  margin: 0 var(--mx-cb-gap) 0 0;
  vertical-align: -3px;
}

.lql-form-content label.form-control-label > a {
  margin-left: 0;
}

/* "Zapamietaj mnie" - etykieta jest rodzenstwem pola i miala padding-top:10px,
   przez co napis stal 10 px nizej niz kwadracik. */
.lql-form-content input[type="checkbox"] + label.form-control-label {
  padding-top: 0;
  margin-bottom: 0;
  vertical-align: baseline;
}

/* --- ostatni krok kasy: zgody nad "Zloz zamowienie" ----------------------
   Tam kwadracik i napis siedza w DWOCH osobnych divach zestawionych
   float-em, a .condition-label ma w motywie margin-top: .625rem, wiec napis
   stoi 10 px nizej niz kwadracik. Zamieniamy wiersz na flex.

   UWAGA: ten sam wiersz poprawia rownolegle drugi arkusz (odstepy w kasie),
   ktory ustawia .float-xs-left { margin-top: 3px } - reczne przyblizenie
   wysrodkowania dobrane pod kwadracik 15 px. Nasze reguly licza srodek
   wprost ((wysokosc wiersza - rozmiar) / 2), wiec tamten 3 px dokladalby sie
   po raz drugi i spychal kwadracik 3 px w dol. Zerujemy go tutaj swiadomie -
   wysrodkowanie zalatwia align-items: center na wysokosci jednego wiersza. */
body#checkout section.checkout-step form#conditions-to-approve ul li {
  display: flex;
  align-items: flex-start;
  gap: var(--mx-cb-gap);
}

body#checkout section.checkout-step form#conditions-to-approve li > .float-xs-left {
  display: flex;
  align-items: center;
  float: none;
  flex: 0 0 auto;
  height: calc(var(--mx-cb-line) * 1em);
  margin-top: 0;
  margin-right: 0;
}

body#checkout section.checkout-step form#conditions-to-approve li .custom-checkbox {
  display: block;
  width: var(--mx-cb-size);
  height: var(--mx-cb-size);
}

body#checkout section.checkout-step form#conditions-to-approve li .custom-checkbox > input[type="checkbox"],
body#checkout section.checkout-step form#conditions-to-approve li .custom-checkbox > input[type="checkbox"] + span {
  position: absolute;
  top: 0;
  left: 0;
  float: none;
  width: var(--mx-cb-size);
  height: var(--mx-cb-size);
  margin: 0;
  padding: 0;
}

body#checkout section.checkout-step form#conditions-to-approve li .custom-checkbox > input[type="checkbox"] + span {
  display: block;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--mx-cb-border);
  border-radius: 2px;
}

/* Odstep poziomy robi teraz gap na wierszu (patrz wyzej) - drugi arkusz ma
   na .condition-label margin: 0 !important, wiec marginesu tu nie ustawiamy. */
body#checkout .condition-label {
  flex: 1 1 auto;
  margin-top: 0;
  line-height: var(--mx-cb-line);
}

/* ==========================================================================
   SLAJD 268 - jeden kolor odnosnikow w tresci
   --------------------------------------------------------------------------
   Klientka prosila o rgb(26, 13, 171). Kontrast na bieli 12,4:1, czyli AA i
   AAA z zapasem. Ruszamy WYLACZNIE odnosniki tresciowe: zgody w kasie i w
   rejestracji, strony CMS (regulamin, odnosniki do PDF), opisy produktow,
   wpisy bloga razem z Facebookiem i Twitterem pod wpisem.
   NIE ruszamy menu, stopki, przyciskow, kafelkow produktow ani ikon naglowka
   - tam odnosnik jest elementem sterujacym, nie trescia.

   Kolor sam w sobie nie odroznia odnosnika od czarnego tekstu (kontrast
   miedzy nimi to 1,7:1, ponizej wymaganych 3:1), wiec odnosniki w akapitach
   dostaja podkreslenie. Przyciski udostepniania pod wpisem dostaja tylko
   kolor - podkreslenie dopiero na najechaniu.
   ========================================================================== */

/* odnosniki w akapitach - kolor + podkreslenie */
.custom-checkbox > label a,
body#checkout .custom-checkbox > label a,
body#checkout .condition-label label a,
body#checkout #conditions-to-approve a,
.lql-form-content label.form-control-label > a,
#content.page-cms a,
body#cms #content a,
body#module-leoblog-blog article.blog-detail .blog-description a,
.product-description a,
#description a {
  color: var(--mx-link);
  text-decoration: underline;
}

/* JEDYNE !important w tym arkuszu, i to z konkretnego powodu.
   Tresc stron CMS jest pisana edytorem WYSIWYG, ktory wpisuje style prosto w
   atrybut style= na odnosniku, np. w regulaminie:
     <a href=".../formularz_zwrotu_mxlife.pdf" style="color:#2c9ffd;">
   To sa dokladnie te odnosniki do PDF, ktore klientka wskazala. Stylu z
   atrybutu nie przebije zaden selektor - zostaje albo edycja tresci w bazie
   (tej nie ruszamy), albo !important.
   Podkreslenie jest tu potrzebne, nie kosmetyczne: kontrast miedzy
   rgb(26,13,171) a czarnym tekstem akapitu to 1,7:1, czyli ponizej progu
   3:1 z WCAG 1.4.1 - sam kolor nie wystarcza, zeby odroznic odnosnik od
   otaczajacego tekstu. */
#content.page-cms a:not(.btn),
body#cms #content a:not(.btn),
.product-description a:not(.btn) {
  color: var(--mx-link) !important;
  text-decoration: underline !important;
}

/* odnosniki funkcjonalne w obrebie tresci - sam kolor */
body#module-leoblog-blog article.blog-detail .share_button a,
body#module-leoblog-blog article.blog-detail .blog-meta a {
  color: var(--mx-link);
}

.custom-checkbox > label a:hover,
.custom-checkbox > label a:focus,
body#checkout .custom-checkbox > label a:hover,
body#checkout .custom-checkbox > label a:focus,
body#checkout .condition-label label a:hover,
body#checkout .condition-label label a:focus,
body#checkout #conditions-to-approve a:hover,
body#checkout #conditions-to-approve a:focus,
.lql-form-content label.form-control-label > a:hover,
.lql-form-content label.form-control-label > a:focus,
body#module-leoblog-blog article.blog-detail a:hover,
body#module-leoblog-blog article.blog-detail a:focus,
.product-description a:hover,
.product-description a:focus,
#description a:hover,
#description a:focus {
  color: var(--mx-link-hover);
  text-decoration: underline;
}

#content.page-cms a:not(.btn):hover,
#content.page-cms a:not(.btn):focus,
body#cms #content a:not(.btn):hover,
body#cms #content a:not(.btn):focus,
.product-description a:not(.btn):hover,
.product-description a:not(.btn):focus {
  color: var(--mx-link-hover) !important;   /* jw. - style w atrybucie na odnosniku */
  text-decoration: underline !important;
}

/* widoczna obwodka przy nawigacji klawiatura */
.custom-checkbox > label a:focus-visible,
body#checkout #conditions-to-approve a:focus-visible,
.lql-form-content label.form-control-label > a:focus-visible,
#content.page-cms a:focus-visible,
body#cms #content a:focus-visible,
body#module-leoblog-blog article.blog-detail a:focus-visible,
.product-description a:focus-visible,
#description a:focus-visible {
  outline: 2px solid var(--mx-link);
  outline-offset: 2px;
  border-radius: 2px;
}


/* --- Domkniecie 268: Facebook i Twitter na LISCIE bloga --------------------
   mx-blog-lista-kolor

   Reguly wyzej celuja w body#module-leoblog-blog, czyli w strone pojedynczego
   wpisu. Kafelki z listy maja jednak body#module-leoblog-list - i to wlasnie je
   zakreslila klientka na zrzucie. Zmierzone przed poprawka: we wpisie
   rgb(26,13,171), na liscie rgb(159,164,170).

   Prefiks id lapie liste, wpis, kategorie i wyszukiwarke bloga naraz. */
body[id^="module-leoblog-"] .share_button a {
  color: var(--mx-link);
}

body[id^="module-leoblog-"] .share_button a:hover,
body[id^="module-leoblog-"] .share_button a:focus {
  color: var(--mx-link-hover);
}

body[id^="module-leoblog-"] .share_button a:focus-visible {
  outline: 2px solid var(--mx-link);
  outline-offset: 2px;
  border-radius: 2px;
}