@import url("base.css");
body {position:relative;z-index:1;margin:0 auto;max-width:1903px;font-family:"微软雅黑", "Microsoft YaHei", Verdana, Arial;color:#505050;font-size:14px;overflow-x:hidden;background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);}
input,select,button,textarea {font-family:"微软雅黑", "Microsoft YaHei", Verdana, Arial;font-size:14px;color:#333;resize:none;box-sizing:border-box;}
:-moz-placeholder {color:#aaa;}
::-moz-placeholder {color:#aaa;}
:-ms-input-placeholder {color:#aaa;}
::-webkit-input-placeholder {color:#aaa;}
a:link,a:visited,a:active {color:#333;text-decoration:none;}
a:hover {color:#ff0000;text-decoration:none;}
a {outline:none;-moz-outline:none;blr:expression(this.onFocus=this.blur());}
.al:hover {text-decoration:underline;}
.als a:hover {text-decoration:underline;}
.flex-column {display:flex;flex-direction:column;justify-content:center;}
/*===================================================================================*/

#tab{width:900px;color:#fff;background: linear-gradient(135deg, #0088ff 0%, #00f2fe 100%);margin:0 auto;border-radius:10px 10px 0 0;box-shadow: 0 4px 15px rgba(0,0,0,0.1);}
.tab-ul{display: flex;list-style: none; background: linear-gradient(135deg, #0088ff 0%, #00f2fe 100%);border-radius:10px 10px 0 0;}
.tab-li{padding:15px 20px;cursor:pointer;transition: all 0.3s ease;border-radius:10px 10px 0 0;}
.tab-li:hover{background-color:rgba(255,255,255,0.1);}
.tab-li.active{background-color:white;color: #4facfe;font-weight:bold; cursor: default;box-shadow: 0 -2px 10px rgba(0,0,0,0.1);}
#content {min-width:900px;color:#fff;background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);}
#name {padding-top:100px;padding-bottom:50px;color:#fff;font-size:52px;text-align:center;text-shadow: 2px 2px 4px rgba(0,0,0,0.3);}
#itrack {position:relative;margin:0 auto;width:900px;height:120px;font-size:0;background: white;border-radius: 0 0 10px 10px;box-shadow: 0 4px 15px rgba(0,0,0,0.1);}
#itrack textarea {padding:20px;width:calc(100% - 270px);height:100%;font-size:20px;line-height:1.8;border:none;border-bottom:1px solid #e3e3e6;background-color:#fff;border-radius: 0 0 0 10px;}
#itrack span {position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:260px;height:100%;color:#fff;font-size:22px;text-align:center;border:none;box-sizing:border-box;background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);cursor:pointer;border-radius: 0 0 10px 0;transition: all 0.3s ease;}
#itrack span:hover{background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);transform: translateY(-2px);box-shadow: 0 6px 20px rgba(0,0,0,0.15);}
#banner {margin:0 auto;padding-top:30px;padding-bottom:30px;width:900px;font-size:0;}
#banner img {max-width:100%;border-radius: 10px;box-shadow: 0 4px 15px rgba(0,0,0,0.1);}
#footer {padding-top:15px;padding-bottom:15px;min-width:900px;color:#9e9e9e;line-height:1.8;background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);border-radius: 10px;margin-top: 20px;}
.full-width-table {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.thead-row {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);color: white;font-weight: bold;
}
.first-td{padding:15px 0;background: #f8f9fa;color: #333 !important;}
.th-padding {
  padding: 12px 0;
}

/* 确保表格中所有文字都清晰可见 */
.full-width-table td {
  color: #333 !important;
  font-weight: 500;
  background: white;
}

.full-width-table th {
  color: white !important;
  font-weight: bold;
}

/* 确保邮编列的文字清晰可见 */
.full-width-table td:first-child {
  color: #333 !important;
  font-weight: 600;
  background: #f8f9fa;
}

/* 确保表格行交替背景色 */
.full-width-table tbody tr:nth-child(even) {
  background: #f8f9fa;
}

.full-width-table tbody tr:nth-child(odd) {
  background: white;
}

/* 确保所有表格文字都有足够的对比度 */
.full-width-table td, .full-width-table th {
  text-shadow: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#expand-header {
  cursor: pointer;
  transition: all 0.3s ease;
}

#expand-header:hover{
  color: #667eea;
}

.flex-container {
  display: flex;
  background: #f8f9fa;
  border-radius: 10px;
  padding: 20px;
  margin: 10px 0;
}

.half {
  flex: 1;
  padding: 0 15px;
}
.merch-item{background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);text-align:center;color: white;transition: all 0.3s ease;}
.merch-item:hover{transform: translateY(-2px);box-shadow: 0 6px 20px rgba(0,0,0,0.15);}
.link-line {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #e9ecef;
  transition: all 0.3s ease;
}

.link-line:hover{
  background: #e9ecef;
  border-radius: 5px;
  padding: 8px 10px;
}

.link {
  color: #4facfe !important;
  font-weight: bold;
  transition: all 0.3s ease;
}

.link:hover{
  color: #00f2fe !important;
  text-decoration: underline;
}

.merch{
    margin-bottom: 15px;
    padding: 15px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.merch:hover{
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.carrier-name {
  font-weight: bold;
  color: #4facfe;
  font-size: 16px;
  margin-bottom: 8px;
}

.merch-desc{display:none;background: #f8f9fa;border-radius: 10px;margin: 10px 0;}
.merch-desc.show {
  display: table-row;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.carrier-note {
  color: #6c757d;
  line-height: 1.4;
  margin-bottom: 10px;
}

.tag-allow {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: white;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 15px;
  margin-right: 6px;
  display: inline-block;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.tag-disallow {
  background: linear-gradient(135deg, #dc3545 0%, #e74c3c 100%);
  color: white;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 15px;
  margin-right: 6px;
  display: inline-block;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#track_result {margin:0 auto;width:900px;}
#track_result .conts {position:relative;margin-top:30px;background: white;border-radius: 10px;box-shadow: 0 4px 15px rgba(0,0,0,0.1);overflow: hidden;}
#track_result .number {display:flex;align-items:center;position:relative;background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);color: white;padding: 15px;}
#track_result .number span, #track_result .number a {margin-left:12px;padding-left:15px;padding-right:15px;height:46px;line-height:46px;color:#333;font-size:16px;vertical-align:top;border-radius:20px;background-color:#f6f6f6;box-shadow: 0 2px 5px rgba(0,0,0,0.1);}
#track_result .number a {position:absolute;top:0;right:0;margin-right:0;display:block;}
#track_result .number i {position:relative;width:40px;height:40px;border-radius:50%;background-color:#f6f6f6;cursor:pointer;overflow:hidden;transition: all 0.3s ease;}
#track_result .number i:hover{transform: scale(1.1);}
#track_result .number i:before {position:absolute;top:50%;left:50%;display:block;margin-top:-1px;margin-left:-7px;width:14px;height:2px;background-color:#666;content:"";}
#track_result .number i:after {position:absolute;top:50%;left:50%;display:block;margin-top:-1px;margin-left:-7px;width:14px;height:2px;background-color:#666;content:"";opacity:1;transform:rotate(90deg);transition:all ease-out 400ms;}
#track_result .number i.active:after {opacity:0;transform:rotate(0deg);}
#track_result .qrcode {position:absolute;top:100px;right:0;width:240px;font-size:0;text-align:center;border:1px solid #e5e5e5;background-color:#fff;border-radius: 10px;box-shadow: 0 4px 15px rgba(0,0,0,0.1);}
#track_result .qrcode img {margin-top:15px;margin-bottom:15px;width:200px;}
#track_result .qrcode p {padding:10px;font-size:14px;background-color:#f6f6f6;}
#track_result .qrcode p i {display:inline-block;margin-right:5px;color:#2ba245;font-size:18px;vertical-align:middle;}
#track_result .qrcode p span {display:inline-block;width:10px;vertical-align:middle;}
#track_result .list .thead {display:flex;padding-top:30px;padding-bottom:30px;background: #f8f9fa;}
#track_result .list .thead dd {color:#999;font-size:16px;font-weight: bold;}
#track_result .list .tbody dl {display:flex;border-bottom: 1px solid #e9ecef;transition: all 0.3s ease;}
#track_result .list .tbody dl:hover{background: #f8f9fa;}
#track_result .list .tbody dl dd {flex:0 0 auto;position:relative;padding-bottom:40px;font-size:16px;line-height:1.7;box-sizing:border-box;}
#track_result .list .tbody dl dd:first-child {border-right:1px solid #eee;}
#track_result .list .w1 {width:22%;margin-right:5%;}
#track_result .list .w2 {width:12%;}
#track_result .list .w3 {width:60%;}
#track_result .list .end {position:absolute;top:-3px;right:-18px;display:block;padding:6px;width:36px;height:36px;box-sizing:border-box;background-color:#fff;border-radius: 50%;}
#track_result .list .end i {display:block;width:100%;height:24px;line-height:24px;color:#fff;font-size:12px;text-align:center;border-radius:50%;box-sizing:border-box;background: linear-gradient(135deg, #28a745 0%, #20c997 100%);}
#track_result .list .arrow {position:absolute;top:-3px;right:-18px;display:block;padding:6px;width:36px;height:36px;box-sizing:border-box;background-color:#fff;border-radius: 50%;}
#track_result .list .arrow i {display:block;width:100%;height:24px;line-height:24px;color:#999;font-size:12px;text-align:center;border-radius:50%;box-sizing:border-box;border:1px solid #e5e5e5;}
#track_result .errmsg {color:#dc3545;font-size:18px;line-height:1.8;text-align:center;padding: 20px;background: #f8d7da;border-radius: 10px;margin: 10px 0;}
#track_loading {padding:50px 0;text-align:center;line-height:2;}

/*===================================================================================*/

#win_ts {position:fixed;top:20%;left:50%;z-index:9999;margin-left:-170px;padding:32px 20px;width:300px;color:#fff;font-size:22px;line-height:1.4;text-align:center;opacity:0;transition:all 0.5s;border-radius:15px;background: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.9) 100%);overflow:hidden;box-shadow: 0 10px 30px rgba(0,0,0,0.3);}
#win_loading {position:fixed;top:0%;left:0%;z-index:9999;width:100%;height:100%;background:url(../images/loading2.gif) no-repeat center center;}
#win_loading_bg {position:fixed;top:0px;left:0px;z-index:9998;width:100%;height:100%;background:url(../images/tbs/white0.png);}

/* 新增样式 */
body {
    opacity: 0;
    animation: fadeIn 1s ease forwards;
}

/* 输入框焦点效果 */
#itrack.focused {
    box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.3);
    transform: translateY(-2px);
}

/* 加载动画容器 */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 0;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* 加载动画 */
.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #4facfe;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 错误容器 */
.error-container {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* 标签页图标 */
.tab-li i {
    margin-right: 8px;
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
}

/* 查询按钮图标 */
#itrack span i {
    margin-right: 8px;
    font-size: 18px;
    display: inline-block;
    vertical-align: middle;
}

/* 确保layui图标正确显示 */
.layui-icon {
    font-family: layui-icon !important;
    font-size: inherit;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 响应式设计 */
@media (max-width: 768px) {
    #tab, #itrack, #track_result, #banner {
        width: 95%;
        max-width: 900px;
    }
    
    #name {
        font-size: 36px;
        padding-top: 60px;
        padding-bottom: 30px;
    }
    
    .tab-li {
        padding: 12px 15px;
        font-size: 14px;
    }
    
    #itrack {
        height: 200px;
    }
    
    #itrack textarea {
        font-size: 16px;
    }
    
    #itrack span {
        font-size: 18px;
        padding-top: 120px;
    }
}

/* 悬停效果增强 */
.merch-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

.link-line:hover {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    transform: translateX(5px);
}

/* 按钮点击效果 */
#itrack span:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* 表格行悬停效果 */
.full-width-table tbody tr:hover {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    transform: scale(1.01);
    transition: all 0.3s ease;
}

/* 标签悬停效果 */
.tag-allow:hover, .tag-disallow:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* 页面滚动条美化 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #3d9be8 0%, #00d4e6 100%);
}

/* 承运商部分样式 */
.carrier-section {
    margin-top: 20px;
    position: relative;
}

.carrier-count {
    padding: 10px 0; 
    font-size: 18px; 
    font-weight: bold;
    color: #4facfe;
    text-align: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 10px;
    margin: 15px 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.carrier-count:hover {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.carrier-details {
    display: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.carrier-section:hover .carrier-details {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* 承运商卡片悬停效果 */
.carrier-section:hover .merch {
    animation: fadeInUp 0.5s ease forwards;
}

.carrier-section:hover .merch:nth-child(1) { animation-delay: 0.1s; }
.carrier-section:hover .merch:nth-child(2) { animation-delay: 0.2s; }
.carrier-section:hover .merch:nth-child(3) { animation-delay: 0.3s; }
.carrier-section:hover .merch:nth-child(4) { animation-delay: 0.4s; }
.carrier-section:hover .merch:nth-child(5) { animation-delay: 0.5s; }

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

/* 城市承运商横向排列布局 */
.city-carrier-row {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #e9ecef;
    transition: all 0.3s ease;
    background: white;
}

.city-carrier-row:nth-child(even) {
    background: #f8f9fa;
}

.city-carrier-row:hover {
    background: #e9ecef;
    transform: translateX(5px);
}

.city-info {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 200px;
    flex: 1;
}

.city-info .link {
    font-weight: bold;
    color: #4facfe;
    font-size: 16px;
}

.city-info .distance {
    color: #333;
    font-size: 16px;
    font-weight: 500;
}

.carrier-item {
    padding: 8px 12px;
    margin: 0 5px;
    background: #28a745;
    color: white;
    border-radius: 15px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    min-width: 60px;
    text-align: center;
}

.carrier-item:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* 承运商悬停提示 */
.carrier-item[data-carrier="aupost"]:hover::after {
    content: "限单件，除4000计费重不超过21KG(计抛)并且最长边不超过100CM";
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
}

.carrier-item[data-carrier="toll"]:hover::after {
    content: "不限制重量和件数，但是只能安排小包/大包";
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
}

.carrier-item[data-carrier="allied"]:hover::after {
    content: "不限制重量和件数，超长超重需要额外费用";
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
}

.carrier-item[data-carrier="tfm"]:hover::after {
    content: "不限制重量和件数，超长超重需要额外费用";
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
}

.carrier-item[data-carrier="truck"]:hover::after {
    content: "不限制重量和件数，超长超重需要额外费用";
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
}