/**
 * Dravin Archive Pills — Frontend Styles
 * Prefix: dap-  (no collision with dpg- Pill Grid)
 *
 * @package Dravin_Filter
 * @since   2.0.8
 */

/* ── Widget wrapper ─────────────────────────── */
.dap-widget {
	position: relative;
	width: 100%;
}

/* ── Pill bar wrapper ───────────────────────── */
.dap-pill-wrapper {
	position: relative;
	width: 100%;
	background: #fff;
	z-index: 9997;
	transition: box-shadow 0.2s;
}

.dap-pill-wrapper.dap-is-sticky {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 9997;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* Placeholder prevents layout jump when sticky activates */
.dap-sticky-placeholder {
	display: none;
}
.dap-sticky-placeholder.dap-is-active {
	display: block;
}

/* ── Pill bar inner ─────────────────────────── */
.dap-pill-inner {
	position: relative;
	display: flex;
	align-items: center;
}

/* ── Pill viewport + track ──────────────────── */
.dap-pill-viewport {
	overflow: hidden;
	flex: 1;
	min-width: 0;
	cursor: grab;
	-webkit-overflow-scrolling: touch;
}

.dap-pill-viewport.dap-is-dragging {
	cursor: grabbing;
	user-select: none;
}

.dap-pill-track {
	display: flex;
	gap: 8px;
	padding: 4px 2px 6px;
	transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
	width: max-content;
}

/* Disable transition during drag */
.dap-pill-track.dap-no-transition {
	transition: none;
}

/* ── Individual pill ────────────────────────── */
.dap-pill {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	flex-shrink: 0;
	padding: 8px 20px;
	border: 1px solid #e0e0e0;
	background: #ffffff;
	color: #222222;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	border-radius: 50px;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease,
	            transform 0.12s ease;
	-webkit-tap-highlight-color: transparent;
	outline: none;
	user-select: none;
}

.dap-pill.dap-active {
	background: #222222;
	color: #ffffff;
	border-color: #222222;
}

.dap-pill:active {
	transform: scale(0.96);
}

/* ── Arrows ─────────────────────────────────── */
.dap-arrow {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid #e0e0e0;
	background: #ffffff;
	color: #333333;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: opacity 0.2s, background 0.15s;
	-webkit-tap-highlight-color: transparent;
	outline: none;
	z-index: 2;
}

.dap-arrow:hover {
	background: #f5f5f5;
}

.dap-arrow.dap-hidden {
	opacity: 0;
	pointer-events: none;
}

.dap-prev { margin-right: 6px; }
.dap-next { margin-left: 6px; }

/* ── Skeleton shimmer ───────────────────────── */

/* Variables injected by JS onto the archive grid element */
/* --dap-skel-base  : #ebebeb */
/* --dap-skel-shine : #f5f5f5 */

@keyframes dap-shimmer {
	0%   { background-position:  200% 0; }
	100% { background-position: -200% 0; }
}

.dap-skeleton-card {
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}

.dap-skel-image {
	aspect-ratio: 3/4;
	background: linear-gradient(
		90deg,
		var(--dap-skel-base, #ebebeb)  25%,
		var(--dap-skel-shine, #f5f5f5) 50%,
		var(--dap-skel-base, #ebebeb)  75%
	);
	background-size: 200% 100%;
	animation: dap-shimmer 1.4s infinite;
}

.dap-skel-line {
	height: 11px;
	border-radius: 4px;
	margin: 10px 10px 6px;
	background: linear-gradient(
		90deg,
		var(--dap-skel-base, #ebebeb)  25%,
		var(--dap-skel-shine, #f5f5f5) 50%,
		var(--dap-skel-base, #ebebeb)  75%
	);
	background-size: 200% 100%;
	animation: dap-shimmer 1.4s infinite;
}

.dap-skel-price {
	width: 45%;
	margin-top: 0;
}

/* ── No products message ────────────────────── */
.dap-no-products {
	color: #999;
	padding: 20px;
	text-align: center;
	grid-column: 1 / -1;
}

/* ── Mobile ─────────────────────────────────── */
@media (max-width: 767px) {
	.dap-arrow {
		display: none;
	}
}