/* ─── 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 {
	container: services / inline-size;
}

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

/* Service photo cell: a 48px box; with no photo it shows an image icon, not a dash. */
.wb-listora-services-metabox__photo-preview {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--listora-border, var(--listora-wp-admin-border));
	border-radius: 4px;
	overflow: hidden;
	background: var(--listora-bg-muted, var(--listora-admin-bg-subtle));
}

.wb-listora-services-metabox__photo-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wb-listora-services-metabox__photo-empty {
	width: 24px;
	height: 24px;
	font-size: 24px;
	color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
}

.wb-listora-services-metabox__choose {
	margin-top: 4px;
	width: 100%;
}

.wb-listora-services-metabox__remove {
	margin-top: 2px;
	font-size: 11px;
}

.wb-listora-services-metabox__remove[hidden] {
	display: none;
}

/* Each service is its own block: a rule between rows, room around the fields, and a
 * gap between the title and its description (they sat touching). */
.wb-listora-services-metabox__table td {
	padding-block: 14px;
	vertical-align: top;
}

.wb-listora-services-metabox__row + .wb-listora-services-metabox__row td {
	border-top: 1px solid var(--listora-border-subtle, var(--listora-wp-admin-border));
}

.wb-listora-services-metabox__row td textarea {
	margin-top: 8px;
}

/* ────────────────────────────────────────────────────────────────────────
 * 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;
	}

}

/* ─── Services rows on a phone ─────────────────────────────────────────────
 *
 * Eight columns need ~1200px of metabox: below that (a phone, or the block
 * editor with its sidebar open) each row becomes a labelled card instead of a
 * table whose inputs are cut off. The query is on the metabox's own width,
 * not the viewport, because the editor column is narrower than the screen. Cells carry
 * data-label (the column heading); inline widths are the desktop layout.
 * ──────────────────────────────────────────────────────────────────────── */
@container services (max-width: 1199px) {

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

	.wb-listora-services-metabox table,
	.wb-listora-services-metabox tbody,
	.wb-listora-services-metabox tr,
	.wb-listora-services-metabox td {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
	}

	.wb-listora-services-metabox thead {
		display: none;
	}

	.wb-listora-services-metabox__row {
		padding: var(--listora-space-3, 12px) 0;
	}

	.wb-listora-services-metabox__row td {
		padding: var(--listora-space-1, 4px) var(--listora-space-3, 12px);
	}

	.wb-listora-services-metabox__row td::before {
		content: attr(data-label);
		display: block;
		margin-block-end: 2px;
		font-weight: 600;
		color: var(--listora-fg-muted, var(--listora-wp-admin-text-muted));
	}

	.wb-listora-services-metabox__row td input[type="text"],
	.wb-listora-services-metabox__row td input[type="number"],
	.wb-listora-services-metabox__row td select,
	.wb-listora-services-metabox__row td textarea {
		width: 100%;
		max-width: 100%;
		min-height: 40px;
	}

	/* A stacked price or select does not need the whole card width. */
	.wb-listora-services-metabox__row td input[type="number"],
	.wb-listora-services-metabox__row td select {
		max-width: 24rem;
	}

	.wb-listora-services-metabox__choose {
		width: auto;
	}
}

/* Controls keep room for their own padding and spinner: a price such as 1999.99
   and the longest Type and Status labels stay fully visible. */
.wb-listora-services-metabox__scroll input[type="number"] {
	min-width: calc(9ch + 3.5em);
}

.wb-listora-services-metabox__scroll select {
	min-width: 8em;
}