/*
Theme Name:  CoursLancer Child
Description: القالب الفرعي الرسمي لمنصة CoursLancer — دروسك أينما كنت
Template:    listinghive
Version:     1.0
Author:      CoursLancer
Text Domain: courslancer
*/

/* ملاحظة: @import يجب أن يبقى أول سطر بعد الترويسة — لا تنقله للأسفل */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=Tajawal:wght@300;400;500;700&display=swap');

/* ══════════════════════════════════════════════
   الخطوط العربية — Cairo للعناوين / Tajawal للنصوص
   ══════════════════════════════════════════════ */
body {
    font-family: 'Tajawal', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Cairo', sans-serif;
}

/* ══════════════════════════════════════════════
   ألوان CoursLancer الرسمية
   بنفسجي #6C3FC5 | داكن #3D1F8A | ذهبي #F5A623 | أخضر #27AE60
   ملاحظة: اللون الرئيسي يُضبط أيضاً من
   Appearance → Customize → Colors (الأضمن في ListingHive)
   ══════════════════════════════════════════════ */

/* الأزرار الرئيسية */
button,
input[type="submit"],
.hp-form__button,
.header-navbar__cta a {
    background-color: #6C3FC5 !important;
    border-color: #6C3FC5 !important;
    color: #ffffff !important;
}

button:hover,
input[type="submit"]:hover,
.hp-form__button:hover {
    background-color: #3D1F8A !important;
    border-color: #3D1F8A !important;
}

/* الروابط */
a {
    color: #6C3FC5;
}
a:hover {
    color: #3D1F8A;
}

/* زر الحجز — بالذهبي لتمييزه (CTA) */
.hp-listing__action--booking,
.hp-booking-button {
    background-color: #F5A623 !important;
    border-color: #F5A623 !important;
    color: #ffffff !important;
}
.hp-listing__action--booking:hover,
.hp-booking-button:hover {
    background-color: #d98f15 !important;
    border-color: #d98f15 !important;
}

/* شارة "حساب موثوق" */
.cl-verified-badge {
    display: inline-block;
    background: #27AE60;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 12px;
}

/* شارة "لم يتسنَّ التأكد" */
.cl-unverified-badge {
    display: inline-block;
    background: #F5A623;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 12px;
}

/* ══════════════════════════════════════════════
   إصلاح وضوح النصوص العربية في النماذج
   المشكلة: القالب يطبّق حجماً صغيراً ولوناً باهتاً
   وتباعد حروف يشتّت الكلمات العربية المتصلة
   ══════════════════════════════════════════════ */

/* عناوين الحقول في كل النماذج */
.hp-form label,
.hp-field__label,
.hp-form__field label,
form label {
    font-family: 'Cairo', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #2C3E50 !important;
    letter-spacing: normal !important;   /* حاسم للعربية */
    text-transform: none !important;     /* يمنع تشويه الحروف */
    line-height: 1.9 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* النصوص التوضيحية تحت الحقول */
.hp-field__description,
.hp-form__field-description,
.description,
small {
    font-family: 'Tajawal', sans-serif !important;
    font-size: 13.5px !important;
    color: #5A6C7D !important;
    letter-spacing: normal !important;
    line-height: 1.8 !important;
}

/* كلمة (اختياري) — تظل أخف لكن مقروءة */
.hp-field__label small,
label small {
    font-size: 12.5px !important;
    color: #7F8C8D !important;
    font-weight: 400 !important;
}

/* حقول الإدخال نفسها */
.hp-form input[type="text"],
.hp-form input[type="number"],
.hp-form input[type="url"],
.hp-form input[type="email"],
.hp-form textarea,
.hp-form select,
input[type="text"],
input[type="number"],
textarea,
select {
    font-family: 'Tajawal', sans-serif !important;
    font-size: 15px !important;
    color: #2C3E50 !important;
    line-height: 1.8 !important;
    padding: 10px 12px !important;
}

/* عناوين الأقسام */
.hp-form__title,
.hp-page__title,
h1, h2, h3 {
    font-family: 'Cairo', sans-serif !important;
    letter-spacing: normal !important;
}

/* النص العربي داخل القوائم المنسدلة */
select option {
    font-family: 'Tajawal', sans-serif !important;
    font-size: 15px !important;
    padding: 6px !important;
}

/* رسائل الخطأ — يجب أن تكون واضحة تماماً */
.hp-form__error,
.hp-field__error {
    font-family: 'Tajawal', sans-serif !important;
    font-size: 14px !important;
    color: #C0392B !important;
    font-weight: 500 !important;
}

/* ══════════════════════════════════════════════
   ضبط اتجاه RTL للنصوص العربية داخل النماذج
   ══════════════════════════════════════════════ */
.hp-form label,
.hp-field__description {
    direction: rtl;
    text-align: right;
}

/* استثناء: الحقول التي تحتوي روابط أو أرقام تبقى LTR */
input[type="url"],
input[type="email"],
input[type="number"] {
    direction: ltr;
    text-align: left;
}

/* ══════════════════════════════════════════════
   إصلاح شامل v3 — كل عناوين الحقول في الموقع
   يشمل: النماذج، الإعدادات، تسجيل الدخول، النوافذ المنبثقة
   المشكلة الأصلية: ListingHive يستخدم رمادي فاتح
   بحجم صغير و letter-spacing واسع لكل العناوين
   ══════════════════════════════════════════════ */

/* كل label في الموقع بلا استثناء */
label,
.hp-field__label,
.hp-form__field > label,
.hp-modal label,
.hp-form label span,
form label,
th label {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1F2D3D !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.9 !important;
    opacity: 1 !important;
}

/* كلمة (اختياري) / (OPTIONAL) */
label small,
.hp-field__label small,
label em,
label .optional {
    font-size: 12px !important;
    color: #8A94A0 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}

/* الأوصاف تحت الحقول */
.hp-field__description,
.description,
.hp-form__description,
small,
p.description {
    font-size: 14px !important;
    color: #4A5568 !important;
    letter-spacing: 0 !important;
    line-height: 1.85 !important;
    opacity: 1 !important;
}

/* كل حقول الإدخال */
input,
textarea,
select,
.hp-field input,
.hp-field textarea,
.hp-field select {
    font-size: 15px !important;
    color: #1F2D3D !important;
    line-height: 1.7 !important;
    letter-spacing: 0 !important;
}

/* النص الشبح داخل الحقول */
input::placeholder,
textarea::placeholder {
    color: #A0AEC0 !important;
    opacity: 1 !important;
    font-size: 14px !important;
}

/* عناوين الصفحات والأقسام */
h1, h2, h3, h4, h5, h6,
.hp-page__title,
.hp-modal__title,
.hp-form__title {
    letter-spacing: 0 !important;
    color: #1A202C !important;
}

/* روابط القوائم الجانبية */
.hp-menu a,
.hp-menu__item a {
    font-size: 15px !important;
    letter-spacing: 0 !important;
}

/* الأزرار */
button,
.hp-button,
input[type="submit"] {
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

/* ══════════════════════════════════════════════
   ضبط اتجاه النصوص حسب اللغة
   ══════════════════════════════════════════════ */

/* الحقول التقنية تبقى من اليسار */
input[type="email"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="tel"] {
    direction: ltr !important;
    text-align: left !important;
}