/*
 * Instant-quote panel — built on printpal-theme's own design tokens
 * (--ptx-gradient-1, --ptx-heading/'Outfit', --pp-ink/--pp-gold) so it reads
 * as part of the site, not a bolted-on tool. Scoped entirely under
 * `.pp-quote` — nothing here is global.
 */

.pp-quote {
	--pq-purple: #9445d3;
	--pq-paper: #faf8f4;
	--pq-surface: #ffffff;
	--pq-border: #e8e4ef;
	--pq-text: #26263a;
	--pq-muted: #7a7a9a;
	--pq-grad: var(--ptx-gradient-1, linear-gradient(90deg, #4951fe 24%, #4951fe 38%, #9445d3 62%, #df39a7 100%));

	margin-top: 28px;
	background: var(--pq-paper);
	border: 1px solid var(--pq-border);
	border-radius: 22px;
	box-shadow: 0 18px 44px rgba(17, 16, 16, 0.08);
	padding: 26px;
	font-family: var(--ptx-body-font, 'Outfit'), sans-serif;
	color: var(--pq-text);
}

.pp-quote__title {
	font-family: var(--ptx-heading, 'Outfit'), sans-serif;
	font-size: 20px;
	font-weight: 800;
	margin: 0 0 4px;
	color: var(--ptx-title-color, #111010);
}
.pp-quote__sub {
	font-size: 14px;
	color: var(--pq-muted);
	margin: 0 0 20px;
}

.pp-quote__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
}
@media (max-width: 782px) {
	.pp-quote__body { grid-template-columns: 1fr; }
}

.pp-quote__fields { display: flex; flex-direction: column; gap: 16px; }

.pp-field label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--pq-text);
	margin-bottom: 6px;
}
.pp-hint-inline { font-weight: 400; color: var(--pq-muted); }
.pp-hint { font-size: 12px; color: var(--pq-muted); margin: 6px 0 0; line-height: 1.4; }

.pp-quote select,
.pp-quote input[type=number] {
	width: 100%;
	background: var(--pq-surface);
	border: 1.5px solid var(--pq-border);
	border-radius: 10px;
	padding: 10px 13px;
	font-size: 15px;
	font-family: inherit;
	color: var(--pq-text);
	transition: border-color 0.15s, box-shadow 0.15s;
}
.pp-quote select:focus,
.pp-quote input[type=number]:focus {
	outline: none;
	border-color: var(--pq-purple);
	box-shadow: 0 0 0 3px rgba(148, 69, 211, 0.12);
}

/* Selectable chips — each option is its own pill, so any option count wraps
   cleanly (a shared capsule container looks broken the moment it wraps). */
.pp-seg {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.pp-seg button {
	appearance: none;
	background: var(--pq-surface);
	border: 1.5px solid var(--pq-border);
	border-radius: 50px;
	padding: 9px 18px;
	font-size: 13.5px;
	font-weight: 600;
	font-family: inherit;
	line-height: 1.2;
	color: var(--pq-text);
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.pp-seg button:hover { border-color: var(--pq-purple); color: var(--pq-purple); }
.pp-seg button[aria-pressed="true"] {
	background: var(--pq-grad);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 4px 14px rgba(148, 69, 211, 0.28);
}
.pp-seg button[aria-pressed="true"]:hover { color: #fff; }
.pp-seg button:disabled { opacity: 0.4; cursor: not-allowed; }

.pp-size-inputs {
	display: flex;
	align-items: center;
	gap: 10px;
}
.pp-size-inputs input { width: auto; flex: 1; text-align: center; }
.pp-size-inputs span { color: var(--pq-muted); font-weight: 600; }

.pp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pp-chips button {
	appearance: none;
	background: var(--pq-surface);
	border: 1.5px solid var(--pq-border);
	border-radius: 50px;
	padding: 6px 14px;
	font-size: 12.5px;
	font-weight: 600;
	font-family: inherit;
	color: var(--pq-text);
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s;
}
.pp-chips button:hover { border-color: var(--pq-purple); color: var(--pq-purple); }

/* ── Result panel ─────────────────────────────────────────────────────── */
.pp-quote__result {
	background: var(--pq-surface);
	border: 1.5px solid var(--pq-border);
	border-radius: 16px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 220px;
	transition: opacity 0.15s;
}
.pp-quote__result--updating { opacity: 0.55; }

.pp-quote__loading,
.pp-quote__error {
	text-align: center;
	color: var(--pq-muted);
	font-size: 14px;
}
.pp-quote__error { color: #b23b3b; }

.pp-quote__price {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
.pp-quote__was {
	font-size: 16px;
	color: var(--pq-muted);
	text-decoration: line-through;
}
.pp-quote__now {
	font-family: var(--ptx-heading, 'Outfit'), sans-serif;
	font-size: 34px;
	font-weight: 800;
	background: var(--pq-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.pp-quote__per {
	font-size: 13px;
	color: var(--pq-muted);
	font-weight: 600;
}

.pp-quote__note {
	font-size: 12.5px;
	color: var(--pq-muted);
	margin-top: 4px;
}

.pp-quote__cta { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--pq-border); }
.pp-quote__cta-lead { font-size: 13px; color: var(--pq-muted); margin: 0 0 12px; }

.pp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ptx-heading, 'Outfit'), sans-serif;
	font-size: 14px;
	font-weight: 600;
	padding: 12px 22px;
	border-radius: 50px;
	text-decoration: none;
	margin: 0 8px 8px 0;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pp-btn--whatsapp {
	background: #25d366;
	color: #fff;
	box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35);
}
.pp-btn--whatsapp:hover { transform: translateY(-1px); color: #fff; }
.pp-btn--email {
	background: var(--pq-grad);
	color: #fff;
	box-shadow: 0 6px 22px rgba(148, 69, 211, 0.35);
}
.pp-btn--email:hover { transform: translateY(-1px); color: #fff; }

/* ── Add to cart, in the result card beside the price ────────────────────── */
.pp-btn--cart {
	background: var(--pq-grad);
	color: #fff;
	border: none;
	cursor: pointer;
	width: 100%;
	margin: 14px 0 0;
	padding: 14px 22px;
	font-size: 15px;
	box-shadow: 0 6px 22px rgba(148, 69, 211, 0.35);
}
.pp-btn--cart:hover { transform: translateY(-1px); color: #fff; }

/* ── Bridge-product page adjustments (scoped by body class) ─────────────── */
/* The panel's sticker quantity is the real quantity — WC's own qty stepper
   would be a SECOND, job-multiplying quantity right next to it. Hidden on
   the product page only; in the cart it stays (there it means "copies of
   this whole job", which is coherent). */
.pp-bridge-product form.cart .quantity { display: none; }

/* The panel's own Add-to-cart (beside the price it locks) drives the form
   submit — hide WC's duplicate button so there's exactly one way to add. */
.pp-bridge-product form.cart .single_add_to_cart_button { display: none !important; }

/* Nudge under the drag & drop artwork field. */
.pp-upload-hint {
	font-size: 12.5px;
	color: #7a7a9a;
	line-height: 1.5;
	margin: 8px 0 0;
}