/*
 * PCS booking panel — desktop card + shared traveller control.
 * See pcs-booking-panel-desktop.php for the constraint list.
 *
 * THREE BLOCKS, and the split matters:
 *
 *   A. SHARED      — the traveller control (collapsed field + stepper panel + Apply)
 *                    and the visual hiding of WooCommerce's own person rows. These run
 *                    at every width, because the same component is now used inside the
 *                    mobile drawer too.
 *   B. DESKTOP     — @media (min-width: 768px): the card, price header, section
 *                    headings, running total, the two CTAs, and desktop ordering.
 *   C. MOBILE      — @media (max-width: 767px): ordering only, so the traveller control
 *                    sits at the top of the drawer where the person rows used to be.
 *                    The drawer itself, the bottom bar and the single mobile CTA remain
 *                    owned entirely by puntacana-select-operations/assets/booking-panel.css.
 *
 * Token names are the real ones in mu-plugins/pcs-design-tokens/tokens.css, each with a
 * literal fallback because that file is currently staging-only.
 */

/* ============================================================
 * A. SHARED — traveller control, both widths
 * ========================================================== */

/* WooCommerce's own person rows stay in the DOM and keep working; they are only
 * visually hidden. Never display:none — the inputs must remain real for WC Bookings'
 * pricing and validation, which the steppers drive. */
.pcs-booking-panel .wc-bookings-booking-form > .form-field[class*="wc_bookings_field_persons"] {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.pcs-bpd-travellers { margin-top: var(--space-4, 16px); }

/* ATV's record-only headcount rows. Same treatment and same reason as the person
 * rows above: visually hidden, never display:none, because pcs_adult_headcount and
 * pcs_children_headcount are still the inputs that submit. The collapsed control
 * the steppers live in is injected into this same wrapper, so it keeps the
 * position the plugin's own markup already had. */
.pcs-buggy-headcount-field > p.form-field {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.pcs-bpd-hc-note {
	margin: 4px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--color-text-secondary, #61707C);
}

.pcs-bpd-control {
	position: relative;
	width: 100%;
	text-align: left;
	border: 1px solid var(--color-border, #E4DED3);
	border-radius: var(--radius-control, 9px);
	background: var(--color-bg-surface, #fff);
	padding: 18px 40px 10px 14px;
	font-family: var(--font-body, "Manrope", sans-serif);
	font-size: var(--text-base, 1rem);
	font-weight: 600;
	color: var(--color-text, #1E2933);
	cursor: pointer;
}
.pcs-bpd-control:focus-visible { outline: 3px solid rgba(24,183,178,.45); outline-offset: 1px; }
.pcs-bpd-control-l {
	position: absolute; top: -8px; left: 12px;
	background: var(--color-bg-surface, #fff);
	padding: 0 6px;
	font-size: var(--text-xs, .8rem);
	font-weight: 700;
	color: var(--color-text-muted, #61707C);
}
.pcs-bpd-control::after {
	content: "";
	position: absolute; right: 16px; top: 50%;
	width: 8px; height: 8px;
	border-right: 2px solid var(--color-text-muted, #61707C);
	border-bottom: 2px solid var(--color-text-muted, #61707C);
	transform: translateY(-70%) rotate(45deg);
}
.pcs-bpd-control[aria-expanded="true"] {
	border-color: var(--color-selected, #18B7B2);
	box-shadow: 0 0 0 3px rgba(24,183,178,.16);
}
.pcs-bpd-control[aria-expanded="true"] .pcs-bpd-control-l { color: var(--color-link, #0D6E8C); }
.pcs-bpd-control[aria-expanded="true"]::after { transform: translateY(-20%) rotate(-135deg); }

.pcs-bpd-pop {
	margin-top: var(--space-3, 12px);
	border: 1px solid var(--color-border, #E4DED3);
	border-radius: var(--radius-card, 14px);
	background: #FCFCFA;
	padding: var(--space-4, 16px);
}
.pcs-bpd-pop[hidden] { display: none; }

.pcs-bpd-row {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--space-4, 16px);
	padding: var(--space-3, 12px) 0;
}
.pcs-bpd-row + .pcs-bpd-row { border-top: 1px solid var(--color-border, #E4DED3); }
.pcs-bpd-row-n { font-size: var(--text-base, 1rem); font-weight: 700; color: var(--color-text, #1E2933); }
.pcs-bpd-row-p { font-size: var(--text-sm, .9rem); font-weight: 700; color: var(--color-link, #0D6E8C); }
.pcs-bpd-row-p.is-free { color: var(--color-success, #166534); }

.pcs-bpd-step { display: flex; align-items: center; gap: var(--space-3, 12px); }
.pcs-bpd-step button {
	width: 40px; height: 40px;           /* 40px: comfortable touch target inside the drawer */
	border-radius: 100px;
	border: 1.5px solid var(--color-selected, #18B7B2);
	background: var(--color-bg-surface, #fff);
	color: var(--color-link, #0D6E8C);
	font-size: 20px; line-height: 1; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
}
.pcs-bpd-step button:disabled { color: #C9CFD4; border-color: #EDEAE3; cursor: default; }
.pcs-bpd-step output { min-width: 24px; text-align: center; font-weight: 800; }

.pcs-bpd-apply {
	display: block; width: 100%;
	margin-top: var(--space-4, 16px);
	padding: 14px 12px;
	border-radius: var(--radius-button, 9px);
	font-family: var(--font-body, "Manrope", sans-serif);
	font-size: var(--text-sm, .9rem);
	font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
	cursor: pointer;
	/* outline, never amber: Book now is the only amber action anywhere in this panel */
	background: var(--color-bg-surface, #fff);
	color: var(--color-secondary, #0A2E4D);
	border: 1.5px solid var(--color-secondary, #0A2E4D);
}
.pcs-bpd-apply:disabled { background: #EFEDE8; color: #A9B2B9; border-color: #EFEDE8; cursor: default; }


/* ============================================================
 * B. DESKTOP
 * ========================================================== */
@media (min-width: 768px) {

	.pcs-booking-panel {
		gap: 0;
		padding: var(--space-5, 24px);
		box-shadow: 0 1px 2px rgba(10,46,77,.05), 0 8px 24px rgba(10,46,77,.07);
	}

	/* Panel-level order. form.cart is nested inside .ct-product-add-to-cart, so the
	 * price header must be a direct child of the panel to sit above the departure
	 * note, the divider and the confirmation badge. Confirmed against the live DOM. */
	.pcs-booking-panel > .pcs-bpd-head           { order: 1; }
	.pcs-booking-panel > .pcs-departure-note     { order: 2; }
	.pcs-booking-panel > .ct-product-divider     { order: 3; }
	.pcs-booking-panel > .ct-product-add-to-cart { order: 4; }
	.pcs-booking-panel > .pcs-confirmation-explainer,
	.pcs-booking-panel > .pcs-confirmation-badge { order: 5; }

	.pcs-booking-panel > .pcs-departure-note {
		text-align: center;
		font-size: var(--text-xs, .8rem);
		color: var(--color-text-muted, #61707C);
		margin: 0 0 var(--space-2, 8px);
	}

	.pcs-booking-panel form.cart,
	.pcs-booking-panel .wc-bookings-booking-form { display: flex; flex-direction: column; }

	.pcs-booking-panel .wc-bookings-booking-form { order: 20; }
	.pcs-booking-panel .pcs-pickup-zone-field    { order: 30; }
	.pcs-bpd-travellers                          { order: 40; }
	.pcs-bpd-total                               { order: 50; }
	.pcs-bpd-ctas                                { order: 60; }
	.pcs-booking-panel .wc-bookings-date-picker  { order: 10; }

	/* Both still compute and still drive .pcs-bpd-total; hidden only because the panel
	 * now shows that figure once, above the CTAs. Mobile keeps them visible. */
	.pcs-booking-panel .wc-bookings-booking-cost,
	.pcs-booking-panel .pcs-price-breakdown {
		position: absolute !important;
		width: 1px; height: 1px; overflow: hidden;
		clip: rect(0 0 0 0); clip-path: inset(50%);
	}

	.pcs-bpd-head {
		text-align: center;
		padding-bottom: var(--space-4, 16px);
		margin-bottom: var(--space-2, 8px);
		border-bottom: 1px solid var(--color-border, #E4DED3);
	}
	.pcs-bpd-from { font-size: var(--text-sm, .9rem); font-weight: 700; color: var(--color-link, #0D6E8C); }
	.pcs-bpd-price {
		font-size: var(--text-2xl, 2.4rem); font-weight: 800;
		color: var(--pcs-navy, #0A2E4D); line-height: 1.1; letter-spacing: -.5px;
	}
	.pcs-bpd-price .amount { font-size: inherit; font-weight: inherit; color: inherit; }
	.pcs-bpd-per {
		display: block; font-size: var(--text-xs, .8rem);
		color: var(--color-text-muted, #61707C); margin-top: var(--space-1, 4px);
	}

	.pcs-bpd-h {
		font-family: var(--font-body, "Manrope", sans-serif);
		font-size: var(--text-md, 1.15rem); font-weight: 700;
		color: var(--pcs-navy, #0A2E4D);
		margin: 0 0 var(--space-3, 12px);
		padding-top: var(--space-5, 24px);
		border-top: 1px solid var(--color-border, #E4DED3);
	}
	.pcs-bpd-h.is-first { border-top: 0; padding-top: var(--space-4, 16px); }

	.pcs-bpd-step button { width: 34px; height: 34px; font-size: 19px; }

	.pcs-bpd-total {
		margin-top: var(--space-5, 24px);
		padding-top: var(--space-4, 16px);
		border-top: 1px solid var(--color-border, #E4DED3);
		text-align: center;
	}
	.pcs-bpd-total[hidden] { display: none; }
	.pcs-bpd-total-l { font-size: var(--text-sm, .9rem); font-weight: 700; color: var(--color-link, #0D6E8C); }
	.pcs-bpd-total-v {
		font-size: var(--text-xl, 1.9rem); font-weight: 800;
		color: var(--pcs-navy, #0A2E4D); line-height: 1.2;
	}
	.pcs-bpd-total-v .amount { font-size: inherit; font-weight: inherit; color: inherit; }
	.pcs-bpd-total-n {
		font-size: var(--text-xs, .8rem); color: var(--color-text-muted, #61707C);
		margin-top: var(--space-2, 8px); line-height: 1.5;
	}

	/* WooCommerce's own button keeps doing the submitting; hidden from sight only.
	 * width/height need !important: an inline stylesheet on this site sets
	 * `.single-product .single_add_to_cart_button { width: 100% }`, which otherwise
	 * wins and leaves a clipped but full-width absolutely-positioned box. It is out of
	 * flow and clip-path already removes it from hit-testing, but pointer-events:none
	 * makes that explicit rather than relying on that interaction. Programmatic
	 * .click() from the CTAs is unaffected by pointer-events.
	 *
	 * SPECIFICITY, measured live rather than assumed — this took three attempts:
	 *   - a bare !important loses: the competing inline <style> block is ALSO
	 *     !important;
	 *   - the selector that actually wins there is
	 *     `.single-product button[type="submit"].button`, which scores (0,3,1) —
	 *     NOT the (0,2,0) `.single-product .single_add_to_cart_button` in the same
	 *     rule's selector list;
	 *   - `.pcs-booking-panel form.cart .wc-bookings-booking-form-button` is also
	 *     (0,3,1), so it TIED and lost on document order, the inline block being later.
	 * Qualifying the last class with its element takes this to (0,3,2), which wins on
	 * specificity and no longer depends on source order. */
	.pcs-booking-panel form.cart button.wc-bookings-booking-form-button {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		min-height: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		pointer-events: none;
	}

	.pcs-bpd-ctas {
		display: grid; grid-template-columns: 1fr 1fr;
		gap: var(--space-3, 12px); margin-top: var(--space-4, 16px);
	}
	.pcs-bpd-cta {
		padding: 14px 10px;
		border-radius: var(--radius-button, 9px);
		font-family: var(--font-body, "Manrope", sans-serif);
		font-size: var(--text-sm, .9rem); font-weight: 800;
		letter-spacing: .05em; text-transform: uppercase;
		text-align: center; cursor: pointer; border: 1.5px solid transparent;
	}
	.pcs-bpd-cta-secondary {
		background: var(--color-bg-surface, #fff);
		border-color: var(--color-secondary, #0A2E4D);
		color: var(--color-secondary, #0A2E4D);
	}
	.pcs-bpd-cta-primary { background: var(--color-primary-cta, #C97824); color: #fff; }
	.pcs-bpd-cta:disabled { opacity: .45; cursor: default; }
	.pcs-bpd-cta:focus-visible { outline: 3px solid rgba(24,183,178,.45); outline-offset: 2px; }

	.pcs-bpd-ctas[data-state="blocked"] .pcs-bpd-cta-secondary { display: none; }
	.pcs-bpd-ctas[data-state="blocked"] .pcs-bpd-cta-primary { grid-column: 1 / -1; }
}


/* ============================================================
 * C. MOBILE — ordering only
 * ========================================================== */
@media (max-width: 767px) {

	/* The traveller control lives in form.cart (so desktop can order it after Pickup
	 * without a DOM move). On mobile it is pulled to the top of the drawer, where the
	 * person rows it replaces used to be. Ordering only — nothing here restyles the
	 * drawer, the bottom bar or the mobile CTA, all of which stay owned by
	 * puntacana-select-operations/assets/booking-panel.css. */
	.pcs-booking-panel form.cart { display: flex; flex-direction: column; }

	.pcs-bpd-travellers                          { order: 10; }
	.pcs-booking-panel .wc-bookings-booking-form { order: 20; }
	.pcs-booking-panel .pcs-pickup-zone-field    { order: 30; }
	.pcs-booking-panel .wc-bookings-booking-form-button { order: 40; }

	/* desktop-only furniture must never appear in the drawer */
	.pcs-bpd-head,
	.pcs-bpd-h,
	.pcs-bpd-total,
	.pcs-bpd-ctas { display: none !important; }
}