/* Contact Fields (Step 8) */
.contact-fields-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm-plus);
    margin-top: var(--spacing-sm-plus);
}

.contact-field-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.contact-field-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-light);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Input wrapper with icon */
.contact-field-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.contact-field-icon {
    position: absolute;
    left: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-lighter);
    pointer-events: none;
    transition: color 0.2s ease;
    z-index: 1;
}

.contact-field-input {
    width: 100%;
    padding: 16px 16px 16px 48px;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text);
    background: white;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-appearance: none;
    appearance: none;
}

/* Icon color changes with input state */
.contact-field-input:focus ~ .contact-field-icon,
.contact-field-input-wrapper:focus-within .contact-field-icon {
    color: var(--color-brand-blue);
}

.contact-field-input.has-value ~ .contact-field-icon,
.contact-field-input.has-value + .contact-field-icon {
    color: var(--color-secondary);
}

.contact-field-input.invalid ~ .contact-field-icon,
.contact-field-input.invalid + .contact-field-icon {
    color: var(--color-error);
}

.contact-field-input::placeholder {
    color: var(--color-text-lighter);
    font-weight: 400;
    font-size: 15px;
}

.contact-field-input:focus {
    border-color: var(--color-brand-blue);
    background: white;
}

.contact-field-input.has-value {
    border-color: var(--color-secondary);
}

.contact-field-input.has-value:focus {
    border-color: var(--color-brand-blue);
}

.contact-field-input.invalid {
    border-color: var(--color-error);
}

.contact-field-input.invalid:focus {
    border-color: var(--color-brand-blue);
}

/* Remove autofill yellow background */
.contact-field-input:-webkit-autofill,
.contact-field-input:-webkit-autofill:hover,
.contact-field-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px white inset;
    -webkit-text-fill-color: #000;
    transition: background-color 5000s ease-in-out 0s;
}