.container_xd_all {
width:100%;
background-image: url(/img/bg/about2.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.container_xd {
max-width: 1200px;
margin: 0 auto;
padding:40px 0px 10px 0px;
}
.form-card {
background: #FFFFFF 0% 0% no-repeat padding-box !important;
border-radius: 16px;
padding: 32px;
margin-bottom: 24px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
/* 新增：开启相对定位，作为图片定位容器 */
position: relative;
overflow: visible;
}


/* 右上角插图样式 */
.trip-card-img {
position: absolute;
top: 0;
right: 0; /* 紧贴最右边 */
transform: translateY(-10px); /* 向上微调，露出在卡片顶部外，和截图效果一致 */
pointer-events: none; /* 图片不遮挡点击表单 */
}
.trip-card-img img {
height: 120px; /* 按需调整高度，你可以改成你需要尺寸 */
width: auto;
display: block;
}	



.card-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.card-header .icon-circle {
width: 32px;
height: 32px;
border-radius: 50%;
background: #e9edf5;
display: flex;
align-items: center;
justify-content: center;
color: #555;
}
.card-header h2 {
font-size: 20px;
font-weight: 600;
color: #222;
}
.card-subtitle {
font-size: 14px;
color: #666;
margin-bottom: 24px;
padding-left: 42px;
}
.form-grid-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 16px;
}
.form-full {
grid-column: 1 / -1;
}
.form-item label {
display: block;
font-size: 14px;
color: #333;
margin-bottom: 6px;
}
.form-item select {            
font-size: 14px;
color: #666;           
}
.required {
color: #dd2222;
}
/* ========== 带图标的输入框容器 ========== */
.input-icon-wrap {
display: flex;
align-items: center;
border: 1px solid #d8dde6;
border-radius: 6px;
background: #fff;
padding: 0 12px;
}





























.input-icon-wrap svg {
width:16px;
height:16px;
flex-shrink:0;
color:#888;
margin-right:10px;
}
.date-range-placeholder img, .input-icon-wrap img {
width:20px;
height:20px;
flex-shrink:0;
color:#888;
margin-right:10px;
}
.input-icon-wrap input,
.input-icon-wrap select,
.input-icon-wrap textarea {
flex:1;
width:100%;
border:none;
outline:none;
padding: 10px 0;
font-size: 14px;
background: transparent;
}
.input-icon-wrap textarea {
padding:10px 0;
min-height:90px;
resize:none;
}
.input-icon-wrap:focus-within {
border-color: #4096ff;
}
/* ===== Depart | Return 按截图实现：单外框、两个Date占位、中间一条竖线 ===== */
.date-range-box {
display: flex;
align-items: center;
border: 1px solid #d8dde6;
border-radius: 6px;
background: #fff;
overflow: hidden;
height: 38px;
}
.date-range-field {
position: relative;
flex: 1;
min-width: 0;
height: 100%;			
}
.date-range-field input, .date-range-field input.only-date{
text-indent:12px;
width:55%;
text-align:left;		        			
}
.suibian input.suibiann{
text-indent:0px;
width:50%;
text-align:left;
margin-left: 0;

}
.date-range-field input[type="date"] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
border: none;
outline: none;
padding: 0;
margin: 0;
cursor: pointer;
z-index: 2;
}

.date-range-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
padding: 0 12px;
font-size: 14px;
color: #666;
pointer-events: none;
background: transparent;
z-index: 1;
}
.date-range-placeholder svg {
width: 16px;
height: 16px;
margin-right: 8px;
flex-shrink: 0;
}
.date-range-separator {
width: 1px;
height: 100%;
background: #d8dde6;
flex-shrink: 0;
}
/* Trip Details Tab */
.trip-tabs {
display: flex;
gap: 4px;
margin: 20px 0 24px;
}
.trip-tab {
padding: 8px 16px;
border: 1px solid #d8dde6;
border-radius: 6px;
background: #fff;
cursor: pointer;
font-size: 14px;
display: flex;
align-items: center;
gap: 6px;
}
.trip-tab.active {
background: #083d81;
color: #fff;
border-color: #083d81;
}
.trip-content {
display: none;
}
.trip-content.active {
display: block;
}
.radio-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin: 20px 0;
}
.radio-group label {
font-size: 14px;
color: #333;
margin-right: 16px;
cursor: pointer;
}
.radio-group .radio-line{
display:flex;
align-items:center;
gap:12px;
margin-top:8px;
}
.radio-group .hold-input{
margin-left:10px;
display:none;
padding: 5px 12px;
border:1px solid #d8dde6;
border-radius:6px;
}
.action-row {
display: flex;
gap: 12px;
margin: 12px 0;
}
.btn-add {
background: #fff;
border: 1px solid #083d81;
color: #222;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
}
.btn-clear {
background: #fff;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
.submit-wrap {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
.btn-submit {
background: #083d81;
color: #fff;
border: none;
padding: 12px 32px;
border-radius: 8px;
font-size: 18px;
cursor: pointer;
width:300px;
margin:auto;
}
/* ===== Multi City 动态行程行 ===== */
.multi-row-wrap {
display: flex;
flex-direction: column;
gap: 16px;
}
.multi-line {
display: grid;
grid-template-columns: repeat(3, 1fr) 48px;
gap: 8px;
align-items: end;
}
.del-line-btn {
height: 38px;
border: 1px solid #d8dde6;
background: #f7f8fa;
border-radius: 6px;
cursor: pointer;
font-size: 18px;
color: #666;
}





/* ========= 自适应适配 ========= */
@media (max-width: 992px) {
.form-grid-row {
grid-template-columns: repeat(2, 1fr);
}
.radio-row {
grid-template-columns: repeat(2, 1fr);
}
.multi-line {
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
}
@media (max-width: 780px) {
.card-header {
gap: 10px;
margin-bottom: 5px;
}
.card-subtitle {padding-left: 0px; text-align:center;}

.container_xd {
width: 95%;
margin:auto;
padding: 20px 0px 10px 0px;
}
.form-card {
padding: 20px 16px;
margin-bottom:5px;

}

.trip-card-img {
display: none; /* 小屏直接隐藏插图，避免布局乱掉 */
}

.form-grid-row {
grid-template-columns: 1fr;
}
.radio-row {
grid-template-columns: 1fr;
}
/* Multi City 块状卡片 */
.multi-row-wrap {
gap: 12px;
}
.multi-line {
grid-template-columns: 1fr;
gap: 12px;
padding: 14px;
background: #ffffff;
border: 1px solid #e5e7f0;
border-radius: 12px;
position: relative;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.multi-line .form-item {
width: 100%;
}
/* 移动端删除按钮，22x22，使用SVG叉号，几何居中 */
.del-line-btn {
position: absolute;
top: 0px;
right: 0px;
width: 22px;
height: 22px;
border-radius: 50%;
border: 1px solid #083d81;
background: #fff;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0;
line-height: 1;
cursor: pointer;
}
.del-line-btn svg {
width: 10px;
height: 10px;
color:#083d81
}
.trip-tabs {
flex-wrap: wrap;
}
}































/*主页面开始*/
.group_travel_with{
padding: 48px 0px;
max-width: 1200px;
margin: 0 auto;
}
/* ========== 三步流程 PC：三列并排 ========== */
.steps-wrap {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-bottom: 60px;
padding-top:20px;
}
.step-item_xiadan {
text-align: center;
}
.step-icon {
font-size: 40px;
margin-bottom: 0px;
}
.step-icon img  { width:65px; height:65px;}
.step-item_xiadan h3 {
font-size: 17px;
font-weight: 600;
margin-bottom: 6px;
}
.step-item_xiadan p {
font-size: 14px;
color: #6e6e73;
line-height: 1.45;
width:85%;
margin:auto;
}
/* ========== Why 左右两栏区域【可单独控制宽度】 ========== */
/* ========== Why 左右两栏区域 ========== */
.why-wrap {
display: grid;
grid-template-columns: 1fr 500px;
gap: 150px;
margin-bottom: 24px;
align-items: start;
}
.why-text h2 {
font-size: 24px;
font-weight: 700;
margin-bottom: 8px;
}
.why-text .desc {
font-size: 14px;
color: #515154;
margin-bottom: 20px;
line-height: 1.5;
}
.check-list {
list-style: none;
margin-bottom: 20px;
}
.check-list li {
font-size: 15px;
line-height: 1.55;
color: #222;
padding-left: 24px;
position: relative;
margin-bottom: 12px;
}
.check-list li::before {
content: "✓";
color: #0071e3;
position: absolute;
left: 0;
font-weight: bold;
}
.why-text .tip {
font-size: 14px;
color: #515154;
margin-bottom: 0;
}
.why-image img {
width: 100%;
border-radius: 10px;
display: block;
}

/* ========== 独立通栏标签栏 独立模块，width:100% ========== */
.tags-row {
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
border: 1px solid #E9EAEF;
border-radius: 12px;
overflow: hidden;
margin-bottom: 50px;
}
.tag-item {
padding: 16px 14px;
display: flex;
align-items: center;
gap: 10px;
font-size: 16px;
font-weight: 500;
border-right: 1px solid #e5e5e7;
}
.tag-item:last-child {
border-right: none;
}

.tag-icon img {
width:25px;
height:25px;
display: block;
}

/* ========== Tour 卡片区域 ========== */
.tours-wrap h2 {
font-size: 24px;
font-weight: 700;
margin-bottom: 8px;
}
.tours-wrap .desc {
font-size: 14px;
color: #515154;
margin-bottom: 28px;
line-height: 1.5;
}
.cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.tour-card {
border: 1px solid #e5e5e7;
border-radius: 10px;
overflow: hidden;
}
.tour-card img {
width: 100%;
height: 160px;
object-fit: cover;
display: block;
}
.card-body {
padding: 14px;
}
.card-body h4 {
font-size: 18px;
font-weight: 600;
margin-bottom: 6px;
}
.card-body a {
font-size: 13px;
color: #515154;
text-decoration: underline;
}
/* ========== 响应式移动端【重点修改steps布局】 ========== */
@media (max-width:767px) {
.group_travel_with{
padding: 20px 15px 20px 15px;
max-width: 100%;
margin: 0 auto;
}
.step-item_xiadan p {
margin: inherit;
width: 100%;
}
/* 移动端：取消grid，垂直排列，每一项flex 图标左，文字右 */
.steps-wrap {
display: flex;
flex-direction: column;
gap: 0;
margin-bottom: 10px;
}
.step-item_xiadan {
display: flex;
align-items: flex-start;
gap: 10px;
text-align: left;
padding: 10px 10px;
border-bottom: 1px solid #e5e5e7;
}
.step-item_xiadan:last-child {
border-bottom: none;
}
.step-icon {
flex-shrink: 0;
margin-bottom: 0;
}
.why-text h2 {
font-size: 20px;
font-weight: 600;
margin-bottom: 8px;
text-align:center
}

.why-text .tip {
padding-bottom:12px;
}
.why-wrap {
grid-template-columns: 1fr;
gap: 0px;
padding:0 8px;
}
.tags-row {
grid-template-columns: 1fr;
}
.tag-item {
border-right: none;
border-bottom: 1px solid #e5e5e7;
}
.tag-item:last-child {
border-bottom: none;
}
.cards-grid {
grid-template-columns: 1fr;
}


.tours-wrap h2 {
font-size: 20px;
margin-bottom: 8px;
}
.tours-wrap .desc {
margin-bottom: 15px;

}



}

/*主页面结束*/







.xdok_steps-wrap {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-bottom: 20px;
}
.xdok_step-item_xiadan {
text-align: center;
}
.xdok_step-icon {
font-size: 40px;
margin-bottom: 0px;
}
.xdok_step-icon img  { width:65px; height:65px;}
.xdok_step-item_xiadan h3 {
font-size: 17px;
font-weight: 600;
margin-bottom: 6px;
}
.xdok_step-item_xiadan p {
font-size: 14px;
color: #6e6e73;
line-height: 1.45;
width:85%;
margin:auto;
}
@media (max-width:767px) {

.xdok_step-item_xiadan p {
font-size: 14px;
color: #6e6e73;
line-height: 1.45;
width: 100%;
margin: inherit;
}

/* 移动端：取消grid，垂直排列，每一项flex 图标左，文字右 */
.xdok_steps-wrap {
display: flex;
flex-direction: column;
gap: 0;
margin-bottom: 10px;
}
.xdok_step-item_xiadan {
display: flex;
align-items: flex-start;
gap: 10px;
text-align: left;
padding: 10px 10px;
border-bottom: 1px solid #e5e5e7;
}
.xdok_step-item_xiadan:last-child {
border-bottom: none;
}
.xdok_step-icon {
flex-shrink: 0;
margin-bottom: 0;
}
}