/* Only the mobile service catalogue opts in; desktop and provider views do not.
   Width stays unchanged; the card design uses its own vertical sizing unit. */
body[data-mobile-service-panel] #routePanel {
  height: var(--route-panel-height, 42dvh);
}
body[data-mobile-service-panel] #routePanel #mapContainer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  overflow: hidden;
}
body[data-mobile-service-panel] #routePanel .service-route-options {
  bottom: 83%;
    left: 0dvw;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 98dvw;
    height: 10dvh;
    min-height: 10dvh;
  /*top: 3px;
  right: 2.2%;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 6px;*/
  border-radius: 50%;
  border: 1px solid #b59a60;
  color: #f0d79e;
  background: linear-gradient(180deg, #1d3c48 0%, #132b38 100%);
  box-shadow: 0 -2px 8px #0003, inset 0 1px 0 #f0d79e18;
}
body[data-mobile-service-panel] #routePanel .service-route-options__content {
  position: absolute;
  bottom: 1px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}
body[data-mobile-service-panel] #routePanel .service-route-options__label {
  font: 600 14px/1.3 system-ui, sans-serif;
  white-space: nowrap;
}
body[data-mobile-service-panel] #routePanel .service-route-options svg {
  width: 20px;
  height: 20px;
  margin-top: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
body[data-mobile-service-panel] #routePanel .service-route-options:focus-visible {
  outline: 2px solid #f0d79e;
  outline-offset: 2px;
}
body[data-mobile-service-panel][data-category="PitStopTaxi"] #dynamic-form .service-options-trigger:disabled {
  opacity: .4;
  cursor: default;
  box-shadow: none;
}
body[data-mobile-service-panel] #bottomSheet.service-form-covered {
  visibility: hidden !important;
  pointer-events: none;
}
body[data-mobile-service-panel] #bottomSheet[data-panel-state]:not([data-panel-state="ready"]) > :not(.service-panel-status) {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none;
}
/* The shared transition:all rule must not animate visibility or the geometry
   of controls from the previous service while a new form is being prepared. */
body[data-mobile-service-panel] #bottomSheet[data-panel-state]:not([data-panel-state="ready"]) > :not(.service-panel-status),
body[data-mobile-service-panel] #bottomSheet[data-panel-state]:not([data-panel-state="ready"]) > :not(.service-panel-status) * {
  visibility: hidden !important;
  transition: none !important;
  animation: none !important;
}
body[data-mobile-service-panel] #bottomSheet :is(button, input, select, textarea) {
  transition-property: color, background-color, border-color, box-shadow !important;
}
body[data-mobile-service-panel] .service-panel-status {
  position: absolute;
  top: 35%;
  left: 10%;
  right: 10%;
  color: #d7e8f4;
  text-align: center;
  font-size: 14px;
}
body[data-mobile-service-panel] #bottomSheet[data-panel-state="ready"] > .service-panel-status {
  display: none;
}
body[data-mobile-service-panel] .service-panel-status button {
  margin: 8px auto;
  padding: 8px 14px;
  border: 1px solid #83cfff;
  border-radius: 14px;
  background: #10283c;
  color: #f8fbff;
}
body[data-service-panel-fit] .custom-container > .bottom-nav.combajn-bottom-nav {
  --bottom-nav-height: clamp(62px, 8dvh, 76px);
  height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
  min-height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
  padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px));
  bottom: var(--service-viewport-bottom, 0px);
}

body[data-service-panel-fit] #bottomSheet.bottom-sheet {
  box-sizing: border-box;
  left: 1%;
  right: 1%;
  width: auto;
  transition-property: transform;
  height: var(--service-sheet-height);
  max-height: none;
  bottom: calc( var(--service-viewport-bottom, 0px));
  padding-bottom: 0;
}

body[data-service-panel-fit] #bottomSheet[data-panel-layout] #dynamic-form:is(.taxi-panel-form-v2, .bus-panel-form, .shopping-panel-form) {
  top: var(--service-form-top);
  bottom: var(--service-form-bottom);
  height: auto;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
}

body[data-service-panel-fit] #bottomSheet[data-panel-layout] #driverFilterSwiper {
  top: var(--service-filter-top);
}

body[data-service-panel-fit] #bottomSheet[data-panel-layout] > .client-panel-fixed-action {
  top: var(--service-action-top);
}

body[data-service-panel-fit] #servicesContainer {
  --combajn-native-vh: var(--service-card-vh);
}

body[data-service-panel-fit] #servicesContainer > .DriverCardsSwiper {
  position: absolute;
  top: var(--service-card-top);
  bottom: auto;
  left: 50%;
  margin: 0;
  width: 90dvw !important;
  max-width: 90dvw !important;
  transform: translateX(-50%);
  height: var(--service-card-height) !important;
  min-height: 0 !important;
  max-height: var(--service-card-height) !important;
}

body[data-service-panel-fit] #servicesContainer .DriverCardsSwiper > .swiper-wrapper,
body[data-service-panel-fit] #servicesContainer .DriverCardsSwiper .DriverCardsSwiper__slide {
  height: var(--service-card-height) !important;
  min-height: var(--service-card-height) !important;
  max-height: var(--service-card-height) !important;
}

/* Main transport cards: preserve the artwork grid while anchoring controls. */
body[data-service-panel-fit] #servicesContainer {
  --service-order-height: clamp(34px, calc(6 * var(--service-card-vh)), 54px);
  --service-order-gap: 6px;
}

body[data-service-panel-fit] #servicesContainer .TaxiMainCardV2__header { grid-row: 1; }
body[data-service-panel-fit] #servicesContainer .TaxiMainCardV2__hero { grid-row: 2; }
body[data-service-panel-fit] #servicesContainer .TaxiMainCardV2__visualSpace { grid-row: 3; }
body[data-service-panel-fit] #servicesContainer .TaxiMainCardV2__benefits { grid-row: 6; }

body[data-service-panel-fit] #servicesContainer :is(.TaxiMainCardV2__cta, .BusMainCardV2__cta, .ShoppingMainCard__cta) {
  position: absolute;
  grid-area: auto;
  top: auto;
  bottom: var(--service-card-controls-bottom, 4px);
  left: 3%;
  right: 3%;
  width: auto;
  height: var(--service-order-height);
  margin: 0;
}
body[data-service-panel-fit] #servicesContainer :is(.TaxiMainCardV2__orderSlider, .BusMainCardV2__orderSlider, .ShoppingMainCard__orderSlider) {
  width: 100% !important;
  top: 0;
  min-height: 0;
}
body[data-service-panel-fit] #servicesContainer :is(.TaxiMainCardV2__orderSlider, .BusMainCardV2__orderSlider, .ShoppingMainCard__orderSlider) .slider-handle {
  height: calc(var(--service-order-height) - 6px);
  width: calc(var(--service-order-height) - 6px);
}
body[data-service-panel-fit] #servicesContainer :is(.TaxiMainCardV2__metrics, .BusMainCardV2__metrics, .ShoppingMainCard__metrics) {
  position: absolute;
  grid-area: auto;
  /*top: auto;*/
  /*bottom: calc(var(--service-card-controls-bottom, 4px) + var(--service-order-height) + var(--service-order-gap));*/
  left: 5%;
  right: 5%;
  width: auto;
  margin: 0;
}
body[data-service-panel-fit] #servicesContainer .BusMainCardV2__route {
  position: absolute;
  grid-area: auto;
  /*top: auto;
  bottom: calc(var(--service-card-controls-bottom, 4px) + var(--service-order-height) + 2 * var(--service-order-gap) + 5 * var(--service-card-vh));*/
  left: 5%;
  right: 5%;
  width: auto;
  margin: 0;
}

/* Address rows have a legacy stacking level; keep the swap control above them. */
body[data-service-panel-fit] #bottomSheet .taxi-route-swap {
  z-index: 3;
}

/* Shared compact client controls. Mobile catalogue only; desktop stays separate. */
body[data-mobile-service-panel][data-service-panel-fit] #bottomSheet[data-panel-layout] #dynamic-form:is(.taxi-panel-form-v2, .bus-panel-form, .shopping-panel-form) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  left: 6%;
  right: 6%;
  width: auto;
  margin: 0;
  padding: 0 2px 4px;
}
body[data-mobile-service-panel] #bottomSheet[data-panel-layout] #dynamic-form > :is(.taxi-route-module, .bus-route-module, .shopping-panel-fields) {
  box-sizing: border-box;
  position: relative;
  display: grid;
  grid-template-rows: repeat(2, minmax(44px, 1fr));
  flex: none;
  width: 100%;
  height: clamp(90px, 11.6dvh, 104px);
  min-height: 90px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
body[data-mobile-service-panel] #bottomSheet[data-panel-layout] #dynamic-form :is(.taxi-route-address-field, .bus-route-field, .shopping-panel-delivery) {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  height: 100%;
  grid-template-columns: 38px minmax(0, 1fr);
  padding: 3px 54px 3px 0;
}
body[data-mobile-service-panel] #bottomSheet[data-panel-layout] #dynamic-form .shopping-panel-list {
  min-height: 0;
  height: 100%;
  padding: 0 54px 0 0;
}
body[data-mobile-service-panel] #bottomSheet[data-panel-layout] #dynamic-form .shopping-panel-list .dynamic-list__open {
  height: 100%;
  min-height: 0;
}
body[data-mobile-service-panel] #bottomSheet[data-panel-layout] #dynamic-form [data-service-options-trigger] {
  position: absolute;
  display: grid;
  place-items: center;
  top: 50%;
  right: 5px;
  bottom: auto;
  width: 44px;
  min-width: 44px;
  height: 56px;
  min-height: 44px;
  padding: 0;
  margin: 0;
  transform: translateY(-50%);
  z-index: 4;
  border: 1px solid #f3bd4570;
  border-radius: 24px;
  color: #f3bd45;
  background: linear-gradient(180deg, #182027ed, #050d15ed);
  box-shadow: inset 0 0 12px #f3bd450f;
  cursor: pointer;
}
body[data-mobile-service-panel] #bottomSheet [data-service-options-trigger] svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}
body[data-mobile-service-panel] #bottomSheet[data-panel-layout] #dynamic-form > :is(.service-panel-actions, .bus-transport-actions, .taxi-schedule-fields, .shopping-schedule-fields, .bus-schedule-fields) {
  box-sizing: border-box;
  flex: none;
  height: clamp(44px, 5.4dvh, 50px);
  min-height: 44px;
  margin: 0;
}
body[data-mobile-service-panel] #bottomSheet[data-panel-layout] #dynamic-form > :is(.service-panel-actions, .bus-transport-actions) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
body[data-mobile-service-panel] #bottomSheet[data-panel-layout] #dynamic-form :is(.service-panel-action, .bus-transport-action) {
  height: 100%;
  min-height: 44px;
  min-width: 0;
}
body[data-mobile-service-panel] #bottomSheet .bus-transport-action__copy strong {
  white-space: normal;
  overflow-wrap: anywhere;
}
body[data-mobile-service-panel] #bottomSheet[data-panel-layout] #dynamic-form > [hidden] {
  display: none !important;
}
body[data-mobile-service-panel] #bottomSheet .bus-panel-status.panel-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%);
}

/* Safari zooms focused fields below 16px, changing the visible panel width.
   Keep this more specific than the Taxi preset's vw-based input font. */
body[data-mobile-service-panel][data-service-panel-fit] #bottomSheet[data-panel-layout="taxi-v2"] #dynamic-form input,
body[data-mobile-service-panel][data-service-panel-fit] #bottomSheet[data-panel-layout="taxi-v2"] #dynamic-form textarea,
body[data-mobile-service-panel][data-service-panel-fit] #bottomSheet[data-panel-layout="taxi-v2"] #dynamic-form select {
  font-size: 16px;
}

/* Keep Swiper's measured geometry independent of the card artwork and generic
   .swiper-slide rules. These apply only to the mobile service catalogue. */
body[data-mobile-service-panel] #servicesContainer {
  --combajn-native-vw: 1dvw;
  min-width: 0;
}

body[data-mobile-service-panel] #servicesContainer > .DriverCardsSwiper {
  min-width: 0 !important;
  flex: none;
  box-sizing: border-box;
  overflow: hidden !important;
}

body[data-mobile-service-panel] #servicesContainer > .DriverCardsSwiper > .swiper-wrapper {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  margin: 0;
}

body[data-mobile-service-panel] #servicesContainer > .DriverCardsSwiper > .swiper-wrapper > .DriverCardsSwiper__slide {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 0 0 auto;
  padding: 0 !important;
  margin: 0 0 var(--service-card-gap, 18px) !important;
  box-sizing: border-box;
  transform: none !important;
  transition: none;
}

body[data-mobile-service-panel] #servicesContainer .DriverCardsSwiper__slide > :is(.TaxiMainCardV2, .TaxiDriverMainCardV3, .BusMainCardV2, .BusDriverMainCardV3) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}