/* WHA Rides — shared components: buttons, cards, forms, widgets. */

.wha-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 1.75rem;
	border-radius: var(--wha-radius-sm);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	border: 1px solid transparent;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
	white-space: nowrap;
}

.wha-btn--accent {
	background: var(--wha-accent);
	color: var(--wha-accent-foreground);
}
.wha-btn--accent:hover {
	background: var(--wha-accent-soft);
}

.wha-btn--outline {
	border-color: var(--wha-border-strong);
	color: var(--wha-foreground);
}
.wha-btn--outline:hover {
	border-color: var(--wha-accent);
	color: var(--wha-accent);
}

.wha-btn--ghost {
	color: var(--wha-foreground);
}
.wha-btn--ghost:hover {
	color: var(--wha-accent);
}

.wha-card {
	background: var(--wha-card);
	border: 1px solid var(--wha-border);
	border-radius: var(--wha-radius-lg);
	padding: 2rem;
}

/* Forms (Elementor Forms + our own booking form share these) */
.wha-field {
	margin-bottom: 1.25rem;
}
.wha-field label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--wha-muted-foreground);
	margin-bottom: 0.5rem;
}
.wha-field input,
.wha-field select,
.wha-field textarea {
	width: 100%;
	background: var(--wha-background-secondary);
	border: 1px solid var(--wha-border-strong);
	border-radius: var(--wha-radius-sm);
	color: var(--wha-foreground);
	font-family: var(--wha-font-sans);
	font-size: 1rem;
	padding: 0.85rem 1rem;
}
.wha-field input:focus,
.wha-field select:focus,
.wha-field textarea:focus {
	outline: none;
	border-color: var(--wha-accent);
	box-shadow: 0 0 0 3px var(--wha-focus-ring);
}
.wha-field--error input,
.wha-field--error select,
.wha-field--error textarea {
	border-color: #e0685a;
}
.wha-field__error {
	color: #e0685a;
	font-size: 0.8125rem;
	margin-top: 0.4rem;
}

.wha-widget {
	background: var(--wha-card);
	border: 1px solid var(--wha-border);
	border-radius: var(--wha-radius-md);
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}
.wha-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.wha-widget li + li {
	margin-top: 0.6rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--wha-border);
}
.wha-widget a:hover {
	color: var(--wha-accent);
}

.wha-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	border: 1px solid var(--wha-border-strong);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wha-muted-foreground);
}

.wha-icon {
	flex-shrink: 0;
}

/* Floating WhatsApp button — injected by site.js so it appears on every
   page from editing just that one file plus these styles. Sits above the
   mobile sticky "Book Your Ride" bar on small screens (raised bottom
   offset), and is covered by the mobile nav overlay when it's open (lower
   z-index than .wha-mobile-menu, same layer as .wha-sticky-book). */
.wha-whatsapp-btn {
	position: fixed;
	right: 1.25rem;
	bottom: 5.5rem;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25d366;
	color: #ffffff;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wha-whatsapp-btn:hover {
	transform: scale(1.06);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
}

@media (min-width: 960px) {
	.wha-whatsapp-btn {
		bottom: 1.5rem;
	}
}

/* Reveal-on-scroll (progressive enhancement — hooked up by theme.js) */
.wha-reveal {
	opacity: 0;
	transform: translateY(1.25rem);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.wha-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}