/* Floating Cyber Monday pill (Brote_Quetrihue_Cyber_Float). Same palette as the topbar and /cyber. */

.brote-cyber-float {
	position: fixed;
	left: 24px;
	bottom: 24px;
	z-index: 9990;
	display: flex;
	align-items: center;
	max-width: calc(100vw - 48px);
	border-radius: 999px;
	background: linear-gradient(100deg, #0b0a1f 0%, #2a1458 60%, #3a1458 100%);
	box-shadow: 0 12px 34px rgba(23, 19, 74, .45), 0 0 0 1px rgba(34, 228, 255, .18);
	color: #fff;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .3s ease, transform .3s ease;
	pointer-events: none;
}
.brote-cyber-float.is-in { opacity: 1; transform: none; pointer-events: auto; }
.brote-cyber-float[hidden] { display: none; }

.bcf-link {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 8px 10px 18px;
	color: #fff !important;
	text-decoration: none !important;
	font-family: Montserrat, sans-serif;
	line-height: 1.15;
}
.bcf-dot {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #22e4ff;
	box-shadow: 0 0 10px #22e4ff;
	animation: bcf-pulse 1.6s ease-in-out infinite;
}
@keyframes bcf-pulse { 50% { opacity: .35; } }

.bcf-text { display: flex; flex-direction: column; }
.bcf-eyebrow { color: #22e4ff; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.bcf-off {
	font-size: 20px;
	font-weight: 800;
	background: linear-gradient(90deg, #ff2e88, #ff7ab8 55%, #22e4ff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.bcf-time { color: rgba(255, 255, 255, .75); font-size: 12px; white-space: nowrap; }
.bcf-time b { color: #fff; font-weight: 700; }
.bcf-cta {
	padding: 9px 16px;
	border-radius: 999px;
	background: #ff2e88;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	transition: box-shadow .2s ease;
}
.bcf-link:hover .bcf-cta { box-shadow: 0 6px 18px rgba(255, 46, 136, .5); }

.bcf-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-right: 8px;
	padding: 0 0 2px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: rgba(255, 255, 255, .8);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}
.bcf-close:hover { background: rgba(255, 255, 255, .2); color: #fff; }

/* Phones: a slim bar docked to the bottom edge; the WhatsApp button moves up and sits
   right above it (html.bcf-on is set by the script while the bar is showing). */
@media (max-width: 680px) {
	.brote-cyber-float {
		left: 0;
		right: 0;
		bottom: 0;
		max-width: none;
		padding-bottom: env(safe-area-inset-bottom);
		border-radius: 16px 16px 0 0;
		transform: translateY(100%);
		box-shadow: 0 -6px 24px rgba(23, 19, 74, .35);
	}
	.bcf-link { flex: 1; min-width: 0; gap: 10px; padding: 9px 6px 9px 16px; }
	.bcf-text { margin-right: auto; }
	.bcf-off { font-size: 18px; }
	.bcf-eyebrow { font-size: 9px; letter-spacing: .1em; }
	.bcf-time { font-size: 11px; }
	.bcf-cta { padding: 9px 13px; font-size: 12px; }
	.bcf-close { width: 26px; height: 26px; margin-right: 10px; font-size: 16px; }

	html.bcf-on body:not(.single-trip) .wa__btn_popup { bottom: 76px !important; right: 16px !important; transition: bottom .3s ease; }
	html.bcf-on body:not(.single-trip) .wa__popup_chat_box { bottom: 146px !important; right: 16px !important; }

	/* Trip pages already have the booking bar at the bottom. */
	body.single-trip .brote-cyber-float { display: none !important; }
}
@media (max-width: 400px) {
	.bcf-time { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.bcf-dot { animation: none; }
	.brote-cyber-float { transition: none; }
}