/* Override the accent or background in your theme, e.g.:
   .pq, .pq-modal { --pq-accent: #0a7; --pq-bg-start: #fff; --pq-bg-end: #ccc; } */
.pq, .pq-modal {
	--pq-accent: #e8590c;
	--pq-ink: #1d2329;
	--pq-mute: #5f6b77;
	--pq-line: #d9dee3;
	--pq-chamber: #20262d;
	--pq-bg-start: #e9e9e9;
	--pq-bg-end: #6b6b6b;
}
.pq {
	/* the layout reacts to the width of the box the shortcode sits in, not just the screen */
	container-type: inline-size;
	container-name: pq;
	width: 100%;
	max-width: 1350px; /* same frame as the laser cutting quote tool */
	margin: 24px auto;
	padding: 16px;
	border-radius: 18px;
	color: var(--pq-ink);
	font: inherit;
	background: none;
}
.pq *, .pq *::before, .pq *::after, .pq-modal *, .pq-modal *::before, .pq-modal *::after { box-sizing: border-box; }
.pq-wrap { display: grid; gap: 25px; grid-template-columns: minmax(0, 1fr); }
.pq-col { display: grid; gap: 14px; min-width: 0; align-content: start; }

/* tablets and up: viewer on one side, options and price on the other */
@container pq (min-width: 840px) {
	.pq-wrap { grid-template-columns: minmax(0, 690px) minmax(0, 1fr); align-items: start; }
}
@media (min-width: 900px) {
	.pq { padding: 30px; border-radius: 24px; }
}
@media (min-height: 640px) {
	@container pq (min-width: 840px) { .pq-col:first-child { position: sticky; top: 16px; } }
}

/* viewer: the build chamber */
.pq-view {
	position: relative;
	height: 460px; /* same working-space size as the laser cutting quote tool */
	overflow: hidden;
	border-radius: 12px;
	background: var(--pq-chamber);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.pq-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.pq-drop {
	position: absolute; inset: 12px;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
	padding: 16px; text-align: center; cursor: pointer;
	color: #e9edf1;
	border: 2px dashed #4a5561; border-radius: 8px;
	transition: border-color .15s, background-color .15s;
}
.pq-drop b { font-size: clamp(1rem, 4.2cqi, 1.15rem); }
.pq-drop span { font-size: .9rem; color: #a9b4bf; }
.pq-drop:hover, .pq-view.over .pq-drop { border-color: var(--pq-accent); background: rgba(232, 89, 12, .06);
	background: color-mix(in srgb, var(--pq-accent) 6%, transparent); }

/* "Add another file": a small glass pill that matches the dark chamber, accent only on the + and on hover */
.pq-view.has .pq-drop {
	inset: auto 10px 10px auto; z-index: 2;
	display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 7px; /* display:flex beats the generic .pq label grid rule so the + and text stay on one line */
	width: auto; white-space: nowrap; padding: 6px 12px 6px 7px;
	border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
	font-size: .8rem; line-height: 1; color: #e9edf1;
	background: rgba(32, 38, 45, .72);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
	transition: border-color .15s, background-color .15s, transform .12s;
}
.pq-view.has .pq-drop::before {
	content: '+'; display: grid; place-items: center; flex: none;
	width: 18px; height: 18px; padding-bottom: 1px; border-radius: 50%;
	background: var(--pq-accent); color: #fff; font-size: .95rem; font-weight: 700; line-height: 1;
}
.pq-view.has .pq-drop b { display: inline; margin: 0; font-size: inherit; font-weight: 600; letter-spacing: .01em; }
.pq-view.has .pq-drop span { display: none; }
.pq-view.has .pq-drop:hover, .pq-view.has.over .pq-drop {
	border-color: var(--pq-accent); background: rgba(232, 89, 12, .22);
	background: color-mix(in srgb, var(--pq-accent) 22%, transparent); transform: translateY(-1px);
}
.pq-view.has .pq-drop:active { transform: none; }
.pq-view.has .pq-drop:focus-within { outline: 2px solid var(--pq-accent); outline-offset: 2px; }
@media (pointer: coarse) { .pq-view.has .pq-drop { padding: 9px 14px 9px 9px; } }

.pq-busy {
	position: absolute; left: 10px; top: 10px; max-width: calc(100% - 20px); padding: 5px 10px; border-radius: 6px;
	background: rgba(0, 0, 0, .55); color: #fff; font-size: .82rem;
	display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.pq-busy[hidden] { display: none; }
.pq-busy::before {
	content: ''; width: 10px; height: 10px; flex: none; border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
	animation: pq-spin .7s linear infinite;
}

.pq-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px 12px; margin: 0; }
.pq-stats[hidden] { display: none; }
.pq-stats dt { font-size: .8rem; color: var(--pq-mute); }
.pq-stats dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }

/* multi-file cart list */
.pq-parts { display: grid; gap: 8px; }
.pq-parts[hidden] { display: none; }
.pq-part-row {
	display: flex; align-items: center; gap: 10px; padding: 10px 12px;
	background: #fff; border: 1px solid var(--pq-line); border-radius: 8px; cursor: pointer;
	transition: border-color .15s, box-shadow .15s, transform .1s;
}
.pq-part-row:hover { border-color: #b9c2ca; transform: translateY(-1px); }
.pq-part-row.on { border-color: var(--pq-accent); box-shadow: 0 0 0 1px var(--pq-accent); }
.pq-part-row.err { border-color: #d92d20; background: #fff5f4; }
.pq-part-row.warn { border-color: #d97706; }
.pq-part-row:focus-visible { outline: 2px solid var(--pq-accent); outline-offset: 2px; }
.pq-part-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; border: 1px solid rgba(0, 0, 0, .15); }
.pq-part-info { display: grid; gap: 1px; min-width: 0; flex: 1; }
.pq-part-name { font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pq-part-sub { font-size: .8rem; color: var(--pq-mute); }
.pq-part-row.err .pq-part-sub { color: #d92d20; }
.pq-part-row.warn .pq-part-sub { color: #b45309; }
.pq-part-price { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pq-part-retry {
	flex: none; padding: 4px 10px; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
	color: #fff; background: var(--pq-accent); border: 0; border-radius: 6px;
}
.pq-part-retry:hover { filter: brightness(1.08); }
.pq-part-x {
	width: 30px; height: 30px; flex: none; padding: 0; cursor: pointer; font-size: 1.2rem; line-height: 1;
	color: var(--pq-mute); background: transparent; border: 1px solid transparent; border-radius: 6px;
	transition: background-color .15s, color .15s;
}
.pq-part-x:hover { background: #fbe9e7; color: #d92d20; border-color: #f3cec9; }

/* cards and fields */
.pq-card {
	display: grid; gap: 12px; padding: clamp(12px, 3cqi, 16px);
	border: 1px solid var(--pq-line); border-radius: 10px; background: #fff;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}
.pq-card[hidden], .pq-sw[hidden] { display: none; }
.pq-empty-hint { color: var(--pq-mute); font-size: .92rem; text-align: center; }
.pq-part-card-title { font-weight: 700; font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pq-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
:is(.pq, .pq-modal) label { display: grid; gap: 4px; font-size: .9rem; color: var(--pq-mute); min-width: 0; }
:is(.pq, .pq-modal) label small { font-size: .8em; opacity: .85; }
:is(.pq, .pq-modal) :is(select, textarea),
:is(.pq, .pq-modal) input:not([type=checkbox]):not([type=file]) {
	width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; font-size: max(16px, 1em); color: var(--pq-ink);
	background: #fff; border: 1px solid var(--pq-line); border-radius: 6px;
	transition: border-color .15s, box-shadow .15s;
}
:is(.pq, .pq-modal) textarea { min-height: 0; resize: vertical; }
:is(.pq, .pq-modal) :is(select, input, textarea):hover { border-color: #b9c2ca; }
:is(.pq, .pq-modal) [aria-invalid=true] { border-color: #d92d20; box-shadow: 0 0 0 1px #d92d20; }
.pq .pq-chk { display: flex; align-items: center; gap: 8px; }
.pq .pq-chk input { width: 18px; height: 18px; flex: none; accent-color: var(--pq-accent); }
:is(.pq, .pq-modal) :is(select, input, textarea, button, a):focus-visible { outline: 2px solid var(--pq-accent); outline-offset: 2px; }

.pq-sw { display: flex; gap: 10px; flex-wrap: wrap; }
.pq-sw button {
	width: 32px; height: 32px; padding: 0; cursor: pointer; border-radius: 50%;
	border: 2px solid #fff; box-shadow: 0 0 0 1px var(--pq-line);
	transition: box-shadow .15s, transform .1s;
}
.pq-sw button:hover { transform: scale(1.08); }
.pq-sw button.on { box-shadow: 0 0 0 2px var(--pq-accent); }

/* the quote is the one loud element */
.pq-quote { border-inline-start: 4px solid var(--pq-accent); }
.pq-total-row { display: flex; align-items: center; gap: 10px; }
.pq-total { font-size: clamp(1.9rem, 8cqi, 2.4rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; transition: opacity .15s; }
.pq-spin {
	width: 16px; height: 16px; border-radius: 50%; flex: none;
	border: 2px solid var(--pq-line); border-top-color: var(--pq-accent);
	animation: pq-spin .7s linear infinite;
}
.pq-spin[hidden] { display: none; }
.pq-meta { color: var(--pq-mute); font-size: .95rem; }
.pq-breakdown:empty { display: none; }
.pq-bd { width: 100%; border-collapse: collapse; font-size: .85rem; }
.pq-bd td { padding: 4px 0; border-top: 1px solid var(--pq-line); }
.pq-bd td:first-child { color: var(--pq-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 0; width: 60%; }
.pq-bd td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.pq-err, .pq-msg { color: #b42318; font-size: .9rem; min-height: 0; }
.pq-err:empty, .pq-msg:empty { display: none; }
.pq-note { margin: 0; color: var(--pq-mute); font-size: .85rem; line-height: 1.45; }

.pq-btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 46px;
	padding: 12px 20px; font: inherit; font-weight: 600; color: #fff; text-decoration: none; cursor: pointer;
	background: var(--pq-accent); border: 2px solid var(--pq-accent); border-radius: 6px;
	transition: filter .15s, transform .1s, background-color .15s;
}
.pq-btn:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); color: #fff; }
.pq-btn:disabled { opacity: .5; cursor: not-allowed; }
.pq-btn-ghost { color: var(--pq-ink); background: #fff; border-color: var(--pq-ink); }
.pq-btn-ghost:hover:not(:disabled) { color: var(--pq-ink); filter: none; background: #f4f5f6; }
.pq-hp { position: absolute !important; left: -9999px !important; }

/* request sent page */
.pq-done { justify-items: center; text-align: center; padding: clamp(22px, 6cqi, 40px) clamp(14px, 4cqi, 28px); max-width: 520px; margin: 0 auto; }
.pq-done h3 { margin: 0; font-size: 1.4rem; }
.pq-done p { margin: 0; color: var(--pq-mute); line-height: 1.5; }
.pq-done .pq-btn { width: 100%; max-width: 340px; }
.pq-check {
	display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
	background: #e7f6ec; color: #16a34a; font-size: 1.8rem; font-weight: 700;
}
.pq-done-total { display: flex; gap: 10px; align-items: baseline; font-size: 1.1rem; }
.pq-done-total span { color: var(--pq-mute); }
.pq-done-total b { font-size: 1.7rem; font-variant-numeric: tabular-nums; }
.pq-pay { font-size: 1.05rem; }

/* the request form pop-up (lives on <body>, so it is styled on its own) */
.pq-lock { overflow: hidden; }
.pq-modal {
	position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center;
	padding: 16px; overflow-y: auto; overscroll-behavior: contain;
	background: rgba(15, 18, 22, .6); font: inherit; color: var(--pq-ink);
}
.pq-sheet {
	display: grid; gap: 12px; width: min(460px, 100%); padding: 22px;
	max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto;
	background: #fff; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
	animation: pq-pop .18s ease-out;
}
.pq-sheet h3 { margin: 0 0 2px; font-size: 1.5rem; line-height: 1.2; color: var(--pq-ink); }
.pq-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.pq-actions .pq-btn { flex: 1 1 140px; }
@media (max-width: 520px) { /* phones: slide up from the bottom like a native sheet */
	.pq-modal { align-items: flex-end; padding: 0; }
	.pq-sheet {
		width: 100%; max-height: 92vh; max-height: 92dvh; padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
		border-radius: 16px 16px 0 0; animation: pq-up .22s ease-out;
	}
}

@keyframes pq-spin { to { transform: rotate(360deg); } }
@keyframes pq-pop { from { opacity: 0; transform: scale(.97); } }
@keyframes pq-up { from { transform: translateY(40px); opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
	.pq-drop, .pq-part-row, .pq-btn, .pq-sw button, .pq-sheet { transition: none; animation: none; }
	.pq-busy::before, .pq-spin { animation: none; }
}

@media (max-width: 900px) { .pq .pq-view { height: 380px; } }
@media (max-width: 480px) { .pq .pq-view { height: 320px; } }

/* Elements switched off in Pricing & settings > Customer interface */
.pq [hidden], .pq-modal [hidden] { display: none !important; }