/* ============================================================
   UPPER REACH WINERY - EVENT BOOKING BLOCK
   Styles for [ur_event_booking], the block driven by the ACF
   fields on an event (event_booking_link, event_booking_embed,
   show_book_a_table_button). Loaded by the upper-reach-events
   mu-plugin alongside ur-events.css.

   Inside the Themer single-event sidebar the layout CSS on post
   2791 takes over for .ur-event-btn--ghost; these rules are what
   make the same markup work everywhere else, list cards included.
   ============================================================ */

.ur-event-booking__heading {
	margin-bottom: 14px;
}

.ur-event-booking {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
}

.ur-event-booking .ur-event-btn {
	display: block;
	width: 100%;
	text-align: center;
	cursor: pointer;
}

/* Secondary button (Book a Table) */
.ur-event-btn--ghost {
	background: transparent !important;
	color: var(--fl-global-dark-green, #304e1b) !important;
	border: 2px solid var(--fl-global-light-green, #7a8858) !important;
}

.ur-event-btn--ghost:hover,
.ur-event-btn--ghost:focus {
	background: var(--fl-global-dark-green, #304e1b) !important;
	border-color: var(--fl-global-dark-green, #304e1b) !important;
	color: #fff !important;
}

/* Third-party booking widget dropped straight into the sidebar */
.ur-event-booking__embed {
	width: 100%;
}

.ur-event-booking__embed iframe {
	display: block;
	width: 100%;
	border: 0;
	min-height: 420px;
}

.ur-event-booking__embed > *:last-child {
	margin-bottom: 0;
}

/* Card variant: inline buttons under each list-view event */
.ur-event-booking--card {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
}

.ur-event-booking--card .ur-event-btn {
	display: inline-block;
	width: auto;
	padding: 9px 20px !important;
	font-size: 12px !important;
}

@media (max-width: 500px) {
	.ur-event-booking--card {
		flex-direction: column;
		align-items: stretch;
	}

	.ur-event-booking--card .ur-event-btn {
		display: block;
		width: 100%;
	}
}