/**
 * Wholesale order form.
 *
 * Scoped under .pw-layout so it does not leak into the surrounding theme, and
 * so it needs far fewer overrides than the old inline styles did.
 */

.pw-layout {
	--pw-blue: #3687c8;
	--pw-blue-dark: #2b6da1;
	--pw-green: #9bcb3b;
	--pw-green-dark: #4a7c13;
	--pw-red: #d9534f;
	--pw-text: #333;
	--pw-muted: #666;
	--pw-line: #dce8f4;
	--pw-tint: #f4f8fc;

	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 30px;
	align-items: start;
	margin-bottom: 40px;
}

.pw-layout *,
.pw-layout *::before,
.pw-layout *::after {
	box-sizing: border-box;
}

.pw-column {
	display: flex;
	flex-direction: column;
	gap: 30px;
	min-width: 0;
}

.pw-card {
	background: #fff;
	border: 1px solid var(--pw-line);
	border-radius: 20px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
	padding: 35px;
	min-width: 0;
}

.pw-card-title {
	color: var(--pw-blue);
	font-size: 26px;
	margin: 0 0 20px;
	padding-bottom: 12px;
	border-bottom: 2px solid #eee;
}

.pw-lede {
	color: var(--pw-muted);
	margin-bottom: 24px;
}

.pw-section {
	font-size: 22px;
	color: var(--pw-text);
	margin: 40px 0 20px;
}

/* --- Inputs -------------------------------------------------------- */

.pw-layout label {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
}

.pw-layout input[type="text"],
.pw-layout input[type="email"],
.pw-layout input[type="tel"],
.pw-layout input[type="number"],
.pw-layout input[type="file"],
.pw-layout select,
.pw-layout textarea {
	width: 100%;
	padding: 12px;
	margin-bottom: 18px;
	border: 1px solid #ccc;
	border-radius: 6px;
	background: #fff;
	font-size: 16px;
	font-family: inherit;
	resize: vertical;
	min-height: 40px;
}

.pw-layout input:focus-visible,
.pw-layout select:focus-visible,
.pw-layout textarea:focus-visible {
	outline: 2px solid var(--pw-blue);
	outline-offset: 1px;
}

.pw-req { color: var(--pw-red); }
.pw-optional { color: var(--pw-muted); font-weight: 400; }
.pw-hint { font-size: 14px; color: var(--pw-muted); margin: -10px 0 16px; }

.pw-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pw-grid-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 15px; }

.pw-fieldset {
	border: 1px solid var(--pw-line);
	border-radius: 8px;
	padding: 18px 20px;
	margin: 0 0 24px;
}

.pw-fieldset legend {
	font-weight: 600;
	padding: 0 8px;
}

.pw-check {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 400;
	margin-bottom: 10px;
	cursor: pointer;
}

.pw-check input { width: 18px; height: 18px; margin: 0; }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.pw-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Design tabs and rows ------------------------------------------ */

.pw-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
}

.pw-tab {
	background: var(--pw-tint);
	color: #555;
	border: 1px solid var(--pw-line);
	border-radius: 25px;
	padding: 10px 20px;
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
}

.pw-tab:hover { background: #e9f2fa; }

.pw-tab.is-active {
	background: var(--pw-blue);
	border-color: var(--pw-blue);
	color: #fff;
}

.pw-design { display: none; }
.pw-design.is-active { display: block; }

.pw-design-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #eee;
	padding-bottom: 12px;
	margin-bottom: 20px;
}

.pw-design-title {
	font-weight: 700;
	font-size: 18px;
	color: var(--pw-blue);
}

.pw-remove {
	background: #ffebeb;
	color: var(--pw-red);
	border: none;
	border-radius: 6px;
	padding: 8px 12px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}

.pw-remove:hover { background: #ffd6d6; }
.pw-remove[hidden] { display: none; }

.pw-field-group {
	background: #fdfdfd;
	border: 1px solid #e6e6e6;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 22px;
}

.pw-field-group h4 {
	margin: 0 0 16px;
	font-size: 18px;
	color: var(--pw-blue);
	border-bottom: 1px solid #eee;
	padding-bottom: 10px;
}

.pw-spec {
	font-size: 13px;
	color: var(--pw-muted);
	margin: -8px 0 0;
}

.pw-addons {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 20px;
}

.pw-addons label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
	margin: 0;
	cursor: pointer;
}

.pw-addons input { width: 18px; height: 18px; margin: 0; }

.pw-subtotal {
	background: var(--pw-tint);
	border: 1px dashed #b9d4ec;
	border-radius: 6px;
	padding: 15px 20px;
	margin-bottom: 20px;
}

.pw-subtotal-row { text-align: right; font-size: 16px; }
.pw-subtotal-row strong { color: var(--pw-blue); font-size: 18px; }

.pw-line-error {
	color: var(--pw-red);
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 8px;
}

.pw-line-error[hidden],
.pw-sample-note[hidden] { display: none; }

.pw-sample-note {
	background: #fdf7f7;
	border: 1px solid #ebccd1;
	border-radius: 6px;
	color: #c74a47;
	font-size: 13px;
	padding: 10px 12px;
	margin-bottom: 10px;
}

.pw-design.has-error .pw-subtotal {
	border-color: var(--pw-red);
	border-style: solid;
}

.pw-add-btn {
	width: 100%;
	background: var(--pw-tint);
	color: var(--pw-blue);
	border: 2px dashed var(--pw-blue);
	border-radius: 12px;
	padding: 18px;
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
	margin-bottom: 30px;
}

.pw-add-btn:hover:not(:disabled) { background: #e9f2fa; }

.pw-add-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	border-style: solid;
	border-color: #ccc;
	color: var(--pw-muted);
}

/* --- Summary and submit -------------------------------------------- */

.pw-summary {
	background: #f9fdfa;
	border: 1px solid #cce5b1;
	border-radius: 12px;
	padding: 25px;
	margin-bottom: 30px;
}

.pw-summary-title {
	display: block;
	color: var(--pw-green-dark);
	font-size: 18px;
	margin-bottom: 12px;
}

.pw-summary-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 8px;
}

.pw-summary-total {
	display: flex;
	justify-content: space-between;
	font-size: 22px;
	color: var(--pw-blue);
	border-top: 1px solid #cce5b1;
	padding-top: 15px;
	margin-top: 15px;
}

.pw-summary-note {
	font-size: 13px;
	color: var(--pw-muted);
	margin: 12px 0 0;
}

.pw-invoice-note {
	background: var(--pw-tint);
	border-left: 4px solid var(--pw-blue);
	border-radius: 6px;
	padding: 14px 16px;
	margin-bottom: 20px;
}

.pw-invoice-note-list {
	list-style: disc;
	margin: -12px 0 20px;
	padding-left: 36px;
}

.pw-invoice-note-list li {
	margin-top: 6px;
}

.pw-blocked {
	color: var(--pw-red);
	font-weight: 700;
	margin-bottom: 12px;
}

.pw-blocked[hidden] { display: none; }

.pw-submit {
	width: 100%;
	background: var(--pw-green);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 18px 24px;
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
}

.pw-submit:hover:not(:disabled) { background: #8bb733; }
.pw-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Response ------------------------------------------------------- */

.pw-response { margin-top: 20px; }
.pw-response:empty { display: none; }

.pw-response-success {
	background: #eaf4dd;
	border: 1px solid #cce5b1;
	color: var(--pw-green-dark);
	border-radius: 8px;
	padding: 18px;
}

.pw-response-error {
	background: #fdf7f7;
	border: 1px solid #ebccd1;
	color: #a94442;
	border-radius: 8px;
	padding: 18px;
}

.pw-response-error ul { margin: 10px 0 0; padding-left: 20px; }

.pw-response-progress {
	background: var(--pw-tint);
	border: 1px solid var(--pw-blue);
	border-radius: 8px;
	padding: 20px;
}

.pw-progress {
	background: #e0e0e0;
	border-radius: 12px;
	height: 24px;
	overflow: hidden;
	margin-bottom: 10px;
}

.pw-progress-bar {
	background: linear-gradient(90deg, var(--pw-green), var(--pw-blue));
	height: 100%;
	width: 0;
	transition: width 0.3s;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.pw-progress-bar.is-processing {
	background: linear-gradient(90deg, var(--pw-blue) 25%, var(--pw-green) 50%, var(--pw-blue) 75%);
	background-size: 200% auto;
	animation: pw-stripes 2s linear infinite;
}

@keyframes pw-stripes {
	to { background-position: 200% center; }
}

@media (prefers-reduced-motion: reduce) {
	.pw-progress-bar { transition: none; }
	.pw-progress-bar.is-processing { animation: none; }
}

/* --- Reference panels ---------------------------------------------- */

.pw-spec-list { margin: 0 0 20px; padding-left: 20px; line-height: 1.6; }

.pw-warning {
	color: var(--pw-red);
	font-size: 13px;
	font-style: italic;
	margin-bottom: 24px;
}

.pw-template-cta {
	background: var(--pw-tint);
	border: 2px dashed #b9d4ec;
	border-radius: 8px;
	padding: 25px;
	text-align: center;
	margin-bottom: 28px;
}

.pw-template-cta h4 { margin: 0 0 10px; color: var(--pw-blue); font-size: 18px; }
.pw-template-cta p { color: var(--pw-muted); margin-bottom: 18px; }

.pw-download {
	display: inline-block;
	background: var(--pw-green);
	color: #fff;
	padding: 14px 28px;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 700;
}

.pw-spec-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 15px;
}

.pw-spec-card {
	background: var(--pw-tint);
	border: 1px solid var(--pw-line);
	border-radius: 8px;
	padding: 15px;
	text-align: center;
	font-size: 14px;
	line-height: 1.4;
}

.pw-spec-card strong {
	display: block;
	color: var(--pw-blue);
	margin-bottom: 6px;
	font-size: 15px;
}

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

th, thead { color: #ffffff !important; }

.pw-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid #e0e0e0;
	border-radius: 12px;
	margin-bottom: 20px;
}

.pw-rate-table {
	width: 100%;
	min-width: 900px;
	border-collapse: separate;
	border-spacing: 0;
	text-align: center;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.pw-rate-table th {
	background: var(--pw-blue);
	padding: 14px 12px;
	font-weight: 600;
	font-size: 15px;
	white-space: nowrap;
}

.pw-th-dims { font-weight: 400; font-size: 12px; opacity: 0.9; }

.pw-rate-table td {
	padding: 12px;
	border-bottom: 1px solid #e4e4e4;
	border-right: 1px solid #e4e4e4;
	font-size: 15px;
}

.pw-rate-table tbody th {
	background: var(--pw-blue-dark);
	position: sticky;
	left: 0;
	z-index: 1;
}

.pw-rate-table thead th:first-child {
	position: sticky;
	color: #ffffff;
	left: 0;
	z-index: 2;
	background: var(--pw-blue-dark);
}
.pw-rate-table tr:hover { background: #e1f6c5; }
.pw-rate-table tr:hover th { background: var(--pw-blue); }
.pw-rate-table tr:last-child td { border-bottom: none; }
.pw-na { color: #aaa; }

.pw-notes {
	background: #f8f9fa;
	border-left: 4px solid var(--pw-green);
	border-radius: 8px;
	padding: 20px;
	line-height: 1.6;
}

.pw-notes > strong { display: block; font-size: 17px; margin-bottom: 10px; }
.pw-notes ul { margin: 0; padding-left: 20px; }
.pw-notes li { margin-bottom: 8px; }

/* --- Collapsible panels on small screens ---------------------------- */

.pw-toggle { display: none; }

@media (max-width: 980px) {
	.pw-layout { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
	.pw-layout { gap: 20px; }
	.pw-card { padding: 20px; }
	.pw-grid-2,
	.pw-grid-3 { grid-template-columns: 1fr; gap: 15px; }
	.pw-addons { flex-direction: column; gap: 12px; }

	.pw-collapsible .pw-card-title {
		cursor: pointer;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 0;
		padding-bottom: 0;
		border-bottom: none;
		font-size: 20px;
	}

	.pw-collapsible .pw-collapsible-body { display: none; }

	.pw-collapsible.is-open .pw-collapsible-body { display: block; }

	.pw-collapsible.is-open .pw-card-title {
		margin-bottom: 15px;
		padding-bottom: 10px;
		border-bottom: 2px solid #eee;
	}

	.pw-toggle {
		display: block;
		font-size: 28px;
		font-weight: 300;
		color: var(--pw-blue);
		line-height: 1;
	}

	.pw-toggle::after { content: "+"; }
	.pw-collapsible.is-open .pw-toggle::after { content: "\2212"; }
}