@use "../../../styles/abstracts/variables" as *;

/* 🔥 PRIMARY BRAND COLOR (your system) */
$primary: #7a4b20;
$primary-dark: #5e3817;
$primary-soft: rgba(122, 75, 32, 0.08);

$text-dark: #1a1a1a;
$text-light: #5f5f5f;
$border: rgba(122, 75, 32, 0.15);

.noresults {
  border: 1px solid $border;
  border-radius: 16px;
  background: #ffffff;
  overflow: hidden;
  transition: all 0.25s ease;

  /* 🔥 subtle premium hover */
  &:hover {
    border-color: rgba($primary, 0.35);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
  }

  /* ===== HEADER ===== */
  &--header {
    display: flex;
    align-items: center;
    gap: 0.7rem;

    background: $primary-soft;
    color: $primary-dark;

    padding: 1rem 1.3rem;

    border-bottom: 1px solid rgba($primary, 0.15);

    h1 {
      font-size: 0.95rem;
      font-weight: 600;
      margin: 0;
      letter-spacing: 0.2px;
    }
  }

  /* ===== ICON ===== */
  &--icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;

    background: rgba($primary, 0.12);

    display: flex;
    align-items: center;
    justify-content: center;

    svg {
      color: $primary;
      font-size: 0.9rem;
    }
  }

  /* ===== BODY ===== */
  &--body {
    padding: 1.2rem 1.3rem;

    p {
      color: $text-light;
      font-weight: 500;
      font-size: 0.92rem;
      line-height: 1.65;
    }
  }

  /* ===== CENTERED VARIANT ===== */
  &--centered {
    text-align: center;

    p {
      max-width: 340px;
      margin: 0 auto;
    }
  }

  /* ===== MOBILE ===== */
  @media (max-width: 600px) {
    border-radius: 14px;

    &--header {
      padding: 0.9rem 1rem;
    }

    &--body {
      padding: 1rem;
    }

    h1 {
      font-size: 0.9rem;
    }

    p {
      font-size: 0.85rem;
    }
  }
}