/* ... contents of tinyvast/tinyvast.css ... */ 

/* TinyAds Animation Library */

/* Animation Classes - All animations play once and stop for better user experience */

.ad-animate-wiggle {
    animation: wiggle 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
}

.ad-animate-vibrate {
    animation: vibrate 0.6s ease-in-out forwards;
}

.ad-animate-spin {
    animation: spin 1.5s ease-out forwards;
}

@keyframes wiggle {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

@keyframes vibrate {
  0% { transform: translate(0); }
  25% { transform: translate(-2px, 2px); }
  50% { transform: translate(-2px, -2px); }
  75% { transform: translate(2px, 2px); }
  100% { transform: translate(0); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ========================================
   GENERIC AD CONTAINER STYLES
   ======================================== */

/* Base ad container styles - reusable across all apps */
.display-ad-container,
.vast-ad-container {
    margin: 10px 0;
    text-align: center;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Ad content styling - ensures proper scaling */
.vast-ad-container .ad-content,
.display-ad-container .ad-content {
    width: 100%;
    height: 100%;
    display: block;
}

/* VAST ad content scaling */
.vast-ad-container .ad-content video,
.vast-ad-container .ad-content iframe {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Display ad content scaling */
.display-ad-container .ad-content img,
.display-ad-container .ad-content iframe {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Ad loading state */
.display-ad-container:empty::before,
.vast-ad-container:empty::before {
    content: "Loading ad...";
    color: #6c757d;
    font-size: 12px;
}

/* Common ad size variations */
.display-ad-container[data-ad-size="300x250"] {
    width: 300px;
    height: 250px;
}

.display-ad-container[data-ad-size="250x250"] {
    width: 250px;
    height: 250px;
}

.display-ad-container[data-ad-size="160x600"] {
    width: 160px;
    height: 600px;
}

.vast-ad-container[data-ad-size="640x360"] {
    width: 100%;
    max-width: 640px;
    height: 360px;
}

.vast-ad-container[data-ad-size="970x250"] {
    width: 100%;
    max-width: 970px;
    height: 250px;
}

.vast-ad-container[data-ad-size="728x90"] {
    width: 100%;
    max-width: 728px;
    height: 90px;
}

.vast-ad-container[data-ad-size="320x50"] {
    width: 100%;
    max-width: 320px;
    height: 50px;
}

/* ========================================
   [lnn_ad] SHORTCODE CONTAINER
   ========================================
   The [lnn_ad size="WxH"] shortcode renders an empty <div class="lnn-ad-shortcode">
   that AdButler populates with an <img> (or sometimes <iframe>) sized at the
   creative's native dimensions. Without these rules, themes that apply a
   global `img { max-width: 100% }` shrink the width on mobile but leave the
   height attribute at its native value — producing the classic "squashed"
   billboard look. `height: auto !important` restores aspect-ratio scaling
   from the width/height HTML attributes. */
.lnn-ad-shortcode {
    max-width: 100%;
    margin: 0 auto;
}
.lnn-ad-shortcode img,
.lnn-ad-shortcode iframe {
    max-width: 100%;
    height: auto !important;
}

/* ========================================
   INTERSTITIAL + SIDEDOOR STYLES
   ======================================== */

.tinyads-interstitial-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    /* Hidden on insert; .is-visible triggers the fade-in once ad creative is sized. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 220ms ease-out, visibility 0s linear 220ms;
}

.tinyads-interstitial-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 220ms ease-out, visibility 0s linear 0s;
}

.tinyads-interstitial-panel {
    position: relative;
    width: 100%;
    max-width: 970px;
    max-height: 90vh;
    overflow: auto;
    background: #D6D9DB;
    border: 1px solid #FF8200;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tinyads-interstitial-ad {
    width: 100%;
    min-height: 50px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tinyads-close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    font-size: 20px;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
}

.tinyads-interstitial-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border: 1px solid #FF8200;
    background: #4B4F54;
    font-size: 24px;
    line-height: 34px;
    z-index: 2;
}

.tinyads-sidedoor {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2147482999;
    width: min(320px, 92vw);
    min-height: 100px;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    padding: 12px;
}

.tinyads-sidedoor-left {
    left: 8px;
}

.tinyads-sidedoor-right {
    right: 8px;
}

.tinyads-sidedoor-ad {
    width: 100%;
    min-height: 50px;
}

@media (max-width: 768px) {
    .tinyads-sidedoor {
        top: auto;
        bottom: 8px;
        left: 8px;
        right: 8px;
        width: auto;
        transform: none;
    }

    .tinyads-sidedoor-left,
    .tinyads-sidedoor-right {
        left: 8px;
        right: 8px;
    }
}