/* ==========================================================================
   LET'S MOVE - Buttons (Exact Figma Match)
   Component IDs: 7:51 (Primary), 23:65 (Secondary)
   ========================================================================== */

/* Base Button Styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.3s cubic-bezier(0.25, 0, 0.17, 0.99);
  white-space: nowrap;
}

/* ==========================================================================
   PRIMARY BUTTON (Component 7:51)
   - Background: gradient #F9A61A → #936210
   - Border radius: 60px (pill shape)
   - Text: #111111, Poppins SemiBold 14px
   - Padding: 9px
   - Size: ~255x48px
   ========================================================================== */
.btn--primary {
  position: relative;
  padding: 14px 9px 14px 24px;
  border-radius: 60px;
  background: linear-gradient(135deg, #f9a61a 0%, #936210 100%);
  color: #111111;
  height: 48px;
}

.btn--primary .btn__text {
  color: #111111;
}

.btn--primary .btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: #111111;
  border-radius: 60px;
  margin-left: 8px;
}

.btn--primary .btn__icon svg {
  width: 18px;
  height: 18px;
  stroke: #f9a61a;
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(249, 166, 26, 0.4);
}

.btn--primary:hover .btn__icon {
  background: #f9a61a;
}

.btn--primary:hover .btn__icon svg {
  stroke: #111111;
}

/* ==========================================================================
   SECONDARY BUTTON (Component 23:65)
   - Background: transparent
   - Border: 1px solid #F9A61A
   - Border radius: 60px
   - Text: #F9A61A, Poppins SemiBold 14px
   - Size: ~230x48px
   ========================================================================== */
.btn--secondary {
  padding: 14px 24px;
  border-radius: 60px;
  background: transparent;
  border: 1px solid #f9a61a;
  color: #f9a61a;
  height: 48px;
}

.btn--secondary svg {
  width: 18px;
  height: 18px;
  stroke: #f9a61a;
}

.btn--secondary:hover {
  background: rgba(249, 166, 26, 0.1);
  transform: translateY(-2px);
}

/* ==========================================================================
   Button Modifiers
   ========================================================================== */

/* Full Width */
.btn--full {
  width: 100%;
}

/* Small Button */
.btn--small {
  height: 42px;
  padding: 12px 20px;
  font-size: 13px;
}

/* Large Button */
.btn--large {
  height: 56px;
  padding: 18px 32px;
  font-size: 16px;
}

/* ==========================================================================
   Navigation Button (Header CTA) - Similar to Primary but smaller
   ========================================================================== */
.btn--nav {
  position: relative;
  padding: 10px 9px 10px 18px;
  border-radius: 60px;
  background: linear-gradient(135deg, #f9a61a 0%, #936210 100%);
  color: #111111;
  height: 42px;
  font-size: 13px;
}

.btn--nav .btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #111111;
  border-radius: 60px;
  margin-left: 6px;
}

.btn--nav .btn__icon svg {
  width: 14px;
  height: 14px;
  stroke: #f9a61a;
}

/* ==========================================================================
   Button Focus States (Accessibility)
   ========================================================================== */
.btn:focus {
  outline: none;
}

.btn:focus-visible {
  outline: 2px solid #f9a61a;
  outline-offset: 2px;
}

/* ==========================================================================
   Button Disabled State
   ========================================================================== */
.btn:disabled,
.btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}