/**
 * AdLogic Sticky Ads Styles - Consolidated Version
 * 
 * Structure:
 * 1. CSS Custom Properties
 * 2. Base Container Styles
 * 3. Content and Slot Styles
 * 4. Size Definitions
 * 5. Position Variants
 * 6. Close Button Styles
 * 7. Progress Bar and Timer
 * 8. Animations
 * 9. Mobile Overrides
 * 10. Utility Classes and States
 * 11. GPT/Google Ads Fixes
 * 12. Accessibility and Print Styles
 */

/* ========================================
   1. CSS CUSTOM PROPERTIES
   ======================================== */
:root {
    /* Animation timings */
    --sticky-animation-duration: 0.6s;
    --sticky-animation-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* Spacing and sizing */
    --sticky-border-width: 1px;
    --sticky-progress-height: 20px;
    --sticky-close-size: 30px;
    --sticky-mobile-spacing: 10px;
    
    /* Z-index layers - Middle layer (above display, below interstitial) */
    --sticky-z-base: 10000;
    --sticky-z-content: 10001;
    --sticky-z-close: 10003;
    --sticky-z-progress: 10002;
}

/* ========================================
   2. BASE CONTAINER STYLES
   ======================================== */
.adlogic-sticky-ad {
    position: fixed;
    background: #fff;
    border: var(--sticky-border-width) solid #ddd;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: var(--sticky-z-base);
    display: block;
    visibility: visible;
    transition: all var(--sticky-animation-duration) var(--sticky-animation-easing);
    transform-origin: center center;
    overflow: hidden;
    box-sizing: border-box;
    will-change: transform, opacity;
    border-radius: 6px;
}

/* Prevent body scrolling issues on mobile */
body.adlogic-sticky-active {
    padding-bottom: 120px;
}

/* ========================================
   3. CONTENT AND SLOT STYLES
   ======================================== */
.adlogic-sticky-content {
    position: relative;
    z-index: var(--sticky-z-content);
    width: 100%;
    overflow: hidden;
    border-radius: 6px;
    background: #fff;
    display: block;
}

.adlogic-sticky-content .adlogic-ad-slot {
    width: 100%;
    position: relative;
    display: block;
    overflow: hidden;
}

/* ========================================
   4. SIZE DEFINITIONS
   ======================================== */
/* Desktop sizes */
.adlogic-sticky-ad[data-size="728x90"] {
    --ad-width: 728px;
    --ad-height: 90px;
    width: calc(var(--ad-width) + 2 * var(--sticky-border-width));
    height: calc(var(--ad-height) + var(--sticky-progress-height) + 2 * var(--sticky-border-width));
}

.adlogic-sticky-ad[data-size="970x90"] {
    --ad-width: 970px;
    --ad-height: 90px;
    width: calc(var(--ad-width) + 2 * var(--sticky-border-width));
    height: calc(var(--ad-height) + var(--sticky-progress-height) + 2 * var(--sticky-border-width));
}

.adlogic-sticky-ad[data-size="468x60"] {
    --ad-width: 468px;
    --ad-height: 60px;
    width: calc(var(--ad-width) + 2 * var(--sticky-border-width));
    height: calc(var(--ad-height) + var(--sticky-progress-height) + 2 * var(--sticky-border-width));
}

/* Mobile sizes */
.adlogic-sticky-ad[data-size="320x50"] {
    --ad-width: 320px;
    --ad-height: 50px;
    width: calc(var(--ad-width) + 2 * var(--sticky-border-width));
    height: calc(var(--ad-height) + var(--sticky-progress-height) + 2 * var(--sticky-border-width));
}

.adlogic-sticky-ad[data-size="320x100"] {
    --ad-width: 320px;
    --ad-height: 100px;
    width: calc(var(--ad-width) + 2 * var(--sticky-border-width));
    height: calc(var(--ad-height) + var(--sticky-progress-height) + 2 * var(--sticky-border-width));
}

/* Square and rectangle sizes */
.adlogic-sticky-ad[data-size="300x250"] {
    --ad-width: 300px;
    --ad-height: 250px;
    width: calc(var(--ad-width) + 2 * var(--sticky-border-width));
    height: calc(var(--ad-height) + var(--sticky-progress-height) + 2 * var(--sticky-border-width));
}

.adlogic-sticky-ad[data-size="250x250"] {
    --ad-width: 250px;
    --ad-height: 250px;
    width: calc(var(--ad-width) + 2 * var(--sticky-border-width));
    height: calc(var(--ad-height) + var(--sticky-progress-height) + 2 * var(--sticky-border-width));
}

.adlogic-sticky-ad[data-size="336x280"] {
    --ad-width: 336px;
    --ad-height: 280px;
    width: calc(var(--ad-width) + 2 * var(--sticky-border-width));
    height: calc(var(--ad-height) + var(--sticky-progress-height) + 2 * var(--sticky-border-width));
}

/* ========================================
   5. POSITION VARIANTS
   ======================================== */
/* Animation for sticky containers appearing */
@keyframes stickySlideInBottom {
    from {
        transform: translateX(-50%) translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

@keyframes stickySlideInTop {
    from {
        transform: translateX(-50%) translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

/* Apply animation when sticky container loads */
.adlogic-sticky-container[data-ad-loaded="true"][data-position="bottom"] {
    animation: stickySlideInBottom 0.6s ease-out;
}

.adlogic-sticky-container[data-ad-loaded="true"][data-position="top"] {
    animation: stickySlideInTop 0.6s ease-out;
}


/* ========================================
   6. CLOSE BUTTON STYLES
   ======================================== */
.adlogic-sticky-close {
    position: absolute;
    width: var(--sticky-close-size);
    height: var(--sticky-close-size);
    background: #fff;
    color: #666;
    border: 2px solid linear-gradient(135deg, rgba(102, 126, 234, 0.7) 0%, rgba(118, 75, 162, 0.7) 1%);
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: var(--sticky-z-close);
    padding: 0;
    margin: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    outline: none;
    touch-action: manipulation;
}

/* X mark inside close button */
.adlogic-sticky-close::before,
.adlogic-sticky-close::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 2.5px;
    background: #666;
    border-radius: 2px;
}

.adlogic-sticky-close::before {
    transform: rotate(45deg);
}

.adlogic-sticky-close::after {
    transform: rotate(-45deg);
}

.adlogic-sticky-close:hover {
    background: #f0f0f0;
    border-color: #999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.adlogic-sticky-close:active {
    background: #e0e0e0;
}

/* Close button positions */
.adlogic-sticky-close.top-right {
    top: 0px;
    right: 0px;
}

.adlogic-sticky-close.top-left {
    top: 8px;
    left: 8px;
}

.adlogic-sticky-close.bottom-right {
    bottom: 8px;
    right: 8px;
}

.adlogic-sticky-close.bottom-left {
    bottom: 8px;
    left: 8px;
}

/* ========================================
   7. PROGRESS BAR AND TIMER
   ======================================== */
.adlogic-sticky-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--sticky-progress-height);
    background: #f0f0f0;
    z-index: var(--sticky-z-progress);
    overflow: hidden;
    border-radius: 6px;
}

.adlogic-sticky-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #4CAF50 0%, #45a049 100%);
    transition: none; /* Remove transition to allow JS animation */
    width: 0;
    will-change: width;
}

.adlogic-sticky-timer {
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: white;
    background: rgba(0, 0, 0, 0.8);
    padding: 3px 10px;
    border-radius: 12px;
    z-index: calc(var(--sticky-z-progress) + 5);
    font-weight: 600;
    border: 1px solid rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.adlogic-sticky-timer.show {
    opacity: 1;
}

/* Timer adjustments for small ads */
.adlogic-sticky-ad[data-size="320x50"] .adlogic-sticky-timer {
    font-size: 9px;
    padding: 2px 6px;
}

/* ========================================
   8. ANIMATIONS
   ======================================== */
@keyframes slideFromTop {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-120%) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

@keyframes slideFromBottom {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(120%) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(100%) scale(0.3);
    }
    50% {
        transform: translateX(-50%) translateY(-10%) scale(1.05);
    }
    70% {
        transform: translateX(-50%) translateY(5%) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

@keyframes wiggle {
    0%, 100% { transform: translateX(-50%) rotate(0deg); }
    25% { transform: translateX(-50%) rotate(-1deg); }
    75% { transform: translateX(-50%) rotate(1deg); }
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Animation classes */
.adlogic-sticky-ad.animation-bounce.adlogic-sticky-bottom.adlogic-sticky-visible {
    animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.adlogic-sticky-ad.animation-fade {
    opacity: 0;
}

.adlogic-sticky-ad.animation-fade.adlogic-sticky-visible {
    opacity: 1;
}

/* ========================================
   9. MOBILE OVERRIDES
   ======================================== */
@media (max-width: 768px) {
    /* Top/bottom positions - full width */
    .adlogic-sticky-ad.adlogic-sticky-top,
    .adlogic-sticky-ad.adlogic-sticky-bottom {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        border-left: none;
        border-right: none;
        border-radius: 0;
        transform: translateY(0) translateZ(0) !important;
        margin-left: 0;
    }
    
    .adlogic-sticky-ad.adlogic-sticky-top {
        transform: translateY(-120%) translateZ(0) !important;
        top: 0;
    }
    
    .adlogic-sticky-ad.adlogic-sticky-bottom {
        transform: translateY(120%) translateZ(0) !important;
        bottom: 0;
    }
    
    .adlogic-sticky-ad.adlogic-sticky-top.adlogic-sticky-visible,
    .adlogic-sticky-ad.adlogic-sticky-bottom.adlogic-sticky-visible {
        transform: translateY(0) translateZ(0) !important;
    }
    
    /* Left/right positions - maintain side positioning but adjust for mobile */
    .adlogic-sticky-ad.adlogic-sticky-left,
    .adlogic-sticky-ad.adlogic-sticky-right {
        /* Maintain vertical centering */
        top: 50% !important;
        bottom: auto !important;
        
        /* Keep the defined width from data-size attribute */
        width: calc(var(--ad-width) + 2 * var(--sticky-border-width)) !important;
        height: calc(var(--ad-height) + var(--sticky-progress-height) + 2 * var(--sticky-border-width)) !important;
        
        /* But constrain to viewport if needed */
        max-width: 50vw !important;
        max-height: 90vh !important;
    }
    
    /* Left position mobile adjustments */
    .adlogic-sticky-ad.adlogic-sticky-left {
        left: 0 !important;
        right: auto !important;
        transform: translateY(-50%) translateX(-110%) rotate(-2deg) scale(0.9) translateZ(0) !important;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    
    .adlogic-sticky-ad.adlogic-sticky-left.adlogic-sticky-visible {
        transform: translateY(-50%) translateX(0) rotate(0) scale(1) translateZ(0) !important;
    }
    
    /* Right position mobile adjustments */
    .adlogic-sticky-ad.adlogic-sticky-right {
        right: 0 !important;
        left: auto !important;
        transform: translateY(-50%) translateX(110%) rotate(2deg) scale(0.9) translateZ(0) !important;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    
    .adlogic-sticky-ad.adlogic-sticky-right.adlogic-sticky-visible {
        transform: translateY(-50%) translateX(0) rotate(0) scale(1) translateZ(0) !important;
    }
    
    /* Adjust ad sizes for left/right positions on very small screens */
    @media (max-width: 480px) {
        .adlogic-sticky-ad.adlogic-sticky-left,
        .adlogic-sticky-ad.adlogic-sticky-right {
            /* Allow up to 45% of viewport width on very small screens */
            max-width: 45vw !important;
            
            /* Ensure vertical ads fit within viewport height */
            max-height: 80vh !important;
        }
        
        /* For vertical ad formats, ensure they scale properly */
        .adlogic-sticky-ad.adlogic-sticky-left[data-size="160x600"],
        .adlogic-sticky-ad.adlogic-sticky-right[data-size="160x600"],
        .adlogic-sticky-ad.adlogic-sticky-left[data-size="120x600"],
        .adlogic-sticky-ad.adlogic-sticky-right[data-size="120x600"],
        .adlogic-sticky-ad.adlogic-sticky-left[data-size="300x600"],
        .adlogic-sticky-ad.adlogic-sticky-right[data-size="300x600"] {
            max-height: 70vh !important;
        }
    }
    
    /* Remove rounded corners on inner elements for top/bottom only */
    .adlogic-sticky-ad.adlogic-sticky-top .adlogic-sticky-progress,
    .adlogic-sticky-ad.adlogic-sticky-top .adlogic-sticky-content,
    .adlogic-sticky-ad.adlogic-sticky-bottom .adlogic-sticky-progress,
    .adlogic-sticky-ad.adlogic-sticky-bottom .adlogic-sticky-content {
        border-radius: 0;
    }
    
    /* Override bounce animation on mobile */
    .adlogic-sticky-ad.animation-bounce.adlogic-sticky-bottom.adlogic-sticky-visible {
        animation: none !important;
    }
    
    /* Ensure close button is accessible on mobile */
    .adlogic-sticky-close {
        z-index: calc(var(--sticky-z-close) + 5);
        min-width: 44px;
        min-height: 44px;
    }
}

/* ========================================
   10. UTILITY CLASSES AND STATES
   ======================================== */
/* No progress bar variant */
.adlogic-sticky-ad.no-progress .adlogic-sticky-progress,
.adlogic-sticky-ad.no-progress .adlogic-sticky-timer {
    display: none;
}

.adlogic-sticky-ad.no-progress .adlogic-sticky-content {
    top: 0;
}

/* Adjust container heights when progress bar is hidden */
.adlogic-sticky-ad.no-progress[data-size] {
    height: calc(var(--ad-height) + 2 * var(--sticky-border-width));
}

/* Loading state */
.adlogic-sticky-ad.adlogic-loading {
    background: linear-gradient(90deg, #f5f5f5 25%, #e0e0e0 50%, #f5f5f5 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 12px;
}

/* Hidden state */
.adlogic-sticky-hidden {
    display: none;
}

/* ========================================
   11. GPT/GOOGLE ADS FIXES
   ======================================== */
/* Let ad slot size naturally based on content */
.adlogic-sticky-ad[data-size] .adlogic-ad-slot {
    overflow: hidden !important;
}

/* Ensure ad slot children don't exceed container */
.adlogic-sticky-ad[data-size] .adlogic-ad-slot > * {
    max-height: 100% !important;
    overflow: hidden !important;
}

/* Google Ad specific containers */
.adlogic-sticky-ad .adlogic-ad-slot[data-gam-unit] {
    display: block;
    position: relative;
    border: 1px;
}

/* Google Ad Manager generated content */
.adlogic-sticky-ad .adlogic-ad-slot > div[id^="google_ads_"],
.adlogic-sticky-ad .adlogic-ad-slot > div[data-google-query-id] {
    width: 100% !important;
    position: relative;
    display: block;
    overflow: hidden !important;
}

/* Ensure Google Ad iframes fill properly */
.adlogic-sticky-ad .adlogic-ad-slot iframe[id^="google_ads_"],
.adlogic-sticky-ad .adlogic-ad-slot iframe[name^="google_ads_"] {
    width: 100% !important;
    border: 0;
    margin: 0;
    display: block;
}

/* Google publisher tag container fixes */
.adlogic-sticky-ad .googlepublishertag {
    width: 100% !important;
    height: 100% !important;
    display: block;
    position: relative;
    overflow: hidden !important;
}

/* ========================================
   12. ACCESSIBILITY AND PRINT STYLES
   ======================================== */
/* Accessibility */
.adlogic-sticky-ad:focus-within {
    outline: 2px solid #4A90E2;
    outline-offset: 2px;
}

.adlogic-sticky-close:focus {
    outline: 3px solid #2196F3;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .adlogic-sticky-ad {
        display: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .adlogic-sticky-ad {
        border: 2px solid currentColor;
    }
    
    .adlogic-sticky-close {
        background: currentColor;
        border-color: currentColor;
    }
    
    .adlogic-sticky-close::before,
    .adlogic-sticky-close::after {
        background: #fff;
    }
    
    .adlogic-sticky-timer {
        border: 1px solid currentColor;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .adlogic-sticky-ad {
        transition: opacity 0.2s ease;
    }
    
    .adlogic-sticky-ad.adlogic-sticky-visible {
        transform: translateX(-50%) translateY(0) rotate(0) scale(1) translateZ(0);
    }
    
    /* Override transform on mobile */
    @media (max-width: 768px) {
        .adlogic-sticky-ad.adlogic-sticky-top.adlogic-sticky-visible,
        .adlogic-sticky-ad.adlogic-sticky-bottom.adlogic-sticky-visible {
            transform: translateY(0) translateZ(0) !important;
        }
        
        .adlogic-sticky-ad.adlogic-sticky-left.adlogic-sticky-visible {
            transform: translateY(-50%) translateX(0) translateZ(0) !important;
        }
        
        .adlogic-sticky-ad.adlogic-sticky-right.adlogic-sticky-visible {
            transform: translateY(-50%) translateX(0) translateZ(0) !important;
        }
    }
    
    .adlogic-sticky-close,
    .adlogic-sticky-progress-bar,
    .adlogic-sticky-timer {
        transition: none;
        animation: none;
    }
}