/* ── ARO Shipping Toggle – Switch Styles ──────────────────────────────────── */

.aro-shipping-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.aro-shipping-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

/* Track */
.aro-shipping-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.12);
    border-radius: 24px;
    transition: background-color 0.2s ease;
}

/* Knob */
.aro-shipping-toggle-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Active state – uses UIkit primary color variable if available */
.aro-shipping-toggle-switch input:checked + .aro-shipping-toggle-slider {
    background-color: var(--uk-leader-fill-content, #1e87f0);
}

.aro-shipping-toggle-switch input:checked + .aro-shipping-toggle-slider::before {
    transform: translateX(20px);
}

/* Focus ring for accessibility */
.aro-shipping-toggle-switch input:focus-visible + .aro-shipping-toggle-slider {
    outline: 2px solid var(--uk-leader-fill-content, #1e87f0);
    outline-offset: 2px;
}

/* Label */
.aro-shipping-toggle-label {
    font-size: 0.9rem;
    line-height: 1.4;
}

/* ── Synced shipping fields: visual hint ──────────────────────────────────── */
[data-aro-shipping-synced] {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.25s ease;
}