/* Advertising Platform - Public UI (Revamp v2)
   Used for advertise flow pages (shortcode output is typically wrapped in .ap-wrap-frontend)
*/
.ap-wrap-frontend{ background: transparent; }

/* --- Ad slot output (shortcodes / theme hooks) --- */
.ap-ad{
  max-width: 100%;
  margin: 12px 0;
}

.ap-ad a{
  display:block;
  max-width:100%;
}

.ap-ad img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(15,23,42,.12);
  transition: transform .18s ease, box-shadow .18s ease, opacity .25s ease;
}

.ap-ad a:hover img{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(15,23,42,.16);
}

/* Slot container */
.ap-ad-slot{ 
  width: 100%;
  max-width: 100%;
  position: relative;
}

/* Stack rotation (fade) */
.ap-ad-slot[data-rotation="stack"]{
  overflow: hidden;
}
.ap-ad-slot[data-rotation="stack"] .ap-ad{
  margin: 0;
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.ap-ad-slot[data-rotation="stack"] .ap-ad.is-active{
  opacity: 1;
  pointer-events: auto;
}

/* Animation variables (set inline on slot) */
.ap-ad-slot{ 
  --ap-anim-duration: 600ms;
  --ap-anim-ease: ease;
}

/* Fade (default) */
.ap-ad-slot.ap-anim-fade[data-rotation="stack"] .ap-ad{ 
  transition: opacity var(--ap-anim-duration) var(--ap-anim-ease);
}

/* Slide / Zoom / Flip / Rotate / Bounce entrance animations for the active creative */
.ap-ad-slot[data-rotation="stack"] .ap-ad.is-active{
  animation-duration: var(--ap-anim-duration);
  animation-timing-function: var(--ap-anim-ease);
}

.ap-ad-slot.ap-anim-slide_left[data-rotation="stack"] .ap-ad.is-active{ animation-name: apInSlideLeft; }
.ap-ad-slot.ap-anim-slide_right[data-rotation="stack"] .ap-ad.is-active{ animation-name: apInSlideRight; }
.ap-ad-slot.ap-anim-slide_up[data-rotation="stack"] .ap-ad.is-active{ animation-name: apInSlideUp; }
.ap-ad-slot.ap-anim-slide_down[data-rotation="stack"] .ap-ad.is-active{ animation-name: apInSlideDown; }
.ap-ad-slot.ap-anim-zoom_in[data-rotation="stack"] .ap-ad.is-active{ animation-name: apInZoomIn; }
.ap-ad-slot.ap-anim-zoom_out[data-rotation="stack"] .ap-ad.is-active{ animation-name: apInZoomOut; }
.ap-ad-slot.ap-anim-flip[data-rotation="stack"] .ap-ad.is-active{ animation-name: apInFlip; transform-origin: center; }
.ap-ad-slot.ap-anim-rotate[data-rotation="stack"] .ap-ad.is-active{ animation-name: apInRotate; transform-origin: center; }
.ap-ad-slot.ap-anim-bounce[data-rotation="stack"] .ap-ad.is-active{ animation-name: apInBounce; }

.ap-ad-slot.ap-anim-none[data-rotation="stack"] .ap-ad.is-active{ animation-name: none; }

@keyframes apInSlideLeft{ from{ transform: translateX(20px); opacity:0; } to{ transform: translateX(0); opacity:1; } }
@keyframes apInSlideRight{ from{ transform: translateX(-20px); opacity:0; } to{ transform: translateX(0); opacity:1; } }
@keyframes apInSlideUp{ from{ transform: translateY(20px); opacity:0; } to{ transform: translateY(0); opacity:1; } }
@keyframes apInSlideDown{ from{ transform: translateY(-20px); opacity:0; } to{ transform: translateY(0); opacity:1; } }
@keyframes apInZoomIn{ from{ transform: scale(.96); opacity:0; } to{ transform: scale(1); opacity:1; } }
@keyframes apInZoomOut{ from{ transform: scale(1.04); opacity:0; } to{ transform: scale(1); opacity:1; } }
@keyframes apInFlip{ from{ transform: perspective(800px) rotateY(70deg); opacity:0; } to{ transform: perspective(800px) rotateY(0deg); opacity:1; } }
@keyframes apInRotate{ from{ transform: rotate(-4deg) scale(.98); opacity:0; } to{ transform: rotate(0deg) scale(1); opacity:1; } }
@keyframes apInBounce{
  0%{ transform: translateY(16px); opacity:0; }
  60%{ transform: translateY(-6px); opacity:1; }
  100%{ transform: translateY(0); opacity:1; }
}

/* Avoid any accidental horizontal overflow from long URLs or injected markup */
.ap-ad, .ap-ad *{
  max-width:100%;
  box-sizing:border-box;
  overflow-wrap:anywhere;
}

/* ------------------------------------------------------------------
   WCIS Patch: Stack rotation must never show more than 1 creative.
   Some themes add mobile-specific CSS that overrides positioning/opacity
   causing multiple creatives to render in normal flow on small screens.
   These rules harden STACK mode to always show ONLY .is-active.
------------------------------------------------------------------- */

/* Harden stack mode globally (prevents theme overrides) */
.ap-ad-slot[data-rotation="stack"] .ap-ad{
  margin: 0 !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.ap-ad-slot[data-rotation="stack"] .ap-ad.is-active{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}

/* Extra safety on mobile viewports */
@media (max-width: 768px){
  .ap-ad-slot[data-rotation="stack"]{
    position: relative !important;
    overflow: hidden !important;
  }
  .ap-ad-slot[data-rotation="stack"] .ap-ad{
    display: block !important;
  }
}


/* ------------------------------------------------------------
   Creative Fit / Auto-crop (per slot)
   - Uses slot size to lock aspect ratio (prevents layout jumps)
   - Fit mode controls how the image fills the slot box
------------------------------------------------------------- */
.ap-ad-slot{
  /* When provided inline: --ap-slot-ar: 3.88 */
  aspect-ratio: var(--ap-slot-ar);
}

/* Ensure the creative fills the slot box when aspect-ratio is active */
.ap-ad-slot .ap-ad,
.ap-ad-slot .ap-ad a,
.ap-ad-slot .ap-ad img{
  width:100% !important;
  height:100% !important;
  display:block;
}

/* Default behaviour for sites that don't set slot ratio */
.ap-ad-slot:not([style*="--ap-slot-ar"]) .ap-ad img{
  height:auto !important;
}

/* Fit modes */
.ap-ad-slot.ap-fit-contain .ap-ad img{
  object-fit: contain;
  background: transparent;
}
.ap-ad-slot.ap-fit-cover .ap-ad img{
  object-fit: cover;
  background: transparent;
}