/**
 * Z Addons for Elementor — Gallery slider (Slick) widget styles.
 *
 * Structure + neutral defaults only; every color, size and spacing is
 * controlled from the Elementor panel. The slide height is fixed (style
 * control) while every slide grows to its image's natural aspect ratio
 * (Slick variable-width mode).
 */
.zae-gslider {
        position: relative;
        overflow: hidden;
}

/* Slides may bleed past the list edges (center mode look). */
.zae-gslider .slick-list {
        overflow: visible;
}

/* Slick's core stylesheet floats slides to the RIGHT on every
   [dir='rtl'] page, but Slick's own offset math reads each slide's
   physical offsetLeft assuming a left-to-right float flow (and this
   widget's arrows are physical too), so on RTL pages like Persian sites
   the offsets land near the end of the wide fallback track and the
   slides disappear off-screen. Pin the float direction here — this
   stylesheet loads after the core css and the higher specificity wins
   the tie. The --rtl modifier restores right floats together with the
   widget's RTL switcher (Slick's rtl:true math expects them). */
.zae-gslider .slick-track .slick-slide {
        float: left;
}

.zae-gslider--rtl .slick-track .slick-slide {
        float: right;
}

/* Fixed-height slides: width grows to each image's natural aspect ratio. */
.zae-gslider__slide img,
.zae-gslider__img {
        display: block;
        height: 500px;
        width: auto;
        max-width: none;
        object-fit: contain;
}

/* Custom chevron arrows rendered by the widget markup (Slick never
   generates its own default buttons — prevArrow/nextArrow point here). */
.zae-gslider__arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
        width: 32px;
        height: 32px;
        padding: 0;
        border: none;
        background: none;
        cursor: pointer;
        line-height: 0;
        color: #1a1a1a;
        transition: color 0.2s ease;
}

.zae-gslider__arrow svg {
        display: block;
        width: 100%;
        height: 100%;
}

.zae-gslider__arrow:focus-visible {
        outline: 1px dotted currentColor;
        outline-offset: 3px;
}

/* Default placement mirrors the original widget: outside the box on wide
   screens, tucked inside below 1400px. Physical sides are intentional —
   they follow the slider's slide direction (LTR unless the widget's RTL
   switcher is on), not the page direction. */
.zae-gslider__arrow--prev {
        left: -32px;
}

.zae-gslider__arrow--next {
        right: -32px;
}

@media (max-width: 1400px) {
        .zae-gslider__arrow--prev {
                left: 32px;
        }

        .zae-gslider__arrow--next {
                right: 32px;
        }
}

/* RTL slide direction: swap the arrow sides to match. */
.zae-gslider--rtl .zae-gslider__arrow--prev {
        left: auto;
        right: -32px;
}

.zae-gslider--rtl .zae-gslider__arrow--next {
        right: auto;
        left: -32px;
}

@media (max-width: 1400px) {
        .zae-gslider--rtl .zae-gslider__arrow--prev {
                right: 32px;
        }

        .zae-gslider--rtl .zae-gslider__arrow--next {
                left: 32px;
        }
}

/* Editor-only placeholder (never printed on the frontend). */
.zae-gslider__notice {
        padding: 12px;
        border: 1px dashed #b4b9c0;
        color: #6d7882;
        text-align: center;
}