/* MISTER FAST V27.3.1 — Full Hero Canvas */
html,body{overflow-x:hidden}
body .mf-fullhero{
  position:relative!important;
  display:block!important;
  width:100vw!important;
  max-width:none!important;
  min-width:0!important;
  margin:0 calc(50% - 50vw)!important;
  padding:0!important;
  background:#003da5!important;
  overflow:hidden!important;
  isolation:isolate;
}
body .mf-fullhero__canvas{
  position:relative!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  aspect-ratio:1920/900;
  min-height:520px;
  max-height:900px;
  overflow:hidden;
  background:#003da5;
}
body .mf-fullhero__slide{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  opacity:0;
  visibility:hidden;
  transform:scale(1.018);
  transition:opacity .65s ease,transform 6.5s ease;
  pointer-events:none;
}
body .mf-fullhero__slide.is-active{
  opacity:1;
  visibility:visible;
  transform:scale(1);
  pointer-events:auto;
}
body .mf-fullhero__slide img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  margin:0!important;
}

.mf-fullhero__live{
  position:absolute;
  top:18px;
  right:22px;
  z-index:15;
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  background:rgba(0,28,72,.72);
  color:#fff;
  backdrop-filter:blur(12px);
  box-shadow:0 12px 32px rgba(0,25,70,.28);
  font-family:Kanit,sans-serif;
}
.mf-fullhero__live span{
  width:10px;height:10px;border-radius:50%;
  background:#27d67d;
  box-shadow:0 0 0 0 rgba(39,214,125,.62);
  animation:mfLivePulse 1.6s infinite;
}
.mf-fullhero__live b{color:#ffc400}
.mf-fullhero__live em{font-style:normal;font-size:13px;opacity:.92}

.mf-fullhero__mapfx{position:absolute;inset:0;z-index:8;pointer-events:none}
.mf-mapmarker{
  position:absolute;
  width:42px;height:42px;
  border:2px solid #fff;border-radius:50%;
  display:grid;place-items:center;
  background:#ffc400;color:#002b68;
  font-size:18px;
  box-shadow:0 0 0 0 rgba(255,196,0,.62),0 12px 28px rgba(0,34,90,.28);
  animation:mfMarkerPulse 2.1s infinite;
}
.mf-mapmarker:after{
  content:attr(data-mf-maplabel);
  position:absolute;right:50px;top:50%;
  transform:translateY(-50%);
  padding:5px 9px;border-radius:999px;
  background:rgba(0,28,72,.9);color:#fff;
  font:600 11px Kanit,sans-serif;
  white-space:nowrap;opacity:0;transition:.2s;
}
.mf-mapmarker.is-active:after{opacity:1}
.mf-mapmarker--driver{right:7.5%;top:20%}
.mf-mapmarker--customer{right:12.8%;top:43%;animation-delay:.42s}
.mf-mapmarker--drop{right:6.5%;top:64%;animation-delay:.85s}
.mf-mapmarker--dispatch{right:19%;top:28%;animation-delay:1.2s}

.mf-mapline{
  position:absolute;
  height:3px;border-radius:999px;
  background:linear-gradient(90deg,transparent,#ffc400,#fff,#35aaff,transparent);
  filter:drop-shadow(0 0 9px #ffc400);
  opacity:.64;
  transform-origin:left center;
  animation:mfRouteGlow 2.8s linear infinite;
}
.mf-mapline--a{right:6%;top:36%;width:310px;transform:rotate(-17deg)}
.mf-mapline--b{right:8%;top:59%;width:360px;transform:rotate(14deg);animation-delay:1s}

.mf-fullhero__radar{
  position:absolute;
  right:19.5%;bottom:14%;
  z-index:16;
  width:82px;height:82px;
  border:0;border-radius:50%;
  display:grid;place-items:center;
  background:#ffc400;color:#002b68;
  cursor:pointer;
  box-shadow:0 0 0 0 rgba(255,196,0,.55),0 18px 38px rgba(0,25,72,.32);
  transition:transform .2s;
}
.mf-fullhero__radar:hover{transform:scale(1.06)}
.mf-fullhero__radar span{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(255,255,255,.9);
  animation:mfRadarPulse 1.8s infinite;
}
.mf-fullhero__radar strong{font-size:24px;z-index:2}
.mf-fullhero__radar small{
  position:absolute;bottom:-27px;
  color:#fff;font:700 12px Kanit,sans-serif;
  white-space:nowrap;text-shadow:0 2px 7px rgba(0,0,0,.5);
}

.mf-fullhero__controls{
  position:absolute;
  left:50%;bottom:17px;z-index:18;
  transform:translateX(-50%);
  display:flex;align-items:center;gap:9px;
  padding:7px 9px;
  border:1px solid rgba(255,255,255,.33);
  border-radius:999px;
  background:rgba(0,25,66,.5);
  backdrop-filter:blur(12px);
  box-shadow:0 12px 30px rgba(0,25,70,.25);
}
.mf-fullhero__controls>button{
  width:38px;height:38px;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;
  font-size:24px;font-weight:900;cursor:pointer;
}
.mf-fullhero__controls>button:hover{background:#ffc400;color:#002b68}
.mf-fullhero__dots{display:flex;align-items:center;gap:7px}
.mf-fullhero__dots button{
  position:relative;width:11px;height:11px;padding:0;
  border:0;border-radius:999px;background:rgba(255,255,255,.68);
  cursor:pointer;transition:.25s;
}
.mf-fullhero__dots button.is-active{width:32px;background:#ffc400}
.mf-fullhero__dots span{
  position:absolute;bottom:23px;left:50%;transform:translateX(-50%);
  padding:5px 8px;border-radius:8px;
  background:rgba(0,25,66,.9);color:#fff;
  font:600 10px Kanit,sans-serif;
  white-space:nowrap;opacity:0;pointer-events:none;transition:.2s;
}
.mf-fullhero__dots button:hover span{opacity:1}

/* KPI follows hero; no overlap and no duplicate floating offset */
body .mf-kpi.mf-kpi-v27{
  position:relative!important;
  z-index:4!important;
  width:min(1180px,calc(100% - 32px))!important;
  max-width:1180px!important;
  margin:22px auto 34px!important;
  transform:none!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
}

@keyframes mfLivePulse{70%{box-shadow:0 0 0 12px rgba(39,214,125,0)}}
@keyframes mfMarkerPulse{0%{box-shadow:0 0 0 0 rgba(255,196,0,.62),0 12px 28px rgba(0,34,90,.28)}70%{box-shadow:0 0 0 18px rgba(255,196,0,0),0 12px 28px rgba(0,34,90,.28)}}
@keyframes mfRouteGlow{0%{opacity:.22;filter:hue-rotate(0deg) drop-shadow(0 0 7px #ffc400)}50%{opacity:.95}100%{opacity:.22;filter:hue-rotate(38deg) drop-shadow(0 0 13px #35aaff)}}
@keyframes mfRadarPulse{0%{transform:scale(.82);opacity:1}100%{transform:scale(1.55);opacity:0}}

@media(max-width:1100px){
  body .mf-fullhero__canvas{min-height:480px}
  .mf-mapline,.mf-mapmarker--dispatch{display:none}
  .mf-fullhero__radar{right:8%;bottom:15%;width:70px;height:70px}
  .mf-fullhero__live{top:12px;right:12px}
}
@media(max-width:760px){
  body .mf-fullhero__canvas{aspect-ratio:4/5;min-height:620px;max-height:none}
  body .mf-fullhero__slide img{object-position:64% center!important}
  .mf-fullhero__live{top:10px;left:10px;right:auto;max-width:calc(100% - 20px)}
  .mf-fullhero__live em{display:none}
  .mf-mapmarker{width:37px;height:37px;font-size:15px}
  .mf-mapmarker--driver{right:8%;top:21%}
  .mf-mapmarker--customer{right:17%;top:46%}
  .mf-mapmarker--drop{right:7%;top:66%}
  .mf-fullhero__radar{right:11%;bottom:14%;width:64px;height:64px}
  .mf-fullhero__controls{bottom:11px}
  .mf-fullhero__dots span{display:none}
  body .mf-kpi.mf-kpi-v27{width:calc(100% - 20px)!important;margin:14px auto 24px!important}
}
@media(prefers-reduced-motion:reduce){
  .mf-fullhero__slide,.mf-fullhero__live span,.mf-mapmarker,.mf-mapline,.mf-fullhero__radar span{
    animation:none!important;transition:none!important;
  }
}