/* ============================================================
   BUTTONS COMPONENT
   Davinchi BarberShop
   ─────────────────────────────────────────────────────────────
   ★ ANIMATED GLOW BUTTON (.btn--glow)
   ============================================================ */

/* ─────────────────────────────────────────────
   BASE BUTTON RESET
────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  border: none;
  outline: none;
  background: transparent;
  transition: all var(--transition-std);
  position: relative;
  overflow: visible;
}

.btn__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────
   GOLDEN BUTTON
   From Uiverse.io by elijahgummer
────────────────────────────────────────────── */
.golden-button {
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  outline: none;
  font-family: inherit;
  font-size: 0.85em; /* Reducido para mejor ajuste */
  box-sizing: border-box;
  border: none;
  border-radius: 0.3em;
  height: 2.5em; /* Reducido altura */
  text-transform: uppercase;
  padding: 0 1em; /* Ajustado padding */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(110, 80, 20, 0.4),
    inset 0 -2px 5px 1px rgba(139, 66, 8, 1),
    inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
  background-image: linear-gradient(
    160deg,
    #a54e07,
    #b47e11,
    #fef1a2,
    #bc881b,
    #a54e07
  );
  border: 1px solid #a55d07;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  background-size: 100% 100%;
  background-position: center;
  font-weight: 700;
  text-decoration: none;
}

.golden-button:focus,
.golden-button:hover {
  background-size: 150% 150%;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23),
    inset 0 -2px 5px 1px #b17d10, inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
  border: 1px solid rgba(165, 93, 7, 0.6);
  color: #fff;
}

.golden-button:active {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(110, 80, 20, 0.4),
    inset 0 -2px 5px 1px #b17d10, inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
}

/* ─────────────────────────────────────────────
   OUTLINE BUTTON
────────────────────────────────────────────── */
.btn--outline {
  padding: 0.9em 2em;
  border: 1px solid rgba(196, 155, 58, 0.4);
  color: var(--color-cream-muted);
  border-radius: var(--radius-sm);
  letter-spacing: 0.08em;
  transition: border-color var(--transition-std), color var(--transition-std),
              background var(--transition-std);
}

.btn--outline:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
  background: rgba(196, 155, 58, 0.06);
}

/* ─────────────────────────────────────────────
   GOLD SOLID BUTTON
────────────────────────────────────────────── */
.btn--gold {
  padding: 0.9em 2.2em;
  background: var(--color-gold);
  color: var(--color-dark);
  border-radius: var(--radius-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: background var(--transition-std), transform var(--transition-fast),
              box-shadow var(--transition-std);
}

.btn--gold:hover {
  background: var(--color-gold-light);
  box-shadow: 0 4px 20px rgba(196, 155, 58, 0.4);
  transform: translateY(-2px);
}

.btn--gold:active {
  transform: translateY(0);
}

/* ─────────────────────────────────────────────
   BOOK APPOINTMENT (SIMPLIFIED GOLD BUTTON)
────────────────────────────────────────────── */
.btn--appointment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 0.8em 1.5em;
  background: transparent;
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  transition: all var(--transition-std);
  cursor: pointer;
}

.btn--appointment:hover {
  background: var(--color-gold);
  color: var(--color-black);
}

.btn--appointment__icon {
  width: 20px;
  height: 20px;
}

/* ─────────────────────────────────────────────
   INSTAGRAM BUTTON (NEW STYLE)
────────────────────────────────────────────── */
.Btn {
  width: 160px; /* Adjusted to fit the text 'Ver más en Instagram' */
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: transparent;
  position: relative;
  border-radius: 7px;
  cursor: pointer;
  transition: all .3s;
  text-decoration: none; /* In case of <a> tag */
}

.svgContainer {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  backdrop-filter: blur(4px);
  letter-spacing: 0.8px;
  border-radius: 10px;
  transition: all .3s;
  border: 1px solid rgba(156, 156, 156, 0.466);
  color: white; /* Ensure text/icon is visible */
}

.BG {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: #f09433;
  background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
  z-index: -1;
  border-radius: 9px;
  pointer-events: none;
  transition: all .3s;
}

.Btn:hover .BG {
  transform: rotate(35deg);
  transform-origin: bottom;
}

.Btn:hover .svgContainer {
  background-color: rgba(156, 156, 156, 0.466);
}