/* Estilos para manter o ícone igual ao texto (tamanho e cor) */
.ceatc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit; /* herda cor do contexto/controles do Elementor */
  line-height: 1; /* base consistente */
}

.ceatc-btn .ceatc-icon {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-size: 1em; /* ícone segue tipografia do botão */
  color: inherit; /* mesma cor do texto */
  vertical-align: middle;
}

/* Garantir que SVG e ícones usem o tamanho da fonte e a cor atual */
.ceatc-btn .ceatc-icon svg,
.ceatc-btn .ceatc-icon i,
.ceatc-btn .ceatc-icon img {
  width: 1em !important;
  height: 1em !important;
  fill: currentColor;
  stroke: currentColor;
  vertical-align: middle;
}

/* Caso o SVG tenha atributos inline que sobrescrevam a cor */
.ceatc-btn .ceatc-icon svg [fill] { fill: currentColor !important; }
.ceatc-btn .ceatc-icon svg [stroke] { stroke: currentColor !important; }

/* Garante que paths dentro do SVG herdem a cor quando possível */
.ceatc-btn .ceatc-icon svg path,
.ceatc-btn .ceatc-icon svg rect,
.ceatc-btn .ceatc-icon svg circle,
.ceatc-btn .ceatc-icon svg polygon,
.ceatc-btn .ceatc-icon svg line,
.ceatc-btn .ceatc-icon svg polyline {
  fill: currentColor;
  stroke: currentColor;
}

/* Quantidade (input) - estilos base que podem ser sobrescritos pelos controles do Elementor */
.ceatc-btn-wrap .ceatc-qty {
  display: inline-block;
  vertical-align: middle;
  height: 38px;
  line-height: 1.2;
  padding: 6px 10px;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 6px;
  background: #fff;
  color: #111;
  width: 60px; /* pode ser alterado no controle */
}

/* Garantir que setas do input number fiquem visíveis onde suportado */
/* Chrome, Edge, Safari */
.ceatc-btn-wrap .ceatc-qty::-webkit-outer-spin-button,
.ceatc-btn-wrap .ceatc-qty::-webkit-inner-spin-button {
  opacity: 1;
}

/* Firefox */
.ceatc-btn-wrap .ceatc-qty[type=number] {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* Animação de loading (spinner) */
@keyframes ceatc-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.ceatc-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 0.15em solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ceatc-spin 1s linear infinite;
}

/* Ícone de check simples (quando necessário via CSS-only fallback) */
.ceatc-check {
  display: inline-block;
  width: 1em;
  height: 1em;
}