/**
 * @file
 * Modal ad popup (custom). Self-contained styles, independent of the theme.
 *
 * Breakpoints:
 *   >= 768px          image left, text right
 *   < 768px           stacked: image on top (max 40% of screen height)
 *   landscape phones  side by side, compact
 *
 * Small mode (.modal-ad-popup-corner): 150×150 px bottom left,
 * 110×110 px below 480px.
 */

html.modal-ad-popup-open,
html.modal-ad-popup-open body {
  overflow: hidden !important;
}

.modal-ad-popup {
  --map-pad: clamp(12px, 3vw, 32px);
  --map-radius: 14px;

  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--map-pad);
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

.modal-ad-popup.is-visible {
  opacity: 1;
}

.modal-ad-popup,
.modal-ad-popup *,
.modal-ad-popup *::before,
.modal-ad-popup *::after {
  box-sizing: border-box;
}

/* Dialog ------------------------------------------------------------- */

.modal-ad-popup .modal-ad-popup__dialog {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: min(960px, 100%);
  max-height: calc(100vh - 2 * var(--map-pad));
  max-height: calc(100dvh - 2 * var(--map-pad));
  margin: 0;
  overflow: hidden;
  border-radius: var(--map-radius);
  background: var(--map-bg, #fff);
  color: var(--map-fg, #1a1a1a);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
  transform: translateY(12px) scale(0.98);
  transition: transform 0.25s ease;
}

.modal-ad-popup.is-visible .modal-ad-popup__dialog {
  transform: none;
}

.modal-ad-popup .modal-ad-popup__dialog:focus {
  outline: none;
}

/* Image -------------------------------------------------------------- */

.modal-ad-popup .modal-ad-popup__media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: var(--map-bg, #fff);
}

.modal-ad-popup .modal-ad-popup__image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 2 * var(--map-pad));
  max-height: calc(100dvh - 2 * var(--map-pad));
  margin: 0;
  border: 0;
  object-fit: contain;
}

/* Text --------------------------------------------------------------- */

.modal-ad-popup .modal-ad-popup__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  min-width: 0;
  min-height: 0;
  padding: clamp(24px, 4vw, 48px);
  padding-top: clamp(56px, 6vw, 64px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.modal-ad-popup .modal-ad-popup__heading {
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  font-family: inherit;
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
}

.modal-ad-popup .modal-ad-popup__text {
  color: inherit;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  overflow-wrap: anywhere;
}

.modal-ad-popup .modal-ad-popup__text > :first-child {
  margin-top: 0;
}

.modal-ad-popup .modal-ad-popup__text > :last-child {
  margin-bottom: 0;
}

.modal-ad-popup .modal-ad-popup__text p,
.modal-ad-popup .modal-ad-popup__text ul,
.modal-ad-popup .modal-ad-popup__text ol {
  margin: 0 0 0.75em;
  color: inherit;
}

.modal-ad-popup .modal-ad-popup__text ul,
.modal-ad-popup .modal-ad-popup__text ol {
  padding-left: 1.25em;
}

.modal-ad-popup .modal-ad-popup__text a {
  color: inherit;
  text-decoration: underline;
}

.modal-ad-popup .modal-ad-popup__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 48px;
  margin: 0.25rem 0 0;
  padding: 0.75em 1.75em;
  border: 2px solid var(--map-fg, #1a1a1a);
  border-radius: 999px;
  background: var(--map-fg, #1a1a1a);
  color: var(--map-bg, #fff);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.modal-ad-popup .modal-ad-popup__button:hover,
.modal-ad-popup .modal-ad-popup__button:focus-visible {
  background: transparent;
  color: var(--map-fg, #1a1a1a);
  text-decoration: none;
}

/* Close (X) – always high contrast regardless of background ------------ */

.modal-ad-popup .modal-ad-popup__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #111;
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.modal-ad-popup .modal-ad-popup__close:hover {
  background: #000;
  transform: scale(1.08);
}

.modal-ad-popup .modal-ad-popup__close:focus-visible,
.modal-ad-popup .modal-ad-popup__button:focus-visible {
  outline: 3px solid #4c9aff;
  outline-offset: 3px;
}

.modal-ad-popup .modal-ad-popup__close svg {
  display: block;
  width: 24px;
  height: 24px;
  pointer-events: none;
}

/* Large screens ------------------------------------------------------ */

@media (min-width: 1440px) {
  .modal-ad-popup .modal-ad-popup__dialog {
    width: min(1100px, 100%);
  }
}

/* Mobile: stack image above text ------------------------------------- */

@media (max-width: 767.98px) {
  .modal-ad-popup {
    --map-pad: 12px;
    --map-radius: 12px;
  }

  .modal-ad-popup .modal-ad-popup__dialog {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    width: min(520px, 100%);
  }

  .modal-ad-popup .modal-ad-popup__image {
    width: 100%;
    max-height: 40vh;
    max-height: 40dvh;
  }

  .modal-ad-popup .modal-ad-popup__content {
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 20px 20px 24px;
  }

  .modal-ad-popup .modal-ad-popup__button {
    align-self: stretch;
  }

  .modal-ad-popup .modal-ad-popup__close {
    top: 8px;
    right: 8px;
  }
}

/* Landscape phones: side by side, compact ---------------------------- */

@media (max-height: 520px) and (orientation: landscape) {
  .modal-ad-popup {
    --map-pad: 8px;
  }

  .modal-ad-popup .modal-ad-popup__dialog {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    grid-template-rows: none;
    width: min(860px, 100%);
  }

  .modal-ad-popup .modal-ad-popup__image {
    max-height: calc(100dvh - 2 * var(--map-pad));
  }

  .modal-ad-popup .modal-ad-popup__content {
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 16px 64px 16px 20px;
  }

  .modal-ad-popup .modal-ad-popup__heading {
    font-size: 1.25rem;
  }

  .modal-ad-popup .modal-ad-popup__button {
    align-self: flex-start;
  }
}

/* Small mode: corner image ------------------------------------------- */

.modal-ad-popup-corner {
  --map-corner: 150px;

  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 2147483000;
  width: var(--map-corner);
  height: var(--map-corner);
  margin: 0;
  padding: 0;
  border-radius: 12px;
  background: var(--map-bg, #fff);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.modal-ad-popup-corner.is-visible {
  opacity: 1;
  transform: none;
}

.modal-ad-popup-corner,
.modal-ad-popup-corner * {
  box-sizing: border-box;
}

.modal-ad-popup-corner .modal-ad-popup-corner__link {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  text-decoration: none;
}

.modal-ad-popup-corner .modal-ad-popup-corner__image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: inherit;
  object-fit: contain;
}

.modal-ad-popup-corner .modal-ad-popup-corner__close {
  position: absolute;
  top: -12px;
  right: -12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #111;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* Larger invisible touch target (44px) around the small X. */
.modal-ad-popup-corner .modal-ad-popup-corner__close::after {
  content: "";
  position: absolute;
  inset: -6px;
}

.modal-ad-popup-corner .modal-ad-popup-corner__close:hover {
  background: #000;
}

.modal-ad-popup-corner .modal-ad-popup-corner__link:focus-visible,
.modal-ad-popup-corner .modal-ad-popup-corner__close:focus-visible {
  outline: 3px solid #4c9aff;
  outline-offset: 3px;
}

.modal-ad-popup-corner .modal-ad-popup-corner__close svg {
  display: block;
  width: 16px;
  height: 16px;
  pointer-events: none;
}

@media (max-width: 479.98px) {
  .modal-ad-popup-corner {
    --map-corner: 110px;

    left: max(12px, env(safe-area-inset-left));
    bottom: max(12px, env(safe-area-inset-bottom));
  }
}

/* Motion & forced colors -------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .modal-ad-popup,
  .modal-ad-popup .modal-ad-popup__dialog,
  .modal-ad-popup .modal-ad-popup__close,
  .modal-ad-popup .modal-ad-popup__button,
  .modal-ad-popup-corner {
    transition: none;
    transform: none;
  }
}

@media (forced-colors: active) {
  .modal-ad-popup .modal-ad-popup__close,
  .modal-ad-popup .modal-ad-popup__dialog,
  .modal-ad-popup-corner {
    border: 2px solid CanvasText;
  }
}