/* 全局样式 */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:#333}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* 顶部通知栏 */
.top-notification{background:linear-gradient(135deg,#8b0000,#a00000,#b22222);color:#fff;text-align:center;padding:10px 0;font-size:14px}

/* 头部 */
.header{background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.1);position:sticky;top:0;z-index:1000}
.header-content{display:flex;justify-content:space-between;align-items:center;padding:15px 0}
.logo h1{color:#8b0000;font-size:28px;font-weight:700}
.logo h1 a{color:inherit;text-decoration:none;transition:color .3s ease;display:flex;align-items:center;gap:8px}
.logo-icon{width:40px;height:40px;object-fit:cover;border-radius:4px}
.logo h1 a:hover{color:#005a9e}
.nav{display:flex;align-items:center}
.nav-item{position:relative;cursor:pointer;padding:10px 15px;border-radius:5px;transition:background-color .3s ease}
.nav-item:hover{background-color:#f8f9fa}
.nav-item span{display:flex;align-items:center;gap:8px;font-weight:500}
.header-right{display:flex;align-items:center;gap:20px}
.currency-selector{cursor:pointer;padding:8px 12px;border-radius:5px;transition:background-color .3s ease}
.currency-selector:hover{background-color:#f8f9fa}
.currency-selector span{display:flex;align-items:center;gap:8px}
.header-right a{text-decoration:none;color:#333;font-weight:500;transition:color .3s ease}
.header-right a:hover{color:#dc3545}

/* 下拉菜单 */
.dropdown-menu{position:absolute;top:100%;left:0;background:#fff;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.15);min-width:300px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .3s ease;z-index:1001}
.dropdown-menu.show{opacity:1;visibility:visible;transform:translateY(0)}
.menu-section{padding:20px}
.menu-section:not(:last-child){border-bottom:1px solid #eee}
.menu-item{display:flex;align-items:center;gap:15px;padding:12px 0;text-decoration:none;color:#333;transition:all .3s ease;border-radius:5px}
.menu-item:hover{background-color:#f8f9fa;color:#0071c2}
.menu-item.active{background-color:#e3f2fd;color:#0071c2}
.menu-item i{width:20px;text-align:center;color:#666}
.menu-item:hover i{color:#0071c2}
.menu-item.no-icon{padding-left:35px}
.menu-separator{height:1px;background:#eee;margin:0 20px}

/* 英雄 */
.hero{background:url('../assets/images/long1.jpg') center center/cover no-repeat;color:#fff;height:450px;text-align:center;position:relative;z-index:1050;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.78);z-index:1}
.hero::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg, #ff6b6b, #ff8e53);opacity:0.7;z-index:2}
.hero-background{position:relative}
.hero-content{position:relative;z-index:1000}
.hero-title{font-size:48px;margin-bottom:30px;font-weight:700}

.search-tabs{display:none}
.search-tabs .tab{padding:12px 24px;border:1px solid rgba(80, 79, 79, 0.514);background:rgba(0,0,0,0.6);color:#fff;border-radius:25px;cursor:pointer;transition:all .3s ease;font-weight:500}
.search-tabs .tab.active,.search-tabs .tab:hover{border-color:#fff;background:#8b0000;color:#fff}

/* 搜索表单 */
.search-form{position:relative;overflow:visible;background:rgba(255,255,255,.95);padding:30px;border-radius:12px;backdrop-filter:blur(10px);max-width:1200px;margin:0 auto 30px;box-shadow:0 8px 30px rgba(0,0,0,.1);z-index:1100}
.search-form>*{margin-bottom:20px}
.search-form>*:last-child{margin-bottom:0}

.search-inputs{display:flex;gap:15px;margin-bottom:20px;align-items:center;flex-direction:row}
.search-inputs .input-group{flex:1;min-width:0}
.search-inputs .destination-group{flex:1.2}
.search-inputs .date-group{flex:1}
.search-inputs .travelers-group{flex:1}

/* 三个浮层的层级统一提升（关键） */
.destination-dropdown,.date-picker-modal,.travelers-modal{z-index:3000}

/* 输入组 */
.input-group{position:relative;display:flex;align-items:center;background:#fff;border:1px solid #e0e0e0;border-radius:8px;overflow:visible;transition:border-color .3s ease,box-shadow .3s ease;height:60px}

/* 区号选择器样式 */
.mobile-input {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dial-code-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
}

.dial-code-selector:hover {
    background: #e9ecef;
    border-color: #0071c2;
}

.current-dial-code {
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.dial-search-btn {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 2px;
    font-size: 12px;
    transition: color 0.3s ease;
}

.dial-search-btn:hover {
    color: #0071c2;
}

.dial-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    width: 300px;
    z-index: 1000;
    margin-top: 5px;
}

.dial-search-input {
    width: 100%;
    padding: 12px 15px;
    border: none;
    border-bottom: 1px solid #eee;
    border-radius: 8px 8px 0 0;
    font-size: 14px;
    outline: none;
}

.dial-search-input:focus {
    border-bottom-color: #0071c2;
}

.country-list {
    max-height: 250px;
    overflow-y: auto;
}

.country-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-bottom: 1px solid #f5f5f5;
}

.country-item:hover {
    background-color: #f8f9fa;
}

.country-item img {
    width: 20px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
}

.country-item .country-info {
    flex: 1;
}

.country-item .country-name {
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

.country-item .dial-code {
    color: #666;
    font-size: 12px;
    margin-top: 2px;
}
.input-group:hover{border-color:#0071c2}
.input-group:focus-within{border-color:#0071c2;box-shadow:0 0 0 2px rgba(0,113,194,.1)}
.destination-group,.date-group,.travelers-group{position:relative}
.input-group i{position:relative;color:#333;font-size:18px;padding:0 15px;flex-shrink:0;width:20px;text-align:center}
.input-group input{width:100%;padding:15px 15px 15px 0;border:none;border-radius:0;font-size:16px;cursor:pointer;background:transparent;outline:none;color:#333}
.input-group input::placeholder{color:#999;font-weight:400}

/* 地图按钮 */
.map-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:#666;cursor:pointer;padding:8px;border-radius:4px;transition:background-color .3s ease;z-index:10}
.map-btn:hover{background-color:#f0f0f0}

/* 目的地弹层 */
.destination-dropdown{position:absolute;top:100%;left:0;right:0;background:#fff;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.15);opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .3s ease;margin-top:5px;min-width:300px;max-width:90vw;width:100%}
.destination-dropdown.show{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-header{display:flex;align-items:center;padding:15px 20px;border-bottom:1px solid #eee}
.dropdown-header h4{margin:0;color:#333;font-size:16px;flex:1}
.back-btn{background:none;border:none;color:#0071c2;cursor:pointer;padding:5px;margin-right:15px;border-radius:4px;transition:background-color .3s ease}
.back-btn:hover{background-color:#f0f8ff}
.destination-list{max-height:300px;overflow-y:auto}
.destination-item{display:flex;align-items:center;gap:15px;padding:15px 20px;cursor:pointer;transition:background-color .3s ease;border-bottom:1px solid #f5f5f5}
.destination-item:hover{background-color:#f8f9fa}
.destination-item .location-icon{color:#0071c2;font-size:18px;flex-shrink:0}
.destination-item .arrow-icon{color:#999;font-size:14px;margin-left:auto;flex-shrink:0}
.destination-item.detailed-item{padding:12px 20px}
.destination-item.detailed-item .location-icon{color:#0071c2;font-size:16px}
.destination-info{display:flex;flex-direction:column}
.destination-info .city{font-weight:600;color:#333;font-size:14px}
.destination-info .region{color:#666;font-size:12px;margin-top:2px}

/* 日期选择器：改为固定定位 + 遮罩（关键） */
.date-picker-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  display:none;
  z-index:2800;
}
.date-picker-overlay.show{display:block}


.date-picker-modal.show{display:block}

.date-picker-header{padding:20px 20px 0;border-bottom:1px solid #eee;position:relative}
.date-close-btn{
  position:absolute;right:12px;top:12px;width:36px;height:36px;border:none;border-radius:50%;
  background:#f5f5f5;cursor:pointer;font-size:22px;line-height:36px;text-align:center;color:#666
}
.date-close-btn:hover{background:#eee}
.date-tabs{display:flex;margin-bottom:15px;gap:8px}
.date-tab{padding:8px 16px;border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;color:#666;font-size:14px;transition:all .3s ease}
.date-tab.active{color:#e74c3c;border-bottom-color:#e74c3c}
.selected-date-range{text-align:center;padding:15px 0;font-size:16px;color:#333;font-weight:500}
.date-picker-content{padding:20px;min-height:500px}

.month-navigation{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.month-nav{background:none;border:none;font-size:18px;color:#0071c2;cursor:pointer;padding:8px;border-radius:4px;transition:background-color .2s}
.month-nav:hover{background-color:#f0f8ff}
.month-display{display:flex;gap:100px;font-size:18px;font-weight:600;color:#333}

/* 日历容器（避免拉伸） */
.calendar-container{display:flex;gap:100px;margin-bottom:30px;justify-content:center;align-items:flex-start}
.calendar{flex:0 0 auto}
.calendar table{table-layout:fixed;width:100%;border-collapse:collapse}

/* 星期 */
.calendar th{padding:18px 8px;text-align:center;font-weight:600;color:#333;font-size:13px;border-bottom:1px solid #eee;width:14.28%}

/* 日期（关键：line-height 与 height 对齐） */
.calendar td{
  padding:0;
  text-align:center;
  cursor:pointer;
  border-radius:50%;
  transition:all .3s ease;
  position:relative;
  font-size:14px;
  min-width:45px;
  height:45px;
  line-height:45px;           /* 关键修复：原来是 10px，导致数字像"消失" */
  vertical-align:middle;
  width:14.28%;
  font-weight:500;
  color:#333;                 /* 常态深灰更清晰 */
}
.calendar td:hover:not(.disabled):not(.past){background-color:#f0f8ff;transform:scale(1.05)}
.calendar td.disabled{color:#ccc;cursor:not-allowed}
.calendar td.past{color:#999;cursor:not-allowed}
.calendar td.today{background-color:#e6f3ff;color:#0071c2;font-weight:600;border:2px solid #0071c2}
.calendar td.selected{background-color:#0071c2;color:#fff !important;font-weight:600;box-shadow:0 2px 8px rgba(0,113,194,.3)}
.calendar td.in-range{background-color:#e6f3ff;color:#0071c2}
.calendar td.in-range:not(.selected){border-radius:0}
.calendar td.center-date{background-color:#e6f3ff;color:#0071c2;font-weight:600;border:2px solid #0071c2}

/* 灵活日期区 */
.date-flexibility{display:none;padding:25px 0;border-top:1px solid #eee;margin-top:20px}
.flexibility-buttons{display:flex;gap:15px;flex-wrap:wrap;justify-content:center;margin-bottom:15px}
.flex-btn{padding:12px 20px;border:1px solid #ddd;background:#fff;border-radius:20px;cursor:pointer;font-size:14px;color:#666;transition:all .3s ease;min-width:110px}
.flex-btn:hover{border-color:#0071c2;color:#0071c2}
.flex-btn.active{background-color:#e74c3c;border-color:#e74c3c;color:#fff}
.flex-mode-hint{background-color:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;padding:15px;margin-top:15px;font-size:12px;color:#6c757d;text-align:center}

/* 底部按钮 */
.date-picker-footer{padding:25px 20px;border-top:1px solid #eee;text-align:right}
.done-btn{background-color:#e74c3c;color:#fff;border:none;padding:14px 28px;border-radius:6px;font-size:16px;font-weight:600;cursor:pointer;transition:background-color .3s ease;min-width:80px}
.done-btn:hover{background-color:#c0392b}
.done-btn:disabled{background-color:#ccc;cursor:not-allowed}

/* 选择状态提示 */
.date-input{position:relative}
.date-input.selecting-start::after{
  content:'选择出发日期';position:absolute;right:10px;top:50%;transform:translateY(-50%);
  font-size:12px;color:#0071c2;background:#f0f8ff;padding:2px 6px;border-radius:4px
}
.date-input.selecting-end::after{
  content:'选择返回日期';position:absolute;right:10px;top:50%;transform:translateY(-50%);
  font-size:12px;color:#0071c2;background:#f0f8ff;padding:2px 6px;border-radius:4px
}

/* 旅行者弹层 */
.travelers-modal{position:absolute;top:100%;left:0;background:#fff;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.2);opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .3s ease;margin-top:5px;min-width:400px;max-width:90vw;width:100%}
.travelers-modal.show{opacity:1;visibility:visible;transform:translateY(0)}
.travelers-header{padding:20px;border-bottom:1px solid #eee}
.travelers-header h4{margin:0;color:#333;font-size:18px}
.travelers-content{padding:20px}
.traveler-type{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid #f5f5f5}
.traveler-type:last-child{border-bottom:none}
.type-info{display:flex;flex-direction:column}
.type-label{font-weight:600;color:#333;font-size:16px}
.type-description{color:#666;font-size:14px;margin-top:2px}
.counter{display:flex;align-items:center;gap:15px}
.counter-btn{width:32px;height:32px;border:1px solid #ddd;background:#fff;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:#666;transition:all .3s ease}
.counter-btn:hover{border-color:#0071c2;color:#0071c2}
.counter-btn:disabled{opacity:.5;cursor:not-allowed}
.count{font-size:18px;font-weight:600;color:#333;min-width:30px;text-align:center}
.travelers-actions{padding:20px;border-top:1px solid #eee}
.add-room-btn{width:100%;padding:12px;background:none;border:1px solid #0071c2;color:#0071c2;border-radius:8px;cursor:pointer;font-size:14px;margin-bottom:15px;transition:all .3s ease}
.add-room-btn:hover{background-color:#0071c2;color:#fff}
.large-booking-link{color:#0071c2;text-decoration:none;font-size:14px}
.large-booking-link:hover{text-decoration:underline}
.travelers-footer{padding:20px;border-top:1px solid #eee;text-align:right}

/* 其他组件（原样） */
.search-options{margin-bottom:20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px}
.checkbox-label input[type="checkbox"]{display:none}
.checkmark{width:20px;height:20px;border:2px solid rgba(255,255,255,.5);border-radius:4px;position:relative;transition:all .3s ease}
.checkbox-label input[type="checkbox"]:checked + .checkmark{background:#0071c2;border-color:#0071c2}
.checkbox-label input[type="checkbox"]:checked + .checkmark::after{content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:14px;font-weight:700}

.search-btn{width:auto;padding:15px 30px;background:#ff8c00;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:background-color .3s ease;height:60px;min-width:120px;flex-shrink:0}
.search-btn:hover{background:#c96d11}

.promo-banner{background:rgba(255,255,255,.1);padding:20px;border-radius:10px;display:flex;justify-content:space-between;align-items:center;max-width:800px;margin:0 auto}
.view-deals{color:#ffd700;text-decoration:none;font-weight:600}

/* 特性区/卡片 等（原样略） */
.features{padding:80px 0;background:#f8f9fa}

/* 仅隐藏"停留(stays)"面板里的 日期 与 旅行者 输入块 */
.search-panel[data-panel="stays"] .date-group,
.search-panel[data-panel="stays"] .travelers-group {
  display: none !important;
}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;margin-bottom:40px}
.feature-card{background:#fff;padding:30px;border-radius:12px;text-align:center;box-shadow:0 4px 15px rgba(0,0,0,.1);transition:transform .3s ease;position:relative}
.feature-card:hover{transform:translateY(-5px)}
.feature-card.special{border:2px solid #0071c2}
.feature-card.promotion{border:2px solid #ff6b6b}
.feature-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:#0071c2;color:#fff;padding:5px 15px;border-radius:15px;font-size:12px;font-weight:600}
.feature-card.promotion .feature-badge{background:#ff6b6b}
.feature-icon{width:80px;height:80px;background:#e3f2fd;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.feature-icon i{font-size:36px;color:#0071c2}
.feature-card h3{font-size:24px;margin-bottom:15px;color:#333}
.feature-card p{color:#666;margin-bottom:20px;line-height:1.6}
.feature-btn{background:#ffffff;color:#1f2937;border:2px solid #d1d5db;padding:12px 24px;border-radius:25px;cursor:pointer;font-weight:600;transition:all .3s ease}
.feature-btn:hover{background:#f9fafb;border-color:#9ca3af;color:#111827}

/* 轮播、卡片、页脚（原样保留，略） */
.last-minute-deals{padding:80px 0}
.section-header{text-align:center;margin-bottom:40px}
.section-header h2{font-size:36px;color:#333;margin-bottom:10px}
.section-header p{color:#666;font-size:18px}
.deals-carousel{position:relative;margin-bottom:40px}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:#fff;border:2px solid #ddd;width:50px;height:50px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:#666;transition:all .3s ease;z-index:10}
.carousel-btn:hover{border-color:#ff6b6b;color:#ff6b6b}
.carousel-btn.prev{left:-25px}
.carousel-btn.next{right:-25px}
.deals-container{display:flex;gap:20px;overflow-x:auto;scroll-behavior:smooth;padding:20px 0}
.deal-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,.1);min-width:300px;transition:transform .3s ease}
.deal-card:hover{transform:translateY(-5px)}
.deal-image{position:relative}
.deal-image img{width:100%;height:200px;object-fit:cover}
.deal-badge{position:absolute;top:10px;right:10px;background:#ff6b6b;color:#fff;padding:5px 10px;border-radius:15px;font-size:12px;font-weight:600}
.deal-content{padding:20px}
.deal-rating{display:flex;align-items:center;gap:10px;margin-bottom:15px}
.rating{background:#28a745;color:#fff;padding:4px 8px;border-radius:4px;font-weight:600}
.rating-text{color:#28a745;font-weight:600}
.reviews{color:#666;font-size:14px}
.deal-title{font-size:18px;margin-bottom:10px;color:#333}
.deal-location{color:#666;margin-bottom:15px}
.deal-price{display:flex;flex-direction:column;gap:5px}
.current-price{font-size:20px;font-weight:600;color:#0071c2}
.price-breakdown{display:flex;align-items:center;gap:10px}
.original-price{color:#999;text-decoration:line-through}
.discounted-price{color:#333;font-weight:600}
.discount{background:#ff6b6b;color:#fff;padding:2px 8px;border-radius:10px;font-size:12px;font-weight:600}
.view-all-deals{text-align:center}
.view-all-btn{background:#e74c3c;color:#fff;border:none;padding:15px 30px;border-radius:25px;font-size:16px;font-weight:600;cursor:pointer;transition:background-color .3s ease}
.view-all-btn:hover{background:#c0392b}

/* 套餐区/热门目的地/推广/页脚（原样保留，略） */
.package-deals{padding:80px 0;background:#f8f9fa}

/* 定制旅游区域样式 */
.custom-travel {
    padding: 80px 0;
    background: #fff;
}

.custom-travel .section-title {
    text-align: center;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 50px;
    font-weight: 700;
}

/* 定制旅游服务流程 */
.custom-travel-process {
    margin-bottom: 80px;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.process-step {
    background: #f8f9fa;
    padding: 30px 20px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    position: relative;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.process-step:hover {
    transform: translateY(-3px);
    border-color: #007bff;
    box-shadow: 0 5px 20px rgba(0, 123, 255, 0.15);
}

.step-number {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #007bff;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

.process-step h3 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 12px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    position: absolute;
    top: 15px;
    left: 20px;
    text-align: left;
}

.process-step p {
    color: #666;
    line-height: 1.4;
    font-size: 0.9rem;
    margin: 0;
}

/* 旅行偏好表单 */
.travel-preferences {
    margin-bottom: 80px;
    background: #f8f9fa;
    padding: 50px;
    border-radius: 20px;
}

.preferences-form {
    max-width: 800px;
    margin: 0 auto;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 25px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.form-group select,
.form-group input,
.form-group textarea {
    padding: 12px 16px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    background: white;
}

.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.mobile-input {
    display: flex;
    gap: 10px;
}

.country-selector {
    width: 220px;
    flex-shrink: 0;
    padding: 12px 15px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    font-size: 16px;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* 为不同国家添加颜色标识 */
.country-selector option[data-country="CN"] { background: linear-gradient(90deg, #ff0000 0%, #ffff00 100%); }
.country-selector option[data-country="HK"] { background: linear-gradient(90deg, #ff0000 0%, #ffffff 100%); }
.country-selector option[data-country="MO"] { background: linear-gradient(90deg, #008000 0%, #ffff00 100%); }
.country-selector option[data-country="TW"] { background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%); }
.country-selector option[data-country="US"] { background: linear-gradient(90deg, #ff0000 0%, #ffffff 50%, #0000ff 100%); }
.country-selector option[data-country="GB"] { background: linear-gradient(90deg, #ff0000 0%, #ffffff 50%, #0000ff 100%); }
.country-selector option[data-country="JP"] { background: linear-gradient(90deg, #ffffff 0%, #ff0000 100%); }
.country-selector option[data-country="KR"] { background: linear-gradient(90deg, #ffffff 0%, #ff0000 50%, #0000ff 100%); }

.country-selector:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.mobile-input input[type="tel"] {
    flex: 1;
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.form-submit {
    text-align: center;
    margin-top: 30px;
}

.submit-btn {
    background: #dc3545;
    color: white;
    border: none;
    padding: 15px 40px;
    font-size: 1.1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
}

.submit-btn:hover {
    background: #c82333;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(220, 53, 69, 0.3);
}

/* 服务详情 */
.service-details {
    background: #f8f9fa;
    padding: 50px;
    border-radius: 20px;
}

.details-content {
    max-width: 900px;
    margin: 0 auto;
}

.details-section {
    margin-bottom: 40px;
}

.details-title {
    font-size: 1.8rem;
    color: #333;
    margin-bottom: 20px;
    font-weight: 700;
    position: relative;
    padding-left: 20px;
}

.details-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 30px;
    background: #ff6b35;
    border-radius: 3px;
}

.details-subtitle {
    font-size: 1.3rem;
    color: #555;
    margin-bottom: 15px;
    font-weight: 600;
}

.details-list,
.refund-list {
    padding-left: 20px;
    line-height: 1.8;
    color: #666;
}

.details-list li,
.refund-list li {
    margin-bottom: 12px;
}

.refund-note {
    color: #888;
    font-style: italic;
    margin-bottom: 15px;
}

.refund-list strong {
    color: #333;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .process-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }
}

@media (max-width: 900px) {
    .process-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .custom-travel .section-title {
        font-size: 2rem;
        margin-bottom: 30px;
    }
    
    .process-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .process-step {
        min-height: 140px;
        padding: 25px 15px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .travel-preferences,
    .service-details {
        padding: 30px 20px;
    }
    
    .mobile-input {
        flex-direction: column;
        gap: 10px;
    }
    
    .country-code {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .process-step {
        padding: 20px 12px;
        min-height: 120px;
    }
    
    .process-step h3 {
        font-size: 0.9rem;
    }
    
    .process-step p {
        font-size: 0.8rem;
    }
}

/* ====== Custom Travel Process – 新外观覆盖 ====== */
.process-grid{
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.process-step{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px 24px 22px;
  text-align: left;                 /* 左对齐，和参考图一致 */
  min-height: 120px;
  box-shadow: 0 6px 16px rgba(17,24,39,.06);
  transition: .2s ease;
}
.process-step:hover{
  border-color: #d1d5db;
  box-shadow: 0 10px 24px rgba(17,24,39,.1);
  transform: translateY(-2px);
}

/* 顶部左侧的小步骤徽标（替代原来居中的圆点） */
.step-number{
  position: absolute;
  top: 12px; left: 12px;
  transform: none;
  padding: 2px 8px;
  height: auto; width: auto;
  border-radius: 999px;
  background: #eef2ff;
  color: #4f46e5;
  font-weight: 700;
  font-size: 12px;
  box-shadow: none;
}

/* 右上角图标已删除 */

.process-step h3{
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  position: absolute;
  top: 15px;
  left: 20px;
  text-align: left;
}
.process-step p{
  color: #6b7280;
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
  margin-top: 50px;
  text-align: left;
  padding: 0 20px;
}

/* 让某些步骤横跨多列（这里用于步骤7） */
.process-step.span-2{ grid-column: span 2; }

/* 响应式：中屏两列，小屏一列 */
@media (max-width: 1024px){
  .process-grid{ grid-template-columns: repeat(2, 1fr); }
  .process-step.span-2{ grid-column: span 2; }
}
@media (max-width: 640px){
  .process-grid{ grid-template-columns: 1fr; }
}
.destination-tabs{display:flex;justify-content:center;gap:10px;margin-bottom:40px}
.dest-tab{padding:12px 24px;border:2px solid #ddd;background:#fff;color:#666;border-radius:25px;cursor:pointer;transition:all .3s ease;font-weight:500}
.dest-tab.active,.dest-tab:hover{border-color:#d63031;background:#d63031;color:#fff}
.packages-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:30px;margin-bottom:40px}
.package-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,.1);transition:transform .3s ease}
.package-card:hover{transform:translateY(-5px)}
.package-image{position:relative}
.package-image img{width:100%;height:200px;object-fit:cover}
.package-badge{position:absolute;top:10px;right:10px;padding:5px 15px;border-radius:15px;font-size:12px;font-weight:600;color:#fff}
.package-badge.vip{background:#ffd700;color:#333}
.package-badge.new{background:#28a745}
.package-content{padding:20px}
.package-rating{display:flex;align-items:center;gap:10px;margin-bottom:15px}
.stars{color:#ffd700;font-size:16px}
.package-title{font-size:18px;margin-bottom:10px;color:#333}
.package-route{color:#666;margin-bottom:15px}
.package-price{display:flex;align-items:center;gap:15px;margin-bottom:15px}
.package-price .original-price{color:#999;text-decoration:line-through;font-size:18px}
.package-price .current-price{font-size:24px;font-weight:600;color:#0071c2}
.savings{background:#28a745;color:#fff;padding:5px 10px;border-radius:15px;font-size:12px;font-weight:600}
.package-dates,.package-time{color:#666;margin-bottom:5px;font-size:14px}
.package-btn{width:100%;background:#c44569;color:#fff;border:none;padding:15px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:background-color .3s ease;margin-top:15px}
.package-btn:hover{background:#a55c5c}
.more-info{text-align:center}
.more-info a{color:#0071c2;text-decoration:none;font-weight:600}
.more-info a:hover{text-decoration:underline}

.popular-destinations{padding:80px 0}
.destinations-carousel{position:relative}
.destinations-container{display:flex;gap:20px;overflow-x:auto;scroll-behavior:smooth;padding:20px 0}
.destination-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,.1);min-width:250px;transition:transform .3s ease}
.destination-card:hover{transform:translateY(-5px)}
.destination-image img{width:100%;height:150px;object-fit:cover}
.destination-content{padding:20px;text-align:center}
.destination-content h3{font-size:18px;margin-bottom:5px;color:#333}
.destination-content p{color:#666;margin-bottom:10px}
.avg-price{color:#0071c2;font-weight:600;font-size:14px}

.onekey-promo{padding:80px 0;background:#f8f9fa}
.promo-content{display:flex;align-items:center;gap:40px;max-width:800px;margin:0 auto}
.promo-image{position:relative;flex:1}
.promo-image img{width:100%;height:300px;object-fit:cover;border-radius:12px}
.key-card{position:absolute;top:20px;right:20px;width:60px;height:40px;background:#ffd700;border-radius:8px;transform:rotate(15deg)}
.promo-text{flex:1}
.promo-text h3{font-size:28px;margin-bottom:15px;color:#333}
.promo-text p{color:#666;margin-bottom:20px;line-height:1.6}
.promo-text i{font-size:24px;color:#0071c2}

.disclaimer{background:#f8f9fa;padding:20px 0;text-align:center}
.disclaimer p{color:#666;font-size:14px;max-width:800px;margin:0 auto}

/* 页脚样式 */
.footer {
    background: #f8f9fa;
    padding: 50px 0 30px;
    border-top: 1px solid #e9ecef;
}

/* 移动端页脚额外间距，避免被CTA遮挡 */
@media (max-width: 768px) {
    .footer {
        padding-bottom: 100px; /* 为WhatsApp CTA预留更多空间 */
    }
}

@media (max-width: 480px) {
    .footer {
        padding-bottom: 90px; /* 为WhatsApp CTA预留更多空间 */
    }
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
}

.footer-column h4 {
    color: #212529;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column ul li {
    margin-bottom: 12px;
}

.footer-column ul li a {
    color: #6c757d;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-column ul li a:hover {
    color: #dc3545;
}

/* 社交媒体图标样式 */
.social-media {
    margin-top: 10px;
}

.social-icons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    max-width: 150px;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.social-icon:hover {
    transform: scale(1.1);
}

.social-icon i {
    font-size: 18px;
    color: white;
}

/* 社交媒体图标颜色 */
.social-icon.tiktok {
    background: linear-gradient(45deg, #ff0050, #00f2ea, #ff0050);
}

.social-icon.instagram {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

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


/* 设置模态框 */
.settings-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:3500;justify-content:center;align-items:center}
.modal-content{background:#fff;border-radius:12px;max-width:500px;width:90%;max-height:90vh;overflow-y:auto}
.modal-header{padding:20px;border-bottom:1px solid #eee}
.close-btn{background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:10px;font-size:16px;color:#666}
.close-btn:hover{color:#333}
.modal-warning{display:flex;gap:15px;padding:20px;background:#fff3cd;border:1px solid #ffeaa7;border-radius:8px;margin:20px}
.warning-icon{color:#856404;font-size:24px}
.warning-text p{margin-bottom:5px}
.warning-main{font-weight:600;color:#856404}
.warning-sub{color:#856404;font-size:14px}
.modal-form{padding:20px}
.form-group{margin-bottom:20px}
.form-group label{display:block;margin-bottom:8px;font-weight:600;color:#333}
.select-wrapper{position:relative}
.select-wrapper select{width:100%;padding:12px 40px 12px 15px;border:2px solid #ddd;border-radius:8px;font-size:16px;appearance:none;background:#fff}
.select-wrapper i{position:absolute;right:15px;top:50%;transform:translateY(-50%);color:#666;pointer-events:none}
.save-btn{width:100%;padding:15px;background:#d63031;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:background-color .3s ease}
.save-btn:hover{background:#b71540}



/* 响应式 */
@media (max-width:768px){
  .header-content{flex-direction:column;gap:20px}
  .header-right{flex-wrap:wrap;justify-content:center}
  .hero-title{font-size:36px}
  .features-grid{grid-template-columns:1fr}
  .packages-container{grid-template-columns:1fr}
  .promo-content{flex-direction:column;text-align:center}
  .carousel-btn{display:none}


  .deals-container,.destinations-container{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .deals-container::-webkit-scrollbar,.destinations-container::-webkit-scrollbar{display:none}

  .date-picker-modal{width:min(95vw,820px);max-width:95vw;max-height:min(72vh,540px)}
  .calendar-container{gap:50px;flex-direction:column;align-items:center}
  .calendar{min-width:320px;max-width:380px}
  .month-display{gap:50px;flex-direction:column;align-items:center}
  .flexibility-buttons{gap:10px;justify-content:center}
  .flex-btn{min-width:90px;padding:10px 16px;font-size:13px}

  .footer-content {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .footer-column:last-child {
    grid-column: span 2;
    text-align: center;
  }
  
  .social-icons {
    justify-content: center;
    margin: 0 auto;
  }
}
@media (max-width:480px){
  .container{padding:0 15px}
  .hero{height:350px}
  .hero-title{font-size:28px}
  .search-form{padding:20px}
  .feature-card{padding:20px}
  .deal-card,.package-card,.destination-card{min-width:250px}

  .date-picker-modal{width:95vw;padding:10px;max-height:min(70vh,520px)}
  .date-picker-content{padding:15px;min-height:400px}
  .calendar{min-width:280px;max-width:320px}
  .calendar td{min-width:35px;height:35px;line-height:35px;font-size:13px}
  .calendar th{padding:12px 6px;font-size:12px}
  .flexibility-buttons{flex-direction:column;align-items:center}
  .flex-btn{width:130px;margin-bottom:8px}

  .footer-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .footer-column:last-child {
    grid-column: span 1;
  }
  
  .social-icons {
    grid-template-columns: repeat(3, 1fr);
    max-width: 150px;
  }
}

/* 打开任意模态时可以给 body 增加该类名以禁滚 */
body.modal-open{overflow:hidden}

/* === 放在 styles.css 最底部：日期弹层与日历最终修复样式 === */

/* 让搜索区的弹层永远盖在最上层 */
.search-form { position: relative; z-index: 1100; }
.destination-dropdown,
.date-picker-modal,
.travelers-modal { z-index: 3000; }

/* 日期弹层：改为固定定位并居中显示，宽高/阴影与官方风格接近 */
.date-picker-modal{
  position: fixed;
  left: 50%;
  top: clamp(80px, 12vh, 140px);
  transform: translateX(-50%);
  display: none;
  width: min(940px, 95vw);
  max-height: min(76vh, 560px);
  overflow: auto;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #ddd;
  box-shadow: 0 18px 48px rgba(0,0,0,.22);
}
.date-picker-modal.show{ display:block; }
/* 忽略 JS 里加的对齐 class，始终居中 */
.date-picker-modal.align-right{ left:50%; transform:translateX(-50%); }
.date-picker-modal.open-up{ top: clamp(48px, 10vh, 120px); }

/* 头部与标签 */
.date-picker-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:16px 24px; border-bottom:1px solid #eee;
}
.date-tabs{ display:flex; gap:12px; }
.date-tab{
  background:none; border:none; padding:8px 12px;
  border-bottom:2px solid transparent; cursor:pointer; color:#666; font-size:14px;
}
.date-tab.active{ color:#1a73e8; border-bottom-color:#1a73e8; }
.selected-date-range{ color:#1b1e28; font-weight:600; }

/* 月份导航行 */
.month-navigation{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; border-bottom:1px solid #eee;
}
.month-display{ display:flex; gap:56px; font-weight:700; color:#1b1e28; }
.month-nav{
  width:36px; height:36px; border-radius:50%; border:none;
  background:#f4f6f8; display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}

/* 双月日历网格 —— 关键：保证单元格尺寸与数字可见 */
.calendar-container{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  padding:16px 24px 8px;
}
.calendar{ padding:0 8px 20px; }
.calendar table{
  width:100%; border-collapse:separate; border-spacing:4px; table-layout:fixed;
}
.calendar th{
  font-weight:600; color:#667085; font-size:12px; padding:6px 0; text-align:center;
}
.calendar td{
  width:40px; height:40px; line-height:40px; text-align:center;
  border-radius:50%; cursor:pointer; position:relative; vertical-align:middle;
  font-size:14px; color:#1b1e28; background:transparent;
}
.calendar td.disabled,
.calendar td.past{ color:#c2c7d0; cursor:not-allowed; }
.calendar td.in-range{ background:#eef4ff; }
.calendar td.selected{ background:#1a73e8; color:#fff; }
.calendar td.center-date{ outline:2px dashed #1a73e8; outline-offset:2px; }
.calendar td:hover:not(.disabled):not(.past){ background:#f0f6ff; }

/* 灵活日期区（chips） */
.date-flexibility{ display:none; padding:0 24px 16px; }
.flexibility-buttons{ display:flex; gap:8px; flex-wrap:wrap; }
.flex-btn{
  padding:8px 12px; border-radius:20px; border:1px solid #d0d5dd;
  background:#fff; cursor:pointer;
}
.flex-btn.active{ background:#ffe6e6; border-color:#e74c3c; }

/* 底部"完成"按钮 */
.date-picker-footer{
  display:flex; justify-content:flex-end; padding:16px 24px; border-top:1px solid #eee;
}
.done-btn{
  padding:10px 18px; border-radius:8px; background:#1a73e8;
  color:#fff; border:none; cursor:pointer;
}

/* —— 目的地下拉面板 —— */
.destination-group { position: relative; }

/* 面板容器 */
.destination-dropdown {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  width: 420px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 48px rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.08);
  display: none;
  z-index: 3100; /* 比日期控件略高，避免被遮住 */
}
.destination-dropdown.show { display: block; }

/* 面板内边距和结构 */
.dest-panel { padding: 20px 0 6px; }
.dest-header { padding: 0 20px 8px; }
.dest-title {
  font-size: 22px;
  font-weight: 800;
  color: #364152;
  letter-spacing: .2px;
}

.dest-section-title {
  padding: 8px 20px;
  font-size: 12px;
  color: #6b7280;
  letter-spacing: .4px;
}

/* 列表与行 */
.dest-list { padding: 0 8px; max-height: 420px; overflow: auto; }
.dest-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 10px;
}
.dest-item:focus { outline: 2px solid #2563eb22; }
.dest-item:hover { background: #eef4ff; }
.dest-item:active { background: #e6efff; }

/* 左侧：图标 + 文案 */
.dest-left { display: flex; align-items: center; gap: 12px; }
.location-icon {
  width: 34px; height: 34px; line-height: 34px;
  text-align: center;
  border-radius: 50%;
  background: #f3f4f6;
  color: #4b5563;
  font-size: 14px;
}

/* 文案排版 */
.dest-info { display: flex; flex-direction: column; align-items: flex-start; }
.dest-info .city {
  font-size: 15px; font-weight: 700; color: #111827;
}
.dest-info .region {
  font-size: 12px; color: #6b7280; margin-top: 2px;
}

/* 右侧箭头 */
.arrow-icon { color: #9ca3af; font-size: 12px; }

/* 详细目的地视图里的返回按钮 */
.destination-dropdown .back-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid #e5e7eb;
  background: #fff; color: #374151; cursor: pointer; margin-right: 8px;
}
.destination-dropdown .back-btn:hover { background: #f9fafb; }
.destination-dropdown .dropdown-header {
  display: flex; align-items: center; gap: 8px; padding: 8px 20px 0;
}
.destination-dropdown .dropdown-header h4 {
  margin: 0; font-size: 16px; font-weight: 700; color: #111827;
}

/* 默认：航班三块隐藏；停留的"去哪儿？"显示 */
.from-group,
.to-group,
.swap-btn { display: none; }

/* 切到航班模式：显示起/终点/交换，隐藏"去哪儿？" */
.search-form.mode-flights .from-group,
.search-form.mode-flights .to-group,
.search-form.mode-flights .swap-btn { display: flex; }

.search-form.mode-flights .destination-group { display: none; }

/* 航班模式下网格列宽（离开 | 交换 | 去 | 日期 | 人数） */
.search-form.mode-flights .search-inputs {
  display: grid !important;
  grid-template-columns: 1.2fr auto 1.2fr 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}

/* 交换按钮长相（可选美化） */
.swap-btn{
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid #e6e6e6;
  background: #fff;
  cursor: pointer;
}
.swap-btn i{ font-size: 16px; }

/* ===== 覆盖层级 & 弹层定位：把这段粘到 styles.css 最后 ===== */

/* 让搜索卡片有更高层级，避免被页面其它东西压住 */
.search-form {
  position: relative;
  z-index: 1100;
}

/* 三个弹层都要在最上面 */
.destination-dropdown,
.date-picker-modal,
.travelers-modal {
  z-index: 3000;
}

/* 日期弹层：改为固定定位，水平居中，限定宽高并允许滚动 */
.date-picker-modal {
  position: fixed;                /* 用窗口坐标定位，便于跟随滚动 */
  left: 0; top: 0;                /* 具体坐标由 JS 动态计算 */
  transform: none;
  display: none;
  width: 760px;                   /* 你可以改成 640~940 之间 */
  max-width: min(95vw, 940px);
  max-height: min(76vh, 560px);
  overflow: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,.22);
  border: 1px solid #e6e6e6;
  z-index: 3000;
}

/* 打开状态 */
.date-picker-modal.show {
  display: block;
}

/* 打开弹层时禁止页面滚动（JS 会给 body 加这个类） */
body.modal-open {
  overflow: hidden;
}

/* ====== Tab -> Panel 切换的核心样式 ====== */
.search-panels { margin-top: 12px; }
.search-panel { display: none; }
.search-panel.active { display: block; }

/* 让每个视图里的输入区用网格排版（默认三列+一个按钮位） */
.search-panel .search-inputs {
  display: grid;
  gap: 12px;
  align-items: center;
  grid-template-columns: 1fr 1fr 1fr auto; /* 默认：3列输入 + 1列按钮 */
}

/* 航班/汽车等面板切换布局时会由 JS 动态改写 grid-template-columns */
.search-panel .search-btn {
  height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  border: none;
  color: #fff;
  background: #8b0000;
  cursor: pointer;
}

/* 中间"交换"按钮（航班/包裹用） */
.search-panel .swap-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid #e5e7eb;
  background: #fff;
}

/* 让"子标签"（往返/单程/多城市等）横排 */
.search-subtabs {
  display: flex; gap: 8px; margin-bottom: 10px;
}
.search-subtabs .subtab {
  padding: 6px 12px; border-radius: 20px; border: 1px solid #e5e7eb; background: #fff; cursor: pointer;
}
.search-subtabs .subtab.active { border-color: #e74c3c; color: #e74c3c; }

/* 目的地下拉：容器要相对定位，面板固定宽度+阴影，并且默认隐藏 */
.search-panel .destination-group { position: relative; }

.search-panel .destination-dropdown {
  position: absolute;
  left: 0;
  top: 52px;               /* 与输入框的距离 */
  width: min(440px, 92vw); /* 和官方一样略宽一点 */
  max-height: 60vh;
  overflow: auto;
  display: none;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,.22);
  border: 1px solid rgba(0,0,0,.06);
  z-index: 3000;           /* 确保在最上层 */
}

.search-panel .destination-dropdown.show { display: block; }

/* 列表样式（可选，若你已有类似样式可不加） */
.destination-dropdown .destination-list { padding: 6px 8px; }
.destination-dropdown .destination-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; cursor:pointer;
}
.destination-dropdown .destination-item:hover{ background:#f5f7fb; }
.destination-dropdown .destination-info .city{ font-weight:600; }
.destination-dropdown .destination-info .region{ color:#667085; font-size:12px; }

/* === Date dropdown anchored below input === */
.search-form { position: relative; z-index: 1100; }

.date-picker-modal {
  position: fixed;                /* 用窗口坐标定位，便于跟随滚动 */
  left: 0; top: 0;                /* 具体坐标由 JS 动态计算 */
  transform: none;
  display: none;
  width: 760px;                   /* 你可以改成 640~940 之间 */
  max-width: min(95vw, 940px);
  max-height: min(76vh, 560px);
  overflow: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,.22);
  border: 1px solid #e6e6e6;
  z-index: 3000;
}

.date-picker-modal.show { display: block; }

/* 关闭/禁用全屏遮罩（我们改成下拉，不再需要遮罩） */
.date-picker-overlay { display: none !important; }

/* === 让搜索表单成为定位上下文，并把弹层压在最上层 === */
.search-form {
  position: relative;
  z-index: 1100;
}

/* 所有下拉弹层堆叠层级统一拉高 */
.destination-dropdown,
.date-picker-modal,
.travelers-modal {
  z-index: 3000;
}

/* === 让日期弹层像下拉框一样定位在输入框下方 === */
.date-picker-modal {
  position: fixed;             /* 关键：改成固定定位，按视口坐标放到输入框下方 */
  display: none;
  left: 50%;                   /* 先给一个默认值，真正的位置由 JS 计算 */
  top: 120px;
  transform: translateX(0);
  width: min(940px, 95vw);
  max-height: min(76vh, 560px);
  overflow: auto;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,.22);
}

.date-picker-modal.show { display: block; }

/* 避免全屏遮罩影响点击（我们已不用它做日期弹层的背景） */
.date-picker-overlay { display: none !important; }

/* === "旅行者"弹层也做成跟随输入框的下拉 === */
.travelers-modal {
  position: fixed;             /* 关键 */
  display: none;
  left: 50%;
  top: 120px;
  width: min(720px, 95vw);
  max-height: min(70vh, 520px);
  overflow: auto;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,.22);
  padding: 14px 16px;
}

.travelers-modal.show { display: block; }

/* —— 下拉弹层统一覆盖样式（请放在 styles.css 最底部） —— */

/* 让搜索卡片与弹层层级在最上面 */
.search-form { position: relative; z-index: 1100; }
.destination-dropdown, .date-picker-modal, .travelers-modal { z-index: 3000; }

/* 日期弹层：固定定位，由 JS 计算 left/top，禁止任何居中位移 */
.date-picker-modal{
  position: fixed;
  display: none;
  left: 0; top: 0;                 /* 具体位置 JS 会改 */
  transform: none !important;      /* 彻底取消 translateX(-50%) 等 */
  width: min(940px, 95vw);
  max-height: min(76vh, 560px);
  overflow: auto;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,.22);
}
.date-picker-modal.show { display:block; }

/* 旅行者弹层：同理 */
.travelers-modal{
  position: fixed;
  display: none;
  left: 0; top: 0;                 /* 具体位置 JS 会改 */
  transform: none !important;
  width: min(720px, 95vw);
  max-height: min(70vh, 520px);
  overflow: auto;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,.22);
  padding: 14px 16px;
}
.travelers-modal.show { display:block; }

/* 我们做成下拉了，不再需要全屏遮罩 */
.date-picker-overlay { display: none !important; }

/* 统一禁止任何 translate 位移，避免"斜上方出现" */
.destination-dropdown,
.travelers-modal,
.date-picker-modal {
  transform: none !important;
}

/* 如果需要过渡，只保留透明度（可选） */
.destination-dropdown,
.travelers-modal {
  transition: opacity .18s ease, visibility .18s ease;
}

/* 航班面板下方复选框在白底上更清晰 */
.search-panel[data-panel="flights"] .checkbox-label { color:#374151; }
.search-panel[data-panel="flights"] .checkbox-label .checkmark {
  border-color:#d1d5db;
}

/* 航班：离开 | 交换 | 去 | 日期 | 旅行者 | 搜索 */
.search-panel[data-panel="flights"] .search-inputs{
  display:grid;
  grid-template-columns: 1.15fr auto 1.15fr 1fr 1fr auto;
  gap:12px;
  align-items:center;
}

/* 航班子视图切换 */
.flights-view { display:none; }
.flights-view.active { display:block; }

/* 单向布局与往返一致（离开 | 交换 | 去 | 日期 | 旅行者 | 搜索） */
.flights-view.oneway .search-inputs{
  display:grid;
  grid-template-columns: 1.15fr auto 1.15fr 1fr 1fr auto;
  gap:12px;
  align-items:center;
}

/* 多城市：头部"旅行者" + 多行航段 */
.flights-view.multicity .multicity-head{ max-width:360px; margin-bottom:10px; }
.multi-list{ display:flex; flex-direction:column; gap:16px; }
.segment-title{ margin:6px 0 8px; color:#374151; font-weight:600; }
.flight-row{
  display:grid;
  grid-template-columns: 1.2fr auto 1.2fr 1fr; /* 离开 | 交换 | 去 | 日期 */
  gap:12px; align-items:center;
}
.flight-row .swap-btn{
  width:40px; height:40px; border-radius:999px;
  display:grid; place-items:center;
  border:1px solid #e5e7eb; background:#fff;
}
.add-seg-btn{
  margin-top:10px; background:none; border:none; color:#0a63e8;
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; padding:6px 0;
}
.search-row{ display:flex; justify-content:flex-end; margin-top:8px; }

/* 通用：当前你的航班网格与按钮样式保持一致，不覆盖现有规则 */

/* ====== 汽车-租车 时间下拉：浮动标签样式 ====== */
.input-group.time-field{
  position: relative;
  display: block;              /* 不走原来 input-group 的横向布局 */
  width: 100%;
  border: 1px solid #d7dbe0;
  border-radius: 10px;
  background: #fff;
  padding: 18px 40px 10px 14px; /* 上给标签留位置；右给箭头留位置 */
  transition: border-color .15s ease, box-shadow .15s ease;
}

.input-group.time-field:focus-within{
  border-color: #1a73e8;
  box-shadow: 0 0 0 3px rgba(26,115,232,.15);  /* 细腻的蓝色高亮边 */
}

/* 小标题（浮动标签） */
.input-group.time-field .input-label{
  position: absolute;
  top: 6px;
  left: 14px;
  font-size: 12px;
  line-height: 1;
  color: #6b7280;             /* 灰色 */
  pointer-events: none;
}

/* 下拉本体：隐藏系统箭头，字号更大，内容在标签下方一行显示 */
.input-group.time-field .time-select{
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 16px;
  line-height: 24px;
  padding: 8px 0 0;           /* 让文本刚好在标签下 */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* 自定义箭头 */
.input-group.time-field .caret{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-10%); /* 稍偏上，和示例图一样 */
  color: #6b7280;
  pointer-events: none;
  font-size: 12px;
}/* 兼容：隐藏 IE 的默认箭头 */
.input-group.time-field select::-ms-expand{ display:none; }




/* 卡片基础保持弹性布局，让按钮能固定在底部 */
.feature-card{
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 260px;          /* 你也可以改成 height:240px; 或 aspect-ratio:16/9; */
  border-radius: 16px;
  overflow: hidden;
}

/* 图片 + 顶层黑色遮罩（自上而下） */
.feature-card.has-cover{
  color:#fff; /* 文字白色 */
  background:
    linear-gradient(180deg,           /* 180deg = 从上到下 */
      rgba(0,0,0,.45) 0%,            /* 顶部更深 */
      rgba(0,0,0,.20) 50%,           /* 中间稍浅 */
      rgba(0,0,0,.0) 100%),         /* 底部再深一点（可按需） */
    var(--cover, url('../assets/images/1.jpg'));
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}


/* 按钮固定在卡片底部，不随文字高低而移动 */
.features .feature-card .feature-btn{
  margin-top: auto;        /* 关键 */
  align-self: center;      /* 居中，按需改成 flex-start */
}

/* 让"有封面图"的卡片文字变白 */
.feature-card.has-cover,
.feature-card.has-cover h3,
.feature-card.has-cover p{
  color: #fff;
}

/* 调整图标与文字的水平间距 */
.input-group i{
  /* 图标左右内边距，右侧就是图标与文字的间隔 */
  padding: 0 20px;   /* 原来是 0 15px，可以试 18px/20px/24px */
}

/* 也可以给输入框一点左内边距，让文字再离图标远一点 */
.input-group input{
  padding-left: 8px; /* 原来是 0，可按需改成 6/8/12px */
}

/* 让头部和下拉永远盖在英雄图上 */
.header{ z-index: 5000 !important; }          /* 头部整体抬高 */
.dropdown-menu{ z-index: 5100 !important; }   /* 下拉再高一点，确保浮在最上面 */

/* ============ Promo Slider ============ */
.promo-slider{position:relative;margin:24px 0;}
.promo-slider .ps-viewport{overflow:hidden;border-radius:12px;}
.promo-slider .ps-track{display:flex;transition:transform .5s ease;}
.promo-slider .ps-page{min-width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:8px;}
/* 卡片 */
.promo-card{position:relative;display:block;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.08);background:#000;}
.promo-card img{width:100%;height:180px;object-fit:cover;display:block;filter:saturate(1.05);}
.promo-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0.35) 0%,rgba(0,0,0,0.45) 40%,rgba(0,0,0,0.55) 100%);
  pointer-events:none;
}
.promo-card-ct{position:absolute;left:16px;bottom:16px;right:16px;color:#fff;z-index:1}
.promo-card-ct h4{margin:0 0 4px;font-size:18px;font-weight:700}
.promo-card-ct p{margin:0 0 10px;opacity:.9}
.promo-ghost-btn{
  display:inline-block;padding:8px 16px;border-radius:999px;
  border:1.5px solid rgba(255,255,255,.85);color:#fff;font-size:14px;
  backdrop-filter:saturate(140%) blur(4px);
}
.promo-card:hover .promo-ghost-btn{background:rgba(255,255,255,.1)}
/* 按钮 */
.promo-slider .ps-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
  background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.18);color:#333;display:grid;place-items:center;
}
.promo-slider .ps-btn.prev{left:-12px}
.promo-slider .ps-btn.next{right:-12px}
.promo-slider .ps-btn:disabled{opacity:.4;cursor:default}
/* 圆点 */
.promo-slider .ps-dots{display:flex;gap:8px;justify-content:center;margin-top:12px}
.promo-slider .ps-dots button{
  width:8px;height:8px;border-radius:50%;border:none;background:#d6d8dc;cursor:pointer
}
.promo-slider .ps-dots button.active{background:#2d6cdf}

/* 响应式 */
@media (max-width: 900px){
  .promo-slider .ps-page{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 560px){
  .promo-slider .ps-page{grid-template-columns:1fr}
  .promo-card img{height:160px}
}

/* 目的地 - 只是展示，不带交互 */
.nav-destination{
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 5px;
  transition: all .3s ease;
}
.nav-destination:hover{
  background-color: transparent;
}
.nav-destination span{
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

/* 悬停"轻微跳动"动效 */
.hover-lift:hover{
  animation:hover-bounce .35s ease-out forwards;
  box-shadow:0 14px 28px rgba(0,0,0,.12);
}
@keyframes hover-bounce{
  0%   { transform:translateY(0); }
  55%  { transform:translateY(-9px); }
  100% { transform:translateY(-6px); }
}

/* === 中国最受欢迎的景点 === */
.popular-attractions {
  background: #fff;
  padding: 60px 0;
}

.popular-attractions .section-header {
  text-align: center;
  margin-bottom: 40px;
}

.popular-attractions .section-header h2 {
  font-size: 32px;
  font-weight: 700;
  color: #222;
  margin-bottom: 16px;
}

/* 景点网格布局 */
.attractions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

@media (max-width: 1200px) {
  .attractions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .attractions-grid {
    grid-template-columns: 1fr;
  }
}

/* 景点卡片样式 */
.attraction-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease;
  cursor: pointer;
}

.attraction-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(0,0,0,.12);
}

/* 景点图片 */
.attraction-image {
  position: relative;
  overflow: hidden;
}

.attraction-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.attraction-card:hover .attraction-image img {
  transform: scale(1.05);
}

/* 景点内容 */
.attraction-content {
  padding: 20px;
}

.attraction-title {
  font-size: 20px;
  font-weight: 600;
  color: #222;
  margin-bottom: 12px;
  line-height: 1.3;
}

.attraction-description {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 16px;
  min-height: 42px;
}

/* 查看详细信息链接 */
.attraction-link {
  color: #0a66ff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color .2s ease;
}

.attraction-link:hover {
  color: #0056cc;
  text-decoration: underline;
}

/* 了解更多按钮 */
.learn-more-section {
  text-align: center;
}

.learn-more-btn {
  background: transparent;
  border: 2px solid #e0e0e0;
  color: #666;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s ease;
  text-decoration: none;
  display: inline-block;
}

.learn-more-btn:hover {
  border-color: #0a66ff;
  color: #0a66ff;
  background: rgba(10, 102, 255, 0.05);
}


  font-size:14px;outline: none; transition: all .15s ease;
}
.login-modal .input-group input:focus{
  border-color:#ff6b6b; box-shadow:0 0 0 4px rgba(255,107,107,.12);
}

/* 主按钮（继续） */
.login-modal .continue-btn{
  display: inline-block;
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 12px;
  background: #ff5945;
  color: #fff;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
  margin-top: 10px;
  transition: filter .15s ease, transform .02s ease;
  font-size: 16px;
}
.login-modal .continue-btn:hover{ filter: brightness(.96); }
.login-modal .continue-btn:active{ transform: scale(.996); }

/* 分隔线 */
.login-modal .divider{
  position: relative;
  text-align: center;
  margin: 24px 0 20px;
  color: #9ca3af;
  font-size: 14px;
}

.login-modal .divider::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: #e5e7eb;
}

.login-modal .divider span{
  background: #fff;
  padding: 0 18px;
  position: relative;
  z-index: 1;
}

/* Google 登录按钮 */
.login-modal .google-btn{
  width: 100%;
  height: 48px;
  border-radius: 12px;
  border: 1px solid #d1d5db;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  transition: all .2s ease;
  color: #374151;
  font-weight: 500;
  font-size: 15px;
}

.login-modal .google-btn:hover{
  border-color: #9ca3af;
  background: #f9fafb;
}

.login-modal .google-btn:active{
  transform: scale(0.98);
}

.login-modal .google-icon{
  width: 20px;
  height: 20px;
  background: #4285f4;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

/* 协议 */
.login-modal .terms{
  text-align: center;
  margin-top: 20px;
  color: #9ca3af;
  font-size: 13px;
  line-height: 1.5;
}

/* "更多登录方式"分隔线 */
.login-modal .more-methods{
  display:flex;align-items:center;gap:12px;
  color:#9aa4b2;font-size:12px;margin:16px 0 12px;justify-content:center;
}
.login-modal .more-methods::before,
.login-modal .more-methods::after{
  content:"";flex:1;height:1px;background: #eef1f5;
}

/* === 最受欢迎的城市 === */
.popular-cities {
  background: #fff;
  padding: 80px 0;
}

.popular-cities .section-header {
  text-align: center;
  margin-bottom: 48px;
}

.popular-cities .section-header h2 {
  font-size: 32px;
  font-weight: 700;
  color: #222;
  margin: 0;
}

/* 城市网格布局 */
.cities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

@media (max-width: 1200px) {
  .cities-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .cities-grid {
    grid-template-columns: 1fr;
  }
}

/* 城市卡片样式 */
.city-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

.city-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,.15);
}

/* 城市图片 */
.city-image {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.city-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.city-card:hover .city-image img {
  transform: scale(1.05);
}

/* 城市标签 */
.city-label {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.95);
  color: #222;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

/* 了解更多按钮 */
.popular-cities .learn-more-section {
  text-align: center;
}

.popular-cities .learn-more-btn {
  background: transparent;
  border: 2px solid #e0e0e0;
  color: #222;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s ease;
}

.popular-cities .learn-more-btn:hover {
  border-color: #0a66ff;
  color: #0a66ff;
  background: rgba(10, 102, 255, 0.05);
}

/* 登录/注册模态：强制盖在最顶层 */
.login-modal{
  position: fixed;
  inset: 0;
  display: none;              /* .show 时启用 */
  align-items: center;
  justify-content: center;
  background: rgba(17, 18, 20, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 10050 !important;  /* 原来是 1000，提高到最顶层 */
}
.login-modal.show{ display:flex; }

/* 让背景不可滚动 */
body.modal-open{ overflow:hidden; }

/* 卡片本身也给一个更高层级，防止被有 z-index 的兄弟元素盖住 */
.login-modal .modal-content{
  width: 480px;
  max-width: calc(100% - 32px);
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 20px 40px rgba(0,0,0,.22);
  position: relative;
  z-index: 10060;             /* 比遮罩再高一点 */
  padding: 36px;
  transform: translateY(8px) scale(.98);
  opacity: .0;
  animation: modalIn .22s ease-out forwards;
}
@keyframes modalIn{
  to{ transform: translateY(0) scale(1); opacity: 1; }
}

/* 右上角关闭 */
.login-modal .close-btn{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  display: grid;
  place-items: center;
  color: #7b8190;
  cursor: pointer;
}
.login-modal .close-btn:hover{ background:#f2f3f5; }

/* 顶部头像 + 标题 */
.login-modal .modal-header{
  text-align: center;
  padding-top: 0;
  margin-bottom: 28px;
}
.login-modal .panda-icon{
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #ffedea;
  color: #ff5945;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  font-size: 22px;
}
.login-modal .modal-header h2{
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 700;
  color: #1f2329;
}
.login-modal .modal-header p{
  margin: 0;
  color: #6b7280;
  font-size: 15px;
  line-height: 1.4;
}

/* 表单区 */
.login-modal .modal-body{ 
  margin-top: 28px; 
}

.login-modal .email-login .input-group{
  position: relative;
  margin: 0 0 24px;
  width: 100%;
}

.login-modal .email-login label{
  display: block;
  font-size: 15px;
  color: #374151;
  margin-bottom: 10px;
  font-weight: 500;
}

.login-modal .email-login .input-wrapper{
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.login-modal .email-login .input-wrapper i{
  position: absolute;
  left: 18px;
  color: #9ca3af;
  font-size: 17px;
  pointer-events: none;
  z-index: 2;
}

.login-modal .email-login input[type="email"]{
  width: 100%;
  height: 48px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  padding: 0 18px 0 52px;
  font-size: 15px;
  outline: none;
  transition: all .2s ease;
  background: transparent;
  box-sizing: border-box;
  min-width: 300px;
}

.login-modal .email-login input[type="email"]:focus{
  border-color: #ff5945;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 89, 69, 0.1);
}

.login-modal .email-login input[type="email"]::placeholder{
  color: #9ca3af;
  font-size: 14px;
}

/* 主按钮（继续） */
.login-modal .continue-btn{
  display: inline-block;
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 12px;
  background: #ff5945;
  color: #fff;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
  margin-top: 10px;
  transition: filter .15s ease, transform .02s ease;
  font-size: 16px;
}
.login-modal .continue-btn:hover{ filter: brightness(.96); }
.login-modal .continue-btn:active{ transform: scale(.996); }

/* 分隔线 */
.login-modal .divider{
  position: relative;
  text-align: center;
  margin: 24px 0 20px;
  color: #9ca3af;
  font-size: 14px;
}

.login-modal .divider::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: #e5e7eb;
}

.login-modal .divider span{
  background: #fff;
  padding: 0 18px;
  position: relative;
  z-index: 1;
}

/* Google 登录按钮 */
.login-modal .google-btn{
  width: 100%;
  height: 48px;
  border-radius: 12px;
  border: 1px solid #d1d5db;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  transition: all .2s ease;
  color: #374151;
  font-weight: 500;
  font-size: 15px;
}

.login-modal .google-btn:hover{
  border-color: #9ca3af;
  background: #f9fafb;
}

.login-modal .google-btn:active{
  transform: scale(0.98);
}

.login-modal .google-icon{
  width: 20px;
  height: 20px;
  background: #4285f4;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

/* 协议 */
.login-modal .terms{
  text-align: center;
  margin-top: 20px;
  color: #9ca3af;
  font-size: 13px;
  line-height: 1.5;
}

.login-modal .terms a{ 
  color: #ff5945; 
  text-decoration: none; 
  font-weight: 500;
}

.login-modal .terms a:hover{ 
  text-decoration: underline; 
  color: #e53e3e;
}

/* 登录弹窗里不要外层蓝色高亮 */
.login-modal .input-group,
.login-modal .input-group:focus-within{
  box-shadow: none !important;
  border-color: #e5e7eb !important;   /* 或你现在用的浅灰边色 */
  outline: none !important;
}

/* 输入框自身聚焦也不要默认外描边 */
.login-modal input:focus{
  outline: none !important;
  box-shadow: none !important;
}

/* 关于我们链接的悬停样式 */
.nav-destination a {
    text-decoration: none;
    color: inherit;
    transition: color .3s ease;
}

.nav-destination a:hover {
    color: #dc3545 !important;
}

/* 强制覆盖，确保悬停效果生效 */
.header .nav-destination a:hover,
body .header .nav-destination a:hover {
    color: #dc3545 !important;
}

/* 确保输入框在所有情况下都有一致的大小 */
.login-modal .input-group,
.login-modal .input-group:focus-within{
  box-shadow: none !important;
  border-color: #e5e7eb !important;
  outline: none !important;
  width: 100%;
}

/* 输入框自身聚焦也不要默认外描边 */
.login-modal input:focus{
  outline: none !important;
  box-shadow: none !important;
}

/* 响应式设计 - 确保在小屏幕上输入框也有合适的大小 */
@media (max-width: 480px) {
  .login-modal .email-login input[type="email"] {
    min-width: 250px;
    width: 100%;
  }
  
  .login-modal .modal-content {
    padding: 24px;
    margin: 20px;
  }
}

/* ===== 胶囊形搜索栏 ===== */
.capsule-search{
  display:flex;
  align-items:center;
  gap:12px;
  background: rgba(255,255,255,.96);
  border-radius:16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  padding:10px;
  width:min(920px,92vw);
  margin:12px auto 24px;
  backdrop-filter: blur(6px);
}
.capsule-search .search-icon{
  margin-left:14px;
  color:#9aa0a6;
  font-size:18px;
}
.capsule-input{
  flex:1;
  height:48px;
  border:0;
  outline:none;
  background:transparent;
  font-size:18px;
  padding:0 12px;
  color:#202431;
}
.capsule-input::placeholder{ color:#9aa0a6; }
.capsule-btn{
  height:48px;
  min-width:132px;
  border:0;
  border-radius:12px;
  cursor:pointer;
  font-weight:600;
  color:#fff;
  background:linear-gradient(180deg,#ff8615,#ff5c00);
  box-shadow:0 6px 14px rgba(255,92,0,.35);
}
.capsule-btn:active{ transform: translateY(1px); }

@media (max-width:640px){
  .capsule-search{ width: calc(100vw - 32px); padding:8px; }
  .capsule-input{ height:42px; font-size:16px; }
  .capsule-btn{ min-width:96px; height:42px; font-size:15px; }
}

/* 隐藏原来的卡片式搜索面板（选项卡 + 面板） */
.hero .search-tabs,
.hero .search-panels{
  display:none !important;
}

/* ===== intl-tel-input 组件样式补充 ===== */
/* 这些样式已经在intlTelInput.css中定义，避免重复 */

/* 这些样式已经在intlTelInput.css中定义，避免重复 */

/* 国旗图标样式 - 小巧美观版本 */
.country-selector {
    position: relative;
    padding-left: 32px;
    background-repeat: no-repeat;
    background-position: 6px center;
    background-size: 20px 14px;
    border-radius: 6px;
    border: 1px solid #e1e5e9;
    transition: all 0.2s ease;
}

.country-selector:hover {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.country-selector:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

/* 中国国旗 - 红色背景 + 黄色五角星 */
.country-selector option[data-country="CN"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 14"><rect width="20" height="14" fill="%23DE2910"/><polygon fill="%23FFDE00" points="10,2.5 11.2,5.2 14.2,5.8 12,7.8 12.8,10.8 10,9.2 7.2,10.8 8,7.8 5.8,5.8 8.8,5.2"/></svg>');
}

/* 美国国旗 - 简洁版本 */
.country-selector option[data-country="US"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 14"><rect width="20" height="14" fill="%23B22234"/><rect width="20" height="1" y="0" fill="%23FFFFFF"/><rect width="20" height="1" y="2" fill="%23FFFFFF"/><rect width="20" height="1" y="4" fill="%23FFFFFF"/><rect width="20" height="1" y="6" fill="%23FFFFFF"/><rect width="20" height="1" y="8" fill="%23FFFFFF"/><rect width="20" height="1" y="10" fill="%23FFFFFF"/><rect width="20" height="1" y="12" fill="%23FFFFFF"/><rect width="8" height="7" fill="%23033E9C"/></svg>');
}

/* 英国国旗 - 简化版本 */
.country-selector option[data-country="GB"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 14"><rect width="20" height="14" fill="%23012169"/><rect width="20" height="2" y="6" fill="%23FFFFFF"/><rect width="2" height="14" x="9" fill="%23FFFFFF"/><rect width="20" height="1" y="3" fill="%23C8102E"/><rect width="20" height="1" y="10" fill="%23C8102E"/><rect width="1" height="14" x="6" fill="%23C8102E"/><rect width="1" height="14" x="13" fill="%23C8102E"/></svg>');
}

/* 日本国旗 - 简洁红点 */
.country-selector option[data-country="JP"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 14"><rect width="20" height="14" fill="%23FFFFFF"/><circle cx="10" cy="7" r="3" fill="%23BC002D"/></svg>');
}

/* 韩国国旗 - 简化版本 */
.country-selector option[data-country="KR"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 14"><rect width="20" height="14" fill="%23FFFFFF"/><circle cx="10" cy="7" r="2.5" fill="%23CD2E3A"/><rect width="20" height="1.5" y="6.25" fill="%23003F9C"/><rect width="1.5" height="14" x="9.25" fill="%23003F9C"/></svg>');
}

/* 澳大利亚国旗 - 简化版本 */
.country-selector option[data-country="AU"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 14"><rect width="20" height="14" fill="%23012169"/><rect width="20" height="1.5" y="6.25" fill="%23FFFFFF"/><rect width="1.5" height="14" x="9.25" fill="%23FFFFFF"/><rect width="20" height="0.8" y="3" fill="%23C8102E"/><rect width="20" height="0.8" y="10.2" fill="%23C8102E"/><rect width="0.8" height="14" x="5" fill="%23C8102E"/><rect width="0.8" height="14" x="14.2" fill="%23C8102E"/></svg>');
}

/* 法国国旗 - 三色条纹 */
.country-selector option[data-country="FR"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 14"><rect width="6.7" height="14" fill="%23002B5F"/><rect width="6.6" height="14" x="6.7" fill="%23FFFFFF"/><rect width="6.7" height="14" x="13.3" fill="%23ED2939"/></svg>');
}

/* 德国国旗 - 三色条纹 */
.country-selector option[data-country="DE"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 14"><rect width="20" height="4.7" fill="%23000000"/><rect width="20" height="4.6" y="4.7" fill="%23DD0000"/><rect width="20" height="4.7" y="9.3" fill="%23FFCE00"/></svg>');
}

/* 意大利国旗 - 三色条纹 */
.country-selector option[data-country="IT"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 14"><rect width="6.7" height="14" fill="%23009236"/><rect width="6.6" height="14" x="6.7" fill="%23FFFFFF"/><rect width="6.7" height="14" x="13.3" fill="%23CE2B37"/></svg>');
}

/* 西班牙国旗 - 简化版本 */
.country-selector option[data-country="ES"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 14"><rect width="20" height="14" fill="%23AA151B"/><rect width="20" height="6" y="4" fill="%23F1BF00"/></svg>');
}

/* 印度国旗 - 简化版本 */
.country-selector option[data-country="IN"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 14"><rect width="20" height="4.7" fill="%23FF9933"/><rect width="20" height="4.6" y="4.7" fill="%23FFFFFF"/><rect width="20" height="4.7" y="9.3" fill="%23138708"/><circle cx="10" cy="7" r="1.5" fill="%2300008B"/></svg>');
}

/* 泰国国旗 - 简化条纹 */
.country-selector option[data-country="TH"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 14"><rect width="20" height="2.3" fill="%23A51931"/><rect width="20" height="2.3" y="2.3" fill="%23FFFFFF"/><rect width="20" height="2.2" y="4.6" fill="%23A51931"/><rect width="20" height="2.3" y="6.8" fill="%23FFFFFF"/><rect width="20" height="2.3" y="9.1" fill="%23A51931"/><rect width="20" height="2.2" y="11.4" fill="%23FFFFFF"/><rect width="20" height="2.6" y="13.6" fill="%23A51931"/></svg>');
}

/* 马来西亚国旗 - 简化版本 */
.country-selector option[data-country="MY"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 14"><rect width="20" height="14" fill="%23CC0001"/><rect width="20" height="7" y="0" fill="%23FFFFFF"/><rect width="20" height="7" y="7" fill="%23000000"/></svg>');
}

/* 印度尼西亚国旗 - 简化版本 */
.country-selector option[data-country="ID"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 14"><rect width="20" height="7" fill="%23FFFFFF"/><rect width="20" height="7" y="7" fill="%23CE1126"/></svg>');
}

/* 越南国旗 - 简化版本 */
.country-selector option[data-country="VN"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 14"><rect width="20" height="14" fill="%23DA251D"/><polygon fill="%23FFFF00" points="10,2.5 11.2,5.2 14.2,5.8 12,7.8 12.8,10.8 10,9.2 7.2,10.8 8,7.8 5.8,5.8 8.8,5.2"/></svg>');
}

/* 香港国旗 - 简化版本 */
.country-selector option[data-country="HK"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 14"><rect width="20" height="14" fill="%23DE2910"/><polygon fill="%23FFFFFF" points="10,2.5 11.2,5.2 14.2,5.8 12,7.8 12.8,10.8 10,9.2 7.2,10.8 8,7.8 5.8,5.8 8.8,5.2"/></svg>');
}

/* 澳门国旗 - 简化版本 */
.country-selector option[data-country="MO"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 14"><rect width="20" height="14" fill="%23DE2910"/><polygon fill="%23FFFFFF" points="10,2.5 11.2,5.2 14.2,5.8 12,7.8 12.8,10.8 10,9.2 7.2,10.8 8,7.8 5.8,5.8 8.8,5.2"/></svg>');
}

/* 台湾国旗 - 简化版本 */
.country-selector option[data-country="TW"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 14"><rect width="20" height="14" fill="%23DE2910"/><rect width="20" height="7" y="0" fill="%23000000"/><rect width="20" height="7" y="7" fill="%23000000"/><circle cx="10" cy="7" r="2.5" fill="%23FFFFFF"/></svg>');
}

/* 新加坡国旗 - 简化版本 */
.country-selector option[data-country="SG"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 14"><rect width="20" height="7" fill="%23FFFFFF"/><rect width="20" height="7" y="7" fill="%23ED2939"/><polygon fill="%23FFFFFF" points="10,2.5 11.2,5.2 14.2,5.8 12,7.8 12.8,10.8 10,9.2 7.2,10.8 8,7.8 5.8,5.8 8.8,5.2"/></svg>');
}

/* 加拿大国旗 - 简化版本 */
.country-selector option[data-country="CA"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 14"><rect width="20" height="14" fill="%23FFFFFF"/><rect width="6.7" height="14" x="0" fill="%23FF0000"/><rect width="6.6" height="14" x="13.3" fill="%23FF0000"/><polygon fill="%23FF0000" points="10,2.5 11.2,5.2 14.2,5.8 12,7.8 12.8,10.8 10,9.2 7.2,10.8 8,7.8 5.8,5.8 8.8,5.2"/></svg>');
}

/* 移动端优化 */
@media (max-width: 768px) {
    .country-selector {
        padding-left: 28px;
        background-size: 16px 12px;
        background-position: 5px center;
    }
}

/* intl-tel-input 组件样式 - 已移至intlTelInput.css */

/* intl-tel-input 相关样式已移至intlTelInput.css */

/* ===== intl-tel-input 布局修复样式 ===== */
/* 注释掉旧的样式，使用新的拼接式布局 */

/* --- Phone input (intl-tel-input) 美化与对齐 --- */

.intl-tel-input {
  display: flex;
  align-items: center;
  width: 100%;
}

/* 左边"国家/区号"盒子 */
.intl-tel-input .iti__flag-container {
  position: relative;
  flex: 0 0 auto;
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  background: #fff;

  border: 1px solid #E4E7EC;         /* 与右侧边框同色 */
  border-right: 0;                    /* 与右侧拼接，去掉右边框 */
  border-radius: 8px 0 0 8px;         /* 只保留左侧圆角 */
}

/* 旗帜 + 区号 + 下箭头排版 */
.intl-tel-input .iti__selected-flag {
  display: flex;
  align-items: center;
  gap: 8px;
}

.intl-tel-input .iti__selected-dial-code {
  font-size: 14px;
  color: #1F2937;
}

/* 箭头稍微小一点 */
.intl-tel-input .iti__arrow {
  margin-left: 4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid #6B7280;
}

/* 右边"电话号码"输入框 */
.intl-tel-input input#mobile {
  height: 44px;
  width: 100%;
  border: 1px solid #E4E7EC;
  border-left: 0;                     /* 与左侧拼接，去掉左边框 */
  border-radius: 0 8px 8px 0;         /* 只保留右侧圆角 */
  padding-left: 12px;                 /* 号码从最左处开始，不再额外留出flag位 */
  box-sizing: border-box;
}

/* 获焦效果一致 */
.intl-tel-input input#mobile:focus,
.intl-tel-input .iti__flag-container:focus-within {
  outline: none;
  border-color: #8AB4FF;
  box-shadow: 0 0 0 3px rgba(138, 180, 255, 0.25);
}

/* 下拉面板挂到 body 时的层级与阴影 */
.iti__dropdown-content {
  z-index: 9999;
  border: 1px solid #E4E7EC;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* 覆盖 intlTelInput.css 中的冲突样式，确保我们的新布局生效 */
.intl-tel-input .iti {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.intl-tel-input .iti__flag-container {
  position: relative !important;
  flex: 0 0 auto !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 10px !important;
  background: #fff !important;
  border: 1px solid #E4E7EC !important;
  border-right: 0 !important;
  border-radius: 8px 0 0 8px !important;
  cursor: pointer !important;
  z-index: 10 !important;
  min-width: auto !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
}

.intl-tel-input input[type="tel"] {
  height: 44px !important;
  width: 100% !important;
  border: 1px solid #E4E7EC !important;
  border-left: 0 !important;
  border-radius: 0 8px 8px 0 !important;
  padding-left: 12px !important;
  box-sizing: border-box !important;
  padding-top: 1px !important;
}

/* ===== 动态padding-left方案的基础样式 ===== */
/* 让容器和插件元素定位可用 */
.mobile-input .iti { 
  position: relative; 
  width: 100%; 
}

.mobile-input .iti__flag-container {
  position: absolute;
  left: 12px; 
  top: 0; 
  bottom: 0;
  display: flex; 
  align-items: center;
  z-index: 2; /* 盖在输入文字上方 */
}

/* 旗帜区的小细节，可以保留 */
.mobile-input .iti__selected-flag { 
  padding: 0 6px; 
  background: transparent; 
}

/* 兜底：给一个较大的初始左内边距（防止首屏闪一下） */
#mobile { 
  padding-left: 110px !important; 
  text-indent: 0 !important; 
}

/* WhatsApp CTA 底部按钮样式 */
.whatsapp-cta-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #25D366;
    padding: 15px 20px;
    z-index: 9999;
    display: none;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

/* 为CTA按钮预留空间，避免遮挡内容 */
body.has-whatsapp-cta {
    padding-bottom: 80px;
}

@media (max-width: 768px) {
    body.has-whatsapp-cta {
        padding-bottom: 70px;
    }
}

@media (max-width: 480px) {
    body.has-whatsapp-cta {
        padding-bottom: 60px;
    }
}

.whatsapp-cta-btn {
    width: 100%;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 12px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    border-radius: 8px;
}

.whatsapp-cta-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.whatsapp-cta-btn:active {
    transform: translateY(0);
}

.whatsapp-cta-btn i {
    font-size: 20px;
}

.whatsapp-cta-btn span {
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* 移动端优化 */
@media (max-width: 768px) {
    .whatsapp-cta-bottom {
        padding: 12px 16px;
    }
    
    .whatsapp-cta-btn {
        font-size: 15px;
        padding: 10px 0;
    }
    
    .whatsapp-cta-btn i {
        font-size: 18px;
    }
}

/* 小屏幕优化 */
@media (max-width: 480px) {
    .whatsapp-cta-bottom {
        padding: 10px 12px;
    }
    
    .whatsapp-cta-btn {
        font-size: 14px;
        padding: 8px 0;
    }
    
    .whatsapp-cta-btn i {
        font-size: 16px;
    }
}