/* Product reviews, like the 1.7 shop: form on the right, club note on the left (RTL), list below. */
.mkrev { font-size: .85rem; color: #1f1f1f; }
.mkrev__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; margin-bottom: 28px; }
.mkrev__form:only-child { grid-column: 1 / -1; max-width: 640px; }
.mkrev__title { margin: 0 0 16px; font-size: 1.5rem; font-weight: 700; text-align: center; }

.mkrev__rating { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 30px; padding: 4px 12px; border: 2px solid #ececec; border-radius: 8px; }
.mkrev__stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; direction: ltr; }
.mkrev__star-input { position: absolute; opacity: 0; pointer-events: none; }
.mkrev__star { width: 23px; height: 23px; cursor: pointer; background: #ddd; -webkit-mask: var(--mkrev-star) center / contain no-repeat; mask: var(--mkrev-star) center / contain no-repeat; }
.mkrev { --mkrev-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E"); }
.mkrev__stars .mkrev__star-input:checked ~ .mkrev__star, .mkrev__stars .mkrev__star:hover, .mkrev__stars .mkrev__star:hover ~ .mkrev__star { background: #f6c343; }
.mkrev__stars:hover .mkrev__star-input:checked ~ .mkrev__star:not(:hover):not(:hover ~ .mkrev__star) { background: #ddd; }
.mkrev__star-input:focus-visible + .mkrev__star { outline: 2px solid #111; outline-offset: 2px; }

.mkrev__text { display: block; width: 100%; min-height: 120px; margin-bottom: 16px; padding: 10px 12px; border: 2px solid #ececec; border-radius: 8px; background: #fcfcfc; font: inherit; resize: vertical; }
.mkrev__text:focus { border-color: #111; outline: 0; }
.mkrev__drop { display: flex; align-items: center; gap: 16px; min-height: 110px; padding: 14px 10px; border: 2px solid #ececec; border-radius: 8px; cursor: pointer; transition: border-color .2s, background .2s; }
.mkrev__drop:hover, .mkrev__drop:focus-visible, .mkrev__drop.is-over { border-color: #111; background: #fafafa; outline: 0; }
.mkrev__drop-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 52px; height: 52px; border: 2px solid #ececec; border-radius: 6px; }
.mkrev__drop-icon .material-icons { font-size: 26px; transform: rotate(-45deg); }
.mkrev__thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.mkrev__thumb { position: relative; width: 72px; height: 72px; border-radius: 6px; overflow: hidden; background: #f3f3f3; }
.mkrev__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mkrev__thumb.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border: 2px solid #999; border-left-color: transparent; border-radius: 50%; animation: mkrev-spin .7s linear infinite; }
@keyframes mkrev-spin { to { transform: rotate(360deg); } }
.mkrev__thumb-del { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .65); color: #fff; font-size: 14px; line-height: 20px; cursor: pointer; }

.mkrev__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; }
.mkrev__anon { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.mkrev__submit { min-width: 135px; height: 40px; padding: 0 20px; border: 0; border-radius: 6px; background: #000; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.mkrev__submit:hover { background: #333; }
.mkrev__submit:disabled { opacity: .6; cursor: progress; }
.mkrev__msg { margin: 12px 0 0; color: #e1251b; }
.mkrev__msg.is-ok { color: #22a35a; }

.mkrev__club { margin-top: 56px; padding: 40px 20px 30px; border: 2px solid #ececec; border-radius: 8px; line-height: 2.6; }
.mkrev__club-note { margin: 0 0 14px; color: #e1251b; }
.mkrev__club-info { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: 0 0 12px auto; border: 2px solid #e1251b; border-radius: 50%; color: #e1251b; font: 700 12px/1 Tahoma, sans-serif; }
.mkrev__club-info:hover { background: #e1251b; color: #fff; }
.mkrev__club-row { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.mkrev__club-badge { display: inline-flex; align-items: center; gap: 4px; padding: 0 12px; border-radius: 999px; background: #000; color: #fff; font-weight: 700; line-height: 30px; }

.mkrev__first { display: inline-block; margin-bottom: 14px; color: #1f1f1f; text-decoration: underline; text-underline-offset: 4px; }
.mkrev__first:hover { color: #e1251b; }
.mkrev__empty { margin: 0; color: #444; }

.mkrev__list { margin: 0; padding: 0; list-style: none; }
.mkrev__item { padding: 16px 0; border-top: 1px solid #ececec; }
.mkrev__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 8px; }
.mkrev__author { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.mkrev__author .material-icons { font-size: 18px; color: #999; }
.mkrev__date { color: #6b6b6b; font-size: .78rem; }
.mkrev__grade { display: inline-flex; direction: ltr; }
.mkrev__grade .material-icons { font-size: 16px; color: #ddd; }
.mkrev__grade .material-icons.is-on { color: #f6c343; }
.mkrev__body { margin: 0; line-height: 2; }
.mkrev__images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mkrev__images img { display: block; width: 84px; height: 84px; border-radius: 6px; object-fit: cover; }
.mkrev__reply { margin: 12px 24px 0 0; padding: 10px 14px; border-radius: 8px; background: #f7f7f7; }

@media (max-width: 991.98px) {
  .mkrev__top { grid-template-columns: 1fr; gap: 20px; }
  .mkrev__club { margin-top: 0; padding: 20px 16px; line-height: 2.2; }
  .mkrev__title { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .mkrev__thumb.is-loading::after { animation-duration: 2s; } }
