/* ==========================================================================
   mobile.css — 手机版专用样式（第一期：主页 naming-index）
   仅在 ≤768px 生效，桌面端零影响。
   设计对齐 Figma 稿：深红中式底(bg_phone.png) + 金圆章header + 金框输入胶囊 + 亮金按钮
   ========================================================================== */

/* 汉堡按钮默认隐藏（桌面），只在手机 media 内显示 */
.nav-burger { display: none; }

@media (max-width: 768px) {

    /* ---- 全局：解除桌面 min-width，换手机竖版背景 ---- */
    html, body {
        min-width: 0 !important;
        overflow-x: hidden;
    }
    body {
        background: #5c0d0d url('../images/bg_phone.png') center top / cover no-repeat fixed;
    }

    /* ---- Header：深红底 + logo + 汉堡 ---- */
    .header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        height: 58px;
        min-height: 58px;
        padding: 0 16px;
        background: #3d0808;
        border-bottom: 1px solid rgba(200, 162, 50, 0.4);
        position: relative;
    }
    .header-logo {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 19px;
        overflow: visible;
    }
    .header-logo img { width: 36px !important; height: 36px !important; }
    .logo-text { display: inline; font-size: 19px; }

    /* 桌面横向导航 → 手机隐藏，改汉堡下拉 */
    .header-nav {
        position: absolute;
        top: 58px;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: #3d0808;
        border: 1px solid rgba(200, 162, 50, 0.4);
        border-radius: 0 0 8px 8px;
        min-width: 180px;
        padding: 6px 0;
        display: none;          /* 默认收起 */
        z-index: 600;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    }
    .header-nav.open { display: flex; }   /* JS 加 .open 展开 */
    .header-nav a {
        padding: 12px 20px;
        font-size: 15px;
        border-bottom: 1px solid rgba(200, 162, 50, 0.15);
        white-space: nowrap;
    }
    .header-nav a:last-child { border-bottom: none; }

    /* 汉堡按钮（HTML 新增 .nav-burger） */
    .nav-burger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 38px;
        height: 32px;
        padding: 6px 8px;
        border: 1px solid rgba(200, 162, 50, 0.6);
        border-radius: 6px;
        background: transparent;
        cursor: pointer;
        box-sizing: border-box;
    }
    .nav-burger span {
        display: block;
        height: 2px;
        border-radius: 1px;
        background: #f0d880;
    }

    /* ---- 口号 ---- */
    .site-slogan {
        font-size: clamp(24px, 7vw, 34px);
        letter-spacing: 3px;
        padding: 18px 12px 10px;
        text-align: center;
    }

    /* ---- 主内容容器 ---- */
    .main { padding: 0 16px 24px; }

    /* ---- 书卷 → 竖排金框卡片 ---- */
    .scroll-wrapper {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 0 16px;
        position: static;
    }
    /* 去掉横向卷轴背景图 */
    .scroll-bg { display: none !important; }

    .scroll-content,
    .scroll-content-foreigner {
        position: static !important;
        top: auto; bottom: auto; left: auto; right: auto;
        display: block !important;
        background: none !important;   /* 清掉桌面 scroll-content 的深色渐变底，露出背景图 */
    }

    /* 两个书卷面板改上下堆叠，各成金框卡（半透明深底：压暗背景纹理保证文字清晰，又透出质感） */
    .scroll-panel {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 20px 18px;
        margin: 0 0 16px;
        gap: 14px;
        background: rgba(40, 7, 7, 0.5);
        border: 1.5px solid rgba(210, 170, 90, 0.7);
        border-radius: 14px;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    .scroll-panel-title {
        text-align: center;
        font-size: 22px;
        margin-bottom: 4px;
        color: #f0d880;                              /* 高亮金，与标签同色，避免和红底混色 */
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);  /* 加暗影提升对比 */
    }
    /* 中间竖分隔线：手机隐藏 */
    .scroll-divider-line { display: none !important; }

    .scroll-panel-form {
        display: flex;
        flex-direction: column;
        gap: 14px;
        width: 100%;
    }

    /* 表单行：label 在上、输入在下（竖排） */
    .scroll-form-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        margin-left: 0;
    }
    .scroll-form-label {
        min-width: 0;
        text-align: left;
        font-size: 14px;
        color: #f0d880;              /* 金色标签（红底上） */
        letter-spacing: 1px;
    }

    /* 输入框：半透明深底 + 金边胶囊 */
    .scroll-form-input,
    .date-input-wrap input,
    #birthdate-measure, #birthdate-name, #birthdate-foreigner {
        width: 100%;
        box-sizing: border-box;
        padding: 11px 14px;
        background: rgba(15, 3, 3, 0.4);
        border: 1.5px solid rgba(210, 170, 90, 0.65);
        border-radius: 22px;
        color: #f5e6c0;
        font-size: 14px;
    }
    .scroll-form-input::placeholder { color: rgba(210, 180, 120, 0.6); }
    .date-input-wrap { max-width: none; width: 100%; }

    /* 单选（性别）横排 */
    .radio-group {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
    }
    .radio-item { color: #f0d880; }
    .radio-label { color: #f0d880; }

    /* 胶囊组（字数偏好） */
    .capsule-group { display: flex; flex-wrap: wrap; gap: 8px; }

    /* 提交按钮：亮金渐变胶囊 */
    .scroll-btn-red,
    .scroll-btn-gold {
        width: 100%;
        margin: 6px 0 0;
        padding: 13px 0;
        border-radius: 24px;
        font-size: 19px;
        border: none;
    }
    .scroll-btn-gold {
        background: linear-gradient(90deg, #fbe08c 0%, #e8b84a 50%, #cc9420 100%);
        color: #3a1000;
    }
    .scroll-btn-red {
        background: linear-gradient(90deg, #fbe08c 0%, #e8b84a 50%, #cc9420 100%);
        color: #3a1000;
    }
    .scroll-form-hint { text-align: center; font-size: 12px; margin-top: 6px; }

    /* ---- 老外书卷：2列网格 → 单列，风格对齐测名/起名 ---- */
    .foreigner-grid { display: block !important; }
    /* 每列(Basic Info / Preferences)包成半透明金框卡片 */
    .foreigner-col {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin: 0 0 16px;
        padding: 20px 18px;
        background: rgba(40, 7, 7, 0.5);
        border: 1.5px solid rgba(210, 170, 90, 0.7);
        border-radius: 14px;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    /* 列标题：高亮金 + 居中，和测名/起名标题一致观感 */
    .foreigner-col-title {
        font-size: 20px;
        color: #f0d880;
        text-align: center;
        border-bottom: 1px solid rgba(210, 170, 90, 0.4);
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
    }
    /* 老外 label：全宽左对齐金色（覆盖 min-width:100px） */
    .fg-label {
        min-width: 0 !important;
        text-align: left;
        font-size: 14px;
        color: #f0d880;
    }
    /* 老外输入框：全宽金框胶囊（覆盖固定 250px） */
    .fg-input {
        width: 100% !important;
        box-sizing: border-box;
        padding: 11px 14px;
        background: rgba(15, 3, 3, 0.4);
        border: 1.5px solid rgba(210, 170, 90, 0.65);
        border-radius: 22px;
        color: #f5e6c0;
        font-size: 14px;
    }
    .fg-input::placeholder { color: rgba(210, 180, 120, 0.6); }
    .foreigner-footer { margin-top: 8px; }

    /* ---- 下方营销区：单列 ---- */
    .cards-section {
        width: 100% !important;
        max-width: 100% !important;
        margin: 8px 0 0 !important;   /* 去掉桌面 -40px 负margin，避免压住上方卡片 */
        padding: 0 !important;
        box-sizing: border-box;
    }
    .cards-container {
        display: block !important;   /* 弃用 flex，避免 column flex 下交叉轴塌成0宽 */
        width: 100%;
        box-sizing: border-box;
    }
    .card {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 12px !important;
        box-sizing: border-box;
    }
    .card-inner-frame { width: 100% !important; box-sizing: border-box; }
    .section-title { font-size: 20px; margin-bottom: 12px; }

    /* 好评：横向可滑 */
    .review-section {
        width: 100% !important;
        max-width: 100% !important;
        margin: 24px 0 0 !important;
        box-sizing: border-box;
    }
    .review-track-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* 易经区：竖排 */
    .bagua-section {
        width: 100% !important;
        max-width: 100% !important;
        margin: 24px 0 0 !important;
        flex-direction: column !important;
        padding: 20px 4px;
        box-sizing: border-box;
    }
    .bagua-img-wrap { width: 160px; margin: 16px auto 0; }

    /* ---- Footer ---- */
    .site-footer { padding: 24px 16px 32px; }
    .footer-notice { font-size: 11px; }
}