/* =========================
   BUTOANE (din sistemul tău, cu fixuri)
   ========================= */
.buton-custom {
  --btn-bg: var(--color-1);
  --btn-fg: #fff;
  --btn-brd: transparent;
  --btn-weight: var(--font-weight-bold);
  --btn-radius: var(--radius-md);
  --btn-fs: var(--fs-3);
  --btn-py: 0.6rem;
  --btn-px: 1rem;
  --btn-gap: 0.55rem;
  --btn-icon-size: 1.15em;
  --btn-shadow: var(--elev-1);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  padding: var(--btn-py) var(--btn-px);
  font: var(--btn-weight) var(--btn-fs) / 1.2 var(--font-family-sans);
  border-radius: var(--btn-radius);
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-brd);
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    background-color 0.18s ease, color 0.18s ease;
}
.buton-custom:hover {
  transform: translateY(-1px);
  box-shadow: var(--elev-2);
  background: color-mix(in srgb, var(--btn-bg) 92%, #000);
}
.buton-custom:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
.buton-custom:active {
  transform: translateY(0);
  box-shadow: var(--elev-1);
  background: color-mix(in srgb, var(--btn-bg) 88%, #000);
}
.buton-custom[disabled],
.buton-custom.is-disabled {
  opacity: 0.55;
  pointer-events: none;
  filter: grayscale(0.1);
  cursor: not-allowed;
}

.buton-custom .material-symbols-outlined {
  font-size: var(--btn-icon-size);
  line-height: 1;
}
.buton-custom.right-icon .material-symbols-outlined {
  order: 2;
}
.buton-custom.left-icon .material-symbols-outlined {
  order: 0;
}
.buton-custom.right-icon:hover .material-symbols-outlined {
  transform: translateX(2px);
  transition: transform 0.18s ease;
}
.buton-custom.left-icon:hover .material-symbols-outlined {
  transform: translateX(-2px);
  transition: transform 0.18s ease;
}

.buton-custom.small {
  --btn-fs: var(--fs-2);
  --btn-py: 0.45rem;
  --btn-px: 0.85rem;
}
.buton-custom.medium {
  --btn-fs: var(--fs-3);
  --btn-py: 0.6rem;
  --btn-px: 1rem;
}
.buton-custom.primary {
  --btn-fs: var(--fs-4);
  --btn-py: 0.7rem;
  --btn-px: 1.1rem;
}
.buton-custom.large {
  --btn-fs: var(--fs-5);
  --btn-py: 0.8rem;
  --btn-px: 1.25rem;
}
.buton-custom.big {
  --btn-fs: var(--fs-6);
  --btn-py: 1rem;
  --btn-px: 1.4rem;
  --btn-icon-size: 1.2em;
}

.buton-custom.unpadded {
  --btn-px: 0;
  --btn-py: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  color: var(--btn-bg);
}
.buton-custom.ghost,
.buton-custom.outline {
  background: transparent;
  color: var(--btn-bg);
  border-color: currentColor;
}
.buton-custom.ghost:hover,
.buton-custom.outline:hover {
  background: color-mix(in srgb, var(--btn-bg) 10%, transparent);
}

.buton-custom.color-1 {
  --btn-bg: var(--color-1);
  --btn-fg: var(--color-primary-contrast);
}
.buton-custom.color-2 {
  --btn-bg: var(--color-2);
  --btn-fg: var(--color-white);
}
.buton-custom.color-3 {
  --btn-bg: var(--color-3);
  --btn-fg: var(--color-white);
}
.buton-custom.color-4 {
  --btn-bg: var(--color-4);
  --btn-fg: var(--color-white);
}
.buton-custom.color-5 {
  --btn-bg: var(--color-5);
  --btn-fg: var(--color-white);
}
.buton-custom.color-6 {
  --btn-bg: var(--color-6);
  --btn-fg: var(--color-white);
}
.buton-custom.color-7 {
  --btn-bg: var(--color-7);
  --btn-fg: var(--color-white);
}
.buton-custom.color-8 {
  --btn-bg: var(--color-8);
  --btn-fg: var(--color-white);
}

.buton-custom.animation1:hover {
  box-shadow: 0 14px 32px -12px var(--color-shadow);
}
.buton-custom.animation2 {
  position: relative;
  isolation: isolate;
}
.buton-custom.animation2::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  z-index: -1;
  background: radial-gradient(
    60% 80% at 50% 50%,
    color-mix(in srgb, var(--btn-bg) 55%, transparent),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.2s ease;
}
.buton-custom.animation2:hover::after {
  opacity: 0.7;
}
.buton-custom.animation3 {
  background: var(--btn-bg);
}
.buton-custom.animation3::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, #fff 60%, var(--btn-bg));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}
.buton-custom.animation3:hover::after {
  transform: scaleX(1);
}
.buton-custom.animation4:hover {
  transform: translateY(-1px) scale(1.01);
}
.buton-custom.animation5 {
  position: relative;
  overflow: hidden;
}
.buton-custom.animation5::before {
  content: "";
  position: absolute;
  inset: -120% -40%;
  transform: rotate(18deg);
  background: linear-gradient(
    to right,
    transparent 35%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.6s ease;
}
.buton-custom.animation5:hover::before {
  opacity: 1;
  transform: rotate(18deg) translateX(15%);
}

@media (prefers-reduced-motion: reduce) {
  .buton-custom,
  .buton-custom::before,
  .buton-custom::after,
  .buton-custom .material-symbols-outlined {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}