/* 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(200px, 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;
    }
}