/* Crown Print Configurable Products — front-end styling
   Brand palette: black / chrome-silver / copper-orange, matching the
   Crown Print badge mark — the same tokens as the Bundle Builder plugin's
   cpb-bundle.css, kept as an independent copy here so this plugin styles
   itself correctly even if that one isn't active. Everything is scoped
   under .cpc-scope, with the same defensive button/input reset used there,
   for the same reason: this can't be knocked off-kilter by whatever the
   active theme does with its own default <button>/<input> skins. */

.cpc-scope {
	--cpc-black: #1a1a1a;
	--cpc-accent: #d9540f;
	--cpc-accent-dark: #b8460c;
	--cpc-silver: #8f8f8f;
	--cpc-green: #2e7d32;
	--cpc-green-bg: #e8f5e9;
	--cpc-border: #dcdcdc;
	--cpc-bg-soft: #f5f5f5;
	--cpc-text: #1a1a1a;
	--cpc-text-muted: #6b6b6b;
	--cpc-radius: 10px;

	color: var(--cpc-text);
}

.cpc-scope,
.cpc-scope *,
.cpc-scope *::before,
.cpc-scope *::after {
	box-sizing: border-box !important;
}

.cpc-scope > div,
.cpc-scope > form,
.cpc-dropdowns > div,
.cpc-price-grid-wrap > div {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
}

:where(.cpc-scope) button,
:where(.cpc-scope) input,
:where(.cpc-scope) select,
:where(.cpc-scope) textarea {
	all: revert;
	box-sizing: border-box !important;
	font-family: inherit;
	color: inherit;
}

:where(.cpc-scope) button {
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	text-align: left;
	line-height: normal;
}

:where(.cpc-scope) a {
	color: var(--cpc-accent);
}

.cpc-notice {
	padding: 0.75em 1em;
	background: #fff4e5;
	border: 1px solid #ffd8a8;
	border-radius: var(--cpc-radius);
}

.cpc-price-tbc {
	color: var(--cpc-text-muted);
	font-size: 0.7em;
	font-weight: 600;
}

/* ---------- Trust badges (identical component to the Bundle Builder) ---------- */

.cpc-trust-row {
	display: flex;
	flex-direction: column;
	margin: 1.25em 0;
	border: 1px solid var(--cpc-border);
	border-radius: var(--cpc-radius);
	overflow: hidden;
	background: #fff;
}

.cpc-trust-item {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.75em 1em;
	border-bottom: 1px solid var(--cpc-border);
}

.cpc-trust-item:last-child {
	border-bottom: none;
}

.cpc-trust-icon {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff;
	color: var(--cpc-black);
	border: 1px solid var(--cpc-black);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.8em;
}

.cpc-trust-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	min-width: 0;
}

.cpc-trust-text strong {
	font-size: 0.88em;
}

.cpc-trust-text small {
	color: var(--cpc-text-muted);
	font-size: 0.76em;
}

/* ---------- Customise heading ---------- */

.cpc-customise-heading {
	margin: 1.5em 0 1em;
	font-size: 1.3em;
}

/* ---------- Dropdowns ---------- */

.cpc-dropdown-field {
	margin-bottom: 1em;
}

.cpc-dropdown-field label {
	display: block;
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--cpc-text-muted);
	margin-bottom: 0.4em;
}

.cpc-scope .cpc-dropdown-field select {
	all: revert;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 0.65em 0.75em !important;
	border: 1px solid var(--cpc-border) !important;
	border-radius: 6px !important;
	background: #fff !important;
	font-size: 0.98em !important;
	color: var(--cpc-text) !important;
}

/* ---------- Price grid ---------- */

.cpc-price-grid-wrap {
	margin: 1em 0 1.25em;
}

.cpc-price-grid-empty {
	color: var(--cpc-text-muted);
	font-size: 0.92em;
	padding: 0.75em 0;
}

/* The border/radius/clip lives on this wrapper, not the <table> itself —
   border-radius + overflow:hidden applied directly to a <table> element
   doesn't clip reliably across browsers (the classic cause of a grid whose
   bottom edge looks borderless). This wrapper also scrolls horizontally on
   narrow screens instead of squeezing columns unreadably. */
.cpc-price-grid-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--cpc-border) !important;
	border-radius: var(--cpc-radius);
	/* Clip the header's corners and the table's own borders to this
	   wrapper's rounded edge, and make sure nothing the active theme's
	   own table styles add (extra 1px outlines, etc.) can peek out past
	   it and read as a "double" border. */
	overflow: hidden;
	overflow-x: auto;
}

table.cpc-price-grid {
	width: 100% !important;
	min-width: 420px;
	border-collapse: collapse !important;
	border-spacing: 0 !important;
	border: none !important;
}

/* Reset first, then add back only the single border we actually want
   (a line under each row) — this is what stops a theme's own default
   table skin (which often puts a border on every side of every cell)
   from combining with ours into doubled-looking lines, especially
   along the header and the outer edges. */
table.cpc-price-grid th,
table.cpc-price-grid td {
	margin: 0 !important;
	padding: 0.65em 0.9em;
	text-align: center;
	border: none !important;
	border-bottom: 1px solid var(--cpc-border) !important;
	font-size: 0.95em;
	white-space: nowrap;
}

table.cpc-price-grid tbody tr:last-child td {
	/* The wrapper already draws the bottom edge — this avoids a second,
	   doubled-looking line right on top of it. */
	border-bottom: none !important;
}

table.cpc-price-grid thead th {
	background: var(--cpc-accent-dark) !important;
	color: #fff !important;
	font-weight: 700;
	font-size: 0.78em;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	border-bottom: none !important;
}

table.cpc-price-grid tbody tr {
	cursor: pointer;
}

table.cpc-price-grid tbody tr:hover td {
	background: var(--cpc-bg-soft);
}

table.cpc-price-grid tbody tr.cpc-row-selected td {
	background: var(--cpc-accent) !important;
	color: #fff;
	font-weight: 700;
}

/* Quantity cell reserves a little extra left padding at all times (so
   text doesn't shift when a row becomes selected) — the tick itself is
   an overlay inside that padding, not a table column of its own. */
table.cpc-price-grid td.cpc-qty-cell {
	position: relative;
	padding-left: 2.1em;
}

.cpc-row-tick {
	position: absolute;
	left: 0.55em;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.3em;
	height: 1.3em;
	border-radius: 50%;
	background: #fff;
	color: var(--cpc-accent);
	font-size: 0.8em;
	font-weight: 700;
}

table.cpc-price-grid .cpc-cell-na {
	color: var(--cpc-text-muted);
	font-weight: 400;
}

table.cpc-price-grid tbody tr[data-available="0"] {
	cursor: default;
}

.cpc-vat-note {
	display: block;
	margin-top: 0.5em;
	font-size: 0.82em;
	color: var(--cpc-accent);
	font-weight: 600;
	text-align: right;
}

.cpc-grid-hint {
	font-size: 0.85em;
	color: var(--cpc-text-muted);
	margin: 0 0 0.5em;
}

/* ---------- Total (replaces the top-of-page "From £X" for this product type) ---------- */

.cpc-total-wrap {
	margin: 1em 0 1.25em;
}

.cpc-total-box {
	border: 1px solid var(--cpc-border);
	border-radius: var(--cpc-radius);
	background: #fff;
	overflow: hidden;
}

.cpc-total-breakdown {
	padding: 0.25em 0;
}

.cpc-total-row {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	padding: 0.5em 1em;
	font-size: 0.92em;
	color: var(--cpc-text-muted);
	border-bottom: 1px solid #f0f0f0;
}

.cpc-total-grand {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	padding: 0.75em 1em;
	background: var(--cpc-accent-dark);
	color: #fff;
	font-size: 1.05em;
}

/* ---------- Upload field ---------- */

.cpc-upload-field {
	margin-bottom: 1.25em;
	padding: 0.75em 1em;
	background: var(--cpc-bg-soft);
	border: 1px solid var(--cpc-border);
	border-radius: var(--cpc-radius);
}

.cpc-upload-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.4em;
}

.cpc-upload-field input[type="file"] {
	display: block;
	max-width: 480px;
	font-size: 0.9em;
}

.cpc-upload-field .description {
	display: block;
	font-size: 0.8em;
	color: var(--cpc-text-muted);
	margin-top: 0.3em;
}

.cpc-upload-list {
	list-style: none;
	margin: 0.6em 0 0;
	padding: 0;
}

.cpc-upload-list:empty {
	margin: 0;
}

.cpc-upload-item {
	display: flex;
	align-items: center;
	gap: 0.6em;
	background: #fff;
	border: 1px solid var(--cpc-border);
	border-radius: 6px;
	padding: 0.45em 0.7em;
	margin-bottom: 0.4em;
	font-size: 0.85em;
}

.cpc-upload-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cpc-upload-size {
	flex: 0 0 auto;
	color: var(--cpc-text-muted);
	font-size: 0.9em;
}

.cpc-upload-remove {
	flex: 0 0 auto;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	background: var(--cpc-bg-soft);
	color: var(--cpc-text-muted);
	font-size: 1em;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cpc-upload-remove:hover {
	background: #ffe3e3;
	color: #c8102e;
}

.cpc-upload-status {
	display: block;
	font-size: 0.82em;
	font-weight: 600;
	margin-top: 0.35em;
}

.cpc-upload-status.cpc-upload-ok {
	color: var(--cpc-green);
}

.cpc-upload-status.cpc-upload-error {
	color: #c8102e;
}

/* ---------- Add to cart ---------- */

.cpc-add-to-cart-btn[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ---------- Product description (WooCommerce Description tab) ----------
   Same reusable pattern as the Bundle Builder plugin's .cpb-desc block —
   paste the matching HTML directly into a cpc_product's Description field
   and these rules style it. Kept as its own cpc-desc copy so this plugin
   works standalone; if the Bundle Builder is also active, .cpb-desc works
   identically and either can be used. */

div.cpc-desc {
	max-width: 760px !important;
}

div.cpc-desc p {
	font-size: 1.02em !important;
	line-height: 1.65 !important;
	list-style: none !important;
}

div.cpc-desc .cpc-desc-badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.5em !important;
	background: var(--cpc-green-bg, #e8f5e9) !important;
	color: var(--cpc-green, #2e7d32) !important;
	font-weight: 700 !important;
	padding: 0.55em 1.1em !important;
	border-radius: 999px !important;
	margin: 0.4em 0 1.5em !important;
	border: none !important;
}

div.cpc-desc h3.cpc-desc-heading {
	margin: 1.6em 0 0.75em !important;
	padding: 0 0 0.4em !important;
	border: none !important;
	border-bottom: 2px solid var(--cpc-accent, #d9540f) !important;
	display: inline-block !important;
	font-size: 1.15em !important;
	font-weight: 700 !important;
	color: var(--cpc-black, #1a1a1a) !important;
	background: none !important;
	line-height: 1.3 !important;
}

div.cpc-desc ul.cpc-desc-list {
	list-style: none !important;
	margin: 0 0 1.5em !important;
	padding: 0 !important;
}

div.cpc-desc ul.cpc-desc-list li {
	position: relative !important;
	padding: 0.55em 0 0.55em 1.9em !important;
	margin: 0 !important;
	border: none !important;
	border-bottom: 1px solid #eee !important;
	font-size: 0.98em !important;
	list-style: none !important;
}

div.cpc-desc ul.cpc-desc-list li::marker {
	content: "" !important;
}

div.cpc-desc ul.cpc-desc-list li:last-child {
	border-bottom: none !important;
}

div.cpc-desc ul.cpc-desc-list li::before {
	content: "✓" !important;
	position: absolute !important;
	left: 0 !important;
	top: 0.55em !important;
	width: 20px !important;
	height: 20px !important;
	border-radius: 50% !important;
	background: var(--cpc-black, #1a1a1a) !important;
	color: #fff !important;
	font-size: 0.72em !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
}

div.cpc-desc table.cpc-desc-table {
	width: 100% !important;
	border-collapse: collapse !important;
	margin: 0 0 1.5em !important;
	font-size: 0.95em !important;
	background: none !important;
}

div.cpc-desc table.cpc-desc-table th,
div.cpc-desc table.cpc-desc-table td {
	text-align: left !important;
	padding: 0.65em 1em !important;
	border: 1px solid var(--cpc-border, #dcdcdc) !important;
}

div.cpc-desc table.cpc-desc-table th {
	background: var(--cpc-black, #1a1a1a) !important;
	color: #fff !important;
	font-weight: 700 !important;
}

div.cpc-desc table.cpc-desc-table tr:nth-child(even) td {
	background: var(--cpc-bg-soft, #f5f5f5) !important;
}

/* ---------- Mobile ----------
   Most components already reflow at full width (dropdowns, trust row,
   total box), so this block only tightens what still feels cramped or
   fiddly to tap on a small screen: the price grid's padding/columns,
   the tick target, the total figures, and the add-to-cart button. */
@media ( max-width: 600px ) {
	.cpc-customise-heading {
		font-size: 1.12em;
		margin: 1.25em 0 0.85em;
	}

	/* The 420px floor that keeps the grid readable on a tablet/desktop is
	   wider than most phone screens, which is what was forcing the
	   horizontal-scroll wrapper to kick in on mobile. With just the
	   Quantity/Price columns left (see .cpc-qty-cell above), the table
	   reads fine shrunk down to fit the screen instead — so mobile drops
	   the floor entirely rather than scrolling. */
	table.cpc-price-grid {
		min-width: 0;
	}

	table.cpc-price-grid th,
	table.cpc-price-grid td {
		padding: 0.55em 0.5em;
		font-size: 0.86em;
		white-space: normal;
	}

	table.cpc-price-grid td.cpc-qty-cell {
		padding-left: 1.7em;
	}

	.cpc-row-tick {
		width: 1.15em;
		height: 1.15em;
		font-size: 0.75em;
		left: 0.4em;
	}

	.cpc-vat-note {
		text-align: left;
	}

	.cpc-total-row,
	.cpc-total-grand {
		padding: 0.6em 0.85em;
		font-size: 0.9em;
	}

	.cpc-total-grand {
		font-size: 1em;
	}

	.cpc-upload-field input[type="file"] {
		max-width: 100%;
	}

	button.cpc-add-to-cart-btn,
	.cpc-add-to-cart-btn {
		display: block !important;
		width: 100% !important;
		text-align: center !important;
		padding: 0.85em 1em !important;
		font-size: 1em !important;
	}
}