/**
 * ACF Forms Override - High Specificity Styling
 * Comprehensive styling for ACF frontend forms with clean, modern design
 */

/* ==========================================================================
   Form Container & Structure
   ========================================================================== */

.acf-form {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.acf-form .acf-fields.acf-form-fields {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.acf-form .acf-field {
    padding: 0 0 1rem 0 !important;
    border: none !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Half-width fields - add proper spacing */
.acf-form .acf-field[style*="width: 50%"] {
    display: inline-block !important;
    vertical-align: top !important;
    padding-right: 0.75rem !important;
    padding-bottom: 1rem !important;
}

.acf-form .acf-field[style*="width: 50%"]:nth-child(even) {
    padding-right: 0 !important;
    padding-left: 0.75rem !important;
}

/* Remove side borders on half-width fields */
.acf-form .acf-field.-c0,
.acf-form .acf-field.-c1,
.acf-form .acf-field.-c2,
.acf-form .acf-field.-c3 {
    border-left: none !important;
    border-right: none !important;
}

/* ==========================================================================
   Labels & Descriptions
   ========================================================================== */

.acf-form .acf-label {
    margin-bottom: 0.5rem !important;
    padding: 0 !important;
}

.acf-form .acf-label label {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #18181b !important;
    text-transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25rem !important;
}

.acf-form .acf-label .description {
    font-size: 0.75rem !important;
    color: #71717a !important;
    margin-top: 0.25rem !important;
    line-height: 1rem !important;
    font-weight: 400 !important;
}

.acf-form .acf-required {
    color: #ef4444 !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   Input Fields - Base Styling
   ========================================================================== */

.acf-form .acf-input {
    margin: 0 !important;
    padding: 0 !important;
}

.acf-form input[type="text"],
.acf-form input[type="email"],
.acf-form input[type="url"],
.acf-form input[type="number"],
.acf-form input[type="date"],
.acf-form input[type="search"],
.acf-form textarea,
.acf-form select {
    width: 100% !important;
    padding: 0.625rem 0.875rem !important;
    border: 1px solid #e4e4e7 !important;
    border-radius: 0.5rem !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
    color: #18181b !important;
    background: #ffffff !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.acf-form input[type="text"]:focus,
.acf-form input[type="email"]:focus,
.acf-form input[type="url"]:focus,
.acf-form input[type="number"]:focus,
.acf-form input[type="date"]:focus,
.acf-form input[type="search"]:focus,
.acf-form textarea:focus,
.acf-form select:focus {
    outline: none !important;
    border-color: #18181b !important;
    box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.1) !important;
}

.acf-form input[type="text"]::placeholder,
.acf-form input[type="email"]::placeholder,
.acf-form input[type="url"]::placeholder,
.acf-form input[type="search"]::placeholder,
.acf-form textarea::placeholder {
    color: #a1a1aa !important;
}

/* ==========================================================================
   Textarea & WYSIWYG
   ========================================================================== */

.acf-form textarea {
    min-height: 100px !important;
    resize: vertical !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* WYSIWYG Editor */
.acf-form .acf-editor-wrap {
    border: 1px solid #e4e4e7 !important;
    border-radius: 0.5rem !important;
    background: #ffffff !important;
}

/* Remove border from editor tools */
.acf-form .wp-editor-tools {
    border: none !important;
}

/* Remove border from editor wrap with WordPress classes */
.acf-form .acf-editor-wrap.wp-core-ui.wp-editor-wrap {
    border: none !important;
}

/* ==========================================================================
   Post Title & Content Fields
   ========================================================================== */

.acf-form .acf-field[data-name="_post_title"] input {
    font-size: 1rem !important;
    font-weight: 500 !important;
    padding: 0.75rem 1rem !important;
}

.acf-form .acf-field[data-name="_post_content"] {
    margin-bottom: 1.5rem !important;
}

/* ==========================================================================
   Select2 Dropdowns
   ========================================================================== */

.acf-form .select2-container {
    width: 100% !important;
}

.acf-form .select2-container .select2-selection {
    border: 1px solid #e4e4e7 !important;
    border-radius: 0.5rem !important;
    min-height: 42px !important;
    background: #ffffff !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
}

.acf-form .select2-container .select2-selection:hover {
    border-color: #d4d4d8 !important;
}

.acf-form .select2-container.select2-container--focus .select2-selection,
.acf-form .select2-container.select2-container--open .select2-selection {
    border-color: #18181b !important;
    box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.1) !important;
    outline: none !important;
}

/* Single Select */
.acf-form .select2-container--default .select2-selection--single {
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
}

.acf-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 0.875rem !important;
    padding-right: 2.5rem !important;
    line-height: 42px !important;
    color: #18181b !important;
    font-size: 0.875rem !important;
}

.acf-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
    right: 0.625rem !important;
}

.acf-form .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #71717a transparent transparent transparent !important;
    border-width: 5px 4px 0 4px !important;
    margin-left: -4px !important;
    margin-top: -2px !important;
}

.acf-form .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #71717a transparent !important;
    border-width: 0 4px 5px 4px !important;
    margin-top: -5px !important;
}

/* Multiple Select */
.acf-form .select2-container--default .select2-selection--multiple {
    min-height: 42px !important;
    padding: 0.375rem 0.5rem !important;
}

.acf-form .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.375rem !important;
}

.acf-form .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: #f4f4f5 !important;
    border: 1px solid #e4e4e7 !important;
    border-radius: 0.375rem !important;
    padding: 0.25rem 0.625rem !important;
    font-size: 0.8125rem !important;
    color: #18181b !important;
    margin: 0 !important;
}

.acf-form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #71717a !important;
    margin-right: 0.375rem !important;
    transition: color 0.2s ease !important;
}

.acf-form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #ef4444 !important;
}

.acf-form .select2-container--default .select2-search--inline .select2-search__field {
    margin: 0 !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.875rem !important;
}

/* Select2 Dropdown Menu */
.select2-container--default .select2-dropdown {
    border: 1px solid #e4e4e7 !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    margin-top: 0.25rem !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #e4e4e7 !important;
    border-radius: 0.375rem !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    margin: 0.5rem !important;
    width: calc(100% - 1rem) !important;
}

.select2-container--default .select2-results__option {
    padding: 0.625rem 0.875rem !important;
    font-size: 0.875rem !important;
    color: #18181b !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #f4f4f5 !important;
    color: #18181b !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #18181b !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Date Picker
   ========================================================================== */

.acf-form .acf-date-picker {
    width: 100% !important;
}

.acf-form .acf-date-picker input {
    width: 100% !important;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%2371717a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="4" rx="2" ry="2"/><line x1="16" x2="16" y1="2" y2="6"/><line x1="8" x2="8" y1="2" y2="6"/><line x1="3" x2="21" y1="10" y2="10"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 0.875rem center !important;
    background-size: 1rem !important;
    padding-right: 2.5rem !important;
    cursor: pointer !important;
}


/* ==========================================================================
   Number Input with Prepend/Append
   ========================================================================== */

.acf-form .acf-input-prepend,
.acf-form .acf-input-append {
    background: #f4f4f5 !important;
    border: 1px solid #e4e4e7 !important;
    color: #71717a !important;
    padding: 0.625rem 0.875rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.acf-form .acf-input-prepend {
    border-radius: 0.5rem 0 0 0.5rem !important;
    border-right: none !important;
}

.acf-form .acf-input-append {
    border-radius: 0 0.5rem 0.5rem 0 !important;
    border-left: none !important;
}

.acf-form input.acf-is-prepended {
    border-radius: 0 0.5rem 0.5rem 0 !important;
    border-left: none !important;
}

.acf-form input.acf-is-appended {
    border-radius: 0.5rem 0 0 0.5rem !important;
    border-right: none !important;
}

.acf-form .acf-input-wrap {
    display: flex !important;
    align-items: stretch !important;
}

/* ==========================================================================
   Radio Buttons & Checkboxes
   ========================================================================== */

.acf-form .acf-radio-list,
.acf-form .acf-checkbox-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.625rem !important;
    padding: 0 !important;
    margin: 0 !important;
}

.acf-form .acf-radio-list label,
.acf-form .acf-checkbox-list label {
    display: flex !important;
    align-items: center !important;
    gap: 0.625rem !important;
    font-weight: 400 !important;
    font-size: 0.875rem !important;
    color: #18181b !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
}

.acf-form .acf-radio-list input[type="radio"],
.acf-form .acf-checkbox-list input[type="checkbox"] {
    width: 1rem !important;
    height: 1rem !important;
    margin: 0 !important;
    cursor: pointer !important;
}

/* ==========================================================================
   True/False Toggle
   ========================================================================== */

.acf-form .acf-true-false {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.acf-form .acf-true-false input[type="checkbox"] {
    width: 1.25rem !important;
    height: 1.25rem !important;
    cursor: pointer !important;
    margin: 0 !important;
}

.acf-form .acf-true-false .message {
    font-size: 0.875rem !important;
    color: #71717a !important;
    margin: 0 !important;
}

/* ==========================================================================
   Relationship & Post Object Fields
   ========================================================================== */

.acf-form .acf-relationship {
    border: 1px solid #e4e4e7 !important;
    border-radius: 0.5rem !important;
    overflow: hidden !important;
}

.acf-form .acf-relationship .filters {
    background: #f4f4f5 !important;
    border-bottom: 1px solid #e4e4e7 !important;
    padding: 0.75rem !important;
}

.acf-form .acf-relationship .selection {
    background: #ffffff !important;
    padding: 0.75rem !important;
}

/* ==========================================================================
   Error States
   ========================================================================== */

.acf-form .acf-error-message {
    color: #ef4444 !important;
    font-size: 0.75rem !important;
    margin-top: 0.375rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
}

.acf-form .acf-field.acf-error .acf-input {
    position: relative !important;
}

.acf-form .acf-field.acf-error .acf-input::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 3px !important;
    background: #ef4444 !important;
    border-radius: 0.5rem 0 0 0.5rem !important;
}

.acf-form .acf-field.acf-error input[type="text"],
.acf-form .acf-field.acf-error input[type="email"],
.acf-form .acf-field.acf-error input[type="url"],
.acf-form .acf-field.acf-error input[type="number"],
.acf-form .acf-field.acf-error textarea,
.acf-form .acf-field.acf-error select,
.acf-form .acf-field.acf-error .select2-container .select2-selection {
    border-color: #ef4444 !important;
}

/* ==========================================================================
   Submit Button
   ========================================================================== */

.acf-form .acf-form-submit {
    padding: 0 !important;
    border: none !important;
    margin-top: 0.5rem !important;
}

.acf-form .acf-form-submit button[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    background: #18181b !important;
    border: none !important;
    border-radius: 0.5rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.acf-form .acf-form-submit button[type="submit"]:hover {
    background: #27272a !important;
}

.acf-form .acf-form-submit button[type="submit"]:active {
    transform: translateY(1px) !important;
}

.acf-form .acf-form-submit .acf-spinner {
    margin-left: 1rem !important;
    float: none !important;
    display: inline-block !important;
}

/* ==========================================================================
   Loading States
   ========================================================================== */

.acf-form .acf-spinner {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%2318181b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"/><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"/><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"/></svg>') !important;
    width: 20px !important;
    height: 20px !important;
    animation: acf-spin 1s linear infinite !important;
}

@keyframes acf-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Hidden Validation Field
   ========================================================================== */

.acf-form .acf-field[data-name="_validate_email"] {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 640px) {
    .acf-form .acf-field[style*="width"] {
        width: 100% !important;
    }

    .acf-form .acf-field.-c0,
    .acf-form .acf-field.-c1 {
        width: 100% !important;
        min-height: auto !important;
    }
}

/* ==========================================================================
   Message Styling
   ========================================================================== */

.acf-form .acf-notice {
    padding: 0.875rem 1rem !important;
    border-radius: 0.5rem !important;
    margin-bottom: 1.5rem !important;
    font-size: 0.875rem !important;
}

.acf-form .acf-notice.-success {
    background: #dcfce7 !important;
    border: 1px solid #86efac !important;
    color: #166534 !important;
}

.acf-form .acf-notice.-error {
    background: #fee2e2 !important;
    border: 1px solid #fca5a5 !important;
    color: #991b1b !important;
}

.acf-form .acf-notice.-info {
    background: #dbeafe !important;
    border: 1px solid #93c5fd !important;
    color: #1e40af !important;
}