/*
Theme Name: MangaReader
Description: RTL Stylesheet for Arabic and RTL languages
*/

/* ==========================================================================
   1. Typography & Global Direction
   ========================================================================== */
body,
button,
input,
select,
textarea {
	font-family: 'Cairo', 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	letter-spacing: normal;
}

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

/* ==========================================================================
   2. Header & Navigation (RTL)
   ========================================================================== */
.mr-header-actions {
	margin-left: 0;
	margin-right: auto;
}

.mr-nav-menu {
	margin-right: 25px;
	margin-left: 0;
}

.mr-nav-count-badge {
	margin-left: 0;
	margin-right: 6px;
}

.mr-nav-dice-icon {
	margin-inline-end: 0 !important;
	margin-inline-start: 5px !important;
}

/* Desktop Search Form (RTL) */
.mr-search-box .mr-search-icon {
	left: auto;
	right: 14px;
}

.mr-search-box .mr-search-input {
	padding: 9px 42px 9px 36px;
	text-align: right;
}

.mr-search-spinner {
	right: auto;
	left: 14px;
}

.mr-search-dropdown {
	left: auto;
	right: 0;
	text-align: right;
}

.mr-search-item {
	text-align: right;
}

.mr-search-item.is-selected {
	border-left: none;
	border-right: 3px solid var(--accent-primary);
}

.mr-search-thumb {
	margin-right: 0;
	margin-left: 12px;
}

/* Mobile Search Modal (RTL) */
.mr-msm-header .mr-msm-icon {
	left: auto;
	right: 14px;
}

.mr-msm-input {
	padding: 10px 44px 10px 38px;
	text-align: right;
}

#mr_search_spinner_mobile,
.mr-search-spinner {
	right: auto;
	left: 14px;
}

.mr-msm-close {
	margin-left: 0;
	margin-right: 10px;
}

/* Mobile Navigation Drawer (RTL) */
.mr-mobile-drawer .mr-drawer-panel {
	left: auto;
	right: 0;
	transform: translateX(100%);
}

.mr-mobile-drawer.is-active .mr-drawer-panel {
	transform: translateX(0);
}

.mr-drawer-header {
	text-align: right;
}

.mr-drawer-close {
	margin-left: 0;
	margin-right: auto;
}

.mr-mobile-nav-list li a {
	text-align: right;
}

/* ==========================================================================
   3. Breadcrumbs & Badges (RTL)
   ========================================================================== */
.mr-breadcrumbs {
	text-align: right;
}

.mr-breadcrumbs .mr-sep {
	margin: 0 8px;
}

/* ==========================================================================
   4. Hero Slider & Cards (RTL)
   ========================================================================== */
.mr-hero-info-col {
	text-align: right;
}

.mr-hero-meta-top {
	justify-content: flex-start;
}

.mr-hero-actions {
	justify-content: flex-start;
}

.mr-hero-arrow.mr-hero-prev svg {
	transform: rotate(180deg);
}

.mr-hero-arrow.mr-hero-next svg {
	transform: rotate(180deg);
}

.mr-view-all-link {
	margin-left: 0;
	margin-right: auto;
}

.mr-view-all-link span,
.mr-view-all-link svg {
	transform: rotate(180deg);
}

/* Manga Cards (RTL) */
.mr-card-badges-top {
	left: auto;
	right: 8px;
}

.mr-card-bm-btn {
	right: auto;
	left: 8px;
}

.mr-card-rating {
	left: auto;
	right: 8px;
}

.mr-card-content {
	text-align: right;
}

.mr-card-ch-btn {
	flex-direction: row;
	direction: rtl;
	text-align: right;
}

.mr-card-ch-btn .mr-ch-num {
	text-align: right;
	direction: rtl;
	unicode-bidi: isolate;
}

.mr-card-ch-btn .mr-ch-time {
	text-align: left;
	direction: rtl;
	unicode-bidi: isolate;
}

/* ==========================================================================
   5. Single Webtoon Details Page (RTL)
   ========================================================================== */
.mr-manga-details-col {
	text-align: right;
}

.mr-manga-badges-row {
	justify-content: flex-start;
}

.mr-manga-meta-table .mr-meta-item {
	text-align: right;
}

.mr-manga-actions-bar {
	justify-content: flex-start;
}

.mr-rw-stars {
	flex-direction: row;
}

.mr-rw-meta {
	margin-left: 0;
	margin-right: 12px;
}

.mr-ch-controls {
	margin-left: 0;
	margin-right: auto;
}

.mr-ch-search-box svg {
	left: auto;
	right: 12px;
}

.mr-ch-search-box input {
	padding: 8px 36px 8px 12px;
	text-align: right;
}

.mr-ch-row {
	text-align: right;
}

.mr-ch-meta {
	margin-left: 0;
	margin-right: auto;
}

.mr-read-tag {
	margin-left: 0;
	margin-right: 8px;
}

/* ==========================================================================
   6. Chapter Reader (RTL)
   ========================================================================== */
.mr-tb-left .mr-tb-back svg {
	transform: rotate(180deg);
}

.mr-tb-left .mr-tb-back {
	margin-right: 0;
	margin-left: 12px;
}

.mr-tb-nav-btn svg {
	transform: rotate(180deg);
}

.mr-tb-right {
	margin-left: 0;
	margin-right: auto;
}

.mr-floating-page-counter {
	left: 20px;
	right: auto;
}

.mr-rmb-btn svg {
	transform: rotate(180deg);
}

/* ==========================================================================
   7. 404 Page & General Archives (RTL)
   ========================================================================== */
.mr-404-hero {
	text-align: center;
}

.mr-404-search-form .mr-search-icon {
	left: auto;
	right: 14px;
}

.mr-404-search-form .mr-search-input {
	padding: 9px 42px 9px 36px;
	text-align: right;
}

.mr-archive-header {
	text-align: right;
}

.mr-genre-nav-bar {
	direction: rtl;
	text-align: right;
}

.mr-genre-nav-bar span {
	margin-inline-end: 8px;
	margin-inline-start: 0;
}

.mr-blog-content {
	text-align: right;
}

.mr-blog-meta {
	justify-content: flex-start;
}

/* ==========================================================================
   8. Footer (RTL)
   ========================================================================== */
.mr-site-footer {
	text-align: right;
}

.mr-footer-links li a {
	text-align: right;
}

.mr-footer-bottom {
	text-align: right;
}

/* Mobile: center hero slider name & info (RTL) */
@media (max-width: 768px) {
	.mr-hero-info-col {
		text-align: center;
	}
	.mr-hero-meta-top {
		justify-content: center;
	}
	.mr-hero-actions {
		justify-content: center;
	}
	/* Keep the Story & Synopsis section right-aligned in RTL */
	.mr-manga-synopsis,
	.mr-synopsis-heading,
	.mr-synopsis-text {
		text-align: right;
	}
}