/* ==========================================================================
   JDEV Mam Serce Donations — Frontend Styles
   Works with UIkit (YOOtheme) classes.

   TU DODAWAJ NOWE STYLE. To jest aktywny plik — komponenty wtyczki
   (donation box, checkout, admin cards). ms-legacy.css to starsza warstwa
   (typografia bazowa, marquee inputów, drobne resety) — nie ruszaj bez
   potrzeby, docelowo do scalenia tutaj.
   ========================================================================== */

/* ─── Design system: równe bloki w checkoucie /pomoz/ ──────────────────
   Wysokość kontrolek steruje --ms-control-h z ms-pages.css (jedno miejsce
   dla całego portalu). Tutaj zostaje tylko odstęp. */
:root {
    --ms-gap: 12px;
}

/* ─── Grid Cards ────────────────────────────────────────────────────── */

.ms-card {
    transition: box-shadow 0.2s;
}
.ms-card:hover {
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}
.ms-card .uk-card-media-top img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}
.ms-card .uk-card-title a {
    color: inherit;
    text-decoration: none;
}
.ms-card .uk-card-title a:hover {
    color: #e74c3c;
}
.ms-btn-donate {
    margin-top: 12px;
}

/* ─── Progress Bar ──────────────────────────────────────────────────── */

/* Karta z [ms_donation_box] jest dopasowywana wysokością do zdjęcia (Match
   w YOOtheme) — pasek postępu ma być przyklejony do samego dołu tej karty,
   nie unosić się z przerwą pod przyciskiem "Wpłać darowiznę". */
.uk-card-body:has(.ms-donation-box) {
    display: flex;
    flex-direction: column;
}
.uk-card-body:has(.ms-donation-box) > div:has(.ms-progress-wrap) {
    margin-top: auto !important;
}
/* flex-direction:column (wyżej) wyłącza collapsing marginesów między
   sąsiadami — tytuł (margin-bottom:15px) + divider (margin-top:15px) dawały
   realne 30px zamiast 15px. Zerujemy jedną stronę. Do tego <hr> w kontenerze
   flex kurczy się do width:0 (niewidoczny) bez jawnej szerokości — stąd
   width:100% + flex-shrink:0. */
.uk-card-body:has(.ms-donation-box) > hr {
    margin-top: 0;
    width: 100%;
    flex-shrink: 0;
}

.ms-progress-wrap {
    margin: 12px 0 0; /* uk-margin-remove-bottom */
}
.ms-progress-bar-wrap {
    margin: 8px 0;
}
.ms-progress.uk-progress {
    height: 12px;
    border-radius: 6px;
    background: #e8e8e8;
}
.ms-progress.uk-progress::-webkit-progress-value {
    background: linear-gradient(90deg, #e74c3c, #c0392b);
    border-radius: 6px;
}
.ms-progress.uk-progress::-moz-progress-bar {
    background: linear-gradient(90deg, #e74c3c, #c0392b);
    border-radius: 6px;
}
.ms-progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-top: 4px;
}
.ms-raised {
    font-weight: 700;
    color: #e74c3c;
}
.ms-raised small,
.ms-goal small {
    display: block;
    font-weight: 400;
    font-size: 11px;
    color: #999;
}
.ms-goal {
    color: #666;
}
.ms-donors-count {
    font-size: 13px;
    color: #888;
    margin-top: 4px;
}

/* ─── Donation Box ──────────────────────────────────────────────────── */

/* max-width: 480px USUNIĘTE 2026-08-17.
   Pochodziło z commita „Add visible donation wizard flow", czyli z pierwszej
   wersji kreatora, gdy box był samodzielnym widgetem, a nie kolumną w siatce
   YOOtheme. Dziś o szerokości decyduje kolumna szablonu i to ograniczenie
   tylko marnowało miejsce.

   Zmierzone na tablecie 834px: kolumna dawała 756px, box brał 480px,
   czyli 276px szło w powietrze. */
.ms-donation-wizard {
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    padding: 18px;
}
.ms-donation-amount-box {
    background: transparent;
    border: 0;
    padding: 0;
}
.ms-wizard-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 16px;
}
.ms-wizard-step {
    border-bottom: 3px solid #e5e5e5;
    color: #777;
    font-size: 13px;
    font-weight: 700;
    padding-bottom: 8px;
    text-align: center;
}
.ms-wizard-step.is-active {
    border-color: #e9473f;
    color: #e9473f;
}
.ms-wizard-panel[hidden] {
    display: none !important;
}
.ms-payment-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}
.ms-payment-card {
    align-items: center;
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    gap: 8px;
    min-height: 64px;
    padding: 12px 14px;
}
.ms-payment-card.is-active {
    border-color: #e9473f;
    box-shadow: 0 0 0 1px #e9473f inset;
}
.ms-payment-card input[type="radio"] {
    accent-color: var(--ms-btn-bg);
}
.ms-donor-fields {
    margin-top: 12px;
}
.ms-wizard-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 20px; /* uk-margin-top */
}
.ms-wizard-error {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 6px;
    color: #be123c;
    font-size: 13px;
    margin-top: 12px;
    padding: 9px 11px;
}
.ms-required-consent {
    display: flex;
    gap: 8px;
    line-height: 1.35;
}
.ms-amount-btn {
    width: 100%;
    background: #fff;
    border: 3px solid #9c277d;
    color: #9c277d;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.05;
    padding: 12px 10px;
    cursor: pointer;
    transition: all 0.15s;
}
.ms-amount-btn.ms-active,
.ms-amount-btn:hover {
    background: #e9473f;
    color: #fff;
    border-color: #e9473f;
}
.ms-custom-amount {
    position: relative;
    width: 100%;
}
.ms-custom-input {
    min-height: 46px;
    padding-right: 30px;
}
/* Placeholder znika już na kliknięcie w pole (jak ms07), wraca po wyjściu jeśli puste. */
.ms-custom-input:focus::placeholder { opacity: 0; }
.ms-custom-input:focus::-webkit-input-placeholder { opacity: 0; }
.ms-currency {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 14px;
    pointer-events: none;
}
.ms-gender-select label {
    margin-right: 16px;
}
.ms-btn-submit {
    font-weight: 700;
    background: var(--ms-btn-bg);
    border-color: var(--ms-btn-bg);
    border-radius: var(--ms-btn-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.ms-btn-submit:hover {
    background: var(--ms-btn-bg-hover);
    border-color: var(--ms-btn-bg-hover);
}

.ms-donation-wizard .ms-amount-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.ms-donation-amount-box .ms-amount-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.ms-donation-wizard .ms-amount-btn,
.ms-donation-wizard .ms-custom-input,
.ms-donation-wizard .ms-payment-card,
.ms-donation-wizard .uk-input,
.ms-donation-amount-box .ms-amount-btn,
.ms-donation-amount-box .ms-custom-input {
    border-radius: 5px;
}

.ms-donation-wizard .ms-amount-btn,
.ms-donation-wizard .ms-custom-input,
.ms-donation-amount-box .ms-amount-btn,
.ms-donation-amount-box .ms-custom-input {
    min-height: 48px !important;
}

.ms-donation-wizard .ms-amount-btn,
.ms-donation-amount-box .ms-amount-btn {
    border-radius: 999px;
}

/* 1. ZWYKŁY — delikatna szara obramówka, czarny napis */
.ms-donation-amount-box .ms-amount-btn {
    background: #fff;
    background-image: none;
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    color: #111;
    font-size: 14px;
    font-weight: 700;
    min-height: 40px;
    padding: 3px 6px;
    transition: box-shadow .15s, border-color .15s, transform .05s;
}

/* 2. NAJECHANIE — większy cień + delikatne zielone tło (napis czarny) */
.ms-donation-amount-box .ms-amount-btn:hover {
    background: #F0F8E2;
    background-image: none;
    border-color: #d9d9d9;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
    color: #111;
}

/* 3. WCIŚNIĘCIE (moment klikania) — lekkie wgniecenie */
.ms-donation-amount-box .ms-amount-btn:active,
.ms-donation-amount-box .ms-custom-input:active {
    transform: translateY(1px);
    box-shadow: none;
}

/* 4. ZAZNACZONY — napis CZARNY, ciemniejsza zielona obramówka (jak ms07) */
.ms-donation-amount-box .ms-amount-btn.ms-active,
.ms-donation-amount-box .ms-amount-btn.uk-button-primary {
    background: #F0F8E2;
    background-image: none;
    border-color: #7eae2a;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);
    color: #111;
}

.ms-donation-amount-box .ms-custom-amount {
    grid-column: auto;
    display: flex;            /* input wypełnia całą komórkę gridu (równa wysokość z przyciskami) */
}

.ms-donation-amount-box .ms-custom-input {
    width: 100%;
    height: 100%;            /* dorównuje wysokością przyciskom kwot w tym samym wierszu */
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    color: #111;
    font-size: 14px;
    font-weight: 700;
    min-height: 40px;
    padding: 3px 6px;
    text-align: center;
    transition: box-shadow .15s, border-color .15s, transform .05s;
}

/* Klik (focus) LUB wpisana kwota = zaznaczony: napis CZARNY, zielona ramka (ms07) */
/* Zaznaczony (focus / trwały ślad .ms-chosen / wpisana kwota): czarny napis, zielona ramka */
.ms-donation-amount-box .ms-custom-input:focus,
.ms-donation-amount-box .ms-custom-input.ms-chosen,
.ms-donation-amount-box .ms-custom-input:not(:placeholder-shown) {
    background: #F0F8E2;
    background-image: none;
    border: 1px solid #7eae2a !important;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);
    color: #111;
}

/* Notyfikacja z wyborem kwot (jak ms07) — białe obrysowane pigułki na czerwonym panelu */
.ms-notify-choose { display: flex; flex-direction: column; gap: 12px; text-align: center; }
.ms-notify-choose > span:first-child { font-size: 15px; }
.ms-notify-amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ms-notify-amount {
    background: transparent;
    border: 1px solid #fff;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    min-height: 40px;
    padding: 3px 6px;
    transition: background .15s, color .15s;
}
.ms-notify-amount:hover {
    background: #fff;
    color: #c0392b;
}

/* "zł" widoczne dopiero gdy coś wpisano (puste pole = bez sufiksu) */
.ms-donation-amount-box .ms-custom-input:placeholder-shown + .ms-currency {
    display: none;
}

.ms-donation-wizard .uk-input {
    background: #f3f3f3;
    border-color: #f3f3f3;
    min-height: 48px;
}

.ms-donation-wizard .uk-input:focus {
    background: #eaf2ff;
    border-color: #eaf2ff;
}

.ms-donation-wizard .ms-wizard-next,
.ms-donation-wizard .ms-amount-next,
.ms-donation-amount-box .ms-btn-submit {
    background: var(--ms-btn-bg);
    border-color: var(--ms-btn-bg);
    border-radius: var(--ms-btn-radius);
    font-weight: 700;
}

/* Serduszko i miejsce na nie: patrz ms-pages.css, sekcja „STANDARD PRZYCISKU
   Z SERDUSZKIEM". Było tu position: relative, padding-left: 52px i własna
   kopia ikony z left: 22px — czyli o 5px inaczej niż ta sama ikona na liście
   zbiórek (left: 17px). */

.ms-donation-wizard .ms-custom-amount {
    grid-column: 1 / -1;
}

@media (max-width: 480px) {
    .ms-donation-wizard {
        padding: 14px;
    }
    .ms-payment-choice,
    .ms-wizard-actions,
    .ms-donation-wizard .ms-amount-buttons {
        grid-template-columns: 1fr;
    }
    /* Box kwot pod dzieckiem — ZAWSZE 3 kolumny, też na wąskim mobile. */
    .ms-donation-amount-box .ms-amount-buttons {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
}

/* ─── Checkout / Thank You Box ──────────────────────────────────────── */

.ms-checkout-box,
.ms-thankyou-box {
    background: #fff;
    border-radius: 8px;
}

/* min-height: 494px USUNIĘTE 2026-08-17. To była sztywna liczba przepisana
   z szablonu, przez którą to KARTA dyktowała wysokość kolumnie ze zdjęciem,
   a nie odwrotnie. Skutek: krok 1 miał 450,4px (wysokość zdjęcia), a kroki
   2a i 2b 494px. Wysokość ma wynikać ze zdjęcia, przez uk-height-match. */
.ms-native-checkout {
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.08);
}

.ms-checkout-box .woocommerce-notices-wrapper,
.ms-checkout-box .woocommerce-NoticeGroup,
.ms-checkout-box .woocommerce-error,
.ms-checkout-box .woocommerce-message,
.ms-checkout-box .woocommerce-info,
.ms-checkout-box .woocommerce-form-coupon-toggle,
.ms-checkout-box .woocommerce-form-login-toggle,
.ms-checkout-box #customer_details > .col-2,
.ms-checkout-box .woocommerce-additional-fields,
.ms-checkout-box .woocommerce-shipping-fields,
.ms-checkout-box .woocommerce-billing-fields > h3,
.ms-checkout-box h3#order_review_heading {
    display: none !important;
}

.ms-checkout-box form.checkout {
    display: flex;
    flex-direction: column;
    margin: 0;
}
/* ── Sztywna wysokość z Buildera ustępuje wysokości zdjęcia ──────────────
   Szablon niesie własne ustawienie „Min height" na elemencie z checkoutem:

       #template-…#5 .ms-checkout-box              { min-height: 494px }
       @media (max-width: 960px) … .ms-checkout-box { min-height: 399px }

   Przez nie to KARTA dyktowała wysokość kolumnie ze zdjęciem: obie wychodziły
   na 494px, choć zdjęcie ma naturalnie 450,4px i tyle właśnie ma karta na
   kroku 1. Kroki znów nie były równe, tylko w drugą stronę.

   Nie da się tego zdjąć zwykłą klasą, bo selektor szablonu ma w sobie ID.
   !important odpada — skasowałoby również wartość, którą uk-height-match
   wpisuje w stylu inline, czyli dokładnie to, co chcemy zachować.

   Dlatego wygrywamy SPECYFICZNOŚCIĄ: jedno ID plus dwie klasy (1,2,0) bije
   jedno ID plus jedną klasę (1,1,0) u szablonu, a styl inline od UIkit nadal
   bije nas, bo inline wygrywa z każdą regułą bez !important. Kolejność
   pierwszeństwa jest więc taka, jakiej chcemy:

       wysokość zdjęcia (inline, UIkit)  >  ta reguła (422 podłogi)  >  494 z Buildera

   Gdybyś kiedyś skasował te 494px i 399px w YOOtheme, ta reguła przestanie
   być potrzebna i można ją usunąć. */
#tm-main .ms-checkout-box.ms-match-checkout {
    min-height: var(--ms-card-h);
}

/* To samo dla formularza. Szablon niesie drugą kopię tej liczby:
       #template-…#5 form.checkout.woocommerce-checkout { min-height: 494px }
   Karta bierze wysokość z formularza, więc dopóki formularz stał na 494px,
   nie pomagało zdejmowanie liczby z samej karty. Specyficzność szablonu to
   jedno ID, dwie klasy i typ; tutaj dokładamy trzecią klasę i wygrywamy bez
   !important, zostawiając pierwszeństwo dla uk-height-match. */
#tm-main .ms-checkout-box form.checkout.woocommerce-checkout {
    min-height: 0;
}

/* Druga kopia tych samych 494px, też usunięta. Formularz ma flex: 1 i
   min-height: 100% (reguła przy końcu pliku), więc wypełnia kartę sam. */
.ms-checkout-box form.checkout.woocommerce-checkout {
    box-sizing: border-box;
}

.ms-checkout-box #customer_details,
.ms-checkout-box .col2-set,
.ms-checkout-box .woocommerce-checkout-review-order {
    width: 100% !important;
    float: none !important;
}

.ms-checkout-box #order_review,
.ms-checkout-box #payment {
    display: contents;
}

.ms-checkout-box #payment ul.payment_methods {
    order: 1;
}

.ms-checkout-box .ms-gateway-hr {
    order: 2;
    width: 100%;
}

.ms-checkout-box #customer_details {
    order: 3;
}

.ms-checkout-box #payment .place-order {
    order: 4;
}

.ms-checkout-box .col2-set .col-1 {
    width: 100% !important;
    float: none !important;
}

/* Formularz jest już w bloku z marginesem — zeruj własny odstęp góra/dół
   (theme.1.css dokłada margin-top: 40px po notices-wrapper). */
.ms-checkout-box form.woocommerce-checkout {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.ms-checkout-box .form-row {
    margin: 0 0 var(--ms-gap) !important;
    padding: 0 !important;
    width: 100% !important;
}

.ms-checkout-box .form-row-first,
.ms-checkout-box .form-row-last {
    float: none !important;
    width: 100% !important;
}

.ms-checkout-box input.input-text,
.ms-checkout-box select,
.ms-checkout-box textarea {
    background: #f6f6f6;
    border: 1px solid #D9D9D9;
    border-radius: 0;
    box-shadow: none;
    color: #151515;
    font-size: 16px;
    min-height: var(--ms-control-h);
    padding: 12px 14px;
    width: 100%;
}

/* Karta checkoutu jest teraz dopasowywana wysokością dynamicznie (klasa
   .ms-match-checkout, patrz CheckoutBox.php + uk-height-match na wierszu
   siatki, wspomagane własnym JS w ms-legacy.js). Sztywny magic-number
   494px/399px z szablonu YOOtheme (#template-bcMAtMGf#13 .ms-checkout-box)
   NIE ma !important, więc dynamiczna wartość inline i tak go bije — nie
   trzeba go nadpisywać. BŁĄD Z POPRZEDNIEJ WERSJI: było tu
   "min-height: 0 !important", które zabijało też WŁAŚCIWĄ, dynamicznie
   ustawianą wartość inline (bo !important bije inline style zawsze,
   niezależnie od tego czy to 494px na sztywno czy poprawna wartość z JS). */

/* Wysokość dopasowana przez uk-height-match spływa z .ms-checkout-box aż do
   formularza, żeby ostatni blok (przycisk + zgody + polityka prywatności)
   mógł się "przykleić" do samego dołu zamiast zostawiać dziurę w środku. */
.ms-checkout-box.ms-match-checkout {
    display: flex;
    flex-direction: column;
}
.ms-checkout-box.ms-match-checkout > .woocommerce {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
}
.ms-checkout-box.ms-match-checkout form.checkout.woocommerce-checkout {
    flex: 1;
}
.ms-checkout-box .form-row.place-order {
    margin-top: auto !important;
}

.ms-checkout-box #payment {
    background: transparent;
}

.ms-checkout-box #payment ul.payment_methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ms-gap);
    margin: 0;
    padding: 0;
}

.ms-checkout-box #payment ul.payment_methods li {
    align-items: center;
    border: 1px solid #D9D9D9;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0 !important;
    min-height: var(--ms-control-h);
    padding: 0;
}

.ms-checkout-box #payment ul.payment_methods li:has(input:checked),
.ms-checkout-box #payment ul.payment_methods li:hover {
    background: #f6fbec;
    border-color: #9fcb55;
}

.ms-checkout-box #payment ul.payment_methods input.input-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ms-checkout-box #payment ul.payment_methods label {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: 0;
    color: #222;
    font-size: 12px;
    font-weight: 700;
    height: var(--ms-control-h);
    justify-content: center;
    margin: 0;
    padding: 0 8px;
    width: 100%;
}

.ms-checkout-box #payment ul.payment_methods label img {
    margin: 0;
    max-height: 34px;
    max-width: 132px;
}

.ms-checkout-box #payment ul.payment_methods .payment_method_p24-online-payments label,
.ms-checkout-box #payment ul.payment_methods .payment_method_bacs label,
.ms-checkout-box #payment ul.payment_methods .payment_method_p24-card label {
    color: #222;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
}

.ms-checkout-box #payment ul.payment_methods .payment_method_p24-online-payments label {
    font-size: 0;
}

.ms-checkout-box #payment ul.payment_methods .payment_box {
    display: none !important;
}

.ms-checkout-box #payment .place-order {
    padding: 56px 0 0;
}

/* font-size, padding-left, position i własna kopia serduszka zdjęte
   2026-08-17 — opisuje je standard w ms-pages.css. Tutaj zostaje tylko to,
   co swoiste dla CTA w checkoucie: kolor, zaokrąglenie i pełna szerokość. */
.ms-checkout-box #place_order {
    background: var(--ms-btn-bg);
    border-color: var(--ms-btn-bg);
    border-radius: var(--ms-btn-radius);
    box-shadow: none;
    font-weight: 700;
    margin-top: 20px; /* uk-margin-top */
    min-height: var(--ms-control-h);
    width: 100%;
}

.ms-checkout-box table.shop_table {
    display: none !important;
}

.ms-checkout-box .woocommerce-privacy-policy-text {
    font-size: 10px;
    line-height: 1.15;
    margin-top: 56px;
}

.ms-checkout-box .ms-pomoz-consents {
    display: none;
    flex-direction: column;
    margin-bottom: 60px;
}
/* hr w kontenerze flex-column kurczy się do width:0 (niewidoczny) bez
   jawnej szerokości — ten sam bug co na karcie kwot na glownej stronie. */
.ms-checkout-box .ms-pomoz-consents > hr {
    width: 100%;
    flex-shrink: 0;
}

.ms-checkout-box.is-consents-step #customer_details,
.ms-checkout-box.is-consents-step #payment ul.payment_methods,
.ms-checkout-box.is-consents-step .ms-gateway-hr {
    display: none !important;
}

/* Tekst polityki prywatności zawsze pod przyciskiem (kroki 2a i 2b) */
.ms-checkout-box .form-row.place-order {
    display: flex;
    flex-direction: column;
}
.ms-checkout-box .form-row.place-order .ms-pomoz-consents {
    order: 1;
}
.ms-checkout-box .form-row.place-order #place_order {
    order: 2;
}
.ms-checkout-box .form-row.place-order .woocommerce-terms-and-conditions-wrapper {
    order: 3;
    margin-top: 14px;
}

.ms-checkout-box.is-consents-step .ms-pomoz-consents {
    display: flex;
}

.ms-checkout-box.is-consents-step #payment .place-order {
    padding-top: 18px;
}

.ms-checkout-box .ms-consent-row,
.ms-checkout-box .woocommerce-terms-and-conditions-wrapper label,
.ms-checkout-box .form-row label.checkbox {
    align-items: center;
    background: #fff;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    gap: 12px;
    min-height: var(--ms-consent-h);
    padding: 0px 12px !important;
    transition: background .15s, border-color .15s;
}

/* Checkbox 1:1 z ms07 — biały kwadrat, zielona ramka, zielony ptaszek SVG gdy zaznaczony */
.ms-checkout-box .ms-consent-row input[type="checkbox"],
.ms-checkout-box .woocommerce-terms-and-conditions-wrapper label input[type="checkbox"],
.ms-checkout-box .form-row label.checkbox input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    flex: 0 0 auto !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #D9D9D9 !important;
    border-radius: 6px !important;
    background-color: #ededed !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    box-shadow: none !important;
    cursor: pointer;
}
.ms-checkout-box .ms-consent-row input[type="checkbox"]:checked,
.ms-checkout-box .woocommerce-terms-and-conditions-wrapper label input[type="checkbox"]:checked,
.ms-checkout-box .form-row label.checkbox input[type="checkbox"]:checked {
    background-color: #fff !important;
    border-color: #89ac43 !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpolygon%20fill%3D%22%2389AC43%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%3C%2Fsvg%3E") !important;
}

/* Divider pod pierwszym checkboxem = prawdziwy <hr class="uk-margin-small"> w markupie */

/* Tekst zgód — mniejszy, ciasny (jak ms07) */
/* line-height 0.9 (9,9px na linię przy foncie 11px). Ciasno, ale celowo:
   przy 1.3 najdłuższa zgoda rosła do 56,89px i rozpychała krok zgód, przez
   co przycisk skakał względem kroku danych. 0.9 mieści trzy linie w tej
   samej wysokości co pozostałe zgody. */
.ms-checkout-box .ms-consent-row span,
.ms-checkout-box .woocommerce-terms-and-conditions-wrapper label span {
    font-size: 11px;
    line-height: 0.9;
}

/* Modal regulaminu */
#ms-terms-modal .uk-modal-dialog {
    border-radius: 16px;
    max-width: 640px;
    overflow: hidden;
}
#ms-terms-modal .uk-modal-dialog { padding: 0; }
#ms-terms-modal .ms-terms-scroll {
    padding: 30px 34px;
    max-height: 70vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #D61836 #f0e6ec;
}
/* Czerwony cienki pasek (jak SimpleBar w liście wpłat) — webkit */
#ms-terms-modal .ms-terms-scroll::-webkit-scrollbar { width: 8px; }
#ms-terms-modal .ms-terms-scroll::-webkit-scrollbar-track { background: #f0e6ec; border-radius: 8px; }
#ms-terms-modal .ms-terms-scroll::-webkit-scrollbar-thumb { background: #D61836; border-radius: 8px; }
/* Gdy SimpleBar się zainicjuje — czerwony suwak */
#ms-terms-modal .simplebar-scrollbar::before { background: #D61836; }
#ms-terms-modal h3 {
    color: #912888;
    margin: 0 0 18px;
    font-size: 22px;
    font-weight: 700;
    padding-right: 30px;
}
#ms-terms-modal p,
#ms-terms-modal li {
    font-size: 14px;
    line-height: 1.65;
    color: #333;
}
#ms-terms-modal a { color: #912888; text-decoration: underline; }
#ms-terms-modal .uk-modal-close-default { color: #912888; }

.ms-checkout-box .ms-consent-row a {
    color: #9c277d;
    text-decoration: underline;
}

.ms-checkout-box .ms-pomoz-consents .ms-consent-all {
    margin-bottom: 0 !important;   /* bije theme.1.css .form-row label:first-child (10px) */
}


.ms-checkout-box .woocommerce-terms-and-conditions-wrapper label:has(input:checked),
.ms-checkout-box .ms-consent-row:has(input:checked),
.ms-checkout-box .form-row label.checkbox:has(input:checked) {
    background: #f2f8e4;
    border-color: #6ac46a;
}

.ms-checkout-box .form-row label:not(.checkbox) {
    display: none;
}

/* USUNIĘTE: układ pól billing oparty na float.
   Było tu `float: left` + `width: calc(50% - 5px)` + `margin-right: 10px`,
   a poniżej 640px `float: none` + `width: 100%` (czyli pola w słupek).

   Pola układa teraz flex z `gap` na `__field-wrapper` (patrz niżej w pliku).
   Przy flexie przerwę robi `gap`, a szerokości są liczone jako
   `calc(40% - gap/2)` i `calc(60% - gap/2)`, więc dodatkowy margin-right
   doklejał się do odstępu i rozjeżdżał rząd. Dwa mechanizmy układające te
   same pola naraz to była prosta droga do rozjazdu. */

.ms-checkout-box #billing_email_field {
    clear: both;
}

@media (max-width: 640px) {
    .ms-native-checkout {
        padding: 28px 18px 20px;
    }
}

.ms-thankyou-box {
    padding: 28px 18px;
    text-align: center;
}

.ms-thankyou-box h3 {
    color: var(--ms-btn-bg);
    margin: 0 0 4px;
}

.ms-thankyou-summary {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
    margin: 18px 0;
    text-align: left;
}

.ms-thankyou-share-main {
    margin-top: 16px;
    width: 100%;
}

.ms-woo-notice-converted {
    display: none !important;
}

/* ─── Donors List ───────────────────────────────────────────────────── */

.ms-donor-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}
.ms-donor-row:last-child {
    border-bottom: none;
}
.ms-donor-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.ms-icon-male {
    background: #dbeafe;
    color: #2563eb;
}
.ms-icon-male::before { content: '♂'; }
.ms-icon-female {
    background: #fce7f3;
    color: #db2777;
}
.ms-icon-female::before { content: '♀'; }
.ms-icon-business {
    background: #e5e7eb;
    color: #374151;
}
.ms-icon-business::before { content: '⌂'; }
.ms-donor-name {
    flex: 1;
    font-weight: 500;
}
.ms-donor-date {
    color: #999;
    font-size: 12px;
}
.ms-donor-amount {
    font-weight: 700;
    color: #e74c3c;
    white-space: nowrap;
}

/* Słowo wsparcia w tym samym bąbelku pod imieniem (jak ms07) */
.donation-item .donation-message {
    color: #333;
    line-height: 1.35;
    margin-top: 2px;
}

/* ─── Search ────────────────────────────────────────────────────────── */

.ms-search-wrap {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
}
/* Duże, białe, zaokrąglone pole jak ms07 */
.ms-search-wrap .ms-search-input.uk-input {
    height: 56px;
    width: 100%;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 0 54px 0 20px;      /* miejsce na ikonę po prawej */
    font-size: 16px;
    color: #333;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    transition: border-color .2s, box-shadow .2s;
}
.ms-search-wrap .ms-search-input.uk-input:focus {
    border-color: #d9d9d9;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
    outline: none;
}
.ms-search-wrap .ms-search-input.uk-input::placeholder {
    color: #999;
}
.ms-search-wrap .uk-form-icon {
    width: 54px;
    color: #9c277d;              /* akcent marki */
}
.ms-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    margin-top: 6px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.ms-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    color: inherit;
    text-decoration: none;
}
.ms-search-item:hover {
    background: #f5f5f5;
}
.ms-search-thumb {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
}
.ms-search-empty {
    padding: 12px;
    color: #999;
    text-align: center;
}

/* ─── Share ──────────────────────────────────────────────────────────── */

.ms-share {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0;
}
.ms-share-label {
    font-size: 14px;
    color: #666;
}
.ms-share-buttons {
    display: flex;
    gap: 8px;
}
.ms-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f0f0f0;
    color: #333;
    text-decoration: none;
    transition: all 0.15s;
    border: none;
    cursor: pointer;
}
.ms-share-btn:hover {
    background: #e74c3c;
    color: #fff;
}

/* ─── Sponsor Box ───────────────────────────────────────────────────── */

.ms-sponsor-box {
    margin: 16px 0;
}
.ms-sponsor-logo {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-right: 12px;
}
.ms-sponsor-name {
    font-weight: 600;
}
.ms-sponsor-slogan {
    font-size: 13px;
    color: #666;
}

/* ─── Bank Accounts ─────────────────────────────────────────────────── */

.ms-bank-accounts h4 {
    margin-bottom: 12px;
}
.ms-bank-number {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
}
.ms-bank-number code {
    font-size: 14px;
    letter-spacing: 1px;
}
.ms-copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    padding: 2px;
}
.ms-copy-btn:hover {
    color: #e74c3c;
}
.ms-bank-recipient,
.ms-bank-title {
    font-size: 13px;
    color: #666;
}

/* ─── Pagination ────────────────────────────────────────────────────── */

.ms-pagination .uk-active a {
    background: #e74c3c;
    color: #fff;
    border-radius: 4px;
}

/* ─── Checkout /pomoz/ ──────────────────────────────────────────────── */

.pomagam-checkout-page .site-header,
.pomagam-checkout-page .site-footer {
    /* Simplified checkout: can hide header/footer if desired */
}

/* ─── Donor Row z wiadomością wsparcia ──────────────────────────────── */

.ms-donor-row.has-message {
    border-left: 3px solid #e74c3c;
    padding-left: 12px;
    margin-bottom: 16px;
}
.ms-donor-row-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ms-donor-message {
    margin-top: 6px;
    padding: 8px 12px;
    background: #fff7f6;
    border-radius: 6px;
    font-style: italic;
    color: #444;
    font-size: 14px;
    line-height: 1.5;
}
.ms-donor-message::before {
    content: "💜 ";
}

/* ─── Progress: pasek MS Mam Serce (gradient purple→red, MS07-compatible) ─── */

.donation-percent {
    width: 100%;
    position: relative;
}
.donation-progress-bar {
    position: relative;
    background: #f1f1f1;
    border-radius: 50px;
    overflow: hidden;
    height: 25px;
}
.donation-progress-bar .progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    overflow: hidden;
}
.donation-progress-bar .progress-bar.progressValue {
    background: #912888;
    background: -webkit-linear-gradient(left, #912888 30%, #EA030A);
    background: -moz-linear-gradient(left, #912888 30%, #EA030A);
    background: linear-gradient(to right, #912888 30%, #EA030A);
    border-radius: 50px;
    z-index: 2; /* biały innerLabel NAD czarnym labelem → biała czcionka na kolorze */
}
.donation-progress-bar .progress-bar.progressLabel {
    color: #000; /* czarna czcionka na białej (niewypełnionej) części paska */
    font-weight: bold;
    text-align: center;
    line-height: 25px;
    z-index: 1;
}
.donation-progress-bar span.progressInnerLabel {
    position: absolute;
    text-align: center;
    color: white;
    height: 25px;
    line-height: 25px;
    font-weight: bold;
    left: 0;
}

/* ─── Yearly summary (historia wsparcia) ────────────────────────────── */

.ms-yearly-summary {
    margin: 16px 0;
}
.ms-yearly-row {
    display: grid;
    grid-template-columns: 60px 1fr 120px 80px;
    gap: 8px;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
}
.ms-yearly-year {
    font-weight: 700;
    color: #333;
}
.ms-yearly-bar {
    display: block;
    height: 8px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}
.ms-yearly-bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(to right, #912888 30%, #EA030A);
}
.ms-yearly-sum {
    text-align: right;
    font-weight: 700;
}
.ms-yearly-status {
    text-align: right;
    font-size: 12px;
    color: #999;
}
.ms-yearly-sealed {
    cursor: help;
}
.ms-yearly-live {
    color: #28a745;
    font-weight: 600;
}
.ms-yearly-total {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 2px solid #333;
    font-size: 18px;
    font-weight: 700;
}
.ms-yearly-total-sum {
    color: #e74c3c;
}
.ms-yearly-sources {
    grid-column: 1 / -1;
    padding-left: 60px;
    margin-top: 4px;
    color: #888;
    font-size: 12px;
}
.ms-yearly-source-item {
    display: inline-block;
    margin-right: 12px;
}

/* ── Support block (fraza pod dzieckiem + logo sponsora/Mam Serce) ───────────── */
/* h4/nagłówek frazy ma domyślne marginesy motywu (góra/dół) — rozpychają wiersz. */
.ms-support-inner {
    gap: 14px; /* delikatny odstęp logo ↔ tekst (jak uk-grid-small) */
}
.ms-support-text {
    margin: 0;
}
.ms-support-logo {
    flex: 0 0 auto;
}

/* ── Płynne doładowanie listy wpłat (fade-in kaskadą, „nie strzela") ─────────── */
.donations-list-inner .donation-item.ms-donor-in {
    opacity: 0;
    transform: translateY(6px);
    will-change: opacity, transform;
}
.donations-list-inner .donation-item.ms-donor-in.ms-donor-show {
    opacity: 1;
    transform: none;
    transition: opacity .38s ease, transform .38s ease;
}
/* delikatny margines, żeby smooth-scroll do listy nie przyklejał się do navbaru */
[id^="donations-list-container-"] {
    scroll-margin-top: 90px;
}
@media (prefers-reduced-motion: reduce) {
    .donations-list-inner .donation-item.ms-donor-in,
    .donations-list-inner .donation-item.ms-donor-in.ms-donor-show {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ── Słowa wsparcia jako dymki (jak MS07: ikona + chmurka nazwa+komentarz) ───── */
.donations-list-inner--bubble {
    gap: 18px;
}
.donation-item--bubble {
    align-items: flex-start;
    gap: 14px;
}
.donation-item--bubble .ms-bubble-avatar {
    flex: 0 0 auto;
    padding-top: 4px;
}
.donation-item--bubble .ms-bubble {
    flex: 1 1 auto;
    min-width: 0;
    background: #f2f2f2;
    border-radius: 22px;
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.donation-item--bubble .ms-bubble-name {
    color: #2b2b2b;
    font-size: 15px;
    line-height: 1.2;
}
.donation-item--bubble .ms-bubble-text {
    color: #555;
    font-size: 14px;
    line-height: 1.4;
    word-break: break-word;
}

/* ── SimpleBar: czerwony suwak jak MS07 (#D61836), track prawie niewidoczny ───── */
[data-jdev-simplebar]{ scrollbar-gutter: stable; max-width: 100%; }
[data-simplebar] .simplebar-content-wrapper{ overflow-x: hidden; }
.simplebar-track.simplebar-vertical{
    width: 10px;
    background: transparent;
    opacity: 0;
    transition: opacity .2s ease;
}
.simplebar-scrollbar::before{
    content: '';
    border-radius: 999px;
    background-color: rgba(214,24,54,.15);
    opacity: .18;
    transform: scaleX(.9);
    transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
}
[data-jdev-simplebar]:hover .simplebar-track.simplebar-vertical{ opacity: .75; }
[data-jdev-simplebar]:hover .simplebar-scrollbar::before{
    opacity: .85;
    transform: scaleX(1.25);
    background-color: rgba(214,24,54,.9);
}
.simplebar-dragging .simplebar-scrollbar::before,
.simplebar-scrollbar.simplebar-visible::before{
    opacity: .9;
    transform: scaleX(1.35);
    background-color: rgba(214,24,54,1);
}
.simplebar-track.simplebar-vertical:hover .simplebar-scrollbar::before{
    opacity: .95;
    transform: scaleX(1.4);
}

/* ── AJAX add-to-cart spinner ─────────────────────────────────────────── */
.ms-btn-submit .ms-spinner {
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
}
.ms-btn-submit.ms-is-loading {
    opacity: 0.7;
    pointer-events: none;
}

/* ── Bramka płatności: natychmiastowe wizualne zaznaczenie ────────────── */
.wc_payment_methods .wc_payment_method {
    transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.wc_payment_methods .wc_payment_method.ms-just-selected {
    opacity: 1;
    transform: scale(1.02);
}
.wc_payment_methods .wc_payment_method:not(.ms-checked) {
    opacity: 0.7;
}
/* Natychmiast zaznacz WC-blockUI dla bramki — bez czekania na AJAX.
   Kolor selekcji = zielony jak reszta serwisu (border/bg z :has(input:checked)
   poniżej), nie czerwony akcent — czerwony gryzł się z zielonym tłem. */
.wc_payment_methods .wc_payment_method.ms-checked {
    opacity: 1;
}

/* ── iOS: koniec auto-zoomu przy focusie pola ────────────────────────────────
   Safari powiększa ekran, gdy czcionka inputa < 16px. 16px na mobile = brak
   zoomu, wygląd praktycznie bez zmian (pola tylko odrobinę większy tekst). */
@media (max-width: 767px) {
    .ms-donation-box input,
    .ms-donation-box textarea,
    .ms-donation-box select,
    .ms-donation-amount-box .ms-custom-input,
    .ms-checkout-box input,
    .ms-checkout-box textarea,
    .ms-checkout-box select,
    .ms-native-checkout input,
    .ms-native-checkout textarea,
    .ms-native-checkout select,
    .ms-search input,
    .woocommerce-billing-fields input,
    .jdev-ux-inline input {
        font-size: 16px !important;
    }

    /* ── Wyjątek: kafelek „Inna kwota" ────────────────────────────────────
       Ten input stoi w jednym rzędzie z kafelkami kwot, które są zwykłymi
       przyciskami i mają 14px. Przy 16px jego cyfry były wyraźnie większe
       niż „500 zł" obok, choć oba kafelki mają identyczne 103,66 × 45px.

       Dlatego w spoczynku dostaje 14px jak sąsiedzi, a 16px wraca dokładnie
       w chwili dotknięcia. Safari sprawdza rozmiar czcionki w momencie
       wejścia w pole, więc ochrona przed przybliżaniem strony zostaje. */
    .ms-donation-amount-box .ms-custom-input {
        font-size: 14px !important;
    }
    .ms-donation-amount-box .ms-custom-input:focus {
        font-size: 16px !important;
    }
}

/* ==========================================================================
   SCENA KROKÓW — płynne przejście kwota → dane → zgody
   ==========================================================================

   Problem, który to rozwiązuje (zmierzone na mobile 375px, 2026-08-15):
   przycisk „Wpłać darowiznę" stał w kroku kwoty 240px od górnej krawędzi
   karty, a po wejściu na /pomoz/ — 391px. Klient widział skok o ~150px plus
   pełne przeładowanie strony, więc przepływ „szarpał" zamiast płynąć.

   Zasada: przycisk ma wrócić w to samo miejsce EKRANU, a nie karty. Robi to
   kotwica scrolla w ms-donation-box.js (msSaveAnchor/msRestoreAnchor), która
   zapamiętuje jego pozycję przed kliknięciem i przywraca ją po załadowaniu
   następnego kroku. Nie rusza układu, więc nie da się nią zepsuć wyglądu.
   ========================================================================== */

:root {
    /* Wspólny rytm animacji kroków. */
    --ms-step-dur: 220ms;
    --ms-step-ease: cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 767px) {

    /* ── Krok 2/3: wspólna wysokość zamiast wartości z szablonu ──────────
       Było tu min-height: 0 !important, żeby zdjąć sztywne 399px z szablonu
       YOOtheme, które na telefonie rozpychało kartę (590px przy naturalnych
       542px).

       Teraz zamiast zerowania podajemy naszą wspólną wysokość kroku.
       --ms-card-h ma poniżej 960px wartość 400px (patrz ms-pages.css), więc
       krok 2a i 2b stają się równe krokowi 1. Zmierzone przed zmianą:
       krok 1 miał 399px, a kroki 2a i 2b po 334,5px.

       !important zostaje, bo bez niego wygrywa wartość, którą uk-height-match
       wpisuje w stylu inline — na telefonie kolumny stoją jedna pod drugą,
       więc dopasowanie do zdjęcia nie ma tu sensu. */
    .ms-checkout-box.ms-match-checkout {
        min-height: var(--ms-card-h) !important;
    }
    /* Przycisk trzyma się dołu sceny, a nie dołu rozdmuchanej karty. */
    .ms-checkout-box .form-row.place-order #place_order {
        margin-top: 0 !important;
    }

    /* WYCOFANE 2026-08-15: dopychanie obszaru nad przyciskiem do wspólnej
       wysokości (--ms-stage-pad). Wyrównywało CTA między krokami, ale kosztem
       103px pustki między kwotami a przyciskiem na stronie zbiórki, czyli na
       najważniejszym ekranie portalu. Zła wymiana: pozycję przycisku i tak
       trzyma kotwica scrolla (msSaveAnchor/msRestoreAnchor), która nie rusza
       układu. */
}

/* ── Krok 2 → 3: zgody wchodzą płynnie ──────────────────────────────────
   Wcześniej display:none → display:flex, czyli treść teleportowała się
   w jednej klatce. Teraz stara treść gaśnie i podjeżdża, nowa wchodzi
   z dołu. Wysokość karty się nie zmienia (scena jest stała), więc nic
   nie skacze pod palcem.

   `@starting-style` podaje stan, OD którego ma ruszyć element dopiero co
   wstawiony do układu — bez tego zgody pojawiłyby się od razu docelowe.
   Starsze przeglądarki ignorują tę regułę i dostają dzisiejsze twarde
   przełączenie, czyli brak regresji.

   UWAGA, wpadka z 2026-08-15 (commit b633123): `display` było tu na liście
   `transition` z `allow-discrete`. To odracza zmianę display do końca
   przejścia i w praktyce ubiło `display: none !important` na polach i
   bramkach — w kroku zgód widać było JEDNOCZEŚNIE pola i zgody, karta
   rosła z 502px do 673px, czyli dokładnie ten skok, który miał zniknąć.
   Elementy WYCHODZĄCE znikają twardo, animujemy tylko WCHODZĄCE zgody. */
.ms-checkout-box .ms-pomoz-consents {
    transition:
        opacity var(--ms-step-dur) var(--ms-step-ease),
        transform var(--ms-step-dur) var(--ms-step-ease);
}

/* ── Divider w tej samej osi w kroku 2a i 2b ────────────────────────────
   Pozioma linia to jedyny stały punkt, po którym oko orientuje się przy
   zmianie kroku. Jeśli drgnie, całe przejście czyta się jak przeskok.

   Zmierzone od górnej krawędzi karty (desktop, 2026-08-15):
     2a: padding formularza 40 + bramki 47 + margin-top linii 15 = 102px
     2b: padding formularza 40 + przesunięcie 8 + wiersz „zaznacz
         wszystkie" 48 + margin-top linii 15 = 111px

   Stąd korekta 9px, czyli 8px przesunięcia plus 1px różnicy wysokości
   (kafelek bramki ma 47px, wiersz zgody 48px).

   Wcześniej korekta wynosiła 6px, gdy kafelek bramki miał jeszcze 50px.

   Tych 8px przesunięcia nie udało się przypisać do konkretnej reguły: to
   nie gap, nie padding rodzica, nie justify-content ani margines
   sąsiada — wszystkie cztery sprawdzone i zerowe. Korekta jest więc
   zmierzona, nie wyprowadzona. Jeśli zmieni się liczba lub układ zgód,
   trzeba przemierzyć obie pozycje. */
.ms-checkout-box.is-consents-step .ms-pomoz-consents {
    margin-top: -9px;
}
.ms-checkout-box.is-consents-step .ms-pomoz-consents {
    opacity: 1;
    transform: none;
}
@starting-style {
    .ms-checkout-box.is-consents-step .ms-pomoz-consents {
        opacity: 0;
        transform: translateY(8px);
    }
}

/* ── Wejście karty checkoutu ────────────────────────────────────────────
   /pomoz/ ładuje się pełnym żądaniem (TTFB ~1,6s przy zimnym opcache), więc
   karta pojawia się nagle po białej przerwie. Krótkie wejście zamienia ten
   przeskok w domknięcie ruchu rozpoczętego kliknięciem w poprzednim kroku. */
@keyframes msStageIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
.ms-checkout-box {
    animation: msStageIn var(--ms-step-dur) var(--ms-step-ease) both;
}

/* ── Szacunek dla ustawień dostępności ──────────────────────────────────
   Ruch potrafi wywołać mdłości u osób z zaburzeniami przedsionkowymi.
   Wyrównanie sceny zostaje (to układ, nie animacja), znika samo poruszenie. */
@media (prefers-reduced-motion: reduce) {
    .ms-checkout-box,
    .ms-checkout-box .ms-pomoz-consents,
    .ms-checkout-box #customer_details,
    .ms-checkout-box #payment ul.payment_methods,
    .ms-donation-amount-box .ms-amount-buttons {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* ==========================================================================
   STANDARD WYSOKOŚCI KONTROLEK — 47px w całym portalu
   ==========================================================================

   Decyzja z 2026-08-15. Wcześniej ten sam element potrafił mieć inną wysokość
   na różnych stronach, bo działały trzy niezależne mechanizmy:

     1. ramka raz w środku, raz na zewnątrz (box-sizing: content-box)
     2. treść rozpychała element ponad zadeklarowane min-height
     3. dwie różne liczby bazowe: 48px w checkoucie, 47px na stronach treści

   Zmierzony stan przed zmianą:
     kafelek kwoty ....... 55px  (line-height 47 + padding 3+3 + ramka 1+1)
     pole „Inna kwota" ... 55px  (to samo)
     kafelek bramki ...... 50px  (min-height 48 + ramka, content-box)
     pole w checkoucie ... 48px
     przycisk CTA ........ 47px
     zakładka przełącznika 37,27px

   Zasada: height RAZEM z box-sizing: border-box, czyli zadeklarowana liczba
   jest liczbą realną, a ramka mieści się w środku. Padding zerujemy i
   centrujemy treść flexem, żeby nie doliczała się do wysokości.

   Ikona kopiowania (36px) celowo zostaje mniejsza — siedzi WEWNĄTRZ pola,
   więc jej wysokość nie jest wysokością kontrolki. */

/* Wysokość jest sterowana JEDNĄ zmienną z ms-pages.css (ładowany na całym
   froncie). Tutaj tylko z niej czytamy. Wartość zapasowa 47px działa, gdyby
   tamten arkusz kiedyś nie doszedł. */

.ms-donation-wizard .ms-amount-btn,
.ms-donation-wizard .ms-custom-input,
.ms-donation-amount-box .ms-amount-btn,
.ms-donation-amount-box .ms-custom-input,
.ms-donation-box .uk-input,
.ms-donation-box .ms-btn-submit,
.fs-switcher__nav-item-link {
    box-sizing: border-box !important;
    height: var(--ms-control-h) !important;
    min-height: var(--ms-control-h) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: normal !important;
}

/* Wyśrodkowanie treści bez pomocy line-height, które doliczało się do
   wysokości. Dotyczy elementów z krótkim tekstem w jednej linii. */
.ms-donation-amount-box .ms-amount-btn,
.ms-donation-wizard .ms-amount-btn,
.fs-switcher__nav-item-link {
    align-items: center;
    display: flex;
    justify-content: center;
}

/* ==========================================================================
   RYTM KROKÓW — przycisk zawsze na tej samej wysokości
   ==========================================================================

   Każdy krok ma tę samą budowę:

       wiersz 1     tytuł „Zbieramy na" / bramki płatności / „zaznacz wszystkie"
       divider      pozioma linia
       wiersz 2     2 rzędy kwot / 2 rzędy pól / 2 zgody
       przycisk     Wpłać darowiznę
       (kroki 2a i 2b mają pod spodem tekst o polityce prywatności)

   Skoro budowa jest ta sama, wystarczy żeby wiersz 1 miał --ms-control-h,
   linia równe odstępy --ms-divider-gap, a wiersz 2 stałą --ms-row2-h.
   Wtedy przycisk wypada w tym samym miejscu SAM, bez mierzenia czegokolwiek
   JavaScriptem i bez dobieranych korekt.

   Zmierzone przed zmianą (odstępy w karcie zbiórki): 30, 27, 10, 20, 20 —
   pięć różnych wartości. W checkoucie: 15, 15, 12, 12, 37. Przycisk stał
   234px od góry karty w kroku danych i 299,28px w kroku zgód.

   Po zmianie: przycisk 234px w każdym kroku, różnica 0.

   Wszystkie liczby pochodzą z --ms-* w ms-pages.css. Tam jest jedno miejsce
   sterowania: zmiana --ms-control-h przestawia cały portal.
   ========================================================================== */

/* ── Krok 1: karta zbiórki ─────────────────────────────────────────────── */
.uk-card-body:has(.ms-donation-box) > .ms-cel {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-bottom: var(--ms-divider-gap) !important;
    min-height: var(--ms-control-h);
}
.uk-card-body:has(.ms-donation-box) > hr {
    margin-bottom: var(--ms-divider-gap) !important;
    margin-top: 0 !important;
}
.ms-donation-amount-box .ms-amount-buttons {
    align-content: center;
    box-sizing: border-box;
    gap: var(--ms-row-gap) !important;
    margin-top: 0 !important;
    min-height: var(--ms-row2-h);
}
.ms-donation-amount-box .ms-wizard-actions {
    margin-top: var(--ms-row-gap) !important;
}

/* ── Kroki 2a i 2b: checkout ───────────────────────────────────────────── */
.ms-checkout-box #payment ul.payment_methods {
    gap: var(--ms-row-gap) !important;
    margin: 0 !important;
}
.ms-checkout-box .ms-gateway-hr,
.ms-checkout-box .ms-pomoz-consents > hr {
    margin-bottom: var(--ms-divider-gap) !important;
    margin-top: var(--ms-divider-gap) !important;
}
.ms-checkout-box .woocommerce-billing-fields {
    box-sizing: border-box !important;
    min-height: var(--ms-row2-h) !important;
}

/* Blok zgód sam w sobie jest całym krokiem: „zaznacz wszystkie" to wiersz 1,
   potem jego własna linia, a na końcu dwie zgody jako wiersz 2. Dlatego
   dostaje wysokość całej trójki, a nie samego wiersza 2. */
.ms-checkout-box .ms-pomoz-consents {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    /* wiersz 1 + linia z odstępami + wiersz 2 — dokładnie tyle, ile zajmuje
       krok danych nad przyciskiem. Był tu jeszcze jeden --ms-row-gap jako
       kompensacja, ale po ustawieniu pól parami (tak jak na wizualizacji)
       stał się nadmiarowy i przycisk w kroku zgód schodził 12px za nisko. */
    min-height: calc(
        var(--ms-control-h) + var(--ms-divider-gap) * 2 + 1px
        + var(--ms-row2-h)
    ) !important;
}
.ms-checkout-box .ms-pomoz-consents > .ms-consent-row:not(.ms-consent-all) {
    margin-bottom: 0 !important;
}
/* BŁĄD, USUNIĘTY: ostatnia zgoda miała margin-top:auto, przez co odklejała
   się od poprzedniej i przyklejała do przycisku. Zgody mają stać równo jedna
   pod drugą, z tym samym odstępem co wszędzie. */
.ms-checkout-box .ms-pomoz-consents > .ms-consent-row:not(.ms-consent-all) {
    margin-bottom: var(--ms-row-gap) !important;
    margin-top: 0 !important;
}
.ms-checkout-box .ms-pomoz-consents > .ms-consent-row:last-child {
    margin-bottom: 0 !important;
}
/* 18px doklejane w kroku zgód przesuwało cały blok w dół. */
.ms-checkout-box.is-consents-step #payment .place-order {
    padding-top: 0 !important;
}
.ms-checkout-box .form-row.place-order {
    margin-top: var(--ms-row-gap) !important;
}
.ms-checkout-box #place_order {
    margin-top: 0 !important;
}

/* ── Karta zawsze tej samej wysokości, dolny blok przyklejony do spodu ────
   Wysokość karty liczona z tych samych zmiennych co rytm wierszy:

       padding + wiersz1 + (divider + 2 odstępy) + wiersz2 + odstęp
       + przycisk + odstęp + blok dolny

   Blok dolny to zgody z polityką prywatności w checkoucie, a pasek postępu
   na stronie zbiórki. Dostaje margin-top:auto, więc siada na spodzie karty
   niezależnie od tego, ile treści jest nad nim. Dzięki temu i przycisk,
   i tekst na dole stoją w tym samym miejscu w każdym kroku. */
.ms-checkout-box {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: var(--ms-card-h);
}
.ms-checkout-box .woocommerce,
.ms-checkout-box form.checkout {
    display: flex;
    flex: 1;
    flex-direction: column;
}
/* Tekst o polityce prywatności zawsze na samym dole karty. */
.ms-checkout-box .woocommerce-privacy-policy-text {
    margin-top: auto !important;
    padding-top: var(--ms-row-gap);
}

/* Szablon YOOtheme wpisuje formularzowi checkoutu sztywne min-height 494px
   (widoczne w inline <style> strony jako #template-…#13 form.checkout).
   Na telefonie trzymało to kartę na 542px i zostawiało 110px pustki pod
   tekstem o polityce. Na wąskich ekranach wysokość liczy --ms-card-h,
   więc tamta liczba musi ustąpić. Na desktopie zostaje bez zmian, bo tam
   karta ma być równa ze zdjęciem obok. */
@media (max-width: 767px) {
    .ms-checkout-box form.checkout.woocommerce-checkout {
        min-height: 0 !important;
    }
}

/* ── Blok pod przyciskiem naprawdę przy dolnej krawędzi karty ────────────
   Tekst o polityce prywatności „lewitował" tuż pod przyciskiem, zamiast
   siedzieć na spodzie karty. Powód: margin-top:auto działa tylko wtedy, gdy
   kontener elementu sięga dołu. `.form-row.place-order` kończyła się zaraz
   za treścią, więc nie było czego rozpychać.

   Teraz place-order jest kolumną flex, która zajmuje całą resztę wysokości
   karty (flex: 1), a tekst wewnątrz dostaje margin-top:auto i faktycznie
   ląduje przy dolnej krawędzi. */
.ms-checkout-box form.checkout .form-row.place-order {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
}
/* Tekst o polityce nie jest bezpośrednim dzieckiem place-order — siedzi
   w opakowaniu .woocommerce-terms-and-conditions-wrapper. margin-top:auto
   musi trafić w TO opakowanie, bo tylko bezpośrednie dziecko kontenera flex
   daje się rozepchnąć. Wcześniej reguła szła na sam tekst i nic nie robiła. */
/* USUNIĘTE margin-top:auto. Spychało tekst na sam dół karty, a karta jest
   wysoka (równa się ze zdjęciem obok), więc między przyciskiem a tekstem
   robiła się dziura na ~200px. Tekst ma iść ZARAZ pod przyciskiem; jeśli
   karcie zostaje wolne miejsce, ma zostać na samym dole, pod tekstem. */
/* Formularz jest teraz kolumną flex o pełnej wysokości, więc blok z
   przyciskiem może się rozciągnąć, a tekst o polityce usiąść na jego dole.
   Wcześniej auto nie miało czego rozpychać i albo tekst kleił się do
   przycisku, albo robiła się dziura w środku karty. */
.ms-checkout-box .form-row.place-order {
    flex: 1;
}
.ms-checkout-box .form-row.place-order > .woocommerce-terms-and-conditions-wrapper {
    margin-bottom: 0 !important;
    margin-top: auto !important;
    padding-top: var(--ms-bottom-gap);
}
.ms-checkout-box .woocommerce-privacy-policy-text {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

/* ── Imię i nazwisko obok siebie, także na telefonie ─────────────────────
   Na wizualizacji od grafika pola „Imię" i „nazwisko" stoją w jednym rzędzie
   również na wąskim ekranie, a pod nimi adres e-mail na całą szerokość.
   WooCommerce układał je w słupek (każde 281px), przez co wiersz 2 miał na
   telefonie trzy rzędy zamiast dwóch i przycisk lądował niżej niż w innych
   krokach.

   Flex musi trafić w `__field-wrapper`, bo to on jest bezpośrednim rodzicem
   pól — `.woocommerce-billing-fields` jest o poziom wyżej i ustawianie go
   nic nie dawało. */
.ms-checkout-box .woocommerce-billing-fields__field-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--ms-row-gap) !important;
}
.ms-checkout-box .woocommerce-billing-fields__field-wrapper > .form-row {
    margin: 0 !important;
}
.ms-checkout-box #billing_first_name_field {
    width: calc(40% - var(--ms-row-gap) / 2) !important;
}
.ms-checkout-box #billing_last_name_field {
    width: calc(60% - var(--ms-row-gap) / 2) !important;
}
.ms-checkout-box #billing_email_field {
    width: 100% !important;
}

/* ==========================================================================
   ODSTĘP NAD PRZYCISKIEM — liczony RAZ, w każdym kroku tak samo
   ==========================================================================

   Zmierzone drzewo (telefon 375px):

   KROK 1                              KROKI 2a / 2b
   .uk-card-default  pad 14/14         .ms-checkout-box   pad 28/20
   ├ tytuł           mb 15             └ form.checkout    pad 14/15  ← DRUGI padding
   ├ hr              mb 15               ├ bramki      order 0
   ├ .ms-amount-buttons                  ├ hr          order 2
   ├ .ms-wizard-actions  mt 12  ← CTA    ├ pola        order 3
   └ pasek postępu                       └ .form-row.place-order  mt 12
                                            ├ zgody     order 1
                                            ├ #place_order  mt 25  ← CTA
                                            └ polityka  order 3

   Dwa źródła rozjazdu, oba niewidoczne dopóki nie rozpisze się drzewa:

   1. Krok 2 ma PODWÓJNY padding: karta 28/20 plus formularz 14/15. Krok 1
      ma tylko 14/14. To 34px różnicy zanim cokolwiek policzymy.
   2. Odstęp nad przyciskiem SUMUJE SIĘ w kroku 2: 25px na samym przycisku
      plus 12px na wrapperze. W kroku 1 jest tylko 12px na wrapperze.
      Dlatego przycisk w kroku 1 klei się do kwot, a w kroku 2 nie.

   Rozwiązanie: odstęp pochodzi z jednej zmiennej i jest przypisany do
   JEDNEGO elementu w każdym kroku. Padding też liczony raz.
   ========================================================================== */

/* ── JEDEN element jest kartą ─────────────────────────────────────────────
   W checkoucie były DWA elementy z wyglądem karty, jeden w drugim:

     .ms-checkout-box                      ← wrapper z CheckoutBox.php
     └ form.checkout … uk-card-default uk-card uk-card-body   ← karta UIkit

   Oba miały padding i cień, oba próbowały trzymać wysokość. Stąd karta
   w karcie i rozjechany widok, gdy dołożyłem padding zewnętrznemu.

   Kartą jest FORMULARZ, bo to on ma klasy UIkit (uk-card-body daje padding
   i cień z motywu). Zewnętrzny box zostaje samym przekaźnikiem wysokości:
   zero paddingu, zero tła, tylko flex, żeby formularz mógł się rozciągnąć
   na całą wysokość przekazaną z wiersza (uk-height-match do zdjęcia obok).

   Dzięki temu formularz jest kolumną flex o pełnej wysokości i dolny element
   (tekst o polityce) może usiąść na jego dole. */
.ms-checkout-box {
    background: none !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
}
.ms-checkout-box form.checkout.woocommerce-checkout {
    box-sizing: border-box;
    display: flex;
    flex: 1;
    flex-direction: column;
    padding-bottom: var(--ms-card-pad) !important;
    padding-top: var(--ms-card-pad) !important;
}
.uk-card-body:has(.ms-donation-box) {
    padding-bottom: var(--ms-card-pad) !important;
    padding-top: var(--ms-card-pad) !important;
}

/* Odstęp nad przyciskiem liczony raz — wrapper zerujemy, odstęp trafia na
   sam przycisk (krok 2) albo na jego jedyny wrapper (krok 1). */
.ms-checkout-box .form-row.place-order {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}
.ms-checkout-box #place_order {
    margin-top: var(--ms-cta-gap) !important;
}
.ms-donation-amount-box .ms-wizard-actions {
    margin-top: var(--ms-cta-gap) !important;
}

/* Blok pod przyciskiem przy dolnej krawędzi karty, w obu rodzajach kroków. */
/* Pasek postępu zostaje przy dolnej krawędzi karty zbiórki — tam karta ma
   naturalną wysokość i nie powstaje dziura. Tekst o polityce w checkoucie
   celowo NIE dostaje auto (patrz wyżej). */
.uk-card-body:has(.ms-donation-box) > div:has(.ms-progress-wrap) {
    margin-top: auto !important;
    padding-top: var(--ms-bottom-gap);
}

/* ==========================================================================
   PRZYCISK W PASKU STICKY = TAKI SAM JAK W KARCIE
   ==========================================================================

   Mobilny pasek z przyciskiem „Wpłać darowiznę" (div z klasą .uk-ms-sticky)
   trzyma link, a nie <button>, i ciągnie za sobą klasy, które go rozjeżdżają:

       single_add_to_cart_button button alt  ← stare reguły z ms-legacy.css:
                                                ramka 3px, tło #d61836,
                                                padding-left 50px
       uk-button-small                       ← standard wysokości celowo
                                                pomija -small, więc przycisk
                                                nie dostawał 45px

   Zmierzone przed zmianą: wysokość 6px zamiast 45, czcionka 600 zamiast 700,
   zaokrąglenie 30px zamiast 999px, inny odcień czerwieni.

   Nie trzeba niczego dodawać w Builderze — celujemy w istniejącą klasę
   .uk-ms-sticky, którą ten pasek już ma. Gdybyś jednak chciał sterować tym
   z Buildera, dodaj do diva klasę `ms-sticky-cta`: selektor niżej łapie obie. */

/* !important zostaje wyłącznie dlatego, że stara, ręcznie wklejana wersja
   paska niesie klasy single_add_to_cart_button, uk-button-small i
   uk-button-secondary naraz — bez tego wygrywałyby ich reguły. Wyśrodkowanie,
   font i padding zniknęły stąd: robi je standard z ms-pages.css. */
/* border: 0 USUNIĘTE 2026-08-17. Paleta daje .uk-button-primary ramkę
   3px w kolorze tła, więc zerowanie jej tutaj zostawiało pasek sticky
   z wnętrzem 45px, gdy każdy inny przycisk miał 39px. Ramka jest tego
   samego koloru co tło, więc nie widać jej gołym okiem, ale zmienia
   miejsce na napis i przez to wysokość linii tekstu. */
.uk-ms-sticky .ms-btn-submit,
.ms-sticky-cta .ms-btn-submit {
    background: var(--ms-btn-bg) !important;
    border-radius: var(--ms-btn-radius) !important;
    box-sizing: border-box !important;
    font-weight: 700 !important;
    height: var(--ms-control-h) !important;
    width: 100% !important;
}
.uk-ms-sticky .ms-btn-submit:hover,
.ms-sticky-cta .ms-btn-submit:hover {
    background: var(--ms-btn-bg-hover) !important;
}

/* ── Każdy krok ma ten sam prostokąt ─────────────────────────────────────
   Trzy karty, jedna wysokość z --ms-card-h:
     krok 1  — karta z kwotami
     krok 2a i 2b — formularz checkoutu
     krok 3  — podziękowanie z ikonami udostępniania
   Do tego zdejmujemy sztywne min-height z szablonu YOOtheme, bo inaczej
   przebiłoby wspólną wartość (na desktopie było 494px). */
.uk-card-body:has(.ms-donation-box),
.uk-card-body:has(.ms-share-icons),
.uk-card-body:has(.ms-thankyou-box) {
    box-sizing: border-box;
    min-height: var(--ms-card-h);
}
/* UWAGA — tu były DWIE reguły, które psuły wyrównanie kroku 2 do zdjęcia:

     .ms-checkout-box form.checkout { min-height: var(--ms-card-h) !important }
     .ms-checkout-box.ms-match-checkout { min-height: 0 !important }

   Wiersz siatki ma atrybut uk-height-match="target: .ms-match-checkout".
   UIkit mierzy wszystkie elementy z tą klasą i wpisuje najwyższą wartość
   jako min-height w stylu INLINE. Klasę tę nosi zarówno kolumna ze zdjęciem,
   jak i .ms-checkout-box, więc karta checkoutu powinna sama złapać wysokość
   zdjęcia — tak jak robi to karta z kwotami (.okok333) na kroku 1.

   min-height: 0 !important to kasowało, bo !important bije styl inline zawsze.
   Zmierzone skutki: krok 1 miał 450,4px, a krok 2a i 2b tylko 422px, przy
   zdjęciu o wysokości 450,4px w obu przypadkach.

   To ta sama pomyłka, przed którą ostrzega komentarz przy .ms-match-checkout
   jakieś 1400 linii wyżej w tym pliku. Wróciła przy pracy nad wspólną
   wysokością kroków i skasowała działający mechanizm.

   --ms-card-h zostaje PODŁOGĄ dla kroku 1 i 3 (reguła wyżej), czyli wysokością
   minimalną, gdy nie ma czego dopasowywać. Formularz ma już flex: 1, więc
   rozciąga się do rodzica sam i sztywna liczba nie jest mu potrzebna.

   min-height: 100% też się tu nie nadaje, choć wygląda niewinnie. Procent
   liczy się od wysokości rodzica, a ta zależy od formularza, więc powstaje
   błędne koło i karta puchła do 494px. Zmierzone: sama treść checkoutu ma
   372,5px, zdjęcie 450,4px, czyli treść mieści się z zapasem 77,9px — te
   dodatkowe 121,5px brały się wyłącznie z rozpychania.

   Formularzowi wystarczy flex: 1 (reguła .ms-checkout-box.ms-match-checkout
   form.checkout wyżej w pliku). Po tej zmianie karta ma naturalnie 422px,
   a uk-height-match podnosi ją do 450,4px, czyli dokładnie tyle co zdjęcie
   i tyle co karta na kroku 1. */

/* Przycisk z [ms_sticky_cta] nie ma klas psujących (single_add_to_cart_button,
   uk-button-small), więc bierze wysokość ze standardu i wystarczy mu szerokość
   na pełny pasek oraz miejsce z lewej na serduszko. Reguła wyżej, ta
   z !important, dotyczy starej wersji wklejanej ręcznie w Builderze i można
   ją usunąć, gdy wszystkie szablony przejdą na shortcode. */
.ms-sticky-cta .ms-btn-submit {
    width: 100%;
}

/* ── Pasek sticky: pełna szerokość ekranu, ale wyśrodkowana ──────────────
   Zmierzone przed poprawką (telefon 375px): przycisk miał 100,3px luzu
   z lewej i 70,3px z prawej, czyli uciekał o 30px.

   Przyczyna nie leżała w przycisku. Element paska dostaje w Builderze
   własny styl `width: 100vw`. Jednostka vw liczy się od szerokości OKNA,
   a element siedzi wewnątrz .uk-container, który ma 15px paddingu z każdej
   strony. Pasek zaczynał się więc na 15px i kończył na 390px, czyli 15px
   poza ekranem — stąd różnica 30px między lewą a prawą stroną.

   Ujemny margines calc(50% - 50vw) cofa pasek dokładnie o tę różnicę:
   50% rodzica (172,5px) minus 50vw (187,5px) daje -15px z każdej strony.
   Szerokość podajemy tutaj sami, więc reguła jest odporna na to, co stoi
   w Builderze.

   Do tego bezpośredni rodzic przycisku bywa zwężony do szerokości napisu
   (`width: max-content` w tamtym samym stylu z Buildera), przez co przycisk
   miał 204px zamiast całej szerokości paska. Rozciągamy go selektorem
   *:has(> .ms-sticky-cta), który celuje wyłącznie w rodzica naszego
   shortcode'u i nie rusza niczego innego na stronie. */
.uk-sticky:has(.ms-sticky-cta) {
    box-sizing: border-box;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw !important;
}
*:has(> .ms-sticky-cta) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
    width: 100% !important;
}
/* !important jest tu konieczne: szablon niesie własny styl
   `#template-… .uk-ms-sticky { width: max-content }`, a selektor z ID bije
   każdą regułę zapisaną klasą. Sam shortcode już tej klasy nie nadaje, ale
   ta reguła musi też prostować pasek wklejany w Builderze ręcznie, który
   uk-ms-sticky nadal ma. Bez tego przycisk zostaje przy szerokości napisu
   (zmierzone: 204px zamiast 345px). */
.ms-sticky-cta {
    box-sizing: border-box;
    margin-left: 0 !important;    /* uk-margin-auto ze starego znacznika */
    margin-right: 0 !important;
    padding: 0 15px;              /* oddech od krawędzi ekranu */
    width: 100% !important;
}

/* ══════════════════════════════════════════════════════════════════════
   PASEK POSTĘPU NA TELEFONIE — bardziej kompaktowy
   ══════════════════════════════════════════════════════════════════════
   Zmierzone na 375px: blok „Zebraliśmy / Potrzebujemy" plus pasek procentowy
   zajmował 94px, czyli 23,5% wysokości całej karty kroku 1. Przez to krok 1
   miał 399px, a kroki 2a i 2b po 334,5px.

   Alternatywą było rozepchanie kroku 2 pustką do 399px, ale to dokładanie
   powietrza tam, gdzie go nie potrzeba. Lepiej ścisnąć to, co realnie zajmuje
   najwięcej miejsca.

   Wartości siedzą w ms-pages.css jako --ms-progress-*, więc dostrajanie
   nie wymaga szukania po selektorach.

   Tylko telefon. Na komputerze pasek zostaje bez zmian, bo tam karta i tak
   dopasowuje się do zdjęcia obok i miejsca nie brakuje.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
    /* 1. Napisy „Zebraliśmy", „Potrzebujemy" i obie kwoty: 20px → 17px */
    .ms-progress-wrap .el-meta,
    .ms-progress-wrap .el-title {
        font-size: var(--ms-progress-font);
        line-height: var(--ms-progress-line);
    }

    /* 2. Odstęp między kwotami a paskiem: 25px → 10px */
    .ms-progress-wrap > .uk-margin {
        margin-bottom: var(--ms-progress-gap);
    }
    .ms-progress-wrap .uk-margin-small {
        margin-top: var(--ms-progress-gap);
    }

    /* 3. Sam pasek procentowy: 25px → 20px. Wysokość ustawiają trzy elementy
       naraz (tło, wypełnienie i etykieta w środku), więc wszystkie muszą
       dostać tę samą liczbę, inaczej pasek się rozjeżdża. */
    .ms-progress-wrap .donation-progress-bar,
    .ms-progress-wrap .progress-bar.progressValue,
    .ms-progress-wrap span.progressInnerLabel {
        height: var(--ms-progress-bar-h);
        line-height: var(--ms-progress-bar-h);
    }
}

/* ══════════════════════════════════════════════════════════════════════
   [ms_goal] — blok dwóch pozycji na kafelku listy
   ══════════════════════════════════════════════════════════════════════
   Shortcode używa DOKŁADNIE tych samych klas co [ms_progress]:

       el-meta  uk-h5 uk-text-secondary …   ← nazwa pozycji
       el-title uk-h5 uk-text-emphasis  …   ← wartość

   Dzięki temu dziedziczy typografię z palety YOOtheme i wygląda tak samo
   jak „Zebraliśmy / Potrzebujemy", bez ani jednej reguły koloru czy rozmiaru
   po naszej stronie.

   POPRAWIONE 2026-08-17: pierwsza wersja miała własne klasy
   .ms-goal-label i .ms-goal-value ze swoim kolorem i grubością. Wyglądały
   podobnie, ale nie reagowały na zmiany w Customizerze — czyli dokładnie
   ten rodzaj rozjazdu, który porządkowaliśmy przy przyciskach.

   Zostaje tylko odstęp od tego, co stoi nad blokiem. Reszta z motywu.
   ══════════════════════════════════════════════════════════════════════ */
.ms-goal-box {
    margin-top: 12px;
}

@media (max-width: 960px) {
    .ms-goal-box {
        margin-top: var(--ms-progress-gap);
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Wyszukiwarka podmieniajaca tresc strony: [ms_search_grid]
   Same karty wynikow nie maja tu zadnych regul, bo przychodza gotowe z Buildera.
   Stylujemy wylacznie pole, komunikat i moment ladowania.
   ───────────────────────────────────────────────────────────────────────────── */

/*
 * Bialy klocek jak naglowek (zaokraglenie i cien z .uk-navbar), z polem na srodku i lupa
 * na koncu. Ustalenia: notatka 13.01.2026 (szare tlo, bialy klocek, tresc chowa sie pod
 * spodem) i spotkanie 08.02.2026 (odstep jak miedzy kartami siatki: 40px).
 */
.ms-szukaj {
    margin: 0 0 40px;
    padding: 16px 20px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 0 8px 0 rgba(108, 67, 97, .15);
}

/*
 * Przyklejenie u gory ekranu. Shortcode siedzi w elemencie HTML Buildera, ktorego <div>
 * ma wysokosc samego pola, a sticky dziala tylko w obrebie rodzica, wiec przyklejamy ten
 * <div> (JS oznacza go klasa .ms-szukaj-host). W podgladzie (?ms-szukaj=1) pole stoi
 * bezposrednio w kolumnie z siatka i przykleja sie samo.
 */
.ms-szukaj-host,
.ms-szukaj-podglad {
    position: sticky;
    top: 12px;
    z-index: 970;
}

.ms-szukaj-host > .ms-szukaj { margin-bottom: 0; }
.ms-szukaj-host { margin-bottom: 40px !important; }

.ms-szukaj-pole {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 630px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    padding: 0 6px 0 0;
}

.ms-szukaj-pole:focus-within { border-color: var(--ms-zielony, #89AC43); }

/* Etykieta dla czytnikow ekranu; wzrokowo te sama informacje niesie placeholder. */
.ms-szukaj-etykieta {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.ms-szukaj-input {
    flex: 1 1 auto;
    min-width: 0;
    height: var(--ms-control-h, 47px);
    border: 0;
    border-radius: 6px;
    padding: 0 8px 0 20px;
    /* 16px to minimum, przy ktorym Safari na iPhonie nie powieksza strony po dotknieciu. */
    font: inherit;
    font-size: 16px;
    background: transparent;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

/* Wlasny przycisk czyszczenia zamiast systemowego krzyzyka, ktory kazda przegladarka rysuje inaczej. */
.ms-szukaj-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.ms-szukaj-czysc,
.ms-szukaj-lupa {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6b6b6b;
    cursor: pointer;
    padding: 0;
}

.ms-szukaj-czysc[hidden] { display: none; }

.ms-szukaj-czysc:hover,
.ms-szukaj-lupa:hover { color: #2b2b2b; background: #f3f3f3; }

.ms-szukaj-czysc:focus-visible,
.ms-szukaj-lupa:focus-visible { outline: 2px solid var(--ms-zielony, #89AC43); outline-offset: 1px; }

.ms-szukaj-stan {
    min-height: 20px;
    margin: 8px 2px 0;
    font-size: 14px;
    color: #6b6b6b;
    text-align: center;
}

.ms-szukaj-stan:empty { min-height: 0; margin: 0; }

/* Gdy paczka kart jeszcze sie pobiera, lista blednie zamiast znikac, zeby strona nie skakala. */
.ms-szukaj-laduje {
    opacity: .45;
    transition: opacity .15s ease-out;
    pointer-events: none;
}

.ms-szukaj-wiecej { margin-top: 32px; text-align: center; }

.ms-szukaj-wiecej[hidden] { display: none; }

.ms-szukaj-pusto {
    width: 100%;
    text-align: center;
    padding: 48px 16px;
    color: #6b6b6b;
}

/*
 * Jeden klocek z naglowkiem. JS dosuwa pole pod naglowek i oznacza oba elementy, wiec
 * te reguly dzialaja tylko na stronach z wyszukiwarka; gdzie indziej naglowek zostaje
 * nietkniety. Cien klocka obcinamy od gory, zeby nie kladl sie na styku.
 */
.ms-szukaj-polaczone .ms-szukaj-naglowek {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.ms-szukaj-polaczone .ms-szukaj-host > .ms-szukaj,
.ms-szukaj-polaczone .ms-szukaj-podglad {
    border-top: 1px solid #efe9ee;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    clip-path: inset(0 -12px -12px -12px);
}

/* Po przewinieciu pole jedzie samo, bez naglowka, wiec wraca do pelnego klocka. */
.ms-szukaj-polaczone .ms-szukaj-przyklejone > .ms-szukaj,
.ms-szukaj-polaczone .ms-szukaj-podglad.ms-szukaj-przyklejone {
    border-top: 0;
    border-radius: 15px;
    clip-path: none;
}

@media (max-width: 639px) {
    .ms-szukaj { padding: 10px; border-radius: 12px; margin-bottom: 24px; }
    .ms-szukaj-polaczone .ms-szukaj-przyklejone > .ms-szukaj { border-radius: 12px; }
    .ms-szukaj-host,
    .ms-szukaj-podglad { top: 8px; }
    .ms-szukaj-host { margin-bottom: 24px !important; }
}

.ms-szukaj-pusto strong { display: block; font-size: 18px; color: #2b2b2b; margin-bottom: 6px; overflow-wrap: anywhere; }