/**
 * KAT "Photo Frame" betabox — shared styles for the compact multi-photo
 * slider rendered by kat_render_photo_frame() (includes/kat-helpers.php).
 * Used inside .kat-card__media ([kat_listings]) and .kat-smart-menu__media
 * ([kat_smart_menu]) — both are already `position:relative` with a fixed
 * 4/3 aspect-ratio, which is what lets this frame use `inset:0` to fill
 * them exactly. Mirrors the companion Angkor Kitchen theme's
 * .ak-photo-frame (style.css §5b) so the UberEats/TripAdvisor-style
 * swipeable gallery looks identical whether it's rendered by the theme or
 * the plugin.
 */
.kat-photo-frame {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
}
.kat-photo-frame__track {
	display: flex;
	height: 100%;
	width: 100%;
	transition: transform .35s ease;
}
.kat-photo-frame__track img {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.kat-photo-frame__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(20,20,20,.5);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	transition: opacity .2s ease, background .2s ease;
	z-index: 2;
}
.kat-card:hover .kat-photo-frame__arrow,
.kat-smart-menu__card:hover .kat-photo-frame__arrow {
	opacity: 1;
}
.kat-photo-frame__arrow:hover {
	background: var(--kat-accent, var(--kat-sm-accent, #e7b24c));
}
.kat-photo-frame__arrow--prev { left: 8px; }
.kat-photo-frame__arrow--next { right: 8px; }
.kat-photo-frame__arrow svg { width: 15px; height: 15px; }
.kat-photo-frame__dots {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 5px;
	z-index: 2;
}
.kat-photo-frame__dot {
	width: 6px;
	height: 6px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255,255,255,.55);
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}
.kat-photo-frame__dot.is-active {
	background: #fff;
	transform: scale(1.3);
}
.kat-photo-frame__count {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	background: rgba(20,20,20,.55);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 999px;
}
/* Touch devices have no :hover — keep the arrows visible (dimmer) so
   they're still discoverable/tappable without a hover state. */
@media (hover: none) {
	.kat-photo-frame__arrow {
		opacity: 1;
		background: rgba(20,20,20,.35);
	}
}