/* ==========================================================================
   mianbao.ca - Global CSS Variables & Typography
   Version: 2.0
   ========================================================================== */

:root {
    /* 1. 主色调 (Brand Colors) 
       放弃纯正的红蓝绿，使用带有灰度和质感的现代色彩 */
    --mb-primary: #F5A623; /* 面包品牌黄：温暖、醒目，用于核心按钮、Logo呼应、星级评分 */
    --mb-primary-hover: #E0931B; /* 交互加深色 */
    --mb-secondary: #2C3E50; /* 沉稳深蓝灰：替代纯黑，用于重要标题、辅助背景，显得高端不刺眼 */
    /* 2. 辅助色 (Semantic Colors) */
    --mb-info: #3498DB; /* 链接和可点击元素的标准蓝 */
    --mb-success: #2ECC71; /* 成功状态，或价格/折扣标签 */
    --mb-danger: #E74C3C; /* 强烈的提醒，如未读消息、特价删除线 */
    /* 3. 灰度与背景 (Neutrals & Backgrounds) 
       利用分层的灰色拉开页面空间感，是“高端感”的秘诀 */
    --mb-bg-body: #F4F6F8; /* 全局底层背景，比纯白稍微带点冷灰，让卡片更立体 */
    --mb-bg-card: #FFFFFF; /* 内容卡片纯白底色 */
    --mb-border: #EAECEF; /* 极浅的边框色，若有似无 */
    /* 4. 文字颜色 (Text Colors) */
    --mb-text-main: #333333; /* 正文主色，避免 #000 造成的视觉疲劳 */
    --mb-text-muted: #868E96; /* 辅助文字（时间、次要说明） */
    /* 5. 交互效果 (Transitions & Shadows) */
    --mb-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --mb-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --mb-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.08); /* 鼠标悬浮时的弥散阴影 */
}

/* ==========================================================================
   排版规范 (Typography)
   ========================================================================== */

/* 使用现代系统字体栈：优先调用苹果、微软操作系统的原生无衬线字体，保证中英文混排的最佳渲染 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    background-color: var(--mb-bg-body);
    color: var(--mb-text-main);
    font-size: 16px; /* 基础字号放大，适合移动端阅读 */
    line-height: 1.6; /* 增加行高，留白产生美感 */
    -webkit-font-smoothing: antialiased; /* 让字体在 Mac/iOS 下更锐利 */
}

/* 标题规范：加重字重，收紧行高 */
h1, h2, h3, h4, h5, h6 {
    color: var(--mb-secondary);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.75rem;
}

h1 {
    font-size: 2.25rem;
}
/* 36px */
h2 {
    font-size: 1.75rem;
}
/* 28px */
h3 {
    font-size: 1.5rem;
}
/* 24px */
h4 {
    font-size: 1.25rem;
}
/* 20px */
h5 {
    font-size: 1.125rem;
}
/* 18px */
h6 {
    font-size: 1rem;
}
/* 16px */

/* 链接重置 */
a {
    color: var(--mb-info);
    text-decoration: none;
    transition: var(--mb-transition);
}

    a:hover {
        color: var(--mb-primary);
        text-decoration: none;
    }

/* ==========================================================================
   为了完美融合 Bootstrap 5 的工具类覆盖 (Utility Overrides)
   ========================================================================== */

/* 强制覆盖 BS5 的默认 primary 颜色，使其指向我们的品牌黄 */
.text-primary {
    color: var(--mb-primary) !important;
}

.bg-primary {
    background-color: var(--mb-primary) !important;
}

.btn-primary {
    background-color: var(--mb-primary);
    border-color: var(--mb-primary);
    color: #fff; /* 确保按钮文字为白色 */
}

    .btn-primary:hover {
        background-color: var(--mb-primary-hover);
        border-color: var(--mb-primary-hover);
        color: #fff;
        transform: translateY(-1px);
        box-shadow: var(--mb-shadow-sm);
    }

/* ==========================================================================
   全局通用卡片样式 (High-end Card UI)
   之后我们重构首页黄页和资讯流时会大量用到这个
   ========================================================================== */
.mb-card {
    background-color: var(--mb-bg-card);
    border-radius: 12px; /* 现代感的大圆角 */
    border: 1px solid var(--mb-border);
    box-shadow: var(--mb-shadow-sm);
    transition: var(--mb-transition);
    overflow: hidden;
}

    .mb-card.hover-lift:hover {
        transform: translateY(-4px); /* 悬浮微动效，高级感的来源 */
        box-shadow: var(--mb-shadow-hover);
    }
/* ==========================================================================
   广告位响应式强制缩放补丁
   ========================================================================== */

/* 针对动态加载的中部和底部广告位 */
#Adv-IndexCenter img,
#Adv-IndexBottom img {
    max-width: 100% !important; /* 强制图片最大宽度不超过屏幕 */
    height: auto !important; /* 强制高度自适应，防止图片被拉伸变形 */
    display: block; /* 去除图片底部的默认留白 */
    margin: 0 auto; /* 如果图片比屏幕小，则居中显示 */
    border-radius: 8px; /* 顺手加个现代感的圆角 */
}

/* 如果你的 AJAX 还会返回 iframe (比如 Google Adsense)，也可以顺手控制一下 */
#Adv-IndexCenter iframe,
#Adv-IndexBottom iframe {
    max-width: 100% !important;
}
/* 分页组件现代风格重塑 */
.pagination {
    gap: 5px; /* 按钮之间的间距 */
}

.pagination .page-link {
    border: 1px solid #e9ecef;
    color: #6c757d;
    border-radius: 8px !important; /* 让按钮变圆角 */
    padding: 8px 14px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
}

/* 悬停效果 */
.pagination .page-link:hover {
    background-color: #f8f9fa;
    border-color: var(--bs-primary);
    color: var(--bs-primary);
}

/* 激活页样式 (与你的主题色同步) */
.pagination .page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.2); /* 增加微弱发光感 */
}

/* 禁用状态和省略号 */
.pagination .page-item.disabled .page-link {
    background-color: transparent;
    border-color: transparent;
    color: #dee2e6;
}

/* 图标微调 */
.pagination .page-link i {
    font-size: 0.85rem;
    font-weight: bold;
}
/* 文章卡片悬停时图片微微放大，但不溢出 */
.mb-card.hover-lift .ratio img {
    transition: transform 0.4s ease;
}

.mb-card.hover-lift:hover .ratio img {
    transform: scale(1.05);
}
/* =========================================
   文章详情页富文本内容自适应优化
========================================= */

/* 强制文章内的所有图片不能超过屏幕宽度，并按比例缩放 */
.article-content img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 8px; /* 可选：给正文图片加一点现代感的圆角 */
}

/* 针对广告区块的特殊保护 */
.article-content .ad {
    max-width: 100%;
    overflow: hidden;
    text-align: center;
    margin: 1.5rem 0; /* 给广告上下留出舒服的间距 */
}

/* 兼容 iframe（比如文章里嵌入的 YouTube 视频）自适应 */
.article-content iframe {
    max-width: 100% !important;
}
/* 纯 CSS 现代化星级打分组件 */
.rating-group {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

    .rating-group input {
        display: none;
    }

    .rating-group label {
        color: #dee2e6;
        font-size: 2rem;
        padding: 0 0.2rem;
        cursor: pointer;
        transition: color 0.2s;
    }

        .rating-group label:hover, .rating-group label:hover ~ label, .rating-group input:checked ~ label {
            color: #ffc107;
        }
/* ====================================================
   修复顶部导航栏下拉菜单被下方内容遮挡/裁剪的问题
   ==================================================== */
header,
.header-area,
.main-header,
.site-header {
    position: relative !important;
    z-index: 1050 !important; /* 强制提升层级，高于页面内所有悬浮模块 */
}

    /* 确保头部内的容器不会裁剪溢出的下拉菜单 */
    header .container,
    header .row,
    .header-area .container,
    .header-area .row {
        overflow: visible !important;
    }

/* 确保 Bootstrap 下拉菜单本身的层级足够高 */
.dropdown-menu {
    z-index: 1060 !important;
}
/* 移除原生日期选择器的默认样式，使其更像普通输入框 */
input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    z-index: 2;
}

.input-group:has(input[type="date"]) {
    position: relative;
}

/* 确保输入框文字不会被隐藏的图标遮挡 */
input[type="date"] {
    position: relative;
    z-index: 1;
}
/* 统一输入框组的所有边框颜色 */
.input-group .input-group-text,
.input-group .form-control,
.input-group .btn-outline-secondary {
    border-color: #dee2e6 !important; /* 强制使用统一的浅灰色 */
    background-color: #fff;
}

/* 移除中间多余的边框线条 */
.input-group > .form-control {
    border-left: none !important;
    border-right: none !important;
}

/* 修正输入框聚焦时的阴影和边框，确保整体变蓝 */
.input-group:focus-within {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.1);
    border-radius: 0.375rem;
}

    .input-group:focus-within .input-group-text,
    .input-group:focus-within .form-control,
    .input-group:focus-within .btn-outline-secondary {
        border-color: #86b7fe !important;
    }

.hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .hover-lift:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
    }
/* SweetAlert2 现代皮肤重绘 */
.mb-modern-toast {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
    padding: 1rem 1.5rem !important;
}

.mb-toast-title {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #333 !important;
}