/* Scoped tune for the Immersive Package Route Studio playlist. */
.ol-pro-route-studio .ol-pro-route-grid{
  grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr);
  align-items:stretch;
}

.ol-pro-route-studio .ol-pro-route-screen{
  isolation:isolate;
}

.ol-pro-route-studio .ol-pro-route-media{
  position:absolute;
  inset:0;
  z-index:0;
}

.ol-pro-route-studio .ol-pro-route-media img{
  will-change:opacity,transform;
}

.ol-pro-route-studio .ol-pro-route-panel{
  min-width:0;
  max-width:100%;
}

.ol-pro-route-studio .ol-pro-route-list{
  display:flex !important;
  flex-direction:column !important;
  gap:.62rem !important;
  max-height:min(650px,calc(100svh - 150px)) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:.15rem .35rem .15rem 0 !important;
  scrollbar-width:thin;
  scrollbar-color:rgba(229,197,120,.55) rgba(255,248,234,.08);
}

.ol-pro-route-studio .ol-pro-route-list::-webkit-scrollbar{
  width:8px;
}

.ol-pro-route-studio .ol-pro-route-list::-webkit-scrollbar-track{
  background:rgba(255,248,234,.08);
  border-radius:999px;
}

.ol-pro-route-studio .ol-pro-route-list::-webkit-scrollbar-thumb{
  background:rgba(229,197,120,.62);
  border-radius:999px;
}

.ol-pro-route-studio .ol-pro-route-item{
  width:100%;
  display:grid !important;
  grid-template-columns:88px minmax(0,1fr) !important;
  grid-template-areas:"thumb copy" "thumb price";
  align-items:center !important;
  min-height:96px !important;
  gap:.42rem .72rem !important;
  padding:.55rem .66rem !important;
  border-radius:1.12rem !important;
  transform:none !important;
}

.ol-pro-route-studio .ol-pro-route-item:hover,
.ol-pro-route-studio .ol-pro-route-item.is-active{
  transform:none !important;
  box-shadow:0 0 0 1px rgba(229,197,120,.36),0 16px 36px rgba(0,0,0,.22);
}

.ol-pro-route-studio .ol-pro-route-item img{
  grid-area:thumb;
  width:88px !important;
  height:78px !important;
  object-fit:cover;
  border-radius:.92rem !important;
}

.ol-pro-route-studio .ol-pro-route-item span{
  grid-area:copy;
  min-width:0 !important;
}

.ol-pro-route-studio .ol-pro-route-item small,
.ol-pro-route-studio .ol-pro-route-item strong,
.ol-pro-route-studio .ol-pro-route-item em{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ol-pro-route-studio .ol-pro-route-item small{
  line-height:1.15;
}

.ol-pro-route-studio .ol-pro-route-item strong{
  line-height:1.08;
}

.ol-pro-route-studio .ol-pro-route-item em{
  font-size:.74rem !important;
  line-height:1.2;
}

.ol-pro-route-studio .ol-pro-route-item b{
  grid-area:price;
  justify-self:start;
  max-width:100%;
  color:#e5c578;
  white-space:normal !important;
  font-size:.72rem !important;
  line-height:1.2;
}

.ol-pro-route-studio .ol-pro-route-stops{
  display:flex;
  flex-wrap:nowrap !important;
  align-items:center;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  padding:.18rem .08rem .38rem;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
}

.ol-pro-route-studio .ol-pro-route-stops::-webkit-scrollbar{
  display:none;
}

.ol-pro-route-studio .ol-pro-route-stops b{
  flex:0 0 auto;
  cursor:pointer;
  max-width:min(220px,42vw);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  scroll-snap-align:center;
  transition:background .24s ease,border-color .24s ease,color .24s ease,box-shadow .24s ease,transform .24s ease;
}

.ol-pro-route-studio .ol-pro-route-stops b.is-active{
  background:#e5c578;
  border-color:#e5c578;
  color:#102318;
  box-shadow:0 0 0 6px rgba(229,197,120,.14),0 0 30px rgba(229,197,120,.42);
  transform:translateY(-1px);
}

.ol-pro-route-studio .ol-pro-route-stops b.is-active i{
  color:#102318;
}

@media(max-width:1180px){
  .ol-pro-route-studio .ol-pro-route-grid{
    grid-template-columns:1fr;
  }

  .ol-pro-route-studio .ol-pro-route-list{
    max-height:520px !important;
  }
}

@media(max-width:720px){
  .ol-pro-route-studio .ol-pro-route-item{
    grid-template-columns:78px minmax(0,1fr) !important;
    min-height:88px !important;
  }

  .ol-pro-route-studio .ol-pro-route-item img{
    width:78px !important;
    height:72px !important;
  }

  .ol-pro-route-studio .ol-pro-route-item b{
    font-size:.68rem !important;
  }
}