/* VIENNA v171 — palette cleanup + UI polish + exact Mapbox destination anchoring. */
:root{
  --v171-primary:#F59A62;
  --v171-light:#FFC39B;
  --v171-deep:#D9703F;
  --v171-paper:#FFFBF2;
  --v171-soft:#FFF4EC;
  --v171-ink:#27231F;
  --v171-muted:#706861;
  --v171-line:rgba(112,104,97,.16);
  --v171-shadow:0 16px 42px rgba(76,54,39,.12);
}

/* One consistent interaction language everywhere. */
button,a,.btn,[role="button"]{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(245,154,98,.24)!important;outline-offset:2px!important}
button:not(:disabled){transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease,background .18s ease,border-color .18s ease,filter .18s ease!important}
button:not(:disabled):active{transform:scale(.985)}

/* Final brand pass for legacy controls that previously carried violet identity. */
:is(.primary,.btn-primary,.destination-accept,.traffic-accept,.nav-alt-accept,.resume-trip-continue,.guest-limit-primary,.sheet-submit,.risk-submit,.know-more,.auth-choice.primary,.auth-button.email,.route-actions .primary){
  background:linear-gradient(135deg,var(--v171-light) 0%,var(--v171-primary) 52%,var(--v171-deep) 100%)!important;
  color:#fff!important;
  border-color:transparent!important;
  box-shadow:0 11px 27px rgba(217,112,63,.22),inset 0 1px 0 rgba(255,255,255,.38)!important;
}
:is(.primary,.btn-primary,.destination-accept,.traffic-accept,.nav-alt-accept,.resume-trip-continue,.guest-limit-primary,.sheet-submit,.risk-submit,.know-more,.auth-choice.primary,.auth-button.email,.route-actions .primary):hover{
  filter:saturate(1.03) brightness(1.015)!important;
  box-shadow:0 15px 34px rgba(217,112,63,.27),inset 0 1px 0 rgba(255,255,255,.44)!important;
}
:is(.secondary,.btn-ghost,.destination-edit,.traffic-dismiss,.guest-limit-secondary,.toggle-user,.mini-btn,.admin-back,.risk-back){
  background:rgba(255,255,255,.94)!important;color:var(--v171-ink)!important;border-color:var(--v171-line)!important;
}

/* Warm all segmented/selected states, toggles and active chips. */
:is(.segment button.active,.travel button.active,.style-choice:has(input:checked),.ob-option.active,.pref input:checked+label,.choice input:checked+label,.planner-preset.active,.nearby-service.active){
  background:#FFF3E9!important;color:#A8512C!important;border-color:#FFD5BC!important;box-shadow:0 5px 14px rgba(217,112,63,.08)!important;
}
.switch input:checked+span,.switch input:checked+.slider{background:linear-gradient(135deg,var(--v171-light),var(--v171-primary))!important}

/* Common cards: slightly less flat, without changing page structure. */
:is(.search-card,.sheet,.destination-confirm,.prefs-drawer,.safety-drawer,.account-drawer,.options-drawer,.route-card,.resume-trip-card,.immersive-choice-card,.guest-limit-card,.route-panel,.risk-card,.users-surface,.admin-modal-card){
  border-color:var(--v171-line)!important;
}
:is(.search-card,.sheet,.destination-confirm,.prefs-drawer,.safety-drawer,.account-drawer,.options-drawer,.resume-trip-card,.immersive-choice-card,.guest-limit-card){
  box-shadow:var(--v171-shadow)!important;
}

/* Start navigation: compact premium CTA, still uses the existing structure/IDs. */
#startTripBtn.start-trip-cta{
  min-height:60px!important;
  border-radius:19px!important;
  background:
    radial-gradient(circle at 15% -20%,rgba(255,255,255,.52),transparent 34%),
    linear-gradient(135deg,#FFC39B 0%,#F59A62 49%,#D9703F 100%)!important;
  box-shadow:0 14px 31px rgba(217,112,63,.27),inset 0 1px 0 rgba(255,255,255,.54),inset 0 -1px 0 rgba(111,49,23,.10)!important;
}
#startTripBtn .start-trip-icon{background:linear-gradient(155deg,#3B3530,#27231F)!important;box-shadow:0 7px 16px rgba(39,35,31,.19),inset 0 1px 0 rgba(255,255,255,.13)!important}
#startTripBtn .start-trip-arrow{background:rgba(255,251,242,.18)!important;border-color:rgba(255,255,255,.22)!important}

/* Mapbox destination marker.
   IMPORTANT: never set transform on .route-marker.destination itself.
   Mapbox owns that transform for screen positioning; overriding it is what sent the marker to the left corner. */
.mapboxgl-marker.route-marker.destination{
  width:42px!important;
  height:50px!important;
  position:absolute!important;
  display:block!important;
  overflow:visible!important;
  pointer-events:none!important;
  filter:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  will-change:transform!important;
}
.mapboxgl-marker.route-marker.destination>.arrival-visual{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  transform-origin:50% 100%!important;
  pointer-events:none!important;
}
.mapboxgl-marker.route-marker.destination .arrival-ground{
  position:absolute!important;
  left:50%!important;
  bottom:1px!important;
  width:24px!important;
  height:6px!important;
  transform:translateX(-50%)!important;
  border-radius:50%!important;
  background:rgba(39,35,31,.20)!important;
  filter:blur(3.5px)!important;
  opacity:.72!important;
}
.mapboxgl-marker.route-marker.destination .arrival-bubble{
  position:absolute!important;
  left:50%!important;
  top:0!important;
  width:38px!important;
  height:38px!important;
  transform:translateX(-50%)!important;
  border-radius:50%!important;
  background:linear-gradient(150deg,#4A433D 0%,#2D2925 46%,#211E1B 100%)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 9px 18px rgba(39,35,31,.22),0 3px 7px rgba(217,112,63,.12),inset 0 1px 0 rgba(255,255,255,.20),inset 0 -2px 5px rgba(0,0,0,.22)!important;
}
.mapboxgl-marker.route-marker.destination .arrival-bubble:after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  bottom:-8px!important;
  width:14px!important;
  height:14px!important;
  transform:translateX(-50%) rotate(45deg)!important;
  border-radius:2px 0 4px 0!important;
  background:linear-gradient(135deg,#302B27 38%,#211E1B 100%)!important;
  border-right:1px solid rgba(255,255,255,.10)!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  box-shadow:4px 4px 8px rgba(39,35,31,.10)!important;
  z-index:-1!important;
}
.mapboxgl-marker.route-marker.destination .arrival-ring{
  position:absolute!important;
  inset:3px!important;
  border-radius:50%!important;
  padding:3px!important;
  background:linear-gradient(145deg,#FFE1CC 0%,#FFC39B 20%,#F59A62 57%,#D9703F 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.70),0 1px 4px rgba(217,112,63,.18)!important;
}
.mapboxgl-marker.route-marker.destination .arrival-checkers{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
  border-radius:50%!important;
  background-color:#FFFBF2!important;
  background-image:conic-gradient(#27231F 25%,#FFFBF2 0 50%,#27231F 0 75%,#FFFBF2 0)!important;
  background-size:9px 9px!important;
  background-position:center!important;
  box-shadow:inset 0 0 0 1px rgba(39,35,31,.48),inset 0 -6px 8px rgba(39,35,31,.13),inset 0 6px 9px rgba(255,255,255,.30)!important;
  transform:rotate(-3deg)!important;
}
.mapboxgl-marker.route-marker.destination .arrival-checkers:before{
  content:""!important;position:absolute!important;inset:-3px!important;border-radius:50%!important;
  background:linear-gradient(145deg,rgba(255,255,255,.68) 0 19%,transparent 39% 64%,rgba(39,35,31,.11) 100%)!important;
}
.mapboxgl-marker.route-marker.destination .arrival-checkers:after{
  content:""!important;position:absolute!important;left:7px!important;right:7px!important;top:4px!important;height:5px!important;border-radius:50%!important;background:rgba(255,255,255,.30)!important;filter:blur(1.5px)!important;
}
.body-nav .mapboxgl-marker.route-marker.destination>.arrival-visual{transform:scale(.94)!important}

/* Standalone shared-route destination uses the same visual but is not a Mapbox route-marker. */
.marker.dest{
  width:42px!important;height:50px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;
}
.marker.dest>.arrival-visual{position:absolute!important;inset:0!important;display:block!important}
.marker.dest .arrival-ground{position:absolute!important;left:50%!important;bottom:1px!important;width:24px!important;height:6px!important;transform:translateX(-50%)!important;border-radius:50%!important;background:rgba(39,35,31,.20)!important;filter:blur(3.5px)!important}
.marker.dest .arrival-bubble{position:absolute!important;left:50%!important;top:0!important;width:38px!important;height:38px!important;transform:translateX(-50%)!important;border-radius:50%!important;background:linear-gradient(150deg,#4A433D,#211E1B)!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:0 9px 18px rgba(39,35,31,.22),inset 0 1px 0 rgba(255,255,255,.20)!important}
.marker.dest .arrival-bubble:after{content:""!important;position:absolute!important;left:50%!important;bottom:-8px!important;width:14px!important;height:14px!important;transform:translateX(-50%) rotate(45deg)!important;background:#27231F!important;border-radius:2px!important;z-index:-1!important}
.marker.dest .arrival-ring{position:absolute!important;inset:3px!important;border-radius:50%!important;padding:3px!important;background:linear-gradient(145deg,#FFE1CC,#FFC39B 22%,#F59A62 58%,#D9703F)!important}
.marker.dest .arrival-checkers{display:block!important;width:100%!important;height:100%!important;border-radius:50%!important;background:conic-gradient(#27231F 25%,#FFFBF2 0 50%,#27231F 0 75%,#FFFBF2 0) center/9px 9px!important;box-shadow:inset 0 0 0 1px rgba(39,35,31,.45),inset 0 6px 9px rgba(255,255,255,.28)!important;transform:rotate(-3deg)!important}
.marker.dest:before,.marker.dest:after{content:none!important}

/* Administrative screens that were most visibly left behind. */
.admin-users-v76 .role-admin,.risk-eyebrow,.admin-modal-head small{color:var(--v171-deep)!important}
.admin-users-v76 .know-more,.risk-submit{background:linear-gradient(135deg,var(--v171-light),var(--v171-primary) 52%,var(--v171-deep))!important}
.admin-users-v76 .state,.zone-pill{border-color:#F0DCCF!important}
.policy-note,.route-note{background:#FFF4EC!important;border-color:#FFE0CD!important;color:#795A48!important}

@media(max-width:640px){
  .mapboxgl-marker.route-marker.destination{width:40px!important;height:48px!important}
  .mapboxgl-marker.route-marker.destination>.arrival-visual{transform:scale(.94)!important}
  .body-nav .mapboxgl-marker.route-marker.destination>.arrival-visual{transform:scale(.90)!important}
  #startTripBtn.start-trip-cta{min-height:58px!important;border-radius:18px!important}
}