/* Ukrycie elementów z hidden niezależnie od motywu */


.auto-popup-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  z-index:100000;
}
.auto-popup-dialog{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  z-index:100001; outline:0;
}
.auto-popup-body{
  background:#fff; color:#121212;
  width:90%;
  max-width: 600px;
  overflow: hidden;
  border-radius:12px; 
  box-shadow:0 10px 40px rgba(0,0,0,.35);
   position:relative;
   padding-bottom:10px;

}
.auto-popup-close{
  position:absolute; top:7px; right:7px;
  padding:0px;
  border:0; background:#121212; color:#fff; width:32px; height:32px;
  border-radius:6px; cursor:pointer; font-size:15px; line-height:2px; z-index:100;
}
/* ========================================================= */
/* OSTATECZNE POPRAWKI CSS DLA ANIMACJI OVERLAY/DIALOG       */
/* ========================================================= */

.auto-popup-root[hidden] {
    display: none !important;
}

/* 1. Ustawienia bazowe i przejście */
.auto-popup-overlay,
.auto-popup-dialog {
    /* Upewniamy się, że mają przezroczystość i przejścia */
    opacity: 0 !important; /* WAŻNE: Wymuszamy start na 0 */
    transition: opacity 0.2s ease-in-out;
    pointer-events: none; 
}

/* 2. Stan OTWARTY (aktywacja Overlay) */
/* Używamy klasy na rodzicu, aby włączyć Overlay */
.auto-popup-root.is-open-root .auto-popup-overlay {
    opacity: 1 !important; /* WAŻNE: Wymuszamy widoczność */
    pointer-events: auto; /* Włączamy klikanie w tło */
    /* Upewniamy się, że overlay jest na górze, jeśli jest problem z z-index */
    z-index: 999; 
}

/* 3. Stan OTWARTY (aktywacja Dialog) */
/* Włączamy Dialog poprzez jego własną klasę */
.auto-popup-root.is-open-root .auto-popup-dialog.is-open {
    opacity: 1 !important; /* WAŻNE: Wymuszamy widoczność */
    pointer-events: auto; /* Włączamy interakcję wewnątrz */
    z-index: 1000; /* Zawsze nad overlayem */
}

/* 4. Stan ZAMYKANY (gwarantujemy powrót do 0) */
.auto-popup-root.is-closing .auto-popup-overlay,
.auto-popup-root.is-closing .auto-popup-dialog {
    opacity: 0 !important;
    pointer-events: none;
}
.auto-popup-close:after {  content: '\f00d';  font-family: 'Font Awesome 6 Solid'; color:#fff; width:32px; text-align: center; line-height: 32px; height:32px;}
.auto-popup-close:hover, .auto-popup-close:focus { background:#217830; color:#ff;}
.auto-popup-media img{ display:block;width:100%; height:auto;   }
.auto-popup-title{ padding: 15px; font-size:180%; margin:0px;}
.auto-popup-text p{ padding: 15px; margin:0px; padding-top:0px; }
.auto-popup-button{
  display:inline-block; margin-bottom: 15px; margin-left: 15px; padding:8px 15px;
  background:#217830; color:#fff; border-radius:8px; text-decoration:none; font-weight:600;
}
.auto-popup-button:hover, .auto-popup-button:focus { background:#121212 !important; color:#fff !important;}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.contrast  .auto-popup-body img { opacity:0.5 !important;}
.contrast .auto-popup-media img{ border-color:#121212;}
.contrast .auto-popup-body { background:#000 !important; color:#fff !important;}
.contrast .auto-popup-close, .contrast .auto-popup-button { background:#ff0 !important; color:#000 !important; opacity:1 !important}
.contrast .auto-popup-button:hover, .contrast .auto-popup-button:focus  { color:#000 !important; background:#fff !important;}
.contrast .auto-popup-close:after { color:#000 !important; opacity:1 !important}
.contrast .auto-popup-body { color:#fff !important;}
.contrast .auto-popup-close:hover, .contrast .auto-popup-close:focus { background:#fff !important; color:#000 !important;}