/* Dark service-centers/lockers panel (points-area) shared by the
   contacts and where-to-get pages. Load this AFTER the page's own
   stylesheets; several selectors deliberately mirror or out-specify
   the light where-to-get theme that ships in redesign.css. */
.points-area {
  background: #161616;
  border-radius: 32px;
  padding: 48px;
}
.map-area {
  position: relative;
  height: 100%;
  -moz-border-radius: 32px 32px 32px 32px; /* Firefox */
  -webkit-border-radius: 32px 32px 32px 32px; /* Safari, Chrome */
  -khtml-border-radius: 32px 32px 32px 32px; /* KHTML */
  border-radius: 32px 32px 32px 32px; /* CSS3 */
  overflow: hidden;
  position: relative;
}
.search-row {
  z-index: 1;
  background: #F0F0F0;
  border: none;
  box-shadow: 0 4px 16px 0 rgba(17, 17, 17, 0.12);
  border-radius: 12px;
  position: absolute;
  padding: 14px 16px;
  width: calc(100% - 32px);
  top: 16px;
  left: 16px;
}
.search-area {
  display: flex;
}
.search-area img {
  width: 24px;
  height: 24px;
  margin-right: 16px;
}
.search-area input {
  width: 100%;
  border: none;
  background: none;
  color: #676767;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}
.search-area input::placeholder {
  color: #676767;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}
.search-area input:focus {
  outline: none;
  border: none;
  background: none;
}
img.map {
  width: 100%;
}
.points-area .nav-tabs {
  border-bottom: 1px solid #393939;
  margin-bottom: 24px;
}
.points-area .tab-content {
  overflow-y: auto;
  padding-right: 12px;
}
.points-area .tab-content::-webkit-scrollbar {
  width: 6px;
}
.points-area .tab-content::-webkit-scrollbar-thumb {
  background: #676767;
  border-radius: 3px;
}
.points-area .nav-link {
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
  color: #a2aaad;
  padding: 0 0 10px 0;
  margin: 0 32px 0 0;
  border: none;
}
.points-area .nav-link.active {
  color: #ffffff;
  background: none;
  border-bottom: 3px solid #e87722;
}
.points-area .point-row {
  position: relative;
  padding: 16px;
  margin-bottom: 16px;
  background: #393939;
  border-radius: 16px;
  box-shadow: 0px 4px 16px 0px #1111110a;
  display: flex;
  align-items: center;
}
.points-area .point-row.active {
  display: block;
}
.points-area .point-row .img {
  display: block;
  width: 100px;
  height: 100px;
  min-width: 100px;
  min-height: 100px;
  margin-right: 24px;
  transition:
    0.5s width,
    height ease;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 8px;
  overflow: hidden;
}
.points-area .point-row.active .img {
  width: 100%;
  height: 200px !important;
  margin-right: 0;
  background-position: 50%;
  margin-bottom: 16px;
  border-radius: 12px;
  overflow: hidden;
}
.points-area .point-row h2 {
  margin: 0 0 6px 0;
  padding: 0;
  color: #fefefe;
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
}
.points-area .point-row p {
  margin: 0;
  padding: 0;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #fefefe;
}
.points-area .point-row p.hours {
  color: #a2aaad;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.points-area .point-row.active .working-hours {
  display: none;
}
.points-area .point-row .custom-btn-wrapper {
  display: none;
}
.points-area .point-row.active .custom-btn-wrapper {
  display: inline-flex;
}
.points-area .point-row .additional-info {
  display: none;
}
.points-area .point-row.active .additional-info {
  display: block;
  margin-bottom: 42px;
}
.points-area .point-row .additional-text-title {
  margin-top: 16px;
  margin-bottom: 6px;
  color: #a2aaad;
}
/* expanded (see more) card: grey body lines with pin/clock icons,
   white section headings, direction button bottom-right */
.points-area .tab-content .point-row.active p {
  color: #a2aaad;
}
.points-area .tab-content .point-row.active .additional-text-title {
  color: #fefefe;
  font-weight: 600;
}
.points-area .tab-content .point-row.active .wh-text-address,
.points-area .tab-content .point-row.active .hours.wh-text-timezone {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  grid-gap: 10px;
}
.points-area .tab-content .point-row.active .has-icon {
  display: inline-block;
  min-width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.points-area .tab-content .point-row.active .wh-text-address .has-icon {
  background-image: url("../img/pin-grey.svg");
}
.points-area .tab-content .point-row.active .wh-text-timezone .has-icon {
  background-image: url("../img/clock-grey.svg");
}
.points-area .tab-content .point-row.active .custom-btn-wrapper {
  margin-left: auto;
}
/* contacts.js marks an opened row with BOTH .active and .selected;
   redesign.css styles .selected as the white where-to-get card
   (white bg, side-by-side flex, dark text, black icons) with higher
   specificity than our .active rules — undo it back to the dark design */
.points-area .tab-content .point-row.selected {
  display: block;
  grid-gap: 0;
  background-color: #393939;
}
.points-area .tab-content .point-row.selected .img {
  width: 100%;
  margin-bottom: 16px;
}
.points-area .tab-content .point-row.selected .wh-text-address,
.points-area .tab-content .point-row.selected .wh-text-timezone,
.points-area .tab-content .point-row.selected .hours {
  color: #a2aaad;
}
.points-area .tab-content .point-row.selected .additional-text-title {
  color: #fefefe;
}
.points-area .tab-content .point-row.selected .wh-text-address .has-icon {
  background-image: url("../img/pin-grey.svg");
}
.points-area .tab-content .point-row.selected .wh-text-timezone .has-icon,
.points-area .tab-content .point-row.selected .hours .has-icon {
  background-image: url("../img/clock-grey.svg");
}
.see-more {
  cursor: pointer;
  color: #e87722;
  background: none !important;
  border: none;
  padding: 0;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  transition: color .2s;
}
/* style.css gives .grey-bordered-button:hover a teal pill (!important);
   the see-more is a plain text link — no hover surface, orange goes white */
:is(.points-area, #abstract-id) .see-more:hover,
:is(.points-area, #abstract-id) .see-more:focus {
  background: none !important;
  color: #fefefe !important;
  border: none;
  box-shadow: none;
}
/* collapsed card: "See more" sits vertically centered at the right edge,
   the text box reserves room for it */
.points-area .point-row:not(.active) .wh-text-box {
  padding-right: 110px;
}
.points-area .point-row:not(.active) .see-more {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}
/* redesign.css ships a light where-to-get theme for the same
   .points-box/.points-area markup with higher-specificity selectors;
   restate the dark design at ID-level specificity (the codebase's
   :is(..., #abstract-id) hack) so it wins regardless of load order */
:is(.points-box, #abstract-id) .points-area {
  background: #161616;
  border-radius: 32px;
  padding: 48px;
}
/* register step-2 wraps the tabs in a .filters pill (sign-up.css:
   white card, border, shadow) — flatten it so the tab bar sits
   directly on the dark panel like the contacts/main-address pages */
:is(.points-area, #abstract-id) .filters {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  display: block;
  margin-bottom: 0 !important;
}
:is(.points-area, #abstract-id) .nav.nav-tabs {
  background: transparent;
  box-shadow: none;
  border: none;
  border-bottom: 1px solid #393939;
  border-radius: 0;
  height: auto;
  padding: 0;
  margin-bottom: 24px;
  grid-gap: 0;
  place-items: initial;
}
:is(.points-area, #abstract-id) .nav.nav-tabs .nav-link {
  margin: 0 32px 0 0;
  padding: 0 0 10px 0;
  background: transparent;
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
  color: #a2aaad;
  border: none;
  border-bottom: 3px solid transparent;
}
:is(.points-area, #abstract-id) .nav.nav-tabs .nav-link.active {
  color: #ffffff;
  border-bottom-color: #e87722;
}
:is(.points-area, #abstract-id) .nav.nav-tabs .nav-link span {
  color: inherit;
}
.points-area .tab-content .point-row {
  background: #393939;
  border: none;
  box-shadow: 0px 4px 16px 0px #1111110a;
}
.points-area .tab-content .point-row .img {
  transition:
    0.5s width,
    height ease;
}
.points-area .tab-content .point-row h2 {
  margin-bottom: 6px;
  color: #fefefe;
}
.points-area .tab-content .point-row p {
  color: #fefefe;
}
.points-area .tab-content .point-row p.hours,
.points-area .tab-content .point-row .working-hours {
  color: #a2aaad;
}
.points-area .tab-content .point-row .see-more {
  float: none;
  margin-left: 0;
  padding: 0;
  color: #e87722;
  line-height: 24px;
}
.ymaps-2-1-79-balloon {
  border-radius: 16px !important;
  /*overflow: hidden!important;*/
}
.ymaps-2-1-79-balloon__content {
  background-color: #f0f0f0 !important;
}
.ymaps-2-1-79-balloon__layout {
  background-color: #f0f0f0 !important;
  border-radius: 16px !important;
}
.ymaps-2-1-79-balloon__tail:after {
  background-color: #f0f0f0 !important;
}
.search-results {
  position: absolute;
  top: 65px;
  left: 0;
  background-color: #f0f0f0;
  width: 100%;
  border-radius: 16px;
  border: 1px solid #cccccc;
  margin-top: 5px;
  height: 460px;
  overflow: scroll;
}
.search-results .item {
  cursor: pointer;
  padding: 5px 5px 5px 42px;
}
.search-results .item span {
  font-size: 15px;
  line-height: 30px;
  color: #676767;
  margin-left: 25px;
}
.search-results .item:hover {
  background-color: #ffffff !important;
}
.footer {
  /*padding: 32px 16px;*/
  background: #000000;
  position: relative;
}
.carousel-control-prev {
  margin-left: 15px;
  display: none;
}
.carousel-control-next {
  margin-right: 20px;
  display: none;
}
.point-row.active .carousel-control-prev,
.point-row.active .carousel-control-next {
  display: flex;
  align-items: center;
  width: auto;
  opacity: 1;
}
.point-row.active .carousel-control-prev img,
.point-row.active .carousel-control-next img {
  width: 32px;
  height: 32px;
}
/* Bootstrap slides carousel items as 100%-wide floats shifted by
   transform — the width must stay 100% or neighbouring slides bleed
   into the frame mid-transition. Each slide fills the rounded box
   and crops via object-fit, so exactly one image shows at a time. */
.img .carousel-inner,
.img .carousel-item,
.img .carousel-item a {
  height: 100%;
}
.img .carousel-item {
  width: 100%;
}
.img .carousel-item a {
  display: block;
  width: 100%;
}
.img .carousel-item img {
  width: 100%;
  height: 100%;
  max-height: 200px !important;
  object-fit: cover;
}

.how-to-find-block {
    margin-top: 30px;
    margin-bottom: 10px;

    .how-to-find-title {
        font-size: 16px;
        line-height: 24px;
        font-weight: 600;
        color: #fefefe !important;
    }

    .how-to-find-content {
        display: flex;
        flex-wrap: nowrap;
        gap: 11px;
        margin-top: 6px;
        text-align: center;

        .how-to-find-item {
            min-width: 60px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;

            .how-to-find-img {
                width: 40px;
                gap: 10px;
                angle: 0deg;
                opacity: 1;
                border-radius: 8px;
                text-align: center;

                img {
                    width: 100%;
                    height: auto;
                }
            }

            p {
                margin-top: 6px;
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
            }
        }
    }
}

/* tablet & mobile (<992px): single column with the Map tab; the panel
   goes full-bleed and the relocated map fills the tab pane */
@media (max-width: 991.98px) {
    .points-box {
        padding: 0;
    }
    /* the panel sits 16px from the screen edges (independent of each
       page's own container padding), and its content another 16px in */
    :is(.points-box, #abstract-id) .points-area {
        padding: 0;
        border-radius: 24px;
        width: calc(100vw - 32px);
        position: relative;
        left: 50%;
        margin-left: calc(-50vw + 16px);
    }
    :is(.points-area, #abstract-id) .nav.nav-tabs {
        padding: 24px 16px 0 16px;
    }
    .points-area .tab-content {
        height: 528px !important;
        padding: 0 16px;
    }
    #map-tab-pane {
        height: 100%;
    }
    /* the relocated map fills the pane exactly — kill redesign.css's mobile
       `.lockers-area.content .map-area { margin-top: 20px }`, which pushed the
       map 20px down so its bottom slipped under the panel and forced a scroll */
    #map-tab-pane .map-area {
        margin-top: 0 !important;
    }
    /* expanded card: directions button sits left on mobile */
    .points-area .tab-content .point-row.active .custom-btn-wrapper {
        margin-left: 0;
    }
    /* the panel and its column drop their padding on mobile, so the
       inner bootstrap row's -12px gutters would poke past the viewport
       and cause a horizontal scroll — flatten the grid inside the panel;
       the tab bar and tab-content carry their own 16px side paddings */
    :is(.points-area, #abstract-id) > .row {
        margin-left: 0;
        margin-right: 0;
    }
    :is(.points-area, #abstract-id) > .row > [class*="col"] {
        padding-left: 0;
        padding-right: 0;
    }
    /* compact mobile cards (Figma): small thumb, tight type, thin tabs */
    :is(.points-area, #abstract-id) .nav.nav-tabs .nav-link {
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        margin: 0 20px 0 0;
        padding: 0 0 8px 0;
    }
    :is(.points-area, #abstract-id) .tab-content .point-row {
        padding: 8px;
        margin-bottom: 12px;
        border-radius: 12px;
    }
    :is(.points-area, #abstract-id) .tab-content .point-row h2 {
        font-size: 14px;
        font-weight: 700;
        line-height: 20px;
        margin-bottom: 2px;
    }
    :is(.points-area, #abstract-id) .tab-content .point-row p {
        font-size: 12px;
        line-height: 18px;
    }
    :is(.points-area, #abstract-id) .point-row:not(.active) .img {
        width: 56px;
        height: 56px;
        min-width: 56px;
        min-height: 56px;
        margin-right: 12px;
        border-radius: 8px;
    }
    /* "See more" vertically centered at the card's right edge */
    :is(.points-area, #abstract-id) .point-row:not(.active) .see-more {
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        font-size: 13px;
        line-height: 20px;
    }
    :is(.points-area, #abstract-id) .point-row:not(.active) .wh-text-box {
        padding-right: 78px;
    }
}

/* redesign.css's 440px block uses an :is(..., #abstract-id) specificity
   hack to zero the tab margins and bump the font to 20px; counter it */
@media (max-width: 440px) {
    :is(.points-area, #abstract-id) .nav.nav-tabs {
        padding-left: 16px;
    }
    :is(.points-area, #abstract-id) .nav.nav-tabs li .nav-link {
        margin: 0 20px 0 0;
        padding: 0 0 8px 0;
        font-size: 14px;
        line-height: 20px;
        font-weight: 600;
    }
    :is(.points-area, #abstract-id) .nav.nav-tabs li:last-child .nav-link {
        margin-right: 0;
    }
}

/* Smooth list swap between point tabs: fade + slight rise, same as the
   home price-list section. The map pane only fades — a lingering transform
   would break position:fixed elements inside the Yandex map. */
#pointsTabContent .tab-pane.fade:not(#map-tab-pane) {
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform: translateY(12px);
}
#pointsTabContent .tab-pane.fade.show:not(#map-tab-pane) {
    transform: translateY(0);
}