/* Toggle Control Styles for Customizer */
.customize-control-toggle {
    margin: 10px 0;
}

.customize-control-toggle .toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    background: #ccc; /* ثابت: اللون الرمادي عند الإيقاف */
    border-radius: 10px;
    vertical-align: middle;
    cursor: pointer;
    transition: background 0.3s ease; /* ثابت: الانتقال */
}

/* Accessibility for Toggle Switch */
.customize-control-toggle .toggle-switch:focus {
    outline: 2px solid #007bff; /* ثابت: لون هوية الموقع */
    outline-offset: 2px;
}

.customize-control-toggle input[type="checkbox"] {
    display: none;
}

.customize-control-toggle .toggle-switch::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: #fff; /* ثابت: لون الدائرة */
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.3s ease;
}

.customize-control-toggle input:checked + .toggle-switch {
    background: #007bff; /* ثابت: اللون الأحمر عند التفعيل */
}

.customize-control-toggle input:checked + .toggle-switch::before {
    transform: translateX(20px);
}

/* RTL Support for Toggle Switch */
body.rtl .customize-control-toggle .toggle-switch::before {
    left: auto;
    right: 2px;
}

body.rtl .customize-control-toggle input:checked + .toggle-switch::before {
    transform: translateX(-20px);
}