/* ============================================================
   Eastcliff PRODUCT REVIEWS

   Dua lapis:
   1. Ringkasan rating (.ecw-rev__summary) - markup milik widget ini.
   2. #reviews - markup RESMI WooCommerce dari
      templates/single-product-reviews.php, dicetak comments_template().
      Murni ditata; tidak ada data ulasan yang disentuh di sini.

   Satu keluarga dengan halaman produk, keranjang, checkout, dan My
   Account: huruf biasa, judul semibold, sudut 4px untuk tombol & field,
   8px untuk kartu.

   KENAPA ".ecw-rev .ecw-rev"? Sama seperti myaccount-page.css: CSS
   WooCommerce, Blocksy, dan Kit Elementor menata elemen yang sama
   (form, input, .star-rating) dan sebagian dimuat SETELAH file ini.
   Class dobel menaikkan bobot tanpa !important.
   ============================================================ */

.ecw-rev {
  --ecw-rev-star: var(--ecw-rating);
  --ecw-rev-bar: var(--ecw-ink);

  font-family: var(--ecw-font);
  color: var(--ecw-ink);
  font-size: var(--ecw-text-base);
  line-height: var(--ecw-lh-base);
}

.ecw-rev .ecw-rev__title {
  margin: 0 0 var(--ecw-sp-md);
  color: var(--ecw-ink);
  font-size: var(--ecw-text-h3);
  font-weight: var(--ecw-w-semibold);
  line-height: var(--ecw-lh-snug);
  letter-spacing: var(--ecw-track-tight);
  text-transform: none;
}

/* ------------------------------------------------------------
   RINGKASAN
   ------------------------------------------------------------ */

.ecw-rev .ecw-rev__summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ecw-sp-lg);
  align-items: center;
  margin: 0 0 var(--ecw-sp-lg);
  padding: var(--ecw-sp-md);
  border: var(--ecw-border) solid var(--ecw-line);
  border-radius: var(--ecw-r-lg);
  background: var(--ecw-surface-2);
}

.ecw-rev .ecw-rev__score {
  display: flex;
  flex-direction: column;
  gap: var(--ecw-sp-2xs);
  align-items: flex-start;
  min-width: 7.5rem;
}

.ecw-rev .ecw-rev__avg {
  font-size: var(--ecw-text-h1);
  font-weight: var(--ecw-w-bold);
  line-height: var(--ecw-lh-tight);
  letter-spacing: var(--ecw-track-h1);
}

.ecw-rev .ecw-rev__count {
  color: var(--ecw-muted);
  font-size: var(--ecw-text-caption);
}

/* Bintang: lapisan kosong abu, lapisan terisi dipotong lebarnya. */
.ecw-rev .ecw-rev__stars {
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 0;
  white-space: nowrap;
}

.ecw-rev .ecw-rev__stars-off,
.ecw-rev .ecw-rev__stars-on {
  display: block;
  line-height: 0;
  white-space: nowrap;
}

.ecw-rev .ecw-rev__stars-on {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  color: var(--ecw-rev-star);
}

.ecw-rev .ecw-rev__stars-off {
  color: var(--ecw-line-strong);
}

.ecw-rev .ecw-rev__stars .ecw-icon {
  width: var(--ecw-icon-sm);
  height: var(--ecw-icon-sm);
  fill: currentColor;
  stroke: none;
}

/* Bar per bintang */
.ecw-rev .ecw-rev__bars {
  flex: 1 1 14rem;
  display: grid;
  gap: var(--ecw-sp-3xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ecw-rev .ecw-rev__bar {
  display: grid;
  grid-template-columns: 1.25rem 1fr 2.25rem;
  gap: var(--ecw-sp-xs);
  align-items: center;
  font-size: var(--ecw-text-caption);
  color: var(--ecw-muted);
}

.ecw-rev .ecw-rev__bar-track {
  height: var(--ecw-sp-xs);
  border-radius: var(--ecw-r-pill);
  background: var(--ecw-idle-bg);
  overflow: hidden;
}

.ecw-rev .ecw-rev__bar-fill {
  display: block;
  height: 100%;
  border-radius: var(--ecw-r-pill);
  background: var(--ecw-rev-bar);
}

.ecw-rev .ecw-rev__bar-count {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ecw-rev .ecw-rev__empty {
  margin: 0 0 var(--ecw-sp-xs);
  color: var(--ecw-ink-2);
}

.ecw-rev .ecw-rev__note {
  margin: 0 0 var(--ecw-sp-lg);
  color: var(--ecw-muted);
  font-size: var(--ecw-text-caption);
}

/* ------------------------------------------------------------
   MARKUP WOOCOMMERCE (#reviews)
   ------------------------------------------------------------ */

/* Judul dan teks "belum ada ulasan" milik WooCommerce disembunyikan:
   widget sudah mencetak judulnya sendiri (kontrol Heading) dan teks
   kosongnya sendiri tepat di atas. Dibiarkan tampil, keduanya kembar
   di layar. Hanya disembunyikan dari mata - tetap di DOM, jadi pembaca
   layar dan markup WooCommerce tidak berubah. */
.ecw-rev #reviews .woocommerce-Reviews-title,
.ecw-rev #reviews .woocommerce-noreviews {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ecw-rev #reviews #reply-title {
  margin: 0 0 var(--ecw-sp-md);
  color: var(--ecw-ink);
  font-size: var(--ecw-text-lg);
  font-weight: var(--ecw-w-semibold);
  line-height: var(--ecw-lh-snug);
  text-transform: none;
}

.ecw-rev #reviews .commentlist {
  margin: 0 0 var(--ecw-sp-lg);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--ecw-sp-md);
}

.ecw-rev #reviews .commentlist .review,
.ecw-rev #reviews .commentlist .comment {
  margin: 0;
  padding: var(--ecw-sp-md);
  border: var(--ecw-border) solid var(--ecw-line);
  border-radius: var(--ecw-r-lg);
  background: var(--ecw-surface);
  list-style: none;
}

.ecw-rev #reviews .comment_container {
  display: flex;
  gap: var(--ecw-sp-sm);
  align-items: flex-start;
}

.ecw-rev #reviews .comment_container img.avatar {
  width: var(--ecw-icon);
  height: var(--ecw-icon);
  margin: 0;
  border: 0;
  border-radius: var(--ecw-r-pill);
  padding: 0;
  background: var(--ecw-idle-bg);
}

.ecw-rev #reviews .comment-text {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  border: 0;
}

.ecw-rev #reviews .comment-text .meta {
  margin: 0 0 var(--ecw-sp-2xs);
  color: var(--ecw-muted);
  font-size: var(--ecw-text-caption);
}

.ecw-rev #reviews .comment-text .meta strong {
  color: var(--ecw-ink);
  font-size: var(--ecw-text-sm);
  font-weight: var(--ecw-w-semibold);
}

.ecw-rev #reviews .comment-text p {
  margin: 0 0 var(--ecw-sp-xs);
  color: var(--ecw-ink-2);
  font-size: var(--ecw-text-sm);
}

.ecw-rev #reviews .comment-text p:last-child {
  margin-bottom: 0;
}

/* Bintang WooCommerce (.star-rating) dipakai apa adanya; hanya warnanya
   yang disamakan dengan ringkasan di atas. Fontnya milik WooCommerce /
   Blocksy - tidak diatur di sini. */
.ecw-rev #reviews .star-rating,
.ecw-rev #reviews .stars a {
  color: var(--ecw-rev-star);
}

/* ------------------------------------------------------------
   FORM ULASAN
   ------------------------------------------------------------ */

.ecw-rev #reviews #review_form_wrapper {
  padding: var(--ecw-sp-md);
  border: var(--ecw-border) solid var(--ecw-line);
  border-radius: var(--ecw-r-lg);
  background: var(--ecw-surface);
}

.ecw-rev #reviews .comment-form {
  display: grid;
  gap: var(--ecw-sp-md);
}

.ecw-rev #reviews .comment-form p {
  margin: 0;
}

.ecw-rev #reviews .comment-form label {
  display: block;
  margin: 0 0 var(--ecw-sp-2xs);
  color: var(--ecw-ink);
  font-size: var(--ecw-text-sm);
  font-weight: var(--ecw-w-medium);
}

.ecw-rev #reviews .comment-form input[type="text"],
.ecw-rev #reviews .comment-form input[type="email"],
.ecw-rev #reviews .comment-form textarea {
  width: 100%;
  min-height: var(--ecw-control-h);
  padding: var(--ecw-sp-xs) var(--ecw-sp-sm);
  border: var(--ecw-border) solid var(--ecw-line-strong);
  border-radius: var(--ecw-r-md);
  background: var(--ecw-surface);
  color: var(--ecw-ink);
  font-family: inherit;
  font-size: var(--ecw-text-base);
  line-height: var(--ecw-lh-base);
}

.ecw-rev #reviews .comment-form textarea {
  min-height: 7rem;
  resize: vertical;
}

.ecw-rev #reviews .comment-form input:focus-visible,
.ecw-rev #reviews .comment-form textarea:focus-visible {
  outline: 2px solid var(--ecw-ink);
  outline-offset: 1px;
}

.ecw-rev #reviews .comment-form .comment-form-cookies-consent {
  display: flex;
  gap: var(--ecw-sp-xs);
  align-items: center;
  font-size: var(--ecw-text-caption);
  color: var(--ecw-muted);
}

.ecw-rev #reviews .comment-form .comment-form-cookies-consent label {
  margin: 0;
  font-size: inherit;
  font-weight: var(--ecw-w-regular);
}

.ecw-rev #reviews .comment-form input[type="checkbox"] {
  width: var(--ecw-icon-sm);
  height: var(--ecw-icon-sm);
  min-height: 0;
  margin: 0;
  accent-color: var(--ecw-ink);
}

.ecw-rev #reviews .comment-form .form-submit {
  margin: 0;
}

.ecw-rev #reviews .comment-form input#submit,
.ecw-rev #reviews .comment-form .submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: var(--ecw-trigger-h);
  padding: 0 var(--ecw-sp-lg);
  border: 0;
  border-radius: var(--ecw-r-md);
  background: var(--ecw-ink);
  color: var(--ecw-on-ink);
  font-family: inherit;
  font-size: var(--ecw-text-sm);
  font-weight: var(--ecw-w-semibold);
  line-height: var(--ecw-lh-base);
  text-transform: none;
  cursor: pointer;
  transition: opacity var(--ecw-t-fast) var(--ecw-ease);
}

.ecw-rev #reviews .comment-form input#submit:hover,
.ecw-rev #reviews .comment-form .submit:hover {
  opacity: 0.85;
}

/* "Ulasan Anda menunggu persetujuan" - markup WordPress. */
.ecw-rev #reviews .comment-awaiting-moderation {
  display: block;
  margin: var(--ecw-sp-2xs) 0 0;
  color: var(--ecw-warn);
  font-size: var(--ecw-text-caption);
}

.ecw-rev #reviews .woocommerce-verification-required {
  margin: 0;
  color: var(--ecw-muted);
  font-size: var(--ecw-text-sm);
}

@media (max-width: 480px) {
  .ecw-rev .ecw-rev__summary {
    gap: var(--ecw-sp-md);
  }

  .ecw-rev #reviews .comment-form input#submit,
  .ecw-rev #reviews .comment-form .submit {
    width: 100%;
  }
}

/* ------------------------------------------------------------
   DI DALAM AKORDEON (widget Product Details, baris "Ulasan")

   Kolom info produk sempit, jadi ringkasan dan form dirapatkan:
   kartu dalam kartu dibuang, ringkasan turun jadi satu kolom.
   ------------------------------------------------------------ */

.ecw-rev.ecw-rev--acc .ecw-rev__summary {
  gap: var(--ecw-sp-md);
  margin-bottom: var(--ecw-sp-md);
  padding: 0;
  border: 0;
  background: none;
}

.ecw-rev.ecw-rev--acc .ecw-rev__avg {
  font-size: var(--ecw-text-h2);
}

.ecw-rev.ecw-rev--acc #reviews #review_form_wrapper,
.ecw-rev.ecw-rev--acc #reviews .commentlist .review,
.ecw-rev.ecw-rev--acc #reviews .commentlist .comment {
  padding: 0;
  border: 0;
  background: none;
}

.ecw-rev.ecw-rev--acc #reviews .commentlist {
  gap: var(--ecw-sp-lg);
}

.ecw-rev.ecw-rev--acc #reviews .commentlist .review + .review,
.ecw-rev.ecw-rev--acc #reviews .commentlist .comment + .comment {
  padding-top: var(--ecw-sp-lg);
  border-top: var(--ecw-border) solid var(--ecw-line);
}