/* EAFPS — Global form styling
 *
 * Auto-enqueued on every frontend page so EVERY form on the site (CF7,
 * Salient widgets, custom forms, etc.) inherits the Figma look defined for
 * the application forms: light-grey rounded inputs, custom-styled
 * radio/checkbox, and accent-coloured required asterisks.
 *
 * Scoped under body.eafps-styled-forms + selective !important so it wins
 * against Salient's high-specificity selectors (.original[data-form-style=…]
 * input[type=text], etc.) without resorting to ::-specificity hacks. Admin
 * is never affected (wp_enqueue_scripts only fires on the frontend).
 */

:root {
    --Contour-champs: #DCE4F5;
}

/* ── Text-like inputs + textarea + select ────────────────────────────── */

body.eafps-styled-forms input[type="text"],
body.eafps-styled-forms input[type="email"],
body.eafps-styled-forms input[type="url"],
body.eafps-styled-forms input[type="password"],
body.eafps-styled-forms input[type="date"],
body.eafps-styled-forms input[type="datetime-local"],
body.eafps-styled-forms input[type="search"],
body.eafps-styled-forms input[type="tel"],
body.eafps-styled-forms input[type="number"],
body.eafps-styled-forms input[type="file"],
body.eafps-styled-forms textarea,
body.eafps-styled-forms select {
    width: 100%;
    padding: 10px 14px !important;
    border: 1px solid var(--Contour-champs, #DCE4F5) !important;
    background-color: #fff !important;
    border-radius: 10px !important;
    font-family: "Inter", sans-serif;
    font-weight: 300;
    font-size: 18px;
    color: #2a2a2a;
    line-height: 1.4;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}

body.eafps-styled-forms textarea {
    resize: vertical;
    min-height: 110px;
}

body.eafps-styled-forms input:focus,
body.eafps-styled-forms textarea:focus,
body.eafps-styled-forms select:focus {
    outline: none !important;
    border-color: var(--nectar-accent-color, #2e6da8) !important;
    background-color: #fff !important;
}

/* Re-add a chevron on <select> since we just neutralised the native one. */
body.eafps-styled-forms select {
    padding-right: 36px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 15' fill='none'><path d='M3 5l5 5 5-5' stroke='%23272E47' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 15px !important;
    cursor: pointer;
    font-size: 16px;
}

/* ── File input chrome ───────────────────────────────────────────────── */

body.eafps-styled-forms input[type="file"] {
    padding: 8px !important;
    cursor: pointer;
    color: #9aa0a6;
    font-size: 15px;
}
body.eafps-styled-forms input[type="file"]::file-selector-button,
body.eafps-styled-forms input[type="file"]::-webkit-file-upload-button {
    background-color: var(--nectar-accent-color, #2e6da8);
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    font-size: 13px;
    font-family: "Inter", sans-serif;
    border: none;
    border-radius: 9999px;
    padding: 8px 22px;
    margin-right: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* ── Radio buttons (28×28 circle, big blue dot when checked) ─────────── */

body.eafps-styled-forms input[type="radio"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: 1px solid var(--Contour-champs, #DCE4F5) !important;
    border-radius: 50% !important;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    transition: border-color 0.15s ease;
    box-shadow: none !important;
}
body.eafps-styled-forms input[type="radio"]:hover {
    border-color: #b9c4dd !important;
}
body.eafps-styled-forms input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #08AEC0;
    transform: translate(-50%, -50%);
}
body.eafps-styled-forms input[type="radio"]:focus {
    outline: none !important;
}

/* ── Checkboxes (28×28 square, blue SVG checkmark) ───────────────────── */

body.eafps-styled-forms input[type="checkbox"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: 1px solid var(--Contour-champs, #DCE4F5) !important;
    border-radius: 6px !important;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    transition: border-color 0.15s ease;
    box-shadow: none !important;
}
body.eafps-styled-forms input[type="checkbox"]:hover {
    border-color: #b9c4dd !important;
}
body.eafps-styled-forms input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='M4 10.5l4 4 8-9' stroke='%2308AEC0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px 20px !important;
}
body.eafps-styled-forms input[type="checkbox"]:focus {
    outline: none !important;
}

/* ── Required-marker asterisk (Salient accent) ───────────────────────── */

body.eafps-styled-forms .eafps-app-form__required,
body.eafps-styled-forms .eafps-required {
    color: var(--nectar-accent-color, #2e6da8);
    font-weight: 400;
}

/* ── CF7-specific tweaks : CF7 wraps inputs in <span class="wpcf7-form-control-wrap">.
 *    These have to display as block so our 100%-width inputs flow correctly. */
body.eafps-styled-forms .wpcf7-form-control-wrap {
    display: block;
}
/* CF7 acceptance / checkbox lists : align the box vertically with the label */
body.eafps-styled-forms .wpcf7-list-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 18px 8px 0;
}
body.eafps-styled-forms .wpcf7-list-item label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    cursor: pointer;
}