/* EVENTS SLICE 4. Weddings & events booking wizard - scoped to
   page-events-weddings-booking.php only via .idrive-events-page, so
   nothing here can touch the taxi-leg tray or any other page's composer. */

/* The reused composer's trip-type pills (one-way / return / by the day)
   are not a real choice on this page - it only ever prices "by the day" -
   so the whole fieldset is hidden, same treatment the shared shell already
   gives it for self-drive (booking-shell__trip stays entirely out of the
   self-drive markup); trip_type itself is still forced server-side and
   client-side regardless (see events-wizard.js and EVENTS SLICE 3). */
.idrive-events-page .booking-shell__trip {
	display: none;
}

.events-wizard {
	margin-top: clamp( 1.5rem, 4vw, 2.5rem );
}

.events-wizard[hidden],
.events-tray[hidden] {
	display: none;
}

.events-wizard__route {
	color: var( --idrive-muted, #666 );
	font-size: 0.9rem;
}

.events-wizard__status {
	font-size: 0.9rem;
}

.events-wizard__status:empty {
	display: none;
}

.events-wizard__status.is-error {
	color: #b3261e;
}

.events-wizard__vehicles {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) );
	gap: clamp( 0.75rem, 2vw, 1.25rem );
	margin-top: 1rem;
}

.events-wizard__vehicle-card {
	border: 1px solid #e2e2e2;
	border-radius: 12px;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	background: #fff;
	min-width: 0;
}

.events-wizard__vehicle-card h3 {
	margin: 0;
	font-size: 1rem;
}

.events-wizard__vehicle-class {
	color: var( --idrive-muted, #666 );
	font-size: 0.85rem;
	margin: 0;
}

.events-wizard__vehicle-price {
	font-weight: 700;
	font-size: 1.1rem;
	margin: 0;
}

.events-wizard__vehicle-choose {
	margin-top: auto;
	width: 100%;
	min-height: 48px;
}

.events-wizard__qty {
	display: block;
	margin: 1rem 0;
}

.events-wizard__qty select {
	margin-inline-start: 0.5rem;
	min-height: 48px;
}

.events-wizard__extras {
	border: none;
	padding: 0;
	margin: 1rem 0;
}

.events-wizard__extras legend {
	font-weight: 600;
	padding: 0 0 0.5rem;
}

.events-wizard__no-extras {
	color: var( --idrive-muted, #666 );
	font-size: 0.9rem;
}

.events-wizard__extra {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0;
	flex-wrap: wrap;
}

.events-wizard__check {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 48px;
}

.events-wizard__extra select {
	min-height: 48px;
}

.events-wizard__line-total {
	font-size: 1.15rem;
	font-weight: 700;
}

.events-tray {
	margin-top: clamp( 2rem, 5vw, 3rem );
	border-top: 1px solid #e2e2e2;
	padding-top: 1.5rem;
}

.events-tray__list {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.events-tray__item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid #f0f0f0;
	flex-wrap: wrap;
}

.events-tray__item-desc {
	flex: 1 1 auto;
}

.events-tray__item-price {
	font-weight: 600;
}

.events-tray__total {
	font-size: 1.25rem;
	font-weight: 700;
}

.events-tray__actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 1rem 0;
}

.events-tray__actions .button {
	min-height: 48px;
}

.events-tray__note {
	color: var( --idrive-muted, #666 );
	font-size: 0.85rem;
}

/* EVENTS SLICE 5. The checkout panel's own customer-detail fields, shown
   once at least one journey is in the tray (toggled by events-wizard.js,
   never by CSS alone). */
.events-checkout {
	margin: 1.5rem 0;
	padding-top: 1rem;
	border-top: 1px solid #e2e2e2;
}

.events-checkout__field {
	display: block;
	margin: 0 0 1rem;
}

.events-checkout__field span {
	display: block;
	margin: 0 0 0.35rem;
	font-size: 0.85rem;
	color: var( --idrive-muted, #666 );
}

.events-checkout__field input,
.events-checkout__field textarea {
	width: 100%;
	min-height: 48px;
	padding: 0.6rem 0.75rem;
	border: 1px solid #ccc;
	border-radius: 8px;
	font: inherit;
	box-sizing: border-box;
}

.events-checkout__field textarea {
	min-height: 4.5rem;
}

.events-checkout__honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.events-checkout .button {
	min-height: 48px;
	width: 100%;
}

@media ( max-width: 480px ) {
	.events-wizard__vehicles {
		grid-template-columns: 1fr;
	}

	.events-tray__actions {
		flex-direction: column;
	}

	.events-tray__actions .button {
		width: 100%;
	}
}

/* ------------------------------------------------------------------------
 * EVENTS SLICE 6. Stepper, "Driver, or self-drive?" step, and the
 * "With driver" result badge - see events-wizard.js's own header comment
 * for the full scope note (with-driver unchanged/live, self-drive hands
 * off to the existing lead-capture entry point, badge is honest-static
 * until EVENTS SLICE 8). Tokens reused unmodified from app.css
 * (--idrive-green/-deep/-mist/-line/-ink/-muted/-shadow) and from the
 * site's one existing amber (--idrive-warning, already validated for the
 * legal-status pill and the fare-table draft notice - slice32-compat.css
 * documents "one amber in the system, not three"; --idrive-lime is not
 * used here as it measures below the WCAG 3:1 non-text-contrast floor on
 * white, per app.css's own SC 1.4.11 note).
 * ------------------------------------------------------------------------ */

.events-stepper[hidden] {
	display: none;
}

.events-stepper {
	margin: 1.5rem 0 0;
}

.events-stepper__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.78rem;
}

.events-stepper__list li {
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	background: var( --idrive-mist, #f2f6f3 );
	color: var( --idrive-muted, #64716c );
	border: 1px solid var( --idrive-line, #dce5df );
}

.events-stepper__list li.is-current {
	background: var( --idrive-green, #15944b );
	border-color: var( --idrive-green, #15944b );
	color: #fff;
	font-weight: 700;
}

.events-stepper__list li.is-done {
	color: var( --idrive-green-deep, #0f6f3b );
	border-color: var( --idrive-green, #15944b );
	background: #fff;
}

.events-driver-choice[hidden] {
	display: none;
}

.events-driver-choice {
	margin-top: clamp( 1.5rem, 4vw, 2.5rem );
}

.events-driver-choice__route {
	color: var( --idrive-muted, #64716c );
	font-size: 0.9rem;
	margin: 0 0 1rem;
}

.events-driver-choice__options {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: clamp( 0.75rem, 2vw, 1.25rem );
}

.events-driver-choice__option {
	border: 1px solid var( --idrive-line, #dce5df );
	border-radius: 1.25rem;
	padding: 1.25rem;
	background: #fff;
	box-shadow: var( --idrive-shadow, 0 10px 24px rgba( 21, 148, 75, .06 ) );
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.events-driver-choice__option.is-recommended {
	border-color: var( --idrive-green, #15944b );
	background: var( --idrive-mist, #f2f6f3 );
}

.events-driver-choice__option h3 {
	margin: 0;
	font-size: 1.05rem;
}

.events-driver-choice__option p {
	margin: 0;
	color: var( --idrive-ink-soft, #13211d );
	font-size: 0.92rem;
}

.events-driver-choice__badge {
	align-self: flex-start;
	background: var( --idrive-green, #15944b );
	color: #fff;
	font-size: 0.66rem;
	font-weight: 850;
	letter-spacing: .07em;
	text-transform: uppercase;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
}

.events-driver-choice__terms {
	margin: 0;
	display: grid;
	gap: 0.4rem;
	font-size: 0.85rem;
}

.events-driver-choice__terms div {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	border-top: 1px solid var( --idrive-line, #dce5df );
	padding-top: 0.4rem;
}

.events-driver-choice__terms div:first-child {
	border-top: 0;
	padding-top: 0;
}

.events-driver-choice__terms dt {
	margin: 0;
	color: var( --idrive-muted, #64716c );
	font-weight: 500;
}

.events-driver-choice__terms dd {
	margin: 0;
	color: var( --idrive-ink, #07110e );
	font-weight: 700;
	text-align: right;
}

.events-driver-choice__option .button {
	min-height: 48px;
	margin-top: auto;
}

.events-driver-choice__note {
	color: var( --idrive-muted, #64716c );
	font-size: 0.85rem;
	margin: 1rem 0 0;
}

.events-wizard__badge {
	align-self: flex-start;
	font-size: 0.63rem;
	font-weight: 850;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 0.2rem 0.5rem;
	border-radius: 999px;
}

.events-wizard__badge--driver {
	background: var( --idrive-mist, #f2f6f3 );
	color: var( --idrive-green-deep, #0f6f3b );
	border: 1px solid var( --idrive-green, #15944b );
}

/* Reserved for EVENTS SLICE 8, when self-drive results join this list -
   the site's one existing amber (see file header), not a new colour. */
.events-wizard__badge--self-drive {
	background: #fdf3e6;
	color: var( --idrive-warning, #8f5000 );
	border: 1px solid #edd5b0;
}

@media ( max-width: 480px ) {
	.events-driver-choice__options {
		grid-template-columns: 1fr;
	}
}