/* Frontend popup styles */

/* ── Base popup structure ────────────────────────────────────────────── */

.wpukp-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
}

.wpukp-popup.wpukp-open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wpukp-body-locked {
  overflow: hidden !important;
}

/* ── Overlay ──────────────────────────────────────────────────────────── */

.wpukp-popup-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

.wpukp-no-overlay .wpukp-popup-overlay {
  background: transparent;
  pointer-events: none;
}

/* ── Dialog ───────────────────────────────────────────────────────────── */

.wpukp-popup-dialog {
  position: relative;
  z-index: 1;
  background: #fff;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Width variants ───────────────────────────────────────────────────── */

.wpukp-width-small  { max-width: 400px; width: 90%; }
.wpukp-width-medium { max-width: 600px; width: 90%; }
.wpukp-width-large  { max-width: 900px; width: 90%; }
.wpukp-width-full   { max-width: 95%;  width: 95%; }

/* ── Position variants ────────────────────────────────────────────────── */

.wpukp-position-center {
  align-items: center;
  justify-content: center;
}

.wpukp-position-top {
  align-items: flex-start;
  justify-content: center;
  padding-top: 5vh;
}

.wpukp-position-bottom {
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 5vh;
}

.wpukp-position-top-left {
  align-items: flex-start;
  justify-content: flex-start;
  padding: 20px;
}

.wpukp-position-top-right {
  align-items: flex-start;
  justify-content: flex-end;
  padding: 20px;
}

.wpukp-position-bottom-left {
  align-items: flex-end;
  justify-content: flex-start;
  padding: 20px;
}

.wpukp-position-bottom-right {
  align-items: flex-end;
  justify-content: flex-end;
  padding: 20px;
}

/* ── Animations ───────────────────────────────────────────────────────── */

.wpukp-animation-scale .wpukp-popup-dialog {
  animation: wpukp-scale-in 0.3s ease-out;
}

.wpukp-animation-fade .wpukp-popup-dialog {
  animation: wpukp-fade-in 0.3s ease-out;
}

.wpukp-animation-slide-top .wpukp-popup-dialog {
  animation: wpukp-slide-top-in 0.4s ease-out;
}

.wpukp-animation-slide-bottom .wpukp-popup-dialog {
  animation: wpukp-slide-bottom-in 0.4s ease-out;
}

@keyframes wpukp-scale-in {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

@keyframes wpukp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes wpukp-slide-top-in {
  from { transform: translateY(-50px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

@keyframes wpukp-slide-bottom-in {
  from { transform: translateY(50px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── Close button ─────────────────────────────────────────────────────── */

.wpukp-popup-close {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  opacity: 0.5;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.wpukp-popup-close:hover {
  opacity: 1;
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .wpukp-width-small,
  .wpukp-width-medium,
  .wpukp-width-large {
    max-width: 95%;
    width: 95%;
  }

  .wpukp-popup-dialog {
    max-height: 85vh;
  }

  .wpukp-position-top-left,
  .wpukp-position-top-right,
  .wpukp-position-bottom-left,
  .wpukp-position-bottom-right {
    padding: 10px;
  }
}