/* Elevate Agent Custom Styles */

/* Loading animations */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-spinner {
  animation: spin 1s linear infinite;
}

/* Custom button styles */
.btn-primary {
  background-color: #dc2626; /* bg-red-600 */
  color: white;
  font-weight: 500; /* font-medium */
  padding: 0.5rem 1rem; /* py-2 px-4 */
  border-radius: 0.5rem; /* rounded-lg */
  transition: all 0.2s;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-primary:hover {
  background-color: #b91c1c; /* hover:bg-red-700 */
}

.btn-secondary {
  background-color: #e5e7eb; /* bg-gray-200 */
  color: #1f2937; /* text-gray-800 */
  font-weight: 500; /* font-medium */
  padding: 0.5rem 1rem; /* py-2 px-4 */
  border-radius: 0.5rem; /* rounded-lg */
  transition: all 0.2s;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-secondary:hover {
  background-color: #d1d5db; /* hover:bg-gray-300 */
}

/* Card hover effects */
.course-card {
  background-color: white;
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
  transition: box-shadow 0.2s;
  cursor: pointer;
}

.course-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* hover:shadow-lg */
}

/* Progress bar */
.progress-bar {
  width: 100%;
  background-color: #e5e7eb; /* bg-gray-200 */
  border-radius: 9999px; /* rounded-full */
  height: 0.5rem; /* h-2 */
}

.progress-fill {
  height: 0.5rem; /* h-2 */
  border-radius: 9999px; /* rounded-full */
  background: linear-gradient(to right, #ef4444, #dc2626); /* bg-gradient-to-r from-red-500 to-red-600 */
  transition: all 0.3s;
}

/* Level badges */
.level-beginner {
  background-color: #dcfce7; /* bg-green-100 */
  color: #166534; /* text-green-800 */
  font-size: 0.75rem; /* text-xs */
  font-weight: 600; /* font-semibold */
  padding: 0.25rem 0.5rem; /* px-2 py-1 */
  border-radius: 9999px; /* rounded-full */
  display: inline-block;
}

.level-intermediate {
  background-color: #fefce8; /* bg-yellow-100 */
  color: #a16207; /* text-yellow-800 */
  font-size: 0.75rem; /* text-xs */
  font-weight: 600; /* font-semibold */
  padding: 0.25rem 0.5rem; /* px-2 py-1 */
  border-radius: 9999px; /* rounded-full */
  display: inline-block;
}

.level-advanced {
  background-color: #fee2e2; /* bg-red-100 */
  color: #991b1b; /* text-red-800 */
  font-size: 0.75rem; /* text-xs */
  font-weight: 600; /* font-semibold */
  padding: 0.25rem 0.5rem; /* px-2 py-1 */
  border-radius: 9999px; /* rounded-full */
  display: inline-block;
}

/* Navigation active state */
.nav-active {
  color: #dc2626; /* text-red-600 */
  border-bottom: 2px solid #dc2626; /* border-b-2 border-red-600 */
}

/* Form inputs */
.form-input {
  width: 100%;
  padding: 0.5rem 0.75rem; /* py-2 px-3 */
  border: 1px solid #d1d5db; /* border border-gray-300 */
  border-radius: 0.5rem; /* rounded-lg */
  outline: none;
}

.form-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px #ef4444; /* focus:ring-2 focus:ring-red-500 */
  border-color: transparent; /* focus:border-transparent */
}

/* Alert styles */
.alert-success {
  background-color: #dcfce7; /* bg-green-100 */
  border: 1px solid #4ade80; /* border border-green-400 */
  color: #15803d; /* text-green-700 */
  padding: 0.75rem 1rem; /* py-3 px-4 */
  border-radius: 0.5rem; /* rounded-lg */
  margin-bottom: 1rem; /* mb-4 */
}

.alert-error {
  background-color: #fee2e2; /* bg-red-100 */
  border: 1px solid #f87171; /* border border-red-400 */
  color: #b91c1c; /* text-red-700 */
  padding: 0.75rem 1rem; /* py-3 px-4 */
  border-radius: 0.5rem; /* rounded-lg */
  margin-bottom: 1rem; /* mb-4 */
}

.alert-info {
  background-color: #fecaca; /* bg-red-100 */
  border: 1px solid #f87171; /* border border-red-400 */
  color: #b91c1c; /* text-red-700 */
  padding: 0.75rem 1rem; /* py-3 px-4 */
  border-radius: 0.5rem; /* rounded-lg */
  margin-bottom: 1rem; /* mb-4 */
}

/* Responsive video container */
.video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.video-container iframe,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.5rem; /* rounded-lg */
}

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}