/* ============================================
   SMART ADSENSE STYLING — v2.0
   Empty ads auto-collapse
   ============================================ */

/* ── Base container — hidden until loaded ── */
.ad-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
}

/* ── Visible when ad loaded ── */
.ad-container.ad-loaded {
    max-height: 320px;
    padding: 16px 24px;
    opacity: 1;
    visibility: visible;
    animation: adFadeIn 0.5s ease-out;
}

@keyframes adFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Banner wrapper ── */
.ad-banner {
    background: transparent;
    border: none;
    border-radius: 12px;
    min-height: 90px;
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.ad-container.ad-loaded .ad-banner {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

/* ── "Advertisement" label ── */
.ad-banner-label {
    display: none;
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 0.6rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 500;
    z-index: 1;
    pointer-events: none;
    font-family: inherit;
}
.ad-container.ad-loaded .ad-banner-label { display: block; }

/* ── AdSense ins ── */
.adsbygoogle {
    display: block !important;
    width: 100% !important;
    min-width: 250px;
}

/* Hide unfilled ads and collapse parent */
.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }

.ad-container:has(.adsbygoogle[data-ad-status="unfilled"]) {
    display: none !important;
}

/* Loading skeleton (optional) */
.ad-container.ad-loading .ad-banner {
    background: linear-gradient(90deg, #f1f5f9 0%, #e9eef5 50%, #f1f5f9 100%);
    background-size: 200% 100%;
    animation: shimmer 1.8s infinite;
    min-height: 90px;
    border-radius: 12px;
}

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

/* ── Responsive ── */
@media (max-width: 768px) {
    .ad-container.ad-loaded { padding: 12px 16px; }
}

@media (max-width: 480px) {
    .ad-container.ad-loaded { padding: 10px 12px; }
    .adsbygoogle { min-width: 200px; }
}