/*! public/css/booking_page.css */

/* ---------------------------------------------------------
   Booking Page Styles — Accessible, Responsive, WCAG-Friendly
---------------------------------------------------------- */

/* Card Styling */
.service-card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	cursor: pointer;
	user-select: none;
	outline: none;
	flex-direction: column;
	height: 100%;
	justify-content: space-between;
}

/* Make text block stretch */
.service-card h3,
.service-card p {
	flex-grow: 1;
}


.service-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.service-card.selected {
	box-shadow: 0 8px 18px rgba(0,0,0,0.2);
}

.service-card.selected:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(0,0,0,0.22);
}

/* Keyboard Focus (WCAG compliant) */
.service-card:focus {
	outline: 3px solid var(--color-primary);
	outline-offset: 4px;
}

/* Booking Form Section */
.booking-form {
	animation: fadeIn 0.4s ease forwards;
}

/* Fade animation */
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Mobile adjustments */
@media (max-width: 576px) {
	.service-card img {
		max-width: 240px;
	}
	h1 {
		font-size: 1.6rem !important;
	}
}