/* Rent collection page: product mock visuals and their motion.
   Mock data is fictional (see the note in feature_rent_collection.html). */
#rent-collection.rc-rebuild { --rcv-purple:#6B48E0; --rcv-navy:#042238; --rcv-quiet:#4B5A6B; --rcv-edge:#DCE1E8; }

/* Shared mock card */
#rent-collection.rc-rebuild .rcv-mock { display:block; background:#fff; border:1px solid var(--rcv-edge); border-radius:8px; padding:16px; box-shadow:0 8px 24px rgba(4,34,56,.07); color:var(--rcv-navy); font-size:14px; line-height:1.4; text-align:left; }
#rent-collection.rc-rebuild .rcv-mock-head { display:flex; align-items:center; gap:10px; padding-bottom:12px; margin-bottom:4px; border-bottom:1px solid var(--rcv-edge); }
#rent-collection.rc-rebuild .rcv-mock-head > span:last-child { display:grid; min-width:0; }
#rent-collection.rc-rebuild .rcv-mock-title { font-size:15px; font-weight:700; }
#rent-collection.rc-rebuild .rcv-mock-sub { font-size:13px; color:var(--rcv-quiet); }
#rent-collection.rc-rebuild .rcv-ico { flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#F1EDFD; color:var(--rcv-purple); }
#rent-collection.rc-rebuild .rcv-ico svg { width:20px; height:20px; }
#rent-collection.rc-rebuild .rcv-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 0; font-size:14px; }
#rent-collection.rc-rebuild .rcv-row + .rcv-row { border-top:1px solid #EEF1F5; }
#rent-collection.rc-rebuild .rcv-row > span:first-child { color:var(--rcv-quiet); }
#rent-collection.rc-rebuild .rcv-row > strong { font-weight:700; font-variant-numeric:tabular-nums; text-align:right; }
#rent-collection.rc-rebuild .rcv-row.rcv-total { border-top:2px solid var(--rcv-navy); margin-top:4px; font-size:16px; }
#rent-collection.rc-rebuild .rcv-row.rcv-total > span:first-child { color:var(--rcv-navy); font-weight:700; }

#rent-collection.rc-rebuild .rcv-badge { display:inline-flex; align-items:center; gap:6px; align-self:start; justify-self:start; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; line-height:1.5; color:#1B1C1A; white-space:nowrap; }
#rent-collection.rc-rebuild .rcv-badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
#rent-collection.rc-rebuild .rcv-badge.upcoming, #rent-collection.rc-rebuild .rcv-badge.transit { background:#C3DBFF; }
#rent-collection.rc-rebuild .rcv-badge.processing { background:#FFFA64; }
#rent-collection.rc-rebuild .rcv-badge.paid { background:#D1F864; }
#rent-collection.rc-rebuild .rcv-badge.deposited { background:#D1F48C; }

/* Setup steps (section 01) */
#rent-collection.rc-rebuild .workflow .rcv-mock { margin-bottom:20px; min-height:212px; }
#rent-collection.rc-rebuild .rcv-check { display:flex; align-items:center; gap:10px; padding:8px 0; font-size:14px; }
#rent-collection.rc-rebuild .rcv-check + .rcv-check { border-top:1px solid #EEF1F5; }
#rent-collection.rc-rebuild .rcv-check > i { flex:none; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#00A82D; color:#fff; }
#rent-collection.rc-rebuild .rcv-check > i svg { width:14px; height:14px; stroke-width:3; }
#rent-collection.rc-rebuild .rcv-check.todo > i { background:#fff; border:2px solid #B6C0CC; }
#rent-collection.rc-rebuild .rcv-check.todo > i svg { display:none; }
#rent-collection.rc-rebuild .rcv-check > em { margin-left:auto; font-style:normal; font-size:13px; color:var(--rcv-quiet); }
#rent-collection.rc-rebuild .rcv-meter { display:block; height:8px; border-radius:999px; background:#E8ECF1; overflow:hidden; margin:10px 0 4px; }
#rent-collection.rc-rebuild .rcv-meter > span { display:block; height:100%; width:var(--w,50%); border-radius:inherit; background:var(--success,#47AE72); }
#rent-collection.rc-rebuild .rcv-tiles { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
#rent-collection.rc-rebuild .rcv-tile { display:grid; gap:2px; padding:10px 12px; border:1px solid var(--rcv-edge); border-radius:6px; }
#rent-collection.rc-rebuild .rcv-tile > span { font-size:13px; font-weight:700; }
#rent-collection.rc-rebuild .rcv-tile > strong { font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; color:#287A4A; }
#rent-collection.rc-rebuild .rcv-tile.owed > strong { color:var(--danger,#D8293E); }
#rent-collection.rc-rebuild .rcv-caption { display:block; font-size:13px; color:var(--rcv-quiet); }

/* Payment journey */
#rent-collection.rc-rebuild .rcv-track { list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin:36px 0 0; padding:0; }
#rent-collection.rc-rebuild .rcv-stage { position:relative; display:grid; gap:6px; align-content:start; margin:0; padding:0; color:var(--rcv-navy); }
#rent-collection.rc-rebuild .rcv-stage::before, #rent-collection.rc-rebuild .rcv-stage::after { content:""; position:absolute; top:23px; left:56px; width:calc(100% - 40px); height:2px; background:var(--rcv-edge); }
#rent-collection.rc-rebuild .rcv-stage::after { background:var(--rcv-purple); transform-origin:left center; }
#rent-collection.rc-rebuild .rcv-stage:last-child::before, #rent-collection.rc-rebuild .rcv-stage:last-child::after { display:none; }
#rent-collection.rc-rebuild .rcv-stage-icon { display:grid; place-items:center; width:48px; height:48px; margin-bottom:8px; border-radius:50%; background:var(--rcv-purple); color:#fff; }
#rent-collection.rc-rebuild .rcv-stage-icon svg { width:24px; height:24px; }
#rent-collection.rc-rebuild .rcv-stage-step { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#006CB4; }
#rent-collection.rc-rebuild .rcv-stage-title { font-size:19px; font-weight:700; line-height:1.3; }

/* Tenant payment summary (section 02) */
#rent-collection.rc-rebuild .rcv-pay { position:relative; margin:32px 0 0; padding:0 96px 56px 0; max-width:520px; }
#rent-collection.rc-rebuild .rcv-pay > img { display:block; width:100%; height:auto; border-radius:8px; }
#rent-collection.rc-rebuild .rcv-pay .rcv-mock { position:absolute; right:0; bottom:0; width:272px; box-shadow:0 16px 36px rgba(4,34,56,.18); }
#rent-collection.rc-rebuild .rcv-method { display:flex; align-items:center; gap:10px; padding:7px 0; font-size:14px; }
#rent-collection.rc-rebuild .rcv-method > i { flex:none; width:16px; height:16px; border-radius:50%; border:2px solid #8A97A6; background:#fff; }
#rent-collection.rc-rebuild .rcv-method.on > i { border:5px solid #00A82D; }
#rent-collection.rc-rebuild .rcv-method.on { font-weight:700; }
#rent-collection.rc-rebuild .rcv-paybar { display:flex; justify-content:center; align-items:center; min-height:36px; margin-top:12px; border-radius:6px; background:#00C434; color:#1B1C1A; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }

/* Check lists: the standard public check mark */
#rent-collection.rc-rebuild :is(.comparison-benefits, .benefit-list, .feature-points) li > .pub-check, #rent-collection.rc-rebuild .transaction-footer > .pub-check { width:22px; height:22px; margin-top:1px; border-radius:0; background:var(--check-icon, url("/images/ui-symbols/check-circle-mint.svg")) center / contain no-repeat; }

/* Stripe payment account setup */
#rent-collection.rc-rebuild .rcv-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:center; }
#rent-collection.rc-rebuild .rcv-lead { font-size:18px; line-height:1.55; color:var(--muted); max-width:60ch; margin:20px 0 0; }
#rent-collection.rc-rebuild .rcv-note { display:inline-block; margin:20px 0 16px; padding:10px 14px; border-radius:4px; background:#C9ECFF; color:var(--rcv-navy); font-size:14px; line-height:1.5; }
#rent-collection.rc-rebuild .rcv-split .text-link { display:block; }
#rent-collection.rc-rebuild .rcv-account { padding:20px; }
#rent-collection.rc-rebuild .rcv-stripe-logo { flex:none; width:auto; height:34px; }
#rent-collection.rc-rebuild .rcv-account .rcv-mock-head { gap:14px; justify-content:space-between; }
#rent-collection.rc-rebuild .rcv-account .rcv-mock-head > span:last-child { text-align:right; }
#rent-collection.rc-rebuild .rcv-steps { list-style:none; margin:0; padding:0; }
#rent-collection.rc-rebuild .rcv-steps > li { display:flex; align-items:flex-start; gap:12px; margin:0; padding:12px 0; font-size:14px; }
#rent-collection.rc-rebuild .rcv-steps > li + li { border-top:1px solid #EEF1F5; }
#rent-collection.rc-rebuild .rcv-steps > li > i { flex:none; display:grid; place-items:center; width:24px; height:24px; margin-top:1px; border-radius:50%; background:#00A82D; color:#fff; }
#rent-collection.rc-rebuild .rcv-steps > li > i svg { width:15px; height:15px; stroke-width:3; }
#rent-collection.rc-rebuild .rcv-steps > li.todo > i { background:#fff; border:2px solid #B6C0CC; }
#rent-collection.rc-rebuild .rcv-steps > li.todo > i svg { display:none; }
#rent-collection.rc-rebuild .rcv-steps > li > div { display:grid; gap:2px; min-width:0; flex:1; }
#rent-collection.rc-rebuild .rcv-steps strong { font-size:15px; font-weight:700; }
#rent-collection.rc-rebuild .rcv-steps div > span { font-size:14px; color:var(--rcv-quiet); }
#rent-collection.rc-rebuild .rcv-badge.danger { background:#D40C1A; color:#fff; }

/* Scenarios */
#rent-collection.rc-rebuild .rcv-scene-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin-top:36px; }
#rent-collection.rc-rebuild .rcv-scene { display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:16px; border:1px solid var(--rcv-edge); border-radius:8px; background:#fff; text-align:left; }
#rent-collection.rc-rebuild .rcv-scene-strip { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; align-self:stretch; padding:10px 12px; margin-bottom:6px; border-radius:6px; background:#F6F8FB; color:var(--rcv-navy); font-size:14px; font-weight:700; }
#rent-collection.rc-rebuild .rcv-scene h3 { margin:0; font-size:18px; font-weight:700; line-height:1.3; color:var(--rcv-navy); }
#rent-collection.rc-rebuild .rcv-scene p { margin:0 0 4px; font-size:15px; line-height:1.5; color:var(--rcv-quiet); }
#rent-collection.rc-rebuild .rcv-scene .text-link { margin-top:auto; }
#rent-collection.rcv-js .rcv-steps > li { opacity:0; transition:opacity .6s ease; transition-delay:calc(.5s + var(--i,0) * 450ms); }
#rent-collection.rcv-js .rcv-in .rcv-steps > li { opacity:1; }
#rent-collection.rcv-js [data-rcv] .rcv-scene { opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease; transition-delay:calc(var(--i,0) * 180ms); }
#rent-collection.rcv-js [data-rcv].rcv-in .rcv-scene { opacity:1; transform:none; }

/* Comparison rows: titles only */
#rent-collection.rc-rebuild .comparison-questions .compare-row { display:grid; grid-template-columns:18px minmax(0,1fr); align-items:center; gap:10px; min-height:52px; padding:4px 0; border-bottom:1px solid #E3E7EF; font-size:16px; font-weight:600; line-height:1.5; color:var(--rcv-navy); }
#rent-collection.rc-rebuild .comparison-questions .compare-row:last-child { border-bottom:0; }

/* Motion: only when the script is running and motion is allowed */
#rent-collection.rcv-js [data-rcv] .rcv-mock, #rent-collection.rcv-js .rcv-mock[data-rcv] { opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease; transition-delay:calc(var(--i,0) * 220ms); }
#rent-collection.rcv-js [data-rcv].rcv-in .rcv-mock, #rent-collection.rcv-js .rcv-mock[data-rcv].rcv-in { opacity:1; transform:none; }
#rent-collection.rcv-js [data-rcv] .rcv-meter > span { width:0; transition:width 1.2s ease .5s; }
#rent-collection.rcv-js [data-rcv].rcv-in .rcv-meter > span { width:var(--w,50%); }
#rent-collection.rcv-js .rcv-pay .rcv-row, #rent-collection.rcv-js .rcv-pay .rcv-paybar { opacity:0; transition:opacity .6s ease; transition-delay:calc(.6s + var(--i,0) * 350ms); }
#rent-collection.rcv-js .rcv-pay.rcv-in .rcv-row, #rent-collection.rcv-js .rcv-pay.rcv-in .rcv-paybar { opacity:1; }
#rent-collection.rcv-js .rcv-stage .rcv-stage-icon { background:#fff; color:#8A97A6; box-shadow:inset 0 0 0 2px #B6C0CC; transition:background .5s ease, color .5s ease, box-shadow .5s ease, transform .5s ease; }
#rent-collection.rcv-js .rcv-stage.is-on .rcv-stage-icon { background:var(--rcv-purple); color:#fff; box-shadow:none; transform:scale(1.06); }
#rent-collection.rcv-js .rcv-stage .rcv-badge { opacity:0; transform:translateY(6px); transition:opacity .5s ease .2s, transform .5s ease .2s; }
#rent-collection.rcv-js .rcv-stage.is-on .rcv-badge { opacity:1; transform:none; }
#rent-collection.rcv-js .rcv-stage::after { transform:scaleX(0); transition:transform .8s ease; }
#rent-collection.rcv-js .rcv-stage.is-done::after { transform:scaleX(1); }
#rent-collection.rcv-js .bar-chart[data-rcv] .bar-fill { transform:scaleY(0); transform-origin:center bottom; transition:transform .9s ease; }
#rent-collection.rcv-js .bar-chart[data-rcv].rcv-in .bar-fill { transform:none; }

@media (max-width:900px) {
  #rent-collection.rc-rebuild .rcv-track { grid-template-columns:1fr; gap:0; }
  #rent-collection.rc-rebuild .rcv-stage { grid-template-columns:48px minmax(0,1fr); column-gap:16px; padding-bottom:28px; }
  #rent-collection.rc-rebuild .rcv-stage > * { grid-column:2; }
  #rent-collection.rc-rebuild .rcv-stage > .rcv-stage-icon { grid-column:1; grid-row:1 / span 3; margin:0; }
  #rent-collection.rc-rebuild .rcv-stage::before, #rent-collection.rc-rebuild .rcv-stage::after { top:52px; left:23px; width:2px; height:calc(100% - 56px); }
  #rent-collection.rc-rebuild .rcv-stage::after { transform-origin:center top; }
  #rent-collection.rcv-js .rcv-stage::after { transform:scaleY(0); }
  #rent-collection.rcv-js .rcv-stage.is-done::after { transform:scaleY(1); }
  #rent-collection.rc-rebuild .workflow .rcv-mock { min-height:0; }
  #rent-collection.rc-rebuild .rcv-split { grid-template-columns:minmax(0,1fr); gap:28px; }
  #rent-collection.rc-rebuild .rcv-scene-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
}
@media (max-width:740px) {
  #rent-collection.rc-rebuild .rcv-pay { padding:0; max-width:none; }
  #rent-collection.rc-rebuild .rcv-scene-grid { grid-template-columns:minmax(0,1fr); }
  #rent-collection.rc-rebuild .rcv-pay .rcv-mock { position:relative; width:auto; max-width:320px; margin:-56px auto 0; }
}