/* ===========================================
   RTL (Right-to-Left) STYLESHEET

   ⚠️ CRITICAL IMPLEMENTATION RULES:

   1. START WITH dir="rtl" ONLY - Test first, don't assume what needs fixing
   2. ADD CSS ONLY FOR EXCEPTIONS - Most RTL behavior is automatic
   3. NEVER USE: flex-direction: row-reverse, order properties, or excessive text-align
   4. PROCESS: Add dir="rtl" → Test → Fix exceptions one-by-one → Test again
   5. See docs/arabic-i18n.md for full instructions

   =========================================== */

/* ===========================================
   BASE RTL
   Note: dir="rtl" on html/body handles direction automatically
   =========================================== */

/* ===========================================
   HEADER & NAVIGATION RTL
   =========================================== */

/* Language button - normalize font size for English text */
html[dir="rtl"] .language-button {
    font-size: 1rem;
}

/* ===========================================
   HERO SECTION RTL
   =========================================== */

/* Hero diagonal shade - flip from right to left */
html[dir="rtl"] .hero::before {
    right: auto;
    left: -50%;
    transform: skewX(15deg);
}

/* Mobile nav text alignment */
html[dir="rtl"] .nav-text {
    text-align: right;
}

/* WhatsApp icon - flip to left side (nav) */
html[dir="rtl"] .whatsapp-icon-nav {
    margin-right: 0;
    margin-left: 8px;
}

/* WhatsApp icon - flip margin in hero and CTA buttons */
html[dir="rtl"] .whatsapp-icon {
    margin-right: 0;
    margin-left: 8px;
}

/* Trust item cards - flip border to right side */
html[dir="rtl"] .trust-item {
    border-left: none;
    border-right: 4px solid #20b2aa;
}

/* About page - flip borders to right side */

/* Credential items - teal border */
html[dir="rtl"] .credential-item {
    border-left: none;
    border-right: 4px solid #20b2aa;
}

/* Philosophy box - coral border */
html[dir="rtl"] .philosophy-box {
    border-left: none;
    border-right: 4px solid #ff6b6b;
}

/* Highlight box - teal border */
html[dir="rtl"] .highlight-box {
    border-left: none;
    border-right: 4px solid #20b2aa;
}

/* Timeline items - teal border + dot position */
html[dir="rtl"] .timeline-item {
    margin-left: 0;
    margin-right: 2rem;
    border-left: none;
    border-right: 4px solid #20b2aa;
}

html[dir="rtl"] .timeline-item::before {
    left: auto;
    right: -1.5rem;
}

/* Knee replacement page - flip borders and underlines to right side */

/* Understanding title underline - coral */
html[dir="rtl"] .understanding-title::after {
    left: auto;
    right: 0;
}

/* Step cards - teal border + floating number */
html[dir="rtl"] .step-card {
    border-left: none;
    border-right: 4px solid #20b2aa;
}

html[dir="rtl"] .step-number {
    left: auto;
    right: 20px;
}

/* Expertise cards - teal border */
html[dir="rtl"] .expertise-card {
    border-left: none;
    border-right: 4px solid #20b2aa;
}

/* CTA Section - next steps list alignment */
html[dir="rtl"] .cta-section .next-steps {
    text-align: right;
}

html[dir="rtl"] .cta-section .next-steps ol {
    padding-left: 0;
    padding-right: 1.5rem;
}

/* Conservative treatment page - flip icon margins */
html[dir="rtl"] .treatment-benefits li::before {
    margin-right: 0;
    margin-left: 0.5rem;
}

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

/* Sports injury pages - flip borders and icons */

/* Condition title underline - coral */
html[dir="rtl"] .condition-title::after {
    left: auto;
    right: 0;
}

/* Treatment approach - teal border */
html[dir="rtl"] .treatment-approach {
    border-left: none;
    border-right: 4px solid #20b2aa;
}

/* Treatment list checkmark */
html[dir="rtl"] .treatment-list li::before {
    margin-right: 0;
    margin-left: 0.75rem;
}

/* Surgery benefits - coral/red border */
html[dir="rtl"] .surgery-benefits li {
    border-left: none;
    border-right: 4px solid #ff6b6b;
}

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

/* Hip sports injury page - flip borders and icons */

/* Activities list - coral/red border */
html[dir="rtl"] .activities-list li {
    border-left: none;
    border-right: 4px solid #ff6b6b;
}

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

/* Procedures list - emoji icon */
html[dir="rtl"] .procedures-list li::before {
    margin-right: 0;
    margin-left: 0.75rem;
}

/* Decision list - bullet point */
html[dir="rtl"] .decision-list li::before {
    margin-right: 0;
    margin-left: 0.75rem;
}

/* Shoulder sports injury page - flip borders and icons */

/* Sports list - coral/red border */
html[dir="rtl"] .sports-list li {
    border-left: none;
    border-right: 4px solid #ff6b6b;
}

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

/* Technique benefits - checkmark */
html[dir="rtl"] .technique-benefits li::before {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* Timeline marker */
html[dir="rtl"] .timeline-marker {
    margin-right: 0;
    margin-left: 1rem;
}

/* Foot & ankle injury page - flip borders and icons */

/* Athletes list - coral/red border */
html[dir="rtl"] .athletes-list li {
    border-left: none;
    border-right: 4px solid #ff6b6b;
}

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

/* Step marker */
html[dir="rtl"] .step-marker {
    margin-right: 0;
    margin-left: 1rem;
}

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

/* Elbow & wrist injury page - flip borders */

/* Athlete card - coral/red border */
html[dir="rtl"] .athlete-card {
    border-left: none;
    border-right: 4px solid #ff6b6b;
}

/* Minimally invasive surgery page - flip borders and lists */

/* Difference box - teal border */
html[dir="rtl"] .difference-box {
    border-left: none;
    border-right: 4px solid #20b2aa;
}

/* Expertise box - coral border */
html[dir="rtl"] .expertise-box {
    border-left: none;
    border-right: 4px solid #ff6b6b;
}

/* Comparison list - traditional X mark */
html[dir="rtl"] .comparison-list.traditional li::before {
    margin-right: 0;
    margin-left: 0.75rem;
}

/* Comparison list - arthroscopic checkmark */
html[dir="rtl"] .comparison-list.arthroscopic li::before {
    margin-right: 0;
    margin-left: 0.75rem;
}

/* Timeline card activities - flip list alignment */
html[dir="rtl"] .timeline-activities {
    text-align: right;
}

html[dir="rtl"] .timeline-activities li {
    padding-left: 0;
    padding-right: 1rem;
}

html[dir="rtl"] .timeline-activities li::before {
    left: auto;
    right: 0;
}

/* Knock-knees & Bow-legs pages - flip icons and fix timeline */

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

/* Timeline section - these items don't have borders, only the About page does */
/* Remove the border that was incorrectly added by the About page RTL rules */
html[dir="rtl"] .timeline-section .timeline-item,
html[dir="rtl"] .recovery-timeline .timeline-item {
    border-left: none;
    border-right: none;
    margin-left: 0;
    margin-right: 0;
}

html[dir="rtl"] .timeline-section .timeline-item::before,
html[dir="rtl"] .recovery-timeline .timeline-item::before {
    display: none;
}

/* Timeline marker margin for knock-knees/bow-legs pages */
html[dir="rtl"] .timeline-section .timeline-marker {
    margin-right: 0;
    margin-left: 2rem;
}