/* Form validation: clear on the pink background - red ring, solid error pill, soft shake. */
.form-1 .just-validate-error-field,
.form-2 .just-validate-error-field {
    background-color: #fff !important;
    border: 1.5px solid #ff3b30 !important;
    box-shadow: 0 0 0 4px rgba(255, 59, 48, .38), 0 6px 16px rgba(120, 0, 20, .18);
    animation: fv-shake .38s cubic-bezier(.36, .07, .19, .97) 1;
}
.form-1 input[type=checkbox].just-validate-error-field,
.form-2 input[type=checkbox].just-validate-error-field {
    border: 2px solid #ff3b30 !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 4px rgba(255, 59, 48, .45);
}
.form-1 input[type=checkbox].just-validate-error-field:before,
.form-2 input[type=checkbox].just-validate-error-field:before { background-color: #fff; }
.form-1 .just-validate-error-label,
.form-2 .just-validate-error-label {
    background-color: #d70015;
    color: #fff !important;
    border-radius: 999px;
    padding: 3px 11px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .01em;
    right: 12px;
    transform: translateY(-50%);
    box-shadow: 0 4px 10px rgba(120, 0, 20, .28);
    z-index: 2;
}
@keyframes fv-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
    .form-1 .just-validate-error-field, .form-2 .just-validate-error-field { animation: none; }
}

/* ---------- Safari / iOS ---------- */
/* Native control chrome (inner shadow, rounded gradient, select arrow) is reset so fields match other browsers. */
.form-1 input:not([type=checkbox]):not([type=radio]),
.form-2 input:not([type=checkbox]):not([type=radio]),
.form-1 textarea,
.form-2 textarea,
.form-1 select,
.form-2 select {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 5px;
}
.form-1 select,
.form-2 select {
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23832645' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
}
/* Safari adds a default margin to checkboxes, which pushes the custom tick off the label baseline. */
.form-1 input[type=checkbox],
.form-2 input[type=checkbox] {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    flex: 0 0 auto;
}
/* Safari paints autofilled fields with its own tint. */
.form-1 input:-webkit-autofill,
.form-2 input:-webkit-autofill {
    -webkit-text-fill-color: #832645;
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    box-shadow: 0 0 0 1000px #fff inset;
}
/* iOS zooms the page when a focused field is smaller than 16px. */
@media (max-width: 991px) {
    .form-1 input:not([type=checkbox]),
    .form-2 input:not([type=checkbox]),
    .form-1 textarea,
    .form-2 textarea,
    .form-1 select,
    .form-2 select { font-size: 16px; }
}
.form-1 .form-submit,
.form-2 .form-submit { -webkit-appearance: none; appearance: none; }

/* ---------- Submitting state ---------- */
.form-1 .form-submit:disabled,
.form-2 .form-submit:disabled {
    opacity: .7;
    cursor: not-allowed;
    transform: none;
    pointer-events: none;
}
.form-1 .form-submit[aria-busy="true"],
.form-2 .form-submit[aria-busy="true"] { position: relative; color: transparent !important; }
.form-1 .form-submit[aria-busy="true"]::after,
.form-2 .form-submit[aria-busy="true"]::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 20px; height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    -webkit-animation: fv-spin .7s linear infinite;
    animation: fv-spin .7s linear infinite;
}
@-webkit-keyframes fv-spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes fv-spin { to { transform: rotate(360deg); } }