/* Seletor de periodicidade, etiqueta de economia e nota dos cards de planos
   (montados por /shared/js/gl-planos.js). Mesmos valores do card da tela de
   assinatura do app (app/views/assinatura/index.php: .periodicidade-toggle,
   .economia-tag, .plano-nota) — usado nas três landings, por isso as classes
   têm prefixo próprio e não dependem do CSS de nenhuma delas. */

.gl-periodo-toggle {
  display: inline-flex;
  align-self: flex-start; /* dentro de card flex-column: do tamanho das opções, não esticado */
  background: #f1f5f9;
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  margin: 4px 0 2px;
}
.gl-periodo-opcao {
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  transition: all 0.15s;
  cursor: pointer;
  line-height: 1.3;
}
.gl-periodo-opcao:hover {
  color: #1e293b;
}
.gl-periodo-opcao.active {
  background: #fff;
  color: #4f46e5;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

.gl-periodo-economia {
  display: inline-block;
  align-self: flex-start;
  background: #dcfce7;
  color: #15803d;
  border-radius: 20px;
  padding: 5px 16px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  margin-bottom: 4px;
}
.text-center > .gl-periodo-economia {
  align-self: center;
}

.gl-periodo-nota {
  display: block;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.45;
  margin-top: 10px;
}
.gl-periodo-nota i {
  vertical-align: -2px;
}

/* Tema escuro do site principal (data-theme-mode=dark do Xintra) */
[data-theme-mode="dark"] .gl-periodo-toggle {
  background: rgba(255, 255, 255, 0.08);
}
[data-theme-mode="dark"] .gl-periodo-opcao {
  color: #94a3b8;
}
[data-theme-mode="dark"] .gl-periodo-opcao:hover {
  color: #e2e8f0;
}
[data-theme-mode="dark"] .gl-periodo-opcao.active {
  background: #6366f1;
  color: #fff;
}
[data-theme-mode="dark"] .gl-periodo-economia {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}