/* ==========================================================================
   Sekcja newslettera – wygląd kontenerów i formularza
   ========================================================================== */

.newsletter-container-left {
    border-radius: 8px 0px 0px 8px;
    background-size: cover;
    background-position: center;
    min-height: 300px;
}

.newsletter-container-right {
    border-radius: 0px 8px 8px 0px;
    background-color: #E1E1E1;
    padding-left: 1.5rem;
    padding-top: 1.5rem;
}

.newsletter-container-right h3 {
    font: normal normal normal 56px/48px 'Italianno', cursive;
}

.newsletter-container-right p {
    margin-top: 1rem;
}

input[type=checkbox]:hover {
    cursor: pointer;
}

/* ============ Pretty modal for newsletter ============ */
.pretty-modal {
  --pink: #e3007b; /* dopasuj do koloru motywu, jeśli inny */
  border-radius: 1rem;
  box-shadow: 0 24px 70px rgba(0,0,0,.15);
  overflow: hidden;
  transform: translateZ(0);
  animation: pm-pop .24s ease-out;
}

@keyframes pm-pop {
  from { transform: scale(.96); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.pretty-modal .btn-close {
  z-index: 2;
  filter: invert(0.3);
  opacity: .5;
}
.pretty-modal .btn-close:hover { opacity: .8; }

.pretty-icon-wrap {
  width: 72px; height: 72px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(120% 120% at 30% 20%, rgba(227,0,123,.20) 0%, rgba(227,0,123,.08) 40%, rgba(227,0,123,.04) 100%);
}

.pretty-icon { display: none; }
.pretty-icon .ring {
  stroke: var(--pink);
  stroke-opacity: .35;
  stroke-width: 2;
}
.pretty-icon .mark {
  stroke: var(--pink);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.25;
}

.pretty-modal.variant-success .pretty-icon-success { display: block; }
.pretty-modal.variant-info    .pretty-icon-info    { display: block; }

.pretty-modal h5 { letter-spacing: .2px; }
.pretty-modal .btn.btn-pink {
  border-radius: .75rem;
  padding-top: .6rem; padding-bottom: .6rem;
}

/* Redukcja animacji, gdy użytkownik ogranicza ruch */
@media (prefers-reduced-motion: reduce) {
  .pretty-modal { animation: none; }
}