/* Form Container */
.wpcf7 {
    width: 100%;
    max-width: 800px;
    margin: 2rem auto;
    box-sizing: border-box;
}

/* Form Wrapper */
.wpcf7 form {
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Row Layout */
.form-row {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}

/* Column Layout */
.form-col {
    flex: 1 1 calc(50% - 1.5rem);
    margin: 0 0.75rem;
    min-width: 280px;
    box-sizing: border-box;
}

.form-col > p {
    margin-bottom: 1.5rem;
    margin-top: 0;
}

/* Single Field Container */
.form-field {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    box-sizing: border-box;
}

.form-field > * {
    flex: 1 1 calc(100% - 1.5rem);
    margin: 0 0.75rem;
    box-sizing: border-box;
}

/* Labels - Adjusted spacing */
.wpcf7 label {
    display: inline-block;
    margin-bottom: 0.25rem; /* Reduced from 0.5rem */
    padding-left: 0.25rem; /* Slight offset to align with input */
    color: var(--wp--preset--color--base);
    font-family: var(--wp--preset--font-family--system-font);
    font-size: var(--wp--preset--font-size--medium);
}

/* Input Fields */
.wpcf7-form-control:not(.wpcf7-submit) {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--wp--preset--color--base);
    border-radius: 0.25rem;
    color: var(--wp--preset--color--base);
    background: transparent;
    font-family: var(--wp--preset--font-family--system-font);
    font-size: var(--wp--preset--font-size--medium);
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

/* Submit Button Container */
.form-submit {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.75rem;
}

.form-submit p {
    margin: 0;
    position: relative;
}

/* Submit Button */
.wpcf7-submit {
    width: 100% !important;
    display: block;
    padding: 1rem 2rem 1rem 2rem;
    background: transparent;
    color: var(--wp--preset--color--base);
    border: 2px solid var(--wp--preset--color--base);
    border-radius: 50px;
    font-weight: 500;
    font-size: large;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-sizing: border-box;
    position: relative; /* For spinner positioning context */
}

/* Spinner Positioning */
.wpcf7-spinner {
    position: absolute;
    right: 2rem; /* Position from right edge */
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}

/* Response Messages */
.wpcf7-response-output {
    width: 100%;
    margin: 2rem 0.75rem 0!important;
    padding: 1rem!important;
    border-radius: 0.25rem;
    border: 1px solid var(--wp--preset--color--base);
    color: var(--wp--preset--color--base);
    box-sizing: border-box;
}

/* Global box-sizing */
.wpcf7 *,
.wpcf7 *:before,
.wpcf7 *:after {
    box-sizing: border-box;
}

/* Prevent horizontal scroll */
.wp-block-contact-form-7-contact-form-selector {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Hover effect for submit button */
.wpcf7-submit:hover {
    background: var(--wp--preset--color--base);
    color: var(--wp--preset--color--contrast);
}

/* Base Response Output */
.wpcf7-response-output {
    width: calc(100% - 1.5rem);
    display: block;
    margin: 2rem 0.75rem 0;
    padding: 1rem 1.5rem;
    border-radius: 50px;
    font-size: 0.95rem;
    line-height: 1.4;
    text-align: center;
    box-sizing: border-box;
    font-weight: 500;
    position: relative; 
}

/* Add emojis using ::after */
.wpcf7-response-output::after {
    display: inline-block;
    margin-left: 0.5rem;
}

/* Validation Error - Warning emoji */
.wpcf7 form.invalid .wpcf7-response-output::after,
.wpcf7 form.unaccepted .wpcf7-response-output::after,
.wpcf7 form.payment-required .wpcf7-response-output::after {
    content: "⚠️";
}

/* Failed Message - Cross mark */
.wpcf7 form.failed .wpcf7-response-output::after {
    content: "❌";
}

/* Spam Protection Message - Shield */
.wpcf7 form.spam .wpcf7-response-output::after {
    content: "🛡️";
}

/* Validation Error */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
    color: var(--wp--preset--color--base);
    border: 2px solid var(--wp--preset--color--base);
    background: transparent;
}

/* Success Message */
.wpcf7 form.sent .wpcf7-response-output {
    color: var(--wp--preset--color--base);
    border: 2px solid var(--wp--preset--color--base);
    background: transparent;
}

/* Failed Message */
.wpcf7 form.failed .wpcf7-response-output {
    color: var(--wp--preset--color--base);
    border: 2px solid var(--wp--preset--color--base);
    background: transparent;
}

/* Individual Field Validation Messages */
.wpcf7-not-valid-tip {
    color: var(--wp--preset--color--base);
    font-size: 0.875rem;
    margin-top: 0.25rem;
    padding-left: 0.25rem;
}

/* Invalid Input Highlight */
.wpcf7-not-valid {
    border-color: var(--wp--preset--color--base) !important;
}