/*
 * AP 询价流程 —— 样式
 *
 * 与适配表、产品参数同一套视觉语言（同色系、同间距、同圆角），
 * 让产品页上三块信息看起来是一个整体。
 */

/* ---------------------------------------------------------------------------
 * 产品页的「加入询价」
 * ------------------------------------------------------------------------ */

.ap-inq-add {
	margin: 1.4em 0;
	padding: 0.9em 1em;
	border: 1px dashed rgba(127, 127, 127, 0.5);
	border-radius: 6px;
	background: rgba(127, 127, 127, 0.06);
}

.ap-inq-add__form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.6em;
	margin: 0;
}

.ap-inq-add__qty {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	font-size: 0.9em;
}

.ap-inq-add__qty input {
	width: 6em;
	padding: 0.4em 0.5em;
}

.ap-inq-add__btn {
	display: inline-block;
	padding: 0.6em 1.2em;
	border: 0;
	border-radius: 4px;
	background: #1f6f9d;
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	line-height: 1.4;
}

.ap-inq-add__btn:hover,
.ap-inq-add__btn:focus {
	background: #17567a;
	color: #fff;
}

.ap-inq-add__status {
	margin: 0.6em 0 0;
	font-size: 0.9em;
}

.ap-inq-add__badge {
	display: inline-block;
	margin-right: 0.4em;
	padding: 0.05em 0.5em;
	border-radius: 999px;
	background: rgba(31, 157, 85, 0.15);
	border: 1px solid rgba(31, 157, 85, 0.5);
	color: #1a7a44;
	font-size: 0.85em;
}

.ap-inq-add__link {
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * 询价页
 * ------------------------------------------------------------------------ */

.ap-inq {
	margin: 0 0 2em;
}

.ap-inq__title {
	margin: 1.6em 0 0.6em;
	font-size: 1.15em;
}

.ap-inq__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.ap-inq__table {
	width: 100%;
	min-width: 32em;
	border-collapse: collapse;
	font-size: 0.95em;
}

.ap-inq__table th,
.ap-inq__table td {
	padding: 0.55em 0.7em;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid rgba(127, 127, 127, 0.3);
}

.ap-inq__table thead th {
	background: rgba(127, 127, 127, 0.1);
	border-bottom-width: 2px;
	white-space: nowrap;
}

.ap-inq__qty-form {
	display: flex;
	align-items: center;
	gap: 0.3em;
	margin: 0;
}

.ap-inq__qty-form input {
	width: 5em;
	padding: 0.3em 0.4em;
}

.ap-inq__mini {
	border: 1px solid rgba(127, 127, 127, 0.5);
	background: transparent;
	color: inherit;
	border-radius: 4px;
	padding: 0.25em 0.5em;
	font: inherit;
	cursor: pointer;
}

.ap-inq__remove {
	color: #b32d2e;
}

/* 表单 */

.ap-inq__form {
	max-width: 34em;
	margin-top: 0.5em;
}

.ap-inq__field {
	margin: 0 0 0.9em;
	display: flex;
	flex-direction: column;
	gap: 0.25em;
}

.ap-inq__field label {
	font-weight: 600;
	font-size: 0.95em;
}

.ap-inq__req {
	font-weight: 400;
	font-size: 0.85em;
	opacity: 0.65;
}

.ap-inq__field input,
.ap-inq__field textarea {
	width: 100%;
	padding: 0.5em 0.6em;
	border: 1px solid rgba(127, 127, 127, 0.5);
	border-radius: 4px;
	font: inherit;
	background: transparent;
	color: inherit;
}

.ap-inq__hint {
	font-size: 0.85em;
	opacity: 0.7;
}

.ap-inq__btn {
	display: inline-block;
	padding: 0.65em 1.4em;
	border: 0;
	border-radius: 4px;
	background: #1f6f9d;
	color: #fff;
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	line-height: 1.4;
}

.ap-inq__btn:hover,
.ap-inq__btn:focus {
	background: #17567a;
	color: #fff;
}

.ap-inq__note,
.ap-inq__alt {
	font-size: 0.9em;
	opacity: 0.8;
}

/* 状态块 */

.ap-inq__error {
	padding: 0.8em 1em;
	border: 1px solid rgba(179, 45, 46, 0.5);
	border-radius: 4px;
	background: rgba(179, 45, 46, 0.08);
	color: #b32d2e;
}

.ap-inq__empty {
	padding: 1em;
	border: 1px dashed rgba(127, 127, 127, 0.5);
	border-radius: 4px;
}

.ap-inq__done {
	padding: 1.4em 1.5em;
	border: 1px solid rgba(31, 157, 85, 0.5);
	border-radius: 6px;
	background: rgba(31, 157, 85, 0.08);
}

.ap-inq__done-title {
	margin-top: 0;
}

.ap-inq__ref {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.3em;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.4em 0.7em;
	display: inline-block;
	border: 1px solid rgba(31, 157, 85, 0.5);
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.5);
}

@media (max-width: 600px) {
	.ap-inq__table th,
	.ap-inq__table td {
		padding: 0.45em 0.5em;
	}
}
