/* =============================================
   Swiper Overrides — Walltopia
   ============================================= */

/* Homepage hero slider */
.slider-container.swiper {
    overflow: hidden;
}

.slider-container .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.6);
    opacity: 1;
}

.slider-container .swiper-pagination-bullet-active {
    background: var(--wt-red, #e31e24);
}

.slider-container .swiper-button-next,
.slider-container .swiper-button-prev {
    color: #fff;
}

/* Gallery sliders inside wall type tabs */
.slides-images-in-tab.swiper {
    overflow: hidden;
}

.slides-images-in-tab .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* Square grey arrows flush at the slider edges, red on hover —
   production's .owl-next/.owl-prev look (global-styles.css). */
.slides-images-in-tab .swiper-button-next,
.slides-images-in-tab .swiper-button-prev {
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border-radius: 0;
    transition: background 0.3s;
}

.slides-images-in-tab .swiper-button-prev { left: 0; }
.slides-images-in-tab .swiper-button-next { right: 0; }

/* M7 (mobile-audit F-13): the 40px arrow is close to the 44px floor — grow
   the hit area only, via ::before (Swiper's own chevron glyph already uses
   ::after). A click anywhere in the invisible box still bubbles to this
   element, which is what Swiper's own click handler is bound to. */
.slides-images-in-tab .swiper-button-next::before,
.slides-images-in-tab .swiper-button-prev::before {
    content: "";
    position: absolute;
    inset: -2px;
}

.slides-images-in-tab .swiper-button-next:hover,
.slides-images-in-tab .swiper-button-prev:hover {
    background: var(--wt-red, #ec1c24);
}

.slides-images-in-tab .swiper-button-next::after,
.slides-images-in-tab .swiper-button-prev::after {
    font-size: 18px;
}

/* Dots flow below the image, centered — production's stock owl-theme
   values (10px grey #d6d6d6 bullets, active/hover #869791). */
.slides-images-in-tab .swiper-pagination {
    position: static;
    margin-top: 10px;
    /* 7px per side = prod's 14px dot spacing (owl margin: 5px 7px). Set via
       Swiper's own variable: its (0,3,0) horizontal-bullets margin rule
       beats any (0,2,0) margin override here. */
    --swiper-pagination-bullet-horizontal-gap: 7px;
}

.slides-images-in-tab .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #d6d6d6;
    opacity: 1;
    transition: background 0.2s ease;
    position: relative;
}

.slides-images-in-tab .swiper-pagination-bullet-active,
.slides-images-in-tab .swiper-pagination-bullet:hover {
    background: #869791;
}

/* M7 (mobile-audit F-13): 10px dots are well under even the 24px floor
   (CLAUDE.md) for a tightly packed row of standalone controls, where a
   full 44px circle per dot would overlap its neighbours (7px gap between
   dots). ::after grows the hit area to the 24px floor only. */
.slides-images-in-tab .swiper-pagination-bullet::after {
    content: "";
    position: absolute;
    inset: -7px;
}

/* Blog content galleries — inc/gallery.php's [gallery] renderer
   (sliders.js initBlogGallerySliders()). Same dot/arrow look as the
   .slides-images-in-tab component above; only the container selector
   differs. The renderer's own .wt-gallery__* BEM styling lives in
   templates.css next to the other blog/single-post rules. */
.wt-gallery.swiper {
    overflow: hidden;
}

.wt-gallery .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
}

.wt-gallery .swiper-button-next,
.wt-gallery .swiper-button-prev {
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border-radius: 0;
    transition: background 0.3s;
}

.wt-gallery .swiper-button-prev { left: 0; }
.wt-gallery .swiper-button-next { right: 0; }

/* M7 (mobile-audit F-13): same hit-area grow as .slides-images-in-tab above. */
.wt-gallery .swiper-button-next::before,
.wt-gallery .swiper-button-prev::before {
    content: "";
    position: absolute;
    inset: -2px;
}

.wt-gallery .swiper-button-next:hover,
.wt-gallery .swiper-button-prev:hover {
    background: var(--wt-red, #ec1c24);
}

.wt-gallery .swiper-button-next::after,
.wt-gallery .swiper-button-prev::after {
    font-size: 18px;
}

.wt-gallery .swiper-pagination {
    position: static;
    margin-top: 10px;
    --swiper-pagination-bullet-horizontal-gap: 7px;
}

.wt-gallery .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #d6d6d6;
    opacity: 1;
    transition: background 0.2s ease;
    position: relative;
}

.wt-gallery .swiper-pagination-bullet-active,
.wt-gallery .swiper-pagination-bullet:hover {
    background: #869791;
}

/* M7 (mobile-audit F-13): same 24px-floor hit-area grow as
   .slides-images-in-tab above. */
.wt-gallery .swiper-pagination-bullet::after {
    content: "";
    position: absolute;
    inset: -7px;
}

/* Logo carousel */
#home_logos_slider.swiper {
    overflow: hidden;
    padding: 20px 0;
}

#home_logos_slider .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
}

/* Card div (inline background:#fff + box-shadow, from the block template)
   defaults to shrink-wrapping its image as a flex child — stretch it to
   the full slide width so the white tile fills the slot like production,
   with the logo (its own inline margin:0 auto) centered inside. */
#home_logos_slider .swiper-slide > div {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 25px;
}

#home_logos_slider .swiper-slide img {
    max-width: 100%;
    max-height: 100px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.3s, opacity 0.3s;
}

#home_logos_slider .swiper-slide img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* Testimonials slider */
.testimonials-loop-container.swiper {
    overflow: hidden;
}

/* Bullets flow below the slide (old theme: slick-dots under the card),
   not absolutely positioned over the dark author band. */
.testimonials-loop-container .swiper-pagination {
    position: static;
    margin-top: 20px;
}

.testimonials-loop-container .swiper-pagination-bullet {
    background: rgba(0, 0, 0, 0.3);
}

.testimonials-loop-container .swiper-pagination-bullet-active {
    background: var(--wt-red, #e31e24);
}

/* Prev/next arrows — siblings of the swiper container (sliders.js appends
   them to the column wrapper so overflow:hidden can't clip them), small
   dark chevrons straddling the card edges like the old slick arrows. */
#testimonials .swiper-button-prev,
#testimonials .swiper-button-next {
    --swiper-navigation-size: 22px;
    --swiper-navigation-color: #2c2e3d;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    transition: background 0.3s;
}

#testimonials .swiper-button-prev { left: -15px; }
#testimonials .swiper-button-next { right: -15px; }

#testimonials .swiper-button-prev:hover,
#testimonials .swiper-button-next:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Responsive */
@media (max-width: 767px) {
    .slider-container .swiper-button-next,
    .slider-container .swiper-button-prev {
        display: none;
    }
}