/**
 * Folks Integration — Application Form (JS-state rules only)
 * All static layout/visual styling is handled by Tailwind classes in the template.
 */

/* ── Field text colors (guard against themes that set white text) ── */
.folks-application-form .folks-input,
.folks-application-form select,
.folks-application-form textarea {
    color: #1f2937;
    border-radius: 4px;
    border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.folks-application-form .folks-input::placeholder,
.folks-application-form textarea::placeholder {
    color: #9ca3af;
    opacity: 1;
}

.folks-application-form option {
    color: #1f2937;
    background: #fff;
}

/* ── Selects: match text inputs (remove native chrome, add custom chevron) ── */
.folks-application-form select.folks-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
}

/* ── Visually-hidden file input (accessible, not hidden from screen readers via display:none) ── */
.folks-file-input {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

/* ── File name: shown by JS after file selection ── */
.folks-file-name {
    display: none;
}

/* ── Has-file state: toggled by JS ── */
.folks-file-upload.has-file .folks-file-label {
    background: #d1fae5;
    border-color: #009D77;
    color: #065f46;
}

/* ── Form message states: toggled by JS (addClass / removeClass) ── */
.folks-message-success {
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    color: #065f46;
}

.folks-message-error {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}

/* ── Submit button disabled: set by JS ── */
.folks-btn-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ── Spinner animation for loader SVG ── */
@keyframes folks-spin {
    to { transform: rotate(360deg); }
}

.folks-btn-loader svg {
    animation: folks-spin 1s linear infinite;
}