/* Generic forms */
.section form{ display:grid; gap:12px; max-width:420px; margin: 0 auto; }
.section form input[type="email"],
.section form input[type="password"],
.section form input[type="text"]{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(17,25,46,0.7), rgba(13,20,40,0.5)); color:var(--text);
}
.section form input::placeholder{ color: var(--muted); }
.section form input:focus{ outline:none; box-shadow: var(--glow); border-color: rgba(99,102,241,0.5); }
.section form input + br{ display:none; }
.section form input[type="submit"],
.section form button[type="submit"]{
  padding:12px 18px; border-radius:12px; color:var(--text); font-weight:600; cursor:pointer;
  background: radial-gradient(120% 120% at 0% 0%, rgba(168,85,247,0.2), transparent 60%),
              radial-gradient(120% 120% at 100% 0%, rgba(6,182,212,0.2), transparent 60%),
              linear-gradient(180deg, rgba(23,32,56,0.85), rgba(18,26,48,0.6));
  border:1px solid rgba(99,102,241,0.5);
}

/* Standalone inputs and selects */
.input,
.select{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(17,25,46,0.7), rgba(13,20,40,0.5)); color:var(--text);
}
.select{
  /* Add extra padding on right for chevron icon */
  padding-right: 28px;
  /* Remove default appearance and add custom chevron with spacing */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(148, 163, 184, 0.9)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  /* Keep the control to a single line and show ellipsis when too long */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.select option{
  /* Prevent multi-line options in the native dropdown for more compact layout */
  white-space: nowrap;
}
.input::placeholder{ color: var(--muted); }
.input:focus, .select:focus{ outline:none; box-shadow: var(--glow); border-color: rgba(99,102,241,0.5); }

/* iPhone usability tweaks */
@media (max-width: 480px){
  .input, .select{ font-size:16px; }
  textarea.input{ min-height: 84px; }
}