/**
 * Pickup-point picker inside the Checkout block.
 *
 * Everything is scoped under `.wpshopyd`, which only exists inside the slot fill this
 * plugin renders, so nothing here can reach WooCommerce's own markup. That matters more
 * than usual on this site: the Checkout block enqueues its stylesheet while rendering the
 * page content, which is past `wp_enqueue_scripts`, so Woo's CSS always prints after this
 * file and wins any specificity tie. Staying inside our own namespace sidesteps the race
 * entirely instead of fighting it with `!important`.
 *
 * The palette is Blocksy's, read through `--theme-palette-color-*` with the site's current
 * values as fallbacks — same pattern as cart.css and slide-out.css in wp-shop-customizations,
 * so a palette change in the Customizer carries here too.
 */

.wpshopyd {
	--wpshopyd-accent: var( --theme-palette-color-2, #bc5d40 );
	--wpshopyd-ink: var( --theme-palette-color-4, #17383e );
	--wpshopyd-ink-soft: var( --theme-palette-color-3, #395155 );
	--wpshopyd-border: var( --theme-palette-color-5, #dfdfe2 );
	--wpshopyd-surface: var( --theme-form-field-background-initial-color, #f5f7f7 );

	margin-top: 16px;
}

/* Trigger shown until a point has been chosen. */
.wpshopyd__button {
	display: inline-block;
	padding: 12px 20px;
	border: 1px solid var( --wpshopyd-accent );
	border-radius: 4px;
	background: transparent;
	color: var( --wpshopyd-accent );
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.wpshopyd__button:hover,
.wpshopyd__button:focus-visible {
	background: var( --wpshopyd-accent );
	color: #fff;
}

.wpshopyd__hint {
	margin: 8px 0 0;
	color: var( --wpshopyd-ink-soft );
	font-size: 0.875em;
}

.wpshopyd__error {
	margin: 8px 0 0;
	color: #cc1818;
	font-size: 0.875em;
}

/*
 * The chosen point, as a summary card.
 *
 * `flex-wrap` rather than a media query on purpose: the checkout switches between its one-
 * and two-column layouts on the width of the *form container*, not the viewport, so a
 * viewport query would flip at the wrong moment on a wide screen with a narrow column.
 * Wrapping reacts to whatever width this block actually gets.
 */
.wpshopyd__selected {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px 16px;
	padding: 14px 16px;
	border: 1px solid var( --wpshopyd-border );
	border-radius: 4px;
	background: var( --wpshopyd-surface );
}

.wpshopyd__selected-body {
	display: flex;
	min-width: 0;
	flex: 1 1 200px;
	flex-direction: column;
	gap: 2px;
}

.wpshopyd__selected-label {
	color: var( --wpshopyd-ink-soft );
	font-size: 0.8125em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.wpshopyd__selected-address {
	color: var( --wpshopyd-ink );
	font-weight: 600;
	overflow-wrap: anywhere;
}

.wpshopyd__link {
	padding: 0;
	border: 0;
	background: none;
	color: var( --wpshopyd-accent );
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
	white-space: nowrap;
}

/* Modal holding the widget. */
.wpshopyd__modal {
	position: fixed;
	z-index: 9999;
	inset: 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 16px;
	padding-top: max( 16px, env( safe-area-inset-top ) );
	overflow-y: auto;
}

.wpshopyd__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 23, 56, 62, 0.55 );
}

/*
 * `min-height: 0` lets the dialog actually shrink below its content height, which is what
 * makes the inner scroll work — without it a flex child refuses to go under its content
 * size and the map hangs off the bottom of short viewports.
 */
.wpshopyd__dialog {
	position: relative;
	display: flex;
	width: min( 900px, 100% );
	/*
	 * A definite height, not just a cap: the widget is told how tall to draw itself in px
	 * (see checkout.js), and that measurement is taken from the container inside this
	 * dialog — with `height: auto` the container would measure 0 before the widget renders
	 * and the map would fall back to its default size.
	 *
	 * dvh (dynamic viewport height) shrinks when the mobile browser address bar or
	 * navigation bar is visible, so the dialog never extends behind those bars and the
	 * "Продолжить" button is always reachable.  Declared three times rather than as a
	 * min(), so browsers without dvh keep the last unit they understand — a min() would
	 * always resolve to svh, the smallest of the three, and leave a gap once the address
	 * bar scrolls away.
	 */
	height: calc( 100vh - 32px );
	height: calc( 100svh - 32px );
	height: calc( 100dvh - 32px );
	max-height: 720px;
	min-height: 0;
	flex-direction: column;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.25 );
	overflow: hidden;
}

/*
 * On narrow screens the Yandex widget's own bottom panel ("Доставка / Пункты выдачи")
 * overlaps when the dialog has only ~360px — the 16px modal padding on each side eats
 * 32px the widget needs. Full-screen on mobile fixes the overlap and matches the UX
 * pattern users expect for map pickers anyway.
 */
@media ( max-width: 600px ) {
	.wpshopyd__modal {
		padding: 0;
	}

	.wpshopyd__dialog {
		width: 100%;
		height: 100vh;
		height: 100svh;
		height: 100dvh;
		max-height: none;
		border-radius: 0;
	}
}

/*
 * Make the widget fill whatever height the dialog has.
 *
 * The widget writes its own height as an inline style on `.widget__wrapper` and
 * `.widget__map`, so a plain rule can't reach it — hence `!important`, the one place in
 * this file that needs it. It matters because the widget doesn't always use the height
 * passed to createWidget: on any device reporting `screen.width` of 750px or less its
 * bundle substitutes `window.innerHeight - 120`, and on the rest it uses our value. Left
 * alone, the shorter of the two leaves a band of backdrop below the map instead of a
 * full-screen sheet.
 *
 * The map's own bottom panel ("Доставка · Пункты выдачи") is anchored to the bottom of
 * `.widget__map`, so stretching that element carries the panel down to the bottom of the
 * screen with it. Yandex's map tiles keep the size the widget asked for and don't re-fit
 * on resize, so a stretch leaves up to ~120px uncovered at the very bottom — that strip
 * sits behind the panel, which is taller than it.
 */
.wpshopyd__widget > .ydw-widget,
.wpshopyd__widget .widget__wrapper,
.wpshopyd__widget .widget__map {
	height: 100% !important;
}

.wpshopyd__dialog-head {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 16px;
	border-bottom: 1px solid var( --wpshopyd-border );
}

.wpshopyd__dialog-title {
	color: var( --wpshopyd-ink );
	font-weight: 600;
}

.wpshopyd__close {
	padding: 0 4px;
	border: 0;
	background: none;
	color: var( --wpshopyd-ink-soft );
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

/*
 * The widget manages its own internal layout and overflow — the map shrinks when the
 * point-detail panel appears, so the combined height always fits the container.
 * overflow:hidden (not auto) is intentional: overflow:auto creates a scroll context on
 * iOS/Android that intercepts touch-start events before they reach the ymaps layer inside,
 * causing taps on map markers to be absorbed as potential scroll gestures instead of
 * registering as clicks.  The widget itself handles any overflow internally.
 */
.wpshopyd__widget {
	min-height: 0;
	flex: 1 1 auto;
	overflow: hidden;
}

/*
 * Collapsing Woo's 6 checkout steps down to the 3 the store actually asks for: "Данные
 * получателя", "Способ получения", "Способы оплаты". Nothing below is removed from the
 * DOM or from validation — see checkout-fields.php and contact-fields.js for why (Woo's own
 * name/phone/billing-toggle/country fields still have to exist and stay in sync for
 * validation and for the order to save correctly). This only changes what is visible: the
 * native first_name/last_name/phone inputs (superseded by the combined field in "Данные
 * получателя"), the "use this address for billing" checkbox (forced permanently on so a
 * second, unhidden set of name fields can never appear), the country/region select (the
 * store only ever ships within Russia, so it always renders pre-filled with the base
 * country and nothing the customer could pick would ever change), and the heading of every
 * step whose content now lives inside "Способ получения" instead of getting its own step.
 *
 * Country can't be dropped the way checkout-fields.php drops address_1/city/etc — see the
 * comment on wpshopyd_hide_unused_address_fields() there for why WooCommerce forces it back
 * to visible+required no matter what a locale filter says. CSS is the only lever left, and
 * it's safe here specifically because the field's value never needs to change: hiding a
 * field whose value could go stale would risk a mismatch between what ships and what the
 * customer saw, but country is pinned to the store's base country either way.
 *
 * Scoped to Woo's own block classes rather than `.wpshopyd`, unlike the rest of this file —
 * intentional here, since the target is Woo's markup, not ours. `display: none` needs no
 * specificity fight to win: Woo never sets `display` on these same elements, so there's no
 * tied rule to lose regardless of print order. That stops being true below, where the
 * property *is* one Woo also sets on the identical selector — see that comment for why the
 * print-order assumption here doesn't carry over.
 */
.wc-block-checkout__shipping-fields .wc-block-components-address-form__first_name,
.wc-block-checkout__shipping-fields .wc-block-components-address-form__last_name,
.wc-block-checkout__shipping-fields .wc-block-components-address-form__phone,
.wc-block-checkout__shipping-fields .wc-block-components-address-form__country,
.wc-block-checkout__billing-fields .wc-block-components-address-form__first_name,
.wc-block-checkout__billing-fields .wc-block-components-address-form__last_name,
.wc-block-checkout__billing-fields .wc-block-components-address-form__phone,
.wc-block-checkout__billing-fields .wc-block-components-address-form__country,
.wc-block-checkout__use-address-for-billing {
	display: none;
}

.wc-block-checkout__shipping-fields .wc-block-components-checkout-step__heading-container,
.wc-block-checkout__pickup-options .wc-block-components-checkout-step__heading-container,
.wc-block-checkout__shipping-option .wc-block-components-checkout-step__heading-container,
.wc-block-checkout__billing-fields .wc-block-components-checkout-step__heading-container {
	display: none;
}

/*
 * With every field inside them hidden above (or dropped entirely by
 * wpshopyd_hide_unused_address_fields() in checkout-fields.php), the shipping- and
 * billing-fields steps have no visible content left — but each is still a
 * `.wc-block-components-checkout-step`, which Woo's own CSS gives `margin: 0 0 24px`
 * whether or not it has anything in it. Empty steps between the "Способ получения" tabs
 * and the shipping-rate list below stack that into unwanted dead space. Zeroing it here
 * collapses them back to nothing.
 *
 * This one genuinely needs to outrank Woo's rule, not just tie it: measured in the actual
 * page (devtools computed styles), this plugin's stylesheet prints *before*
 * `woocommerce/assets/client/blocks/checkout.css`, opposite of what the comment above
 * assumed — Woo's own block CSS is enqueued while the Checkout block's content renders,
 * which lands later in `<head>` than this file's normal `wp_enqueue_scripts` registration.
 * A same-specificity `margin` rule here would therefore lose the cascade to Woo's, silently
 * — which is exactly what happened before the `.woocommerce-checkout` prefix was added.
 * That prefix (a body class WooCommerce always adds on this page) buys one extra class of
 * specificity, (0,3,0) against Woo's (0,2,0), so this wins outright instead of depending on
 * print order.
 */
.woocommerce-checkout .wc-block-components-checkout-step.wc-block-checkout__shipping-fields,
.woocommerce-checkout .wc-block-components-checkout-step.wc-block-checkout__billing-fields {
	margin: 0;
}