/* lead-capture.css */

/* ── Layout ──────────────────────────────────────────────── */

.lc-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ── Cards (ersetzen <hr>-Trenner) ───────────────────────── */

.lc-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.lc-card-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

/* ── Form Groups ─────────────────────────────────────────── */

.lc-wrap .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Label-Row: Label + * nebeneinander */
.label-row {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.label-row label {
  margin-bottom: 0;
}

.lc-wrap label,
.label-row label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0;
}

.req {
  color: var(--red);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  position: relative;
  top: -3px;
}

.lc-optional {
  color: var(--text3);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 10px;
}

/* ── Inputs & Selects ────────────────────────────────────── */

.lc-wrap input,
.lc-wrap select {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 0.75rem 1rem;
  width: 100%;
  outline: none;
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast),
    box-shadow var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
}

/* Hover — normal */
.lc-wrap input:hover:not(:focus-visible):not(.error):not(:disabled),
.lc-wrap select:hover:not(:focus-visible):not(.error):not(:disabled) {
  border-color: var(--border-active);
  background: color-mix(in srgb, var(--bg3) 85%, var(--accent) 15%);
}

/* Hover — Error-State: Rot-Tint, aber kein Ring */
.lc-wrap input.error:hover:not(:focus-visible):not(:disabled),
.lc-wrap select.error:hover:not(:focus-visible):not(:disabled) {
  border-color: var(--red);
  background: color-mix(in srgb, var(--bg3) 84%, var(--red) 16%);
}

/* Error — Ruhezustand (kein Focus) */
.lc-wrap input.error:not(:focus-visible),
.lc-wrap select.error:not(:focus-visible) {
  border-color: var(--red);
  background: color-mix(in srgb, var(--bg3) 92%, var(--red) 8%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 18%, transparent);
}

/* Focus — immer Accent, überschreibt Error-State bewusst */
.lc-wrap input:focus-visible,
.lc-wrap select:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--bg3) 92%, var(--accent) 8%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Filled (hat Wert, kein Focus, kein Error) */
.lc-wrap input:not(:placeholder-shown):not(:focus-visible):not(.error),
.lc-wrap select.has-value:not(:focus-visible):not(.error) {
  border-color: color-mix(in srgb, var(--border) 60%, var(--accent) 40%);
  background: color-mix(in srgb, var(--bg3) 94%, var(--accent) 6%);
}

/* Disabled */
.lc-wrap input:disabled,
.lc-wrap select:disabled {
  opacity: var(--inactive-opacity);
  cursor: not-allowed;
  pointer-events: none;
}

/* Placeholder */
.lc-wrap input::placeholder {
  color: var(--text3);
}

/* Select Pfeil */
.lc-wrap select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23555'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

/* ── Field Notes ─────────────────────────────────────────── */

.lc-wrap .field-note {
  font-size: 11px;
  color: var(--text3);
  font-family: var(--font-mono);
  min-height: 16px; /* verhindert Layout-Sprung */
  transition: color var(--transition-fast);
}

.lc-wrap .field-note.success {
  color: var(--green);
}
.lc-wrap .field-note.error {
  color: var(--red);
}
.lc-wrap .field-note.warning {
  color: var(--yellow);
}
.lc-wrap .field-note.info {
  color: var(--text2);
}

/* ── Name Row ────────────────────────────────────────────── */

.lc-name-row {
  display: grid;
  grid-template-columns: 120px 1fr 1fr;
  gap: var(--space-3);
}

/* ── Score Row: Leadscore + Quelle nebeneinander ─────────── */

.lc-score-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

/* ── URL Display ─────────────────────────────────────────── */

.url-display {
  position: relative;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  min-height: 46px;
  cursor: text;
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast),
    box-shadow var(--transition-fast);
}

.url-display:hover:not(.error):not(:focus-within) {
  border-color: var(--border-active);
  background: color-mix(in srgb, var(--bg3) 85%, var(--accent) 15%);
}

/* Hover im Error-State */
.url-display.error:hover:not(:focus-within) {
  border-color: var(--red);
  background: color-mix(in srgb, var(--bg3) 84%, var(--red) 16%);
}

/* Error — Ruhezustand */
.url-display.error:not(:focus-within) {
  border-color: var(--red);
  background: color-mix(in srgb, var(--bg3) 92%, var(--red) 8%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 18%, transparent);
}

/* Focus — immer Accent, überschreibt Error bewusst */
.url-display:focus-within {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--bg3) 92%, var(--accent) 8%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.url-mirror {
  position: absolute;
  inset: 0;
  padding: 0.75rem 1rem;
  pointer-events: none;
  display: flex;
  align-items: center;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-body);
}

.url-mirror span:first-child {
  color: var(--text);
}
.url-mirror span:last-child {
  color: var(--text3);
}

.url-input-real {
  position: absolute;
  inset: 0;
  width: 100%;
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
  padding: 0.75rem 1rem;
  font-size: 14px;
  font-family: var(--font-body);
  color: transparent;
  caret-color: var(--accent);
}

.url-input-real::placeholder {
  color: var(--text3);
}

/* ── Submit ──────────────────────────────────────────────── */

.lc-submit {
  width: 100%;
  margin-top: var(--space-2);
  padding: 1rem;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    opacity var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.lc-submit:hover:not(:disabled) {
  opacity: 0.88;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 28%, transparent);
}

.lc-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}

.lc-submit:active:not(:disabled) {
  transform: translateY(1px);
  opacity: 0.8;
}

.lc-submit:disabled {
  opacity: var(--inactive-opacity);
  cursor: not-allowed;
}

/* ── Shake Animation ─────────────────────────────────────── */

@keyframes lc-shake {
  0% {
    transform: translateX(0);
  }
  15% {
    transform: translateX(-5px);
  }
  30% {
    transform: translateX(5px);
  }
  45% {
    transform: translateX(-4px);
  }
  60% {
    transform: translateX(4px);
  }
  75% {
    transform: translateX(-2px);
  }
  90% {
    transform: translateX(2px);
  }
  100% {
    transform: translateX(0);
  }
}

.lc-shake {
  animation: lc-shake 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* ── Checkboxes ──────────────────────────────────────────── */

.checkbox-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.cb-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.65rem 1rem;
  cursor: pointer;
  user-select: none;
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast);
}

.cb-item:hover {
  border-color: var(--border-active);
  background: color-mix(in srgb, var(--bg3) 85%, var(--accent) 15%);
}

.cb-item:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.cb-item.checked {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--bg3) 92%, var(--accent) 8%);
}

.cb-dot {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1.5px solid var(--border-active);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.cb-item.checked .cb-dot {
  background: var(--accent);
  border-color: var(--accent);
}

.cb-check {
  width: 9px;
  height: 9px;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.cb-item.checked .cb-check {
  opacity: 1;
}

.cb-label {
  font-size: 13px;
  font-family: var(--font-body);
  color: var(--text2);
  transition: color var(--transition-fast);
}

.cb-item.checked .cb-label {
  color: var(--text);
}