/* WP Ad Control Pro v3.0 — Frontend CSS */

/* ── General banner ── */
.wpadc-banner { text-align:center; line-height:0; box-sizing:border-box; }
.wpadc-banner .wpadc-link { display:inline-block; line-height:0; text-decoration:none; }
.wpadc-img { max-width:100%; height:auto; display:block; }

/* Positions */
.wpadc-pos-header         { width:100%; background:#000; padding:4px 0; }
.wpadc-pos-footer         { width:100%; background:#000; padding:4px 0; margin-top:20px; }
.wpadc-pos-before_post,
.wpadc-pos-after_content,
.wpadc-pos-after_post     { width:100%; margin:16px 0; padding:0; }
.wpadc-pos-paragraph      { width:100%; margin:14px 0; clear:both; }

/* Sticky bottom */
.wpadc-pos-sticky_bottom {
    position:fixed; bottom:0; left:0; right:0;
    z-index:99999; background:transparent;
    padding:6px 12px; box-shadow:none;
    display:flex; align-items:flex-end;
}
/* Sticky alignment — flex justify-content */
.wpadc-pos-sticky_bottom.wpadc-sticky-left   { justify-content:flex-start; }
.wpadc-pos-sticky_bottom.wpadc-sticky-center { justify-content:center; }
.wpadc-pos-sticky_bottom.wpadc-sticky-right  { justify-content:flex-end; }

/* Inner wrapper to hold banner + close button together */
.wpadc-sticky-inner {
    position:relative;
    display:inline-block;
    line-height:0;
    max-width:100%;
}
/* Script-wrap inside sticky must be inline-block so close button hugs the content */
.wpadc-pos-sticky_bottom .wpadc-script-wrap {
    display:inline-block;
    line-height:normal;
    vertical-align:bottom;
    max-width:100%;
}

body:has(.wpadc-pos-sticky_bottom) { padding-bottom:90px; }

/* Close button — top-right corner of banner */
.wpadc-sticky-close {
    position:absolute;
    top:0px;
    right:0px;
    width:20px; height:20px;
    background:rgba(0,0,0,0.7);
    border:none;
    border-radius:0 0 0 4px;
    color:#fff;
    font-size:12px;
    line-height:20px;
    text-align:center;
    cursor:pointer;
    z-index:100;
    padding:0;
    opacity:1;
    transition:background .15s;
    display:block;
}
.wpadc-sticky-close:hover { background:rgba(200,0,0,0.9); }

/* Script wrap */
.wpadc-script-wrap { line-height:normal; }

/* Content alignment */
.wpadc-align-left   { text-align:left; }
.wpadc-align-center { text-align:center; }
.wpadc-align-right  { text-align:right; }

/* ════════════════════════════════════════
   NATIVE ADS GRID
════════════════════════════════════════ */
.wpadc-native-block  { margin:20px 0; font-family:inherit; }
.wpadc-native-label  { font-size:11px; color:#999; text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }

/* Grid — CSS custom properties set from PHP */
.wpadc-native-grid {
    display:grid;
    grid-template-columns:repeat(var(--cols-d,4), 1fr);
    gap:12px;
}

/* Mobile responsive */
@media (max-width:768px) {
    .wpadc-native-grid {
        grid-template-columns:repeat(var(--cols-m,2), 1fr);
        gap:8px;
    }
}
@media (max-width:360px) {
    .wpadc-native-grid { grid-template-columns:1fr 1fr; gap:6px; }
}

/* Item card */
.wpadc-native-item-wrap { background:#111; border-radius:4px; overflow:hidden; }
.wpadc-native-link      { display:block; text-decoration:none; color:inherit; }
.wpadc-native-link:hover .wpadc-native-title { text-decoration:underline; }

/* Image — fixed aspect ratio to prevent CLS */
.wpadc-native-img-wrap {
    position:relative;
    width:100%;
    aspect-ratio:3/2;     /* 300:200 */
    background:#222;
    overflow:hidden;
}
.wpadc-native-img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    /* Lazy load fade-in */
    opacity:0;
    transition:opacity .3s;
}
.wpadc-native-img.loaded,
.wpadc-native-img[loading="lazy"] { opacity:1; }

.wpadc-native-img-placeholder {
    position:absolute; inset:0; background:#2a2a2a;
}

/* Title */
.wpadc-native-title {
    padding:8px 10px 10px;
    font-size:13px;
    line-height:1.4;
    color:#fff;
    font-weight:500;
    transition:color .15s;
}

@media (max-width:480px) {
    .wpadc-native-title { font-size:12px; padding:6px 8px 8px; }
}