/*
Theme Name: Minimog Child
Theme URI: http://minimog.thememove.com/
Author: ThemeMove
Author URI: http://thememove.com/
Version: 1.0.0
Template: minimog
Text Domain:  minimog-child
Tags: editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
*/

/*
 * Custom CSS for Contact Form 7 Layout
 * Added on July 29, 2025
 */

/* Container style, controlling the spacing of the entire upload section */
.photo-upload-container {
    margin-bottom: 20px; /* Adjust bottom spacing as needed */
}

/* Row containing file upload and submit button */
.file-and-submit-row {
    display: flex; /* Use Flexbox layout */
    align-items: center; /* Vertically align items to the center */
    justify-content: space-between; /* Distribute items to both ends of the row, aligning submit button to the right */
    gap: 10px; /* Spacing between items */
    flex-wrap: wrap; /* Allow wrapping if space is insufficient */
}

/* Style adjustment for the parent container of Contact Form 7 file upload field */
/* Default CF7 file upload is a span.wpcf7-form-control-wrap */
.wpcf7-form-control-wrap.pet-photo { /* Use the field's name as class name, here it's pet-photo */
    flex-grow: 1; /* Allow the file upload area to take up as much available space as possible */
    display: flex; /* Allow internal elements (select file button and filename) to be better controlled */
    align-items: center; /* Vertically align to center */
    gap: 5px; /* Spacing between button and filename */
}

/* Hide the default file input field and style its "Choose File" button */
.wpcf7-form-control-wrap.pet-photo input[type="file"] {
    position: absolute; /* Position it to cover the simulated button, but remain invisible */
    left: 0;
    top: 0;
    opacity: 0; /* Completely hide */
    cursor: pointer;
    width: 100%;
    height: 100%;
}

/* Style the visual part of the "Choose File" button (using pseudo-element) */
.wpcf7-form-control-wrap.pet-photo::before {
    content: "选择文件"; /* Text displayed on the button */
    display: inline-block; /* Ensure it lays out like a button */
    background-color: #0073aa; /* Button background color, please modify according to your "Send Photo" button's actual color */
    color: white;
    padding: 8px 15px; /* Inner padding, might need to be slightly smaller than submit button */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px; /* Font size, might need to be slightly smaller than submit button */
    line-height: 1.5;
    transition: background-color 0.3s ease;
    pointer-events: none; /* Ensure clicks pass through to the underlying input[type="file"] */
    white-space: nowrap; /* Prevent text wrapping */
}

.wpcf7-form-control-wrap.pet-photo:hover::before {
    background-color: #005f8b; /* Hover background color */
}

/* Style the submit button (Send Photo) */
.wpcf7-submit {
    background-color: #0073aa; /* Please modify according to your "Send Photo" button's actual color */
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
    white-space: nowrap; /* Prevent button text wrapping */
}

.wpcf7-submit:hover {
    background-color: #005f8b; /* Hover color, please modify according to your actual hover color */
}

/* File name display area */
.wpcf7-form-control-wrap.pet-photo .wpcf7-file {
    /* If you want to display the file name, usually JavaScript is needed. This CSS only makes the button consistent in appearance. */
    /* Currently, this CSS will make the filename text area invisible. */
}

/* If there is spacing between the "Choose File" button and the filename text, you can adjust it here: */
.wpcf7-form-control-wrap.pet-photo .wpcf7-not-valid-tip { /* Error message style */
    /* ... */
}