/* BonKids desktop delivery UI 2.1.2. Loaded after the legacy map stylesheet. */

.sl-shipping-card {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 12px 16px;
  border: 1px solid #eadfd5;
  border-radius: 10px;
  background: #fff;
  color: #4d4d4d;
  text-align: left;
}

.sl-shipping-card.is-selected {
  border-color: #fa6900;
  box-shadow: 0 0 0 2px rgba(250, 105, 0, .12);
}

.sl-shipping-card__icon {
  flex: 0 0 70px;
  text-align: center;
}

.sl-shipping-card__icon img {
  max-width: 64px;
  max-height: 38px;
  vertical-align: middle;
}

.sl-shipping-card__body {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.35;
}

.sl-shipping-card__body strong {
  display: block;
  margin-bottom: 3px;
  font-size: 16px;
}

.sl-pickup-selected {
  overflow: hidden;
  margin-bottom: 6px;
  color: #666;
  text-overflow: ellipsis;
}

.sl-pickup-open,
.sl-pickup-result-select,
.sl-pickup-more,
#pickup_search_clear {
  box-sizing: border-box;
  border: 1px solid #fa6900;
  border-radius: 6px;
  background: #fff;
  color: #d95800;
  font: inherit;
  cursor: pointer;
}

.sl-pickup-open {
  padding: 6px 12px;
}

.sl-pickup-open:hover,
.sl-pickup-open:focus,
.sl-pickup-result-select:hover,
.sl-pickup-result-select:focus,
.sl-pickup-more:hover,
.sl-pickup-more:focus {
  background: #fa6900;
  color: #fff;
  outline: none;
}

.sl-pickup-radio {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  accent-color: #fa6900;
}

.sl-pickup-shipping-row > td {
  padding: 7px !important;
}

.sl-standard-shipping-row > td,
#deliveryTable > tbody > .shippingMods > td {
  padding: 11px 14px !important;
  border-bottom: 1px solid #eee3da;
}

#ya_maps {
  box-sizing: border-box !important;
  display: none;
  position: fixed !important;
  z-index: 10001 !important;
  top: 45%;
  left: 50% !important;
  width: 900px !important;
  max-width: calc(100vw - 40px) !important;
  height: auto !important;
  max-height: calc(100vh - 40px) !important;
  margin: 0 !important;
  padding: 0 18px 16px !important;
  transform: translate(-50%, -45%);
  overflow: hidden;
  border: 0 !important;
  border-radius: 14px;
  background: #fff !important;
  box-shadow: 0 22px 70px rgba(45, 31, 20, .28);
  color: #3f3f3f;
  opacity: 0;
}

#overlay {
  position: fixed !important;
  z-index: 10000 !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  background: rgba(29, 25, 22, .58) !important;
}

.sl-pickup-modal-title {
  box-sizing: border-box;
  width: 100% !important;
  height: auto !important;
  padding: 18px 52px 12px 2px;
  color: #333;
  font: 700 22px/1.25 "Trebuchet MS", Arial, sans-serif;
}

/*
 * ya_maps.12.09.2019.css assigns 500px to every direct DIV and 760px to
 * every nested DIV. Keep the legacy stylesheet for the old map mechanics,
 * but explicitly size the compact modal structure.
 */
#ya_maps > .sl-pickup-panels {
  box-sizing: border-box;
  width: 100% !important;
  height: 520px !important;
}

#ya_map_close {
  position: absolute;
  z-index: 5;
  top: 10px;
  right: 12px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ef5c54;
  color: #fff;
  font: 30px/34px Arial, sans-serif;
  cursor: pointer;
}

#ya_map_close:hover,
#ya_map_close:focus {
  background: #d9443c;
  outline: 3px solid rgba(239, 92, 84, .22);
}

#ya_maps > .sl-pickup-tabs {
  display: flex;
  gap: 6px;
  width: auto !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border-bottom: 1px solid #eadfd5;
  list-style: none;
}

#ya_maps > .sl-pickup-tabs > li {
  float: none !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 -1px !important;
  padding: 10px 18px !important;
  border: 1px solid transparent !important;
  border-radius: 8px 8px 0 0;
  background: transparent !important;
  color: #666 !important;
  font: 600 15px/1.2 Arial, sans-serif !important;
  cursor: pointer;
}

#ya_maps > .sl-pickup-tabs > li.active {
  border-color: #eadfd5 #eadfd5 #fff !important;
  background: #fff !important;
  color: #e45d00 !important;
}

.sl-pickup-map-panel,
.sl-pickup-list-panel,
.sl-pickup-about-panel {
  box-sizing: border-box;
  width: 100% !important;
  height: 520px !important;
  max-height: calc(100vh - 190px);
  border: 1px solid #eadfd5;
  border-radius: 9px;
  background: #fff !important;
  overflow: hidden;
}

#pickup_map {
  width: 100% !important;
  height: 100% !important;
}

#pickup_info {
  box-sizing: border-box;
  z-index: 3;
  max-width: 360px;
  max-height: 82%;
  overflow: auto;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .2);
}

.sl-pickup-list-panel {
  overflow-y: auto;
  padding: 0 14px 16px;
}

.sl-pickup-search {
  position: sticky;
  z-index: 2;
  top: 0;
  padding: 14px 0 10px;
  background: #fff;
}

.sl-pickup-search label {
  display: block;
  margin-bottom: 7px;
  color: #555;
  font-weight: 700;
}

.sl-pickup-search__row {
  display: flex;
  gap: 8px;
}

.sl-pickup-provider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
}

.sl-pickup-provider label {
  margin: 0;
  white-space: nowrap;
}

#pickup_provider_filter {
  box-sizing: border-box;
  min-width: 180px;
  height: 38px;
  padding: 6px 32px 6px 10px;
  border: 1px solid #cfc7c0;
  border-radius: 7px;
  background: #fff;
  color: #333;
  font: 14px Arial, sans-serif;
}

#pickup_provider_filter:focus {
  border-color: #fa6900;
  outline: 3px solid rgba(250, 105, 0, .12);
}

#pickup_search {
  box-sizing: border-box;
  flex: 1 1 auto;
  height: 42px;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid #cfc7c0;
  border-radius: 7px;
  background: #fff;
  color: #333;
  font: 15px Arial, sans-serif;
}

#pickup_search:focus {
  border-color: #fa6900;
  outline: 3px solid rgba(250, 105, 0, .12);
}

#pickup_search_clear {
  flex: 0 0 auto;
  padding: 0 13px;
  border-color: #cfc7c0;
  color: #666;
}

.sl-pickup-search__status {
  min-height: 18px;
  padding-top: 6px;
  color: #777;
  font-size: 12px;
}

.sl-pickup-results {
  display: grid;
  gap: 9px;
}

.sl-pickup-result {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 13px;
  border: 1px solid #e5ddd5;
  border-radius: 9px;
  background: #fffdfa;
}

.sl-pickup-result.is-selected {
  border-color: #fa6900;
  background: #fff7ef;
}

.sl-pickup-result__content {
  flex: 1 1 auto;
  min-width: 0;
}

.sl-pickup-result__content strong {
  display: inline;
  color: #333;
  font-size: 14px;
}

.sl-pickup-result__price {
  display: inline-block;
  margin-left: 8px;
  color: #d95800;
  font-weight: 700;
  white-space: nowrap;
}

.sl-pickup-result__details {
  margin-top: 5px;
  color: #74706c;
  font-size: 12px;
  line-height: 1.4;
}

.sl-pickup-result-select {
  flex: 0 0 auto;
  padding: 8px 14px;
  background: #fa6900;
  color: #fff;
}

.sl-pickup-more {
  display: block;
  margin: 14px auto 0;
  padding: 9px 24px;
}

.sl-pickup-empty {
  padding: 35px 15px;
  color: #777;
  text-align: center;
}

.sl-pickup-about-panel {
  padding: 20px;
  overflow-y: auto;
  line-height: 1.5;
}

.sl-pickup-about-panel h2 {
  margin: 0 0 14px;
  color: #333;
}

/* Keep SVG provider logos compact in the desktop "About pickup points" tab. */
@media (min-width: 761px) {
  .sl-pickup-about-panel td:first-child img {
    display: inline-block;
    width: auto !important;
    height: auto !important;
    max-width: 64px !important;
    max-height: 42px !important;
    object-fit: contain;
    vertical-align: middle;
  }
}

.sl-pickup-help {
  padding: 10px 2px 0;
  color: #777;
  font-size: 12px;
}

@media (max-width: 760px) {
  /*
   * Mobile uses the same modal markup, but its legacy stylesheet fixes
   * #ya_maps at top:0/left:0. The desktop translate(-50%, -45%) must be
   * explicitly cancelled; otherwise the whole dialog moves 45% of its own
   * height above the viewport.
   */
  #ya_maps {
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 10px 10px !important;
    transform: none !important;
    overflow: hidden !important;
    border-radius: 0;
    box-shadow: none;
  }

  /*
   * Legacy mobile CSS targets every direct DIV inside #ya_maps. Keep the
   * modal title compact and let only the panels consume the remaining space.
   */
  #ya_maps > .sl-pickup-modal-title {
    box-sizing: border-box;
    height: auto !important;
    min-height: 52px;
    padding: 14px 52px 10px 4px;
    overflow: visible !important;
  }

  #ya_maps > .sl-pickup-panels,
  .sl-pickup-map-panel,
  .sl-pickup-list-panel,
  .sl-pickup-about-panel {
    height: calc(100vh - 148px) !important;
    max-height: none !important;
  }

  /*
   * #pickup_info is absolutely positioned. Its map panel must be the
   * containing block; otherwise the description is positioned against the
   * whole dialog, covers the tabs and intercepts clicks on "Список".
   */
  .sl-pickup-map-panel {
    position: relative !important;
  }

  #pickup_info {
    top: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0;
  }

  #ya_maps > .sl-pickup-tabs > li {
    flex: 1 1 0;
    padding: 9px 7px !important;
    text-align: center;
  }

  .sl-pickup-result {
    align-items: flex-start;
    flex-direction: column;
  }

  .sl-pickup-result-select {
    width: 100%;
  }
}

@supports (height: 100dvh) {
  @media (max-width: 760px) {
    #ya_maps {
      height: 100dvh !important;
      max-height: 100dvh !important;
    }

    #ya_maps > .sl-pickup-panels,
    .sl-pickup-map-panel,
    .sl-pickup-list-panel,
    .sl-pickup-about-panel {
      height: calc(100dvh - 148px) !important;
    }
  }
}


/* Desktop pickup details: open the full description before selecting a point. */
@media (min-width: 761px) {
  .sl-pickup-list-panel {
    position: relative;
  }

  .sl-pickup-result__content {
    cursor: pointer;
  }

  .sl-pickup-result__content:focus {
    border-radius: 5px;
    outline: 3px solid rgba(250, 105, 0, .16);
  }

  .sl-pickup-desktop-detail {
    box-sizing: border-box;
    display: none;
    position: absolute;
    z-index: 6;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    padding: 18px 22px 24px;
    overflow-y: auto;
    background: #fff;
  }

  .sl-pickup-desktop-detail.is-open {
    display: block;
  }

  .sl-pickup-desktop-detail div,
  .sl-pickup-desktop-detail p,
  .sl-pickup-desktop-detail ul,
  .sl-pickup-desktop-detail ol {
    width: auto !important;
    height: auto !important;
    max-width: none !important;
  }

  .sl-pickup-desktop-detail__back,
  .sl-pickup-desktop-detail__select {
    box-sizing: border-box;
    border: 1px solid #fa6900;
    border-radius: 7px;
    font: 600 14px Arial, sans-serif;
    cursor: pointer;
  }

  .sl-pickup-desktop-detail__back {
    padding: 7px 11px;
    background: #fff;
    color: #d95800;
  }

  .sl-pickup-desktop-detail__body {
    box-sizing: border-box;
    width: 100% !important;
    height: auto !important;
    padding: 14px 4px 0;
  }

  .sl-pickup-desktop-detail__title {
    margin: 0 0 9px;
    color: #333;
    font: 700 19px/1.35 "Trebuchet MS", Arial, sans-serif;
  }

  .sl-pickup-desktop-detail__price {
    margin-bottom: 16px;
    color: #d95800;
    font-size: 16px;
    font-weight: 700;
  }

  .sl-pickup-desktop-detail__description {
    margin-bottom: 22px;
    color: #4d4d4d;
    font-size: 14px;
    line-height: 1.55;
  }

  .sl-pickup-desktop-detail__select {
    min-width: 190px;
    padding: 10px 18px;
    background: #fa6900;
    color: #fff;
  }

  .sl-pickup-desktop-detail__back:hover,
  .sl-pickup-desktop-detail__back:focus,
  .sl-pickup-desktop-detail__select:hover,
  .sl-pickup-desktop-detail__select:focus {
    background: #d95800;
    color: #fff;
    outline: none;
  }
}