@import "tailwindcss";

html,
body {
  width: 100%;
  overflow-x: hidden;
  touch-action: manipulation;
}

#toastNotification {
  z-index: 999999 !important;
}
#overlay-blur {
  overscroll-behavior: contain;
  touch-action: none;
}
.list-tick {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
}

::-webkit-scrollbar {
  display: none;
}
.toggle-content {
  display: none;
}
.toggle-item[aria-expanded="true"] .toggle-content {
  display: block;
}
.toggle-item.active .toggle-number,
.toggle-item.active .toggle-title {
  color: #d97706; /* Darker orange/yellow text */
}

/* Custom styles for the rounded icons and colors not easily achievable with basic Tailwind classes */
.icon-bg-blue {
  background-color: #e6f0ff; /* Very light blue for Fresh Graduates & Job Seeker icons */
}
.icon-bg-orange {
  background-color: #fff6e5; /* Very light orange for Career Switchers & Professionals icons */
}
.text-blue-primary {
  color: #1e40af; /* A strong blue tone */
}
.text-orange-primary {
  color: #f97316; /* A strong orange tone */
}
.list-blue-check {
  /* Custom checkmark list style for blue cards */
  list-style: none;
  padding-left: 0;
}
.list-blue-check li {
  position: relative;
  padding-left: 1.5rem; /* Space for the checkmark */
  margin-bottom: 0.5rem;
  color: #4b5563; /* Gray text */
}
.list-blue-check li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #3b82f6; /* Blue checkmark color */
  font-weight: bold;
}
.list-orange-check {
  /* Custom checkmark list style for orange cards */
  list-style: none;
  padding-left: 0;
}
.list-orange-check li {
  position: relative;
  padding-left: 1.5rem; /* Space for the checkmark */
  margin-bottom: 0.5rem;
  color: #4b5563; /* Gray text */
}
.list-orange-check li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #f59e0b; /* Orange checkmark color */
  font-weight: bold;
}
/* Line clamp styles for course cards */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ensure course cards have proper height constraints */
.course-card {
  display: flex;
  flex-direction: column;
  min-height: auto;
}

/* Overlay animation fix */
#overlay-blur {
  opacity: 0.1 !important;
}

#overlay-blur {
  pointer-events: none !important;
}

/* Fix for course container to ensure buttons stay clickable */
#courses-container {
  align-items: flex-start !important;
}

/* Ensure buttons stay clickable and visible */
.view-details-btn {
  position: relative !important;
  z-index: 10 !important;
}

/* Fix for laptop viewport constraint */
@media (min-height: 600px) and (max-height: 900px) {
  .course-card {
    max-height: 650px;
  }

  .course-card .p-6 {
    padding: 1.25rem;
  }

  .course-card h3 {
    font-size: 1rem;
  }

  .course-card .view-details-btn {
    padding: 0.75rem !important;
    font-size: 0.95rem;
  }
}