/* === Dofinansowanie (radio tiles) === */

/* Kontener */
.woocommerce-checkout span.woocommerce-input-wrapper {
    display: block;
}

/* Układ kafelków: 1 kolumna na mobile, auto-grid na większych */
.woocommerce-checkout span.woocommerce-input-wrapper:has(input[name="dofinansowanie"]) {
    display: grid;
    gap: 10px;
    padding: 12px;
    background: #f7f7f9;          /* lekkie tło */
    border: 1px solid #e7e7ee;
    border-radius: 8px;
}

/* iOS Safari fallback (gdy :has() nie zadziała) — nadal będzie OK,
   bo kafelki stylujemy też na labelach. Kontener wtedy zostanie bez tła. */

/* Ukryj natywne radio, ale zostaw dostępność */
.woocommerce-checkout input[type="radio"][name="dofinansowanie"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

/* Label jako kafelek */
.woocommerce-checkout input[type="radio"][name="dofinansowanie"] + label {
    display: flex !important;      /* nadpisuje inline display:inline */
    align-items: flex-start;
    gap: 10px;
    margin: 0 !important;          /* nadpisuje inline margin-right */
    padding: 12px 12px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #e5e5ec;
    cursor: pointer;
    line-height: 1.25;
    -webkit-tap-highlight-color: transparent; /* iPhone/Android */
    transition: transform .06s ease, box-shadow .12s ease, border-color .12s ease;
    user-select: none;
}

/* “Kropka” radiobuttona — pseudo-element */
.woocommerce-checkout input[type="radio"][name="dofinansowanie"] + label::before {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 2px solid #b8b8c6;
    margin-top: -1px;
    flex: 0 0 18px;
    background: #fff;
    box-sizing: border-box;
}

/* Hover (desktop) */
@media (hover: hover) and (pointer: fine) {
    .woocommerce-checkout input[type="radio"][name="dofinansowanie"] + label:hover {
        box-shadow: 0 6px 18px rgba(0,0,0,.06);
        border-color: #cfcfe0;
        transform: translateY(-1px);
    }
}

/* Focus (klawiatura / accessibility) */
.woocommerce-checkout input[type="radio"][name="dofinansowanie"]:focus-visible + label {
    outline: 3px solid rgba(0,0,0,.12);
    outline-offset: 2px;
}

/* Zaznaczone */
.woocommerce-checkout input[type="radio"][name="dofinansowanie"]:checked + label {
    border-color: var(--centrum-color-primary);
    box-shadow: 0 8px 22px rgba(0,0,0,.08);
}

/* Zaznaczona “kropka” */
.woocommerce-checkout input[type="radio"][name="dofinansowanie"]:checked + label::before {
    border-color: var(--centrum-color-primary);
    background: radial-gradient(circle at center, #f49e3e 0 55%, #fff 56% 100%);
}

/* RWD: na większych ekranach układ w 2 kolumnach */
@media (min-width: 640px) {
    .woocommerce-checkout span.woocommerce-input-wrapper:has(input[name="dofinansowanie"]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Bardzo małe ekrany — trochę mniejsze paddingi */
@media (max-width: 360px) {
    .woocommerce-checkout input[type="radio"][name="dofinansowanie"] + label {
        padding: 10px;
    }
}














/* INPUT - CHECKBOX STYLE */

/* ========== Custom checkbox tylko w checkout ========== */
.woocommerce-checkout input[type="checkbox"]{
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    padding: 0 !important;
    border: 2px solid rgba(0,0,0,.35);
    border-radius: .35rem;
    background: #fff;
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    vertical-align: middle;
    transition: transform .06s ease, border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

/* “ptaszek” */
.woocommerce-checkout input[type="checkbox"]::before{
    content: "";
    width: .75rem;
    height: .75rem;
    transform: scale(0);
    transition: transform .12s ease-in-out;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 18%, 80% 0, 43% 62%);
    background: #fff;
    display: block;
    margin: 5px;
}

/* zaznaczone */
.woocommerce-checkout input[type="checkbox"]:checked{
    background: #F18811;      /* kolor główny */
    border-color: #F18811;
}
.woocommerce-checkout input[type="checkbox"]:checked::before{
    transform: scale(1);
}

/* focus z klawiatury */
.woocommerce-checkout input[type="checkbox"]:focus-visible{
    outline: 3px solid rgba(241,136,17,.35);
    outline-offset: 3px;
}

/* hover (opcjonalnie) */
.woocommerce-checkout input[type="checkbox"]:hover{
    border-color: rgba(0,0,0,.55);
}

/* disabled */
.woocommerce-checkout input[type="checkbox"]:disabled{
    opacity: .55;
    cursor: not-allowed;
}



/* Zgody / terms – wyrównanie interlinii i wcięć */
.woocommerce-checkout label.woocommerce-form__label-for-checkbox,
.woocommerce-checkout label.checkbox{
    display: flex;
    align-items: flex-start;     /* checkbox do góry, tekst ma równe linie */
    gap: 2px;                   /* odstęp checkbox–tekst */
    line-height: 1.35;           /* stała interlinia */
    margin-bottom: 15px;
}






/* checkbox jako stała szerokość, bez wpływu na line-height */
.woocommerce-checkout label.woocommerce-form__label-for-checkbox > input[type="checkbox"],
.woocommerce-checkout label.checkbox > input[type="checkbox"]{
    flex: 0 0 22px;              /* stały rozmiar w flex */
    width: 22px;
    height: 22px;

    padding: 0;                  /* Twój reset */
    margin: 0;
    margin-top: -3px;         /* delikatne dociągnięcie do baseline tekstu */
    box-sizing: border-box;
}

/* tekst jako blok – dzięki temu kolejne linie startują równo jak pierwsza */
.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text{
    display: block;
    margin: 0;
}


















/* =========================================================
   WooCommerce Checkout – Payment methods radio (cards)
   Scope: .woocommerce-checkout .wc_payment_methods
   ========================================================= */

.woocommerce-checkout .wc_payment_methods {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

/* Każda metoda = kafelek */
.woocommerce-checkout .wc_payment_methods > li.wc_payment_method {
    margin: 0;
    padding: 12px 12px;
    border: 1px solid rgba(0,0,0,.14);
    border-radius: 12px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}

/* hover delikatny */
.woocommerce-checkout .wc_payment_methods > li.wc_payment_method:hover {
    border-color: rgba(0,0,0,.26);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
    transform: translateY(-1px);
}

/* Ustawiamy label jako "rząd": radio + tekst + ewentualne logo */
.woocommerce-checkout .wc_payment_methods > li.wc_payment_method > label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 3px 0 0 8px;
    cursor: pointer;
    line-height: 1.25;
}

/* Ukryj domyślny input (zostaje funkcjonalny) i robimy go custom */
.woocommerce-checkout .wc_payment_methods input[type="radio"].input-radio {
    -webkit-appearance: none;
    appearance: none;

    width: 18px;
    height: 18px;

    margin: 2px 0 0 0;
    padding: 0;

    border: 2px solid rgba(0,0,0,.28);
    border-radius: 999px;
    background: #fff;

    display: inline-grid;
    place-content: center;

    flex: 0 0 18px;
    min-width: 18px;
    min-inline-size: 18px;

    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .06s ease, background-color .15s ease;
}

/* Kropka w środku */
.woocommerce-checkout .wc_payment_methods input[type="radio"].input-radio::before {
    content: "";
    width: 11px;
    height: 11px;
    border-radius: 999px;
    transform: scale(0);
    transition: transform .12s ease-in-out;
    background: var(--centrum-color-primary);
}

/* checked */
.woocommerce-checkout .wc_payment_methods input[type="radio"].input-radio:checked {
    border-color: var(--centrum-color-primary);

}
.woocommerce-checkout .wc_payment_methods input[type="radio"].input-radio:checked::before {
    transform: scale(1);
}

/* focus keyboard */
.woocommerce-checkout .wc_payment_methods input[type="radio"].input-radio:focus-visible {
    outline: 3px solid rgba(241,136,17,.30);
    outline-offset: 3px;
}

/* Label: logo w jednej linii, max wysokość */
.woocommerce-checkout .wc_payment_methods > li.wc_payment_method > label img {
    max-height: 20px;
    width: auto;
    margin-left: 8px;
    vertical-align: middle;
    display: inline-block;
}

/* Active kafelek (gdy radio checked) – działa dzięki :has (nowe przeglądarki) */
.woocommerce-checkout .wc_payment_methods > li.wc_payment_method:has(> input[type="radio"].input-radio:checked) {
    border-color: var(--centrum-color-primary);

}

/* Fallback dla przeglądarek bez :has — Woo zwykle dodaje .woocommerce-info/.chosen itp.
   Jeśli u Ciebie klasa chosen się pojawia, to też złapie active kafelek. */
.woocommerce-checkout .wc_payment_methods > li.wc_payment_method.chosen,
.woocommerce-checkout .wc_payment_methods > li.wc_payment_method.woocommerce-checked {
    border-color: rgba(241,136,17,.65);
    box-shadow: 0 10px 26px rgba(0,0,0,.08);
}

/* Opis/metabox (payment_box) jako część kafelka */
.woocommerce-checkout .wc_payment_methods .payment_box {
    margin: 10px 0 0 0px; /* równo pod tekstem (22px radio + 12px gap) */
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(0,0,0,.03);
    border: 1px solid rgba(0,0,0,.07);
}

/* Teksty w payment_box */
.woocommerce-checkout .wc_payment_methods .payment_box p {
    margin: 0;
    line-height: 1.35;
}

/* =========================================================
   IMoje kanały (wewnątrz payment_box) – też jak radiokafelki
   ========================================================= */

.woocommerce-checkout .wc_payment_methods .imoje-channels {
    list-style: none;
    margin: 10px 0 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* pojedynczy kanał jako mini-kafelek */
.woocommerce-checkout .wc_payment_methods .imoje-channels li.imoje-channel label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.14);
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* ukryj radio imoje i zrób zaznaczenie po stanie labela */
.woocommerce-checkout .wc_payment_methods .imoje-channels li.imoje-channel label > input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* active (imoje dodaje klasy) */
.woocommerce-checkout .wc_payment_methods .imoje-channels li.imoje-channel label.imoje-active,
.woocommerce-checkout .wc_payment_methods .imoje-channels li.imoje-channel.imoje-c-active label {
    border-color: rgba(241,136,17,.65);
    box-shadow: 0 0 0 4px rgba(241,136,17,.18);
}

/* logo w kanale */
.woocommerce-checkout .wc_payment_methods .imoje-channels li.imoje-channel img {
    height: 26px;
    width: auto;
    display: block;
}

/* komunikat błędu imoje – mniej agresywnie */
.woocommerce-checkout .wc_payment_methods .imoje-pbl-error.woocommerce-error {
    margin: 10px 0 0 0;
    padding: 10px 12px;
    border-radius: 10px;
}







/* Wymusza wyświetlanie opisów zgód, nawet jeśli JS próbuje je ukryć */
#billing_zgody_regulamin-description,
#billing_zgody_marketing-description {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 0px;
    font-size: 12px;
    color: #666; /* Możesz dostosować kolor */

}

#billing_zgody_regulamin_field label,
#billing_zgody_marketing_field label {
    margin-bottom: 0;
}
/* Opcjonalnie: poprawienie odstępu pod checkboxem */
#billing_zgody_marketing-description .woocommerce-input-wrapper .description,
#billing_zgody_regulamin-description .woocommerce-input-wrapper .description {
    display: block !important;
    clear: both;
}

/* 1. Całkowite zablokowanie animacji zanikania dla opisów zgód */
#billing_zgody_regulamin-description,
#billing_zgody_marketing-description {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    opacity: 1 !important;
    transition: none !important; /* Wyłącza przejścia CSS */
    animation: none !important;  /* Wyłącza animacje klatkowe */
    overflow: visible !important;
}

/* 2. Zabezpieczenie kontenera nadrzędnego przed "skakaniem" wysokości */

.checkout-inline-error-message {
    color:#dc2626;
    font-size: 12px;
}

#billing_zgody_regulamin_field {
    margin-bottom: 20px !important;
}