/* =============================================================
   PROJECT PHOENIX — LOVELY JAISWAL WEBSITE
   FILE: assets/css/buttons.css
   PURPOSE: All button variants — aligned to luxury design language.
   DESIGN LANGUAGE: Sharp corners. Gold accents. Light tracking.
                    Warm shadows. Decelerate easing. No radius.
   ============================================================= */


/* -----------------------------------------------------------
   BASE BUTTON — RESET + SHARED PROPERTIES
   ----------------------------------------------------------- */
.btn {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);

  /* Typography */
  font-family: var(--font-secondary);
  font-size: 0.6875rem;               /* 11px — matches nav-link scale  */
  font-weight: var(--weight-medium);
  letter-spacing: 0.14em;             /* Unified with nav tracking       */
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;

  /* Spacing */
  padding: 13px var(--space-8);

  /* Appearance */
  border: 1px solid transparent;
  border-radius: 0;                   /* Sharp corners — luxury absolute */
  cursor: pointer;
  user-select: none;
  outline: none;
  position: relative;
  overflow: hidden;

  /* Transition — decelerate out, standard in */
  transition:
    color            var(--duration-base) var(--ease-standard),
    background-color var(--duration-base) var(--ease-standard),
    border-color     var(--duration-base) var(--ease-standard),
    box-shadow       var(--duration-slow) var(--ease-standard),
    transform        var(--duration-base) var(--ease-standard);
}

/* Shimmer sweep on hover — luxury micro-interaction */
.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.10),
    transparent
  );
  transition: left var(--duration-slow) var(--ease-decelerate);
  pointer-events: none;
}

.btn:hover::before {
  left: 160%;
}

/* Hover — very subtle lift */
.btn:hover {
  transform: translateY(-2px);
}

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

/* Focus ring — gold */
.btn:focus-visible {
  outline: 1px solid var(--color-primary);
  outline-offset: 3px;
}

/* Disabled */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

/* Loading */
.btn.is-loading {
  cursor: wait;
  pointer-events: none;
}

.btn.is-loading .btn__text {
  opacity: 0;
}

.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}

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


/* -----------------------------------------------------------
   BUTTON VARIANTS
   ----------------------------------------------------------- */

/* PRIMARY — Gold filled */
.btn--primary {
  background-color: var(--color-primary, #b08d57) !important;
  color: var(--color-white, #fff) !important;
  border-color: var(--color-primary, #b08d57) !important;
}

.btn--primary:hover {
  background-color: #9e7f4e !important;
  border-color: #9e7f4e !important;
  color: var(--color-white, #fff) !important;
  box-shadow: 0 10px 30px rgba(176, 141, 87, 0.35) !important;
}

.btn--primary:active {
  background-color: #8c7045 !important;
  border-color: #8c7045 !important;
  color: var(--color-white, #fff) !important;
  box-shadow: 0 4px 12px rgba(176, 141, 87, 0.25) !important;
}

/* SECONDARY — Dark filled */
.btn--secondary {
  background-color: var(--color-primary, #b08d57) !important;
  color: var(--color-white, #fff) !important;
  border-color: var(--color-primary, #b08d57) !important;
}

.btn--secondary:hover {
  background-color: #9e7f4e !important;
  border-color: #9e7f4e !important;
  color: var(--color-white, #fff) !important;
  box-shadow: 0 10px 30px rgba(176, 141, 87, 0.35) !important;
}

.btn--secondary:active {
  background-color: #8c7045 !important;
  border-color: #8c7045 !important;
  color: var(--color-white, #fff) !important;
  box-shadow: 0 4px 12px rgba(176, 141, 87, 0.25) !important;
}

/* OUTLINE — Gold border, transparent fill */
.btn--outline {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn--outline:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: 0 6px 24px rgba(176, 141, 87, 0.20);
}

/* OUTLINE DARK */
.btn--outline-dark {
  background-color: transparent;
  color: var(--color-secondary);
  border-color: rgba(26, 26, 26, 0.30);
}

.btn--outline-dark:hover {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
}

/* OUTLINE WHITE — on dark/image backgrounds */
.btn--outline-white {
  background-color: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.45);
}

.btn--outline-white:hover {
  background-color: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.80);
}

/* GHOST — no border, minimal */
.btn--ghost {
  background-color: transparent;
  color: var(--color-primary);
  border-color: transparent;
}

.btn--ghost:hover {
  background-color: rgba(176, 141, 87, 0.06);
  border-color: transparent;
}

/* GHOST DARK */
.btn--ghost-dark {
  background-color: transparent;
  color: var(--color-secondary);
  border-color: transparent;
}

.btn--ghost-dark:hover {
  background-color: var(--color-neutral-100);
}

/* WHITE — solid white for dark backgrounds */
.btn--white {
  background-color: var(--color-white);
  color: var(--color-secondary);
  border-color: var(--color-white);
}

.btn--white:hover {
  background-color: var(--color-neutral-100);
  border-color: var(--color-neutral-100);
  box-shadow: 0 6px 24px rgba(255, 255, 255, 0.16);
}

/* DANGER */
.btn--danger {
  background-color: var(--color-error);
  color: var(--color-white);
  border-color: var(--color-error);
}

.btn--danger:hover {
  background-color: #732e2e;
  border-color: #732e2e;
  box-shadow: 0 6px 24px rgba(139, 58, 58, 0.28);
}


/* -----------------------------------------------------------
   BUTTON SIZES
   ----------------------------------------------------------- */

/* Extra Small */
.btn--xs {
  padding: 7px var(--space-4);
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
}

/* Small */
.btn--sm {
  padding: 9px var(--space-6);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
}

/* Medium — default */
.btn--md {
  padding: 13px var(--space-8);
  font-size: 0.6875rem;
}

/* Large */
.btn--lg {
  padding: 15px var(--space-10);
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
}

/* Extra Large */
.btn--xl {
  padding: 18px var(--space-12);
  font-size: var(--text-base);
  letter-spacing: 0.10em;
}


/* -----------------------------------------------------------
   ICON BUTTONS
   ----------------------------------------------------------- */

/* Icon only — square, sharp */
.btn--icon {
  padding: var(--space-3);
  border-radius: 0;                   /* Consistent: no radius */
  width: 44px;
  height: 44px;
}

.btn--icon svg {
  width: 18px;
  height: 18px;
}

.btn--icon.btn--sm {
  width: 36px;
  height: 36px;
  padding: var(--space-2);
}

.btn--icon.btn--lg {
  width: 52px;
  height: 52px;
  padding: var(--space-4);
}

/* Icon element within btn */
.btn__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  transition: transform var(--duration-base) var(--ease-decelerate);
}

/* Arrow icon — slides right on hover */
.btn:hover .btn__icon--arrow {
  transform: translateX(4px);
}


/* -----------------------------------------------------------
   FULL WIDTH
   ----------------------------------------------------------- */
.btn--full {
  width: 100%;
}


/* -----------------------------------------------------------
   PILL SHAPE — only where explicitly required
   ----------------------------------------------------------- */
.btn--pill {
  border-radius: var(--border-radius-full);
}


/* -----------------------------------------------------------
   LINK STYLE BUTTON
   ----------------------------------------------------------- */
.btn--link {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-family: var(--font-secondary);
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  text-transform: none;
  text-decoration: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Underline grows from left */
.btn--link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
  transition: width var(--duration-slow) var(--ease-decelerate);
}

.btn--link:hover {
  color: var(--color-primary-dark);
  transform: none;
}

.btn--link:hover::after {
  width: 100%;
}

.btn--link:hover::before {
  display: none; /* No shimmer on link buttons */
}


/* -----------------------------------------------------------
   BUTTON GROUP
   ----------------------------------------------------------- */
.btn-group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.btn-group--center {
  justify-content: center;
}

.btn-group--stack {
  flex-direction: column;
  align-items: stretch;
}


/* -----------------------------------------------------------
   WHATSAPP BUTTON — social-specific override
   ----------------------------------------------------------- */
.btn--whatsapp {
  background-color: #25D366;
  color: var(--color-white);
  border-color: #25D366;
  border-radius: 0;                   /* Keep consistent: sharp */
}

.btn--whatsapp:hover {
  background-color: #1ebe5d;
  border-color: #1ebe5d;
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.25);
}

/* -----------------------------------------------------------
   WHATSAPP FLOATING BUTTON (GLOBAL)
   ----------------------------------------------------------- */
.whatsapp-float {
  position: fixed;
  bottom: calc(var(--space-8) + 60px);
  right: var(--space-8);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: center;
}

.whatsapp-float__btn {
  width: 60px;
  height: 60px;
  background-color: var(--color-primary);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(198, 161, 91, 0.35);
  transition: transform var(--duration-base) var(--ease-spring), box-shadow var(--duration-slow) var(--ease-standard), background-color var(--duration-fast);
  text-decoration: none;
  position: relative;
}

.whatsapp-float__btn:hover {
  background-color: #9e7f4e;
  transform: scale(1.10) translateY(-2px);
  box-shadow: 0 10px 32px rgba(198, 161, 91, 0.50);
}

.whatsapp-float__btn:active {
  transform: scale(1.0) translateY(0);
}

.whatsapp-float__icon {
  width: 32px;
  height: 32px;
  fill: currentColor;
  flex-shrink: 0;
  z-index: 2;
}

.whatsapp-float__tooltip {
  display: none;
}

/* Pulse ring */
.whatsapp-float__pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(198, 161, 91, 0.4);
  animation: wa-pulse 2.5s var(--ease-standard) infinite;
  z-index: 1;
}

@keyframes wa-pulse {
  0%   { opacity: 0.8; transform: scale(1);    }
  70%  { opacity: 0;   transform: scale(1.35); }
  100% { opacity: 0;   transform: scale(1.35); }
}