/* UP Carousel Query — Frontend */

.upcq-carousel-block {
    position: relative;
}

.upcq-carousel-block .upcq-swiper {
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.upcq-carousel-block.upcq-overflow-visible .upcq-swiper {
    overflow: visible;
}

.upcq-carousel-block.upcq-arrows-outside .upcq-swiper {
    overflow: visible;
}

/* ─── Arrow Position Variants ─── */

.upcq-carousel-block {
    --upcq-arrow-gap: var(--wp--preset--spacing--8, 8px);
}

/* ─── Corner: positioning only (no transform) ─── */

/* Reset vertical centering for corners */
.upcq-carousel-block[class*="upcq-arrows-top-"] .upcq-button-prev,
.upcq-carousel-block[class*="upcq-arrows-top-"] .upcq-button-next,
.upcq-carousel-block[class*="upcq-arrows-bottom-"] .upcq-button-prev,
.upcq-carousel-block[class*="upcq-arrows-bottom-"] .upcq-button-next {
    margin-top: 0;
    top: auto;
    bottom: auto;
}

/* Top-left: prev anchored at top-left, next after prev */
.upcq-carousel-block.upcq-arrows-top-left .upcq-button-prev {
    left: 0; right: auto; top: 0;
}
.upcq-carousel-block.upcq-arrows-top-left .upcq-button-next {
    left: calc( var(--upcq-arrow-width, 40px) + var(--upcq-arrow-gap) ); right: auto; top: 0;
}

/* Top-right: next anchored at top-right, prev before next */
.upcq-carousel-block.upcq-arrows-top-right .upcq-button-next {
    right: 0; left: auto; top: 0;
}
.upcq-carousel-block.upcq-arrows-top-right .upcq-button-prev {
    right: calc( var(--upcq-arrow-width, 40px) + var(--upcq-arrow-gap) ); left: auto; top: 0;
}

/* Bottom-left: prev anchored at bottom-left, next after prev */
.upcq-carousel-block.upcq-arrows-bottom-left .upcq-button-prev {
    left: 0; right: auto; bottom: 0;
}
.upcq-carousel-block.upcq-arrows-bottom-left .upcq-button-next {
    left: calc( var(--upcq-arrow-width, 40px) + var(--upcq-arrow-gap) ); right: auto; bottom: 0;
}

/* Bottom-right: next anchored at bottom-right, prev before next */
.upcq-carousel-block.upcq-arrows-bottom-right .upcq-button-next {
    right: 0; left: auto; bottom: 0;
}
.upcq-carousel-block.upcq-arrows-bottom-right .upcq-button-prev {
    right: calc( var(--upcq-arrow-width, 40px) + var(--upcq-arrow-gap) ); left: auto; bottom: 0;
}

/* ─── Outside (default) + no corner: prev left, next right, vertically centered ─── */
.upcq-carousel-block:not([class*="upcq-arrows-top-"]):not([class*="upcq-arrows-bottom-"]) .upcq-button-prev {
    left: auto; right: 50%;
    transform: translateX( calc( -100% - var(--upcq-arrow-gap) ) );
}
.upcq-carousel-block:not([class*="upcq-arrows-top-"]):not([class*="upcq-arrows-bottom-"]) .upcq-button-next {
    right: auto; left: 50%;
    transform: translateX( calc( 100% + var(--upcq-arrow-gap) ) );
}

/* ─── Inside + no corner: on slider edges, offset by gap ─── */
.upcq-carousel-block.upcq-arrows-inside:not([class*="upcq-arrows-top-"]):not([class*="upcq-arrows-bottom-"]) .upcq-button-prev {
    left: 0; right: auto;
    transform: translateX( var(--upcq-arrow-gap) );
    z-index: 10;
}
.upcq-carousel-block.upcq-arrows-inside:not([class*="upcq-arrows-top-"]):not([class*="upcq-arrows-bottom-"]) .upcq-button-next {
    right: 0; left: auto;
    transform: translateX( calc( -100% + var(--upcq-arrow-gap) ) );
    z-index: 10;
}

/* ─── Outside + corner: only vertical shift ─── */

/* Outside + top-left/top-right: shift up */
.upcq-carousel-block:not(.upcq-arrows-inside).upcq-arrows-top-left .upcq-button-prev,
.upcq-carousel-block:not(.upcq-arrows-inside).upcq-arrows-top-left .upcq-button-next,
.upcq-carousel-block:not(.upcq-arrows-inside).upcq-arrows-top-right .upcq-button-prev,
.upcq-carousel-block:not(.upcq-arrows-inside).upcq-arrows-top-right .upcq-button-next {
    transform: translateY( calc( -100% - var(--upcq-arrow-gap) ) );
}

/* Outside + bottom-left/bottom-right: shift down */
.upcq-carousel-block:not(.upcq-arrows-inside).upcq-arrows-bottom-left .upcq-button-prev,
.upcq-carousel-block:not(.upcq-arrows-inside).upcq-arrows-bottom-left .upcq-button-next,
.upcq-carousel-block:not(.upcq-arrows-inside).upcq-arrows-bottom-right .upcq-button-prev,
.upcq-carousel-block:not(.upcq-arrows-inside).upcq-arrows-bottom-right .upcq-button-next {
    transform: translateY( calc( 100% + var(--upcq-arrow-gap) ) );
}

/* Le post-template devient le swiper-wrapper : on neutralise sa grille */
.upcq-carousel-block .wp-block-post-template.swiper-wrapper {
    display: flex !important;
    grid-template-columns: none !important;
    grid-gap: 0 !important;
    gap: 0 !important;
    list-style: none;
    padding: 0;
    margin: 0;
}

.upcq-carousel-block .wp-block-post.swiper-slide {
    height: auto;
    box-sizing: border-box;
}

/* Navigation */
.upcq-carousel-block .upcq-button-prev,
.upcq-carousel-block .upcq-button-next {
    position: absolute;
    top: 50%;
    transform: translateY( -50% );
    z-index: 10;
    width: var( --upcq-arrow-width, 40px );
    height: var( --upcq-arrow-height, 40px );
    border: none;
    background: var( --upcq-arrow-bg, rgba( 0, 0, 0, 0.6 ) );
    color: var( --upcq-arrow-color, #fff );
    opacity: var( --upcq-arrow-opacity, 1 );
    border-radius: var( --upcq-arrow-radius, 50% );
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .2s, background .2s, color .2s;
}

/* Disable Swiper default chevron */
.upcq-carousel-block .upcq-button-prev::after,
.upcq-carousel-block .upcq-button-next::after {
    content: none;
}

.upcq-carousel-block .upcq-button-prev svg,
.upcq-carousel-block .upcq-button-next svg {
    width: var( --upcq-arrow-icon-size, 16px );
    height: var( --upcq-arrow-icon-size, 16px );
    display: block;
    pointer-events: none;
}

.upcq-carousel-block .upcq-button-prev:hover,
.upcq-carousel-block .upcq-button-next:hover {
    background: var( --upcq-arrow-hover-bg, var( --upcq-arrow-bg, rgba( 0, 0, 0, 0.85 ) ) );
    color: var( --upcq-arrow-hover-color, var( --upcq-arrow-color, #fff ) );
    opacity: var( --upcq-arrow-hover-opacity, var( --upcq-arrow-opacity, 1 ) );
}

.upcq-carousel-block .upcq-button-prev.swiper-button-disabled,
.upcq-carousel-block .upcq-button-next.swiper-button-disabled {
    background: var( --upcq-arrow-disabled-bg, var( --upcq-arrow-bg, rgba( 0, 0, 0, 0.3 ) ) );
    color: var( --upcq-arrow-disabled-color, var( --upcq-arrow-color, #fff ) );
    opacity: var( --upcq-arrow-disabled-opacity, 0.5 );
    cursor: not-allowed;
}

.upcq-carousel-block.upcq-arrows-outside:not([class*="upcq-arrows-top-"]):not([class*="upcq-arrows-bottom-"]) .upcq-button-prev {
    left: -52px;
}

.upcq-carousel-block.upcq-arrows-outside:not([class*="upcq-arrows-top-"]):not([class*="upcq-arrows-bottom-"]) .upcq-button-next {
    right: -52px;
}

.upcq-carousel-block.upcq-arrows-inside:not([class*="upcq-arrows-top-"]):not([class*="upcq-arrows-bottom-"]) .upcq-button-prev {
    left: 8px;
}

.upcq-carousel-block.upcq-arrows-inside:not([class*="upcq-arrows-top-"]):not([class*="upcq-arrows-bottom-"]) .upcq-button-next {
    right: 8px;
}

@media ( max-width: 800px ) {
    .upcq-carousel-block.upcq-arrows-outside:not([class*="upcq-arrows-top-"]):not([class*="upcq-arrows-bottom-"]) .upcq-button-prev { left: 4px; }
    .upcq-carousel-block.upcq-arrows-outside:not([class*="upcq-arrows-top-"]):not([class*="upcq-arrows-bottom-"]) .upcq-button-next { right: 4px; }
}

/* Pagination */
.upcq-carousel-block .upcq-pagination {
    position: absolute;
    z-index: 10;
    display: flex;
    gap: 6px;
    justify-content: center;
}

.upcq-carousel-block.upcq-pagination-bottom-center .upcq-pagination { bottom: -28px; left: 0; right: 0; justify-content: center; }
.upcq-carousel-block.upcq-pagination-bottom-left   .upcq-pagination { bottom: -28px; left: 0;          justify-content: flex-start; }
.upcq-carousel-block.upcq-pagination-bottom-right  .upcq-pagination { bottom: -28px; right: 0;         justify-content: flex-end; }
.upcq-carousel-block.upcq-pagination-top-center    .upcq-pagination { top: -28px;    left: 0; right: 0; justify-content: center; }
.upcq-carousel-block.upcq-pagination-top-left      .upcq-pagination { top: -28px;    left: 0;          justify-content: flex-start; }
.upcq-carousel-block.upcq-pagination-top-right     .upcq-pagination { top: -28px;    right: 0;         justify-content: flex-end; }

.upcq-carousel-block .upcq-pagination-bullet {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: var( --wp--custom--upcq--bullet-color, #ccc );
    opacity: .5;
    border-radius: 50%;
    cursor: pointer;
    transition: opacity .2s, background .2s;
}

.upcq-carousel-block .upcq-pagination-bullet.swiper-pagination-bullet-active {
    background: var( --wp--custom--upcq--bullet-active-color, #000 );
    opacity: 1;
}

/* ─── Pagination Custom Styles ─── */
.upcq-carousel-block {
    --upcq-pagination-size: 10px;
    --upcq-pagination-gap: 8px;
    --upcq-pagination-color: #ccc;
    --upcq-pagination-bg: transparent;
    --upcq-pagination-hover-color: #999;
    --upcq-pagination-hover-bg: transparent;
    --upcq-pagination-active-color: #000;
    --upcq-pagination-active-bg: transparent;
}

/* Base pagination container with custom gap */
.upcq-carousel-block .upcq-pagination {
    gap: var( --upcq-pagination-gap, 8px );
}

/* ─── Type: Dots (default) ─── */
.upcq-carousel-block.upcq-pagination-dots .upcq-pagination-bullet {
    width: var( --upcq-pagination-size, 10px );
    height: var( --upcq-pagination-size, 10px );
    background: var( --upcq-pagination-bg, transparent );
    color: var( --upcq-pagination-color, #ccc );
    border: 1px solid var( --upcq-pagination-color, #ccc );
    opacity: 1;
}

.upcq-carousel-block.upcq-pagination-dots .upcq-pagination-bullet:hover {
    background: var( --upcq-pagination-hover-bg, transparent );
    color: var( --upcq-pagination-hover-color, #999 );
    border-color: var( --upcq-pagination-hover-color, #999 );
}

.upcq-carousel-block.upcq-pagination-dots .upcq-pagination-bullet.swiper-pagination-bullet-active {
    background: var( --upcq-pagination-active-bg, transparent );
    color: var( --upcq-pagination-active-color, #000 );
    border-color: var( --upcq-pagination-active-color, #000 );
}

/* ─── Type: Numbers ─── */
.upcq-carousel-block.upcq-pagination-numbers .upcq-pagination-bullet {
    width: auto;
    height: auto;
    min-width: calc( var( --upcq-pagination-size, 10px ) * 2.5 );
    min-height: calc( var( --upcq-pagination-size, 10px ) * 2.5 );
    padding: 0 6px;
    background: var( --upcq-pagination-bg, transparent );
    color: var( --upcq-pagination-color, #ccc );
    border-radius: 4px;
    font-size: calc( var( --upcq-pagination-size, 10px ) * 1.2 );
    line-height: calc( var( --upcq-pagination-size, 10px ) * 2.5 );
    text-align: center;
    opacity: 1;
}

.upcq-carousel-block.upcq-pagination-numbers .upcq-pagination-bullet:hover {
    background: var( --upcq-pagination-hover-bg, transparent );
    color: var( --upcq-pagination-hover-color, #999 );
}

.upcq-carousel-block.upcq-pagination-numbers .upcq-pagination-bullet.swiper-pagination-bullet-active {
    background: var( --upcq-pagination-active-bg, transparent );
    color: var( --upcq-pagination-active-color, #000 );
}

/* ─── Type: Icons ─── */
.upcq-carousel-block.upcq-pagination-icons .upcq-pagination-bullet {
    width: calc( var( --upcq-pagination-size, 10px ) * 2 );
    height: calc( var( --upcq-pagination-size, 10px ) * 2 );
    background: var( --upcq-pagination-bg, transparent );
    color: var( --upcq-pagination-color, #ccc );
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.upcq-carousel-block.upcq-pagination-icons .upcq-pagination-bullet svg {
    width: calc( var( --upcq-pagination-size, 10px ) );
    height: calc( var( --upcq-pagination-size, 10px ) );
    display: block;
}

.upcq-carousel-block.upcq-pagination-icons .upcq-pagination-bullet:hover {
    background: var( --upcq-pagination-hover-bg, transparent );
    color: var( --upcq-pagination-hover-color, #999 );
}

.upcq-carousel-block.upcq-pagination-icons .upcq-pagination-bullet.swiper-pagination-bullet-active {
    background: var( --upcq-pagination-active-bg, transparent );
    color: var( --upcq-pagination-active-color, #000 );
}