/* ================================================
   BT Carousel Slider v3 — BeeTech Solutions
   Fixes: Elementor overflow, slide split, width
   ================================================ */

/* Force box model everywhere inside slider */
.bt-carousel-wrapper *,
.bt-carousel-wrapper *::before,
.bt-carousel-wrapper *::after {
    box-sizing: border-box;
}

.bt-carousel-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;       /* never exceed parent */
    margin: 0 auto;
    font-family: inherit;
    /* Critical for Elementor: ensure this element itself doesn't overflow */
    overflow: hidden;
}

/* VIEWPORT — the actual clip zone for slides */
.bt-carousel-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;          /* THIS clips the sliding track */
    border-radius: 10px 10px 0 0;
    display: block;
    /* Elementor sometimes collapses flex children — force it */
    min-height: 1px;
}

/* Track: sits INSIDE viewport, wider than it (total slides × 100%) */
.bt-carousel-track {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;               /* matches viewport, children use min-width */
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    /* Remove any gap between slides */
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Each slide: exactly the width of the viewport, never more */
.bt-carousel-slide {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    flex: 0 0 100%;            /* flex shorthand: don't grow, don't shrink, be 100% */
    display: flex;
    flex-direction: column;
    overflow: hidden;          /* clip any content inside the slide */
}

/* ---- Image ---- */
.bt-slide-image-wrap {
    width: 100%;
    background: #111;
    line-height: 0;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
    display: block;
}

.bt-slide-image-wrap img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    object-fit: cover;
}

/* ---- Text container ---- */
.bt-slide-text-wrap {
    background: #ffffff;
    text-align: center;
    padding: 24px 28px 28px;
    border-radius: 0 0 10px 10px;
    box-shadow:
        0 2px 8px rgba(0,0,0,0.08),
        0 0 0 1px rgba(0,0,0,0.04);
    width: 100%;
}

.bt-slide-heading {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px 0;
    line-height: 1.3;
}

.bt-slide-subtext {
    font-size: 15px;
    color: #888;
    margin: 0;
    line-height: 1.6;
}

/* ---- Arrows — positioned inside wrapper but above viewport ---- */
.bt-carousel-btn {
    position: absolute;
    top: 0;
    height: auto;
    bottom: 0;                 /* stretch full height */
    max-height: 60%;           /* but cap at image area */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.25);
    border: none;
    cursor: pointer;
    padding: 0 12px;
    font-size: 24px;
    color: #e91e8c;
    z-index: 20;
    transition: background 0.2s, color 0.2s;
    line-height: 1;
}

.bt-carousel-btn:hover {
    background: rgba(0,0,0,0.45);
    color: #fff;
}

.bt-carousel-prev { left: 0; border-radius: 0 4px 4px 0; }
.bt-carousel-next { right: 0; border-radius: 4px 0 0 4px; }

/* ---- Dots ---- */
.bt-carousel-dots-wrap {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px 0 4px;
}

.bt-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ddd;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.25s;
}

.bt-dot.active { background: #e91e8c; }

/* ---- Mobile ---- */
@media (max-width: 480px) {
    .bt-slide-text-wrap { padding: 18px 16px 22px; }
    .bt-slide-heading   { font-size: 16px; }
    .bt-slide-subtext   { font-size: 14px; }
    .bt-carousel-btn    { font-size: 20px; padding: 0 8px; }
}