/**
 * Booking Wrapper — page-book.php styles.
 *
 * WordPress wrapper page containing the ClubV1 proxy iframe,
 * branded intro section, and extra data capture form.
 *
 * @package BuryGolfClub
 * @since   2.0.0
 */

/* ========================================================================
   Wrapper Section
   ======================================================================== */

.booking-wrapper {
	padding-block: 0;
	background-color: var(--wp--preset--color--cream, #F5F0E6);
}

.booking-wrapper__inner {
	max-width: var(--wp--style--global--wide-size, 90rem);
	margin-inline: auto;
}

/* ========================================================================
   Branded Intro
   ======================================================================== */

.booking-wrapper__intro {
	text-align: center;
	padding-block: clamp(2.5rem, 5vw, 4rem);
	max-width: 40rem;
	margin-inline: auto;
}

.booking-wrapper__heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2rem, 3vw + 1rem, 3rem);
	font-weight: 400;
	color: var(--wp--preset--color--primary, #071428);
	line-height: 1.1;
	margin: 0 0 var(--wp--preset--spacing--20, 1rem);
}

.booking-wrapper__text {
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
	font-weight: 300;
	color: var(--wp--preset--color--text-secondary, #4A4A4A);
	line-height: 1.7;
	margin: 0;
}

/* ========================================================================
   Iframe Container
   ======================================================================== */

.booking-wrapper__frame-container {
	width: 100%;
	background-color: var(--wp--preset--color--white, #FEFCF8);
	border-radius: 0.5rem;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.booking-wrapper__iframe {
	width: 100%;
	min-height: 80vh;
	border: none;
	display: block;
}

/* ========================================================================
   Extra Data Capture
   ======================================================================== */

.booking-wrapper__extras {
	max-width: 36rem;
	margin: clamp(2rem, 4vw, 3rem) auto;
	padding: clamp(2rem, 4vw, 3rem);
	background-color: var(--wp--preset--color--white, #FEFCF8);
	border-radius: 0.5rem;
	border: 1px solid rgba(196, 162, 101, 0.2);
}

.booking-wrapper__extras-heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.5rem, 2vw + 0.75rem, 2rem);
	font-weight: 400;
	color: var(--wp--preset--color--primary, #071428);
	line-height: 1.1;
	margin: 0 0 0.75rem;
}

.booking-wrapper__extras-text {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--text-secondary, #4A4A4A);
	line-height: 1.6;
	margin: 0 0 var(--wp--preset--spacing--30, 1.5rem);
}

/* ========================================================================
   Extras Form
   ======================================================================== */

.booking-extras-form__field {
	margin-bottom: var(--wp--preset--spacing--20, 1rem);
}

.booking-extras-form__label {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 500;
	color: var(--wp--preset--color--primary, #071428);
	margin-bottom: 0.375rem;
}

.booking-extras-form__input,
.booking-extras-form__select {
	width: 100%;
	padding: 0.625rem 0.75rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--primary, #071428);
	background-color: var(--wp--preset--color--white, #FEFCF8);
	border: 1px solid rgba(27, 94, 32, 0.2);
	border-radius: 0.375rem;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
	appearance: none;
	-webkit-appearance: none;
}

.booking-extras-form__select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234A4A4A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	padding-right: 2.5rem;
}

.booking-extras-form__input:focus,
.booking-extras-form__select:focus {
	border-color: var(--wp--preset--color--gold, #C4A265);
	box-shadow: 0 0 0 2px rgba(196, 162, 101, 0.2);
	outline: none;
}

/* Checkbox consent field */
.booking-extras-form__field--consent {
	padding-top: var(--wp--preset--spacing--20, 1rem);
	border-top: 1px solid rgba(196, 162, 101, 0.2);
	margin-top: var(--wp--preset--spacing--20, 1rem);
}

.booking-extras-form__checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	cursor: pointer;
}

.booking-extras-form__checkbox {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.125rem;
	accent-color: var(--wp--preset--color--primary-green, #1B5E20);
}

.booking-extras-form__checkbox-text {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--text-secondary, #4A4A4A);
	line-height: 1.5;
}

/* Submit button */
.booking-extras-form__submit {
	margin-top: var(--wp--preset--spacing--30, 1.5rem);
	width: 100%;
}

/* Success message */
.booking-extras-form__success {
	text-align: center;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	color: var(--wp--preset--color--primary-green, #1B5E20);
	padding: var(--wp--preset--spacing--30, 1.5rem) 0;
	margin: 0;
}

/* ========================================================================
   Responsive
   ======================================================================== */

@media (max-width: 47.9375rem) {
	.booking-wrapper__extras {
		margin-inline: var(--wp--preset--spacing--20, 1rem);
		padding: 1.5rem;
	}

	.booking-wrapper__iframe {
		min-height: 70vh;
	}
}

/* ========================================================================
   Reduced Motion
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
	.booking-extras-form__input,
	.booking-extras-form__select {
		transition: none;
	}
}