/* ── Livrofly — CSS compartilhado ─────────────────────────────────────── */
/* Inclua este arquivo em todas as páginas: <link rel="stylesheet" href="/assets/css/app.css"> */

/* ── Base ─────────────────────────────────────────────────────────────── */
body { font-family: 'Inter', sans-serif; }

/* ── Inputs ──────────────────────────────────────────────────────────── */
.input-field {
  width: 100%;
  padding: 0.9rem 1rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 0.95rem;
  transition: border 0.2s, box-shadow 0.2s;
  outline: none;
}
.input-field:focus {
  border-color: rgba(236, 72, 153, 0.5);
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.15);
}
.input-field::placeholder { color: rgba(255, 255, 255, 0.25); }
.input-field option        { background: #1a0a2e; color: white; }
textarea.input-field       { resize: vertical; min-height: 80px; }

/* ── Botões ──────────────────────────────────────────────────────────── */
.btn-primary {
  padding: 0.9rem 2rem;
  border-radius: 0.75rem;
  font-weight: 600;
  background: linear-gradient(135deg, #ec4899, #a855f7);
  color: white;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
  border: none;
  font-size: 1rem;
}
.btn-primary:hover    { opacity: 0.9; transform: translateY(-1px); }
.btn-primary:active   { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-secondary {
  padding: 0.9rem 2rem;
  border-radius: 0.75rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 1rem;
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.12); }

/* ── Card ────────────────────────────────────────────────────────────── */
.card {
  background: rgba(15, 15, 25, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.5rem;
  padding: 2rem;
}

/* ── Mensagens de feedback ───────────────────────────────────────────── */
.msg-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: rgb(252, 165, 165);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}
.msg-ok {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: rgb(134, 239, 172);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}
.msg { padding: 0.75rem 1rem; border-radius: 0.75rem; font-size: 0.875rem; margin-bottom: 1rem; }

/* ── Badges ──────────────────────────────────────────────────────────── */
.badge          { padding: 0.2rem 0.65rem; border-radius: 9999px; font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.badge-pending  { background: #eab30820; color: #fde68a; border: 1px solid #eab30840; }
.badge-posted   { background: #22c55e20; color: #86efac; border: 1px solid #22c55e40; }
.badge-cancelled{ background: #ef444420; color: #fca5a5; border: 1px solid #ef444440; }

/* ── Spinner ─────────────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  animation: spin 1s linear infinite;
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  vertical-align: middle;
}

/* ── Animações de entrada ────────────────────────────────────────────── */
.fade-in { animation: fadeIn 0.3s ease; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Labels de formulário ────────────────────────────────────────────── */
.form-label      { display: block; font-size: 0.875rem; color: rgba(255, 255, 255, 0.6); margin-bottom: 0.375rem; }
.section-title   { font-size: 1rem; font-weight: 600; color: white; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }

/* ── User type buttons ───────────────────────────────────────────────── */
.user-type-btn {
  padding: 0.75rem;
  border-radius: 0.75rem;
  border: 2px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  color: white;
  width: 100%;
}
.user-type-btn.selected          { border-color: rgb(236, 72, 153); background: rgba(236, 72, 153, 0.1); }
.user-type-btn:hover:not(.selected) { border-color: rgba(255, 255, 255, 0.2); }