html.translating body {
    visibility: hidden;
}

.cta-arrow {
    display: inline-block;
    margin-inline-start: 0.5rem;
}

html[data-lang="ar"] body,
html[data-lang="ar"] input,
html[data-lang="ar"] textarea,
html[data-lang="ar"] select,
html[data-lang="ar"] button {
    font-family: 'IBM Plex Sans Arabic', 'Inter', sans-serif;
}

html[data-lang="ar"] body {
    text-align: start;
}

html[data-lang="ar"] h1,
html[data-lang="ar"] h2,
html[data-lang="ar"] h3,
html[data-lang="ar"] h4,
html[data-lang="ar"] .page-title,
html[data-lang="ar"] .docket-title,
html[data-lang="ar"] .section-title,
html[data-lang="ar"] .royal-card-top-label,
html[data-lang="ar"] .royal-card-subtitle {
    font-family: 'Amiri', 'Playfair Display', serif;
    letter-spacing: 0;
    text-transform: none;
}

html[data-lang="ar"] .logo-text {
    font-family: 'Playfair Display', serif;
}

html[data-lang="ar"] .nav-wrapper,
html[data-lang="ar"] .logo a,
html[data-lang="ar"] .nav-menu,
html[data-lang="ar"] .nav-right,
html[data-lang="ar"] .lang-btn,
html[data-lang="ar"] .hero-card-header,
html[data-lang="ar"] .article-meta,
html[data-lang="ar"] .donator-item {
    direction: rtl;
}

html[dir="rtl"] .language-switcher .lang-dropdown {
    left: auto;
    right: 0;
    text-align: right;
}

html[dir="rtl"] .language-switcher:hover .lang-dropdown,
html[dir="rtl"] .language-switcher .lang-dropdown:hover,
html[dir="rtl"] .language-switcher.active .lang-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

html[dir="rtl"] .language-switcher .lang-dropdown::before {
    left: auto;
    right: 20px;
}

html[dir="rtl"] .nav-dropdown .dropdown-menu {
    left: auto;
    right: 0;
    transform: translateY(10px);
    text-align: right;
}

html[dir="rtl"] .nav-dropdown:hover .dropdown-menu,
html[dir="rtl"] .nav-dropdown.active .dropdown-menu {
    transform: translateY(0);
}

html[dir="rtl"] .nav-dropdown .dropdown-menu::before {
    left: auto;
    right: 20px;
}

html[data-lang="ar"] .lang-option:hover {
    padding-left: 1.5rem;
    padding-right: 1.75rem;
}

html[data-lang="ar"] .nav-link::after {
    left: auto;
    right: 0;
}

html[data-lang="ar"] .nav-search-input,
html[data-lang="ar"] input:not([type="email"]):not([type="url"]):not([type="tel"]):not([type="number"]):not([type="password"]),
html[data-lang="ar"] textarea,
html[data-lang="ar"] select {
    text-align: right;
    direction: rtl;
}

html[data-lang="ar"] input[type="email"],
html[data-lang="ar"] input[type="url"],
html[data-lang="ar"] input[type="tel"],
html[data-lang="ar"] input[type="number"],
html[data-lang="ar"] input[type="password"] {
    direction: ltr;
    text-align: right;
}

html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="search"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
}

html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="password"] {
    direction: ltr;
}

html[dir="rtl"] .theme-toggle i {
    transition: transform 0.3s ease !important;
    display: inline-block !important;
}

html[dir="rtl"] .theme-toggle:hover i {
    transform: rotate(20deg) !important;
}

html[dir="rtl"] .nav-search-input {
    padding-left: 1rem;
    padding-right: 2.2rem;
}

html[dir="rtl"] .nav-search-icon {
    left: auto;
    right: 12px;
}

html[dir="rtl"] .gold-input-icon,
html[dir="rtl"] .form-group .input-icon,
html[dir="rtl"] .form-field i,
html[dir="rtl"] .form-input-wrapper i {
    left: auto;
    right: 1rem;
}

/* Padding adjustment for inputs that DO have a leading icon
   (e.g. .form-input-wrapper has an absolutely-positioned <i> on the right
   in RTL — those inputs need 3rem of right padding to clear it). */
html[dir="rtl"] .form-input-wrapper .form-input,
html[dir="rtl"] .form-input-wrapper input,
html[dir="rtl"] .form-input-wrapper textarea,
html[dir="rtl"] .form-input-wrapper select,
html[dir="rtl"] .form-field .form-input,
html[dir="rtl"] .form-field input,
html[dir="rtl"] .form-field textarea,
html[dir="rtl"] .gold-input {
    padding-right: 3rem !important;
    padding-left: 1rem !important;
}

html[dir="rtl"] .gold-select-chevron {
    right: auto !important;
    left: 1rem !important;
}

html[dir="rtl"] .password-toggle {
    right: auto;
    left: 1rem;
}

html[dir="rtl"] .form-group input[type="password"] {
    padding-right: 1rem !important;
    padding-left: 3rem !important;
}

html[dir="rtl"] #otpInput {
    direction: ltr;
    text-align: center !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
}

html[dir="rtl"] .relative>i.absolute[class*="left-3"] {
    left: auto !important;
    right: 0.75rem !important;
}

html[dir="rtl"] .relative>input[class*="pl-10"] {
    padding-left: 1rem !important;
    padding-right: 2.5rem !important;
}

html[data-lang="ar"] .grid-2-col,
html[data-lang="ar"] .donation-split-container {
    direction: rtl;
}

html[data-lang="ar"] .hero-text-content,
html[data-lang="ar"] .donation-text-content,
html[data-lang="ar"] .article-content {
    text-align: right;
}

html[data-lang="ar"] .hero-cta-group,
html[data-lang="ar"] .donation-stats-row,
html[data-lang="ar"] .membership-features {
    direction: rtl;
}

html[dir="rtl"] .hero-main-card {
    transform: perspective(1000px) rotateY(5deg) translateX(20px) !important;
}

html[dir="rtl"] .hero-main-card:hover {
    transform: perspective(1000px) rotateY(0deg) translateX(0) scale(1.02) !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
}

html[data-lang="ar"] .btn-membership-cta,
html[data-lang="ar"] .btn-hero-glass-primary,
html[data-lang="ar"] .btn-hero-glass-secondary,
html[data-lang="ar"] .btn-glass-primary {
    direction: rtl;
}

html[dir="rtl"] .btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

html[dir="rtl"] .btn i {
    margin: 0 !important;
}


html[dir="rtl"] .fa-arrow-right,
html[dir="rtl"] .fa-arrow-left,
html[dir="rtl"] .fa-long-arrow-right,
html[dir="rtl"] .fa-long-arrow-left,
html[dir="rtl"] .fa-long-arrow-alt-right,
html[dir="rtl"] .fa-long-arrow-alt-left,
html[dir="rtl"] .fa-chevron-right,
html[dir="rtl"] .fa-chevron-left,
html[dir="rtl"] .fa-angle-right,
html[dir="rtl"] .fa-angle-left,
html[dir="rtl"] .fa-angle-double-right,
html[dir="rtl"] .fa-angle-double-left,
html[dir="rtl"] .fa-caret-right,
html[dir="rtl"] .fa-caret-left,
html[dir="rtl"] .fa-paper-plane,
html[dir="rtl"] .cta-arrow {
    display: inline-block;
    transform: scaleX(-1);
}

html[dir="rtl"] .horizontal-steps li:not(:last-child)::after,
html[dir="rtl"] .submission-page .process-list.horizontal-steps li:not(:last-child)::after {
    content: '\f060' !important;
    right: auto !important;
    left: -2.2rem !important;
    animation: pulseArrowRtl 2s infinite;
}

@keyframes pulseArrowRtl {

    0%,
    100% {
        transform: translateY(-50%) translateX(0);
        opacity: 0.5;
    }

    50% {
        transform: translateY(-50%) translateX(-5px);
        opacity: 1;
    }
}

html[data-lang="ar"] .footer-grid,
html[data-lang="ar"] .footer-bottom,
html[data-lang="ar"] .footer-col {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .footer-bottom,
html[dir="rtl"] .footer-bottom * {
    text-align: center;
}

html[data-lang="ar"] .newsletter-form {
    direction: rtl;
}

html[data-lang="ar"] .newsletter-form input {
    direction: ltr;
    text-align: right;
}

html[data-lang="ar"] .modal-header {
    direction: rtl;
}

html[data-lang="ar"] .modal-close {
    margin-inline-start: 0;
    margin-inline-end: auto;
}

@media (max-width: 768px) {
    html[data-lang="ar"] .nav-menu {
        text-align: right;
    }

    html[dir="rtl"] .nav-dropdown .dropdown-menu {
        left: auto;
        right: auto;
        transform: none;
        text-align: right;
    }
}

/* ===== Centered auth / status pages (RTL-safe) ===== */
html[dir="rtl"] .login-inner,
html[dir="rtl"] .login-card,
html[dir="rtl"] .signup-card,
html[dir="rtl"] .success-container,
html[dir="rtl"] .thank-you-card,
html[dir="rtl"] .invitation-container,
html[data-lang="ar"] .login-inner,
html[data-lang="ar"] .login-card,
html[data-lang="ar"] .signup-card,
html[data-lang="ar"] .success-container,
html[data-lang="ar"] .thank-you-card,
html[data-lang="ar"] .invitation-container {
    margin-inline: auto;
}

html[dir="rtl"] .login-container,
html[dir="rtl"] .signup-container,
html[dir="rtl"] .success-page,
html[dir="rtl"] .thank-you-section,
html[data-lang="ar"] .login-container,
html[data-lang="ar"] .signup-container,
html[data-lang="ar"] .success-page,
html[data-lang="ar"] .thank-you-section {
    display: flex;
    align-items: center;
    justify-content: center;
}

html[dir="rtl"] .cta-section,
html[dir="rtl"] .cta-buttons,
html[data-lang="ar"] .cta-section,
html[data-lang="ar"] .cta-buttons {
    text-align: center;
}

html[dir="rtl"] .modal-overlay,
html[data-lang="ar"] .modal-overlay {
    align-items: center;
    justify-content: center;
}

/* ===== Center Beauty Cards & Guidelines Alignment fixes in Arabic (RTL) ===== */

/* All card content right-aligned in Arabic */
html[dir="rtl"] .center-beauty-card,
html[dir="rtl"] .center-beauty-card p,
html[dir="rtl"] .center-beauty-card h2,
html[dir="rtl"] .center-beauty-card h3,
html[dir="rtl"] .center-beauty-card ol,
html[dir="rtl"] .center-beauty-card ul,
html[dir="rtl"] .center-beauty-card .subsection-center,
html[dir="rtl"] .center-beauty-card .feature-list,
html[dir="rtl"] .center-beauty-card .guidelines-vertical,
html[dir="rtl"] .center-beauty-card .info-box,
html[dir="rtl"] .center-beauty-card .warning-box,
html[dir="rtl"] .center-beauty-card .lead-text,
html[dir="rtl"] .center-beauty-card .centered-list,
html[dir="rtl"] .center-beauty-card .centered-list li {
    text-align: right !important;
}

/* Card header row: icon on right, title sitting flush next to it */
html[dir="rtl"] .card-header-row {
    flex-direction: row;       /* keep as-is, flex naturally mirrors */
    justify-content: flex-start;
    text-align: right;
}

/* List items right-aligned, with their numbers/bullets on the right */
html[dir="rtl"] .center-beauty-card ol,
html[dir="rtl"] .center-beauty-card ul {
    padding-right: 1.5rem;
    padding-left: 0;
    list-style-position: outside;
}

/* guidelines-vertical specific padding-left overrides for nested lists/elements */
html[dir="rtl"] .center-beauty-card .guidelines-vertical [style*="padding-left"],
html[dir="rtl"] .center-beauty-card [style*="padding-left"] {
    padding-right: 1.25rem !important;
    padding-left: 0 !important;
}

/* Guidelines vertical lists, paragraphs and spans (overriding specific styles.css rules) */
html[dir="rtl"] .guidelines-main .content-card .guidelines-vertical,
html[dir="rtl"] .guidelines-main .content-card .guidelines-vertical p,
html[dir="rtl"] .guidelines-main .content-card .guidelines-vertical span {
    text-align: right !important;
}

/* guidelines-vertical wrapper itself — set direction so children inherit RTL */
html[dir="rtl"] .guidelines-vertical {
    text-align: right !important;
    direction: rtl !important;
    flex-direction: column !important;
}

/* =====================================================================
   Responsive audit RTL overrides
   ===================================================================== */

@media (max-width: 768px) {
    html[dir="rtl"] .nav-menu,
    html[data-lang="ar"] .nav-menu {
        text-align: right;
        margin: 0 !important;
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    html[dir="rtl"] .dropdown-menu,
    html[data-lang="ar"] .dropdown-menu {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    html[dir="rtl"] .language-switcher .lang-dropdown,
    html[data-lang="ar"] .language-switcher .lang-dropdown {
        left: 0;
        right: auto;
        margin: 0 !important;
    }

    html[dir="rtl"] .nav-link,
    html[dir="rtl"] .dropdown-link {
        justify-content: center;
    }

    html[dir="rtl"] .nav-search-wrapper {
        margin-left: 0;
        margin-right: 0;
    }

    html[dir="rtl"] .nav-search-input {
        padding-right: 44px;
        padding-left: 0;
    }

    html[dir="rtl"] .nav-search-input:focus {
        right: auto;
        left: 0;
        padding-right: 2.4rem;
        padding-left: 1rem;
        direction: rtl;
        text-align: right;
    }

    html[dir="rtl"] .nav-search-icon {
        right: 14px;
        left: auto;
    }

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

    html[dir="rtl"] .hero-tag,
    html[data-lang="ar"] .hero-tag {
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
    }

    html[dir="rtl"] .hero-cta-group,
    html[data-lang="ar"] .hero-cta-group {
        direction: rtl;
    }

    html[dir="rtl"] .dashboard-sidebar,
    html[dir="rtl"] .sidebar {
        left: auto;
        right: 0;
        transform: translateX(100%);
    }

    html[dir="rtl"] .dashboard-sidebar.active,
    html[dir="rtl"] .sidebar.active,
    html[dir="rtl"] .sidebar.show {
        transform: translateX(0);
    }

    html[dir="rtl"] .dashboard-main,
    html[dir="rtl"] .main-wrapper,
    html[dir="rtl"] .main-wrapper.sidebar-collapsed {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    html[dir="rtl"] .footer-grid,
    html[data-lang="ar"] .footer-grid,
    html[dir="rtl"] .footer-col,
    html[data-lang="ar"] .footer-col {
        text-align: center;
    }

    html[dir="rtl"] .social-links,
    html[data-lang="ar"] .social-links {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    html[dir="rtl"] .hero-stats-row,
    html[data-lang="ar"] .hero-stats-row {
        border-left: 0;
        border-right: 2px solid #fbbf24;
        padding-left: 0;
        padding-right: 0.75rem;
        gap: 1rem;
        flex-wrap: nowrap;
        overflow-x: visible;
    }

    html[dir="rtl"] .hero-stat,
    html[data-lang="ar"] .hero-stat {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 360px) {
    html[dir="rtl"] .hero-stats-row,
    html[data-lang="ar"] .hero-stats-row {
        gap: 0.6rem;
    }
}

/* Bare flex divs with inline styles inside any guidelines section
   IMPORTANT: Use flex-direction: row (default) so natural RTL inheritance
   from <html dir="rtl"> flips items visually. row-reverse OVER-CORRECTS
   and produces the LTR layout again. */
html[dir="rtl"] .guidelines-vertical > div,
html[dir="rtl"] .guidelines-vertical [style*="display: flex"],
html[dir="rtl"] .guidelines-vertical [style*="display:flex"],
html[dir="rtl"] .center-beauty-card .guidelines-vertical > div,
html[dir="rtl"] .center-beauty-card .subsection-center [style*="display: flex"],
html[dir="rtl"] .center-beauty-card .subsection-center [style*="display:flex"],
html[dir="rtl"] .guideline-item,
html[dir="rtl"] .guideline-item > div,
html[dir="rtl"] .guideline-item > div > div[style*="display"],
html[dir="rtl"] .guideline-item > div > div[style*="flex"] {
    flex-direction: row !important;
    text-align: right !important;
    direction: rtl !important;
}

/* Force ALL text children to right-align */
html[dir="rtl"] .guidelines-vertical p,
html[dir="rtl"] .guidelines-vertical span,
html[dir="rtl"] .guidelines-vertical div,
html[dir="rtl"] .subsection-center p,
html[dir="rtl"] .subsection-center span,
html[dir="rtl"] .subsection-center > div {
    text-align: right !important;
    direction: rtl !important;
}

/* Defensive: catch ANY flex div anywhere inside a content card */
html[dir="rtl"] .center-beauty-card div[style*="display: flex"],
html[dir="rtl"] .center-beauty-card div[style*="display:flex"] {
    flex-direction: row !important;
    text-align: right !important;
    direction: rtl !important;
}

/* Markers (icons, numbers, roman numerals) stay tightly placed */
html[dir="rtl"] .center-beauty-card div[style*="display: flex"] > i,
html[dir="rtl"] .center-beauty-card div[style*="display:flex"] > i,
html[dir="rtl"] .center-beauty-card .fa-check-circle {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Numbered guideline rows — border flip */
html[dir="rtl"] .guidelines-main .guideline-item,
html[dir="rtl"] .guideline-item {
    border-left: none !important;
    border-right: 4px solid var(--hero-primary) !important;
}

/* The numeric marker span — keep compact, align right */
html[dir="rtl"] .guideline-item > span:first-child {
    text-align: right !important;
    flex: 0 0 auto !important;
}

/* The text paragraph — stretch to fill, read RTL */
html[dir="rtl"] .guidelines-main .guideline-item > p,
html[dir="rtl"] .guideline-item > p,
html[dir="rtl"] .guideline-item > div {
    text-align: right !important;
    direction: rtl !important;
    flex: 1 1 auto !important;
}

/* Nested column containers (padding-left → padding-right) */
html[dir="rtl"] .guideline-item div[style*="padding-left"],
html[dir="rtl"] .center-beauty-card div[style*="padding-left"] {
    padding-left: 0 !important;
    padding-right: 1.25rem !important;
}

/* Flex-column wrappers MUST NOT be row-reversed (they stack vertically) */
html[dir="rtl"] .center-beauty-card div[style*="flex-direction: column"],
html[dir="rtl"] .center-beauty-card div[style*="flex-direction:column"],
html[dir="rtl"] .guidelines-vertical {
    flex-direction: column !important;
}

html[dir="rtl"] .conflict-vertical-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: right !important;
}

/* Paragraphs immediately before or after guidelines-vertical (intro / plagiarism / transparency / etc. prose) */
html[dir="rtl"] .guidelines-main .content-card .guidelines-vertical ~ p,
html[dir="rtl"] .guidelines-main .content-card p:has(+ .guidelines-vertical),
html[dir="rtl"] .guidelines-main #authorship > p,
html[dir="rtl"] .guidelines-main #conflicts > p,
html[dir="rtl"] .guidelines-main #ai-policy > p,
html[dir="rtl"] .guidelines-main #ethics > p,
html[dir="rtl"] .guidelines-main #corrections > p,
html[dir="rtl"] .guidelines-main #copyright > p,
html[dir="rtl"] .guidelines-main #permissions > p {
    text-align: right !important;
}

/* Feature list item overrides (overriding text-align: left !important in styles.css) */
html[dir="rtl"] .guidelines-main .content-card .feature-list li {
    justify-content: flex-start !important;
    text-align: right !important;
}

/* Info and warning boxes override (overriding text-align: left !important in styles.css) */
html[dir="rtl"] .guidelines-main .content-card .info-box,
html[dir="rtl"] .guidelines-main .content-card .warning-box,
html[dir="rtl"] .guidelines-main .content-card .info-box p,
html[dir="rtl"] .guidelines-main .content-card .warning-box p {
    text-align: right !important;
}

/* Warning box left border flipped to right border & text-aligned right */
html[dir="rtl"] .warning-box {
    border-left: none !important;
    border-right: 4px solid #ef4444 !important;
    text-align: right !important;
}
html[dir="rtl"] .warning-box p {
    text-align: right !important;
}

/* Info box left border flipped to right border & text-aligned right (if styled with border-left) */
html[dir="rtl"] .info-box {
    border-left: none !important;
    border-right: 4px solid var(--hero-primary) !important;
    text-align: right !important;
}
html[dir="rtl"] .info-box p {
    text-align: right !important;
}

/* Contribution tags row — flow right-to-left */
html[dir="rtl"] .contribution-tags {
    flex-direction: row-reverse !important;
    justify-content: flex-start !important;  /* flex-start in RTL = visually right */
}

/* Tables (.guidelines-table) — header and rows align right */
html[dir="rtl"] .guidelines-table,
html[dir="rtl"] .guideline-row {
    text-align: right;
}

/* Pricing highlight stays centered (it's a price card, center is fine) */
html[dir="rtl"] .pricing-highlight {
    text-align: center !important;
}

/* Docket cards (Article Types) overrides */
html[dir="rtl"] .docket-card {
    border-left: none !important;
    border-right: 4px solid var(--hero-gold) !important;
}

html[dir="rtl"] .docket-card:hover {
    transform: translateX(-10px) !important; /* Slide left in RTL */
}

html[dir="rtl"] .guidelines-main .content-card .docket-card,
html[dir="rtl"] .guidelines-main .content-card .docket-content,
html[dir="rtl"] .guidelines-main .content-card .docket-desc {
    text-align: right !important;
}

/* Criteria item (Authorship Guidelines in ethics-policies.html) — flip order and align right */
html[dir="rtl"] .criteria-item {
    flex-direction: row-reverse !important;
    text-align: right !important;
}

html[dir="rtl"] .criteria-item p {
    text-align: right !important;
    direction: rtl !important;
}

/* Policy Grid & Policy Items (ethics-policies.html) RTL layout overrides */
html[dir="rtl"] .policy-item {
    text-align: right !important;
    border-left: 1px solid var(--border-light) !important;
}

html[dir="rtl"] .policy-item.correction {
    border-left: 1px solid var(--border-light) !important;
    border-right: 4px solid #3b82f6 !important;
    background: linear-gradient(225deg, rgba(59, 130, 246, 0.05) 0%, transparent 100%) !important;
}

html[dir="rtl"] .policy-item.retraction {
    border-left: 1px solid var(--border-light) !important;
    border-right: 4px solid #ef4444 !important;
    background: linear-gradient(225deg, rgba(239, 68, 68, 0.05) 0%, transparent 100%) !important;
}

html[dir="rtl"] .policy-item.withdrawal {
    border-left: 1px solid var(--border-light) !important;
    border-right: 4px solid #f59e0b !important;
    background: linear-gradient(225deg, rgba(245, 158, 11, 0.05) 0%, transparent 100%) !important;
}

html[dir="rtl"] .policy-item h3 {
    flex-direction: row-reverse !important;
    justify-content: flex-start !important;
}

html[dir="rtl"] .policy-item p {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .policy-item ul li {
    padding-left: 0 !important;
    padding-right: 1.25rem !important;
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .policy-item ul li::before {
    left: auto !important;
    right: 0 !important;
}

/* Sidebar TOC Links (ethics-policies.html, author-guidelines.html) RTL overrides */
html[dir="rtl"] .toc-link {
    flex-direction: row !important;
    gap: 0.75rem !important;
    border-left: none !important;
    border-right: 3px solid transparent !important;
    border-radius: 0.5rem 0 0 0.5rem !important;
}

html[dir="rtl"] .toc-link:hover {
    border-right-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateX(-4px) !important;
}

html[dir="rtl"] .toc-link.active {
    border-right: none !important;
    border-radius: 0.5rem !important;
    transform: translateX(-6px) !important;
}

html[dir="rtl"] .toc-link i {
    margin: 0 !important;
}

html[dir="rtl"] .toc-sidebar-title {
    flex-direction: row !important;
    gap: 0.75rem !important;
}

html[dir="rtl"] .toc-sidebar-title i {
    margin: 0 !important;
}

html[dir="rtl"] .toc-group-toggle {
    flex-direction: row !important;
    gap: 0.75rem !important;
}

html[dir="rtl"] .toc-group-toggle i:first-child {
    margin: 0 !important;
}

/* Warning & Info boxes flex direction flip */
html[dir="rtl"] .warning-box,
html[dir="rtl"] .info-box {
    flex-direction: row-reverse !important;
}

html[dir="rtl"] .warning-box p,
html[dir="rtl"] .info-box p {
    text-align: right !important;
    direction: rtl !important;
}

/* License Highlight (Creative Commons info in ethics-policies.html) flip */
html[dir="rtl"] .license-highlight {
    flex-direction: row-reverse !important;
    text-align: right !important;
}

html[dir="rtl"] .license-highlight p,
html[dir="rtl"] .license-highlight h3 {
    text-align: right !important;
    direction: rtl !important;
}

/* Supplementary Material Guidance (Tailwind page) generic RTL overrides */
html[dir="rtl"] .success-box {
    border-left: none !important;
    border-right: 4px solid #48bb78 !important;
    text-align: right !important;
}

html[dir="rtl"] .success-box p {
    text-align: right !important;
    direction: rtl !important;
}

html[dir="rtl"] .info-box {
    border-left: none !important;
    border-right-width: 4px !important;
    border-right-style: solid !important;
    text-align: right !important;
}

html[dir="rtl"] .guidelines-main .content-card .info-box {
    border-right-color: var(--hero-primary) !important;
}

html[dir="rtl"] .content-section .info-box {
    border-right-color: #4299e1 !important;
}

/* Generic lists indent flip in RTL */
html[dir="rtl"] ul, 
html[dir="rtl"] ol {
    margin-left: 0 !important;
    margin-right: 1.5rem !important;
    text-align: right !important;
}

/* Tailwind utility class margin flip helper for icons */
html[dir="rtl"] .mr-2 {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

html[dir="rtl"] .mr-3 {
    margin-right: 0 !important;
    margin-left: 0.75rem !important;
}

html[dir="rtl"] .mr-4 {
    margin-right: 0 !important;
    margin-left: 1rem !important;
}

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

/* Responsive audit RTL final cascade guard */
@media (max-width: 768px) {
    html[dir="rtl"] .nav-menu,
    html[data-lang="ar"] .nav-menu {
        text-align: right;
        margin: 0 !important;
        padding-left: max(16px, env(safe-area-inset-left)) !important;
        padding-right: max(16px, env(safe-area-inset-right)) !important;
    }

    html[dir="rtl"] .dropdown-menu,
    html[data-lang="ar"] .dropdown-menu {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    html[dir="rtl"] .nav-search-input:focus {
        right: auto;
        left: 0;
        padding-right: 2.4rem !important;
        padding-left: 1rem !important;
    }

    html[dir="rtl"] .nav-search-icon {
        right: 14px;
        left: auto;
    }

    html[dir="rtl"] .hero-text-content,
    html[data-lang="ar"] .hero-text-content {
        text-align: center;
    }

    html[dir="rtl"] .dashboard-sidebar,
    html[dir="rtl"] .sidebar {
        left: auto;
        right: 0;
        transform: translateX(100%);
    }

    html[dir="rtl"] .dashboard-sidebar.active,
    html[dir="rtl"] .sidebar.active,
    html[dir="rtl"] .sidebar.show {
        transform: translateX(0);
    }

    html[dir="rtl"] .footer-grid,
    html[data-lang="ar"] .footer-grid,
    html[dir="rtl"] .footer-col,
    html[data-lang="ar"] .footer-col {
        text-align: center;
        margin-right: 0 !important;
    }

    html[dir="rtl"] .guidelines-main .content-card .info-box,
    html[dir="rtl"] .guidelines-main .content-card .warning-box,
    html[dir="rtl"] .guidelines-main .content-card .guidelines-vertical,
    html[dir="rtl"] .guidelines-main .guideline-item {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        transform: none !important;
    }

    html[dir="rtl"] .guidelines-main .content-card .guidelines-vertical,
    html[dir="rtl"] .guidelines-main .guideline-item {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    html[dir="rtl"] .language-switcher .lang-dropdown,
    html[data-lang="ar"] .language-switcher .lang-dropdown {
        left: 0;
        right: auto;
        margin: 0 !important;
    }
}

@media (max-width: 480px) {
    html[dir="rtl"] .hero-stats-row,
    html[data-lang="ar"] .hero-stats-row {
        border-left: 0;
        border-right: 2px solid #fbbf24;
        padding-left: 0;
        padding-right: 0.75rem;
        gap: 1rem;
        flex-wrap: nowrap;
        overflow-x: visible;
    }
}

@media (max-width: 360px) {
    html[dir="rtl"] .hero-stats-row,
    html[data-lang="ar"] .hero-stats-row {
        gap: 0.6rem;
    }
}

/* Mobile RTL overrides for .center-beauty-card to revert to centered stack */
@media (max-width: 768px) {
    html[dir="rtl"] .center-beauty-card .card-header-row,
    html[dir="rtl"] .guidelines-main .center-beauty-card .guideline-item,
    html[dir="rtl"] .guidelines-main .center-beauty-card .guidelines-vertical > div,
    html[dir="rtl"] .guidelines-main .center-beauty-card .guidelines-vertical [style*="display: flex"],
    html[dir="rtl"] .guidelines-main .center-beauty-card .guidelines-vertical [style*="display:flex"],
    html[dir="rtl"] .center-beauty-card .guidelines-vertical > div,
    html[dir="rtl"] .center-beauty-card .subsection-center [style*="display: flex"],
    html[dir="rtl"] .center-beauty-card .subsection-center [style*="display:flex"],
    html[dir="rtl"] .center-beauty-card div[style*="display: flex"],
    html[dir="rtl"] .center-beauty-card div[style*="display:flex"] {
        flex-direction: column !important;
        text-align: center !important;
    }

    html[dir="rtl"] .center-beauty-card h2,
    html[dir="rtl"] .center-beauty-card h3,
    html[dir="rtl"] .center-beauty-card p,
    html[dir="rtl"] .center-beauty-card .feature-list,
    html[dir="rtl"] .center-beauty-card .contribution-tags,
    html[dir="rtl"] .center-beauty-card .subsection-center,
    html[dir="rtl"] .center-beauty-card .centered-list li,
    html[dir="rtl"] .guidelines-main .center-beauty-card .feature-list,
    html[dir="rtl"] .guidelines-main .center-beauty-card .feature-list li,
    html[dir="rtl"] .guidelines-main .center-beauty-card .contribution-tags,
    html[dir="rtl"] .guidelines-main .center-beauty-card .guidelines-vertical,
    html[dir="rtl"] .guidelines-main .center-beauty-card .guidelines-vertical p,
    html[dir="rtl"] .guidelines-main .center-beauty-card .guidelines-vertical span,
    html[dir="rtl"] .guidelines-main .center-beauty-card .info-box,
    html[dir="rtl"] .guidelines-main .center-beauty-card .warning-box,
    html[dir="rtl"] .guidelines-main .center-beauty-card .guidelines-vertical div,
    html[dir="rtl"] .center-beauty-card .subsection-center p,
    html[dir="rtl"] .center-beauty-card .subsection-center span,
    html[dir="rtl"] .center-beauty-card .subsection-center > div {
        justify-content: center !important;
        text-align: center !important;
        align-items: center !important;
    }

    html[dir="rtl"] .center-beauty-card .card-header-row .content-icon {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Align policy items right in Arabic */
html[dir="rtl"] .policy-item p,
html[dir="rtl"] .policy-item ul,
html[dir="rtl"] .policy-item li {
    text-align: right !important;
    justify-content: flex-start !important;
    direction: rtl !important;
}

/* ===== Form placeholders — force right-align in Arabic =====
   Only set text-align (no direction override). Setting direction: rtl
   on placeholders of LTR-direction inputs (email/url/tel) causes the
   browser to render the placeholder oddly. text-align alone pins it
   to the right edge regardless of the input's typing direction. */
html[dir="rtl"] input::placeholder,
html[dir="rtl"] textarea::placeholder,
html[dir="rtl"] .form-input::placeholder,
html[dir="rtl"] .gold-input::placeholder,
html[dir="rtl"] .form-group input::placeholder,
html[dir="rtl"] .form-group textarea::placeholder {
    text-align: right !important;
}

/* Force INPUTS themselves to right-align in Arabic — including LTR-direction
   types like email/url/tel. text-align is direction-agnostic so the
   placeholder pins to the right edge while typed content still flows LTR. */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] .form-input,
html[dir="rtl"] .form-group input,
html[dir="rtl"] .form-group .form-input,
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] input[type="search"],
html[dir="rtl"] input[type="text"] {
    text-align: right !important;
}

/* Placeholder right-align — minimal, no direction override (the input's
   own direction handles typing flow; placeholder just snaps to right). */
html[dir="rtl"] input::placeholder,
html[dir="rtl"] textarea::placeholder,
html[dir="rtl"] .form-input::placeholder {
    text-align: right !important;
}

/* Force form labels to right-align in Arabic */
html[dir="rtl"] .form-label,
html[dir="rtl"] .checkbox-label {
    text-align: right !important;
}