/* ==========================================================================
   Buttons — re-skin Bootstrap buttons via their component variables.
   Gold buttons use dark text for contrast (gold is a light color).
   ========================================================================== */

.btn-primary {
  --bs-btn-color: var(--brand-on-primary);
  --bs-btn-bg: var(--zt-gold);
  --bs-btn-border-color: var(--zt-gold);
  --bs-btn-hover-color: var(--brand-on-primary);
  --bs-btn-hover-bg: var(--zt-gold-light);
  --bs-btn-hover-border-color: var(--zt-gold-light);
  --bs-btn-active-color: var(--brand-on-primary);
  --bs-btn-active-bg: var(--zt-gold-dark);
  --bs-btn-active-border-color: var(--zt-gold-dark);
  --bs-btn-disabled-color: var(--brand-on-primary);
  --bs-btn-disabled-bg: var(--zt-gold);
  --bs-btn-disabled-border-color: var(--zt-gold);
  --bs-btn-focus-shadow-rgb: var(--zt-gold-rgb);
}

.btn-outline-primary {
  --bs-btn-color: var(--brand-text);
  --bs-btn-border-color: var(--zt-gold);
  --bs-btn-hover-color: var(--brand-on-primary);
  --bs-btn-hover-bg: var(--zt-gold);
  --bs-btn-hover-border-color: var(--zt-gold);
  --bs-btn-active-color: var(--brand-on-primary);
  --bs-btn-active-bg: var(--zt-gold-dark);
  --bs-btn-active-border-color: var(--zt-gold-dark);
  --bs-btn-focus-shadow-rgb: var(--zt-gold-rgb);
}

/* Metallic gold, like the logo — use on hero CTAs */
.btn-gold {
  --bs-btn-color: var(--brand-on-primary);
  --bs-btn-hover-color: var(--brand-on-primary);
  --bs-btn-active-color: var(--brand-on-primary);
  --bs-btn-border-color: transparent;
  --bs-btn-focus-shadow-rgb: var(--zt-gold-rgb);
  background: var(--zt-gold-gradient);
  background-size: 200% 100%;
  transition: background-position 0.4s ease, transform var(--transition-base);
}

.btn-gold:hover {
  background-position: 100% 0;
  box-shadow: 0 10px 28px rgba(var(--zt-gold-rgb), 0.35);
}

/* Frosted outline button for use over photos / video */
.btn-glass {
  --bs-btn-color: #f5efdf;
  --bs-btn-border-color: rgba(var(--zt-gold-rgb), 0.55);
  --bs-btn-hover-color: var(--zt-black);
  --bs-btn-hover-bg: var(--zt-gold);
  --bs-btn-hover-border-color: var(--zt-gold);
  --bs-btn-active-color: var(--zt-black);
  --bs-btn-active-bg: var(--zt-gold-dark);
  --bs-btn-active-border-color: var(--zt-gold-dark);
  background-color: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: 0.65rem;
  transition: transform var(--transition-base), background-color var(--transition-base),
    color var(--transition-base), box-shadow var(--transition-base), background-position 0.4s ease;
}

.btn-lg {
  --bs-btn-padding-x: 1.6rem;
  --bs-btn-padding-y: 0.85rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-border-radius: 0.75rem;
}

.btn:hover {
  transform: translateY(-2px);
}