/**
 * Quick View Modal — styles for listing preview popup.
 *
 * Desktop: centered modal with backdrop.
 * Mobile (<768px): full-screen bottom sheet.
 * Inherits design tokens from Free plugin's shared.css.
 */

/* ════════════════════════════════════════════
   Eye Icon Button on Card
════════════════════════════════════════════ */

.listora-quick-view-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Sit above the card's stretched title-link overlay
	   (.listora-card__title a::after, z-index 1) so the click reaches this
	   button and opens the Quick View modal instead of navigating to the
	   single listing. Matches Free's card overlays (favorite/badges) at z-index 2. */
	position: relative;
	z-index: 2;
	/* 40×40 tap target — frontend-responsive Rule 4 floor. */
	width: 40px;
	height: 40px;
	padding: 0;
	background: var(--listora-card-bg, var(--listora-bg-elevated));
	border: 1px solid var(--listora-border, var(--listora-border-subtle));
	border-radius: var(--listora-radius-full, 9999px);
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
	cursor: pointer;
	transition:
		background var(--listora-transition-fast, 0.15s ease),
		color var(--listora-transition-fast, 0.15s ease),
		border-color var(--listora-transition-fast, 0.15s ease),
		transform var(--listora-transition-fast, 0.15s ease);
	flex-shrink: 0;
}

.listora-quick-view-btn:hover {
	background: var(--listora-primary, var(--listora-wp-admin-link));
	border-color: var(--listora-primary, var(--listora-wp-admin-link));
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	transform: scale(1.08);
}

.listora-quick-view-btn:focus-visible {
	outline: 2px solid var(--listora-primary, var(--listora-wp-admin-link));
	outline-offset: 2px;
}

.listora-quick-view-btn__icon {
	flex-shrink: 0;
}

/* ════════════════════════════════════════════
   Overlay (Backdrop)
════════════════════════════════════════════ */

.listora-qv-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.25s ease,
		visibility 0.25s ease;
}

.listora-qv-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

/* ════════════════════════════════════════════
   Modal
════════════════════════════════════════════ */

.listora-qv-modal {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(540px, calc(100vw - 2rem));
	max-height: calc(100vh - 4rem);
	background: var(--listora-card-bg, var(--listora-bg-elevated));
	border-radius: var(--listora-radius-lg, 14px);
	box-shadow: var(--listora-shadow-xl, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
	overflow: hidden;
	transform: scale(0.95) translateY(10px);
	transition: transform 0.25s ease;
}

.listora-qv-overlay.is-open .listora-qv-modal {
	transform: scale(1) translateY(0);
}

/* Close button */

.listora-qv-modal__close {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Meet the 40px tap-target floor on touch surfaces (was 32px). */
	width: var(--listora-tap-target, 44px);
	height: var(--listora-tap-target, 44px);
	padding: 0;
	background: rgba(0, 0, 0, 0.4);
	border: none;
	border-radius: var(--listora-radius-full, 9999px);
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	cursor: pointer;
	transition:
		background var(--listora-transition-fast, 0.15s ease),
		transform var(--listora-transition-fast, 0.15s ease);
}

.listora-qv-modal__close:hover {
	background: rgba(0, 0, 0, 0.65);
	transform: scale(1.08);
}

.listora-qv-modal__close:focus-visible {
	outline: 2px solid var(--listora-fg-inverse, var(--listora-bg-elevated));
	outline-offset: 2px;
}

/* Mobile handle (hidden on desktop) */

.listora-qv-modal__handle {
	display: none;
}

/* ════════════════════════════════════════════
   Loading Skeleton
════════════════════════════════════════════ */

.listora-qv-modal__loading {
	padding: 0;
}

.listora-qv-skeleton {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.listora-qv-skeleton__image {
	width: 100%;
	aspect-ratio: 16 / 10;
	background: linear-gradient(110deg, var(--listora-border-divider) 8%, var(--listora-border-default) 18%, var(--listora-border-divider) 33%);
	background-size: 200% 100%;
	animation: listora-qv-shimmer 1.5s ease-in-out infinite;
	border-radius: 0;
}

.listora-qv-skeleton__line {
	height: 14px;
	border-radius: 7px;
	background: linear-gradient(110deg, var(--listora-border-divider) 8%, var(--listora-border-default) 18%, var(--listora-border-divider) 33%);
	background-size: 200% 100%;
	animation: listora-qv-shimmer 1.5s ease-in-out infinite;
	margin-inline: 1rem;
}

.listora-qv-skeleton__line--short {
	width: 30%;
}

.listora-qv-skeleton__line--medium {
	width: 60%;
}

.listora-qv-skeleton__line--long {
	width: 80%;
}

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

/* ════════════════════════════════════════════
   Content Area
════════════════════════════════════════════ */

.listora-qv-modal__content {
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* ════════════════════════════════════════════
   Gallery
════════════════════════════════════════════ */

.listora-qv-gallery {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	background: var(--listora-surface, var(--listora-admin-bg-paper));
	overflow: hidden;
	flex-shrink: 0;
}

.listora-qv-gallery__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.2s ease;
}

/* Gallery navigation */

.listora-qv-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	/* Meet the 40px tap-target floor on touch surfaces (was 30px). */
	width: var(--listora-tap-target, 44px);
	height: var(--listora-tap-target, 44px);
	padding: 0;
	background: rgba(255, 255, 255, 0.9);
	border: none;
	border-radius: var(--listora-radius-full, 9999px);
	color: var(--listora-text, var(--listora-wp-admin-text-strong));
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	transition:
		background var(--listora-transition-fast, 0.15s ease),
		transform var(--listora-transition-fast, 0.15s ease);
}

.listora-qv-gallery__nav:hover {
	background: var(--listora-fg-inverse, var(--listora-bg-elevated));
	transform: translateY(-50%) scale(1.1);
}

.listora-qv-gallery__nav:focus-visible {
	outline: 2px solid var(--listora-primary, var(--listora-wp-admin-link));
	outline-offset: 2px;
}

.listora-qv-gallery__nav--prev {
	left: 0.5rem;
}

.listora-qv-gallery__nav--next {
	right: 0.5rem;
}

/* Gallery dots / indicator */

.listora-qv-gallery__dots {
	position: absolute;
	bottom: 0.5rem;
	left: 50%;
	transform: translateX(-50%);
	padding: 0.2rem 0.6rem;
	background: rgba(0, 0, 0, 0.5);
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	font-size: var(--listora-text-xs, 0.7rem);
	border-radius: var(--listora-radius-full, 9999px);
	pointer-events: none;
}

/* ════════════════════════════════════════════
   Info Section
════════════════════════════════════════════ */

.listora-qv-info {
	padding: 1rem 1.25rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.listora-qv-info__header {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.listora-qv-info__type {
	align-self: flex-start;
}

.listora-qv-info__title {
	margin: 0;
	font-size: var(--listora-text-lg, 1.15rem);
	font-weight: var(--listora-weight-bold, 700);
	color: var(--listora-text, var(--listora-wp-admin-text-strong));
	line-height: 1.3;
}

.listora-qv-info__rating {
	display: flex;
	align-items: center;
	gap: 0.3em;
	font-size: var(--listora-text-sm, 0.85rem);
	color: var(--listora-rating, var(--listora-rating));
	font-weight: var(--listora-weight-semibold, 600);
}

.listora-qv-info__rating .listora-rating__star {
	color: var(--listora-rating, var(--listora-rating));
}

/* Badges */

.listora-qv-info__badges {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
}

.listora-qv-info__badges .listora-badge--featured {
	background: var(--listora-rating, var(--listora-rating));
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	font-size: var(--listora-text-xs, 0.7rem);
	padding: 0.15em 0.55em;
	border-radius: var(--listora-radius-full, 9999px);
}

.listora-qv-info__badges .listora-badge--verified {
	background: var(--listora-info, var(--listora-info));
	color: var(--listora-fg-inverse, var(--listora-bg-elevated));
	font-size: var(--listora-text-xs, 0.7rem);
	padding: 0.15em 0.55em;
	border-radius: var(--listora-radius-full, 9999px);
}

/* Excerpt */

.listora-qv-info__excerpt {
	margin: 0;
	font-size: var(--listora-text-sm, 0.85rem);
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Divider */

.listora-qv-info__divider {
	border: none;
	border-top: 1px solid var(--listora-border-light, var(--listora-border-divider));
	margin: 0;
}

/* ════════════════════════════════════════════
   Meta Details
════════════════════════════════════════════ */

.listora-qv-meta {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.listora-qv-meta__item {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: var(--listora-text-sm, 0.85rem);
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
}

.listora-qv-meta__item svg {
	flex-shrink: 0;
	color: var(--listora-fg-faint, var(--listora-fg-faint));
}

.listora-qv-meta__item a {
	color: var(--listora-primary, var(--listora-wp-admin-link));
	text-decoration: none;
}

.listora-qv-meta__item a:hover {
	text-decoration: underline;
}

/* ════════════════════════════════════════════
   Action Buttons
════════════════════════════════════════════ */

.listora-qv-actions {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-block-start: 0.25rem;
}

.listora-qv-actions__view {
	/* Primary CTA owns the full first line; Directions + Favorite sit on a
	   compact secondary row beneath (clear action hierarchy). */
	flex: 1 1 100%;
	min-width: 0;
	text-align: center;
	text-decoration: none;
	font-size: var(--listora-text-sm, 0.85rem);
	font-weight: var(--listora-weight-semibold, 600);
}

.listora-qv-actions__directions {
	flex: 1 1 0;
}

.listora-qv-actions__directions {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	text-decoration: none;
	font-size: var(--listora-text-sm, 0.85rem);
}

.listora-qv-actions__favorite {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--listora-border, var(--listora-border-subtle));
	border-radius: var(--listora-radius-md, 8px);
	background: var(--listora-card-bg, var(--listora-bg-elevated));
	color: var(--listora-fg-faint, var(--listora-fg-faint));
	cursor: pointer;
	transition:
		color var(--listora-transition-fast, 0.15s ease),
		border-color var(--listora-transition-fast, 0.15s ease);
}

.listora-qv-actions__favorite:hover {
	color: var(--listora-danger, var(--listora-danger));
	border-color: var(--listora-danger, var(--listora-danger));
}

.listora-qv-actions__favorite.is-favorited {
	color: var(--listora-danger, var(--listora-danger));
	border-color: var(--listora-danger, var(--listora-danger));
}

.listora-qv-actions__favorite.is-favorited svg {
	fill: currentColor;
}

.listora-qv-actions__favorite:focus-visible {
	outline: 2px solid var(--listora-primary, var(--listora-wp-admin-link));
	outline-offset: 2px;
}

/* ════════════════════════════════════════════
   Quick View modal controls.
   Held by doubled-class specificity (no !important) so the popup looks
   identical on any theme — and because the modal renders at wp_footer
   (outside block wrappers), the doubled class is context-independent:
   one prominent primary CTA (View Full Details) plus a subtle neutral
   close + favorite.
   ════════════════════════════════════════════ */
.listora-qv-modal__close.listora-qv-modal__close {
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	border: none;
	border-radius: 9999px;
	box-shadow: none;
}
.listora-qv-modal__close.listora-qv-modal__close:hover {
	background: rgba(0, 0, 0, 0.7);
}
.listora-qv-actions__favorite.listora-qv-actions__favorite {
	background: var(--listora-card-bg, #fff);
	color: var(--listora-fg-faint, #6b7280);
	border: 1px solid var(--listora-border-subtle, rgba(0, 0, 0, 0.1));
	border-radius: var(--listora-radius-md, 8px);
	box-shadow: none;
}
.listora-qv-actions__favorite.listora-qv-actions__favorite.is-favorited,
.listora-qv-actions__favorite.listora-qv-actions__favorite:hover {
	color: var(--listora-danger, #dc2626);
	border-color: var(--listora-danger, #dc2626);
	background: var(--listora-card-bg, #fff);
}

/* ════════════════════════════════════════════
   Screen Reader Live Region
════════════════════════════════════════════ */

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

/* ════════════════════════════════════════════
   Hidden attribute support for data-wp-bind
════════════════════════════════════════════ */

.listora-qv-overlay [hidden] {
	display: none !important;
}

/* ════════════════════════════════════════════
   Mobile Bottom Sheet (<768px)
════════════════════════════════════════════ */

@media (max-width: 640px) {
	.listora-qv-overlay {
		align-items: flex-end;
		justify-content: stretch;
	}

	.listora-qv-modal {
		width: 100%;
		max-height: 92vh;
		border-radius: var(--listora-radius-lg, 14px) var(--listora-radius-lg, 14px) 0 0;
		transform: translateY(100%);
	}

	.listora-qv-overlay.is-open .listora-qv-modal {
		transform: translateY(0);
	}

	.listora-qv-modal__handle {
		display: flex;
		justify-content: center;
		padding: 0.5rem 0 0.25rem;
		flex-shrink: 0;
	}

	.listora-qv-modal__handle-bar {
		width: 36px;
		height: 4px;
		background: var(--listora-border, var(--listora-border-subtle));
		border-radius: 2px;
	}

	.listora-qv-modal__close {
		top: auto;
		bottom: 0.75rem;
		right: 0.75rem;
		background: var(--listora-card-bg, var(--listora-bg-elevated));
		border: 1px solid var(--listora-border, var(--listora-border-subtle));
		color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
		z-index: 10;
	}

	.listora-qv-modal__close:hover {
		background: var(--listora-surface, var(--listora-admin-bg-paper));
	}

	.listora-qv-gallery {
		aspect-ratio: 16 / 9;
	}

	.listora-qv-info {
		padding: 0.75rem 1rem 5rem;
	}

	.listora-qv-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 0.75rem 1rem;
		background: var(--listora-card-bg, var(--listora-bg-elevated));
		border-top: 1px solid var(--listora-border-light, var(--listora-border-divider));
		z-index: 10;
		flex-wrap: nowrap;
	}
}


/* ════════════════════════════════════════════
   Reduced Motion
════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.listora-qv-overlay,
	.listora-qv-modal,
	.listora-qv-gallery__image {
		transition: none;
	}

	.listora-qv-skeleton__image,
	.listora-qv-skeleton__line {
		animation: none;
	}
}