/* Adventure Tours Manager — Slider widget */

.atm-slider {
    position: relative;
    width: 100%;
    font-family: inherit;
    --atm-show: 3;
    --atm-gap: 24px;
}

.atm-slider-viewport {
    overflow: hidden;
    width: 100%;
    /* Slight inner padding so hover lift / shadow isn't clipped */
    padding: 6px 4px 12px;
}

.atm-slider-track {
    display: flex;
    gap: var(--atm-gap, 24px);
    will-change: transform;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

/* Each slide width = (100% - gaps) / cards-per-view */
.atm-slide {
    flex: 0 0 calc((100% - (var(--atm-show) - 1) * var(--atm-gap, 24px)) / var(--atm-show));
    min-width: 0;
}

/* When JS isn't ready yet, fall back to a horizontal scroll so cards still show */
.atm-slider:not(.atm-ready) .atm-slider-viewport {
    overflow-x: auto;
}

/* ---- Arrows ---- */
.atm-arrow-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid #e7eaee;
    border-radius: 999px;
    background: #fff;
    color: #1f2937;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(17, 24, 39, .12);
    transition: background .2s ease, transform .2s ease;
}

.atm-arrow-btn:hover {
    background: #f5f7f9;
}

.atm-arrow-btn[disabled] {
    opacity: .4;
    cursor: default;
}

.atm-prev { left: -8px; }
.atm-next { right: -8px; }

/* ---- Dots ---- */
.atm-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

.atm-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #c9cfd6;
    cursor: pointer;
    transition: width .2s ease, background .2s ease;
}

.atm-dot.is-active {
    width: 26px;
    background: #149447;
}

@media (max-width: 1024px) {
    .atm-slide {
        flex-basis: calc((100% - (var(--atm-show-t, 2) - 1) * var(--atm-gap, 24px)) / var(--atm-show-t, 2));
    }
    .atm-slider {
        --atm-show: var(--atm-show-t, 2);
    }
}

@media (max-width: 600px) {
    .atm-slide {
        flex-basis: calc((100% - (var(--atm-show-m, 1) - 1) * var(--atm-gap, 24px)) / var(--atm-show-m, 1));
    }
    .atm-slider {
        --atm-show: var(--atm-show-m, 1);
    }
    .atm-prev { left: 2px; }
    .atm-next { right: 2px; }
}