/* wwwroot/css/fortune-home-v2.css (替换或合并) */

/* --- 页面基础和引言 (与新参考图风格一致) --- */
body {
    background-color: #f5f5f5; /* 非常浅的灰色背景 */
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif; /* 现代无衬线字体 */
    color: #333;
}

.page-container {
    max-width: 992px; /* LG 断点宽度 */
}



.intro-title {
    font-size: 2.2rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 1rem;
}

.intro-text {
    font-size: 1rem;
    color: #666;
    line-height: 1.8;
    max-width: 750px;
    margin: auto;
}




/* --- 内容区域卡片样式 (与新参考图风格一致) --- */
.content-section.card {
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    background-color: #fff;
}

.content-section .card-header {
    background-color: #f9f9f9;
    border-bottom: 1px solid #e5e5e5;
    padding: 0.8rem 1.2rem;
}

    .content-section .card-header h5 {
        color: #333;
        font-size: 1rem;
        font-weight: 500;
    }

        .content-section .card-header h5 i {
            font-size: 1em; /* 图标与文字等大 */
            margin-right: 0.6rem;
            vertical-align: -0.1em;
        }

    .content-section .card-header .category-tabs a {
        text-decoration: none;
        color: #007bff;
        font-size: 0.85rem;
        margin-left: 1rem;
    }

        .content-section .card-header .category-tabs a.active {
            font-weight: bold;
        }

.content-section .article-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

    .content-section .article-list li {
        padding: 0.6rem 0;
        border-bottom: 1px dotted #e9e9e9;
        font-size: 0.9rem;
    }

        .content-section .article-list li:last-child {
            border-bottom: none;
        }

    .content-section .article-list a {
        text-decoration: none;
        color: #333;
    }

        .content-section .article-list a:hover {
            color: #007bff;
        }

.article-category {
    color: #888;
    margin-right: 0.5rem;
}

.zodiac-list li::before {
    content: '•'; /* 用圆点代替 > */
    color: #007bff;
    margin-right: 0.5rem;
}

/*
========================================================================
  (FINAL SOLUTION) FORM STYLES FOR HOMEPAGE (fortune-home-v2.css)
========================================================================
*/
.bazi-input-panel-v2 {
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 2rem;
}

    .bazi-input-panel-v2 .panel-divider {
        margin-top: 0;
        margin-bottom: 2rem;
        border-color: #f0f0f0;
    }

/* --- 核心桌面布局：确保只在首页生效 --- */
.bazi-input-form .form-row-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem; /* 左右大组的间距 */
    margin-bottom: 1.25rem;
}

.bazi-input-form .form-group {
    display: flex;
    align-items: center;
    flex: 1 1 45%;
}

.bazi-input-form .form-label {
    flex: 0 0 50px; /* 固定宽度，不伸缩不压缩 */
    text-align: right;
    margin-right: 10px;
    color: #555;
    font-size: 0.9rem;
    margin-bottom: 0; /* 移除底部间距 */
}

.bazi-input-form .input-group-controls {
    display: flex;
    align-items: center;
    flex-grow: 1;
}

.bazi-input-form .input-group-text {
    padding: 0 0.3rem;
    color: #6c757d;
    background: none;
    border: none;
}

/* 控件样式 */
.bazi-input-form .form-control,
.bazi-input-form .form-select {
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

    .bazi-input-form .form-control:focus,
    .bazi-input-form .form-select:focus {
        border-color: #f39c12;
        box-shadow: 0 0 0 0.2rem rgba(243, 156, 18, 0.25);
    }

/* 精确控制宽度以匹配图片 */
.bazi-input-form .date-group input[name$=".Year"] {
    width: 80px;
    flex-shrink: 0;
}

.bazi-input-form .date-group select {
    width: 70px;
    flex-shrink: 0;
}

.bazi-input-form .name-group .form-control {
    flex-grow: 1;
}

.bazi-input-form .hour-group .form-select {
    flex-grow: 1;
}

.bazi-input-form .gender-group .form-select {
    flex-grow: 1;
}

/* 提交按钮区域 */
.bazi-input-form .submit-row .form-group {
    padding-left: 60px; /* 50px标签宽度 + 10px间距 */
    align-items: center;
    flex-wrap: wrap; /* 允许提示文字换行 */
    gap: 1rem;
}



/* --- 移动端样式 (只影响首页) --- */
@media (max-width: 767.98px) {
    .bazi-input-form .form-row-v2 {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-bottom: 0;
    }

    .bazi-input-form .form-group {
        margin-bottom: 1.25rem;
    }

    .bazi-input-form .form-label {
        flex-basis: auto; /* 取消固定宽度 */
        text-align: left;
        margin-bottom: 0.5rem;
    }

    .bazi-input-form .form-group,
    .bazi-input-form .submit-row .form-group {
        flex-direction: column;
        align-items: stretch;
        padding-left: 0;
    }

    .bazi-input-form .submit-group .btn {
        width: 100%;
    }

    .bazi-input-form .submit-group .form-footer-text-v2 {
        text-align: center;
        width: 100%;
    }
}

.site-intro-section {
    /* --- 关键修改：大大减小这里的顶部内边距 --- */
    padding-top: 2rem; /* 原来可能是80px, 现在改为一个更合理的值(约32px) */

    padding-bottom: 1rem; /* 同时也可以调整底部间距 */
    text-align: center;
    margin-bottom: 2rem; /* 与下方排盘工具的间距 */
}

    /* 确保标题和文本颜色是正确的（以防万一） */
    .site-intro-section .intro-title {
        color: #333;
        font-weight: 700;
        text-shadow: none;
    }

    .site-intro-section .intro-text {
        color: #666;
    }

    /*ces*/

/* --- 1. 首页专用的红色导航栏 (保持不变) --- */
.main-navbar {
    background: linear-gradient(to right, #d32f2f, #b71c1c) !important;
}


/* --- 2. 首页引言部分的间距修正 --- */

/* 
  --- 解决方案 A (推荐): 为父容器创建一个块格式化上下文(BFC) ---
  这是最现代、最干净的方法。
*/
.site-intro-section {
    display: flow-root; /* 关键！这会创建一个新的BFC，阻止子元素的margin溢出 */
    padding-top: 2rem; /* 现在，这个padding可以精确控制间距了！ */
    padding-bottom: 0rem;
    text-align: center;
    margin-bottom: 0rem;
}

    /* 无论用哪种方案，都建议重置标题的margin，以便精确控制 */
    .site-intro-section .intro-title {
        margin-top: 0;
        margin-bottom: 1rem;
        color: #333;
        font-weight: 700;
    }

    .site-intro-section .intro-text {
        color: #666;
        line-height: 1.8;
    }

.main-navbar {
    background: linear-gradient(to right, #d32f2f, #b71c1c) !important;
}

/* --- 2. This rule adds cái padding-top for the intro section --- */
/* Now that the rogue margin is gone, this padding will work correctly */
.site-intro-section {
    padding-top: 0rem; /* You can now adjust this value freely */
    text-align: center;
    margin-bottom: 0.3rem;
}


/*
============================================================
  THEMED CARD STYLES FOR HOMEPAGE
============================================================
*/

/* --- 1. 为排盘工具卡片应用红色边框 --- */
.bazi-input-panel-v2 {
    background-color: #fff;
    /* --- 关键修改：边框颜色从灰色改为主题红 --- */
    border: 1px solid #d32f2f;
    border-radius: 6px;
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(211, 47, 47, 0.1); /* 增加一个淡淡的红色阴影 */
}

/* --- 2. 为热门文章等内容卡片应用红色主题 --- */
.content-section.card {
    /* --- 关键修改：边框颜色从灰色改为主题红 --- */
    border: 1px solid #d32f2f;
    border-radius: 6px;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(211, 47, 47, 0.1); /* 增加一个淡淡的红色阴影 */
}

/* --- 3. 让卡片头部也匹配红色主题 --- */
.content-section .card-header {
    /* --- 关键修改：使用浅红色背景，文字颜色也相应调整 --- */
    background-color: #fef6f5; /* 非常浅的红色背景 */
    border-bottom: 1px solid #fde2e0; /* 配套的浅红色下边框 */
    padding: 0.8rem 1.2rem;
}

    .content-section .card-header h5 {
        color: #b71c1c; /* 使用更深的红色作为标题颜色 */
        font-size: 1rem;
        font-weight: 500;
    }