/* ════════════════════════════════════════════
   INPUTS & TEXTAREAS — vYsYlNx design system
   Paste into your <style> tag in index.head.php,
   replacing the existing .editbox block.
════════════════════════════════════════════ */

/* ── UNIVERSAL RESET ── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="url"],
input[type="search"],
textarea,
select,
.editbox {
  /* structure */
  display:        block;
  width:          100%;
  position:       relative;

  /* typography */
  font-family:    'DM Mono', monospace;
  font-size:      0.8rem;
  letter-spacing: 0.06em;
  color:          var(--text);
  line-height:    1.6;

  /* spacing */
  padding:        0.75rem 1rem;

  /* decoration */
  background:     rgba(13,13,18,0.75);
  border:         1px solid var(--border);
  border-radius:  0;          /* sharp brutalist look */
  outline:        none;
  -webkit-appearance: none;
  appearance:     none;

  /* transitions */
  transition:
    border-color  0.25s ease,
    background    0.25s ease,
    box-shadow    0.25s ease;

  box-sizing: border-box;
}


/* ── PLACEHOLDER ── */
input::placeholder,
textarea::placeholder {
  color:          var(--muted);
  letter-spacing: 0.06em;
  font-style:     italic;
  opacity:        1;
}


/* ── FOCUS ── */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus,
.editbox:focus {
  border-color: var(--accent);
  background:   #000;
  box-shadow:   0 0 0 3px var(--glow), inset 0 0 12px rgba(137,212,245,0.04);
}


/* ── HOVER (not focused) ── */
input[type="text"]:not(:focus):hover,
input[type="email"]:not(:focus):hover,
input[type="tel"]:not(:focus):hover,
input[type="number"]:not(:focus):hover,
input[type="password"]:not(:focus):hover,
input[type="url"]:not(:focus):hover,
input[type="search"]:not(:focus):hover,
textarea:not(:focus):hover,
select:not(:focus):hover,
.editbox:not(:focus):hover {
  border-color:   rgba(137,212,245,0.3);
}


/* ── TEXTAREA SPECIFIC ── */
textarea,
textarea.editbox {
  resize:         vertical;
  min-height:     130px;
  max-height:     500px;
  line-height:    1.75;
}


/* ── SELECT SPECIFIC ── */
select,
select.editbox {
  cursor:       none;           /* custom cursor */
  /* custom dropdown arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%234a4a60' stroke-width='1.5' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 1rem center;
  padding-right:       2.5rem;
}
select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%2389d4f5' stroke-width='1.5' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
}
select option {
  background: var(--bg2);
  color:      var(--text);
}


/* ── DISABLED ── */
input:disabled,
textarea:disabled,
select:disabled,
.editbox:disabled {
  opacity:        0.38;
  pointer-events: none;
  cursor:         not-allowed;
}


/* ── READ-ONLY ── */
input:read-only,
textarea:read-only {
  background:   var(--surface);
  border-color: var(--border);
  color:        var(--muted);
  cursor:       default;
}


/* ══════════════════════════════════════════
   VALIDATION STATES
══════════════════════════════════════════ */

/* Error */
.input-error,
input.error,
textarea.error,
select.error {
  border-color: var(--accent2);
  background:   rgba(255,45,107,0.04);
}
.input-error:focus,
input.error:focus,
textarea.error:focus,
select.error:focus {
  border-color: var(--accent2);
  box-shadow:   0 0 0 3px var(--glow2);
}

/* Success */
.input-success,
input.success,
textarea.success,
select.success {
  border-color: var(--accent3);
  background:   rgba(123,92,240,0.04);
}
.input-success:focus,
input.success:focus,
textarea.success:focus {
  border-color: var(--accent3);
  box-shadow:   0 0 0 3px rgba(123,92,240,0.18);
}


/* ══════════════════════════════════════════
   SIZE MODIFIERS
══════════════════════════════════════════ */
.input-sm {
  font-size: 0.68rem;
  padding:   0.5rem 0.8rem;
}
.input-lg {
  font-size: 0.9rem;
  padding:   1rem 1.3rem;
}
.input-xl {
  font-size: 1rem;
  padding:   1.15rem 1.5rem;
  letter-spacing: 0.08em;
}


/* ══════════════════════════════════════════
   FIELD WRAPPER  — label + input stacked
══════════════════════════════════════════ */
.field {
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
  margin-bottom:  1.4rem;
}

.field-label {
  font-family:    'DM Mono', monospace;
  font-size:      0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          var(--muted);
  display:        flex;
  align-items:    center;
  gap:            0.4rem;
}

/* Required star */
.field-label .req {
  color: var(--accent2);
  font-size: 0.75rem;
  line-height: 1;
}

/* Helper / hint text below input */
.field-hint {
  font-size:      0.62rem;
  letter-spacing: 0.1em;
  color:          var(--muted);
  margin-top:     0.25rem;
}

/* Error message */
.field-error-msg {
  font-size:      0.62rem;
  letter-spacing: 0.1em;
  color:          var(--accent2);
  margin-top:     0.25rem;
  display:        flex;
  align-items:    center;
  gap:            0.35rem;
}
.field-error-msg::before {
  content: '✕';
  font-size: 0.55rem;
}


/* ══════════════════════════════════════════
   INPUT WITH INLINE ICON
   Usage: <div class="input-icon-wrap">
            <svg …/> <input …>
          </div>
══════════════════════════════════════════ */
.input-icon-wrap {
  position: relative;
  display:  block;
}
.input-icon-wrap svg {
  position:  absolute;
  left:      0.9rem;
  top:       50%;
  transform: translateY(-50%);
  width:     15px; height: 15px;
  stroke:    var(--muted);
  fill:      none;
  stroke-width: 1.5;
  pointer-events: none;
  transition: stroke 0.25s;
}
.input-icon-wrap input {
  padding-left: 2.6rem;
}
.input-icon-wrap:focus-within svg {
  stroke: var(--accent);
}

/* Icon on the right (e.g. search clear / eye toggle) */
.input-icon-wrap.icon-right svg {
  left:  auto;
  right: 0.9rem;
}
.input-icon-wrap.icon-right input {
  padding-left:  1rem;
  padding-right: 2.6rem;
}


/* ══════════════════════════════════════════
   INLINE GROUP  — input + button side by side
   Usage: <div class="input-group">
            <input …> <button …>
          </div>
══════════════════════════════════════════ */
.input-group {
  display: flex;
  gap:     1.5px;
}
.input-group input,
.input-group textarea {
  flex: 1;
}
.input-group button,
.input-group .btn-primary,
.input-group .btn-outline {
  flex-shrink: 0;
}


/* ══════════════════════════════════════════
   CHAR COUNTER  (add via JS)
   <div class="field">
     <textarea maxlength="300" …></textarea>
     <span class="char-counter">0 / 300</span>
   </div>
══════════════════════════════════════════ */
.char-counter {
  align-self:     flex-end;
  font-size:      0.6rem;
  letter-spacing: 0.12em;
  color:          var(--muted);
  transition:     color 0.2s;
}
.char-counter.near-limit  { color: gold; }
.char-counter.at-limit    { color: var(--accent2); }