/* RoninManga look: dark, red accent, right-to-left friendly. Loaded after style.css. */

/* ---------- Persian font ---------- */
@font-face { font-family: "IRANSans"; src: local("IRANSans"), url("../fonts/IRANSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IRANSans"; src: local("IRANSans Bold"), url("../fonts/IRANSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
html[dir="rtl"] body, html[lang^="fa"] body,
html[dir="rtl"] :is(button, input, select, textarea), html[lang^="fa"] :is(button, input, select, textarea) {
	font-family: "IRANSans", "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
}
html[dir="rtl"] body { line-height: 1.75; }

/* ---------- Red accent ---------- */
html[data-theme="fluent"] { --primary: #e11d2e; --primary-dark: #b5121f; --primary-light: #ff4d5e; --primary-bg: #fde8ea; --on-primary: #fff; }
html[data-theme="fluent"][data-mode="dark"] {
	--primary-bg: rgba(225, 29, 46, .2);
	--bg: #0f0f10; --header-bg: rgba(15, 15, 16, .9); --card-bg: rgba(28, 28, 30, .92); --surface: rgba(255, 255, 255, .05);
}
html[data-theme="metro"] { --primary: var(--metro-accent, #e11d2e); }
html[data-theme="mangastream"] { --primary: #e11d2e; --primary-dark: #b5121f; --primary-light: #ff4d5e; --primary-bg: #fde8ea; --on-primary: #fff; }

/* Directional nudges that need a sign flip in RTL */
html[dir="rtl"] .status-filter:hover,
html[dir="rtl"] .single-manga .chapter-card-link:hover { transform: translateX(-4px); }

/* ---------- Hero slider ---------- */
.hero { position: relative; min-height: min(64vh, 540px); overflow: hidden; background: #0b0b0c; color: #fff; }
.hero-empty { min-height: 0; padding: 24px 0; background: var(--card-bg); color: var(--text-light); }
.hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s; }
.hero-slide.is-active { opacity: 1; visibility: visible; }
.hero-bg { position: absolute; inset: 0; background: var(--hero-img) center / cover no-repeat; }
.hero-bg::after {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(to top, var(--bg) 0%, rgba(0, 0, 0, .55) 38%, rgba(0, 0, 0, .15) 100%),
		linear-gradient(to right, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .55) 100%);
}
html[dir="rtl"] .hero-bg::after {
	background:
		linear-gradient(to top, var(--bg) 0%, rgba(0, 0, 0, .55) 38%, rgba(0, 0, 0, .15) 100%),
		linear-gradient(to left, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 60%);
}
.hero-inner { position: relative; height: 100%; min-height: min(64vh, 540px); display: flex; align-items: flex-end; padding-bottom: 110px; }
.hero-text { max-width: 560px; }
.hero-title { margin: 0 0 10px; font-size: clamp(24px, 4vw, 40px); line-height: 1.3; font-weight: 800; }
.hero-title a { color: #fff; text-decoration: none; }
.hero-title a:hover { color: var(--primary-light); }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 10px; font-size: 14px; color: #e6e6e6; }
.hero-genres { color: var(--primary-light); font-weight: 600; }
.hero-desc { margin: 0 0 18px; font-size: 14px; color: #d6d6d6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hero-btn { box-shadow: 0 6px 20px rgba(225, 29, 46, .35); }
.hero-controls { position: absolute; inset-inline: 0; bottom: 18px; z-index: 2; }
.hero-thumbs { display: flex; justify-content: flex-end; gap: 10px; }
.hero-thumb { padding: 0; width: 56px; height: 78px; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: #222; opacity: .65; cursor: pointer; transition: opacity .2s, border-color .2s, transform .2s; }
.hero-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-thumb:hover { opacity: 1; transform: translateY(-3px); }
.hero-thumb.is-active { opacity: 1; border-color: var(--primary); }
@media (max-width: 640px) {
	.hero-inner { padding-bottom: 100px; }
	.hero-thumb { width: 44px; height: 62px; }
	.hero-desc { -webkit-line-clamp: 2; }
}
@media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } }

/* ---------- Downloads page ---------- */
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.dl-card { display: flex; gap: 14px; padding: 12px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); }
.dl-card-cover { flex: none; width: 72px; }
.dl-card-cover img { display: block; width: 72px; height: 100px; object-fit: cover; border-radius: var(--radius-sm); }
.dl-card-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.dl-card-body h3 { margin: 0; font-size: 16px; }
.dl-card-body h3 a { color: var(--text); text-decoration: none; }
.dl-card .dl-row { margin-top: 0; }
.dl-more { font-size: 13px; color: var(--primary); }
.my-library-empty { padding: 24px 0; text-align: center; color: var(--text-light); }

/* ---------- Bottom tab bar + phone layout ---------- */
.tabbar, .tab-sheet { display: none; }

@media (max-width: 768px) {
	html { -webkit-text-size-adjust: 100%; }
	body.has-tabbar { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

	.tabbar {
		display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: 900;
		background: var(--header-bg); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
		border-top: 1px solid var(--card-border);
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}
	.tab {
		flex: 1 1 0; min-width: 0; min-height: 56px; padding: 6px 2px;
		display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
		background: none; border: 0; color: var(--text-light); font: inherit; font-size: 11px; line-height: 1.2;
		text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
	}
	.tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.tab.is-active { color: var(--primary); font-weight: 700; }
	.tab:active { background: var(--hover-bg); }

	.tab-sheet {
		display: block; position: fixed; inset-inline-end: 8px; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: 950;
		min-width: 210px; padding: 6px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl);
	}
	.tab-sheet[hidden] { display: none; }
	.tab-sheet-name { margin: 0; padding: 10px 12px; font-weight: 700; border-bottom: 1px solid var(--card-border); }
	.tab-sheet a { display: block; padding: 12px; color: var(--text); text-decoration: none; border-radius: var(--radius-sm); }
	.tab-sheet a:active { background: var(--hover-bg); }

	/* Items that already live in the tab bar leave the header */
	#searchToggle, .header-actions .account-link { display: none; }
	.primary-menu .menu-home, .primary-menu .menu-library { display: none; }

	/* Notifications: full-width sheet under the header */
	.notif-panel { position: fixed; top: 64px; inset-inline: 8px; width: auto; max-height: calc(100vh - 140px); }

	/* Comfortable touch targets */
	.icon-btn { min-width: 44px; min-height: 44px; }
	.btn { min-height: 44px; }
	.primary-menu a { padding: 14px 0; }

	/* Manga page: buttons two per row, download panel full width */
	.single-manga .manga-actions { display: flex; flex-wrap: wrap; gap: 10px; }
	.single-manga .manga-actions .btn { flex: 1 1 calc(50% - 10px); justify-content: center; text-align: center; }
	.download-panel { padding: 16px; }
	.dl-row { flex-direction: column; align-items: stretch; }
	.dl-row .dl-link, .dl-select { width: 100%; text-align: center; }
	.dl-label { min-width: 0; }
	.dl-card .dl-row { flex-direction: row; flex-wrap: wrap; }
	.dl-card .dl-row .dl-link { width: auto; }

	/* Forms: 16px stops iOS from zooming when an input is focused */
	input, select, textarea { font-size: 16px; }
	.ronin-auth { margin: 1rem auto; padding: 1.25rem; }

	.hero, .hero-inner { min-height: min(56vh, 460px); }
}

@media (max-width: 380px) {
	.tab { font-size: 10px; }
	.hero-thumb { width: 40px; height: 56px; }
}

/* Cart icon in the header (shop) */
.cart-link { position: relative; }
.cart-count { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--primary); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.cart-count[hidden] { display: none; }

/* Genre labels along the top of every manga cover */
.manga-item-cover { position: relative; }
.manga-item-genres {
	position: absolute; top: 0; inset-inline: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px;
	padding: 8px 8px 22px; pointer-events: none;
	background: linear-gradient(to bottom, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
	border-start-start-radius: inherit; border-start-end-radius: inherit;
}
.manga-item-genres span { padding: 1px 8px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.7; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.manga-item-cover .new-flag { top: 34px; }
.home-manga .section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.home-manga .view-all { color: var(--primary); font-size: 14px; text-decoration: none; }

.ronin-auth-hint { margin: 0; font-size: .85rem; color: var(--text-light); }
.ronin-auth input[type="email"] { letter-spacing: 0; }