/* ============================================
   ECOFACTOR - Buttons & Links Styles
   Based on Figma Design System (Exact specs)
   ============================================ */

/* ============================================
   BUTTONS BASE
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-primary);
  font-weight: var(--font-bold);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  border: 2px solid transparent;
  white-space: nowrap;
  box-sizing: border-box;
}

.btn:disabled,
.btn--disabled {
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================
   BUTTON SIZES
   ============================================ */

/* Large: height 60px, padding 10px 30px */
.btn--lg {
  height: 60px;
  padding: 10px 30px;
}

/* Middle: padding 10px 20px */
.btn--md {
  padding: 10px 20px;
}

/* ============================================
   FILLED BUTTON (Primary)
   ============================================ */

.btn--filled {
  background-color: var(--color-green-60);
  border-color: var(--color-green-60);
  color: var(--color-gray-20);
}

.btn--filled:hover {
  background-color: var(--color-green-50);
  border-color: var(--color-green-50);
}

.btn--filled:focus,
.btn--filled:focus-visible {
  background-color: var(--color-green-50);
  border-color: var(--color-green-50);
  outline: none;
  box-shadow: 0px 0px 0px 4px rgba(61, 208, 120, 0.2);
}

.btn--filled:active {
  background-color: var(--color-green-40);
  border-color: var(--color-green-40);
}

.btn--filled:disabled,
.btn--filled.btn--disabled {
  background-color: #87D9A8;
  border-color: #87D9A8;
  color: var(--color-white);
}

/* ============================================
   OUTLINE BUTTON - Light Background
   ============================================ */

.btn--outline {
  background-color: transparent;
  border: 2px solid var(--color-green-60);
  color: var(--color-gray-20);
}

.btn--outline:hover {
  background-color: rgba(61, 208, 120, 0.1);
}

.btn--outline:focus,
.btn--outline:focus-visible {
  background-color: rgba(61, 208, 120, 0.2);
  outline: none;
  box-shadow: 0px 0px 0px 4px #E8F7EE;
}

.btn--outline:active {
  background-color: rgba(61, 208, 120, 0.3);
}

.btn--outline:disabled,
.btn--outline.btn--disabled {
  background-color: transparent;
  border-color: #B0B2B5;
  color: #B0B2B5;
}


a.btn.btn--outline.btn--md {
    width: fit-content;
}

button.btn.btn--outline.btn--md {
    width: fit-content;
}
/* ============================================
   OUTLINE BUTTON - White (for dark backgrounds)
   ============================================ */

.btn--outline-light {
  background-color: transparent;
  border: 2px solid var(--color-white);
  color: var(--color-white);
}

.btn--outline-light:hover {
  background-color: var(--color-white);
  color: var(--color-gray-20);
}

.btn--outline-light:focus,
.btn--outline-light:focus-visible {
  background-color: rgba(255, 255, 255, 0.2);
  outline: none;
  box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 0.3);
}

.btn--outline-light:active {
  background-color: var(--color-white);
  color: var(--color-gray-20);
}

/* ============================================
   OUTLINE BUTTON - Dark Background (green border)
   ============================================ */

.btn--outline-dark {
  background-color: transparent;
  border: 2px solid var(--color-green-60);
  color: var(--color-white);
}

.btn--outline-dark:hover {
  background-color: rgba(61, 208, 120, 0.1);
}

.btn--outline-dark:focus,
.btn--outline-dark:focus-visible {
  background-color: rgba(61, 208, 120, 0.2);
  outline: none;
  box-shadow: 0px 0px 0px 4px #505050;
}

.btn--outline-dark:active {
  background-color: rgba(61, 208, 120, 0.3);
}

.btn--outline-dark:disabled,
.btn--outline-dark.btn--disabled {
  background-color: transparent;
  border-color: #B0B2B5;
  color: #B0B2B5;
}

/* ============================================
   OUTLINE BUTTON - Green Border (for dark backgrounds)
   Green border, white text. On hover: green bg, dark text
   ============================================ */

.btn--outline-green {
  background-color: transparent;
  border: 2px solid var(--color-green-60);
  color: var(--color-white);
}

.btn--outline-green:hover {
  background-color: var(--color-green-60);
  color: var(--color-gray-20);
}

.btn--outline-green:focus,
.btn--outline-green:focus-visible {
  background-color: rgba(58, 241, 133, 0.2);
  outline: none;
  box-shadow: 0px 0px 0px 4px rgba(58, 241, 133, 0.3);
}

.btn--outline-green:active {
  background-color: var(--color-green-60);
  color: var(--color-gray-20);
}

.btn--outline-green:disabled,
.btn--outline-green.btn--disabled {
  background-color: transparent;
  border-color: #B0B2B5;
  color: #B0B2B5;
}

/* ============================================
   SPECIAL BUTTON - Dark Theme
   ============================================ */

.btn--special-dark {
  background-color: var(--color-gray-10);
  border: 1px solid var(--color-gray-30);
  color: var(--color-white);
}

.btn--special-dark:hover {
  background: 
    linear-gradient(90deg, rgba(61, 208, 120, 0.1) 0%, rgba(61, 208, 120, 0.1) 100%), 
    var(--color-gray-10);
  color: var(--color-gray-95);
}

.btn--special-dark:focus,
.btn--special-dark:focus-visible {
  background: 
    linear-gradient(90deg, rgba(61, 208, 120, 0.1) 0%, rgba(61, 208, 120, 0.1) 100%), 
    var(--color-gray-10);
  outline: none;
  box-shadow: 0px 0px 0px 4px rgba(80, 80, 80, 0.25);
}

.btn--special-dark:disabled,
.btn--special-dark.btn--disabled {
  background-color: #B0B2B5;
  border-color: var(--color-gray-30);
  color: var(--color-white);
  box-shadow: 0px 0px 0px 4px rgba(80, 80, 80, 0.25);
}

/* ============================================
   SPECIAL BUTTON - Light Theme
   ============================================ */

.btn--special-light {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-30);
  color: var(--color-gray-20);
}

.btn--special-light:hover {
  background: 
    linear-gradient(90deg, rgba(61, 208, 120, 0.1) 0%, rgba(61, 208, 120, 0.1) 100%), 
    var(--color-gray-95);
}

.btn--special-light:focus,
.btn--special-light:focus-visible {
  background: 
    linear-gradient(90deg, rgba(61, 208, 120, 0.1) 0%, rgba(61, 208, 120, 0.1) 100%), 
    var(--color-gray-95);
  outline: none;
  box-shadow: 0px 0px 0px 4px rgba(80, 80, 80, 0.25);
}

.btn--special-light:disabled,
.btn--special-light.btn--disabled {
  background-color: #B0B2B5;
  border-color: var(--color-gray-30);
  color: var(--color-gray-30);
}

/* ============================================
   BUTTON ICONS
   ============================================ */

.btn__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn__icon svg {
  width: 100%;
  height: 100%;
}

/* ============================================
   ARROW ICON for Outline buttons (Hover/Focus)
   Figma: 21×5px, appears on hover
   ============================================ */

.btn__arrow {
  width: 21px;
  height: 5px;
  flex-shrink: 0;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
}

.btn__arrow svg {
  width: 21px;
  height: 5px;
}

/* Show arrow on hover/focus for outline buttons - Light BG (dark arrow) */
.btn--outline:hover .btn__arrow,
.btn--outline:focus .btn__arrow {
  opacity: 1;
  max-width: 21px;
}

/* Show arrow on hover/focus for outline buttons - Dark BG (white arrow) */
.btn--outline-dark:hover .btn__arrow,
.btn--outline-dark:focus .btn__arrow {
  opacity: 1;
  max-width: 21px;
}

/* ============================================
   LINKS
   ============================================ */

.link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  height: 48px;
  font-family: var(--font-primary);
  font-weight: var(--font-bold);
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  border-radius: 12px;
  text-transform: uppercase;
}

.link__text {
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* Link Default */
.link {
  color: var(--color-green-50);
}

/* Link Hover */
.link:hover {
  color: var(--color-green-40);
}

.link:hover .link__text {
  border-color: var(--color-green-40);
}

/* Link Focus */
.link:focus,
.link:focus-visible {
  color: var(--color-green-40);
  background-color: rgba(61, 208, 120, 0.1);
  outline: none;
}

/* Link Disabled */
.link--disabled,
.link:disabled {
  color: #B0B2B5;
  cursor: not-allowed;
  pointer-events: none;
}

.link--disabled .link__text {
  border-color: #B0B2B5;
}

/* Link Icon (direction arrow) */
.link__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.link__icon svg {
  width: 100%;
  height: 100%;
}

/* ============================================
   ARROW BUTTONS (Carousel/Navigation)
   Figma: 32×32px, border-radius 8px
   Icon: 8×12px, fill #1F1F1F
   ============================================ */

.arrow-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: var(--color-gray-95);
  border: 1px solid var(--color-green-60);
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition-fast);
  padding: 0;
  flex-shrink: 0;
}

/* Hover: green overlay 20% on gray-95 background */
.arrow-btn:hover {
  background: linear-gradient(90deg, rgba(61, 208, 120, 0.2) 0%, rgba(61, 208, 120, 0.2) 100%), var(--color-gray-95);
}

.arrow-btn:focus,
.arrow-btn:focus-visible {
  outline: none;
  background: 
    linear-gradient(90deg, rgba(61, 208, 120, 0.2) 0%, rgba(61, 208, 120, 0.2) 100%), 
    var(--color-gray-95);
  box-shadow: 0px 0px 0px 2px rgba(61, 208, 120, 0.3);
}

.arrow-btn:active {
  background: 
    linear-gradient(90deg, rgba(61, 208, 120, 0.3) 0%, rgba(61, 208, 120, 0.3) 100%), 
    var(--color-gray-95);
}

/* Arrow icon: 8×12px */
.arrow-btn__icon {
  width: 8px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-10);
}

.arrow-btn__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}



/* Arrow Navigation Container */
.arrow-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* ============================================
   APP STORE / GOOGLE PLAY BUTTONS
   ============================================ */

.app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  cursor: pointer;
  text-decoration: none;
}

/* Apple Store */
.app-btn--apple {
  width: 120px;
  height: 40px;
}

/* Google Play */
.app-btn--google {
  width: 135px;
  height: 40px;
}

/* Filled Style */
.app-btn--filled {
  background-color: var(--color-gray-10);
  border: none;
}

.app-btn--filled:hover {
  background-color: var(--color-gray-20);
}

/* Outline Style */
.app-btn--outline {
  background-color: transparent;
  border: none;
}

.app-btn--outline:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.app-btn__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ============================================
   BUTTON GROUP
   ============================================ */

.btn-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-group--vertical {
  flex-direction: column;
  align-items: flex-start;
}

/* ============================================
   ARROW GROUP (Carousel)
   ============================================ */

.arrow-group {
  display: flex;
  align-items: center;
  gap: 8px;
}