/* استيراد خطوط جوجل (تم إضافة أوزان إضافية للتنوع) */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

/* ==========================================
   1. تخصيص شريط التمرير (Scrollbar) للكمبيوتر
   ========================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9; /* لون رمادي فاتح للخلفية */
}

.dark ::-webkit-scrollbar-track {
    background: #121212; /* لون الخلفية في الدارك مود */
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* لون الشريط */
    border-radius: 10px;
    transition: background 0.2s;
}

.dark ::-webkit-scrollbar-thumb {
    background: #3f3f46; /* لون الشريط في الدارك مود */
}

::-webkit-scrollbar-thumb:hover {
    background: #18568C; /* اللون الأساسي للموقع عند المرور بالماوس */
}

/* ==========================================
   2. إخفاء شريط التمرير الأفقي للأقسام (للموبايل)
   ========================================== */
.hide-scrollbar::-webkit-scrollbar { 
    display: none; 
}
.hide-scrollbar { 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}

/* ==========================================
   3. التحسينات العامة والأساسية
   ========================================== */
html {
    scroll-behavior: smooth; /* تمرير ناعم عند الضغط على روابط نفس الصفحة */
}

body {
    -webkit-tap-highlight-color: transparent; /* إزالة الوميض الأزرق عند الضغط على الموبايل */
    
    /* تنعيم الخطوط لتظهر بشكل حاد وواضح (Antialiasing) */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* تخصيص لون تحديد النص (Text Selection) */
::selection {
    background: #18568C;
    color: #ffffff;
}
::-moz-selection {
    background: #18568C;
    color: #ffffff;
}

/* تحسين بسيط للروابط لتكون الاستجابة أسرع على الموبايل */
a, button {
    -webkit-touch-callout: none; /* منع ظهور قائمة الضغط المطول على الروابط في الآيفون */
    user-select: none;
}
/* تنسيق التحديد لباقات المتجر */
input[type="radio"]:checked + .package-card {
    border-color: #3b82f6 !important;
    background-color: rgba(59, 130, 246, 0.05) !important;
}
input[type="radio"]:checked + .package-card .check-icon {
    opacity: 1 !important;
    transform: scale(1) !important;
}