/* ============================================================
   HELLO MALNAD — Reviews
   Used by: review.html (write form + full review list) AND the
   sidebar review list on hotel-details.html / property-details.html
   ============================================================ */

/* ---------- Write-a-review card (review.html) ---------- */
.write-review-wrap{ max-width:720px; margin:0 auto; }
.write-review-card h3{ font-size:24px; margin-bottom:8px; }

.review-form-message{
  border-radius:8px; padding:13px 16px; font-size:13.5px; font-weight:600;
  margin-bottom:18px; display:none; line-height:1.5;
}
.review-form-message.success{
  display:block; background:rgba(35,168,73,0.1); color:var(--forest-deep);
  border:1px solid rgba(35,168,73,0.3);
}
.review-form-message.error{
  display:block; background:rgba(216,84,74,0.08); color:#a8382f;
  border:1px solid rgba(216,84,74,0.3);
}

.star-picker{ display:flex; gap:6px; align-items:center; }
.star-btn{
  background:none; border:none; font-size:30px; line-height:1; padding:0;
  color:var(--border); cursor:pointer;
  transition:transform .15s ease, color .15s ease;
}
.star-btn:hover{ transform:scale(1.14); }
.star-btn.active{ color:var(--gold); }
.star-btn:focus-visible{ outline:2px solid var(--moss); outline-offset:3px; border-radius:4px; }

/* Banner shown on review.html when arriving from a property's
   "Write a Review" button, confirming which property is selected */
.review-target-banner{
  display:flex; align-items:center; gap:12px;
  background:var(--mist-dim); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:14px 18px; margin-bottom:26px;
}
.review-target-banner .ic{
  width:38px; height:38px; border-radius:50%; background:var(--gold-light);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.review-target-banner .ic svg{ width:18px; height:18px; color:var(--forest-deep); }
.review-target-banner span{ font-size:14.5px; color:var(--text); }
.review-target-banner b{ color:var(--forest-deep); }

@media (max-width:480px){
  .write-review-card{ padding:24px 18px; }
}

/* ============================================================
   ALL REVIEWS PANEL — the "see everything" list on review.html
   Score + star row + 5→1 distribution bars, then a clean list of
   individual reviews underneath. Scoped to whichever property is
   selected in the form (or site-wide when none is selected).
   ============================================================ */
.reviews-panel{
  background:var(--white);


  padding:0px 42px 8px;
}
.reviews-panel-title{
  font-size:24px; font-weight:600; color:var(--forest-deep); margin-bottom:26px;
}

.reviews-overview{
  display:flex; align-items:center; gap:48px;
  padding-bottom:28px; margin-bottom:8px;
  border-bottom:1px solid var(--border);
}
.reviews-score-block{ flex:0 0 auto; text-align:left; }
.rs-score{ font-family:var(--font-display); font-size:46px; font-weight:700; color:var(--forest-deep); line-height:1; }
.rs-stars{ display:flex; gap:3px; margin-top:8px; }
.rs-stars svg{ width:18px; height:18px; color:var(--gold); }
.rs-count{ font-size:13px; color:var(--text-soft); font-family:var(--font-mono); margin-top:6px; }
.rs-count b{ color:var(--forest-deep); }

.reviews-bars{ flex:1 1 auto; display:flex; flex-direction:column; gap:9px; min-width:0; }
.rbar-row{ display:flex; align-items:center; gap:12px; }
.rbar-label{ flex:0 0 26px; font-size:13px; font-weight:700; color:var(--text-soft); }
.rbar-track{
  flex:1 1 auto; height:7px; border-radius:999px; background:var(--mist-dim);
  overflow:hidden; min-width:0;
}
.rbar-fill{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--forest), var(--moss-light));
  transition:width .6s ease;
}
.rbar-count{
  flex:0 0 auto; font-size:12.5px; color:var(--text-soft); white-space:nowrap;
  min-width:88px; text-align:right;
}

@media (max-width:700px){
  .reviews-overview{ flex-direction:column; align-items:flex-start; gap:22px; }
  .reviews-bars{ width:100%; }
  .reviews-panel{ padding:26px 20px 8px; }
}

.reviews-list{ display:flex; flex-direction:column; }
.review-row{ padding:22px 0; border-bottom:1px solid var(--border); }
.review-row:last-child{ border-bottom:none; }

.review-row-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:10px;
}
.review-row-user{ display:flex; align-items:center; gap:12px; min-width:0; }
.review-row-user .avatar{
  width:42px; height:42px; border-radius:50%; background:var(--sage); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; color:var(--forest-deep);
}
.review-row-user .name{ font-weight:700; font-size:15px; color:var(--text); }
.review-row-user .time{ font-size:12.5px; color:var(--text-soft); font-family:var(--font-mono); margin-top:1px; }
.review-row-user .src{ font-size:12px; color:var(--moss); font-weight:600; margin-top:1px; }

.review-row-rating{
  flex:0 0 auto; display:flex; align-items:center; gap:6px;
  font-weight:700; font-size:14px; color:var(--forest-deep); white-space:nowrap;
}
.review-row-rating .stars{ display:flex; gap:2px; }
.review-row-rating .stars svg{ width:15px; height:15px; color:var(--gold); }

.review-row-text{ font-size:14.5px; color:var(--text-soft); line-height:1.75; }

.reviews-loadmore-wrap{ display:flex; justify-content:center; margin:28px 0 6px; }

.reviews-empty{
  text-align:center; color:var(--text-soft); font-size:14.5px;
  padding:34px 20px;
}

.review-skeleton-row{ padding:20px 0; border-bottom:1px solid var(--border); }
.sk-line{
  height:12px; border-radius:6px;
  background:linear-gradient(90deg, var(--mist-dim) 25%, #eef0ec 37%, var(--mist-dim) 63%);
  background-size:400% 100%;
  animation:skeletonShine 1.4s ease infinite;
  margin-bottom:10px;
}
.sk-line.short{ width:45%; margin-bottom:0; }
@keyframes skeletonShine{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }

/* ============================================================
   SIDEBAR REVIEWS — used on hotel-details.html & property-details.html
   Sits inside the rating card, below the score, above "Write a Review"
   ============================================================ */
.pd-sidebar-reviews{
  margin-top:18px; padding-top:18px; border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:14px;
}
.pd-mini-review{ padding-bottom:14px; border-bottom:1px dashed var(--border); }
.pd-mini-review:last-child{ border-bottom:none; padding-bottom:0; }
.pd-mini-review .stars{ display:flex; gap:2px; margin-bottom:6px; }
.pd-mini-review .stars svg{ width:13px; height:13px; color:var(--gold); }
.pd-mini-review .quote{ font-size:13px; color:var(--text); line-height:1.6; margin-bottom:6px; }
.pd-mini-review .who b{ font-size:12.5px; color:var(--forest-deep); }
.pd-sidebar-reviews-empty{ font-size:13px; color:var(--text-soft); }

.pd-write-review-btn{
  width:100%; justify-content:center; gap:8px; margin-top:18px;
}
.pd-write-review-btn svg{ width:16px; height:16px; }