/* ==========================================================================
 *  RTL OVERRIDES FOR ARABIC — loaded after style.css
 *  ========================================================================== */

/* --- Arabic typeface & base direction --- */
body {
    font-family: "Cairo", "Inter", system-ui, sans-serif;
    direction: rtl;
    text-align: right;
}

h1, h2, h3, .logo span {
    font-family: "Cairo", "Plus Jakarta Sans", sans-serif;
}

/* --- Keep centered blocks centered --- */
.hero,
.hero p,
.detail-header,
.detail-header h1,
.detail-subtitle,
.related h2,
.detail-back,
.privacy-content h1,
.about-content h1,
.contact-content h1,
.last-updated {
    text-align: center;
}

/* --- Left-aligned blocks → right-aligned --- */
.detail-section,
.privacy-content section,
.about-content section,
.contact-item {
    text-align: right;
}

/* --- Search bar: icon moves to the right --- */
.search-bar {
    padding: 1.1rem 3.25rem 1.1rem 1.5rem;
    background-position: right 1.15rem center;
}

@media (max-width: 480px) {
    .search-bar {
        padding: 0.95rem 2.9rem 0.95rem 1.25rem;
    }
}

/* --- Card: glow moves top-right → top-left, arrow flips --- */
a.card::after {
    right: auto;
    left: 0;
    background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.12), transparent 70%);
}

a.card h3::after {
    content: " ←";
    transform: translateX(6px);
}

a.card:hover h3::after {
    transform: translateX(0);
}

/* --- Detail section accent bar: left → right --- */
.detail-section::before {
    left: auto;
    right: 0;
    border-radius: 2px 0 0 2px;
}

/* --- Numbered steps: numbering on the right --- */
.steps > li {
    padding-left: 0;
    padding-right: 3.25rem;
}

.steps > li::before {
    left: auto;
    right: 0;
}

.steps ul {
    padding-left: 0;
    padding-right: 1.25rem;
}

@media (max-width: 768px) {
    .steps > li {
        padding-left: 0;
        padding-right: 2.9rem;
    }
}

/* --- Tips hover slides left instead of right --- */
.tips li:hover {
    transform: translateX(-4px);
}

/* --- Contact items accent bar: left → right --- */
.contact-item {
    border-left: none;
    border-right: 3px solid var(--accent);
    border-radius: var(--radius) 0 0 var(--radius);
}

.contact-item:hover {
    border-right-color: var(--accent-purple);
}