/* HospediaPro Booking Button — hospediapro-booking-button.css
   License: GPL-2.0-or-later */

.hpbb-floating-container *,
.hpbb-modal-overlay * { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Botón flotante ─────────────────────────────────────────────── */
.hpbb-floating-container {
	position: fixed !important;
	bottom: 24px !important;
	right: 24px !important;
	z-index: 999998 !important;
	display: block !important;
}

.hpbb-button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: none !important;
	border-radius: 50% !important;
	cursor: pointer !important;
	box-shadow: 0 4px 16px rgba(0,0,0,.28); /* sin !important: permite que @keyframes la anime */
	transition: transform .2s ease !important;
	-webkit-tap-highlight-color: transparent !important;
	outline-offset: 4px !important;
	padding: 0 !important;
	line-height: 1 !important;
	text-decoration: none !important;
}
.hpbb-button:hover  { transform: scale(1.08) !important; }
.hpbb-button:not(.hpbb-breath):hover { box-shadow: 0 6px 22px rgba(0,0,0,.34) !important; }
.hpbb-button:active { transform: scale(.96) !important; }
.hpbb-button:focus-visible { outline: 3px solid #25D366 !important; outline-offset: 4px !important; }

@keyframes hpbbBreathe {
	0%,100% { box-shadow: 0 4px 16px rgba(0,0,0,.28), 0 0 0 0 rgba(37,211,102,.5); }
	50%      { box-shadow: 0 4px 16px rgba(0,0,0,.28), 0 0 0 10px rgba(37,211,102,0); }
}
.hpbb-button.hpbb-breath { animation: hpbbBreathe 2.4s ease-in-out infinite !important; }

/* ── Overlay ────────────────────────────────────────────────────── */
.hpbb-modal-overlay {
	display: none !important;
	position: fixed !important;
	top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
	z-index: 999999 !important;
	background: rgba(0,0,0,.6) !important;
	backdrop-filter: blur(3px) !important;
	-webkit-backdrop-filter: blur(3px) !important;
	align-items: flex-end !important;
	justify-content: center !important;
}
.hpbb-modal-overlay.active {
	display: flex !important;
}
@media (min-width: 540px) {
	.hpbb-modal-overlay.active {
		align-items: center !important;
		padding: 16px !important;
	}
}

/* ── Modal ──────────────────────────────────────────────────────── */
.hpbb-modal {
	background: #fff !important;
	width: 100% !important;
	max-width: 440px !important;
	border-radius: 20px 20px 0 0 !important;
	overflow: hidden !important;
	box-shadow: 0 -4px 40px rgba(0,0,0,.2) !important;
	animation: hpbbSlideUp .28s ease !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	color: #1a1a1a !important;
	max-height: 92vh !important;
	overflow-y: auto !important;
}
@media (min-width: 540px) {
	.hpbb-modal {
		border-radius: 20px !important;
		box-shadow: 0 8px 48px rgba(0,0,0,.24) !important;
		animation: hpbbFadeIn .22s ease !important;
		max-height: 85vh !important;
	}
}

@keyframes hpbbSlideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes hpbbFadeIn  { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ── Header ─────────────────────────────────────────────────────── */
.hpbb-modal-header {
	display: flex !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 12px !important;
	padding: 22px 22px 16px !important;
	background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
	color: #fff !important;
	position: sticky !important;
	top: 0 !important;
}
.hpbb-modal-eyebrow {
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	opacity: .82 !important;
	margin-bottom: 4px !important;
	color: #fff !important;
}
.hpbb-modal-header h3 {
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: #fff !important;
	margin: 0 !important;
}
.hpbb-modal-subtitle {
	font-size: 13px !important;
	opacity: .88 !important;
	margin-top: 4px !important;
	line-height: 1.4 !important;
	color: #fff !important;
}

.hpbb-close {
	flex-shrink: 0 !important;
	background: rgba(255,255,255,.18) !important;
	border: none !important;
	border-radius: 50% !important;
	width: 34px !important;
	height: 34px !important;
	min-width: 34px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	color: #fff !important;
	font-size: 18px !important;
	transition: background .15s ease !important;
	margin-top: 2px !important;
	padding: 0 !important;
}
.hpbb-close:hover { background: rgba(255,255,255,.32) !important; }
.hpbb-close:focus-visible { outline: 2px solid #fff !important; outline-offset: 2px !important; }

/* ── Body ───────────────────────────────────────────────────────── */
.hpbb-modal-body { padding: 20px 22px 24px !important; }

/* ── Campos ─────────────────────────────────────────────────────── */
.hpbb-field { margin-bottom: 14px !important; display: block !important; }
.hpbb-field label {
	display: block !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #374151 !important;
	margin-bottom: 5px !important;
}

.hpbb-field input,
.hpbb-field select {
	display: block !important;
	width: 100% !important;
	padding: 10px 12px !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	color: #111827 !important;
	background: #f9fafb !important;
	border: 1.5px solid #d1d5db !important;
	border-radius: 8px !important;
	transition: border-color .15s ease, box-shadow .15s ease !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	font-family: inherit !important;
	box-shadow: none !important;
	outline: none !important;
}
.hpbb-field input::placeholder { color: #9ca3af !important; }
.hpbb-field input:focus,
.hpbb-field select:focus {
	border-color: #25D366 !important;
	box-shadow: 0 0 0 3px rgba(37,211,102,.2) !important;
	background: #fff !important;
}

.hpbb-field-row {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 12px !important;
	margin-bottom: 14px !important;
}
.hpbb-field-row .hpbb-field { margin-bottom: 0 !important; }

.hpbb-field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	padding-right: 32px !important;
	cursor: pointer !important;
}

.hpbb-field input.hpbb-invalid { border-color: #ef4444 !important; background: #fff5f5 !important; }
.hpbb-field input.hpbb-invalid:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.2) !important; }
.hpbb-field input.hpbb-valid  { border-color: #22c55e !important; }
.hpbb-field-hint { display: none; font-size: 12px !important; margin-top: 4px !important; line-height: 1.4 !important; }
.hpbb-hint-error { color: #ef4444 !important; }
.hpbb-required { color: #ef4444 !important; margin-left: 2px !important; }

/* ── Privacidad ─────────────────────────────────────────────────── */
.hpbb-privacy { margin-bottom: 16px !important; }
.hpbb-privacy p {
	font-size: 11.5px !important;
	color: #9ca3af !important;
	line-height: 1.5 !important;
	text-align: center !important;
	margin: 0 !important;
}

/* ── Botón submit ───────────────────────────────────────────────── */
.hpbb-submit {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 9px !important;
	width: 100% !important;
	padding: 13px 20px !important;
	background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	border: none !important;
	border-radius: 10px !important;
	cursor: pointer !important;
	transition: opacity .18s ease, transform .12s ease !important;
	font-family: inherit !important;
	letter-spacing: .01em !important;
	text-decoration: none !important;
	box-shadow: none !important;
}
.hpbb-submit:hover  { opacity: .92 !important; }
.hpbb-submit:active { transform: scale(.98) !important; }
.hpbb-submit:focus-visible { outline: 3px solid #128C7E !important; outline-offset: 3px !important; }

.hpbb-submit.hpbb-loading { opacity: .65 !important; cursor: not-allowed !important; pointer-events: none !important; }
.hpbb-submit.hpbb-loading::after {
	content: '' !important;
	display: inline-block !important;
	width: 14px !important;
	height: 14px !important;
	border: 2px solid rgba(255,255,255,.4) !important;
	border-top-color: #fff !important;
	border-radius: 50% !important;
	animation: hpbbSpin .7s linear infinite !important;
	margin-left: 8px !important;
	vertical-align: middle !important;
}
@keyframes hpbbSpin { to { transform: rotate(360deg); } }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 360px) {
	.hpbb-floating-container { bottom: 16px !important; right: 16px !important; }
	.hpbb-modal-header { padding: 16px 14px 12px !important; }
	.hpbb-modal-body   { padding: 14px 14px 18px !important; }
	.hpbb-field-row    { grid-template-columns: 1fr !important; }
}
@media (prefers-reduced-motion: reduce) {
	.hpbb-breath  { animation: none !important; }
	.hpbb-modal   { animation: none !important; }
	.hpbb-button  { transition: none !important; }
}