/* ============================================================
   RTL STYLES FOR ARABIC VERSION - AL OMRAN THEME
   هذا الملف يحتوي على جميع الأنماط للنسخة العربية RTL
   ============================================================ */

/* ============================================================
   GLOBAL RTL DIRECTION
   ============================================================ */
html[dir="rtl"],
html[lang="ar"],
body.rtl-mode {
    direction: rtl !important;
}

html[dir="rtl"] body,
html[lang="ar"] body {
    direction: rtl !important;
    text-align: right !important;
    font-family: 'Cairo', 'Tajawal', sans-serif !important;
}

/* ============================================================
   TRUST BADGE - RTL
   ============================================================ */
html[dir="rtl"] .trust-badge .badge-icon {
    margin-left: 0.75rem;
    margin-right: 0;
}

/* ============================================================
   PROGRAM CARDS - RTL
   ============================================================ */
html[dir="rtl"] .program-card-hover:hover .program-link {
    transform: translateX(-10px);
}

html[dir="rtl"] .program-badge {
    left: auto;
    right: -10px;
}

html[dir="rtl"] .program-link:hover {
    gap: 1rem;
}

/* ============================================================
   TESTIMONIALS - RTL
   ============================================================ */
html[dir="rtl"] .testimonial-card .testimonial-rating i {
    margin-left: 0.25rem;
    margin-right: 0;
}

/* ============================================================
   FLOATING BUTTONS - RTL
   ============================================================ */
html[dir="rtl"] .o_floating_actions {
    right: auto !important;
    left: 30px !important;
}

html[dir="rtl"] .o_btn_tooltip {
    right: auto !important;
    left: 70px !important;
}

html[dir="rtl"] .o_btn_tooltip::before {
    left: auto !important;
    right: 50% !important;
    border-right-color: transparent !important;
    border-left-color: rgba(0, 0, 0, 0.85) !important;
}

html[dir="rtl"] .o_floating_btn:hover .o_btn_tooltip {
    transform: translateX(10px) !important;
}

@media (max-width: 768px) {
    html[dir="rtl"] .o_floating_actions {
        left: 20px !important;
        right: auto !important;
    }
}

/* ============================================================
   FOOTER - RTL
   ============================================================ */
html[dir="rtl"] footer h5::after {
    left: auto;
    right: 0;
}

html[dir="rtl"] footer .hover-primary:hover {
    padding-right: 5px;
    padding-left: 0;
}

/* Footer list icons - RTL */
html[dir="rtl"] footer .fa-chevron-right {
    display: none;
}

html[dir="rtl"] footer a .fa-chevron-left,
html[dir="rtl"] footer li .fa-chevron-left {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* ============================================================
   EXPERIENCE BADGE - RTL
   ============================================================ */
html[dir="rtl"] .experience-badge {
    right: auto;
    left: 30px;
}

@media (max-width: 768px) {
    html[dir="rtl"] .experience-badge {
        left: 15px;
        right: auto;
    }
}

/* ============================================================
   CARD TAGS - RTL
   ============================================================ */
html[dir="rtl"] .card-tag {
    right: auto;
    left: 20px;
}

/* ============================================================
   GOAL ITEMS - RTL
   ============================================================ */
html[dir="rtl"] .goal-icon {
    margin-right: 0;
    margin-left: 1rem;
}

/* ============================================================
   FEATURE BOXES - RTL
   ============================================================ */
html[dir="rtl"] .feature-box-with-logo {
    text-align: right;
}

html[dir="rtl"] .feature-box-with-logo .feature-icon {
    margin-left: 1.5rem;
    margin-right: 0;
}

@media (max-width: 768px) {
    html[dir="rtl"] .feature-box-with-logo {
        text-align: center;
    }

    html[dir="rtl"] .feature-box-with-logo .feature-icon {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ============================================================
   STATS BAR - RTL
   ============================================================ */
html[dir="rtl"] .stats-bar .stat-box::after {
    left: auto;
    right: 0;
}

/* ============================================================
   HERO GRADIENT - RTL
   ============================================================ */
html[dir="rtl"] .hero-premium .hero-gradient-overlay {
    background: linear-gradient(
        90deg,
        rgba(13, 58, 109, 0.9) 0%,
        rgba(13, 58, 109, 0.7) 50%,
        rgba(13, 58, 109, 0.4) 100%
    );
}

/* ============================================================
   BUTTONS & LINKS - RTL
   ============================================================ */
html[dir="rtl"] .btn i.fa-arrow-right {
    transform: rotate(180deg);
}

html[dir="rtl"] .btn i.fa-arrow-left {
    transform: rotate(0deg);
}

html[dir="rtl"] .btn i.me-2 {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
}

html[dir="rtl"] .btn i.ms-2 {
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
}

/* ============================================================
   NAVBAR BRAND - RTL
   ============================================================ */
html[dir="rtl"] .navbar-brand .brand-text {
    margin-right: 0.5rem;
    margin-left: 0;
}

/* ============================================================
   FORM INPUTS - RTL
   ============================================================ */
html[dir="rtl"] .form-control,
html[dir="rtl"] .form-select,
html[dir="rtl"] input,
html[dir="rtl"] textarea {
    text-align: right;
}

/* ============================================================
   MODAL - RTL
   ============================================================ */
html[dir="rtl"] .modal .btn-close {
    left: auto;
    right: 20px;
}

/* ============================================================
   CONTACT INFO - RTL
   ============================================================ */
html[dir="rtl"] .contact-info i {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* ============================================================
   LIST ITEMS - RTL
   ============================================================ */
html[dir="rtl"] .list-unstyled li i,
html[dir="rtl"] ul li i.fa-check,
html[dir="rtl"] ul li i.fa-chevron-left {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* ============================================================
   SOCIAL BUTTONS - RTL
   ============================================================ */
html[dir="rtl"] .social-icons {
    direction: ltr;
}

/* ============================================================
   TEXT ALIGNMENT OVERRIDES - RTL
   ============================================================ */
html[dir="rtl"] .text-end {
    text-align: left !important;
}

html[dir="rtl"] .text-start {
    text-align: right !important;
}

/* Bootstrap RTL Margin/Padding Fixes */
html[dir="rtl"] .me-1, html[dir="rtl"] .me-2, html[dir="rtl"] .me-3, html[dir="rtl"] .me-4, html[dir="rtl"] .me-5 {
    margin-right: 0 !important;
}
html[dir="rtl"] .me-1 { margin-left: 0.25rem !important; }
html[dir="rtl"] .me-2 { margin-left: 0.5rem !important; }
html[dir="rtl"] .me-3 { margin-left: 1rem !important; }
html[dir="rtl"] .me-4 { margin-left: 1.5rem !important; }
html[dir="rtl"] .me-5 { margin-left: 3rem !important; }

html[dir="rtl"] .ms-1, html[dir="rtl"] .ms-2, html[dir="rtl"] .ms-3, html[dir="rtl"] .ms-4, html[dir="rtl"] .ms-5 {
    margin-left: 0 !important;
}
html[dir="rtl"] .ms-1 { margin-right: 0.25rem !important; }
html[dir="rtl"] .ms-2 { margin-right: 0.5rem !important; }
html[dir="rtl"] .ms-3 { margin-right: 1rem !important; }
html[dir="rtl"] .ms-4 { margin-right: 1.5rem !important; }
html[dir="rtl"] .ms-5 { margin-right: 3rem !important; }

html[dir="rtl"] .pe-1, html[dir="rtl"] .pe-2, html[dir="rtl"] .pe-3, html[dir="rtl"] .pe-4, html[dir="rtl"] .pe-5 {
    padding-right: 0 !important;
}
html[dir="rtl"] .pe-1 { padding-left: 0.25rem !important; }
html[dir="rtl"] .pe-2 { padding-left: 0.5rem !important; }
html[dir="rtl"] .pe-3 { padding-left: 1rem !important; }
html[dir="rtl"] .pe-4 { padding-left: 1.5rem !important; }
html[dir="rtl"] .pe-5 { padding-left: 3rem !important; }

html[dir="rtl"] .ps-1, html[dir="rtl"] .ps-2, html[dir="rtl"] .ps-3, html[dir="rtl"] .ps-4, html[dir="rtl"] .ps-5 {
    padding-left: 0 !important;
}
html[dir="rtl"] .ps-1 { padding-right: 0.25rem !important; }
html[dir="rtl"] .ps-2 { padding-right: 0.5rem !important; }
html[dir="rtl"] .ps-3 { padding-right: 1rem !important; }
html[dir="rtl"] .ps-4 { padding-right: 1.5rem !important; }
html[dir="rtl"] .ps-5 { padding-right: 3rem !important; }

/* On mobile, center everything - RTL */
@media (max-width: 768px) {
    html[dir="rtl"] .about-title,
    html[dir="rtl"] .about-subtitle,
    html[dir="rtl"] .section-title,
    html[dir="rtl"] .section-subtitle,
    html[dir="rtl"] .cta-title,
    html[dir="rtl"] .cta-text {
        text-align: center !important;
    }

    html[dir="rtl"] .about-badges,
    html[dir="rtl"] .cta-buttons {
        justify-content: center !important;
    }
}

/* ============================================================
   CERTIFICATE SEAL - RTL
   ============================================================ */
html[dir="rtl"] .certificate-seal {
    text-align: center;
}

/* ============================================================
   BRANCHES CARDS - RTL
   ============================================================ */
html[dir="rtl"] .branch-featured .badge {
    right: auto;
    left: 15px;
}

/* ============================================================
   COURSE CARDS - RTL
   ============================================================ */
html[dir="rtl"] .course-card {
    text-align: right;
}

@media (max-width: 768px) {
    html[dir="rtl"] .course-card {
        text-align: center;
    }
}

/* ============================================================
   GOLDEN BUTTON - RTL
   ============================================================ */
html[dir="rtl"] .btn-gold {
    direction: rtl;
}

/* ============================================================
   NAVBAR - RTL
   ============================================================ */
html[dir="rtl"] .navbar-nav {
    padding-right: 0;
}

html[dir="rtl"] .navbar-collapse {
    text-align: right;
}

html[dir="rtl"] .dropdown-menu {
    text-align: right;
}

html[dir="rtl"] .navbar-toggler {
    margin-left: 0;
    margin-right: auto;
}

/* ============================================================
   HERO SECTION - RTL
   ============================================================ */
html[dir="rtl"] .hero-content {
    text-align: right;
}

html[dir="rtl"] .hero-section h1,
html[dir="rtl"] .hero-section p,
html[dir="rtl"] .hero-section .lead {
    text-align: right;
}

html[dir="rtl"] .hero-actions {
    justify-content: flex-start;
}

/* ============================================================
   ABOUT PAGE - RTL
   ============================================================ */
html[dir="rtl"] .about-page {
    direction: rtl;
}

html[dir="rtl"] .about-title,
html[dir="rtl"] .about-subtitle,
html[dir="rtl"] .about-description p {
    text-align: right;
}

html[dir="rtl"] .about-badges {
    justify-content: flex-end;
}

html[dir="rtl"] .section-label {
    text-align: right;
}

html[dir="rtl"] .vision-mission-card,
html[dir="rtl"] .goals-card {
    text-align: right;
}

html[dir="rtl"] .goal-item {
    flex-direction: row-reverse;
}

html[dir="rtl"] .goal-icon {
    margin-left: 1rem;
    margin-right: 0;
}

/* ============================================================
   CARDS & BOXES - RTL
   ============================================================ */
html[dir="rtl"] .stat-card,
html[dir="rtl"] .modern-card,
html[dir="rtl"] .glass-card {
    text-align: right;
}

html[dir="rtl"] .program-card-hover {
    text-align: right;
}

html[dir="rtl"] .feature-card {
    text-align: right;
}

html[dir="rtl"] .testimonial-card {
    text-align: right;
}

html[dir="rtl"] .testimonial-author {
    flex-direction: row-reverse;
}

/* ============================================================
   QUICK STATS - RTL
   ============================================================ */
html[dir="rtl"] .quick-stats .stat-card {
    text-align: center;
}

/* ============================================================
   SCROLL INDICATOR - RTL
   ============================================================ */
html[dir="rtl"] .scroll-indicator {
    left: 50%;
    transform: translateX(-50%);
}

/* ============================================================
   BREADCRUMB - RTL
   ============================================================ */
html[dir="rtl"] .breadcrumb {
    padding-right: 0;
    justify-content: flex-end;
}

html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    content: "\\";
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* ============================================================
   ACCORDION - RTL
   ============================================================ */
html[dir="rtl"] .accordion-button {
    text-align: right;
}

html[dir="rtl"] .accordion-button::after {
    margin-left: 0;
    margin-right: auto;
}

/* ============================================================
   TABS - RTL
   ============================================================ */
html[dir="rtl"] .nav-tabs {
    padding-right: 0;
}

html[dir="rtl"] .nav-tabs .nav-link {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* ============================================================
   PAGINATION - RTL
   ============================================================ */
html[dir="rtl"] .pagination {
    padding-right: 0;
}

html[dir="rtl"] .page-item:first-child .page-link {
    border-radius: 0 0.375rem 0.375rem 0;
}

html[dir="rtl"] .page-item:last-child .page-link {
    border-radius: 0.375rem 0 0 0.375rem;
}

/* ============================================================
   ALERTS - RTL
   ============================================================ */
html[dir="rtl"] .alert {
    text-align: right;
}

html[dir="rtl"] .alert-dismissible {
    padding-right: 1rem;
    padding-left: 3rem;
}

html[dir="rtl"] .alert-dismissible .btn-close {
    right: auto;
    left: 0;
}

/* ============================================================
   TABLES - RTL
   ============================================================ */
html[dir="rtl"] table {
    direction: rtl;
}

html[dir="rtl"] th,
html[dir="rtl"] td {
    text-align: right;
}

/* ============================================================
   FLEX UTILITIES FIX - RTL
   ============================================================ */
html[dir="rtl"] .flex-row {
    flex-direction: row-reverse;
}

html[dir="rtl"] .flex-row-reverse {
    flex-direction: row;
}

/* Do not reverse these common patterns */
html[dir="rtl"] .d-flex.gap-2,
html[dir="rtl"] .d-flex.gap-3,
html[dir="rtl"] .social-icons,
html[dir="rtl"] .hero-actions {
    flex-direction: row;
}

/* ============================================================
   ICON MARGINS FIX - RTL
   ============================================================ */
html[dir="rtl"] i.fa-chevron-right {
    transform: rotate(180deg);
}

html[dir="rtl"] i.fa-chevron-left {
    transform: rotate(0deg);
}

html[dir="rtl"] i.fa-arrow-right {
    transform: rotate(180deg);
}

html[dir="rtl"] i.fa-arrow-left {
    transform: rotate(0deg);
}

/* ============================================================
   POPUP/MODAL - RTL
   ============================================================ */
html[dir="rtl"] .modal-header {
    flex-direction: row-reverse;
}

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

html[dir="rtl"] .modal-body {
    text-align: right;
}

html[dir="rtl"] .modal-footer {
    flex-direction: row-reverse;
}

/* ============================================================
   POPUP OFFER - RTL
   ============================================================ */
html[dir="rtl"] .popup-offer {
    text-align: right;
}

html[dir="rtl"] .popup-offer .close-btn {
    left: 15px;
    right: auto;
}

/* ============================================================
   WHY CHOOSE US SECTION - RTL
   ============================================================ */
html[dir="rtl"] .section-why-choose {
    text-align: right;
}

html[dir="rtl"] .section-why-choose .section-header {
    text-align: center;
}

/* ============================================================
   CONTACT PAGE - RTL
   ============================================================ */
html[dir="rtl"] .contact-page {
    text-align: right;
}

html[dir="rtl"] .contact-info-item {
    flex-direction: row-reverse;
}

html[dir="rtl"] .contact-info-item i {
    margin-left: 1rem;
    margin-right: 0;
}

/* ============================================================
   BRANCHES PAGE - RTL
   ============================================================ */
html[dir="rtl"] .branches-page {
    text-align: right;
}

html[dir="rtl"] .branch-card {
    text-align: right;
}

html[dir="rtl"] .branch-info span {
    flex-direction: row-reverse;
}

html[dir="rtl"] .branch-info span i {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* ============================================================
   COURSES PAGE - RTL
   ============================================================ */
html[dir="rtl"] .courses-page {
    text-align: right;
}

/* ============================================================
   TEACHERS PAGE - RTL
   ============================================================ */
html[dir="rtl"] .teachers-page {
    text-align: right;
}

/* ============================================================
   FOOTER SPECIFIC - RTL
   ============================================================ */
html[dir="rtl"] footer {
    text-align: right;
}

html[dir="rtl"] footer .text-center {
    text-align: center !important;
}

html[dir="rtl"] footer .text-md-start {
    text-align: right !important;
}

html[dir="rtl"] footer .text-md-end {
    text-align: left !important;
}

html[dir="rtl"] footer ul {
    padding-right: 0;
}

html[dir="rtl"] footer a i.fa-chevron-right,
html[dir="rtl"] footer a i.fa-check {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* Phone numbers should stay LTR */
html[dir="rtl"] [dir="ltr"],
html[dir="rtl"] .phone-number,
html[dir="rtl"] a[href^="tel:"] {
    direction: ltr;
    display: inline-block;
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS - RTL
   ============================================================ */
@media (max-width: 992px) {
    html[dir="rtl"] .navbar-nav {
        text-align: right;
    }
    
    html[dir="rtl"] .navbar-collapse {
        text-align: right;
    }
}

@media (max-width: 768px) {
    html[dir="rtl"] .hero-content {
        text-align: center;
    }
    
    html[dir="rtl"] .hero-actions {
        justify-content: center;
    }
    
    html[dir="rtl"] footer .text-md-start,
    html[dir="rtl"] footer .text-md-end {
        text-align: center !important;
    }
}

/* ============================================================
   ANIMATION FIXES FOR RTL
   ============================================================ */
html[dir="rtl"] .animate-slide-right {
    animation-name: slide-left-rtl;
}

html[dir="rtl"] .animate-slide-left {
    animation-name: slide-right-rtl;
}

@keyframes slide-left-rtl {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-right-rtl {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ============================================================
   SPECIAL ELEMENTS - RTL
   ============================================================ */

/* Counter animation numbers stay LTR */
html[dir="rtl"] .counter,
html[dir="rtl"] .stat-number,
html[dir="rtl"] .number {
    direction: ltr;
    display: inline-block;
}

/* Progress bars */
html[dir="rtl"] .progress {
    direction: rtl;
}

html[dir="rtl"] .progress-bar {
    float: right;
}

/* ============================================================
   SECTION HEADERS - RTL
   ============================================================ */
html[dir="rtl"] .section-header {
    text-align: center;
}

html[dir="rtl"] .section-header::before,
html[dir="rtl"] .section-header::after {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

/* ============================================================
   CTA SECTION - RTL
   ============================================================ */
html[dir="rtl"] .cta-section {
    text-align: right;
}

html[dir="rtl"] .cta-title,
html[dir="rtl"] .cta-text {
    text-align: right;
}

@media (max-width: 768px) {
    html[dir="rtl"] .cta-title,
    html[dir="rtl"] .cta-text {
        text-align: center;
    }
}

/* ============================================================
   VALUES SECTION - RTL
   ============================================================ */
html[dir="rtl"] .values-section {
    text-align: center;
}

html[dir="rtl"] .value-card {
    text-align: center;
}

/* ============================================================
   LANGUAGE SWITCHER - RTL
   ============================================================ */
html[dir="rtl"] .language-selector {
    margin-left: 0;
    margin-right: 1rem;
}

/* ============================================================
   FORM ELEMENTS - RTL
   ============================================================ */
html[dir="rtl"] .form-group {
    text-align: right;
}

html[dir="rtl"] .form-label {
    text-align: right;
}

html[dir="rtl"] .form-check {
    padding-left: 0;
    padding-right: 1.25rem;
}

html[dir="rtl"] .form-check-input {
    float: right;
    margin-left: 0.5rem;
    margin-right: -1.25rem;
}

html[dir="rtl"] .form-check-label {
    margin-right: 0;
}

html[dir="rtl"] .input-group > .form-control,
html[dir="rtl"] .input-group > .form-select {
    border-radius: 0 0.375rem 0.375rem 0;
}

html[dir="rtl"] .input-group > .input-group-text:first-child {
    border-radius: 0.375rem 0 0 0.375rem;
}

/* ============================================================
   SELECT2 / CUSTOM SELECTS - RTL
   ============================================================ */
html[dir="rtl"] .select2-container {
    direction: rtl;
}

html[dir="rtl"] .select2-selection__arrow {
    left: 1px;
    right: auto;
}

/* ============================================================
   TOAST NOTIFICATIONS - RTL
   ============================================================ */
html[dir="rtl"] .toast {
    text-align: right;
}

html[dir="rtl"] .toast-header {
    flex-direction: row-reverse;
}

/* ============================================================
   CAROUSEL - RTL
   ============================================================ */
html[dir="rtl"] .carousel-control-prev {
    right: 0;
    left: auto;
}

html[dir="rtl"] .carousel-control-next {
    left: 0;
    right: auto;
}

html[dir="rtl"] .carousel-indicators {
    direction: ltr;
}

/* ============================================================
   CARD DECK EQUAL HEIGHT - RTL
   ============================================================ */
html[dir="rtl"] .card-deck {
    flex-direction: row-reverse;
}

/* ============================================================
   UTILITY: FORCE LTR FOR SPECIFIC ELEMENTS
   ============================================================ */
html[dir="rtl"] .force-ltr,
html[dir="rtl"] .ltr-element,
html[dir="rtl"] [data-direction="ltr"] {
    direction: ltr !important;
    text-align: left !important;
}

/* ============================================================
   PRINT STYLES - RTL
   ============================================================ */
@media print {
    html[dir="rtl"] body {
        direction: rtl;
        text-align: right;
    }
}