/**
 * PerfumeValet Upsell — bottom-sheet UI.
 *
 * Self-contained: every token and style lives here. No dependency on
 * theme CSS or theme CSS variables.
 */

/* -------------------------------------------------------------------------
 * Design tokens (plugin-owned).
 * ---------------------------------------------------------------------- */
.pvu-upsell {
	--pvu-green: #0f4c45;
	--pvu-green-dark: #0b3c37;
	--pvu-paper: #fffdfa;
	--pvu-cream: #f7f3ed;
	--pvu-ink: #1b1b1b;
	--pvu-muted: #5e5e5e;
	--pvu-line: #e8dfd3;
	--pvu-gold: #b88a44;

	--pvu-radius: 20px;
	--pvu-shadow: 0 -12px 40px rgba(11, 60, 55, 0.18);
	--pvu-ease: cubic-bezier(0.22, 1, 0.36, 1);

	--pvu-font: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* -------------------------------------------------------------------------
 * Root container: fixed overlay layer. Pointer-inert while closed.
 * ---------------------------------------------------------------------- */
.pvu-upsell {
	position: fixed;
	inset: 0;
	z-index: 999999;
	pointer-events: none;
	visibility: hidden;
	font-family: var(--pvu-font);
	line-height: 1.5;
	box-sizing: border-box;
}

.pvu-upsell[data-open="true"] {
	pointer-events: auto;
	visibility: visible;
}

.pvu-upsell *,
.pvu-upsell *::before,
.pvu-upsell *::after {
	box-sizing: inherit;
}

/* -------------------------------------------------------------------------
 * Overlay / backdrop.
 * ---------------------------------------------------------------------- */
.pvu-overlay {
	position: absolute;
	inset: 0;
	background: rgba(11, 60, 55, 0.42);
	opacity: 0;
	transition: opacity 0.35s ease;
}

.pvu-upsell[data-open="true"] .pvu-overlay {
	opacity: 1;
}

/* -------------------------------------------------------------------------
 * Sheet.
 * ---------------------------------------------------------------------- */
.pvu-sheet {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 100%;
	max-width: 520px;
	max-height: calc(100dvh - 24px);
	overflow-y: auto;
	background: var(--pvu-paper);
	border-radius: var(--pvu-radius) var(--pvu-radius) 0 0;
	box-shadow: var(--pvu-shadow);
	transform: translate(-50%, 100%);
	opacity: 0;
	transition: transform 0.45s var(--pvu-ease), opacity 0.35s ease;
	-webkit-overflow-scrolling: touch;
}

.pvu-upsell[data-open="true"] .pvu-sheet {
	transform: translate(-50%, 0);
	opacity: 1;
}

/* -------------------------------------------------------------------------
 * Sheet close button.
 * ---------------------------------------------------------------------- */
.pvu-sheet__close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--pvu-line);
	border-radius: 50%;
	background: var(--pvu-paper);
	color: var(--pvu-muted);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.pvu-sheet__close:hover {
	color: var(--pvu-ink);
	border-color: var(--pvu-muted);
}

/* -------------------------------------------------------------------------
 * Sheet content.
 * ---------------------------------------------------------------------- */
.pvu-sheet__content {
	padding: 64px 28px calc(28px + env(safe-area-inset-bottom, 0px));
	text-align: center;
}

.pvu-sheet__title {
	margin: 0 0 10px;
	color: var(--pvu-green-dark);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.pvu-sheet__copy {
	margin: 0 auto;
	max-width: 40ch;
	color: var(--pvu-muted);
	font-size: 16px;
}

/* -------------------------------------------------------------------------
 * Actions.
 * ---------------------------------------------------------------------- */
.pvu-sheet__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 28px;
}

/* -------------------------------------------------------------------------
 * Buttons.
 * ---------------------------------------------------------------------- */
.pvu-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: 14px 20px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.pvu-button--primary {
	background: var(--pvu-green);
	color: #ffffff;
	box-shadow: 0 8px 20px rgba(15, 76, 69, 0.28);
}

.pvu-button--primary:hover {
	background: var(--pvu-green-dark);
	transform: translateY(-1px);
}

.pvu-button--secondary {
	background: transparent;
	border-color: var(--pvu-line);
	color: var(--pvu-ink);
}

.pvu-button--secondary:hover {
	border-color: var(--pvu-green);
	color: var(--pvu-green-dark);
}

/* -------------------------------------------------------------------------
 * Delivery choice sheet.
 * ---------------------------------------------------------------------- */
.pvu-choices {
	margin: 28px 0 0;
	padding: 0;
	border: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: left;
}

.pvu-choice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--pvu-line);
	border-radius: 14px;
	background: #ffffff;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.pvu-choice:hover,
.pvu-choice:focus-within {
	border-color: var(--pvu-green);
}

.pvu-choice input[type="radio"] {
	flex: 0 0 auto;
	margin: 3px 0 0;
	accent-color: var(--pvu-green);
}

.pvu-choice:has(input[type="radio"]:checked) {
	border-color: var(--pvu-green);
	background: var(--pvu-cream);
}

.pvu-choice__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pvu-choice__label {
	font-weight: 700;
	color: var(--pvu-ink);
	font-size: 15px;
}

.pvu-choice__hint {
	font-size: 13px;
	color: var(--pvu-muted);
	line-height: 1.45;
}

/* -------------------------------------------------------------------------
 * Separate delivery checkout state (body.pvu-separate).
 *
 * Everything in this block is scoped behind the plugin-owned pvu-separate
 * state class, so default (Deliver Together) checkout is never affected.
 *
 * Hiding is strictly presentational: the shipping method radios and the
 * shipping/fee rows stay in the DOM (display:none) so WooCommerce's
 * chosen-method state, the checkout POST payload, and all totals are
 * unaffected. The charge itself is still a real WooCommerce fee, re-shown
 * per-address via the read-only Postage rows and the combined Shipping row.
 *
 * The theme hides the native shipping-address section on checkout; in
 * separate mode it is re-shown because it holds the loved one's address.
 * ---------------------------------------------------------------------- */

/* Standalone Shipping Method section (heading + radio list + placeholder):
 * there is no standalone shipping section in the separate flow. */
body.pvu-separate .pv-checkout-section--shipping-method,
body.pvu-separate [data-pv-shipping-methods],
body.pvu-separate #shipping_method {
	display: none;
}

/* Native right-column Shipping row: replaced by the combined Shipping row. */
body.pvu-separate .pv-checkout-review__row.shipping {
	display: none;
}

/* Order notes sit between the loved-one address and Payment; hide them so
 * the flow runs straight from the loved-one postage to Payment. */
body.pvu-separate .pv-checkout-section--notes {
	display: none;
}

/* The theme hides the native shipping-address section on checkout; in
 * separate mode it must be shown because it holds the loved one's address.
 * Re-shown via the WC-standard wrapper class, scoped to the plugin-owned
 * state. Skipped for pickup (no direct-delivery address). */
body.pvu-separate:not(.pvu-separate-loved-one-pickup) .woocommerce-shipping-fields {
	display: block;
}

/* The native ship-to-different-address checkbox beside the "Your Loved One's
 * Address" heading is only kept for the checked state that keeps the native
 * shipping form active; its box visual is hidden (display:none inputs still
 * submit their checked value, and the plugin forces the shipped state
 * server-side). Heading text and shipping_* fields stay visible. */
body.pvu-separate:not(.pvu-separate-loved-one-pickup) #ship-to-different-address-checkbox {
	display: none;
}

/* Loved-one (shipping) fields mirror the customer (billing) address if the
 * theme's billing-specific ID rules are replicated for the shipping IDs:
 * postcode/city/state share one 3-across row (span 4), Company matches the
 * hidden billing Company, and the grid order recreates the approved layout
 * (Name -> Address -> Postcode/City/State -> Country -> Phone). Everything
 * else is
 * full-width via the shared .pv-checkout-fields base rule, so field widths,
 * typography, heights and radius already match Your Address. Scoped to the
 * plugin-owned state and skipped for pickup. */
body.pvu-separate:not(.pvu-separate-loved-one-pickup) .pv-checkout-fields #shipping_postcode_field,
body.pvu-separate:not(.pvu-separate-loved-one-pickup) .pv-checkout-fields #shipping_city_field,
body.pvu-separate:not(.pvu-separate-loved-one-pickup) .pv-checkout-fields #shipping_state_field {
	grid-column: span 4;
}

body.pvu-separate:not(.pvu-separate-loved-one-pickup) .pv-checkout-fields #shipping_company_field {
	display: none;
}

body.pvu-separate:not(.pvu-separate-loved-one-pickup) .pv-checkout-fields #shipping_last_name_field {
	order: -9;
}

body.pvu-separate:not(.pvu-separate-loved-one-pickup) .pv-checkout-fields #shipping_address_1_field {
	order: -8;
}

body.pvu-separate:not(.pvu-separate-loved-one-pickup) .pv-checkout-fields #shipping_postcode_field {
	order: -5;
}

body.pvu-separate:not(.pvu-separate-loved-one-pickup) .pv-checkout-fields #shipping_city_field,
body.pvu-separate:not(.pvu-separate-loved-one-pickup) .pv-checkout-fields #shipping_state_field {
	order: -4;
}

body.pvu-separate:not(.pvu-separate-loved-one-pickup) .pv-checkout-fields #shipping_country_field {
	order: -3;
}

body.pvu-separate:not(.pvu-separate-loved-one-pickup) .pv-checkout-fields #shipping_phone_field {
	order: -2;
}

/* Customer-leg delivery fee row: the fee stays a real WooCommerce charge
 * and the combined Shipping row presents it. Only the plugin's own fee row
 * is hidden, identified deterministically by the marker span the plugin
 * injects into its fee's amount HTML (:has(.pvu-fee-tag)) — never a blanket
 * .fee rule and never text matching. CSS-only, so it survives every
 * update_order_review refresh. Skipped for pickup, where the native rows
 * and the fee stay visible. */
body.pvu-separate:not(.pvu-separate-loved-one-pickup) .woocommerce-checkout-review-order-table .fee:has(.pvu-fee-tag) {
	display: none;
}

/* Pickup exception: when the loved one's chosen method is a pickup there is
 * no direct delivery, the Postage/combined rows are skipped, and the native
 * shipping-method section, shipping row, and Order notes are shown again.
 * Later in the cascade, so these win. */
body.pvu-separate-loved-one-pickup .pv-checkout-section--shipping-method,
body.pvu-separate-loved-one-pickup [data-pv-shipping-methods],
body.pvu-separate-loved-one-pickup #shipping_method,
body.pvu-separate-loved-one-pickup .pv-checkout-review__row.shipping,
body.pvu-separate-loved-one-pickup .pv-checkout-section--notes {
	display: revert;
}

/* -------------------------------------------------------------------------
 * Per-address read-only Postage cards (separate delivery).
 *
 * Reproduce the Deliver Together shipping-method card look (border, radius,
 * pale-green tint, typography, density) with plugin-owned classes. Purely
 * presentational: no radio, no cursor, no role/tabindex - the cards are
 * informational only.
 * ---------------------------------------------------------------------- */
.pvu-postage-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 12px 0 0;
	min-height: 54px;
	padding: 11px 14px;
	box-sizing: border-box;
	border: 1px solid rgba(15, 93, 80, 0.34);
	border-radius: 7px;
	background: rgba(15, 93, 80, 0.08);
	color: #000;
	font-family: Arial, sans-serif;
	font-size: 12px;
	font-weight: 650;
	line-height: 1.35;
	text-align: left;
}

.pvu-postage-card__label {
	min-width: 0;
	color: #000;
}

.pvu-postage-card__prices {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	white-space: nowrap;
}

.pvu-postage-card__original {
	flex: none;
	white-space: nowrap;
	color: #8a8a8a;
	font-weight: 400;
	text-decoration: line-through;
}

.pvu-postage-card__price {
	flex: none;
	white-space: nowrap;
	color: #000;
	font-weight: 650;
}

/* -------------------------------------------------------------------------
 * Combined Shipping row (separate delivery, right order summary).
 * ---------------------------------------------------------------------- */
.pvu-combined-shipping-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	font-size: 14px;
}

.pvu-combined-shipping-row__label {
	color: var(--pvu-ink);
}

.pvu-combined-shipping-row__price {
	color: var(--pvu-ink);
	font-weight: 700;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Utility.
 * ---------------------------------------------------------------------- */
.pvu-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------
 * Focus visibility (keyboard).
 * ---------------------------------------------------------------------- */
.pvu-button:focus-visible,
.pvu-sheet__close:focus-visible {
	outline: 2px solid var(--pvu-gold);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Small screens: tighten spacing.
 * ---------------------------------------------------------------------- */
@media (max-width: 480px) {
	.pvu-sheet__content {
		padding-left: 20px;
		padding-right: 20px;
	}

	.pvu-sheet__title {
		font-size: 22px;
	}

	/* Keep the loved-one Postage card on one horizontal row on tight
	 * mobile widths: pull the price-group gap in slightly rather than
	 * ever stacking the label above the prices. */
	.pvu-postage-card__prices {
		gap: 6px;
	}
}

/* -------------------------------------------------------------------------
 * Reduced motion.
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.pvu-overlay,
	.pvu-sheet,
	.pvu-sheet__close,
	.pvu-button,
	.pvu-choice {
		transition: none;
	}
}