/* -------- WP Movie Reviews - IMDB-like styling -------- */
/* Container layout */
.wpmr-display-combined { display:flex; gap:28px; align-items:flex-start; flex-wrap:wrap; }
.wpmr-left { flex:0 0 420px; display:block; }
.wpmr-right { flex:1; }

/* Summary head area */
.wpmr-summary-head { display:flex; align-items:center; gap:22px; padding:6px 0; }
.wpmr-star-block { display:flex; align-items:center; gap:18px; }

/* Big star - ensure SVG scales nicely */
.wpmr-star-block .wpmr-star-svg,
.wpmr-star-wrap svg { width:56px !important; height:56px !important; display:block; }

/* Star container background (circle) like IMDb */
.wpmr-star-wrap { width:68px; height:68px; display:flex; align-items:center; justify-content:center; background:transparent; border-radius:14px; }
.wpmr-star-wrap svg { filter: drop-shadow(0 2px 0 rgba(0,0,0,0.07)); }

/* Average number (big) */
.wpmr-avg-number {
  font-size:48px;
  font-weight:700;
  line-height:1;
  color:#1f2937; /* dark text */
  margin:0;
  padding:0;
  letter-spacing:-0.5px;
}

/* small text under the average (count) */
.wpmr-avg-sub {
  font-size:14px;
  color:#6b7280; /* muted gray */
  margin-top:6px;
}

/* Align the avg + sub as a single column */
.wpmr-star-block { flex-direction:row; align-items:center; }
.wpmr-star-block .wpmr-avg-col { display:flex; flex-direction:column; align-items:flex-start; }

/* Summary title (right side) */
.wpmr-summary-title .wpmr-title-text { font-size:18px; font-weight:700; color:#111827; }

/* -------- Histogram: compact horizontal bars like IMDb -------- */
.wpmr-histogram-compact {  display: flex;
  justify-content: space-between;     /* evenly spread across width */
  align-items: flex-end;
  width: 100%;                        /* take full parent width */
  padding: 12px 0 0;
  gap: 0;                             /* no gaps between bars */
  box-sizing: border-box;
}

/* Each bar wrapper */
.wpmr-hbar {   flex: 1 1 auto;                     /* distribute evenly */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
 }

/* actual bar fill area */
.wpmr-hbar .wpmr-hbar-fill {
  width: 60%;                         /* same as ::before width */
  border-radius: 6px;
  background: #0b63d6;
  transition: height 0.3s ease;
  box-shadow: 0 2px 4px rgba(11, 99, 214, 0.2);
  z-index: 1;}

/* bar label (the small number under each bar) */
.wpmr-hbar-label {
  font-size: 13px;
  color: #374151;
  margin-top: 6px;
  text-align: center;
  font-weight: 500;
}

/* Make bars visually larger near the top (add subtle base to empty bars) */
.wpmr-hbar::before {
  content: "";
  display: block;
  width: 60%;                         /* background width track */
  height: 8px;
  background: #e6eefc;
  border-radius: 6px;
  position: relative;
  top: 0;
  z-index: 0;
}

/* bar container (ensure consistent vertical alignment) */
.wpmr-histogram-compact { align-items:flex-end; }

/* Give histogram a consistent height area */
.wpmr-summary-wrap .wpmr-histogram-compact {
  min-height: 120px;
}

/* Responsive: reduce spacing on small screens */
@media (max-width: 768px) {
  .wpmr-histogram-compact {
    padding: 10px 4px;
  }
  .wpmr-hbar .wpmr-hbar-fill {
    width: 70%;
  }
}

/* -------- Featured cards styling (right column) -------- */
.wpmr-featured-title { margin:0 0 12px 0; font-size:20px; color:#111827; font-weight:700; }
.wpmr-featured-card { background:#ffffff; border-radius:10px; padding:14px; box-shadow:0 6px 16px rgba(15,23,42,0.06); }
.wpmr-card-meta { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.wpmr-card-star { background:#045a04; color:#fff; padding:6px 8px; border-radius:6px; font-weight:700; display:inline-flex; align-items:center; gap:8px; }

/* reviewer and date */
.wpmr-card-author { font-weight:700; color:#111827; margin-left:6px; }
.wpmr-card-date { margin-left:auto; color:#6b7280; font-size:12px; }

/* card content */
.wpmr-card-title { font-size:16px; margin:6px 0 8px; font-weight:700; color:#111827; }
.wpmr-card-body { color:#374151; font-size:14px; line-height:1.45; }

/* -------- Responsive -------- */
@media (max-width:900px) {
  .wpmr-display-combined { flex-direction:column; }
  .wpmr-left, .wpmr-right { flex:1 1 auto; }
  .wpmr-star-wrap { width:56px; height:56px; }
  .wpmr-avg-number { font-size:36px; }
  .wpmr-histogram-compact { gap:8px; }
}

/* Optional: make the average and count use light color when shown on dark background */
.wpmr-rating-box .wpmr-value, .wpmr-rating-box .wpmr-sub { color:#fff !important; }

/* Movie info rating box — places star + score at right inside movie card */
.movie-meta-rating-wrap {
  display: flex;
  /* justify-content: flex-end; */
  align-items: flex-start;
  margin-top: 12px;               /* spacing from other meta */
}

/* Make the rating badge a neat card */
.movie-meta-rating-wrap .wpmr-rating-box {
  background: transparent;
 /* padding: 6px 10px; */
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* Badge background (optional - subtle dark rounded bg like IMDb) */
.movie-meta-rating-wrap .wpmr-badge-bg {
  background: linear-gradient(180deg,#3b3737,#2c2828);
  border-radius: 14px;
  padding: 10px 14px;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow: 0 6px 14px rgba(15,23,42,0.06);
}

/* Star: make SVG larger and place on left */
.movie-meta-rating-wrap .wpmr-star-wrap { 
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 10px;
  background: transparent;
}

/* Force SVG size */
.movie-meta-rating-wrap .wpmr-star-wrap svg,
.movie-meta-rating-wrap .wpmr-star-svg {
  width:44px !important;
  height:44px !important;
  display:block;
}

/* Score column (value + subtext) */
.movie-meta-rating-wrap .wpmr-score {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1;
}

/* Big score (10/10) */
.movie-meta-rating-wrap .wpmr-value {
  font-size:32px;
  font-weight:700;
  color:#ffffff;        /* white on dark badge */
  letter-spacing:-0.4px;
}

/* Small "/10" styling (we expect the plugin prints /10 inside the value) */
.movie-meta-rating-wrap .wpmr-value span {
  font-size:14px;
  font-weight:700;
  margin-left:8px;
  color:inherit;
}

/* Count below the score */
.movie-meta-rating-wrap .wpmr-sub {
  font-size:13px;
  color:#e6dfcf;        /* light beige like IMDb small text */
  margin-top:4px;
}

/* If your page uses a light background, use a small alternative style */
.movie-meta-rating-wrap.light .wpmr-badge-bg {
  background: linear-gradient(180deg,#fff,#fafafa);
}
.movie-meta-rating-wrap.light .wpmr-value { color:#111; }
.movie-meta-rating-wrap.light .wpmr-sub { color:#666; }

/* Responsive: stack for very small screens */
@media (max-width:640px) {
  .movie-meta-rating-wrap { justify-content:flex-start; }
  .movie-meta-rating-wrap .wpmr-value { font-size:26px; }
  .movie-meta-rating-wrap .wpmr-star-wrap { width:44px; height:44px; }
}

/* OTT logos */
.wpmr-watch-logos { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px; }
.wpmr-watch-logo { display:inline-block; height:48px; width:auto; object-fit:contain; border-radius:6px; background:transparent; }
.wpmr-watch-logo-link { display:inline-block; }

/* Horizontal crew layout (IMDb-style) */
.wpmr-cast-roles {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
  font-family: Arial, Helvetica, sans-serif;
}

.wpmr-crew-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 4px 0;
}

.wpmr-crew-label {
  flex: 0 0 120px;
  color: #000000;
  font-weight: 700;
  font-size: 14px;
  text-transform: capitalize;
}

.wpmr-crew-names {
  flex: 1;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
}

.wpmr-crew-link {
  color: #4da6ff;
  text-decoration: none;
  transition: color 0.2s;
}

.wpmr-crew-link:hover {
  color: #73c2ff;
  text-decoration: underline;
}

.wpmr-crew-sep {
  color: #888;
  margin: 0 6px;
}

.movie-meta-row { font-size: 14px; line-height: 1.1; color: #111; }
.movie-meta-row span { display: inline-block; margin-right: 6px; }
.movie-meta-row .movie-meta-runtime { font-weight: 400; }
.movie-meta-row strong { font-weight: 600; margin-right: 4px; }

.wpmu-acf-gallery { margin: 0 -6px; }
.wpmu-acf-gallery .wpmu-gallery-item { padding: 6px; box-sizing: border-box; }
.wpmu-acf-gallery img { width: 100%; height: auto; display: block; border-radius: 6px; }