.bg-lightpurple {
    background-color: #aa8aee;
    color: white;
    font-size: 1em;
    padding: 15px !important;
    margin: 10px !important;
}

.bg-lightgreen {
    position: relative; /* Aby umożliwić pozycjonowanie absolutne tła */
    font-size: 1em;
    padding: 5px !important;
    margin: 5px !important;
}

.bg-lightgreen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: lightgreen;
    opacity: 0.2;
    z-index: 1; /* Ustawienie warstwy tła */
}

.bg-lightgreen > * {
    position: relative;
    z-index: 2; /* Ustawienie warstwy tekstu nad tłem */
    color: #0a67b0 !important; /* Kolor tekstu */
}

.bg-lightblue {
    position: relative; /* Aby umożliwić pozycjonowanie absolutne tła */
    font-size: 1em;
    padding: 15px !important;
    margin: 5px !important;
}

.bg-lightblue::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #3bb0e5;
    opacity: 0.2;
    z-index: 1; /* Ustawienie warstwy tła */
}

.bg-lightblue > * {
    position: relative;
    z-index: 2; /* Ustawienie warstwy tekstu nad tłem */
    color: #0a67b0 !important; /* Kolor tekstu */
}

.bg-lightgreenYellow {
    background-color: #e3d57b;
    color: white;
    font-size: 1em;
    padding: 15px !important;
    margin: 10px !important;
}


.text-black {
    color: black !important;
}

.text-white {
    color: white !important;
}

.hidden {
    display: none;
}

.equal-height-card, .equal-height-map {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card {
    margin-bottom: 20px;
}

@media (max-width: 767.98px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .card-header, .card-body, .card-footer {
        text-align: center;
    }

    .d-flex {
        flex-direction: column;
        align-items: center;
    }

    .h4 {
        font-size: 1.2em;
    }

    .pt-4, .pb-10 {
        padding-top: 1rem;
        padding-bottom: 2.5rem;
    }

    #map {
        height: 300px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 960px;
    }

    .equal-height-card {
        height: 100%;
    }

    .equal-height-map {
        height: 600px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }

    .row > .col-md-8, .row > .col-md-4 {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
}

/* Dodane nowe klasy CSS */
.no-margin-padding {
    margin: 0;
    padding: 0;
}

.card-container {
    display: none;
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999; /* Wysoki z-index, aby karta była na wierzchu */
    width: 90%; /* Dopasowanie szerokości kontenera kart */
    max-width: 500px; /* Maksymalna szerokość karty */
}

.ivory-background {
    background-color: ivory; /* Tło koloru kości słoniowej */
    padding: 20px; /* Opcjonalnie: dodanie odstępu wewnętrznego */
    border-radius: 10px; /* Opcjonalnie: zaokrąglenie rogów */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Opcjonalnie: dodanie cienia */
}

.ivory-background .card,
.ivory-background .card-header,
.ivory-background .card-body,
.ivory-background .card-footer {
    background-color: ivory;
}

.ivory2-background {
    background-color: #f1f1ee; /* Tło koloru kości słoniowej */
    padding: 20px; /* Opcjonalnie: dodanie odstępu wewnętrznego */
    border-radius: 10px; /* Opcjonalnie: zaokrąglenie rogów */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Opcjonalnie: dodanie cienia */
}

.ivory2-background .card,
.ivory2-background .card-header,
.ivory2-background .card-body,
.ivory2-background .card-footer {
    background-color: #f6f6f2;
}


/* neon glow + puls */
/* Neon NIE zmienia layoutu (glow na pseudo-elemencie) + puls, z prefixami */
.btnGreenPulse{
    position:relative;
    z-index:0;
    overflow:visible; /* gdyby coś klipowało */
    }

.btnGreenPulse::before{
    content:"";
    position:absolute;
    left:-10px; right:-10px; top:-10px; bottom:-10px;
    border-radius:inherit;
    pointer-events:none;

    opacity:.75;
    box-shadow:
            0 0 3px rgba(25,135,84,.9),
            0 0 6px rgba(25,135,84,.75),
            0 0 14px rgba(25,135,84,.55);

    -webkit-animation: neonPulseMercosur 1.25s ease-in-out infinite;
    animation: neonPulseMercosur 1.25s ease-in-out infinite;

    will-change: box-shadow, opacity, -webkit-filter, filter, transform;
    }

@-webkit-keyframes neonPulseMercosur{
    0%,100%{
        opacity:.55;
        box-shadow:
                0 0 4px rgba(25,135,84,.65),
                0 0 12px rgba(25,135,84,.55),
                0 0 24px rgba(25,135,84,.35);
        -webkit-filter: brightness(1.02) saturate(1.05);
        filter: brightness(1.02) saturate(1.05);
        -webkit-transform: translateZ(0) scale(1);
        transform: translateZ(0) scale(1);
        }
    50%{
        opacity:1;
        box-shadow:
                0 0 10px rgba(25,135,84,1),
                0 0 26px rgba(25,135,84,.9),
                0 0 52px rgba(25,135,84,.7);
        -webkit-filter: brightness(1.12) saturate(1.2);
        filter: brightness(1.12) saturate(1.2);
        -webkit-transform: translateZ(0) scale(1.01);
        transform: translateZ(0) scale(1.01);
        }
    }

@keyframes neonPulseMercosur{
    0%,100%{
        opacity:.55;
        box-shadow:
                0 0 4px rgba(25,135,84,.65),
                0 0 12px rgba(25,135,84,.55),
                0 0 24px rgba(25,135,84,.35);
        -webkit-filter: brightness(1.02) saturate(1.05);
        filter: brightness(1.02) saturate(1.05);
        -webkit-transform: translateZ(0) scale(1);
        transform: translateZ(0) scale(1);
        }
    50%{
        opacity:1;
        box-shadow:
                0 0 10px rgba(25,135,84,1),
                0 0 26px rgba(25,135,84,.9),
                0 0 52px rgba(25,135,84,.7);
        -webkit-filter: brightness(1.12) saturate(1.2);
        filter: brightness(1.12) saturate(1.2);
        -webkit-transform: translateZ(0) scale(1.01);
        transform: translateZ(0) scale(1.01);
        }
    }

/* accessibility */
@media (prefers-reduced-motion: reduce){
    .btnGreenPulse::before{
        -webkit-animation:none !important;
        animation:none !important;
        }
    }
/*BTN greenpulse END*/


/* === #OdzyskajMYKraków: bez „marginesów”, grupa na środku, ikony = wysokość paska === */
:root{ --odzk-bar-h:44px; }

/* usuń mt-2 tylko dla tej sekcji (masz dokładnie taki wrapper w twig) */
.row.g-0.mt-2{ margin-top:0 !important; }
.row.g-0.mt-2 .col-12.px-0{ padding-top:0 !important; padding-bottom:0 !important; }

#pomocOdzyskajMYKrakow{
    background:#003395 !important;
    border-color:#003395 !important;
    color:#fff !important;

    /* kasuje .btn{margin-top:5px} */
    margin:0 !important;

    /* zero „luzu” BS5 */
    padding:0 !important;
    line-height:0 !important;

    height:var(--odzk-bar-h) !important;
    min-height:var(--odzk-bar-h) !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    }

/* to Ci udawało „margines” (top/bottom -10px) */
#pomocOdzyskajMYKrakow.btnGreenPulse::before{
    display:none !important;
    }

#pomocOdzyskajMYKrakow,
#pomocOdzyskajMYKrakow *{
    color:#fff !important;
    }

/* JEDNA grupa na środku: [ikona][tekst][ikona] */
#pomocOdzyskajMYKrakow span{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:14px !important;
    line-height:1 !important;
    }

/* ikona lewa (odwrócona) */
#pomocOdzyskajMYKrakow span::before{
    content:"" !important;
    display:inline-block !important;
    width:var(--odzk-bar-h) !important;
    height:var(--odzk-bar-h) !important;

    background:url("/global_projects/marker-project-12.png") no-repeat center !important;
    background-size:120% 120% !important;   /* dociąga do krawędzi, ucina transparentny „luz” w PNG */
    transform:scaleX(-1);
    }

/* ikona prawa */
#pomocOdzyskajMYKrakow span::after{
    content:"" !important;
    display:inline-block !important;
    width:var(--odzk-bar-h) !important;
    height:var(--odzk-bar-h) !important;

    background:url("/global_projects/marker-project-12.png") no-repeat center !important;
    background-size:120% 120% !important;
    }

/* hover/active bez zmiany koloru */
#pomocOdzyskajMYKrakow:hover,
#pomocOdzyskajMYKrakow:focus,
#pomocOdzyskajMYKrakow:active{
    background:#003395 !important;
    border-color:#003395 !important;
    box-shadow:none !important;
    outline:none !important;
    }

/* 2px góra/dół TYLKO dla ikon, bez ruszania szerokości (X) */
:root{ --odzk-bar-h:44px; }

#pomocOdzyskajMYKrakow span::before,
#pomocOdzyskajMYKrakow span::after{
    height: calc(var(--odzk-bar-h) - 4px) !important; /* 2px top + 2px bottom */
    margin: 2px 0 !important;
    width: var(--odzk-bar-h) !important;             /* NIE ruszam X – zostaje jak było */
    background-size: contain !important;             /* bez rozciągania w X */
    background-position: center !important;
    }