/* wwwroot/css/fortune-main.css */

body {
    font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background-color: #eef1f5; /* 更柔和的浅灰色背景 */
    color: #343a40; /* 主要文字颜色，深灰 */
    line-height: 1.65; /* 增加行高提高可读性 */
}

.fortune-top-deco {
    height: 20px; /* 或根据你的logo/slogan调整 */
    /* background-color: #dee2e6; */ /* 示例：一个浅色条 */
}

.fortune-hero-section {
    /* 可以使用更专业的渐变色或背景图 */
    background-image: linear-gradient(120deg, #5f72be 0%, #3b4a83 100%); /* 深蓝到紫蓝的专业渐变 */
    /* 或者使用纹理背景图 */
    /* background-image: url('../images/chinese_pattern_light.png'); */ /* 假设有这样一个纹理图片 */
    /* background-size: cover; */
    color: white;
    padding: 5rem 1rem 6rem 1rem; /* 增加上下内边距，为卡片上浮留出更多空间 */
    margin-bottom: -4rem; /* 卡片上浮更多 */
    border-bottom-left-radius: 40px; /* 更大的底部圆角 */
    border-bottom-right-radius: 40px;
    position: relative; /* 用于可能的伪元素装饰 */
}

.hero-icon-container i {
    text-shadow: 0px 2px 8px rgba(0,0,0,0.25);
}

.hero-title {
    font-weight: 700;
    letter-spacing: 1px; /* 增加字间距 */
    text-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}

.hero-subtitle {
    font-weight: 300;
    opacity: 0.95;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.1rem; /* 适当增大副标题 */
}

.fortune-input-card {
    border: 1px solid #e0e7ee; /* 淡雅的边框 */
    border-radius: 20px; /* 更大的卡片圆角 */
    background-color: #ffffff;
    position: relative;
    z-index: 10;
    overflow: hidden; /* 防止内部阴影溢出 */
}

    .fortune-input-card .card-title-custom {
        font-weight: 500;
        color: #2c3e50; /* 深蓝灰色标题 */
        font-size: 1.5rem; /* 增大卡片标题 */
    }

.form-label-group { /* 用于包裹一组相关的输入框，如年月日 */
    font-weight: 500;
    font-size: 0.9rem;
    color: #495057;
}

    .form-label-group i {
        color: #667eea; /* 主题色图标 */
    }


.form-floating > .form-control,
.form-floating > .form-select {
    border-radius: 10px; /* 输入框圆角 */
    border: 1px solid #dbe1e8; /* 更柔和的边框色 */
    padding-top: 1.75rem; /* 调整floating label的padding */
    padding-bottom: 0.75rem;
    transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out;
    background-color: #f8f9fc; /* 输入框浅背景 */
}

    .form-floating > .form-control:focus,
    .form-floating > .form-select:focus {
        border-color: #5f72be; /* 主题色强调 */
        box-shadow: 0 0 0 0.25rem rgba(95, 114, 190, 0.2); /* 匹配的阴影 */
        background-color: #fff;
    }

.form-floating > label {
    padding: 1rem 1rem;
    color: #6c757d; /* 标签文字颜色 */
    font-size: 0.95rem;
}

    .form-floating > label i {
        margin-right: 0.3rem;
    }


.custom-form-check .form-check-input {
    border-color: #adb5bd;
    margin-top: 0.25em;
    width: 1.1em; /* 增大复选框 */
    height: 1.1em;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}

    .custom-form-check .form-check-input:checked {
        background-color: #5f72be; /* 主题色 */
        border-color: #5f72be;
    }

.custom-form-check .form-check-label {
    font-size: 0.9rem;
    color: #495057;
    padding-left: 0.5rem; /* 标签与复选框间距 */
}

    .custom-form-check .form-check-label i {
        color: #6c757d;
        cursor: help;
    }


.btn-submit-fortune {
    background-image: linear-gradient(to right, #5f72be 0%, #4a5aa0 100%); /*调整渐变色*/
    border: none;
    padding: 0.9rem 1.5rem; /* 调整按钮padding */
    font-size: 1.15rem;
    font-weight: 500;
    border-radius: 10px; /* 按钮圆角 */
    transition: all 0.3s ease; /* 更平滑的过渡 */
    color: white;
    letter-spacing: 0.5px;
}

    .btn-submit-fortune:hover {
        background-image: linear-gradient(to right, #4a5aa0 0%, #3b4a83 100%);
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    }

    .btn-submit-fortune:active {
        transform: translateY(-1px);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    }

    .btn-submit-fortune .default-icon {
        transition: opacity 0.2s ease-out;
    }

    .btn-submit-fortune .spinner-border {
        transition: opacity 0.2s ease-out;
    }


.card-footer.bg-transparent { /* 页脚背景透明 */
    border-top: 1px solid #e9ecef;
}

.card-footer i {
    margin-right: 0.3rem;
}

.text-danger.small.d-block { /* 确保验证错误信息可见 */
    min-height: 1.2em; /* 给错误信息留出空间，防止布局跳动 */
}


/* Placeholder 颜色 */
.form-control::placeholder {
    color: #99a3ad;
    opacity: 1;
}

.form-control:-ms-input-placeholder {
    color: #99a3ad;
}

.form-control::-ms-input-placeholder {
    color: #99a3ad;
}


@@media (max-width: 767.98px) {
    .fortune-hero-section {
        padding: 3.5rem 1rem 4.5rem 1rem; /* 调整移动端padding */
        margin-bottom: -3rem;
    }

    .fortune-input-card .card-body {
        padding: 2rem 1.5rem !important;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .btn-submit-fortune {
        font-size: 1.05rem;
        padding: 0.8rem 1.2rem;
    }
}

:root {
    --fortune-primary-deep: #3A506B; /* 深蓝灰色，专业感 */
    --fortune-primary-medium: #5C8D89; /* 沉稳的青蓝色 */
    --fortune-accent-gold: #B08D57; /* 淡雅的金色点缀 */
    --fortune-text-main: #333333; /* 主要文字 */
    --fortune-text-secondary: #555555; /* 次要文字 */
    --fortune-bg-body: #f7f9fc; /* 非常浅的蓝灰色背景 */
    --fortune-bg-card: #ffffff;
    --fortune-border-light: #e0e7ee;
}


body {
    font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Noto Sans SC 优先 */
    background-color: var(--fortune-bg-body);
    color: var(--fortune-text-main);
    line-height: 1.65;
    padding-top: 70px; /* 为 fixed-top navbar 留出空间 */
}

.main-content-area {
    /* 这个区域可以根据需要设置最小高度，确保页脚总在底部 */
    /* min-height: calc(100vh - 70px - 73px); */ /* 视口高度 - navbar高度 - footer高度 */
}


/* --- 自定义导航栏样式 --- */
/* 品牌和导航项使用衬线字体增加典雅感  font-family: 'Noto Serif SC', serif;*/
.navbar-custom-fortune {
    background-color: #fdfbf5; /* 温暖的米白色或非常浅的米黄色 */
    border-bottom: 1px solid #e0d6c1; /* 与背景协调的边框 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 更柔和的阴影 */
  
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    transition: background-color 0.3s ease-in-out;
}
    /* （可选）滚动时导航栏背景变化
.navbar-custom-fortune.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
}
*/

    .navbar-custom-fortune .navbar-brand {
        color: var(--fortune-primary-deep) !important;
        font-size: 1.6rem; /* 调整品牌大小 */
        font-weight: 700; /* 加粗 */
        letter-spacing: 1px;
    }

        .navbar-custom-fortune .navbar-brand i {
            color: var(--fortune-accent-gold); /* 图标用点缀色 */
            font-size: 1.5rem; /* 调整图标大小 */
            vertical-align: -0.15em;
        }

    .navbar-custom-fortune .nav-link {
        color: var(--fortune-text-secondary) !important;
        font-size: 1rem; /* 调整导航项字体大小 */
        font-weight: 500;
        margin-left: 1rem; /* 导航项之间的间距 */
        padding: 0.5rem 0.8rem;
        border-radius: 6px; /* 轻微圆角 */
        transition: color 0.2s ease, background-color 0.2s ease;
    }

        .navbar-custom-fortune .nav-link i {
            margin-right: 0.4rem;
            vertical-align: -0.1em;
        }

        .navbar-custom-fortune .nav-link:hover,
        .navbar-custom-fortune .nav-link.active {
            color: var(--fortune-primary-deep) !important;
            background-color: rgba(var(--bs-primary-rgb), 0.05); /* 使用Bootstrap主色的淡背景 */
        }
        /* 当前激活页面的链接可以有更强的指示 */
        .navbar-custom-fortune .nav-link.active {
            font-weight: 700;
            /* color: var(--fortune-accent-gold) !important; */ /* 或者用点缀色 */
        }


    .navbar-custom-fortune .navbar-toggler {
        border-color: var(--fortune-border-light);
    }

    .navbar-custom-fortune .navbar-toggler-icon {
        /* 使用Bootstrap默认的toggler图标，或者自定义SVG并用 var(--fortune-primary-deep) 控制颜色 */
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(58, 80, 107, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

.footer.text-muted {
    font-size: 0.85rem;
}

.footer a {
    color: var(--fortune-primary-medium);
    text-decoration: none;
}

    .footer a:hover {
        text-decoration: underline;
    }


/* --- 首页 Hero Section 和输入卡片的补充样式 (与之前Index页面的CSS整合) --- */
.fortune-hero-section {
    /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
    background-image: linear-gradient(120deg, var(--fortune-primary-deep) 0%, var(--fortune-primary-medium) 100%);
    color: white;
    padding: 5rem 1rem 6rem 1rem;
    margin-bottom: -4rem;
    border-bottom-left-radius: 50px; /* 更圆滑的底部 */
    border-bottom-right-radius: 50px;
    position: relative;
}

.hero-icon-container i {
    text-shadow: 0px 2px 8px rgba(0,0,0,0.25);
    color: rgba(255,255,255,0.8); /* 图标略透明 */
}

.hero-title {
    font-family: 'Noto Serif SC', serif; /* 标题用衬线字体 */
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}

.navbar-fortune .navbar-brand {
    /* 保留你之前的字体和颜色或调整 */
    font-family: 'STKaiti', 'KaiTi', 'FangSong', serif;
    color: #8c6d3f; /* 一个更沉稳的棕金色，可以调整 */
    font-size: 1.9rem; /* 略微调整大小 */
    font-weight: bold; /* 楷体、仿宋通常 bold 效果不错 */
    letter-spacing: 1.5px; /* 略微增加字间距 */
    /* 尝试添加一些质感 */
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6), /* 顶部高光 */
    0px 2px 3px rgba(100, 70, 30, 0.2); /* 轻微的深色投影增加立体感 */
    /* 如果想尝试渐变文字 (需要调整HTML结构，将文字包裹在span内) */
    /* background: linear-gradient(135deg, #a08860, #7c5c1e); */
    /* -webkit-background-clip: text; */
    /* -webkit-text-fill-color: transparent; */
    /* background-clip: text; */
    /* text-fill-color: transparent; */
    /* padding: 2px; */ /* 渐变文字可能需要微调padding */
}

    .navbar-fortune .navbar-brand i {
        color: #a08860; /* 图标颜色与品牌文字协调 */
        margin-right: 8px; /* 图标与文字间距 */
        font-size: 1.6rem; /* 调整图标大小 */
        vertical-align: -0.1em; /* 微调垂直对齐 */
    }
header nav.navbar.navbar-custom-fortune { /* 确保针对的是header内的特定导航栏 */
    background-color: #ffffff !important; /* 强制白色背景，如果被其他样式覆盖 */
    border-bottom: 1px solid var(--fortune-border-light);
    font-family: 'Noto Serif SC', serif; /* 衬线字体用于导航栏 */
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* 默认的轻微阴影 */
}

/*页面增加背景色样式*/
/* 1. 设置一个非常浅的灰色背景，让白色内容区有对比 */
body {
    background-color: #f8f9fa;
    padding-top:0px
}

/* 2. 核心：定义首页导航栏的红色背景 */
/* 由于此CSS文件只在首页加载，所以这个规则只会影响首页 */
.navbar-custom-fortune {
    /* 使用一个大气、沉稳的中国红渐变 */
    background: linear-gradient(135deg, #c0392b 0%, #a93226 100%) !important;
    /* 增加一个更匹配红色背景的阴影 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    border-bottom: none !important; /* 红色背景下不再需要底部边框 */
}

    /* 3. 调整导航栏文字颜色，使其在红色背景上清晰可见 */
    .navbar-custom-fortune .navbar-brand,
    .navbar-custom-fortune .nav-link {
        color: rgba(255, 255, 255, 0.9) !important;
        font-weight: 500;
        transition: color 0.2s ease-in-out;
    }

        /* 鼠标悬停和活动状态时，文字变为纯白 */
        .navbar-custom-fortune .nav-link:hover,
        .navbar-custom-fortune .nav-link.active,
        .navbar-custom-fortune .navbar-brand:hover {
            color: #ffffff !important;
        }

    /* 4. 调整移动端汉堡菜单按钮的颜色 */
    .navbar-custom-fortune .navbar-toggler {
        border-color: rgba(255, 255, 255, 0.25) !important;
    }

    .navbar-custom-fortune .navbar-toggler-icon {
        /* 使用内联SVG，将图标颜色直接改为白色 */
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

/* --- 付费墙价格样式 --- */
.price-container {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 0.75rem; /* 元素之间的间距 */
}

.price-label {
    font-size: 1rem;
    color: #555;
    font-weight: 500;
}

.current-price {
    font-size: 2.2rem; /* 突出特价 */
    font-weight: bold;
    color: #dc3545; /* 醒目的红色 */
}

.original-price {
    font-size: 1rem;
    color: #6c757d; /* 灰色 */
    text-decoration: line-through; /* 关键：划线效果 */
}