/*
Theme Name: AnimePornPic Swipe
Theme URI: https://animepornpic.local
Author: animepornpic
Description: Вертикальная свайп-лента картинок в стиле TikTok для AI-сгенерированного контента (post_format=image).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: animepornpic-swipe
*/

:root {
	--accent: #c8102e;
	--bg: #000;
	--text: #fff;
}

* {
	box-sizing: border-box;
}

html {
	height: 100%;
}

body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Poppins', Arial, sans-serif;
	background: var(--bg);
	color: var(--text);
	overflow: hidden;
}

a {
	color: var(--text);
	text-decoration: none;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Feed (Swiper) ---- */

.swiper {
	width: 100%;
	height: 100vh;
	height: 100dvh;
}

.swiper-slide {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #12131a;
	overflow: hidden;
}

.slide-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	filter: blur(30px) brightness(0.5);
	transform: scale(1.2);
}

/* Wraps <img> + .close-fullscreen together so the close button is a
   descendant of the fullscreened element, not a sibling — Fullscreen API
   only renders the target element's subtree, so a sibling button would
   simply not appear once fullscreen engages (the bug on mobile, where
   there's no Esc key or browser-chrome fullscreen hint to fall back on). */
.content-img-wrap {
	position: relative;
	z-index: 1;
	max-width: 100%;
	max-height: 100%;
	display: flex;
}

.content-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}

.swiper-slide.portrait .content-img-wrap {
	height: 100%;
	width: auto;
}

.swiper-slide.portrait .content-img {
	height: 100%;
	width: auto;
}

.swiper-slide.landscape .content-img-wrap {
	width: 100%;
	height: auto;
}

.swiper-slide.landscape .content-img {
	width: 100%;
	height: auto;
}

.content-img-wrap:fullscreen,
.content-img-wrap:-webkit-full-screen {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	background: #000;
	align-items: center;
	justify-content: center;
}

.content-img-wrap:fullscreen .content-img,
.content-img-wrap:-webkit-full-screen .content-img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}

/* iOS Safari fallback (no Fullscreen API for non-<video> elements) — simulate
   fullscreen with a fixed overlay instead. Browser chrome (address bar, etc.)
   stays visible since this is just CSS, not true OS-level fullscreen. */
.content-img-wrap.is-fake-fullscreen {
	position: fixed;
	inset: 0;
	z-index: 9999;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	background: #000;
	align-items: center;
	justify-content: center;
}

.content-img-wrap.is-fake-fullscreen .content-img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}

/* z-index alone can't lift the overlay above header/footer-menu — they're
   siblings of .swiper, a different stacking context entirely. Hide them
   outright while the fake-fullscreen overlay is active. */
body.aps-fake-fs-active header,
body.aps-fake-fs-active .footer-menu,
body.aps-fake-fs-active .aps-continue-banner,
body.aps-fake-fs-active .aps-swipe-hint,
body.aps-fake-fs-active .aps-nav-prev,
body.aps-fake-fs-active .aps-nav-next {
	display: none !important;
}

/* Mobile: fill the screen edge-to-edge like a native short-video feed.
   On wide desktop viewports "contain" above is correct — cover would crop
   a portrait image down to a sliver. */
@media (max-width: 699px) {
	.content-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	.swiper-slide.portrait .content-img-wrap,
	.swiper-slide.landscape .content-img-wrap,
	.swiper-slide.portrait .content-img,
	.swiper-slide.landscape .content-img {
		width: 100%;
		height: 100%;
	}

	.aps-archive {
		padding-top: 64px;
	}
}

/* ---- Slide info overlay ---- */

.swiper-slide::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 280px;
	z-index: 1;
	background: linear-gradient(to top, rgba(6,8,20,0.75), rgba(0,0,0,0));
	pointer-events: none;
}

.single-content-infos {
	position: absolute;
	left: 0;
	right: 70px;
	bottom: 120px;
	z-index: 2;
	padding: 0 16px;
}

/* On wide viewports "right: 70px" alone leaves a huge text column — long
   descriptions stretch into a single very wide line instead of wrapping,
   spilling visually over the image and making the More/Less toggle pointless
   (everything already fits on that one line). Cap the column to roughly the
   width the tag pills already wrap at. */
@media (min-width: 700px) {
	.single-content-infos {
		max-width: 480px;
	}
}

.single-content-infos h1,
.single-content-infos h2 {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 600;
	text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

.post-views {
	display: flex;
	align-items: center;
	font-size: 12px;
	opacity: 0.85;
	margin-bottom: 6px;
}

.tags-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.tags-list a {
	background: rgba(255,255,255,0.15);
	border-radius: 3px;
	padding: 3px 8px;
	font-size: 12px;
}

.tags-list a:hover,
.tags-list a.active {
	background: var(--accent);
}

.tags-list a small {
	opacity: 0.7;
	margin-left: 4px;
}

/* ---- Post description ---- */

.aps-desc {
	margin-top: 8px;
}

.aps-desc-text {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	opacity: 0.85;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.aps-desc.is-expanded .aps-desc-text {
	-webkit-line-clamp: unset;
	overflow: visible;
}

.aps-desc-toggle {
	background: none;
	border: none;
	padding: 2px 0 0;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	color: var(--accent);
	cursor: pointer;
}

/* ---- Side actions ---- */

.swiper-side {
	position: absolute;
	right: 10px;
	bottom: 120px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}

.swiper-side a {
	display: flex;
	align-items: center;
	justify-content: center;
}

.swiper-side svg path {
	fill: #fff;
}

.aps-favorite-btn svg path {
	fill: none;
	stroke: #fff;
}

.aps-favorite-btn.is-favorited svg path {
	fill: var(--accent);
	stroke: var(--accent);
}

.aps-heart-burst {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	pointer-events: none;
	transform: translate(-50%, -50%) scale(0.4);
	opacity: 0;
	filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
	animation: aps-heart-burst 0.7s ease-out forwards;
}

.aps-heart-burst svg path {
	fill: var(--accent);
}

@keyframes aps-heart-burst {
	0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
	30%  { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
	60%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
	100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

.close-fullscreen {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 3;
	width: 44px;
	height: 44px;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.45);
	border: none;
	border-radius: 50%;
	cursor: pointer;
}

/* ---- Header ---- */

header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px 16px;
	background: linear-gradient(rgba(6,8,20,0.6), transparent);
}

header.has-back {
	display: grid;
	grid-template-columns: 36px 1fr auto;
	align-items: center;
	column-gap: 10px;
}

.aps-back-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
}

.aps-header-label {
	font-size: 15px;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

header.has-back .logo-text {
	font-size: 14px;
	opacity: 0.7;
}

header.has-back .logo-mark {
	width: 18px;
	height: 18px;
	font-size: 11px;
	margin-right: 4px;
}

.logo-text {
	display: inline-flex;
	align-items: center;
	font-size: 20px;
	font-weight: 700;
	color: var(--accent);
}

.logo-mark {
	display: inline-block;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	margin-right: 7px;
}

/* ---- Footer nav ---- */

.footer-menu {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	display: flex;
	justify-content: space-around;
	padding: 10px 0;
	background: rgba(0,0,0,0.4);
}

.footer-menu a,
.footer-menu button {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	font-size: 11px;
	opacity: 0.8;
	background: none;
	border: none;
	padding: 0;
	font-family: inherit;
	color: #fff;
	cursor: pointer;
}

.footer-menu a.active {
	opacity: 1;
	color: var(--accent);
}

.footer-menu a svg path,
.footer-menu button svg path {
	fill: #fff;
}

.footer-menu a.active svg path {
	fill: var(--accent);
}

#aps-favorites-nav-link {
	position: relative;
}

.aps-favorites-count {
	position: absolute;
	top: -2px;
	right: 10px;
	min-width: 15px;
	height: 15px;
	padding: 0 3px;
	border-radius: 8px;
	background: var(--accent);
	color: #fff;
	font-size: 10px;
	line-height: 15px;
	text-align: center;
}

/* ---- Single (no-swipe) view ---- */

body.single-view {
	overflow: auto;
}

/* Swiper's vertical mode sets touch-action: pan-x on its container to
   capture vertical swipes itself, which also blocks native touch
   scrolling. Single posts have only one slide and allowTouchMove is
   disabled for them above, so let touch scrolling through here. */
body.single-view .swiper {
	touch-action: auto;
}

body.single-view .swiper-slide {
	height: 100vh;
	height: 100dvh;
}

/* ---- Archive / search grid ---- */

body.archive,
body.search {
	overflow: auto;
	background: #0a0b12;
}

.aps-archive {
	max-width: 1100px;
	margin: 0 auto;
	padding: 90px 16px 90px;
}

.aps-archive-title {
	font-size: 22px;
	margin-bottom: 20px;
	text-align: center;
}

.aps-cat-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 480px;
	margin: 0 auto;
}

.aps-cat-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	background: #15161e;
	border-radius: 8px;
	font-weight: 600;
}

.aps-cat-link:hover {
	background: #1e2029;
}

.aps-cat-link small {
	opacity: 0.6;
	font-weight: 400;
}

.aps-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

@media (min-width: 700px) {
	.aps-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.aps-grid-item {
	position: relative;
	display: block;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	border-radius: 6px;
	background: #191b24;
}

.aps-grid-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aps-remove-favorite {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 2;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.55);
	border: none;
	border-radius: 50%;
	cursor: pointer;
}

.aps-grid-title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 8px;
	font-size: 12px;
	background: linear-gradient(transparent, rgba(0,0,0,0.8));
}

.aps-empty {
	text-align: center;
	opacity: 0.7;
}

.aps-empty a {
	color: var(--accent);
	opacity: 1;
	text-decoration: underline;
}

.aps-related {
	padding-top: 30px;
}

.pagination,
.navigation.pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
}

.pagination .page-numbers {
	padding: 6px 12px;
	background: rgba(255,255,255,0.1);
	border-radius: 4px;
}

.pagination .page-numbers.current {
	background: var(--accent);
}

/* ---- Search overlay ---- */

.aps-search-overlay {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 70px;
	z-index: 11;
	display: none;
	padding: 0 16px;
}

.aps-search-overlay.is-open {
	display: block;
}

.aps-browse-categories-link {
	display: block;
	text-align: center;
	margin-top: 10px;
	font-size: 13px;
	opacity: 0.75;
	text-decoration: underline;
}

.aps-search-form {
	display: flex;
	background: rgba(20,20,20,0.95);
	border-radius: 24px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,0.2);
}

.aps-search-input {
	flex: 1;
	background: none;
	border: none;
	color: #fff;
	padding: 10px 16px;
	font-family: inherit;
	font-size: 14px;
}

.aps-search-input:focus {
	outline: none;
}

.aps-search-submit {
	background: var(--accent);
	border: none;
	padding: 0 16px;
	cursor: pointer;
}

/* ---- Static legal/text pages ---- */

body.page {
	overflow: auto;
	background: #0a0b12;
}

.aps-page {
	max-width: 720px;
	margin: 0 auto;
	padding: 90px 20px 110px;
	line-height: 1.7;
}

.aps-page-title {
	font-size: 26px;
	margin-bottom: 20px;
}

.aps-page-content h2 {
	font-size: 18px;
	margin: 28px 0 10px;
}

.aps-page-content p,
.aps-page-content li {
	color: #ccc;
	font-size: 14px;
}

.aps-page-content a {
	color: var(--accent);
	text-decoration: underline;
}

/* ---- Footer legal links ---- */

.aps-legal-links-row {
	display: flex;
	justify-content: center;
	gap: 14px;
	padding: 8px 0 16px;
	font-size: 10px;
	opacity: 0.7;
}

.aps-legal-links-row a {
	color: #ccc;
}

/* ---- Age gate ---- */

.aps-age-gate {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.92);
	padding: 20px;
	text-align: center;
}

.aps-age-gate.is-visible {
	display: flex;
}

.aps-age-gate-box {
	max-width: 420px;
}

.aps-age-gate-box h2 {
	font-size: 20px;
	margin-bottom: 12px;
}

.aps-age-gate-box p {
	font-size: 13px;
	color: #ccc;
	margin-bottom: 22px;
}

.aps-age-gate-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
}

.aps-age-gate-actions button {
	padding: 10px 22px;
	border-radius: 24px;
	border: none;
	font-size: 14px;
	cursor: pointer;
}

.aps-age-confirm {
	background: var(--accent);
	color: #fff;
}

.aps-age-leave {
	background: rgba(255,255,255,0.15);
	color: #fff;
}

/* ---- Loading ---- */

.swipe-loading {
	position: absolute;
	bottom: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 5;
	font-size: 13px;
	opacity: 0.7;
	display: none;
}

/* ---- Toast ---- */

.aps-toast {
	position: fixed;
	bottom: 90px;
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	z-index: 1000;
	background: rgba(20,20,20,0.95);
	border: 1px solid rgba(255,255,255,0.15);
	color: #fff;
	font-size: 13px;
	padding: 8px 18px;
	border-radius: 20px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.aps-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ---- First-visit swipe hint ---- */

.aps-swipe-hint {
	position: absolute;
	left: 50%;
	top: 42%;
	transform: translate(-50%, -50%);
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s ease;
	text-align: center;
	text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}

.aps-swipe-hint.is-visible {
	opacity: 1;
}

.aps-swipe-hint.is-visible svg {
	animation: aps-swipe-hint-bounce 1.4s ease-in-out infinite;
}

.aps-swipe-hint span {
	font-size: 13px;
	font-weight: 500;
}

@keyframes aps-swipe-hint-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(8px); }
}

/* ---- Desktop next/prev arrows ---- */

.aps-nav-arrow {
	display: none;
	position: fixed;
	right: 10px;
	z-index: 6;
	width: 32px;
	height: 32px;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.45);
	border: none;
	border-radius: 50%;
	cursor: pointer;
}

.aps-nav-arrow:hover {
	background: rgba(0,0,0,0.65);
}

.aps-nav-prev {
	bottom: 336px;
}

.aps-nav-next {
	bottom: 290px;
}

@media (pointer: fine) and (min-width: 700px) {
	.aps-nav-arrow {
		display: flex;
	}
}

/* ---- Continue watching banner ---- */

.aps-continue-banner {
	position: fixed;
	top: 8px;
	left: 10px;
	right: 10px;
	z-index: 11;
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(20,20,20,0.92);
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 12px;
	padding: 8px 10px;
}

.aps-continue-banner img {
	width: 36px;
	height: 36px;
	border-radius: 6px;
	object-fit: cover;
	flex-shrink: 0;
}

.aps-continue-text {
	flex: 1;
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aps-continue-link {
	background: var(--accent);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 16px;
	flex-shrink: 0;
}

.aps-continue-dismiss {
	background: none;
	border: none;
	color: #fff;
	opacity: 0.7;
	font-size: 18px;
	line-height: 1;
	padding: 0 2px;
	cursor: pointer;
	flex-shrink: 0;
}

/* ---- End of feed ---- */

.aps-end-banner {
	position: absolute;
	top: 38%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	background: rgba(10,10,10,0.85);
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 14px;
	padding: 18px 24px;
	text-align: center;
}

.aps-end-banner p {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
}

.aps-end-banner a {
	display: inline-block;
	background: var(--accent);
	color: #fff;
	font-size: 13px;
	padding: 8px 18px;
	border-radius: 20px;
}

/* ---- Short/landscape viewports (rotated phones) ---- */
/* header/footer/overlay sizing below was tuned for tall portrait phones;
   on short heights they'd overlap the image, so shrink everything here. */

@media (orientation: landscape) and (max-height: 500px) {
	header {
		padding: 4px 10px;
	}

	.aps-back-btn,
	.aps-back-btn svg {
		width: 26px;
		height: 26px;
	}

	.aps-header-label {
		font-size: 12px;
	}

	.logo-text {
		font-size: 14px;
	}

	.logo-mark {
		width: 18px;
		height: 18px;
		font-size: 11px;
	}

	header.has-back .logo-text {
		font-size: 11px;
	}

	.footer-menu {
		padding: 3px 0;
	}

	.footer-menu a svg,
	.footer-menu button svg {
		width: 16px;
		height: 16px;
	}

	.footer-menu a,
	.footer-menu button {
		font-size: 9px;
	}

	.swiper-slide::after {
		height: 130px;
	}

	.single-content-infos {
		right: 50px;
		bottom: 30px;
	}

	.single-content-infos h1,
.single-content-infos h2 {
		font-size: 13px;
		margin-bottom: 4px;
	}

	.post-views {
		font-size: 10px;
		margin-bottom: 2px;
	}

	.tags-list a {
		font-size: 10px;
		padding: 2px 6px;
	}

	.swiper-side {
		right: 6px;
		bottom: 30px;
		gap: 10px;
	}

	.swiper-side a svg {
		width: 20px;
		height: 20px;
	}

	.aps-search-overlay {
		bottom: 40px;
	}
}