/* Plots popover within property-item cards */

.plots-popover {
	display: none;
	padding-top: 1.5rem;
}

.plots-popover.is-open {
	display: block;
}

.plots-popover-inner {
	position: relative;
}

.plots-popover-close {
	display: none;
}

/* Chevron icon on toggle button */
.btn-toggle-plots .chevron-icon {
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.25s ease;
	margin-left: 0.4em;
	vertical-align: middle;
	position: relative;
	top: -0.1em;
}

.btn-toggle-plots.is-active .chevron-icon {
	transform: rotate(-135deg);
	top: 0.1em;
}

/* Popover header */
.plots-popover-header {
	display: none;
}

/* Hide sort icons inside popover */
.plots-popover .sort-icon {
	display: none;
}

/* Remove sortable cursor inside popover */
.plots-popover .sortable {
	cursor: default;
	pointer-events: none;
}

/* Mobile: expandible inline debajo del card */
@media (max-width: 991px) {
	.plots-popover {
		border-top: 1px solid var(--lightgray);
		margin-top: 1rem;
	}
}

/* Desktop: popover flotante */
@media (min-width: 992px) {
	.plots-popover {
		position: absolute;
		bottom: 100%;
		left: 0;
		right: 0;
		z-index: 1000;
		padding: 0;
		margin-bottom: 0;
	}

	.plots-popover-inner {
		background: var(--white);
		border: 1px solid var(--lightgray);
		border-radius: 0;
		padding: 2rem 1rem;
		aspect-ratio: 16/9.2;
		overflow-y: auto;
	}

	/* Hide chevron on desktop */
	.btn-toggle-plots .chevron-icon {
		display: none;
	}

	/* Popover header with title + close */
	.plots-popover-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 0.75rem;
	}

	.plots-popover-title {
		margin: 0 0 0rem;
		font-size: 1.7rem;
		font-weight: 600;
		color: var(--primary);
	}

	.plots-popover-close {
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		background: none;
		color: var(--primary);
		cursor: pointer;
		padding: 0;
		line-height: 1;
		flex-shrink: 0;
	}

	.plots-popover-close:hover {
		opacity: 0.6;
	}

	/* Force mobile-style table in desktop popover:
	   icons instead of text, hide model/baths columns */
	.plots-popover .apartments-table-container .plots-table {
		border: 1px solid #ededed;
		border-collapse: collapse;
		margin-top: 2rem;
	}

	.plots-popover .apartments-table-container .plots-table th,
	.plots-popover .apartments-table-container .plots-table td {
		border-collapse: collapse;
		border: 1px solid #e9ecef;
		text-align: center;
	}

	.plots-popover .apartments-table-container .plots-table thead th.model-col,
	.plots-popover .apartments-table-container .plots-table thead th.baths-col,
	.plots-popover .apartments-table-container .plots-table tbody td.model-col,
	.plots-popover .apartments-table-container .plots-table tbody td.baths-col {
		display: none;
	}

	.plots-popover .apartments-table-container .plots-table thead th .th-label-text {
		display: none;
	}

	.plots-popover .apartments-table-container .plots-table thead th .th-label-icon {
		display: inline-flex;
		align-items: flex-end;
		justify-content: flex-end;
		gap: 0.3rem;
		font-size: 0.2rem;
	}

	.plots-popover .apartments-table-container .plots-table thead th.sortable {
		align-items: center;
		gap: 0.5rem;
		min-width: 0;
		padding-inline: 0.1rem;
		padding-block: 0.6rem;
		width: 50px;
	}

	.plots-popover .apartments-table-container .plots-table thead th .th-label-icon path {
		fill: #fff;
	}

	.plots-popover .apartments-table-container .plots-table thead th .th-label-icon svg {
		width: 1.25rem;
		flex-shrink: 0;
		max-width: 1.2rem;
		max-height: 1.2rem;
	}

	.plots-popover .apartments-table-container .plots-table thead th .th-label-icon small {
		font-size: 0.6rem;
		text-transform: none;
	}

	.plots-popover .apartments-table-container .plots-table thead th .th-label-icon.th-bedrooms-icon svg {
		width: 1.6rem;
		max-width: none;
		max-height: 1.4rem;
	}

	.plots-popover .apartments-table-container .plots-table thead th.price-col.sticky-col,
	.plots-popover .apartments-table-container .plots-table tbody td.price-col.sticky-col {
		position: sticky;
		right: 0;
		z-index: 2;
		box-shadow: -0.025rem 0 0.25rem rgba(0, 0, 0, 0.08);
	}

	.plots-popover .apartments-table-container .plots-table thead th.price-col.sticky-col {
		background-color: var(--primary);
		padding-inline: 0;
		min-width: 0;
	}

	.plots-popover .apartments-table-container .plots-table tbody td.price-col.sticky-col {
		background-color: var(--white);
		z-index: 1;
		min-width: 0;
		padding-inline: 0.2rem;
	}

	.plots-popover .apartments-table-container .plots-table tbody tr.apartment-row.unavailable td.price-col.sticky-col {
		background-color: #f8f8f8;
	}
}

/* Backdrop overlay for desktop */
.plots-popover-backdrop {
	display: none;
}

@media (min-width: 992px) {
	.plots-popover-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: 1000;
	}
}

/* Button active state */
.btn-toggle-plots.is-active {
	background-color: var(--primary);
	color: var(--white);
}