/**
 * Cloudbeds Immersive / Date Picker — capa Kenkatsu en WordPress.
 */

/* —— Date Picker flotante: justo bajo el header, píldora compacta —— */
.kenkatsu-cloudbeds-bar {
	position: fixed;
	left: 50%;
	right: auto;
	top: calc(var(--kenkatsu-header-offset, 88px) + var(--kenkatsu-cb-gap, 6px));
	transform: translateX(-50%);
	z-index: 999990;
	width: min(780px, calc(100vw - 1.5rem));
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
	pointer-events: none;
	transition: top 0.3s ease-in-out, opacity 0.35s ease;
	opacity: 1;
}

.kenkatsu-cloudbeds-bar.is-ready,
.kenkatsu-cloudbeds-bar.kenkatsu-cloudbeds-bar--fallback {
	opacity: 1;
	pointer-events: none;
}

/* Skeleton mientras se difiere Immersive (PageSpeed LCP). */
.kenkatsu-cloudbeds-bar__skeleton {
	display: none;
	align-items: center;
	gap: 0.35rem;
	padding: 0 0.15rem;
	min-height: 2.35rem;
	pointer-events: auto;
	cursor: pointer;
	width: 100%;
}

.kenkatsu-cloudbeds-bar--pending .kenkatsu-cloudbeds-bar__skeleton,
.kenkatsu-cloudbeds-bar--booting .kenkatsu-cloudbeds-bar__skeleton {
	display: inline-flex;
}

.kenkatsu-cloudbeds-bar--pending cb-property-date-picker,
.kenkatsu-cloudbeds-bar--booting cb-property-date-picker {
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	pointer-events: none;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.kenkatsu-cloudbeds-bar.is-ready .kenkatsu-cloudbeds-bar__skeleton,
.kenkatsu-cloudbeds-bar--fallback .kenkatsu-cloudbeds-bar__skeleton {
	display: none !important;
}

.kenkatsu-cb-skel {
	display: inline-flex;
	align-items: center;
	font-size: 0.82rem;
	font-weight: 600;
	color: rgba(22, 72, 81, 0.72);
	white-space: nowrap;
}

.kenkatsu-cb-skel--date {
	padding: 0.35rem 0.55rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.55);
}

.kenkatsu-cb-skel--sep {
	width: 0.55rem;
	height: 1px;
	background: rgba(22, 72, 81, 0.35);
}

.kenkatsu-cb-skel--btn {
	margin-left: 0.15rem;
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	background: #1f5e6b;
	color: #fff;
	font-size: 0.78rem;
}

.kenkatsu-cloudbeds-bar--booting .kenkatsu-cb-skel--btn {
	opacity: 0.75;
}

.kenkatsu-cloudbeds-bar__inner {
	pointer-events: auto;
	max-width: none;
	margin: 0;
	padding: 0.45rem 0.5rem;
	min-height: 3.25rem;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex-wrap: nowrap;
	/* Píldora translúcida tipo Cloudbeds Immersive */
	background: rgba(255, 255, 255, 0.42);
	backdrop-filter: blur(14px) saturate(1.2);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 999px;
	box-shadow:
		0 8px 28px rgba(22, 72, 81, 0.14),
		0 1px 2px rgba(22, 72, 81, 0.06);
	line-height: 1.15;
}

.kenkatsu-cloudbeds-bar__picker {
	flex: 1 1 auto;
	min-width: 11rem;
	min-height: 2.35rem;
	position: relative;
}

/* Chips internos Cloudbeds (huéspedes / promo) */
.kenkatsu-cloudbeds-bar__extras {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	flex: 0 0 auto;
	padding-right: 0.1rem;
	position: relative;
	z-index: 2;
}

.kenkatsu-cb-chip {
	position: relative;
	flex: 0 0 auto;
}

.kenkatsu-cb-chip__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0.55rem 0.85rem;
	min-height: 2.5rem;
	border: none;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92) !important;
	color: #1a1a1a !important;
	font-family: 'Lato', sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(22, 72, 81, 0.06);
	transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
	text-shadow: none !important;
	transform: none !important;
}

.kenkatsu-cb-chip__btn:hover,
.kenkatsu-cb-chip__btn:focus,
.kenkatsu-cb-chip__btn:active,
.kenkatsu-cb-chip.is-open .kenkatsu-cb-chip__btn {
	background: #fff !important;
	color: #1a1a1a !important;
	box-shadow: 0 2px 8px rgba(22, 72, 81, 0.12);
	transform: none !important;
}

.kenkatsu-cb-chip__btn:hover .kenkatsu-cb-chip__icon,
.kenkatsu-cb-chip__btn:focus .kenkatsu-cb-chip__icon,
.kenkatsu-cb-chip__btn:hover .kenkatsu-cb-chip__text,
.kenkatsu-cb-chip__btn:focus .kenkatsu-cb-chip__text {
	color: #1a1a1a !important;
}

.kenkatsu-cb-chip__icon {
	display: inline-flex;
	color: #374151;
	flex-shrink: 0;
}

.kenkatsu-cb-chip__text {
	white-space: nowrap;
	max-width: 9rem;
	overflow: hidden;
	text-overflow: ellipsis;
	color: inherit;
}

/* Buscar al final (reubicado desde el Date Picker) */
.kenkatsu-cb-chip--search {
	flex: 0 0 auto;
}

.kenkatsu-cloudbeds-bar .kenkatsu-cb-chip--search [data-testid="property-date-picker-search-button"],
.kenkatsu-cloudbeds-bar .kenkatsu-cb-chip--search button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 2.5rem;
	padding: 0.55rem 1.25rem !important;
	border: none !important;
	border-radius: 999px !important;
	background: var(--kenkatsu-primary, #1F5E6B) !important;
	color: #fff !important;
	font-family: 'Lato', sans-serif !important;
	font-size: 0.875rem !important;
	font-weight: 700 !important;
	text-transform: none !important;
	letter-spacing: 0.01em;
	box-shadow: none !important;
	transform: none !important;
	cursor: pointer;
}

.kenkatsu-cloudbeds-bar .kenkatsu-cb-chip--search button:hover,
.kenkatsu-cloudbeds-bar .kenkatsu-cb-chip--search button:focus,
.kenkatsu-cloudbeds-bar .kenkatsu-cb-chip--search button:active {
	background: var(--kenkatsu-primary-dark, #164851) !important;
	color: #fff !important;
	transform: none !important;
}

/* Mientras no se reubica, ocultar el Buscar original dentro del picker */
.kenkatsu-cloudbeds-bar__picker [data-testid="property-date-picker-search-button"] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	border: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.kenkatsu-cloudbeds-bar__picker .cb-search-card {
	position: relative;
}

/* Miniventanas Cloudbeds */
.kenkatsu-cb-pop {
	position: absolute;
	top: calc(100% + 0.55rem);
	left: 50%;
	transform: translateX(-50%);
	min-width: 14rem;
	padding: 1rem 1.1rem 0.9rem;
	background: #fff;
	border-radius: 1rem;
	box-shadow:
		0 12px 32px rgba(15, 23, 42, 0.16),
		0 2px 6px rgba(15, 23, 42, 0.06);
	z-index: 999999;
}

.kenkatsu-cb-pop[hidden] {
	display: none !important;
}

.kenkatsu-cb-pop__title {
	margin: 0 0 0.75rem;
	font-family: 'Lato', sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	color: #111827;
}

.kenkatsu-cb-stepper {
	display: inline-flex;
	align-items: center;
	gap: 0;
	border: 1px solid rgba(31, 94, 107, 0.22);
	border-radius: 999px;
	overflow: hidden;
	background: #fff;
}

.kenkatsu-cb-stepper__btn {
	width: 2.35rem;
	height: 2.35rem;
	border: none;
	background: transparent;
	color: #164851;
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
}

.kenkatsu-cb-stepper__btn:hover {
	background: rgba(31, 94, 107, 0.06);
}

.kenkatsu-cb-stepper__val {
	min-width: 1.75rem;
	text-align: center;
	font-family: 'Lato', sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	color: #111827;
}

.kenkatsu-cb-pop__input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 0.85rem;
	padding: 0.65rem 0.75rem;
	border: 1px solid rgba(31, 94, 107, 0.22);
	border-radius: 0.65rem;
	font-family: 'Lato', sans-serif;
	font-size: 0.9rem;
	color: #111827;
	background: #fff !important;
	box-shadow: none !important;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.kenkatsu-cb-pop__input:focus {
	border-color: var(--kenkatsu-primary, #1F5E6B);
}

/* Anular autofill amarillo del navegador / tema */
.kenkatsu-cb-pop__input:-webkit-autofill,
.kenkatsu-cb-pop__input:-webkit-autofill:hover,
.kenkatsu-cb-pop__input:-webkit-autofill:focus {
	-webkit-text-fill-color: #111827;
	-webkit-box-shadow: 0 0 0 1000px #fff inset !important;
	box-shadow: 0 0 0 1000px #fff inset !important;
	transition: background-color 99999s ease-out;
}

.kenkatsu-cb-pop__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-top: 0.9rem;
}

.kenkatsu-cb-pop__cancel {
	margin: 0;
	padding: 0.45rem 0.9rem;
	border: 1px solid var(--kenkatsu-primary, #1F5E6B);
	border-radius: 999px;
	background: transparent;
	color: var(--kenkatsu-primary, #1F5E6B);
	font-family: 'Lato', sans-serif;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
}

.kenkatsu-cb-pop__apply {
	margin: 0;
	padding: 0.45rem 1rem;
	border: none;
	border-radius: 999px;
	background: var(--kenkatsu-primary, #1F5E6B);
	color: #fff;
	font-family: 'Lato', sans-serif;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
}

.kenkatsu-cb-pop__apply:hover {
	background: var(--kenkatsu-primary-dark, #164851);
}

/* Compactar web component Cloudbeds dentro de la píldora */
.kenkatsu-cloudbeds-bar .cb-bookingengine-root,
.kenkatsu-cloudbeds-bar .cb-search-card,
.kenkatsu-cloudbeds-bar cb-property-date-picker {
	min-height: 0 !important;
	background: transparent !important;
}

.kenkatsu-cloudbeds-bar .cb-search-card {
	padding: 0 !important;
	gap: 0.35rem !important;
	align-items: center !important;
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
}

/* Con barra de admin WP */
body.admin-bar .kenkatsu-cloudbeds-bar {
	top: calc(var(--kenkatsu-header-offset, 88px) + var(--kenkatsu-cb-gap, 6px) + 32px);
}

@media (max-width: 782px) {
	body.admin-bar .kenkatsu-cloudbeds-bar {
		top: calc(var(--kenkatsu-header-offset, 64px) + var(--kenkatsu-cb-gap, 8px) + 46px);
	}
}

/* Header oculto al bajar: el motor flota solo */
body.kenkatsu-header-hidden .kenkatsu-cloudbeds-bar {
	top: 12px;
}

body.admin-bar.kenkatsu-header-hidden .kenkatsu-cloudbeds-bar {
	top: calc(32px + 12px);
}

@media (max-width: 782px) {
	body.admin-bar.kenkatsu-header-hidden .kenkatsu-cloudbeds-bar {
		top: calc(46px + 10px);
	}
}

.kenkatsu-cloudbeds-bar__fallback-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: nowrap;
	min-height: 44px;
	padding: 0.35rem 0.45rem 0.35rem 1rem;
}

.kenkatsu-cloudbeds-bar__fallback-hint {
	font-family: 'Lato', sans-serif;
	font-size: 0.85rem;
	color: #4B5563;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.kenkatsu-cloudbeds-bar__fallback-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.55rem 1.15rem;
	background: var(--kenkatsu-primary, #1F5E6B);
	color: #fff !important;
	font-family: 'Lato', sans-serif;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none !important;
	border-radius: 999px;
	white-space: nowrap;
	flex-shrink: 0;
}

.kenkatsu-cloudbeds-bar__fallback-cta:hover {
	background: var(--kenkatsu-primary-dark, #164851);
	color: #fff !important;
}

/* Flotante: no empuja el layout; el hero deja aire bajo el Date Picker */
body.kenkatsu-cloudbeds-bar-on #inner-wrap,
body.kenkatsu-cloudbeds-bar-on .kenkatsu-homepage,
body.kenkatsu-cloudbeds-bar-on main#main-content {
	scroll-margin-top: var(--kenkatsu-header-offset, 80px);
}

body.kenkatsu-cloudbeds-bar-on .kenkatsu-hero-section .hero-content,
body.kenkatsu-cloudbeds-bar-on.kenkatsu-homepage .hero-content {
	/* Barra más arriba y fina → menos empujón al titular */
	padding-top: 4.5rem;
}

@media (max-width: 767px) {
	/* Móvil: solo el titular (el subtítulo quedaba tapado por el motor) */
	body.kenkatsu-cloudbeds-bar-on .kenkatsu-hero-section .hero-subtitle {
		display: none;
	}

	/* El hero arranca justo bajo la barra del motor (altura real medida por JS) */
	body.kenkatsu-cloudbeds-bar-on .kenkatsu-hero-section {
		align-items: flex-start !important;
	}

	body.kenkatsu-cloudbeds-bar-on .kenkatsu-hero-section .hero-content,
	body.kenkatsu-cloudbeds-bar-on.kenkatsu-homepage .hero-content {
		/* !important: hero-unified.css fuerza 100px en móvil */
		padding-top: calc(var(--kenkatsu-cb-bar-bottom, 190px) + 1.25rem) !important;
	}
}

body.kenkatsu-cloudbeds-bar-on .kenkatsu-hero-section,
body.kenkatsu-cloudbeds-bar-on .kenkatsu-homepage > section:first-child {
	padding-top: 0;
}

.kenkatsu-cb-date-picker,
cb-property-date-picker {
	display: block;
	width: 100%;
}

/* Compactar el web component dentro de la píldora */
.kenkatsu-cloudbeds-bar .cb-bookingengine-root,
.kenkatsu-cloudbeds-bar .cb-search-card {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
}

/*
 * Contención: el Immersive de Cloudbeds inyecta Font Awesome / resets.
 * Si fallan CSS de la home (caché, mixed content), los SVG del tema
 * no deben hincharse a ancho completo.
 */
.kenkatsu-homepage .scroll-arrow {
	width: 1.5rem !important;
	height: 1.5rem !important;
	max-width: 1.5rem !important;
	max-height: 1.5rem !important;
}

.kenkatsu-homepage .why-icon {
	width: 3.5rem !important;
	height: 3.5rem !important;
	max-width: 3.5rem !important;
	max-height: 3.5rem !important;
	overflow: hidden;
	flex-shrink: 0;
}

.kenkatsu-homepage .why-icon svg {
	width: 1.65rem !important;
	height: 1.65rem !important;
	max-width: 1.65rem !important;
	max-height: 1.65rem !important;
}

/* FA de Cloudbeds solo dentro del motor */
body.kenkatsu-cloudbeds-bar-on svg.svg-inline--fa:not(.kenkatsu-cloudbeds-bar svg.svg-inline--fa):not(.cb-bookingengine-root svg.svg-inline--fa) {
	width: 1em !important;
	height: 1em !important;
	max-width: 1.25rem !important;
	max-height: 1.25rem !important;
}

/* —— Contenedor embed genérico (landings) —— */
.kenkatsu-cloudbeds-embed {
	margin: 2rem auto;
	max-width: 960px;
	padding: 0 1rem;
}

.kenkatsu-cloudbeds-embed--home {
	max-width: 720px;
	margin: 0 auto 2.5rem;
}

.kenkatsu-cloudbeds-embed__title {
	font-family: 'Lora', 'Playfair Display', Georgia, serif;
	font-size: clamp(1.35rem, 2.5vw, 1.75rem);
	font-weight: 600;
	color: var(--kenkatsu-primary, #1F5E6B);
	text-align: center;
	margin: 0 0 1rem;
}

.kenkatsu-cloudbeds-embed__lead {
	font-family: 'Lato', sans-serif;
	font-size: 0.95rem;
	color: var(--kenkatsu-gray-700, #374151);
	text-align: center;
	max-width: 42rem;
	margin: 0 auto 1.25rem;
	line-height: 1.55;
}

.kenkatsu-cloudbeds-embed__frame {
	background: var(--kenkatsu-bg-white, #fff);
	border-radius: 16px;
	border: 1px solid rgba(31, 94, 107, 0.1);
	box-shadow: var(--kenkatsu-shadow-soft, 0 10px 40px rgba(0, 0, 0, 0.03));
	overflow: hidden;
	min-height: 120px;
}

.kenkatsu-cloudbeds-embed__fallback {
	text-align: center;
	padding: 2rem 1.5rem;
}

.kenkatsu-cloudbeds-embed__fallback .btn {
	margin-top: 0.75rem;
}

:is(#cb-bookingengine, .cb-bookingengine-root, cb-immersive-experience) {
	--kenkatsu-primary: #1F5E6B;
	--kenkatsu-primary-dark: #164851;
	--kenkatsu-teal: #0D9488;
}

:is(#cb-bookingengine, .cb-bookingengine-root) h1,
:is(#cb-bookingengine, .cb-bookingengine-root) h2,
:is(#cb-bookingengine, .cb-bookingengine-root) h3 {
	font-family: 'Lora', 'Playfair Display', Georgia, serif !important;
	color: var(--kenkatsu-primary) !important;
}

:is(#cb-bookingengine, .cb-bookingengine-root) {
	font-family: 'Lato', sans-serif !important;
}

cb-book-now-button {
	--cb-book-now-button-background-color: var(--kenkatsu-primary, #1F5E6B);
	--cb-book-now-button-background-color-hover: var(--kenkatsu-primary-dark, #164851);
	border-radius: 12px;
}

/*
 * Calendario Cloudbeds (portal #calendar-popover) usa z-index ~1500.
 * La barra sticky Kenkatsu está a 999990 → en móvil tapa “Next month”
 * y los taps caen en chips (Huéspedes / Añadir código). Subir el portal.
 */
#calendar-popover.cb-portal,
#calendar-popover [role="dialog"],
body > .cb-bookingengine-root > .cb-portal:has([role="dialog"]),
body > .cb-bookingengine-root > .cb-portal:has(.month-container) {
	z-index: 1000010 !important;
}

@media (max-width: 767px) {
	.kenkatsu-cloudbeds-bar {
		width: min(100%, calc(100vw - 1rem));
		top: calc(var(--kenkatsu-header-offset, 64px) + var(--kenkatsu-cb-gap, 4px));
	}

	.kenkatsu-cloudbeds-bar__inner {
		padding: 0.4rem;
		border-radius: 1.35rem;
		flex-wrap: wrap;
		gap: 0.35rem;
	}

	.kenkatsu-cloudbeds-bar__picker {
		flex: 1 1 100%;
	}

	.kenkatsu-cloudbeds-bar__extras {
		flex: 1 1 100%;
		justify-content: stretch;
	}

	/* Con calendario abierto, chips no deben interceptar taps */
	body:has(#calendar-popover [role="dialog"]) .kenkatsu-cloudbeds-bar__extras {
		pointer-events: none;
	}

	.kenkatsu-cb-chip {
		flex: 1 1 0;
	}

	.kenkatsu-cb-chip__btn {
		width: 100%;
		justify-content: center;
	}

	.kenkatsu-cb-pop {
		left: 0;
		right: 0;
		transform: none;
		min-width: 0;
		width: 100%;
	}

	.kenkatsu-cloudbeds-bar__fallback-hint {
		display: none;
	}

	.kenkatsu-cloudbeds-embed {
		padding: 0 0.75rem;
		margin: 1.5rem auto;
	}
}