.awd-reservation-widget {
	display: contents;
	font-family: inherit;
}

.awd-reservation-widget * {
	box-sizing: border-box;
}

/* Fixed to the viewport (not the shortcode's position in the page flow) --
   same pattern as the Order Menu's .awd-order-cart, just anchored to the
   bottom-left corner instead of top-right. */
.awd-reservation-toggle {
	position: fixed;
	z-index: 2147482000;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 240px;
	min-height: 52px;
	border: 0;
	border-radius: 999px;
	padding: 13px 20px;
	background: var(--awd-reservation-accent-color, #006c38);
	color: #fff;
	box-shadow: 0 12px 30px var(--awd-reservation-shadow-color, rgba(16, 35, 26, .10));
	cursor: pointer;
	font: inherit;
	font-weight: 800;
	transform: translate(var(--awd-reservation-toggle-x, 0), var(--awd-reservation-toggle-y, 0));
}

.awd-reservation-toggle:hover {
	opacity: .92;
}

.awd-reservation-widget.is-open .awd-reservation-toggle {
	opacity: 0;
	pointer-events: none;
}

/* Opens upward from the toggle button since it now sits at the bottom of
   the viewport -- bottom-anchored instead of top-anchored, and the
   open/close transform direction flips to match (grows up, not down). */
.awd-reservation-drawer {
	position: fixed;
	z-index: 2147482000;
	width: min(380px, calc(100vw - 32px));
	max-height: calc(100vh - 24px - 102px);
	overflow: auto;
	display: grid;
	gap: 16px;
	padding: 0 16px 16px;
	border: 1px solid var(--awd-reservation-border-color, rgba(0, 108, 56, .14));
	border-radius: 18px;
	background: var(--awd-reservation-card-background, #fff);
	box-shadow: 0 14px 34px var(--awd-reservation-shadow-color, rgba(16, 35, 26, .10));
	opacity: 0;
	pointer-events: none;
	transform: translate(var(--awd-reservation-drawer-x, 0), var(--awd-reservation-drawer-y-closed, 12px));
	transition: opacity 180ms ease, transform 220ms ease;
}

.awd-reservation-widget.is-open .awd-reservation-drawer {
	opacity: 1;
	pointer-events: auto;
	transform: translate(var(--awd-reservation-drawer-x, 0), var(--awd-reservation-drawer-y-open, 0));
}

.awd-reservation-x-left .awd-reservation-toggle,
.awd-reservation-x-left .awd-reservation-drawer {
	left: 24px;
	right: auto;
}

.awd-reservation-x-center .awd-reservation-toggle,
.awd-reservation-x-center .awd-reservation-drawer {
	left: 50%;
	right: auto;
	--awd-reservation-toggle-x: -50%;
	--awd-reservation-drawer-x: -50%;
}

.awd-reservation-x-right .awd-reservation-toggle,
.awd-reservation-x-right .awd-reservation-drawer {
	left: auto;
	right: 24px;
}

.awd-reservation-y-bottom .awd-reservation-toggle {
	top: auto;
	bottom: 24px;
}

.awd-reservation-y-bottom .awd-reservation-drawer {
	top: auto;
	bottom: 24px;
	--awd-reservation-drawer-y-closed: 12px;
	--awd-reservation-drawer-y-open: 0;
}

.awd-reservation-y-top .awd-reservation-toggle {
	top: 24px;
	bottom: auto;
}

.awd-reservation-y-top .awd-reservation-drawer {
	top: 24px;
	bottom: auto;
	--awd-reservation-drawer-y-closed: -12px;
	--awd-reservation-drawer-y-open: 0;
}

.awd-reservation-y-center .awd-reservation-toggle {
	top: 50%;
	bottom: auto;
	--awd-reservation-toggle-y: -50%;
}

.awd-reservation-y-center .awd-reservation-drawer {
	top: 50%;
	bottom: auto;
	max-height: calc(100vh - 48px);
	--awd-reservation-drawer-y-closed: calc(-50% + 12px);
	--awd-reservation-drawer-y-open: -50%;
}

.awd-reservation-panel {
	display: grid;
	gap: 12px;
}

/* .awd-reservation-panel's own "display: grid" has the same specificity as
   the [hidden] attribute's UA-stylesheet "display: none" -- and since this
   authored rule loads later, it was winning and showing the Confirm panel
   even while it still had the hidden attribute (i.e. before any slot was
   picked). This rule outranks it explicitly. */
.awd-reservation-panel[hidden] {
	display: none;
}

/* Bled-out dark header bar, same pattern as the Order Menu's cart header
   (.awd-order-cart-head): negative side margins cancel the drawer's own
   padding so this sits flush at the top, rounded to match the drawer's own
   corners, white text on the accent color instead of colored text on the
   card background. */
.awd-reservation-panel h3 {
	margin: 0 -16px;
	padding: 16px 16px 14px;
	border-radius: 18px 18px 0 0;
	background: var(--awd-reservation-accent-color, #006c38);
	color: #fff;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.2;
}

.awd-reservation-widget form {
	display: grid;
	gap: 12px;
}

.awd-reservation-widget label {
	display: grid;
	gap: 6px;
	color: var(--awd-reservation-text-color, #10231a);
	font-weight: 800;
}

.awd-reservation-widget input,
.awd-reservation-widget textarea {
	width: 100%;
	border: 1px solid var(--awd-reservation-border-color, rgba(0, 108, 56, .28));
	border-radius: 12px;
	padding: 10px 12px;
	background: var(--awd-reservation-card-background, #fff);
	color: var(--awd-reservation-text-color, #10231a);
	font: inherit;
	font-weight: 400;
}

.awd-reservation-widget button[type="submit"] {
	width: 100%;
	border: 0;
	border-radius: 999px;
	padding: 12px 16px;
	background: var(--awd-reservation-accent-color, #006c38);
	color: #fff;
	cursor: pointer;
	font-weight: 900;
}

.awd-reservation-slots {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.awd-reservation-slot {
	border-radius: 999px !important;
	padding: 8px 14px !important;
	background: var(--awd-reservation-card-background, #fff) !important;
	color: var(--awd-reservation-text-color, #10231a) !important;
	border: 1px solid var(--awd-reservation-border-color, rgba(0, 108, 56, .28)) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	cursor: pointer;
}

.awd-reservation-slot:hover,
.awd-reservation-slot.is-selected {
	background: var(--awd-reservation-accent-color, #006c38) !important;
	color: #fff !important;
}

.awd-reservation-status {
	min-height: 20px;
	color: var(--awd-reservation-accent-color, #006c38);
	font-weight: 700;
}

.awd-reservation-status.is-error {
	color: #c21d12;
}

.awd-reservation-selected {
	font-weight: 800;
	color: var(--awd-reservation-accent-color, #006c38);
}

.awd-reservation-empty {
	color: var(--awd-reservation-description-color, #4c5d55);
}

.awd-reservation-confirm {
	padding-top: 12px;
	border-top: 1px solid var(--awd-reservation-border-color, rgba(0, 108, 56, .14));
}

/* Unlike the search panel's h3 (flush against the drawer's own top edge,
   where matching the drawer's corner radius makes sense), this header sits
   stacked lower in the drawer -- rounded corners there just look like a
   floating pill, so keep it square. */
.awd-reservation-confirm h3 {
	border-radius: 0;
}

@media (max-width: 480px) {
	.awd-reservation-x-left.awd-reservation-y-bottom .awd-reservation-toggle {
		bottom: 12px;
		left: 12px;
		width: calc(50vw - 18px);
		min-width: 0;
		min-height: 52px;
		padding: 12px 14px;
		font-size: 14px;
	}

	/* Below, EVERY x-anchor variant (left/center/right) collapses onto the
	   same symmetric-margin centering on narrow screens -- the desktop
	   left:24px/right:24px anchoring left an asymmetric 24px-vs-8px gap
	   once the drawer's own width was also capped to near-viewport-width
	   (e.g. x-left: left:24px + width:min(380px, 100vw-32px) leaves only
	   ~8px on the right on a 390px phone), which read as "not centered"
	   even though the desktop anchor was working as designed. Overriding
	   left/right/transform here, regardless of x-/y- class, means this
	   fix applies to every anchor combination (previously only x-left+
	   y-bottom and x-right had ANY mobile override at all -- x-left+
	   y-top, the config actually reported broken, had none). */
	.awd-reservation-drawer {
		left: 12px !important;
		right: 12px !important;
		width: calc(100vw - 24px) !important;
		transform: translateY(var(--awd-reservation-drawer-y-closed, 12px)) !important;
	}

	.awd-reservation-widget.is-open .awd-reservation-drawer {
		transform: translateY(var(--awd-reservation-drawer-y-open, 0)) !important;
	}

	.awd-reservation-x-left.awd-reservation-y-bottom .awd-reservation-drawer,
	.awd-reservation-x-right .awd-reservation-drawer {
		bottom: 12px;
		max-height: calc(100vh - 24px);
	}

	.awd-reservation-x-right .awd-reservation-toggle {
		right: 12px;
	}
}