/* ===========================================
   JAVAABU THAANA FONTS - MV Faseyha & MV Waheed
   =========================================== */
@font-face {
    font-family: 'MV Faseyha';
    src: url('/fonts/javaabu-thaana/res/fonts/mv_faseyha.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'MV Waheed';
    src: url('/fonts/javaabu-thaana/res/fonts/mv_waheed.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ===========================================
   DHIVEHI (RTL) FONT STYLING
   =========================================== */
html[dir="rtl"],
html[dir="rtl"] body,
html[dir="rtl"] p,
html[dir="rtl"] span,
html[dir="rtl"] a,
html[dir="rtl"] li,
html[dir="rtl"] label,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] div {
    font-family: 'MV Faseyha', 'MV Waheed', Faruma, 'MV Boli', sans-serif !important;
    font-size: 18px;
    line-height: 1.8;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    font-family: 'MV Waheed', 'MV Faseyha', Faruma, 'MV Boli', sans-serif !important;
    line-height: 1.6;
}

.font-thaana {
    font-family: 'MV Faseyha', 'MV Waheed', Faruma, 'MV Boli', sans-serif !important;
}

/* Override for English elements within RTL */
html[dir="rtl"] .ltr, 
html[dir="rtl"] .ltr * {
    font-family: 'Poppins', sans-serif !important;
}

/* ===========================================
   RTL TEXT ALIGNMENT - Global
   =========================================== */
html[dir="rtl"] {
    text-align: right;
}

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

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

/* ===========================================
   LTR CONTENT (Phone, Email, URLs, Numbers)
   =========================================== */
.ltr, 
.ltr-content, 
html[dir="rtl"] .ltr {
    direction: ltr !important;
    unicode-bidi: embed;
    text-align: left !important;
}

html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"] {
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
}

/* ===========================================
   ★★★ MAIN RTL FIX: ALL icon+text elements ★★★
   Using .rtl-inline class (added by JS or Blade)
   =========================================== */
html[dir="rtl"] .rtl-inline {
    flex-direction: row-reverse !important;
}

/* ===========================================
   NAVIGATION BAR
   =========================================== */
/* Mobile Menu Panel - RTL alignment */
html[dir="rtl"] #mobileMenu .flex-col {
    align-items: flex-end !important;
}

html[dir="rtl"] .mobile-nav-link {
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
}

/* ===========================================
   HERO SECTION
   =========================================== */
html[dir="rtl"] .hero-buttons {
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
}

/* ===========================================
   FEATURE ITEMS, CONTACT ITEMS, BUTTONS
   All icon+text flex containers
   =========================================== */
html[dir="rtl"] .feature-item {
    flex-direction: row-reverse !important;
}

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

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

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

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

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

html[dir="rtl"] .hero-card-item {
    flex-direction: row-reverse !important;
}

html[dir="rtl"] .badge-with-icon {
    flex-direction: row-reverse !important;
}

html[dir="rtl"] .btn-with-icon {
    flex-direction: row-reverse !important;
}

html[dir="rtl"] .section-title-with-icon {
    flex-direction: row-reverse !important;
}

html[dir="rtl"] .mobile-nav-link {
    flex-direction: row-reverse !important;
}

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

/* ===========================================
   CARD ICON ALIGNMENT - Icons on RIGHT
   =========================================== */
html[dir="rtl"] .card-modern {
    text-align: right !important;
}

html[dir="rtl"] .card-modern .w-16.h-16,
html[dir="rtl"] .card-modern .w-20.h-20 {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* ===========================================
   GRID LAYOUTS - Column swapping
   =========================================== */
html[dir="rtl"] .grid {
    direction: rtl !important;
}

html[dir="rtl"] .grid > * {
    direction: rtl !important;
    text-align: right !important;
}

/* Hero section - swap columns */
html[dir="rtl"] #home .grid > div:first-child {
    order: 2 !important;
}

html[dir="rtl"] #home .grid > div:last-child {
    order: 1 !important;
}

/* Contact section - swap columns */
html[dir="rtl"] #contact .grid > div:first-child {
    order: 2 !important;
}

html[dir="rtl"] #contact .grid > div:last-child {
    order: 1 !important;
}

/* About section - reverse 3 cards */
html[dir="rtl"] #about .grid > div:nth-child(1) {
    order: 3 !important;
}

html[dir="rtl"] #about .grid > div:nth-child(2) {
    order: 2 !important;
}

html[dir="rtl"] #about .grid > div:nth-child(3) {
    order: 1 !important;
}

/* Footer grid - reverse columns */
html[dir="rtl"] .footer-grid {
    direction: rtl !important;
}

html[dir="rtl"] .footer-grid > div {
    direction: ltr !important;
    text-align: right !important;
}

html[dir="rtl"] .footer-grid > div:nth-child(1) {
    order: 3 !important;
}

html[dir="rtl"] .footer-grid > div:nth-child(2) {
    order: 2 !important;
}

html[dir="rtl"] .footer-grid > div:nth-child(3) {
    order: 1 !important;
}

/* Footer list items - icon on right, text on left */
html[dir="rtl"] .footer-grid ul li {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: flex-start !important;
}

html[dir="rtl"] .footer-grid ul li a {
    display: inline-flex !important;
    flex-direction: row-reverse !important;
}

/* Program grid */
html[dir="rtl"] .program-grid {
    direction: ltr !important;
}

html[dir="rtl"] .program-grid > * {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] .program-content {
    order: 2 !important;
}

html[dir="rtl"] .program-card {
    order: 1 !important;
}

/* Apply section - swap 2 cards */
html[dir="rtl"] #apply .grid > div:first-child {
    order: 2 !important;
}

html[dir="rtl"] #apply .grid > div:last-child {
    order: 1 !important;
}

/* ===========================================
   DIRECTIONAL ICON FLIP
   =========================================== */
html[dir="rtl"] .fa-chevron-right,
html[dir="rtl"] .fa-arrow-right {
    transform: scaleX(-1);
}

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

/* ===========================================
   ELEMENTS THAT MUST NOT REVERSE
   =========================================== */
.social-icons,
.stats-row,
.lang-switcher,
.flex-no-reverse {
    flex-direction: row !important;
}

html[dir="rtl"] .social-icons,
html[dir="rtl"] .stats-row,
html[dir="rtl"] .lang-switcher,
html[dir="rtl"] .flex-no-reverse {
    flex-direction: row !important;
}

/* ===========================================
   LANGUAGE SWITCHER STYLING
   =========================================== */
.lang-switch {
    transition: all 0.3s ease;
}

.lang-switch:hover {
    transform: scale(1.05);
}

.lang-switch.active {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
}

/* ===========================================
   FOOTER RTL
   =========================================== */
html[dir="rtl"] .footer-bottom {
    flex-direction: row-reverse !important;
}

/* ===========================================
   MOBILE MENU RTL
   =========================================== */
html[dir="rtl"] .mobile-menu {
    right: auto !important;
    left: 0 !important;
}

/* ===========================================
   KEEP LTR FOR SPECIFIC CONTENT
   =========================================== */
html[dir="rtl"] .grid .ltr {
    direction: ltr !important;
    text-align: left !important;
}

/* ===========================================
   INLINE FLEX ELEMENTS - Targeted reverse
   =========================================== */
/* Only reverse specific content sections, not navbar */
html[dir="rtl"] #home .inline-flex,
html[dir="rtl"] #about .inline-flex,
html[dir="rtl"] #program .inline-flex,
html[dir="rtl"] #apply .inline-flex,
html[dir="rtl"] #contact .inline-flex,
html[dir="rtl"] footer .inline-flex {
    flex-direction: row-reverse !important;
}

/* Override for containers that should NOT reverse */
html[dir="rtl"] .social-icons,
html[dir="rtl"] .stats-row,
html[dir="rtl"] .lang-switcher,
html[dir="rtl"] .flex-no-reverse {
    flex-direction: row !important;
}

html[dir="rtl"] .flex.flex-col {
    flex-direction: column !important;
}

/* ===========================================
   SPECIFIC BUTTON/LINK WITH ICONS
   =========================================== */
/* Only in content sections, not navbar */
html[dir="rtl"] #home a.flex,
html[dir="rtl"] #about a.flex,
html[dir="rtl"] #program a.flex,
html[dir="rtl"] #apply a.flex,
html[dir="rtl"] #contact a.flex,
html[dir="rtl"] footer a.flex {
    flex-direction: row-reverse !important;
}

/* Footer contact list items */
html[dir="rtl"] .footer-grid li {
    flex-direction: row-reverse !important;
    display: flex !important;
    justify-content: flex-start !important;
}

/* Quick links in contact section */
html[dir="rtl"] #contact a.flex,
html[dir="rtl"] #contact a.inline-flex,
html[dir="rtl"] #contact div.flex {
    flex-direction: row-reverse !important;
}

/* Schedule card rows - inner divs */
html[dir="rtl"] .program-card .flex {
    flex-direction: row-reverse !important;
}

html[dir="rtl"] .program-card .space-y-4 > div {
    flex-direction: row-reverse !important;
}

/* ===========================================
   BADGE PILLS WITH ICONS
   =========================================== */
html[dir="rtl"] .glass-effect.rounded-full,
html[dir="rtl"] span.rounded-full,
html[dir="rtl"] .badge-with-icon,
html[dir="rtl"] #contact .badge-with-icon,
html[dir="rtl"] #apply .badge-with-icon,
html[dir="rtl"] #apply .glass-effect.rounded-full {
    display: inline-flex !important;
    flex-direction: row-reverse !important;
}

/* ===========================================
   ENSURE DISPLAY FLEX ON KEY ELEMENTS
   =========================================== */
html[dir="rtl"] .feature-item,
html[dir="rtl"] .contact-item,
html[dir="rtl"] .footer-grid li {
    display: flex !important;
}