/**
 * OptiSud Ads - Public Styles
 *
 * @package OptiSud_Ads
 */

/* Banner wrapper */
.osa-banner-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
    border-radius: 8px;
    position: relative;
}

/* Close button */
.osa-banner-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 20;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    max-width: 26px;
    max-height: 26px;
    font-size: 14px;
    line-height: 26px;
    cursor: pointer;
    display: block;
    text-align: center;
    transition: background 0.2s, transform 0.1s;
    padding: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    box-sizing: border-box;
}

.osa-banner-close:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

/* Ensure banner container matches page content width */
.section-title-container .osa-banner-wrapper {
    margin-top: 0;
}

.osa-banner-container {
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 8px;
}

/* Single banner */
.osa-banner-single .osa-banner-picture,
.osa-banner-single .osa-banner-link {
    display: block;
    width: 100%;
}

.osa-banner-single .osa-banner-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Slider wrapper */
.osa-banner-slider-wrapper {
    position: relative;
}

/* Contain Flickity slides — prevents second slide from escaping the container */
.osa-banner-slider-wrapper .slider-wrapper {
    overflow: hidden;
    border-radius: 8px;
}

.osa-banner-slider {
    width: 100%;
}

.osa-banner-slide {
    width: 100%;
}

/* Banner image */
.osa-banner-picture {
    display: block;
    width: 100%;
    line-height: 0;
}

.osa-banner-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Banner link */
.osa-banner-link {
    display: block;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.osa-banner-link:hover {
    opacity: 0.95;
}

/* HTML banner */
.osa-banner-html {
    width: 100%;
}

.osa-banner-html iframe,
.osa-banner-html img {
    max-width: 100%;
    height: auto;
}

/* Welcome popup */
.osa-welcome-popup {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    max-width: 500px;
    margin: 0 auto;
}

.osa-popup-content {
    position: relative;
}

.osa-popup-image {
    display: block;
    width: 100%;
    height: auto;
}

.osa-popup-content a {
    display: block;
    line-height: 0;
}

/* Popup zoom animation */
.osa-popup-zoom .mfp-content {
    animation: osaPopupZoom 0.3s ease-out;
}

@keyframes osaPopupZoom {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .osa-welcome-popup {
        max-width: 90%;
        margin: 20px auto;
    }

    /* Ensure slider navigation is properly sized on mobile */
    .osa-banner-slider .flickity-prev-next-button {
        width: 30px;
        height: 30px;
    }
}

/* ── Banner spacing overrides ───────────────────────────────────────────── */

/* Suppliers: tighten page header bottom margin (was 40px → creates large top gap) */
.osf-suppliers-wrapper .osf-page-header {
    margin-bottom: 10px;
}

/* Suppliers category: tighten category header bottom margin (was 30px → creates large top gap) */
.osf-suppliers-wrapper .osf-category-header {
    margin-bottom: 10px;
}

/* Suppliers: ensure space between banner and category/supplier grid */
.osf-suppliers-wrapper .osf-categories-grid,
.osf-suppliers-wrapper .osf-suppliers-grid {
    margin-top: 10px;
}

/* Classified ads: space between banner and search/directory block */
.osca-ads-wrapper .osca-directory-container {
    margin-top: 10px;
}

/* Blog/archive + single post pages: remove page-wrapper top padding (was 30px, our container adds 10px) */
.blog-archive.page-wrapper,
.blog-single.page-wrapper {
    padding-top: 0;
}

/* Blog archive + single post page: add spacing below banner */
.blog-archive .osa-banner-wrapper,
.blog-single .osa-banner-wrapper {
    margin-bottom: 10px;
}

/* Single post: override Flatsome's default margin-top: 30px on the first .row */
.blog-single.page-wrapper > .row {
    margin-top: 0;
}

/* Flatsome pages: reduce padding-top of the section immediately following our banner */
/* Case 1: banner rendered before page sections (flatsome_before_page_content) */
.osa-banner-wrapper + .section {
    padding-top: 15px !important;
}

/* Case 2: banner is inside a section via shortcode filter (events, blog, etc.) */
.section:has(.osa-banner-wrapper) + .section {
    padding-top: 15px !important;
}

/* mentions-legales: force gap to 10px, overrides Flatsome global sm breakpoint default */
body.page-id-649 [id^="gap-"] {
    padding-top: 10px !important;
}

/* Fix for Flatsome slider integration */
.osa-banner-slider.flickity-enabled {
    outline: none;
}

.osa-banner-slider .flickity-viewport {
    overflow: hidden;
}

.osa-banner-slider .flickity-page-dots {
    bottom: 10px;
}

.osa-banner-slider .flickity-page-dots .dot {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(0, 0, 0, 0.3);
}

.osa-banner-slider .flickity-page-dots .dot.is-selected {
    background: #fff;
}