/* Square One Forms CSS - Using Real FilePond - Fixed Version */

/* Form container styling to match site */
.square-one-form-section {
    width: 100%;
    padding: 0;
    margin: 4rem 0 0 0;
    position: relative;
    z-index: 1;
}

.square-one-form-section .wave-top {
    width: 100%;
    height: auto;
    vertical-align: bottom;
    position: relative;
    top: 2px;
    display: block;
    margin: 0;
    padding: 0;
    margin-bottom: -1px;
}

.square-one-form-section .bg-light-blue {
    background-color: #EFF8FB;
    padding: 4rem 0;
    margin: 0;
    width: 100%;
    position: relative;
}

.square-one-form-section .wave-bottom {
    width: 100%;
    height: auto;
    vertical-align: top;
    display: block;
    margin: 0;
    padding: 0;
    margin-top: -1px;
    position: relative;
    bottom: 1px;
}

.square-one-form-section .form-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px 2rem 20px;
    position: relative;
    z-index: 1;
}

.square-one-form-section h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    color: #333;
    font-size: 2.125rem;
    font-weight: 600;
    font-family: proxima-nova, sans-serif;
    line-height: 1.25;
}

/* Form styling */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-weight: 400;
    color: inherit;
    margin-bottom: 0.5rem;
    font-size: inherit;
    font-family: inherit;
}

.required {
    color: #e74c3c;
    font-weight: bold;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    box-sizing: border-box;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group textarea:focus {
    outline: 0;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

/* FilePond Customizations - FIXED VERSION with Dynamic Height */
.filepond--root {
    max-width: 100%;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    overflow: visible !important;
    position: relative;
}

@media (min-width: 576px) {
    .filepond--root {
        max-width: 800px;
    }
}

/* FIXED: FilePond container with proper containment and dynamic height */
.form-group .filepond--root {
    padding: 1rem;
    border: 1px solid #a2aaae;
    border-radius: 0.375rem;
    background: #eff0f0;
    margin-bottom: 1.5rem;
    min-height: 140px;
    box-sizing: border-box;
    overflow: visible !important; /* keep previews and buttons visible */
}

/* FIXED: FilePond drop area with standard spacing */
.filepond--drop-label {
    height: 100px;
    min-height: 100px;
    padding: 1rem;
    box-sizing: border-box;
    margin: 0 0 0.75rem 0; /* Back to standard margins */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* FilePond panel styling */
.filepond--panel {
    background-color: transparent;
}

/* FIXED: File item with minimal spacing and contained width */
.filepond--item {
    width: calc(100% - 2rem) !important;        /* full width of container */
    margin: 1rem 0 0 1rem !important;   /* only spacing at bottom */
    padding: 0 !important;
    box-sizing: border-box;
}

.filepond--list,
.filepond--list-scroller {
    margin-bottom: 0.5rem !important;
    margin-top: 0.5rem !important;
    padding: 0 !important;
    gap: 0.5rem !important;            /* vertical spacing only */
}


/* FIXED: Image files with same height as text files */
.filepond--item[data-filepond-item-state*="processing-complete"]:has(.filepond--image-preview),
.filepond--item:has(.filepond--image-preview) {
    height: 50px !important;
    margin: 1rem 0 0.25rem 1rem !important; /* Same minimal spacing as regular files */
}

/* Hide FilePond file info sub text */
.filepond--file-info-sub {
    display: none !important;
}

/* Hide center loading indicator in file bars */
.filepond--file-status[data-filepond-file-status-type="loading"] {
    display: none !important;
}

/* Hide all loading states and indicators */
.filepond--item[data-filepond-item-state*="loading"] .filepond--file-status,
.filepond--item[data-filepond-item-state="loading"] .filepond--file-status {
    display: none !important;
}

/* Hide loading text and indicators */
.filepond--file-status-main[data-filepond-file-status-type="loading"],
.filepond--file-status-sub[data-filepond-file-status-type="loading"] {
    display: none !important;
}

/* Hide all loading spinners and indicators */
.filepond--load-indicator,
.filepond--load-indicator *,
.filepond--progress-indicator,
.filepond--progress-indicator * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Hide any text containing "Loading" */
.filepond--file-status:contains("Loading") {
    display: none !important;
}

/* Hide loading status completely for text files */
.filepond--item[data-filepond-item-state*="loading"] .filepond--file-status,
.filepond--item[data-filepond-item-state*="loading"] .filepond--file-status *,
.filepond--item[data-filepond-item-state="loading"] .filepond--file-status,
.filepond--item[data-filepond-item-state="loading"] .filepond--file-status * {
    display: none !important;
}

/* Hide center bottom loading indicator completely */
.filepond--item[data-filepond-item-state*="loading"] .filepond--load-indicator,
.filepond--item[data-filepond-item-state="loading"] .filepond--load-indicator,
.filepond--item .filepond--load-indicator {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -9999px !important;
}

/* File item alignment */
.filepond--file {
    align-items: center;
}

/* Hide FilePond browser input */
input.filepond--browser {
    opacity: 0 !important;
}

/* FIXED: FilePond list scroller - minimal interference */
.filepond--list-scroller {
    margin: 0;
    padding: 0; /* Remove internal padding */
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}

/* FIXED: FilePond list with proper spacing */
.filepond--list {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 4rem; /* tight spacing between items */
    margin: 0 !important;
    padding: 1rem !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important; /* FilePond needs this to add files */
}

/* File action button styling */
.filepond--file-action-button {
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    color: #6c757d;
    transition: all 0.15s ease-in-out;
    margin: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

/* FIXED: File wrapper with proper dimensions for 50px height */
.filepond--file {
    padding: 0.25rem 0.5rem;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border-radius: 0.375rem !important;
    position: relative;
    z-index: 1;
}

/* FIXED: File info area with proper alignment for 50px height */
.filepond--file-info {
    padding: 0.25rem 0.5rem;
    flex: 1;
    overflow: hidden;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

/* File info main text - optimized for 50px height */
.filepond--file-info-main {
    font-size: 0.75rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
    margin-bottom: 0.1em;
    width: 100%;
}

/* File info sub text - smaller for 50px height */
.filepond--file-info-sub {
    font-size: 0.65rem;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.1;
}

/* FIXED: File status area optimized for 50px height */
.filepond--file-status {
    padding: 0.25rem;
    font-size: 0.65rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    min-width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* Image preview styling */
.filepond--image-preview {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.filepond--image-preview-wrapper {
    margin-bottom: 0;
}

/* FIXED: Standard item heights for all states */
.filepond--item[data-filepond-item-state*="processing-complete"],
.filepond--item[data-filepond-item-state*="processing"],
.filepond--item[data-filepond-item-state*="loading"],
.filepond--item[data-filepond-item-state*="idle"] {
    height: 50px !important;
}

/* FIXED: Image item heights same as text files for all states */
.filepond--item[data-filepond-item-state*="processing-complete"]:has(.filepond--image-preview),
.filepond--item[data-filepond-item-state*="processing"]:has(.filepond--image-preview),
.filepond--item[data-filepond-item-state*="loading"]:has(.filepond--image-preview),
.filepond--item[data-filepond-item-state*="idle"]:has(.filepond--image-preview) {
    height: 50px !important;
}

/* FIXED: Panel heights for standard files */
.filepond--item[data-filepond-item-state*="processing-complete"] .filepond--item-panel,
.filepond--item[data-filepond-item-state*="processing"] .filepond--item-panel,
.filepond--item[data-filepond-item-state*="loading"] .filepond--item-panel,
.filepond--item[data-filepond-item-state*="idle"] .filepond--item-panel {
    height: 50px !important;
}

/* FIXED: Panel heights for image files same as text files */
.filepond--item[data-filepond-item-state*="processing-complete"]:has(.filepond--image-preview) .filepond--item-panel,
.filepond--item[data-filepond-item-state*="processing"]:has(.filepond--image-preview) .filepond--item-panel,
.filepond--item[data-filepond-item-state*="loading"]:has(.filepond--image-preview) .filepond--item-panel,
.filepond--item[data-filepond-item-state*="idle"]:has(.filepond--image-preview) .filepond--item-panel {
    height: 50px !important;
}

/* FIXED: Wrapper heights for standard files */
.filepond--item[data-filepond-item-state*="processing-complete"] .filepond--file-wrapper,
.filepond--item[data-filepond-item-state*="processing"] .filepond--file-wrapper,
.filepond--item[data-filepond-item-state*="loading"] .filepond--file-wrapper,
.filepond--item[data-filepond-item-state*="idle"] .filepond--file-wrapper {
    height: 50px !important;
}

/* FIXED: Wrapper heights for image files same as text files */
.filepond--item[data-filepond-item-state*="processing-complete"]:has(.filepond--image-preview) .filepond--file-wrapper,
.filepond--item[data-filepond-item-state*="processing"]:has(.filepond--image-preview) .filepond--file-wrapper,
.filepond--item[data-filepond-item-state*="loading"]:has(.filepond--image-preview) .filepond--file-wrapper,
.filepond--item[data-filepond-item-state*="idle"]:has(.filepond--image-preview) .filepond--file-wrapper {
    height: 50px !important;
}

/* FIXED: File item panels with proper dimensions */
.filepond--item-panel {
    margin: 0;
    border-radius: 0.375rem !important;
    overflow: hidden;
    background: #64605e;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    height: 50px !important;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

/* FIXED: Image panels same height as text files */
.filepond--item:has(.filepond--image-preview) .filepond--item-panel {
    height: 50px !important;
}

/* Green background when upload is complete */
[data-filepond-item-state="processing-complete"] .filepond--item-panel {
    background: #369763 !important;
}

/* Progress indicator */
.filepond--progress-indicator {
    margin: 0 !important;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 1;
}

/* FIXED: File wrapper with proper dimensions */
.filepond--file-wrapper {
    border-radius: 0.375rem !important;
    overflow: visible;
    height: 50px !important;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
}

/* FIXED: Image wrappers same height as text files */
.filepond--item:has(.filepond--image-preview) .filepond--file-wrapper {
    height: 50px !important;
}

/* Action button styling */
.filepond--action-process-item {
    background: rgba(34, 193, 195, 0.9);
    color: white;
}

.filepond--action-process-item:hover {
    background: rgba(34, 193, 195, 1);
}

.filepond--action-remove-item {
    background: rgba(220, 53, 69, 0.9);
    color: white;
}

.filepond--action-remove-item:hover {
    background: rgba(220, 53, 69, 1);
}

/* Privacy form styling */
.checkbox-group {
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
}

.checkbox-group h3 {
    margin: 0 0 1rem 0;
    color: inherit;
    font-size: inherit;
    font-weight: 600;
}

.checkbox-item {
    margin-bottom: 1rem;
    position: relative;
}

.checkbox-item input[type="checkbox"] {
    margin: 0 0.5rem 0 0;
    margin-top: 0.25rem;
    float: left;
}

.filepond--item:has(.filepond--image-preview) .filepond--file-action-button {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 10;
}

/* Disable all FilePond transitions */
.filepond--item * {
    transition: none !important;
    animation-duration: 0s !important;
}

/* Prevent color change during removal - keep original green color */
.filepond--item[data-filepond-item-state*="remove"] .filepond--item-panel {
    background: #369763 !important;
}

/* Hide any removal state containers immediately */
.filepond--item[data-filepond-item-state*="remove"] * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Force immediate removal without any intermediate states */
.filepond--item[data-filepond-item-state*="remove"] {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}

.checkbox-item label {
    font-weight: normal;
    margin-bottom: 0;
    cursor: pointer;
    display: block;
    margin-left: 1.75rem;
}

.conditional-field {
    margin-top: 15px;
    margin-bottom: 1rem;
    padding: 15px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    border-left: 4px solid #007cba;
}

.conditional-field label {
    font-size: 13px;
    color: #333;
}

.conditional-field textarea {
    margin-top: 8px;
}

/* Submit button styling */
button[type="submit"] {
    display: inline-block;
    font-weight: 400;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    background-color: #007bff;
    border: 1px solid #007bff;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
}

button[type="submit"]:hover {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
}

button[type="submit"]:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

button[type="submit"]:disabled {
    opacity: 0.65;
    background-color: #6c757d;
    border-color: #6c757d;
    cursor: not-allowed;
}

/* Form messages */
.form-message {
    margin-top: 20px;
    padding: 15px;
    border-radius: 4px;
    font-weight: 500;
    text-align: center;
}

.form-message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form-message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.form-message.info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* CAPTCHA styling */
.captcha-group {
    text-align: center;
    padding: 20px 0;
}

/* Responsive design */
@media (max-width: 768px) {
    .square-one-form-section .bg-light-blue {
        padding: 2rem 0;
    }

    .square-one-form-section .form-container {
        padding: 0 15px 2rem 15px;
    }

    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="tel"],
    .form-group textarea {
        font-size: 16px; /* Prevents zoom on iOS */
    }

    button[type="submit"] {
        width: 100%;
        max-width: none;
    }

    /* FIXED: Mobile FilePond adjustments */
    .form-group .filepond--root {
        padding: 1rem 0.75rem; /* Restore mobile padding */
        min-height: 140px;
    }

    /* Mobile file items with minimal spacing */
    .filepond--item {
        width: calc(100% - 1.5rem) !important; /* Account for smaller mobile padding */
        margin: 0 0.75rem 0.1rem 0.75rem !important;
    }

}
