/* ============================================
 * Magic Darkroom · Input
 *
 * Pill-shaped text input with 3D bottom shadow.
 * Focus = yellow ring, NEVER blue.
 *
 * Classes:
 *   .md-input          base text input
 *   .md-input--error   red border
 *   .md-input--lg      taller variant
 *   .md-textarea       multi-line (border-radius: 20px)
 * ============================================ */

.md-input {
  display: block;
  width: 100%;
  height: 40px;
  padding: 0 18px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text);
  background: #fff;
  border: 2.5px solid var(--c-line-soft);
  border-radius: 50px;
  box-shadow: 0 3px 0 0 var(--sh-input);
  outline: none;
  transition:
    border-color var(--dur-normal) var(--ease-standard),
    box-shadow   var(--dur-normal) var(--ease-standard);
}

.md-input::placeholder {
  color: var(--c-text-3);
  font-weight: 400;
}

.md-input:hover {
  border-color: #a89878;
}

.md-input:focus {
  border-color: var(--c-focus-yellow);
  box-shadow:
    0 3px 0 0 var(--c-focus-deep),
    0 0 0 3px rgba(255, 204, 0, 0.18);
}

.md-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--c-bg);
}

/* ---- Error state ---- */
.md-input--error {
  border-color: var(--c-error);
  box-shadow: 0 3px 0 0 #c04848;
}
.md-input--error:focus {
  border-color: var(--c-error);
  box-shadow:
    0 3px 0 0 #c04848,
    0 0 0 3px rgba(224, 90, 90, 0.18);
}

/* ---- Large ---- */
.md-input--lg {
  height: 48px;
  padding: 0 22px;
  font-size: 16px;
}

/* ---- Textarea ---- */
.md-textarea {
  display: block;
  width: 100%;
  min-height: 96px;
  padding: 14px 18px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text);
  background: #fff;
  border: 2.5px solid var(--c-line-soft);
  border-radius: 20px;
  box-shadow: 0 3px 0 0 var(--sh-input);
  outline: none;
  resize: vertical;
  line-height: 1.6;
  transition:
    border-color var(--dur-normal) var(--ease-standard),
    box-shadow   var(--dur-normal) var(--ease-standard);
}

.md-textarea::placeholder {
  color: var(--c-text-3);
  font-weight: 400;
}

.md-textarea:hover {
  border-color: #a89878;
}

.md-textarea:focus {
  border-color: var(--c-focus-yellow);
  box-shadow:
    0 3px 0 0 var(--c-focus-deep),
    0 0 0 3px rgba(255, 204, 0, 0.18);
}

/* ---- Mobile: 16px font prevents iOS Safari zoom-on-focus ---- */
@media (max-width: 640px) {
  .md-input,
  .md-textarea {
    font-size: 16px;
  }
}