/* 123IDC.com 自定义样式 */

/* ===== 基础样式 ===== */
:root {
    --primary-color: #FFD457;
    --primary-light: #FFEDB8;
    --blue-color: #6A8EEF;
    --dark-bg: #101015;
    --dark-card: #232C45;
    --dark-card-transparent: rgba(35, 44, 69, 0.4);
    --text-white: #FFFFFF;
    --text-light: rgba(255, 255, 255, 0.82);
    --text-opacity: rgba(255, 255, 255, 0.56);
    --border-color: #1F2941;
}

/* 解决橡皮筋滚动时的白色背景问题 */
html {
    background: radial-gradient(
            circle at center,
            #605B2E 1%,
            #303147 60%,
            #1C1E33 75%,
            #101015 100%
    );
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    min-height: 100vh;
    /* 防止橡皮筋滚动 */
    overscroll-behavior: none;
    /* iOS Safari 防止弹性滚动 */
    -webkit-overflow-scrolling: auto;
}

body {
    background: radial-gradient(
            circle at center,
            #605B2E 1%,
            #303147 60%,
            #1C1E33 75%,
            #101015 100%
    );
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: var(--text-white);
    line-height: 1.4;
    /* 防止橡皮筋滚动 */
    overscroll-behavior: none;
    /* iOS Safari 防止弹性滚动 */
    -webkit-overflow-scrolling: auto;
}

/* ===== 通用组件 ===== */

.bg-dark-custom {
    opacity: 0.9;
    background-color: var(--dark-bg);
}

a {
    color: var(--text-white);
    text-decoration: none;
}
a:hover {
    color: var(--primary-color) !important;
}

.bg-gradient-blur {
    background: rgba(35, 44, 69, 0.4);
    backdrop-filter: blur(10px);
    border-radius: 24px;
}

.icon-container {
    img {
        width: 48px;
        height: 48px;
    }
}

.btn-primary-custom {
    background: linear-gradient(135deg, #FFD762 0%, #FFD457 100%);
    color: #181510;
    border: 1px solid #FFD457;
    border-radius: 32px;
    padding: 8px 16px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0px 1px 0px 0px rgba(255, 240, 97, 1);
}

.btn-primary-custom:hover {
    opacity: 0.9;
    color: #181510 !important;
}

.recommend-badge {
    background: linear-gradient(135deg, #FFEDB8 0%, #FFD457 100%);
    color: #522510;
    font-size: 16px;
    line-height: 1.5em;
    border-radius: 20px 20px 20px 0;
    padding: 4px 12px;
    margin-left: 10px;
}

/* ===== 顶部导航 ===== */
.navbar-custom {
    padding: 8px 0;
}

.navbar-brand img {
    height: 40px;
}

.nav-link {
    color: var(--text-light);
    font-size: 20px;
    margin: 0 24px;
}

.nav-link.active {
    color: var(--primary-color);
}

.nav-btn {
    border-radius: 32px;
    padding: 8px 24px;
    font-size: 14px;
}

.nav-btn-outline {
    border: 1px solid var(--primary-light);
    color: var(--primary-color);
}

/* ===== Banner区域 ===== */
.banner {
    margin-top: 72px;

    .banner-index {
        margin-top: -100px;

        .card {
            background: rgba(35, 44, 69, 0.4);
            backdrop-filter: blur(10px);
            border-radius: 24px;
            display: flex;
            flex-direction: row;
            align-items: center;

            img {
                width: 72px;
                height: 72px;
            }
        }

        .card-body {
            .title {
                color: var(--text-white);
            }

            .desc {
                color: var(--text-opacity);
                font-size: 14px;
            }
        }
    }
}

/* ===== 产品与服务 ===== */
.product-services {
    margin-top: 65px;
    background: rgba(16, 16, 21, 0.64);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: 32px;

    .card-product {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 24px;
        padding: 24px;

        background: #141926;
        border: 2px solid #1F2941;
        border-radius: 16px;

        .title {
            color: var(--text-white);
        }

        .desc {
            color: var(--text-opacity);
        }

        .price {
            color: var(--text-white);
            font-size: 18px;

            span {
                color: var(--primary-color);
                font-family: 'Gotham';
                font-style: normal;
                font-weight: 700;
                font-size: 36px;
                line-height: 44px;
            }
        }
    }
}

/* ===== 物理服务器 ===== */
.index-physical-server {
    margin-top: 65px;

    .card-feature {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 24px;
        padding: 16px 12px;
        background: rgba(35, 44, 69, 0.4);
        border-radius: 24px;
    }

    .card-feature__title {
        color: var(--text-white);
    }

    .card-feature__desc {
        color: var(--text-opacity);
        font-size: 14px;
    }
}


/* ===== 云服务器 ===== */
.index-cloud-server {
    margin-top: 65px;

    .card-feature {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 24px;
        padding: 16px 12px;
        background: rgba(35, 44, 69, 0.4);
        border-radius: 24px;
    }

    .card-feature__title {
        color: var(--text-white);
    }

    .card-feature__desc {
        color: var(--text-opacity);
        font-size: 14px;
    }
}

.index-news {
    margin-top: 64px;
}

.index-news-card {
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .news-more {
            color: var(--text-white);
            font-size: 16px;
            font-weight: 500;
        }
    }

    .content {
        .news-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            color: var(--text-opacity);
            padding: 8px 0;
        }
    }
}

.index-news-card:not(:last-child) {
    border-right: 1px solid #27272C;
    padding-right: 24px;
}

.index-cta {
    margin-top: 65px;
    box-sizing: border-box;
    background: #101015;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*渐变border*/
    border: 1px solid #779FF4;
    border-radius: 24px;

    .separator {
        width: 1px;
        height: 24px;
        background-color: #27272C;
    }
}


/* ===== 页脚 ===== */
.footer {
    background-color: var(--dark-bg);
    border-radius: 24px 24px 0 0;
    border-top: 1px solid #779FF4;
    border-left: 1px solid #779FF4;
    border-right: 1px solid #779FF4;
    padding: 32px;
    margin-top: 40px;

    .footer-logo {
        margin-bottom: 24px;
    }

    .footer-desc {
        font-size: 16px;
        line-height: 1.75em;
        opacity: 0.56;
        max-width: 450px;
    }

    .footer-title {
        font-size: 20px;
        margin-bottom: 8px;
    }

    .footer-link {
        color: var(--text-white);
        text-decoration: none;
        opacity: 0.56;
        font-size: 16px;
        display: block;
        margin-bottom: 8px;
    }

    .footer-link:hover {
        opacity: 1;
        color: var(--text-white);
    }

    .footer-social {
        display: flex;
        gap: 24px;
        justify-content: end !important;
    }

    .social-icon {
        width: 36px;
        height: 36px;
        border-radius: 24px;
        border: 1px solid var(--text-white);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.56;
    }

    .social-icon:hover {
        opacity: 1;
    }


    .footer-separator {
        width: 1px;
        height: 80px;
        background-color: #27272C;
    }

    .footer-bottom {
        border-top: 1px solid #27272C;
        margin-top: 24px;
        padding-top: 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .footer-copyright {
        font-size: 14px;
        line-height: 1.4em;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .footer-policy {
        display: flex;
        align-items: center;
        justify-content: end;
        gap: 16px;
    }

    .policy-link {
        color: var(--text-white);
        text-decoration: none;
        font-size: 14px;
    }

    .policy-separator {
        width: 1px;
        height: 14px;
        background-color: #27272C;
    }
}


/* ===== 侧边联系栏 ===== */
.side-contact {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(16, 16, 21, 0.6);
    border: 1px solid #1F2941;
    border-right: none;
    border-radius: 24px 0 0 24px;
    padding: 24px 8px;
    z-index: 1000;
}

.contact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
    gap: 5px;
    height: 56px;
    cursor: pointer;
}

.contact-item__icon {
    font-size: 24px;
    color: var(--primary-color);
}

.contact-item__text {
    font-size: 14px;
    line-height: 1.4em;
}

.page-banner {
    margin-top: 64px;

    .banner-img {
        width: 415px;
        height: 320px;
    }
}

.page-content-nav {
    height: 64px;
    background: rgba(16, 16, 21, 0.42);
    backdrop-filter: blur(10px);
}

/* 服务器推荐卡片样式 */
.product-recommend {
    margin-top: 60px;
    margin-bottom: 60px;
}

.product-recommend .title {
    font-size: 40px;
    font-weight: 400;
    color: #fff;
    margin-bottom: 12px;
}

.product-recommend .desc {
    font-size: 20px;
    color: #fff;
    opacity: 0.8;
}

.server-card {
    background-color: rgba(16, 16, 21, 0.4);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 28px 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.server-card:hover {
    transform: translateY(-5px);
}

.server-card-header {
    margin-bottom: 24px;
}

.server-title {
    font-size: 24px;
    font-weight: 400;
    color: #fff;
    margin-bottom: 12px;
}

.server-desc {
    font-size: 16px;
    color: #fff;
    opacity: 0.56;
    line-height: 1.4;
}

.server-card-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.server-spec-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.spec-label {
    font-size: 16px;
    color: #fff;
    opacity: 0.56;
}

.spec-value {
    font-size: 16px;
    color: #fff;
}

.server-divider {
    margin: 24px 0;
    border-color: rgba(255, 255, 255, 0.2);
}

.server-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.server-price {
    color: var(--text-white);
    font-size: 20px;
    line-height: 1.4;
}

.server-price .price {
    color: var(--primary-color);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.4;
}

.server-price .price-symbol {
    color: var(--primary-color);
    font-size: 12px;
    line-height: 1.4;
}

.server-price .price-desc {
    color: var(--text-white);
    font-size: 14px;
    line-height: 1.4;
}


.btn-purchase {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 8px 8px 16px;
    background: linear-gradient(to bottom right, #FFD762, #FFD457);
    border: 1px solid;
    border-radius: 32px;
    color: #181510;
    font-size: 16px;
    font-weight: 400;
    text-shadow: 0 1px 0 rgba(255, 240, 97, 1);
    transition: all 0.3s ease;
}

.btn-purchase:hover {
    background: linear-gradient(to bottom right, #FFE072, #FFE067);
    color: #181510 !important;
    transform: scale(1.05);
}

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

/* 新闻资讯列表样式 */
.page-news-list {
    padding-bottom: 40px;
}

.page-news-card {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 42px 0;
}

.page-news-card:first-child {
    padding-top: 0;
}

.page-news-card-content {
    display: flex;
    align-items: center;
    gap: 42px;
}

.page-news-image {
    flex-shrink: 0;
    width: 245px;
    height: 146px;
    overflow: hidden;
}

.page-news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

.page-news-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.page-news-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-news-title {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.8;
    margin: 0;
    color: var(--text-white);
}

.page-news-date {
    font-size: 16px;
    color: var(--text-white);
    opacity: 0.56;
    font-family: 'Gotham', sans-serif;
}

.page-news-desc {
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-white);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 分页控件样式 */
.pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 60px;
}

.pagination {
    display: flex !important;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 8px;
}

.page-item {
    border-radius: 8px;
    overflow: hidden;
}

.page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(35, 44, 69, 0.4);
    color: var(--text-white);
    text-decoration: none;
    transition: background-color 0.3s ease;
    border: unset;
}

.page-item.active .page-link {
    background-color: var(--primary-color);
    color: #181510;
}

.page-item.disabled .page-link {
    opacity: 0.5;
    pointer-events: none;
}

.page-link:hover:not(.page-item.active .page-link) {
    background-color: rgba(35, 44, 69, 0.7);
    color: var(--primary-color);
}

/* 面包屑导航样式 */
.breadcrumb-desc{
    color: var(--text-opacity);
}
.breadcrumb-item a{
    color: var(--text-opacity);
}
.breadcrumb-item+.breadcrumb-item::before{
    color: var(--text-opacity);
}

.breadcrumb-item.active {
    color: var(--text-white);
}

/* 新闻详情页样式 */
.news-detail {
    /*padding: 20px 0;*/
}

.news-detail-header {
    margin-bottom: 32px;
    text-align: center;
}

.news-detail-title {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.83;
    color: var(--text-white);
    margin-bottom: 4px;
}

.news-detail-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    font-size: 16px;
    color: var(--text-white);
    opacity: 0.56;
    font-family: 'Gotham', sans-serif;
}

.news-meta-divider {
    width: 1px;
    height: 16px;
    background-color: rgba(255, 255, 255, 0.2);
}

.news-detail-content {
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-white);
}

.news-detail-content p {
    margin-bottom: 16px;
}

.news-detail-content h2 {
    font-size: 20px;
    font-weight: 400;
    margin: 32px 0 16px;
}

.news-detail-content h4 {
    font-size: 18px;
    font-weight: 400;
    margin: 24px 0 16px;
}

.news-detail-content a {
    color: var(--primary-color);
    text-decoration: none;
}

.news-detail-content a:hover {
    text-decoration: underline;
}

/* 相关资讯卡片 */
.news-related {
    margin-bottom: 60px;
}

.news-related-card {
    background-color: rgba(35, 44, 69, 0.4);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 16px 24px;
    width: 352px;
}

.news-related-title {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-white);
    margin-bottom: 12px;
}

.news-related-divider {
    border: none;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 12px 0;
}

.news-related-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.news-related-item {
    line-height: 2.25;
}

.news-related-item a {
    color: var(--text-white);
    opacity: 0.56;
    text-decoration: none;
    transition: opacity 0.3s, color 0.3s;
}

.news-related-item a:hover {
    opacity: 1;
    color: var(--primary-color);
}

/* 响应式调整 */
@media (max-width: 768px) {
    .news-detail-meta {
        flex-direction: column;
        gap: 8px;
    }
    
    .news-meta-divider {
        display: none;
    }
    
    .news-related-card {
        width: 100%;
    }
}

/* ===== 联系我们页面 ===== */
.page-contact {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.contact-card {
    background-color: rgba(16, 16, 21, 0.4);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.contact-card-title {
    font-size: 32px;
    font-weight: 400;
    color: #fff;
}

.contact-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 56px;
}

.contact-item-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    min-width: 180px;
    max-width: 198px;
}

.contact-item-icon {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background-color: #141926;
    border: 2px solid #1F2941;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-item-icon img {
    width: 36px;
    height: 36px;
}

.contact-item-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.contact-item-title {
    font-size: 24px;
    color: #fff;
}

.contact-item-desc {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
}

.contact-qrcode {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.contact-qrcode img {
    width: 180px;
    height: 180px;
    border-radius: 4px;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .contact-card {
        padding: 24px;
    }
    
    .contact-card-title {
        font-size: 28px;
    }
    
    .contact-list {
        flex-direction: column;
        align-items: center;
    }
    
    .contact-item-card {
        max-width: 100%;
    }
}

/* ===== 关于我们页面 ===== */
.page-content {
    background-color: rgba(16, 16, 21, 0.4);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 32px;
    color: #fff;
}

.page-content p {
    font-size: 16px;
    line-height: 1.5em;
    margin-bottom: 24px;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .page-content {
        padding: 24px;
    }
}

@media (max-width: 992px) {
    .header-nar {
        background: radial-gradient(
                circle at center,
                #1C1E33 75%,
                #101015 100%
        );
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding-bottom: 16px;
    }
    .header-nar .cbtn{
        margin-left: 24px;

    }
    .header-nar .cbtn a{
        border-radius: 6px;

    }
}