/* ─── Arrow Style Variants ─── */

/* Default — circle background (base styles in navigation.css) */

/* Rounded — pill shape, larger */
.embla-slider[data-arrow-style="rounded"] {
    --nav-btn-size: 52px;
}
.embla-slider[data-arrow-style="rounded"] .embla-btn {
    border-radius:  22px;
    width:          52px;
    height:         44px;
    background:     var(--nav-btn-bg);
}

/* Minimal — no background, just the icon */
.embla-slider[data-arrow-style="minimal"] {
    --nav-btn-size: 44px;
}
.embla-slider[data-arrow-style="minimal"] .embla-btn {
    background:     transparent;
    width:          auto;
    height:         auto;
    padding:        8px;
}
.embla-slider[data-arrow-style="minimal"] .embla-btn:hover {
    filter:     none;
    opacity:    0.6;
    background: transparent;
}
.embla-slider[data-arrow-style="minimal"] .embla-btn svg {
    width:  28px;
    height: 28px;
}

/* Outline — border only, transparent background */
.embla-slider[data-arrow-style="outline"] .embla-btn {
    background:   transparent;
    border:       2px solid var(--nav-btn-color, #fff);
    color:        var(--nav-btn-color, #fff);
}
.embla-slider[data-arrow-style="outline"] .embla-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Circle — larger circle with subtle border */
.embla-slider[data-arrow-style="circle"] {
    --nav-btn-size: 50px;
}
.embla-slider[data-arrow-style="circle"] .embla-btn {
    width:         50px;
    height:        50px;
    border-radius: 50%;
    background:    var(--nav-btn-bg);
    border:        2px solid rgba(255, 255, 255, 0.2);
}
.embla-slider[data-arrow-style="circle"] .embla-btn:hover {
    border-color: rgba(255, 255, 255, 0.5);
}