.search-panel-backdrop {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: rgb(var(--color-surface-dark-rgb) / 0.75);
  opacity: 0;
  z-index: 1100;
  pointer-events: none;
  visibility: hidden;
  transition: var(--duration-normal);
  -webkit-backdrop-filter: blur(1.2rem);
  backdrop-filter: blur(1.2rem);
}
.search-panel-backdrop.is-active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.search-panel {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: 1110;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-3.6rem);
  transition: var(--duration-normal);
  overflow: hidden;
  visibility: hidden;
}
.search-panel.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  visibility: visible;
}
.search-panel .search-box-backing {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 10.6rem;
  pointer-events: none;
  background: linear-gradient(
    0deg,
    rgb(var(--color-survace-dark-rgb) / 0) 0%,
    rgb(var(--color-survace-dark-rgb) / 0.9) 100%
  );
  z-index: 100;
}
.search-panel .search-box {
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.6rem 0;
  flex-shrink: 0;
  z-index: 150;
}
.search-panel .search-box .search-box__input-wrap {
  background-color: rgb(var(--color-surface-rgb) / 0.2);
  display: flex;
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 20rem;
}
.search-panel .search-box .search-box__icon {
  display: flex;
  position: absolute;
  left: 2.2rem;
  top: 0;
  bottom: 0;
  align-items: center;
  pointer-events: none;
  z-index: 10;
}
.search-panel .search-box .search-box__icon .icon {
  width: 2.2rem;
  height: 2.2rem;
  color: var(--color-text-light);
}
.search-panel .search-box .search-box__input {
  width: 100%;
  padding: 0 3.6rem 0 6rem;
  display: flex;
  align-items: center;
  height: 6.4rem;
  font-size: inherit;
  color: var(--color-text-light);
  -webkit-backdrop-filter: blur(1.2rem);
  backdrop-filter: blur(1.2rem);
}
.search-panel .search-box .search-box__close {
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
  width: 4.4rem;
  height: 4.4rem;
  display: flex;
  flex-shrink: 0;
  background-color: var(--color-surface);
  justify-content: center;
  align-items: center;
}
.search-panel .search-box .search-box__close .icon {
  width: 1.4rem;
  height: 1.4rem;
}

/*  */

.search-panel .search-content {
  padding: 10.6rem 0 7.2rem;
  overflow-y: auto;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.search-panel .section-posts-quick-action {
  margin-top: 7.2rem;
}
.search-panel.has-results .section-posts-quick-action {
  display: none;
}

/*  */

.search-panel .search-results {
  width: 100%;
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: 3.6rem;
}
.search-panel .search-results .search-empty,
.search-panel .search-results .search-error,
.search-panel .search-results .search-idle,
.search-panel .search-results .search-loading {
  padding: 0 2.8rem;
  color: var(--color-text-light);
  text-align: center;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
  opacity: var(--opacity-70);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.search-panel .search-results .search-loading {
  color: rgb(var(--color-text-light-rgb) / 0);
}
.search-panel .search-results .search-loading .search-loading__icon {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -2.6rem;
  margin-top: -2.6rem;
  display: block;
  width: 5.2rem;
  height: 5.2rem;
  color: var(--color-text-light);
  animation:
    rotate 2s linear infinite,
    blink 1s ease-in-out infinite;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes blink {
  0%,
  100% {
    opacity: var(--opacity-70);
  }

  50% {
    opacity: 0var (--opacity-30);
  }
}

/*  */

.search-panel .search-results .search-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 0.6rem;
}
.search-panel .search-results .search-group .search-group__title {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-h4);
  line-height: var(--line-height-snug);
  display: block;
  color: var(--color-text-light);
  padding: 0 2.2rem;
  margin-bottom: 2.4rem;
}

.search-panel .search-results .search-group .search-all-results {
  color: var(--color-text-light);
  width: 100%;
  border-radius: 20rem;
  display: flex;
  align-items: center;
  padding: 0 0.4rem 0 2.2rem;
  justify-content: space-between;
  margin-top: 0.6rem;
  height: 7.2rem;
  border: 0.1rem solid rgb(var(--color-text-light-rgb) / 0.12);
}
.search-panel .search-results .search-group .search-all-results .button__text {
  display: block;
}
.search-panel .search-results .search-group .search-all-results .button__label {
  display: block;
  line-height: var(--line-height-none);
  font-size: var(--font-size-sm);
}
.search-panel .search-results .search-group .search-all-results .button__icon {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 50%;
  background-color: rgb(var(--color-surface-light-rgb) / 0.12);
}
.search-panel
  .search-results
  .search-group
  .search-all-results
  .button__icon
  .icon {
  width: 2rem;
  height: 2rem;
}

.search-panel .search-results .search-items {
  width: 100%;
  display: grid;
  gap: 0.6rem;
  align-items: start;
}
.search-panel .search-results .search-item {
  width: 100%;
  border-radius: 1.8rem;
  background-color: rgb(var(--color-surface-light-rgb) / 0.12);
  color: var(--color-text-light);
}
.search-panel .search-results .search-item .item__link {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  height: 100%;
}
.search-panel .search-results .search-item .item__link.is-active {
  background-color: rgb(var(--color-primary-rgb) / 0.4);
  color: var(--color-on-primary);
}
.search-panel .search-results .search-item .item__content {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 2.2rem;
  justify-content: space-between;
  gap: 1.6rem;
}
.search-panel .search-results .search-item .item__title {
  line-height: var(--line-height-dense);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  display: block;
}
.search-panel .search-results .search-item .item__icon-follow--default {
  display: flex;
  flex-shrink: 0;
  align-self: stretch;
  padding-left: 2.2rem;
  justify-content: center;
  align-items: center;
  border-left: 0.1rem solid rgb(var(--color-text-light-rgb) / 0.2);
}
.search-panel .search-results .search-item .item__icon-follow--default .icon {
  width: 2rem;
  height: 2rem;
}
.search-panel .search-results .search-item .item__actions {
  margin-top: 1.6rem;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.search-panel .search-results .search-item .item__action {
  border-radius: 20rem;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  display: flex;
  align-items: center;
  height: 3.6rem;
  padding: 0 1.6rem;
}
.search-panel .search-results .search-item .item__action .button__text {
  display: block;
}
.search-panel .search-results .search-item .item__action .button__label {
  display: block;
  line-height: var(--line-height-none);
  font-size: var(--font-size-xs);
}

/*  */

/* Service */

.search-panel .search-results .search-item.search-item--service .item__content {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
}
.search-panel
  .search-results
  .search-item.search-item--service
  .item__category {
  display: block;
  margin-bottom: 1rem;
  line-height: var(--line-height-normal-tight);
  font-size: var(--font-size-sm);
  opacity: var(--opacity-70);
}
.search-panel .search-results .search-item.search-item--service .item__price {
  display: block;
  margin-top: 1rem;
}
.search-panel
  .search-results
  .search-item.search-item--service
  .item__price
  .item__price-value {
  display: block;
  line-height: var(--line-height-none);
}
.search-panel
  .search-results
  .search-item.search-item--service
  .item__price
  .item__price-description {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--font-size-xs);
  opacity: var(--opacity-70);
  line-height: var(--line-height-snug);
}

/* Useful Link */

.search-panel
  .search-results
  .search-item.search-item--useful-link
  .item__icon-follow
  .icon {
  transform: rotate(-45deg);
}

/* Question */

.search-panel
  .search-results
  .search-item.search-item--question
  .item__content {
  flex-direction: column;
}
.search-panel
  .search-results
  .search-item.search-item--question
  .item__heading {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: flex-start;
  gap: 1.6rem;
}
.search-panel
  .search-results
  .search-item.search-item--question
  .item__question {
  line-height: var(--line-height-dense);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  display: block;
  text-align: left;
}

.search-panel .search-results .search-item.search-item--question .item__icon {
  display: flex;
  flex-shrink: 0;
  background-color: rgb(var(--color-surface-dark-rgb) / 0.25);
  justify-content: center;
  align-items: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
}
.search-panel
  .search-results
  .search-item.search-item--question
  .item__icon
  .icon {
  transition: var(--duration-normal);
  width: 1.4rem;
  height: 1.4rem;
}
.search-panel
  .search-results
  .search-item.search-item--question.is-active
  .item__icon
  .icon {
  transform: rotate(45deg);
}
.search-panel .search-results .search-item.search-item--question .item__answer {
  display: none;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 1.2rem;
}
.search-panel
  .search-results
  .search-item.search-item--question
  .item__answer
  p {
  line-height: var(--line-height-dense);
  font-size: var(--font-size-sm);
}
.search-panel
  .search-results
  .search-item.search-item--question.is-active
  .item__answer {
  display: flex;
}

/* Doctor */

.search-panel .search-results .search-item.search-item--doctor .item__content {
  align-items: flex-start;
  justify-content: flex-start;
}
.search-panel
  .search-results
  .search-item.search-item--doctor
  .item__image-wrap {
  display: flex;
  flex-shrink: 0;
  width: 6rem;
  height: 6rem;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}
.search-panel .search-results .search-item.search-item--doctor .item__image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.search-panel .search-results .search-item.search-item--doctor .item__details {
  display: flex;
  flex-direction: column;
}
.search-panel .search-results .search-item.search-item--doctor .item__position {
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  display: block;
  opacity: var(--opacity-70);
  margin-top: 0.2rem;
}
.search-panel .search-results .search-item.search-item--doctor .item__icon {
  display: flex;
  flex-shrink: 0;
  margin-top: 1.2rem;
  justify-content: center;
  align-items: center;
  padding: 0.8rem 2rem;
  border-radius: 20rem;
  background-color: rgb(var(--color-surface-dark-rgb) / 0.25);
  align-self: flex-start;
}
.search-panel
  .search-results
  .search-item.search-item--doctor
  .item__icon
  .icon {
  width: 1.8rem;
  height: 1.8rem;
}

/* Branch */

.search-panel .search-results .search-item.search-item--branch .item__content {
  align-items: flex-start;
}
.search-panel .search-results .search-item.search-item--branch .item__icon {
  display: flex;
  flex-shrink: 0;
  width: 6rem;
  height: 6rem;
  position: relative;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: var(--color-primary);
}
.search-panel
  .search-results
  .search-item.search-item--branch
  .item__icon
  .icon {
  width: 2rem;
  height: 2rem;
}
.search-panel .search-results .search-item.search-item--branch .item__details {
  display: flex;
  flex-direction: column;
}
.search-panel .search-results .search-item.search-item--branch .item__address {
  line-height: var(--line-height-snug);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  display: block;
  opacity: var(--opacity-70);
  margin-top: 0.2rem;
}
.search-panel
  .search-results
  .search-item.search-item--branch
  .item__icon-follow {
  display: flex;
  flex-shrink: 0;
  margin-top: 1.2rem;
  justify-content: center;
  align-items: center;
  padding: 0.8rem 2rem;
  border-radius: 20rem;
  background-color: rgb(var(--color-surface-dark-rgb) / 0.25);
  align-self: flex-start;
}
.search-panel
  .search-results
  .search-item.search-item--branch
  .item__icon-follow
  .icon {
  width: 1.8rem;
  height: 1.8rem;
}

/* Publication */

.search-panel
  .search-results
  .search-item.search-item--publication
  .item__content {
  align-items: flex-start;
  justify-content: flex-start;
}
.search-panel
  .search-results
  .search-item.search-item--publication
  .item__image-wrap {
  display: flex;
  flex-shrink: 0;
  width: 6rem;
  height: 6rem;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}
.search-panel
  .search-results
  .search-item.search-item--publication
  .item__image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.search-panel
  .search-results
  .search-item.search-item--publication
  .item__details {
  display: flex;
  flex-direction: column;
}
.search-panel
  .search-results
  .search-item.search-item--publication
  .item__icon {
  display: flex;
  flex-shrink: 0;
  margin-top: 1.2rem;
  justify-content: center;
  align-items: center;
  padding: 0.8rem 2rem;
  border-radius: 20rem;
  background-color: rgb(var(--color-surface-dark-rgb) / 0.25);
  align-self: flex-start;
}
.search-panel
  .search-results
  .search-item.search-item--publication
  .item__icon
  .icon {
  width: 1.8rem;
  height: 1.8rem;
}