/* Beejro: Judge.me's review form on the plant page (2026-10-21). With the reviews section's "Review form" set
   to "Beejro short form" (<html data-bpdp-review-form="compact">, set by assets/beejro-review-form.js): Judge.me's
   short form in the Beejro look, as a side panel on computers and a sheet from below on phones. Judge.me's pop-up
   sits on <body>, so everything here keys off the <html> attribute. */

/* ---------- Any review pop-up: the floating Add to cart bar and WhatsApp button step aside ---------- */
html.bpdp-review-open :is(.sticky-add-to-cart, .beejro-whatsapp) {
  visibility: hidden;
}

html.bpdp-review-open,
html.bpdp-review-open body,
html.bpdp-review-open .page-wrapper {
  overflow: hidden;
}

@keyframes bpdp-rf-from-right {
  from {
    transform: translateX(100%);
  }
}

@keyframes bpdp-rf-from-below {
  from {
    transform: translateY(100%);
  }
}

/* =====================================================================================
   Judge.me's pop-up in the Beejro look (options 1 and 2)
   ===================================================================================== */
html[data-bpdp-review-form='compact'] .jdgm-write-review-modal {
  --bpdp-rf-star-off: color-mix(in srgb, var(--beejro-forest) 30%, transparent);
  color: var(--beejro-forest);
  font-family: var(--font-body--family);

  .jdgm-write-review-modal__overlay {
    background-color: var(--beejro-forest);
    opacity: 0.45;
  }

  .jdgm-write-review-modal__content {
    background-color: var(--beejro-paper);
    color: var(--beejro-forest);
  }

  .jdgm-write-review-modal__close-btn {
    top: 16px;
    right: 16px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--beejro-sage-soft);
    color: var(--beejro-forest);

    svg {
      width: 18px;
      height: 18px;
    }

    svg path {
      stroke: currentColor;
    }
  }

  .jdgm-write-review-modal__title {
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: 1.625rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--beejro-forest);
    text-wrap: balance;
  }

  .jdgm-write-review-modal__intro,
  .jdgm-write-review-modal__text {
    color: var(--beejro-forest-muted);
    font-size: 0.9375rem;
  }

  .jdgm-write-review-modal__product-title {
    color: var(--beejro-forest);
    font-weight: 600;
  }

  .jdgm-write-review-modal__product-image {
    width: 120px;
    height: 120px;
    border: 1px solid var(--beejro-line);
    border-radius: 16px;
  }

  .jdgm-write-review-modal__stars .jdgm-star {
    font-size: 42px;
    line-height: 44px;
  }

  .jdgm-star.jdgm--on,
  .jdgm-star.jdgm--half {
    color: var(--beejro-sunflower) !important;
    -webkit-text-stroke: 1px color-mix(in srgb, var(--beejro-sunflower) 60%, var(--beejro-forest));
  }

  .jdgm-star.jdgm--off {
    color: var(--bpdp-rf-star-off) !important;
  }

  .jdgm-write-review-modal__stars::before,
  .jdgm-write-review-modal__stars::after {
    color: var(--beejro-forest-muted);
    font-weight: 500;
  }

  .jdgm-write-review-modal__field-label,
  .jdgm-write-review-modal__checkbox-text {
    color: var(--beejro-forest);
    font-size: 0.875rem;
    font-weight: 600;
  }

  .jdgm-write-review-modal__field-help,
  .jdgm-write-review-modal__gdpr-statement,
  .jdgm-write-review-modal__gdpr-statement a {
    color: var(--beejro-forest-muted);
  }

  .jdgm-write-review-modal__field-input {
    border: 1.5px solid transparent;
    border-radius: 14px;
    background-color: var(--beejro-sage-soft);
    color: var(--beejro-forest);
    font-size: 1rem;
  }

  .jdgm-write-review-modal__field-input:focus {
    border-color: var(--beejro-forest);
    background-color: var(--beejro-paper);
    box-shadow: none;
    outline: none;
  }

  .jdgm-write-review-modal__field-input::placeholder {
    color: color-mix(in srgb, var(--beejro-forest) 45%, transparent);
  }

  .jdgm-write-review-modal__checkbox-custom {
    border-color: var(--beejro-forest);
    border-radius: 6px;
  }

  .jdgm-write-review-modal__field-group--media-upload {
    border: 1.5px dashed color-mix(in srgb, var(--beejro-forest) 40%, transparent);
    border-radius: 18px;
    background-color: var(--beejro-sage-soft);
  }

  .jdgm-write-review-modal__media-upload {
    border: 0;
    background: none;
    color: var(--beejro-forest);
  }

  /* First page: plant and stars sit under the question instead of floating mid-screen. */
  .jdgm-write-review-modal__page--review-form-intro .jdgm-write-review-modal__form {
    justify-content: flex-start;
    gap: 20px;
    height: auto;
    padding-block-start: 28px;
  }

  .jdgm-write-review-modal__media-upload-prompt {
    color: var(--beejro-forest);
  }

  .jdgm-write-review-modal__nav-btn-next,
  .jdgm-write-review-modal__nav-btn-close,
  .jdgm-write-review-modal__btn {
    min-height: 50px;
    border-radius: 999px;
    background-color: var(--beejro-forest) !important;
    color: var(--beejro-paper) !important;
    font-size: 1rem;
    font-weight: 600;
  }

  .jdgm-write-review-modal__nav-btn-back {
    color: var(--beejro-forest);
    font-size: 0.9375rem;
    font-weight: 600;
  }

  :focus-visible {
    outline: 2px solid var(--beejro-forest);
    outline-offset: 2px;
  }
  /* "You've already reviewed this from this device" screen: no step labels over it. */
  &.jdgm-write-review-modal--repeat-prompt .bpdp-jm-steps {
    display: none;
  }
}

/* ---------- Layout: side panel on computers / sheet from below on phones, named steps ---------- */
html[data-bpdp-review-form='compact'] .jdgm-write-review-modal {
  .jdgm-write-review-modal__container {
    justify-content: flex-end;
    align-items: stretch;
  }

  .jdgm-write-review-modal__content {
    width: min(460px, 100vw);
    max-width: none;
    height: 100dvh;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 92px 32px 28px;
    border-radius: 28px 0 0 28px;
    animation: bpdp-rf-from-right 0.45s var(--bpdp-ease, ease) both;
  }

  .bpdp-jm-steps {
    position: absolute;
    inset: 24px 72px auto 32px;
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .bpdp-jm-steps li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px 0 6px;
    border-radius: 999px;
    background-color: var(--beejro-sage-soft);
    color: var(--beejro-forest);
    font-size: 0.875rem;
    font-weight: 600;
  }

  .bpdp-jm-steps li span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--beejro-paper);
  }

  &:has(.jdgm-write-review-modal__page--review-form-intro.current-page) .bpdp-jm-steps li[data-step='1'],
  &:not(:has(.jdgm-write-review-modal__page--review-form-intro.current-page)) .bpdp-jm-steps li[data-step='2'] {
    background-color: var(--beejro-forest);
    color: var(--beejro-paper);
  }

  &:has(.jdgm-write-review-modal__page--review-form-intro.current-page) .bpdp-jm-steps li[data-step='1'] span,
  &:not(:has(.jdgm-write-review-modal__page--review-form-intro.current-page)) .bpdp-jm-steps li[data-step='2'] span {
    background-color: var(--beejro-sunflower);
    color: var(--beejro-forest);
  }

  &:has(.jdgm-write-review-modal__page--thank-you.current-page) .bpdp-jm-steps {
    display: none;
  }

  .jdgm-write-review-modal__product-image {
    width: 96px;
    height: 96px;
  }

  /* The short form scrolls inside its own box, which Judge.me gives no room for our step labels. */
  .jdgm-write-review-modal__compact-body {
    padding: 92px 32px 28px;
  }

  /* Thank-you page: just the thanks (Judge.me also asks for a shop review there). */
  .jdgm-write-review-modal__form--thank-you-separator ~ * {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  html[data-bpdp-review-form='compact'] .jdgm-write-review-modal {
    .jdgm-write-review-modal__container {
      align-items: flex-end;
    }

    .jdgm-write-review-modal__content {
      width: 100%;
      height: auto;
      max-height: 94dvh;
      padding: 80px 20px calc(20px + env(safe-area-inset-bottom));
      border-radius: 24px 24px 0 0;
      animation-name: bpdp-rf-from-below;
    }

    .jdgm-write-review-modal__content::after {
      content: '';
      position: absolute;
      inset: 8px auto auto 50%;
      width: 40px;
      height: 5px;
      border-radius: 999px;
      background-color: color-mix(in srgb, var(--beejro-forest) 20%, transparent);
      transform: translateX(-50%);
    }

    .bpdp-jm-steps {
      inset: 24px 64px auto 20px;
    }

    .jdgm-write-review-modal__compact-body {
      padding: 80px 20px calc(20px + env(safe-area-inset-bottom));
    }
  }
}

/* ---------- Our touches: label notes, thank-you ---------- */
html[data-bpdp-review-form='compact'] .jdgm-write-review-modal {
  /* Photo box: one short row (icon + "Add a photo (optional)") that grows when photos are added. */
  .jdgm-write-review-modal__page--share-media .jdgm-write-review-modal__field-group--media-upload {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    height: auto;
    min-height: 72px;
    padding: 12px 16px;
  }

  .jdgm-write-review-modal__page--share-media .jdgm-write-review-modal__field-group--media-upload:focus-within {
    outline-color: var(--beejro-forest);
  }

  .jdgm-write-review-modal__page--share-media .jdgm-write-review-modal__media-upload {
    flex-direction: row;
    gap: 10px;
  }

  .jdgm-write-review-modal__media-upload-icon svg {
    width: 24px;
    height: 24px;
  }

  .jdgm-write-review-modal__form--share-media {
    padding-block: 4px 12px;
  }

  /* YouTube links: left out to keep the form short. */
  .jdgm-write-review-modal__field-group:has(#yt_url) {
    display: none;
  }

  .bpdp-jm-hint {
    color: var(--beejro-forest-muted);
    font-weight: 400;
  }

  /* Judge.me's short form takes the panel's padding away; the thank-you page brings its own. */
  .jdgm-write-review-modal__page--thank-you {
    padding: 72px 32px 32px;
  }

  .jdgm-write-review-modal__form--thank-you {
    flex: none;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    height: auto;
    padding-block-start: 0;
    text-align: center;
  }

  /* Sunflower tick above "Thank you, Priya!" */
  .jdgm-write-review-modal__form--thank-you::before {
    content: '';
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--beejro-forest)
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005217' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E")
      center / 32px no-repeat;
    background-color: var(--beejro-sunflower);
  }

  /* "One last thing: we've emailed you a link…" as a soft note */
  .jdgm-write-review-modal__form--thank-you .jdgm-write-review-modal__text {
    margin-block-start: 8px;
    padding: 12px 16px;
    border-radius: 14px;
    background-color: var(--beejro-sage-soft);
    color: var(--beejro-forest);
    font-size: 0.9375rem;
    line-height: 1.45;
  }

  .jdgm-write-review-modal__thank-you-nav {
    margin-block-start: 20px;
  }

  .jdgm-write-review-modal__nav-btn-close {
    padding-inline: 32px;
  }
}

@media screen and (max-width: 767px) {
  html[data-bpdp-review-form='compact'] .jdgm-write-review-modal .jdgm-write-review-modal__page--thank-you {
    padding: 64px 20px calc(24px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .jdgm-write-review-modal__content {
    animation: none !important;
  }
}