html[dir="rtl"] body {
    direction: rtl;
    font-family: "Tajawal", "Inter", Arial, sans-serif;
}

html[dir="rtl"] input:not([type="checkbox"]):not([type="radio"]),
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
}

html[dir="rtl"] .input-shell .input-icon,
html[dir="rtl"] .input-icon {
    right: 18px !important;
    left: auto !important;
}

html[dir="rtl"] .input-shell .custom-input,
html[dir="rtl"] .input-shell .form-control {
    padding-right: 52px !important;
    padding-left: 18px !important;
}

html[dir="rtl"] .input-shell .password-input {
    padding-left: 70px !important;
}

html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[id*="Photon" i],
html[dir="rtl"] input[name*="Photon" i],
html[dir="rtl"] .video-url-input {
    direction: ltr;
    text-align: left !important;
    unicode-bidi: plaintext;
}

html[dir="rtl"] input[id*="NameEn" i],
html[dir="rtl"] input[id*="EnName" i],
html[dir="rtl"] input[id*="TitleEn" i],
html[dir="rtl"] input[id*="QuestionEn" i],
html[dir="rtl"] input[id*="ChoiceEn" i],
html[dir="rtl"] textarea[id*="DescriptionEn" i],
html[dir="rtl"] textarea[id*="TextEn" i] {
    direction: ltr;
    text-align: left !important;
    unicode-bidi: plaintext;
}

html[dir="rtl"] input[id*="NameAr" i],
html[dir="rtl"] input[id*="ARName" i],
html[dir="rtl"] input[id*="TitleAr" i],
html[dir="rtl"] input[id*="QuestionAr" i],
html[dir="rtl"] input[id*="ChoiceAr" i],
html[dir="rtl"] textarea[id*="DescriptionAr" i],
html[dir="rtl"] textarea[id*="TextAr" i] {
    direction: rtl;
    text-align: right !important;
}

html[dir="rtl"] .eye-toggle {
    left: 10px !important;
    right: auto !important;
}

html[dir="rtl"] .hero-robot-wrap {
    right: auto !important;
    left: 7% !important;
}

html[dir="rtl"] .hero-copy {
    width: min(620px, calc(100% - 360px)) !important;
    max-width: calc(100% - 360px) !important;
    margin-right: 0 !important;
    margin-left: auto !important;
    min-width: 0;
    text-align: right !important;
}

html[dir="rtl"] .hero-copy h1 {
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    overflow-wrap: break-word;
}

html[dir="rtl"] .hero-copy p {
    margin-right: 0 !important;
    margin-left: auto !important;
    text-align: right !important;
}

html[dir="rtl"] .hero-pill {
    letter-spacing: 0 !important;
    text-transform: none !important;
}

html[dir="rtl"] .robot-zone {
    left: auto !important;
    right: 48% !important;
    transform: translateX(50%) !important;
}

html[dir="rtl"] .orb.one,
html[dir="rtl"] .layout-orb.one {
    left: auto !important;
    right: -90px !important;
}

html[dir="rtl"] .orb.two,
html[dir="rtl"] .layout-orb.two {
    right: auto !important;
    left: -110px !important;
}

html[dir="rtl"] .dashboard-hero::before,
html[dir="rtl"] .materials-hero::before,
html[dir="rtl"] .lessons-hero::before,
html[dir="rtl"] .sections-hero::before,
html[dir="rtl"] .users-hero::before,
html[dir="rtl"] .topics-hero::before,
html[dir="rtl"] .classes-hero::before,
html[dir="rtl"] .images-hero::before,
html[dir="rtl"] .details-hero::before,
html[dir="rtl"] .items-hero::before,
html[dir="rtl"] .sort-hero::before,
html[dir="rtl"] .topic-screen-hero::before,
html[dir="rtl"] .user-topics-hero::before,
html[dir="rtl"] .add-user-hero::before {
    -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent 88%) !important;
    mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent 88%) !important;
}

html[dir="rtl"] .search-box i {
    right: 18px !important;
    left: auto !important;
}

html[dir="rtl"] .search-box input {
    padding-right: 52px !important;
    padding-left: 18px !important;
}

html[dir="rtl"] .action-arrow {
    right: auto !important;
    left: 18px !important;
}

html[dir="rtl"] .action-desc {
    padding-right: 0 !important;
    padding-left: 36px !important;
}

html[dir="rtl"] .section-order,
html[dir="rtl"] .order-badge {
    right: auto !important;
    left: 14px !important;
}

html[dir="rtl"] .drag-handle {
    left: auto !important;
    right: 14px !important;
}

html[dir="rtl"] .section-body {
    padding-right: 0 !important;
    padding-left: 52px !important;
}

html[dir="rtl"] .object-wheel-text strong,
html[dir="rtl"] .object-wheel-badge {
    margin-right: auto !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .user-card:hover .user-card-arrow,
html[dir="rtl"] .school-card:hover .school-card-arrow {
    transform: translateX(-3px) scale(1.08) !important;
}

html[dir="rtl"] .btn-arrow,
html[dir="rtl"] .fa-arrow-right,
html[dir="rtl"] .fa-arrow-left,
html[dir="rtl"] .fa-chevron-right,
html[dir="rtl"] .fa-chevron-left,
html[dir="rtl"] .fa-right-from-bracket {
    transform: scaleX(-1);
}

html[dir="rtl"] .user-card,
html[dir="rtl"] .topic-card,
html[dir="rtl"] .lesson-card,
html[dir="rtl"] .section-card,
html[dir="rtl"] .school-card,
html[dir="rtl"] .item-card,
html[dir="rtl"] .action-card,
html[dir="rtl"] .object-wheel-item,
html[dir="rtl"] .details-card,
html[dir="rtl"] .form-panel,
html[dir="rtl"] .editor-panel {
    text-align: right !important;
}

html[dir="rtl"] .modal-header .btn-close {
    margin: -0.5rem auto -0.5rem -0.5rem;
}

.language-toggle {
    min-height: 46px;
    border: 1px solid rgba(170, 190, 255, 0.24);
    border-radius: 16px;
    color: #f5f7ff;
    background: rgba(7, 11, 27, 0.72);
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    outline: none;
    white-space: nowrap;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.language-toggle:hover,
.language-toggle:focus {
    color: #fff;
    border-color: rgba(36, 215, 255, 0.68);
    background: rgba(16, 24, 52, 0.92);
    box-shadow: 0 0 0 3px rgba(36, 215, 255, 0.12);
    transform: translateY(-2px);
}

.login-language {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}

.login-language .language-toggle {
    min-width: 145px;
}

@media (max-width: 768px) {
    html[dir="rtl"] .hero-copy {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    html[dir="rtl"] .hero-robot-wrap {
        right: auto !important;
        left: auto !important;
    }

    html[dir="rtl"] .section-body {
        padding-left: 0 !important;
    }

    html[dir="rtl"] .section-order,
    html[dir="rtl"] .order-badge {
        left: 10px !important;
    }

    html[dir="rtl"] .drag-handle {
        right: 10px !important;
    }

    html[dir="rtl"] .topic-badge {
        margin-right: 64px !important;
        margin-left: 0 !important;
    }

    html[dir="rtl"] .robot-zone {
        right: auto !important;
        left: auto !important;
        transform: none !important;
    }
}

@media (min-width: 769px) and (max-width: 1060px) {
    html[dir="rtl"] .robot-zone {
        right: auto !important;
        left: 2% !important;
        transform: none !important;
    }
}

@media (max-width: 420px) {
    html[dir="rtl"] .topic-badge {
        margin-right: 56px !important;
    }
}

/* Educational content builder scrollbars */
:is(
    .labeeb-materials-page,
    .labeeb-classes-page,
    .labeeb-lessons-page,
    .labeeb-sections-page
) {
    --content-scroll-track: rgba(7, 11, 27, 0.55);
    --content-scroll-thumb: #568dff;
}

:is(
    .labeeb-materials-page,
    .labeeb-classes-page,
    .labeeb-lessons-page,
    .labeeb-sections-page
) * {
    scrollbar-color: var(--content-scroll-thumb) var(--content-scroll-track);
    scrollbar-width: thin;
}

:is(
    .labeeb-materials-page,
    .labeeb-classes-page,
    .labeeb-lessons-page,
    .labeeb-sections-page
) *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

:is(
    .labeeb-materials-page,
    .labeeb-classes-page,
    .labeeb-lessons-page,
    .labeeb-sections-page
) *::-webkit-scrollbar-track {
    border-radius: 999px;
    background: var(--content-scroll-track);
    box-shadow: inset 0 0 0 1px rgba(106, 142, 216, 0.08);
}

:is(
    .labeeb-materials-page,
    .labeeb-classes-page,
    .labeeb-lessons-page,
    .labeeb-sections-page
) *::-webkit-scrollbar-thumb {
    min-height: 44px;
    border-radius: 999px;
    background: linear-gradient(180deg, #24d7ff 0%, #4f94ff 52%, #9b5cff 100%);
    box-shadow: 0 0 12px rgba(66, 186, 255, 0.32);
}

:is(
    .labeeb-materials-page,
    .labeeb-classes-page,
    .labeeb-lessons-page,
    .labeeb-sections-page
) *::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #4ae4fb 0%, #65a3ff 48%, #a16cff 100%);
    box-shadow: 0 0 16px rgba(85, 198, 255, 0.48);
}

:is(
    .labeeb-materials-page,
    .labeeb-classes-page,
    .labeeb-lessons-page,
    .labeeb-sections-page
) *::-webkit-scrollbar-corner {
    background: var(--content-scroll-track);
}

html:has(.labeeb-materials-page),
html:has(.labeeb-classes-page),
html:has(.labeeb-lessons-page),
html:has(.labeeb-sections-page) {
    scrollbar-color: #568dff rgba(7, 11, 27, 0.55);
    scrollbar-width: thin;
}

html:has(.labeeb-materials-page)::-webkit-scrollbar,
html:has(.labeeb-classes-page)::-webkit-scrollbar,
html:has(.labeeb-lessons-page)::-webkit-scrollbar,
html:has(.labeeb-sections-page)::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html:has(.labeeb-materials-page)::-webkit-scrollbar-track,
html:has(.labeeb-classes-page)::-webkit-scrollbar-track,
html:has(.labeeb-lessons-page)::-webkit-scrollbar-track,
html:has(.labeeb-sections-page)::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(7, 11, 27, 0.55);
}

html:has(.labeeb-materials-page)::-webkit-scrollbar-thumb,
html:has(.labeeb-classes-page)::-webkit-scrollbar-thumb,
html:has(.labeeb-lessons-page)::-webkit-scrollbar-thumb,
html:has(.labeeb-sections-page)::-webkit-scrollbar-thumb {
    min-height: 44px;
    border-radius: 999px;
    background: linear-gradient(180deg, #24d7ff 0%, #4f94ff 52%, #9b5cff 100%);
    box-shadow: 0 0 12px rgba(66, 186, 255, 0.32);
}

html:has(.labeeb-materials-page)::-webkit-scrollbar-thumb:hover,
html:has(.labeeb-classes-page)::-webkit-scrollbar-thumb:hover,
html:has(.labeeb-lessons-page)::-webkit-scrollbar-thumb:hover,
html:has(.labeeb-sections-page)::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #4ae4fb 0%, #65a3ff 48%, #a16cff 100%);
}