/* * legacy-bridge.css - pomost wizualny dla szablonów legacy nieprzepisanych * jeszcze na markup v2 (strony statyczne, formularze konta, historia zamówień). * Mapuje klasy starej szaty (innovatory*, card, btn-primary, breadcrumb) * na zmienne i wygląd style-v2.css. Po pełnym porcie szablonu reguły * przestają być potrzebne. */ /* okruszki */ .innovatoryBreadcrumb { margin: 4px 0 14px; } .innovatoryBreadcrumb .breadcrumb { background: none; padding: 0; margin: 0; } .innovatoryBreadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 0; font-size: .82rem; } .innovatoryBreadcrumb li + li::before { content: "\203A"; color: var(--muted); margin-right: 4px; } .innovatoryBreadcrumb a { color: var(--muted); text-decoration: none; } .innovatoryBreadcrumb a:hover { color: var(--brand); } /* karty / bloki treści */ .card, .card-block, .block-category { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); } .card .card-block, .card-block .card-block { border: none; } .card, .block-category { padding: 18px 20px; margin-bottom: 14px; } /* nagłówki sekcji legacy */ h1.h1, .page-heading, .sec-heading h3, .step-title { font-family: var(--font-display); } .sec-heading { margin-bottom: 14px; } /* przyciski */ .btn-primary, .btn-secondary { background: var(--brand); border: none; color: #fff; border-radius: var(--r-sm, 10px); padding: 9px 18px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: filter .15s; } .btn-primary:hover, .btn-secondary:hover { filter: brightness(1.08); color: #fff; } .btn-secondary { background: var(--surface-2, #eef0f4); color: var(--ink); } .btn-secondary:hover { color: var(--ink); } .btn.disabled, .btn[disabled] { opacity: .5; pointer-events: none; } /* formularze legacy (PrestaShop-owe klasy) */ .form-control-label { font-weight: 600; font-size: .85rem; } .form-control-label.required::after { content: " *"; color: #cc0000; } .form-group { margin-bottom: 12px; } .custom-checkbox { display: flex; gap: 8px; align-items: flex-start; font-size: .82rem; } .custom-checkbox .checkbox-checked { display: none; } .help-block .alert { margin-top: 6px; } /* tabele treści (regulaminy, koszty transportu, dane) */ #main table, .tab-content table { max-width: 100%; border-collapse: collapse; } #main table td, .tab-content table td { padding: 4px 8px; } /* stare etykiety produktów (gdyby gdzieś zostały) */ .innovatoryNew-label, .innovatorySale-label { position: absolute; top: 10px; left: 10px; background: var(--brand); color: #fff; font-size: .68rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; } .innovatorySale-label { background: #e0245e; top: 34px; } /* sekcje główne legacy */ #wrapper, #main, #content { width: 100%; } aside#notifications { display: none; } /* neutralizacja zagnieżdżonych kontenerów Bootstrapa w starych szablonach (main.container-x już ogranicza szerokość) */ main.container-x .container { max-width: 100%; padding-left: 0; padding-right: 0; } /* modale legacy (regulamin/PayPo - shopmy.js) */ .modal-nc, .modal-op { display: none; position: fixed; z-index: 1080; inset: 0; background: rgba(15, 18, 26, .55); padding: 4vh 16px; overflow: auto; } .modal-nc-content, .modal-op-content { background: var(--surface); color: var(--ink); border-radius: var(--r); max-width: 860px; margin: 0 auto; padding: 22px 26px; position: relative; box-shadow: 0 24px 70px rgba(0, 0, 0, .35); } .close-nc, .close-op { position: absolute; top: 10px; right: 16px; font-size: 1.6rem; cursor: pointer; color: var(--muted); line-height: 1; } .close-nc:hover, .close-op:hover { color: var(--ink); } /* rozwijany tekst RODO */ .nc-toggle { display: none; } /* podpowiedzi wyszukiwarki (doLiveSearch) */ #itsearch_content_result { display: none; position: absolute; z-index: 1060; left: 50%; transform: translateX(-50%); width: min(720px, 92vw); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 18px 50px rgba(0, 0, 0, .18); padding: 14px 18px; } #itsearch_content_result #close_search_query_nav { display: block; text-align: right; font-size: .78rem; color: var(--muted); text-decoration: none; } #itsearch_content_result .limit { color: var(--muted); font-size: .85rem; margin: 6px 0; } /* ===== uklad stron pomocniczych/prawnych v2: [Rodzaje pomocy][tresc] ===== */ /* tresc strony prawnej (legal-layout) dokłada wewnątrz drugą kolumnę: Spis treści + body */ .legal-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; } .legal-shell-main { min-width: 0; } /* karta "Rodzaje pomocy" (styl spójny z .legal-toc) */ .help-nav { position: sticky; top: 150px; display: flex; flex-direction: column; gap: 14px; } .help-nav-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 2px; padding: 0 2px; } .help-group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--sh-1); } .help-group-title { font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--brand); background: var(--brand-soft); border-radius: var(--r-sm); padding: 7px 11px; margin: 0 0 10px; } .help-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .help-group a { display: block; padding: 6px 10px; border-radius: var(--r-sm); color: var(--ink-2); font-size: .86rem; text-decoration: none; transition: .15s; } .help-group a:hover, .help-group a.is-cur { background: var(--brand-soft); color: var(--brand); } @media (max-width: 1180px) { .legal-shell { grid-template-columns: 1fr; } .help-nav { position: static; } } /* ===== strona "Raty" (z makiety raty.html) ===== */ .raty-banks { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; margin-bottom: 18px; } .raty-hero { display: grid; grid-template-columns: 280px 1fr; gap: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--grad); color: #fff; margin-bottom: 24px; } .raty-hero .rh-badge { background: rgba(0,0,0,.18); display: flex; align-items: center; padding: 36px 30px; font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; line-height: 1.05; } .raty-hero .rh-body { padding: 30px 36px; display: flex; flex-direction: column; justify-content: center; } .raty-hero .rh-body small { opacity: .85; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; } .raty-hero .rh-body b { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; margin-top: 4px; } .raty-lead { font-size: 1.02rem; color: var(--ink-2); line-height: 1.75; } .raty-lead .accent { color: var(--brand); font-weight: 700; font-family: var(--font-display); display: block; margin-top: 12px; font-size: 1.1rem; } .raty-steps { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; } .raty-step { display: grid; grid-template-columns: 64px 1fr; gap: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; box-shadow: var(--sh-1); transition: .2s; } .raty-step:hover { box-shadow: var(--sh-2); border-color: transparent; } .raty-step .rs-ic { width: 64px; height: 64px; border-radius: 16px; background: var(--grad-soft); color: var(--brand); display: grid; place-items: center; font-size: 1.9rem; position: relative; } .raty-step .rs-ic img { width: 42px; height: 42px; object-fit: contain; } .raty-step .rs-ic .num { position: absolute; top: -8px; left: -8px; width: 26px; height: 26px; border-radius: 50%; background: var(--grad); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: .85rem; display: grid; place-items: center; box-shadow: var(--sh-brand); } .raty-step h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin: 2px 0 8px; } .raty-step p { color: var(--ink-2); font-size: .94rem; line-height: 1.7; margin: 0 0 8px; } .raty-step p:last-child { margin-bottom: 0; } .raty-step .note { font-size: .84rem; color: var(--muted); background: var(--bg-soft); border-radius: var(--r-sm); padding: 10px 13px; } .raty-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 26px; margin-top: 20px; } .raty-cta b { font-family: var(--font-display); font-size: 1.05rem; } @media (max-width: 760px) { .raty-hero { grid-template-columns: 1fr; } .raty-step { grid-template-columns: 1fr; } .raty-step .rs-ic { width: 54px; height: 54px; } } /* ===== Regulamin: archiwalne wersje (listy reglist* i nagłówki bez klas v2) ===== */ /* nagłówki rozdziałów / banner daty (zamiast inline-styled

) */ .legal-body .reg-chap-arch { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); text-align: center; margin: 30px 0 14px; padding-top: 14px; border-top: 1px solid var(--line); } .legal-body .reg-date-arch { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--brand); text-align: center; background: var(--brand-soft); border-radius: var(--r-sm); padding: 12px 14px; margin: 4px 0 20px; } /* numeracja hierarchiczna list legacy: reglistMain (1.) > reglist (1)) > reglistL (a)) */ .legal-body ol.reglistMain { counter-reset: rlm; list-style: none; padding-left: 0; margin: 12px 0; } .legal-body ol.reglistMain > li { counter-increment: rlm; position: relative; padding-left: 34px; margin-bottom: 10px; } .legal-body ol.reglistMain > li::before { content: counter(rlm) "."; position: absolute; left: 0; top: 0; min-width: 28px; font-family: var(--font-display); font-weight: 700; color: var(--brand); } .legal-body ul.reglist { counter-reset: rl; list-style: none; padding-left: 0; margin: 8px 0; } .legal-body ul.reglist > li { counter-increment: rl; position: relative; padding-left: 34px; margin-bottom: 6px; } .legal-body ul.reglist > li::before { content: counter(rl) ")"; position: absolute; left: 0; top: 0; min-width: 28px; font-weight: 700; color: var(--brand); } .legal-body ul.reglistL { counter-reset: rll; list-style: none; padding-left: 28px; margin: 6px 0; } .legal-body ul.reglistL > li { counter-increment: rll; position: relative; padding-left: 32px; margin-bottom: 5px; } .legal-body ul.reglistL > li::before { content: counter(rll, lower-latin) ")"; position: absolute; left: 0; top: 0; min-width: 26px; font-weight: 600; color: var(--muted); } .legal-body ol.reglistMain > li > p, .legal-body ul.reglist > li > p, .legal-body ul.reglistL > li > p { margin: 0; } /* ===== KGO: tabela szczegółowych stawek (z makiety kgo.html) ===== */ .kgo-table { width: 100%; border-collapse: collapse; margin: 8px 0 4px; } .kgo-table caption { caption-side: top; text-align: center; font-family: var(--font-display); font-weight: 600; color: var(--muted); font-size: .86rem; padding-bottom: 10px; } .kgo-table th { text-align: left; font-family: var(--font-display); font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 10px 14px; border-bottom: 2px solid var(--line); } .kgo-table th:last-child, .kgo-table td:last-child { text-align: right; white-space: nowrap; } .kgo-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: .92rem; vertical-align: top; } .kgo-table tr:last-child td { border-bottom: none; } .kgo-table td.rate { font-family: var(--font-display); font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; } .kgo-table tbody tr:nth-child(even) { background: var(--bg-soft); } /* separacja grup (np. poszczególni kurierzy) - linia + odstęp nad pierwszym wierszem grupy */ .kgo-table tr.kgo-sep td { border-top: 2px solid var(--line-2); padding-top: 16px; } .kgo-table tr.kgo-sep:first-child td { border-top: none; padding-top: 12px; } /* ===== ikony: bez dublowania ===== */ /* PageHead ładuje czcionkę bootstrap-icons (glif przez ::before), a icons.js wstrzykuje SVG do każdej .bi i ustawia atrybut data-ico. Gdy ikona jest zhydratyzowana (ma data-ico), ukryj glif czcionki, by nie dublować. Ikony niezhydratyzowane zachowują glif jako fallback. */ .bi[data-ico]::before { content: none !important; } /* ===== produkt v2: sekcje opisu (legacy 'tab-pane fade in') ===== */ /* Wewnętrzne szablony zakładek produktu (Dane główne / Opis / Parametry) używają klas Bootstrap 3 'tab-pane fade in'. W Bootstrap 5 '.tab-pane.fade' bez '.show' ma opacity:0 (klasa 'in' jest ignorowana) → treść była renderowana, ale niewidoczna. W szacie v2 te sekcje są pokazywane jako stałe karty (.pdp-section-card), nie jako przełączane zakładki, więc wymuszamy ich pełną widoczność. */ .pdp-section-card .tab-pane { display: block !important; opacity: 1 !important; } /* ===== produkt v2: galeria - kwadratowe pole głównego zdjęcia ===== */ /* .g-main ma aspect-ratio:1/1 + display:grid; place-items:center, ale realny z max-height:100% rozpycha pole (procent wysokości względem auto-wysokości gridu nie działa). W makiecie v2 .g-main miał tylko ikonę, więc trzymał kwadrat. Pozycjonujemy główne zdjęcie absolutnie, by aspect-ratio 1/1 wyznaczał wymiar, a obraz wypełniał je z zachowaniem proporcji. */ .gallery .g-main { position: relative; } .gallery .g-main > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 16px; } /* miniatury: jeden rząd przewijany poziomo (gdy jest ich dużo) */ /* element siatki .pdp ma domyślnie min-width:auto → rząd miniatur (nowrap) rozpychałby kartę zamiast się przewijać; wymuszamy min-width:0 w całym łańcuchu i ograniczamy szerokość paska */ .pdp > .pdp-card.is-gallery { min-width: 0; } .pdp-card.is-gallery .gallery { min-width: 0; } .gallery .g-thumbs { max-width: 100%; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; } .gallery .g-thumbs .gt { flex: 0 0 auto; scroll-snap-align: start; } .gallery .g-thumbs::-webkit-scrollbar { height: 8px; } .gallery .g-thumbs::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; } /* strzałki przewijania miniatur na końcach paska */ .g-thumbs-wrap { position: relative; min-width: 0; } .g-thumbs-nav { position: absolute; top: calc(50% + 4px); transform: translateY(-50%); z-index: 3; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: var(--sh-1); font-size: 1rem; transition: .15s; } .g-thumbs-nav:hover { color: var(--brand); border-color: var(--brand); } .g-thumbs-nav.prev { left: -4px; } .g-thumbs-nav.next { right: -4px; } .g-thumbs-nav[hidden] { display: none; } /* ===== produkt v2: większe nagłówki sekcji opisu (Dane główne / Opis / Parametry) ===== */ .pdp-section-card .md-title { font-size: 1.45rem; } /* ===== produkt v2: parametry techniczne - luźniejsze komórki tabeli ===== */ .pdp-section-card .spec-table td { padding: 16px 24px; } /* ===== produkt v2: wyjustowana treść opisu ===== */ .pdp-section-card#description .tab-content { text-align: justify; } /* btn-ink: czytelny stan hover (nie znikał - brightness na ciemnym tle wash-out); zmiana na kolor brand */ .btn-ink:hover { background: var(--brand); color: #fff; filter: none; } .btn-ink:hover i { color: #fff; } /* pasek kroków finalizacji (co-steps) jak v2 .cox-progress: przyklejony tuż pod CAŁYM nagłówkiem. .v2-header jest sticky i obejmuje headbar (~84px) + .v2-nav (52px+1px) + border 1px = ~138px, dlatego top musi sięgać dołu nagłówka (z lekkim 2px zakładem, bez szczeliny i bez chowania pod nav). Tło na całą szerokość ekranu mimo że pasek jest w .container-x: box-shadow rozlewa kolor na boki, a clip-path (inset 0 po pionie, -100vw po bokach) pokazuje tylko poziome rozlanie - bez poziomego scrolla. */ .co-steps { position: sticky; top: 136px; z-index: 900; background: var(--header-bg); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); padding: 14px 0; margin-bottom: 18px; box-shadow: 0 0 0 100vw var(--header-bg); clip-path: inset(0 -100vw 0 -100vw); } /* linia 1px pod paskiem tą samą techniką co tło (box-shadow + clip-path = ink overflow): wariant left/right:-100vw ROZPYCHAŁ scrollWidth strony o ~100vw w prawo (absolutny element tworzy scrollable overflow mimo clip-path rodzica) -> na tabletach/mobile rozszerzony layout viewport wypychał modale .addr-modal poza ekran */ .co-steps::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); box-shadow: 0 0 0 100vw var(--line); clip-path: inset(0 -100vw 0 -100vw); } @media (max-width: 900px) { .co-steps { position: static; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none; padding: 0; margin-bottom: 22px; box-shadow: none; clip-path: none; } .co-steps::after { display: none; } } /* "Twoje zamówienie" pływa (sticky) dokładnie jak v2 - ZWYKŁY sticky, BEZ narzucania wysokości. Jedyna różnica wobec v2: mamy widoczny pasek kroków (.co-steps sticky, dół ~193px), więc top musi być nieco niżej (200px) niż w koszyku (150px), aby podsumowanie nie chowało się pod paskiem. */ .summary.co-summary { top: 200px; align-self: start; } /* align-self:start - nie rozciągaj boxa do wysokości lewej kolumny (grid stretch); ma być wysokości treści + sticky */ /* v2 ustawia .summary.co-summary na position:static dopiero przy <=980px, ale .cart-page zwija się do 1 kolumny dopiero przy <=900px. W paśmie 901-980px summary było statyczne w układzie 2-kolumnowym (przewijało się ze stroną). Przywracamy sticky wszędzie tam, gdzie układ jest jeszcze 2-kolumnowy. */ @media (min-width: 901px) { .summary.co-summary { position: sticky; } } @media (max-width: 900px) { .summary.co-summary { top: 0; } } /* krok finalizacji jeszcze niedostępny (czeka na poprzedni) - subtelny placeholder, daje też wysokość kolumnie */ .co-step-wait { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .9rem; margin: 0; padding: 10px 2px; } .co-step-wait i { font-size: 1rem; opacity: .7; } /* opcje doręczenia w stylu v2 (.opt-row): ukryty realny radio, a wygląd zaznaczenia sterowany przez :has(:checked) - bez JS (v2 robił to klasą .sel). .opt-main rozkłada nazwę/czas/punkt odbioru. */ .opt-row { align-items: flex-start; } .opt-row input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .opt-row .opt-radio { margin-top: 2px; } .opt-row:has(input[type="radio"]:checked) { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 6px 18px rgba(86,40,220,.1); } html[data-theme="noc"] .opt-row:has(input[type="radio"]:checked) { background: var(--bg-soft); } .opt-row:has(input[type="radio"]:checked) .opt-radio { border-color: var(--brand); } .opt-row:has(input[type="radio"]:checked) .opt-radio::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--grad); } .opt-row .opt-price { align-self: center; } .opt-pickpoint { display: block; font-size: .8rem; color: var(--ink-2); margin-top: 6px; line-height: 1.5; } .opt-pickpoint:empty { display: none; } .opt-pickpoint b { color: var(--ink); } .opt-pickpoint u { color: var(--muted); text-decoration: none; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; } .opt-pick-warn { color: #c01919; font-weight: 600; } /* "brutto" przy cenie to neutralny dopisek, nie nota o darmowej dostawie - nie zielony */ .radio-del .opt-price small { color: var(--muted); font-weight: 500; } /* === opcje PŁATNOŚCI w stylu v2 === restyl istniejącego markupu Bootstrap (.radio-pay .delivery-option) do wyglądu kart v2 (.opt-row), bez przepisywania logiki kosztów. Zaznaczenie sterowane :has(:checked). */ .radio-pay { display: flex; flex-direction: column; gap: 10px; } .radio-pay > .carrier-extra-content, .radio-pay > .clearfix:not(.delivery-option) { display: none !important; } .radio-pay .delivery-option { position: relative; border: 1.6px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); transition: .15s; margin: 0; } .radio-pay .delivery-option:hover { border-color: var(--brand); } .radio-pay .delivery-option:has(input[type="radio"]:checked) { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 6px 18px rgba(86,40,220,.1); } html[data-theme="noc"] .radio-pay .delivery-option:has(input[type="radio"]:checked) { background: var(--bg-soft); } /* realny radio jako kółko v2 */ .radio-pay .delivery-option > input[type="radio"] { position: absolute; left: 18px; top: 21px; width: 22px; height: 22px; margin: 0; -webkit-appearance: none; appearance: none; border: 2px solid var(--line-2); border-radius: 50%; background: var(--surface); cursor: pointer; z-index: 2; } .radio-pay .delivery-option > input[type="radio"]:checked { border-color: var(--brand); } .radio-pay .delivery-option > input[type="radio"]:checked::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--grad); } /* label = kontener treści z miejscem na radio z lewej (nadpisuje bootstrapowy col-sm-12) */ .radio-pay .delivery-option > label { display: block; float: none; width: auto; max-width: none; padding: 13px 18px 13px 52px; margin: 0; cursor: pointer; font-weight: 400; } .radio-pay .delivery-option .row { display: flex; align-items: center; flex-wrap: nowrap; margin: 0; gap: 14px; } .radio-pay .delivery-option .row > [class*="col-"] { float: none; padding: 0; width: auto; } .radio-pay .delivery-option .col-sm-5 { flex: 1 1 auto; min-width: 0; } .radio-pay .delivery-option .col-sm-5 .row { gap: 12px; } .radio-pay .delivery-option .col-xs-3 { flex: 0 0 auto; } .radio-pay .delivery-option .col-xs-9 { flex: 1 1 auto; min-width: 0; } .radio-pay .delivery-option .col-xs-3 img { width: 64px; height: 46px; object-fit: contain; display: block; } .radio-pay .carrier-name { font-family: var(--font-body); font-weight: 600; font-size: .92rem; line-height: 1.25; display: block; } .radio-pay .carrier-delay { font-size: .8rem; color: var(--muted); display: block; } .radio-pay .carrier-delay a img { max-height: 24px; width: auto; } .radio-pay .delivery-option .col-sm-4 { flex: 0 0 auto; } .radio-pay .delivery-option .col-sm-3 { flex: 0 0 auto; margin-left: auto; text-align: right; } .radio-pay .carrier-price { font-size: .8rem; color: var(--muted); font-weight: 500; white-space: nowrap; } .radio-pay .carrier-price b { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink); } /* blok wyboru banku / komunikat - pełna szerokość pod wierszem */ .radio-pay .delivery-option .col-sm-11 { width: 100%; float: none; padding: 0; margin-top: 8px; font-size: .82rem; color: var(--ink-2); line-height: 1.5; } .radio-pay .delivery-option .col-sm-11 u { color: var(--muted); text-decoration: none; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; } .radio-pay .delivery-option .col-sm-11 font[color] { color: #c01919 !important; font-weight: 600; } @media (max-width: 600px) { .radio-pay .delivery-option .row { flex-wrap: wrap; } .radio-pay .delivery-option .col-sm-3 { margin-left: 0; } } /* karta wybranego adresu (cox-data) - dopasowanie typu/telefonu i badge rodzaju (Osoba prywatna/Firma) */ .cox-data .cd-type { display: flex; color: var(--ink-2); font-weight: 500; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .cox-data .cd-kind { color: var(--brand); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; } .cox-data .cd-change { cursor: pointer; } /* e-mail konta na karcie danych do faktury */ .cox-data .cd-mail { margin-top: 6px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; font-size: .92rem; word-break: break-all; } .cox-data .cd-mail i { color: var(--brand); } /* przyciski potwierdzenia w formularzu danych (firma: 2 przyciski) - obok siebie, bez puchnięcia/zawijania tekstu */ .cox-confirm-row { gap: 10px; flex-wrap: wrap; align-items: center; } .cox-confirm-row .btn { white-space: nowrap; } .cox-confirm-row .btn-lg-x { padding: .72rem 1.15rem; font-size: .95rem; } /* link "Pobierz dane wg NIP" przy edycji wypełnionej firmy (ponowne pobranie z GUS po zmianie NIP) */ .nip-refetch { float: right; font-size: .8rem; font-weight: 600; color: var(--brand); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; } .nip-refetch:hover { text-decoration: underline; } /* wybór zapisanych danych do faktury w modalu (zalogowany) - radio rows v2 (.acc-pick-row) + stopka */ .am-empty { color: var(--muted); margin: 0 0 4px; } .am-foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); } .am-foot .btn { white-space: nowrap; } .am-back-row { margin-bottom: 14px; } /* modal wyboru punktu odbioru (mapa InPost/DPD/Poczta) - pełna szerokość, szata v2 */ .pk-modal { padding: 10px; } /* mniejszy margines niż bazowe .addr-modal (20px) */ /* szerokość = trochę węższa niż treść strony (.container-x max-width var(--maxw)=1800px), nigdy szersza */ .pk-box { width: calc(100vw - 40px); max-width: calc(var(--maxw) - 40px); height: 95vh; max-height: 96vh; display: flex; flex-direction: column; padding: 0; } .pk-box .am-head { margin: 0; padding: 16px 22px; border-bottom: 1px solid var(--line); } .pk-box .am-head h3 { display: inline-flex; align-items: center; gap: 8px; } .pk-modal-body { flex: 1; min-height: 0; padding: 14px 18px 18px; display: flex; flex-direction: column; overflow: auto; } .pk-loading { padding: 50px; text-align: center; color: var(--muted); } /* przycisk "Wybierz" w dymku mapy (leaflet popup) - shop.css nie jest ładowany w v2 */ .mapButton { display: inline-block; padding: 8px 16px; background: var(--grad); color: #fff !important; border-radius: 8px; font-weight: 600; text-decoration: none; box-shadow: var(--sh-brand); } .mapButton:hover { color: #fff !important; filter: brightness(1.06); } /* pasek zakładek w mapie (Mapa | Wg miasta | ...) - pigułki v2 */ .pk-modal-body .step-title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; margin: 0 0 14px; padding: 0; text-align: center; } .pk-modal-body .nav-inline { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 0; padding: 0; } .pk-modal-body .nav-inline .nav-item { display: inline-flex; margin: 0; } .pk-modal-body .nav-inline span[href="nav-separator"] { display: none; } /* ukryj separatory "|" */ .pk-modal-body .nav-link { display: inline-block; padding: .5rem 1.05rem; border-radius: 999px; font-size: .88rem; font-weight: 600; color: var(--ink-2); background: var(--bg-soft); border: 1px solid var(--line); text-decoration: none; cursor: pointer; transition: .15s; } .pk-modal-body .nav-link:hover { border-color: var(--brand); color: var(--brand); } .pk-modal-body .nav-link.active { background: var(--grad); color: #fff; border-color: transparent; box-shadow: var(--sh-brand); } /* ikony płatności w podsumowaniu "Twoje zamówienie" (.co-paylogos) - osobny styl: biała plakietka z obwódką. Scoped + !important, bo icons.js wstrzykuje .pay-badge--logo{...!important}. Stopka (bez .co-paylogos) bez zmian. */ .co-paylogos .pay-badge, .co-paylogos .pay-badge--logo { background: #fff !important; border: 1px solid var(--line) !important; border-radius: 8px !important; box-shadow: 0 1px 2px rgba(20,16,50,.05) !important; padding: 6px 12px !important; min-height: 38px; display: inline-flex !important; align-items: center; justify-content: center; } html[data-theme="noc"] .co-paylogos .pay-badge--logo { background: var(--surface) !important; } /* loga kurierów w wyborze dostawy - logo jak na produkcji: bez ramki/tła, bez zaokrągleń, bez paddingu/marginesów */ .opt-logo-sq { background: transparent; box-shadow: none; border: none; padding: 0; border-radius: 0; } .opt-logo-img-sq { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 0; } /* zgody (checkbox + tekst) - czytelny układ v2 (logowanie i płatność) */ .consent .check { display: flex; align-items: flex-start; gap: 9px; font-size: .85rem; line-height: 1.4; cursor: pointer; } .consent .check input[type="checkbox"] { margin-top: 1px; flex-shrink: 0; width: 20px; height: 20px; accent-color: var(--brand); cursor: pointer; } .consent .check > span { flex: 1; min-width: 0; color: var(--ink-2); } /* BLIK: pole kodu (6 cyfr) + odliczanie - pokazywane po wyborze opcji BLIK (v2). Boksowany kontener (cyfry + link PayU). */ .blik-detail { display: none; margin: 10px 0 16px; padding: 16px 20px; background: var(--bg-soft, #f6f5fb); border: 1px solid var(--line, #eceaf3); border-radius: var(--r, 14px); } .radio-pay .delivery-option:has(input[type="radio"]:checked) + .blik-detail { display: block; } .blik-detail .payu-info { margin-top: 12px; } .blik-detail .blik-head { font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 7px; } .blik-code { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .blik-code input { width: 44px; height: 52px; text-align: center; font-size: 1.3rem; font-weight: 700; border: none; box-shadow: inset 0 0 0 1.6px var(--line-2); border-radius: var(--r-sm); background: var(--bg); font-family: var(--font-display); } .blik-code input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--brand); } .blik-detail.blik-err .blik-code input { box-shadow: inset 0 0 0 1.8px #dc2626; } .blik-hint { font-size: .82rem; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .blik-timer { color: var(--brand); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; } /* zgody + przycisk zamówienia w kroku płatności (v2) */ .co-consents { display: flex; flex-direction: column; gap: 2px; margin: 16px 0; } .co-consents .consent { margin-bottom: 0; } .co-consents-after .check > span { text-align: justify; } .co-return-note { font-size: .85rem; color: var(--ink-2); line-height: 1.5; margin: 16px 0; padding: 13px 18px; background: var(--brand-soft); border-radius: var(--r-sm); text-align: center; } .co-return-note i { color: var(--brand); margin-right: 4px; } /* uwagi do zamówienia (toggle dodaj/ukryj + pole) - v2 */ .co-note { margin: 14px 0 4px; font-size: .9rem; color: var(--muted); } .co-note #noteToggle { font-weight: 600; color: var(--brand); } .co-note #noteToggle:hover { text-decoration: underline; } .co-note-box { display: none; width: 100%; min-height: 80px; border-radius: var(--r-sm); border: none; box-shadow: inset 0 0 0 1.6px var(--line-2); padding: 12px 14px; font-family: var(--font-body); background: var(--bg); margin: 6px 0; } .co-note-box:focus { outline: none; box-shadow: inset 0 0 0 2px var(--brand); } #payment-confirmation1 { margin-top: 18px; display: flex; justify-content: center; } #nc-button-order { width: auto; } /* lista paczkomatów (Wg miasta/kodu/ulicy/nazwy) - karty v2 w siatce wielokolumnowej */ .pk-mlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; margin-top: 8px; align-items: stretch; } .pk-mlist-head { grid-column: 1 / -1; font-weight: 600; color: var(--ink-2); font-size: .9rem; margin-bottom: 2px; } .pk-mlist-head .pk-mcount { display: inline-block; background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: .75rem; padding: .1rem .5rem; border-radius: 999px; margin-left: 6px; } .pk-mitem { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; transition: .15s; } .pk-mitem:hover { border-color: var(--brand); box-shadow: 0 4px 14px rgba(86,40,220,.08); } .pk-minfo { display: flex; flex-direction: column; gap: 2px; font-size: .84rem; color: var(--ink-2); min-width: 0; flex: 1; } .pk-minfo b { color: var(--ink); font-size: .92rem; } .pk-minfo .pk-mico { width: 18px; height: auto; vertical-align: middle; margin-right: 4px; } .pk-minfo .pk-mmeta { color: var(--muted); font-size: .78rem; display: inline-flex; align-items: flex-start; gap: 5px; } .pk-mbtn { width: 100%; justify-content: center; white-space: nowrap; padding: .5rem 1rem; margin-top: auto; } /* mapa leaflet w modalu - szablon używa height:% więc wymuszamy realną wysokość */ .pk-modal-body .tab-content { flex: 1 1 auto; min-height: 0; height: auto !important; } .pk-modal-body .tab-pane.active { height: 100%; } .pk-modal-body [id^="mapSelPoint"] { height: 100% !important; min-height: 440px; } .pk-modal-body .leaflet-container { min-height: 440px; } /* modal wyboru banku (Autopay / płatność online) */ .paysel-box { width: min(860px, 96vw); max-height: 88vh; } #paySelBody { padding: 16px 22px 22px; overflow: auto; } .bank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } .bank-card { display: flex; align-items: center; justify-content: center; padding: 2px 4px; min-height: 88px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); transition: .15s; } .bank-card:hover { border-color: var(--brand); box-shadow: 0 5px 16px rgba(86,40,220,.1); } .bank-card img { max-width: 100%; max-height: 74px; object-fit: contain; display: block; } /* ikona wybranego banku (po wyborze) - tylko kontener wyboru #infoB_5/#infoB_6 (NIE cała opcja #infoB_5s) */ .radio-pay #infoB_5 img, .radio-pay #infoB_6 img { border: 1px solid var(--line); border-radius: 8px; padding: 5px; background: #fff; } .am-back { background: none; border: none; color: var(--brand); font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 0; } .am-back:hover { text-decoration: underline; } /* informacja "Dostawa pod adres z faktury / Wyślij na inny adres" pod kartą */ .cox-addnote { font-size: .84rem; color: var(--muted); margin-top: 12px; display: flex; align-items: center; gap: 7px; } .cox-addnote a { font-weight: 600; color: var(--brand); } /* walidacja pól logowania (e-mail/hasło/zgody) - komunikat inline w szacie v2 */ .field-error { display: flex; align-items: flex-start; gap: 6px; color: #c01919; font-size: .8rem; line-height: 1.35; margin-top: 5px; } .field-error i { font-size: .95rem; line-height: 1.3; flex-shrink: 0; } .auth-block input.is-invalid, .field input.is-invalid { border-color: #c01919 !important; box-shadow: 0 0 0 2px rgba(204,0,0,.12) !important; } .consent label.check.consent-invalid span, label.check.consent-invalid span { color: #c01919; } .consent-invalid .req { color: #c01919; } /* komunikat błędu formularza w szacie v2 (np. błędne logowanie) */ .co-error { display: flex; align-items: flex-start; gap: 9px; background: rgba(204,0,0,.07); color: #c01919; border: 1px solid rgba(204,0,0,.22); border-radius: var(--r-sm); padding: 10px 13px; font-size: .85rem; line-height: 1.4; margin: 0 0 14px; } .co-error i { font-size: 1.05rem; line-height: 1.3; flex-shrink: 0; } /* przełącznik widoku lista/siatka: v2 stylizuje tylko