/**
 * K2 Popup - Full CSS (Mobile-First)
 * ---------------------------------------------------------------------
 * Lightweight, responsive popup/modal with backdrop, close icon, and
 * animations. Designed mobile-first: fullscreen on mobile, centered
 * with max dimensions on larger screens.
 * ---------------------------------------------------------------------
 */

/* ============================
   Base Styles (Mobile-First)
============================ */
.k2-popup {
  position: fixed;
  inset: 0;
  display: flex;               /* enable flex centering */
  justify-content: center;     /* horizontal centering */
  align-items: center;         /* vertical centering */
  z-index: var(--k2-z-modal, 4000);
  overflow: hidden;
  pointer-events: none;        /* disable clicks until active */
}

.k2-popup.active {
  pointer-events: auto;        /* enable interaction */
}

.k2-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.k2-popup.active .k2-popup-backdrop {
  opacity: 1;
}

.k2-popup-inner {
  width: 100%;
  height: 100vh;               /* full screen on mobile */
  max-width: none;
  max-height: none;
  border-radius: 0;
  background: var(--k2-bg-light, #fff);
  box-shadow: 0 0 0 transparent; /* no shadow on mobile */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.9);
  opacity: 0;
  transition: all 0.25s ease;
  position: relative;
  z-index: 2;                  /* above backdrop */
}

/* Popup Content */
.k2-popup-content {
  flex: 1;                     /* fill available height */
  display: flex;
  flex-direction: column;
  width: 100%;
}

.k2-popup-content iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Close Button */
.k2-popup-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  font-size: 2rem;
  color: var(--k2-color-dark, #222);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
  z-index: 3;
}

.k2-popup-close:hover {
  color: var(--k2-color-accent, #000);
  transform: scale(1.2);
}

/* Animations */
.k2-popup-anim-zoom.active .k2-popup-inner { transform: scale(1); opacity: 1; }
.k2-popup-anim-fade.active .k2-popup-inner { transform: none; opacity: 1; }
.k2-popup-anim-slide-up.active .k2-popup-inner { transform: translateY(0); opacity: 1; }
.k2-popup-anim-slide-up .k2-popup-inner { transform: translateY(40px); opacity: 0; }

/* ============================
   Big Screens (Overrides)
============================ */
@media (min-width: 769px) {
  .k2-popup-inner {
    width: 90%;
    max-width: 800px;           /* constrain width */
    max-height: 90vh;           /* constrain height */
    min-height: 90vh;
    border-radius: var(--k2-radius-lg, 12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); /* shadow for desktop */
    height: auto;               /* allow inner height to grow */
    overflow: hidden;           /* hide overflow inside popup */
    display: flex;
    flex-direction: column;
  }

  .k2-popup-content {
    flex: 1 1 auto;             /* fill inner height */
    overflow: auto;             /* scroll if content exceeds height */
  }
}