/*
 Theme Name:   Tutor Starter Child
 Theme URI:    https://example.com/
 Description:  Child theme for Tutor Starter
 Author:       Your Name
 Author URI:   https://example.com/
 Template:     tutorstarter
 Version:      1.0.0
*/


/* ==========================================================================
   1. تغيير المتغيرات الأساسية لـ Tutor LMS (عشان يجبر النظام يغير ألوانه)
   ========================================================================== */
:root {
    --tutor-body-color: #FFFFFF !important;
    --tutor-primary-color: #F4C95D !important; /* الذهبي */
    --tutor-secondary-color: #38D9FF !important; /* التكنو سيان */
    --tutor-border-color: #26345E !important;
}

/* ==========================================================================
   2. الخلفيات العامة للصفحة (عشان نمنع اللون الأبيض)
   ========================================================================== */
body, 
html,
.site, 
#page,
.tutor-course-archive,
.tutor-wrap {
    background-color: #0B1026 !important;
}

/* ==========================================================================
   3. إصلاح النصوص اللي بقت غامقة ومش باينة
   ========================================================================== */
/* عناوين الكورسات */
.tutor-course-card .tutor-course-title, 
.tutor-course-card .tutor-course-title a {
    color: #FFFFFF !important;
}

/* عناوين الفلاتر (Category, Tag) */
.tutor-widget-title, 
.widget-title,
.tutor-course-filter-wrapper h4 {
    color: #F4C95D !important; /* ذهبي */
}

/* النصوص بتاعة الفلاتر */
.tutor-course-filter-wrapper label,
.tutor-course-filter-wrapper a,
.tutor-course-card .tutor-course-meta a,
.tutor-course-card .tutor-course-meta span {
    color: #A8B0C7 !important; /* رمادي فاتح */
}

/* نصوص الـ Pagination */
.tutor-pagination-wrapper, 
.tutor-pagination-wrapper .page-numbers {
    color: #FFFFFF !important;
}

/* ==========================================================================
   4. إصلاح خلفيات شريط البحث والـ Dropdown (اللي لسه بيضاء)
   ========================================================================== */
.tutor-course-filter-wrapper input[type="text"],
.tutor-course-filter-wrapper select,
select.tutor-form-select,
input.tutor-form-control,
.tutor-form-control{
    background-color: #151F42 !important; /* لون الكارد الغامق */
    color: #FFFFFF !important;
    border: 1px solid #26345E !important;
    border-radius: 8px !important;
}

/* عشان سهم الـ Dropdown يبان */
.tutor-course-filter-wrapper select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 1em !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* ==========================================================================
   5. الكروت (Cards) والحدود
   ========================================================================== */
.tutor-course-card, .tutor-card {
    background-color: #151F42 !important;
    border: 1px solid #26345E !important;
    border-radius: 12px !important;
}

/* زر Start Learning */
.tutor-course-card .tutor-btn {
    background-color: transparent !important;
    border: 1px solid #38D9FF !important;
    color: #38D9FF !important;
}
.tutor-course-card .tutor-btn:hover {
    background-color: #38D9FF !important;
    color: #0B1026 !important;
}

/* ==========================================================================
   6. الـ Checkboxes (المربعات جنب أسماء الفلاتر)
   ========================================================================== */
.tutor-course-filter-wrapper input[type="checkbox"] {
    accent-color: #38D9FF !important;
    background-color: #151F42 !important;
    border: 1px solid #26345E !important;
}

/* ==========================================================================
   1. إصلاح القائمة المنسدلة (Custom Dropdown) من الصورة التالتة
   ========================================================================== */
/* الخلفية والنص بتاع القائمة اللي بتفتح */
.tutor-form-select-dropdown {
    background-color: #151F42 !important; /* لون الكارد الغامق */
    border: 1px solid #26345E !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

/* كل خيار جوه القائمة */
.tutor-form-select-option {
    color: #A8B0C7 !important; /* رمادي فاتح */
    padding: 10px 15px !important;
    border-bottom: 1px solid #26345E !important;
    transition: all 0.3s ease;
}

/* الخيار اللي إنت واقف عليه بالماوس */
.tutor-form-select-option:hover {
    background-color: #26345E !important;
    color: #FFFFFF !important;
}

/* الخيار المحدد حالياً (اللي فيه كلاس is-active) */
.tutor-form-select-option.is-active {
    background-color: #38D9FF !important; /* تكنو سيان */
    color: #0B1026 !important; /* نص غامق عشان يبان */
    font-weight: bold;
}
/* تغيير لون السهم اللي في القايمة */
.tutor-form-select-dropdown svg {
    stroke: #FFFFFF !important;
}

/* ==========================================================================
   2. تظبيط شكل المربعات (Checkboxes) في الفلتر الجانبي
   ========================================================================== */
/* إخفاء الشكل الافتراضي للمتصفح */
.tutor-course-filter-wrapper input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    background-color: #151F42 !important;
    border: 1px solid #26345E !important;
    border-radius: 4px !important;
    cursor: pointer;
    position: relative;
    margin-right: 10px !important;
    vertical-align: middle;
    display: inline-block;
    transition: all 0.3s ease;
}

/* لما تحط علامة صح */
.tutor-course-filter-wrapper input[type="checkbox"]:checked {
    background-color: #38D9FF !important; /* تكنو سيان */
    border-color: #38D9FF !important;
}

/* شكل علامة الصح */
.tutor-course-filter-wrapper input[type="checkbox"]:checked::after {
    content: '✔';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #0B1026 !important; /* علامة الصح غامقة */
    font-size: 12px;
    font-weight: bold;
}

/* تغيير لون النص جنب المربع */
.tutor-course-filter-wrapper label {
    color: #FFFFFF !important;
    cursor: pointer;
    font-size: 15px;
}

/* ==========================================================================
   3. إضافة مسافات (Margins & Padding)
   ========================================================================== */
/* مسافة تحت قسم الـ Filters بالكامل عشان ميبقاش لازق في آخر الصفحة */
.tutor-course-filter-wrapper {
    margin-bottom: 50px !important;
}

/* مسافة بين كل قسم والتاني (Category, Tag, Level) */
.tutor-course-filter-wrapper .tutor-widget {
    margin-bottom: 35px !important;
}

/* مسافة تحت زر Clear All Filters */
.tutor-course-filter-wrapper .tutor-course-filter-reset-btn,
.tutor-course-filter-wrapper button {
    margin-top: 15px !important;
    margin-bottom: 20px !important;
}

/* تكبير عرض الحاوية الأساسية لـ Tutor LMS */
@media (min-width: 1400px) {
    .tutor-container-xxl, 
    .tutor-container-xl, 
    .tutor-container-lg, 
    .tutor-container-md, 
    .tutor-container-sm, 
    .tutor-container {
        max-width: 1465px !important;
    }
}