/*!
  * Item: Kitzu
  * Description: Personal Portfolio Template
  * Author/Developer: Exill
  * Author/Developer URL: https://themeforest.net/user/exill
  * Version: v2.0.0
  * License: Themeforest Standard Licenses: https://themeforest.net/licenses
  */

/* Project Modal Styles */
#projectModal .modal-content {
  background: #1a1a1a !important;
  border: 1px solid #333 !important;
  border-radius: 15px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

#projectModal .modal-header {
  border-bottom: 1px solid #333 !important;
  padding: 1.5rem !important;
  background: transparent !important;
}

#projectModal .modal-title {
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 1.5rem !important;
}

#projectModal .btn-close {
  filter: invert(1) !important;
  opacity: 0.8 !important;
  transition: opacity 0.3s ease !important;
}

#projectModal .btn-close:hover {
  opacity: 1 !important;
}

#projectModal .modal-body {
  padding: 1.5rem !important;
  color: #ffffff !important;
}

#projectModal .project-info h6 {
  color: #009e66 !important;
  margin-bottom: 0.75rem !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
}

#projectModal .project-info p {
  color: #cccccc !important;
  line-height: 1.6 !important;
  margin-bottom: 1.5rem !important;
}

#projectModal .badge {
  font-size: 0.75rem !important;
  padding: 0.4rem 0.8rem !important;
  border-radius: 15px !important;
  font-weight: 500 !important;
}

#projectModal .tech-stack .badge {
  background: #333 !important;
  color: #ffffff !important;
  margin-right: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

#projectModal .project-links .btn {
  padding: 0.6rem 1.2rem !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 2px solid #009e66 !important;
  margin-right: 0.75rem !important;
  margin-bottom: 0.5rem !important;
  display: inline-flex !important;
  align-items: center !important;
}

#projectModal .project-links .btn:first-child {
  background: transparent !important;
  color: #009e66 !important;
}

#projectModal .project-links .btn:first-child:hover {
  background: #009e66 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(0, 158, 102, 0.3) !important;
}

#projectModal .project-links .btn:last-child {
  background: #009e66 !important;
  color: #ffffff !important;
}

#projectModal .project-links .btn:last-child:hover {
  background: transparent !important;
  color: #009e66 !important;
  transform: translateY(-2px) !important;
}

#projectModal .contributions-section h6 {
  color: #009e66 !important;
  margin-bottom: 1rem !important;
  font-weight: 600 !important;
}

#projectModal .contribution-item {
  display: flex !important;
  align-items: flex-start !important;
  margin-bottom: 0.75rem !important;
}

#projectModal .contribution-item span:first-child {
  background: #009e66 !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  margin-right: 0.75rem !important;
  flex-shrink: 0 !important;
}

#projectModal .contribution-item span:last-child {
  color: #cccccc !important;
  line-height: 1.4 !important;
}

#projectModal hr {
  border-color: #333 !important;
  margin: 1.5rem 0 !important;
  opacity: 0.3 !important;
}

#projectModal .modal-dialog {
  max-width: 900px !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #projectModal .modal-dialog {
    margin: 1rem !important;
    max-width: calc(100% - 2rem) !important;
  }
  
  #projectModal .modal-header,
  #projectModal .modal-body {
    padding: 1rem !important;
  }
  
  #projectModal .project-links .btn {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 0.75rem !important;
    justify-content: center !important;
  }
  
  #projectModal .modal-title {
    font-size: 1.25rem !important;
  }
  
  #projectModal .contribution-item {
    margin-bottom: 1rem !important;
  }
}

/* Animation enhancements */
#projectModal.fade .modal-dialog {
  transition: transform 0.3s ease-out !important;
  transform: translate(0, -50px) !important;
}

#projectModal.show .modal-dialog {
  transform: none !important;
}

/* Custom scrollbar for modal */
#projectModal .modal-body::-webkit-scrollbar {
  width: 6px;
}

#projectModal .modal-body::-webkit-scrollbar-track {
  background: #1a1a1a;
  border-radius: 3px;
}

#projectModal .modal-body::-webkit-scrollbar-thumb {
  background: #009e66;
  border-radius: 3px;
}

#projectModal .modal-body::-webkit-scrollbar-thumb:hover {
  background: #007d52;
}