/**
 * GFR Public CSS - Styles for step transitions, buttons, error display, and responsive layout
 * Main form styling comes from the existing theme CSS
 */

/* Step visibility */
.gfr-step {
    transition: opacity 0.3s ease;
}

/* ======================================
   GFR Form Reset - テーマスタイルの上書き
   #gfr-form-wrapper 配下で確実に効くよう詳細度を確保
====================================== */
#gfr-form-wrapper {
    overflow-x: hidden;
    max-width: 100%;
}

#gfr-form-wrapper .form_requestaquotecontact,
#gfr-form-wrapper .form_commoncontact {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
}

#gfr-form-wrapper .form_requestaquotecontact .column_3 .right.flex,
#gfr-form-wrapper .form_requestaquotecontact .column .right,
#gfr-form-wrapper .form_requestaquotecontact .column .left,
#gfr-form-wrapper .form_requestaquotecontact .column_3 .left,
#gfr-form-wrapper .form_commoncontact .column .right,
#gfr-form-wrapper .form_commoncontact .column .left {
    max-width: 100% !important;
}

#gfr-form-wrapper .form_requestaquotecontact p,
#gfr-form-wrapper .form_commoncontact p {
    max-width: 100% !important;
}

/* blog_parts 内のコンテンツリセット */
#gfr-form-wrapper .p-blogParts p,
#gfr-form-wrapper .swell-block-accordion__body p {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: auto !important;
}

/* ======================================
   Button styles
====================================== */

/* 「次へ進む」ボタン */
#gfr-btn-next {
    display: block;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    background: #009944;
    color: #f7f7f7;
    border: none;
    padding: 1em 2em;
    font-size: 1.125em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#gfr-btn-next:hover {
    background: #003705;
    color: #f7f7f7;
}

/* 「送信する」ボタン */
#gfr-btn-submit {
    display: block;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    background: #009944;
    color: #f8faf5;
    border: none;
    padding: 1em 2em;
    font-size: 1.125em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-bottom: 1rem !important;
}

#gfr-btn-submit:hover {
    background: #003705;
    color: #f8faf5;
}

/* 「修正する」ボタン */
#gfr-btn-back {
    display: block;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    background: #060606;
    color: #ffffff;
    border: none;
    padding: 1em 2em;
    font-size: 1.125em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#gfr-btn-back:hover {
    background: #32373c;
    color: #ffffff;
}

/* ======================================
   Button container centering
====================================== */
.btn_submit {
    text-align: center;
    margin: 1.5rem 0;
}

/* ======================================
   Privacy acceptance centering
====================================== */
.privacy-acceptance {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1rem 0;
}

.privacy-acceptance a.text_color_green{
color: #009944;
}

/* ======================================
   Checkbox accent color
====================================== */
#gfr-form-wrapper .wpcf7-checkbox input[type="checkbox"]:checked,
#gfr-form-wrapper input[type="checkbox"].privacy-check:checked {
    accent-color: #009944;
}

#gfr-form-wrapper .wpcf7-checkbox input[type="checkbox"],
#gfr-form-wrapper .privacy-acceptance input[type="checkbox"] {
    margin-right: 0.5em;
    margin: 0 0.5em;
}

#gfr-form-wrapper .wpcf7-checkbox label {
    cursor: pointer;
    padding: 0.3em 0;
}

/* ======================================
   Field notes (sub-label descriptions)
====================================== */
.form_requestaquotecontact .column .right p.gfr-field-note,
.form_commoncontact .column .right p.gfr-field-note,
p.gfr-field-note {
    font-size: 0.8em;
    color: #e60012;
    font-weight: normal;
    margin: 0 0 0.5rem;
}

/* ======================================
   Error messages
====================================== */
.error-message {
    color: #dc3545;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

/* Error summary (placed below submit button) */
#gfr-error-summary {
    background: #ffffff;
    border: 2px solid #dc3545;
    border-radius: 6px;
    padding: 1rem 1.5rem;
    margin-top: 1.5rem;
}

/* ======================================
   Upload progress
====================================== */
.upload-progress-wrap {
    margin-top: 0.5rem;
}

.upload-progress-bar {
    transition: width 0.2s ease;
}

/* ======================================
   Photo preview in form
====================================== */
.photo-preview {
    max-width: 100%;
    height: auto;
    margin-top: 0.5rem;
    border-radius: 4px;
}

/* Confirm screen photo preview */
.preview-img {
    max-width: 100%;
    height: auto;
    margin-bottom: 0.5rem;
    border-radius: 4px;
}

/* ======================================
   Button states
====================================== */
.wpcf7-submit.is-uploading {
    opacity: 0.6;
    cursor: not-allowed;
}

.wpcf7-submit:disabled,
#gfr-btn-next:disabled,
#gfr-btn-submit:disabled,
#gfr-btn-back:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ======================================
   Honeypot
====================================== */
[aria-hidden="true"] input[name="gfr_hp_field"] {
    position: absolute;
    left: -9999px;
}

/* ======================================
   SP (Mobile) responsive styles
====================================== */
@media (max-width: 768px) {
    /* column / column_3: SP縦積みリセット */
    #gfr-form-wrapper .column,
    #gfr-form-wrapper .column_3 {
        flex-direction: column !important;
    }

    #gfr-form-wrapper .column .left,
    #gfr-form-wrapper .column_3 .left,
    #gfr-form-wrapper .column .right,
    #gfr-form-wrapper .column .right.flex,
    #gfr-form-wrapper .column_3 .right,
    #gfr-form-wrapper .column_3 .right.flex {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Image containers: full width on mobile */
    .photo-upload-img,
    .column_3 .img {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .photo-upload-img img,
    .column_3 .img img {
        width: 100% !important;
        height: auto !important;
        max-width: 100%;
    }

    /* column_3 layout: stack vertically on mobile */
    .column_3 .right.flex {
        flex-direction: column;
    }

    .column_3 .right.flex .img,
    .column_3 .right.flex .inputbox {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }

    /* column_3 の .right.flex 左右均等化 */
    .column_3 .right.flex {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* blog_parts (便器品番確認方法) 内の余白均等化 */
    .column_3 .img .sub {
        padding: 0.5rem 0;
    }

    /* blog_parts内リセットはPC/SP共通で #gfr-form-wrapper 配下に移動済み */

    /* Photo upload grid: single column on mobile */
    .photo-upload-grid {
        grid-template-columns: 1fr;
    }

    /* Consistent left/right margins */
    .form_requestaquotecontact {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .form_requestaquotecontact.check {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .form_commoncontact {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Photo upload buttons full width */
    .photo-upload-wrap {
        width: 100%;
    }

    /* Confirm screen mobile padding */
    .form_requestaquotecontact.check .column,
    .form_requestaquotecontact.check .column_3 {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ======================================
   common styles
====================================== */

/*unique class*/
    p.text_padding-b_1rem{
        padding-bottom: 1rem;
    }
    button.delete-file{
        background-color:#009944;
        color: #f7f7f7;
        font-weight: bold;
    }
    button.delete-file:hover{
        background-color:#003705;
        color: #f7f7f7;
    }
    @media (max-width: 768px) {
        .form_requestaquotecontact .column .right textarea {
            width: 85vw !important;
        }
    }
    @media (max-width: 768px) {
    .form_requestaquotecontact .column .flex label{
        align-items: baseline;
    }
    }
    @media (max-width: 768px) {
    span.wpcf7-list-item-label{
        text-align: start;
    }
}
.form_requestaquotecontact input[type=radio] {
    accent-color: #009944;
  }
  select.wpcf7-form-control {
    accent-color: #009944;
  }
  select.wpcf7-form-control option:checked {
    background-color: #009944;
    color: #fff;
  }