/* components.css — reusable building blocks: buttons, icons (.ico, drawn from
   /img/icons.svg), text fields, status texts and the toast. */

/* ---- Buttons and icons ---- */
button, .btn {
  min-height: 44px;
  font: inherit; font-weight: 650; font-size: 15px; line-height: 1.2;
  padding: 11px 18px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .15s, box-shadow .15s, background .15s, border-color .15s;
}
button:hover, .btn:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); }
.btn.primary, button.primary { background: var(--btn-grad); background-color: var(--primary); border-color: transparent; color: var(--primary-text); box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 35%, transparent); }
.btn.primary:hover, button.primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 45%, transparent); }
.btn.big { padding: 15px 24px; font-size: 17px; border-radius: 14px; }
.btn.small { padding: 5px 10px; font-size: 13px; border-radius: 8px; }
.btn.light { background: #fff; color: #3b2fd0; border-color: transparent; }
button:disabled, .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
#go:disabled { cursor: progress; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Text fields ---- */
input[type=url], input[type=email], .panel input, input.field {
  width: 100%; font: inherit; font-size: 16px; padding: 15px 16px; border-radius: 14px;
  border: 1.5px solid var(--line); background: var(--surface-2); color: var(--text);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder { color: color-mix(in srgb, var(--muted) 85%, transparent); }
input:focus { outline: none; border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); }
input:disabled { opacity: .6; }

/* ---- Hints and status texts ---- */
.hint { font-size: 13px; color: var(--muted); }
.error { color: var(--err); font-weight: 650; }
.ok { color: var(--ok); font-weight: 650; }
.danger { color: var(--err); border-color: var(--err); }

/* ---- Toast ---- */
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 12px; font-size: 14px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 40; }
.toast.show { opacity: 1; }