/* Yanbo Quote Table
   Every colour and radius below is a CSS variable - override them in your
   child theme or Elementor custom CSS to match the site. */

.yqt-wrap {
	--yqt-accent: #2563eb;
	--yqt-accent-ink: #ffffff;
	--yqt-border: #e5e7eb;
	--yqt-grid: #eceff3;
	--yqt-ink: #111827;
	--yqt-muted: #6b7280;
	--yqt-surface: #ffffff;
	--yqt-hover: #f8fafc;
	--yqt-hl: #fff8dd;
	--yqt-radius: 10px;
	--yqt-ok-bg: #e7f7ee;
	--yqt-ok-ink: #15803d;

	margin: 2em 0;
	font-size: 15px;
	color: var(--yqt-ink);
}

/* ---------- toolbar ---------- */

.yqt-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 14px;
	align-items: center;
}

.yqt-toolbar .yqt-search,
.yqt-toolbar .yqt-filter,
.yqt-toolbar .yqt-perpage {
	padding: 10px 12px;
	border: 1px solid var(--yqt-border);
	border-radius: 8px;
	background: var(--yqt-surface);
	font-size: 0.92em;
	color: var(--yqt-ink);
	line-height: 1.3;
}

.yqt-toolbar .yqt-search {
	flex: 1 1 260px;
	min-width: 180px;
}

.yqt-toolbar .yqt-filter {
	max-width: 200px;
}

.yqt-toolbar .yqt-perpage {
	width: auto;
	min-width: 76px;
}

.yqt-toolbar .yqt-search:focus,
.yqt-toolbar .yqt-filter:focus,
.yqt-toolbar .yqt-perpage:focus {
	outline: 2px solid color-mix(in srgb, var(--yqt-accent) 35%, transparent);
	outline-offset: 1px;
	border-color: var(--yqt-accent);
}

.yqt-toolbar .yqt-reset {
	padding: 10px 16px;
	border-radius: 8px;
}

/* ---------- table ---------- */

.yqt-table-scroll {
	overflow-x: auto;
	border: 1px solid var(--yqt-border);
	border-radius: var(--yqt-radius);
	background: var(--yqt-surface);
}

table.yqt-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin: 0;
	font-size: 0.94em;
}

table.yqt-table th,
table.yqt-table td {
	padding: 13px 16px;
	text-align: left;
	vertical-align: middle;
	white-space: nowrap;
	border-right: 1px solid var(--yqt-grid);
}

table.yqt-table th:last-child,
table.yqt-table td:last-child {
	border-right: 0;
}

table.yqt-table thead th {
	background: var(--yqt-accent);
	color: var(--yqt-accent-ink);
	font-weight: 700;
	font-size: 0.78em;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	position: sticky;
	top: 0;
	z-index: 2;
	border-right-color: rgba(255, 255, 255, 0.22);
	padding-top: 15px;
	padding-bottom: 15px;
}

table.yqt-table tbody td {
	border-bottom: 1px solid var(--yqt-grid);
}

table.yqt-table tbody tr:last-child td {
	border-bottom: 0;
}

table.yqt-table tbody tr:hover td {
	background: var(--yqt-hover);
}

table.yqt-table tbody td:first-child {
	font-weight: 600;
}

table.yqt-table tbody tr.is-highlight td {
	background: var(--yqt-hl);
}

.yqt-stock {
	display: block;
	color: var(--yqt-muted);
	font-size: 0.8em;
	font-weight: 400;
}

.yqt-price {
	font-variant-numeric: tabular-nums;
}

/* ---------- qty + button ---------- */

.yqt-qty-cell {
	width: 96px;
}

.yqt-qty {
	width: 74px;
	padding: 7px 9px;
	border: 1px solid var(--yqt-border);
	border-radius: 7px;
	text-align: center;
	font-size: 0.95em;
	background: var(--yqt-surface);
	color: var(--yqt-ink);
}

.yqt-btn-cell {
	width: 1%;
}

.yqt-table .yqt-add {
	white-space: nowrap;
	background: var(--yqt-accent);
	color: var(--yqt-accent-ink);
	border: 0;
	border-radius: 7px;
	padding: 8px 15px;
	font-size: 0.86em;
	font-weight: 600;
	cursor: pointer;
	line-height: 1.4;
}

.yqt-table .yqt-add:hover {
	filter: brightness(0.92);
}

.yqt-table .yqt-add:disabled {
	opacity: 0.55;
	cursor: default;
}

.yqt-row.is-added .yqt-add {
	background: var(--yqt-ok-bg);
	color: var(--yqt-ok-ink);
}

/* ---------- prompt (filtered mode) ---------- */

.yqt-prompt {
	padding: 26px 20px;
	text-align: center;
	border: 1px dashed var(--yqt-border);
	border-radius: var(--yqt-radius);
	background: var(--yqt-hover);
	color: var(--yqt-muted);
	line-height: 1.6;
}

.yqt-prompt small {
	opacity: 0.8;
}

.yqt-empty-msg {
	padding: 26px 16px !important;
	text-align: center;
	color: var(--yqt-muted);
	white-space: normal !important;
}

/* ---------- footer + pagination ---------- */

.yqt-footer {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-top: 14px;
}

.yqt-footer-left {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.yqt-showing {
	color: var(--yqt-muted);
	font-size: 0.88em;
}

.yqt-footer .yqt-add-all {
	border-radius: 8px;
	padding: 9px 16px;
	font-size: 0.88em;
}

.yqt-pager {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.yqt-pager .yqt-page {
	min-width: 36px;
	height: 36px;
	padding: 0 9px;
	border: 1px solid var(--yqt-border);
	border-radius: 8px;
	background: var(--yqt-surface);
	color: var(--yqt-ink);
	font-size: 0.88em;
	line-height: 1;
	cursor: pointer;
}

.yqt-pager .yqt-page:hover:not(:disabled):not(.is-current) {
	background: var(--yqt-hover);
	border-color: var(--yqt-accent);
}

.yqt-pager .yqt-page.is-current {
	background: var(--yqt-accent);
	border-color: var(--yqt-accent);
	color: var(--yqt-accent-ink);
	font-weight: 700;
	cursor: default;
}

.yqt-pager .yqt-page:disabled {
	opacity: 0.4;
	cursor: default;
}

.yqt-page-gap {
	padding: 0 2px;
	color: var(--yqt-muted);
}

/* ---------- notices ---------- */

.yqt-notice {
	margin-top: 12px;
}

.yqt-notice .yqt-msg {
	padding: 11px 15px;
	border-left: 3px solid;
	border-radius: 0 6px 6px 0;
	background: var(--yqt-hover);
}

.yqt-notice .yqt-msg.is-error {
	border-color: #b32d2e;
}

.yqt-notice .yqt-msg.is-ok {
	border-color: var(--yqt-ok-ink);
}

/* ---------- cart / quote form ---------- */

.yqt-cart-pn {
	color: var(--yqt-muted, #6b7280);
}

.yqt-cart-note {
	font-size: 0.88em;
	opacity: 0.75;
}

table.yqt-quote-items {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5em;
}

table.yqt-quote-items th,
table.yqt-quote-items td {
	padding: 10px 12px;
	border-bottom: 1px solid #e5e7eb;
	border-right: 1px solid #eceff3;
	text-align: left;
}

table.yqt-quote-items th:last-child,
table.yqt-quote-items td:last-child {
	border-right: 0;
}

.yqt-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 18px;
}

.yqt-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
	font-size: 0.9em;
}

.yqt-form input[type="text"],
.yqt-form input[type="email"],
.yqt-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
}

.yqt-hp {
	position: absolute !important;
	left: -9999px !important;
}

.yqt-errors {
	background: #fdf0f0;
	border-left: 3px solid #b32d2e;
	padding: 12px 12px 12px 30px;
	list-style: disc;
	border-radius: 0 6px 6px 0;
}

.yqt-thankyou {
	padding: 26px;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
}

/* ---------- mobile ---------- */

@media (max-width: 782px) {
	.yqt-fields {
		grid-template-columns: 1fr;
	}

	.yqt-footer {
		justify-content: center;
	}

	table.yqt-table thead {
		display: none;
	}

	table.yqt-table,
	table.yqt-table tbody,
	table.yqt-table tr,
	table.yqt-table td {
		display: block;
		width: 100%;
	}

	table.yqt-table tr {
		border-bottom: 2px solid var(--yqt-border);
		padding: 8px 0;
	}

	table.yqt-table td {
		border-right: 0;
		border-bottom: 1px solid var(--yqt-grid);
		display: flex;
		justify-content: space-between;
		gap: 12px;
		padding: 8px 14px;
		white-space: normal;
	}

	table.yqt-table td::before {
		content: attr(data-label);
		font-weight: 700;
		font-size: 0.78em;
		text-transform: uppercase;
		color: var(--yqt-muted);
		letter-spacing: 0.04em;
	}

	.yqt-btn-cell .yqt-add {
		width: 100%;
	}
}