/* Takeaway Pacific · css/ride-card.css. The fare card on the ride form (js/front/fare-card.js), the driver row's
   slide-in and ETA pill (js/front/ride-driver.js), and the finished ride's clean summary. */

/* Fare card: the chosen vehicle only, at the rate in use now */
.farecard{display:grid;gap:12px}
.fc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.fc-veh{display:flex;align-items:center;gap:8px;min-width:0}
.fc-veh .ic{width:24px;height:24px;color:var(--midnight)}
.fc-veh b{font:800 16px/1.1 var(--sans)}
.fc-veh small{font:600 12.5px/1.1 var(--sans);color:var(--ink-3)}
.fc-when{padding:5px 10px;border-radius:999px;background:#FEF3C7;color:#92400E;font:700 12px/1 var(--sans);white-space:nowrap}
.fc-when.night{background:var(--midnight);color:#fff}
.fc-price{margin:0;font:800 24px/1.1 var(--sans);font-variant-numeric:tabular-nums;color:var(--midnight)}
.fc-price small{font:700 15px/1.1 var(--sans);color:var(--ink-2)}
.fc-note{margin:-6px 0 0;font:600 12.5px/1.3 var(--sans);color:var(--ink-3)}
.fc-none{margin:0;font:600 13px/1.35 var(--sans);color:var(--ink-2)}
.farecard.swap .fc-price{animation:fcpop 320ms var(--spring) both}
@keyframes fcpop{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}

/* Fare details (js/front/fare-details.js): one collapse wherever a cost is shown; every row on one line */
.fdet{border-top:1px solid #E2E8F0;padding-top:10px}
.fdet summary{display:flex;justify-content:space-between;align-items:center;min-height:28px;list-style:none;cursor:pointer;font:700 13.5px/1 var(--sans);color:var(--coral)}
.fdet summary::-webkit-details-marker{display:none}
.fdet summary::after{content:"";width:8px;height:8px;margin-right:4px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .2s}
.fdet[open] summary::after{transform:rotate(-135deg)}
.fdet-rows{display:grid;gap:8px;margin-top:10px}
.fdet-rows>div{display:flex;justify-content:space-between;gap:10px;font:600 13px/1.3 var(--sans);color:var(--ink-2)}
.fdet-rows span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fdet-rows>div{align-items:baseline}.fdet-rows b{flex:none;white-space:nowrap;font:700 13px/1.3 var(--sans);color:var(--midnight);font-variant-numeric:tabular-nums}
@media (max-width:340px){.fc-price{font-size:21px}.fdet-rows>div{font-size:12px}}

/* Driver row: hidden until a driver accepts, then slides up into the ticket once */
.rdrvbox.in{animation:rdrvin 560ms var(--spring) var(--rdrv-delay,0ms) both}
.rdrvbox.in .face{animation:rdrvface 700ms var(--spring) calc(var(--rdrv-delay,0ms) + 120ms) both}
@keyframes rdrvin{from{opacity:0;transform:translateY(14px);max-height:0}to{opacity:1;transform:none;max-height:240px}}
@keyframes rdrvface{from{transform:scale(.4)}to{transform:none}}
/* ETA pill: the minutes, big and easy to see */
.reta{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:5px 10px;border-radius:999px;background:var(--coral);color:#fff;font:800 14px/1 var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.reta::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:retapulse 1.6s ease-in-out infinite}
.reta.here{background:var(--green)}
.tlights.rlights{margin-top:12px;border:0;border-radius:14px;background:#FACC15;color:#0F172A}
.tlights.rlights .bulb{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.45),0 0 12px 2px #fff}
@keyframes retapulse{50%{opacity:.35}}

/* Finished (Orders tab): no progress line; the final fare reads as a summary, not a live meter */
.ride.completed .rtix .meterline,.ride.cancelled .rtix .meterline{background:rgba(255,255,255,.1);color:#fff}
.ride.completed .rhead,.ride.cancelled .rhead{margin-bottom:2px}

@media (prefers-reduced-motion:reduce){
  .rdrvbox.in,.rdrvbox.in .face,.farecard.swap .fc-nums>div{animation:none!important}
  .reta::before{animation:none}
}
/* The live meter, fare first and big (tp-promos.js meterFill; David, 2026-10-25): "T$4.05" then "so far · 0.93 km" */
.meterline{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
.meterline .mfare{font:900 42px/1 var(--sans);letter-spacing:-.02em}
.meterline .mnote{font:800 18px/1.25 var(--sans)}
.rtix .meterline{padding:16px 18px;border-radius:18px}
@media (max-width:340px),(max-height:600px){.meterline .mfare{font-size:34px}.meterline .mnote{font-size:16px}.rtix .meterline{padding:12px 14px}}
.meterline[hidden]{display:none}