/* ── Machine Edge Ads Banner — Frontend Styles ── */
.meab-ads-banner-section {
    position      : relative;
    width         : 100%;
    overflow      : hidden;
    margin        : 0 0 30px;
    border-radius : 8px;
    background    : #000;
    /* Respect theme's container width */
    max-width     : 100%;
}

/* Track holds all slides side-by-side */
.meab-ads-banner-track {
    display          : flex;
    transition       : transform .5s ease;
    will-change      : transform;
}

/* Each slide */
.meab-ads-banner-slide {
    min-width        : 100%;
    position         : relative;
    overflow         : hidden;
}
.meab-ads-banner-slide a {
    display          : block;
    line-height      : 0;
}
.meab-ads-banner-slide img {
    width            : 100%;
    height           : 180px;
    object-fit       : cover;
    display          : block;
    transition       : opacity .3s;
}
.meab-ads-banner-slide a:hover img {
    opacity          : .9;
}

/* If only 1 banner — larger */
.meab-ads-banner-section:has(.meab-ads-banner-track > :only-child) .meab-ads-banner-slide img {
    height           : 160px;
}

/* ── Navigation arrows ── */
.meab-arrow {
    position         : absolute;
    top              : 50%;
    transform        : translateY(-50%);
    background       : rgba(0,0,0,.45);
    color            : #fff;
    border           : none;
    width            : 36px;
    height           : 36px;
    border-radius    : 50%;
    cursor           : pointer;
    font-size        : 14px;
    line-height      : 1;
    z-index          : 10;
    transition       : background .2s;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    padding          : 0;
}
.meab-arrow:hover  { background: rgba(0,0,0,.75); }
.meab-prev         { left: 10px; }
.meab-next         { right: 10px; }

/* ── Dot indicators ── */
.meab-dots {
    position         : absolute;
    bottom           : 8px;
    left             : 50%;
    transform        : translateX(-50%);
    display          : flex;
    gap              : 6px;
    z-index          : 10;
}
.meab-dot {
    width            : 8px;
    height           : 8px;
    border-radius    : 50%;
    background       : rgba(255,255,255,.5);
    border           : none;
    cursor           : pointer;
    padding          : 0;
    transition       : background .2s, transform .2s;
}
.meab-dot.active,
.meab-dot:hover {
    background       : #fff;
    transform        : scale(1.25);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .meab-ads-banner-slide img { height: 120px; }
    .meab-arrow { width: 28px; height: 28px; font-size: 11px; }
}
@media (max-width: 480px) {
    .meab-ads-banner-slide img { height: 90px; }
}