/*
 * Auchterprint.co.uk's actual brand (Astra theme + Beaver Builder), measured
 * from the live site rather than assumed: deep purple accent (#44236B, used
 * on its nav links/buttons), Open Sans body copy, Merriweather headings,
 * pill-shaped buttons. Values are plain defaults here (not read from theme
 * CSS variables) since Astra doesn't expose one single reliable accent-color
 * variable - if the site's palette changes, update the values below.
 */
.pprc-configurator {
	--pprc-accent: #44236b;
	--pprc-accent-dark: #341a53;
	--pprc-ink: #282828;
	--pprc-ink-muted: #6b6b6b;
	--pprc-surface: #fff;
	--pprc-surface-alt: #f2f5f7;
	--pprc-border: #e2e2e2;
	--pprc-radius: 10px;
	--pprc-transition: 0.2s ease;
	--pprc-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	font-family: var( --pprc-font );
	color: var( --pprc-ink );
	background: var( --pprc-surface );
	border: 1px solid var( --pprc-border );
	border-radius: var( --pprc-radius );
	padding: 1.5em;
	margin: 1.5em 0;
	max-width: 560px;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.04 ), 0 8px 24px rgba( 0, 0, 0, 0.05 );
}

.pprc-fields {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 180px, 1fr ) );
	gap: 16px 20px;
}

.pprc-field {
	margin: 0;
	min-width: 0;
}
.pprc-field--wide {
	grid-column: 1 / -1;
}

.pprc-field label {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --pprc-ink-muted );
	margin-bottom: 0.4em;
}

.pprc-input {
	width: 100%;
	font-family: inherit;
	font-size: 0.95rem;
	color: var( --pprc-ink );
	background: var( --pprc-surface );
	border: 1.5px solid var( --pprc-border );
	border-radius: calc( var( --pprc-radius ) - 4px );
	padding: 0.6em 0.75em;
	transition: border-color var( --pprc-transition ), box-shadow var( --pprc-transition );
}
select.pprc-input {
	appearance: none;
	background-image: linear-gradient( 45deg, transparent 50%, var( --pprc-ink-muted ) 50% ), linear-gradient( 135deg, var( --pprc-ink-muted ) 50%, transparent 50% );
	background-position: calc( 100% - 18px ) center, calc( 100% - 13px ) center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 2em;
}
.pprc-input:focus {
	outline: none;
	border-color: var( --pprc-accent );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --pprc-accent ) 25%, transparent );
}
input[type="checkbox"].pprc-input,
input[type="radio"].pprc-input {
	width: auto;
	accent-color: var( --pprc-accent );
}
.pprc-input:disabled {
	background: var( --pprc-surface-alt );
	color: var( --pprc-ink-muted );
	cursor: not-allowed;
}
.pprc-turnaround-lock-note {
	display: block;
	margin-top: 0.35em;
}

/* --- Segmented control (sides, etc.) --- */
.pprc-segmented-label {
	margin-bottom: 0.5em;
}
.pprc-segmented-options {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
}
.pprc-inline {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: 0.9rem;
	font-weight: 500;
	text-transform: none;
	letter-spacing: normal;
	color: var( --pprc-ink );
	padding: 0.55em 1em;
	border: 1.5px solid var( --pprc-border );
	border-radius: 999px;
	cursor: pointer;
	transition: border-color var( --pprc-transition ), background var( --pprc-transition );
}
.pprc-inline:has( input:checked ) {
	border-color: var( --pprc-accent );
	background: color-mix( in srgb, var( --pprc-accent ) 12%, transparent );
}
.pprc-inline input {
	margin: 0;
}

.pprc-checkbox {
	display: flex !important;
	align-items: center;
	gap: 8px;
	text-transform: none !important;
	font-weight: 500 !important;
	font-size: 0.9rem !important;
	letter-spacing: normal !important;
	color: var( --pprc-ink ) !important;
}

/* --- Quantity stepper (swing tags) --- */
.pprc-stepper-controls {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.pprc-qty-stepper {
	width: 90px;
	text-align: center;
	flex: 0 0 auto;
}
.pprc-step-up,
.pprc-step-down {
	width: 2.25em;
	height: 2.25em;
	flex: 0 0 auto;
	line-height: 1;
	font-size: 1.1rem;
	color: var( --pprc-ink );
	background: var( --pprc-surface-alt );
	border: 1.5px solid var( --pprc-border );
	border-radius: 999px;
	cursor: pointer;
	transition: background var( --pprc-transition ), border-color var( --pprc-transition );
}
.pprc-step-up:hover,
.pprc-step-down:hover {
	border-color: var( --pprc-accent );
	background: color-mix( in srgb, var( --pprc-accent ) 12%, transparent );
}
.pprc-hint {
	display: block;
	width: 100%;
	font-size: 0.8rem;
	color: var( --pprc-ink-muted );
	font-weight: normal;
	text-transform: none;
	letter-spacing: normal;
}

/* --- Artwork --- */
.pprc-artwork {
	margin-top: 1.5em;
	padding-top: 1.25em;
	border-top: 1px solid var( --pprc-border );
}
.pprc-artwork-upload {
	margin-top: 0.75em;
	padding: 1em;
	background: var( --pprc-surface-alt );
	border: 1.5px dashed var( --pprc-border );
	border-radius: calc( var( --pprc-radius ) - 4px );
}
.pprc-artwork-file {
	font-size: 0.85rem;
}
.pprc-artwork-status {
	display: inline-block;
	margin-left: 0.5em;
	font-size: 0.85rem;
	color: var( --pprc-ink-muted );
}
.pprc-artwork-remove {
	color: #b3261e;
	margin-left: 0.4em;
}
.pprc-artwork-email {
	margin-top: 0.75em;
}
.pprc-artwork-email .pprc-hint {
	margin: 0;
}

/* --- Price box --- */
.pprc-price-box {
	margin-top: 1.5em;
	padding: 1.1em 1.25em;
	background: var( --pprc-surface-alt );
	border-radius: calc( var( --pprc-radius ) - 2px );
	transition: box-shadow 0.4s ease;
}
.pprc-price-label {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --pprc-ink-muted );
	margin-bottom: 0.2em;
}
.pprc-price-value {
	font-size: 1.7rem;
	font-weight: 700;
	color: var( --pprc-accent-dark );
}
.pprc-price-flash {
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --pprc-accent ) 35%, transparent );
}
.pprc-price-breakdown {
	list-style: none;
	margin: 0.75em 0 0;
	padding: 0.75em 0 0;
	border-top: 1px solid var( --pprc-border );
	font-size: 0.85rem;
	color: var( --pprc-ink-muted );
}
.pprc-price-breakdown li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 0.15em 0;
}
.pprc-breakdown-label::after {
	content: ":";
}
.pprc-breakdown-value {
	color: var( --pprc-ink );
	font-weight: 500;
	text-align: right;
}
.pprc-price-error {
	display: block;
	color: #b3261e;
	font-size: 0.85rem;
	margin-top: 0.5em;
}

/* WooCommerce's own quantity box is removed server-side (PPRC_Cart::force_sold_individually
 * marks the product sold-individually, which makes WooCommerce render it as a hidden field
 * automatically) rather than hidden here with CSS - no rule needed for that anymore. */

/* Style WooCommerce's own Add to Cart button to match the site's existing pill-shaped
 * buttons rather than replacing it - our fields already live inside the same form, so
 * no new button or submit handler is needed for them to be included in the order. */
form.cart:has( .pprc-configurator ) .single_add_to_cart_button {
	font-family: "Open Sans", inherit;
	font-weight: 600;
	font-size: 0.9rem;
	letter-spacing: 0.02em;
	background: #44236b;
	color: #fff;
	border: none;
	border-radius: 60px;
	padding: 0.9em 2em;
	margin-top: 1em;
	cursor: pointer;
	transition: background 0.2s ease;
}
form.cart:has( .pprc-configurator ) .single_add_to_cart_button:hover {
	background: #341a53;
}
form.cart:has( .pprc-configurator ) .single_add_to_cart_button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

@media ( max-width: 480px ) {
	.pprc-configurator {
		padding: 1.1em;
	}
	.pprc-fields {
		grid-template-columns: 1fr;
	}
}