/* ============================================
   Club720 Panel — Components
   ============================================ */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 10px 18px;
  font-size: var(--fs-md);
  line-height: var(--lh-control);
  letter-spacing: var(--ls-none);
  font-weight: 600;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn:focus-visible { box-shadow: var(--ring); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }

.btn-block { width: 100%; }

/* ---------- Form fields ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }

.label {
  font-size: var(--fs-lg);        /* 16px */
  line-height: var(--lh-label);   /* 26px — Eleken label style */
  font-weight: 500;
  color: var(--ink);
}

.input {
  width: 100%;
  padding: 10px 16px;
  font: inherit;
  font-size: var(--fs-sm);        /* 13px */
  line-height: var(--lh-control); /* 18px — Eleken control style */
  color: var(--ink);
  background: var(--canvas-alt);  /* Chatbase: subtle filled field */
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.input::placeholder { color: var(--muted); }
.input:hover { border-color: var(--border-strong); }
.input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: var(--ring);
}
.input[aria-invalid="true"] {
  border-color: var(--danger);
}
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(224, 36, 94, .18); }

/* Input with trailing action (e.g. show password) */
.input-wrap { position: relative; }
.input-wrap .input { padding-right: 44px; }
.input-trail {
  position: absolute;
  top: 50%; right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: 0;
  background: transparent;
  border-radius: var(--r-sm);
  color: var(--slate);
  cursor: pointer;
}
.input-trail:hover { background: var(--border); color: var(--ink); }

/* ---------- Feedback ---------- */
.error-msg {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  line-height: var(--lh-small);
  font-weight: 500;
  color: var(--danger);
}
.error-msg.visible { display: inline-flex; }

.form-alert {
  display: none;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  font-size: var(--fs-sm);
  line-height: var(--lh-small);
  font-weight: 500;
  border-radius: var(--r-md);
  border: 1px solid var(--danger-tint);
  background: var(--danger-tint);
  color: var(--danger);
}
.form-alert.visible { display: flex; }

.form-alert--success {
  border-color: var(--success-tint);
  background: var(--success-tint);
  color: var(--success);
}

/* ---------- Checkbox ---------- */
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  line-height: var(--lh-small);
  color: var(--slate);
  cursor: pointer;
  user-select: none;
}
.checkbox input {
  width: 16px; height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}

/* ---------- Logo ---------- */
.logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--r-lg);
  background: var(--ink);   /* Chatbase-style dark mark */
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -.02em;
  box-shadow: var(--shadow-sm);
}