/*
 * MCE Bookstore Core — Elementor widget styles.
 * Uses the theme's --mce-* tokens when present, with fallbacks so the widgets
 * still look reasonable under a different theme.
 */

.mce-books-grid .woocommerce {
	width: 100%;
}

.mce-empty {
	padding: 1.5rem;
	border: 1px dashed currentColor;
	text-align: center;
	opacity: .7;
}

.mce-categories {
	display: grid;
	grid-template-columns: repeat(var(--mce-grid-columns, 3), minmax(0, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mce-category-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .35rem;
	height: 100%;
	min-height: 180px;
	padding: 1.75rem 1.75rem 1.5rem;
	box-sizing: border-box;
	overflow: hidden;
	border: 1px solid var(--mce-line, #e3d7bf);
	border-radius: var(--mce-radius-lg, 20px);
	background: var(--mce-white, #fff);
	color: var(--mce-navy-800, #0f2446);
	text-decoration: none;
	transition: transform .3s var(--mce-ease, ease), box-shadow .3s var(--mce-ease, ease), background-color .3s, color .3s;
}

.mce-category-card::after {
	/* Faint crescent from the logo in the corner (theme provides the image). */
	content: "";
	position: absolute;
	inset-block-end: -110px;
	inset-inline-start: -110px;
	width: 260px;
	height: 260px;
	background: var(--mce-cluster-blue, none) no-repeat center / 340px auto;
	opacity: 0;
	transition: opacity .3s;
	pointer-events: none;
}

.mce-category-card:hover,
.mce-category-card:focus-visible {
	transform: translateY(-4px);
	background: var(--mce-navy-800, #0f2446);
	box-shadow: var(--mce-shadow, 0 10px 30px -12px rgb(0 0 0 / 30%));
	color: var(--mce-beige-50, #fbf8f2);
}

.mce-category-card:hover::after,
.mce-category-card:focus-visible::after {
	opacity: 1;
}

.mce-category-card__index {
	color: var(--mce-accent-500, #1a8fd6);
	font-family: var(--mce-font-display, serif);
	font-size: 1.1rem;
	font-weight: 700;
}

.mce-category-card__name {
	font-family: var(--mce-font-display, serif);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.3;
}

.mce-category-card__desc {
	color: var(--mce-muted, #5a6275);
	font-size: .9rem;
	line-height: 1.6;
	transition: color .3s;
}

.mce-category-card:hover .mce-category-card__desc,
.mce-category-card:focus-visible .mce-category-card__desc {
	color: var(--mce-beige-300, #dccaa6);
}

.mce-category-card__count {
	margin-block-start: auto;
	padding-block-start: .75rem;
	color: var(--mce-accent-700, #125d9a);
	font-size: .8125rem;
	font-weight: 600;
	transition: color .3s;
}

.mce-category-card:hover .mce-category-card__count,
.mce-category-card:focus-visible .mce-category-card__count {
	color: var(--mce-accent-300, #7cc4ee);
}

.mce-category-card__arrow {
	position: absolute;
	inset-block-end: 1.25rem;
	inset-inline-end: 1.5rem;
	font-size: 1.25rem;
	transition: transform .3s var(--mce-ease, ease);
}

.mce-category-card:hover .mce-category-card__arrow {
	transform: translateX(-6px);
}

/* LTR: WordPress only outputs dir="rtl", so match its absence. */
:root:not([dir="rtl"]) .mce-category-card__arrow {
	transform: scaleX(-1);
}

:root:not([dir="rtl"]) .mce-category-card:hover .mce-category-card__arrow {
	transform: scaleX(-1) translateX(-6px);
}

/* Series colour (set per card from the category's palette): top edge, number, and hover fill. */
.mce-category-card[style*="--mce-cat-color"] {
	border-block-start: 5px solid var(--mce-cat-color);
}

.mce-category-card[style*="--mce-cat-color"] .mce-category-card__index {
	display: inline-grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--mce-cat-color);
	color: var(--mce-cat-ink);
	font-size: .95rem;
}

.mce-category-card[style*="--mce-cat-color"]:hover,
.mce-category-card[style*="--mce-cat-color"]:focus-visible {
	background: var(--mce-cat-color);
	color: var(--mce-cat-ink);
}

.mce-category-card[style*="--mce-cat-color"]:hover .mce-category-card__desc,
.mce-category-card[style*="--mce-cat-color"]:focus-visible .mce-category-card__desc,
.mce-category-card[style*="--mce-cat-color"]:hover .mce-category-card__count,
.mce-category-card[style*="--mce-cat-color"]:focus-visible .mce-category-card__count {
	color: var(--mce-cat-ink);
	opacity: .85;
}

.mce-category-card[style*="--mce-cat-color"]:hover .mce-category-card__index,
.mce-category-card[style*="--mce-cat-color"]:focus-visible .mce-category-card__index {
	background: var(--mce-cat-ink);
	color: var(--mce-cat-color);
}