.cs-rev-card{ border: 1px solid #e6e6e6; border-radius: 16px; background: #fff; padding: 8px 24px; }
.cs-rev-row{ padding: 20px 0; border-bottom: 1px solid #f0f0f0; }
.cs-rev-row:last-child{ border-bottom: 0; }
.cs-rev-avatar{ flex: 0 0 auto; width: 40px; height: 40px; margin-inline-end: 12px; border-radius: 50%; color: #fff; font-size: 14px; font-weight: 500; display: flex; align-items: center; justify-content: center; }
.cs-rev-name{ display: block; font-size: 15px; font-weight: 600; color: #1a1a1a; }
.cs-rev-stars{ display: block; line-height: 1; margin-top: 4px; }
.cs-rev-stars img{ margin-inline-end: 2px; vertical-align: -1px; }
.cs-rev-date{ flex: 0 0 auto; font-size: 13px; color: #808080; }
.cs-rev-text{ margin: 12px 0 0; font-size: 15px; line-height: 1.55; color: #333; }
.cs-rev-empty{ margin: 24px 0; font-size: 15px; color: #666; font-style: italic; }
.cs-rev-score{ padding: 24px 32px; }
.cs-rev-head{ display: flex; align-items: center; gap: 7px; }
.cs-rev-avg{ font-size: 26px; font-weight: 600; line-height: 1; color: #1a1a1a; }
.cs-rev-count{ font-size: 14px; color: #4d4d4d; }
.cs-rev-bars{ margin-top: 16px; padding-top: 16px; border-top: 1px solid #f0f0f0; }
.cs-rev-bar{ display: flex; align-items: center; gap: 8px; margin: 7px 0; font-size: 13px; color: #4d4d4d; }
.cs-rev-bar-num{ flex: 0 0 9px; text-align: center; }
.cs-rev-bar-track{ flex: 1 1 auto; height: 8px; background: #eeeeee; border-radius: 8px; overflow: hidden; }
.cs-rev-bar-track span{ display: block; height: 100%; background: #e18905; }
.cs-rev-bar-count{ flex: 0 0 auto; min-width: 18px; text-align: end; }
.cs-rev-pag{ margin-top: 16px; text-align: center; }
.cs-rev-pag a{ display: inline-block; min-width: 32px; padding: 6px 8px; margin: 0 2px; border: 1px solid #e6e6e6; border-radius: 8px; color: #333; text-decoration: none; font-size: 14px; }
.cs-rev-pag a.is-on{ background: #1a1a1a; border-color: #1a1a1a; color: #fff; }
.cs-rev-pag a svg{ vertical-align: -2px; }
.cs-rev-dots{ display: inline-block; padding: 6px 4px; color: #999999; }
.cs-rev-form{ background: #1a1a1a; border-color: #1a1a1a; padding: 8px 24px 24px; }
.cs-rev-form label{ color: #ffffff; font-size: 15px; }
.cs-rev-form .title{ color: #ffffff; }
.cs-rev-done{ padding: 24px 8px 32px; text-align: center; color: #ffffff; }
.cs-rev-done img{ width: 88px; height: 88px; }
.cs-rev-done-title{ margin: 24px 0 8px; font-family: Montserrat, sans-serif; font-size: 24px; font-weight: 600; color: #ffffff; }
.cs-rev-done-desc{ margin: 0 0 12px; font-size: 15px; line-height: 1.55; color: #d9d9d9; padding: 0 6px; }
.cs-rev-done-desc:last-child{ margin-bottom: 0; }

.cs-rev-submit{ width: 100%; margin-top: 8px; border: 0; cursor: pointer; }

.cs-rev-form .cs-input-contact{ border: 1px solid transparent; }
.cs-rev-form .cs-input-contact.is-err{ border: 1px solid #d93025; }
.cs-rev-form .cs-input-contact.is-err::placeholder{ color: #b3261e; }

@keyframes cs-rev-wave{ 0%, 100% { transform: translateY(0) scale(1); } 28% { transform: translateY(-15px) scale(1.2); } 55% { transform: translateY(3px) scale(.94); } 78% { transform: translateY(-4px) scale(1.04); } }
.cs-rev-form .rating.is-err label{ animation: cs-rev-wave .55s cubic-bezier(.34, 1.56, .64, 1) both; }
.cs-rev-form .rating.is-err #label-star1{ animation-delay: 0s; }
.cs-rev-form .rating.is-err #label-star2{ animation-delay: .05s; }
.cs-rev-form .rating.is-err #label-star3{ animation-delay: .1s; }
.cs-rev-form .rating.is-err #label-star4{ animation-delay: .15s; }
.cs-rev-form .rating.is-err #label-star5{ animation-delay: .2s; }
@media (prefers-reduced-motion: reduce) {
	.cs-rev-form .rating.is-err label{ animation: none; }
}
.cs-rev-form-title{ margin: 20px 0 14px; color: #ffffff; font-family: Montserrat, sans-serif; font-size: 24px; font-weight: 600; text-align: center; }

.cs-rev-form .rating{ gap: 0; margin: 5px 0 18px; }

.cs-rev-form .rating label{ width: 52px; height: 36px; margin: 0; background-size: 30px 30px; background-position: center; background-repeat: no-repeat; }
.cs-rev-form .rating:hover label{ background-image: url('/images/star.png'); }
.cs-rev-form .rating label:hover,
.cs-rev-form .rating label:hover ~ label{ background-image: url('/images/yellow-star.png'); }
@media only screen and (max-width: 768px) {
	.cs-rev-card{ padding: 8px 16px; }
	
	.cs-rev-score{ padding: 20px 16px; }
	.cs-rev-form{ padding: 8px 16px 20px; }
	.cs-rev-side{ display: contents; }
	.cs-rev-score, .cs-rev-form{ width: 100%; }
	.cs-rev-score{ order: -1; }
	.cs-rev-form{ margin: 24px 0; }
}

#list, #rr{ scroll-margin-top: 24px; }
