/* ==========================================================================
   Image Box Slider v1.4
   KEY FIX: Arrows positioned at mid-point of image area, not full card.
   Arrows render AFTER swiper in DOM, z-index below slides so overflow
   cards paint on top of them naturally.
   RTL / Arabic: all directional rules are mirrored under [dir="rtl"].
   ========================================================================== */

/* ── Force Elementor wrapper not to clip ─────────────────────────────────── */
.elementor-widget-ibs-image-box-slider,
.elementor-widget-ibs-image-box-slider .elementor-widget-container {
    overflow: visible !important;
}

/* ── Outer container ─────────────────────────────────────────────────────── */
.ibs-outer {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: visible;
}

/* ── Slider area ─────────────────────────────────────────────────────────── */
.ibs-slider-area {
    position: relative;
    width: 100%;
    overflow: visible;
    /*
     * Clip left edge flush, right edge open to infinity.
     * Also clips absolutely-positioned arrows that fall outside the
     * slider area (i.e. in the overflow zone), so arrows never appear
     * on top of overflowing cards.
     */
    clip-path: inset( 0 -2000px 0 0 );
}

/* RTL: overflow peeks on the left, so clip the right edge flush instead */
[dir="rtl"] .ibs-slider-area {
    clip-path: inset( 0 0 0 -2000px );
}

/* ── Swiper ──────────────────────────────────────────────────────────────── */
.ibs-swiper {
    overflow: visible !important;
    width: 100%;
    position: relative;
    z-index: 1;   /* slides sit ABOVE the arrows (z-index:0) */
}

.ibs-swiper .swiper-wrapper {
    align-items: stretch;
}

.ibs-swiper .swiper-slide {
    height: auto;
    box-sizing: border-box;
}

/* ── Grid ────────────────────────────────────────────────────────────────── */
.ibs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
}

.ibs-slide-wrap { height: auto; }

/* ── Card ────────────────────────────────────────────────────────────────── */
.ibs-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* ── Image wrap ──────────────────────────────────────────────────────────── */
.ibs-image-wrap {
    position: relative;
    overflow: hidden;
    height: 240px;      /* default; overridden by Elementor control */
    flex-shrink: 0;
}

.ibs-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.ibs-image-wrap a      { display: block; height: 100%; }
.ibs-image-wrap a img  { height: 100%; }

/* ── Body ────────────────────────────────────────────────────────────────── */
.ibs-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ibs-title            { margin: 0 0 10px; line-height: 1.3; }
.ibs-title a          { text-decoration: none; color: inherit; transition: color 0.2s; }
.ibs-desc             { margin: 0 0 16px; line-height: 1.6; }
.ibs-cta              { display: inline-block; margin-top: auto; text-decoration: none; transition: color 0.2s, background-color 0.2s; }

/* ── Dots ────────────────────────────────────────────────────────────────── */
.ibs-pagination {
    position: relative;
    bottom: auto;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}
.ibs-pagination .swiper-pagination-bullet        { width:8px; height:8px; background:#cccccc; opacity:1; transition:background 0.2s,transform 0.2s; }
.ibs-pagination .swiper-pagination-bullet-active { background:#333333; transform:scale(1.3); }

/* ==========================================================================
   ARROW BUTTONS — base style
   ========================================================================== */
.ibs-arrow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 50%;
    background: #ffffff;
    color: #333333;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
    box-shadow: 0 2px 10px rgba(0,0,0,0.10);
}

.ibs-arrow-btn i,
.ibs-arrow-btn svg {
    font-size: 16px;
    width: 16px;
    height: 16px;
    pointer-events: none;
    display: block;
    flex-shrink: 0;
}

.ibs-arrow-btn:hover           { background-color:#333333; color:#ffffff; border-color:#333333; }
.ibs-arrow-btn:focus-visible   { outline:2px solid currentColor; outline-offset:2px; }
.ibs-arrow-btn.swiper-button-disabled { opacity:0.35; pointer-events:none; cursor:default; }

/* ==========================================================================
   ARROW POSITION: SIDES
   ──────────────────────────────────────────────────────────────────────────
   Arrows are absolutely positioned inside .ibs-slider-area.
   z-index: 0  →  swiper (z-index:1) paints ON TOP, so overflow cards
                  cover the arrows naturally.
   clip-path on .ibs-slider-area hides any arrow that bleeds into the
   overflow zone (right of the visible area).

   TOP POSITION:
   We use `top` set to half the image height (var --ibs-img-h) so the
   arrows sit at the vertical centre of the image, not the full card.
   Default image height = 240px → half = 120px.
   When the user changes Image Height in Elementor the JS reads the
   rendered image height and updates --ibs-img-h on .ibs-slider-area.
   ========================================================================== */

.ibs-slider-area {
    --ibs-img-h: 240px;   /* updated live by JS when image height control changes */
}

.ibs-arrow-prev.ibs-pos-sides,
.ibs-arrow-next.ibs-pos-sides {
    position: absolute;
    /*
     * Position at the vertical midpoint of the image section.
     * calc(var(--ibs-img-h) / 2) puts the centre of the arrow
     * at the centre of the image regardless of card body height.
     */
    top: calc( var(--ibs-img-h) / 2 );
    transform: translateY(-50%);
    z-index: 0;   /* BEHIND the swiper (z-index:1) */
}

.ibs-arrow-prev.ibs-pos-sides { left:  0; }
.ibs-arrow-next.ibs-pos-sides { right: 0; }

/* RTL: swap physical sides for side-arrows */
[dir="rtl"] .ibs-arrow-prev.ibs-pos-sides { left:  auto; right: 0; }
[dir="rtl"] .ibs-arrow-next.ibs-pos-sides { right: auto; left:  0; }

/* ==========================================================================
   ARROW POSITION: TOP / BOTTOM groups
   ========================================================================== */
.ibs-arrow-group {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    overflow: visible;
    position: relative;
    z-index: 2;
}

.ibs-arrow-group.ibs-align-left   { justify-content: flex-start; }
.ibs-arrow-group.ibs-align-center { justify-content: center; }
.ibs-arrow-group.ibs-align-right  { justify-content: flex-end; }

/* RTL: logical start/end flip */
[dir="rtl"] .ibs-arrow-group.ibs-align-left  { justify-content: flex-end; }
[dir="rtl"] .ibs-arrow-group.ibs-align-right { justify-content: flex-start; }
.ibs-arrow-group.ibs-group-top    { margin-bottom: 16px; }
.ibs-arrow-group.ibs-group-bottom { margin-top:    16px; }

/* ==========================================================================
   ELEMENTOR EDITOR — suppress overflow bleed inside canvas
   ========================================================================== */
.elementor-editor-active .ibs-slider-area {
    clip-path: none !important;
    overflow: hidden !important;
}
.elementor-editor-active .ibs-swiper {
    overflow: hidden !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) { .ibs-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 767px)  {
    .ibs-grid { grid-template-columns: 1fr; }
    .ibs-arrow-prev.ibs-pos-sides { left:  4px; }
    .ibs-arrow-next.ibs-pos-sides { right: 4px; }

    /* RTL mobile: mirror offsets */
    [dir="rtl"] .ibs-arrow-prev.ibs-pos-sides { left: auto; right: 4px; }
    [dir="rtl"] .ibs-arrow-next.ibs-pos-sides { right: auto; left: 4px; }
}