/* The shell is a <dialog> shown with showModal(), so it lives in the top
   layer and is laid out against the viewport whatever the page does to its
   ancestors. It is stretched over the whole viewport and left transparent;
   the panel is centred inside it and .bde-review-modal__backdrop draws the
   dim. The UA's own ::backdrop is cleared so the two don't stack. */
.bde-review-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  display: none;
  align-items: center;
  justify-content: center;
}
.bde-review-modal[open] {
  display: flex;
}
.bde-review-modal::backdrop {
  background: transparent;
}
/* While closing, the modal is only playing out its animation: it must not
   swallow clicks meant for the page (or the trigger) underneath. The dialog
   stays open until the animation ends, which is what keeps it displayed. */
.bde-review-modal.is-closing {
  pointer-events: none;
}
.bde-review-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.bde-review-modal__content {
  position: relative;
  background: #fff;
  width: calc(100% - 40px);
  max-width: 600px;
  /* The dialog is exactly the viewport, so a percentage here tracks the
     visible area without the vh/dvh mismatch on mobile browser chrome. */
  max-height: calc(100% - 80px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 32px;
  border-radius: 4px;
}
.bde-review-modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  padding: 4px 8px;
  color: #1f2937;
}

/* The form is moved into the modal from the woo element's DOM, so it would
   otherwise inherit the site's and the woo global styler's colors, which are
   designed for the page background, not for the modal's white panel (a dark
   site leaves near-white labels on white and a dark textarea). The modal is
   self-contained: it enforces its own light scheme, with !important on the
   color-critical properties so no site or woo styling bleeds in. */
.bde-review-modal__content {
  color: #1f2937 !important;
  color-scheme: light;
}

.bde-review-modal__content h1,
.bde-review-modal__content h2,
.bde-review-modal__content h3,
.bde-review-modal__content h4,
.bde-review-modal__content h5,
.bde-review-modal__content h6,
.bde-review-modal__content .comment-reply-title,
.bde-review-modal__content label,
.bde-review-modal__content p {
  color: inherit !important;
}

.bde-review-modal__content .required {
  color: #b91c1c !important;
}

.bde-review-modal__content input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.bde-review-modal__content textarea,
.bde-review-modal__content select {
  background: #fff !important;
  color: #1f2937 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 4px;
  padding: 8px 12px;
  width: 100%;
}

.bde-review-modal__content input:focus,
.bde-review-modal__content textarea:focus,
.bde-review-modal__content select:focus {
  border-color: #6b7280 !important;
  outline: none;
}

.bde-review-modal__content input[type="submit"],
.bde-review-modal__content button[type="submit"] {
  background: #111827 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px;
  padding: 10px 24px;
  cursor: pointer;
}

.bde-review-modal__content input[type="submit"]:hover,
.bde-review-modal__content button[type="submit"]:hover {
  background: #374151 !important;
}

.bde-review-modal__content .stars a {
  color: #f59e0b !important;
}

/* Vertical rhythm. The woo review form is a stack of plain <p> rows
   (.comment-form-*, p.stars, p.form-submit) and the site reset strips their
   margins, so out of its usual woo context the form renders flush: labels
   touching fields, "Your review" sitting on the stars. */
.bde-review-modal__content .comment-reply-title {
  margin: 0 0 20px !important;
  padding-right: 32px;
}

.bde-review-modal__content .comment-notes,
.bde-review-modal__content .comment-form-rating,
.bde-review-modal__content .comment-form-comment,
.bde-review-modal__content .comment-form-author,
.bde-review-modal__content .comment-form-email,
.bde-review-modal__content .comment-form-cookies-consent,
.bde-review-modal__content .stars {
  margin: 0 0 20px !important;
}

.bde-review-modal__content .stars {
  display: block;
}

.bde-review-modal__content label {
  display: block;
  margin-bottom: 8px !important;
  font-weight: 500;
}

/* The consent checkbox and its label read as one inline row. */
.bde-review-modal__content .comment-form-cookies-consent label {
  display: inline;
  margin: 0 !important;
  font-weight: 400;
}

.bde-review-modal__content .comment-form-cookies-consent input {
  width: auto !important;
  margin-right: 8px;
}

.bde-review-modal__content textarea {
  min-height: 140px;
  resize: vertical;
}

.bde-review-modal__content .form-submit {
  margin: 4px 0 0 !important;
}

/* Open and close animations. The dialog toggles display none to flex, which
   transitions cannot animate; keyframe animations start when the element
   becomes displayed, so they run reliably on the state flip. Closing keeps
   the dialog open under .is-closing while its own animation plays; the
   script calls close() once the animation ends. */
.bde-review-modal[open]:not(.is-closing) .bde-review-modal__backdrop {
  animation: bde-review-modal-fade 0.2s ease-out both;
}

.bde-review-modal[open]:not(.is-closing) .bde-review-modal__content {
  animation: bde-review-modal-rise 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes bde-review-modal-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes bde-review-modal-rise {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Closing uses its own keyframe names rather than the open ones reversed:
   an already-finished animation of the same name is not restarted by a rule
   change, so reusing them would snap the modal straight to its end state. */
.bde-review-modal.is-closing .bde-review-modal__backdrop {
  animation: bde-review-modal-fade-out 0.15s ease-in both;
}

.bde-review-modal.is-closing .bde-review-modal__content {
  animation: bde-review-modal-sink 0.18s ease-in both;
}

@keyframes bde-review-modal-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes bde-review-modal-sink {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bde-review-modal[open]:not(.is-closing) .bde-review-modal__backdrop,
  .bde-review-modal[open]:not(.is-closing) .bde-review-modal__content {
    animation: none;
  }
  /* The closing animation is what hides the modal, so it is shortened to a
     single frame rather than removed. */
  .bde-review-modal.is-closing .bde-review-modal__backdrop,
  .bde-review-modal.is-closing .bde-review-modal__content {
    animation-duration: 1ms;
  }
}