/* ============================================================
   RADIX PIETAS — Estilos independentes pra rating-widget.js e
   course-gate.js. Cores fixas de propósito (não usam custom
   properties do style.css do site principal) porque essas duas
   peças também rodam dentro das páginas de curso, que têm seu
   próprio design system isolado e não carregam style.css.
   ============================================================ */

:root {
  --rw-teal: #00E5C8;
  --rw-gold: #D4A94A;
  --rw-ink: #08080f;
  --rw-panel: #0f1220;
  --rw-border: rgba(148, 158, 176, 0.22);
  --rw-text: #c7ccd6;
  --rw-text-dim: #8891a3;
}

/* ---------- Botão genérico usado pelos dois widgets ---------- */
.rw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 0.9rem; font-weight: 600;
  border-radius: 999px;
  padding: 0.7rem 1.6rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.rw-btn:active { transform: scale(0.97); }
.rw-btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.rw-btn-primary { background: var(--rw-teal); color: #06120f; }
.rw-btn-primary:hover:not(:disabled) { box-shadow: 0 8px 32px rgba(0, 229, 200, 0.35); }
.rw-btn-gold { background: transparent; border-color: var(--rw-gold); color: var(--rw-gold); }
.rw-btn-gold:hover:not(:disabled) { background: var(--rw-gold); color: #1a1305; }

/* ---------- Widget de avaliação ---------- */
.rating-widget { margin-top: 1rem; font-family: system-ui, sans-serif; }
.rating-summary { display: flex; align-items: baseline; gap: 0.4rem; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; margin-bottom: 0.6rem; color: var(--rw-text); }
.rating-avg { color: var(--rw-gold); font-weight: 700; }
.rating-count { color: var(--rw-text-dim); }
.rating-form { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.rating-stars-input { display: flex; gap: 0.25rem; }
.rating-stars-input button {
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: 1.5rem; line-height: 1; color: var(--rw-border);
  transition: color 0.15s ease, transform 0.15s ease;
}
.rating-stars-input button:hover { transform: scale(1.1); }
.rating-stars-input button.is-filled { color: var(--rw-gold); }
.rating-comment {
  width: 100%; min-height: 70px; resize: vertical; box-sizing: border-box;
  font-family: system-ui, sans-serif; font-size: 0.9rem; color: var(--rw-text);
  padding: 0.6rem 0.8rem; border-radius: 10px;
  border: 1px solid var(--rw-border); background: rgba(255, 255, 255, 0.03);
}
.rating-msg { font-size: 0.82rem; color: var(--rw-gold); margin: 0; }
.rating-login-link { font-size: 0.88rem; color: var(--rw-teal); text-decoration: underline; }
.rating-reaction { display: flex; gap: 0.6rem; }
.rating-reaction button {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--rw-border);
  border-radius: 999px; padding: 0.4rem 0.9rem; cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; color: var(--rw-text);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.rating-reaction button:hover:not(:disabled) { border-color: var(--rw-teal); color: var(--rw-teal); }
.rating-reaction button:disabled { opacity: 0.6; cursor: default; }

/* ---------- Gate de acesso aos cursos ---------- */
#course-gate-overlay {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  background: rgba(8, 8, 15, 0.88);
  backdrop-filter: blur(6px);
}
#course-gate-overlay .gate-panel {
  max-width: 480px; width: 100%;
  background: var(--rw-panel);
  border: 1px solid var(--rw-border);
  border-radius: 20px;
  padding: clamp(2rem, 5vw, 3rem);
  text-align: center;
  font-family: system-ui, sans-serif;
  color: var(--rw-text);
}
#course-gate-overlay .gate-panel .eyebrow {
  display: inline-block; font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--rw-teal);
}
#course-gate-overlay .gate-panel h2 {
  font-family: 'Space Grotesk', system-ui, sans-serif; color: #fff;
  font-size: clamp(1.3rem, 3vw, 1.7rem); margin: 0.6rem 0 0;
}
#course-gate-overlay .gate-panel p { margin: 0.8rem 0 0; color: var(--rw-text-dim); line-height: 1.5; }
#course-gate-overlay .gate-msg { margin-top: 0.8rem; font-size: 0.85rem; color: var(--rw-gold); }

#course-download-bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; justify-content: center; gap: 0.8rem; align-items: center;
  padding: 0.7rem 1rem;
  background: var(--rw-panel);
  border-bottom: 1px solid var(--rw-border);
  font-family: system-ui, sans-serif;
}
#course-download-bar .gate-msg { font-size: 0.82rem; color: var(--rw-gold); }