/* EasyPick order tracking / order-received (design screen 04). */
.ep-thankyou, .ep-track { max-width: 1040px; margin: 0 auto; padding: 28px 20px 0; }
.ep-thankyou .ep-pay-instructions { margin-bottom: 16px; }
.ep-hero { background: var(--_ink); color: #fff; border-radius: 20px; padding: 28px; display: flex; gap: 20px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.ep-hero__main { display: flex; flex-direction: column; gap: 8px; min-width: 240px; flex: 1 1 320px; }
.ep-pill { align-self: flex-start; background: var(--_orange); color: #fff; border-radius: 99px; padding: 5px 13px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ep-hero__title { font-size: 34px; color: #fff; }
.ep-hero__sub { margin: 0; font-size: 15px; color: #C9CDD3; line-height: 1.5; }
.ep-eta { background: #171B21; border: 1px solid #2A3039; border-radius: 16px; padding: 18px 22px; text-align: center; min-width: 170px; }
.ep-eta__k { font-size: 12px; color: #A0A5AD; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ep-eta__v { font-family: var(--_head); font-size: 42px; font-weight: 800; color: #FF7A5C; font-variant-numeric: tabular-nums; }
.ep-eta__w { font-size: 13px; color: #A0A5AD; }

.ep-stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 16px; }
.ep-stage { display: flex; flex-direction: column; gap: 6px; background: #fff; border-radius: 16px; padding: 16px; border: 1.5px solid var(--_line); }
.ep-stage.is-now { border-color: var(--_orange); }
.ep-stage__head { display: flex; align-items: center; gap: 9px; }
.ep-stage__dot { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: #E4E1DA; color: #8A8F97; flex-shrink: 0; }
.ep-stage.is-done .ep-stage__dot, .ep-stage.is-now .ep-stage__dot { background: var(--_orange); color: #fff; }
.ep-stage__title { font-size: 15px; font-weight: 700; }
.ep-stage__body { font-size: 13px; color: var(--_muted); line-height: 1.45; }
.ep-stage__time { font-size: 12px; font-weight: 700; color: #8A8F97; min-height: 1em; }

.ep-cols { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px; align-items: flex-start; }
.ep-cols > .ep-card { flex: 1 1 320px; min-width: 280px; }
.ep-cols h2 { font-size: 20px; }
.ep-rider { display: flex; gap: 14px; align-items: center; }
.ep-rider__avatar { width: 58px; height: 58px; border-radius: 50%; background: #FFEDE8; color: var(--_orange-deep); display: flex; align-items: center; justify-content: center; font: 800 22px var(--_head); flex-shrink: 0; }
.ep-rider__name { font-size: 16px; font-weight: 700; }
.ep-track-map { height: 240px; border-radius: 14px; overflow: hidden; border: 1px solid var(--_line); background: repeating-linear-gradient(135deg, #E8E5DE 0 10px, #F2F0EA 10px 20px); display: flex; align-items: center; justify-content: center; font-size: 13px; color: #8A8F97; position: relative; z-index: 0; }
.ep-track .ep-line { font-size: 14px; color: #3A3F47; padding-bottom: 8px; border-bottom: 1px solid #F0EEE8; display: flex; gap: 10px; align-items: baseline; }
.ep-track .ep-line__name { flex: 1; min-width: 0; }
.ep-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; font-size: 15px; font-weight: 700; }
.ep-total strong { font-family: var(--_head); font-size: 24px; font-weight: 800; }
.ep-stale { margin-top: 10px; }
.ep-track-lookup { max-width: 520px; margin: 28px auto; }
.ep-track-form { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 720px) { .ep-hero { padding: 20px; } .ep-hero__title { font-size: 26px; } .ep-thankyou, .ep-track { padding: 18px 14px 0; } }