/*
 * XclusivTiles Button Design System
 * Inspired by luxury architectural brands.
 *
 * Base class: .xt-btn
 * Modifiers:
 * .xt-btn--primary
 * .xt-btn--secondary
 * .xt-btn--dark
 * .xt-btn--light
 * .xt-btn--icon
 */

.xt-btn {
  --xt-btn-border: #A3907C;
  --xt-btn-dark: #1C1A17;
  --xt-btn-light: #FFFFFF;
  --xt-btn-text: #756E64;
  --xt-btn-bg: transparent;
  --xt-btn-color: var(--xt-btn-text);
  --xt-btn-border-color: var(--xt-btn-border);
  --xt-btn-padding: 16px 32px;
  --xt-btn-radius: 0px;
  
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: var(--xt-btn-padding);
  border-radius: var(--xt-btn-radius);
  border: 1px solid var(--xt-btn-border-color);
  background-color: var(--xt-btn-bg);
  color: var(--xt-btn-color);
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.xt-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

/* Primary (Filled) */
.xt-btn--primary {
  --xt-btn-bg: var(--xt-btn-border);
  --xt-btn-color: var(--xt-btn-light);
  --xt-btn-border-color: var(--xt-btn-border);
}

.xt-btn--primary:hover {
  --xt-btn-bg: var(--xt-btn-dark);
  --xt-btn-border-color: var(--xt-btn-dark);
}

/* Secondary (Outlined) */
.xt-btn--secondary {
  --xt-btn-bg: transparent;
  --xt-btn-color: var(--xt-btn-dark);
  --xt-btn-border-color: var(--xt-btn-border);
}

.xt-btn--secondary:hover {
  --xt-btn-bg: var(--xt-btn-border);
  --xt-btn-color: var(--xt-btn-light);
}

/* Dark */
.xt-btn--dark {
  --xt-btn-bg: var(--xt-btn-dark);
  --xt-btn-color: var(--xt-btn-light);
  --xt-btn-border-color: var(--xt-btn-dark);
}

.xt-btn--dark:hover {
  --xt-btn-bg: var(--xt-btn-border);
  --xt-btn-border-color: var(--xt-btn-border);
}

/* Light */
.xt-btn--light {
  --xt-btn-bg: var(--xt-btn-light);
  --xt-btn-color: var(--xt-btn-dark);
  --xt-btn-border-color: var(--xt-btn-light);
}

.xt-btn--light:hover {
  --xt-btn-bg: var(--xt-btn-border);
  --xt-btn-color: var(--xt-btn-light);
  --xt-btn-border-color: var(--xt-btn-border);
}

/* Icon Only */
.xt-btn--icon {
  --xt-btn-padding: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  --xt-btn-bg: transparent;
  --xt-btn-color: var(--xt-btn-dark);
  --xt-btn-border-color: var(--xt-btn-border);
}

.xt-btn--icon:hover {
  --xt-btn-bg: var(--xt-btn-border);
  --xt-btn-color: var(--xt-btn-light);
  transform: translateY(0) scale(1.05);
}

/* Elementor Native Button Reset */
.elementor-button.xt-btn {
  /* Override Elementor specific styles to enforce design system */
  background-color: var(--xt-btn-bg) !important;
  color: var(--xt-btn-color) !important;
  border: 1px solid var(--xt-btn-border-color) !important;
  padding: var(--xt-btn-padding) !important;
  border-radius: var(--xt-btn-radius) !important;
}

.elementor-button.xt-btn:hover {
  /* Let the design system hover state handle it */
}

/* Icon inside button styling */
.xt-btn svg, .xt-btn i {
  transition: transform 0.4s ease;
}

.xt-btn:hover svg, .xt-btn:hover i {
  transform: translateX(4px);
}

.xt-btn--icon:hover svg, .xt-btn--icon:hover i {
  transform: none; /* Disable shift for icon-only button */
}