@charset "utf-8";
/* ============================================================
   RFQ 询价车（Inquiry List）
   - 头部入口 + 数量角标
   - 列表页 / 详情页「Add」按钮
   - 浮动提示 Toast
   - 询价车页面（表格 + 表单）
   与 style.css / product-list-row.css 并存，互不覆盖
   ============================================================ */

/* ---------- 0. 基础：按钮/输入框继承站点字体 ---------- */
.rfq-box button,
.rfq-page button,
.rfq-page input,
.rfq-page textarea{ font-family: inherit; }

/* ---------- 1. 头部入口 ---------- */.header-top .social-link a.social-item.header-rfq{
	width: auto !important;
	height: 32px;
	padding: 0 12px 0 10px;
	border-radius: 16px;
	background: #0a5cb3;
	font-size: 13px;
	line-height: 32px;
	color: #fff;
	gap: 6px;
	letter-spacing: .2px;
}
.header-top .social-link a.social-item.header-rfq:hover{ background: #084a91; color: #fff; text-decoration: none; }
.header-top .social-link a.social-item.header-rfq i{ font-size: 15px; margin: 0; }
.header-rfq .rfq-txt{ display: inline-block; vertical-align: middle; }
.header-rfq .rfq-count{
	display: inline-block; min-width: 18px; height: 18px; line-height: 18px;
	margin-left: 2px; padding: 0 4px; box-sizing: border-box;
	background: #ff3b30; color: #fff; font-style: normal; font-size: 11px; font-weight: 700;
	border-radius: 9px; text-align: center; vertical-align: middle;
}
.header-rfq .rfq-count.is-zero{ display: none; }

@media screen and (max-width: 860px){
	.header-rfq .rfq-txt{ display: none; }
	.header-top .social-link a.social-item.header-rfq{ padding: 0 6px; }
}

/* ---------- 1a. 头部 BOM 上传入口 ---------- */
.header-top .social-link a.social-item.header-bom{
	width: auto !important; height: 32px; padding: 0 12px 0 10px; border-radius: 16px;
	background: #fff; color: #0363cd; font-size: 13px; line-height: 32px;
	gap: 6px; letter-spacing: .2px;
}
.header-top .social-link a.social-item.header-bom:hover{ background: #eaf2fd; color: #0363cd; text-decoration: none; }
.header-top .social-link a.social-item.header-bom i{ font-size: 15px; margin: 0; }
.header-bom .bom-txt{ display: inline-block; vertical-align: middle; }

@media screen and (max-width: 860px){
	.header-bom .bom-txt{ display: none; }
	.header-top .social-link a.social-item.header-bom{ padding: 0 6px; }
}

/* ---------- 1b. 手机端询价车入口（头部右上，紧邻汉堡菜单） ---------- */
.header-rfq-m{ display: none; }
@media screen and (max-width: 800px){
	.header-rfq-m{
		display: inline-flex; align-items: center; justify-content: center; gap: 5px;
		position: absolute; top: 20px; right: 40px; z-index: 30;
		height: 28px; padding: 0 11px; box-sizing: border-box;
		background: #fff; border-radius: 14px; color: #0363cd;
		box-shadow: 0 1px 3px rgba(6, 40, 80, .18);
		font-size: 12px; line-height: 1; text-decoration: none;
		-webkit-tap-highlight-color: transparent;
	}
	.header-rfq-m i{ font-size: 14px; line-height: 1; color: #0363cd; }
	.header-rfq-m .rfq-txt-m{ display: inline-block; font-size: 12px; color: #0363cd; }
	.header-rfq-m:active{ background: #eaf2fd; }
	.header-rfq-m .rfq-count{
		display: inline-block; min-width: 16px; height: 16px; line-height: 16px;
		padding: 0 4px; box-sizing: border-box; background: #ff3b30; color: #fff;
		font-style: normal; font-size: 10px; font-weight: 700; border-radius: 8px;
		text-align: center;
	}
	.header-rfq-m .rfq-count.is-zero{ display: none; }
}

/* ---------- 1c. 手机端 BOM 入口（与询价车同组，排在左侧） ---------- */
.header-act-m{ display: none; }
@media screen and (max-width: 800px){
	.header-act-m{
		display: flex; align-items: center; gap: 6px;
		position: absolute; top: 20px; right: 40px; z-index: 30;
	}
	.header-act-m .header-rfq-m{ position: static; top: auto; right: auto; }
	.header-bom-m{
		display: inline-flex; align-items: center; justify-content: center;
		width: 28px; height: 28px; box-sizing: border-box;
		background: #fff; border-radius: 14px; color: #0363cd;
		box-shadow: 0 1px 3px rgba(6, 40, 80, .18);
		text-decoration: none; -webkit-tap-highlight-color: transparent;
	}
	.header-bom-m i{ font-size: 14px; line-height: 1; color: #0363cd; }
	.header-bom-m:active{ background: #eaf2fd; }
}
@media screen and (max-width: 360px){
	.header-rfq-m .rfq-txt-m{ display: none; }
}

/* ---------- 2. 列表页按钮状态 ---------- */
.chip-listing button.chip-btn{ font-family: inherit; cursor: pointer; }
.chip-listing .chip-btn.is-added{ background: #1a7f37; border-color: #1a7f37; color: #fff; }

/* ---------- 2b. 宫格列表页（productlist.html）---------- */
.product-listing .product-item-act{
	margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 6px;
}

/* 宫格卡片内的数量步进器：− 1 + */
.product-listing .grid-qty{
	display: flex; flex: 0 0 88px; width: 88px; height: 28px; margin: 0;
	background: #fff; border: 1px solid #d8dee7; border-radius: 3px; overflow: hidden;
}
.product-listing .grid-qty .q-btn{
	flex: 0 0 24px; width: 24px; height: 26px; padding: 0; border: 0;
	background: #f5f8fc; color: #404042; font-family: inherit;
	font-size: 13px; line-height: 24px; text-align: center; cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.product-listing .grid-qty .q-btn:hover{ background: #e7eef8; color: #0363cd; }
.product-listing .grid-qty .q-input{
	flex: 1 1 auto; width: 100%; min-width: 0; height: 26px; padding: 0;
	border: 0; border-left: 1px solid #e6ebf2; border-right: 1px solid #e6ebf2;
	background: #fff; color: #242424; font-family: inherit;
	font-size: 12px; line-height: 26px; text-align: center;
	-moz-appearance: textfield; appearance: textfield;
}
.product-listing .grid-qty .q-input:focus{ outline: none; background: #f7fbff; }
.product-listing .grid-rfq-btn{
	display: block; flex: none; width: auto; min-width: 0; height: 28px; padding: 0 12px;
	font-family: inherit; font-size: 12px; line-height: 26px;
	border: 1px solid #0363cd; background: #0363cd; color: #fff;
	border-radius: 3px; cursor: pointer; white-space: nowrap; overflow: hidden;
	text-overflow: ellipsis; transition: all .2s ease;
}
.product-listing .grid-rfq-btn:hover{ background: #024a9a; border-color: #024a9a; color: #fff; }
.product-listing .grid-rfq-btn.is-added{ background: #1a7f37; border-color: #1a7f37; color: #fff; }

@media screen and (max-width: 760px){
	.product-listing .product-item-act{ gap: 5px; }
}

/* ---------- 3. 详情页询价块 ---------- */
.rfq-box{
	display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
	margin: 18px 0 6px; padding: 14px; background: #f7fafd;
	border: 1px solid #e2edf9; border-radius: 4px;
}
.rfq-box .rfq-qty{
	display: inline-flex; align-items: center; height: 40px;
	border: 1px solid #ccd9e8; border-radius: 3px; background: #fff; overflow: hidden;
}
.rfq-box .rfq-step{
	width: 34px; height: 40px; border: 0; background: #fff; cursor: pointer;
	color: #0363cd; font-size: 18px; line-height: 1; user-select: none;
}
.rfq-box .rfq-step:hover{ background: #eef5fd; }
.rfq-box .rfq-qty input{
	width: 62px; height: 40px; border: 0; border-left: 1px solid #eef1f5; border-right: 1px solid #eef1f5;
	text-align: center; font-size: 14px; color: #242424; box-sizing: border-box;
	-moz-appearance: textfield;
}
.rfq-box .rfq-qty input::-webkit-outer-spin-button,
.rfq-box .rfq-qty input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.rfq-box .rfq-add-detail{
	height: 40px; padding: 0 22px; border: 1px solid #0363cd; border-radius: 3px;
	background: #0363cd; color: #fff; font-size: 14px; font-family: inherit; cursor: pointer;
	transition: background .2s ease, border-color .2s ease;
}
.rfq-box .rfq-add-detail:hover{ background: #024a9a; border-color: #024a9a; }
.rfq-box .rfq-add-detail.is-added{ background: #1a7f37; border-color: #1a7f37; }
.rfq-box .rfq-view{
	display: inline-flex; align-items: center; gap: 5px;
	font-size: 13px; color: #0363cd; text-decoration: none;
}
.rfq-box .rfq-view:hover{ text-decoration: underline; }
.rfq-box .rfq-view .rfq-mini-count{
	display: inline-block; min-width: 18px; padding: 0 4px; height: 18px; line-height: 18px;
	background: #ff3b30; color: #fff; border-radius: 9px; font-size: 11px; text-align: center;
}
.rfq-box .rfq-view .rfq-mini-count.is-zero{ display: none; }

/* ---------- 4. Toast ---------- */
.rfq-toast{
	position: fixed; left: 50%; bottom: 40px; transform: translate(-50%, 20px);
	z-index: 9999; display: flex; align-items: center; gap: 14px;
	max-width: 90%; padding: 12px 18px; box-sizing: border-box;
	background: rgba(20, 30, 45, .94); color: #fff; font-size: 14px;
	border-radius: 4px; box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
	opacity: 0; visibility: hidden; transition: all .25s ease;
}
.rfq-toast.is-show{ opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.rfq-toast i{ color: #4cd964; font-style: normal; font-size: 16px; }
.rfq-toast a{ color: #7fc0ff; text-decoration: underline; white-space: nowrap; }

/* ---------- 5. 询价车页面 ---------- */
.rfq-page{ margin-top: 20px; font-size: 14px; }
.rfq-page .rfq-intro{
	margin-bottom: 14px; padding: 12px 14px; background: #f7fafd;
	border-left: 3px solid #0363cd; color: #55606e; font-size: 13px; line-height: 22px;
}

/* 表格 */
.rfq-page .rfq-table{ width: 100%; border-collapse: collapse; table-layout: fixed; }
.rfq-page .rfq-table th{
	background: #0363cd; color: #fff; font-size: 12px; font-weight: 500;
	letter-spacing: .3px; text-transform: uppercase; text-align: left;
	padding: 10px; border: 0; white-space: nowrap;
}
.rfq-page .rfq-table th.t-img{ width: 78px; }
.rfq-page .rfq-table th.t-price,
.rfq-page .rfq-table th.t-qty,
.rfq-page .rfq-table th.t-del{ width: 96px; text-align: center; }
.rfq-page .rfq-table th.t-del{ width: 60px; }
.rfq-page .rfq-table td{
	padding: 12px 10px; border-bottom: 1px solid #eef1f5; vertical-align: middle; color: #333;
	word-break: break-word;
}
.rfq-page .rfq-table tr:nth-child(even) td{ background: #fbfcfe; }
.rfq-page .rfq-img{
	display: block; width: 62px; height: 62px; padding: 3px; box-sizing: border-box;
	border: 1px solid #eef1f5; background: #fff; object-fit: contain;
}
.rfq-page .rfq-model a{ color: #0363cd; font-weight: 600; text-decoration: none; }
.rfq-page .rfq-model a:hover{ text-decoration: underline; }
.rfq-page .rfq-meta{ margin-top: 4px; font-size: 12px; color: #98a2b3; line-height: 17px; }
.rfq-page .rfq-price{ text-align: center; color: #c0392b; font-weight: 600; }
.rfq-page .rfq-qty-cell{ text-align: center; white-space: nowrap; }
.rfq-page .rfq-qty-cell button{
	width: 24px; height: 26px; border: 1px solid #dde5ef; background: #fff;
	color: #0363cd; cursor: pointer; font-size: 14px; line-height: 1; vertical-align: middle;
}
.rfq-page .rfq-qty-cell input{
	width: 46px; height: 26px; box-sizing: border-box; margin: 0 3px; vertical-align: middle;
	border: 1px solid #dde5ef; text-align: center; font-size: 13px; color: #333;
	-moz-appearance: textfield;
}
.rfq-page .rfq-qty-cell input::-webkit-outer-spin-button,
.rfq-page .rfq-qty-cell input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.rfq-page .rfq-del{
	border: 0; background: none; color: #b0b8c4; font-size: 16px; cursor: pointer; padding: 4px;
}
.rfq-page .rfq-del:hover{ color: #c0392b; }

/* 工具行 */
.rfq-page .rfq-tools{
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 14px 0; font-size: 13px;
}
.rfq-page .rfq-tools a{ color: #0363cd; text-decoration: none; }
.rfq-page .rfq-tools a:hover{ text-decoration: underline; }
.rfq-page .rfq-clear{
	border: 1px solid #e0e6ee; background: #fff; color: #7b8494;
	padding: 7px 14px; font-size: 12px; cursor: pointer; border-radius: 3px;
}
.rfq-page .rfq-clear:hover{ border-color: #c0392b; color: #c0392b; }

/* 空状态 */
.rfq-page .rfq-empty{
	padding: 60px 20px; text-align: center; background: #fafbfc; border: 1px dashed #dfe5ec;
}
.rfq-page .rfq-empty i{ display: block; font-size: 40px; color: #cbd4de; margin-bottom: 12px; }
.rfq-page .rfq-empty p{ color: #8a94a6; font-size: 14px; margin-bottom: 18px; }
.rfq-page .rfq-empty a{
	display: inline-block; height: 38px; line-height: 36px; padding: 0 22px;
	border: 1px solid #0363cd; border-radius: 3px; background: #0363cd; color: #fff;
	font-size: 13px; text-decoration: none;
}
.rfq-page .rfq-empty a:hover{ background: #024a9a; border-color: #024a9a; color: #fff; }

/* 表单 */
.rfq-page .rfq-form{
	margin-top: 26px; padding: 22px 20px; background: #fafbfc; border: 1px solid #eef1f5;
}
.rfq-page .rfq-form h2{
	font-size: 16px; font-weight: 600; color: #242424; margin: 0 0 16px;
	padding-left: 10px; border-left: 3px solid #0363cd; line-height: 18px;
}
.rfq-page .rfq-fields{ display: flex; flex-wrap: wrap; gap: 12px; }
.rfq-page .rfq-fields input{ flex: 1 1 200px; min-width: 0; }
.rfq-page .rfq-form input[type=text],
.rfq-page .rfq-form textarea{
	width: 100%; box-sizing: border-box; border: 1px solid #dfe5ec; background: #fff;
	padding: 0 12px; height: 42px; line-height: 40px; font-size: 14px; color: #333;
	border-radius: 3px; outline: none; transition: border-color .2s ease;
}
.rfq-page .rfq-form textarea{
	height: 104px; line-height: 22px; padding: 10px 12px; margin-top: 12px; resize: vertical;
}
.rfq-page .rfq-form input:focus,
.rfq-page .rfq-form textarea:focus{ border-color: #0363cd; }
.rfq-page .rfq-code{ display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.rfq-page .rfq-code input{ width: 200px !important; flex: 0 0 auto; }
.rfq-page .rfq-code img{
	height: 42px; border: 1px solid #dfe5ec; cursor: pointer; background: #fff; display: block;
}
.rfq-page .rfq-submit{
	margin-top: 16px; height: 44px; padding: 0 40px; border: 1px solid #0363cd;
	background: #0363cd; color: #fff; font-size: 15px; border-radius: 3px; cursor: pointer;
	transition: background .2s ease;
}
.rfq-page .rfq-submit:hover{ background: #024a9a; border-color: #024a9a; }
.rfq-page .rfq-submit[disabled]{ background: #9db6d3; border-color: #9db6d3; cursor: default; }
.rfq-page .rfq-note{ margin-top: 10px; font-size: 12px; color: #98a2b3; }
.rfq-page .rfq-msg{
	margin-top: 14px; padding: 10px 14px; font-size: 13px; line-height: 21px; border-radius: 3px;
}
.rfq-page .rfq-msg.is-err{ background: #fdf0ef; border: 1px solid #f5c6c2; color: #c0392b; }
.rfq-page .rfq-msg.is-ok{ background: #eef8f0; border: 1px solid #b7dfc1; color: #1a7f37; }

/* 成功面板 */
.rfq-page .rfq-done{
	padding: 50px 20px; text-align: center; border: 1px solid #b7dfc1; background: #f4fbf6;
}
.rfq-page .rfq-done .ico{
	width: 54px; height: 54px; line-height: 54px; margin: 0 auto 16px;
	border-radius: 50%; background: #1a7f37; color: #fff; font-size: 26px; text-align: center;
}
.rfq-page .rfq-done h3{ font-size: 18px; color: #16612c; margin: 0 0 10px; }
.rfq-page .rfq-done p{ font-size: 13px; color: #5e6b78; line-height: 22px; margin: 0 0 18px; }

/* ---------- 窄屏 ---------- */
@media screen and (max-width: 760px){
	.rfq-page .rfq-table thead{ display: none; }
	.rfq-page .rfq-table,
	.rfq-page .rfq-table tbody,
	.rfq-page .rfq-table tr,
	.rfq-page .rfq-table td{ display: block; width: 100%; }
	.rfq-page .rfq-table tr{
		position: relative; padding: 12px 44px 12px 12px; box-sizing: border-box;
		border-bottom: 1px solid #eef1f5; background: #fff;
	}
	.rfq-page .rfq-table tr:nth-child(even){ background: #fbfcfe; }
	.rfq-page .rfq-table td{ border: 0; padding: 4px 0; }
	.rfq-page .rfq-table td.tc-img{ float: left; width: 62px; margin-right: 12px; }
	.rfq-page .rfq-table td.tc-img img{ width: 62px; height: 62px; }
	.rfq-page .rfq-table td.tc-model{ min-height: 62px; }
	.rfq-page .rfq-table td.tc-price,
	.rfq-page .rfq-table td.tc-qty{ display: inline-block; width: auto; text-align: left; }
	.rfq-page .rfq-table td.tc-price{ margin-right: 16px; }
	.rfq-page .rfq-table td.tc-del{ position: absolute; top: 8px; right: 6px; width: auto; }
	.rfq-page .rfq-form{ padding: 16px 14px; }
	.rfq-page .rfq-code input{ width: 100% !important; }
	.rfq-page .rfq-submit{ width: 100%; padding: 0; }
}

/* ---------- 手机端宫格列表优化 ---------- */
@media screen and (max-width: 768px){
	.product-listing ul li{ margin-bottom: 12px; }
	.product-listing .product-item{
		padding: 12px 10px; border-radius: 4px; border: 1px solid #eef2f7;
	}
	/* 图片区固定高度，卡片上下对齐 */
	.product-listing .product-image{
		height: 116px; display: flex; align-items: center; justify-content: center;
	}
	.product-listing .product-image a{
		display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
	}
	.product-listing .product-image img{ max-width: 100%; max-height: 100%; object-fit: contain; }
	/* 名称区不再固定 60px，两行自适应 */
	.product-listing .product-item-name{
		margin: 10px 0 8px; height: auto; min-height: 40px;
		display: flex; align-items: center; justify-content: center;
	}
	.product-listing .product-item-name a{ display: block; width: 100%; }
	.product-listing .product-item-name h3{ font-size: 13px; line-height: 18px; -webkit-line-clamp: 2; }
	/* 数量与按钮上下排，宽度填满卡片内容区（不越出卡片内边距） */
	.product-listing .product-item-act{
		flex-direction: column; align-items: stretch; justify-content: flex-start;
		gap: 6px; margin-top: 8px;
	}
	/* 站点无全局 border-box 重置，卡片内 100% 宽的元素需自行声明，否则右侧溢出 */
	.product-listing .grid-qty,
	.product-listing .grid-qty .q-btn,
	.product-listing .grid-qty .q-input,
	.product-listing .grid-rfq-btn{ box-sizing: border-box; }
	.product-listing .grid-qty{ flex: none; width: 100%; height: 26px; }
	.product-listing .grid-qty .q-btn{ flex: 0 0 24px; width: 24px; height: 24px; line-height: 22px; font-size: 12px; }
	.product-listing .grid-qty .q-input{ height: 24px; line-height: 24px; }
	.product-listing .grid-rfq-btn{
		flex: none; width: 100%; height: 26px; line-height: 24px;
		font-size: 12px; padding: 0 12px;
	}
}