/* Enhanced Page Navigation Styling */
.page-navigation {
  /* margin-top: 4rem; */
  /* padding: 2.5rem 1rem; */
  /* border-top: 3px solid rgba(78, 115, 223, 0.2); */
  /* background: linear-gradient(
    135deg,
    rgba(248, 249, 255, 0.9),
    rgba(230, 247, 251, 0.9)
  ); */
  border-radius: 20px;
  margin-top: 2rem;
  margin-bottom: 2rem;
  /* box-shadow: 0 5px 20px rgba(78, 115, 223, 0.08); */
}

.btn-nav {
  display: flex;
  align-items: center;
  padding: 1.75rem 2.25rem;
  border: 3px solid rgba(78, 115, 223, 0.4);
  border-radius: 18px;
  text-decoration: none;
  transition: all 0.4s ease;
  background: linear-gradient(135deg, #ffffff, rgba(248, 249, 255, 0.95));
  color: #2d3748;
  min-height: 100px;
  box-shadow: 0 6px 20px rgba(78, 115, 223, 0.15);
  position: relative;
  overflow: hidden;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.btn-nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.6),
    transparent
  );
  transition: left 0.6s;
}

.btn-nav:hover::before {
  left: 100%;
}

.btn-nav:hover {
  border-color: #2f3238;
  background: linear-gradient(
    135deg,
    rgba(78, 115, 223, 0.12),
    rgba(54, 185, 204, 0.12)
  );
  color: #2d3748;
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 35px rgba(78, 115, 223, 0.3);
}

.nav-content {
  display: flex;
  gap: 3;
  justify-content: start;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  position: relative;
}

.next-page .nav-content {
  align-items: flex-end;
  text-align: right;
}

.nav-label {
  font-size: 0.85rem;
  color: #2f3238;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  /* margin-bottom: 0.6rem; */
  background: linear-gradient(135deg, #2f3238, #868b94);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 3px rgba(78, 115, 223, 0.1);
}

.nav-title {
  font-weight: 800;
  color: #2d3748;
  line-height: 1.4;
  font-size: 1.2rem;
  max-width: 220px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-nav i {
  font-size: 1.8rem;
  opacity: 0.9;
  transition: all 0.4s ease;
  color: #2f3238;
  z-index: 2;
  position: relative;
  filter: drop-shadow(0 2px 4px rgba(78, 115, 223, 0.2));
}

.btn-nav:hover i {
  opacity: 1;
  transform: scale(1.2);
  color: #868b94;
}

.prev-page:hover i {
  transform: translateX(-7px) scale(1.2);
}

.next-page:hover i {
  transform: translateX(7px) scale(1.2);
}

/* Special styling for previous/next indicators */
.prev-page {
  background: linear-gradient(
    135deg,
    rgba(78, 115, 223, 0.08),
    rgba(54, 185, 204, 0.05)
  );
  border-left: 5px solid #2f3238;
}

.next-page {
  background: linear-gradient(
    135deg,
    rgba(54, 185, 204, 0.08),
    rgba(28, 200, 138, 0.05)
  );
  border-right: 5px solid #868b94;
}

.prev-page:hover {
  background: linear-gradient(
    135deg,
    rgba(78, 115, 223, 0.18),
    rgba(54, 185, 204, 0.12)
  );
  border-left-color: #2d5aa0;
}

.next-page:hover {
  background: linear-gradient(
    135deg,
    rgba(54, 185, 204, 0.18),
    rgba(28, 200, 138, 0.12)
  );
  border-right-color: #6b7078;
}

/* Add pulse animation for better visibility */
@keyframes navPulse {
  0% {
    box-shadow: 0 6px 20px rgba(78, 115, 223, 0.15);
  }
  50% {
    box-shadow: 0 8px 25px rgba(78, 115, 223, 0.25);
  }
  100% {
    box-shadow: 0 6px 20px rgba(78, 115, 223, 0.15);
  }
}

.btn-nav {
  animation: navPulse 3s ease-in-out infinite;
}

.btn-nav:hover {
  animation: none;
}

/* Mobile responsiveness for navigation */
@media (max-width: 768px) {
  .page-navigation {
    margin-top: 3rem;
    padding: 2rem 0.5rem;
    border-radius: 15px;
  }

  .btn-nav {
    padding: 1.25rem 1.5rem;
    /* min-height: 85px; */
    border-radius: 12px;
  }

  .nav-title {
    font-size: 1rem;
    max-width: 160px;
  }

  .nav-label {
    font-size: 0.75rem;
    /* margin-bottom: 0.4rem; */
    letter-spacing: 0.8px;
  }

  .btn-nav i {
    font-size: 1.5rem;
  }
}

@media (max-width: 576px) {
  .page-navigation {
    padding: 1.5rem 0.25rem;
  }

  .btn-nav {
    padding: 1rem 1.25rem;
    min-height: 75px;
    border-radius: 10px;
  }

  .nav-title {
    font-size: 0.9rem;
    max-width: 140px;
  }

  .nav-label {
    font-size: 0.7rem;
    letter-spacing: 0.6px;
  }

  .btn-nav i {
    font-size: 1.3rem;
  }
}