/* Make Money with Votel, Part 5 (reviews): page-specific visuals.
   Builds on make-money-guide.css (.mm-*) and the sop-* guide classes. */

/* ---------- Shared stars ---------- */
.mmr-stars { display: inline-flex; gap: 1px; line-height: 1; }
.mmr-stars i { font-style: normal; color: #f5b301; font-size: .95rem; }
.mmr-stars i.off { color: #d9e1e8; }
.mmr-rating { display: flex; align-items: center; gap: .45rem; margin-top: .9rem; }
.mmr-rating strong { font-family: "Geist", sans-serif; font-size: 1.6rem; line-height: 1; color: var(--ink); }
.mmr-rating.is-small { margin-top: .3rem; }
.mmr-rating.is-small strong { font-size: 1.05rem; }
.mmr-rating.is-small .mmr-stars i { font-size: .75rem; }
.mmr-count { display: block; margin-top: .35rem; font-size: .72rem; font-weight: 700; color: var(--mint-deep); }
.mmr-count.is-stale { color: var(--rose); }

/* ---------- Hero: listing card ---------- */
.mmr-listing { padding: 1.1rem; }
.mmr-listing .mm-owner-top small { color: var(--ink-faint); font-weight: 500; }
.mmr-review-lines { margin-top: .8rem; }
.mmr-review-lines i { display: block; height: 7px; margin-top: .4rem; border-radius: 6px; background: repeating-linear-gradient(90deg, #eef2f6 0 10px, #f6f8fa 10px 20px); }
.mmr-review-lines i:nth-child(2) { width: 82%; }
.mmr-review-lines i:nth-child(3) { width: 58%; }

/* ---------- Hero: workflow card ---------- */
.mmr-flow { padding: 1.1rem; }
.mmr-nodes { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .9rem; }
.mmr-nodes li { position: relative; padding: .65rem .8rem; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 14px; background: #fff; }
.mmr-nodes li + li::before { content: ""; position: absolute; left: 1.2rem; top: -.95rem; width: 2px; height: .9rem; background: linear-gradient(180deg, var(--brand), var(--mint)); }
.mmr-nodes li.is-trigger { border-left-color: var(--mint-deep); background: linear-gradient(90deg, var(--mint-soft), #fff); }
.mmr-nodes li.is-wait { border-left-color: var(--cyan); }
.mmr-nodes small { display: block; font: 700 .58rem/1 "Geist Mono", monospace; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
.mmr-nodes b { display: block; margin-top: .3rem; font-size: .84rem; color: var(--ink); line-height: 1.3; }
.mmr-nodes span { display: block; margin-top: .2rem; font-size: .7rem; color: var(--ink-soft); line-height: 1.35; }
.mmr-flow .mm-cal-meta { margin-top: .85rem; }

/* ---------- Hero: phone ---------- */
.mmr-screen { padding: .7rem .6rem .6rem; background: #f6f9fc; }
.mmr-sms { display: grid; gap: .45rem; }
.mmr-sms p { margin: 0; max-width: 88%; padding: .5rem .65rem; font-size: .64rem; line-height: 1.4; }
.mmr-sms .out { justify-self: start; border-radius: 14px 14px 14px 4px; background: #fff; border: 1px solid var(--line); color: var(--ink-soft); }
.mmr-sms .in { justify-self: end; border-radius: 14px 14px 4px 14px; background: linear-gradient(135deg, var(--brand), var(--cyan)); color: #fff; font-weight: 600; }
.mmr-mini-listing { margin-top: .7rem; padding: .6rem .7rem; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.mmr-mini-listing b { display: block; font-size: .7rem; color: var(--ink); }
.mmr-float-reviews i { background: #f5b301; color: #fff; }

/* ---------- Before / after ---------- */
.mmr-compare { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin: 1.5rem 0 .5rem; }
.mmr-card { padding: 1.1rem; border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.mmr-card.is-after { border-color: rgba(11,222,177,.6); background: linear-gradient(145deg, #f2fffb, #e9f7ff); }
.mmr-card .mm-feed-head span { padding: .3rem .55rem; border-radius: 999px; font: 700 .6rem/1 "Geist Mono", monospace; text-transform: uppercase; letter-spacing: .05em; background: #fde8e8; color: #a61b1b; }
.mmr-card.is-after .mm-feed-head span { background: var(--mint-soft); color: var(--mint-deep); }
.mmr-big { display: flex; align-items: baseline; gap: .6rem; margin-top: .9rem; }
.mmr-big strong { font-family: "Geist", sans-serif; font-size: 2.6rem; line-height: 1; color: var(--ink); }
.mmr-big .mmr-stars i { font-size: 1.1rem; }
.mmr-meter { height: 8px; margin-top: .8rem; border-radius: 8px; background: var(--frost); border: 1px solid var(--line); overflow: hidden; }
.mmr-meter i { display: block; width: var(--w); height: 100%; border-radius: 8px; background: #c9d4de; }
.mmr-card.is-after .mmr-meter i { background: linear-gradient(90deg, var(--brand), var(--mint)); }
.mmr-card p { margin-top: .8rem !important; font-size: .82rem !important; line-height: 1.5 !important; color: var(--ink-soft); }
.mmr-caption { margin-top: .4rem; font-size: .74rem; color: var(--ink-faint); }

/* ---------- Search map (step 01) ---------- */
.mmr-map { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: 1.3rem 0; }
.mmr-map > div { position: relative; padding: .85rem .9rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.mmr-map b { display: block; font-size: .86rem; color: var(--ink); }
.mmr-map small { display: block; margin-top: .3rem; font-size: .74rem; color: var(--ink-faint); }
.mmr-map .is-winner { border-color: var(--mint-deep); background: linear-gradient(145deg, var(--mint-soft), #fff); box-shadow: 0 10px 24px rgba(11,222,177,.18); }
.mmr-map em { display: inline-block; margin-top: .5rem; padding: .25rem .5rem; border-radius: 999px; background: var(--ink); color: var(--mint); font: 700 .58rem/1 "Geist Mono", monospace; font-style: normal; text-transform: uppercase; letter-spacing: .06em; }
.mmr-outcomes { grid-template-columns: repeat(2, 1fr); }

/* ---------- Packages (three cards) ---------- */
.sop-step .mmr-packages { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Market price cards ---------- */
.mmr-market { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin: 1.2rem 0; }
.mmr-market-card { display: flex; flex-direction: column; padding: .95rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.mmr-market-card small { font: 700 .6rem/1.2 "Geist Mono", monospace; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.mmr-market-card strong { display: block; margin-top: .5rem; font-family: "Geist", sans-serif; font-size: 1.3rem; line-height: 1.1; color: var(--ink); }
.mmr-market-card strong span { font-size: .75rem; font-weight: 500; color: var(--ink-faint); }
.mmr-market-card p { margin: .5rem 0 0 !important; font-size: .76rem !important; line-height: 1.45 !important; color: var(--ink-soft); flex: 1; }
.mmr-market-card em { display: block; margin-top: .6rem; font-size: .68rem; font-style: normal; color: var(--ink-faint); }
.mmr-market-card.is-you { border-color: var(--mint-deep); background: linear-gradient(145deg, var(--mint-soft), #fff); }
.mmr-market-card.is-you small { color: var(--mint-deep); }

/* ---------- Three-bar chart ---------- */
.mm-bars.mmr-bars, .mm-bar-labels.mmr-bars { grid-template-columns: repeat(3, 1fr); }

/* ---------- Ladder + watch ---------- */
.mm-ladder .mmr-ladder-links { font-size: .95rem; white-space: normal; text-align: right; }
.mm-ladder .is-total .mmr-ladder-links a { color: var(--mint) !important; }
.mm-ladder b a { color: inherit !important; }
.mm-next + .mm-next { margin-top: .6rem; }
.mm-watch .mmr-wide { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .mmr-market { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sop-step .mmr-packages { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .mmr-compare, .mmr-map, .mmr-outcomes, .mmr-market { grid-template-columns: 1fr; }
  .mmr-big strong { font-size: 2.1rem; }
  .mm-ladder .mmr-ladder-links { text-align: left; }
  .mm-ladder > div:has(.mmr-ladder-links) { grid-template-columns: 44px 1fr; }
  .mm-ladder > div:has(.mmr-ladder-links) strong { grid-column: 2; }
  .mm-ladder strong { font-size: 1rem; }
}