/**
 * Contact Form — Real-time Validation Styles
 * Inline validation feedback: valid (green), error (red)
 */

/* ==========================================================================
   VALID STATE
   ========================================================================== */

.contact-page .form-group.field-valid input,
.contact-page .form-group.field-valid select,
.contact-page .form-group.field-valid textarea {
    border-color: var(--color-success);
}

.contact-page .form-group.field-valid input:focus,
.contact-page .form-group.field-valid select:focus,
.contact-page .form-group.field-valid textarea:focus {
    border-color: var(--color-success);
    box-shadow: 0 0 0 2px var(--success-bg-subtle);
}

/* Green checkmark indicator */
.contact-page .form-group.field-valid {
    position: relative;
}

.contact-page .form-group.field-valid::after {
    content: "\2713";
    position: absolute;
    top: 34px;
    right: 12px;
    color: var(--color-success);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    line-height: 1;
    pointer-events: none;
}

/* Offset checkmark for select (avoid overlap with dropdown arrow) */
.contact-page .form-group.field-valid:has(select)::after {
    right: 36px;
}

/* ==========================================================================
   ERROR STATE
   ========================================================================== */

.contact-page .form-group.field-error input,
.contact-page .form-group.field-error select,
.contact-page .form-group.field-error textarea {
    border-color: var(--color-danger);
}

.contact-page .form-group.field-error input:focus,
.contact-page .form-group.field-error select:focus,
.contact-page .form-group.field-error textarea:focus {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 2px var(--danger-bg-subtle);
}

/* ==========================================================================
   ERROR MESSAGE
   ========================================================================== */

.contact-page .field-error-msg {
    display: block;
    margin-top: var(--sp-1);
    font-size: var(--text-xs);
    line-height: 1.4;
    color: var(--color-danger);
    min-height: 0;
}

.contact-page .field-error-msg:empty {
    display: none;
}

/* ==========================================================================
   DARK THEME OVERRIDES
   ========================================================================== */

[data-theme="dark"] .contact-page .form-group.field-valid input,
[data-theme="dark"] .contact-page .form-group.field-valid select,
[data-theme="dark"] .contact-page .form-group.field-valid textarea,
:root:not([data-theme="light"]) .contact-page .form-group.field-valid input,
:root:not([data-theme="light"]) .contact-page .form-group.field-valid select,
:root:not([data-theme="light"]) .contact-page .form-group.field-valid textarea {
    border-color: var(--color-success-light);
}

[data-theme="dark"] .contact-page .form-group.field-valid::after,
:root:not([data-theme="light"]) .contact-page .form-group.field-valid::after {
    color: var(--color-success-light);
}

[data-theme="dark"] .contact-page .form-group.field-error input,
[data-theme="dark"] .contact-page .form-group.field-error select,
[data-theme="dark"] .contact-page .form-group.field-error textarea,
:root:not([data-theme="light"]) .contact-page .form-group.field-error input,
:root:not([data-theme="light"]) .contact-page .form-group.field-error select,
:root:not([data-theme="light"]) .contact-page .form-group.field-error textarea {
    border-color: var(--color-danger-dark);
}

[data-theme="dark"] .contact-page .field-error-msg,
:root:not([data-theme="light"]) .contact-page .field-error-msg {
    color: var(--color-danger-dark);
}

/* ==========================================================================
   DISABLED SUBMIT VISUAL
   ========================================================================== */

.contact-page .btn-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}