/* 03-elementy.css: Elementy podstawowe: przyciski, ikony w kółku, link „więcej”, listy, oznaczenie modelu urządzenia.
   Style globalne motywu QS GPS; zasady i spis plików w 01-tokeny.css. */

/* Elementy podstawowe */
/* Przyciski: .btn + wariant --primary | --ghost | --white */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 26px;border-radius:var(--r-sm);font-weight:700;font-size:.97rem;border:1px solid transparent;cursor:pointer;transition:transform .2s,background .2s,border-color .2s,color .2s}
.btn svg{width:18px;height:18px;flex:none;transition:transform .2s}
.btn:hover svg{transform:translateX(3px)}
.btn[href^="#"]:hover svg{transform:translateY(3px)} /* przycisk przewijający w dół: strzałka w dół */
.btn--primary{background:var(--grad-mocny) border-box;color:var(--white)}
.btn--primary:hover{transform:translateY(-2px)}
.btn--ghost{background:var(--white);border-color:var(--line-strong);color:var(--ink)}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
.btn--white{background:var(--white);color:var(--navy-2)}
.btn--white:hover{transform:translateY(-2px)}
/* Przycisk drugiego rzędu na niebieskim tle (np. „Zobacz film” w wyróżnieniu produktu): półprzezroczysty z jasną ramką */
.btn--szklo{background:var(--glass-soft);border-color:var(--glass-line-strong);color:var(--white)}
.btn--szklo:hover{background:var(--glass-strong);border-color:var(--white);transform:translateY(-2px)}
.btn--szklo:hover svg{transform:scale(1.15)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
/* Przyciski pod akapitem, listą albo adresem: zawsze z odstępem; akapit pod wstępem (np. adres) też */
:where(p,ul,ol,address)+.btn-row{margin-top:clamp(22px,2.6vw,30px)}
.lead+p{margin-top:16px}
@media (max-width:600px){.btn-row .btn{width:100%}}

/* Ikona w kółku: <span class="ico"><svg…></span> */
.ico{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--grad);color:var(--white)}
.ico svg{width:22px;height:22px}
.ico--sm{width:40px;height:40px}
.ico--sm svg{width:19px;height:19px}

/* Link „więcej” ze strzałką */
.more{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding-block:10px;font-weight:700;color:var(--blue)}
.more svg{width:16px;height:16px;transition:transform .2s}
.more:hover svg{transform:translateX(4px)}

/* Lista z kropkami */
.dots{display:grid;gap:10px;margin-top:16px;font-size:.96rem}
.dots li{position:relative;padding-left:22px}
.dots li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:50%;background:var(--grad)}
/* Lista z ptaszkami (na granacie) */
.marks{display:grid;gap:10px;margin-top:16px;font-size:.94rem}
.marks li{position:relative;padding:0 0 10px 30px;border-bottom:1px solid var(--on-dark-line)}
.marks li:last-child{border-bottom:0;padding-bottom:0}
.marks li::before{content:"";position:absolute;left:0;top:.28em;width:16px;height:16px;border-radius:5px;background:linear-gradient(135deg,var(--sky),var(--sky-2))}
.marks li::after{content:"";position:absolute;left:5px;top:calc(.28em + 4px);width:4px;height:7px;border:solid var(--navy-2);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* Oznaczenie modelu urządzenia w nazwie (np. Nadajnik GPS <span class="model">can fd</span>): wielkie litery, kolor marki. Z .grad (H1) zostaje gradient. */
.model{text-transform:uppercase;letter-spacing:.02em;font-weight:800}
.model:not(.grad){color:var(--blue)}

/* Kłódka przy „Logowanie” (nagłówek, menu mobilne, stopka): po najechaniu kabłąk (.klodka__palak) podnosi się i odchyla, kłódka się otwiera */
:is(.nav__login,.footer__login) svg{overflow:visible} /* podniesiony kabłąk wychodzi poza pole ikony: bez ucinania */
.klodka__palak{transform-origin:8px 10px;transition:transform .35s var(--ease)}
:is(.nav__login,.footer__login):is(:hover,:focus-visible) .klodka__palak{transform:translateY(-2px) rotate(-28deg)}
@media (prefers-reduced-motion:reduce){.klodka__palak{transition:none}}

/* Ocena w Google (.ocena): link do wizytówki z gwiazdkami i oceną (bez liczby opinii). Ocena wpisana ręcznie w treści */
.ocena{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 18px;border-radius:var(--r-pill);background:var(--white);border:1px solid var(--line-strong);color:var(--ink);font-size:var(--fs-sm);font-weight:600;line-height:1.3;transition:border-color .2s,color .2s}
.ocena:hover,.ocena:focus-visible{border-color:var(--blue);color:var(--blue)}
.ocena svg{width:90px;height:18px;flex:none;color:var(--blue)}
.ocena b{font-weight:800}
.head .ocena{margin-top:18px}
* + .ocena-wiersz{margin-top:var(--gap)}
.ocena-wiersz{display:flex;justify-content:center}