/* 多步骤表单样式 */
#multi-step-wrapper {
	max-width:initial;
}
.multi-step-form-container {
	position:relative;
    display: flex;
	max-width:;
    /*min-height: 100vh;*/
	max-width: calc(100vw * 1280 / 1920);
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.hidden-section {
	display:none;
}
.is-layout-constrained > .multi-step-form-container {
	width: calc(100vw * 1280 / 1920);
    max-width: 1280px;
}

/* 左侧边栏 */
.steps-sidebar {
    width: 40%;
	background:#050505 url(../../../../uploads//2025/06/apply_bg@2x.webp) bottom right /100% auto no-repeat;
    color: white;
    padding: 40px 30px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.form-title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 44px;
    line-height: 1.2;
}

.steps-navigation {
	margin: 0 30px;
    display: flex;
    position: relative;
    flex-direction: column;
	height: 572px;
    overflow: hidden;
    padding-left: 20px;
}

.step-item {
	flex:1;
    display: flex;
    align-items: center;
    /*margin-bottom: 40px;*/
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
	transform: translateY(-60px);
}

.step-item::after {
    content: '';
    position: absolute;
    left: 7px;
    width: 2px;
    background: #CBCBCB;
    z-index: 1;
    top: 64px;
    height: 100%;
}

.step-item:last-child::after {
    display: none;
}

.step-item.active::after,
.step-item.completed::after {
/*    background: #00a6d2;*/
}


.step-circle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #CBCBCB;
    border: 3px solid #CBCBCB;
    margin-right: 15px;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.step-circle.active {
    background: #fff;
    border-color: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
	position: relative;
    transform: scale(1.375);
}

.step-circle.active::after {
    content: '';
    width: 8px;
    height: 8px;
    background: #000;
    position: absolute;
    transform: translateX(50%);
    top: 1px;
    left: -3px;
    border-radius: 50%;
}

/*
.step-circle.completed {
    background: #4caf50;
    border-color: #4caf50;
}*/

/*.step-circle.completed::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}*/

.step-label {
    font-size: 16px;
    transition: color 0.3s ease;
}

.step-item.active .step-label {
    color: #00a6d2;
    font-weight: 600;
}

/* 右侧表单内容 */
.form-content {
    flex: 1;
    background: #5A6165;  /*#6b7280*/
    padding: 0 40px 120px;
    color: white;
    position: relative;
}

.form-step {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
}
.form-step[data-step="3"] .form-group:nth-child(3) {
	margin-top:calc(100vw * 120 / 1920);
}
.form-step[data-step="3"] .form-group:nth-child(3) label {
	display:flex;
}
.form-step.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.form-step h2 {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 40px;
    line-height: 1.2;
    color: white;
	padding: 0 20px;
    text-align: center;
}

.form-group {
    margin-bottom: 25px;
}

.form-row {
    display: flex;
    gap: 20px;
}

.form-group.half-width {
    flex: 1;
}
.inline-half-width {
	display: flex;
    gap: 20px;
}
.inline-half-width >div {
	flex: 1;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 500;
}

.form-content label + p {
	display:none;
}

.required {
    color: #ff6b6b;
}

.formRow2 {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 80px;
    margin: 26px 0px 0px;
}

.formRow2 > div:first-child {
    height: 100%;
}

.formRow2 img {
    height: 100%;
}

.formRow2 > div:nth-child(2) {
    flex: 1;
}
.inputWrap {
    position: relative;
}
.channelLabel {
    position: absolute;
    top: -46px;
    width: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 26px;
	color:#000;
}
.formSelect2 select {
    height: 40px;
    border-radius: 23px;
	padding: 0 40px 0 12px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="date"],
.form-group input[type="url"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 15px 20px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    transition: all 0.3s ease;
	height: 56px;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    background: white;
    box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.3);
}

.form-group textarea {
    border-radius: 15px;
    resize: vertical;
    min-height: 240px;
}

/* 性别按钮 */
.gender-buttons {
    display: flex;
    gap: 0;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.9);
	padding: 8px;
	height: 56px;
    box-sizing: border-box;
}

.gender-btn {
    flex: 1;
    border: none;
	border-radius:4px;
    background: transparent;
    color: #666;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.gender-btn.active {
    background: #00B2E3;
    color: white;
}

/* 购买状态按钮 */
.purchase-buttons {
    display: flex;
    gap: 0;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.9);
	padding: 8px;
	height: 56px;
    box-sizing: border-box;
}

.purchase-btn {
    flex: 1;
    border: none;
	border-radius:4px;
    background: transparent;
    color: #666;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.purchase-btn.active {
    background: #00B2E3;
    color: white;
}

/* 社交媒体频道 */
.social-channels {
    display: flex;
    flex-direction: column;
}

.channel-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.channel-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    flex-shrink: 0;
}

.channel-icon.youtube {
    background: #ff0000;
}

.channel-icon.tiktok {
    background: #000000;
}

.channel-icon.facebook {
    background: #1877f2;
}

.channel-icon.instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.channel-url {
    flex: 2;
    margin-right: 15px;
}

.followers-select {
    flex: 1;
    min-width: 150px;
}

/* 复选框样式 */
.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 18px;
    margin-top: 20px;
}

.checkbox-label input[type="checkbox"] {
    width: auto;
    margin-right: 12px;
    transform: scale(1.5);
}

/* 导航按钮 */
.form-navigation {
	position: absolute;
    width: 100%;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
	margin-left: -40px;
    margin-right: -40px;
    background: #858585;
    padding: 16px 70px;
}
.flex-center {
	justify-content:center;
}
.flex-between {
	justify-content:space-between;	
}
.btn {
    padding: 15px 40px;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
}

.btn-back {
    background: white;
    color: #333;
}

.btn-back:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
}

.btn-next,
.btn-submit {
    background: #000;
    color: white;
}

.btn-next:hover,
.btn-submit:hover {
    background: #333;
    transform: translateY(-2px);
    /*box-shadow: 0 5px 15px rgba(0,0,0,0.3);*/
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.errTip{
    display: none;
    color: red;
    position: absolute;
    left: 0;
    top: 62px;
}
.normalInputTextWrap.err + .errTip {
    display: block;
    top: 56px;
}
.normalInputTextWrap.err .normalInputText {
    border: 1px solid red;
}
.formSelect.err {
    position: relative;
}
.formSelect.err select {
	border:1px solid red;
}
.formSelect.err .errTip {
	display: block;
	top: 56px;
	font-size: 15px;
}

.normalInputText2Wrap.err + .errTip {
    display: block;
    top: 56px;
}
.normalInputText2Wrap.err .normalInputText2 {
    border: 1px solid red;
}
.formSelect2.err {
    position: relative;
}
.formSelect2.err select {
	border:1px solid red;
}
.formSelect2.err .errTip {
	display: block;
	top: 56px;
	font-size: 15px;
}
.normalTxtAreaWrap.err .normalTxtArea {
    border: 1px solid red;
}
.normalTxtAreaWrap.err + .errTip {
    display: block;
    bottom: -26px;
    top: initial;
}
.custom-checkbox {
    display: inline-block;
    position: relative;
    width: 22px;
    height: 22px;
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    margin-left: 20px;
}
.greenCheck {
    display: none;
}
.greenCheck:checked + .custom-checkbox::after {
    transform: translate(-50%, -50%) scale(1);
}

.custom-checkbox::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    background-color: #54FF00;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.2s ease-in-out;
}
.form-group .formLabel2 {
	margin-bottom:-6px;
}

#muti-step-res {
	display:none;
    position: absolute;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: center;
}
.stepPopBtn {
	width:120px;
	height:28px;
	font-size:20px;
	font-weight:bold;
	border-radius:30px;
	border:none;
	outline:none;
}
#multi-step-wrapper .success-message {
	background: #424242;
	border: 2px solid white;
	width: 600px;
	margin: 0 auto;
	padding: 40px 20px;
	color: white;
	border-radius: 16px;
	margin-bottom: 20px;
	text-align: center;
	font-size: 18px;
	animation: slideDown 0.3s ease;
}	
.multi-step-form-res-t1 {
	font-size: 28px; margin-bottom: 10px;color:#00B2E3;font-weight:bold;
}
.multi-step-form-res-msg {font-size:16px;}
.multi-step-form-res-btn-wrapper {margin-top:20px;}
/* 基础样式重置 */
.custom-date-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
}

/* 自定义日历图标 */
.custom-date-input {
	background-image: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E);
    background-position: right 14px;
    background-repeat: no-repeat;
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 40px;
}

/* WebKit浏览器特定样式 */
/*.custom-date-input::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
	left:0;
    color: transparent;
    cursor: pointer;
    height: auto;
    position: absolute;
    right: 0;
	top:0;
    width: auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
    filter: none;
}*/

/* 响应式设计 */
@media (max-width: 1024px) {
    .multi-step-form-container {
        flex-direction: column;
    }
    
    .steps-sidebar {
        width: 100%;
        height: auto;
        flex-direction: column;
		padding: 20px 8px;
		background:#050505;
    }
    
    .form-title {
        margin-bottom: 20px;
        margin-right: 0;
		text-align:center;
        font-size: 24px;
    }
    
    .steps-navigation {
        display: flex;
		margin: 0 0;
        gap: 0px;
        flex: 1;
		height: initial; 
        overflow: visible;
        padding-left: 0;
		flex-direction: row;
    }
    
    .step-item {
        margin-bottom: 0;
        flex-direction: column;
        text-align: center;
		transform: none;
    }
    
    .step-item::after {
		left: 45px;
		width: 100%;
		height: 2px;
		background: #CBCBCB;
		z-index: 1;
		top: 8px;
    }
    
    .dog-image {
        display: none;
    }
    
    .form-content {
        padding: 10px 20px 0;
    }
    
    .form-step h2 {
        font-size: 18px;
        margin-block-start: 0;
        margin-block-end: 14px;
    }
	.step-label {
		font-size: 12px;
		margin-top: 6px;
	}
	.form-group {
		position:relative;
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		/*border:1px solid #fff;*/
		border-radius:8px;
		/*padding: 0 4px;*/
	}
	.form-group input[type="text"], .form-group input[type="email"], .form-group input[type="date"], .form-group input[type="url"], .form-group select, .form-group textarea {
		background:transparent;
		height: 44px;
		padding: 4px 4px;
		color:#fff;
		border:1px solid #fff;
		border-radius:8px;
    }	
	.form-group select option {
		color: #333; /* option 选项为黑色，确保在下拉列表中可读 */
		background-color: #fff; /* option 背景为白色 */
	}
	.form-group:empty {
		display: none;
	}
	.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
		background:transparent;
		box-shadow:none;
	}
	label[for="user_birthday"] + p + div {flex:1;}
	select[name="user_country"] + p:empty {
		display: none;
	}
    .form-group label{
		font-size:15px;
		margin-bottom:0;
		position: absolute;
        top: 10px;
        left: 10px;
    }		
	.form-group .formSelect {
		flex:1;
	}
	.form-row {
		gap:0;
	}
	.application_form_wrapper {
		margin-top:0;
		padding-left:0;
		padding-right:0;
		position:fixed;
		width:100vw;
		top: 0;
		left: 0;
		z-index: 100;
		max-height: 100%;
        overflow-y: auto;
	}
	.application_form_wrapper.has-global-padding {
		padding-left:0;
		padding-right:0;
	}
	.application_form_wrapper .closeDialog {
		position:absolute;
		top:12px;
		right:12px;
		z-index: 101;
	}
	.application_form_wrapper .closeDialog svg {
		fill:#fff;
	}
	.application_form_wrapper .wp-block-spacer {
		display:none;
	}
	#multi-step-wrapper p:empty {
		display:none;
	}
	.form-navigation  {
		position:relative;
		width:initial;
		
	}
	.btn {
		padding: 10px 40px;
	}
	.form-group .inputWrap { flex:1;}
	.gender-buttons ,.purchase-buttons  {
		padding: 4px;
		height: 34px;
		margin: 4px;
		margin-left: 6px;
	}
	
	input[name="user_name"].normalInputText, input[name="user_email"].normalInputText {padding-left: 74px;}
	#genderSelect {margin-left: 12px;}
	#user_birthday {margin-left: 3px;}
	
	.form-group input[type=text]:is(:focus), .form-group input[type=password]:is(:focus), .form-group input[type=email]:is(:focus), .form-group input[type=number]:is(:focus), .form-group input[type=url]:is(:focus), .form-group input[type=search]:is(:focus), .form-group input[type=tel]:is(:focus) {
		background-color:transparent;
		border-color: #fff;
		color:#fff;
	}
	.errTip {
		position:relative;
		top:0;
	}
	.normalInputTextWrap.err + .errTip {
		top:0;
	}
	#user_country {
		border:none;
	}
	#gender_group_wrapper,#birthday_group_wrapper ,#usercountry_group_wrapper{
		border:1px solid #fff;
		padding: 0 10px;
	}
	#gender_group_wrapper > label , #birthday_group_wrapper > label,#purchase_group_wrapper > label,#usercountry_group_wrapper > label {position:relative;top:initial;left:initial;}
	#gender_group_wrapper .virtavo_phone_only {flex:1;}
	.form-group .virtavo_phone_only select {border:none;}
	#user_birthday {border:none;}
	#purchase_group_wrapper {display:block;}
	#purchase_group_wrapper .inline-half-width > div:empty {display:none;}
	#purchaseSelect {
		border: 1px solid #fff;
    	margin-top: 6px;
		padding-left: 10px;
	}
	
	#usercountry_group_wrapper .formSelect.err .errTip {
		position: absolute;
    	top: 46px;
    	left: -74px;
	}
	#usercountry_group_wrapper:has(.formSelect.err) {
		margin-bottom: 32px;
		border-color:red;
	}
	/* 使用更具体的选择器来提高权重 */
	#multi-step-wrapper input[type="text"].normalInputText:-webkit-autofill,
	#multi-step-wrapper input[type="email"].normalInputText:-webkit-autofill,
	#multi-step-wrapper input[type="password"].normalInputText:-webkit-autofill,
	#multi-step-wrapper input[type="search"].normalInputText:-webkit-autofill,
	#multi-step-wrapper input[type="search"].normalInputText:-internal-autofill-selected{
		-webkit-box-shadow: 0 0 0 1000px transparent inset !important;
		-webkit-text-fill-color: #fff !important;
		background: transparent !important;
		background-color: transparent !important;
		background-image: none !important;
		transition: background-color 5000s ease-in-out 0s;
	}

	/* 针对选中状态 */
	#multi-step-wrapper input.normalInputText:-webkit-autofill:focus,
	#multi-step-wrapper input.normalInputText:-webkit-autofill:active {
		-webkit-box-shadow: 0 0 0 1000px transparent inset !important;
		background: transparent !important;
		background-color: transparent !important;
	}
	.form-title {font-size:18px;}
	.channel-item {flex-direction: row;}
	.formRow2  {height:initial;}
	.formRow2 img {
		width: 36px;
        margin-left: 2px;
        margin-top: 2px;
		height: auto;
	}
	.channel-item >div:first-child {position:absolute;z-index: 103;}
	.followers-select {min-width:initial;}
	#multi-step-wrapper .success-message {width:90%;}
	.social-channels {position: relative;}
	.formSelect2 {    position: absolute!important;right: 0;}
	.formSelect2 select {
		min-width: 120px;
		height: 36px;
		margin-top: 2px;
	}
	input[type=text].normalInputText2 {padding: 7px 20px 7px 48px; border-radius: 16px;}
	.channelLabel { top: -38px;font-size: 20px;}
	.formSelect2.err .errTip {
		position: absolute;
		top: 39px;
		font-size: 12px;
	}
	.normalInputText2Wrap.err + .errTip {
		font-size: 12px;
		top:0;
	}
	#posted_link_group_wrapper  > label {position:relative;top:initial;left:initial;}
	#posted_link_group_wrapper {display:block;}
	#posted_link_group_wrapper input[type=url].normalInputText2{ margin-top:12px; padding: 10px 20px; border-radius: 16px;background:#fff; color: #333;}
	.form-step[data-step="3"] .form-group:nth-child(3) {
		margin-top: calc(100vw * 120 / 375);
	}
	.multi-step-form-container { min-height: 100vh;}
	.form-navigation-absolute {
		position: absolute;
		width: 100%;
		bottom: 0;
		margin-top: 50px;
		margin-left: -20px;
		margin-right:0;
		padding: 16px 16px;
	}
	.form-navigation-relative {
		position: relative;
		width: initial;
		bottom: 0;
		margin-top: 50px;
		margin-left: -20px;
		margin-right:-20px;
		padding: 16px 16px;
	}
	#additionnal_msg_group_wrapper {display:block;}
	#additionnal_msg_group_wrapper > label {position:relative;top:initial;left:initial;margin-bottom: -11px;}
	#additionnal_msg_group_wrapper textarea{ margin-top:12px; padding: 10px 20px; border-radius: 16px;background:#fff; color: #333;}
	.normalTxtAreaWrap.err + .errTip { bottom: -8px;}
	.multi-step-form-res-t1 {
		font-size: 20px;
	}
	.multi-step-form-res-msg {font-size:14px;}
	#multi-step-wrapper .success-message { padding: 20px 20px;}
	.custom-date-input::-webkit-calendar-picker-indicator {
		cursor: pointer;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 16px;
		width: 20px;
		height: 20px;
	}
	.social-channels {
		margin-bottom:-50px;
	}
}

@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        /*gap: 15px;*/
    }
    
    .channel-item {
        flex-direction: row;
        align-items: stretch;
        gap: 0;
    }
    
    .channel-url,
    .followers-select {
        flex: none;
    }
}