/*
 * JetFormBuilder forms — restyled to the site's own form look.
 *
 * JFB writes a colour pair (white field, black text) into an inline <style> for
 * every field, from the block editor. The selectors here are longer than those,
 * so they win without !important. Scoped to the two places a form is placed:
 * the Kontakt message form and the dialogs (rental request, event enquiry).
 * Loaded on every page (see functions.php enqueue()).
 */

.kn-form .jet-form-builder,
.form-dialog .jet-form-builder {
    font-family: var(--font-body);
    color:       var(--color-text);
}

/* The dialog already has a heading (the title above the form), so the form's
   own heading block is not shown twice. */
.form-dialog .jet-form-builder .field-type-heading-field {
    display: none;
}

.kn-form .jet-form-builder-row,
.form-dialog .jet-form-builder-row {
    margin-bottom: 20px;
}

.kn-form .jet-form-builder__label,
.form-dialog .jet-form-builder__label {
    margin-bottom: 8px;
}

.kn-form .jet-form-builder__label-text,
.form-dialog .jet-form-builder__label-text {
    font-family:    var(--font-body);
    font-weight:    400;
    font-size:      14px;
    line-height:    16px;
    text-transform: uppercase;
    color:          var(--color-text);
}

.kn-form .jet-form-builder__required,
.form-dialog .jet-form-builder__required {
    color: var(--color-primary);
}

.kn-form .jet-form-builder .jet-form-builder__field-wrap .jet-form-builder__field,
.form-dialog .jet-form-builder .jet-form-builder__field-wrap .jet-form-builder__field {
    width:            100%;
    padding:          10px 20px;
    border:           0;
    border-radius:    0;
    background-color: #25272c;
    font-family:      var(--font-body);
    font-weight:      400;
    font-size:        16px;
    line-height:      20px;
    color:            var(--color-text);
    outline:          none;
    box-shadow:       none;
}

.kn-form .jet-form-builder .jet-form-builder__field-wrap .jet-form-builder__field::placeholder,
.form-dialog .jet-form-builder .jet-form-builder__field-wrap .jet-form-builder__field::placeholder {
    color:   rgba(255, 255, 255, .7);
    opacity: 1;
}

.kn-form .jet-form-builder .jet-form-builder__field-wrap .jet-form-builder__field:focus,
.form-dialog .jet-form-builder .jet-form-builder__field-wrap .jet-form-builder__field:focus {
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

.kn-form .jet-form-builder textarea.jet-form-builder__field,
.form-dialog .jet-form-builder textarea.jet-form-builder__field {
    min-height: 140px;
    resize:     vertical;
}

/* Checkbox: the native control in the gold of the site. */
.kn-form .jet-form-builder input[type="checkbox"],
.form-dialog .jet-form-builder input[type="checkbox"] {
    width:        16px;
    height:       16px;
    margin:       0;
    accent-color: var(--color-primary);
}

.kn-form .jet-form-builder .jet-form-builder__field-label,
.form-dialog .jet-form-builder .jet-form-builder__field-label {
    font-size:   14px;
    line-height: 20px;
    color:       var(--color-text);
}

/* Submit: the site's gold pill button. */
.kn-form .jet-form-builder .jet-form-builder__action-button,
.form-dialog .jet-form-builder .jet-form-builder__action-button {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    min-width:        220px;
    padding:          11px 28px;
    border:           1px solid var(--color-primary);
    border-radius:    100px;
    background-color: var(--color-primary);
    font-family:      var(--font-body);
    font-weight:      600;
    font-size:        16px;
    line-height:      1.25;
    letter-spacing:   1px;
    text-transform:   uppercase;
    color:            var(--color-bg);
    cursor:           pointer;
    transition:       background-color var(--transition), color var(--transition);
}

.kn-form .jet-form-builder .jet-form-builder__action-button:hover,
.form-dialog .jet-form-builder .jet-form-builder__action-button:hover {
    background-color: var(--color-accent);
    border-color:     var(--color-accent);
}

/* Messages (sent, error, validation) in the same type as the rest. */
.kn-form .jet-form-builder .jet-form-builder-messages-wrap,
.form-dialog .jet-form-builder .jet-form-builder-messages-wrap {
    margin-top:  16px;
    font-size:   16px;
    line-height: 1.25;
    color:       var(--color-primary);
}

@media (max-width: 767px) {

    .kn-form .jet-form-builder .jet-form-builder__action-button,
    .form-dialog .jet-form-builder .jet-form-builder__action-button {
        width:     100%;
        min-width: 0;
    }
}

/* Date and select: dark, like the other fields. The dark colour scheme makes
   the browser's own date picker dark too. */
.kn-form .jet-form-builder,
.form-dialog .jet-form-builder {
    color-scheme: dark;
}

.kn-form .jet-form-builder select.jet-form-builder__field,
.form-dialog .jet-form-builder select.jet-form-builder__field,
.kn-form .jet-form-builder input[type="date"].jet-form-builder__field,
.form-dialog .jet-form-builder input[type="date"].jet-form-builder__field {
    min-height:       42px;
    padding:          10px 20px;
    border:           0;
    border-radius:    0;
    background-color: #25272c;
    font-family:      var(--font-body);
    font-size:        16px;
    color:            var(--color-text);
}

/* On a phone the fields of a row stack, one under the other, at full width;
   the editor's row layout does not fit a 375 px screen. */
@media (max-width: 767px) {

    .kn-form .jet-form-builder .form__fields,
    .form-dialog .jet-form-builder .form__fields {
        flex-direction: column !important;
        align-items:    stretch !important;
    }

    .kn-form .jet-form-builder .jet-form-builder-row,
    .form-dialog .jet-form-builder .jet-form-builder-row {
        flex:      0 0 auto !important;
        width:     100% !important;
        max-width: 100%;
    }
}