/* =========================================================================
   Adsterra Ad Slots – DatoChai
   =========================================================================
   BREAKPOINT SYSTEM (mobile-first, applied consistently):
     Base styles        → mobile (0px and up)
     @media (min-width: 768px)   → tablet
     @media (min-width: 1024px)  → desktop
     @media (min-width: 1280px)  → large desktop

   CONTENTS:
     1. Base ad wrappers
     2. In-article (auto + template)
     3. Device visibility utilities
     4. Sticky mobile bottom banner
     5. Homepage ad slots
     6. Blog index ad slots
     7. Page / FAQ / Results / Pakar ad slots
     8. Footer partner link
   ========================================================================= */


/* =========================================================================
   1. BASE AD WRAPPERS
   ========================================================================= */

.ad-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
    padding: 0;
    position: relative;
    text-align: center;
    overflow: hidden;
}

.ad-slot__label {
    position: absolute;
    top: 4px;
    left: 8px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    background: rgba(255, 255, 255, 0.7);
    padding: 2px 6px;
    border-radius: 3px;
    pointer-events: none;
}

/* Shared inline ad block (used in templates) */
.ad-inline {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 25px 0;
    padding: 12px 0;
    border-top: 1px dashed var(--border-color, #e0e0e0);
    border-bottom: 1px dashed var(--border-color, #e0e0e0);
    max-width: 100%;
    overflow: hidden;
}

/* Inline variant without the dashed borders */
.ad-inline--plain {
    border: none;
}

@media (min-width: 768px) {
    .ad-slot { margin: 30px auto; }
    .ad-inline { margin: 40px 0; padding: 20px 0; }
}

@media (min-width: 1024px) {
    .ad-inline { margin: 50px auto; }
}


/* =========================================================================
   2. IN-ARTICLE AD POSITIONS
   ========================================================================= */

/* Auto-injected by the_content filter */
.ad-inline--native,
.ad-inline--rect {
    margin: 40px 0;
}

/* Top-of-article banner (right after featured image) */
.ad-inline--top-banner {
    border: none;
    padding: 10px 0;
}


/* =========================================================================
   3. DEVICE VISIBILITY UTILITIES
   =========================================================================
   - `.ad-mobile-only`        → visible only on < 768px
   - `.ad-desktop-tablet-only`→ visible on 768px and up
   - `.ad-desktop-only`       → visible on 1024px and up
   ========================================================================= */

.ad-mobile-only         { display: flex; }
.ad-desktop-tablet-only { display: none; }
.ad-desktop-only        { display: none; }

@media (min-width: 768px) {
    .ad-mobile-only         { display: none !important; }
    .ad-desktop-tablet-only { display: flex; }
}

@media (min-width: 1024px) {
    .ad-desktop-only { display: flex; }
}

/* Small-screen safety: never let ad creatives overflow */
@media (max-width: 480px) {
    .ad-slot iframe,
    .ad-slot img,
    .ad-inline iframe,
    .ad-inline img {
        max-width: 100% !important;
        height: auto !important;
    }
}


/* =========================================================================
   4. STICKY MOBILE BOTTOM BANNER (Ad #2)
   ========================================================================= */

.ad-sticky-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.18);
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(110%);
    transition: transform 0.35s ease;
    will-change: transform;
}

.ad-sticky-mobile.is-visible {
    transform: translateY(0);
}

.ad-sticky-mobile__content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 50px;
}

.ad-sticky-mobile__close {
    position: absolute;
    top: -12px;
    right: 8px;
    width: 26px;
    height: 26px;
    background: #cc0000;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease;
    padding: 0;
}

.ad-sticky-mobile__close:hover,
.ad-sticky-mobile__close:focus {
    transform: scale(1.1);
    outline: none;
}

/* Reserve bottom space so the ad never covers real content.
   Padding matches ad height + safe-area cushion (approx. 70px total). */
body.has-sticky-mobile-ad {
    padding-bottom: 70px;
}

/* Hide the sticky banner entirely on tablet and up */
@media (min-width: 768px) {
    .ad-sticky-mobile {
        display: none !important;
    }
    body.has-sticky-mobile-ad {
        padding-bottom: 0;
    }
}


/* =========================================================================
   5. HOMEPAGE AD SLOTS
   ========================================================================= */

.ad-inline--home-banner,
.ad-inline--home-rect,
.ad-inline--home-native {
    border: none;
    margin: 25px auto;
    padding: 12px 0;
}

.ad-inline--home-native {
    border-top: 1px dashed var(--border-color, #e0e0e0);
    border-bottom: 1px dashed var(--border-color, #e0e0e0);
}

@media (min-width: 768px) {
    .ad-inline--home-banner,
    .ad-inline--home-rect,
    .ad-inline--home-native {
        margin: 40px auto;
        padding: 20px 0;
    }
}


/* =========================================================================
   6. BLOG INDEX AD SLOTS
   ========================================================================= */

.ad-inline--blog-banner,
.ad-inline--blog-rect,
.ad-inline--blog-native {
    border: none;
    margin: 30px auto;
    padding: 12px 0;
}

.ad-inline--blog-native {
    border-top: 1px dashed var(--border-color, #e0e0e0);
    border-bottom: 1px dashed var(--border-color, #e0e0e0);
}

@media (min-width: 768px) {
    .ad-inline--blog-banner,
    .ad-inline--blog-rect,
    .ad-inline--blog-native {
        margin: 50px auto;
        padding: 20px 0;
    }
}


/* =========================================================================
   7. PAGE / FAQ / RESULTS / PAKAR AD SLOTS
   =========================================================================
   - *-top  → 468×60 banner, hidden on mobile (too wide)
   - *-mid / *-bottom → rectangle / native, always visible
   ========================================================================= */

.ad-inline--page-top,
.ad-inline--faq-top,
.ad-inline--results-top,
.ad-inline--pakar-top,
.ad-inline--page-bottom,
.ad-inline--faq-bottom,
.ad-inline--results-bottom,
.ad-inline--pakar-mid {
    margin: 25px auto;
    padding: 12px 0;
    border: none;
}

/* Wide banners: hidden on mobile */
.ad-inline--page-top,
.ad-inline--faq-top,
.ad-inline--results-top,
.ad-inline--pakar-top {
    display: none;
}

@media (min-width: 768px) {
    .ad-inline--page-top,
    .ad-inline--faq-top,
    .ad-inline--results-top,
    .ad-inline--pakar-top {
        display: flex;
        margin: 40px auto;
        padding: 18px 0;
        border-top: 1px dashed var(--border-color, #e0e0e0);
        border-bottom: 1px dashed var(--border-color, #e0e0e0);
    }

    .ad-inline--page-bottom,
    .ad-inline--faq-bottom,
    .ad-inline--results-bottom,
    .ad-inline--pakar-mid {
        margin: 40px auto;
        padding: 18px 0;
        border-top: 1px dashed var(--border-color, #e0e0e0);
        border-bottom: 1px dashed var(--border-color, #e0e0e0);
    }
}


/* =========================================================================
   8. FOOTER PARTNER LINK (Ad #1)
   ========================================================================= */

.footer-developer__separator {
    opacity: 0.4;
    margin: 0 4px;
}

.footer-developer__partner-link {
    color: var(--grey, #666);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.footer-developer__partner-link:hover {
    color: var(--primary-red, #cc0000);
}


/* =========================================================================
   9. TOP LEADERBOARD WRAPPER (Ad #6)
   ========================================================================= */

.datochai-top-ad-wrapper {
    display: none;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 15px 20px;
    margin-top: 70px; /* compensate for fixed header */
    position: relative;
    z-index: 1;
}

@media (min-width: 1024px) {
    .datochai-top-ad-wrapper {
        display: flex;
        margin-bottom: 20px;
    }
}


/* =========================================================================
   10. SIDEBAR AD SLOTS (Ads #3 & #8)
   ========================================================================= */

.sidebar-ad-slot {
    display: none;
    margin: 20px 0;
    padding: 10px 0;
    justify-content: center;
    align-items: center;
    border-top: 1px dashed var(--border-color, #e0e0e0);
    border-bottom: 1px dashed var(--border-color, #e0e0e0);
}

@media (min-width: 1024px) {
    .sidebar-ad-slot {
        display: flex;
    }
}