/*
 * Form validation - one look on every page, matching the holiday-reminder form
 * (Views/HolidayReminder/Index.cshtml, .hrm-err / .hrm-error).
 *
 * Deliberately NOT inside @layer: un-layered CSS beats the Tailwind utilities in
 * site.css, so these win over the text-red-500 / text-xs / border-gray-100
 * classes still sitting on the markup. Load this file AFTER site.css.
 *
 * site.css keeps only the show/hide rules (.field-validation-error and
 * .field-validation-valid), so do not set display here: the checkout's
 * .addr-error messages are hidden and shown with the Tailwind "hidden" class.
 */

/* The message under a field.
   .field-validation-error - jquery.validate.unobtrusive and asp-validation-for
   .addr-field-error       - the address book modal (addresses.js)
   .addr-error             - the checkout address fields (checkout.js)
   .dimple-field-error     - any message a page script writes by hand */
.field-validation-error,
.addr-field-error,
.addr-error,
.dimple-field-error {
    margin: 6px 2px 0;
    font-family: var(--font-poppins), 'Poppins', sans-serif;
    font-size: 12.5px;
    line-height: 1.45;
    font-weight: 500;
    color: #D8598F;
}

/* The field itself. jquery.validate and the asp-for tag helper add this class;
   the checkout, address book and review scripts add it too. .phone-box-invalid is
   the phone box's own (phone-input.js), which jquery.validate cannot clear. */
.input-validation-error,
.phone-box-invalid {
    border-color: #FF6B9D;
    background-color: #FFFBFC;
}

.input-validation-error:focus,
.phone-box-invalid:focus {
    border-color: #FF6B9D;
    box-shadow: 0 0 0 3px rgba(255, 107, 157, .18);
    outline: none;
}

/* The box above a form: a validation summary, or a "that did not work" banner. */
.dimple-form-error {
    padding: 10px 14px;
    border-radius: 10px;
    background: #FFF0F4;
    border: 1px solid #FFD1E0;
    font-family: var(--font-poppins), 'Poppins', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #B4335E;
}

/* Tailwind's reset removes list bullets; the reference form keeps them. */
.dimple-form-error ul {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
}

/* An asp-validation-summary with nothing to say renders empty; hide the box. */
.dimple-form-error.validation-summary-valid {
    display: none;
}