/*
 * Search box validation messages and the busy state (search-validation.js).
 *
 * Everything uses the NetworkSpace navy (#222E3C, the same navy as the site's hero and sidebar) on white pills, so it
 * stands out on the olive search box (#CCCC52) and matches the rest of the site.
 */
:root {
    --vsv-navy: #222E3C;
    --vsv-olive: #CCCC52;
}

.vsv-error {
    display: flex; flex-wrap: nowrap; align-items: flex-start; gap: .4rem .6rem;
    margin-top: .45rem; padding: .45rem .75rem;
    background: #fff; color: var(--vsv-navy); border-left: 4px solid var(--vsv-navy); border-radius: .5rem;
    font-size: .86rem; line-height: 1.35; box-shadow: 0 4px 14px rgba(34, 46, 60, .25);
    animation: vsv-in .18s ease;
}
.vsv-error[hidden] { display: none; }
.vsv-error i { color: var(--vsv-navy); flex: none; margin-top: .15em; }
.vsv-error__text { flex: 1 1 0; min-width: 0; }
/* the branch message also has a button, which drops to its own line when the box is narrow */
.vsv-error--action { flex-wrap: wrap; align-items: center; }
.vsv-error--action .vsv-error__text { flex-basis: 12rem; }
.vsv-error__action {
    margin-left: auto; border: 1px solid var(--vsv-navy); background: #fff; color: var(--vsv-navy); border-radius: 2rem;
    padding: .12rem .8rem; font: inherit; font-size: .8rem; font-weight: 500; cursor: pointer; transition: background .15s, color .15s;
}
.vsv-error__action:hover, .vsv-error__action:focus-visible { background: var(--vsv-navy); color: #fff; outline: 0; }

/* the field itself: a navy edge and ring read clearly on olive */
.vsv-has-error .e-multi-select-wrapper,
.vsv-has-error .e-input-group,
.vsv-has-error input[type="date"] {
    border-color: var(--vsv-navy) !important;
    box-shadow: 0 0 0 3px rgba(34, 46, 60, .55) !important;
}
.vsv-has-error .form-label-search { color: var(--vsv-navy); font-weight: 600; }

.vsv-summary {
    display: flex; align-items: center; gap: .45rem; margin: 0 auto 0 0; align-self: center;
    background: var(--vsv-navy); color: #fff; border-radius: 2rem; padding: .35rem .95rem; font-size: .86rem; font-weight: 500;
    box-shadow: 0 4px 14px rgba(34, 46, 60, .3); animation: vsv-in .18s ease;
}
.vsv-summary[hidden] { display: none; }
.vsv-summary i { color: var(--vsv-olive); }

.vsv-shake { animation: vsv-shake .45s ease; }
.vsv-field { scroll-margin-top: 120px; }

/* ---------- the busy state: the button becomes a spinner and the form is locked ---------- */
.vsv-busy,
.vsv-busy:disabled {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    background: var(--vsv-navy) !important; border-color: var(--vsv-navy) !important; color: #fff !important;
    opacity: 1 !important; cursor: progress; font-weight: 500;
    box-shadow: 0 0 0 3px rgba(34, 46, 60, .25);
    animation: vsv-pulse 1.4s ease-in-out infinite;
}
.vsv-spinner {
    flex: none; display: inline-block; width: 1.25em; height: 1.25em;
    border: 3px solid rgba(255, 255, 255, .28); border-top-color: var(--vsv-olive); border-radius: 50%;
    animation: vsv-spin .75s linear infinite;
}
.vsv-locked .vsv-field,
.vsv-locked .form-check,
.vsv-locked select,
.vsv-locked input { pointer-events: none; opacity: .75; transition: opacity .2s; }
.vsv-locked a.btn { pointer-events: none; opacity: .6; }

@keyframes vsv-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes vsv-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes vsv-spin { to { transform: rotate(360deg); } }
@keyframes vsv-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(34, 46, 60, .25); } 50% { box-shadow: 0 0 0 7px rgba(34, 46, 60, .08); } }

@media (prefers-reduced-motion: reduce) {
    .vsv-shake, .vsv-error, .vsv-summary, .vsv-busy { animation: none; }
    .vsv-spinner { animation-duration: 1.6s; }
}