/* Okienko z komunikatem (popup) — assets/includes/okienka.php, assets/scripts/okienka.js.
   Natywny <dialog>: warstwa nad stroną, Esc zamyka, fokus zostaje w okienku. */

.gok-okienko {
    width: min(560px, calc(100% - 32px));
    max-height: calc(100dvh - 48px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: #fff;
    color: #1f2a37;
    box-shadow: 0 24px 60px rgba(2, 9, 43, 0.35);
    overflow: auto;
    font-family: 'Poppins', Arial, sans-serif;
}
dialog.gok-okienko:not([open]) { display: none; }
.gok-okienko::backdrop { background: rgba(2, 9, 43, 0.55); }
html.gok-okienko-otwarte { overflow: hidden; }

.gok-okienko__karta { position: relative; }

.gok-okienko__obraz {
    display: block;
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: cover;
    border-radius: 14px 14px 0 0;
}

.gok-okienko__tekst { padding: 26px 28px 24px; }

.gok-okienko__podglad {
    margin: 0 0 14px;
    padding: 8px 12px;
    border-left: 4px solid #8A6A2B;
    background: #FEF4E5;
    font-size: 0.85rem;
    line-height: 1.4;
}

.gok-okienko__tytul {
    margin: 0 36px 12px 0;
    font-size: 1.45rem;
    line-height: 1.25;
    font-weight: 700;
    color: #24436E;
}

.gok-okienko__tresc p {
    margin: 0 0 10px;
    font-size: 1rem;
    line-height: 1.6;
    color: #1f2a37;
}

.gok-okienko__akcje {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.gok-okienko__przycisk,
.gok-okienko__zamknij {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 10px 22px;
    border-radius: 8px;
    font: inherit;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
}
.gok-okienko__przycisk {
    background: #2F6FA8;          /* biały tekst 5,4:1 */
    color: #fff;
    border: 2px solid #2F6FA8;
}
.gok-okienko__przycisk:hover { background: #24436E; border-color: #24436E; color: #fff; }
.gok-okienko__zamknij {
    background: #fff;
    color: #24436E;
    border: 2px solid #24436E;
}
.gok-okienko__zamknij:hover { background: #eef4fb; }

.gok-okienko__x {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.92);
    color: #1f2a37;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.gok-okienko__x:hover { background: #fff; color: #000; }

.gok-okienko :focus-visible {
    outline: 3px solid #ffb347;
    outline-offset: 2px;
}

/* Telefon: panel od dołu ekranu, treść strony nad nim nadal widać. */
@media (max-width: 600px) {
    .gok-okienko {
        width: 100%;
        max-width: 100%;
        max-height: 82dvh;
        margin: auto 0 0;
        border-radius: 16px 16px 0 0;
    }
    .gok-okienko__obraz { max-height: 20dvh; border-radius: 16px 16px 0 0; }
    .gok-okienko__tekst { padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); }
    .gok-okienko__tytul { font-size: 1.2rem; }
    .gok-okienko__akcje > * { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: no-preference) {
    .gok-okienko[open] { animation: gok-okienko-wejscie 0.22s ease-out; }
}
@keyframes gok-okienko-wejscie {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

/* Panel WCAG „Wysoki kontrast” (reszta kolorów przychodzi z reguł .high-contrast w styles.css). */
.high-contrast .gok-okienko { background: #000 !important; border: 2px solid #fff; }
.high-contrast .gok-okienko__przycisk,
.high-contrast .gok-okienko__zamknij,
.high-contrast .gok-okienko__x { border: 2px solid #ff0 !important; }