/* Stacking plan grid — shared by the admin "Stacking Plan" screen, the
 * [samtastic_stacking_plan] shortcode, and the auto-appended front-page
 * block.
 *
 * Wei Yun: "looks like the stacking plan is looking too messy and ugly.
 * Can you do something to make it looks nice and glassy feel?" Reworked
 * around a light "frosted glass" treatment — translucent, blurred cards
 * on a soft colour wash, rounded corners throughout, gentle shadows
 * instead of hard 1px borders everywhere, and a bit of hover motion on
 * the units themselves. Every class name and the HTML structure behind
 * it are unchanged, so this is a visual-only update: nothing in
 * includes/stacking-plan.php or the JS needed to change for it.
 */

.samtastic-stacking-plan {
	--samtastic-glass-radius: 16px;
	--samtastic-glass-radius-sm: 9px;
	--samtastic-glass-shadow: 0 10px 28px rgba(15, 23, 42, .08), 0 2px 6px rgba(15, 23, 42, .05);
	margin: 1.5em 0;
	padding: 1.25em;
	border-radius: var(--samtastic-glass-radius);
	background: linear-gradient(135deg, rgba(96, 165, 250, .14), rgba(167, 139, 250, .12) 45%, rgba(244, 114, 182, .10));
	border: 1px solid rgba(255, 255, 255, .5);
	box-shadow: var(--samtastic-glass-shadow);
}

/* "can you show the legend of the bedroom types based on the colour
 * coding?" -- one frosted pill-shaped strip above the blocks, shared by
 * the whole plan since unit types are per launch, not per block. */
.samtastic-stacking-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .45em 1.1em;
	margin-bottom: 1.1em;
	padding: .55em .95em;
	border-radius: 999px;
	background: rgba(255, 255, 255, .6);
	backdrop-filter: blur(10px) saturate(160%);
	-webkit-backdrop-filter: blur(10px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, .7);
	box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
	font-size: 12.5px;
	color: #334155;
}
.samtastic-stacking-legend-item {
	display: inline-flex;
	align-items: center;
	gap: .4em;
}
.samtastic-stacking-legend-swatch {
	display: inline-block;
	width: 13px;
	height: 13px;
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .25), inset 0 1px 0 rgba(255, 255, 255, .5);
}
/* Same red as .samtastic-stacking-unit.is-sold, so "Sold" in the legend
 * actually matches what a sold cell looks like in the grid. */
.samtastic-stacking-legend-sold .samtastic-stacking-legend-swatch {
	background: linear-gradient(135deg, #f87171, #b91c1c);
}

.samtastic-stacking-block {
	margin-bottom: 1.5em;
	padding: 1.1em 1.1em 1.35em;
	border-radius: var(--samtastic-glass-radius);
	background: rgba(255, 255, 255, .58);
	backdrop-filter: blur(14px) saturate(180%);
	-webkit-backdrop-filter: blur(14px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, .65);
	box-shadow: var(--samtastic-glass-shadow);
	overflow-x: auto;
}
.samtastic-stacking-plan .samtastic-stacking-block:last-child {
	margin-bottom: 0;
}
.samtastic-stacking-block-name {
	display: flex;
	align-items: center;
	gap: .55em;
	margin: 0 0 .85em;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .01em;
	color: #1e293b;
}
.samtastic-stacking-block-name::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 1.15em;
	border-radius: 2px;
	background: linear-gradient(180deg, #60a5fa, #a78bfa);
	flex-shrink: 0;
}

/* Separated (not collapsed) borders with spacing between cells, so each
 * unit reads as its own soft rounded tile rather than one dense grid of
 * hairline borders -- the main source of the "messy" look before. */
.samtastic-stacking-table {
	border-collapse: separate;
	border-spacing: 5px;
}
.samtastic-stacking-table td,
.samtastic-stacking-table th {
	border: 0;
	text-align: center;
	padding: 0;
}
.samtastic-stacking-floor {
	padding: 0 12px;
	font-weight: 600;
	font-size: 12px;
	color: #334155;
	background: rgba(255, 255, 255, .7);
	border-radius: var(--samtastic-glass-radius-sm);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8);
	white-space: nowrap;
}
.samtastic-stacking-unit {
	width: 44px;
	height: 34px;
	border-radius: var(--samtastic-glass-radius-sm);
	cursor: pointer;
	font-size: 11px;
	color: #1a1a1a;
	position: relative;
	box-shadow: 0 1px 3px rgba(15, 23, 42, .16), inset 0 1px 0 rgba(255, 255, 255, .55);
	transition: transform .15s ease, box-shadow .15s ease;
}
/* A subtle glossy sheen across the top of every unit -- the "glassy
 * feel" carried down to the smallest element in the grid. */
.samtastic-stacking-unit::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 55%);
	pointer-events: none;
}
.samtastic-stacking-unit:hover {
	outline: 0;
	transform: translateY(-2px) scale(1.05);
	box-shadow: 0 8px 16px rgba(15, 23, 42, .2), inset 0 1px 0 rgba(255, 255, 255, .6);
	z-index: 2;
}
/* Wei Yun: "can you set units that are mark as sold in Red?" -- overrides
 * whatever unit-type colour is set inline on the cell (background-color is
 * the first thing printed in its style attribute, so this needs
 * !important to win). Full opacity so the red reads clearly, rather than
 * washing out as it did under the old dimmed/greyed-out treatment. */
.samtastic-stacking-unit.is-sold {
	background: linear-gradient(135deg, #f87171, #b91c1c) !important;
	opacity: 1;
	box-shadow: 0 2px 8px rgba(185, 28, 28, .4), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.samtastic-stacking-unit.is-sold::after {
	content: "SOLD";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .04em;
	background: rgba(0, 0, 0, .2);
	color: #fff;
}

/* A position with no unit at all (a lift lobby, a void) -- deliberately
 * not clickable and visually distinct from a real (even sold) unit. */
.samtastic-stacking-empty {
	width: 44px;
	height: 34px;
	border-radius: var(--samtastic-glass-radius-sm);
	cursor: default;
	font-size: 12px;
	color: #94a3b8;
	background: repeating-linear-gradient(45deg, rgba(148, 163, 184, .12), rgba(148, 163, 184, .12) 5px, rgba(148, 163, 184, .22) 5px, rgba(148, 163, 184, .22) 10px);
	box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .3);
}

.samtastic-stacking-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, .72);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
}
.samtastic-stacking-overlay-box {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.samtastic-stacking-overlay-box img {
	max-width: 90vw;
	max-height: 90vh;
	display: block;
}
.samtastic-stacking-overlay-close {
	position: absolute;
	top: -36px;
	right: 0;
	background: #fff;
	border: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

.samtastic-stacking-error {
	color: #9f1c1f;
	font-size: 12px;
	margin: .35em 0 .75em;
	padding: .45em .7em;
	border-radius: var(--samtastic-glass-radius-sm);
	background: rgba(239, 68, 68, .1);
	border: 1px solid rgba(239, 68, 68, .25);
}

/* Brief, subtle dimming while the "Mark units sold" grid is redrawing
 * itself from the textarea above -- never hides the grid outright, since
 * that would make a fast retype flicker distractingly. */
#samtastic-stacking-grid-preview.is-refreshing {
	opacity: .55;
	transition: opacity .15s ease;
}

#samtastic-unit-types-table {
	border-radius: 10px;
	overflow: hidden;
}
#samtastic-unit-types-table td {
	padding: 6px;
}
.samtastic-stacking-textarea {
	font-family: Consolas, Monaco, monospace;
}

/* Colour swatch + hex box + copy button, side by side in one cell -- see
 * "can you also allow to clone the colour code as it is tedious to
 * manually key in the RGB." */
.samtastic-color-cell {
	white-space: nowrap;
}
.samtastic-color-cell .samtastic-color-swatch {
	vertical-align: middle;
	width: 32px;
	height: 28px;
	padding: 1px;
	border-radius: 6px;
}
.samtastic-color-cell .samtastic-color-hex {
	vertical-align: middle;
	width: 5.5em;
	font-family: Consolas, Monaco, monospace;
	text-transform: uppercase;
}
.samtastic-color-cell .samtastic-color-copy {
	vertical-align: middle;
	margin-left: 2px;
	font-size: 14px;
}