/* ==============================
   UX Flat Row Step Carousel
   Native Row options + responsive items/gap + container start
   + configurable arrows/dots
============================== */

.slider-dak-step-c {
    --dak-gap: var(--dak-gap-desktop, 16px);
    --dak-item-width: var(--dak-item-width-desktop, calc(28.5714% - 11.43px));
    --dak-arrow-size: 50px;
    --dak-arrow-icon-size: 22px;
    --dak-arrow-custom-bg: #fff;
    --dak-arrow-custom-color: #fff;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: var(--dak-gap);
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    cursor: grab;
    box-sizing: border-box;
}

.slider-dak-step-c::-webkit-scrollbar {
    display: none;
}

.slider-dak-step-c.show-2-5 {
    --dak-item-width-desktop: calc(40% - (var(--dak-gap) * .6));
}

.slider-dak-step-c.show-3-5 {
    --dak-item-width-desktop: calc(28.571429% - (var(--dak-gap) * .714286));
}

.slider-dak-step-c.show-4-5 {
    --dak-item-width-desktop: calc(22.222222% - (var(--dak-gap) * .777778));
}

.slider-dak-step-c.show-5-5 {
    --dak-item-width-desktop: calc(18.181818% - (var(--dak-gap) * .818182));
}

.slider-dak-step-c.show-6-5 {
    --dak-item-width-desktop: calc(15.384615% - (var(--dak-gap) * .846154));
}

.slider-dak-step-c.dak-container-start,
.slider-dak-step-c.dak-container-offset {
    width: var(--dak-full-width, 100%) !important;
    max-width: none !important;
    margin-left: var(--dak-start-shift, 0px) !important;
    margin-right: 0 !important;
}

.slider-dak-step-c > * {
    flex: 0 0 var(--dak-item-width) !important;
    width: var(--dak-item-width) !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    box-sizing: border-box;
}

.slider-dak-step-c.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
    user-select: none;
}

.slider-dak-step-c img {
    -webkit-user-drag: none;
    user-select: none;
}

.dak-step-slider-controls {
    --dak-arrow-size: 50px;
    --dak-arrow-icon-size: 22px;
    --dak-arrow-custom-bg: #fff;
    --dak-arrow-custom-color: #fff;
    --dak-arrow-middle-top: -100px;
    --dak-arrow-top-top: -200px;
    width: 100%;
    max-width: 100%;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 24px;
    box-sizing: border-box;
    overflow: visible;
    z-index: 5;
}

.dak-step-slider-controls.is-container-start {
    width: var(--dak-controls-width, 100%) !important;
    max-width: none !important;
    margin-left: var(--dak-controls-shift, 0px) !important;
}

.dak-step-slider-controls.is-arrows-hidden .dak-step-slider-arrow {
    display: none !important;
}

.dak-step-slider-controls.is-dots-hidden .dak-step-slider-dots {
    display: none !important;
}

.dak-step-slider-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
}

.dak-step-slider-dots button {
    display: block;
    width: 7px;
    height: 7px;
    min-width: 7px;
    min-height: 7px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d7dbe2;
    box-shadow: none;
    opacity: 1;
    cursor: pointer;
    transition: width .25s ease, border-radius .25s ease, background-color .25s ease;
}

.dak-step-slider-dots button:hover {
    background: #aeb5c0;
}

.dak-step-slider-dots button.is-active {
    width: 20px;
    background: var(--fs-color-primary);
    border-radius: 20px;
}

.dak-step-slider-arrow {
    width: var(--dak-arrow-size);
    height: var(--dak-arrow-size);
    min-width: var(--dak-arrow-size);
    min-height: var(--dak-arrow-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 50%;
    background: #fff !important;
    color: var(--fs-color-primary) !important;
    box-shadow: 0 8px 28px rgba(20, 35, 70, .10) !important;
    cursor: pointer;
    opacity: 1;
    transition: transform .22s ease, box-shadow .22s ease, opacity .22s ease, background-color .22s ease, color .22s ease;
    line-height: 1;
}

.dak-step-slider-arrow i {
    display: block;
    font-size: var(--dak-arrow-icon-size);
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    pointer-events: none;
}

.dak-step-slider-arrow:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 32px rgba(20, 35, 70, .15) !important;
}

.dak-step-slider-arrow:disabled {
    opacity: .35;
    cursor: default;
    transform: none;
    box-shadow: 0 6px 20px rgba(20, 35, 70, .07) !important;
}

/* Arrow backgrounds. Auto preserves the old behavior. */
.dak-step-slider-controls.dak-arrow-bg-auto .dak-step-slider-arrow,
.dak-step-slider-controls.dak-arrow-bg-white .dak-step-slider-arrow {
    background: #fff !important;
    color: var(--fs-color-primary) !important;
}

.dak-step-slider-controls.dak-arrow-bg-transparent .dak-step-slider-arrow {
    background: transparent !important;
    color: var(--fs-color-primary) !important;
    box-shadow: none !important;
}

.dak-step-slider-controls.dak-arrow-bg-light-glass .dak-step-slider-arrow {
    background: rgba(255, 255, 255, .72) !important;
    color: var(--fs-color-primary) !important;
    border: 1px solid rgba(255, 255, 255, .48) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.dak-step-slider-controls.dak-arrow-bg-dark-glass .dak-step-slider-arrow {
    background: rgba(18, 24, 34, .66) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.dak-step-slider-controls.dak-arrow-bg-primary .dak-step-slider-arrow {
    background: var(--fs-color-primary) !important;
    color: #fff !important;
}

.dak-step-slider-controls.dak-arrow-bg-custom .dak-step-slider-arrow {
    background: var(--dak-arrow-custom-bg) !important;
    color: var(--fs-color-primary) !important;
}

.dak-step-slider-controls.dak-arrow-bg-transparent .dak-step-slider-arrow:hover {
    background: rgba(0, 0, 0, .045) !important;
}

.dak-step-slider-controls.dak-arrow-bg-light-glass .dak-step-slider-arrow:hover {
    background: rgba(255, 255, 255, .90) !important;
}

.dak-step-slider-controls.dak-arrow-bg-dark-glass .dak-step-slider-arrow:hover {
    background: rgba(18, 24, 34, .82) !important;
}

.dak-step-slider-controls.dak-arrow-bg-primary .dak-step-slider-arrow:hover,
.dak-step-slider-controls.dak-arrow-bg-custom .dak-step-slider-arrow:hover {
    filter: brightness(.96);
}

/* Explicit icon color always wins over background auto color. */
.dak-step-slider-controls.dak-arrow-color-primary .dak-step-slider-arrow {
    color: var(--fs-color-primary) !important;
}

.dak-step-slider-controls.dak-arrow-color-white .dak-step-slider-arrow {
    color: #fff !important;
}

.dak-step-slider-controls.dak-arrow-color-dark .dak-step-slider-arrow {
    color: #222 !important;
}

.dak-step-slider-controls.dak-arrow-color-custom .dak-step-slider-arrow {
    color: var(--dak-arrow-custom-color) !important;
}

/* Row > Layout > Color = Light only affects Auto/Transparent modes. */
.slider-dak-step-c.dak-controls-light + .dak-step-slider-controls.dak-arrow-bg-auto .dak-step-slider-arrow {
    background: rgba(255, 255, 255, .14) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .28) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .16) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.slider-dak-step-c.dak-controls-light + .dak-step-slider-controls.dak-arrow-bg-auto .dak-step-slider-arrow:hover {
    background: rgba(255, 255, 255, .24) !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, .22) !important;
}

.slider-dak-step-c.dak-controls-light + .dak-step-slider-controls.dak-arrow-bg-transparent .dak-step-slider-arrow {
    color: #fff !important;
}

.slider-dak-step-c.dak-controls-light + .dak-step-slider-controls.dak-arrow-bg-transparent .dak-step-slider-arrow:hover {
    background: rgba(255, 255, 255, .12) !important;
}

.slider-dak-step-c.dak-controls-light + .dak-step-slider-controls .dak-step-slider-dots button {
    background: rgba(255, 255, 255, .35);
}

.slider-dak-step-c.dak-controls-light + .dak-step-slider-controls .dak-step-slider-dots button:hover {
    background: rgba(255, 255, 255, .60);
}

.slider-dak-step-c.dak-controls-light + .dak-step-slider-controls .dak-step-slider-dots button.is-active {
    background: #fff;
}

/* Explicit icon color still wins in a Light layout. */
.slider-dak-step-c.dak-controls-light + .dak-step-slider-controls.dak-arrow-color-primary .dak-step-slider-arrow {
    color: var(--fs-color-primary) !important;
}

.slider-dak-step-c.dak-controls-light + .dak-step-slider-controls.dak-arrow-color-white .dak-step-slider-arrow {
    color: #fff !important;
}

.slider-dak-step-c.dak-controls-light + .dak-step-slider-controls.dak-arrow-color-dark .dak-step-slider-arrow {
    color: #222 !important;
}

.slider-dak-step-c.dak-controls-light + .dak-step-slider-controls.dak-arrow-color-custom .dak-step-slider-arrow {
    color: var(--dak-arrow-custom-color) !important;
}

/* Position preset: Bottom Center = legacy prev / dots / next row. */
.dak-step-slider-controls.dak-arrow-pos-bottom-center {
    justify-content: center;
}

/* Position preset: Bottom Right. Dots stay available on the left. */
.dak-step-slider-controls.dak-arrow-pos-bottom-right {
    justify-content: flex-end;
}

.dak-step-slider-controls.dak-arrow-pos-bottom-right .dak-step-slider-dots {
    margin-right: auto;
}

/* Overlay positions use the same controls element, avoiding wrapper markup. */
.dak-step-slider-controls.dak-arrow-pos-middle-sides .dak-step-slider-arrow,
.dak-step-slider-controls.dak-arrow-pos-top-right .dak-step-slider-arrow {
    position: absolute;
    z-index: 20;
}

.dak-step-slider-controls.dak-arrow-pos-middle-sides .dak-step-slider-arrow {
    top: var(--dak-arrow-middle-top);
    transform: translateY(-50%);
}

.dak-step-slider-controls.dak-arrow-pos-middle-sides .dak-step-slider-arrow:hover {
    transform: translateY(calc(-50% - 1px));
}

.dak-step-slider-controls.dak-arrow-pos-middle-sides .dak-step-slider-arrow.is-prev {
    left: 8px;
}

.dak-step-slider-controls.dak-arrow-pos-middle-sides .dak-step-slider-arrow.is-next {
    right: 8px;
}

.dak-step-slider-controls.dak-arrow-pos-top-right .dak-step-slider-arrow {
    top: var(--dak-arrow-top-top);
}

.dak-step-slider-controls.dak-arrow-pos-top-right .dak-step-slider-arrow.is-next {
    right: 12px;
}

.dak-step-slider-controls.dak-arrow-pos-top-right .dak-step-slider-arrow.is-prev {
    right: calc(var(--dak-arrow-size) + 20px);
}

.dak-step-slider-controls.dak-arrow-pos-middle-sides.is-dots-hidden,
.dak-step-slider-controls.dak-arrow-pos-top-right.is-dots-hidden {
    height: 0;
    margin-top: 0;
    gap: 0;
}

@media (max-width: 849px) {
    .slider-dak-step-c {
        --dak-gap: var(--dak-gap-tablet, 12px);
        --dak-item-width: var(--dak-item-width-tablet, calc(40% - 7.2px));
    }

    .slider-dak-step-c.show-2-5,
    .slider-dak-step-c.show-3-5,
    .slider-dak-step-c.show-4-5,
    .slider-dak-step-c.show-5-5,
    .slider-dak-step-c.show-6-5 {
        --dak-item-width-tablet: calc(40% - (var(--dak-gap) * .6));
    }
}

@media (max-width: 549px) {
    .slider-dak-step-c {
        --dak-gap: var(--dak-gap-mobile, 10px);
        --dak-item-width: var(--dak-item-width-mobile, calc(66.6667% - 3.33px));
    }

    .slider-dak-step-c.mobile-1-25 {
        --dak-item-width-mobile: calc(80% - (var(--dak-gap) * .2));
    }

    .slider-dak-step-c.mobile-1-5 {
        --dak-item-width-mobile: calc(66.666667% - (var(--dak-gap) * .333333));
    }

    .slider-dak-step-c.mobile-2 {
        --dak-item-width-mobile: calc(50% - (var(--dak-gap) * .5));
    }

    .slider-dak-step-c.mobile-2-5 {
        --dak-item-width-mobile: calc(40% - (var(--dak-gap) * .6));
    }

    .slider-dak-step-c.mobile-3 {
        --dak-item-width-mobile: calc(33.333333% - (var(--dak-gap) * .666667));
    }

    .slider-dak-step-c.mobile-3-5 {
        --dak-item-width-mobile: calc(28.571429% - (var(--dak-gap) * .714286));
    }

    .dak-step-slider-controls {
        gap: 10px;
        margin-top: 18px;
    }

    .dak-step-slider-controls.dak-arrow-pos-middle-sides .dak-step-slider-arrow.is-prev {
        left: 6px;
    }

    .dak-step-slider-controls.dak-arrow-pos-middle-sides .dak-step-slider-arrow.is-next {
        right: 6px;
    }

    .dak-step-slider-controls.dak-arrow-pos-top-right .dak-step-slider-arrow.is-next {
        right: 8px;
    }

    .dak-step-slider-controls.dak-arrow-pos-top-right .dak-step-slider-arrow.is-prev {
        right: calc(var(--dak-arrow-size) + 14px);
    }
}


/* v12.9.13 shared Row/DAK control refinements */
.dak-step-slider-controls{
    transform:translate(var(--dak-arrow-offset-x,0px),var(--dak-arrow-offset-y,0px));
}
.dak-step-slider-controls .dak-step-slider-dots{
    gap:var(--dak-dot-gap,7px);
}
.dak-step-slider-controls .dak-step-slider-dots button{
    width:var(--dak-dot-size,8px)!important;
    height:var(--dak-dot-size,8px)!important;
    min-width:var(--dak-dot-size,8px)!important;
    min-height:var(--dak-dot-size,8px)!important;
    max-width:var(--dak-dot-size,8px)!important;
    max-height:var(--dak-dot-size,8px)!important;
    padding:0!important;
    border-radius:50%!important;
    aspect-ratio:1/1!important;
}
.dak-step-slider-controls.dak-dot-style-circle .dak-step-slider-dots button.is-active{
    width:var(--dak-dot-size,8px)!important;
    min-width:var(--dak-dot-size,8px)!important;
    max-width:var(--dak-dot-size,8px)!important;
    border-radius:50%!important;
}
.dak-step-slider-controls.dak-dot-style-wide .dak-step-slider-dots button.is-active{
    width:calc(var(--dak-dot-size,8px) * 2.5)!important;
    min-width:calc(var(--dak-dot-size,8px) * 2.5)!important;
    max-width:calc(var(--dak-dot-size,8px) * 2.5)!important;
    border-radius:999px!important;
    aspect-ratio:auto!important;
}
.dak-step-slider-controls.dak-dot-color-primary .dak-step-slider-dots button{background:var(--fs-color-primary)!important;opacity:.35}
.dak-step-slider-controls.dak-dot-color-primary .dak-step-slider-dots button.is-active{opacity:1}
.dak-step-slider-controls.dak-dot-color-white .dak-step-slider-dots button{background:#fff!important;opacity:.45}
.dak-step-slider-controls.dak-dot-color-white .dak-step-slider-dots button.is-active{opacity:1}
.dak-step-slider-controls.dak-dot-color-dark .dak-step-slider-dots button{background:#222!important;opacity:.35}
.dak-step-slider-controls.dak-dot-color-dark .dak-step-slider-dots button.is-active{opacity:1}
.dak-step-slider-controls.dak-dot-color-custom .dak-step-slider-dots button{background:var(--dak-dot-custom-color,#111)!important;opacity:.35}
.dak-step-slider-controls.dak-dot-color-custom .dak-step-slider-dots button.is-active{opacity:1}