/* ==============================================================
   Urdu News Pro - RTL (Right-to-Left) Overrides
   For Urdu, Arabic, Persian, Hebrew, and other RTL languages
   ============================================================== */

html[dir="rtl"] body,
html[lang="ur"] body {
    direction: rtl;
    unicode-bidi: embed;
}

html[dir="rtl"],
html[lang="ur"] {
    direction: rtl;
}

/* ---------- Container / Layout ---------- */
@media (min-width: 993px) {
    html[dir="rtl"] .has-sidebar #primary {
        float: right;
    }

    html[dir="rtl"] .has-sidebar .widget-area.sidebar {
        float: left;
    }
}

html[dir="rtl"] body {
    text-align: right;
}

html[dir="rtl"] .section-heading,
html[dir="rtl"] .entry-meta,
html[dir="rtl"] .slider-meta {
    text-align: right;
}

/* Center-aligned elements stay centered in RTL */
html[dir="rtl"] .site-header,
html[dir="rtl"] .archive-header,
html[dir="rtl"] .page-header,
html[dir="rtl"] .pagination-wrapper,
html[dir="rtl"] .error-404,
html[dir="rtl"] .error-categories ul,
html[dir="rtl"] .weather-now,
html[dir="rtl"] .prayer-city,
html[dir="rtl"] .tg-widget,
html[dir="rtl"] .app-widget {
    text-align: center;
}

/* ---------- Border swaps ---------- */
html[dir="rtl"] blockquote {
    border-right: 4px solid #b8001f;
    border-left: 0;
    padding-right: 1.5em;
    padding-left: 1em;
}

/* ---------- Margin / Padding direction fixes ---------- */
html[dir="rtl"] .cat-card-thumb {
    margin-left: 0;
    margin-right: 12px;
}

@media (max-width: 768px) {
    html[dir="rtl"] .cat-card-thumb {
        margin-right: 0;
        margin-left: 10px;
    }
}

html[dir="rtl"] .top-date {
    margin-left: 16px;
    margin-right: 0;
}

html[dir="rtl"] .entry-content ul,
html[dir="rtl"] .entry-content ol {
    padding-right: 25px;
    padding-left: 0;
}

html[dir="rtl"] .primary-menu-list .sub-menu {
    right: 0;
    left: auto;
    text-align: right;
}

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

html[dir="rtl"] .children {
    padding-right: 30px;
    padding-left: 0;
}

/* ---------- Slider arrows in RTL ---------- */
html[dir="rtl"] .slider-arrow-prev {
    right: 20px;
    left: auto;
    transform: translateY(-50%) scaleX(-1);
}

html[dir="rtl"] .slider-arrow-prev:hover {
    transform: translateY(-50%) scale(1.1) scaleX(-1);
}

html[dir="rtl"] .slider-arrow-next {
    left: 20px;
    right: auto;
    transform: translateY(-50%) scaleX(-1);
}

html[dir="rtl"] .slider-arrow-next:hover {
    transform: translateY(-50%) scale(1.1) scaleX(-1);
}

@media (max-width: 768px) {
    html[dir="rtl"] .slider-arrow-prev { right: 10px; }
    html[dir="rtl"] .slider-arrow-next { left: 10px; }
}

/* ---------- Numbered badge position ---------- */
html[dir="rtl"] .numbered-badge {
    right: -10px;
}

/* ---------- Sidebar Social Block hover direction ---------- */
html[dir="rtl"] .sidebar-social-btn:hover {
    transform: translateX(4px);
}

/* ---------- Back to Top position ---------- */
html[dir="rtl"] .back-to-top-btn {
    left: auto;
    right: 30px;
}

@media (max-width: 768px) {
    html[dir="rtl"] .back-to-top-btn {
        right: 15px;
    }
}

html[dir="rtl"] .back-arrow {
    transform: scaleX(-1);
}

/* ---------- Video Play button offset (centering icon) ---------- */
html[dir="rtl"] .video-play-btn {
    padding-right: 5px;
    padding-left: 0;
}

/* ---------- Footer columns visual order ---------- */
html[dir="rtl"] .footer-widgets .container {
    direction: rtl;
}

html[dir="rtl"] .footer-bottom-inner {
    text-align: right;
}

@media (max-width: 768px) {
    html[dir="rtl"] .footer-bottom-inner {
        text-align: center;
    }
}

/* ---------- Top bar layout ---------- */
html[dir="rtl"] .top-bar-left { text-align: right; }
html[dir="rtl"] .top-bar-right { text-align: left; }

/* ---------- Alignleft / Alignright ---------- */
html[dir="rtl"] .alignleft {
    float: right;
    margin-left: 1.5em;
    margin-right: 0;
}

html[dir="rtl"] .alignright {
    float: left;
    margin-right: 1.5em;
    margin-left: 0;
}

/* ---------- Latest circular thumb should be on the right (start side) ---------- */
/* In RTL the start (reading flow start) is right, so circle goes on the right.
   The flex-direction:row in main.css already puts thumb first, but in RTL flex reverses.
   We need to ensure thumb appears on the start (right) side */
html[dir="rtl"] .circular-link {
    flex-direction: row;
}

html[dir="rtl"] .circular-thumb {
    margin-left: 15px;
}

/* ---------- Video card small thumb on start (right in RTL) ---------- */
html[dir="rtl"] .video-card-small .video-card-link {
    flex-direction: row;
}

/* ---------- Important link icon on start side ---------- */
html[dir="rtl"] .important-link {
    flex-direction: row;
}

/* ---------- Social feed thumb on start side (right in RTL) ---------- */
html[dir="rtl"] .social-feed-link {
    flex-direction: row;
}

/* ---------- Sidebar app content: image on left in RTL (end side) ---------- */
html[dir="rtl"] .app-content {
    flex-direction: row;
}

html[dir="rtl"] .app-image {
    margin-left: 0;
}

/* ---------- App buttons text alignment ---------- */
html[dir="rtl"] .app-btn-text {
    text-align: right;
}

/* ---------- Gold rate row border ---------- */
html[dir="rtl"] .gold-rate-row {
    border-right: 3px solid #b8001f;
    border-left: 0;
}

/* ---------- Telegram widget stat grid ---------- */
html[dir="rtl"] .tg-stats {
    direction: rtl;
}

/* ---------- Prayer row layout ---------- */
html[dir="rtl"] .prayer-row {
    direction: rtl;
}

/* ---------- Header ad area alignment ---------- */
html[dir="rtl"] .header-ad-area {
    text-align: left;
}

@media (max-width: 768px) {
    html[dir="rtl"] .header-ad-area {
        text-align: center;
    }
}

/* ---------- Currency ticker - in RTL the scroll should go right-to-left naturally */
html[dir="rtl"] .currency-ticker-track {
    animation-direction: reverse;
}

/* ---------- Section more link alignment ---------- */
html[dir="rtl"] .section-more .more-arrow {
    transform: scaleX(-1);
    display: inline-block;
}

/* ---------- Footer menu list spacing ---------- */
html[dir="rtl"] .footer-menu-list {
    direction: rtl;
}

/* ---------- Cookie bar alignment ---------- */
html[dir="rtl"] .cookie-link {
    margin-right: 0;
    margin-left: 8px;
}

html[dir="rtl"] .cookie-consent-inner {
    direction: rtl;
}