@import '_content/BlazorBasics.Captcha/BlazorBasics.Captcha.lcf1rmpzln.bundle.scp.css';

/* /Pages/Landing.razor.rz.scp.css */
/*
    Brand-align the BlazorBasics.Captcha control to the TNE palette. Its markup is scoped
    (b-<hash>), so we reach into it with ::deep and out-specify its defaults (Bulma blue #485fc7).
    The --brand-* custom properties come from wwwroot/css/app.css (:root), so var() resolves here.
*/

.brand-captcha[b-pxps0gs6vb]  .label {
    color: var(--brand-blue);
}

.brand-captcha[b-pxps0gs6vb]  .input:focus,
.brand-captcha[b-pxps0gs6vb]  .input:active {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 0.125em rgba(0, 37, 118, 0.20);
}

.brand-captcha[b-pxps0gs6vb]  .button {
    background-color: var(--brand-blue);
    border-color: transparent;
    color: #fff;
    transition: background-color 0.15s ease;
}

.brand-captcha[b-pxps0gs6vb]  .button:hover {
    background-color: var(--brand-blue-700);
    color: #fff;
}

.brand-captcha[b-pxps0gs6vb]  .button:active {
    background-color: var(--primary-container);
}

/* Validation / error copy in the brand's accent so it reads as part of the form. */
.brand-captcha[b-pxps0gs6vb]  .error,
.brand-captcha[b-pxps0gs6vb]  .validation-message {
    color: var(--brand-yellow-600);
}