/* === DREAMY — hodnocení produktu (záložka Hodnocení) · varianta C · v1.2 · 2026-10-08 ===
 * Patří k hodnoceni.js (podíl 4–5 hvězdiček + tlačítko Zobrazit další hodnocení).
 * Záhlaví: <link rel="stylesheet" href="/user/documents/upload/styles/hodnoceni.css?v=2">
 * Jen CSS nad markupem Shoptetu — formulář, schema.org i sběr hodnocení beze změny.
 */
/* === společný základ === */
body.type-detail #ratingTab {
  --rt-accent: #d90074; --rt-accent-dark: #b8005f; --rt-ink: #141118; --rt-body: #3a2a33; --rt-muted: #7a7280;
  --rt-line: #f1e8ed; --rt-soft: #fcf1f6; --rt-track: #f3e6ed; --rt-star: #d90074; --rt-star-off: #ead9e2;
  --rt-star-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.5l-5.9 3.1 1.2-6.5L2.5 9.5l6.6-.9z'/%3E%3C/svg%3E");
  font-family: Rubik, sans-serif; color: var(--rt-body);
  max-width: 1180px; margin: 0 auto; padding: 28px 0 8px !important;
}
body.type-detail #ratingTab *, body.type-detail #ratingTab *::before, body.type-detail #ratingTab *::after { box-sizing: border-box; }
body.type-detail #ratingTab > h2 {
  font-family: Rubik, sans-serif !important; font-size: 26px !important; line-height: 1.2 !important; font-weight: 600 !important;
  color: #1a1a1a !important; margin: 0 0 22px !important; padding: 0 !important; text-align: left !important;
}
body.type-detail #ratingWrapper { margin: 0 !important; padding: 0 !important; border: 0 !important; }

/* hvězdičky — jedna maska, barva z proměnné */
body.type-detail #ratingTab .stars { display: inline-flex !important; align-items: center; gap: 2px; margin: 0 !important; padding: 0 !important; line-height: 1 !important; }
body.type-detail #ratingTab .star {
  display: inline-block !important; width: 16px; height: 16px; margin: 0 !important; padding: 0 !important; border: 0 !important;
  font-size: 0 !important; background: var(--rt-star-off) !important;
  -webkit-mask: var(--rt-star-svg) center / contain no-repeat; mask: var(--rt-star-svg) center / contain no-repeat;
}
body.type-detail #ratingTab .star::before, body.type-detail #ratingTab .star::after { content: none !important; display: none !important; }
body.type-detail #ratingTab .star.star-on { background: var(--rt-star) !important; }
body.type-detail #ratingTab .star.star-half { background: linear-gradient(90deg, var(--rt-star) 50%, var(--rt-star-off) 50%) !important; }

/* souhrn: průměr + hvězdy */
body.type-detail #ratingTab .rate-wrap { display: block !important; margin: 0 !important; border: 0 !important; background: none !important; float: none !important; width: auto !important; }
body.type-detail #ratingTab .rate-average-wrap { display: block !important; margin: 0 !important; padding: 0 !important; border: 0 !important; float: none !important; width: auto !important; }
body.type-detail #ratingTab .rate-average-inner { display: flex !important; align-items: center; gap: 16px; margin: 0 !important; padding: 0 !important; }
body.type-detail #ratingTab .rate-average { font-family: Rubik, sans-serif !important; font-size: 58px !important; line-height: 1 !important; font-weight: 600 !important; letter-spacing: -.02em; color: var(--rt-ink) !important; margin: 0 !important; }
body.type-detail #ratingTab .rate-star-wrap { display: flex !important; flex-direction: column; align-items: flex-start; gap: 7px; margin: 0 !important; }
body.type-detail #ratingTab .rate-star-wrap .star { width: 20px; height: 20px; }
body.type-detail #ratingTab .stars-label { font-size: 14px !important; color: var(--rt-muted) !important; margin: 0 !important; }

/* rozpad 5★ … 1★ */
body.type-detail #ratingTab .votes { display: grid !important; gap: 9px; margin: 0 !important; padding: 0 !important; border: 0 !important; float: none !important; width: auto !important; }
body.type-detail #ratingTab .rate-list { display: grid !important; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px; margin: 0 !important; padding: 0 !important; border: 0 !important; cursor: default; }
body.type-detail #ratingTab .rate-star { display: flex !important; align-items: center; gap: 4px; margin: 0 !important; padding: 0 !important; width: auto !important; }
body.type-detail #ratingTab .rate-value { font-size: 14px !important; font-weight: 600 !important; color: var(--rt-ink) !important; line-height: 1 !important; }
body.type-detail #ratingTab .rate-star .star { width: 12px; height: 12px; background: var(--rt-star) !important; }
body.type-detail #ratingTab .rate-block { position: relative; display: block !important; height: 8px; margin: 0 46px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 99px; background: var(--rt-track) !important; width: auto !important; }
body.type-detail #ratingTab .rate-bar { display: block !important; position: static !important; height: 100% !important; width: var(--rate-bar-width, 0%) !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border-radius: 99px; background: var(--rt-accent) !important; }
body.type-detail #ratingTab .rate-count { position: absolute !important; right: -46px; top: 50%; transform: translateY(-50%); width: 38px; text-align: right; font-size: 13px !important; line-height: 1 !important; font-weight: 500 !important; color: #a49ca8 !important; background: none !important; padding: 0 !important; margin: 0 !important; }
body.type-detail #ratingTab .rate-count.active { color: var(--rt-ink) !important; }

/* tlačítko Přidat hodnocení */
body.type-detail #ratingTab .add-comment { margin: 0 !important; padding: 0 !important; border: 0 !important; text-align: left !important; }
body.type-detail #ratingTab .add-comment .btn {
  display: flex !important; align-items: center; justify-content: center; width: 100% !important; height: 48px !important; min-height: 48px !important;
  margin: 0 !important; padding: 0 18px !important; border-radius: 12px !important; border: 1.5px solid var(--rt-accent) !important;
  background: #fff !important; color: var(--rt-accent) !important; box-shadow: none !important;
  font: 600 15px/1 Rubik, sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; transition: background .2s, color .2s;
}
body.type-detail #ratingTab .add-comment .btn:hover,
body.type-detail #ratingTab .add-comment .btn[aria-expanded="true"] { background: var(--rt-accent) !important; color: #fff !important; }

/* formulář */
body.type-detail #rate-form { margin: 0 !important; padding: 24px 0 0 !important; border: 0 !important; background: none !important; font-family: Rubik, sans-serif; }
body.type-detail #rate-form h3 { font-family: Rubik, sans-serif !important; font-size: 19px !important; font-weight: 600 !important; color: var(--rt-ink) !important; margin: 0 0 14px !important; }
body.type-detail #rate-form .form-legend { font-size: 12.5px; color: var(--rt-muted); margin: 0 0 12px; }
body.type-detail #rate-form .form-group { margin: 0 0 14px !important; padding: 0 !important; }
body.type-detail #rate-form .smart-label-wrapper label { position: static !important; transform: none !important; display: block !important; margin: 0 0 6px !important; padding: 0 !important; font-size: 13px !important; font-weight: 500 !important; color: var(--rt-muted) !important; background: none !important; }
body.type-detail #rate-form .form-control {
  display: block; width: 100% !important; height: auto !important; min-height: 48px; padding: 12px 14px !important;
  border: 1px solid #e3e1e7 !important; border-radius: 12px !important; background: #fff !important; box-shadow: none !important;
  font: 400 15px/1.45 Rubik, sans-serif !important; color: var(--rt-ink) !important; transition: border-color .2s, box-shadow .2s;
}
body.type-detail #rate-form textarea.form-control { min-height: 120px; resize: vertical; }
body.type-detail #rate-form .form-control:focus { outline: none !important; border-color: var(--rt-accent) !important; box-shadow: 0 0 0 3px rgba(217, 0, 116, .12) !important; }
body.type-detail #rate-form .rating-stars-description { font-size: 13.5px !important; line-height: 1.45; color: var(--rt-body) !important; margin: 0 0 8px !important; }
body.type-detail #rate-form .rating-stars-description .required-asterisk::after { color: var(--rt-accent); }
body.type-detail #rate-form .rating-stars-wrapper { display: flex !important; gap: 6px; margin: 0 !important; }
body.type-detail #rate-form .rating-star {
  position: relative; display: block !important; width: 32px; height: 32px; margin: 0 !important; padding: 0 !important; cursor: pointer;
  background: var(--rt-star-off) !important; -webkit-mask: var(--rt-star-svg) center / contain no-repeat; mask: var(--rt-star-svg) center / contain no-repeat; transition: background .15s;
}
body.type-detail #rate-form .rating-star::before, body.type-detail #rate-form .rating-star::after { content: none !important; display: none !important; }
body.type-detail #rate-form .rating-star input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
body.type-detail #rate-form .rating-star:has(input:checked),
body.type-detail #rate-form .rating-star:has(~ .rating-star input:checked),
body.type-detail #rate-form .rating-stars-wrapper .rating-star:hover,
body.type-detail #rate-form .rating-star:has(~ .rating-star:hover) { background: var(--rt-star) !important; }
body.type-detail #rate-form .rating-stars-wrapper:hover .rating-star:hover ~ .rating-star { background: var(--rt-star-off) !important; }
body.type-detail #rate-form .consents .label { font-size: 12.5px !important; color: var(--rt-muted) !important; margin: 0 !important; }
body.type-detail #rate-form .consents a { color: var(--rt-accent) !important; }
body.type-detail #rate-form button[type="submit"] {
  height: 48px !important; padding: 0 26px !important; border: 0 !important; border-radius: 12px !important; background: var(--rt-accent) !important; color: #fff !important;
  font: 600 15px/1 Rubik, sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: 0 3px 8px -3px rgba(217, 0, 116, .45) !important; cursor: pointer;
}
body.type-detail #rate-form button[type="submit"]:hover { background: var(--rt-accent-dark) !important; }

/* jedna recenze */
body.type-detail #ratingsList { margin: 0 !important; padding: 0 !important; border: 0 !important; }
body.type-detail #ratingsList .vote-wrap { position: relative; display: block !important; margin: 0 !important; padding: 22px 0 !important; border: 0 !important; border-bottom: 1px solid var(--rt-line) !important; background: none !important; box-shadow: none !important; }
body.type-detail #ratingsList .vote-header { display: flex !important; align-items: center; gap: 14px; margin: 0 !important; padding: 0 !important; border: 0 !important; }
body.type-detail #ratingsList .vote-pic { position: relative; display: block !important; flex: 0 0 44px; width: 44px !important; height: 44px !important; margin: 0 !important; border-radius: 50%; overflow: hidden; }
body.type-detail #ratingsList .vote-initials { position: absolute; inset: 0; display: flex !important; align-items: center; justify-content: center; margin: 0 !important; background: #fbe3ef !important; color: var(--rt-accent) !important; font: 600 15px/1 Rubik, sans-serif !important; border-radius: 50%; }
body.type-detail #ratingsList .vote-pic img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 50%; }
body.type-detail #ratingsList .vote-summary { display: flex !important; flex-direction: column; gap: 5px; min-width: 0; margin: 0 !important; }
body.type-detail #ratingsList .vote-name { font-size: 16px !important; font-weight: 600 !important; line-height: 1.2 !important; color: var(--rt-ink) !important; margin: 0 !important; }
body.type-detail #ratingsList .vote-rating { display: flex !important; align-items: center; gap: 10px; margin: 0 !important; }
body.type-detail #ratingsList .vote-rating .star { width: 14px; height: 14px; }
body.type-detail #ratingsList .vote-delimeter { display: none !important; }
body.type-detail #ratingsList .vote-time { font-size: 13px !important; line-height: 1 !important; color: #8a8792 !important; }
body.type-detail #ratingsList .vote-content { margin: 12px 0 0 58px !important; padding: 0 !important; border: 0 !important; background: none !important; font-size: 15.5px !important; line-height: 1.6 !important; color: var(--rt-body) !important; }
@media (max-width: 767px) {
  body.type-detail #ratingTab { padding-top: 18px !important; }
  body.type-detail #ratingTab > h2 { font-size: 22px !important; margin-bottom: 16px !important; }
  body.type-detail #ratingTab .rate-average { font-size: 48px !important; }
  body.type-detail #ratingsList .vote-content { margin: 10px 0 0 !important; font-size: 15px !important; }
}

/* === Varianta C — růžový pás se souhrnem + seznam ve dvou sloupcích (jako Parametry) + „Zobrazit další" (hodnoceni.js) === */
body.type-detail #ratingWrapper { display: grid !important; grid-template-columns: minmax(0, 1fr); }
body.type-detail #ratingWrapper::before { content: ""; grid-column: 1 / -1; grid-row: 1 / 3; background: var(--rt-soft); border-radius: 22px; }
body.type-detail #ratingWrapper > .rate-wrap { grid-column: 1; grid-row: 1; position: relative; display: grid !important; gap: 20px; padding: 24px 22px 18px !important; }
body.type-detail #ratingWrapper > .add-comment { grid-column: 1; grid-row: 2; position: relative; padding: 0 22px 22px !important; }
body.type-detail #ratingWrapper > #rate-form { grid-column: 1 / -1; grid-row: 3; max-width: 640px; }
body.type-detail #ratingWrapper > #ratingsList { grid-column: 1 / -1; grid-row: 4; margin-top: 10px !important; }
body.type-detail #ratingWrapper > .dz-rt-more { grid-column: 1 / -1; grid-row: 5; }
body.type-detail #ratingTab .rate-block { background: #fff !important; }
body.type-detail #ratingTab .dz-rt-reco { display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 0; padding: 8px 14px; border-radius: 999px; background: #fff; font-size: 13.5px; line-height: 1.3; color: var(--rt-body); }
body.type-detail #ratingTab .dz-rt-reco b { color: var(--rt-accent); font-weight: 700; }
body.type-detail #ratingsList .vote-wrap.dz-rt-hidden { display: none !important; }
body.type-detail #ratingTab .dz-rt-more { display: flex; justify-content: center; padding: 18px 0 4px; }
body.type-detail #ratingTab .dz-rt-more button { height: 46px; padding: 0 24px; border: 1px solid #e3e1e7; border-radius: 12px; background: #fff; color: var(--rt-ink); font: 600 14.5px/1 Rubik, sans-serif; cursor: pointer; transition: border-color .2s, color .2s; }
body.type-detail #ratingTab .dz-rt-more button:hover { border-color: var(--rt-accent); color: var(--rt-accent); }
@media (min-width: 992px) {
  body.type-detail #ratingWrapper { grid-template-columns: minmax(0, 1fr) 280px; column-gap: 40px; }
  body.type-detail #ratingWrapper::before { grid-row: 1; }
  body.type-detail #ratingTab .dz-rt-reco { white-space: nowrap; }
  body.type-detail #ratingWrapper > .rate-wrap { grid-template-columns: 270px minmax(0, 1fr); gap: 48px; align-items: center; padding: 32px 0 32px 36px !important; }
  body.type-detail #ratingWrapper > .add-comment { grid-column: 2; grid-row: 1; align-self: center; padding: 0 36px 0 0 !important; }
  body.type-detail #ratingWrapper > .rate-wrap .rate-average-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
  body.type-detail #ratingTab .rate-average { font-size: 64px !important; }
  /* dva sloupce s linkami — stejný rytmus jako záložka Parametry */
  body.type-detail #ratingsList { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; margin-top: 14px !important; }
  body.type-detail #ratingsList .vote-wrap { padding: 24px 0 !important; }
}

/* ---------- v1.1: doladění podle živé šablony (ověřeno na dreamy.cz 2026-10-08) ----------
   Šablona dává obalu avataru padding-right 20px + pevnou šířku a iniciálám 60×60 px,
   na mobilu staví průměr a hvězdy pod sebe na střed. */
body.type-detail #ratingTab #ratingsList .vote-header .vote-pic { width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; padding: 0 !important; }
body.type-detail #ratingTab #ratingsList .vote-header .vote-pic .vote-initials { width: 100% !important; height: 100% !important; inset: 0 !important; }
@media (max-width: 991px) {
  body.type-detail #ratingTab .rate-average-inner { flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; }
}
@media (min-width: 992px) {
  body.type-detail #ratingTab .rate-average-inner { flex-direction: column !important; align-items: flex-start !important; }
}

/* odpověď obchodu na recenzi (Shoptet: .votes-wrap.admin-response > .vote-wrap, vnořené v recenzi) */
body.type-detail #ratingTab #ratingsList .admin-response { display: block !important; margin: 14px 0 0 58px !important; padding: 0 !important; border: 0 !important; background: none !important; }
body.type-detail #ratingTab #ratingsList .admin-response > .vote-wrap { padding: 14px 16px 16px !important; border: 0 !important; border-radius: 14px; background: var(--rt-soft) !important; }
body.type-detail #ratingTab #ratingsList .admin-response .vote-header { gap: 10px; }
body.type-detail #ratingTab #ratingsList .admin-response .vote-header .vote-pic { flex: 0 0 32px; width: 32px !important; min-width: 32px !important; max-width: 32px !important; height: 32px !important; }
body.type-detail #ratingTab #ratingsList .admin-response .vote-initials { background: #fff !important; font-size: 12.5px !important; }
body.type-detail #ratingTab #ratingsList .admin-response .vote-summary { gap: 3px; }
body.type-detail #ratingTab #ratingsList .admin-response .vote-name { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14.5px !important; }
body.type-detail #ratingTab #ratingsList .vote-admin-response { display: inline-block !important; font-size: 0 !important; line-height: 1 !important; color: transparent !important; } /* šablona ho skrývá */
body.type-detail #ratingTab #ratingsList .vote-admin-response::after {
  content: "Odpověď Dreamy"; display: inline-block; padding: 4px 9px; border-radius: 999px; background: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rt-accent);
}
body.type-detail #ratingTab #ratingsList .admin-response .vote-time { font-size: 12.5px !important; }
body.type-detail #ratingTab #ratingsList .admin-response .vote-content { margin: 8px 0 0 42px !important; font-size: 14.5px !important; line-height: 1.55 !important; }
@media (max-width: 767px) {
  body.type-detail #ratingTab #ratingsList .admin-response { margin-left: 0 !important; }
  body.type-detail #ratingTab #ratingsList .admin-response .vote-content { margin-left: 0 !important; }
}