/**
 * Component: ccy_button
 * Base styles and overrides for the generic button component.
 * Complements Bootstrap classes when necessary.
 */

.btn-ccy {
  display: inline-flex;
  background-color: #db1952;
  text-transform: uppercase;
  font-size: var(--font_size_botton);
  font-weight: 650;
  color: var(--ccy-bg-light);
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  transition: all .3s;
  text-decoration: none;
  border: none;
  align-items: center;      /* Centra icona e testo verticalmente */
  justify-content: center;   /* Centra icona e testo orizzontalmente */
  gap: 10px;                 /* Crea lo spazio esatto tra icona e testo */
}

.btn-ccy:hover {
  background: linear-gradient(90deg, #007bff, #00c6ff);
  color: var(--ccy-bg-light);
  box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
  transform: translateY(-1px);
}

.btn-ccy.ghost {
  background-color: transparent;
  border: 1px solid #00c6ff;
  color: #00c6ff;
}

.btn-ccy.ghost:hover {
  background: linear-gradient(90deg, #007bff, #00c6ff);
  color: var(--ccy-bg-light);
  box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
  transform: translateY(-1px);
}