/* ─── Dot/Pagination Style Variants ─── */

/* Default — circular dots (base styles in pagination.css) */

/* Line — horizontal rectangles */
.embla-slider[data-dot-style="line"] .embla-dots__btn {
    width:          24px;
    height:         3px;
    border-radius:  2px;
}
.embla-slider[data-dot-style="line"] .embla-dots__btn.is-active {
    transform:  scaleX(1.5);
    background: var(--dot-color-active);
}

/* Dash — short dashes with fill animation */
.embla-slider[data-dot-style="dash"] .embla-dots__btn {
    width:          16px;
    height:         4px;
    border-radius:  2px;
    position:       relative;
    overflow:       hidden;
    background:     var(--dot-color);
}
.embla-slider[data-dot-style="dash"] .embla-dots__btn.is-active {
    background: var(--dot-color-active);
    transform:  none;
}

/* Number — shows slide index numbers */
.embla-slider[data-dot-style="number"] .embla-dots__btn {
    width:          24px;
    height:         24px;
    border-radius:  50%;
    font-size:      11px;
    font-weight:    600;
    font-family:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color:          var(--dot-color-active, #fff);
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
    background:     var(--dot-color);
}
.embla-slider[data-dot-style="number"] .embla-dots__btn.is-active {
    background: var(--dot-color-active);
    color:      var(--nav-btn-bg, rgba(0, 0, 0, 0.8));
    transform:  none;
}

/* Outline — ring/outline dots */
.embla-slider[data-dot-style="outline"] .embla-dots__btn {
    width:          12px;
    height:         12px;
    border-radius:  50%;
    background:     transparent;
    border:         2px solid var(--dot-color, rgba(255, 255, 255, 0.5));
}
.embla-slider[data-dot-style="outline"] .embla-dots__btn.is-active {
    background:   var(--dot-color-active, #fff);
    border-color: var(--dot-color-active, #fff);
    transform:    none;
}