/* ============================================================
   Lethouse · Tema visual estilo Airbnb
   Capa de tema cargada después de main.css: redondeos generosos,
   sombras suaves, tarjetas limpias imagen-primero y formularios
   redondeados. Mantiene la marca Lethouse (negro + verde).
   ============================================================ */

:root {
	--ab-text: #222222;
	--ab-muted: #717171;
	--ab-border: #dddddd;
	--ab-border-input: #b0b0b0;
	--ab-radius: 12px;
	--ab-radius-sm: 8px;
	--ab-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
	--ab-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ---------- Tarjetas de listado (imagen primero, sin chrome) ---------- */

.ab-card-col {
	margin-bottom: 36px;
}

.ab-card {
	display: block;
	color: var(--ab-text);
	text-decoration: none;
}

.ab-card:hover,
.ab-card:focus {
	color: var(--ab-text);
	text-decoration: none;
}

.ab-card-media {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--ab-radius);
	overflow: hidden;
	background: #f0f0f0;
}

.ab-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.ab-card:hover .ab-card-media img {
	transform: scale(1.04);
}

.ab-card-chip {
	position: absolute;
	top: 12px;
	left: 12px;
	background: #ffffff;
	color: var(--ab-text);
	border-radius: 999px;
	padding: 5px 12px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.ab-card-chip.is-off {
	color: #c13515;
}

.ab-card-body {
	padding: 12px 2px 0;
	text-align: left;
}

.ab-card-title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ab-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ab-card-sub {
	margin: 3px 0 0;
	font-size: 14px;
	color: var(--ab-muted);
	line-height: 1.45;
}

.ab-card-price {
	margin: 8px 0 0;
	font-size: 15px;
	color: var(--ab-text);
}

.ab-card-price strong {
	font-weight: 600;
}

.ab-card-price span {
	font-weight: 400;
	color: var(--ab-text);
}

.ab-card-price .ab-dot {
	color: var(--ab-muted);
	margin: 0 2px;
}

/* ---------- Chips de filtros (listado) ---------- */

.ab-chips {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 4px 2px 18px;
	margin-bottom: 10px;
}

.ab-chips::-webkit-scrollbar {
	display: none;
}

.ab-chip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	padding: 9px 16px;
	border: 1px solid var(--ab-border);
	border-radius: 999px;
	background: #fff;
	color: var(--ab-text);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.ab-chip:hover,
.ab-chip:focus {
	border-color: var(--ab-text);
	color: var(--ab-text);
	text-decoration: none;
}

.ab-chip.is-active {
	background: var(--ab-text);
	border-color: var(--ab-text);
	color: #fff;
}

.ab-chips-divider {
	flex: 0 0 auto;
	width: 1px;
	height: 24px;
	background: var(--ab-border);
	margin: 0 4px;
}

/* ---------- Botones ---------- */

.st-btn,
.st-btn.primary-btn {
	border-radius: var(--ab-radius-sm);
	font-weight: 600;
	transition: transform 0.1s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.st-btn.primary-btn:hover {
	box-shadow: var(--ab-shadow-soft);
}

.st-btn.primary-btn:active {
	transform: scale(0.98);
}

.lh-primary-action,
.lh-secondary-action {
	border-radius: var(--ab-radius-sm);
}

/* ---------- Formularios ---------- */

.form-control {
	border-radius: var(--ab-radius-sm);
	border: 1px solid var(--ab-border-input);
	padding: 12px 14px;
	height: auto;
	font-size: 15px;
	color: var(--ab-text);
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus {
	border-color: var(--ab-text);
	box-shadow: 0 0 0 1px var(--ab-text);
	outline: none;
}

.form-group label {
	font-size: 14px;
	font-weight: 600;
	color: var(--ab-text);
}

/* ---------- Tablas simples (perfil, reservas) ---------- */

.table {
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--ab-border);
	border-radius: var(--ab-radius);
	overflow: hidden;
}

.table th {
	background: #f7f7f7;
	color: var(--ab-text);
	font-weight: 600;
	border-bottom: 1px solid var(--ab-border);
}

.table td {
	color: var(--ab-text);
	border-top: 1px solid #ececec;
}

/* ---------- Flash messages ---------- */

.alert {
	border-radius: var(--ab-radius);
	border: 1px solid var(--ab-border);
	box-shadow: var(--ab-shadow-soft);
}

/* ---------- Navbar: sombra sutil al estilo Airbnb ---------- */

.lh-site-header {
	border-bottom: 1px solid #ebebeb;
	box-shadow: none;
}

.lh-menu-pill:hover {
	box-shadow: var(--ab-shadow);
}

/* ---------- Página de propiedad ---------- */

.lh-payment-dialog,
.lh-card-assurance {
	border-radius: var(--ab-radius);
}

/* ---------- Reseñas (ficha de propiedad) ---------- */

.ab-rating {
	color: var(--ab-text);
	font-weight: 500;
}

.ab-rating .fa-star {
	font-size: 12px;
}

.ab-rating a {
	color: var(--ab-text);
	text-decoration: underline;
}

.ab-reviews {
	padding: 48px 0;
	border-top: 1px solid #ebebeb;
}

.ab-reviews-title {
	font-size: 22px;
	font-weight: 600;
	color: var(--ab-text);
	margin: 0 0 28px;
}

.ab-reviews-title .fa-star {
	font-size: 18px;
}

.ab-reviews-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 32px 48px;
}

.ab-review header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}

.ab-review-avatar {
	width: 48px;
	height: 48px;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--ab-text);
	color: #fff;
	font-size: 18px;
	font-weight: 600;
}

.ab-review header strong {
	display: block;
	color: var(--ab-text);
	font-size: 15px;
}

.ab-review header small {
	color: var(--ab-muted);
	font-size: 13px;
	text-transform: capitalize;
}

.ab-review-stars {
	margin: 0 0 6px;
	font-size: 13px;
	letter-spacing: 2px;
	color: var(--ab-text);
}

.ab-review-text {
	margin: 0;
	color: var(--ab-text);
	font-size: 15px;
	line-height: 1.5;
}

/* Fallback para navegadores sin aspect-ratio */
@supports not (aspect-ratio: 4 / 3) {
	.ab-card-media {
		height: 240px;
	}
}

/* ── Buscador píldora del listado de ciudad ───────────────────── */
.lh-lista-search {
	max-width: 920px;
	margin: 6px auto 8px;
}

.lh-lista-search label {
	min-height: 66px;
	padding: 0 26px;
}

.lh-lista-search select {
	cursor: pointer;
}

@media (max-width: 767px) {
	.lh-lista-search {
		margin-bottom: 4px;
	}
}