.cotoncf-root input,
.cotoncf-root select,
.cotoncf-root textarea {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0.5rem !important; /* matches Tailwind rounded-lg (0.5rem) */
  box-sizing: border-box !important;
}

.cotoncf-root input,
.cotoncf-root textarea {
  color: #ffffff !important;
}

.cotoncf-root textarea {
  padding: 0.75rem 1rem !important; /* py-3 px-4 */
}

.cotoncf-root input[type='text'],
.cotoncf-root input[type='email'],
.cotoncf-root select {
  height: 3rem !important; /* h-12 */
  padding: 0 1rem !important; /* px-4 */
}

.cotoncf-root input::placeholder,
.cotoncf-root textarea::placeholder {
  color: rgba(255, 255, 255, 0.4) !important; /* placeholder:text-white/40 */
}

/* Motion equivalents (React + framer-motion in src -> simple CSS transitions here) */
.cotoncf-reveal-left,
.cotoncf-reveal-right {
  opacity: 0 !important;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform;
}

.cotoncf-reveal-left {
  transform: translateX(-30px) !important;
}

.cotoncf-reveal-right {
  transform: translateX(30px) !important;
  transition-delay: 0.1s !important; /* matches ContactSection's right-side delay: 0.1 */
}

.cotoncf-reveal-left.cotoncf-is-visible,
.cotoncf-reveal-right.cotoncf-is-visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.cotoncf-send-button {
  transform-origin: center;
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s !important;
}

.cotoncf-send-button:hover {
  transform: scale(1.01) !important;
  box-shadow: 0 10px 30px rgba(27, 173, 108, 0.25) !important;
}

.cotoncf-send-button:active {
  transform: scale(0.99) !important;
}