/* RTL Overrides */
html[dir="rtl"] {
    /* Priority to Calibri, fallback to Cairo if desired later */
    font-family: 'Cairo', 'Calibri', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Flip Background Circles (body pseudo-elements) */
html[dir="rtl"] body::before {
    left: auto;
    right: -100px;
}

html[dir="rtl"] body::after {
    right: auto;
    left: -50px;
}

html[dir="rtl"] body,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] p,
html[dir="rtl"] a,
html[dir="rtl"] li,
html[dir="rtl"] span,
html[dir="rtl"] div,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] label {
    font-family: 'Cairo', 'Calibri', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .section-title {
    text-align: center;
}

/* Header */
/* Flex-direction: row-reverse handles positions, space-between handles spacing. 
   No margin overrides needed here. */
html[dir="rtl"] .nav-list {
    padding-right: 0;
}

/* Flip Background and Images */
html[dir="rtl"] .bg-fixed {
    transform: scaleX(-1);
}

/* Auth Pages - Ensure Center */
html[dir="rtl"] .auth-container h2,
html[dir="rtl"] .auth-links {
    text-align: center;
}

html[dir="rtl"] .nav-item {
    margin-left: 0;
    margin-right: 1.5rem;
}

html[dir="rtl"] .nav-link.lang-toggle {
    font-family: 'Segoe UI', sans-serif;
    font-weight: bold;
}

/* Dropdowns */
html[dir="rtl"] .dropdown-menu {
    right: auto;
    left: 0;
    text-align: right;
}

/* Contact Page */
html[dir="rtl"] .contact-info .info-item i {
    margin-right: 0;
    margin-left: 10px;
}

html[dir="rtl"] .contact-info,
html[dir="rtl"] .contact-form label {
    text-align: right;
}

/* Footer */
html[dir="rtl"] .footer-content {
    text-align: right;
}

/* Cards */
html[dir="rtl"] .admin-stat-card {
    border-left: none;
    border-right: 4px solid var(--primary-color);
}

html[dir="rtl"] .admin-stat-card.success {
    border-right-color: var(--success-color);
}

html[dir="rtl"] .admin-stat-card.warning {
    border-right-color: var(--warning-color);
}

html[dir="rtl"] .admin-stat-card.accent {
    border-right-color: var(--accent-color);
}

html[dir="rtl"] .info-content ul {
    padding-left: 0;
    padding-right: 1.5rem;
}

html[dir="rtl"] .policy-table th,
html[dir="rtl"] .policy-table td {
    text-align: right;
}

/* About Page Icons */
html[dir="rtl"] .info-content h3 i {
    margin-right: 0;
    margin-left: 10px;
}

/* CV Page RTL Fixes */
html[dir="rtl"] .cv-header {
    text-align: center;
}

html[dir="rtl"] .cv-header h1,
html[dir="rtl"] .cv-header .cv-job-title,
html[dir="rtl"] .cv-contact {
    text-align: center;
    justify-content: center;
}

html[dir="rtl"] .cv-block ul {
    padding-left: 0;
    padding-right: 1.2rem;
    margin-right: 0;
    text-align: right;
    /* Removed list-style-position: inside to match English default */
}

/* Home Page RTL Centering */
html[dir="rtl"] .service-card,
html[dir="rtl"] .service-card *,
html[dir="rtl"] .portfolio-card .card-content,
html[dir="rtl"] .portfolio-card .card-content *,
html[dir="rtl"] .skill-item,
html[dir="rtl"] .skill-item *,
html[dir="rtl"] .hero-content,
html[dir="rtl"] .hero-content *,
html[dir="rtl"] .about-content,
html[dir="rtl"] .about-content *,
html[dir="rtl"] .section-footer,
html[dir="rtl"] .section-footer *,
html[dir="rtl"] .cta-section,
html[dir="rtl"] .cta-section *,
html[dir="rtl"] .dashboard-card,
html[dir="rtl"] .dashboard-card * {
    text-align: center;
}

html[dir="rtl"] .cv-item-header {
    /* Remove row-reverse to let natural RTL flow work (Title Right, Date Left) */
    flex-direction: row;
    /* If needed, but flex row-reverse is global for header? Check structure */
    /* .cv-item-header displays Flex. Global row-reverse might affect it. 
       Let's check if it needs specific handling. 
       Usually flex-direction row works if we want date on left and title on right in RTL?
       Wait, in RTL: Right is Start.
       If we want Title (Start) and Date (End), standard Flex Row does this automatically in RTL if direction is rtl.
       However, if the user sees alignment issues, I'll force it.
       But the user specifically asked for BULLET POINTS and HEADER CENTER.
    */
}