body { background: #f5f6f8; }

.custom-file-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.custom-file-btn { background: #f0f0f0; border: 1px solid #d0d0d0; border-radius: 6px; padding: 7px 16px; font-size: 13px; cursor: pointer; white-space: nowrap; transition: background .15s; }
.custom-file-btn:hover { background: #e0e0e0; }
.custom-file-label { font-size: 13px; color: #888; }

.page-layout { max-width: 1000px; margin: 0 auto; padding: 0 24px 60px; }

.breadcrumbs { padding: 14px 0 6px; font-size: 13px; color: #aaa; }
.breadcrumbs a { color: #aaa; text-decoration: none; }
.breadcrumbs a:hover { color: #2d9e00; }
.breadcrumbs span { margin: 0 6px; }

.page-title { font-size: 26px; font-weight: 800; color: #111; margin-bottom: 4px; }
.page-desc { font-size: 13px; color: #aaa; line-height: 1.6; margin-bottom: 24px; }

.rating-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 14px; padding: 24px 28px; display: flex; align-items: center; gap: 28px; margin-bottom: 16px; flex-wrap: wrap; }
.rating-big { font-size: 52px; font-weight: 900; color: #111; line-height: 1; }
.rating-info { flex: 1; min-width: 120px; }
.rating-stars-row { display: flex; gap: 3px; margin-bottom: 5px; }
.star { font-size: 18px; color: #e0e0e0; }
.star.on { color: #f5a623; }
.rating-count { font-size: 13px; color: #aaa; }

.rating-bars { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 160px; }
.rbar-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #888; }
.rbar-row .rbar-num { width: 10px; text-align: right; }
.rbar-track { flex: 1; height: 6px; background: #f0f0f0; border-radius: 3px; overflow: hidden; }
.rbar-fill { height: 100%; background: #f5a623; border-radius: 3px; transition: width .3s; }
.rbar-count { width: 20px; text-align: right; }

.write-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #2d9e00, #4cbe1a); color: #fff;
  padding: 13px 30px; border-radius: 50px; font-size: 14px; font-weight: 700;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(45,158,0,.35); transition: transform .15s, box-shadow .15s; letter-spacing: .02em;
}
.write-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(45,158,0,.45); }

.sort-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.sort-avg { display: none; }
.sort-select-mobile { display: none; }
.sort-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sort-label { font-size: 12px; font-weight: 600; color: #aaa; margin-right: 2px; }
.sort-btn { padding: 5px 13px; border: 1px solid #e0e0e0; border-radius: 20px; font-size: 12px; font-weight: 600; color: #666; background: #fff; cursor: pointer; text-decoration: none; transition: all .15s; }
.sort-btn:hover { border-color: #2d9e00; color: #2d9e00; }
.sort-btn.active { background: #2d9e00; border-color: #2d9e00; color: #fff; }

.reviews-wrap { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
.review-card { background: #fff; border: 1px solid #ebebeb; border-radius: 16px; padding: 16px 22px; transition: box-shadow .15s, border-color .15s; }
.review-card:hover { box-shadow: 0 3px 14px rgba(0,0,0,.07); border-color: #d8d8d8; }

.review-top { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
.review-avatar { width: 44px; height: 44px; background: #e8e8e8; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; color: #999; flex-shrink: 0; }
.review-avatar.av-green  { background: #2d9e00; color: #fff; }
.review-avatar.av-blue   { background: #1a73e8; color: #fff; }
.review-avatar.av-orange { background: #f5a623; color: #fff; }
.review-avatar.av-red    { background: #e53935; color: #fff; }

.review-meta { flex: 1; }
.review-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.review-name { font-size: 15px; font-weight: 700; color: #111; }
.review-date { font-size: 12px; color: #ccc; }
.review-stars { display: flex; gap: 2px; margin-top: 3px; }
.review-stars .star { font-size: 13px; }
.review-text { font-size: 14px; color: #444; line-height: 1.75; margin-left: 58px; }

.replies-block { margin: 14px 0 0 58px; display: flex; flex-direction: column; gap: 8px; }
.reply-item { border-radius: 0 10px 10px 0; padding: 11px 16px; }
.reply-item.admin-reply { background: #f0fbea; border-left: 3px solid #2d9e00; }
.reply-item.user-reply  { background: #f8f8f8; border-left: 3px solid #ddd; }
.reply-header { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.reply-badge-admin { font-size: 11px; font-weight: 800; color: #2d9e00; background: #d9f5c7; padding: 2px 8px; border-radius: 4px; }
.reply-badge-user { font-size: 11px; font-weight: 700; color: #666; }
.reply-date { font-size: 11px; color: #bbb; }
.reply-text { font-size: 13px; color: #333; line-height: 1.65; }

.reply-toggle-bar { margin: 12px 0 0 58px; }
.btn-reply-toggle { font-size: 12px; font-weight: 600; color: #888; background: none; border: 1px solid #e0e0e0; border-radius: 20px; padding: 5px 14px; cursor: pointer; transition: all .15s; }
.btn-reply-toggle:hover { border-color: #2d9e00; color: #2d9e00; background: #f9fdf6; }
.user-reply-form { margin: 10px 0 0 58px; display: none; }
.user-reply-form.open { display: block; }
.user-reply-form .reply-inputs { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-bottom: 8px; }
.user-reply-form input, .user-reply-form textarea { border: 1px solid #e0e0e0; border-radius: 8px; padding: 9px 13px; font-size: 13px; font-family: inherit; outline: none; transition: border-color .15s; width: 100%; box-sizing: border-box; }
.user-reply-form input:focus, .user-reply-form textarea:focus { border-color: #2d9e00; }
.user-reply-form textarea { resize: vertical; min-height: 70px; }
.reply-form-actions { display: flex; gap: 8px; margin-top: 6px; }
.btn-send-reply { background: #2d9e00; color: #fff; border: none; border-radius: 6px; padding: 7px 20px; font-size: 13px; font-weight: 700; cursor: pointer; }
.btn-send-reply:hover { background: #26880a; }
.btn-cancel-reply { background: none; color: #aaa; border: 1px solid #e0e0e0; border-radius: 6px; padding: 7px 14px; font-size: 13px; cursor: pointer; }

.no-reviews { text-align: center; padding: 60px 0; color: #bbb; font-size: 15px; }

.review-form-wrap { background: #fff; border: 1px solid #e8e8e8; border-radius: 14px; padding: 28px 32px; }
.review-form-wrap h2 { font-size: 19px; font-weight: 800; color: #111; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #f0f0f0; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 11px; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: .06em; }
.form-group input, .form-group textarea { border: 1px solid #e0e0e0; border-radius: 8px; padding: 10px 14px; font-size: 14px; outline: none; transition: border-color .15s; font-family: inherit; }
.form-group input:focus, .form-group textarea:focus { border-color: #2d9e00; }
.form-group textarea { resize: vertical; min-height: 110px; }

.rating-label { font-size: 11px; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.star-picker { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; margin-bottom: 4px; }
.star-picker input[type=radio] { display: none; }
.star-picker label { font-size: 30px; cursor: pointer; color: #e0e0e0; transition: color .1s; }
.star-picker label:hover, .star-picker label:hover ~ label { color: #f5a623 !important; }
.star-picker input[type=radio]:checked ~ label { color: #f5a623; }

.form-submit { background: #2d9e00; color: #fff; border: none; border-radius: 8px; padding: 13px 36px; font-size: 15px; font-weight: 700; cursor: pointer; transition: background .15s; margin-top: 8px; }
.form-submit:hover { background: #26880a; }

@media (max-width: 1024px) { .page-layout { padding: 0 20px 40px; } }
@media (max-width: 600px) {
  .rating-card { flex-direction: column; align-items: flex-start; gap: 16px; }
  .sort-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .sort-controls { justify-content: flex-end; }
  .write-btn { width: 100%; justify-content: center; text-align: center; }
  .review-text { margin-left: 0; }
  .review-photos { margin-left: 0; }
  .replies-block { margin-left: 0; }
  .reply-toggle-bar { margin-left: 0; }
  .user-reply-form { margin-left: 0; }
  .user-reply-form .reply-inputs { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .review-card { padding: 14px 16px; }
  .review-form-wrap { padding: 20px 16px; }
  .star-picker label { font-size: 26px; }
}

.review-photos { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; margin-left: 58px; }
.review-photo-thumb { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid #e8e8e8; cursor: zoom-in; transition: opacity .15s; display: block; }
.review-photo-thumb:hover { opacity: .85; }