.banner {
    width: 100%;
    height: 400px;
    position: relative;
    z-index: -1;
    overflow: hidden;
}

.bannerCon {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
}

    .bannerCon a {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        background: url(/content/Styles/images/banner1.jpg) no-repeat;
        background-position: 50% 0;
        background-size: cover;
    }

        .bannerCon a img {
            width: 1920px;
            height: 100%;
            overflow: hidden;
        }

.search {
    width: 1120px;
    height: 300px;
    margin: -346px auto 0;
}

.searchMin {
    width: 596px;
    height: 100%;
    background: #fff;
    margin-left: 50px;
}



.foot {
    width: 100%;
    height: 60px;
    margin-top: 40px;
}

.footMin {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding-top: 12px;
    box-sizing: border-box;
}

    .footMin:after {
        display: block;
        clear: both;
        content: " ";
        overflow: hidden;
    }

.foot p {
    width: 180px;
    height: 100%;
    margin-right: 160px;
    float: left;
    position: relative;
}

.foot .noMargin {
    margin: 0;
}

.foot p b {
    position: absolute;
    left: 50px;
    top: 2px;
    color: #fff;
    font-size: 16px;
    font-weight: normal;
}

.foot p span {
    position: absolute;
    left: 50px;
    bottom: 12px;
    color: #fff;
}

.foot {
    min-width: 1300px;
    margin-bottom: -30px;
}

/* ==================== 紧凑型搜索框（最终版） ==================== */
.flight-search-compact {
    display: flex;
    width: 100%;
    max-width: 560px;
    min-height:280px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    overflow: hidden;
    font-family: "Microsoft YaHei", Arial, sans-serif;
}

/* 左侧标签 */
.search-tabs-vertical {
    width: 80px;
    background: #f8f8f8;
    border-right: 1px solid #eee;
    display: flex;
    flex-direction: column;
}

    .search-tabs-vertical .tab {
        flex:1;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        color: #666;
        cursor: pointer;
        text-orientation: mixed;
        letter-spacing: 4px;
        font-weight: 500;
        transition: all 0.3s;
    }

        .search-tabs-vertical .tab.active,
        .search-tabs-vertical .tab:hover {
            background: #dd3377;
            color: #fff;
            font-weight: 600;
        }

/* 右侧内容 */
.search-content {
    flex: 1;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 44px 1fr;
    grid-template-rows: 54px 54px;
    gap: 12px;
    flex: 1;
}

/* ==================== 浮动标签核心 ==================== */
.float-label-group {
    position: relative;
    flex: 1;
}

.float-input {
    width: 100%;
    height: 100%;
    padding: 24px 12px 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    background: transparent;
    transition: all 0.3s;
    box-sizing: border-box;
    padding-left:16px;
}

    .float-input:focus {
        outline: none;
        border-color: #dd3377;
        box-shadow: 0 0 0 3px rgba(221,51,119,0.15);
    }

.float-label {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #999;
    background: #fff;
    padding: 0 4px;
    pointer-events: none;
    transition: all 0.3s;
    z-index: 1;
}

/* 上浮状态 */
.float-input:not(:placeholder-shown) ~ .float-label,
.float-input:focus ~ .float-label {
    top: 10px;
    font-size: 12px;
    color: #dd3377;
    font-weight: 500;
}

/* ==================== 城市下拉建议 ==================== */
.city-suggest {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 10;
    display: none;
}

    .city-suggest.show {
        display: block;
    }

.city-suggest-item {
    padding: 10px 12px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}

    .city-suggest-item:hover {
        background: #f8f9fa;
        color: #dd3377;
    }

    .city-suggest-item:last-child {
        border-bottom: none;
    }

/* ==================== 交换按钮 & 天数 ==================== */
.swap-wrapper,
.day-diff-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hotel-day-diff-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.swap-btn,
.day-diff {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.3s;
}

.swap-btn {
    border: 1px solid #ddd;
    background: #fff;
    color: #666;
    cursor: pointer;
}

    .swap-btn:hover {
        background: #dd3377;
        color: #fff;
        border-color: #dd3377;
    }

.day-diff {
    background: #f8f9fa;
    border: 1px solid #ddd;
    color: #666;
    font-weight: 500;
}

/* ==================== 底部控制 ==================== */
.form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    font-size: 13px;
}

.premium-check,
.trip-type-mini label {
    color: #666;
    cursor: pointer;
    white-space: nowrap;
}

.trip-type-mini label {
    margin: 0 8px;
}

.search-btn {
    height: 40px;
    padding: 0 20px;
    background: #dd3377;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .search-btn:hover {
        background: #c62b68;
    }

/* ==================== 响应式 ==================== */
@media (max-width: 540px) {
    .flight-search-compact {
        flex-direction: column;
        margin: 0 16px;
    }

    .search-tabs-vertical {
        width: 100%;
        height: 50px;
        flex-direction: row;
        border-right: none;
        border-bottom: 1px solid #eee;
        padding: 0;
        gap: 0;
    }

        .search-tabs-vertical .tab {
            writing-mode: horizontal-tb;
            letter-spacing: normal;
            flex: 1;
            height: 100%;
        }

    .form-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 54px);
        gap: 10px;
    }

    .swap-wrapper,
    .day-diff-wrapper {
        grid-column: 1 / -1;
        justify-content: center;
    }
}

/* ==================== Bootstrap 胶囊按钮美化 ==================== */
.btn-group-capsule {
    display: inline-flex;
    border: 1px solid #ddd;
    border-radius: 12px;
    overflow: hidden;
    background: #f8f9fa;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin: 0 auto 16px;
}

    .btn-group-capsule .btn {
        border: none !important;
        border-radius: 0 !important;
        font-weight: 500;
        color: #666;
        padding: 8px 20px;
        min-width: 64px;
    }

    .btn-group-capsule .btn-check:checked + .btn {
        background: #dd3377 !important;
        color: #fff !important;
        font-weight: 600;
    }

    .btn-group-capsule .btn:hover {
        background: #f0f0f0;
        color: #333;
    }

    .btn-group-capsule .separator {
        display: flex;
        align-items: center;
        padding: 0 10px;
        color: #ccc;
        font-weight: 300;
        pointer-events: none;
    }

/* 小屏响应式 */
@media (max-width: 640px) {
    .btn-group-capsule {
        width: 100%;
        justify-content: center;
    }

        .btn-group-capsule .btn {
            flex: 1;
        }
}

/* ==================== 交换按钮：单次180°旋转 ==================== */
.swap-icon {
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: rotate(0deg);
}

.swap-btn.swapped .swap-icon {
    transform: rotate(180deg); /* 最终状态 */
}

/* 可选：点击时加个缩放反馈 */
.swap-btn:active {
    transform: scale(0.92);
}


/*酒店查询框*/
/* 酒店查询特定的微调 */
#hotel-panel .swap-btn:hover {
    /* 酒店中间图标不需要像机票那样变色交互，或者你可以保留 */
    background: #fff;
    color: #dd3377;
    transform: none; /* 禁止旋转 */
}

/* 简单的客流选择器样式 */
#guest-selector:hover {
    color: #dd3377;
}

/* 酒店城市选择器专用样式 */
.float-label-group {
    position: relative; /* 确保父容器是定位基准 */
}

/* 右上角区县标签 */
.district-tag {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(221, 51, 119, 0.1); /* 浅粉色背景 */
    color: #dd3377;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none; /* 让点击穿透，不影响输入框聚焦 */
    display: none; /* 默认隐藏 */
    z-index: 5;
    white-space: nowrap;
}

/* 当输入框浮起 label 时，调整一下 tag 的位置避免重叠(可选) */
.float-input:focus ~ .district-tag,
.float-input:not(:placeholder-shown) ~ .district-tag {
    /* 保持在垂直居中即可，或者根据需要微调 */
}

/* 搜索建议列表中，区分城市和区县的样式 */
.cityslide li .district-parent {
    font-size: 12px;
    color: #999;
    margin-left: 5px;
}

/* 火车票查询框额外样式 - 添加到 Index.css 中 */

/* 火车票查询框两行布局 */
#train-panel .train-grid {
    grid-template-columns: 1fr 44px 1fr;
    grid-template-rows: 54px 54px;
    gap: 12px;
}

/* 出发日期占满整行 */
#train-panel .train-date-full {
    grid-column: 1 / -1;
}

/* 火车票交换按钮旋转动画 */
#trainCitySwap .swap-icon {
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: rotate(0deg);
}

#trainCitySwap.swapped .swap-icon {
    transform: rotate(180deg);
}

#trainCitySwap:active {
    transform: scale(0.92);
}

/* 响应式调整 */
@media (max-width: 768px) {
    #train-panel .train-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 54px);
    }

    #train-panel .swap-wrapper {
        display: none;
    }

    #train-panel .train-date-full {
        grid-column: 1;
    }
}