/* sections/contact-form/contact-form.css
   覆盖用最终版（稳定版）
   - 去掉“外框线条”（field 外层不画框，禁用伪元素框）
   - 两列布局（PC），移动端一列
   - 统一 input/textarea 样式
   - 提交用 comment（contact[comment]）采用“裁剪隐藏”而非 display:none/opacity/left:-9999（更不容易被序列化过滤）
   - radio 组（购买平台单选）样式
   - 必填红色星号（label.is-required::after）+ 顶部说明样式（contact-form__note）
*/

.contact-form {
    /* background-color: rgb(var(--color-background)); */
}

.contact-form__inner {
    margin-inline: auto;
}

/* 标题 */
.contact-form__title {
    margin-block-end: 30px;
    text-align: center;
}

@media (max-width: 959px) {
    .contact-form__title {
        margin-block-end: 20px;
    }
}

/* 按钮 */
.contact-form__button {
    margin-block-start: 26px;
    text-align: center;
}

@media (min-width: 960px) {
    .contact-form__button .button {
        padding-inline: 48px;
    }
}

@media (max-width: 959px) {
    .contact-form__button {
        margin-block-start: 20px;
    }
}

/* =========================
   Contact form base style
   ========================= */
[data-section-type="contact-form"] .contact-form__inner {
    max-width: 1000px;
}

/* 第一行两列（氏名/メールアドレス） */
[data-section-type="contact-form"] .contact-form__group {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
}

@media (max-width: 959px) {
    [data-section-type="contact-form"] .contact-form__group {
        grid-template-columns: 1fr !important;
    }
}

/* field 外层：去掉外框线条/背景/阴影 */
[data-section-type="contact-form"] .field,
[data-section-type="contact-form"] .form-field,
[data-section-type="contact-form"] .contact-form__field {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;

    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;

    margin-bottom: 18px;
}

/* 有些主题用伪元素画外框线，直接禁用 */
[data-section-type="contact-form"] .field::before,
[data-section-type="contact-form"] .field::after,
[data-section-type="contact-form"] .form-field::before,
[data-section-type="contact-form"] .form-field::after,
[data-section-type="contact-form"] .contact-form__field::before,
[data-section-type="contact-form"] .contact-form__field::after {
    content: none !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* 有些主题给 wrapper 画框（你截图那种“每个入口外框”经常来自这里），一起清掉 */
[data-section-type="contact-form"] .field__inner,
[data-section-type="contact-form"] .field__wrapper,
[data-section-type="contact-form"] .field__container,
[data-section-type="contact-form"] .input-wrapper,
[data-section-type="contact-form"] .form-control {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* label：强制可见 + 统一样式（避免主题把 label 做无障碍隐藏/浮动） */
[data-section-type="contact-form"] .field__label,
[data-section-type="contact-form"] label {
    display: block !important;
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;

    color: #111 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    margin: 0 !important;
    white-space: normal !important;

    /* 防止主题用“无障碍隐藏 label”的写法 */
    clip: auto !important;
    clip-path: none !important;
    height: auto !important;
    overflow: visible !important;

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* input/textarea：统一尺寸与视觉（只保留输入框自己的边框） */
[data-section-type="contact-form"] .field__input,
[data-section-type="contact-form"] input,
[data-section-type="contact-form"] textarea {
    box-sizing: border-box !important;
    width: 100% !important;

    min-height: 48px !important;
    padding: 12px 14px !important;

    border: 1px solid #d6d6d6 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #111 !important;

    font-size: 14px !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
}

/* textarea */
[data-section-type="contact-form"] textarea.field__input,
[data-section-type="contact-form"] textarea {
    min-height: 160px !important;
    resize: vertical;
}

/* placeholder */
[data-section-type="contact-form"] .field__input::placeholder,
[data-section-type="contact-form"] input::placeholder,
[data-section-type="contact-form"] textarea::placeholder {
    color: rgba(17, 17, 17, 0.38) !important;
    opacity: 1 !important;
}

/* focus */
[data-section-type="contact-form"] .field__input:focus,
[data-section-type="contact-form"] input:focus,
[data-section-type="contact-form"] textarea:focus {
    outline: none !important;
    border-color: #111 !important;
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.10) !important;
}

/* =========================
   Hidden submitted comment (IMPORTANT)
   - 不用 display:none / visibility:hidden / opacity:0 / left:-9999
   - 改用“裁剪隐藏（sr-only）”，更不容易被提交序列化过滤
   ========================= */
[data-section-type="contact-form"] .contact-form__comment-hidden {
    position: absolute !important;

    /* sr-only 经典写法 */
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;

    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;

    /* 保持在文档流中可被读取（不要 display:none/visibility:hidden） */
    background: transparent !important;
}

/* =========================
   Purchase site radio group
   ========================= */
[data-section-type="contact-form"] .contact-form__radio-group {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px 16px;
}

[data-section-type="contact-form"] .contact-form__radio {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 400;
}

[data-section-type="contact-form"] .contact-form__radio input[type="radio"] {
    width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    padding: 0 !important;

    /* 不要被 input 通用样式撑高 */
    border-radius: 999px !important;
}

/* =========================
   Required star + note
   ========================= */
[data-section-type="contact-form"] .contact-form__note {
    margin: 0 0 12px 0;
    font-size: 12px;
    color: rgba(17, 17, 17, 0.7);
}

[data-section-type="contact-form"] .contact-form__req {
    color: #d11;
    font-weight: 700;
}

[data-section-type="contact-form"] .field__label.is-required::after {
    content: " *";
    color: #d11;
    font-weight: 700;
}

/* =========================
   REMOVE OUTER FIELD BOX (extra hardening)
   ========================= */
[data-section-type="contact-form"] .contact-form .field,
[data-section-type="contact-form"] .contact-form .field::before,
[data-section-type="contact-form"] .contact-form .field::after {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

[data-section-type="contact-form"] .contact-form .field::before,
[data-section-type="contact-form"] .contact-form .field::after {
    content: none !important;
}

[data-section-type="contact-form"] .contact-form .contact-form__radio-group {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}