/* Consistent Button Styles */

/* Base Button Style - Blog Style Implementation */
.btn {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0 1.6rem;
  gap: 0.8rem;
  height: 6rem;
  background: #FFFFFF;
  border: 0.1rem solid #484848;
  border-radius: 4rem;
  color: #484848;
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 2.2rem;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Blog-style hover animation */
.btn:after {
  border-radius: 4rem;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #AFC845;
  transition: all 0.5s;
  border: none;
  z-index: 1;
}

.btn:hover {
  border: none;
  color: #fff;
}

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

/* Ensure text content is always visible above the animation */
.btn > * {
  position: relative;
  z-index: 2;
}

/* Fix for direct text nodes */
.btn {
  position: relative;
  z-index: 2;
}

/* Primary Button - Uses blog button style (default) */
.btn-primary {
  width: 27rem;
  /* Inherits all blog button styling from base .btn class */
}

/* Secondary Button - Alternative color scheme */
.btn-secondary {
  width: 27rem;
  border: 0.1rem solid #5A843B;
  color: #5A843B;
}

.btn-secondary:after {
  background: #5A843B;
}

/* Large Button */
.btn-lg {
  width: 31rem;
}

/* Extra Large Button */
.btn-xl {
  width: 42rem;
}

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

/* Button with Icon */
.btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-icon img,
.btn-icon i {
  margin-right: 1rem;
}

/* Button with Hidden Text (appears on hover) */
.btn-hover-text span {
  display: none;
}

.btn-hover-text:hover span {
  display: inline;
  position: relative;
  z-index: 2;
}

/* Button Variations */
.btn-light-green {
  background: #AFC845;
  border: 0.1rem solid #AFC845;
  color: #484848;
}

.btn-light-green:after {
  background: #5A843B;
}

.btn-light-green:hover {
  color: #FFFFFF;
}

/* Blog Button Consistency */
.blog-button {
  /* Make blog buttons use the same style as .btn */
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0 1.6rem;
  gap: 0.8rem;
  height: 6rem;
  background: #FFFFFF;
  border: 0.1rem solid #484848;
  border-radius: 4rem;
  color: #484848;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  width: 30.6rem;
}

.blog-button:after {
  border-radius: 4rem;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #AFC845;
  transition: all 0.5s;
  border: none;
  z-index: 1;
}

.blog-button:hover {
  border: none;
  color: #fff;
}

.blog-button:hover:after {
  width: 100%;
}

.blog-button > * {
  position: relative;
  z-index: 2;
}

/* Category Filter Buttons - Using blog-button class */
.product-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  margin: 3rem 0;
}

.blog-button.category-button {
  margin: 0 !important;
  min-width: 15rem !important;
  width: auto !important;
  padding: 0 2rem !important;
}

.blog-button.category-button.active {
  background: #AFC845 !important;
  border: 0.1rem solid #AFC845 !important;
  color: #484848 !important;
}

.blog-button.category-button.active:after {
  background: #5A843B !important;
}

.blog-button.category-button.active:hover {
  color: #FFFFFF !important;
}

.blog-button.category-button p {
  margin: 0;
  position: relative;
  z-index: 2;
}

/* Responsive category buttons */
@media (max-width: 768px) {
  .product-categories {
    gap: 1rem;
  }

  .blog-button.category-button {
    min-width: 12rem !important;
    font-size: 1.6rem !important;
  }
}

/* Product Card Buttons - Now using blog-button class directly */
.product-card .blog-button {
  /* Blog buttons in product cards inherit all blog-button styling */
  width: 30.6rem; /* Standard blog button width */
}

/* Buy Now Buttons in Product Detail Pages */
.green-banana__buy-button .blog-button {
  /* Buy Now buttons inherit all blog-button styling */
  width: 30.6rem; /* Standard blog button width */
  margin: 0 auto; /* Center the button */
}

/* Legacy buy-button class support */
.buy-button {
  /* Ensure any legacy buy-button classes work with blog styling */
  width: 30.6rem !important;
  height: 6rem !important;
  margin-bottom: 0 !important;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .btn {
    font-size: 2.2rem;
  }

  .btn-primary,
  .btn-secondary {
    width: 34rem;
  }

  .btn-lg {
    width: 38rem;
  }

  .btn-xl {
    width: 42.5rem;
  }
}

@media (max-width: 576px) {
  .btn {
    width: 100%;
    max-width: 42rem;
  }
}