/* Common styles used across multiple components */

.search-container {
  position: relative;
  margin-bottom: 40px;
  padding-top: 30px;
}

.home .search-container {
  margin-bottom: 60px;
}

.accent-shape {
  position: absolute;
  width: 40px;
  height: 40px;
  background: var(--success);
  border: 3px solid var(--border);
  bottom: -15px;
  right: 40px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  z-index: -1;
}

body.rtl .accent-shape {
  right: auto;
  left: 40px;
}

.no-results {
  text-align: center;
  padding: 60px 20px;
  font-size: 18px;
  color: var(--text-light);
  font-weight: 600;
}

.loading {
  text-align: center;
  padding: 60px 20px;
  font-size: 18px;
  color: var(--text-light);
  font-weight: 600;
}

/* Mobile Responsive */
@media (max-width: 600px) {
  .search-container {
    padding-top: 20px;
  }
  
  .home .search-container {
    margin-bottom: 40px;
  }
  
  .accent-shape {
    display: none;
  }
}