/**
 * Breakdance Email Validator — styles
 *
 * All rules are intentionally lightweight and scoped so they sit on top of
 * your existing Breakdance / theme styles without conflict.
 * Override any of these variables in your child-theme stylesheet.
 */

:root {
    --bev-color-invalid:  #c0392b;
    --bev-color-valid:    #27ae60;
    --bev-color-checking: #7f8c8d;
    --bev-font-size:      0.85em;
    --bev-mt:             0.35rem;
    --bev-transition:     0.2s ease;
}

/* ------------------------------------------------------------------
 * Inline message element
 * ---------------------------------------------------------------- */
.bev-message {
    display:     block;
    margin-top:  var( --bev-mt );
    font-size:   var( --bev-font-size );
    line-height: 1.4;
    transition:  color var( --bev-transition );
}

.bev-message:empty {
    display: none;
}

.bev-message--invalid {
    color: var( --bev-color-invalid );
}

.bev-message--valid {
    color: var( --bev-color-valid );
}

.bev-message--checking {
    color:      var( --bev-color-checking );
    font-style: italic;
}

/* Optional: animate the "Checking…" text */
.bev-message--checking::after {
    content:   '';
    animation: bev-dots 1.2s steps( 3, end ) infinite;
}

@keyframes bev-dots {
    0%   { content: ''; }
    33%  { content: '.'; }
    66%  { content: '..'; }
    100% { content: '...'; }
}

/* ------------------------------------------------------------------
 * Input border feedback
 * ---------------------------------------------------------------- */
.bev-input--invalid {
    border-color: var( --bev-color-invalid ) !important;
    outline-color: var( --bev-color-invalid ) !important;
}

.bev-input--valid {
    border-color: var( --bev-color-valid ) !important;
    outline-color: var( --bev-color-valid ) !important;
}