/**
 * DDM Bin Booking wizard.
 *
 * Everything is scoped under .ddm-booking. Astra and Elementor both print
 * high-specificity page CSS (elementor_css_print_method is "internal" on this
 * site), so component rules are written as .ddm-booking .x rather than bare
 * .x, and layout-critical properties are stated explicitly instead of relying
 * on inheritance.
 */

.ddm-booking {
	/* Brand.
	   These were #f97316 / #ea580c (Tailwind orange-500/600) while the rest of
	   the site — Elementor kit Primary, Astra theme-color, every button in the
	   header, footer and page templates — uses #EE6E20 / #D45F16. Both oranges
	   were visible together on /bin-rentals/, where the header CTA sits directly
	   above the wizard buttons. Matched to the site palette rather than the other
	   way round: one variable here versus repainting every component there. */
	--ddm-orange: #ee6e20;
	--ddm-orange-dark: #d45f16;
	--ddm-orange-soft: #fff7ed;
	--ddm-dark: #111111;
	--ddm-body: #333333;
	--ddm-muted: #6b7280;
	--ddm-white: #ffffff;

	/* Surface */
	--ddm-border: #e5e7eb;
	--ddm-border-strong: #d1d5db;
	--ddm-surface: #ffffff;
	--ddm-surface-alt: #f9fafb;
	--ddm-danger: #b42318;
	--ddm-danger-bg: #fef3f2;
	--ddm-success: #027a48;

	--ddm-radius: 12px;
	--ddm-radius-sm: 8px;
	--ddm-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
	--ddm-shadow-lg: 0 4px 12px rgba(16, 24, 40, 0.08), 0 12px 28px rgba(16, 24, 40, 0.08);

	--ddm-gap: 24px;
	--ddm-tap: 44px;

	box-sizing: border-box;
	color: var(--ddm-body);
	font-size: 16px;
	line-height: 1.55;
	max-width: 1180px;
	margin-inline: auto;
	padding: 8px 0 48px;
}

.ddm-booking *,
.ddm-booking *::before,
.ddm-booking *::after {
	box-sizing: border-box;
}

.ddm-booking [hidden] {
	display: none !important;
}

.ddm-booking .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

/* -------------------------------------------------------------------------
 * Progress indicator
 * ---------------------------------------------------------------------- */

.ddm-booking .ddm-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
	counter-reset: none;
}

.ddm-booking .ddm-steps__item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 0 12px;
	margin: 0;
	text-align: left;
}

/*
 * Connector line. Drawn from the centre of this marker to the centre of the
 * next one, so it scales with the column width instead of being a fixed
 * length. left:50% + a marker-radius offset keeps it clear of the circle.
 */
.ddm-booking .ddm-steps__item:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 17px;
	left: calc(50% + 22px);
	right: calc(-50% + 22px);
	height: 2px;
	background: var(--ddm-border-strong);
	z-index: 0;
}

.ddm-booking .ddm-steps__item.is-complete:not(:last-child)::after {
	background: var(--ddm-orange);
}

.ddm-booking .ddm-steps__marker {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--ddm-border);
	color: var(--ddm-muted);
	font-weight: 700;
	font-size: 15px;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.ddm-booking .ddm-steps__check {
	display: none;
	width: 20px;
	height: 20px;
}

.ddm-booking .ddm-steps__item.is-active .ddm-steps__marker,
.ddm-booking .ddm-steps__item.is-complete .ddm-steps__marker {
	background: var(--ddm-orange);
	color: var(--ddm-white);
}

.ddm-booking .ddm-steps__item.is-complete .ddm-steps__num {
	display: none;
}

.ddm-booking .ddm-steps__item.is-complete .ddm-steps__check {
	display: block;
}

.ddm-booking .ddm-steps__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ddm-booking .ddm-steps__title {
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ddm-muted);
}

.ddm-booking .ddm-steps__item.is-active .ddm-steps__title {
	color: var(--ddm-orange);
}

.ddm-booking .ddm-steps__item.is-complete .ddm-steps__title {
	color: var(--ddm-dark);
}

.ddm-booking .ddm-steps__blurb {
	font-size: 13px;
	color: var(--ddm-muted);
}

@media (max-width: 780px) {
	.ddm-booking .ddm-steps__item {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 8px;
		padding: 0 4px;
	}

	.ddm-booking .ddm-steps__item:not(:last-child)::after {
		left: calc(50% + 20px);
		right: calc(-50% + 20px);
	}

	.ddm-booking .ddm-steps__blurb {
		display: none;
	}

	.ddm-booking .ddm-steps__title {
		font-size: 11px;
	}
}

/* -------------------------------------------------------------------------
 * Panels
 * ---------------------------------------------------------------------- */

.ddm-booking .ddm-panel__head {
	text-align: center;
	margin-bottom: 28px;
}

.ddm-booking .ddm-eyebrow {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ddm-orange);
}

.ddm-booking .ddm-panel__heading {
	margin: 0 0 12px;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1.15;
	font-weight: 800;
	color: var(--ddm-dark);
}

.ddm-booking .ddm-panel__heading:focus-visible {
	outline: 3px solid var(--ddm-orange);
	outline-offset: 4px;
	border-radius: 4px;
}

.ddm-booking .ddm-panel__intro {
	margin: 0 auto;
	max-width: 620px;
	color: var(--ddm-muted);
}

/* -------------------------------------------------------------------------
 * Step 1 — bin cards
 * 2 columns on desktop and tablet, 1 on mobile.
 * ---------------------------------------------------------------------- */

.ddm-booking .ddm-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ddm-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 641px) {
	.ddm-booking .ddm-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ddm-booking .ddm-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--ddm-surface);
	border: 1px solid var(--ddm-border);
	border-radius: var(--ddm-radius);
	box-shadow: var(--ddm-shadow);
	overflow: hidden;
	transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.ddm-booking .ddm-card:hover {
	box-shadow: var(--ddm-shadow-lg);
	transform: translateY(-2px);
}

.ddm-booking .ddm-card--popular {
	border-color: var(--ddm-orange);
	box-shadow: 0 0 0 1px var(--ddm-orange), var(--ddm-shadow-lg);
}

.ddm-booking .ddm-card--unavailable {
	opacity: 0.62;
}

/*
 * "Most Popular" ribbon. Sits on the card's top edge, centred, with the card's
 * own overflow:hidden clipping nothing because the badge is inset rather than
 * rotated off-corner — which keeps it legible at every breakpoint and avoids
 * the transform/overflow interaction that clips diagonal ribbons.
 */
.ddm-booking .ddm-card__ribbon {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	padding: 5px 16px;
	background: var(--ddm-orange);
	color: var(--ddm-white);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: 0 0 var(--ddm-radius-sm) var(--ddm-radius-sm);
	white-space: nowrap;
}

/*
 * The media area is a fixed 8:5 frame — the same ratio as the placeholder
 * artwork — so every card keeps an identical height whether it shows a
 * photograph, a wide branded banner or the SVG fallback. Without the frame a
 * 2048x768 banner and a 240x150 SVG produce cards whose titles and prices sit
 * at visibly different heights.
 */
.ddm-booking .ddm-card__media {
	display: grid;
	place-items: center;
	padding: 28px 20px 10px;
	background: var(--ddm-white);
}

/*
 * object-fit: contain, deliberately not cover. The bin artwork carries the
 * logo and phone number out to the edge of the canvas, so cropping it destroys
 * trading information. Letterboxing an off-ratio image is the cheaper cost.
 *
 * The inline SVG needs no object-fit: its default preserveAspectRatio
 * (xMidYMid meet) already behaves like contain, and its viewBox is 8:5, so it
 * fills the frame exactly.
 */
.ddm-booking .ddm-card__img {
	display: block;
	width: 100%;
	max-width: 320px;
	aspect-ratio: 8 / 5;
	height: auto;
	object-fit: contain;
}

.ddm-booking .ddm-card__body {
	flex: 1 1 auto;
	padding: 12px 22px 18px;
}

.ddm-booking .ddm-card__title {
	margin: 0 0 8px;
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--ddm-dark);
}

.ddm-booking .ddm-card__blurb {
	margin: 0 0 16px;
	color: var(--ddm-muted);
	font-size: 0.95rem;
}

.ddm-booking .ddm-card__features {
	list-style: none;
	margin: 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--ddm-border);
	display: grid;
	gap: 10px;
}

.ddm-booking .ddm-card__feature {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--ddm-dark);
}

.ddm-booking .ddm-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: var(--ddm-orange);
}

.ddm-booking .ddm-card__rate {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 22px;
	background: var(--ddm-surface-alt);
	border-top: 1px solid var(--ddm-border);
}

.ddm-booking .ddm-card__rate-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ddm-muted);
}

.ddm-booking .ddm-card__rate-value {
	font-size: 1.75rem;
	font-weight: 800;
	color: var(--ddm-orange);
	line-height: 1;
}

.ddm-booking .ddm-card__cta {
	margin: 16px 22px 22px;
}

.ddm-booking .ddm-card__unavailable {
	margin: 16px 22px 22px;
	padding: 12px;
	text-align: center;
	background: var(--ddm-surface-alt);
	border-radius: var(--ddm-radius-sm);
	color: var(--ddm-muted);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Buttons
 * ---------------------------------------------------------------------- */

.ddm-booking .ddm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--ddm-tap);
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: var(--ddm-radius-sm);
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.ddm-booking .ddm-btn:focus-visible {
	outline: 3px solid var(--ddm-dark);
	outline-offset: 2px;
}

.ddm-booking .ddm-btn[disabled],
.ddm-booking .ddm-btn[aria-busy="true"] {
	opacity: 0.6;
	cursor: not-allowed;
}

.ddm-booking .ddm-btn--primary {
	width: 100%;
	background: var(--ddm-orange);
	border-color: var(--ddm-orange);
	color: var(--ddm-white);
}

.ddm-booking .ddm-btn--primary:hover:not([disabled]) {
	background: var(--ddm-orange-dark);
	border-color: var(--ddm-orange-dark);
}

.ddm-booking .ddm-btn--ghost {
	background: transparent;
	border-color: var(--ddm-border-strong);
	color: var(--ddm-dark);
}

.ddm-booking .ddm-btn--ghost:hover {
	border-color: var(--ddm-dark);
	background: var(--ddm-surface-alt);
}

.ddm-booking .ddm-btn--link {
	min-height: 0;
	padding: 6px 4px;
	background: none;
	border: 0;
	color: var(--ddm-orange);
	text-transform: none;
	text-decoration: underline;
}

.ddm-booking .ddm-btn__arrow {
	width: 16px;
	height: 16px;
}

/* -------------------------------------------------------------------------
 * Step 2 — form
 * ---------------------------------------------------------------------- */

.ddm-booking .ddm-selected {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	margin-bottom: 24px;
	background: var(--ddm-orange-soft);
	border: 1px solid var(--ddm-orange);
	border-radius: var(--ddm-radius);
}

.ddm-booking .ddm-selected__info {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
}

.ddm-booking .ddm-selected__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ddm-muted);
}

.ddm-booking .ddm-selected__name {
	font-size: 1.15rem;
	color: var(--ddm-dark);
}

.ddm-booking .ddm-selected__rate {
	font-weight: 700;
	color: var(--ddm-orange);
}

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

@media (min-width: 768px) {
	.ddm-booking .ddm-fields {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ddm-booking .ddm-field--full {
		grid-column: 1 / -1;
	}
}

.ddm-booking .ddm-field__label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ddm-dark);
}

.ddm-booking .ddm-field__req {
	color: var(--ddm-orange);
}

.ddm-booking .ddm-input {
	display: block;
	width: 100%;
	min-height: var(--ddm-tap);
	padding: 10px 14px;
	font-family: inherit;
	font-size: 1rem;
	color: var(--ddm-body);
	background: var(--ddm-white);
	border: 1px solid var(--ddm-border-strong);
	border-radius: var(--ddm-radius-sm);
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.ddm-booking .ddm-input:focus {
	outline: none;
	border-color: var(--ddm-orange);
	box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.22);
}

.ddm-booking .ddm-input[readonly] {
	background: var(--ddm-surface-alt);
	color: var(--ddm-muted);
	cursor: default;
}

.ddm-booking .ddm-input[aria-invalid="true"] {
	border-color: var(--ddm-danger);
}

.ddm-booking .ddm-field__hint {
	margin: 6px 0 0;
	font-size: 0.85rem;
	color: var(--ddm-muted);
}

.ddm-booking .ddm-field__error {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 6px 0 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ddm-danger);
}

/* Not colour alone: every inline error carries a leading warning glyph. */
.ddm-booking .ddm-field__error::before {
	content: "!";
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	border-radius: 50%;
	background: var(--ddm-danger);
	color: var(--ddm-white);
	font-size: 11px;
	font-weight: 800;
}

.ddm-booking .ddm-quote {
	margin-top: 22px;
	padding: 16px 20px;
	background: var(--ddm-surface-alt);
	border: 1px solid var(--ddm-border);
	border-radius: var(--ddm-radius);
}

.ddm-booking .ddm-quote__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.ddm-booking .ddm-quote__value {
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--ddm-orange);
}

.ddm-booking .ddm-quote__note {
	margin: 6px 0 0;
	font-size: 0.85rem;
	color: var(--ddm-muted);
}

.ddm-booking .ddm-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	margin-top: 28px;
}

.ddm-booking .ddm-actions .ddm-btn--primary {
	width: auto;
	min-width: 200px;
	flex: 1 1 200px;
}

.ddm-booking .ddm-actions .ddm-btn--ghost {
	flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
 * Step 3 — review & checkout
 * ---------------------------------------------------------------------- */

.ddm-booking .ddm-review {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: start;
}

/*
 * The <form> is the two-column grid, not .ddm-review.
 *
 * The payment box must span both columns AND stay inside the form, because
 * #order_review holds the payment inputs, the nonce and the place-order
 * button. Making the form the grid parent is what lets both be true; see the
 * note in templates/step-3.php.
 *
 * Below 900px everything stacks in source order: summary, details, payment.
 */
.ddm-booking .ddm-review > form.ddm-checkout {
	display: grid;
	grid-template-columns: 1fr;
	/* Row gap is the space between the details card and the payment card
	   stacked beneath it; the column gap separates those from the summary. */
	column-gap: 28px;
	row-gap: 20px;
	align-items: start;
}

/*
 * Details and payment each read as a card, matching the summary panel.
 */
.ddm-booking .ddm-review__checkout,
.ddm-booking .ddm-checkout__review {
	padding: 22px;
	background: var(--ddm-white);
	border: 1px solid var(--ddm-border);
	border-radius: var(--ddm-radius);
}

/*
 * Astra prints this inline, so it is not in any theme stylesheet:
 *
 *   .woocommerce-page.woocommerce-checkout form #customer_details.col2-set {
 *       width: 55%; float: left; margin-right: 4.347826087%; }
 *
 * At (1,3,1) it outranks anything unweighted here, and it is why the billing
 * fields filled only 55% of their cell while the payment card beneath them
 * filled all of it. The grid cell sets the width; the float and percentage are
 * left over from a stock two-column checkout.
 */
.ddm-booking .ddm-checkout #customer_details.col2-set,
.ddm-booking .ddm-checkout .col2-set {
	float: none !important;
	width: 100% !important;
	margin-right: 0 !important;
}

@media (min-width: 900px) {
	.ddm-booking .ddm-review > form.ddm-checkout {
		grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
	}

	/*
	 * The summary spans both rows.
	 *
	 * Left in row 1 alone it is the tallest item there, so row 1 grew to the
	 * summary's height and the payment card — which sits in row 2 — started
	 * below all of it. That left a gap of the summary's height minus the
	 * billing card's, with row-gap merely added on top; setting row-gap to
	 * 20px could never close it.
	 *
	 * Spanning both rows takes the summary out of the row-sizing contest, so
	 * each row is sized by the column-2 card in it and the only space between
	 * those two cards is row-gap.
	 */
	.ddm-booking .ddm-review__summary {
		position: sticky;
		top: 24px;
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.ddm-booking .ddm-review__checkout {
		grid-column: 2;
	}

	/* Directly beneath the billing fields, in the same column — not spanning
	   both. Its own grid cell, so it is placed rather than left to flow. */
	.ddm-booking .ddm-checkout__review {
		grid-column: 2;
	}
}

.ddm-booking .ddm-review__summary {
	padding: 22px;
	background: var(--ddm-surface-alt);
	border: 1px solid var(--ddm-border);
	border-radius: var(--ddm-radius);
}

.ddm-booking .ddm-review__subhead {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ddm-dark);
}

.ddm-booking .ddm-review__summary .ddm-review__subhead:not(:first-child) {
	margin-top: 26px;
}

.ddm-booking .ddm-summary {
	margin: 0;
	display: grid;
	gap: 10px;
}

.ddm-booking .ddm-summary__row {
	display: grid;
	grid-template-columns: 40% 1fr;
	gap: 10px;
	align-items: start;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--ddm-border);
}

.ddm-booking .ddm-summary__row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.ddm-booking .ddm-summary dt {
	margin: 0;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--ddm-muted);
}

.ddm-booking .ddm-summary dd {
	margin: 0;
	font-size: 0.95rem;
	color: var(--ddm-dark);
	overflow-wrap: anywhere;
}

.ddm-booking .ddm-totals__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--ddm-border);
}

.ddm-booking .ddm-totals__row--grand {
	border-bottom: 0;
	margin-top: 4px;
	padding-top: 14px;
	border-top: 2px solid var(--ddm-dark);
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--ddm-dark);
}

.ddm-booking .ddm-totals__row--grand .ddm-totals__value {
	color: var(--ddm-orange);
}

.ddm-booking .ddm-totals__label {
	color: var(--ddm-muted);
}

.ddm-booking .ddm-totals__row--grand .ddm-totals__label {
	color: var(--ddm-dark);
}

.ddm-booking .ddm-totals__value {
	font-weight: 700;
	color: var(--ddm-dark);
	white-space: nowrap;
}

.ddm-booking .ddm-review__note {
	margin: 18px 0;
	font-size: 0.85rem;
	color: var(--ddm-muted);
}

/* WooCommerce checkout, restyled to match without fighting its markup. */
.ddm-booking .ddm-checkout .form-row {
	display: block;
	margin: 0 0 16px;
	padding: 0;
}

.ddm-booking .ddm-checkout label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ddm-dark);
}

.ddm-booking .ddm-checkout .input-text,
.ddm-booking .ddm-checkout select,
.ddm-booking .ddm-checkout textarea {
	display: block;
	width: 100%;
	min-height: var(--ddm-tap);
	padding: 10px 14px;
	font-family: inherit;
	font-size: 1rem;
	background: var(--ddm-white);
	border: 1px solid var(--ddm-border-strong);
	border-radius: var(--ddm-radius-sm);
}

.ddm-booking .ddm-checkout .input-text:focus,
.ddm-booking .ddm-checkout select:focus,
.ddm-booking .ddm-checkout textarea:focus {
	outline: none;
	border-color: var(--ddm-orange);
	box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.22);
}

.ddm-booking .ddm-checkout .col2-set .col-2:empty {
	display: none;
}

/*
 * Payment sits below the billing fields, not beside them.
 *
 * WooCommerce's own woocommerce-layout.css floats .col-1 at 48%, and
 * #order_review is not floated, so it flowed into the ~52% left over next to
 * the billing fields. Inside this wizard — which already spends a column on
 * the booking summary — that made a third column of roughly 180px holding the
 * card form, the privacy notice and Place Order. Card fields, and Stripe's
 * iframes in particular, have no business in a column that narrow.
 *
 * Done in CSS rather than by moving #payment in the DOM, deliberately:
 * WooCommerce replaces #payment wholesale on every update_checkout AJAX
 * response, so a moved node is undone on the next cart update, and step-3.php
 * documents that form.checkout itself must never be replaced because
 * checkout.js caches it at DOM ready.
 */
.ddm-booking .ddm-checkout .col2-set,
.ddm-booking .ddm-checkout .col2-set .col-1 {
	float: none;
	width: 100%;
}

/*
 * The payment area fills its grid cell and carries no chrome of its own.
 *
 * !important is load-bearing here. Astra prints this into the page as inline
 * CSS — not into any of its stylesheet files, so grepping the theme for it
 * finds nothing:
 *
 *   .woocommerce-page.woocommerce-checkout form #order_review {
 *       width: 40%; float: right; margin-right: 0; clear: right; }
 *   form #order_review:not(.elementor-widget-woocommerce-checkout-page #order_review) {
 *       padding: 0 2em; border-width: 0 2px 2px; border-style: solid; }
 *
 * That selector scores (1,3,1) against (1,2,0) here, so an unweighted rule
 * loses however it is written. Those two declarations were the whole problem:
 * the 40% right float is what pushed the payment box into a narrow column
 * beside the billing fields, and border-width: 0 2px 2px is the grey rule
 * drawn down either side of it. Note the border is on #order_review, not
 * #payment — resetting #payment alone leaves it on screen.
 *
 * Both are written for a stock two-column checkout. Inside this grid the cell
 * already decides position and width, so they are neutralised outright.
 */
.ddm-booking .ddm-checkout #order_review,
.ddm-booking .ddm-checkout #payment {
	float: none !important;
	clear: none !important;
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.ddm-booking .ddm-checkout #order_review_heading {
	display: none;
}

/*
 * No card of its own. The payment area used to carry a tinted panel and a grey
 * border, which read as a third box stacked against the summary card and the
 * billing fieldset. It sits under its own "Your Details & Payment" heading, so
 * the boundary is already established.
 */
.ddm-booking .ddm-checkout #payment {
	margin-top: 20px;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
}

.ddm-booking .ddm-checkout #payment ul.payment_methods {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}

.ddm-booking .ddm-checkout #payment ul.payment_methods li {
	margin-bottom: 10px;
}

.ddm-booking .ddm-checkout #payment label {
	display: inline-block;
	text-transform: none;
	letter-spacing: 0;
	font-size: 1rem;
}

.ddm-booking .ddm-checkout #place_order {
	width: 100%;
	min-height: var(--ddm-tap);
	padding: 14px 22px;
	background: var(--ddm-orange);
	border: 1px solid var(--ddm-orange);
	border-radius: var(--ddm-radius-sm);
	color: var(--ddm-white);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}

.ddm-booking .ddm-checkout #place_order:hover {
	background: var(--ddm-orange-dark);
}

/*
 * The order review table repeats the pricing already shown in the summary
 * panel, so it is hidden visually while remaining in the DOM — WooCommerce
 * re-renders it on every update_checkout and reads from it.
 */
.ddm-booking .ddm-checkout .woocommerce-checkout-review-order-table {
	display: none;
}

/* Wide content must scroll inside itself, never widen the page. */
.ddm-booking table {
	max-width: 100%;
}

/* -------------------------------------------------------------------------
 * Notices
 * ---------------------------------------------------------------------- */

.ddm-booking .ddm-alert,
.ddm-booking .ddm-notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 24px;
	padding: 14px 18px;
	border-radius: var(--ddm-radius-sm);
	border: 1px solid var(--ddm-danger);
	background: var(--ddm-danger-bg);
	color: var(--ddm-danger);
	font-weight: 600;
}

.ddm-booking .ddm-notice--warning {
	border-color: #f59e0b;
	background: #fffbeb;
	color: #92400e;
}

.ddm-booking .ddm-notice p,
.ddm-booking .ddm-alert p {
	margin: 0;
}

.ddm-booking .ddm-booking--empty {
	padding: 24px;
	text-align: center;
}

.ddm-booking .woocommerce-error,
.ddm-booking .woocommerce-message,
.ddm-booking .woocommerce-info {
	margin: 0 0 20px;
	padding: 14px 18px;
	list-style: none;
	border-radius: var(--ddm-radius-sm);
	border: 1px solid var(--ddm-border-strong);
	background: var(--ddm-surface-alt);
}

.ddm-booking .woocommerce-error {
	border-color: var(--ddm-danger);
	background: var(--ddm-danger-bg);
	color: var(--ddm-danger);
}

/* -------------------------------------------------------------------------
 * Motion
 * ---------------------------------------------------------------------- */

.ddm-booking .ddm-panel {
	animation: ddm-fade 0.22s ease both;
}

@keyframes ddm-fade {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ddm-booking *,
	.ddm-booking *::before,
	.ddm-booking *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}