/* ==========================================
   RboujAPP COD Pro - Custom Bootstrap Tweaks
   ========================================== */

/* 1. ضبط الاتجاه والتنسيق العام */
.rbouj-cod-card {
    direction: rtl !important;
    text-align: right !important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}

/* 2. الحدود المنقطة للعنوان */
.border-dashed {
    border-style: dashed !important;
}

/* 3. تنسيق أزرار المقاسات المختارة */
.rbouj-swatch-btn.active-swatch {
    background-color: #198754 !important;
    color: #ffffff !important;
    border-color: #198754 !important;
    box-shadow: 0 4px 10px rgba(25, 135, 84, 0.25) !important;
}

/* 4. تخصيص زر تأكيد الطلب المتحرك (Pulsing Button) */
.rbouj-pulse-btn {
    background: linear-gradient(135deg, #198754 0%, #146c43 100%) !important;
    border: none !important;
    font-size: 1.15rem !important;
    animation: rboujPulse 1.8s infinite;
    transition: all 0.3s ease;
}

.rbouj-pulse-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(25, 135, 84, 0.4) !important;
}

/* 5. حركة النبض المستمرة للزر */
@keyframes rboujPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.7);
    }
    70% {
        transform: scale(1.03);
        box-shadow: 0 0 0 14px rgba(25, 135, 84, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(25, 135, 84, 0);
    }
}

/* 6. تحسين حقول المدخلات على الموبايل */
.rbouj-cod-card .form-control:focus {
    border-color: #198754 !important;
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25) !important;
}