/* MISTER FAST V36.4 — Responsive Map Controls + Brand Color Lock
   LOCK: Royal Blue + Yellow + White. Status accents: Green / Red / Orange. No black UI. */
:root{
  --mf-blue:#003da5;
  --mf-blue-deep:#082b5c;
  --mf-blue-soft:#eaf3ff;
  --mf-yellow:#ffc400;
  --mf-white:#fff;
  --mf-green:#20c979;
  --mf-red:#ff4365;
  --mf-orange:#f97316;
  --mf-text:#163b68;
  --mf-muted:#6b7d96;
  --mf-border:#d9e5f3;
  --mf-page:#f4f8ff;
}

/* Brand color safety: replace near-black UI with navy. */
.mf-lmc-shell,.mf-lmc-main,.mf-lmc-map-panel,.mf-lmc-chat-panel,
.mf-v361-map-actionbar,.mf-v343-advanced,.mf-v344-tool-dock{color:var(--mf-text)}
.mf-lmc-sidebar{background:linear-gradient(180deg,var(--mf-blue-deep),var(--mf-blue))!important}
.mf-lmc-map-head b,.mf-lmc-chat-head b,.mf-v361-selected-driver b,
.mf-v343-advanced b{color:var(--mf-blue-deep)!important}
button{font-family:inherit}

/* Desktop: keep route controls compact and anchored at the bottom-center of the map. */
.mf-v362-route-planner{
  top:auto!important;
  bottom:16px!important;
  left:50%!important;
  transform:translateX(-50%);
  width:auto!important;
  max-width:calc(100% - 190px);
  display:flex!important;
  align-items:center;
  flex-wrap:nowrap;
  gap:8px;
  padding:9px!important;
  border:1px solid var(--mf-border)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.97)!important;
  box-shadow:0 14px 34px rgba(0,61,165,.18)!important;
  backdrop-filter:blur(12px);
  overflow-x:auto;
  scrollbar-width:none;
}
.mf-v362-route-planner::-webkit-scrollbar{display:none}
.mf-v362-place,
.mf-v362-use-location,
.mf-v362-add-stop,
.mf-v362-route-summary>button{
  flex:0 0 auto;
  min-width:76px;
  min-height:62px;
  display:flex!important;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:4px;
  padding:8px 10px!important;
  border-radius:14px!important;
  border:1px solid var(--mf-border)!important;
  background:var(--mf-white)!important;
  color:var(--mf-blue-deep)!important;
  box-shadow:0 6px 16px rgba(0,61,165,.08);
  text-align:center!important;
}
.mf-v362-place{grid-template-columns:none!important}
.mf-v362-place i{width:17px!important;height:17px!important;margin:0!important;box-shadow:0 0 0 5px rgba(0,61,165,.08)!important}
.mf-v362-place span{display:block!important}
.mf-v362-place small{display:none!important}
.mf-v362-place b{font-size:12px!important;max-width:100px;line-height:1.2;white-space:nowrap!important}
.mf-v362-place em{display:none!important}
.mf-v362-place.is-active{background:var(--mf-blue)!important;color:var(--mf-white)!important;border-color:var(--mf-blue)!important}
.mf-v362-place.is-active b{color:var(--mf-white)!important}
.mf-v362-place[data-v362-mode="pickup"]:before{content:'📍';font-size:20px}
.mf-v362-place[data-v362-mode="dropoff"]:before{content:'🏁';font-size:20px}
.mf-v362-use-location:before{content:'◎';font-size:20px;color:var(--mf-orange)}
.mf-v362-add-stop:before{content:'＋';font-size:20px;color:var(--mf-blue)}
.mf-v362-use-location{background:#fff8d8!important;border-color:#ffdc63!important}
.mf-v362-add-stop:disabled{opacity:.52}
.mf-v362-help{display:none!important}
.mf-v362-route-summary{
  flex:0 0 auto;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(76px,1fr));
  gap:6px;
  border:0!important;
  padding:0!important;
}
.mf-v362-route-summary[hidden]{display:none!important}
.mf-v362-route-summary span{padding:8px 10px!important;min-width:80px;background:var(--mf-blue-soft)!important;border:1px solid var(--mf-border);border-radius:12px!important;text-align:center}
.mf-v362-route-summary small{font-size:9px!important}.mf-v362-route-summary b{font-size:13px!important;color:var(--mf-blue)!important}
.mf-v362-route-summary>button{grid-column:1/-1;min-height:34px!important;min-width:0!important;padding:5px 9px!important;color:var(--mf-red)!important;background:#fff1f4!important;border-color:#ffd2dc!important}

/* Guided planner becomes a thin progress strip, not a large card row. */
.mf-v31-planner{gap:6px!important;padding:7px 9px!important;background:var(--mf-white)!important;border-color:var(--mf-border)!important}
.mf-v31-step{min-width:112px!important;padding:7px 9px!important;border-radius:12px!important}
.mf-v31-step span{width:25px!important;height:25px!important}.mf-v31-step b{font-size:11px!important}.mf-v31-step small{display:none!important}

/* Driver control center stays directly below map and scales cleanly. */
.mf-v361-map-actionbar{background:var(--mf-white)!important;border-color:var(--mf-yellow)!important}
.mf-v361-map-actions button{color:var(--mf-blue-deep)!important;background:var(--mf-white)!important;border-color:var(--mf-border)!important}
.mf-v361-map-actions button[data-selected-mydriver]{background:#fff9df!important}
.mf-v361-map-actions button[data-selected-follow]{background:#edf6ff!important}
.mf-v361-map-actions button[data-selected-share]{background:#f4efff!important}
.mf-v361-map-actions .mf-v361-request-driver{background:var(--mf-yellow)!important;color:var(--mf-blue-deep)!important;border-color:var(--mf-yellow)!important}

/* Mobile-first scaling */
@media(max-width:768px){
  .mf-lmc-map-head{padding:9px 10px!important;min-height:58px}
  .mf-lmc-map-head small{font-size:10px!important;line-height:1.25}
  .mf-lmc-legend{font-size:9px!important;gap:5px!important}
  .mf-lmc-fullscreen{min-width:48px!important;padding:8px!important;font-size:0!important}
  .mf-lmc-fullscreen:before{content:'⛶';font-size:18px}

  .mf-v31-planner{display:flex!important;overflow-x:auto!important;scrollbar-width:none}
  .mf-v31-planner::-webkit-scrollbar{display:none}
  .mf-v31-step{flex:0 0 44px!important;min-width:44px!important;height:42px!important;padding:4px!important;display:grid!important;place-items:center!important}
  .mf-v31-step>div{display:none!important}
  .mf-v31-step span{margin:0!important;width:28px!important;height:28px!important}

  .mf-v362-route-planner{
    position:absolute!important;
    bottom:10px!important;
    left:8px!important;
    right:8px!important;
    transform:none!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    padding:7px!important;
    gap:6px!important;
    border-radius:16px!important;
  }
  .mf-v362-place,.mf-v362-use-location,.mf-v362-add-stop{
    min-width:55px!important;
    min-height:52px!important;
    padding:6px 7px!important;
    border-radius:12px!important;
  }
  .mf-v362-place b{font-size:10px!important;max-width:58px}
  .mf-v362-place[data-v362-mode="pickup"]:before,
  .mf-v362-place[data-v362-mode="dropoff"]:before,
  .mf-v362-use-location:before,.mf-v362-add-stop:before{font-size:18px!important}
  .mf-v362-use-location,.mf-v362-add-stop{font-size:0!important}
  .mf-v362-use-location:after{content:'GPS';font-size:9px;font-weight:900}
  .mf-v362-add-stop:after{content:'แวะ';font-size:9px;font-weight:900}
  .mf-v362-route-summary{grid-template-columns:repeat(2,62px)!important}
  .mf-v362-route-summary span{min-width:62px!important;padding:5px!important}.mf-v362-route-summary small{display:none!important}.mf-v362-route-summary b{font-size:11px!important}
  .mf-v362-route-summary>button{display:none!important}

  .mf-v31-estimate.mf-v363-estimate{
    margin:8px!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    padding:8px!important;
    border-radius:15px!important;
  }
  .mf-v363-estimate>div{min-height:52px!important;padding:7px!important}.mf-v363-estimate>div span{font-size:15px!important}.mf-v363-estimate>div b{font-size:13px!important}.mf-v363-estimate>div small{font-size:8px!important}
  .mf-v363-primary-cta{grid-column:1/-1!important;min-height:44px!important;font-size:14px!important;border-radius:12px!important}
  .mf-v363-price-breakdown{grid-template-columns:1fr 1fr!important;padding:7px!important}.mf-v363-price-breakdown span,.mf-v363-price-breakdown strong{padding:7px!important;font-size:10px!important}

  .mf-v361-map-actionbar{margin:10px 7px!important;padding:10px!important;border-radius:16px!important;display:block!important}
  .mf-v361-selected-driver{min-width:0!important;width:100%!important;padding:0 0 8px!important}
  .mf-v361-selected-icon{width:40px!important;height:40px!important;font-size:20px!important}
  .mf-v361-selected-driver small{font-size:9px!important}.mf-v361-selected-driver b{font-size:13px!important;line-height:1.25}.mf-v361-selected-driver>div>span{font-size:10px!important;line-height:1.3}
  .mf-v361-quick-select{font-size:10px!important;padding:6px 8px!important}
  .mf-v363-driver-stats{gap:4px!important}.mf-v363-driver-stats span{font-size:9px!important;padding:4px 6px!important}
  .mf-v361-map-actions{display:flex!important;gap:6px!important;overflow-x:auto!important;padding-bottom:2px;scrollbar-width:none}
  .mf-v361-map-actions::-webkit-scrollbar{display:none}
  .mf-v361-map-actions button{flex:0 0 66px!important;min-width:66px!important;min-height:54px!important;padding:6px!important;border-radius:12px!important}
  .mf-v361-map-actions button span{font-size:18px!important}.mf-v361-map-actions button b{font-size:9px!important;white-space:nowrap}
  .mf-v361-map-actions .mf-v361-request-driver{flex-basis:104px!important;min-width:104px!important}

  .mf-v343-advanced{margin:8px 7px!important;border-radius:15px!important}.mf-v343-advanced header{padding:10px!important}.mf-v343-advanced header span{font-size:18px!important}.mf-v343-advanced header b{font-size:13px!important}.mf-v343-advanced header small{font-size:9px!important}
}

@media(max-width:430px){
  .mf-v362-route-summary{display:none!important}
  .mf-v362-route-planner{justify-content:center}
  .mf-v362-place,.mf-v362-use-location,.mf-v362-add-stop{min-width:51px!important}
  .mf-lmc-locate{font-size:0!important;width:42px!important;height:42px!important;padding:0!important}.mf-lmc-locate:before{content:'◎';font-size:18px;color:var(--mf-blue-deep)}
}

/* V36.4.1 — Bright full-width map action strip
   Replaces dark floating pills with a white/yellow/blue icon strip. */
.mf-lmc-map-panel{position:relative!important}
.mf-lmc-locate{
  position:absolute!important;
  left:16px!important;
  bottom:16px!important;
  z-index:760!important;
  min-width:54px!important;
  height:48px!important;
  padding:0 15px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  border:1px solid #d9e5f3!important;
  border-radius:15px!important;
  background:#fff!important;
  color:#082b5c!important;
  box-shadow:0 10px 28px rgba(0,61,165,.16)!important;
  font-weight:900!important;
}
.mf-lmc-locate:hover{background:#fff8d8!important;border-color:#ffc400!important}
.mf-lmc-map-message{
  position:absolute!important;
  left:50%!important;
  bottom:16px!important;
  transform:translateX(-50%)!important;
  z-index:750!important;
  max-width:min(560px,calc(100% - 210px))!important;
  min-height:48px!important;
  padding:10px 18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid #d9e5f3!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.98)!important;
  color:#163b68!important;
  box-shadow:0 10px 28px rgba(0,61,165,.15)!important;
  backdrop-filter:blur(12px)!important;
  font-size:12px!important;
  font-weight:800!important;
  text-align:center!important;
}
.mf-lmc-map-message:before{
  content:'💡';
  display:inline-grid;
  place-items:center;
  width:27px;
  height:27px;
  margin-right:8px;
  border-radius:9px;
  background:#fff3b3;
  flex:0 0 auto;
}

/* Keep route toolbar bright and visually connected to the map width. */
.mf-v362-route-planner{
  border-color:#cfdff2!important;
  background:rgba(255,255,255,.98)!important;
}
.mf-v362-place,.mf-v362-use-location,.mf-v362-add-stop{
  background:#fff!important;
  color:#082b5c!important;
}

@media(max-width:768px){
  .mf-lmc-locate{
    left:8px!important;
    bottom:8px!important;
    width:46px!important;
    min-width:46px!important;
    height:46px!important;
    padding:0!important;
    border-radius:14px!important;
    font-size:0!important;
  }
  .mf-lmc-locate:before{content:'◎';font-size:20px;color:#082b5c}
  .mf-lmc-map-message{
    left:62px!important;
    right:8px!important;
    bottom:8px!important;
    transform:none!important;
    max-width:none!important;
    min-height:46px!important;
    padding:8px 10px!important;
    border-radius:14px!important;
    font-size:10px!important;
    line-height:1.25!important;
  }
  .mf-lmc-map-message:before{width:24px;height:24px;margin-right:6px;border-radius:8px}
}

@media(max-width:430px){
  .mf-lmc-map-message{font-size:0!important;justify-content:flex-start!important}
  .mf-lmc-map-message:before{content:'แตะแผนที่';font-size:10px;width:auto;min-width:82px;padding:0 9px;color:#082b5c;font-weight:900}
}