/* =========================================
   NELLA CULINARY LIVE SEARCH
========================================= */

.recipe-result-heading {
  grid-column: 1 / -1;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 16px;

  margin-bottom: 4px;
}


.recipe-result-heading small {
  display: block;

  color: var(--sage);

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 1.4px;
}


.recipe-result-heading h3 {
  margin: 4px 0 0;

  font-family: Georgia, serif;

  font-size: 24px;

  font-weight: 500;
}


.result-count {
  padding: 8px 11px;

  border-radius: 999px;

  background: var(--sage-soft);

  color: var(--sage-deep);

  font-size: 10px;

  font-weight: 700;
}


.live-recipe-card {
  overflow: hidden;
}


.live-recipe-image {
  position: relative;

  width: 100%;

  aspect-ratio: 4 / 3;

  overflow: hidden;

  border-radius: 20px;

  margin-bottom: 12px;

  background: #f8f3ed;
}


.live-recipe-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


.live-recipe-copy h4 {
  margin: 7px 0 5px;
}


.live-recipe-copy p {
  margin: 0 0 10px;

  color: var(--muted);

  font-size: 11px;
}


.live-recipe-area {
  color: var(--sage);

  font-size: 9px;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 1px;
}


.live-recipe-footer {
  display: flex;

  align-items: center;
  justify-content: space-between;

  margin-top: 12px;
}


.live-recipe-footer strong {
  color: var(--sage-deep);

  font-size: 11px;
}


.recipe-mini-meta {
  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-top: 8px;
}


.recipe-mini-meta span {
  padding: 5px 8px;

  border-radius: 999px;

  background: #faf6f1;

  color: var(--muted);

  font-size: 9px;
}


/* FALLBACK IMAGE */

.nella-recipe-fallback {
  position: relative;

  width: 100%;
  height: 100%;

  min-height: 180px;

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

  overflow: hidden;

  background:
    radial-gradient(
      circle at 25% 20%,
      rgba(255,255,255,.95),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #f3e1d6,
      #eef2e8
    );
}


.fallback-food {
  font-size: 74px;

  filter:
    drop-shadow(
      0 17px 15px
      rgba(74,55,42,.14)
    );
}


.fallback-sparkle {
  position: absolute;

  left: 20px;
  top: 18px;

  font-size: 22px;
}


.fallback-leaf {
  position: absolute;

  right: 19px;
  bottom: 15px;

  font-size: 28px;

  transform:
    rotate(-15deg);
}


/* YOUTUBE */

.video-option-wrapper {
  grid-column: 1 / -1;

  display: flex;
  justify-content: center;

  margin-top: 10px;
}


.video-recipe-button,
.result-back-button {
  border: 0;

  cursor: pointer;
}


.video-recipe-button {
  display: inline-flex;

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

  gap: 8px;

  padding: 12px 18px;

  border-radius: 999px;

  background: #fff;

  border:
    1px solid var(--border);

  box-shadow:
    var(--shadow);

  color:
    var(--sage-deep);

  font-size: 11px;

  font-weight: 800;
}


.result-back-button {
  padding: 9px 12px;

  border-radius: 999px;

  background:
    var(--cream);

  color:
    var(--sage-deep);

  font-size: 10px;

  font-weight: 700;
}


.video-play-badge {
  position: absolute;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%, -50%);

  width: 47px;
  height: 47px;

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

  padding-left: 3px;

  border-radius: 50%;

  background:
    rgba(255,255,255,.92);

  box-shadow:
    0 12px 30px
    rgba(0,0,0,.18);

  color: #b95454;

  font-size: 17px;
}


/* STATUS */

.nella-search-status,
.nella-search-empty {
  grid-column: 1 / -1;

  min-height: 200px;

  display: flex;
  flex-direction: column;

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

  text-align: center;

  color: var(--muted);
}


.nella-search-spinner {
  margin-bottom: 8px;

  font-size: 38px;
}


.nella-search-empty > span {
  font-size: 42px;
}