/*
Theme Name: Customer Feedback Portal
Theme URI: https://uservoc.com
Description: 客户反馈问卷门户主题（一比一迁移自 Vue 3 + Element Plus 版）。多语言、满意度评分、礼品卡兑换流程、Amazon 留评引导、文件上传。兼容 Element 视觉风格。
Author: Customer Feedback Portal
Version: 1.0.0
Requires at least: 5.0
Tested up to: 6.5
Requires PHP: 7.0
Text Domain: customer-feedback-portal
*/

/* 保留原始部分核心样式，用于布局和自定义颜色 */
* {
	font-family: arial, sans-serif;
	margin: 0;
	padding: 0;
}

body {
	background-color: #f8f9fa;
	color: #565959;
	line-height: 1.2;
}

a {
	color: #fea219;
	text-decoration: none;
}

a:hover {
	color: #dd8706;
}
.txt-blue{
	color: #002970;
}
.txt-black{
	color: rgba(0, 0, 0, .8) !important;
}
.container {
	max-width: 860px;
	margin: 0 auto;
	padding: 0 15px;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 0;
	flex-wrap: wrap;
	gap: 15px;
}

.logo {
	display: flex;
	align-items: center;
	gap: 15px;
	display: none;
}

.logo-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	background: #fea219;
	border-radius: 10px;
	color: white;
	font-size: 24px;
}

.logo h1 {
	font-size: 24px;
	color: #fea219;
}

.sub-header {
	display: block;
	color: #7f8c8d;
	font-size: 16px;
	font-weight: normal;
}

.secure-badge {
	display: flex;
	align-items: center;
	background-color: #fff;
	padding: 6px 15px;
	border-radius: 20px;
	color: #fea219;
	font-weight: 600;
	border: 1px solid #e7e7e7;
	white-space: nowrap;
}

.main-content {
	display: flex;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	min-height: 500px;
}

.content-left {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: end;
	align-items: center;
	color: white;
	background-image: url(assets/img/home-img.png);
	background-repeat: no-repeat;
	background-position: 72% 50%;
	background-size: cover;
}

.ct-left-txt-bg {
	background-color: rgba(0, 0, 0, .6);
	color: #fff;
	padding: 15px;
	text-align: center;
	font-size: 15px;
	line-height: 1.5;
}

.ct-left-txt-bg h2 {
	font-size: 24px;
	margin-bottom: 0;
}

.worrying {
	color: #fea219;
}

.txt-large {
	font-size: 28px !important;
}

.content-right {
	flex: 1;
	background-color: white;
	padding: 30px;
}

.step-container {
	height: 100%;
}

.step-title {
	font-size: 28px;
	margin-bottom: 20px;
	margin-top: 20px;
}

.step-subtitle {
	font-size: 18px;
	color: #767676;
	margin-bottom: 25px;
	line-height: 1.5;
}

.txt-center {
	text-align: center;
}

.txt-left {
	text-align: left;
}

.txt-justify {
	text-align: justify;
}

.width-half {
	width: 68%;
	margin: 0 auto;
}

.order-details {
	margin-bottom: 10px;
	border: 1px dashed #fea219;
	padding: 10px;
	border-radius: 10px;
}

.order-details ul {
	list-style: none;
}

.order-details li {
	margin-bottom: 5px;
	line-height: 1.2;
}

.order-details li:last-child {
	margin-bottom: 0;
}

.detail-row {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
}

.detail-label {
	font-weight: 600;
	color: #7f8c8d;
	margin-right: 15px;
}

.rating-options {
	margin: 30px 0;
}

.rating-option {
	cursor: pointer;
	padding: 20px;
	border-radius: 10px;
	border: 1px solid #e7e7e7;
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	transition: all 0.3s ease;
}

.rating-option.green:hover,
.rating-option.green.selected {
	background-color: #f0fdf4;
	border-color: #00c950;
}

.rating-option.orange:hover,
.rating-option.orange.selected {
	background-color: #fff4e5;
	border-color: #fea219;
}

.rating-option.red:hover,
.rating-option.red.selected {
	background-color: #f8d7da;
	border-color: #fc0000;
}

.rating-emoji {
	margin-right: 20px;
}

.rating-emoji i {
	font-size: 32px;
	padding: 15px;
	border-radius: 50%;
}

.rating-option:hover .rating-emoji i {
	background-color: #fff;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.satisfied {
	color: #00c950;
	background-color: #dbfce7;
}

.neutral {
	color: #fea219;
	background-color: #fef9c2;
}

.unsatisfied {
	color: #fc0000;
	background-color: #ffe2e2;
}

.rating-text h3 {
	font-size: 20px;
	margin-bottom: 5px;
	color: #002970;
}

.instruction-step {
	display: flex;
	margin-bottom: 20px;
}

.step-number-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background-color: #155dfc;
	color: #fff;
	border-radius: 50%;
	font-weight: bold;
	margin-right: 15px;
	flex-shrink: 0;
}

.circle-num {
	display: inline-block;
	width: 30px;
	height: 30px;
	background-color: #155dfc;
	color: #fff;
	border-radius: 50%;
	font-weight: bold;
	margin-right: 15px;
	text-align: center;
	line-height: 30px;
}

.step-content-text {
	flex: 1;
}

.step-content-text p {
	color: #767676;
}

.step-title-text {
	font-size: 18px;
	margin-bottom: 5px;
}

.important-note {
	background-color: #f9fafb;
	padding: 15px;
	border-radius: 8px;
	margin: 10px 0;
	font-size: 15px;
	color: #767676;
}

.success-container {
	text-align: center;
	padding: 0;
}

.success-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background-color: #219653;
	color: white;
	border-radius: 50%;
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 5px;
}

.bg-orange-linght {
	padding: 30px;
	border-radius: 20px;
	margin-top: 30px;
	background-color: rgba(230, 240, 255);
	line-height: 1.5;
	text-align: left;
	margin-bottom: 20px;
}

.bg-orange-linght h2 {
	margin-bottom: 20px;
}

.bg-orange-linght p {
	color: #767676;
}

.bg-blue-linght {
	background-color: rgb(230, 240, 255);
	padding: 20px;
	border-radius: 20px;
	margin-bottom: 25px;
	text-align: center;
	line-height: 1.5;
}

.contact-container {
	padding: 10px 15px;
	border-top: 1px solid #e1e5eb;
	line-height: 1.5;
}

.footer {
	text-align: center;
	padding: 10px 0;
	color: #7f8c8d;
	font-size: 14px;
}

.custom-select {
	min-width: 100px;
}

.panel-green {
	background-color: #dbfce7;
	padding: 15px;
	color: #219653;
	border-radius: 8px;
	margin-bottom: 20px;
	display: flex;
}

.panel-green h3 {
	margin-bottom: 10px;
	color: #0d5631;
}

.m-r-10 {
	margin-right: 10px;
}
.m-b-10 {
	margin-bottom: 10px;
}
.upload-demo p {
	line-height: 20px;
}

/* Element UI 自定义覆盖 */
:root {
	color-scheme: light;
	--el-color-primary: #fea219;
	--el-color-primary-light-5: rgb(255, 187, 85);
	--el-color-success: #27ae60;
	--el-color-success-light-5: rgb(121, 176, 144);
	--el-color-success-light-3: rgb(62, 175, 110);

}

.el-steps {
	margin-bottom: 20px;
	padding: 15px;
	background-color: #fff;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.el-step__main {
	display: none;
}

.el-step__icon {
	width: 40px;
	height: 40px;
}

.el-step.is-horizontal .el-step__line {
	top: 22px;
}

.el-step__head.is-process {
	color: #fea219;
	border-color: #fea219;
}

.el-step__title.is-process {
	color: #fea219;
	font-weight: 600;
}

.el-button--primary {
	background-color: #fea219;
	border-color: #fea219;
}

.el-button--primary:hover {
	background-color: #dd8706;
	border-color: #dd8706;
}

.el-button--success {
	background-color: #27ae60;
	border-color: #27ae60;
}

.el-button--success:hover {
	background-color: #27ae60;
	border-color: #27ae60;
}

.el-button--large {
	--el-button-size: 50px;
	font-size: 20px;
}

.el-button--info.is-plain:hover {
	background-color: inherit;
	color: #767676;
}

.el-upload-dragger {
	border: 2px dashed #d1d9e6;
	padding: 30px 15px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.el-upload-dragger .fas {
	margin-right: 15px;
}

.el-upload-dragger:hover {
	border-color: #fea219;
}

.el-upload-dragger .el-upload__text {
	text-align: left;
}

.el-upload-dragger .el-icon{
	font-size: 48px;
	color: #aaa;
}

.el-form-item__label {
	font-size: 18px;
	position: relative;
}

.el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label-wrap>.el-form-item__label::before,
.el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.el-form-item__label::before {
	position: absolute;
	top: 5px;
	right: -20px;
}

.el-input--large .el-input__inner {
	height: 32px;
}

.el-form-item__error {
	position: absolute;
	bottom: -15px;
	left: 0;
}

.el-form-item__content p {
	color: #aaa;
}

.el-button+.el-button {
	margin-left: 0;
	margin-top: 10px;
}

.icon-email {
	color: #fff;
	background-color: #155dfc;
	padding: 10px;
	border-radius: 8px;
	font-size: 28px;
	margin-bottom: 10px;
	margin-right: 10px;
	display: inline-block;
}

.icon-copy {
	margin-left: 10px;
	cursor: pointer;
}
.link-btn{
	background-color: #fea219;
	border-color: #fea219;
	color: #fff;
	padding: 12px 19px;
	border-radius: 8px;
	display: block;
	font-size: 18px;
	
}
.link-btn:hover{
	background-color: #dd8706;
	border-color: #dd8706;
	color: #fff;
}
.el-link.is-hover-underline:hover:after,.el-link.is-underline:after{
	border-bottom: 0;
}

/*右下角悬浮客服图标*/
.float-contact-group {
	position: fixed;
	bottom: 50%;
	right: 50%;
	margin-right: -490px;
	margin-bottom: 25px;
}
.float-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #343434;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.float-icon:hover {
  background: #222;
  transform: scale(1.08);
}
.popover-content {
  padding: 4px 0;
}
.pop-label {
  font-size: 13px;
  color: #909399;
  margin: 0 0 6px 0;
}
.float-contact-group .el-popover__content {
  padding: 12px 16px;
}

.el-text.el-text--danger,.el-form-item__content p{
		line-height: 1;
	}
	
@media (max-width: 768px) {
	body{
		padding-bottom: 80px;
	}
	.container {
		padding: 0;
	}

	.header {
		padding: 5px;
	}

	.main-content {
		border-radius: 0;
	}

	.main-content {
		flex-direction: column;
	}

	.content-left {
		min-height: 300px;
		order: -1;
	}

	.header {
		gap: 10px;
	}

	.el-step.is-horizontal .el-step__line {
		top: 15px;
	}

	.secure-badge,
	.custom-select {
		align-self: flex-end;
		font-size: 13px;
	}
	.success-container .bg-orange-linght{
		margin-top: 10px;
	}
	.el-step__icon {
		width: 30px;
		height: 30px;
	}

	.step-title {
		font-size: 22px;
		margin-top: 0;
		margin-bottom: 10px;
	}

	.ct-left-txt-bg h2 {
		font-size: 22px;
	}

	.width-half {
		width: 100%;
	}

	.content-right {
		padding: 15px;
	}
	.step-subtitle{
		margin-bottom: 5px;
	}
	.step-subtitle,
	.step-content-text p {
		font-size: 14px;
	}

	.el-button--large {
		font-size: 18px;
	}
	
	.el-form-item__label {
		font-size: 14px;
		font-weight: bold;
	}
	.el-steps{
		margin-bottom: 0;
		padding: 8px;
		border-bottom: 1px solid #e7e7e7;
	}
	.el-button{
		white-space: inherit;
		padding-left: 5px;
		padding-right: 5px;
	}
	.el-button > span{
		display: block;
	}
	.el-form-item{
		margin-bottom: 15px !important;
	}
	
	.rating-option{
		margin-bottom: 10px;
	}
	.rating-options{
		margin: 10px 0;
	}
	.bg-blue-linght{
		padding: 10px;
		margin-bottom: 10px;
	}

	.float-contact-group{
		position: fixed;
		bottom: 80px;
		right: 15px;
		margin-right: 0;
		margin-bottom: 0;
	}
}


/* =========================================================
 * Element Plus 组件视觉复刻（原项目引入 element-plus/dist/index.css
 * 无法直接打包，故按原 custom.css 覆盖与 Element 默认视觉补全。）
 * ========================================================= */

/* ---------- 进度条 steps ---------- */
.el-steps {
	display: flex;
	width: 100%;
}
.el-step {
	flex: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
	padding-bottom: 6px;
}
.el-step__line {
	position: absolute;
	top: 19px;
	left: 50%;
	width: 100%;
	height: 2px;
	background: #e4e7ed;
}
.el-step__line.is-success {
	background: #67c23a;
}
.el-step__line.is-process {
	background: #fea219;
}
.el-step__head {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
}
.el-step__icon {
	width: 40px;
	height: 40px;
	border: 2px solid #c0c4cc;
	border-radius: 50%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #c0c4cc;
	font-size: 16px;
	font-weight: 600;
	box-sizing: border-box;
}
.el-step.is-process .el-step__icon {
	border-color: #fea219;
	color: #fea219;
}
.el-step.is-success .el-step__icon {
	border-color: #67c23a;
	background: #67c23a;
	color: #fff;
}
.el-step__main {
	display: none; /* 仅显示数字/图标圆圈 */
}

/* ---------- 按钮 button ---------- */
.el-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
	color: #fff;
	box-sizing: border-box;
	user-select: none;
	line-height: 1;
}
.el-button--primary {
	background-color: #fea219;
	border-color: #fea219;
}
.el-button--primary:hover {
	background-color: #dd8706;
	border-color: #dd8706;
}
.el-button--success {
	background-color: #27ae60;
	border-color: #27ae60;
}
.el-button--success:hover {
	background-color: #27ae60;
	border-color: #27ae60;
}
.el-button--large {
	height: 50px;
	font-size: 20px;
	padding: 0 20px;
}
.el-button--block {
	width: 100%;
}
.el-button span {
	display: inline-flex;
	align-items: center;
}

/* ---------- 输入框 input ---------- */
.el-input {
	position: relative;
	width: 100%;
}
.el-input input {
	width: 100%;
	height: 40px;
	line-height: 40px;
	padding: 0 11px;
	border: 1px solid #dcdfe6;
	border-radius: 4px;
	font-size: 14px;
	color: #606266;
	background: #fff;
	box-sizing: border-box;
	transition: border-color .15s;
	outline: none;
	font-family: inherit;
}
.el-input--large input {
	height: 46px;
	font-size: 18px;
}
.el-input input:focus {
	border-color: #fea219;
}
.el-input input::placeholder {
	color: #c0c4cc;
}

/* ---------- 多行文本 textarea ---------- */
.el-textarea {
	width: 100%;
	min-height: 80px;
	resize: vertical;
	padding: 8px 11px;
	border: 1px solid #dcdfe6;
	border-radius: 4px;
	font-size: 14px;
	color: #606266;
	line-height: 1.5;
	box-sizing: border-box;
	font-family: inherit;
	outline: none;
}
.el-textarea:focus {
	border-color: #fea219;
}
.el-textarea::placeholder {
	color: #c0c4cc;
}

/* ---------- 表单项 form-item ---------- */
.el-form-item {
	margin-bottom: 18px;
	position: relative;
}
.el-form-item__label {
	display: block;
	margin-bottom: 8px;
	color: #606266;
	font-size: 16px;
	line-height: 1.2;
}
.el-form-item__content {
	position: relative;
}
.el-form-item__error {
	position: absolute;
	right: 0;
	bottom: -15px;
	color: #f56c6c;
	font-size: 12px;
	line-height: 1;
}
.el-form-item.is-error .el-input input,
.el-form-item.is-error .el-textarea {
	border-color: #f56c6c;
}
.el-form-item__content p {
	color: #aaa;
	font-size: 13px;
	margin-top: 4px;
}

/* ---------- 文本 text ---------- */
.el-text {
	color: #606266;
	font-size: 14px;
}
.el-text--info {
	color: #909399;
	font-size: 12px;
	font-weight: normal;
}

/* ---------- 链接 link ---------- */
.el-link {
	color: #fea219;
	cursor: pointer;
	text-decoration: none;
}
.el-link:hover {
	color: #dd8706;
}

/* ---------- 语言下拉 select ---------- */
.el-select {
	position: relative;
	display: inline-block;
	min-width: 100px;
}
.el-select__wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 32px;
	padding: 0 12px;
	border: 1px solid #dcdfe6;
	border-radius: 4px;
	cursor: pointer;
	background: #fff;
	font-size: 14px;
	color: #606266;
	box-sizing: border-box;
}
.el-select__wrapper:hover {
	border-color: #fea219;
}
.el-select__arrow {
	color: #c0c4cc;
	margin-left: 8px;
	font-size: 12px;
}
.el-select__dropdown {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 100;
	background: #fff;
	border: 1px solid #e4e7ed;
	border-radius: 4px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
	display: none;
}
.el-select__dropdown.open {
	display: block;
}
.lang-option {
	padding: 8px 20px;
	cursor: pointer;
	font-size: 14px;
	color: #606266;
}
.lang-option:hover {
	background: #f5f7fa;
}

/* ---------- 上传 upload（picture-card） ---------- */
.el-upload--picture-card-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
}
.el-upload--picture-card {
	width: 100%;
	height: 148px;
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background: #fff;
	box-sizing: border-box;
}
.el-upload--picture-card:hover {
	border-color: #fea219;
	color: #fea219;
}
.upload-btn {
	text-align: center;
	color: #8c939d;
	font-size: 14px;
}
.upload-btn i {
	font-size: 24px;
	color: #aaa;
}
.el-upload__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
}
.el-upload-list__item {
	position: relative;
	width: 148px;
}
.upload-preview {
	width: 148px;
	height: 148px;
	border-radius: 6px;
	overflow: hidden;
	background: #f5f7fa;
	display: flex;
	align-items: center;
	justify-content: center;
}
.upload-preview img {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
}
.file-badge {
	font-size: 40px;
	color: #909399;
}
.upload-name {
	font-size: 12px;
	color: #909399;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-top: 2px;
}
.upload-remove {
	position: absolute;
	top: -6px;
	right: -6px;
	color: #f56c6c;
	font-size: 18px;
	cursor: pointer;
	background: #fff;
	border-radius: 50%;
	line-height: 1;
}

/* ---------- 消息提示 toast ---------- */
.el-message {
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2000;
	min-width: 300px;
	max-width: 600px;
	padding: 12px 16px;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
	display: flex;
	align-items: center;
	font-size: 14px;
	color: #606266;
	border: 1px solid #ebeef5;
	box-sizing: border-box;
}
.el-message__icon {
	margin-right: 8px;
	font-size: 16px;
}
.el-message--success .el-message__icon {
	color: #67c23a;
}
.el-message--error .el-message__icon {
	color: #f56c6c;
}
.el-message--warning .el-message__icon {
	color: #e6a23c;
}
.el-message--info .el-message__icon {
	color: #909399;
}
.el-message__content {
	flex: 1;
}
.el-message__closeBtn {
	margin-left: 8px;
	cursor: pointer;
	color: #909399;
	font-size: 14px;
}

/* ---------- 悬浮客服弹窗 ---------- */
.float-item {
	position: relative;
}
.float-contact-group {
	position: fixed;
	bottom: 50%;
	right: 50%;
	margin-right: -490px;
	margin-bottom: 25px;
	z-index: 100;
}
.float-icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #343434;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	margin-bottom: 10px;
	cursor: pointer;
	transition: all 0.2s;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.float-icon:hover {
	background: #222;
	transform: scale(1.08);
}
.float-popover {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	width: 240px;
	background: #fff;
	border: 1px solid #ebeef5;
	border-radius: 6px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
	padding: 12px 16px;
	display: none;
	z-index: 101;
	box-sizing: border-box;
}
.float-popover.show {
	display: block;
}
.popover-content {
	padding: 4px 0;
}
.pop-label {
	font-size: 13px;
	color: #909399;
	margin: 0 0 6px 0;
}

/* ---------- 提交按钮 loading ---------- */
.el-button.is-loading {
	opacity: .7;
	cursor: not-allowed;
	pointer-events: none;
}