/*
 * Veton unified form styling.
 *
 * One visual language for every form on the site: CF7 forms (enhanced
 * by veton-forms.js into the floating-label pattern), the configurator's
 * .vcc-mdf fields on /details/, and any control that opts in via the
 * .vt-field wrapper. Replaces the material-design-for-contact-form-7
 * plugin.
 *
 * The look (from the material-input prototype):
 *   - field: light fill rgba(0,0,0,.06), resting underline #c9cdc9,
 *     16px Calibre, padding 14px 10px
 *   - label: rests in the field (#2a2a2a), floats up gold at 14px
 *   - focus: gold underline animates left to right over the resting
 *     line (element-less: an animated background gradient)
 *   - radio/checkbox: the configurator "pearl" (inset carve, gold fill)
 *   - motion: 300ms cubic-bezier(0.4, 0, 0.2, 1)
 *
 * Loaded site-wide by functions.php with filemtime() as cache-bust.
 */

:root {
    --vt-form-primary: #c49e60;
    --vt-form-ink: #2a2a2a;
    --vt-form-rest-line: #c9cdc9;
    --vt-form-fill: rgba(0, 0, 0, 0.06);
    --vt-form-muted: #656565;      /* $text-color, voor zichtbare placeholders */
    --vt-form-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ══════════════════════════════════════════════════════════════════
   Core field (CF7 via .vt-field, set by veton-forms.js)
   ══════════════════════════════════════════════════════════════════ */

.vt-field {
    position: relative;
    display: block;
    margin-bottom: 30px;
}

.vt-field input,
.vt-field textarea,
.vt-field select {
    font-family: inherit;
    font-size: 16px;
    color: var(--vt-form-ink);
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 10px;
    height: auto;              /* neutraliseert vaste themahoogtes */
    line-height: 1.3;
    border: none;
    border-radius: 0;
    /* Transparent border keeps the box height while both lines are drawn
       as backgrounds on that row: an opaque border would paint over the
       gold one. Layer 1 = gold (grows on focus), layer 2 = resting line. */
    border-bottom: 1px solid transparent;
    background-color: var(--vt-form-fill);
    background-image: linear-gradient(var(--vt-form-primary), var(--vt-form-primary)), linear-gradient(var(--vt-form-rest-line), var(--vt-form-rest-line));
    background-repeat: no-repeat, no-repeat;
    background-origin: border-box, border-box;
    background-position: left bottom, left bottom;
    background-size: 0 1px, 100% 1px;
    transition: background-size 300ms var(--vt-form-ease);
}

.vt-field input:focus,
.vt-field textarea:focus,
.vt-field select:focus {
    outline: none;
    background-size: 100% 1px, 100% 1px;
}

.vt-field input::placeholder,
.vt-field textarea::placeholder {
    color: transparent;
    opacity: 0;
}

/* Floating label (created from the placeholder by veton-forms.js).
   Anchored to the field's own text row (top = the field's padding-top),
   not to a percentage of the wrapper: a validation tip appended below
   the input grows the wrapper and would drag a centered label down. */
.vt-field .vt-label {
    position: absolute;
    left: 10px;
    top: 14px;
    margin: 0;
    font-size: 16px;
    font-weight: normal;
    /* Same line-height as the control, so the resting label sits exactly
       on the row the typed value will occupy. */
    line-height: 1.3;
    color: var(--vt-form-ink);
    pointer-events: none;
    transition: all 300ms var(--vt-form-ease);
}

/* Float on focus, on content (empty placeholder + :placeholder-shown),
   on autofill, and on the has-value class the JS keeps in sync (covers
   selects and programmatic values). Selectors kept apart so one
   unsupported pseudo-class can't kill the group. */
.vt-field input:focus ~ .vt-label,
.vt-field textarea:focus ~ .vt-label,
.vt-field select:focus ~ .vt-label,
.vt-field.has-value .vt-label {
    top: -20px;
    left: 0;
    transform: none;
    font-size: 14px;
    color: var(--vt-form-primary);
}
.vt-field input:not(:placeholder-shown) ~ .vt-label,
.vt-field textarea:not(:placeholder-shown) ~ .vt-label {
    top: -20px;
    left: 0;
    transform: none;
    font-size: 14px;
    color: var(--vt-form-primary);
}
.vt-field input:-webkit-autofill ~ .vt-label {
    top: -20px;
    left: 0;
    transform: none;
    font-size: 14px;
    color: var(--vt-form-primary);
}
.vt-field input:autofill ~ .vt-label {
    top: -20px;
    left: 0;
    transform: none;
    font-size: 14px;
    color: var(--vt-form-primary);
}

/* Fieldset blocks in the contact forms sit apart. Applied here rather
   than as an mb-20 class on each form definition, so all eight forms
   (2 variants x 4 languages) follow along. */
.wpcf7 .vet-input-group {
    margin-bottom: 20px;
}
.wpcf7 .vet-input-group:last-of-type {
    margin-bottom: 0;
}
/* The message block carried an asymmetric 20px 0 15px 20px from the
   theme; even padding like the other blocks. */
.wpcf7-form .vet-input-group.text-area-group {
    padding: 20px;
}

/* Room above every enhanced form so floated labels never clip */
.wpcf7 form .vt-field:first-of-type,
.wpcf7 form p:first-of-type .vt-field {
    margin-top: 10px;
}

/* Selects: native chevron replaced, same field look */
.vt-field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 34px;
    cursor: pointer;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%232a2a2a' stroke-width='1.5'/></svg>"),
        linear-gradient(var(--vt-form-primary), var(--vt-form-primary)),
        linear-gradient(var(--vt-form-rest-line), var(--vt-form-rest-line));
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-origin: padding-box, border-box, border-box;
    background-position: right 10px center, left bottom, left bottom;
    background-size: 12px 8px, 0 1px, 100% 1px;
}
.vt-field select:focus {
    background-size: 12px 8px, 100% 1px, 100% 1px;
}

/* Enhanced select: native dropdown UI replaced by a styled popup
   (veton-forms.js). The <select> stays for submission, hidden; the
   facade carries the field look and the chevron. Same popup treatment
   as the configurator's /details/ dropdown. */
.vt-select-enhanced > select {
    display: none !important;
}
.vt-select-display {
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    color: var(--vt-form-ink);
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 34px 14px 10px;
    line-height: 1.3;
    cursor: pointer;
    outline: none;
    border-bottom: 1px solid transparent;
    background-color: var(--vt-form-fill);
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%232a2a2a' stroke-width='1.5'/></svg>"),
        linear-gradient(var(--vt-form-primary), var(--vt-form-primary)),
        linear-gradient(var(--vt-form-rest-line), var(--vt-form-rest-line));
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-origin: padding-box, border-box, border-box;
    background-position: right 10px center, left bottom, left bottom;
    background-size: 12px 8px, 0 1px, 100% 1px;
    transition: background-size 300ms var(--vt-form-ease);
}
/* Empty facade keeps a full text row so its height matches the inputs */
.vt-select-display::after {
    content: "\200b";
}
.vt-select-enhanced.is-open .vt-select-display,
.vt-select-display:focus {
    background-size: 12px 8px, 100% 1px, 100% 1px;
}
.vt-field.is-open .vt-label {
    top: -20px;
    left: 0;
    transform: none;
    font-size: 14px;
    color: var(--vt-form-primary);
}

.vt-select-display.is-placeholder {
    color: #8C8C8C;
}

/* Installation questionnaire: the wrapper draws its own chevron, which
   the facade now provides; the label sits above the field there, so no
   floating-label spacing is needed. */
.vcc-q-select.vt-select-enhanced::after {
    display: none;
}

.vt-select-popup {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 100;
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
.vt-select-popup[hidden] {
    display: none;
}
/* Same rendering as the facade below it: the option text becomes the
   field value, so no antialiasing here either. */
.vt-select-popup li {
    padding: 12px 20px;
    color: var(--vt-form-ink);
    font-size: 1.05rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s ease-out;
}
.vt-select-popup li:hover {
    background: #f1f1f1;
}
.vt-select-popup li.is-selected {
    font-weight: 700;
}
/* Search row: icon sits absolute so the underline runs uninterrupted */
.vt-select-popup .vt-select-search {
    position: relative;
    padding: 12px 20px;
    cursor: default;
}
.vt-select-popup .vt-select-search:hover {
    background: transparent;
}
.vt-select-popup .vt-select-search svg {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
.vt-select-popup .vt-select-search-input {
    font-family: inherit;
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    padding: 0 0 0 28px;
    border: 0;
    border-bottom: 1px solid #dbdadb;
    background: transparent;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--vt-form-ink);
    outline: none;
}
.vt-select-popup .vt-select-search-input:focus {
    border-bottom-color: var(--vt-form-primary);
}

/* Textareas: label anchors to the top row */
.vt-field textarea {
    min-height: 120px;
    resize: vertical;
}

/* CF7 validation output under the field */
.vt-field .wpcf7-not-valid-tip {
    display: block;
    font-size: 13px;
    margin-top: 6px;
}
.vt-field input.wpcf7-not-valid,
.vt-field textarea.wpcf7-not-valid,
.vt-field select.wpcf7-not-valid {
    border-bottom-color: #D26161;
}

/* ══════════════════════════════════════════════════════════════════
   Pearl radio + checkbox, all CF7 forms (was partner-only)
   ══════════════════════════════════════════════════════════════════ */

/* Option groups: rows breathe, and wrap as a row when they fit */
.wpcf7 .wpcf7-checkbox,
.wpcf7 .wpcf7-radio,
.wpcf7 .wpcf7-acceptance .wpcf7-list-item {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
}
.wpcf7 .wpcf7-list-item {
    margin: 0;
}
.wpcf7 .wpcf7-list-item label {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
}
.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    margin: 0 12px 0 0;
    border-radius: 3px;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: background-color 320ms ease, border-color 320ms ease;
}
.wpcf7 input[type="radio"] {
    border-radius: 50%;
}
.wpcf7 input[type="checkbox"]:checked,
.wpcf7 input[type="radio"]:checked {
    border-color: #ece0cb;
    background-color: var(--vt-form-primary);
}
.wpcf7 input[type="checkbox"]:focus-visible,
.wpcf7 input[type="radio"]:focus-visible {
    outline: none;
    border-color: var(--vt-form-primary);
}
.wpcf7 .wpcf7-list-item-label {
    font-size: 1.1rem;
    color: var(--vt-form-ink);
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ══════════════════════════════════════════════════════════════════
   Configurator /details/ (.vcc-mdf) — same visual language, structure
   stays the plugin's (own labels, own JS). Fill + animated underline +
   metrics aligned with the CF7 fields above.
   ══════════════════════════════════════════════════════════════════ */

.vcc-mdf input,
.vcc-mdf select {
    /* Same box as the CF7 fields: padding-driven height instead of the
       configurator's fixed 45px, so both systems line up. */
    height: auto;
    line-height: 1.3;
    background-color: var(--vt-form-fill);
    background-image: linear-gradient(var(--vt-form-primary), var(--vt-form-primary)), linear-gradient(var(--vt-form-rest-line), var(--vt-form-rest-line));
    background-repeat: no-repeat, no-repeat;
    background-origin: border-box, border-box;
    background-position: left bottom, left bottom;
    background-size: 0 1px, 100% 1px;
    border-bottom-color: transparent;
    /* Entered values render without antialiasing, unlike the labels. */
    box-shadow: none;
    padding: 14px 10px;
    font-size: 16px;
    transition: background-size 300ms var(--vt-form-ease), border-color 0.2s ease-out;
}
.vcc-mdf input:focus,
.vcc-mdf select:focus {
    border-bottom-color: transparent;
    box-shadow: none;
    background-size: 100% 1px, 100% 1px;
}
.vcc-mdf select {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%232a2a2a' stroke-width='1.5'/></svg>"),
        linear-gradient(var(--vt-form-primary), var(--vt-form-primary)),
        linear-gradient(var(--vt-form-rest-line), var(--vt-form-rest-line));
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-origin: padding-box, border-box, border-box;
    background-position: right 10px center, left bottom, left bottom;
    background-size: 12px 8px, 0 1px, 100% 1px;
}
.vcc-mdf select:focus {
    background-size: 12px 8px, 100% 1px, 100% 1px;
}
.vcc-mdf label {
    left: 10px;
    font-size: 16px;
    color: var(--vt-form-ink);
}
/* Floated label: gold, like the CF7 fields, whether it floated because
   of focus or because the field has a value. The wrapper's 15px top
   padding left the label sitting a pixel inside the (now filled)
   field; 20px + line-height 1.2 gives it the same air as the CF7
   fields, where the label floats 20px above a 16.8px text row. */
.vcc-mdf {
    padding-top: 20px;
}
.vcc-mdf label {
    top: 34px;              /* 20px wrapper padding + 14px field padding */
    line-height: 1.3;       /* matches the control's text row */
}
.vcc-mdf input:focus + label,
.vcc-mdf input:not(:placeholder-shown) + label,
.vcc-mdf--select label {
    top: 0;
    left: 0;
    font-size: 14px;
    line-height: 1.2;
    color: var(--vt-form-primary);
}
/* Enhanced-select facade on /details/ follows along */
.vcc-mdf.vcc-select-enhanced .vcc-select-display {
    background-color: var(--vt-form-fill);
    border-bottom-color: transparent;
    background-image:
        linear-gradient(var(--vt-form-primary), var(--vt-form-primary)),
        linear-gradient(var(--vt-form-rest-line), var(--vt-form-rest-line));
    background-repeat: no-repeat, no-repeat;
    background-origin: border-box, border-box;
    background-position: left bottom, left bottom;
    background-size: 0 1px, 100% 1px;
    transition: background-size 300ms var(--vt-form-ease);
    box-shadow: none;
    height: auto;
    line-height: 1.3;
    padding: 14px 34px 14px 10px;
    font-size: 16px;
    font-weight: 500;
}
.vcc-mdf.vcc-select-enhanced.is-open .vcc-select-display,
.vcc-mdf.vcc-select-enhanced .vcc-select-display:focus {
    border-bottom-color: transparent;
    background-size: 100% 1px, 100% 1px;
    box-shadow: none;
}
/* Icons ride along with the taller field instead of a fixed 45px box */
.vcc-mdf-chevron {
    right: 10px;
    top: 20px;
    bottom: 0;
    height: auto;
}
.vcc-mdf--clearable .vcc-mdf-clear {
    right: 6px;
    top: 20px;
    bottom: 0;
    height: auto;
}
.vcc-mdf--clearable input {
    padding-right: 34px;
}

/* Invalid state keeps the configurator red, on top of the fill */
.vcc-mdf input.is-invalid,
.vcc-mdf select.is-invalid {
    border-bottom: 2px solid #D26161;
    box-shadow: none;
}