body { background-color: #f8f9fa; }

.top-search-bar {
    background-color: #2f2e45;
    padding: 15px;
    border-radius: 8px;
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.top-search-bar input,
.top-search-bar select {
    height: 40px;
    border-radius: 6px;
    border: none;
}
.search-btn {
    background-color: #be201c;
    color: white;
    width: 42px;
    height: 42px;
    border-radius: 6px;
    border: none;
}

.filter-sidebar {
    background-color: #2f2e45;
    color: #fff;
    border-radius: 8px;
}

.btn-clear {
    background-color: #1c1b2e;
    color: #fff;
    font-size: 0.8rem;
    padding: 4px 14px;
    border-radius: 20px;
    border: none;
}

.filter-section {
    background-color: #ffffff;
    color: #333;
    padding: 15px;
    border-radius: 6px;
    font-size: 0.9rem;
}

.filter-title {
    border-bottom: 1px solid #d9a758;
    margin-bottom: 10px;
    padding-bottom: 5px;
    font-weight: 600;
}

.filter-section label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.85rem;
}
.filter-title.collapsed i {
    transform: rotate(0deg);
}
.filter-title i {
    transition: transform 0.3s ease;
    transform: rotate(180deg);
}


.cta-box {
    /* background-color: #fff3f3;
    border-left: 4px solid #be201c; */
}
.job-card-custom {
    transition: box-shadow 0.3s ease;
}
.job-card-custom:hover {
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}
.job-card-custom h5 {
    font-size: 1.25rem;
}
.job-card-custom .collapse {
    font-size: 0.95rem;
    color: #333;
}
.job-card-custom .toggle-details {
    font-weight: 500;
    font-size: 0.9rem;
}

/* Share Card Styling */
.job-share-card {
  background-color: #ffffff;
  border-left: 4px solid #be201c;
  border-radius: 10px;
  transition: all 0.3s ease;
}
.job-share-card:hover {
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
}
.job-share-card h6 {
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
}
.job-share-card p {
  margin: 0.5rem 0;
}
.job-share-card a {
  word-break: break-word;
}

/* Share buttons container spacing */
#shareFallbackContainer .btn {
  font-size: 0.85rem;
  padding: 6px 12px;
}

/* Copy indicator animation */
#copyIndicator {
  margin-left: 5px;
  font-weight: bold;
  color: #28a745;
  animation: fadeInOut 2s forwards;
}

@keyframes fadeInOut {
  0% { opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}


@media (max-width: 768px) {
  .top-search-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .top-search-bar input,
  .top-search-bar select {
    width: 100%;
    font-size: 0.95rem;
  }

  .search-btn {
    width: 100%;
  }

  .job-card-custom h5 {
    font-size: 1rem;
  }

  .job-card-custom .text-end {
    text-align: left !important;
    margin-top: 10px;
  }

  .job-card-custom .small {
    font-size: 0.85rem;
  }

  .filter-toggle-sticky {
    position: sticky;
    top: 0;
    z-index: 1050;
    background-color: #f8f9fa;
    padding: 10px;
  }

  .filter-section label {
    font-size: 0.9rem;
  }

  #activeFilters {
    font-size: 0.85rem;
    gap: 4px;
  }
}