/* ===== Section + header ===== */
/*.wcrs{
  max-width: 1100px;
  margin: 48px auto;
  padding: 0 16px;
  font-family: inherit;
  color: #111827;
}*/

.wcrs__header{
  text-align: center;
  margin-bottom: 28px;
}

.wcrs__kicker{
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--coral);
  font-weight: 700;
  margin-bottom: 10px;
}

.wcrs__title{
  font-size: clamp(32px, 4vw, 50px);
    margin-bottom: 16px;
    font-weight: 700;
    line-height: 1.05;
}

.wcrs__title-strong{ color: #0f1b3d; }
.wcrs__title-accent{ color: var(--coral); margin-left: .25em; }

.wcrs__subtitle{
  color: var(--slate);
    font-size: 17px;
    max-width: 680px;
    line-height: 1.6;
	margin:0 auto;
}

/* ===== Summary grid (top) ===== */
.wcrs__topgrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  align-items: center;
  margin: 28px 0 40px;
}

@media (max-width: 900px){
  .wcrs__topgrid{ grid-template-columns: 1fr; }
}

.wcrs__card.wcrs__summary{
	background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 30px;
}


.wcrs-card{
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Push the divider (and therefore the footer after it) to the bottom */
.wcrs-card__divider{
  margin-top: auto!important;     /* key line */
  margin-bottom: 12px;  /* keep your existing spacing */
}

/* Footer stays under divider */
.wcrs-card__footer{
  margin-top: 0;        /* important: don't use auto here anymore */
}
.wcrs__summaryTop{
  display: flex;
  align-items: center;
  gap: 16px;
	border-bottom: 1px solid var(--border);
	padding-bottom: 18px;
	margin-bottom: 20px;
}

.wcrs__avg{
  font-size: 56px;
  font-weight: 900;
  color: #0f1b3d;
  line-height: 1;
  min-width: 92px;
    font-family: 'DM Sans', sans-serif;
}

.wcrs__count{
  margin-top: 6px;
  font-size: 14px;
  color: #6b7280;
  font-weight: 600;
}

/* rating distribution */
.wcrs__row{
  display: grid;
  grid-template-columns: 32px 1fr 42px;
  gap: 12px;
  align-items: center;
  margin: 10px 0;
  font-size: 14px;
  color: #111827;
}

.wcrs__rowLabel{ color: #0f1b3d; font-weight: 700; }
.wcrs__rowPct{ text-align: right; color: #6b7280; font-weight: 700; }

.wcrs__bar{
  height: 10px;
  background: #dde6ef;
  border-radius: 999px;
  overflow: hidden;
}

.wcrs__barFill{
  display: block;
  height: 100%;
 background: var(--coral);
  border-radius: 999px;
}

/* right side text + button */
.wcrs__side{ padding: 10px 20px; }
.wcrs__sideText{
  color: var(--slate);
    font-size: 17px;
    max-width: 680px;
    line-height: 1.6;
}

.wcrs__button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  border: 2px solid #0f1b3d;
  color: #0f1b3d;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .04em;
  font-size: 13px;
  transition: transform .05s ease, background .2s ease, color .2s ease;
}

.wcrs__button:hover{ background: #0f1b3d; color: #fff; }
.wcrs__button:active{ transform: translateY(1px); }

/* ===== Stars (orange/grey) ===== */
.wcrs-stars{
  display: inline-flex;
  gap: 3px;
  line-height: 1;
  vertical-align: middle;
}

.wcrs-star{ font-size: 22px; }
.wcrs-star--full{ color: var(--yellow); }
.wcrs-star--empty{ color: #cbd5e1; }

/* half star */
.wcrs-star--half{
  position: relative;
  color: #cbd5e1;
}
.wcrs-star--half::before{
  content: "★";
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  overflow: hidden;
  color: var(--yellow);
}

/* ===== Review grid ===== */
.wcrs-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 18px;
}

@media (max-width: 900px){
  .wcrs-grid{ grid-template-columns: 1fr; }
}

/* ===== EXACT review card like screenshot ===== */
.wcrs-card{
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 30px 28px;
	display: flex;
	flex-direction: column;
}

.wcrs-card__stars{
  margin-bottom: 10px;
}

.wcrs-card__title{
  margin: 0 0 14px!important;
  font-weight: 700;
  font-size: 17px;
  color: var(--navy);
}

/* the orange “//” quote */
.wcrs-card__quote{
  width: 26px;
  height: 16px;
  margin: 0 0 8px;
  position: relative;
}

.wcrs-card__quote::before {
    content: "\201C";
    color: var(--coral);
    font-family: 'DM Sans';
    font-size: 44px;
    line-height: 0.5;
    display: block;
    margin-bottom: 12px;
}

.wcrs-card__quote::before{ left: 0; }
.wcrs-card__quote::after{ left: 12px; }

.wcrs-card__text{
    font-size: 16px;
    line-height: 1.6;
    color: var(--navy);
    flex-grow: 1;
    font-weight: 500;
}

.wcrs-card__divider{
  border: 0;
  height: 1px;
  background: var(--border);
  margin: 10px 0 12px;
}

/* footer */
.wcrs-card__footer{
  display: flex;
  align-items: center;
    gap: 12px;
    border-top: 1px solid var(--border);
    padding-top: 14px;
}

.wcrs-avatar{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #0f1b3d;
  background: linear-gradient(135deg, var(--coral), #eb9a83);
}

.wcrs-avatar--0{ background: #bfeff0; }
.wcrs-avatar--1{ background: linear-gradient(135deg, var(--teal), #87dde0);}
.wcrs-avatar--2{ background: linear-gradient(135deg, var(--pink), #ffadbe); }
.wcrs-avatar--3{ background: linear-gradient(135deg, var(--coral), #eb9a83); }
.wcrs-avatar--4{ background: linear-gradient(135deg, var(--navy), #6b7db0); }
.wcrs-avatar--5{ background: #ffe6a6; }

.wcrs-card__who{ min-width: 0; }

.wcrs-card__nameRow{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.wcrs-card__name{
  font-weight: 900;
  color: #0f1b3d;
  font-size: 14px;
  line-height: 1.2;
}

.wcrs-card__verified{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #18a6a6;
}

.wcrs-card__meta{
  margin-top: 3px;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.35;
}

/* load more */
.wcrs__moreWrap{
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.wcrs__loadmore{
      display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-size: 14px;
    text-transform: uppercase;
    padding: 15px 30px;
    border-radius: 999px;
    border: 2px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
    white-space: nowrap;
	background: var(--navy);
    color: var(--white);
}

.wcrs__loadmore:hover{ background: #0f1b3d; color: #fff; }
.wcrs__loadmore:active{ transform: translateY(1px); }

.wcrs__triggerLoadMore.is-loading{
  opacity: .75;
  cursor: progress;
}