/* Khemisi — contact form extras (captcha, message, select) */

.cta-form select,
.cta-form textarea {
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--navy-800);
  background: #fff;
  border: 1px solid rgba(11,37,64,0.18);
  border-radius: 10px;
  padding: 12px 14px;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
  -webkit-appearance: none; appearance: none;
}
.cta-form textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.cta-form select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23102E4F' stroke-width='1.5' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.cta-form input:focus,
.cta-form select:focus,
.cta-form textarea:focus {
  border-color: var(--orange-500, #F85A40);
  box-shadow: 0 0 0 3px rgba(248,90,64,0.12);
}
.cta-form label.invalid input,
.cta-form label.invalid select,
.cta-form label.invalid textarea {
  border-color: rgba(220,38,38,0.55);
  background: rgba(220,38,38,0.04);
}
.cta-form .req { color: #DC2626; font-weight: 600; font-size: 12px; }

/* Honeypot — visually hidden */
.hp {
  position: absolute; left: -10000px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}

/* Captcha */
.captcha-field { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.cap-lab {
  font-size: 12px; font-weight: 600;
  color: var(--ink-500, #5b6675);
  letter-spacing: 0.02em;
}
.captcha-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 10px;
  align-items: center;
}
#captcha-img {
  background: #F4F1EC;
  border: 1px solid rgba(11,37,64,0.18);
  border-radius: 10px;
  display: block; height: 48px; width: 160px;
  object-fit: cover; user-select: none; cursor: pointer;
}
.captcha-fallback {
  width: 160px; height: 48px;
  border: 1px dashed rgba(11,37,64,0.30);
  border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: repeating-linear-gradient(45deg, #F4F1EC, #F4F1EC 6px, #ECE7DF 6px, #ECE7DF 12px);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.08em;
}
.captcha-fallback .sub { font-size: 9px; color: #95a4b8; letter-spacing: 0.10em; }
.captcha-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: #fff;
  border: 1px solid rgba(11,37,64,0.18);
  border-radius: 10px;
  color: var(--navy-800);
  cursor: pointer;
  transition: all .18s;
}
.captcha-btn:hover { border-color: var(--orange-500, #F85A40); color: var(--orange-500, #F85A40); }
.captcha-btn svg { transition: transform .4s; }
.captcha-btn:hover svg { transform: rotate(180deg); }
#captcha-input {
  height: 48px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.15em; text-transform: uppercase; text-align: center;
  font-size: 15px;
}

/* Message */
.form-msg {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; letter-spacing: 0.02em;
  color: var(--ink-500, #5b6675);
  min-height: 1.4em; margin-top: 4px;
}
.form-msg.ok  { color: #166534; }
.form-msg.err { color: #B91C1C; }

@media (max-width: 640px) {
  .captcha-row { grid-template-columns: 1fr; gap: 8px; }
  #captcha-img, .captcha-fallback { width: 100%; }
  .captcha-btn { width: 100%; }
}