/* public/css/components/button.css */

/* Primary button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: var(--cta-height);
  padding: 0 var(--cta-pad-x);
  border-radius: var(--radius-md);

  background: var(--color-cta);
  color: var(--color-bg);

  font-weight: var(--font-weight-bold);
  font-size: var(--cta-font-size);
  text-transform: uppercase;

  border: 0;
  box-shadow: none;
  /* plano */
  transition: background-color var(--transition-fast),
    transform var(--transition-fast);
}

.btn:hover {
  background: var(--color-cta-hover);
}

.btn:active {
  transform: translateY(1px);
}

/* Desktop placement helper (keeps your existing behavior) */
.btn--desktop {
  display: inline-flex;
}

/* Icon button (flat) */
.icon-btn {
  width: var(--icon-btn);
  height: var(--icon-btn);
  border-radius: var(--radius-md);

  border: 0;
  /* plano */
  background: transparent;
  /* plano */

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Dropdown items are buttons (kept as-is) */
.langmenu__item {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border-radius: var(--radius-sm);

  display: flex;
  align-items: center;
  gap: 10px;

  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.langmenu__item:hover {
  background: rgba(0, 0, 0, 0.05);
}