/* =========================================================
   rawinput.pl - os Control / Speed nad opisem produktu

   Uklad jest WIERSZOWY, nie oparty na pozycjonowaniu wszystkiego
   naraz. W pierwszej wersji podpisy "Control" i "Speed" oraz przyciski
   "sprawdz wolniejsza / szybsza" siedzialy na tej samej wysokosci,
   przyklejone do przeciwnych krawedzi, i przy waskim ekranie wchodzily
   na siebie. Teraz kazdy z tych elementow ma wlasny wiersz, wiec nie
   maja jak sie zderzyc niezaleznie od szerokosci.

   Absolutnie pozycjonowane sa tylko dwie rzeczy: kropki modeli
   i znacznik "jestes tutaj", bo one z definicji musza stac w konkretnym
   punkcie belki.
   ========================================================= */

.ri-skala{
  --wciecie:26px;                 /* zapas na groty i skrajne kropki */
  grid-column:1 / -1;             /* karta produktu to siatka dwukolumnowa */
  margin:52px 0 0;
  padding:32px 0 0;
  border-top:1px solid var(--line-soft);
  user-select:none;
}
/* Karta produktu to siatka z odstepem 52px miedzy wierszami, wiec
   zakladki nie potrzebuja juz wlasnych 60px od gory. Zostawienie obu
   dawalo 66px przerwy, czyli wiecej niz miedzy innymi sekcjami. */
.ri-skala + .woocommerce-tabs{margin-top:0}

/* ---------- wiersz 1: znacznik "jestes tutaj" ---------- */

.ri-skala-scena{position:relative;padding-top:74px}

.ri-skala-tu{
  position:absolute;top:0;
  transform:translateX(-50%);
  text-align:center;
  pointer-events:none;
}
.ri-skala-karta{
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 12px 6px 6px;
  border:1px solid var(--cyan);border-radius:10px;
  background:rgba(0,221,255,.07);
  box-shadow:0 6px 22px rgba(0,0,0,.55);
  white-space:nowrap;
}
.ri-skala-karta img{
  width:36px;height:36px;object-fit:contain;border-radius:6px;
  background:#000;border:1px solid var(--line-soft);flex:0 0 auto;margin:0;
}
.ri-skala-karta .ri-skala-kto{text-align:left}
.ri-skala-karta .ri-skala-kto b{display:block;font-size:13px;font-weight:700;color:var(--t1);line-height:1.25}
.ri-skala-karta .ri-skala-kto span{
  display:block;margin-top:1px;
  font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);
}
/* display:block JEST TU KONIECZNE.
   Nozka i kropka sa <span>ami, czyli elementami liniowymi, a na takich
   nie dziala ani wysokosc, ani "margin:0 auto". Bez tego kropka
   "jestes tutaj" ladowala obok karty zamiast pod nia, na osi. */
.ri-skala-nozka{
  display:block;
  width:2px;height:14px;margin:0 auto;
  background:linear-gradient(var(--cyan),rgba(0,221,255,.25));
}
.ri-skala-punkt{
  display:block;
  width:12px;height:12px;margin:-1px auto 0;border-radius:50%;
  background:var(--cyan);border:3px solid var(--bg,#0a0a0a);
  box-shadow:0 0 0 3px rgba(0,221,255,.28);
}
.ri-skala-karta{display:inline-flex}

/* ---------- wiersz 2: belka ---------- */

.ri-skala-belka{
  position:relative;height:4px;
  margin:0 var(--wciecie);
  border-radius:99px;
  background:linear-gradient(90deg,#1d6b7d 0%,#2a2f36 42%,#2a2f36 58%,#7a4f12 100%);
}
.ri-skala-belka::before,.ri-skala-belka::after{
  content:'';position:absolute;top:50%;width:8px;height:8px;
  border-top:2px solid;border-right:2px solid;
}
.ri-skala-belka::before{left:-3px;transform:translateY(-50%) rotate(-135deg);color:var(--cyan)}
.ri-skala-belka::after{right:-3px;transform:translateY(-50%) rotate(45deg);color:var(--amber)}

.ri-skala-model{
  position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:50%;background:#3a4048;border:2px solid var(--bg,#0a0a0a);
  transition:background .16s var(--ease),transform .16s var(--ease);
}
.ri-skala-model:hover{background:var(--t2);transform:scale(1.35)}
.ri-skala-model::after{
  content:attr(data-tytul);
  position:absolute;left:50%;top:13px;transform:translateX(-50%);
  font-size:10.5px;color:var(--t3);white-space:nowrap;
  opacity:0;transition:opacity .16s var(--ease);pointer-events:none;
}
.ri-skala-model:hover::after{opacity:1}

/* ---------- wiersz 3: podpisy skali ---------- */

.ri-skala-podpisy{
  display:flex;justify-content:space-between;align-items:baseline;
  margin:14px var(--wciecie) 0;
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.ri-skala-podpisy .lewa{color:var(--cyan)}
.ri-skala-podpisy .srodek{color:var(--t3)}
.ri-skala-podpisy .prawa{color:var(--amber)}

/* ---------- wiersz 4: przyciski koncowe ---------- */

.ri-skala-konce{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:16px;
}
/* Koniec osi to POJEMNIK, a klikalna jest pigulka w srodku.
   Tak musi byc, bo dymek obok niesie wlasne odnosniki, a odnosnik
   w odnosniku to nieprawidlowy dokument. Pojemnik odpowiada tylko za
   pokazanie dymka po najechaniu. */
.ri-skala-koniec{position:relative;display:inline-block}

.ri-skala-pigulka{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 13px;border:1px solid var(--line);border-radius:99px;
  background:#101010;cursor:pointer;text-decoration:none;
  font-family:inherit;font-size:12px;font-weight:600;color:var(--t2);
  transition:border-color .16s var(--ease),color .16s var(--ease),background .16s var(--ease);
}
a.ri-skala-pigulka:hover,a.ri-skala-pigulka:focus-visible{color:var(--t1);outline:none}
.ri-skala-koniec.wolniej a.ri-skala-pigulka:hover,
.ri-skala-koniec.wolniej a.ri-skala-pigulka:focus-visible{border-color:var(--cyan);background:rgba(0,221,255,.07)}
.ri-skala-koniec.szybciej a.ri-skala-pigulka:hover,
.ri-skala-koniec.szybciej a.ri-skala-pigulka:focus-visible{border-color:var(--amber);background:rgba(252,161,0,.07)}

/* Gdy po tej stronie nic nie ma, pigulka nie udaje, ze da sie ja kliknac. */
.ri-skala-pigulka.nieaktywna{cursor:default;opacity:.55}

.ri-skala-pigulka .ri-skala-strzal{font-size:14px;line-height:1}
.ri-skala-koniec.wolniej .ri-skala-strzal{color:var(--cyan)}
.ri-skala-koniec.szybciej .ri-skala-strzal{color:var(--amber)}
.ri-skala-pigulka.nieaktywna .ri-skala-strzal{color:var(--t3)}

/* ---------- dymek ---------- */

.ri-skala-dymek{
  position:absolute;bottom:calc(100% + 12px);z-index:20;
  min-width:250px;padding:8px;
  border:1px solid var(--line);border-radius:10px;
  background:#0c0c0c;box-shadow:0 14px 40px rgba(0,0,0,.7);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s;
  text-align:left;
}
.ri-skala-koniec.wolniej .ri-skala-dymek{left:0}
.ri-skala-koniec.szybciej .ri-skala-dymek{right:0}
.ri-skala-koniec:hover .ri-skala-dymek,
.ri-skala-koniec:focus-within .ri-skala-dymek{opacity:1;visibility:visible;transform:translateY(0)}

.ri-skala-dymek-glowa{
  display:block;padding:4px 8px 8px;
  font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);
}
.ri-skala-poz{
  display:flex;align-items:center;gap:10px;
  padding:7px 8px;border-radius:7px;text-decoration:none;
  transition:background .14s var(--ease);
}
a.ri-skala-poz:hover{background:rgba(255,255,255,.05)}
.ri-skala-poz img{width:32px;height:32px;object-fit:contain;border-radius:5px;background:#000;flex:0 0 auto;margin:0}
.ri-skala-poz .ri-skala-nazwa{font-size:13px;font-weight:600;color:var(--t1);line-height:1.3}
.ri-skala-poz .ri-skala-krok{
  margin-left:auto;padding-left:10px;white-space:nowrap;
  font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);
}
.ri-skala-poz.pusty .ri-skala-nazwa{color:var(--t3);font-weight:500;font-size:12.5px}

/* Na telefonie os sie nie pokazuje, tak ustalilismy. Ponizej 860px
   motyw i tak schodzi do jednej kolumny, a os zajelaby tam wiecej
   miejsca, niz jest warta. */
@media (max-width:860px){
  .ri-skala{display:none}
}

@media (max-width:700px){
  .ri-skala{--wciecie:14px}
  .ri-skala-model::after{display:none}
  .ri-skala-dymek{min-width:min(250px,78vw)}
}
@media (max-width:430px){
  .ri-skala-pigulka{font-size:11px;padding:7px 11px}
  .ri-skala-pigulka .ri-skala-tekst{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ri-skala *{transition:none !important}
}