/* ==========================================================================
   VR Celebrations — Buttons
   File: assets/css/buttons.css
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.48rem 1.25rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  transition:
    background var(--transition-base),
    color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-spring);
}

.btn:active {
  transform: scale(0.97);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
}

.btn svg {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------
   Variants
   -------------------------------------------------------------------- */

/* Gold — primary action (Book Now, Explore Packages, Login, Send) */
.btn--primary {
  background: var(--gradient-gold);
  color: var(--color-text-invert);
  box-shadow: var(--shadow-gold);
}

.btn--primary:hover {
  background: var(--gradient-gold-hover);
  color: var(--color-text-invert);
  box-shadow: 0 10px 26px rgba(217, 134, 26, 0.42);
  transform: translateY(-2px);
}

/* Magenta→purple — celebration CTA (Continue, Pay Now, Contact Us) */
.btn--celebration {
  background: var(--gradient-celebration);
  color: var(--color-text-invert);
  box-shadow: var(--shadow-accent);
}

.btn--celebration:hover {
  background: var(--gradient-celebration-hover);
  color: var(--color-text-invert);
  box-shadow: 0 10px 26px rgba(233, 30, 140, 0.40);
  transform: translateY(-2px);
}

/* Outline — secondary action (Book a Tour, View All) */
.btn--outline {
  background: transparent;
  color: var(--color-primary-dark);
  box-shadow: inset 0 0 0 1.5px var(--color-primary);
}

.btn--outline:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary-darker);
}

/* Ghost — quiet action on tinted surfaces */
.btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
}

.btn--ghost:hover {
  background: var(--color-bg-alt);
  color: var(--color-text);
}

/* Soft accent pill (chips-style CTA) */
.btn--accent-soft {
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
}

.btn--accent-soft:hover {
  background: var(--color-accent);
  color: var(--color-text-invert);
}

/* --------------------------------------------------------------------
   Sizes
   -------------------------------------------------------------------- */

.btn--sm {
  padding: 0.28rem 0.85rem;
  font-size: var(--fs-xs);
}

.btn--lg {
  padding: 0.6rem 1.75rem;
  font-size: var(--fs-sm);
}

.btn--block {
  display: flex;
  width: 100%;
}

/* Icon-only round button (carousel arrows, close, social) */
.btn--icon {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
}

/* --------------------------------------------------------------------
   Ripple effect — span injected by app.js on pointerdown
   -------------------------------------------------------------------- */

.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transform: scale(0);
  animation: btn-ripple 600ms ease-out forwards;
  pointer-events: none;
}

@keyframes btn-ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* --------------------------------------------------------------------
   Loading state
   -------------------------------------------------------------------- */

.btn.is-loading {
  color: transparent;
  pointer-events: none;
}

.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 1.1em;
  height: 1.1em;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin 700ms linear infinite;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------
   Link with arrow (Explore →)
   -------------------------------------------------------------------- */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  color: var(--color-primary-dark);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.link-arrow svg {
  width: 1em;
  height: 1em;
  transition: transform var(--transition-fast);
}

.link-arrow:hover svg {
  transform: translateX(4px);
}