*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#f5f5f5;color:#333;}

/* Page fade-in */
@keyframes fadeInUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
.results-main{animation:fadeInUp .7s ease both;}

/* Train card entrance stagger */
@keyframes cardIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.train-card{animation:cardIn .5s ease both;}

/* Spinner keyframes (for fa-spin fallback) */
@keyframes spin{to{transform:rotate(360deg);}}
.fa-spin{animation:spin 1.2s linear infinite;}

/* Select/Book button press feedback */
.select-btn:active,.book-btn:active{transform:scale(.96);transition:transform .1s;}

/* Search button hover lift */
.search-btn{transition:background .2s,box-shadow .2s;}
.search-btn:hover{box-shadow:0 4px 12px rgba(37,99,235,.25);}

/* Loading indicator pulse */
.loading-indicator{font-size:14px;color:#2563eb;text-align:center;padding:24px;animation:fadeInUp .5s ease;}

a{text-decoration:none;color:inherit;}

/* Top Nav */
.top-nav{background:#2563eb;display:flex;align-items:center;padding:0 24px;height:48px;color:#fff;position:sticky;top:0;z-index:100;}
.nav-logo{font-size:22px;font-weight:bold;color:#fff;margin-right:24px;}
.nav-links{display:flex;gap:16px;font-size:13px;flex:1;}
.nav-links a{color:rgba(255,255,255,.8);padding:14px 0;border-bottom:2px solid transparent;}
.nav-links a:hover,.nav-links a.active{color:#fff;border-bottom-color:#fff;}
.nav-more{color:rgba(255,255,255,.6);cursor:pointer;}
.nav-right{display:flex;align-items:center;gap:16px;font-size:13px;color:rgba(255,255,255,.8);}
.nav-avatar{font-size:24px;cursor:pointer;}

/* Search Bar */
.search-bar{background:#2563eb;padding:12px 24px 16px;}
.search-fields{display:flex;align-items:flex-end;gap:8px;max-width:900px;margin:0 auto;}
.field{display:flex;flex-direction:column;gap:2px;flex:1;}
.field label{font-size:11px;color:rgba(255,255,255,.7);}
.field select,.field input{border:none;border-radius:4px;padding:10px 12px;font-size:14px;font-weight:600;outline:none;}
.swap-btn{width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,.5);background:transparent;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;margin-bottom:2px;flex-shrink:0;}
.swap-btn:hover{border-color:#fff;background:rgba(255,255,255,.1);}
.search-btn{background:#fff;color:#2563eb;border:none;padding:10px 20px;border-radius:4px;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:6px;}
.search-btn:hover{background:#f0f4ff;}

/* Date Strip */
.date-strip{background:#fff;border-bottom:1px solid #eee;display:flex;align-items:center;padding:0 24px;overflow-x:auto;}
.date-nav{background:none;border:none;font-size:16px;color:#888;cursor:pointer;padding:8px;flex-shrink:0;}
.date-nav:hover{color:#2563eb;}
.date-items{display:flex;flex:1;justify-content:center;gap:4px;}
.date-item{display:flex;flex-direction:column;align-items:center;padding:8px 14px;border-radius:6px;cursor:pointer;min-width:60px;transition:background .4s;}
.date-item:hover{background:#f0f4ff;}
.date-item.active{background:#2563eb;color:#fff;}
.date-item.active .date-day{color:#fff;}
.date-day{font-size:12px;font-weight:600;color:#2563eb;}
.date-label{font-size:11px;color:#888;}
.date-item.active .date-label{color:rgba(255,255,255,.8);}

/* Layout */
.results-layout{display:flex;max-width:1200px;margin:0 auto;padding:16px 24px;gap:20px;}

/* Filters Sidebar */
.filters-sidebar{width:240px;flex-shrink:0;}
.filter-group{background:#fff;border-radius:8px;padding:14px 16px;margin-bottom:12px;border:1px solid #eee;}
.filter-group h4{font-size:14px;font-weight:600;margin-bottom:10px;}
.filter-group label{display:block;font-size:13px;padding:4px 0;cursor:pointer;color:#555;}
.filter-group input[type=checkbox]{margin-right:6px;}
.show-more{color:#2563eb;font-size:12px;margin-top:4px;display:inline-block;}
.why-book{background:#fff;border-radius:8px;padding:16px;border:1px solid #eee;}
.why-book h4{font-size:14px;font-weight:600;margin-bottom:12px;}
.why-item{display:flex;gap:10px;margin-bottom:12px;font-size:12px;}
.why-item i{color:#2563eb;font-size:18px;margin-top:2px;flex-shrink:0;}
.why-item strong{display:block;font-size:13px;margin-bottom:2px;}
.why-item p{color:#888;line-height:1.3;}

/* Results Main */
.results-main{flex:1;min-width:0;}

/* Sort Tabs */
.sort-tabs{display:flex;gap:4px;margin-bottom:12px;}
.sort-btn{background:#fff;border:1px solid #ddd;padding:8px 20px;border-radius:20px;font-size:13px;cursor:pointer;color:#555;}
.sort-btn.active{background:#fff;border-color:#2563eb;color:#2563eb;font-weight:600;}
.sort-btn:hover{border-color:#2563eb;color:#2563eb;}

/* Promo Applied */
.promo-applied{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:6px;padding:8px 14px;font-size:13px;color:#16a34a;margin-bottom:12px;}
.promo-applied i{margin-right:6px;}

/* Train Card */
.train-card{background:#fff;border-radius:8px;border:1px solid #eee;margin-bottom:10px;overflow:hidden;transition:box-shadow .4s;}
.train-card:hover{box-shadow:0 2px 12px rgba(0,0,0,.08);}
.train-row{display:flex;align-items:center;padding:16px 20px;gap:16px;}
.train-time-col{min-width:120px;}
.time-depart,.time-arrive{font-size:22px;font-weight:700;color:#1e293b;}
.time-arrive sup{font-size:11px;color:#ef4444;}
.station-name{font-size:12px;color:#888;margin-top:2px;}
.train-info-col{flex:1;display:flex;flex-direction:column;gap:4px;}
.train-number{font-size:13px;color:#555;font-weight:500;}
.train-duration{font-size:12px;color:#888;}
.train-price-col{text-align:right;min-width:100px;}
.seats-left{font-size:11px;color:#ef4444;display:block;margin-bottom:2px;}
.price-display{display:flex;flex-direction:column;align-items:flex-end;}
.price-original{font-size:12px;color:#aaa;text-decoration:line-through;}
.price-current{font-size:20px;font-weight:700;color:#2563eb;}
.sold-out{font-size:14px;color:#aaa;font-weight:600;}
.train-action-col{min-width:90px;text-align:right;}
.select-btn{background:#2563eb;color:#fff;border:none;padding:8px 16px;border-radius:4px;font-size:13px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:4px;}
.select-btn:hover{background:#1d4ed8;}
.select-btn.disabled{background:#ddd;color:#999;cursor:not-allowed;}

/* Badges */
.recommend-badge{display:inline-block;background:#dcfce7;color:#16a34a;font-size:11px;font-weight:600;padding:3px 10px;border-radius:4px;margin:10px 0 0 20px;}
.popular-badge{display:inline-block;background:#2563eb;color:#fff;font-size:11px;font-weight:600;padding:3px 10px;border-radius:4px;margin:10px 0 0 8px;}

/* Train Detail Expand */
/* Smooth expand/collapse for train detail */
.train-detail{border-top:1px solid #eee;padding:16px 20px;background:#fafafa;overflow:hidden;max-height:0;padding-top:0;padding-bottom:0;transition:max-height .6s cubic-bezier(.4,0,.2,1),padding .6s ease,opacity .5s ease;opacity:0;}
.train-detail.open{max-height:600px;padding:16px 20px;opacity:1;}

/* Seat Carousel */
.seat-carousel-wrap{position:relative;overflow:hidden;}
.seat-carousel{display:flex;transition:transform .5s ease;gap:0;align-items:stretch;}
.seat-cat{width:calc(100% / 3);flex-shrink:0;background:#fff;border-right:1px dashed #e0e0e0;padding:16px 18px;position:relative;box-sizing:border-box;display:flex;flex-direction:column;}
.seat-cat:last-child{border-right:none;}
.seat-cat.unavailable{opacity:.45;}
.seat-cat h4{font-size:14px;font-weight:600;margin-bottom:8px;color:#1e293b;}
.seat-cat ul{list-style:none;font-size:12px;color:#666;line-height:1.8;margin-bottom:4px;}
.seat-cat ul li::before{content:"• ";color:#2563eb;}
.seat-feat-hidden{display:none;}
.show-more-link{color:#2563eb;font-size:12px;display:inline-block;cursor:pointer;margin-bottom:4px;}
.seat-spacer{flex:1;}
.seat-price-row{display:flex;align-items:flex-end;justify-content:space-between;padding-top:10px;border-top:none;}
.seat-price-info{display:flex;flex-direction:column;gap:0;}
.seat-avail-label{font-size:11px;color:#ef4444;margin-bottom:2px;}
.seat-orig-price{font-size:12px;color:#aaa;text-decoration:line-through;margin-right:4px;}
.seat-disc-price{font-size:18px;font-weight:700;color:#1e293b;}
.book-btn{background:#2563eb;color:#fff;border:none;padding:10px 28px;border-radius:4px;font-size:14px;font-weight:600;cursor:pointer;width:100%;}
.book-btn:hover{background:#1d4ed8;}
.book-btn.soldout{background:#e5e7eb;color:#9ca3af;cursor:not-allowed;}
.no-seats{font-size:12px;color:#aaa;}

/* Carousel Arrows */
.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:28px;height:48px;background:rgba(255,255,255,.95);border:1px solid #ddd;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;font-size:14px;color:#555;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.08);}
.carousel-arrow:hover{background:#fff;color:#2563eb;border-color:#2563eb;}
.carousel-arrow.left{left:0;}
.carousel-arrow.right{right:0;}
.carousel-arrow.hidden{display:none;}

/* Duration Column */
.train-duration-col{min-width:100px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;}
.duration-line{display:flex;align-items:center;gap:0;width:80px;}
.dur-dot{width:6px;height:6px;border-radius:50%;background:#ccc;flex-shrink:0;}
.dur-line{flex:1;height:1px;background:#ccc;}
.train-duration{font-size:12px;color:#888;}
.transfer-tag{font-size:11px;color:#888;}

/* Results Count */
.results-count{font-size:13px;color:#888;margin-bottom:8px;padding:4px 0;}

/* Detail Header (shown when expanded) */
.detail-header{font-size:12px;color:#888;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #eee;}
.detail-route{font-weight:500;}

/* Seat Price Info & Book Area */
.seat-price-info{display:flex;flex-direction:column;gap:2px;}
.seat-book-area{display:flex;align-items:center;gap:10px;}
.seat-total{font-size:12px;color:#888;}
.seat-total strong{color:#1e293b;font-size:14px;}
.seat-soldout{font-size:13px;color:#aaa;font-weight:500;}

/* No Results */
.no-results{text-align:center;padding:60px 20px;color:#888;font-size:15px;background:#fff;border-radius:8px;}
.no-results i{font-size:40px;margin-bottom:12px;display:block;color:#ddd;}

/* Loading */
.loading-indicator{text-align:center;padding:40px;color:#888;font-size:14px;}

/* City Input (replaces select) */
.city-field{position:relative;}
.city-input{border:none;border-radius:4px;padding:10px 12px;font-size:14px;font-weight:600;background:#fff;cursor:pointer;min-width:140px;}
.city-input:hover{background:#f8fafc;}
.city-display{color:#1e293b;}

/* City Picker Overlay */
.city-picker-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0);z-index:1000;display:flex;align-items:center;justify-content:center;animation:cpFadeIn .4s ease forwards;}
@keyframes cpFadeIn{from{background:rgba(0,0,0,0)}to{background:rgba(0,0,0,.45)}} 
.city-picker-overlay.closing{animation:cpFadeOut .4s ease forwards;}
@keyframes cpFadeOut{from{background:rgba(0,0,0,.45)}to{background:rgba(0,0,0,0)}}
.city-picker-panel{background:#fff;border-radius:12px;width:560px;max-width:95vw;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.18);animation:cpSlideIn .5s cubic-bezier(.22,1,.36,1) forwards;transform:translateY(30px);opacity:0;}
@keyframes cpSlideIn{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
.city-picker-overlay.closing .city-picker-panel{animation:cpSlideOut .4s ease forwards;}
@keyframes cpSlideOut{from{transform:translateY(0);opacity:1}to{transform:translateY(30px);opacity:0}}
.cp-header{display:flex;align-items:center;padding:16px 20px 12px;gap:10px;border-bottom:1px solid #eee;}
.cp-search{flex:1;border:1px solid #ddd;border-radius:6px;padding:10px 14px;font-size:14px;outline:none;}
.cp-search:focus{border-color:#2563eb;}
.cp-close{background:none;border:none;font-size:18px;color:#888;cursor:pointer;padding:4px 8px;}
.cp-close:hover{color:#333;}
.cp-alpha-bar{display:flex;flex-wrap:wrap;gap:2px;padding:10px 20px 8px;border-bottom:1px solid #f0f0f0;}
.cp-alpha-letter{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:4px;font-size:13px;font-weight:600;color:#2563eb;cursor:pointer;text-decoration:none;}
.cp-alpha-letter:hover{background:#eff6ff;}
.cp-body{flex:1;overflow-y:auto;padding:8px 20px 20px;}
.cp-body::-webkit-scrollbar{width:6px;}
.cp-body::-webkit-scrollbar-thumb{background:#ddd;border-radius:3px;}
.cp-group{margin-bottom:12px;}
.cp-group-letter{font-size:14px;font-weight:700;color:#2563eb;padding:6px 0 4px;border-bottom:1px solid #f0f0f0;margin-bottom:6px;position:sticky;top:0;background:#fff;z-index:1;}
.cp-group-cities{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.cp-city-item{padding:8px 12px;border-radius:6px;cursor:pointer;border:1px solid #eee;transition:all .3s;}
.cp-city-item:hover{border-color:#93c5fd;background:#eff6ff;}
.cp-city-item.selected{border-color:#2563eb;background:#2563eb;color:#fff;}
.cp-city-item.selected .cp-city-zh{color:rgba(255,255,255,.8);}
.cp-city-name{font-size:13px;font-weight:600;display:block;}
.cp-city-zh{display:none;}

/* Round-trip two-column layout */
#two-col-wrap{display:flex;gap:12px;align-items:flex-start;}
.rt-col{flex:1;min-width:0;}
.rt-col-header{background:#2563eb;color:#fff;border-radius:8px 8px 0 0;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;}
.rt-dir-label{font-size:14px;font-weight:700;}
.rt-date-label{font-size:13px;opacity:.85;}
.rt-col .train-card{border-radius:0;border-top:none;}
.rt-col .train-card:first-child{border-radius:0 0 0 0;}
.rt-col .train-card:last-child{border-radius:0 0 8px 8px;}
.compact-card .train-row{flex-wrap:nowrap;padding:10px 12px;gap:8px;}
.compact-card .train-time-col{min-width:70px;}
.compact-card .time-depart,.compact-card .time-arrive{font-size:16px;}
.compact-card .station-name{font-size:11px;}
.compact-card .train-duration-col{min-width:60px;}
.compact-card .train-duration{font-size:11px;}
.compact-card .train-info-col{min-width:50px;}
.compact-card .train-number{font-size:11px;}
.compact-card .train-price-col{min-width:60px;}
.compact-card .price-current{font-size:14px;}
.compact-card .train-action-col{min-width:70px;flex-shrink:0;}
.compact-card .select-btn{padding:6px 10px;font-size:12px;white-space:nowrap;}
.compact-card .book-btn{padding:6px 10px;font-size:12px;width:auto;}
.compact-card .seat-cat{padding:10px 10px;}
.compact-card .seat-disc-price{font-size:14px;}
.compact-card .seat-price-row{flex-direction:column;gap:6px;align-items:flex-start;}
.compact-card .train-detail{padding:10px 8px;}

/* Chat Widget */
.chat-widget{position:fixed;bottom:24px;right:24px;z-index:200;}
.chat-icon{width:50px;height:50px;background:#2563eb;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;cursor:pointer;box-shadow:0 4px 12px rgba(37,99,235,.4);}

/* Custom Calendar Popup */
.cal-popup{position:fixed;z-index:9999;background:#fff;border:1px solid #ddd;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.18);padding:16px;width:280px;user-select:none;}
.cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.cal-nav{background:none;border:none;font-size:16px;color:#2563eb;cursor:pointer;padding:4px 8px;border-radius:4px;}
.cal-nav:hover{background:#eff6ff;}
.cal-title{font-size:14px;font-weight:700;color:#1e293b;}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:11px;color:#888;font-weight:600;margin-bottom:4px;}
.cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.cal-day{text-align:center;padding:6px 2px;font-size:13px;border-radius:6px;cursor:pointer;color:#333;}
.cal-day:hover:not(.cal-empty):not(.cal-disabled){background:#eff6ff;color:#2563eb;}
.cal-day.cal-today{font-weight:700;color:#2563eb;}
.cal-day.cal-selected{background:#2563eb;color:#fff !important;font-weight:700;}
.cal-day.cal-empty,.cal-day.cal-disabled{cursor:default;color:#ccc;}
.cal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:12px;}
.cal-clear-btn{background:none;border:1px solid #ddd;border-radius:6px;padding:5px 12px;font-size:12px;cursor:pointer;color:#666;}
.cal-clear-btn:hover{border-color:#f87171;color:#f87171;}
.cal-done-btn{background:#2563eb;color:#fff;border:none;border-radius:6px;padding:5px 12px;font-size:12px;cursor:pointer;font-weight:600;}
.cal-done-btn:hover{background:#1d4ed8;}