/*
  File:            css/contact-form.css
  Description:     Clearer, modern look for the four input fields of the contact form on contact-me.html:
                   white fields with a visible border and rounded corners, a soft shadow, and a teal
                   outline while typing. Also spaces the human check (ALTCHA switch).
  Website:         drchristinacortez.com
  Maintained for:  Dr Christina Cortez
  Last updated:    2026-11-08 19:04 PST
*/
[id="968b0aad-89b2-4c41-8ee3-b3ae8679e2ee"] form {
  --dcc-field-border: #8fa9a8;
  --dcc-field-border-hover: #4f8f8c;
  --dcc-field-focus: #2aa8a2;
  --dcc-field-text: #1f2a2a;
  --dcc-field-label: #4a5c5c;
}

[id="968b0aad-89b2-4c41-8ee3-b3ae8679e2ee"] form input[type="text"],
[id="968b0aad-89b2-4c41-8ee3-b3ae8679e2ee"] form textarea {
  background-color: #ffffff !important;
  color: var(--dcc-field-text) !important;
  border: 1.5px solid var(--dcc-field-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(31, 42, 42, 0.08) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

[id="968b0aad-89b2-4c41-8ee3-b3ae8679e2ee"] form input[type="text"]:hover,
[id="968b0aad-89b2-4c41-8ee3-b3ae8679e2ee"] form textarea:hover {
  border-color: var(--dcc-field-border-hover) !important;
}

[id="968b0aad-89b2-4c41-8ee3-b3ae8679e2ee"] form input[type="text"]:focus,
[id="968b0aad-89b2-4c41-8ee3-b3ae8679e2ee"] form textarea:focus {
  outline: none !important;
  border-color: var(--dcc-field-focus) !important;
  box-shadow: 0 0 0 3px rgba(42, 168, 162, 0.25) !important;
}

/* Labels inside the fields (Name/Nombre*, Phone /Teléfono*, Email*) and the message placeholder */
[id="968b0aad-89b2-4c41-8ee3-b3ae8679e2ee"] form label {
  color: var(--dcc-field-label) !important;
}
[id="968b0aad-89b2-4c41-8ee3-b3ae8679e2ee"] form textarea::placeholder {
  color: var(--dcc-field-label) !important;
  opacity: 1;
}

/* Human check */
[id="968b0aad-89b2-4c41-8ee3-b3ae8679e2ee"] form altcha-widget {
  --altcha-border-radius: 10px;
}

/* Field names move up and get smaller while typing or when a field is filled,
   so they never cover the typed text (dcc-filled is set by js/contact-form.js) */
[id="968b0aad-89b2-4c41-8ee3-b3ae8679e2ee"] form div[data-ux="InputFloatLabel"] label {
  transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease;
  pointer-events: none;
}
[id="968b0aad-89b2-4c41-8ee3-b3ae8679e2ee"] form div[data-ux="InputFloatLabel"]:focus-within label,
[id="968b0aad-89b2-4c41-8ee3-b3ae8679e2ee"] form div[data-ux="InputFloatLabel"].dcc-filled label {
  top: 6px !important;
  font-size: 11px !important;
  letter-spacing: 0.02em;
}
[id="968b0aad-89b2-4c41-8ee3-b3ae8679e2ee"] form div[data-ux="InputFloatLabel"]:focus-within label {
  color: #1d7f7a !important;
}