/**handles:ckcqr**/
/**
 * CKC Quote Requests — frontend styles.
 * Brand-matched to the storefront: navy #00078a (primary), lime #66cc33 (quote accent),
 * pill buttons, system font (inherited). No web fonts, no third-party assets.
 */
:root {
	--ckcqr-navy: #00078a;
	--ckcqr-navy-dark: #00064a;
	--ckcqr-green: #66cc33;
	--ckcqr-green-dark: #54ae28;
	--ckcqr-ink: #15161c;
	--ckcqr-muted: #667085;
	--ckcqr-line: #e2e5ef;
	--ckcqr-line-soft: #eef0f6;
	--ckcqr-bg-soft: #f7f8fc;
	--ckcqr-danger: #c0341d;
	--ckcqr-radius: 10px;
	--ckcqr-pill: 9999px;
	--ckcqr-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .06);
}

/* ---------- Add to Quote button ---------- */
.ckcqr-add-to-quote {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	margin-top: .5em;
	padding: 13px 24px;
	border: 2px solid var(--ckcqr-green);
	border-radius: var(--ckcqr-pill);
	background: transparent;
	color: var(--ckcqr-green-dark);
	font: inherit;
	font-weight: 600;
	line-height: 1;
	text-transform: capitalize;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .05s ease;
}
.ckcqr-add-to-quote:hover {
	background: var(--ckcqr-green);
	color: #fff;
}
.ckcqr-add-to-quote:active { transform: translateY(1px); }
.ckcqr-add-to-quote:focus-visible {
	outline: 3px solid rgba(102, 204, 51, .5);
	outline-offset: 2px;
}
.ckcqr-add-to-quote[disabled] {
	opacity: .45;
	cursor: not-allowed;
}
.ckcqr-add-to-quote.ckcqr-in-quote,
.ckcqr-add-to-quote.ckcqr-in-quote:hover {
	background: var(--ckcqr-green-dark);
	border-color: var(--ckcqr-green-dark);
	color: #fff;
}

/* Header count badge */
.ckcqr-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4em;
	height: 1.4em;
	padding: 0 .4em;
	border-radius: var(--ckcqr-pill);
	background: var(--ckcqr-green);
	color: #fff;
	font-size: .72em;
	font-weight: 700;
	line-height: 1;
}
.ckcqr-count[hidden] { display: none; }

/* ---------- Quote list table ---------- */
.ckcqr-quote-wrap {
	width: 100%;
	box-sizing: border-box;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--ckcqr-line);
	border-radius: var(--ckcqr-radius);
	box-shadow: var(--ckcqr-shadow);
	background: #fff;
}
.ckcqr-quote-table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	color: var(--ckcqr-ink);
	font-size: 15px;
}
/* Defensive: neutralise any un-namespaced global `table thead {}` border rule
   (a stray `table thead{border:2px solid blue}` in the site's global CSS was
   drawing a blue box around this header). Our class selector outranks it. */
.ckcqr-quote-table thead { border: 0; }
.ckcqr-quote-table thead th {
	padding: 14px 16px;
	background: var(--ckcqr-bg-soft);
	border-bottom: 1px solid var(--ckcqr-line);
	color: var(--ckcqr-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-align: left;
}
.ckcqr-quote-table tbody td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--ckcqr-line-soft);
	vertical-align: middle;
}
.ckcqr-quote-table tbody tr:hover { background: #fcfdff; }
.ckcqr-quote-table tbody a {
	color: var(--ckcqr-navy);
	font-weight: 600;
	text-decoration: none;
}
.ckcqr-quote-table tbody a:hover { text-decoration: underline; }
.ckcqr-quote-table .ckcqr-qty {
	width: 4.5em;
	padding: 8px 10px;
	border: 1px solid var(--ckcqr-line);
	border-radius: 8px;
	font: inherit;
	text-align: center;
}
.ckcqr-quote-table .ckcqr-note {
	width: 100%;
	min-width: 9em;
	padding: 8px 10px;
	border: 1px solid var(--ckcqr-line);
	border-radius: 8px;
	font: inherit;
}
.ckcqr-quote-table .ckcqr-qty:focus,
.ckcqr-quote-table .ckcqr-note:focus {
	outline: none;
	border-color: var(--ckcqr-navy);
	box-shadow: 0 0 0 3px rgba(0, 7, 138, .12);
}
.ckcqr-remove {
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: var(--ckcqr-pill);
	background: transparent;
	color: var(--ckcqr-danger);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease;
}
.ckcqr-remove:hover { background: rgba(192, 52, 29, .1); }

/* Totals */
.ckcqr-quote-table tfoot th {
	padding: 12px 16px;
	text-align: right;
	font-weight: 600;
	color: var(--ckcqr-muted);
}
.ckcqr-quote-table tfoot td {
	padding: 12px 16px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.ckcqr-quote-table tfoot tr:last-child th { color: var(--ckcqr-ink); font-size: 1.05em; }
.ckcqr-quote-table tfoot .ckcqr-grand-total {
	font-weight: 800;
	font-size: 1.1em;
	color: var(--ckcqr-navy);
}
.ckcqr-empty {
	padding: 28px;
	text-align: center;
	color: var(--ckcqr-muted);
	background: var(--ckcqr-bg-soft);
	border: 1px dashed var(--ckcqr-line);
	border-radius: var(--ckcqr-radius);
}

/* ---------- Submission form ---------- */
.ckcqr-form {
	width: 100%;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 22px;
	margin-top: 28px;
	padding: 26px;
	background: #fff;
	border: 1px solid var(--ckcqr-line);
	border-radius: var(--ckcqr-radius);
	box-shadow: var(--ckcqr-shadow);
}
/* WooCommerce stamps an empty <wc-order-attribution-inputs> custom element inside the
   form (native Order Attribution, added in 0.1.5). As an inline custom element it would
   otherwise occupy the first grid cell and shift every field one column to the right.
   Its hidden inputs still submit while the wrapper is display:none. */
.ckcqr-form > wc-order-attribution-inputs { display: none; }
.ckcqr-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}
/* Full-width fields */
.ckcqr-row-address_1,
.ckcqr-row-message,
.ckcqr-row-preferred_contact,
.ckcqr-row-how_did_you_hear,
.ckcqr-actions { grid-column: 1 / -1; }

.ckcqr-row label {
	font-size: 13px;
	font-weight: 600;
	color: var(--ckcqr-ink);
}
.ckcqr-req { color: var(--ckcqr-green-dark); }
.ckcqr-form input[type="text"],
.ckcqr-form input[type="email"],
.ckcqr-form input[type="tel"],
.ckcqr-form select,
.ckcqr-form textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--ckcqr-line);
	border-radius: 8px;
	background: #fff;
	color: var(--ckcqr-ink);
	font: inherit;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ckcqr-form textarea { min-height: 96px; resize: vertical; }
.ckcqr-form input:focus,
.ckcqr-form select:focus,
.ckcqr-form textarea:focus {
	outline: none;
	border-color: var(--ckcqr-navy);
	box-shadow: 0 0 0 3px rgba(0, 7, 138, .12);
}
.ckcqr-row.ckcqr-has-error input,
.ckcqr-row.ckcqr-has-error select,
.ckcqr-row.ckcqr-has-error textarea {
	border-color: var(--ckcqr-danger);
	box-shadow: 0 0 0 3px rgba(192, 52, 29, .1);
}
.ckcqr-error { color: var(--ckcqr-danger); font-size: 12.5px; }
.ckcqr-form-error {
	margin: 18px 0 0;
	padding: 13px 16px;
	background: #fdecea;
	border: 1px solid #f3c4bc;
	border-radius: var(--ckcqr-radius);
	color: var(--ckcqr-danger);
	font-weight: 600;
}

.ckcqr-actions { margin: 6px 0 0; }
.ckcqr-submit {
	padding: 14px 30px;
	border: 0;
	border-radius: var(--ckcqr-pill);
	background: var(--ckcqr-navy);
	color: #fff;
	font: inherit;
	font-weight: 600;
	text-transform: capitalize;
	cursor: pointer;
	transition: background-color .18s ease, transform .05s ease;
}
.ckcqr-submit:hover { background: var(--ckcqr-navy-dark); }
.ckcqr-submit:active { transform: translateY(1px); }
.ckcqr-submit:focus-visible { outline: 3px solid rgba(0, 7, 138, .35); outline-offset: 2px; }

/* ---------- Admin badge (orders list) ---------- */
.ckcqr-source-badge {
	display: inline-block;
	padding: 2px 9px;
	border-radius: var(--ckcqr-pill);
	background: rgba(102, 204, 51, .16);
	color: var(--ckcqr-green-dark);
	font-size: 11px;
	font-weight: 700;
}

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
	.ckcqr-form {
		grid-template-columns: 1fr;
		padding: 18px;
	}

	/* Collapse the quote table into stacked, self-labelling cards.
	   No horizontal scroll on phones — each row becomes its own bordered card,
	   and each cell prints its column header (from data-label) beside the value. */
	.ckcqr-quote-wrap {
		overflow-x: visible;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
	}
	.ckcqr-quote-table {
		display: block;
		width: 100%;
		min-width: 0;
		font-size: 14px;
	}
	.ckcqr-quote-table thead { display: none; }
	.ckcqr-quote-table tbody td.ckcqr-cell-product a { overflow-wrap: anywhere; }
	.ckcqr-quote-table tbody,
	.ckcqr-quote-table tbody tr,
	.ckcqr-quote-table tbody td {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}
	.ckcqr-quote-table tbody td { min-width: 0; }
	.ckcqr-quote-table tbody tr {
		position: relative;
		margin: 0 0 14px;
		padding: 14px 16px;
		border: 1px solid var(--ckcqr-line);
		border-radius: var(--ckcqr-radius);
		background: #fff;
		box-shadow: var(--ckcqr-shadow);
	}
	.ckcqr-quote-table tbody tr:hover { background: #fff; }
	.ckcqr-quote-table tbody td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 7px 0;
		border: 0;
		text-align: right;
	}
	.ckcqr-quote-table tbody td::before {
		content: attr(data-label);
		flex: 0 0 auto;
		color: var(--ckcqr-muted);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .04em;
		text-transform: uppercase;
		text-align: left;
	}
	/* Product name spans the full card width as its header. */
	.ckcqr-quote-table tbody td.ckcqr-cell-product {
		display: block;
		margin: 0 0 6px;
		padding: 0 44px 8px 0; /* right pad clears the remove button */
		border-bottom: 1px solid var(--ckcqr-line-soft);
		text-align: left;
	}
	.ckcqr-quote-table tbody td.ckcqr-cell-product::before { display: none; }
	.ckcqr-quote-table tbody td.ckcqr-cell-product a { font-size: 15px; }
	.ckcqr-quote-table .ckcqr-qty { width: 4.5em; text-align: center; }
	/* Remove button pinned to the card's top-right corner. */
	.ckcqr-quote-table tbody td.ckcqr-remove-cell {
		position: absolute;
		top: 8px;
		right: 8px;
		width: auto;
		padding: 0;
	}
	.ckcqr-quote-table tbody td.ckcqr-remove-cell::before { display: none; }

	/* Totals: stacked label/value rows, aligned with the cards. */
	.ckcqr-quote-table tfoot { display: block; }
	.ckcqr-quote-table tfoot tr {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		padding: 2px 16px;
	}
	.ckcqr-quote-table tfoot th,
	.ckcqr-quote-table tfoot td {
		display: block;
		width: auto;
		padding: 5px 0;
		text-align: left;
	}
}