/* ============================================================
   Propify Automation - Frontend (Shortcodes)
   Tipografia e cores controladas por CSS variables:
   --propify-h3-{desktop,tablet,mobile}
   --propify-text-{desktop,tablet,mobile}
   --propify-color-heading
   --propify-color-text
   ============================================================ */

:root {
  /* cores (podem ser sobrescritas via inline style com valores vindos das Settings) */
  --propify-color-heading: #111111;
  --propify-color-text:    #333333;

  /* tamanhos base (px) */
  --propify-h3-desktop: 24px;
  --propify-h3-tablet:  22px;
  --propify-h3-mobile:  19px;

  --propify-text-desktop: 16px;
  --propify-text-tablet:  14px;
  --propify-text-mobile:  14px;
}

/* Container padrão dos blocos do cliente */
.propify-box,
.propify-scenario-card,
.propify-admin-frontend {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 16px;
  margin: 12px 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: var(--propify-color-text);
}

/* Títulos */
.propify-box h3,
.propify-scenario-card h3,
.propify-admin-frontend h3 {
  margin: 0 0 10px;
  color: var(--propify-color-heading);
  font-weight: 600;
  font-size: var(--propify-h3-desktop);
}

/* Texto base */
.propify-box,
.propify-scenario-card,
.propify-admin-frontend {
  font-size: var(--propify-text-desktop);
  line-height: 1.5;
}

/* Badges simples */
.propify-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  border: 1px solid #e2e2e2;
  background: #fafafa;
  color: #555;
}

/* Listas de módulos / chips */
.propify-chiplist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.propify-chip {
  border: 1px solid #e2e2e2;
  background: #fafafa;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 12px;
}

/* Botões */
.propify-btn {
  display: inline-block;
  appearance: none;
  border: 1px solid #1b73aa;
  background: #1e88d6;
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: transform .02s ease-in, background .15s ease;
}
.propify-btn:hover { background: #1779c1; color: #fff; }
.propify-btn:active { transform: translateY(1px); }

.propify-btn--ghost {
  background: transparent;
  color: #1e88d6;
  border-color: #1e88d6;
}
.propify-btn--ghost:hover {
  background: #e8f3fb;
}

/* Mensagens inline */
.propify-inline-hint { color: #777; font-size: 12px; }

/* Tabelas simples */
.propify-table {
  width: 100%;
  border-collapse: collapse;
}
.propify-table th,
.propify-table td {
  border: 1px solid #ececec;
  padding: 8px 10px;
  text-align: left;
}
.propify-table th { background: #fafafa; }

/* Estados (sucesso/erro/info) */
.propify-state-ok    { color: #0a9928; }
.propify-state-warn  { color: #b36b00; }
.propify-state-error { color: #a00000; }

/* Responsividade */
@media (max-width: 1024px) {
  .propify-box,
  .propify-scenario-card,
  .propify-admin-frontend { font-size: var(--propify-text-tablet); }

  .propify-box h3,
  .propify-scenario-card h3,
  .propify-admin-frontend h3 { font-size: var(--propify-h3-tablet); }
}

@media (max-width: 767px) {
  .propify-box,
  .propify-scenario-card,
  .propify-admin-frontend { font-size: var(--propify-text-mobile); }

  .propify-box h3,
  .propify-scenario-card h3,
  .propify-admin-frontend h3 { font-size: var(--propify-h3-mobile); }
}

/* Utilitários */
.propify-flex { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.propify-mt-8 { margin-top: 8px; }
.propify-mt-12{ margin-top: 12px; }
.propify-mt-16{ margin-top: 16px; }
.propify-muted{ color:#777; }