/* ==========================================================
   Zulyon — Modern Form Controls (select/input/textarea)
   Theme: Dark glass + neon focus
   ========================================================== */

:root{
  /* fallbacks (if project uses different vars, these still work) */
  --zf-text: var(--text, #EAF0FF);
  --zf-muted: rgba(234,240,255,.70);
  --zf-good: var(--good, #53f3a6);
}

/* Apply to common wrappers + raw elements */
.input select,
.input input,
.input textarea,
select.zf,
input.zf,
textarea.zf{
  width: 100%;
  color: var(--zf-text);
  font-size: 14px;
  line-height: 1.1;

  border-radius: 16px;
  border: 1px solid rgba(234,240,255,.14);
  background: rgba(0,0,0,.22);

  padding: 12px 14px;
  outline: none;

  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}

/* Select special */
.input select,
select.zf{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  padding-right: 44px;
  cursor: pointer;

  background-image:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(234,240,255,0.75)' d='M7 10l5 5l5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, right 14px center;
  background-size: auto, 18px 18px;
}

.input select::-ms-expand,
select.zf::-ms-expand{ display:none; }

.input select option,
select.zf option{
  background: #070A12;
  color: #EAF0FF;
}

/* Hover */
.input select:hover,
.input input:hover,
.input textarea:hover,
select.zf:hover,
input.zf:hover,
textarea.zf:hover{
  border-color: rgba(234,240,255,.22);
  background: rgba(0,0,0,.26);
  transform: translateY(-1px);
}

/* Focus glow */
.input select:focus,
.input input:focus,
.input textarea:focus,
select.zf:focus,
input.zf:focus,
textarea.zf:focus{
  border-color: rgba(106,228,255,.55);
  box-shadow: 0 0 0 4px rgba(106,228,255,.14), 0 18px 42px rgba(0,0,0,.28);
}

/* Disabled */
.input select:disabled,
.input input:disabled,
select.zf:disabled,
input.zf:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* Optional: container glow on focus (modern browsers) */
.input:has(select:focus),
.input:has(input:focus),
.input:has(textarea:focus){
  border-color: rgba(106,228,255,.28);
  box-shadow: 0 0 0 1px rgba(106,228,255,.10) inset;
}

/* Mobile tap targets */
@media (max-width: 640px){
  .input select, .input input, .input textarea, select.zf, input.zf, textarea.zf{
    padding: 13px 14px;
    border-radius: 18px;
  }
  .input select, select.zf{ padding-right: 46px; }
}