/* ==========================================================================
   PIUROPRINT × PrintConstructor — SHARED MODAL PICKER
   ========================================================================== 
   Shared by the WooCommerce storefront and the standalone modern editor.
   It owns only the custom display_type="modal" component. Native NBO controls
   inside .pc-modal-native keep the skin of their current host (storefront or
   editor). No product IDs or option-order assumptions belong here.
   ========================================================================== */

.nbo-wrapper .pc-modal-trigger {
	display: flex;
	width: 100%;
	min-height: var(--pp-control-height, 48px);
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid var(--pp-ui-line, #e5e7eb);
	border-radius: var(--pp-control-radius, 10px);
	background: var(--pp-ui-surface, #fff);
	color: var(--pp-text, #111827);
	font-family: var(--pp-font, inherit);
	text-align: left;
	cursor: pointer;
	box-shadow: none;
	transition: border-color var(--pp-ui-transition, 180ms ease), box-shadow var(--pp-ui-transition, 180ms ease), background-color var(--pp-ui-transition, 180ms ease);
}
.nbo-wrapper .pc-modal-trigger:hover { border-color: var(--pp-orange, #f97316); }
.nbo-wrapper .pc-modal-trigger:focus-visible { outline: 0; border-color: var(--pp-orange, #f97316); box-shadow: 0 0 0 3px rgba(249, 115, 22, .16); }
.nbo-wrapper .pc-modal-trigger-value {
	min-width: 0;
	flex: 1;
	overflow: hidden;
	color: var(--pp-text, #111827);
	font-size: var(--pp-fs-md, 14px);
	font-weight: 750;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.nbo-wrapper .pc-modal-trigger-value:empty::before { content: "—"; color: var(--pp-text-muted, #6b7280); font-weight: 400; }
.nbo-wrapper .pc-modal-trigger-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border: 1px solid var(--pp-orange, #f97316);
	border-radius: 8px;
	color: var(--pp-orange, #f97316);
	font-size: var(--pp-fs-sm, 13px);
	font-weight: 800;
	line-height: 1.2;
}
.nbo-wrapper .pc-modal-trigger-btn::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
}
.nbo-wrapper .pc-modal-trigger:hover .pc-modal-trigger-btn { background: var(--pp-orange, #f97316); color: #fff; }

/* Overlay/dialog ---------------------------------------------------------- */
.pc-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	padding: 20px;
	overflow-y: auto;
	background: rgba(15, 23, 42, .72);
	-webkit-overflow-scrolling: touch;
}
.pc-modal-overlay.is-open { display: flex; align-items: flex-start; justify-content: center; }
body.pc-modal-lock { overflow: hidden; }
.pc-modal-box {
	width: 100%;
	max-width: 880px;
	margin: auto;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.25);
	border-radius: var(--pp-radius-lg, 18px);
	background: var(--pp-bg, #f8fafc);
	font-family: var(--pp-font, inherit);
	box-shadow: 0 28px 80px rgba(15, 23, 42, .3);
	animation: pc-modal-in .18s ease;
}
@keyframes pc-modal-in { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.pc-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 17px 20px;
	border-bottom: 1px solid var(--pp-border, #e5e7eb);
	background: var(--pp-white, #fff);
}
.pc-modal-title { color: var(--pp-text, #111827); font-size: var(--pp-fs-2xl, 18px); font-weight: 800; line-height: 1.3; }
.pc-modal-close {
	display: grid;
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--pp-text-muted, #6b7280);
	font: 400 28px/1 var(--pp-font, inherit);
	cursor: pointer;
}
.pc-modal-close:hover { background: var(--pp-ui-soft, #f8fafc); color: var(--pp-text, #111827); }
.pc-modal-close:focus-visible { outline: 3px solid rgba(249, 115, 22, .2); outline-offset: 2px; }
.pc-modal-body { max-height: 70vh; padding: 18px 20px; overflow-y: auto; }

/* Native field nested in the modal. Header is already represented by dialog title. */
.pc-modal-native > .nbd-option-field { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.pc-modal-body .pc-modal-native .nbd-field-header { display: none; }
.pc-modal-native .nbd-field-content { width: 100%; }

.pc-modal-subattr { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--pp-border, #e5e7eb); }
.pc-modal-subattr-title { margin-bottom: 10px; color: var(--pp-text-muted, #6b7280); font-size: var(--pp-fs-sm, 13px); font-weight: 750; }

/* Rich choice cards ------------------------------------------------------- */
.pc-modal-box .nbd-swatch-wrap.pc-modal-cards {
	--pc-modal-cols: 3;
	--pc-modal-rows: 3;
	display: grid;
	grid-template-columns: repeat(var(--pc-modal-cols), minmax(0, 1fr));
	gap: 16px;
}
.pc-modal-box .nbd-swatch-label-wrap.pc-modal-card {
	position: relative;
	display: flex;
	width: 100%;
	max-width: none;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	margin: 0;
	padding: 10px;
	border: 1px solid var(--pp-border, #e5e7eb);
	border-radius: var(--pp-radius, 12px);
	background: var(--pp-white, #fff);
	cursor: pointer;
	box-shadow: none;
	transition: border-color var(--pp-ui-transition, 180ms ease), box-shadow var(--pp-ui-transition, 180ms ease), transform var(--pp-ui-transition, 180ms ease);
}
.pc-modal-box .nbd-swatch-label-wrap.pc-modal-card:hover { border-color: #fdba74; transform: translateY(-1px); }
.pc-modal-cards .pc-modal-card.is-selected,
.pc-modal-cards .pc-modal-card:has(input[type="radio"]:checked) { border-color: var(--pp-orange, #f97316); box-shadow: 0 0 0 2px rgba(249, 115, 22, .16); }
.pc-modal-cards .pc-modal-card .pc-modal-card-media {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	margin: 0 0 10px;
	border: 1px solid var(--pp-border, #e5e7eb);
	border-radius: 10px;
	background-color: var(--pp-img-bg, #f4f5f7);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	box-shadow: none;
	outline: none;
}
/* Selection belongs to the card, never to a fake overlay on real preview data. */
.nbo-wrapper .pc-modal-cards input[type="radio"] { display: none; }
.nbo-wrapper .pc-modal-cards input[type="radio"]:checked + label.nbd-swatch { border-color: var(--pp-border, #e5e7eb); box-shadow: none; }
.nbo-wrapper .pc-modal-cards input[type="radio"]:checked + label.nbd-swatch::before,
.nbo-wrapper .pc-modal-cards input[type="radio"]:checked + label.nbd-swatch::after { content: none; display: none; }
.pc-modal-cards .pc-modal-card--off { opacity: .52; filter: grayscale(1); pointer-events: none; }
.pc-modal-cards .pc-modal-card--off .nbd-swatch-title { text-decoration: line-through; }
.pc-modal-cards .pc-modal-card label { cursor: pointer; }
.pc-modal-cards .pc-modal-card > label[for] { width: 100%; margin: 0; }
.pc-modal-cards .pc-modal-card .nbd-swatch-description { display: grid; width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; align-items: start; }
.pc-modal-cards .nbd-swatch-title { color: var(--pp-text, #111827); font-size: var(--pp-fs-md, 14px); line-height: 1.35; }
.pc-modal-cards .nbd-swatch-title b { font-weight: 750; }
.pc-modal-cards .nbd-swatch-des { grid-column: 1 / -1; color: var(--pp-text-muted, #6b7280); font-size: var(--pp-fs-xs, 12px); line-height: 1.45; }
.pc-modal-cards .nbd-swatch-des p { margin: 4px 0 0; }
.pc-modal-cards .nbd-swatch-des ul { margin: 4px 0 0; padding-left: 18px; }
.pc-modal-cards .nbd-swatch-price { grid-column: 2; grid-row: 1; margin-top: 0; color: #c2410c; font-size: var(--pp-fs-sm, 13px); font-weight: 750; }
.pc-modal-cards .pc-modal-card[hidden] { display: none; }

/* Pager ------------------------------------------------------------------- */
.pc-modal-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.pc-modal-pager[hidden] { display: none; }
.pc-modal-pager button {
	display: inline-flex;
	width: 36px;
	height: 36px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--pp-border, #e5e7eb);
	border-radius: 50%;
	background: var(--pp-white, #fff);
	color: var(--pp-text, #111827);
	font-size: var(--pp-fs-3xl, 20px);
	line-height: 1;
	cursor: pointer;
	transition: border-color var(--pp-ui-transition, 180ms ease), color var(--pp-ui-transition, 180ms ease), background-color var(--pp-ui-transition, 180ms ease);
}
.pc-modal-pager button:hover:not(:disabled) { border-color: var(--pp-orange, #f97316); color: var(--pp-orange, #f97316); }
.pc-modal-pager button:disabled { opacity: .4; cursor: default; }
.pc-modal-pager .pc-modal-pager-info { min-width: 54px; color: var(--pp-text-muted, #6b7280); font-size: var(--pp-fs-md, 14px); text-align: center; }

/* Footer ------------------------------------------------------------------ */
.pc-modal-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 14px 20px;
	border-top: 1px solid var(--pp-border, #e5e7eb);
	background: var(--pp-white, #fff);
}
.pc-modal-foot-price { color: var(--pp-text-muted, #6b7280); font-size: var(--pp-fs-md, 14px); line-height: 1.35; }
.pc-modal-foot-per b,
.pc-modal-foot-sub b { color: var(--pp-text, #111827); font-size: var(--pp-fs-xl, 16px); font-weight: 800; }
.pc-modal-foot-per .pc-modal-foot-unit { color: var(--pp-text-muted, #6b7280); font-weight: 400; }
.pc-modal-foot-sub { display: block; font-size: var(--pp-fs-sm, 13px); }
.pc-modal-foot .pc-modal-submit { margin-left: auto; }
/* Editor does not load buttons.css, so the shared component keeps a fallback.
   On storefront .pp-button--primary is the authoritative button contract. */
.pc-modal-submit {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	border: 1px solid var(--pp-orange, #f97316);
	border-radius: var(--pp-control-radius, 10px);
	background: var(--pp-orange, #f97316);
	color: #fff;
	font: 800 var(--pp-fs-sm, 13px)/1.2 var(--pp-font, inherit);
	cursor: pointer;
}
.pc-modal-submit:hover { border-color: var(--pp-orange-hover, #ea580c); background: var(--pp-orange-hover, #ea580c); }

/* Conditional-unavailable field ----------------------------------------- */
.pc-modal-field--unavail .nbd-field-header label { color: var(--pp-text-muted, #6b7280); text-decoration: line-through; }
.pc-modal-unavail {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	padding: 12px 14px;
	border: 1px dashed var(--pp-border, #e5e7eb);
	border-radius: var(--pp-radius, 12px);
	background: var(--pp-img-bg, #f4f5f7);
	font-size: var(--pp-fs-md, 14px);
}
.pc-modal-unavail-name { color: var(--pp-text-2, #4b5563); font-weight: 700; text-decoration: line-through; }
.pc-modal-unavail-reason { color: var(--pp-text-muted, #6b7280); }

@media (max-width: 760px) {
	.pc-modal-box .nbd-swatch-wrap.pc-modal-cards { --pc-modal-cols: 2; }
}
@media (max-width: 600px) {
	.pc-modal-overlay { padding: 0; }
	.pc-modal-overlay.is-open { align-items: stretch; }
	.pc-modal-overlay .pc-modal-box {
		display: flex;
		width: 100%;
		max-width: none;
		min-height: 100%;
		max-height: 100dvh;
		flex-direction: column;
		border-radius: 0;
		animation: pc-modal-up .22s ease;
	}
	.pc-modal-head { position: sticky; top: 0; z-index: 2; padding: 15px 16px; }
	.pc-modal-body { max-height: none; flex: 1 1 auto; padding: 16px; }
	.pc-modal-foot { position: sticky; bottom: 0; z-index: 2; padding: 13px 16px; }
	.pc-modal-foot .pc-modal-submit { flex: 1 1 auto; margin-left: 0; }
}
@media (max-width: 480px) {
	.pc-modal-box .nbd-swatch-wrap.pc-modal-cards { --pc-modal-cols: 1; --pc-modal-rows: 4; }
}
@keyframes pc-modal-up { from { transform: translateY(100%); } to { transform: translateY(0); } }