/* =======================================
   WatchLinkUp Forms — unified across pages
   Depends on theme.css variables
   ======================================= */

.field { display:grid; gap:.4rem; }
.label {
  font-size:.875rem;
  font-weight:600;
  color:var(--text);
  opacity:.85;
}

/* Base controls */
.input,
.textarea,
.select {
  appearance:none;
  width:100%;
  border-radius:.75rem;
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  color:var(--text);
  padding:.65rem .9rem;
  font:inherit;
  line-height:1.25rem;
  transition:
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease,
    outline-color .15s ease;
}

/* Sizes (optional) */
.input.lg, .select.lg { padding:.8rem 1rem; border-radius:.9rem; font-size:1.05rem; }
.input.sm, .select.sm { padding:.5rem .75rem; border-radius:.6rem; }

/* Hover + Focus */
.input:hover, .textarea:hover, .select:hover {
  border-color: color-mix(in oklab, var(--border) 60%, var(--text) 40%);
}
.input:focus, .textarea:focus, .select:focus {
  outline:2px solid color-mix(in oklab, var(--primary) 28%, transparent);
  outline-offset:2px;
  box-shadow:0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent);
  border-color: color-mix(in oklab, var(--primary) 40%, var(--border));
  background: color-mix(in oklab, var(--bg) 94%, transparent);
}

/* Placeholder */
.input::placeholder, .textarea::placeholder {
  color: color-mix(in oklab, var(--text) 40%, transparent);
  opacity:.6;
}

/* Disabled */
.input[disabled], .select[disabled], .textarea[disabled] {
  opacity:.7;
  cursor:not-allowed;
  background: color-mix(in oklab, var(--bg) 80%, transparent);
}

/* Number inputs – keep clean on Chrome/Firefox */
.input[type="number"]::-webkit-outer-spin-button,
.input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.input[type="number"] { -moz-appearance:textfield; }

/* Textarea */
.textarea { min-height:120px; resize:vertical; }

/* Select with custom arrow */
.select{
  background-image:
    linear-gradient(45deg, var(--muted) 50%, transparent 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: right .9rem center, right .55rem center;
  background-size: .45rem .45rem, .45rem .45rem;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

/* Inline checkbox/radio (native look, unified spacing) */
.checkbox, .radio { accent-color: var(--primary); }
.label-inline { display:inline-flex; align-items:center; gap:.5rem; }

/* Dropdown panel (for Catalog search suggestions) */
.dropdown-panel{
  border:1px solid var(--border);
  background: var(--surface);
  border-radius: .75rem;
  box-shadow: 0 14px 34px -24px rgba(0,0,0,.28);
  padding:.25rem;
}
.dropdown-item{
  padding:.5rem .75rem;
  border-radius:.5rem;
  cursor:pointer;
}
.dropdown-item:hover{
  background: color-mix(in oklab, var(--surface) 70%, var(--bg) 30%);
}