/* =================================================
   FLOWSUITE FORMS SYSTEM
   ================================================= */

/* =================================================
   FORM TOKENS
   ================================================= */

:root{

    --fs-input-bg: transparent;
    --fs-input-border: #d0d7df;

    --fs-input-text-light: #1d2b3a;
    --fs-input-text-dark: rgba(255,255,255,.92);

    --fs-placeholder-light: #9aa7b2;
    --fs-placeholder-dark: rgba(255,255,255,0.6);

    --fs-focus: var(--fs-azure);

}


/* =================================================
   THEME BEHAVIOR
   ================================================= */

.theme-light{
    --fs-input-text: var(--fs-input-text-light);
    --fs-placeholder: var(--fs-placeholder-light);
}

.theme-dark{
    --fs-input-text: var(--fs-input-text-dark);
    --fs-placeholder: var(--fs-placeholder-dark);
}


/* =================================================
   BASE INPUT STYLE
   ================================================= */

.comm-field, 
.contact-field, 
#msg-contact, 
.wpcf7-text, 
.wpcf7-textarea,
.wpcf7-select {

    width: 100%;
    padding: 14px 12px;

    background: var(--fs-input-bg);

    border: none;
    border-bottom: 1px solid var(--fs-input-border);

    color: var(--fs-input-text) !important;

    font-size: 15px;
    line-height: 1.4;

    transition: all .25s ease;

    opacity: 1 !important;

}


/* =================================================
   PLACEHOLDER
   ================================================= */

.wpcf7-text::placeholder,
.wpcf7-textarea::placeholder {
    color: var(--fs-placeholder);
}


/* =================================================
   FOCUS STATE
   ================================================= */

.wpcf7-text:focus,
.wpcf7-textarea:focus,
.wpcf7-select:focus {

    border-bottom: 1px solid var(--fs-focus);
    outline: none;

}


/* =================================================
   TEXTAREA
   ================================================= */

.wpcf7-textarea{
    min-height: 120px;
    resize: vertical;
}


/* =================================================
   LABELS (OPTIONEEL)
   ================================================= */

.fs-label{
    display:block;
    font-size:13px;
    margin-bottom:6px;
    color: var(--fs-text-mid);
}


/* =================================================
   ERROR STATE (CF7)
   ================================================= */

.wpcf7-not-valid {
    border-bottom: 1px solid #e74c3c !important;
}

.wpcf7-not-valid-tip {
    font-size: 12px;
    color: #e74c3c;
    margin-top: 5px;
}


/* =================================================
   SUCCESS MESSAGE
   ================================================= */

.wpcf7-mail-sent-ok,
.wpcf7-response-output {

    border: none;
    background: #eaf6ff;
    color: #0F4C81;

    padding: 12px 16px;
    border-radius: 4px;

    margin-top: 15px;

}


/* =================================================
   ELEMENTOR FIX
   Oude setting: .elementor-kit-7 input,
   ================================================= */

.elementor-kit-7 input:not([type="submit"]),
.elementor-kit-7 textarea,
.elementor-kit-7 select {

    color: var(--fs-input-text) !important;
    opacity: 1 !important;

}


/* =================================================
   MICRO INTERACTIONS
   ================================================= */

.wpcf7-text:hover,
.wpcf7-textarea:hover {
    border-bottom: 1px solid #b8c2cc;
}