/* ==========================================
   BOOKING PAGE
   Wellness Palace
   ========================================== */

.booking-hero {
	min-height: 420px;
	display: flex;
	align-items: center;
	background: linear-gradient(90deg, rgba(14,10,8,.86), rgba(14,10,8,.55)), url('../../uploads/gallery/ADSC07874.jpg') center center/cover no-repeat;
	color: #fff;
	padding: 90px 0 60px;
}

	.booking-hero h1 {
		font-family: 'Cinzel', serif;
		font-size: clamp(34px, 5vw, 58px);
		margin: 0 0 15px;
		line-height: 1.1;
	}

	.booking-hero p {
		max-width: 650px;
		font-size: 18px;
		line-height: 1.8;
		color: rgba(255,255,255,.88);
	}

.booking-section {
	padding: 80px 0;
}

.booking-layout {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 35px;
	align-items: stretch;
}

.booking-card,
.booking-info-card {
	background: #fff;
	border-radius: 24px;
	padding: 30px;
	box-shadow: 0 18px 45px rgba(0,0,0,.08);
	border: 1px solid rgba(184,148,85,.15);
}

	.booking-card h3,
	.booking-info-card h3 {
		margin-top: 0;
		margin-bottom: 25px;
		font-family: 'Cinzel', serif;
		color: #2b1d16;
	}

.booking-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.form-group {
	margin-bottom: 18px;
}

	.form-group.full {
		grid-column: 1 / -1;
	}

	.form-group label {
		display: block;
		margin-bottom: 8px;
		font-size: 14px;
		font-weight: 700;
		color: #3b2b22;
	}

	.form-group input,
	.form-group select,
	.form-group textarea {
		width: 100%;
		min-height: 50px;
		padding: 12px 15px;
		border: 1px solid #ddd1c2;
		border-radius: 14px;
		background: #fff;
		font-size: 15px;
		font-family: 'Montserrat', sans-serif;
		transition: all .25s ease;
	}

	.form-group textarea {
		min-height: 110px;
		resize: vertical;
	}

		.form-group input:focus,
		.form-group select:focus,
		.form-group textarea:focus {
			border-color: #b89455;
			box-shadow: 0 0 0 4px rgba(184,148,85,.15);
			outline: none;
		}

.full-btn {
	width: 100%;
	margin-top: 10px;
}

.booking-error {
	display: none;
	margin-top: 15px;
	padding: 12px;
	border-radius: 10px;
	background: #fff1f1;
	color: #c62828;
	font-weight: 700;
}

.booking-success {
	display: none;
	margin-top: 15px;
	padding: 12px;
	border-radius: 10px;
	background: #eefbf2;
	color: #1f8b4c;
	font-weight: 700;
}

.booking-steps {
	list-style: none;
	padding: 0;
	margin: 0;
}

	.booking-steps li {
		display: flex;
		align-items: flex-start;
		gap: 12px;
		margin-bottom: 20px;
		line-height: 1.7;
		color: #4c3a30;
	}

	.booking-steps i {
		color: #b89455;
		font-size: 18px;
		margin-top: 4px;
	}

.quick-contact {
	margin-top: 30px;
	padding-top: 25px;
	border-top: 1px solid #eee4d8;
}

	.quick-contact p {
		margin-bottom: 12px;
		font-weight: 600;
		color: #4c3a30;
	}

	.quick-contact a {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		text-decoration: none;
		color: #128c4a;
		font-weight: 700;
		font-size: 16px;
	}

		.quick-contact a:hover {
			opacity: .8;
		}

.booking-card:hover,
.booking-info-card:hover {
	transform: translateY(-3px);
	transition: .3s;
}

/* ===========================
   Mobile
   =========================== */

@media (max-width: 991px) {

	.booking-layout {
		grid-template-columns: 1fr;
	}

	.booking-grid {
		grid-template-columns: 1fr;
	}

	.booking-card,
	.booking-info-card {
		padding: 25px;
	}

	.booking-hero {
		min-height: 350px;
		padding: 70px 0 50px;
		text-align: center;
	}

		.booking-hero p {
			margin: auto;
		}
}

@media (max-width: 576px) {

	.booking-section {
		padding: 50px 0;
	}

	.booking-card,
	.booking-info-card {
		padding: 20px;
		border-radius: 18px;
	}

	.booking-hero h1 {
		font-size: 34px;
	}

	.booking-hero p {
		font-size: 15px;
	}
}
.booking-server-message {
	margin-bottom: 18px;
	padding: 13px 15px;
	border-radius: 12px;
	font-weight: 700;
}

	.booking-server-message.success {
		background: #eefbf2;
		color: #1f8b4c;
	}

	.booking-server-message.error {
		background: #fff1f1;
		color: #c62828;
	}

.booking-note {
	margin-top: 12px;
	font-size: 13px;
	color: #6f6258;
}
.booking-step-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 24px 0 14px;
	color: #2b1d16;
}

	.booking-step-title span {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background: #b89455;
		color: #fff;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-weight: 800;
	}

.category-card-grid,
.service-card-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}

.category-card,
.service-card {
	width: 100%;
	border: 1px solid rgba(184,148,85,.25);
	background: #fff;
	border-radius: 18px;
	padding: 16px;
	cursor: pointer;
	text-align: left;
	transition: .25s;
}

	.category-card:hover,
	.category-card.active,
	.service-card:hover,
	.service-card.active {
		border-color: #b89455;
		box-shadow: 0 12px 30px rgba(0,0,0,.08);
		transform: translateY(-2px);
	}

	.category-card i {
		color: #b89455;
		font-size: 22px;
		margin-bottom: 10px;
		display: block;
	}

	.category-card span {
		font-weight: 800;
		color: #2b1d16;
	}

.service-card {
	display: flex;
	gap: 12px;
	align-items: center;
}

.service-card-image {
	width: 74px;
	height: 74px;
	border-radius: 14px;
	overflow: hidden;
	background: #f7f1e8;
	flex-shrink: 0;
}

	.service-card-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

.service-card-content strong {
	display: block;
	color: #2b1d16;
	margin-bottom: 4px;
}

.service-card-content span {
	display: block;
	color: #6f6258;
	font-size: 13px;
}

.service-card-content small {
	display: block;
	color: #b89455;
	font-weight: 800;
	margin-top: 6px;
}

.empty-services,
.booking-loading {
	grid-column: 1 / -1;
	padding: 18px;
	border-radius: 16px;
	background: #fff8ec;
	color: #6f6258;
	font-weight: 700;
}

	.empty-services.error {
		background: #fff1f1;
		color: #c62828;
	}

.selected-service-box {
	border: 1px solid rgba(184,148,85,.25);
	background: #fff8ec;
	border-radius: 20px;
	padding: 18px;
	margin-bottom: 22px;
}

.selected-service-placeholder {
	color: #6f6258;
	font-weight: 700;
}

.selected-service-details {
	display: flex;
	gap: 18px;
	align-items: flex-start;
}

.selected-service-image {
	width: 130px;
	height: 110px;
	border-radius: 18px;
	overflow: hidden;
	background: #eee;
	flex-shrink: 0;
}

	.selected-service-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

.selected-service-details h4 {
	margin: 0 0 8px;
	color: #2b1d16;
}

.selected-price {
	font-size: 24px;
	font-weight: 900;
	color: #b89455;
	margin-bottom: 5px;
}

.selected-duration {
	font-weight: 700;
	color: #4c3a30;
	margin-bottom: 8px;
}

.trust-box {
	display: grid;
	gap: 12px;
	margin-bottom: 25px;
}

	.trust-box div {
		padding: 14px;
		border-radius: 16px;
		background: #fff8ec;
		border: 1px solid rgba(184,148,85,.18);
	}

	.trust-box strong {
		display: block;
		color: #2b1d16;
	}

	.trust-box span {
		display: block;
		color: #6f6258;
		font-size: 13px;
		margin-top: 4px;
	}

@media (max-width: 768px) {
	.category-card-grid,
	.service-card-grid {
		grid-template-columns: 1fr;
	}

	.selected-service-details {
		flex-direction: column;
	}

	.selected-service-image {
		width: 100%;
		height: 190px;
	}
}
.date-input-wrapper {
	position: relative;
	width: 100%;
}

	.date-input-wrapper .booking-input {
		padding-right: 45px;
	}

.calendar-icon {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	border: none;
	background: transparent;
	cursor: pointer;
}