html:root,
html body {
/* ---- متغيراتنا (الهوية) ---- */
--wa-bg: #081727;
--wa-bg-deep: #06111f;
--wa-bg-soft: #0a1b2c;
--wa-card: #0d1f31;
--wa-card-light: #12263a;
--wa-card-hover: #162c42;
--wa-field: #071624;
--wa-border: #294056;
--wa-border-soft: rgba(255, 255, 255, 0.08);
--wa-border-strong: rgba(150, 178, 205, 0.34);
--wa-primary: #b8ff18;
--wa-primary-hover: #9ee000;
--wa-primary-soft: rgba(184, 255, 24, 0.09);
--wa-secondary: #df2f70;
--wa-text: #ffffff;
--wa-text-soft: #c5cfda;
--wa-text-muted: #8393a5;
--wa-success: #38d36f;
--wa-warning: #ffbf3f;
--wa-danger: #ff5a78;
--wa-info: #4f7cff;
--wa-radius-sm: 9px;
--wa-radius-md: 14px;
--wa-radius-lg: 20px;
--wa-radius-xl: 24px;
--wa-shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.18);
--wa-shadow-md: 0 20px 45px rgba(0, 0, 0, 0.26);
--wa-shadow-lg: 0 28px 65px rgba(0, 0, 0, 0.34);
--wa-font: "Cairo", "Tajawal", sans-serif;
/* ---- إعادة تعريف متغيرات Tutor الرسمية ---- */
/* المصدر: classes/Assets.php :: load_color_palette() */
--tutor-color-primary: #b8ff18;
--tutor-color-primary-rgb: 184, 255, 24;
--tutor-color-primary-hover: #9ee000;
--tutor-color-primary-hover-rgb: 158, 224, 0;
--tutor-body-color: #ffffff;
--tutor-body-color-rgb: 255, 255, 255;
--tutor-border-color: #294056;
--tutor-border-color-rgb: 41, 64, 86;
--tutor-color-gray: #294056;
--tutor-color-gray-rgb: 41, 64, 86;
/* المصدر: v2-library/src/scss/utility/_colors.scss */
/* ملاحظة مهمة: --tutor-color-white في السورس مستخدم كخلفية سطح
في ~28 موضع، لكنه مستخدم كمان كـ **لون نص** في ~10 مواضع (منها سطر
"عندك حساب بالفعل؟"). فلو خليناه داكن عشان نقلب الخلفيات، النصوص
دي بتختفي. القرار: يفضل أبيض، والخلفيات بتتقلب يدوي في الطبقات اللي تحت. */
--tutor-color-white: #ffffff;
--tutor-color-black: #ffffff;
--tutor-color-gray-10: #16293c;
--tutor-color-secondary: #c5cfda;
--tutor-color-subdued: #a9b6c4;
--tutor-color-hints: #8393a5;
--tutor-color-muted: #8393a5;
--tutor-color-success: #38d36f;
--tutor-color-success-rgb: 56, 211, 111;
--tutor-color-warning: #ffbf3f;
--tutor-color-warning-rgb: 255, 191, 63;
--tutor-color-danger: #ff5a78;
--tutor-color-danger-rgb: 255, 90, 120;
/* المتغيرين دول متعلّقين بالتعليق في السورس ومش متعرّفين أصلًا
(v2-library/elements/_input.scss) — فالحقول المعطّلة بتطلع شفافة */
--tutor-disabled-bg: rgba(255, 255, 255, 0.05);
--tutor-disabled-color: #6b7c8f;
/* أشكال */
--tutor-input-radius: 11px;
--tutor-button-radius: 11px;
--tutor-tab-radius: 10px;
--tutor-tab-radius-sm: 8px;
--tutor-text-size: 16px;
}
/* =========================================================================
01. BASE — خلفيات الصفحات وحاويات Tutor
========================================================================= */
body.tutor-frontend,
body.single-courses,
body.single-lesson,
body.single-tutor_quiz,
body.single-tutor_assignments,
body.tutor-screen-frontend-dashboard,
body.tutor-lms,
body[class*="tutor-page-"] {
color: var(--wa-text);
background:
radial-gradient(circle at 88% 6%, rgba(184, 255, 24, 0.045), transparent 30%),
radial-gradient(circle at 8% 28%, rgba(223, 47, 112, 0.035), transparent 26%),
var(--wa-bg) !important;
}
html body :is(
.tutor-wrap,
.tutor-container,
.tutor-container-fluid,
.tutor-row,
.tutor-course-details-page,
.tutor-dashboard,
.tutor-dashboard-layout,
.tutor-dashboard-page,
.tutor-course-single-content-wrapper
) {
color: var(--wa-text);
background-color: transparent;
}
html body .tutor-wrap img,
html body .tutor-wrap svg {
max-width: 100%;
}
/* حاويات بيضاء صريحة في السورس */
html body :is(.tutor-bg-white, .tutor-bg-light) {
background-color: var(--wa-card) !important;
}
html body .tutor-bg-transparent {
background-color: transparent !important;
}
/* سكرول بار داخل مناطق Tutor */
html body :is(.tutor-wrap, .tutor-dashboard, .tutor-modal, .tutor-offcanvas) ::-webkit-scrollbar {
width: 9px;
height: 9px;
}
html body :is(.tutor-wrap, .tutor-dashboard, .tutor-modal, .tutor-offcanvas) ::-webkit-scrollbar-track {
background: var(--wa-bg-deep);
}
html body :is(.tutor-wrap, .tutor-dashboard, .tutor-modal, .tutor-offcanvas) ::-webkit-scrollbar-thumb {
background: #2e4560;
border-radius: 50px;
}
html body :is(.tutor-wrap, .tutor-dashboard, .tutor-modal, .tutor-offcanvas) ::-webkit-scrollbar-thumb:hover {
background: rgba(184, 255, 24, 0.45);
}
/* =========================================================================
02. TYPOGRAPHY — Cairo + حماية خط الأيقونات
-------------------------------------------------------------------------
Tutor بيستخدم خط أيقونات اسمه "tutor". أي قاعدة font-family عامة على *
بتحوّل الأيقونات لمربعات فاضية — عشان كده بنستهدف عناصر النص بالاسم.
========================================================================= */
html body :is(
.tutor-wrap,
.tutor-container,
.tutor-dashboard,
.tutor-dashboard-layout,
.tutor-dashboard-page,
.tutor-modal,
.tutor-offcanvas,
.tutor-login-wrap,
.tutor-registration-wrap,
.tutor-course-card,
.tutor-course-list,
.tutor-course-loop,
.tutor-course-single-content-wrapper,
.tutor-checkout-page,
.tutor-cart-page,
#tutor-login-form,
#tutor-registration-wrap,
#tutor-registration-form
) {
font-family: var(--wa-font) !important;
letter-spacing: 0 !important;
}
html body :is(
.tutor-wrap,
.tutor-container,
.tutor-dashboard,
.tutor-dashboard-layout,
.tutor-dashboard-page,
.tutor-modal,
.tutor-offcanvas,
.tutor-login-wrap,
.tutor-registration-wrap,
.tutor-course-single-content-wrapper,
.tutor-checkout-page,
.tutor-cart-page,
#tutor-login-form,
#tutor-registration-form
) :is(
h1, h2, h3, h4, h5, h6,
p, a, span, div, label, small, strong, em, b,
button, input, textarea, select, option,
ul, ol, li, table, thead, tbody, tfoot, tr, th, td, caption, figcaption
) {
font-family: var(--wa-font) !important;
letter-spacing: 0 !important;
}
/* خط الأيقونات يرجع لنفسه — على العنصر و pseudo-elements */
html body :is([class^="tutor-icon-"], [class*=" tutor-icon-"]),
html body :is([class^="tutor-icon-"], [class*=" tutor-icon-"])::before,
html body :is([class^="tutor-icon-"], [class*=" tutor-icon-"])::after,
html body .tutor-custom-list-style li::before {
font-family: "tutor" !important;
font-style: normal !important;
font-weight: 400 !important;
font-variant: normal !important;
text-transform: none !important;
line-height: 1 !important;
letter-spacing: 0 !important;
speak: never;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html body :is(.dashicons, [class^="dashicons-"], [class*=" dashicons-"]) {
font-family: "dashicons" !important;
}
html body :is(.eicon, [class^="eicon-"], [class*=" eicon-"]) {
font-family: "eicons" !important;
}
/* العناوين */
html body :is(.tutor-wrap, .tutor-dashboard, .tutor-modal, .tutor-offcanvas)
:is(h1, h2, h3, h4, h5, h6, .tutor-h1, .tutor-h2, .tutor-h3, .tutor-h4, .tutor-h5, .tutor-h6) {
color: var(--wa-text) !important;
font-weight: 800 !important;
line-height: 1.5 !important;
}
/* كلاسات الألوان الجاهزة */
html body .tutor-color-black,
html body .tutor-text-black { color: var(--wa-text) !important; }
html body .tutor-color-secondary { color: var(--wa-text-soft) !important; }
html body :is(.tutor-color-muted, .tutor-color-hints, .tutor-color-subdued) { color: var(--wa-text-muted) !important; }
html body .tutor-color-primary { color: var(--wa-primary) !important; }
html body .tutor-color-success { color: var(--wa-success) !important; }
html body .tutor-color-warning { color: var(--wa-warning) !important; }
html body .tutor-color-danger { color: var(--wa-danger) !important; }
html body :is(.tutor-color-white, .tutor-text-white) { color: #ffffff !important; }
html body :is(.tutor-color-gray-10, .tutor-color-gray-20) { color: var(--wa-text-muted) !important; }
html body :is(.tutor-wrap, .tutor-dashboard, .tutor-modal) a {
transition:
color 0.25s ease,
background-color 0.25s ease,
border-color 0.25s ease,
transform 0.25s ease,
box-shadow 0.25s ease;
}
/* =========================================================================
03. BUTTONS
-------------------------------------------------------------------------
السورس بيكتب color:#ffffff صريح على .tutor-btn-primary وعلى hover
لكل الفاريانتس — وده أبيض على أخضر فسفوري = غير مقروء. بنقلبه داكن.
========================================================================= */
html body .tutor-btn,
html body button.tutor-btn,
html body a.tutor-btn {
min-height: 44px;
border-radius: var(--tutor-button-radius) !important;
font-family: var(--wa-font) !important;
font-weight: 700 !important;
line-height: 1.4;
transition:
color 0.22s ease,
background-color 0.22s ease,
border-color 0.22s ease,
transform 0.22s ease,
box-shadow 0.22s ease;
}
/* --- الزر الأساسي (خلفية فسفورية) --- */
html body :is(
.tutor-btn-primary,
button.tutor-btn-primary,
a.tutor-btn-primary,
.tutor-submit,
.tutor-bg-primary.tutor-btn,
.write-course-review-link-btn,
#tutor-login-form button[type="submit"],
#tutor-registration-form button[type="submit"],
.tutor-login-wrap button[type="submit"],
.tutor-registration-wrap button[type="submit"]
) {
color: var(--wa-bg-deep) !important;
-webkit-text-fill-color: var(--wa-bg-deep) !important;
background: linear-gradient(135deg, var(--wa-primary), #d5ff65) !important;
border: 1px solid var(--wa-primary) !important;
font-weight: 800 !important;
box-shadow: 0 9px 22px rgba(184, 255, 24, 0.15) !important;
}
html body :is(
.tutor-btn-primary,
button.tutor-btn-primary,
a.tutor-btn-primary,
.tutor-submit,
.tutor-bg-primary.tutor-btn,
.write-course-review-link-btn,
#tutor-login-form button[type="submit"],
#tutor-registration-form button[type="submit"]
):is(:hover, :focus, :active) {
color: var(--wa-bg-deep) !important;
-webkit-text-fill-color: var(--wa-bg-deep) !important;
background: var(--wa-primary-hover) !important;
border-color: var(--wa-primary-hover) !important;
transform: translateY(-2px);
box-shadow: 0 13px 28px rgba(184, 255, 24, 0.22) !important;
}
/* أي محتوى جوه زر فسفوري (نص/أيقونة/سبينر) يورّث اللون الداكن */
html body :is(
.tutor-btn-primary,
.tutor-submit,
.tutor-bg-primary.tutor-btn,
.write-course-review-link-btn,
#tutor-login-form button[type="submit"],
#tutor-registration-form button[type="submit"]
) :is(span, strong, small, i, b, [class^="tutor-icon-"], [class*=" tutor-icon-"]),
html body :is(
.tutor-btn-primary,
.tutor-submit,
.tutor-bg-primary.tutor-btn,
.write-course-review-link-btn
)::before,
html body :is(
.tutor-btn-primary,
.tutor-submit,
.tutor-bg-primary.tutor-btn,
.write-course-review-link-btn
)::after {
color: inherit !important;
-webkit-text-fill-color: inherit !important;
}
html body :is(.tutor-btn-primary, .tutor-submit, .tutor-bg-primary.tutor-btn) svg {
color: inherit !important;
fill: currentColor !important;
stroke: currentColor !important;
}
html body :is(.tutor-btn-primary, .tutor-submit) :is(.tutor-spinner, .tutor-loader) {
border-color: rgba(0, 0, 0, 0.22) !important;
border-top-color: var(--wa-bg-deep) !important;
}
/* --- outline --- */
html body .tutor-btn-outline-primary {
color: var(--wa-primary) !important;
-webkit-text-fill-color: var(--wa-primary) !important;
background: transparent !important;
border: 1px solid var(--wa-primary) !important;
}
html body .tutor-btn-outline-primary:is(:hover, :focus, :active) {
color: var(--wa-bg-deep) !important;
-webkit-text-fill-color: var(--wa-bg-deep) !important;
background: var(--wa-primary) !important;
border-color: var(--wa-primary) !important;
transform: translateY(-2px);
}
/* --- secondary (خلفية primary شفافة) --- */
html body :is(.tutor-btn-secondary, .tutor-btn-outline-secondary) {
color: var(--wa-primary) !important;
-webkit-text-fill-color: var(--wa-primary) !important;
background: var(--wa-primary-soft) !important;
border: 1px solid rgba(184, 255, 24, 0.28) !important;
}
html body :is(.tutor-btn-secondary, .tutor-btn-outline-secondary):is(:hover, :focus, :active) {
color: var(--wa-bg-deep) !important;
-webkit-text-fill-color: var(--wa-bg-deep) !important;
background: var(--wa-primary) !important;
border-color: var(--wa-primary) !important;
}
/* --- tertiary / ghost --- */
html body :is(.tutor-btn-tertiary, .tutor-btn-ghost) {
color: var(--wa-text-soft) !important;
-webkit-text-fill-color: var(--wa-text-soft) !important;
background: rgba(255, 255, 255, 0.04) !important;
border: 1px solid var(--wa-border) !important;
}
html body :is(.tutor-btn-tertiary, .tutor-btn-ghost) [class^="tutor-icon-"] {
color: var(--wa-text-muted) !important;
}
html body :is(.tutor-btn-tertiary, .tutor-btn-ghost):is(:hover, :focus) {
color: var(--wa-primary) !important;
-webkit-text-fill-color: var(--wa-primary) !important;
background: var(--wa-card-hover) !important;
border-color: rgba(184, 255, 24, 0.42) !important;
}
html body :is(.tutor-btn-tertiary, .tutor-btn-ghost):hover [class^="tutor-icon-"] {
color: var(--wa-primary) !important;
}
/* --- danger --- */
html body :is(.tutor-btn-danger, .tutor-btn-outline-danger, .tutor-btn-destructive) {
color: #ffd5dd !important;
-webkit-text-fill-color: #ffd5dd !important;
background: rgba(255, 90, 120, 0.12) !important;
border: 1px solid rgba(255, 90, 120, 0.45) !important;
}
html body :is(.tutor-btn-danger, .tutor-btn-outline-danger, .tutor-btn-destructive):hover {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
background: var(--wa-danger) !important;
border-color: var(--wa-danger) !important;
}
/* --- iconic / btn-icon --- */
html body :is(.tutor-iconic-btn, .tutor-btn-icon) {
color: var(--wa-text-soft) !important;
background: transparent !important;
border-color: var(--wa-border) !important;
}
html body :is(.tutor-iconic-btn, .tutor-btn-icon):hover {
color: var(--wa-primary) !important;
background: var(--wa-primary-soft) !important;
}
/* --- حالات مشتركة --- */
html body .tutor-btn:is(:focus, :focus-visible) {
outline: none !important;
box-shadow: 0 0 0 3px rgba(184, 255, 24, 0.22) !important;
}
html body .tutor-btn:is([disabled], .disabled, .tutor-btn-disabled) {
color: var(--tutor-disabled-color) !important;
-webkit-text-fill-color: var(--tutor-disabled-color) !important;
background: var(--tutor-disabled-bg) !important;
border-color: transparent !important;
box-shadow: none !important;
opacity: 0.75 !important;
transform: none !important;
cursor: not-allowed !important;
}
/* =========================================================================
04. FORMS
-------------------------------------------------------------------------
يشمل إصلاح 3 أيقونات SVG مكتوبة hardcoded في سورس Tutor:
· سهم الـ select stroke='%23343a40' (رمادي غامق — مختفي على الداكن)
· علامة الـ checkbox fill='%23fff' (أبيض على أخضر فسفوري)
· نقطة الـ radio fill='%23fff' (نفس المشكلة)
========================================================================= */
html body :is(
.tutor-form-control,
.tutor-form-select,
.tutor-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.tutor-wrap textarea,
.tutor-wrap select,
.tutor-dashboard input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.tutor-dashboard textarea,
.tutor-dashboard select,
.tutor-modal input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.tutor-modal textarea,
.tutor-modal select,
.tutor-checkout-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.tutor-checkout-page select,
#tutor-login-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
#tutor-registration-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
#tutor-registration-form textarea,
#tutor-registration-form select
) {
min-height: 48px;
color: var(--wa-text) !important;
caret-color: var(--wa-primary) !important;
/* أفتح شوية من خلفية الصفحة — الحقول الأغمق من الخلفية بتبان "حفر سودا" */
background-color: rgba(255, 255, 255, 0.045) !important;
border: 1px solid var(--wa-border-strong) !important;
border-radius: var(--tutor-input-radius) !important;
outline: none !important;
box-shadow: none !important;
font-family: var(--wa-font) !important;
font-size: 14px !important;
}
html body :is(.tutor-wrap, .tutor-dashboard, .tutor-modal) textarea {
min-height: 120px;
resize: vertical;
}
html body :is(.tutor-form-control, .tutor-wrap, .tutor-dashboard, .tutor-modal, #tutor-login-form, #tutor-registration-form)
:is(input, textarea)::placeholder {
color: var(--wa-text-muted) !important;
opacity: 1 !important;
}
html body :is(
.tutor-form-control,
.tutor-form-select,
.tutor-wrap input,
.tutor-wrap textarea,
.tutor-wrap select,
.tutor-dashboard input,
.tutor-dashboard textarea,
.tutor-dashboard select,
.tutor-modal input,
.tutor-modal textarea,
#tutor-login-form input,
#tutor-registration-form input
):hover {
border-color: rgba(184, 255, 24, 0.38) !important;
}
html body :is(
.tutor-form-control,
.tutor-form-select,
.tutor-wrap input,
.tutor-wrap textarea,
.tutor-wrap select,
.tutor-dashboard input,
.tutor-dashboard textarea,
.tutor-dashboard select,
.tutor-modal input,
.tutor-modal textarea,
#tutor-login-form input,
#tutor-registration-form input
):focus {
background-color: rgba(255, 255, 255, 0.06) !important;
border-color: var(--wa-primary) !important;
box-shadow: 0 0 0 3px rgba(184, 255, 24, 0.13) !important;
}
html body :is(.tutor-form-control, .tutor-wrap input, .tutor-dashboard input, .tutor-modal input):is(:disabled, [readonly]) {
color: var(--tutor-disabled-color) !important;
background-color: var(--tutor-disabled-bg) !important;
border-color: var(--wa-border) !important;
cursor: not-allowed;
}
/* Autofill بتاع الكروم بيحط خلفية بيضا فاقعة */
html body :is(.tutor-wrap, .tutor-modal, .tutor-dashboard, #tutor-login-form, #tutor-registration-form)
input:-webkit-autofill,
html body :is(.tutor-wrap, .tutor-modal, .tutor-dashboard, #tutor-login-form, #tutor-registration-form)
input:-webkit-autofill:is(:hover, :focus, :active) {
-webkit-text-fill-color: var(--wa-text) !important;
-webkit-box-shadow: 0 0 0 1000px #0e2032 inset !important;
caret-color: var(--wa-primary) !important;
transition: background-color 9999s ease-in-out 0s;
}
/* لابل */
html body :is(.tutor-wrap, .tutor-dashboard, .tutor-modal, #tutor-login-form, #tutor-registration-form)
:is(label, .tutor-form-label) {
color: var(--wa-text) !important;
font-family: var(--wa-font) !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1.7 !important;
}
/* ---- سهم الـ select (كان stroke='%23343a40') ---- */
html body :is(.tutor-form-select, .tutor-wrap select, .tutor-dashboard select, .tutor-modal select) {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c5cfda' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
background-repeat: no-repeat !important;
background-size: 15px 11px !important;
appearance: none;
-webkit-appearance: none;
}
html body :is(.tutor-form-select, .tutor-wrap select, .tutor-dashboard select) option {
color: var(--wa-text);
background: var(--wa-card);
}
/* الاتجاه: في RTL السهم لازم يقع شمال */
html body :is(.tutor-form-select, .tutor-wrap select, .tutor-dashboard select, .tutor-modal select) {
background-position: right 0.75rem center !important;
padding-right: 14px !important;
padding-left: 38px !important;
}
html[dir="rtl"] body :is(.tutor-form-select, .tutor-wrap select, .tutor-dashboard select, .tutor-modal select),
body.rtl :is(.tutor-form-select, .tutor-wrap select, .tutor-dashboard select, .tutor-modal select) {
background-position: left 0.75rem center !important;
padding-right: 14px !important;
padding-left: 38px !important;
}
/* ---- checkbox + radio ---- */
html body :is(.tutor-form-check-input, .tutor-wrap input[type="checkbox"], .tutor-wrap input[type="radio"],
.tutor-dashboard input[type="checkbox"], .tutor-dashboard input[type="radio"],
.tutor-modal input[type="checkbox"], .tutor-modal input[type="radio"]) {
background-color: rgba(255, 255, 255, 0.05) !important;
border: 1px solid var(--wa-border-strong) !important;
accent-color: var(--wa-primary);
}
html body .tutor-form-check-input:checked {
background-color: var(--wa-primary) !important;
border-color: var(--wa-primary) !important;
}
/* علامة الصح: كانت fill='%23fff' → أبيض على فسفوري */
html body .tutor-form-check-input:not([type="radio"]):checked {
background-image: url("data:image/svg+xml,%3Csvg width='14' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.922 5.7a.627.627 0 01-.127-.194.72.72 0 010-.5.6.6 0 01.127-.195l.905-.867a.562.562 0 01.425-.195.592.592 0 01.25.05.665.665 0 01.207.145l2.73 2.734L11.295.82a.658.658 0 01.202-.145.613.613 0 01.484.002.568.568 0 01.191.143l.905.88a.6.6 0 01.127.195.72.72 0 010 .5.628.628 0 01-.127.194l-7.2 7.163a.575.575 0 01-.195.147.655.655 0 01-.5 0 .575.575 0 01-.195-.147L.922 5.7z' fill='%2306111f'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: 50% 50% !important;
}
/* نقطة الراديو: كانت fill='%23fff' */
html body :is(.tutor-form-check-input[type="radio"], .tutor-form-check-input-radio):is(:checked, .is-active) {
background-color: var(--wa-primary) !important;
border-color: var(--wa-primary) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%2306111f'/%3e%3c/svg%3e") !important;
background-position: 50% 50% !important;
}
html body .tutor-form-check-input:focus {
border-color: var(--wa-primary) !important;
box-shadow: 0 0 0 3px rgba(184, 255, 24, 0.16) !important;
}
html body :is(.tutor-form-check, .tutor-form-check-label) {
color: var(--wa-text-soft) !important;
}
/* ---- toggle ---- */
html body .tutor-form-toggle-control {
background-color: rgba(255, 255, 255, 0.12) !important;
}
html body .tutor-form-toggle input:checked ~ .tutor-form-toggle-control {
background-color: var(--wa-primary) !important;
}
html body :is(.tutor-form-toggle-label, .tutor-form-toggle-checked, .tutor-form-toggle-unchecked) {
color: var(--wa-text-soft) !important;
}
/* ---- أيقونات داخل الحقول + زر إظهار الباسورد ---- */
html body :is(.tutor-form-wrap, .tutor-input-group, .tutor-password-field, .tutor-form-group,
#tutor-registration-form .mb-3, #tutor-login-form .login-username, #tutor-login-form .login-password) {
position: relative !important;
}
html body :is(.tutor-form-icon, .tutor-form-feedback-icon, .tutor-password-reveal, .show-hide-btn, .tutor-validation-icon) {
z-index: 3 !important;
color: var(--wa-text-muted) !important;
background: transparent !important;
}
html body :is(.tutor-password-reveal, .show-hide-btn, .tutor-validation-icon) {
position: absolute !important;
top: auto !important;
bottom: 14px !important;
inset-inline-start: 14px !important;
inset-inline-end: auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 22px !important;
height: 22px !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
cursor: pointer;
}
html body :is(.tutor-password-reveal, .show-hide-btn):hover {
color: var(--wa-primary) !important;
}
html body .tutor-password-strength-hint {
color: var(--wa-text-muted) !important;
}
html body .tutor-password-strength-hint .indicator span {
background: rgba(255, 255, 255, 0.14) !important;
}
/* ---- فيدباك التحقق ---- */
html body .tutor-form-feedback {
color: var(--wa-danger) !important;
}
html body .tutor-form-control.is-invalid,
html body .tutor-form-control[aria-invalid="true"] {
border-color: rgba(255, 90, 120, 0.7) !important;
}
/* ---- dropdown select المخصص ---- */
html body :is(.tutor-form-select-dropdown, .tutor-dropdown-select-options-container, .tutor-select-options, .tutor-options-list) {
color: var(--wa-text-soft) !important;
background: var(--wa-card-light) !important;
border: 1px solid var(--wa-border) !important;
border-radius: 12px !important;
box-shadow: var(--wa-shadow-md) !important;
}
html body :is(.tutor-form-select-dropdown, .tutor-dropdown-select-options-container) :is(li, .tutor-form-select-option) {
color: var(--wa-text-soft) !important;
}
html body :is(.tutor-form-select-dropdown, .tutor-dropdown-select-options-container) :is(li, .tutor-form-select-option):hover,
html body .tutor-form-select-option.is-active {
color: var(--wa-primary) !important;
background: var(--wa-primary-soft) !important;
}
html body .tutor-dropdown-select-selected {
color: var(--wa-text) !important;
background: rgba(255, 255, 255, 0.045) !important;
border-color: var(--wa-border-strong) !important;
}
/* =========================================================================
05. CARDS · TABLES · LISTS · ACCORDION · PROGRESS
========================================================================= */
html body :is(.tutor-card, .tutor-widget, .tutor-round-box, .tutor-bordered-box, .tutor-course-sidebar-card) {
color: var(--wa-text);
background: linear-gradient(145deg, var(--wa-card-light), var(--wa-card)) !important;
border: 1px solid var(--wa-border) !important;
border-radius: var(--wa-radius-lg) !important;
box-shadow: var(--wa-shadow-sm);
}
html body :is(.tutor-card-header, .tutor-card-footer, .tutor-widget-title) {
color: var(--wa-text-soft) !important;
background: rgba(255, 255, 255, 0.025) !important;
border-color: var(--wa-border) !important;
}
html body .tutor-card-body {
background: transparent !important;
}
html body .tutor-card-list-item {
border-color: var(--wa-border-soft) !important;
}
html body .tutor-card-list-item:hover {
background: var(--wa-primary-soft) !important;
}
/* ---- جداول ---- */
html body :is(.tutor-table, .tutor-dashboard table, .tutor-table-mobile) {
color: var(--wa-text-soft) !important;
background: var(--wa-card) !important;
border-color: var(--wa-border) !important;
border-radius: var(--wa-radius-md);
overflow: hidden;
}
html body :is(.tutor-table th, .tutor-dashboard table th) {
color: var(--wa-text) !important;
background: rgba(255, 255, 255, 0.055) !important;
border-color: var(--wa-border) !important;
font-weight: 700 !important;
}
html body :is(.tutor-table td, .tutor-dashboard table td) {
color: var(--wa-text-soft) !important;
background: transparent !important;
border-color: var(--wa-border-soft) !important;
}
html body :is(.tutor-table tr:hover td, .tutor-dashboard table tr:hover td) {
background: var(--wa-primary-soft) !important;
}
html body .tutor-table-link {
color: var(--wa-primary) !important;
}
/* ---- قوائم ---- */
html body .tutor-list .tutor-list-item {
border-color: var(--wa-border-soft) !important;
}
html body :is(.tutor-divider, .tutor-divider-top, .tutor-divider-bottom, .tutor-divider-left, .tutor-divider-right,
.tutor-border, .tutor-border-top, .tutor-border-bottom, .tutor-border-left, .tutor-border-right,
.tutor-border-top-light, hr) {
border-color: var(--wa-border) !important;
background-color: transparent;
}
/* ---- أكورديون ---- */
html body .tutor-accordion {
display: flex;
flex-direction: column;
gap: 12px;
}
html body .tutor-accordion-item {
overflow: hidden;
background: var(--wa-card) !important;
border: 1px solid var(--wa-border) !important;
border-radius: 14px !important;
}
html body .tutor-accordion-item-header {
position: relative;
min-height: 60px;
color: var(--wa-text) !important;
background: var(--wa-card-light) !important;
border: 0 !important;
font-weight: 700 !important;
transition: color 0.25s ease, background 0.25s ease;
}
html body .tutor-accordion-item-header:hover {
color: var(--wa-primary) !important;
background: var(--wa-card-hover) !important;
}
html body .tutor-accordion-item-header.is-active {
color: var(--wa-bg-deep) !important;
background: linear-gradient(135deg, var(--wa-primary), #d7ff68) !important;
}
html body .tutor-accordion-item-header::after,
html body .tutor-accordion-item-header.is-active [class^="tutor-icon-"] {
color: currentColor !important;
}
html body .tutor-accordion-item-body {
background: var(--wa-bg-deep) !important;
}
/* ---- بروجرس ---- */
html body :is(.tutor-progress, .tutor-progress-bar) {
overflow: hidden;
height: 9px !important;
background: #24384c !important;
border-radius: 50px !important;
}
html body .tutor-progress-value {
background: linear-gradient(90deg, var(--wa-primary-hover), var(--wa-primary)) !important;
border-radius: inherit;
box-shadow: 0 0 12px rgba(184, 255, 24, 0.35);
}
html body .progress-percentage {
color: var(--wa-primary) !important;
font-weight: 700;
}
/* ---- أفاتار ---- */
html body .tutor-avatar {
overflow: hidden;
border-radius: 50%;
}
html body .tutor-avatar-text {
color: var(--wa-bg-deep) !important;
background: var(--wa-primary) !important;
font-weight: 800 !important;
}
/* ---- تقييمات ---- */
html body :is(.tutor-ratings-stars, .tutor-ratings-stars i, .tutor-star-rating-group, .tutor-ratings [class^="tutor-icon-star"]) {
color: var(--wa-warning) !important;
}
html body .tutor-ratings-average,
html body .tutor-ratings-count {
color: var(--wa-text-soft) !important;
}
/* ---- حالة فاضية ---- */
html body :is(.tutor-emptystate, .tutor-empty-state, .td-empty-state) {
color: var(--wa-text-soft) !important;
background: rgba(255, 255, 255, 0.025) !important;
border: 1px dashed var(--wa-border) !important;
border-radius: 15px !important;
}
html body :is(.tutor-emptystate, .tutor-empty-state) img {
max-width: 210px;
opacity: 0.8;
}
/* =========================================================================
06. NAV · TABS · PAGINATION · DROPDOWN · BADGE · TAG
========================================================================= */
html body :is(.tutor-nav, .tutor-nav-tabs, .tutor-nav-pills, .tutor-tabs) {
border-color: var(--wa-border) !important;
}
html body :is(.tutor-nav-link, .tutor-tab-link) {
color: var(--wa-text-soft) !important;
border-color: transparent !important;
border-radius: var(--tutor-tab-radius) !important;
font-weight: 700 !important;
}
html body :is(.tutor-nav-link, .tutor-tab-link):hover {
color: var(--wa-primary) !important;
background: var(--wa-primary-soft) !important;
}
html body :is(.tutor-nav-link, .tutor-tab-link):is(.is-active, .active) {
color: var(--wa-bg-deep) !important;
-webkit-text-fill-color: var(--wa-bg-deep) !important;
background: var(--wa-primary) !important;
border-color: var(--wa-primary) !important;
box-shadow: 0 7px 18px rgba(184, 255, 24, 0.16);
}
html body :is(.tutor-nav-link, .tutor-tab-link):is(.is-active, .active) :is(span, i, [class^="tutor-icon-"]) {
color: inherit !important;
}
html body :is(.tutor-nav-more-list, .tutor-nav-more) {
color: var(--wa-text-soft) !important;
background: var(--wa-card-light) !important;
border: 1px solid var(--wa-border) !important;
border-radius: 12px !important;
}
/* ---- دروب داون ---- */
html body :is(.tutor-dropdown, .tutor-dropdown-menu) {
color: var(--wa-text-soft) !important;
background: var(--wa-card-light) !important;
border: 1px solid var(--wa-border) !important;
border-radius: 12px !important;
box-shadow: var(--wa-shadow-md) !important;
}
html body :is(.tutor-dropdown-item, .tutor-dropdown-menu a) {
color: var(--wa-text-soft) !important;
}
html body :is(.tutor-dropdown-item, .tutor-dropdown-menu a):hover {
color: var(--wa-primary) !important;
background: var(--wa-primary-soft) !important;
}
/* ---- ترقيم الصفحات ---- */
html body :is(.tutor-pagination, .tutor-pagination-numbers, .tutor-pagination-wrapper) {
color: var(--wa-text-soft) !important;
}
html body :is(.tutor-pagination a, .tutor-pagination button, .tutor-pagination .page-numbers) {
color: var(--wa-text-soft) !important;
background: var(--wa-card-light) !important;
border: 1px solid var(--wa-border) !important;
border-radius: 9px !important;
}
html body :is(.tutor-pagination a:hover, .tutor-pagination button:hover,
.tutor-pagination .page-numbers:hover, .tutor-pagination .page-numbers.current,
.tutor-pagination .is-active, .tutor-pagination .active) {
color: var(--wa-bg-deep) !important;
-webkit-text-fill-color: var(--wa-bg-deep) !important;
background: var(--wa-primary) !important;
border-color: var(--wa-primary) !important;
}
/* ---- بادچ / تاج ---- */
html body .tutor-badge {
color: var(--wa-bg-deep) !important;
background-color: var(--wa-primary) !important;
font-weight: 700 !important;
}
html body :is(.tutor-badge-label, .tutor-tag, .tutor-floating-badge) {
color: var(--wa-text-soft) !important;
background: rgba(255, 255, 255, 0.06) !important;
border: 1px solid var(--wa-border) !important;
border-radius: 50px !important;
}
html body .tutor-badge-label.tutor-is-success { color: var(--wa-success) !important; background: rgba(56, 211, 111, 0.12) !important; border-color: rgba(56, 211, 111, 0.35) !important; }
html body .tutor-badge-label.tutor-is-warning { color: var(--wa-warning) !important; background: rgba(255, 191, 63, 0.12) !important; border-color: rgba(255, 191, 63, 0.35) !important; }
html body .tutor-badge-label.tutor-is-danger { color: var(--wa-danger) !important; background: rgba(255, 90, 120, 0.12) !important; border-color: rgba(255, 90, 120, 0.35) !important; }
html body :is(.tutor-bg-success, .tutor-bg-warning, .tutor-bg-danger, .tutor-bg-primary) {
color: var(--wa-bg-deep) !important;
}
/* =========================================================================
07. MODAL · OFFCANVAS · ALERT · NOTIFICATION · TOOLTIP · SPINNER
========================================================================= */
html body .tutor-modal {
z-index: 999999 !important;
}
html body :is(.tutor-modal-overlay, .tutor-modal-backdrop, .tutor-offcanvas-backdrop) {
background: rgba(1, 8, 15, 0.8) !important;
backdrop-filter: blur(7px) !important;
-webkit-backdrop-filter: blur(7px) !important;
}
html body :is(.tutor-modal-content, .tutor-modal-content-white, .tutor-offcanvas-main) {
color: var(--wa-text) !important;
background:
radial-gradient(circle at 85% 0%, rgba(184, 255, 24, 0.08), transparent 34%),
linear-gradient(145deg, rgba(18, 38, 58, 0.96), rgba(6, 17, 31, 0.95)) !important;
border: 1px solid var(--wa-border-strong) !important;
border-radius: 20px !important;
box-shadow: var(--wa-shadow-lg) !important;
backdrop-filter: blur(18px) saturate(120%) !important;
-webkit-backdrop-filter: blur(18px) saturate(120%) !important;
}
html body :is(.tutor-modal-body, .tutor-offcanvas-body) {
color: var(--wa-text-soft) !important;
background: transparent !important;
}
html body :is(.tutor-modal-header, .tutor-modal-buttons, .tutor-offcanvas-header) {
background: rgba(255, 255, 255, 0.025) !important;
border-color: var(--wa-border) !important;
}
html body :is(.tutor-modal-close, .tutor-modal-close-o) {
color: var(--wa-text-soft) !important;
background: rgba(3, 14, 24, 0.78) !important;
border: 1px solid var(--wa-border) !important;
border-radius: 10px !important;
}
html body :is(.tutor-modal-close, .tutor-modal-close-o):hover {
color: var(--wa-primary) !important;
border-color: rgba(184, 255, 24, 0.45) !important;
}
/* ---- تنبيهات ---- */
html body :is(.tutor-alert, .tutor-notification, .tutor-notice, .tutor-snackbar, .tutor-toast-parent) {
color: var(--wa-text-soft) !important;
background: var(--wa-card-light) !important;
border: 1px solid var(--wa-border) !important;
border-radius: 12px !important;
}
html body :is(.tutor-alert.tutor-success, .tutor-alert-success, .tutor-notification.tutor-is-success) {
color: #caffda !important;
background: rgba(56, 211, 111, 0.1) !important;
border-color: rgba(56, 211, 111, 0.38) !important;
}
html body :is(.tutor-alert.tutor-warning, .tutor-alert-warning, .tutor-notification.tutor-is-warning) {
color: #ffe8b7 !important;
background: rgba(255, 191, 63, 0.1) !important;
border-color: rgba(255, 191, 63, 0.38) !important;
}
html body :is(.tutor-alert.tutor-danger, .tutor-alert-danger, .tutor-alert-error,
.tutor-notification.tutor-is-danger, .tutor-login-error:not(:empty),
.tutor-registration-error, .tutor-form-error) {
display: block !important;
color: #ffd6da !important;
background: rgba(244, 63, 94, 0.13) !important;
border: 1px solid rgba(251, 113, 133, 0.55) !important;
border-radius: 11px !important;
line-height: 1.85 !important;
}
html body .tutor-login-error:empty {
display: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
html body :is(.tutor-alert, .tutor-login-error:not(:empty), .tutor-registration-error)
:is(p, div, span, strong, em, small, ul, ol, li) {
color: inherit !important;
background: transparent !important;
font-family: var(--wa-font) !important;
}
html body :is(.tutor-alert, .tutor-login-error:not(:empty), .tutor-registration-error) a {
color: #ffffff !important;
font-weight: 700 !important;
text-decoration: underline !important;
}
html body :is(.tutor-alert-icon, .tutor-notification-icon) {
color: inherit !important;
}
/* ---- تولتيب ---- */
html body :is(.tooltip-txt, .tutor-tooltip, .tutor-popover, .tutor-popover-content) {
color: var(--wa-text-soft) !important;
background: var(--wa-bg-deep) !important;
border: 1px solid var(--wa-border) !important;
border-radius: 8px !important;
box-shadow: var(--wa-shadow-sm) !important;
}
/* ---- سبينر ---- */
html body :is(.tutor-spinner, .tutor-loader, .tutor-loading-spinner) {
color: var(--wa-primary) !important;
border-color: rgba(184, 255, 24, 0.2) !important;
border-top-color: var(--wa-primary) !important;
}
html body .tutor-placeholder,
html body .tutor-skeleton {
background: linear-gradient(90deg, #10243a 25%, #16304a 37%, #10243a 63%) !important;
}
/* =========================================================================
08. COURSE ARCHIVE · COURSE CARDS · FILTERS
========================================================================= */
html body :is(.tutor-course-card, .tutor-course-listing .tutor-card, .tutor-course-loop .tutor-card) {
overflow: hidden;
transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}
html body :is(.tutor-course-card, .tutor-course-listing .tutor-card, .tutor-course-loop .tutor-card):hover {
transform: translateY(-5px);
border-color: rgba(184, 255, 24, 0.5) !important;
box-shadow: 0 24px 55px rgba(0, 0, 0, 0.32) !important;
}
html body :is(.tutor-course-thumbnail, .tutor-ratio) {
overflow: hidden;
background: var(--wa-bg-deep) !important;
}
html body .tutor-course-card img {
transition: transform 0.4s ease;
}
html body .tutor-course-card:hover img {
transform: scale(1.03);
}
html body :is(.tutor-course-name, .tutor-course-name a, .tutor-course-card-title, .tutor-course-card-title a) {
color: var(--wa-text) !important;
font-weight: 800 !important;
line-height: 1.65;
}
html body :is(.tutor-course-name a, .tutor-course-card-title a):hover {
color: var(--wa-primary) !important;
}
html body :is(.tutor-course-price, .tutor-course-price span, .tutor-course-sidebar-card-pick-plan-label .tutor-price) {
color: var(--wa-primary) !important;
font-weight: 800 !important;
}
html body .tutor-course-price del,
html body .tutor-price del {
color: var(--wa-text-muted) !important;
}
html body :is(.tutor-meta, .tutor-meta-value, .tutor-meta-key) {
color: var(--wa-text-muted) !important;
}
html body .tutor-course-card .tutor-card-footer {
background: rgba(255, 255, 255, 0.025) !important;
border-top: 1px solid var(--wa-border) !important;
}
/* ---- فلاتر الأرشيف ---- */
html body :is(.tutor-course-filter, .tutor-course-filter-wrap, .tutor-course-filter-container,
.tutor-course-search-field, .tutor-course-filter-widget, .tutor-course-listing-filter) {
color: var(--wa-text-soft) !important;
background: var(--wa-card) !important;
border: 1px solid var(--wa-border) !important;
border-radius: var(--wa-radius-md) !important;
}
html body .tutor-course-filter-widget-title {
color: var(--wa-text) !important;
font-weight: 800 !important;
}
/* ---- كارت المدرّب ---- */
html body .tutor-instructor-card {
background: linear-gradient(145deg, var(--wa-card-light), var(--wa-card)) !important;
border: 1px solid var(--wa-border) !important;
border-radius: var(--wa-radius-lg) !important;
}
html body :is(.tutor-instructor-card .tutor-name, .tutor-profile-name) {
color: var(--wa-text) !important;
}
html body :is(.tutor-profile-subtitle, .tutor-profile-content) {
color: var(--wa-text-muted) !important;
}
/* =========================================================================
09. SINGLE COURSE PAGE
========================================================================= */
html body .tutor-course-details-page {
max-width: 1240px;
margin: 0 auto;
padding: 50px 20px 80px;
color: var(--wa-text);
}
html body .tutor-course-details-page :is(p, li) {
color: var(--wa-text-soft);
line-height: 1.9;
}
html body .tutor-course-details-header {
position: relative;
overflow: hidden;
margin-bottom: 32px !important;
padding: 34px 36px !important;
background: linear-gradient(135deg, rgba(18, 38, 58, 0.98), rgba(8, 23, 39, 0.98));
border: 1px solid var(--wa-border);
border-radius: var(--wa-radius-xl);
box-shadow: var(--wa-shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
html body .tutor-course-details-header::before {
content: "";
position: absolute;
inset-inline-start: -90px;
top: -90px;
width: 220px;
height: 220px;
border-radius: 50%;
background: rgba(184, 255, 24, 0.07);
filter: blur(6px);
pointer-events: none;
}
html body .tutor-course-details-title {
position: relative;
z-index: 2;
color: var(--wa-text) !important;
font-size: clamp(28px, 4vw, 44px) !important;
font-weight: 800 !important;
line-height: 1.38 !important;
}
html body .tutor-course-details-info a {
color: var(--wa-primary) !important;
font-weight: 700;
}
/* شريط التابات اللاصق.
Tutor بيكتبه: .tutor-course-details-page .tutor-course-details-tab .tutor-is-sticky
{ background: rgba(255,255,255,.6) } ← 3 كلاسات، وجوه @media(min-width:800)
فلازم نساويه في الـ specificity + !important، وإلا هيغلبنا على الديسكتوب بس. */
html body .tutor-course-details-page .tutor-course-details-tab .tutor-is-sticky,
html body .tutor-course-details-tab .tutor-is-sticky {
position: sticky;
top: 70px;
z-index: 500;
padding: 8px;
background: rgba(9, 24, 40, 0.92) !important;
border: 1px solid var(--wa-border);
border-radius: 15px;
backdrop-filter: blur(14px) saturate(120%) !important;
-webkit-backdrop-filter: blur(14px) saturate(120%) !important;
box-shadow: var(--wa-shadow-sm);
}
/* الشريط الداخلي كمان بياخد خلفية من القالب أحيانًا */
html body .tutor-course-details-tab .tutor-is-sticky :is(.tutor-nav, .tutor-nav-tabs, .tutor-nav-pills) {
background: transparent !important;
border: 0 !important;
}
html body .tutor-course-details-tab .tutor-nav {
gap: 5px;
border: 0 !important;
}
html body .tutor-tab-item {
padding: 30px;
background: linear-gradient(145deg, rgba(15, 34, 53, 0.98), rgba(9, 25, 41, 0.98));
border: 1px solid var(--wa-border);
border-radius: var(--wa-radius-lg);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}
html body .tutor-tab-item :is(h2, h3) {
color: var(--wa-text) !important;
font-weight: 800 !important;
}
html body .tutor-tab-item h2::after,
html body .tutor-segment-title::after {
content: "";
display: block;
width: 45px;
height: 3px;
margin-top: 10px;
background: var(--wa-primary);
border-radius: 20px;
}
html body .tutor-course-details-widget {
margin-top: 26px;
padding: 24px;
background: rgba(255, 255, 255, 0.025) !important;
border: 1px solid var(--wa-border) !important;
border-radius: 16px;
}
html body .tutor-course-details-widget-title {
color: var(--wa-text) !important;
font-weight: 800 !important;
}
html body .tutor-course-details-widget-list li {
margin-bottom: 10px !important;
padding: 11px 14px;
background: rgba(255, 255, 255, 0.025) !important;
border-radius: 10px;
}
html body .tutor-course-details-widget-list li:hover {
background: var(--wa-primary-soft) !important;
}
html body :is(.tutor-course-details-widget-list .tutor-icon-bullet-point, .tutor-custom-list-style li::before) {
color: var(--wa-primary) !important;
}
/* ---- المنهج ---- */
html body :is(.tutor-course-topics-header, .tutor-course-topic) {
background: var(--wa-card-light) !important;
border-color: var(--wa-border) !important;
}
html body .tutor-course-content-list-item {
background: transparent !important;
border-bottom: 1px solid var(--wa-border-soft) !important;
transition: background 0.25s ease, padding 0.25s ease;
}
html body .tutor-course-content-list-item:last-child {
border-bottom: 0 !important;
}
html body .tutor-course-content-list-item:hover {
background: rgba(184, 255, 24, 0.045) !important;
}
html body :is(.tutor-course-content-list-item-title, .tutor-course-content-list-item-title a) {
color: var(--wa-text-soft) !important;
font-weight: 600 !important;
line-height: 1.7;
}
html body .tutor-course-content-list-item:hover .tutor-course-content-list-item-title a {
color: var(--wa-primary) !important;
}
html body :is(.tutor-course-content-list-item-icon, .tutor-course-content-list-item [class^="tutor-icon-"]) {
color: var(--wa-primary) !important;
}
/* ---- السايدبار ---- */
html body .tutor-course-sidebar-card,
html body .tutor-single-course-sidebar-more {
background: linear-gradient(145deg, rgba(18, 38, 58, 0.98), rgba(8, 23, 39, 0.98)) !important;
border: 1px solid var(--wa-border) !important;
border-radius: var(--wa-radius-lg) !important;
box-shadow: var(--wa-shadow-lg);
}
html body .tutor-course-sidebar-card-pick-plan-label {
color: var(--wa-text-soft) !important;
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid var(--wa-border) !important;
border-radius: 12px !important;
}
html body .tutor-course-sidebar-card-pick-plan-input:checked + .tutor-course-sidebar-card-pick-plan-label {
border-color: var(--wa-primary) !important;
background: var(--wa-primary-soft) !important;
}
/* ---- المدرّب ---- */
html body .tutor-course-details-instructors {
padding: 22px !important;
background: linear-gradient(145deg, var(--wa-card-light), var(--wa-bg-soft)) !important;
border: 1px solid var(--wa-border) !important;
border-radius: 15px !important;
}
html body .tutor-course-details-instructors :is(h3, a) {
color: var(--wa-text) !important;
font-weight: 700 !important;
}
html body .tutor-course-details-instructors a:hover {
color: var(--wa-primary) !important;
}
/* ---- مراجعات ---- */
html body :is(.tutor-review, .individual-review-rating-wrap, .course-avg-rating-wrap) {
background: rgba(255, 255, 255, 0.025) !important;
border-color: var(--wa-border) !important;
border-radius: 14px;
}
/* =========================================================================
10. LEARNING AREA / SPOTLIGHT — الدرس والكويز والواجب و Q&A
-------------------------------------------------------------------------
دي أكتر منطقة فيها #fff مكتوب صريح في السورس (spotlight.scss / _sidebar.scss)
========================================================================= */
html body :is(.tutor-course-single-content-wrapper, .tutor-course-spotlight-wrapper) {
background: var(--wa-bg) !important;
}
html body :is(.tutor-course-single-sidebar, .tutor-course-spotlight-sidebar, .tutor-qna-spotlight-sidebar) {
color: var(--wa-text-soft) !important;
background: #071321 !important;
border-color: var(--wa-border) !important;
}
html body :is(.tutor-course-single-sidebar-title, .tutor-course-spotlight-sidebar-header) {
color: var(--wa-text) !important;
background: transparent !important;
border-color: var(--wa-border) !important;
}
html body :is(.tutor-course-topic-header, .tutor-course-single-sidebar .tutor-accordion-item-header) {
color: var(--wa-text) !important;
background: var(--wa-card) !important;
}
html body .tutor-course-single-sidebar .tutor-course-content-list-item.is-active,
html body .tutor-course-single-sidebar .tutor-course-content-list-item.tutor-is-active {
background: var(--wa-primary-soft) !important;
border-inline-start: 3px solid var(--wa-primary) !important;
}
html body .tutor-course-single-sidebar .tutor-course-content-list-item.tutor-is-completed [class^="tutor-icon-"] {
color: var(--wa-success) !important;
}
/* ---- هيدر منطقة التعلّم ---- */
html body :is(.tutor-topbar, .tutor-lesson-header, .tutor-course-spotlight-header, .tutor-single-course-lesson-header) {
color: var(--wa-text) !important;
background: rgba(9, 25, 41, 0.96) !important;
border-bottom: 1px solid var(--wa-border) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
/* ---- محتوى الدرس ---- */
html body :is(.tutor-lesson-content, .tutor-course-lesson, .tutor-lesson-wrapper, .tutor-quiz-wrapper,
.tutor-assignment-wrapper, .tutor-lesson-sidebar-content) {
color: var(--wa-text-soft) !important;
background: transparent !important;
}
html body .tutor-video-player,
html body .tutor-video-player-wrapper {
background: #000000 !important;
border: 1px solid var(--wa-border) !important;
border-radius: var(--wa-radius-md);
overflow: hidden;
}
/* ---- كويز ---- */
html body :is(.tutor-quiz-question, .tutor-quiz-item, .tutor-quesanswer, .tutor-quiz-answer-item,
.tutor-quiz-attempt-details, .tutor-quiz-attempts, .tutor-quiz-summary) {
color: var(--wa-text-soft) !important;
background: var(--wa-card) !important;
border: 1px solid var(--wa-border) !important;
border-radius: var(--wa-radius-md) !important;
}
html body :is(.tutor-quiz-question-title, .tutor-quiz-item-name, .tutor-quiz-item-label) {
color: var(--wa-text) !important;
font-weight: 700 !important;
}
html body .tutor-quiz-item-type {
color: var(--wa-text-muted) !important;
}
html body .tutor-quiz-answer-item:hover,
html body .tutor-quiz-answer-item:has(input:checked) {
border-color: var(--wa-primary) !important;
background: var(--wa-primary-soft) !important;
}
html body .tutor-quiz-answer-item.tutor-is-correct { border-color: rgba(56, 211, 111, 0.5) !important; background: rgba(56, 211, 111, 0.09) !important; }
html body .tutor-quiz-answer-item.tutor-is-wrong { border-color: rgba(255, 90, 120, 0.5) !important; background: rgba(255, 90, 120, 0.09) !important; }
html body :is(.tutor-quiz-timer, .tutor-quiz-progress) {
color: var(--wa-text) !important;
background: var(--wa-card-light) !important;
border: 1px solid var(--wa-border) !important;
border-radius: 10px !important;
}
/* ---- واجبات ---- */
html body :is(.tutor-assignment-review-header, .tutor-assignment-evaluate-wraps, .assignment-result-wrap) {
color: var(--wa-text-soft) !important;
background: var(--wa-card) !important;
border-color: var(--wa-border) !important;
}
/* ---- أسئلة وأجوبة ---- */
html body :is(.tutor-qna-single-question, .tutor-qa-reply, .tutor-discussion-card, .tutor-discussion-single) {
color: var(--wa-text-soft) !important;
background: var(--wa-card) !important;
border: 1px solid var(--wa-border) !important;
border-radius: var(--wa-radius-md) !important;
}
html body .tutor-qa-reply {
background: var(--wa-bg-soft) !important;
}
/* ---- محتوى مؤجّل (content drip) ---- */
html body :is(.content-drip-message-wrap, .content-drip-wrap-flex) {
color: var(--wa-warning) !important;
background: rgba(255, 191, 63, 0.09) !important;
border: 1px solid rgba(255, 191, 63, 0.32) !important;
border-radius: 12px !important;
}
/* ---- تعليقات الدروس ---- */
html body :is(.tutor-lesson-comments, .tutor-comment-box, .tutor-comment-item) {
color: var(--wa-text-soft) !important;
background: transparent !important;
border-color: var(--wa-border-soft) !important;
}
/* ---- شهادة ---- */
html body :is(.tutor-certificate, .tutor-certificate-info, .tutor-download-certificate, .tutor-course-certificate) {
color: var(--wa-text-soft) !important;
background: var(--wa-card) !important;
border: 1px solid var(--wa-border) !important;
border-radius: var(--wa-radius-lg) !important;
}
html body :is(.tutor-info-issued-name, .tutor-info-id-name, .tutor-info-expiration-name, .tutor-info-date-name) {
color: var(--wa-text-muted) !important;
}
html body :is(.tutor-info-issued-value, .tutor-info-expiration-value, .tutor-info-date-details) {
color: var(--wa-text) !important;
}
/* =========================================================================
11. FRONTEND DASHBOARD
========================================================================= */
html body :is(.tutor-dashboard, .tutor-dashboard-layout, .tutor-dashboard-page) {
color: var(--wa-text);
background: var(--wa-bg-deep) !important;
line-height: 1.7;
}
html body :is(.tutor-dashboard-sidebar, .tutor-dashboard-sidebar-wrapper, .tutor-dashboard-sidebar-inner) {
color: var(--wa-text-soft) !important;
background: #071321 !important;
border-color: var(--wa-border) !important;
}
html body :is(.tutor-dashboard-sidebar-logo, .tutor-dashboard-sidebar-header) {
color: var(--wa-text) !important;
background: transparent !important;
border-color: var(--wa-border) !important;
}
html body :is(.tutor-dashboard-sidebar-logo a, .tutor-dashboard-sidebar-header a, .tutor-dashboard-sidebar-logo .site-title) {
color: var(--wa-secondary) !important;
font-family: var(--wa-font) !important;
font-weight: 800 !important;
line-height: 1.55 !important;
}
html body :is(.tutor-dashboard-sidebar-nav, .tutor-dashboard-sidebar-nav ul, .tutor-dashboard-sidebar-nav li) {
background: transparent !important;
}
html body :is(.tutor-dashboard-sidebar-nav a, .tutor-dashboard-menu-item a) {
color: var(--wa-text-soft) !important;
font-family: var(--wa-font) !important;
font-weight: 600 !important;
border-radius: 9px !important;
}
html body :is(.tutor-dashboard-sidebar-nav a:hover, .tutor-dashboard-menu-item a:hover) {
color: var(--wa-primary) !important;
background: var(--wa-primary-soft) !important;
}
html body :is(.tutor-dashboard-sidebar-nav li.active > a,
.tutor-dashboard-sidebar-nav a.is-active,
.tutor-dashboard-menu-item.active > a,
.tutor-dashboard-menu-item a.is-active) {
color: var(--wa-primary) !important;
background: rgba(184, 255, 24, 0.1) !important;
box-shadow: inset 3px 0 0 var(--wa-primary);
}
/* أيقونات السايدبار: هادية افتراضيًا، فسفورية عند hover/active */
html body .tutor-dashboard-sidebar
:is(.tutor-dashboard-menu-item-icon, [class^="tutor-icon-"], [class*=" tutor-icon-"], svg) {
color: #a7b5c5 !important;
opacity: 1 !important;
visibility: visible !important;
}
html body .tutor-dashboard-sidebar a:hover
:is(.tutor-dashboard-menu-item-icon, [class^="tutor-icon-"], [class*=" tutor-icon-"], svg),
html body .tutor-dashboard-sidebar :is(.active, .is-active, .tutor-dashboard-menu-item-active)
:is(.tutor-dashboard-menu-item-icon, [class^="tutor-icon-"], [class*=" tutor-icon-"], svg) {
color: var(--wa-primary) !important;
}
html body :is(.tutor-dashboard-menu-divider, .tutor-dashboard-menu-divider-header) {
color: var(--wa-text-muted) !important;
border-color: var(--wa-border) !important;
}
html body :is(.tutor-dashboard-content, .tutor-dashboard-content-inner, .tutor-dashboard-main, .tutor-dashboard-body) {
color: var(--wa-text);
background: transparent !important;
border-color: var(--wa-border) !important;
}
html body :is(.tutor-dashboard-header, .tutor-dashboard-topbar, .tutor-dashboard-toolbar) {
background: rgba(255, 255, 255, 0.02) !important;
border-color: var(--wa-border) !important;
}
html body :is(.tutor-dashboard .tutor-card, .tutor-dashboard-card, .tutor-stat-card,
.tutor-progress-card, .tutor-profile-completion, [class*="analytics-card"]) {
color: var(--wa-text-soft) !important;
background: rgba(255, 255, 255, 0.035) !important;
border: 1px solid var(--wa-border) !important;
border-radius: 14px !important;
box-shadow: none !important;
}
html body :is(.tutor-dashboard .tutor-card:hover, .tutor-dashboard-card:hover, .tutor-stat-card:hover) {
border-color: rgba(184, 255, 24, 0.34) !important;
}
html body :is(.tutor-dashboard .tutor-nav, .tutor-dashboard .tutor-tabs) {
padding: 7px;
background: rgba(255, 255, 255, 0.035) !important;
border: 1px solid var(--wa-border) !important;
border-radius: 12px !important;
}
html body :is(.tutor-dashboard-student-info, .tutor-dashboard-user-role, .tutor-dashboard-avater) {
color: var(--wa-text-soft) !important;
}
html body :is(.tutor-dashboard-statement-table-wrap, .tutor-dashboard-assignment-submitted-table) {
background: var(--wa-card) !important;
border-color: var(--wa-border) !important;
}
html body :is(.date-range-input, .tutor-date-range-wrap, .tutor-v2-date-picker) {
color: var(--wa-text) !important;
background: rgba(255, 255, 255, 0.045) !important;
border-color: var(--wa-border) !important;
}
html body .tutor-v2-date-picker .flatpickr-calendar,
html body .flatpickr-calendar {
color: var(--wa-text) !important;
background: var(--wa-card-light) !important;
border: 1px solid var(--wa-border) !important;
}
html body .flatpickr-day:hover,
html body .flatpickr-day.selected {
color: var(--wa-bg-deep) !important;
background: var(--wa-primary) !important;
border-color: var(--wa-primary) !important;
}
html body :is(.tutor-dashboard-mobile-menu, .tutor-dashboard-mobile-menu a, [class*="tutor-dashboard-sidebar-nav-mobile"]) {
font-family: var(--wa-font) !important;
background-color: #071321;
}
/* =========================================================================
12. AUTH — لوجين مودال + صفحة التسجيل
-------------------------------------------------------------------------
بنمسك أب الفورم بـ :has() بدل كلاسات البوتستراب — عشان يشتغل مهما كان
الماركب اللي بيطلعه القالب.
========================================================================= */
/* ---- عرض صفحة التسجيل ---- */
html body :is(.container, .row, .card, .card-body, .entry-content,
[class*="col-lg"], [class*="col-md"], [class*="col-xl"], [class*="col-sm"],
.tutor-course-entry-box-login5):has(#tutor-registration-wrap) {
width: 100% !important;
max-width: 620px !important;
flex: 0 0 auto !important;
margin-inline: auto !important;
float: none !important;
}
html body :has(> #tutor-registration-wrap) {
/* الحصر لازم يتكرر هنا — الأب المباشر ممكن ماتنطبقش عليه قائمة الكلاسات فوق */
width: 100% !important;
max-width: 620px !important;
margin-inline: auto !important;
padding: 36px 32px !important;
color: var(--wa-text) !important;
background:
radial-gradient(circle at 88% 0%, rgba(184, 255, 24, 0.09), transparent 34%),
linear-gradient(145deg, rgba(18, 38, 58, 0.9), rgba(6, 17, 31, 0.86)) !important;
border: 1px solid var(--wa-border-strong) !important;
border-radius: 22px !important;
box-shadow: var(--wa-shadow-lg) !important;
backdrop-filter: blur(18px) saturate(125%) !important;
-webkit-backdrop-filter: blur(18px) saturate(125%) !important;
}
html body :is(.tutor-course-entry-box-login5, .container.tutor-course-entry-box-login5) {
min-height: auto !important;
padding: 40px 16px 60px !important;
background: transparent !important;
}
html body :has(> #tutor-registration-wrap) :is(h1, h2, .entry-title),
html body .tutor-course-entry-box-login5 :is(h1, .entry-title) {
display: block !important;
margin: 0 0 20px !important;
color: #ffffff !important;
font-size: clamp(24px, 3vw, 32px) !important;
font-weight: 800 !important;
line-height: 1.45 !important;
text-align: right !important;
opacity: 1 !important;
}
html body :is(#tutor-registration-wrap, #tutor-registration-form, #tutor-registration-form .row.row-cols-1) {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
html body #tutor-registration-form :is(.mb-3, .tutor-form-group) {
width: 100% !important;
margin: 0 0 15px !important;
}
html body #tutor-registration-form .tutor-reg-form-btn-wrap {
position: relative !important;
z-index: 5 !important;
isolation: isolate !important;
display: block !important;
width: 100% !important;
margin: 6px 0 0 !important;
}
html body :is(#tutor-registration-form, #tutor-login-form) button[type="submit"] {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 50px !important;
border-radius: 11px !important;
}
/* ---- مودال اللوجين ---- */
html body .tutor-login-modal .tutor-modal-window {
width: min(430px, calc(100vw - 24px)) !important;
max-width: 430px !important;
margin: 20px auto !important;
padding: 0 !important;
}
html body .tutor-login-modal .tutor-modal-body {
overflow-y: auto !important;
max-height: calc(100vh - 42px) !important;
padding: 42px 28px 28px !important;
}
html body .tutor-login-modal :is(.tutor-h3, .tutor-h3.tutor-font-medium) {
margin: 0 0 22px !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-size: clamp(22px, 4vw, 27px) !important;
font-weight: 800 !important;
line-height: 1.55 !important;
opacity: 1 !important;
filter: none !important;
}
html body #tutor-login-form {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
html body #tutor-login-form :is(.tutor-mb-20, .tutor-mb-32, .login-username, .login-password) {
width: 100% !important;
margin: 0 0 15px !important;
}
html body #tutor-login-form :is(.tutor-login-rememeber-wrap, .tutor-login-remember-wrap) {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: wrap !important;
gap: 10px 16px !important;
margin: 4px 0 20px !important;
background: transparent !important;
border: 0 !important;
}
html body #tutor-login-form input[type="checkbox"] {
appearance: auto !important;
-webkit-appearance: checkbox !important;
flex: 0 0 18px !important;
width: 18px !important;
min-width: 18px !important;
height: 18px !important;
min-height: 18px !important;
margin: 0 !important;
accent-color: var(--wa-primary) !important;
}
/* روابط الأوث اللي Tutor بيديها كلاس .tutor-btn غلط */
html body :is(#tutor-login-form, #tutor-registration-form) :is(a, a.tutor-btn, a.tutor-btn-ghost, a.tutor-btn-link),
html body :has(> #tutor-registration-wrap) a:not([class*="social"]):not([class*="oauth"]) {
display: inline !important;
width: auto !important;
min-width: 0 !important;
min-height: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
color: var(--wa-primary) !important;
-webkit-text-fill-color: var(--wa-primary) !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
font-weight: 700 !important;
text-decoration: none !important;
transform: none !important;
}
html body :is(#tutor-login-form, #tutor-registration-form) a:hover {
color: var(--wa-primary-hover) !important;
text-decoration: underline !important;
}
/* ---- سطر "عندك حساب بالفعل؟" وأي نص مساعد تحت الفورم ----
العناصر دي بتاخد لونها من var(--tutor-color-white) في السورس،
فلازم نثبّتها صريح بدل ما تعتمد على المتغير. */
html body :has(> #tutor-registration-wrap) :is(.tutor-small, .tutor-fs-7, .tutor-text-center),
html body :is(.tutor-course-entry-box-login, .tutor-course-entry-box-login5) :is(.tutor-small, p, span),
html body #tutor-login-form :is(.tutor-text-center, .tutor-small),
html body .tutor-login-modal .tutor-modal-body > :is(p, .tutor-text-center) {
color: var(--wa-text-soft) !important;
-webkit-text-fill-color: var(--wa-text-soft) !important;
background: transparent !important;
font-weight: 500 !important;
opacity: 1 !important;
}
/* الرابط جوه السطر ده يفضل فسفوري */
html body :is(.tutor-course-entry-box-login, .tutor-course-entry-box-login5) :is(.tutor-small, p, span) a,
html body :has(> #tutor-registration-wrap) :is(.tutor-small, .tutor-text-center) a {
color: var(--wa-primary) !important;
-webkit-text-fill-color: var(--wa-primary) !important;
font-weight: 700 !important;
}
/* ---- أسطح كانت بتعتمد على --tutor-color-white وهو داكن ----
دلوقتي المتغير رجع أبيض، فبنقلب الخلفيات دي صريح. */
html body :is(.tutor-input-group-text, .tutor-input-group-addon, .tutor-form-icon) {
color: var(--wa-text-muted) !important;
background-color: rgba(255, 255, 255, 0.045) !important;
border-color: var(--wa-border-strong) !important;
}
html body :is(.tutor-course-spotlight-content, .tutor-lesson-sidebar, .tutor-spotlight-body,
.tutor-quiz-body, .tutor-assignment-body, .tutor-lesson-body,
.tutor-course-topic-content, .tutor-toggle-more) {
background-color: var(--wa-card) !important;
border-color: var(--wa-border) !important;
}
/* أي عنصر لسه بيرسم أبيض صريح جوه مناطق Tutor */
html body :is(.tutor-wrap, .tutor-dashboard, .tutor-modal, .tutor-course-single-content-wrapper)
:is([style*="background: #fff"], [style*="background:#fff"],
[style*="background-color: #fff"], [style*="background-color:#fff"],
[style*="background: rgb(255, 255, 255)"]) {
background-color: var(--wa-card) !important;
}
/* =========================================================================
13. E-COMMERCE — كارت · تشيك آوت · طلبات
(السورس بيكتب #ffffff صريح في _checkout.scss و _cart.scss)
========================================================================= */
html body :is(.tutor-cart-page, .tutor-checkout-page) {
color: var(--wa-text) !important;
background: transparent !important;
}
html body :is(.tutor-checkout-billing, .tutor-checkout-payment-options, .tutor-checkout-summary,
.tutor-cart-page .tutor-card, .tutor-checkout-page .tutor-card) {
color: var(--wa-text-soft) !important;
background: linear-gradient(145deg, var(--wa-card-light), var(--wa-card)) !important;
border: 1px solid var(--wa-border) !important;
border-radius: var(--wa-radius-lg) !important;
}
html body .tutor-checkout-payment-options :is(label, .tutor-radio-select) {
color: var(--wa-text-soft) !important;
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid var(--wa-border) !important;
border-radius: 12px !important;
}
html body .tutor-checkout-payment-options input:checked + label,
html body .tutor-radio-select:has(input:checked) {
border-color: var(--wa-primary) !important;
background: var(--wa-primary-soft) !important;
}
html body :is(.tutor-radio-select-title, .tutor-checkout-summary-item-title) {
color: var(--wa-text) !important;
}
html body .tutor-radio-select-content {
color: var(--wa-text-muted) !important;
}
html body :is(.label-order-status, .label-status-cancelled, .gradename-bg, .gradename-outline) {
border-radius: 50px !important;
}
html body .label-order-status {
color: var(--wa-bg-deep) !important;
background: var(--wa-primary) !important;
}
html body .label-status-cancelled {
color: #ffd6da !important;
background: rgba(255, 90, 120, 0.15) !important;
}
/* =========================================================================
14. RTL — تصحيحات الاتجاه
-------------------------------------------------------------------------
Tutor بيحمّل main.rtl.css منفصل. المشاكل اللي بتحصل غالبًا: عناصر
بتاخد لون/اتجاه من القالب بدل Tutor، وأيقونات بتفضل مقلوبة.
========================================================================= */
html[dir="rtl"] body :is(.tutor-wrap, .tutor-dashboard, .tutor-modal, .tutor-offcanvas,
#tutor-login-form, #tutor-registration-form),
body.rtl :is(.tutor-wrap, .tutor-dashboard, .tutor-modal, .tutor-offcanvas,
#tutor-login-form, #tutor-registration-form) {
direction: rtl !important;
text-align: right !important;
}
/* أي عنصر داخل Tutor في RTL يورّث لون النص الفاتح بدل ما ياخد الافتراضي الغامق */
body.rtl :is(.tutor-wrap, .tutor-dashboard, .tutor-modal, .tutor-offcanvas,
.tutor-course-single-content-wrapper, .tutor-checkout-page, .tutor-cart-page)
:is(p, span, div, li, td, th, dd, dt, label, small, strong, em, figcaption) {
color: inherit;
}
body.rtl :is(.tutor-wrap, .tutor-dashboard, .tutor-modal)
:is([style*="color: #212327"], [style*="color:#212327"],
[style*="color: #41454F"], [style*="color:#41454F"],
[style*="color: rgb(33, 35, 39)"]) {
color: var(--wa-text-soft) !important;
}
/* أرقام ولاتيني جوه نص عربي */
body.rtl :is(.tutor-wrap, .tutor-dashboard, .tutor-modal) :is(.tutor-meta-value, .tutor-price, time, bdi) {
unicode-bidi: isolate;
}
/* الأيقونات السهمية بتتقلب */
body.rtl :is([class*="tutor-icon-angle-left"], [class*="tutor-icon-angle-right"],
[class*="tutor-icon-previous"], [class*="tutor-icon-next"],
[class*="tutor-icon-arrow-left"], [class*="tutor-icon-arrow-right"]) {
transform: scaleX(-1);
}
/* حدود وشرائط جانبية تتبع الاتجاه */
body.rtl :is(.tutor-dashboard-sidebar-nav li.active > a, .tutor-dashboard-menu-item.active > a) {
box-shadow: inset -3px 0 0 var(--wa-primary);
}
body.rtl :is(.tutor-alert, .tutor-login-error:not(:empty), .tutor-registration-error) {
box-shadow: inset -3px 0 0 rgba(251, 113, 133, 0.8) !important;
text-align: right !important;
}
body.rtl .tutor-course-content-list-item:hover {
padding-inline-start: 17px !important;
}
/* المسافات المنطقية بدل left/right */
body.rtl :is(.tutor-card, .tutor-table, .tutor-modal-content, .tutor-course-details-header) {
text-align: right;
}
/* =========================================================================
15. ACCESSIBILITY
========================================================================= */
html body :is(.tutor-wrap, .tutor-dashboard, .tutor-modal) :is(a, button, input, select, textarea):focus-visible {
outline: 2px solid var(--wa-primary) !important;
outline-offset: 2px !important;
}
html body ::selection {
color: var(--wa-bg-deep);
background: var(--wa-primary);
}
@media (prefers-reduced-motion: reduce) {
html body :is(.tutor-wrap, .tutor-dashboard, .tutor-modal) *,
html body :is(.tutor-wrap, .tutor-dashboard, .tutor-modal) *::before,
html body :is(.tutor-wrap, .tutor-dashboard, .tutor-modal) *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* =========================================================================
16. RESPONSIVE
========================================================================= */
@media (max-width: 1199px) {
html body .tutor-single-course-sidebar {
position: static;
margin-top: 30px !important;
}
html body .tutor-course-details-tab .tutor-is-sticky {
top: 10px;
}
html body .tutor-dashboard-sidebar {
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
}
@media (max-width: 767px) {
html body .tutor-course-details-page {
padding: 24px 13px 55px;
}
html body .tutor-course-details-header {
margin-bottom: 22px !important;
padding: 24px 18px !important;
border-radius: 18px;
}
html body .tutor-course-details-title {
font-size: 26px !important;
line-height: 1.45 !important;
}
html body .tutor-course-details-tab .tutor-nav {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
}
html body .tutor-course-details-tab .tutor-nav::-webkit-scrollbar {
display: none;
}
html body .tutor-course-details-tab .tutor-nav-item {
flex-shrink: 0;
}
html body .tutor-tab-item {
padding: 20px 15px;
border-radius: 16px;
}
html body .tutor-course-details-widget {
padding: 18px 15px;
}
html body .tutor-accordion-item-header {
min-height: 54px;
font-size: 14px !important;
line-height: 1.7;
}
html body :is(.tutor-course-card, .tutor-card) {
border-radius: 16px !important;
}
html body .tutor-table {
display: block;
overflow-x: auto;
}
html body .tutor-login-modal .tutor-modal-window {
width: calc(100vw - 16px) !important;
max-width: calc(100vw - 16px) !important;
margin: 8px auto !important;
}
html body .tutor-login-modal .tutor-modal-content {
max-height: calc(100vh - 16px) !important;
border-radius: 17px !important;
}
html body .tutor-login-modal .tutor-modal-body {
padding: 40px 18px 22px !important;
}
html body #tutor-login-form :is(.tutor-login-rememeber-wrap, .tutor-login-remember-wrap) {
align-items: flex-start !important;
flex-direction: column !important;
}
html body :is(.container, .row, .card, .card-body, [class*="col-"]):has(#tutor-registration-wrap) {
max-width: 100% !important;
}
html body :has(> #tutor-registration-wrap) {
padding: 26px 18px !important;
border-radius: 18px !important;
}
html body :is(.tutor-course-entry-box-login5, .container.tutor-course-entry-box-login5) {
padding: 24px 12px 48px !important;
}
html body :is(.tutor-course-single-sidebar, .tutor-dashboard-sidebar) {
border-radius: 0 !important;
}
}
/* =========================================================================
WA7EED × TUTOR LMS — V8 PATCH · 17. TUTOR 4.x TOKENS + BUTTON FIX
-------------------------------------------------------------------------
ضيف السكشن ده في آخر ملف wa7eed-tutor-dark-v8.css
========================================================================= */
/* -------------------------------------------------------------------------
17.1 خط Cairo في واجهات Tutor 4.x الجديدة
-------------------------------------------------------------------------
منطقة التعلّم والداشبورد الجديدة (tutor-core / tutor-learning-area /
tutor-dashboard) مش بتستخدم الكلاسات القديمة خالص — بتستخدم توكنز:
assets/core/scss/tokens/_typography.scss
$tutor-font-family-body: var(--tutor-font-family-body, 'Inter'), ...
assets/core/scss/main.scss
html { font-family: $tutor-font-family-body; }
يعني كل اللي محتاجينه: نعرّف المتغيرين دول. Tutor كمان بيحمّل Inter
من جوجل فونتس، فبنلغي أثره كده.
------------------------------------------------------------------------- */
html:root,
html,
html body,
[data-tutor-theme],
[data-tutor-ui] {
--tutor-font-family-body: "Cairo";
--tutor-font-family-heading: "Cairo";
--tutor-toast-font: "Cairo", "Tajawal", sans-serif;
}
/* تغطية احتياطية لعناصر النص في واجهات v4 */
html body :is(
.tutor-account-page-wrapper,
.tutor-account-container,
.tutor-account-section,
.tutor-billing,
.tutor-billing-card,
.tutor-progress-card,
.tutor-comments-list,
.tutor-comment-item,
.tutor-comment-edit-form,
.tutor-announcement-item,
.tutor-certificate-locked-modal,
[class*="tutor-learning"],
[class*="tutor-lesson"],
[class*="tutor-spotlight"]
),
html body :is(
.tutor-account-page-wrapper,
.tutor-account-container,
.tutor-billing,
.tutor-comments-list,
[class*="tutor-learning"],
[class*="tutor-lesson"],
[class*="tutor-spotlight"]
) :is(h1, h2, h3, h4, h5, h6, p, a, span, div, label, small, strong, em,
button, input, textarea, select, option, li, td, th) {
font-family: "Cairo", "Tajawal", sans-serif !important;
letter-spacing: 0 !important;
}
/* الأيقونات تفضل على خطها */
html body :is([class^="tutor-icon-"], [class*=" tutor-icon-"]),
html body :is([class^="tutor-icon-"], [class*=" tutor-icon-"])::before {
font-family: "tutor" !important;
}
/* -------------------------------------------------------------------------
17.2 زرار "إضافة إلى السلة" — النص مش باين
-------------------------------------------------------------------------
السورس: templates/loop/course-price.php
class="tutor-btn tutor-btn-primary tutor-btn-lg tutor-btn-block
tutor-mt-24 tutor-add-to-cart-button"
الزرار فعلاً .tutor-btn-primary، فالقاعدة العامة المفروض تمسكه — لكن
السبب إن جواه جاي من الثيم/ووكومرس بلون خاص، أو text-shadow
من الثيم بيبهّت النص. بنقفل كل الاحتمالات.
------------------------------------------------------------------------- */
html body :is(
.tutor-add-to-cart-button,
.tutor-btn.tutor-btn-primary.tutor-btn-lg,
.tutor-btn.tutor-btn-primary.tutor-btn-block,
.tutor-course-sidebar-card .tutor-btn-primary,
.tutor-course-card .tutor-btn-primary,
a.tutor-add-to-cart-button,
button.tutor-add-to-cart-button
) {
color: var(--wa-bg-deep) !important;
-webkit-text-fill-color: var(--wa-bg-deep) !important;
text-shadow: none !important;
filter: none !important;
opacity: 1 !important;
font-weight: 800 !important;
mix-blend-mode: normal !important;
}
/* أي حاجة جوّه الزرار: نص، أيقونة، سبان من ووكومرس، SVG */
html body :is(
.tutor-add-to-cart-button,
.tutor-btn.tutor-btn-primary.tutor-btn-lg,
.tutor-btn.tutor-btn-primary.tutor-btn-block,
.tutor-course-sidebar-card .tutor-btn-primary,
.tutor-course-card .tutor-btn-primary
) :is(*, span, i, b, strong, small, bdi, [class^="tutor-icon-"], [class*=" tutor-icon-"]) {
color: var(--wa-bg-deep) !important;
-webkit-text-fill-color: var(--wa-bg-deep) !important;
text-shadow: none !important;
opacity: 1 !important;
}
html body :is(.tutor-add-to-cart-button, .tutor-course-card .tutor-btn-primary) svg {
color: var(--wa-bg-deep) !important;
fill: currentColor !important;
stroke: currentColor !important;
}
/* حالة "بيحمّل" بعد الضغط */
html body .tutor-add-to-cart-button:is(.tutor-updating-message, .loading, .is-loading) {
color: var(--wa-bg-deep) !important;
opacity: 0.85 !important;
}
/* السعر القديم المشطوب جنب السعر الجديد */
html body :is(.tutor-course-price del, .tutor-price del, del .amount, del bdi) {
color: var(--wa-text-muted) !important;
-webkit-text-fill-color: var(--wa-text-muted) !important;
opacity: 0.75 !important;
}
/* -------------------------------------------------------------------------
17.3 (اختياري) توكنز Tutor 4.x الجديدة — لو فعّلت الدارك مود الأصلي
-------------------------------------------------------------------------
Tutor 4 عنده ثيم داكن جاهز: [data-tutor-theme='dark']
(assets/core/scss/themes/_dark.scss)
لو فعّلته، السطور دي بتلوّن البراند بالفسفوري بتاعك بدل الأزرق.
لو مش مفعّله، السطور دي مالهاش أي أثر — سيبها عادي.
------------------------------------------------------------------------- */
html:root,
[data-tutor-theme] {
--tutor-brand-500: #c4ff42;
--tutor-brand-600: #b8ff18;
--tutor-brand-700: #9ee000;
--tutor-brand-800: #7fb400;
--tutor-brand-900: #16290a;
--tutor-brand-950: #0d1f31;
}
/* لو الدارك مود الأصلي شغال: أي نص فوق سطح البراند لازم يبقى داكن */
[data-tutor-theme="dark"] :is(
.tutor-btn-primary,
[class*="surface-brand-primary"],
[class*="bg-brand"]
) {
color: #06111f !important;
-webkit-text-fill-color: #06111f !important;
}
/* إزالة طبقة التدرج البيضاء قبل زر اعرض المزيد */
html body.single-courses
div#tutor-course-details-tab-info
div.tutor-course-details-content.tutor-toggle-more-content.tutor-toggle-more-collapsed::before,
html body.single-courses
div#tutor-course-details-tab-info
div.tutor-course-details-content.tutor-toggle-more-content.tutor-toggle-more-collapsed::after {
content: none !important;
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
background: none !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
.tutor-ratings-count , body > div.tutor-wrap.tutor-full-width-course-top.tutor-course-top-info.tutor-page-wrap.tutor-wrap-parent.post-604.courses.type-courses.status-publish.has-post-thumbnail.hentry > div > div > main > div.tutor-course-details-tab.tutor-mt-32 > div.tutor-is-sticky > nav > li:nth-child(2) > a , body > div.tutor-wrap.tutor-full-width-course-top.tutor-course-top-info.tutor-page-wrap.tutor-wrap-parent.post-604.courses.type-courses.status-publish.has-post-thumbnail.hentry > div > header > div.tutor-course-details-ratings > div > div.tutor-ratings-average , #slick-slide00 > div > div.tutor-card-body > div.tutor-course-ratings.tutor-mb-8 > div > div.tutor-ratings-average و {
display :none; !important
}
body > div.tutor-wrap.tutor-full-width-course-top.tutor-course-top-info.tutor-page-wrap.tutor-wrap-parent.post-604.courses.type-courses.status-publish.has-post-thumbnail.hentry > div > header > div.tutor-course-details-top.tutor-mt-16 > div > div.tutor-col > div > div{
display:none;
}
/* Fix Tutor LMS YouTube video aspect ratio */
.tutor-video-player .plyr__video-wrapper,
.tutor-video-player .plyr__video-embed {
aspect-ratio: 16 / 9 !important;
height: auto !important;
padding-bottom: 0 !important;
}
/* Make iframe fill player correctly */
.tutor-video-player .plyr__video-wrapper iframe,
{
width: 100% !important;
height: 100% !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
}
/* Keep Plyr controls visible */
.tutor-video-player .plyr__controls {
z-index: 10 !important;
}
//* ==================================
WA7EED Course Description Cards
================================== */
.wa-course-summary,
.wa-course-summary * {
box-sizing: border-box;
}
.wa-course-summary {
direction: rtl;
width: 100%;
max-width: 100%;
color: #fff;
font-family: inherit;
}
/* =========================
HEAD
========================= */
.wa-summary-head {
margin-bottom: 20px;
text-align: right;
}
.wa-summary-label {
display: inline-flex;
align-items: center;
margin-bottom: 12px;
padding: 7px 14px;
border: 1px solid rgba(183,255,26,.22);
border-radius: 999px;
background: rgba(183,255,26,.07);
color: #b7ff1a;
font-size: 12px;
font-weight: 700;
line-height: 1;
}
.wa-summary-head h2 {
margin: 0 0 8px !important;
color: #fff !important;
font-size: 34px !important;
line-height: 1.35 !important;
font-weight: 800 !important;
letter-spacing: 0 !important;
}
.wa-summary-head h2 span {
color: #ffffff;
display: block;
}
.wa-summary-head p {
margin: 0 !important;
color: #9fb0be !important;
font-size: 14px !important;
line-height: 1.8 !important;
}
/* =========================
GRID
========================= */
.wa-summary-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
align-items: stretch;
}
/* =========================
CARD
========================= */
.wa-summary-card {
display: flex;
align-items: flex-start;
gap: 14px;
min-height: 118px;
height: 100%;
padding: 18px 18px 16px;
background: linear-gradient(
135deg,
rgba(17, 43, 62, 0.95),
rgba(11, 31, 46, 0.96)
);
border: 1px solid rgba(74, 114, 145, 0.35);
border-radius: 16px;
transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.wa-summary-card:hover {
transform: translateY(-3px);
border-color: rgba(183,255,26,.45);
box-shadow: 0 10px 28px rgba(0, 0, 0, .20);
}
/* =========================
ICON
========================= */
.wa-summary-card .wa-icon {
width: 46px;
height: 46px;
min-width: 46px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid rgba(183,255,26,.16);
background: rgba(183,255,26,.08);
color: #b7ff1a;
}
.wa-summary-card .wa-icon i {
font-size: 17px;
line-height: 1;
}
/* =========================
TEXT
========================= */
.wa-summary-card h3 {
margin: 0 0 6px !important;
color: #fff !important;
font-size: 16px !important;
font-weight: 800 !important;
line-height: 1.5 !important;
}
.wa-summary-card p {
margin: 0 !important;
color: #9fb0be !important;
font-size: 13px !important;
line-height: 1.75 !important;
}
/* =========================
BOTTOM NOTE
========================= */
.wa-summary-end {
margin-top: 16px;
padding: 18px 20px;
background: linear-gradient(
135deg,
rgba(183,255,26,.06),
rgba(183,255,26,.03)
);
border: 1px solid rgba(183,255,26,.18);
border-radius: 16px;
color: #b8c6d1;
font-size: 13px;
line-height: 1.9;
}
.wa-summary-end strong {
color: #ffffff;
margin-left: 4px;
}
.wa-summary-end span {
color: #b7ff1a;
font-weight: 700;
}
/* =========================
TABLET
========================= */
@media (max-width: 991px) {
.wa-summary-head h2 {
font-size: 28px !important;
}
.wa-summary-grid {
grid-template-columns: 1fr;
}
}
/* =========================
MOBILE
========================= */
@media (max-width: 767px) {
.wa-summary-head {
margin-bottom: 16px;
}
.wa-summary-label {
font-size: 11px;
padding: 6px 12px;
}
.wa-summary-head h2 {
font-size: 23px !important;
line-height: 1.45 !important;
}
.wa-summary-head p {
font-size: 13px !important;
line-height: 1.8 !important;
}
.wa-summary-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.wa-summary-card {
min-height: auto;
padding: 15px;
gap: 12px;
border-radius: 14px;
}
.wa-summary-card .wa-icon {
width: 40px;
height: 40px;
min-width: 40px;
}
.wa-summary-card .wa-icon i {
font-size: 15px;
}
.wa-summary-card h3 {
font-size: 14px !important;
}
.wa-summary-card p {
font-size: 12px !important;
line-height: 1.8 !important;
}
.wa-summary-end {
padding: 15px 16px;
font-size: 12px;
border-radius: 14px;
}
}
/* =========================================
FIX TUTOR LMS DESKTOP CARDS
========================================= */
/* Tutor أحيانًا بيضيف p / br فاضية جوه الجريد */
.wa-summary-grid > p,
.wa-summary-grid > br,
.wa-summary-grid > p:empty {
display: none !important;
}
/* Desktop */
@media (min-width: 992px) {
.wa-summary-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 14px !important;
width: 100% !important;
}
.wa-summary-grid > .wa-summary-card {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
grid-column: auto !important;
}
}