@charset "UTF-8";

/* =========================================
   2. Snow Monkey Forms General Styles
   ========================================= */
.snow-monkey-form {
    max-width: 1000px;
    margin: 0 auto;
}

/* Form Items (Rows) */
.smf-item {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom: 22px;
    border-bottom: 1px solid rgba(51, 51, 51, 0.12);
    padding-bottom: 22px;
}

.smf-item:last-child {
    border-bottom: none;
}

/* Label Column */
.smf-item__col--label {
    width: 320px;
    flex-shrink: 0;
    padding-right: 20px;
    color: #333333;
    font-weight: 600;
    font-size: 18px;
    flex: 0 0 16em !important;
    max-width: 16em !important;
    display: flex;
    align-items: center;
}

/* Privacy Policy specific label (Last item) */
.smf-item:last-of-type .smf-item__col--label {
    font-size: 16px;
    white-space: nowrap;
    width: auto;
    flex: 0 0 auto !important;
    max-width: none !important;
}

/* Controls (Input) Column */
.smf-item__col--controls {
    flex-grow: 1;
    width: 100%;
}

/* Input Styles */
.smf-text-control__control,
.smf-textarea-control__control,
.smf-select-control__control {
    border: 1px solid rgba(51, 51, 51, 0.22);
    border-radius: 0;
    padding: 12px;
    min-height: 44px;
    font-size: 15px;
    width: 100%;
    box-sizing: border-box;
}

/* Name Fields (Columns) Adjustment */
.smf-item__controls .wp-block-columns {
    margin-bottom: 0;
    gap: 10px;
}

.smf-item__controls .wp-block-column {
    margin-bottom: 0 !important;
}

/* =========================================
   3. Buttons & Actions
   ========================================= */
.smf-action {
    text-align: center;
    margin-top: 34px;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* Default Submit Button (Input Screen) */
.smf-action button,
.smf-action input[type="submit"] {
    background: linear-gradient(90deg, #11c86a 0%, #05a858 100%) !important;
    border: none;
    border-radius: 100px !important;
    color: white !important;
    font-size: 24px;
    font-weight: 700;
    width: 500px;
    min-height: 74px;
    max-width: 90%;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(6, 199, 85, 0.22);
    transition: transform 0.2s, box-shadow 0.2s;
}

/* Initial "Confirm" Button - Full Width explicit */
.smf-action button[name="snow-monkey-forms-confirmation"] {
    padding: 15px 60px !important;
    width: 100%;
    max-width: 500px;
}

.smf-action button:hover,
.smf-action input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 18px rgba(6, 199, 85, 0.26);
    background: linear-gradient(90deg, #10b861 0%, #05934e 100%) !important;
    opacity: 0.8;
}

/* -----------------------------------------
   Confirmation Screen Buttons 
   (Using User's [data-action] selectors)
   ----------------------------------------- */

/* Wrapper Layout for Confirmation Screen */
[data-screen="confirm"] .smf-action {
    align-items: center !important;
    gap: 20px !important;
}

/* Back Button (Grey) */
[data-screen="confirm"] [data-action="back"] {
    background: #666 !important;
    /* Dark Grey */
    color: #fff !important;
    width: 400px;
    max-width: 40% !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 15px 40px !important;
    font-size: 20px !important;
    font-weight: bold !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Submit Button (Red) */
[data-screen="confirm"] [data-action="complete"] {
    background: #d60000 !important;
    /* Red */
    width: 400px;
    max-width: 40% !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 15px 60px !important;
    font-size: 20px !important;
    font-weight: bold !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Hover Effects for Confirmation Buttons */
.snow-monkey-form[data-screen="confirm"] [data-action="back"]:hover {
    background: #666;
    opacity: 0.8;
}

.snow-monkey-form[data-screen="confirm"] [data-action="complete"]:hover {
    background: #cc0000;
    opacity: 0.8;
}


/* =========================================
   4. Badges & Labels
   ========================================= */
.badge-required,
.smf-item__label__status--required,
.smf-item__label__text::after {
    background-color: #ff0000;
    color: white;
    font-size: 14px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 0;
    margin-left: 12px;
    vertical-align: middle;
    line-height: 1;
    display: inline-block;
}

.smf-item__label__text::after {
    content: "必須";
}

/* 「is-optional」という追加CSSクラスをつけた項目だけを任意にする */
.is-optional .smf-item__label__text::after {
    content: "任意" !important;
    background-color: #999 !important;
}

.badge-optional,
.smf-item__label__status--optional {
    background-color: #999;
    color: white;
    font-size: 14px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 0;
    margin-left: 12px;
    vertical-align: middle;
    line-height: 1;
    display: inline-block;
}

/* =========================================
   6. Completion Message Styles
   ========================================= */
.smf-complete-message,
.snow-monkey-form .smf-message {
    text-align: center !important;
    font-size: 20px !important;
    line-height: 2.4 !important;
    padding: 40px 20px !important;
    color: #333;
    font-weight: 500;
}

.smf-complete-message a,
.snow-monkey-form .smf-message a,
.thanks-content a {
    text-decoration: underline;
    font-weight: bold;
}

.thanks-content {
    text-align: center;
    font-size: 18px;
}

.lp-custom-contact-form .smf-item__label__text::after {
    content: "※必須";
    display: inline;
    margin-left: 12px;
    padding: 0;
    background: none;
    color: #d60000;
    font-size: 16px;
    font-weight: 600;
    line-height: inherit;
}

.lp-custom-contact-form .is-optional .smf-item__label__text::after {
    content: none !important;
    display: none;
}

.lp-custom-contact-form .lp-contact-message-item {
    align-items: flex-start;
}

.lp-custom-contact-form .smf-item:last-of-type .smf-item__col--label {
    width: 320px;
    flex: 0 0 16em !important;
    max-width: 16em !important;
    padding-right: 20px;
    font-size: 18px;
    white-space: normal;
}

.lp-custom-contact-form .smf-radio-buttons-control__control {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, max-content));
    gap: 16px 72px;
    margin-bottom: 20px;
}

.lp-custom-contact-form .smf-radio-button-control__label {
    color: #333333;
    font-size: 16px;
    font-weight: 600;
}

.lp-custom-contact-form .smf-textarea-control__control {
    min-height: 180px;
}

.lp-custom-contact-form .lp-contact-form-note {
    margin: 18px 0 0;
    color: #555555;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.7;
    text-align: center;
}

/* =========================================
   7. Mobile Responsiveness (Max-width: 768px)
   ========================================= */
@media (max-width: 768px) {
    .smf-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        margin-bottom: 16px;
        padding-bottom: 16px;
    }

    /* Adjust Padding for Form Container on Mobile */
    .snow-monkey-form {
        padding: 0px 5px;
    }

    .smf-item__col--label {
        width: 100%;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-right: 0;
        padding-bottom: 0;
        font-size: 17px;
        line-height: 1.55;
        overflow-wrap: anywhere;
        word-break: break-all;
    }

    .smf-text-control__control,
    .smf-textarea-control__control,
    .smf-select-control__control,
    .smf-checkboxes-control,
    .smf-checkbox-control__label,
    .smf-item__label__status--required,
    .smf-item__label__text::after {
        font-size: 16px;
    }

    .smf-item:last-of-type .smf-item__col--label {
        white-space: normal;
    }

    /* Force "Name" fields (columns) to be side-by-side on mobile */
    .smf-item__controls .wp-block-columns {
        flex-wrap: nowrap !important;
        gap: 10px;
    }

    .smf-item__controls .wp-block-column {
        flex-basis: 50% !important;
        width: 50% !important;
        margin-bottom: 0 !important;
    }

    /* Reduce submit button font size on mobile */
    .smf-action button,
    .smf-action input[type="submit"] {
        font-size: 19px;
        padding: 15px 20px !important;
        max-width: 320px;
    }

    .smf-action button[name="snow-monkey-forms-confirmation"] {
        max-width: 320px !important;
    }

    .lp-custom-contact-form .smf-radio-buttons-control__control {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .lp-custom-contact-form .smf-item:last-of-type .smf-item__col--label {
        width: 100%;
        flex: 0 0 auto !important;
        max-width: 100% !important;
        padding-right: 0;
        font-size: 16px;
    }

    .lp-custom-contact-form .smf-radio-button-control__label,
    .lp-custom-contact-form .lp-contact-form-note {
        font-size: 16px;
        margin-top: 14px;
    }

    /* Mobile Completion Content */
    .thanks-content {
        text-align: left !important;
        font-size: 16px !important;
    }

    /* Confirmation Screen Mobile Optimization */
    /* Back Button */
    [data-screen="confirm"] [data-action="back"] {
        width: 300px;
        max-width: 45% !important;
        padding: 15px 20px !important;
        /* Ensure padding fits */
        font-size: 16px !important;
        /* Adjust font size if necessary */
    }

    /* Submit Button mobile adjust */
    [data-screen="confirm"] [data-action="complete"] {
        width: 300px;
        max-width: 45% !important;
        padding: 15px 20px !important;
        font-size: 16px !important;
    }
}