/* Monazo SOT — widget ofertowy. Scope: .mz-sot. Zero fontow zewnetrznych (tekst dziedziczy z motywu, cyfry na ui-monospace). Ladowany przez system blokow WP (block.json: style), na froncie warunkowo + w iframe edytora. KOLORY POCHODZA Z `tokens.css` — tu wylacznie aliasy i wartosci wlasne widgetu. Tryb ciemny dziala sam: tokeny przelacza `data-scheme` na . */ .mz-sot{ --mz-line-soft:var(--mz-inset); margin:1.6em 0; color:var(--mz-ink); line-height:1.55; -webkit-font-smoothing:antialiased; } .mz-sot *{box-sizing:border-box;} /* ── Izolacja od motywu + stabilna szerokość ─────────────────────────── Widget żyje w treści wpisu, więc musi być odporny na style motywu i NIE może wpływać na szerokość treści. width:100% zapobiega zwężaniu się do zawartości (gdy motyw układa treść flexem), max-width daje stały, niezależny od zakładki rozmiar karty. color:inherit na przyciskach gasi kolory motywu (inaczej np. „100 zł" w chipie bywa białe). */ .mz-sot{width:100%;max-width:100%;} .mz-sot .card{width:100%;max-width:100%;} .mz-sot button{color:inherit;background:none;border:0;font-family:inherit;letter-spacing:normal;} .mz-sot ul{margin:0;padding:0;list-style:none;} .mz-sot p{margin:0;} .mz-sot img{max-width:100%;height:auto;} /* Kolory interaktywne w pełni pod kontrolą wtyczki — motyw nie tknie żadnego stanu (:hover/:focus). Specyficzność .mz-sot .X:hover bije typowe selektory motywu. */ .mz-sot .cta:hover,.mz-sot .cta:focus,.mz-sot .cta:focus-visible{color:var(--mz-on-green);} .mz-sot .feerow__cond:hover,.mz-sot .feerow__cond:focus,.mz-sot .feerow__cond:focus-visible{color:var(--mz-green-ink);} .mz-sot .card{background:var(--mz-paper);border:1px solid var(--mz-line);border-radius:14px;box-shadow:var(--mz-shadow);overflow:hidden;} /* --- dark header band --- */ .mz-sot .card__head{background:var(--mz-deep);color:var(--mz-deep-ink);padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;} .mz-sot .brand{display:flex;align-items:center;gap:11px;min-width:0;} .mz-sot .brand__logo{width:34px;height:34px;border-radius:9px;flex:none;background:var(--mz-green);display:grid;place-items:center;font-weight:500;color:var(--mz-on-green);font-size:16px;} .mz-sot img.brand__logo--img{background:#fff;object-fit:contain;padding:2px;display:block;} /* Kafel jest biały w OBU motywach (znaki banków są projektowane na jasne tło), więc ikona wewnątrz też nie idzie za motywem. Wartość stała, bo `--mz-deep` opisuje teraz pasmo nagłówka, a to zmienia się z motywem. */ .mz-sot .brand__logo--fallback{background:#fff;color:#111;} .mz-sot .brand__logo--fallback svg{width:20px;height:20px;} .mz-sot .brand__name{font-weight:600;font-size:15px;line-height:1.1;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .mz-sot .brand__sub{font-size:11px;color:var(--mz-deep-muted);line-height:1.2;margin-top:1px;} .mz-sot .rating{display:flex;align-items:baseline;gap:5px;flex:none;} /* `align-self:center` PUNKTOWO na gwiazdce: kontener trzyma `baseline`, bo cyfra i „/5” mają stać na wspólnej linii pisma. Ale linią bazową SVG jest DOLNA KRAWĘDŹ jego pudełka, więc przy baseline ikona wskakiwała nad środek cyfry. Wyrównanie zmieniamy tylko jej, nie ruszając relacji liczby do „/5”. */ .mz-sot .rating__star{color:var(--mz-green);line-height:1;display:inline-flex;align-self:center;} .mz-sot .rating__star svg{width:16px;height:16px;display:block;} .mz-sot .rating__num{color:var(--mz-green);font-weight:500;font-size:16px;letter-spacing:.02em;} .mz-sot .rating__max{color:var(--mz-deep-muted);font-size:11px;} /* --- glowne taby (pigulki z ikona + etykieta) --- */ .mz-sot .tabs{display:flex;gap:6px;padding:6px;background:var(--mz-line-soft);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;} .mz-sot .tabs::-webkit-scrollbar{display:none;} .mz-sot .tab{flex:1 0 auto;min-width:62px;appearance:none;border:0;background:transparent;cursor:pointer;padding:9px 6px 8px;border-radius:9px;font-size:10.5px;letter-spacing:.02em;text-transform:uppercase;color:var(--mz-muted);display:flex;flex-direction:column;align-items:center;gap:4px;transition:color .18s,background .18s;white-space:nowrap;} .mz-sot .tab svg{width:16px;height:16px;stroke-width:1.9;} .mz-sot .tab:hover{color:var(--mz-ink-soft);} .mz-sot .tab[aria-selected="true"]{background:var(--mz-paper);color:var(--mz-ink);box-shadow:var(--mz-lift);} .mz-sot .tab[aria-selected="true"] svg{color:var(--mz-green-ink);} .mz-sot .tab:focus-visible{outline:2px solid var(--mz-green);outline-offset:1px;} /* --- body / panele — wysokosc animowana przy zmianie zakladki I subtaba --- */ .mz-sot .card__body{position:relative;height:auto;overflow:hidden;transition:height .34s cubic-bezier(.4,0,.2,1);} .mz-sot .panel{padding:18px;margin:0;} .mz-sot .panel[hidden]{display:none;} .mz-sot .panel.is-active{animation:mzFade .26s ease both;} @keyframes mzFade{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}} /* --- SEGMENTED CONTROL (subtaby) — inna forma niz taby glowne: kompaktowy, bez ikon, ze slizgajacym sie bialym „thumbem". Hierarchia przez forme. --- */ .mz-sot .seg{position:relative;display:flex;gap:6px;width:max-content;max-width:100%;background:var(--mz-line-soft);border:1px solid var(--mz-line);border-radius:12px;padding:4px;margin:0 0 16px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;} .mz-sot .seg::-webkit-scrollbar{display:none;} .mz-sot .seg__btn{position:relative;z-index:1;flex:0 0 auto;appearance:none;border:0;background:none;cursor:pointer;white-space:nowrap;font-size:11.5px;letter-spacing:.01em;color:var(--mz-muted);padding:7px 13px;border-radius:9px;transition:color .18s;} .mz-sot .seg__btn:hover{color:var(--mz-ink-soft);} .mz-sot .seg__btn[aria-selected="true"]{color:var(--mz-ink);font-weight:600;} .mz-sot .seg__btn:focus-visible{outline:2px solid var(--mz-green);outline-offset:1px;} .mz-sot .seg__thumb{position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:0;border-radius:9px;background:var(--mz-paper);box-shadow:var(--mz-lift-2);transition:transform .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1);will-change:transform;} .mz-sot .subpanel{margin:0;} .mz-sot .subpanel[hidden]{display:none;} .mz-sot .subpanel.is-active{animation:mzFade .22s ease both;} /* --- Zyskasz --- */ .mz-sot .stack-lead{font-size:13px;color:var(--mz-muted);margin:0 0 4px;} .mz-sot .total{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:3px;} .mz-sot .total__num{font-weight:500;font-size:clamp(40px,11vw,54px);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;} .mz-sot .total__cur{font-size:22px;color:var(--mz-ink-soft);} .mz-sot .total__cap{font-size:12.5px;color:var(--mz-green-ink);font-weight:600;background:var(--mz-green-wash);border:1px solid var(--mz-green-line);padding:2px 9px;border-radius:20px;align-self:center;} .mz-sot .stack-hint{font-size:12.5px;color:var(--mz-muted);margin:6px 0 14px;} .mz-sot .stack-note{font-size:12.5px;color:var(--mz-ink-soft);margin:10px 0 0;} /* Reguły `.chips` i `.chip*` USUNIĘTE w 0.26.14 razem z modułem, który je obsługiwał (patrz nota w `widget.js`). Żadna z tych klas nie występowała w katalogu `templates/`. UWAGA: `.pill-chip` niżej to co innego — statyczny, żywy element renderowany przez szablon. */ .mz-sot .saver{margin-top:14px;padding-top:13px;border-top:1px solid var(--mz-line-soft);display:flex;gap:14px;flex-wrap:wrap;} .mz-sot .saver__item{display:flex;align-items:baseline;gap:6px;font-size:12.5px;color:var(--mz-ink-soft);} .mz-sot .saver__rate{font-weight:500;color:var(--mz-green-ink);font-size:13px;} /* --- Bonusy (akordeon, ekskluzywny) --- */ .mz-sot .brow{border:1px solid var(--mz-line);border-radius:var(--mz-radius-sm);margin-bottom:8px;overflow:hidden;transition:border-color .16s,border-width .16s;} .mz-sot .brow:last-child{margin-bottom:0;} /* Grubość rośnie WYŁĄCZNIE po rozwinięciu — w stanie spoczynku wracamy do wartości sprzed 0.23.0, żeby lista bonusów nie krzyczała ramkami. */ .mz-sot .brow[data-open="true"]{border-color:var(--mz-green);border-width:1.5px;} /* Nagłówek rozwiniętego bonusu odcina się kreską od treści — bez niej tytuł zlewał się z pierwszym akapitem opisu w jeden blok tekstu. Kreskę rysuje ::after, NIE `border-bottom`: obramowanie dziedziczy zaokrąglenie karty (radius + overflow:hidden), więc jego końce zakrzywiały się do środka zamiast dobiegać prosto do krawędzi. */ .mz-sot .brow__head{position:relative;width:100%;appearance:none;border:0;background:var(--mz-paper);cursor:pointer;padding:13px 16px;display:flex;align-items:center;gap:14px;text-align:left;} .mz-sot .brow__head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--mz-line);opacity:0;transition:opacity .2s;} .mz-sot .brow[data-open="true"] .brow__head::after{opacity:1;} .mz-sot .brow__head:focus-visible{outline:2px solid var(--mz-green);outline-offset:-2px;} .mz-sot .brow__amt{font-weight:500;font-size:16px;flex:none;min-width:62px;color:var(--mz-ink);} .mz-sot .brow__amt--rate{color:var(--mz-green-ink);} .mz-sot .brow__ttl{font-size:13.5px;font-weight:500;color:var(--mz-ink-soft);flex:1;line-height:1.3;} .mz-sot .brow__chev{width:20px;height:20px;flex:none;color:var(--mz-muted);transition:transform .22s;} .mz-sot .brow[data-open="true"] .brow__chev{transform:rotate(180deg);color:var(--mz-green);} .mz-sot .brow__detail{max-height:0;overflow:hidden;transition:max-height .28s cubic-bezier(.4,0,.2,1);} .mz-sot .brow__inner{padding:13px 16px 15px;} .mz-sot .brow__inner ul{margin:0;padding:0;list-style:none;display:grid;gap:7px;} /* Wariant numerowany: natywne numery (::marker) zamiast kropki z ::before. */ .mz-sot .brow__inner ol{margin:0;padding:0 0 0 21px;list-style:decimal;display:grid;gap:7px;} .mz-sot .brow__inner ol li{padding-left:0;list-style:decimal;} .mz-sot .brow__inner ol li::before{content:none;} .mz-sot .brow__inner ol li::marker{color:var(--mz-green);font-weight:500;} /* NIE flex — flex blokifikuje pogrubienia w srodku zdania na osobna kolumne. */ .mz-sot .brow__inner li{position:relative;padding-left:17px;font-size:13.5px;color:var(--mz-ink-soft);line-height:1.5;overflow-wrap:break-word;list-style:none;} .mz-sot .brow__inner li strong{color:var(--mz-ink);font-weight:600;} .mz-sot .brow__inner li::before{content:"";position:absolute;left:1px;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--mz-green);} .mz-sot .brow__intro{margin:0 0 10px;font-size:13.5px;line-height:1.5;color:var(--mz-ink-soft);} .mz-sot .brow__intro strong{color:var(--mz-ink);font-weight:600;} .mz-sot .brow__meta{margin-top:11px;font-size:11.5px;color:var(--mz-muted);letter-spacing:.01em;display:flex;gap:7px;align-items:center;flex-wrap:wrap;} .mz-sot .brow__code{appearance:none;cursor:pointer;font-weight:700;font-size:13.5px;color:var(--mz-on-green);background:var(--mz-green);border:0;padding:4px 11px;border-radius:var(--mz-radius-xs);letter-spacing:.04em;display:inline-flex;align-items:center;gap:8px;transition:transform .2s var(--mz-ease);} .mz-sot .brow__code:hover{transform:translateY(-1px);} .mz-sot .brow__code:focus-visible{outline:2px solid var(--mz-green);outline-offset:2px;} .mz-sot .brow__code svg{width:14px;height:14px;flex:none;} /* Potwierdzenie kopiowania: tekst zmienia widget.js, tło zostaje zielone — przygaszenie zamiast zmiany koloru, żeby kontrast tekstu nie ucierpiał. */ .mz-sot .brow__code.is-copied{filter:brightness(.92);transform:none;} .mz-sot .brow__meta > span:first-child{font-style:italic;font-size:13px;color:var(--mz-faint);} .mz-sot .bdiv{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mz-muted);margin:0 0 10px;display:flex;align-items:center;gap:9px;} .mz-sot .bdiv::after{content:"";flex:1;height:1px;background:var(--mz-line-soft);} /* --- Oplaty (wiersze oplat, mobile-first) — wewnatrz subpaneli --- */ .mz-sot .fees{display:grid;gap:0;} .mz-sot .feerow{padding:11px 0;border-bottom:1px solid var(--mz-line-soft);} .mz-sot .feerow:first-child{padding-top:0;} .mz-sot .feerow:last-child{border-bottom:0;} .mz-sot .feerow__main{display:flex;align-items:baseline;justify-content:space-between;gap:12px;} .mz-sot .feerow__label{font-size:13.5px;color:var(--mz-ink);font-weight:500;line-height:1.35;} .mz-sot .feerow__vals{font-size:13.5px;text-align:right;flex:none;white-space:nowrap;} .mz-sot .feerow__vals .free{color:var(--mz-green-ink);font-weight:500;} .mz-sot .feerow__bez{color:var(--mz-muted);font-weight:400;font-size:11px;display:block;margin-top:1px;} .mz-sot .feerow__cond{appearance:none;border:0;background:transparent;cursor:pointer;margin-top:8px;padding:0;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;letter-spacing:normal;color:var(--mz-green);} .mz-sot .feerow__cond:focus-visible{outline:2px solid var(--mz-green);outline-offset:2px;border-radius:4px;} .mz-sot .feerow__cond svg{width:14px;height:14px;transition:transform .3s var(--mz-ease);stroke-width:2;} .mz-sot .feerow__cond[aria-expanded="true"] svg{transform:rotate(180deg);} /* Rozwijanie na siatce zamiast na `max-height`. `max-height` wymagał, żeby JS zmierzył treść i przeliczał ją po każdej zmianie szerokości — inaczej notka po obrocie telefonu zostawała przycięta. `grid-template-rows: 0fr -> 1fr` animuje się bez znajomości wysokości i sam nadąża za zmianą układu. */ .mz-sot .feerow__note{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--mz-ease);} /* TRZY poziomy, jak w mockupie (.reveal > div > .whybox): siatka animuje tor, goły wrapper przycina, a dopiero JEGO dziecko ma padding, margines i transform. Sklejenie przycinania z pudełkiem treści w jeden element to błąd wydania 0.22.0: margines wypychał treść poza zerowy tor, a transform nie jest przycinany przez overflow tego samego elementu — notka wisiała na wpół rozwinięta na stałe. */ .mz-sot .feerow__note-clip{overflow:hidden;} .mz-sot .feerow__note.is-open{grid-template-rows:1fr;} .mz-sot .feerow__note-in{margin-top:11px;padding:13px 15px;background:var(--mz-inset);border:0;border-left:3px solid var(--mz-green);border-radius:0 12px 12px 0;font-size:14px;line-height:1.5;color:var(--mz-ink);transform:translateY(-5px);transition:transform .3s var(--mz-ease);} .mz-sot .feerow__note.is-open .feerow__note-in{transform:none;} .mz-sot .feerow__note-in strong{color:var(--mz-green-ink);font-weight:600;} .mz-sot .fee-foot{font-size:11.5px;color:var(--mz-muted);margin:16px 0 0;padding-top:13px;border-top:1px solid var(--mz-line-soft);line-height:1.45;} /* --- Parametry (cechy: klucz-wartosc z markerem tak/nie) — wewnatrz subpaneli --- */ .mz-sot .kv{display:grid;gap:0;} .mz-sot .kv__row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--mz-line-soft);} .mz-sot .kv__row:first-child{padding-top:0;} .mz-sot .kv__row:last-child{border-bottom:0;} .mz-sot .kv__k{font-size:13px;color:var(--mz-muted);flex:none;max-width:52%;line-height:1.4;} .mz-sot .kv__v{font-size:13.5px;color:var(--mz-ink);text-align:right;font-weight:500;} .mz-sot .kv__v .sub{display:block;font-weight:400;color:var(--mz-muted);font-size:11.5px;margin-top:1px;} .mz-sot .kv__v .yes,.mz-sot .kv__v .no{display:inline-flex;align-items:center;gap:5px;justify-content:flex-end;} .mz-sot .kv__v .yes{color:var(--mz-green-ink);} /* Wartość „Nie” bierze osobny token, bo w trybie ciemnym `--mz-muted` (#9ca3af) na tle karty czytało się słabiej niż reszta wiersza. */ .mz-sot .kv__v .no{color:var(--mz-kv-no);} .mz-sot .kv__v .yes svg,.mz-sot .kv__v .no svg{width:14px;height:14px;flex:none;} /* --- Ocena --- Układ z projektu: nota i werdykt „Bierz / Odpuść” w jednym rzędzie nad kreską, plusy i minusy w dwóch kolumnach pod nią. Werdykt idzie NA GÓRĘ, bo to on odpowiada na pytanie czytelnika; lista zalet jest uzasadnieniem, nie wnioskiem. */ .mz-sot .verdict{display:block;} .mz-sot .verdict__top{display:grid;grid-template-columns:1fr;gap:16px;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--mz-line);margin-bottom:18px;} .mz-sot .verdict__score{text-align:left;padding:0;} .mz-sot .verdict__big{font-weight:700;font-size:46px;line-height:1;color:var(--mz-green);letter-spacing:-.045em;font-variant-numeric:tabular-nums;} .mz-sot .verdict__of{display:inline;font-size:15px;color:var(--mz-faint);font-weight:400;margin-left:4px;} .mz-sot .verdict__stars{display:flex;gap:3px;margin-top:10px;} .mz-sot .verdict__stars svg{width:17px;height:17px;color:var(--mz-green);} /* Gwiazdka niezapełniona: ten sam kształt, słabszy kolor — dwa różne glify („★” i „☆”) dawały dwie różne grubości kreski w jednym rzędzie. */ .mz-sot .verdict__stars svg.is-empty{color:var(--mz-faint);} .mz-sot .fitfor{display:block;margin:0;padding:0;border:0;} .mz-sot .fit{display:block;font-size:16.5px;line-height:1.5;color:var(--mz-muted);} .mz-sot .fit + .fit{margin-top:6px;} /* Werdykt jako zdanie, nie plakietka: „Bierz, jeśli…”. Plakietka odcinała słowo od zdania, przez co trzeba je było czytać dwa razy. */ .mz-sot .fit__tag{display:inline;font-size:inherit;letter-spacing:-.015em;text-transform:none;padding:0;border:0;border-radius:0;font-weight:700;margin:0;background:transparent;} .mz-sot .fit.yes .fit__tag{color:var(--mz-green);} .mz-sot .fit.no .fit__tag{color:var(--mz-ink);} .mz-sot .fit span{color:var(--mz-muted);} .mz-sot .verdict__body{min-width:0;} .mz-sot .pmcols{display:grid;grid-template-columns:1fr;gap:6px 26px;} .mz-sot .pmcol__head{text-transform:uppercase;letter-spacing:.09em;font-size:11.5px;font-weight:500;color:var(--mz-muted);margin:0 0 6px;} .mz-sot .pmcol + .pmcol .pmcol__head{margin-top:14px;} .mz-sot .pmrow{display:flex;gap:11px;font-size:14.5px;line-height:1.45;padding:6px 0;margin:0;color:var(--mz-ink);} .mz-sot .pmrow__ic{flex:none;width:16px;height:16px;margin-top:2.5px;} .mz-sot .pmrow.plus .pmrow__ic{color:var(--mz-green);} .mz-sot .pmrow.minus{color:var(--mz-muted);} .mz-sot .pmrow.minus .pmrow__ic{color:var(--mz-faint);width:14px;height:14px;margin:3.5px 1px 0;} /* --- stopka CTA --- */ /* CTA siedzi wprost na karcie — osobny pas stopki (linia + własne tło) dzielił kartę na dwie części bez powodu. */ .mz-sot .card__cta{padding:4px 18px 18px;} .mz-sot .cta{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;text-decoration:none;cursor:pointer;background:var(--mz-green);color:var(--mz-on-green);font-weight:700;font-size:16px;letter-spacing:-.01em;padding:15px 20px;border-radius:18px;border:0;box-shadow:none;transition:opacity .16s,transform .12s ease;} .mz-sot .cta:hover{opacity:.8;} .mz-sot .cta:active{transform:translateY(1px);} .mz-sot .cta:focus-visible{outline:2px solid var(--mz-ink);outline-offset:2px;} .mz-sot .cta svg{width:17px;height:17px;} .mz-sot .cta--off{background:var(--mz-inset);color:var(--mz-muted);cursor:default;box-shadow:none;} /* Wyłączone CTA nie przygasza się na hoverze — jest już nieaktywne. */ .mz-sot .cta--off:hover,.mz-sot .cta--off:focus,.mz-sot .cta--off:focus-visible{background:var(--mz-inset);box-shadow:none;filter:none;opacity:1;color:var(--mz-muted);} .mz-sot .foot-meta{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:11px;font-size:11.5px;color:var(--mz-muted);} .mz-sot .foot-meta span{display:inline-flex;align-items:center;gap:5px;} .mz-sot .foot-meta svg{width:13px;height:13px;color:var(--mz-green-ink);} /* Termin jako zwykły tekst: pigułka robiła z daty osobny element interfejsu, choć niczego nie da się w niej kliknąć. */ .mz-sot .foot-meta .dl{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--mz-muted);background:transparent;border:0;padding:0;letter-spacing:normal;} .mz-sot .foot-meta .dl b{color:var(--mz-ink);font-weight:700;} .mz-sot .foot-meta .dl svg{width:15px;height:15px;color:var(--mz-faint);flex:none;} .mz-sot .foot-meta .dl--ended{color:var(--mz-muted);background:transparent;} .mz-sot .foot-meta .dl--ended b{color:var(--mz-muted);} @media (max-width:420px){ .mz-sot .tab .tlabel{font-size:9.5px;} .mz-sot .verdict{column-gap:12px;} .mz-sot .panel{padding:16px;} } @media (prefers-reduced-motion:reduce){ .mz-sot *{transition:none!important;animation:none!important;} } /* Komunikat redakcyjny (widoczny tylko dla edytujących, gdy oferta nie jest wybrana/istnieje). */ .mz-sot-adminwarn{margin:1em 0;padding:10px 14px;border:1px dashed var(--mz-red-line);border-radius:10px;background:var(--mz-red-wash);color:var(--mz-red-ink);font-size:13px;line-height:1.5;} /* ─────────────── Panel „W pigułce” ─────────────── Jedna karta z dwoma panelami. Role zależą od tego, czy oferta ma premię: z premią → 302px | 1fr : kwota w zagłębieniu po lewej, warunki po prawej bez premii→ 1fr | 302px : lista korzyści szeroko, warunki w zagłębieniu W obu wariantach zagłębienie (`--mz-inset`) trzyma treść drugorzędną, a panel na kolorze karty — tę, dla której czytelnik tu przyszedł. Kolumna stała ma 302px, bo przy węższej łamie się „3000 zł / msc.” w warunkach. */ .mz-sot .pill-top{display:grid;grid-template-columns:1fr;border:1px solid var(--mz-line);border-radius:var(--mz-radius-sm);overflow:hidden;} /* Panel kwoty (wariant z premią). */ .mz-sot .pill-main{min-width:0;background:var(--mz-inset);padding:22px;display:flex;flex-direction:column;} .mz-sot .pill-main .stack-lead{position:relative;padding-top:16px;margin-bottom:14px;text-transform:uppercase;letter-spacing:.09em;font-size:11.5px;font-weight:500;color:var(--mz-muted);} /* Zielona kreska nad etykietą — jedyny akcent w panelu, zastępuje ramkę. */ .mz-sot .pill-main .stack-lead::before{content:"";position:absolute;top:0;left:0;width:38px;height:3px;background:var(--mz-green);border-radius:99px;} .mz-sot .pill-sum{display:flex;align-items:baseline;gap:6px;margin-bottom:0;} .mz-sot .pill-sum__num{font-weight:700;font-size:clamp(38px,10vw,44px);letter-spacing:.05rem;line-height:1;font-variant-numeric:tabular-nums;color:var(--mz-green);} .mz-sot .pill-sum__cur{font-size:clamp(26px,7vw,32px);font-weight:700;letter-spacing:.05rem;color:var(--mz-green);} .mz-sot .pill-breakdown{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0;font-size:0;} /* Rozbicie premii jako pigułki — każda pozycja osobno, bo w jednym zdaniu („2500 zł, 1200 zł i 3 bonusy”) kwoty zlewały się w nieczytelny ciąg. */ .mz-sot .pill-chip{background:var(--mz-paper);border:1px solid var(--mz-line-2);border-radius:10px;padding:6px 11px;font-size:12.5px;color:var(--mz-muted);white-space:nowrap;} .mz-sot .pill-chip b{color:var(--mz-ink);font-weight:700;font-variant-numeric:tabular-nums;} /* Podsumowanie liczby bonusów — tekst, nie plakietka: plakietki niosą kwoty. */ .mz-sot .pill-count{align-self:center;font-size:12.5px;color:var(--mz-muted);white-space:nowrap;padding:0 2px;} .mz-sot .pill-info{display:flex;align-items:center;gap:9px;font-size:13.5px;font-style:italic;color:var(--mz-muted);margin:auto 0 0;padding-top:22px;} .mz-sot .pill-info svg{width:18px;height:18px;flex:none;color:var(--mz-green);} /* Prawa kolumna. UWAGA NA STRUKTURĘ: dzieckiem siatki jest `.pill-side`, nie `.elig` — elig to wnętrze (bywa nieobecne, gdy oferta ma sam czas wniosku). Tło, padding i linie podziału MUSZĄ siedzieć na pill-side, inaczej panel w zagłębieniu nie sięga krawędzi kolumny, a linia wniosku wisi poza wszystkim. Dokładnie ten błąd miało wydanie 0.22.0. */ .mz-sot .pill-side{min-width:0;display:flex;flex-direction:column;padding:20px 22px 18px;} .mz-sot .pill-top--nb .pill-side{background:var(--mz-inset);padding:22px;} .mz-sot .elig{background:transparent;border:0;border-radius:0;padding:0;min-width:0;} .mz-sot .elig__head{text-transform:uppercase;letter-spacing:.09em;font-size:11.5px;font-weight:500;color:var(--mz-muted);margin:0 0 12px;} /* Oś warunków: pionowa linia z obwódkowymi kółkami zamiast ikon w wierszach (wyciąg ze starszego projektu). Linia biegnie MIĘDZY skrajnymi punktami, więc nie wystaje poza listę; kółko ma tło swojego panelu, żeby linia nie prześwitywała przez środek. */ .mz-sot .elig-track{position:relative;} .mz-sot .elig-track::before{content:"";position:absolute;left:7.5px;top:18px;bottom:20px;width:1.5px;background:var(--mz-line-2);} .mz-sot .elig-row{position:relative;padding:9px 0 9px 30px;font-size:14.5px;line-height:1.45;color:var(--mz-ink);} .mz-sot .elig-row::before{content:"";position:absolute;left:2.5px;top:14px;width:11px;height:11px;border-radius:50%;border:2.5px solid var(--mz-green);background:var(--mz-paper);box-sizing:border-box;} .mz-sot .pill-top--nb .elig-row::before{background:var(--mz-inset);} .mz-sot .elig-row--no{color:var(--mz-muted);} .mz-sot .elig-row--no::before{border-color:var(--mz-line-2);} /* Odnośniki w treści — wygląd 1:1 z motywem, ustawiony WPROST. Dziedziczenie zawodziło: reguły motywu celują w `.entry-content a`, a część linków siedzi w kontenerach, których ten selektor nie obejmuje. Zamiast zgadywać, które akurat trafia, przepisujemy wygląd tutaj — źródłem wartości są zmienne motywu, więc zmiana barwy w motywie nadal przechodzi na widget. WYJĄTEK: przyciski (.cta) i odnośnik z ikoną w stopce opłat (.fee-foot a) mają własne reguły niżej — to elementy interfejsu, nie odnośniki w zdaniu. */ .mz-sot a:not(.cta){ display:inline; padding-bottom:.1em; background:linear-gradient(to right,currentColor 0%,currentColor 98%); background-size:100% 1px; background-repeat:no-repeat; background-position:var(--mz-link-pos); color:var(--mz-link-ink); font-size:inherit; /* `!important`, bo motyw ustawia wagę odnośników selektorem o wyższej specyficzności niż ten — a odnośnik ma wyglądać tak samo wszędzie. */ font-weight:600!important; text-decoration:none; transition:.25s; } .mz-sot a:not(.cta):hover, .mz-sot a:not(.cta):focus{background-size:0 1px;color:var(--mz-link-ink);} /* Odnośnik z ikoną: układ własny, barwa i podkreślenie wspólne z resztą. MUSI stać PO regule ogólnej — obie mają specyficzność (0,2,1), więc rozstrzyga kolejność, a nie waga selektora. */ .mz-sot .fee-foot a{display:inline-flex;align-items:center;gap:5px;} .mz-sot .fee-foot a svg{width:11px;height:11px;stroke-width:2.2;} /* „… w skrócie” — pod kartą w wariancie z premią. */ .mz-sot .summary{margin-top:24px;} .mz-sot .summary__head{text-transform:uppercase;letter-spacing:.09em;font-size:11.5px;font-weight:500;color:var(--mz-muted);margin:0 0 12px;} .mz-sot .summary-list{display:grid;grid-template-columns:1fr;column-gap:44px;} .mz-sot .summary-row{display:flex;align-items:flex-start;gap:11px;padding:13px 2px;border-top:1px solid var(--mz-line);} .mz-sot .summary-row__ico{flex:none;color:var(--mz-green);margin-top:2px;} .mz-sot .summary-row__ico svg{width:17px;height:17px;display:block;} .mz-sot .summary-row--no .summary-row__ico{color:var(--mz-faint);} .mz-sot .summary-row:first-child{border-top:0;} .mz-sot .summary-row__body{flex:1;min-width:0;} .mz-sot .summary-row__lbl{display:block;font-size:15.5px;font-weight:500;letter-spacing:-.015em;color:var(--mz-ink);} .mz-sot .summary-row__txt{display:block;font-style:italic;font-size:12.5px;color:var(--mz-faint);margin-top:1px;line-height:1.4;} /* Etykieta nad kwotą bonusu: „NAGRODA” dla gotówki, „WARTOŚĆ NAGRODY”, gdy kwota jest przeliczeniem przedmiotu, „OPROCENTOWANIE” dla stawki. */ /* Kolumna kwoty: `min-width` bez ograniczenia pozwalał etykiecie rozpychać wiersz. Szerokość stała, etykieta łamie się na dwie linie. */ .mz-sot .brow__amtwrap{flex:none;width:88px;display:flex;flex-direction:column;gap:2px;} .mz-sot .brow__amtcap{text-transform:uppercase;letter-spacing:.08em;font-size:10px;font-weight:500;color:var(--mz-faint);line-height:1.25;white-space:normal;} /* ── Wariant bez premii: lista korzyści jako główna treść ── */ .mz-sot .hl-list{display:flex;flex-direction:column;} .mz-sot .hl-row{display:flex;align-items:flex-start;gap:11px;padding:13px 2px;border-top:1px solid var(--mz-line);} .mz-sot .hl-row:first-child{border-top:0;} .mz-sot .hl-row__ico{flex:none;color:var(--mz-green);align-self:flex-start;margin-top:3px;} .mz-sot .hl-row__ico svg{width:17px;height:17px;display:block;} .mz-sot .hl-row--no .hl-row__ico{color:var(--mz-faint);} .mz-sot .hl-row__body{flex:1;min-width:0;} .mz-sot .hl-row__lbl{display:block;font-weight:500;font-size:15.5px;line-height:1.3;letter-spacing:-.015em;color:var(--mz-ink);} .mz-sot .hl-row__txt{display:block;font-style:italic;font-size:12.5px;line-height:1.4;color:var(--mz-faint);margin-top:1px;} /* Linia wniosku w prawej kolumnie: mockup sadza ją na dnie panelu warunków (`margin-top:auto` działa, bo pill-side jest kolumną flex). */ .mz-sot .pill-info--side{margin:auto 0 0;padding-top:20px;} /* Wariant bez premii: lista korzyści na kolorze karty. */ .mz-sot .pill-top--nb .pill-main{background:transparent;padding:22px 24px 18px;} /* ── Dwie kolumny ── 767px to próg, poniżej którego kolumna 302px zabiera tyle miejsca, że w drugiej łamie się każda liczba. Poniżej panele idą jeden pod drugim, a linia podziału zmienia się z pionowej na poziomą. */ @media(max-width:767px){ /* Kolumny jedna pod drugą; separator zmienia oś z pionowej na poziomą. Jedna reguła dla obu wariantów: druga kolumna zawsze zaczyna się linią. */ .mz-sot .pill-side{border-top:1px solid var(--mz-line);padding:20px 16px;} .mz-sot .pill-main{padding:20px 16px 14px;} .mz-sot .pill-top--nb .pill-side{padding:20px 16px;} /* Kolumna kwoty bonusu węższa: na wąskim ekranie 88px zabierało tytułowi tyle miejsca, że łamał się na trzy linie. Etykieta („Wartość nagrody”) nadal mieści się w dwóch. */ .mz-sot .brow__amtwrap{width:70px;} } @media(min-width:768px){ .mz-sot .pill-top{grid-template-columns:302px 1fr;} .mz-sot .pill-top--nb{grid-template-columns:1fr 302px;} /* Kolumna w zagłębieniu zawsze sąsiaduje z kolumną na karcie, więc jeden separator wystarcza obu wariantom. */ .mz-sot .pill-side{border-left:1px solid var(--mz-line);} .mz-sot .summary-list{grid-template-columns:1fr 1fr;} /* Przy dwóch kolumnach górna linia znika z PIERWSZYCH DWÓCH wierszy, nie tylko z pierwszego — inaczej prawa kolumna zaczyna się kreską. */ .mz-sot .summary-row:nth-child(-n+2){border-top:0;} } /* Asekuracja: karencja jest polem wymaganym, więc pill-side istnieje zawsze — ale gdyby kiedyś zniknęła, samotna kolumna ma zająć całą szerokość zamiast zostawić pustą połowę siatki. */ .mz-sot .pill-top > .pill-main:only-child{grid-column:1 / -1;border:0;} /* Ocena na szerszym ekranie: nota obok werdyktu, plusy i minusy obok siebie. */ @media(min-width:768px){ .mz-sot .verdict__top{grid-template-columns:auto 1fr;gap:30px;} .mz-sot .pmcols{grid-template-columns:1fr 1fr;} .mz-sot .pmcol + .pmcol .pmcol__head{margin-top:0;} } /* ── Poziome paski (taby + subtaby): dynamiczny fade na krawędziach ── Maska (nie gradient-nakładka): działa na dowolnym tle, nie przewija się z treścią i nie wymaga dodatkowych elementów. JS włącza klasy .mz-fade-l/.mz-fade-r tylko, gdy w danym kierunku faktycznie jest treść. */ .mz-sot .tabs,.mz-sot .seg{--mz-fL:0px;--mz-fR:0px;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--mz-fL),#000 calc(100% - var(--mz-fR)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 var(--mz-fL),#000 calc(100% - var(--mz-fR)),transparent 100%);} .mz-sot .mz-fade-l{--mz-fL:34px;} .mz-sot .mz-fade-r{--mz-fR:34px;} /* Przewijalny pasek: grab na tle, grabbing + blokada zaznaczania podczas dragu. */ .mz-sot .tabs.mz-scrollable,.mz-sot .seg.mz-scrollable{cursor:grab;} .mz-sot .mz-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none;} .mz-sot .mz-dragging .tab,.mz-sot .mz-dragging .seg__btn{cursor:grabbing;}