/* フォント読み込み中の表示遅延を防ぐ */
@font-face {
  font-family: 'Zen Maru Gothic';
  font-display: swap;
}
body {
  font-display: swap;
}


/* ========================================================
   MOCOMOCO 预约表单全流程美化版 (输入页紧凑 + 确认页订单卡)
   ======================================================== */
@media (max-width: 768px) {

    /* ----------------------------------------------------
       1. 全局重置：彻底消除表格与浮动错位
       ---------------------------------------------------- */
    #booking-form table, 
    .mts-booking-table, 
    .form-table,
    fieldset table {
        display: block !important;
        width: 100% !important;
        border: none !important;
        float: none !important;
        clear: both !important;
    }

    /* 彻底修复人数与选项横向碰撞打架的 Bug */
    #booking-form tr, 
    .form-table tr,
    #booking-form table.count-table,
    #booking-form td table {
        display: block !important;
        width: 100% !important;
        margin-bottom: 12px !important;
        background: transparent !important;
        border: none !important;
        float: none !important;
        clear: both !important;
    }

    #booking-form th, 
    .form-table th {
        display: block !important;
        width: 100% !important;
        background: transparent !important;
        border: none !important;
        padding: 4px 0 2px 0 !important;
        color: #777777 !important; /* 标签小字，凸显层级 */
        font-size: 0.85rem !important;
        font-weight: normal !important;
        text-align: left !important;
        float: none !important;
        clear: both !important;
    }

    #booking-form td, 
    .form-table td {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-sizing: border-box !important;
        float: none !important;
        clear: both !important;
    }

    /* ----------------------------------------------------
       2. 输入页面专属：套餐卡片与姓名并排
       ---------------------------------------------------- */
    /* 仅在【输入页面】将「姓名/片假名」左右 50% 并排 */
    #booking-form:has(input[type="text"]) input[name*="family_name"],
    #booking-form:has(input[type="text"]) input[name*="first_name"],
    #booking-form:has(input[type="text"]) input[name*="family_kana"],
    #booking-form:has(input[type="text"]) input[name*="first_kana"] {
        width: 48.5% !important;
        display: inline-block !important;
        margin-bottom: 6px !important;
    }

    /* 输入框统一高度与样式 */
    #booking-form input[type="text"],
    #booking-form input[type="email"],
    #booking-form input[type="tel"] {
        display: block !important;
        width: 100% !important;
        height: 40px !important;
        padding: 6px 10px !important;
        border: 1px solid #dcdcdc !important;
        border-radius: 6px !important;
        background: #ffffff !important;
        font-size: 16px !important;
        color: #333333 !important;
        box-sizing: border-box !important;
        margin: 2px 0 8px 0 !important;
    }

    /* 增大备注/需求输入框 */
    #booking-form textarea {
        display: block !important;
        width: 100% !important;
        min-height: 110px !important;
        padding: 10px !important;
        border: 1.5px solid #dcdcdc !important;
        border-radius: 8px !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
        margin-top: 4px !important;
    }

    /* 套餐选择卡片 */
    #booking-form td label:has(input[type="checkbox"]),
    #booking-form td label:has(input[type="radio"]) {
        display: flex !important;
        align-items: center !important;
        background: #ffffff !important;
        border: 1px solid #e8e8e8 !important;
        border-radius: 8px !important;
        padding: 8px 12px !important;
        margin-bottom: 6px !important;
        font-size: 0.86rem !important;
        color: #333333 !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    #booking-form td label:has(input:checked) {
        border-color: #d81b60 !important;
        background: #fff8f9 !important;
    }

    #booking-form td input[type="checkbox"],
    #booking-form td input[type="radio"] {
        width: 18px !important;
        height: 18px !important;
        margin-right: 10px !important;
        accent-color: #d81b60 !important;
    }

    /* 仅在【输入页面且存在 textarea】时，将最后的备注框替换为亲切的「ご要望・ご質問（任意）」 */
    #booking-form:has(textarea) fieldset:has(textarea) legend {
        font-size: 0 !important;
    }
    #booking-form:has(textarea) fieldset:has(textarea) legend::after {
        content: "ご要望・ご質問（任意）" !important;
        font-size: 0.95rem !important;
        font-weight: bold !important;
        color: #d81b60 !important;
    }

    /* ----------------------------------------------------
       3. 确认页面专属优化（订单明细小票风格）
       ---------------------------------------------------- */
    /* 确认页面外框卡片 */
    #booking-form fieldset {
        border: 1px solid #f0e2e5 !important;
        border-radius: 12px !important;
        padding: 16px 14px !important;
        margin-bottom: 20px !important;
        background: #ffffff !important;
        box-shadow: 0 4px 15px rgba(216, 27, 96, 0.04) !important;
    }

    /* 修复确认页大标题：强制显示为规范的「ご予約内容の確認」 */
    #booking-form:not(:has(textarea)) fieldset legend {
        font-size: 0 !important;
    }
    #booking-form:not(:has(textarea)) fieldset legend::after {
        content: "ご予約内容の確認" !important;
        font-size: 1.05rem !important;
        font-weight: bold !important;
        color: #d81b60 !important;
        padding: 0 4px !important;
    }

    /* 确认页各项具体数值文字加粗、变清晰 */
    #booking-form:not(:has(textarea)) td {
        font-size: 0.95rem !important;
        color: #222222 !important;
        font-weight: 600 !important;
        line-height: 1.6 !important;
        margin-bottom: 12px !important;
        padding-bottom: 8px !important;
        border-bottom: 1px dashed #f5e6e8 !important; /* 项与项之间的轻柔虚线分割 */
    }

    /* 确认页的人数（男性/女性）小表格美化为胶囊徽章 */
    #booking-form:not(:has(textarea)) .count-table,
    #booking-form:not(:has(textarea)) td table {
        background: #fff8f9 !important;
        border-radius: 8px !important;
        padding: 8px 12px !important;
        margin: 6px 0 !important;
        display: table !important; /* 维持男女两列并排 */
        width: auto !important;
    }
    #booking-form:not(:has(textarea)) .count-table tr {
        display: table-row !important;
    }
    #booking-form:not(:has(textarea)) .count-table th,
    #booking-form:not(:has(textarea)) .count-table td {
        display: table-cell !important;
        width: auto !important;
        padding: 2px 14px !important;
        text-align: center !important;
        border: none !important;
    }

    /* 确认页的按钮（返回与确认提交） */
    #booking-form:not(:has(textarea)) input[type="submit"],
    #booking-form:not(:has(textarea)) input[type="button"] {
        display: block !important;
        width: 100% !important;
        height: 48px !important;
        border-radius: 30px !important;
        font-size: 1rem !important;
        font-weight: bold !important;
        margin-top: 10px !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    /* 确认提交按钮高亮（主按钮） */
    #booking-form:not(:has(textarea)) input[type="submit"] {
        background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%) !important;
        color: #ffffff !important;
        border: none !important;
        box-shadow: 0 4px 15px rgba(220, 20, 60, 0.3) !important;
    }

    /* 返回修改按钮（次要按钮） */
    #booking-form:not(:has(textarea)) input[type="button"] {
        background: #ffffff !important;
        color: #666666 !important;
        border: 1px solid #cccccc !important;
    }
}

/* ========================================================
   MOCOMOCO 预约流程页面：隐藏顶部多余横幅与重复大标题
   ======================================================== */
@media (max-width: 768px) {

    /* 1. 隐藏预约页面的顶部大图横幅与面包屑导航 */
    body:has(#booking-form) .page_header,
    body:has(#booking-form) #page_header,
    body:has(#booking-form) .page_header_wrap,
    body:has(#booking-form) #header_image,
    body:has(#booking-form) .breadcrumb,
    body:has(#booking-form) #breadcrumb {
        display: none !important;
    }

    /* 2. 隐藏 MTS 插件自带的生硬大标题「ご予約ありがとうございました。」 */
    #booking-form h2:first-of-type,
    .entry-content > h2:first-child,
    .page h2:has(+ .moco-complete-wrap),
    h2:has(+ div > .moco-complete-wrap) {
        display: none !important;
    }

    /* 3. 消除顶部多余的空白间距，让卡片直接位于最上方 */
    body:has(#booking-form) .entry-content,
    body:has(#booking-form) #main_content,
    body:has(#booking-form) article {
        padding-top: 10px !important;
        margin-top: 0 !important;
    }
}