@charset "UTF-8";

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

/* Form Items (Rows) */
.smf-item {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom: 24px;
    border-bottom: 1px solid #eee;
    padding-bottom: 24px;
}

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

/* Label Column */
.smf-item__col--label {
    width: 320px;
    flex-shrink: 0;
    padding-right: 20px;
    font-weight: bold;
    font-size: 22px;
    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: 18px;
    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 #ccc;
    border-radius: 4px;
    padding: 12px;
    font-size: 16px;
    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: 40px;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* Default Submit Button (Input Screen) */
.smf-action button,
.smf-action input[type="submit"] {
    background: #F4650C !important;
    /* Solid Orange */
    border: none;
    border-radius: 100px !important;
    color: white !important;
    font-size: 30px;
    font-weight: bold;
    width: 500px;
    max-width: 90%;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    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: 600px;
}

.smf-action button:hover,
.smf-action input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.25);
    background: #F4650C;
    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;
}

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

    /* 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;
    }

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

    .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: 22px;
        padding: 15px 20px !important;
    }

    /* 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;
    }
}