/**
 * FictionX Library Module — Frontend Styles
 * Categories & Book cards for public-facing library pages.
 */

/* ==============================================================================
   Category Cards
   ============================================================================== */
.fxlib-cat-card {
	border-radius: 12px;
	overflow: hidden;
	background: var(--bs-body-bg);
	border: 1px solid var(--bs-border-color);
	transition: border-color .25s ease;
}
.fxlib-cat-card:hover {
	border-color: var(--bs-primary);
}
.fxlib-cat-thumb {
	position: relative;
	height: 180px;
	overflow: hidden;
}
.fxlib-cat-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.fxlib-cat-card:hover .fxlib-cat-thumb img {
	transform: scale(1.06);
}
.fxlib-cat-dim {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.02) 60%);
}
.fxlib-cat-stats {
	position: absolute;
	bottom: 12px;
	right: 14px;
	left: 14px;
	display: flex;
	gap: 12px;
	z-index: 2;
}
.fxlib-stat {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	background: rgba(255,255,255,.18);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	padding: 4px 10px;
	border-radius: 20px;
}
.fxlib-stat i {
	font-size: 14px;
}
.fxlib-cat-info {
	padding: 16px 18px 18px;
}
.fxlib-cat-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--bs-gray-900);
	margin: 0 0 6px;
	line-height: 1.5;
}
.fxlib-cat-desc {
	font-size: 13px;
	color: var(--bs-gray-500);
	margin: 0 0 12px;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.fxlib-cat-action {
	display: flex;
	justify-content: flex-start;
}
.fxlib-cat-link {
	font-size: 13px;
	font-weight: 600;
	color: var(--bs-primary);
	transition: color .2s;
}
.fxlib-cat-link i {
	font-size: 14px;
}
.fxlib-cat-card:hover .fxlib-cat-link {
	color: var(--bs-primary);
}

/* ==============================================================================
   Book Cards — 3D Cover Style
   ============================================================================== */
.fxlib-book-card {
	border-radius: 10px;
	background: var(--bs-body-bg);
	border: 1px solid var(--bs-border-color);
	overflow: hidden;
	transition: border-color .3s ease;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.fxlib-book-card:hover {
	border-color: var(--bs-primary);
}

.fxlib-book-stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 250px;
	background: var(--bs-gray-100);
	perspective: 900px;
	flex-shrink: 0;
}

.fxlib-book-3d {
	position: relative;
	display: block;
	width: 160px;
	height: 220px;
	transform-style: preserve-3d;
	transform: rotateY(25deg);
	transition: transform .4s ease;
	text-decoration: none;
}
.fxlib-book-card:hover .fxlib-book-3d {
	transform: rotateY(10deg);
}

.fxlib-book-front {
	position: absolute;
	inset: 0;
	background: var(--bs-body-bg);
	border-radius: 6px 2px 2px 6px;
	overflow: hidden;
	box-shadow: -2px 2px 8px rgba(0,0,0,.12);
	transform: translateZ(12px);
}
.fxlib-book-front img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fxlib-book-front.fxlib-no-cover {
	background: var(--bs-gray-300);
	display: flex;
	align-items: center;
	justify-content: center;
}
.fxlib-book-front.fxlib-no-cover::after {
	content: '';
	width: 48px;
	height: 56px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.45'%3E%3Cpath d='M4 19.5A2.5 2.5 0 016.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}

.fxlib-book-spine {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 24px;
	background: var(--bs-gray-300);
	transform: rotateY(-90deg) translateZ(0px) translateX(12px);
	border-radius: 0 2px 2px 0;
}

.fxlib-book-pages {
	position: absolute;
	top: 3px;
	bottom: 3px;
	right: 0;
	width: 24px;
	background: repeating-linear-gradient(
		90deg,
		var(--bs-body-bg) 0px,
		var(--bs-body-bg) 1px,
		var(--bs-gray-200) 1px,
		var(--bs-gray-200) 2px
	);
	transform: rotateY(-90deg) translateZ(12px) translateX(12px);
	border-radius: 2px 0 0 2px;
	border-top: 1px solid var(--bs-border-color);
	border-bottom: 1px solid var(--bs-border-color);
}

.fxlib-book-3d::after {
	content: '';
	position: absolute;
	bottom: -14px;
	left: 10%;
	width: 80%;
	height: 12px;
	background: radial-gradient(ellipse, rgba(0,0,0,.18) 0%, transparent 70%);
	border-radius: 50%;
	transform: translateZ(-14px);
}
[data-bs-theme="dark"] .fxlib-book-3d::after {
	background: radial-gradient(ellipse, rgba(0,0,0,.35) 0%, transparent 70%);
}

.fxlib-book-stage .fxlib-book-actions {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: rgba(0,0,0,.3);
	border-radius: 0;
	opacity: 0;
	transition: opacity .3s ease;
	z-index: 5;
}
.fxlib-book-card:hover .fxlib-book-actions {
	opacity: 1;
}
.fxlib-btn-read,
.fxlib-btn-dl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: #fff;
	font-size: 17px;
	transition: background .2s, transform .25s;
	transform: translateY(10px);
	text-decoration: none;
}
.fxlib-book-card:hover .fxlib-btn-read,
.fxlib-book-card:hover .fxlib-btn-dl {
	transform: translateY(0);
}
.fxlib-btn-read {
	background: rgba(48,50,46,.76);
}
.fxlib-btn-read:hover {
	background: var(--bs-primary);
	color: #fff;
}
.fxlib-btn-dl {
	background: rgba(48,50,46,.76);
}
.fxlib-btn-dl:hover {
	background: var(--bs-success);
	color: #fff;
}

.fxlib-book-body {
	padding: 16px 18px 18px;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.fxlib-book-title {
	display: -webkit-box;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--bs-gray-900);
	margin-bottom: 6px;
	line-height: 1.55;
	text-decoration: none;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color .2s;
}
.fxlib-book-title:hover {
	color: var(--bs-primary);
}
.fxlib-book-author {
	font-size: 13px;
	color: var(--bs-gray-600);
	margin-bottom: 10px;
}
.fxlib-book-author i {
	font-size: 14px;
}
.fxlib-book-meta {
	display: flex;
	gap: 14px;
	font-size: 12px;
	color: var(--bs-gray-500);
	margin-top: auto;
}
.fxlib-book-meta span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.fxlib-book-meta i {
	font-size: 14px;
}