/* Rate-and-review dialog (new design): the form from frontend/modals/update-review-rating-v2, plus the dialog frame that holds it
   (.modal.product-rating on My Orders, booking details and the product page). */
.modal.product-rating:not(.show) { display: none !important; }   /* a site rule shows this dialog on every page, invisibly covering it: keep it hidden until opened */
.product-rating .modal-dialog { max-width: 480px; }
.product-rating .modal-content { border: 0; border-radius: 20px; box-shadow: 0 24px 60px rgba(20, 35, 27, .22); }
.product-rating .modal-body { position: relative; padding: 26px 26px 24px; }
.product-rating .modal-body > .close { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border-radius: 50%; line-height: 1; font-size: 24px; color: #6b776f; opacity: 1; text-shadow: none; z-index: 2; }
.product-rating .modal-body > .close:hover { background: #f3f0e7; color: #14231b; }

.hvr { color: #14231b; }
.hvr-title { margin: 0 34px 4px 0 !important; font-family: var(--hv-serif, Georgia, serif); font-size: 26px; line-height: 1.15; text-transform: none !important; color: #14231b; }
.hvr-product { margin: 0 0 4px !important; font-size: 14px; color: #6b776f; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* stars: the inputs run 5..1 in the HTML and are shown 1..5, so "checked / hovered" lights every star up to that one */
.hvr-stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; margin: 14px 0 2px; }
.hvr-stars input { position: absolute; opacity: 0; pointer-events: none; }
.hvr-stars label { margin: 0; padding: 2px; cursor: pointer; font-size: 38px; line-height: 1; color: #dcd7c8; transition: color .12s, transform .12s; }
.hvr-stars label:hover, .hvr-stars label:hover ~ label, .hvr-stars input:checked ~ label { color: #f2a516; }
.hvr-stars label:hover { transform: scale(1.12); }
.hvr-stars input:focus-visible + label { outline: 2px solid #2d9e5a; border-radius: 6px; }
.hvr-note { min-height: 20px; margin: 4px 0 18px !important; font-size: 14px; font-weight: 700; color: #1f7a45; }

.hvr-block { margin: 0 0 16px; }
.hvr-label { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 800; color: #14231b; }
.hvr-label span { margin-left: 6px; font-size: 11.5px; font-weight: 600; color: #6b776f; }
.hvr-photos { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.hvr-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex: none; width: 76px; height: 76px; margin: 0; border: 1.5px dashed #bfc9c2; border-radius: 14px; background: #faf8f3; color: #1f7a45; font-size: 12px; font-weight: 800; cursor: pointer; transition: background .15s, border-color .15s; }
.hvr-add i { font-size: 20px; }
.hvr-add:hover { background: #e7f4ec; border-color: #2d9e5a; }
.hvr-thumbs { display: contents; }
.hvr-thumb { position: relative; flex: none; width: 76px; height: 76px; }
.hvr-thumb:empty { display: none; }
.hvr-thumb img { width: 100%; height: 100%; border-radius: 14px; object-fit: cover; border: 1px solid #e7e2d6; }
.hvr-thumb i { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; background: #14231b; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; cursor: pointer; }

.hvr-text { display: block; width: 100%; min-height: 104px; padding: 12px 14px; border: 1.5px solid #e7e2d6; border-radius: 12px; background: #fff; font-size: 14.5px; line-height: 1.5; color: #14231b; resize: vertical; box-shadow: none; }
.hvr-text::placeholder { color: #9aa59e; }
.hvr-text:focus { outline: 0; border-color: #2d9e5a; box-shadow: 0 0 0 4px rgba(45, 158, 90, .14); }

.hvr-msg { margin: 0 !important; font-size: 13px; font-weight: 700; }
.hvr-msg:empty { display: none; }
.hvr-msg.err { padding: 10px 14px; margin-bottom: 12px !important; border-radius: 10px; background: #fdecea; color: #b3261e; }
.hvr-msg.ok { padding: 10px 14px; margin-bottom: 12px !important; border-radius: 10px; background: #e7f4ec; color: #1f7a45; }

.hvr-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px; border: 0; border-radius: 12px; background: #2d9e5a; color: #fff; font-size: 15px; font-weight: 800; cursor: pointer; transition: background .15s; }
.hvr-btn:hover { background: #258a4d; }
.hvr-btn:disabled { opacity: .7; cursor: default; }

@media (max-width: 480px) {
  .product-rating .modal-body { padding: 22px 18px 20px; }
  .hvr-title { font-size: 23px; }
  .hvr-stars label { font-size: 34px; }
}