p {
  margin-top: 5px;
  margin-bottom: 10px;
}

.star-rating {
    display: flex;
  }
.star {
  font-size: 2em;
  cursor: pointer;
  color: lightgray;
}
.star-filled {
  color: gold;
}

.top-bar{
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 500;
  max-width: 66%;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  padding: 6px;
  gap: 6px;
}

.top-bar .v-select {
  width: fit-content; 
  max-width: fit-content; 
  min-width: 56px;
}

.top-bar .v-field__input {
  flex-wrap: nowrap;
  overflow: hidden;
}

.top-bar .cats-combo-notext .v-select__selection {
  display: none;
}
.top-bar .cats-combo-notext .v-field {
  display: flex;
  overflow: hidden;
}
.top-bar .cats-combo-notext .v-field__input {
  padding: 0px;
}
.top-bar .cats-combo-notext .v-field__prepend-inner {
  min-width: 26px;
  overflow: hidden;
}

.top-bar .prepend-icon-dimmed .v-field__prepend-inner i{
  opacity: 0.3;
}

.leaflet-div-icon{ /*map icon outer container*/
  background: unset;
  border: none;
}
.leaflet-control-zoom {
  top: 60px;
}
.leaflet-control-scale {
	display: inline-block;
	background: rgba(255, 255, 255, 0.8);
	padding: 1px;
	padding-left: 4px;
	padding-right: 4px;
	margin: 0;
}
.leaflet-control-scale-attribution {
  line-height: 1;
}
.leaflet-control-scale-line {
  line-height: 0.6;
  background: unset;
}
.leaflet-right .leaflet-control {
	margin-right: 0px;
}
.leaflet-bottom .leaflet-control {
	margin-bottom: 0px;
}
.leaflet-bottom .leaflet-control-scale {
  margin: 0px;
}
.poi-marker{ /*map icon inner container*/
  width: max-content;
  color: #0f4f98; /* Text color */
  line-height: normal;
  filter: 
    drop-shadow(1px  1px  0px rgba(255, 255, 255, 0.9)) 
    drop-shadow(-1px -1px 0px rgba(255, 255, 255, 0.9)) 
    drop-shadow(-1px  1px 0px rgba(255, 255, 255, 0.9)) 
    drop-shadow(1px -1px  0px rgba(255, 255, 255, 0.9)); /*Outline effect */

  display: flex;
  align-items: normal;
}
.poi-marker:has(img) {
  align-items: center;
}
.poi-marker > img {
  position: relative;
  width: 25px; 
  height: 41px;
}
.poi-marker > div {
  position: relative;
  max-height: 2lh;
  text-overflow: ellipsis;
  max-width: 130px;
  font-size: 14px;
  font-weight: 600;
  margin-left: 5px;
}
.poi-marker .name {
  margin-right: 3px;
}
.poi-marker .attr-icons {
  display: inline-block;
  vertical-align: top;
}
.poi-marker .attr-icons span {
  height: 15px;
  width: 15px;
  display: inline-block;
  margin: 1px;
}
.poi-marker .poistars{
  white-space: nowrap;
  color: #cbb400;
  font-size: 80%;
}
.marker-cluster div {
  color: white;
	background-color: rgb(8, 84, 146, 0.7);
  width: 25px;
  height: 25px;
}
.marker-cluster span {
  line-height: 25px;
}
.marker-cluster-icons {
  font-size: 80%; /* icon size */
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  width: 30px;
  top: 6px;
  transform: translate(-8px, -40%);
  color: #0f4f98; /* Icon color */
  filter: 
    drop-shadow(1px  1px  0px rgba(255, 255, 255, 0.9)) 
    drop-shadow(-1px -1px 0px rgba(255, 255, 255, 0.9)) 
    drop-shadow(-1px  1px 0px rgba(255, 255, 255, 0.9)) 
    drop-shadow(1px -1px  0px rgba(255, 255, 255, 0.9)); /*Outline effect */
}
.marker-cluster-icons i {
  margin: auto;
}

/* --- Styles for Plan POI Markers --- */
.poi-marker-container {
  display: flex;          /* Arrange icon and label side-by-side */
  align-items: center;    /* Vertically center icon and label */
  gap: 4px;
}

.poi-marker-container > i {
  font-size: 18px;
  color: #333;
  line-height: 1;         /* Ensure icon aligns well */
}

.poi-marker-container > .poi-label {
  font-size: 10pt;
  font-weight: 600;
  color: black;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}
/* --- End Plan POI Markers --- */

.info.legend {
  margin-bottom: 16px;
  filter: 
    drop-shadow(1px  1px  0px rgba(255, 255, 255, 0.8)) 
    drop-shadow(-1px -1px 0px rgba(255, 255, 255, 0.8)) 
    drop-shadow(-1px  1px 0px rgba(255, 255, 255, 0.8)) 
    drop-shadow(1px -1px  0px rgba(255, 255, 255, 0.8)); /*Outline effect */
}

.legend-hidden {
  display: none !important; /* Hide legend when this class is applied */
}

.chips-container{
  padding-top:5px;
  padding-bottom: 5px;
}
.v-slide-group.chips-inline{
  display: inline-block;
  padding: 0px;
}

.v-snackbar__content span {
  white-space: wrap;
}
.v-snackbar__wrapper {
  min-width: unset;
}
/* limit snackbar width to screen width */
@media (max-width: 672px) {
  .v-snackbar__wrapper {
    max-width: 100%;
  }
}

/* Delete target for PlanRouteStateMachine */
.leaflet-delete-pane {
  /* Ensures pane is interactive but doesn't block map clicks elsewhere */
  pointer-events: none; 
}

.leaflet-delete-target {
  position: absolute;
  bottom: 20px; /* Position above FAB buttons */
  left: 10px;
  width: 60px;
  height: 60px;
  background-color: rgb(255, 255, 255, 0.8); /* Semi-transparent grey */
  border: 2px solid #333;
  border-radius: 8px; /* Rounded corners */
  text-align: center;
  line-height: 60px; /* Vertically center icon */
  font-family: Arial, sans-serif;
  font-size: 24px; /* Adjust icon size */
  cursor: default;
  pointer-events: auto; /* Make the target itself interactive */
  z-index: 1; /* Ensure it's above other pane content if needed */
  display: none; /* Hidden by default */
  color: #333;
}

.leaflet-delete-target.highlight {
  background-color: rgba(255, 85, 85, 0.9);
  border-color: #cc0000;
  color: #fff;
}

.leaflet-delete-target::before {
    content: '🗑️';
}

.delete-target-tooltip{
  left: 120%; 
  position: absolute;
  width: unset;
  white-space: nowrap;
  top: 12px;
  background-color: rgba(255,255,255,0.8);
  display: initial;
  padding: 8px;
  line-height: 1;
  border-radius: 8px;
}

.v-snackbar__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.ride-plan-list{
  padding-left: 5%;
  padding-right: 5%;
}

.list-accom-leg div {
  margin-top: 6px;
  margin-bottom: 0px;
}

.list-accom-leg div > span {
  color: rgb(0, 0, 0);
}

/* Toggle location viewer position & map height by screen width */
.location-viewer, 
.road-viewer,
.plan-viewer{
  position: absolute;
  top: 0px;
  right: 0%;
  width: 33.33333%;
  height: 100%;
  overflow: scroll;
  z-index: 100;
  background: white;
}

.circle-button-container {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
}
.circle-button {
  max-width: 100px;
  margin: 5px;
  margin-left: 15px;
  margin-right: 15px;
  color: #1a73e8;
}
.circle-button-red {
  color: #CA0000;
}
.circle-button-outline {
  margin: 6px;
  width: 36px;
  display: inline-flex;
  justify-content: center;
  border-radius: 36px;
  height: 36px;
  border: 1px solid #1a73e8;
  align-items: center;
}
.circle-button-red .circle-button-outline{
  border-color: #CA0000;
}
.circle-button:hover .circle-button-outline {
  box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.08);
  background-color: #f8f8f8;
}
.circle-button:active .circle-button-outline {
  box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.16);
  background-color: #f4f4f4;
}
.circle-button-icon {
  font-size: 18px;
}

#map-outer{
  height: 100%;
  width: 100%;
}

#map-outer:has(~ .location-viewer:not([style*="display: none"])),
#map-outer:has(~ .road-viewer:not([style*="display: none"])),
#map-outer:has(~ .plan-viewer:not([style*="display: none"])) {
  width: 66.6666%;
}

@media (max-width: 700px) {
  .ride-plan-list{
    padding-left: 0px;
    padding-right: 0px;
  }

  .location-viewer,
  .road-viewer,
  .plan-viewer{
    top: 50%;
    padding-top: unset;
    width: 100%;
    left: 0%;
    height: unset;
    overflow: unset;
    min-height: 50%;
  }
  .plan-viewer{
    top: 86%;
    min-height: 14%;
  }
  #map-outer:has(~ .location-viewer:not([style*="display: none"])),
  #map-outer:has(~ .road-viewer:not([style*="display: none"])){
    height: 50%;
    width: 100%;
  }
  #map-outer:has(~ .plan-viewer:not([style*="display: none"])) {
    height: 86%;
    width: 100%;
  }

  .top-bar {
    max-width:100%;
  }
  .top-bar .v-select {
    flex-basis: 15%;
  }
  .top-bar  .v-select__menu-icon {
    margin-inline-start: 0px;
  }
  .top-bar .v-field.v-field--appended {
    --v-field-padding-end: 3px;
  }
  .top-bar .v-field.v-field--prepended {
    --v-field-padding-start: 3px;
  }
  .top-bar .v-field--appended {
    padding-inline-end: 6px;
  }
  .top-bar .v-field--prepended {
    padding-inline-start: 10px;
  }
  .top-bar .v-select__menu-icon {
    left: -4px;
  }
}

/* Dialoge box full screen on mobile */
@media (max-width: 1024px) {
  .v-dialog > .v-overlay__content {
    margin: 0px;
    max-height: 100%;
    width: 100%;
  }
  .v-stepper-item{
    padding: 1rem;
  }
}

/* Completely hide "previous" button in login stepper */
.login-form .v-stepper-actions.v-stepper-actions :first-child.v-btn--disabled{
  visibility: hidden; /*Hide but occupy space*/
}

div:has(> #searchWidgetTabs) { /*Remove non-consentual padding from parent element*/
  padding: 0 !important;
}

.photo-slider-container {
  position: relative;
  clear: both;
}
.photo-slider {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.photo-slider::-webkit-scrollbar {
  display: none;
}
.photo-slider-container .slider-chevron {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.7);
}
.photo-slider-container .left-chevron {
  left: -20px;
  height: 60px;
}
.photo-slider-container .right-chevron {
  right: -20px;
  height: 60px;
}

.ico-fuel-91 {
  width: 100%; 
  height: 100%;
  background-image: url("/img/ico-fuel-91.svg");
  background-size: cover; 
}

.ico-fuel-95 {
  width: 100%; 
  height: 100%;
  background-image: url("/img/ico-fuel-95.svg");
  background-size: cover; 
}

.ico-fuel-98 {
  width: 100%; 
  height: 100%;
  background-image: url("/img/ico-fuel-98.svg");
  background-size: cover; 
}

.ico-fuel-100 {
  width: 100%; 
  height: 100%;
  background-image: url("/img/ico-fuel-100.svg");
  background-size: cover; 
}

.highlighted-road {
  filter: drop-shadow(0px 0px 5px rgba(255, 255, 0, 0.5)) drop-shadow(0px 0px 3px rgba(255, 255, 0, 0.7)) ;
}

/* Highlight effect for selected Plan POIs */
.plan-item-highlight .poi-marker {
  filter: 
    drop-shadow(1px  1px  0px rgba(255, 255, 255, 0.9)) /* White outline effect */
    drop-shadow(-1px -1px 0px rgba(255, 255, 255, 0.9)) 
    drop-shadow(-1px  1px 0px rgba(255, 255, 255, 0.9)) 
    drop-shadow(1px -1px  0px rgba(255, 255, 255, 0.9))
    drop-shadow(0px 0px 4px rgba(255, 255, 0, 0.9))  /* Yellow glow */
    drop-shadow(0px 0px 6px rgba(255, 255, 0, 0.9)); 
}

.photo-marker-container {
    width: 40px;
    height: 40px;
    overflow: hidden;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.photo-thumbnail {
    width: 100% !important;
    height: 100%;
    object-fit: cover;
}

/* PhotoSwipe custom caption styles */
.pswp__custom-caption {
  background: rgba(0, 0, 0, 0.7);
  font-size: 14px;
  color: #fff;
  width: calc(100% - 32px);
  max-width: 400px;
  padding: 8px 16px;
  border-radius: 4px;
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  text-align: center;
  z-index: 1000;
}

.hidden-caption-content {
  display: none;
}

/* Install Banner Styles */
.install-banner {
  z-index: 1500;
}

.install-banner .v-snackbar__content {
  font-size: 1rem;
  line-height: 1.5;
}

.install-banner ol {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding-left: 1.5rem;
}

.install-banner li {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}

.install-banner .v-icon {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.install-banner .v-btn {
  margin-top: 0.5rem;
}

.v-list-item__prepend:has(> .v-avatar){
  align-self: start;
  margin-top: 6px;
}