/* Printeez Warehouse Selector block — front end + editor preview.
   Styled to match the app's catalog warehouse selector
   (CatalogLive.Components.WarehouseSelector): closed control is a borderless
   flag + two-letter country code + chevron; the menu is a white card whose
   options show flag + full country name; the active option is highlighted
   with the app's `bg-skin-alt/10` tone.

   The one appearance override is the active highlight: the block's
   "Active option color" attribute sets `--pws-active-color` inline on the
   root; everything else is fixed here to keep parity with the app. */

.printeez-warehouse-selector {
	--pws-active-color: rgba(205, 177, 140, 0.05); /* app skin-alt @ 5% */

	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: inherit;
}

.printeez-warehouse-selector .pws-label {
	white-space: nowrap;
}

/* Closed control: flag + code + chevron, no border, no background. */
.printeez-warehouse-selector .pws-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.25em 0.1em;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	font-size: 0.875em;
	line-height: 1.2;
	cursor: pointer;
}

.printeez-warehouse-selector .pws-toggle:hover {
	opacity: 0.75;
}

.printeez-warehouse-selector .pws-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 4px;
}

/* WordPress block themes outline EVERY focused element inside the site
   wrapper (`:where(.wp-site-blocks :focus)`). :where() carries zero
   specificity, so these plain rules override it. Mouse clicks and the
   script's programmatic focus (the menu focuses the active option on open)
   get no outline; keyboard users keep the :focus-visible treatments — the
   toggle's outline above, the options' background highlight below.
   `:not(:focus-visible)` keeps this order-independent of that rule. */
.printeez-warehouse-selector .pws-toggle:focus:not(:focus-visible) {
	outline: none;
}

.printeez-warehouse-selector .pws-option:focus {
	outline: none;
}

.printeez-warehouse-selector .pws-current-label {
	text-transform: uppercase;
	opacity: 0.8;
}

.printeez-warehouse-selector .pws-current-icon img,
.printeez-warehouse-selector .pws-option-icon {
	display: block;
	width: 16px;
	height: auto;
	object-fit: cover;
}

/* Two-letter fallback when no flag is bundled for the warehouse's country. */
.printeez-warehouse-selector .pws-option-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 15px;
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.08);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.printeez-warehouse-selector .pws-chevron {
	flex: none;
	opacity: 0.7;
	transition: transform 0.15s ease;
}

.printeez-warehouse-selector .pws-toggle[aria-expanded='true'] .pws-chevron {
	transform: rotate(180deg);
}

/* Menu: white card, right-aligned under the control (the app renders the
   selector at the end of the header row, so the card hangs left). */
.printeez-warehouse-selector .pws-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 100;
	min-width: max(100%, 190px);
	margin: 0;
	padding: 0.4em;
	list-style: none;
	background: #fff;
	color: #1e1e1e;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.printeez-warehouse-selector .pws-menu li {
	margin: 0;
}

.printeez-warehouse-selector .pws-option {
	display: flex;
	align-items: center;
	gap: 0.65em;
	width: 100%;
	padding: 0.6em 0.8em;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.9em;
	text-align: left;
	cursor: pointer;
}

.printeez-warehouse-selector .pws-option:hover,
.printeez-warehouse-selector .pws-option:focus-visible {
	background: rgba(0, 0, 0, 0.05);
	outline: none;
}

.printeez-warehouse-selector .pws-option-label {
	flex: 1;
	white-space: nowrap;
}

/* Active option: highlighted like the app (`bg-skin-alt/10` + full-strength
   text) rather than a check mark. */
.printeez-warehouse-selector .pws-option[aria-selected='true'] {
	background: var(--pws-active-color);
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Fullscreen variant (display="fullscreen") — the app's full-screen selector:
   dark pitch hero + one card per production region. The overlay is always in
   the DOM ([hidden] until the toggle opens it); its hero video is
   data-deferred-src so nothing downloads on page load. Cards reuse the
   .pws-option contract (data-id / data-country / aria-selected), so selection
   and highlighting share the dropdown's wiring.

   Open/close is animated like the app's drawer: the view script unhides the
   overlay then adds `pws-open` a frame later, so the panel slides up from the
   bottom while the backdrop fades; on close it removes the class and flips
   [hidden] after the transition ends.

   Sizing is rem-based and text-align is pinned on purpose: the overlay must
   not inherit the header's compact font scale or the theme's alignment. */

.printeez-warehouse-selector .pws-fullscreen {
	position: fixed;
	inset: 0;
	z-index: 99999;
	font-size: 1rem;
	line-height: 1.5;
	text-align: left;
}

/* The overlay renders inside arbitrary themes: pin box-sizing so width:100%
   + padding never overflows, regardless of the theme's global default. */
.printeez-warehouse-selector .pws-fullscreen,
.printeez-warehouse-selector .pws-fullscreen *,
.printeez-warehouse-selector .pws-fullscreen *::before,
.printeez-warehouse-selector .pws-fullscreen *::after {
	box-sizing: border-box;
}

.printeez-warehouse-selector .pws-fullscreen[hidden] {
	display: none !important;
}

/* WP admin bar (logged-in admins): the bar is z-index 99999 — same as the
   overlay — and later in the DOM, so it paints on top. Start the overlay
   below it instead (the height var ships with WP's front-end admin-bar
   styles; logged-out pages have neither the class nor the var). */
body.admin-bar .printeez-warehouse-selector .pws-fullscreen {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	/* Below 600px WP's bar is position:absolute and scrolls away, so a
	   fixed offset would leave a floating gap mid-page. Cover the bar
	   with the overlay instead. */
	body.admin-bar .printeez-warehouse-selector .pws-fullscreen {
		top: 0;
		z-index: 100000;
	}
}

.printeez-warehouse-selector .pws-fullscreen-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.75);
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}

.printeez-warehouse-selector .pws-fullscreen.pws-open .pws-fullscreen-backdrop {
	opacity: 1;
}

/* Mobile: sections stack at natural height and the whole panel scrolls (the
   app's min-h-dvh + overflow-y-auto shell). Only the lg layout pins heights,
   with the regions column scrolling internally — a height-constrained row
   here plus .pws-regions' centered content would clip the top on mobile. */
.printeez-warehouse-selector .pws-fullscreen-panel {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: 1fr;
	overflow-y: auto;
	background: #fff;
	color: #1e1e1e;
	transform: translateY(100%);
	transition: transform 0.5s ease-in-out;
}

.printeez-warehouse-selector .pws-fullscreen.pws-open .pws-fullscreen-panel {
	transform: translateY(0);
}

.printeez-warehouse-selector .pws-fullscreen-close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 10;
	display: inline-flex;
	padding: 0.5rem;
	border: 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.9);
	color: #1e1e1e;
	cursor: pointer;
}

.printeez-warehouse-selector .pws-fullscreen-close:hover {
	background: rgba(0, 0, 0, 0.08);
}

/* Pitch hero. Mobile-first it's a light heading block — the video and scrim
   are hidden, matching the app's `hidden lg:block` hero media. Desktop flips
   to the dark panel with the deferred video behind a scrim (see the lg media
   query at the bottom of this section). */
.printeez-warehouse-selector .pws-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	padding: 1.5rem 1rem 0.5rem;
	background: #fff;
	color: #1e1e1e;
}

.printeez-warehouse-selector .pws-hero-media {
	display: none;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.7;
}

.printeez-warehouse-selector .pws-hero-scrim {
	display: none;
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}

.printeez-warehouse-selector .pws-hero-copy {
	position: relative;
	max-width: 28rem;
}

.printeez-warehouse-selector .pws-hero-title {
	margin: 0 0 0.75rem;
	font-size: 1.75rem; /* app text-3xl; lg:text-4xl below */
	font-weight: 900;
	line-height: 1; /* app leading-tight */
	color: inherit;
}

.printeez-warehouse-selector .pws-hero-subtitle {
	margin: 0;
	font-size: 0.875rem; /* app text-sm */
	line-height: 1.5rem; /* app leading-6 */
	color: rgba(0, 0, 0, 0.55);
}

/* Region cards column. */
.printeez-warehouse-selector .pws-regions {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.5rem;
	padding: 1rem;
}

.printeez-warehouse-selector .pws-regions-heading {
	margin: 0;
	font-size: 1.5rem; /* app text-2xl; lg:text-3xl below */
	font-weight: 900;
	line-height: 1.25; /* app leading-tight */
}

.printeez-warehouse-selector .pws-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	width: 100%;
	max-width: 64rem;
}

.printeez-warehouse-selector .pws-card {
	display: flex;
	flex-direction: column;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.12);
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.printeez-warehouse-selector .pws-card:hover,
.printeez-warehouse-selector .pws-card:focus-visible {
	border-color: rgb(205, 177, 140); /* app skin-alt */
	background: rgba(0, 0, 0, 0.02);
	outline: none;
}

/* Card header: plain strip with a thin divider carrying the region label
   (no chip container — matches the app's simplified card header). Hidden on
   mobile like the app's `hidden lg:block` header, where the saved space
   matters; the lg block below reveals it. The explicit width/margin/
   max-width pins defeat block-theme layout rules (fit-content +
   margin-inline auto) that otherwise shrink and center it. */
.printeez-warehouse-selector .pws-card-region-strip {
	display: none;
	position: relative;
	width: 100%;
	max-width: none;
	align-self: stretch;
	margin: 0;
	padding: 0.75rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* Selected badge in the strip's right corner — hidden until the view script
   marks the current card (aria-selected), like the CTA swap below. */
.printeez-warehouse-selector .pws-card-selected-badge {
	display: none;
	position: absolute;
	top: 50%;
	right: 0.75rem;
	transform: translateY(-50%);
	color: #1e1e1e;
}

.printeez-warehouse-selector .pws-card[aria-selected='true'] .pws-card-selected-badge {
	display: inline-flex;
}

.printeez-warehouse-selector .pws-card-region {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.printeez-warehouse-selector .pws-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.75rem;
	padding: 1.25rem;
}

.printeez-warehouse-selector .pws-card-headline {
	margin: 0;
	font-size: 1.125rem; /* app text-lg */
	font-weight: 900;
	line-height: 1.75rem;
}

.printeez-warehouse-selector .pws-card-location {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	margin: -0.5rem 0 0;
	font-size: 0.875rem; /* app text-sm */
	color: rgba(0, 0, 0, 0.55);
}

.printeez-warehouse-selector .pws-card-location svg {
	flex: none;
}

.printeez-warehouse-selector .pws-card-description {
	margin: 0;
	font-size: 0.875rem; /* app text-sm */
	line-height: 1.5rem; /* app leading-6 */
	color: rgba(0, 0, 0, 0.65);
}

.printeez-warehouse-selector .pws-card-description p {
	margin: 0 0 0.5rem;
}

.printeez-warehouse-selector .pws-card-description p:last-child {
	margin-bottom: 0;
}

/* Authored long descriptions can carry their own plain lists — style them
   like the app's prose (plain discs, tucked in) instead of the theme's
   defaults. .feature-list is excluded: it draws its own check bullets. */
.printeez-warehouse-selector .pws-card-description ul:not(.feature-list),
.printeez-warehouse-selector .pws-card-description ol {
	margin: 0.25rem 0 0;
	padding-left: 1.25em;
	list-style-position: outside;
}

.printeez-warehouse-selector .pws-card-description ul:not(.feature-list) li,
.printeez-warehouse-selector .pws-card-description ol li {
	margin: 0 0 0.25rem;
}

/* Checked feature list — emerald check bullets via CSS mask. Documented
   duplicate of `.feature-list` in the app's
   apps/print_simple_web/assets/css/components/_helpers.scss — keep in sync.
   Styles both the card's generated highlights and authored long-description
   HTML (<ul class="feature-list">). */
.printeez-warehouse-selector .pws-fullscreen ul.feature-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem; /* app text-sm */
}

.printeez-warehouse-selector .pws-fullscreen .feature-list li {
	display: flex;
	align-items: flex-start;
	column-gap: 0.5rem;
	margin: 0;
	padding: 0.25rem 0;
	line-height: 1.25rem;
}

.printeez-warehouse-selector .pws-fullscreen .feature-list li::before {
	content: "";
	display: inline-block;
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	margin-top: 0.125rem;
	background-color: #10b981; /* app emerald-500 */
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='1.5' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0'/%3E%3C/svg%3E") no-repeat top center / contain;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='1.5' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0'/%3E%3C/svg%3E") no-repeat top center / contain;
}

/* CTA: styled as the card's button, but the whole card is the click target. */
.printeez-warehouse-selector .pws-card-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	box-sizing: border-box;
	margin-top: auto;
	padding: 0.7rem 1rem;
	background: #1e1e1e;
	color: #fff;
	font-size: 0.875rem; /* app text-sm */
	font-weight: 700;
	text-align: center;
	pointer-events: none;
}

.printeez-warehouse-selector .pws-card-cta-pick,
.printeez-warehouse-selector .pws-card-cta-current {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.printeez-warehouse-selector .pws-card-cta-current {
	display: none;
}

/* Current region (aria-selected set by the view script from the session
   context): the block's active color tints the card, the border goes to the
   app's skin-alt tan, and the CTA flips to a quiet tan "Current location". */
.printeez-warehouse-selector .pws-card[aria-selected='true'] {
	border-color: rgb(205, 177, 140); /* app skin-alt */
	background: var(--pws-active-color);
	cursor: default;
}

.printeez-warehouse-selector .pws-card[aria-selected='true'] .pws-card-cta {
	background: transparent;
	color: rgb(205, 177, 140); /* app skin-alt */
}

.printeez-warehouse-selector .pws-card[aria-selected='true'] .pws-card-cta-pick {
	display: none;
}

.printeez-warehouse-selector .pws-card[aria-selected='true'] .pws-card-cta-current {
	display: inline-flex;
}

/* Desktop: hero left, regions right — the app drawer's split layout. The
   hero goes dark, the video/scrim appear, and the region strips return. */
@media (min-width: 1024px) {
	.printeez-warehouse-selector .pws-fullscreen-panel {
		grid-template-columns: 0.85fr 1.15fr;
		overflow: hidden;
	}

	.printeez-warehouse-selector .pws-card-region-strip {
		display: block;
	}

	.printeez-warehouse-selector .pws-hero {
		padding: 3.5rem 2.5rem 2.5rem;
		background: #101010;
		color: #fff;
	}

	.printeez-warehouse-selector .pws-hero-media,
	.printeez-warehouse-selector .pws-hero-scrim {
		display: block;
	}

	.printeez-warehouse-selector .pws-hero-subtitle {
		color: rgba(255, 255, 255, 0.8);
	}

	.printeez-warehouse-selector .pws-hero-title {
		font-size: 2.25rem; /* app lg:text-4xl */
	}

	.printeez-warehouse-selector .pws-regions {
		overflow-y: auto;
		padding: 2.5rem;
	}

	.printeez-warehouse-selector .pws-regions-heading {
		font-size: 1.875rem; /* app lg:text-3xl */
	}

	.printeez-warehouse-selector .pws-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}