/* Storage Units Detector — front-end cards (clean & premium) */

.sud-facility {
	/* Brand */
	--sud-blue: #1f5fbf;
	--sud-blue-deep: #16458c;
	--sud-yellow: #f5c518;
	--sud-ink: #14171c;
	--sud-muted: #69707a;
	--sud-faint: #9aa1ab;
	--sud-line: #ecedf0;
	--sud-card-bg: #ffffff;
	--sud-radius: 18px;
	--sud-radius-sm: 11px;
	--sud-shadow: 0 1px 2px rgba(20, 23, 28, 0.04), 0 8px 24px rgba(20, 23, 28, 0.06);
	--sud-shadow-hover: 0 2px 4px rgba(20, 23, 28, 0.05), 0 18px 48px rgba(31, 95, 191, 0.14);

	max-width: 1040px;
	color: var(--sud-ink);
	-webkit-font-smoothing: antialiased;
}

.sud-facility-image {
	max-width: 100%;
	height: auto;
	border-radius: var(--sud-radius);
	margin-bottom: 1.25rem;
}

.sud-facility-name {
	display: none;
}

.sud-facility-address,
.sud-facility-phone {
	margin: 0.1rem 0;
	color: var(--sud-muted);
	font-size: 0.95rem;
}

/* ---------- Filter tabs ---------- */
.sud-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.5rem 0 1.4rem;
}

.sud-filter {
	appearance: none;
	border: 1px solid var(--sud-line);
	background: #fff;
	border-radius: 999px;
	padding: 0.5rem 1.15rem;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	color: var(--sud-muted);
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.sud-filter:hover {
	border-color: var(--sud-blue);
	color: var(--sud-blue);
}

.sud-filter.is-active {
	background: var(--sud-blue);
	border-color: var(--sud-blue);
	color: #fff;
	box-shadow: 0 6px 16px rgba(31, 95, 191, 0.26);
}

.sud-filter:focus-visible {
	outline: 2px solid var(--sud-blue);
	outline-offset: 2px;
}

/* ---------- Card grid ---------- */
.sud-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
	gap: 1.25rem;
	margin-bottom: 20px;
}

.sud-card {
	position: relative;
	background: var(--sud-card-bg);
	border: 1px solid var(--sud-line);
	border-radius: var(--sud-radius);
	padding: 1.5rem 1.5rem 1.4rem;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	box-shadow: var(--sud-shadow);
	transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}

.sud-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--sud-shadow-hover);
	border-color: transparent;
}

.sud-card[hidden] {
	display: none;
}

/* Head: name + availability */
.sud-card-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.6rem;
}

.sud-card-name {
	margin: 0;
	font-size: 16px;
	font-weight: 650;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.sud-card-avail {
	flex-shrink: 0;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
	padding: 0.28rem 0.6rem;
	border-radius: 999px;
	background: #f1f3f6;
	color: var(--sud-muted);
}

/* Low stock gets the brand yellow as an urgency cue */
.sud-card-avail.is-low {
	background: #fef6d6;
	color: #8a6d00;
	box-shadow: inset 0 0 0 1px rgba(245, 197, 24, 0.5);
}

.sud-card-avail.is-soldout {
	background: #fdecec;
	color: #9b1c1c;
}

/* ---------- Price (the hero) ---------- */
.sud-card-price {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin-top: 0.1rem;
}

.sud-card-now-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.55rem;
}

.sud-card-now {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--sud-ink);
}

.sud-card-was {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--sud-faint);
	text-decoration: line-through;
	text-decoration-thickness: 1.5px;
	order: -1;
}

.sud-card-rate-label {
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sud-blue-deep);
	background: #e8f0fc;
	padding: 0.26rem 0.5rem;
	border-radius: 6px;
}

.sud-card-price--callfor {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--sud-muted);
}

/* ---------- Details (quiet link — resists theme button styling) ---------- */
.sud-facility .sud-card-toggle {
	appearance: none;
	-webkit-appearance: none;
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: -0.1rem 0 0 !important;
	width: auto !important;
	min-height: 0 !important;
	color: var(--sud-blue) !important;
	font-size: 0.82rem !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.02em;
	text-transform: none !important;
	cursor: pointer;
	text-align: left;
	align-self: flex-start;
	border-radius: 0 !important;
	transition: color 0.15s ease;
}

.sud-facility .sud-card-toggle:hover,
.sud-facility .sud-card-toggle:focus {
	background: none !important;
	background-color: transparent !important;
	color: var(--sud-blue-deep) !important;
	box-shadow: none !important;
}

.sud-facility .sud-card-toggle::after {
	content: "";
	display: inline-block;
	width: 0.4em;
	height: 0.4em;
	margin-left: 0.4em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
}

.sud-facility .sud-card-toggle[aria-expanded="true"]::after {
	transform: translateY(1px) rotate(-135deg);
}

/* ---------- Details panel (the expanding box) ---------- */
.sud-card-details {
	margin-top: 0.1rem;
	padding: 0.85rem 1rem;
	background: #f6f8fb;
	border: 1px solid var(--sud-line);
	border-radius: var(--sud-radius-sm);
	color: var(--sud-muted);
	font-size: 0.88rem;
	line-height: 1.55;
	animation: sud-fade 0.22s ease;
}

.sud-card-details p {
	margin: 0;
}

@keyframes sud-fade {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Actions ---------- */
.sud-card-reserve {
	margin-top: auto;
	display: block;
	text-align: center;
	background: var(--sud-blue);
	color: #fff;
	padding: 0.8rem 1rem;
	border-radius: var(--sud-radius-sm);
	text-decoration: none;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	box-shadow: 0 6px 16px rgba(31, 95, 191, 0.22);
	transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.sud-card-reserve:hover,
.sud-card-reserve:focus {
	background: var(--sud-blue-deep);
	color: #fff;
	box-shadow: 0 10px 24px rgba(31, 95, 191, 0.32);
}

.sud-card-reserve:active {
	transform: translateY(1px);
}

.sud-card-reserve--contact {
	background: #fff;
	color: var(--sud-blue);
	border: 1.5px solid var(--sud-line);
	box-shadow: none;
}

.sud-card-reserve--contact:hover,
.sud-card-reserve--contact:focus {
	background: #fff;
	color: var(--sud-blue-deep);
	border-color: var(--sud-blue);
	box-shadow: 0 8px 20px rgba(31, 95, 191, 0.12);
}

/* ---------- Facility-level book button ---------- */
.sud-facility-book {
	margin-top: 1.6rem;
}

.sud-book-button {
	display: inline-block;
	background: var(--sud-yellow);
	color: var(--sud-ink);
	padding: 0.85rem 1.7rem;
	border-radius: var(--sud-radius-sm);
	text-decoration: none;
	font-weight: 700;
	box-shadow: 0 6px 16px rgba(245, 197, 24, 0.35);
	transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.sud-book-button:hover,
.sud-book-button:focus {
	color: var(--sud-ink);
	filter: brightness(1.03);
	box-shadow: 0 10px 24px rgba(245, 197, 24, 0.45);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.sud-card,
	.sud-filter,
	.sud-card-reserve,
	.sud-book-button,
	.sud-card-toggle::after {
		transition: none;
	}
	.sud-card:hover,
	.sud-book-button:hover {
		transform: none;
	}
	.sud-card-details {
		animation: none;
	}
}