﻿.phone{position:relative;width:290px;height:560px;background:#0F172A;border-radius:44px;padding:10px;box-shadow:0 40px 80px rgba(15,23,42,.25);animation:bob 6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px)}}
.phone__notch{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:84px;height:22px;background:#0F172A;border-radius:99px;z-index:3}
.phone__screen{position:relative;height:100%;border-radius:35px;overflow:hidden;background:#EAF6EF}
.phone__map{position:absolute;inset:0 0 40% 0;background:
  linear-gradient(90deg,transparent 48%,#fff 48% 52%,transparent 52%),
  linear-gradient(0deg,transparent 48%,#fff 48% 52%,transparent 52%),#DDF1E6;background-size:70px 70px}
.route{position:absolute;inset:60px 20px 20px;width:calc(100% - 40px);height:calc(100% - 80px);fill:none;stroke:var(--primary-dark);stroke-width:3;stroke-linecap:round;stroke-dasharray:6 7}
.pin{position:absolute;width:18px;height:18px;border-radius:50%;border:4px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.pin--origin{background:#10B981;bottom:30%;right:62%}
.pin--dest{background:var(--red);top:22%;left:14%}
.phone__sheet{position:absolute;inset:auto 0 0 0;height:50%;background:#fff;border-radius:28px 28px 0 0;padding:10px 14px;box-shadow:0 -10px 30px rgba(0,0,0,.08)}
.sheet__handle{width:40px;height:4px;background:var(--border);border-radius:9px;margin:0 auto 10px}
.sheet__title{font-weight:800;font-size:.95rem;margin-bottom:8px}
.quotes{display:flex;flex-direction:column;gap:7px}
.quote{display:flex;align-items:center;gap:9px;padding:7px 9px;border:1px solid var(--border);border-radius:14px;font-size:.8rem}
.quote img{width:26px;height:26px;border-radius:50%}
.quote__name{font-weight:700;flex:1}
.quote__price{font-weight:800}
.quote--best{border-color:var(--primary);background:var(--primary-light)}
.quote--best .quote__price{color:var(--primary-dark)}
.float{position:absolute;background:#fff;border-radius:16px;padding:8px 14px;font-size:.82rem;font-weight:700;box-shadow:var(--shadow);z-index:4}
.float--save{top:90px;right:-46px;color:var(--primary-dark)}
.float--eta{top:250px;left:-56px}

