:root {
    --sponsor-orange: #FD7E22;
    --sponsor-orange-hover: #d76b1d;
}

.bg-sponsor-orange {
    background-color: var(--sponsor-orange) !important;
    color: #fff !important;
}

.text-sponsor-orange {
    color: var(--sponsor-orange) !important;
}

.btn-sponsor-orange {
    background-color: var(--sponsor-orange);
    border-color: var(--sponsor-orange);
    color: #fff;
}

.btn-sponsor-orange:hover,
.btn-sponsor-orange:focus,
.btn-sponsor-orange:active {
    background-color: var(--sponsor-orange-hover);
    border-color: var(--sponsor-orange-hover);
    color: #fff;
}

.btn-outline-sponsor-orange {
    color: var(--sponsor-orange);
    border-color: var(--sponsor-orange);
}

.btn-outline-sponsor-orange:hover,
.btn-outline-sponsor-orange:focus,
.btn-outline-sponsor-orange.active {
    background-color: var(--sponsor-orange);
    border-color: var(--sponsor-orange);
    color: #fff;
}

.btn-check:checked + .btn-outline-sponsor-orange,
.btn-check:active + .btn-outline-sponsor-orange {
    background-color: var(--sponsor-orange);
    border-color: var(--sponsor-orange);
    color: #fff;
}

/* responsive rules */
@media (max-width: 380px) {
    /*#content {
        padding-left: 0px;
        padding-right: 0px;
    }*/
}

#amountSelector input[type="radio"] {
    display: none !important;
}

#amountSelector td {
    padding: .25rem;
}

.card {
    box-shadow: 0 0 .875rem 0 rgba(17,17,17,.15) !important;
}

#formSubmitButton {
    padding-top: 1.5px;
    padding-bottom: 1.5px;
    background-color: #a5c312;
}

#formSubmitButton:hover {
    background-color: #9eba13;
}

/* =========================================================================
   Reużywalny animowany komponent "flip card" (odwracana karta 3D).
   Używany m.in. w zakładce "Cele" (Goals) modułu NGO. Sterowany przez
   js/flip-card.js (dodaje klasę .is-flipped na .flip-card). Oba boki to
   natywne .card, więc tło/tekst/obramowanie dziedziczą z motywu
   (light.css / dark.css) - nie hardkodujemy kolorów.
   Komponent: templates/ngo/partials/_flip_card.html.
   ========================================================================= */
/* Siatka kart dopasowująca liczbę kolumn do dostępnej szerokości (bez sztywnej
   liczby kolumn): tyle kolumn, ile zmieści się przy zadanej minimalnej
   szerokości karty, reszta zawija się automatycznie. */
.flip-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
}

.flip-card {
    perspective: 1500px;
    background-color: transparent;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    /* Rozmiar karty o 1/4 mniejszy niż pierwotne 340px. */
    min-height: 255px;
    transition: transform .6s cubic-bezier(.4, .2, .2, 1);
    transform-style: preserve-3d;
}

.flip-card.is-flipped .flip-card-inner {
    transform: rotateY(180deg);
}

/* Oba boki nałożone na siebie i wypełniające wnętrze; ukryta tylna ściana
   dzięki backface-visibility. */
.flip-card-face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-card-back {
    transform: rotateY(180deg);
}

/* Treść wypełnia dostępną wysokość; długi opis przewija się w obrębie karty
   ("jednolite miejsce na dokładny opis"), a stopka z przyciskiem zostaje na dole. */
.flip-card-content {
    flex: 1 1 auto;
    overflow-y: auto;
}

/* Szanujemy systemową preferencję ograniczenia ruchu. */
@media (prefers-reduced-motion: reduce) {
    .flip-card-inner {
        transition: none;
    }
}

/* =========================================================================
   Układ Flexbox dla kart NGO (stałe zakładki / nawigacja i wewnętrznie
   przewijana treść w .custom-scrollbar). Zapobiega spóźnionemu reflow
   i kolizjom z rozwijanymi menu (UI-7).
   ========================================================================= */
.main {
    height: 100vh;
}
main#content.content {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
main#content > .container-fluid {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
main#content > .container-fluid > .row {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    min-height: 0;
}
main#content > .container-fluid > .row > .col-12 {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
main#content > .container-fluid > .row > .col-12 > .tab {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.custom-scrollbar {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* =========================================================================
   Listwa metod płatności pod przyciskiem "Przejdź do płatności"
   (#paymentTrustContainer w templates/ngo/donations/_form.html).

   Logotypy operatorów są w barwach marek i nie da się ich przemalować pod
   motyw (BLIK, Apple Pay i Revolut mają ciemny tusz #191c1f, Visa granat
   #1434CB) - na ciemnym tle karty (#222e3c) kontrast spada do ~1.0-1.8:1,
   czyli praktycznie znikają. Filtry CSS (invert) odpadają, bo zniszczyłyby
   barwy Mastercard/PayPal/gradientu BLIK-a, a osobne assety per motyw nie
   pomogłyby Visie ani Mastercard.

   Dlatego zamiast malować znaki - dajemy im jasne podłoże, ale takie, które
   samo dopasowuje się do karty pod spodem: półprzezroczysta biel zamiast
   koloru wybranego per motyw.

   NIE selektorem motywu. Kolor listwy NIE MOŻE zależeć od
   body[data-theme="dark"] ani od zmiennych motywu: switchTheme() w
   static/js/index.js podmienia wyłącznie href arkusza (#themeCss), a
   atrybut data-theme na <body> zostaje stary aż do przeładowania strony. Po
   przełączeniu na jasny mamy więc light.css + data-theme="dark" -
   selektor trafia, a --bs-gray-700 z light.css to #495057 i listwa robi się
   prawie czarna. Reguła oparta na alfie jest odporna na ten rozjazd, bo
   liczy się względem tego, co faktycznie jest namalowane pod spodem.

   Jak to wychodzi: 70% bieli na białej karcie jasnego motywu (#fff) daje
   czystą biel, czyli panel jest tam niewidoczny - i słusznie, bo biel to
   dokładnie to tło, pod które marki projektują logotypy. Ta sama reguła na
   karcie ciemnego motywu (#222e3c) daje #bdc0c5, czyli ~7.5:1 względem
   karty; dla porównania płaskie #f2f4f7 dawało ~12.5:1 i po prostu raziło.
   Wartość #bdc0c5 zgadza się co do bajtu z --bs-body-color ciemnego motywu,
   więc listwa nigdy nie jest jaśniejsza niż zwykły tekst na tej karcie.

   Gdzie jest dno, gdyby ktoś chciał zejść niżej (mniejsza alfa): NIE przy
   znakach jednobarwnych - tusz #191c1f (BLIK, Apple Pay, Revolut) ma na tym
   tle ~9.4:1, Google Pay #3C4043 ~5.7:1, granat Visy #1434CB ~4.8:1.
   Pierwsze wysiadają jasne plamy barwne: żółte koło Mastercard #F79E1B i
   błękit PayPala #009CDE, niskokontrastowe nawet na firmowej bieli (~1.9:1
   i ~2.8:1). Sprawdzone wizualnie: przy ~#adb7c5 koło Mastercard zaczyna
   znikać. To jest granica, nie próg 3:1 z WCAG.

   Ramka zostaje przezroczysta (metryki pudełka bez zmian) - krawędź panelu
   definiuje samo tło, a jakakolwiek ramka w kolorze byłaby widoczna na
   białej karcie, gdzie panelu nie chcemy.
   ========================================================================= */
.payment-marks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .625rem 1rem;
    padding: .625rem .75rem;
    border-radius: .5rem;
    background-color: rgba(255, 255, 255, .7);
    border: 1px solid transparent;
}

/* Wspólna wysokość znaku; szerokość wynika z proporcji viewBoxa. */
.payment-mark {
    height: 16px !important;
    width: auto !important;
    object-fit: contain;
}

/* Górne limity szerokości wyrównują optycznie znaki o skrajnych proporcjach
   (od 1.6:1 dla Mastercard do 4.5:1 dla Revolut) - przy `object-fit: contain`
   zadziałanie limitu proporcjonalnie zmniejsza szeroki wordmark, zamiast go
   zniekształcać. Wartości trzeba przeliczyć przy zmianie wysokości znaku. */
.payment-mark--blik { max-width: 36px !important; }
.payment-mark--visa { max-width: 52px !important; }
.payment-mark--mastercard { max-width: 28px !important; }
.payment-mark--google-pay { max-width: 43px !important; }
.payment-mark--apple-pay { max-width: 39px !important; }
.payment-mark--paypal { max-width: 59px !important; }
.payment-mark--revolut { max-width: 64px !important; }