@media (max-width: 600px) {
}

/* ─── Services metabox on a phone ─────────────────────────────────────────
 *
 * The metabox renders a seven-column table with fixed percentage widths: at
 * 390px that is an ~842px table inside ~327px of usable content, so title and
 * description were cut off and editing price/type/duration/status meant
 * panning the whole Gutenberg metabox region sideways. The body itself never
 * reported overflow, which is why it was easy to miss (BC 10208314925).
 *
 * The table scrolls inside ITS OWN container rather than dragging the editor
 * with it, and the fade on the trailing edge is the cue that there is more —
 * the original had no affordance at all, so the offscreen columns simply
 * looked absent.
 *
 * A min-width keeps the columns legible instead of letting seven of them
 * crush into 327px, which is the other way this "fits" while being unusable.
 * ──────────────────────────────────────────────────────────────────────── */
.wb-listora-services-metabox__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.wb-listora-services-metabox__scroll > table {
	min-width: 720px;
}

@media (max-width: 782px) {

	.wb-listora-services-metabox__scroll {
		/* Trailing-edge fade: the affordance that says "keep going". Uses a
		   logical direction so it follows the writing mode. */
		--listora-svc-fade-dir: to right;
		mask-image: linear-gradient(var(--listora-svc-fade-dir), #000 92%, transparent 100%);
	}

	[dir="rtl"] .wb-listora-services-metabox__scroll {
		--listora-svc-fade-dir: to left;
	}
}

/* ────────────────────────────────────────────────────────────────────────
 * Gallery field (wp-admin).
 *
 * The submission wizard's gallery is Interactivity-API driven and wp-admin
 * never loads that store, so this screen renders its own markup and drives it
 * with wp.media instead (BC 10272654379). Styles stay local to the meta box
 * rather than reaching for the frontend gallery's classes, which carry
 * submission-step layout this screen does not want.
 * ──────────────────────────────────────────────────────────────────────── */
.listora-admin-gallery__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-end: 8px;
}

.listora-admin-gallery__thumbs:empty {
	margin-block-end: 0;
}

.listora-admin-gallery__thumb {
	position: relative;
	inline-size: 80px;
	block-size: 80px;
	border: 1px solid var(--listora-border-default);
	border-radius: var(--listora-radius-sm);
	overflow: hidden;
}

.listora-admin-gallery__thumb img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

/* Logical inset so the control follows the writing mode in RTL. */
.listora-admin-gallery__remove {
	position: absolute;
	inset-block-start: 2px;
	inset-inline-end: 2px;
	inline-size: 20px;
	block-size: 20px;
	padding: 0;
	line-height: 1;
	color: var(--listora-fg-inverse);
	background: rgba(0, 0, 0, 0.6);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.listora-admin-gallery__remove:hover,
.listora-admin-gallery__remove:focus-visible {
	background: var(--listora-danger);
}

@media (max-width: 640px) {

	.listora-admin-gallery__thumb {
		inline-size: 64px;
		block-size: 64px;
	}

	/* Touch target: the 20px badge is fine under a mouse, not under a thumb. */
	.listora-admin-gallery__remove {
		inline-size: 28px;
		block-size: 28px;
	}
}

/* ─── Features & Amenities grid ────────────────────────────────────────────
 *
 * The curated checkbox list members pick from, replacing the core token box
 * that let an admin type new features into existence (BC 10272654379). Auto-
 * fill columns keep long names readable; one column on a phone.
 * ──────────────────────────────────────────────────────────────────────── */
.listora-admin-features {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--listora-space-2) var(--listora-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.listora-admin-features__item {
	display: flex;
	align-items: center;
	gap: var(--listora-space-2);
	min-height: 28px;
}

.listora-admin-features__item input {
	margin: 0;
}

@media (max-width: 600px) {
	.listora-admin-features {
		grid-template-columns: 1fr;
	}

	.listora-admin-features__item {
		min-height: 40px;
	}
}