/* 按照 style.md 规范的独立主机页面样式 */

/* 背景图片区域 */
.backtu{background:url(../img/ds.jpg) no-repeat center center;background-size: 100% 100%;height: 200px;}
.backtu .hero-title{width: 62%;float: right;color: #fff;margin-top: 30px;text-align: left;font-size: 16px;}
.backtu .hero-title a{color: #FF3500 !important;}

.hero-section{text-align:center;margin:0 auto;box-shadow: 0px 12px 10px -8px #dbdada inset;}
.hero-section .hero-banner{margin: 0 auto;padding:40px 0;}

/* 产品卡片区域 - 移除重复的max-width，使用公共类 */
.featured-servers-section{clear:both;text-align: center;}
.featured-servers-section .card-content{padding: 20px;box-sizing: border-box;box-shadow: 0 0 10px rgba(0,0,0,0.1);}
.featured-servers-section .card-content h3{margin:0;font-size: 18px;font-weight: bold;}
.featured-servers-section .card-content:hover{box-shadow: 0 0 10px rgba(0,0,0,0.2);}

.featured-servers-section .server-cards-list{display: flex;justify-content: space-between;flex-flow: wrap;gap: 20px;}
.featured-servers-section .server-cards-list .server-card{flex: 1; position:relative;}
.featured-servers-section .server-cards-list .server-card.hot:after{content: '';display: block;max-width:32px;width: 18%;background: url('../../images/hot.png') no-repeat;background-size: 100% auto;height: 40px;position: absolute;top: 2px;right: 3%;}
.featured-servers-section .server-cards-list .server-card .price-display{margin:10px 0 20px;}
.featured-servers-section .price-display span{font-size: 28px;color: #FF3500;}
.featured-servers-section .server-specs{border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;list-style: initial;padding: 20px 0;}
.featured-servers-section .server-specs li{float:none;width:100%;font-size: 14px;text-align: left;padding: 5px 0;list-style: inside;}
.featured-servers-section .server-specs li a{color: #333333;}
.featured-servers-section .card-action .card-action-btn{text-align:center;margin-top:20px}
.featured-servers-section .card-action input{background: #ececec;color: #000;border: none;padding: 0 20px;border-radius: 100px;font-weight: bold;height: 45px;font-size: 14px;cursor: pointer;}
.featured-servers-section .card-action input:hover{background: #ff3500;color: #fff;}

/* 表格区域 - 移除重复的max-width */
.servers-table-section{clear:both;text-align:center;padding: 5px 0;}
.servers-table-section h2{margin-bottom: 30px;}
.servers-table-section .servers-table{width: 100%;box-shadow: 0 0 10px rgba(0,0,0,0.1);}
.servers-table-section .servers-table tr th{background: #000;color: #fff;padding: 10px 0;font-size: 14px;}
.servers-table-section .servers-table tr{border-bottom: 1px solid #ccc;}
.servers-table-section .servers-table tr:first-child{border-bottom: 0;}
.servers-table-section .servers-table tr:last-child{border-bottom: 0;}
.servers-table-section .servers-table tr td{padding:10px 0;text-align: center;font-size: 14px;}
.servers-table-section .servers-table tr td span{color:#FF3500;}
/* .servers-table-section .servers-table tr:nth-child(odd){background: #f1f1f1;} */
.servers-table-section .servers-table tr td input{background: #ff3500;color: #fff;border: none;padding: 0 20px !important;border-radius: 100px;font-weight: bold;height: 35px;font-size: 14px;line-height: 35px;}
.servers-table-section .servers-table tr td input:hover{background: #e62f00;}

/* 联系区域 */
.contact-section{width: 100%;background: #2f2c8a;color: #fff;text-align: center;margin: 30px 0;height: 150px;font-size: 24px;clear: both;display: flex;justify-content: center;align-items: center;gap: 20px;}
.contact-section input{background: #FF3500;color: #fff;border: none;border-radius: 100px;padding: 0 20px;font-size: 14px;font-weight: bold;height: 45px;line-height: 45px;cursor: pointer;}
.contact-section input:hover{background: #e62f00;}

/* 优势区域 - 移除重复的max-width */
.advantages-section{text-align: center;overflow: hidden;}
.advantages-section h2{margin-bottom: 30px;}
/* .advantages-section .advantages-list{overflow: hidden;} */
.advantages-section .advantages-list{display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px;}
.advantages-section .advantages-list .advantage-item{box-shadow: 0 0 10px rgba(0,0,0,0.1);padding: 20px;box-sizing: border-box;}
.advantages-section .advantages-list .advantage-item img{margin: 10px 0;}
.advantages-section .advantages-list .advantage-item h6{font-size:16px;margin: 10px 0;}
.advantages-section .advantages-list .advantage-item div{font-size:14px;overflow: hidden;color: #000;}
.advantages-section .advantages-list .advantage-item .advantage-content div{color: #666;}

/* Bitcoin支付区域 - 移除重复的max-width，使用规范样式 */
.bitcoin-payment-section{clear:both;text-align:left;padding: 20px 0 0;}
.bitcoin-payment-section h2{margin: 0 0 10px;text-align:left;font-size: 16px;font-weight: bold;color: #000000;}
.bitcoin-payment-section .section-subtitle{font-size:14px;text-align:left;color: #666666;}
.bitcoin-payment-section .bitcoin-benefits-list{list-style: none;padding: 0;margin: 0;}
.bitcoin-payment-section .bitcoin-benefits-list li{margin-bottom: 20px;padding-left: 0;}
.bitcoin-payment-section .bitcoin-benefits-list h4{font-size: 16px;font-weight: bold;color: #000000;margin: 10px 0 5px 0;position: relative;padding-left: 20px;}
.bitcoin-payment-section .bitcoin-benefits-list h4:before{content: "•";color: #000;font-size: 16px;position: absolute;left: 0;top:0;}
.bitcoin-payment-section .bitcoin-benefits-list p{color: #666666;font-size: 14px;margin: 0;padding-left: 20px;line-height: 1.5;}

#Page .brands{padding-top: 40px;}

/* 响应式设计 */
@media screen and (max-width: 1040px){
	.featured-servers-section .server-cards-list .server-card{width: 49%;}
	.featured-servers-section .server-cards-list .server-card:first-child{margin-bottom: 10px;}
	.featured-servers-section .server-cards-list .server-card:nth-child(2){margin-bottom: 10px;}
}

@media screen and (max-width: 1024px){
	/* .advantages-section .advantages-list .advantage-item{width: 50%;height: 200px;overflow: hidden;} */
	.featured-servers-section .server-cards-list .server-card{width: 49%;}
	.featured-servers-section .server-cards-list .server-card:first-child{margin-bottom: 10px;}
	.featured-servers-section .server-cards-list .server-card:nth-child(2){margin-bottom: 10px;}
}

@media screen and (max-width: 768px){
	/* .advantages-section .advantages-list .advantage-item{overflow: scroll;} */
    #Page .brands{padding-top: 20px;}
    
    .bitcoin-payment-section{padding: 0 10px 0px;box-sizing: border-box;}
    .bitcoin-payment-section .section-subtitle{font-size: 12px;margin-bottom: 10px;}
    .bitcoin-payment-section .bitcoin-benefits-list h4{font-size: 14px;}
    .bitcoin-payment-section .bitcoin-benefits-list h4:before{font-size: 14px;}
    .bitcoin-payment-section .bitcoin-benefits-list p{font-size: 12px;}
    .bitcoin-payment-section h2{font-size: 14px;}
    .bitcoin-payment-section .bitcoin-benefits-list li{margin-bottom: 10px;}
    .bitcoin-payment-section .bitcoin-benefits-list li:last-child{margin: 0;}
    
    /* 移动端按钮调整 */
    
    .hero-section .hero-banner{padding: 20px 0;box-sizing: border-box;}
    
    .featured-servers-section .card-action input{height: 32px;font-size: 12px;padding: 0 15px;}
    .featured-servers-section .server-cards-list{display: block;}
    .featured-servers-section .server-cards-list .server-card{margin-bottom: 10px;width: 100%;}
    .featured-servers-section .server-cards-list .server-card:last-child{margin-bottom: 0;}
    .featured-servers-section .card-content{padding: 15px;}
    .featured-servers-section .server-cards-list .server-card .price-display{margin: 10px 0;}
    .featured-servers-section .card-content h3{font-size: 16px;}
    .featured-servers-section .server-specs li{font-size: 12px;}
    .featured-servers-section .card-action .card-action-btn{margin-top: 15px;}

	.servers-table-section{display: none;}
    .servers-table-section .servers-table tr td input{height: 25px;font-size: 12px;padding: 0 15px !important;line-height: 25px;}

	.contact-section{font-size: 16px;margin: 0;gap: 10px;padding: 0 10px;box-sizing: border-box;height: 100px;}
	.contact-section input{padding: 0 15px;font-size: 12px;height: 35px;line-height: 35px;}

    .backtu{height: auto;background: #4DBFF5;}
    .backtu .hero-title{float: none;width: 100%;margin: 0;}

    .advantages-section h2{margin-bottom: 20px;}

    .advantages-section .advantages-list{grid-template-columns: repeat(1, 1fr);gap: 10px;}
    .advantages-section .advantages-list .advantage-item{width: 100%;float: none;height: auto;padding: 15px;}
    .advantages-section .advantages-list .advantage-item h6{font-size: 14px;}
}
