/* wwwroot/css/fortune-post.css */
.zodiac-fortune-article header {
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
}

.zodiac-fortune-article .breadcrumb {
    font-size: 0.85rem;
    background-color: #f8f9fa;
    padding: 0.5rem 1rem;
    border-radius: 4px;
}

.zodiac-fortune-article .breadcrumb-item a {
    text-decoration: none;
}

.fortune-content .section-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--fortune-primary-deep, #3A506B);
    padding-bottom: 0.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--fortune-accent-gold, #B08D57);
    display: inline-block; /* 让边框随文字长度 */
}

.fortune-content p {
    font-size: 1rem;
    line-height: 1.8;
    text-align: justify;
    margin-bottom: 1.5rem;
}

/* wwwroot/css/fortune-post.css */

.zodiac-fortune-article .article-title {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
}

.zodiac-fortune-article .article-meta {
    font-size: 0.85rem;
}

.zodiac-fortune-article .breadcrumb {
    font-size: 0.8rem;
    background-color: transparent; /* 去掉背景 */
    padding: 0.5rem 0;
}

/* --- 核心修改：段落标题卡片化 --- */
.fortune-content .fortune-section-title {
    background-color: #f8f9fa;
    border-left: 5px solid var(--fortune-accent-gold, #B08D57); /* 左侧强调边框 */
    padding: 0.6rem 1.2rem;
    margin-top: 2.5rem; /* 与上段内容的间距 */
    margin-bottom: 1.2rem;
    border-radius: 4px;
}

    .fortune-content .fortune-section-title h4 {
        margin-bottom: 0;
        font-size: 1.3rem;
        font-weight: 600;
        color: var(--fortune-primary-deep, #3A506B);
    }

/* --- 段落内容样式 --- */
.fortune-content .fortune-section-text {
    font-size: 1rem;
    line-height: 1.9; /* 增加行高，提高阅读舒适度 */
    text-align: justify;
    color: #444;
}



.embedded-form-title {
    font-weight: 500;
    color: #c0392b; /* 暗红色 */
}


/* --- 侧边栏样式 --- */
.sidebar-sticky {
    position: sticky; /* 粘性定位 */
    top: 80px; /* 距离顶部80px时开始固定 */
}

.sidebar-widget.card {
    border: 1px solid #e5e5e5;
    border-radius: 6px;
}

.sidebar-widget .widget-header {
    padding: 0.7rem 1rem;
    background-color: #f9f9f9;
    border-bottom: 1px solid #e5e5e5;
}

    .sidebar-widget .widget-header h5 {
        margin-bottom: 0;
        font-size: 0.95rem;
        font-weight: 500;
        color: #333;
    }

/* --- 核心修改：侧边栏生肖列表 --- */
.sidebar-widget .zodiac-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 两列 */
    gap: 1px; /* 单元格之间的细线 */
    background-color: #e5e5e5; /* 作为分隔线的颜色 */
    padding: 1px; /* 解决边框合并问题 */
    border-radius: 0 0 6px 6px; /* 底部圆角 */
    overflow: hidden; /* 确保圆角生效 */
}

.zodiac-grid-item {
    display: block;
    padding: 0.5rem;
    text-align: center;
    text-decoration: none;
    color: #007bff;
    background-color: #fff;
    transition: background-color 0.2s, color 0.2s;
    font-size: 0.9rem;
}

    .zodiac-grid-item:hover {
        background-color: #f0f8ff; /* 淡蓝色悬停背景 */
        color: #0056b3;
    }

/* --- 核心修改：侧边栏热门文章 --- */
.article-list-sidebar .list-group-item {
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
    border-bottom: 1px dotted #eee;
}

    .article-list-sidebar .list-group-item:last-child {
        border-bottom: none;
    }

    .article-list-sidebar .list-group-item a {
        text-decoration: none;
        color: #555; /* 默认灰色 */
    }

        .article-list-sidebar .list-group-item a:hover {
            color: #007bff;
        }
    /* 第一篇文章特殊颜色 */
    .article-list-sidebar .list-group-item.first-hot-article a {
        color: #dc3545; /* 红色 */
        font-weight: 500;
    }



.btn-fortune-submit-v2 {
    background-color: #f39c12;
    border-color: #e67e22;
    color: #fff;
    font-weight: 500;
    padding: 0.5rem 2rem;
    font-size: 1rem;
    border-radius: 5px;
}

    .btn-fortune-submit-v2:hover {
        background-color: #e67e22;
        border-color: #d35400;
        color: #fff;
    }

.form-footer-text-v2 {
    font-size: 0.8rem;
    color: #999;
}



/* --- 推荐：将移除下划线的规则放在这里 --- */
a, a:visited, a:active, a:focus {
    text-decoration: none;
}

    a:hover {
        text-decoration: underline; /* 建议悬停时显示下划线以提示可点击 */
    }

/*
==========================================================================
  (FINAL SOLUTION) RESPONSIVE FORM FOR ARTICLE PAGE (fortune-post.css)
==========================================================================
*/

/* --- 使用高特异性选择器, 确保这些规则只在文章页的嵌入区域生效 --- */

.embedded-form-section .bazi-input-panel-v2 {
    background-color: #fafafa;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 1.5rem;
}

    .embedded-form-section .bazi-input-panel-v2 .panel-divider {
        display: block;
        margin-bottom: 1.5rem;
    }

.embedded-form-section .bazi-input-form .form-row-v2 {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    gap: 1rem 1.5rem; /* 行间距 和 列间距 */
    margin-bottom: 1rem;
}

    .embedded-form-section .bazi-input-form .form-row-v2:last-child {
        margin-bottom: 0;
    }

.embedded-form-section .bazi-input-form .form-group {
    display: flex;
    align-items: center;
    flex-grow: 1; /* 允许组伸展 */
    flex-basis: 240px; /* 基础宽度，小于此宽度则换行 */
    min-width: 200px;
}

.embedded-form-section .bazi-input-form .form-label {
    margin-right: 0.5rem;
    white-space: nowrap;
}

.embedded-form-section .bazi-input-form .input-group-controls {
    display: flex;
    align-items: center;
    flex-grow: 1;
    width: 100%;
}

.embedded-form-section .bazi-input-form .input-group-text {
    padding: 0 0.5rem;
    background: none;
    border: none;
}

.embedded-form-section .bazi-input-form .form-control,
.embedded-form-section .bazi-input-form .form-select {
    min-width: 50px;
    flex: 1 1 auto;
}

/* 提交按钮区域特殊处理 */
.embedded-form-section .bazi-input-form .submit-row {
    margin-top: 1rem;
}

.embedded-form-section .bazi-input-form .submit-group {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.embedded-form-section .bazi-input-panel-v2 {
    background-color: #fafafa;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 1.5rem;
}

    .embedded-form-section .bazi-input-panel-v2 .panel-divider {
        display: block;
        margin-bottom: 1.5rem;
    }

.embedded-form-section .bazi-input-form .form-row-v2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* <<< 关键修改 1: 垂直居中对齐 */
    gap: 1rem 1.5rem;
    margin-bottom: 1rem;
}

    .embedded-form-section .bazi-input-form .form-row-v2:last-child {
        margin-bottom: 0;
    }

.embedded-form-section .bazi-input-form .form-group {
    display: flex;
    align-items: center; /* <<< 关键修改 1: 垂直居中对齐 */
    flex-grow: 1;
    flex-basis: 240px;
    min-width: 200px;
}

.embedded-form-section .bazi-input-form .form-label {
    margin-right: 0.5rem;
    white-space: nowrap;
}

.embedded-form-section .bazi-input-form .input-group-controls {
    display: flex;
    align-items: center;
    flex-grow: 1;
    width: 100%;
}

.embedded-form-section .bazi-input-form .input-group-text {
    padding: 0 0.5rem;
    background: none;
    border: none;
}

/* --- 关键修改 2: 调整输入框宽度 --- */
.embedded-form-section .bazi-input-form .date-group input[name$=".Year"] {
    width: 90px;
}

.embedded-form-section .bazi-input-form .date-group select[name$=".Month"] {
    width: 65px;
}

.embedded-form-section .bazi-input-form .date-group select[name$=".Day"] {
    width: 65px;
}

/* 提交按钮区域特殊处理 */
.embedded-form-section .bazi-input-form .submit-row {
    margin-top: 1rem;
}

.embedded-form-section .bazi-input-form .submit-group {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}


@media (max-width: 575.98px) {

    /* --- 1. 基础布局和间距 --- */
    .embedded-form-section {
        padding: 1.5rem 0.5rem;
    }

        .embedded-form-section .bazi-input-form .form-group {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            width: 100%;
            /* --- 关键修改：减小这里的间距，让布局更紧凑 --- */
            margin-bottom: 0.3rem; /* 原来是 1.25rem, 现在减小了 */
        }

        .embedded-form-section .bazi-input-form .form-label {
            margin-bottom: 0.5rem;
            font-weight: 500;
        }

        /* --- 2. THE CRITICAL FIX: The Input Container --- */
        .embedded-form-section .bazi-input-form .input-group-controls {
            display: flex;
            align-items: center;
            width: 100%;
            flex-wrap: nowrap;
        }

        /* --- 3. THE SUPPORTING FIX: The Inputs Themselves --- */
        .embedded-form-section .bazi-input-form .form-control,
        .embedded-form-section .bazi-input-form .form-select {
            flex: 0 1 auto;
            min-width: 0;
        }

        /* --- 4. 最终的、精细的宽度和间距控制 --- */
        .embedded-form-section .bazi-input-form .input-group-text {
            padding: 0 0.4rem;
            color: #6c757d;
        }

        /* 确保姓名、时辰等单行输入框能占满宽度 */
        .embedded-form-section .bazi-input-form .name-group .form-control,
        .embedded-form-section .bazi-input-form .hour-group .form-select,
        .embedded-form-section .bazi-input-form .gender-group .form-select {
            flex-grow: 1;
        }

        /* --- 5. 提交按钮区域 --- */
        .embedded-form-section .bazi-input-form .submit-group {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 1rem;
            /* 让按钮组与上方有稍大一点的间距，以示区隔 */
            margin-top: 0.5rem;
        }

        .embedded-form-section .bazi-input-form .btn-fortune-submit-v2 {
            width: 100%;
        }
}

/*
============================================================
  THEMED CARD STYLES FOR ARTICLE PAGE
============================================================
*/

/* --- 1. 为文章内嵌的排盘工具应用红色主题 --- */
.embedded-form-section {
    /* --- 关键修改：边框和背景色 --- */
    border: 1px solid #d32f2f;
    background-color: #fffaf9; /* 非常淡的红色背景 */
    padding: 1.5rem;
    border-radius: 8px;
}

.embedded-form-title {
    font-weight: 500;
    color: #b71c1c; /* 确保标题颜色与主题一致 */
}


/* --- 2. 为侧边栏卡片应用红色主题 --- */
.sidebar-widget.card {
    /* --- 关键修改：边框颜色 --- */
    border: 1px solid #d32f2f;
    border-radius: 6px;
}

.sidebar-widget .widget-header {
    /* --- 关键修改：背景和边框颜色 --- */
    padding: 0.7rem 1rem;
    background-color: #fef6f5;
    border-bottom: 1px solid #fde2e0;
}

    .sidebar-widget .widget-header h5 {
        margin-bottom: 0;
        font-size: 0.95rem;
        font-weight: 500;
        /* --- 关键修改：文字颜色 --- */
        color: #b71c1c;
    }

    /*对文章页进行样式优化*/
/* --- 1. 文章整体布局与字体 --- */
.blog-post {
    font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', serif; /* 使用优雅的衬线字体提高阅读感 */
    color: #333;
}

    .blog-post header .fw-bolder {
        font-size: 2.2rem;
        font-weight: 700;
        color: #2c3e50; /* 深蓝灰色标题 */
    }

    .blog-post header .text-muted {
        font-size: 0.85rem;
        color: #7f8c8d;
    }

/* --- 2. 文章正文基础样式 --- */
.blog-content p {
    font-size: 1.1rem; /* 略微增大正文字体 */
    line-height: 2; /* 增加行高，提升阅读舒适度 */
    margin-bottom: 1.75rem;
    text-align: justify;
    letter-spacing: 0.5px;
}

.blog-content a {
    color: #c0392b; /* 主题红色链接 */
    text-decoration: none;
    border-bottom: 1px dotted #c0392b;
    transition: all 0.2s ease-in-out;
}

    .blog-content a:hover {
        color: #fff;
        background-color: #c0392b;
        border-bottom-color: #c0392b;
    }

/* --- 3. 核心：卡片式段落标题 (h2, h3) --- */

/* 二级标题 (##) */
.blog-content h2 {
    font-size: 1.8rem;
    font-weight: 600;
    color: #2c3e50;
    padding: 0.8rem 1.5rem;
    margin-top: 3.5rem; /* 与上一段内容拉开距离 */
    margin-bottom: 1.5rem;
    background-color: #f8f9fa;
    border-left: 5px solid #c0392b; /* 左侧红色强调边框 */
    border-radius: 4px;
}
    /* 为h2标题添加一个装饰性图标 */
    .blog-content h2::before {
        content: '📜'; /* 或者使用Bootstrap Icon: '\F435' */
        /* font-family: 'bootstrap-icons'; */
        margin-right: 0.75rem;
        color: #c0392b;
    }


/* 三级标题 (###) */
.blog-content h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #34495e;
    margin-top: 3rem;
    margin-bottom: 1.2rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e74c3c; /* 红色下划线样式 */
    display: inline-block; /* 让下划线随文字长度 */
}

/* --- 4. 美化其他Markdown元素 --- */

/* 引用块 (>) */
.blog-content blockquote {
    border-left: 4px solid #bdc3c7; /* 灰色引用边框 */
    background-color: #ecf0f1;
    padding: 1rem 1.5rem;
    margin: 2rem 0;
    font-size: 1.05rem;
    font-style: italic;
    color: #555;
}

    .blog-content blockquote p {
        margin-bottom: 0;
    }

/* 无序列表 (*) */
.blog-content ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1.75rem;
}

    .blog-content ul li {
        padding-left: 1.5rem;
        position: relative;
        margin-bottom: 0.75rem;
    }
        /* 自定义列表项的标记 */
        .blog-content ul li::before {
            content: '❖'; /* 或者 '•', '➢' */
            position: absolute;
            left: 0;
            top: 2px;
            color: #e74c3c;
            font-weight: bold;
        }

/* 行内代码 (`) */
.blog-content code {
    background-color: #ecf0f1;
    color: #c0392b;
    padding: 0.2em 0.4em;
    margin: 0;
    font-size: 85%;
    border-radius: 3px;
    font-family: 'Courier New', Courier, monospace;
}


/* --- 5. 确保嵌入的排盘工具样式协调 --- */
.embedded-form-section {
    border: 1px solid #e74c3c; /* 统一使用红色边框 */
    background-color: #fffaf9;
    padding: 2rem;
    border-radius: 8px;
    margin-top: 4rem !important; /* 确保与文章内容有足够间距 */
}

    .embedded-form-section h3 {
        font-size: 1.6rem;
        color: #c0392b;
        border-bottom: none; /* 移除h3的默认下划线 */
        display: block; /* 恢复为块级元素 */
    }