/* Chilli Fortnite Database — Frontend Styles */

.cfd-page {
	--cfd-primary: #7c3aed;
	--cfd-accent: #22d3ee;
	--cfd-grid-columns: 4;
	--cfd-bg: #ffffff;
	--cfd-fg: #111827;
	--cfd-muted: #6b7280;
	--cfd-border: #e5e7eb;
	--cfd-card-bg: #f9fafb;
}

@media ( prefers-color-scheme: dark ) {
	.cfd-page {
		--cfd-bg: #0b0b10;
		--cfd-fg: #f3f4f6;
		--cfd-muted: #9ca3af;
		--cfd-border: #26262f;
		--cfd-card-bg: #16161d;
	}
}

.cfd-card-grid {
	display: grid;
	grid-template-columns: repeat( var( --cfd-grid-columns, 4 ), minmax( 0, 1fr ) );
	gap: 1.25rem;
	margin: 1.5rem 0;
}

@media ( max-width: 1024px ) {
	.cfd-card-grid { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
}
@media ( max-width: 720px ) {
	.cfd-card-grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}
@media ( max-width: 460px ) {
	.cfd-card-grid { grid-template-columns: 1fr; }
}

.cfd-card {
	display: block;
	background: var( --cfd-card-bg );
	border: 1px solid var( --cfd-border );
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform .15s ease, box-shadow .15s ease;
}
.cfd-card:hover,
.cfd-card:focus-visible {
	transform: translateY( -4px );
	box-shadow: 0 10px 25px rgba( 0, 0, 0, .12 );
}
.cfd-card-media { position: relative; aspect-ratio: 1 / 1; background: var( --cfd-border ); }
.cfd-card-image, .cfd-card-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
.cfd-badge {
	position: absolute; top: 8px; left: 8px;
	background: var( --cfd-primary ); color: #fff;
	font-size: .7rem; font-weight: 600; padding: 2px 8px; border-radius: 999px;
}
.cfd-card-body { padding: .75rem 1rem 1rem; }
.cfd-card-title { margin: 0 0 .25rem; font-size: 1rem; }
.cfd-card-rarity { display: block; font-size: .8rem; color: var( --cfd-muted ); }
.cfd-card-price { display: inline-block; margin-top: .35rem; font-weight: 600; color: var( --cfd-accent ); }

/* Hero / single page */
.cfd-single { max-width: 1100px; margin: 0 auto; padding: 1rem; color: var( --cfd-fg ); }
.cfd-breadcrumbs { font-size: .85rem; color: var( --cfd-muted ); margin-bottom: 1rem; }
.cfd-breadcrumbs a { color: var( --cfd-muted ); }
.cfd-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
@media ( max-width: 720px ) { .cfd-hero { grid-template-columns: 1fr; } }
.cfd-hero-image { width: 100%; border-radius: 16px; }
.cfd-rarity-badge {
	display: inline-block; padding: 3px 10px; border-radius: 999px;
	background: var( --cfd-item-color, var( --cfd-primary ) ); color: #fff;
	font-size: .75rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
}
.cfd-price { font-size: 1.4rem; font-weight: 700; color: var( --cfd-accent ); }
.cfd-quick-facts { list-style: none; padding: 0; margin: 1rem 0; }
.cfd-quick-facts li { padding: .25rem 0; border-bottom: 1px dashed var( --cfd-border ); }
.cfd-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }

/* Gallery / lightbox */
.cfd-gallery-grid { display: grid; grid-template-columns: repeat( auto-fill, minmax( 140px, 1fr ) ); gap: .75rem; }
.cfd-gallery-item img { width: 100%; border-radius: 10px; display: block; }
.cfd-lightbox-overlay {
	position: fixed; inset: 0; background: rgba( 0, 0, 0, .9 ); display: flex;
	align-items: center; justify-content: center; z-index: 100000; padding: 2rem;
}
.cfd-lightbox-overlay img { max-width: 90vw; max-height: 90vh; border-radius: 8px; }
.cfd-lightbox-close { position: absolute; top: 1rem; right: 1.5rem; color: #fff; font-size: 2rem; background: none; border: none; cursor: pointer; }

.cfd-video video, .cfd-video-embed iframe { width: 100%; aspect-ratio: 16/9; border-radius: 12px; border: 0; }

.cfd-meta-grid { margin: 1.5rem 0; display: grid; gap: .5rem; }
.cfd-meta-row a { margin-right: .5rem; }

/* Search + filter */
.cfd-search { position: relative; margin: 1rem 0; }
.cfd-search-input { width: 100%; padding: .75rem 1rem; border-radius: 10px; border: 1px solid var( --cfd-border ); font-size: 1rem; }
.cfd-search-results {
	position: absolute; top: 100%; left: 0; right: 0; background: var( --cfd-bg );
	border: 1px solid var( --cfd-border ); border-radius: 10px; margin-top: .25rem;
	max-height: 360px; overflow-y: auto; z-index: 50; box-shadow: 0 10px 25px rgba( 0,0,0,.15 );
}
.cfd-search-result { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; text-decoration: none; color: inherit; }
.cfd-search-result:hover { background: var( --cfd-card-bg ); }
.cfd-search-result img { width: 32px; height: 32px; object-fit: cover; border-radius: 6px; }

.cfd-filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.cfd-filter-bar select { padding: .5rem .75rem; border-radius: 8px; border: 1px solid var( --cfd-border ); }

.cfd-pagination { display: flex; gap: .4rem; justify-content: center; margin: 2rem 0; }
.cfd-pagination .page-numbers { padding: .4rem .8rem; border: 1px solid var( --cfd-border ); border-radius: 8px; text-decoration: none; color: inherit; }
.cfd-pagination .current { background: var( --cfd-primary ); color: #fff; }

.cfd-wishlist-toggle.is-active { background: var( --cfd-primary ); color: #fff; }

.cfd-empty { color: var( --cfd-muted ); padding: 2rem 0; text-align: center; }
.cfd-block-title { margin: 2rem 0 1rem; }