/* Титульный блок */
.block-realmain {
  display: flex;
  flex-direction: column;
  height: fit-content;
  min-height: 100vh;
  background-color: var(--color-background-page);
}

.title-cart {
  display: block;
  position: absolute;

  top: calc(48px + 24px + 76px);

  font-size: var(--font-size-3xl);
  color: var(--color-foreground-primary);
  line-height: 110%;

  width: 620px;
  text-align: center;

  margin: 0 calc((100% - 620px) / 2);
}

.title-cart .blue-title {
  color: var(--color-foreground-accent-blue);
}

.cart-block {
  background-image: url("../img/terminals/cart.svg");
  width: 82.891vw;
  height: 47.734vw;
  background-size: contain;

  position: relative;

  margin-top: calc(98px + 24px + 76px);

}

.cart-pin {
  position: absolute;

  top: 0;
  left: 0;

  background-image: url("../img/terminals/cart-pin.svg");
  width: 38.31px;
  height: 38.27px;
  background-size: contain;

  display: flex;
  align-items: center;
  justify-content: center;

  border: none;
  background-color: transparent !important;

  transition: background-image 0.3s ease;
}

.cart-pin.active, .cart-pin.hover {
  background-image: url("../img/terminals/cart-pin-active.svg");
}

.pin-1 {
  top: 24.609vw;
  left: 8.203vw;
}

.pin-2 {
  top: 19.844vw;
  left: 9.375vw;
}

.pin-3 {
  top: 31.563vw;
  left: 21.328vw;
}

.pin-4 {
  top: 39.063vw;
  left: 33.594vw;
}

.pin-5 {
  top: 30.703vw;
  left: 14.219vw;
}

.pin-6 {
  top: 38.047vw;
  left: 39.688vw;
}

.pin-7 {
  top: 34.453vw;
  left: 0.625vw;
}

.pin-8 {
  top: 33.438vw;
  left: 3.203vw;
}

.pin-9 {
  top: 29.922vw;
  left: 5.938vw;
}

.pin-10 {
  top: 38.359vw;
  left: 48.594vw;
}

.pin-11 {
  top: 34.063vw;
  left: 20vw;
}

.pin-12 {
  top: 39.453vw;
  left: 71.016vw;
}

.pin-13 {
  top: 36.094vw;
  left: 2.891vw;
}

.pin-14 {
  top: 27.969vw;
  left: 11.328vw;
}

.pin-15 {
  top: 35.156vw;
  left: 63.516vw;
}

.pin-16 {
  top: 36.406vw;
  left: 27.578vw;
}

.pin-17 {
  top: 32.891vw;
  left: 12.813vw;
}

.pin-18 {
  top: 31.797vw;
  left: 10.391vw;
}

.pin-19 {
  top: 34.766vw;
  left: 5.313vw;
}

.pin-20 {
  top: 40.234vw;
  left: 68.672vw;
}

.cart-pin .num {
  font-size: 14.92px;
  line-height: 125%;
  color: var(--color-background-primary);
}

.cart-info {
  display: flex;
  width: calc(30.625vw * 3 + 1.563vw * 2);
  margin: 83px auto calc(77px - 44px + 22px);

  flex-wrap: wrap;
}

.cart-info-city {
  display: flex;
  gap: 12px;
  padding: 16px 20px;

  width: 30.625vw;

  margin-right: 1.563vw;
  margin-bottom: 20px;

  border-radius: 12px;
  height: fit-content;
  cursor: pointer;

  transition: background-color 0.3s ease;
}

.cart-info-city.active, .cart-info-city.hover {
  background-color: rgba(23, 98, 186, 0.1);
}

.cart-info-city.active .cart-pin-in-block,
.cart-info-city.hover .cart-pin-in-block {
  background-image: url("../img/terminals/cart-pin-active.svg");
}

.cart-info-city:nth-child(3n) {
  margin-right: 0 !important;
}

.cart-pin-in-block {
  position: static;
  width: 60px;
  height: 57px;
}

.cart-info-text {
  display: flex;
  flex-direction: column;
  gap: 12px;

  width: calc(100% - 60px);
}

.cart-info-text-title {
  color: var(--color-foreground-primary);
  font-size: var(--font-size-lg);
  line-height: 110%;
  font-weight: 600;
}

.cart-info-text-t {
  color: var(--color-foreground-primary);
  font-size: var(--font-size-sm);
  line-height: 140%;

  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cart-info-text-t-address {
  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 12px;
}

.point {
  width: 8px;
  height: 8px;

  object-fit: contain;
}

.cart-info-text-t-address span {
    width: 100%;
}


.cart-info-text-t-address span .type {
  color: var(--color-foreground-accent-blue);
}




/* Адаптация на большие экраны (> 1280)*/
@media screen and (min-width: 1440px) {
  .title-cart {
    top: calc(61px + 24px + 78px);

    font-size: var(--font-size-4xl);
  }

  .cart-block {
    width: 1280px;
    height: 737px;

    margin-top: calc(61px + 24px + 78px);
  }

  .cart-pin {
    width: 46.21px;
    height: 46.16px;

    top: 0;
    left: 0;
  }

  .cart-pin-in-block {
    width: 60px;
    height: 57px;
  }
  
  .pin-1 {
    top: 377px;
    left: 120px;
  }

  .pin-2 {
    top: 305px;
    left: 150px;
  }

  .pin-3 {
    top: 490px;
    left: 335px;
  }
 
  .pin-4 {
    top: 605px;
    left: 515px;
  }

  .pin-5 {
    top: 470px;
    left: 221px;
  }

  .pin-6 {
    top: 578px;
    left: 620px;
  }

  .pin-7 {
    top: 532px;
    left: 5px;
  }

  .pin-8 {
    top: 515px;
    left: 50px;
  }

  .pin-9 {
    top: 465px;
    left: 95px;
  }

  .pin-10 {
    top: 585px;
    left: 750px;
  }

  .pin-11 {
    top: 527px;
    left: 315px;
  }

  .pin-12 {
    top: 610px;
    left: 1100px;
  }


  .pin-13 {
    top: 560px;
    left:40px;
  }

  .pin-14 {
    top: 435px;
    left: 171px;
  }

  .pin-15 {
    top: 543px;
    left: 980px;
  }

  .pin-16 {
    top: 565px;
    left: 430px;
  }

  .pin-17 {
    top: 500px;
    left: 190px;
  }

  .pin-18 {
    top: 487px;
    left: 151px;
  }

  .pin-19 {
    top: 540px;
    left: 80px;
  }

  .pin-20 {
    top: 625px;
    left: 1060px;
  }

  .cart-pin .num {
    font-size: var(--font-size-md);
  }

  .cart-info {
    width: calc(30.903vw * 3 + 1.389vw * 2);
    margin: 94px auto calc(90px - 44px + 22px);
  }

  .cart-info-city {
    padding: 20px;

    width: 30.903vw;
    margin-right: 1.389vw;
    gap: 16px;

    border-radius: 12px;
  }

  .cart-info-text {
    gap: 16px;
  }

  .cart-info-text-t {
    gap: 10px;
  }

}


@media screen and (min-width: 1920px) {
  .title-cart {
    top: calc(48px + 24px + 86px);

    font-size: var(--font-size-5xl);
    line-height: 105%;

    width: 834px;

    margin: 0 calc((100% - 834px) / 2);
  }

  .cart-block {
    margin-top: calc(173px + 24px + 86px);

    width: 66.667vw;
    height: 38.385vw;
  }

  .cart-pin {
    top: 0;
    left: 0;
  }

  .cart-pin-in-block {
    width: 60px;
    height: 57px;
  }  

  .pin-1 {
    top: 19.635vw;
    left: 6.25vw;
  }

  .pin-2 {
    top: 15.885vw;
    left: 7.813vw;
  }

  .pin-3 {
    top: 25.521vw;
    left: 17.448vw;
  }
 
  .pin-4 {
    top: 31.51vw;
    left: 26.823vw;
  }

  .pin-5 {
    top: 24.479vw;
    left: 11.51vw;
  }

  .pin-6 {
    top: 30.104vw;
    left: 32.292vw;
  }

  .pin-7 {
    top: 27.708vw;
    left: 0.26vw;
  }

  .pin-8 {
    top: 26.823vw;
    left: 2.604vw;
  }

  .pin-9 {
    top: 24.219vw;
    left: 4.948vw;
  }

  .pin-10 {
    top: 30.469vw;
    left: 39.063vw;
  }

  .pin-11 {
    top: 27.448vw;
    left: 16.406vw;
  }

  .pin-12 {
    top: 31.771vw;
    left: 57.292vw;
  }

  .pin-13 {
    top: 29.167vw;
    left: 2.083vw;
  }

  .pin-14 {
    top: 22.656vw;
    left: 8.906vw;
  }

  .pin-15 {
    top: 28.281vw;
    left: 51.042vw;
  }

  .pin-16 {
    top: 29.427vw;
    left: 22.396vw;
  }

  .pin-17 {
    top: 26.042vw;
    left: 9.896vw;
  }

  .pin-18 {
    top: 25.365vw;
    left: 7.865vw;
  }

  .pin-19 {
    top: 28.125vw;
    left: 4.167vw;
  }

  .pin-20 {
    top: 32.552vw;
    left: 55.208vw;
  }

  .cart-pin-in-block .num {
    font-size: var(--font-size-lg);
    line-height: 110%;
  }

  .cart-info {
    width: calc(30.573vw * 3 + 1.719vw * 2);
    margin: 108px auto calc(45px - 22px + 22px);
  }

  .cart-info-city {
    display: flex;
    padding: 24px;

    width: 30.573vw;

    margin-right: 1.719vw;
    margin-bottom: 64px;
    border-radius: 16px;

    gap: 20px;
  }

  .cart-info-text {
    gap: 24px;

    width: calc(100% - 60px);
  }

  .cart-info-text-title {
    font-size: var(--font-size-xl);
    line-height: 120%;
  }

  .cart-info-text-t {
    font-size: var(--font-size-md);
    line-height: 125%;

    gap: 16px;
  }
}



@media screen and (min-width: 2560px) {
  .cart-block {
    width: 1706.675px;
    height: 982.656px;
  }

  .cart-pin {
    top: 0;
    left: 0;
  }

  .pin-1 {
    top: 502.656px;
    left: 160px;
  }

  .pin-2 {
    top: 406.656px;
    left: 200.013px;
  }

  .pin-3 {
    top: 653.338px;
    left: 446.669px;
  }
 
  .pin-4 {
    top: 806.656px;
    left: 686.669px;
  }

  .pin-5 {
    top: 626.662px;
    left: 294.656px;
  }

  .pin-6 {
    top: 770.662px;
    left: 826.675px;
  }

  .pin-7 {
    top: 709.325px;
    left: 6.656px;
  }

  .pin-8 {
    top: 686.669px;
    left: 66.662px;
  }

  .pin-9 {
    top: 620.006px;
    left: 126.669px;
  }

  .pin-10 {
    top: 780.006px;
    left: 1000.013px;
  }

  .pin-11 {
    top: 702.669px;
    left: 419.994px;
  }

  .pin-12 {
    top: 813.338px;
    left: 1466.675px;
  }

  .pin-13 {
    top: 746.675px;
    left: 53.325px;
  }

  .pin-14 {
    top: 579.994px;
    left: 227.994px;
  }

  .pin-15 {
    top: 723.994px;
    left: 1306.675px;
  }

  .pin-16 {
    top: 753.331px;
    left: 573.338px;
  }

  .pin-17 {
    top: 666.675px;
    left: 253.338px;
  }

  .pin-18 {
    top: 649.344px;
    left: 201.344px;
  }

  .pin-19 {
    top: 720px;
    left: 106.675px;
  }

  .pin-20 {
    top: 833.331px;
    left: 1413.325px;
  }

  .cart-pin-in-block .num {
    font-size: var(--font-size-lg);
    line-height: 110%;
  }

  .cart-info {
    width: calc(782.669px * 3 + 44.006px * 2);
  }

  .cart-info-city {
    width: 782.669px;

    margin-right: 44.006px;
  }
}


/* Адаптация на малые экраны (< 1280)*/
@media screen and (max-width: 1200px) {
  /* Титульный блок */
  .block-realmain {
    display: flex;
    flex-direction: column;
    height: fit-content;
    min-height: 100vh;
  }

  .title-cart {
    top: calc(48px + 24px + 70px);
  }

  .cart-block {
    background-image: url("../img/terminals/cart.svg");
    width: 83.854vw;
    height: 48.307vw;
    background-size: contain;

    position: relative;

    margin-top: calc(166px + 24px + 76px);

  }

  .cart-pin {
    width: 23.26px;
    height: 23.24px;

    top: 0;
    left: 0;
  }

  .cart-pin-in-block {
    width: 60px;
    height: 60px;
  }

  .pin-1 {
    top: 24.74vw;
    left: 7.813vw;
  }

  .pin-2 {
    top: 20.182vw;
    left: 9.375vw;
  }

  .pin-3 {
    top: 32.292vw;
    left: 21.745vw;
  }

  .pin-4 {
    top: 40.104vw;
    left: 33.984vw;
  }
 
  .pin-5 {
    top: 31.25vw;
    left: 14.583vw;
  }

  .pin-6 {
    top: 39.323vw;
    left: 40.365vw;
  }

  .pin-7 {
    top: 34.896vw;
    left: 0.521vw;
  }

  .pin-8 {
    top: 33.724vw;
    left: 3.385vw;
  }

  .pin-9 {
    top: 30.599vw;
    left: 5.859vw;
  }

  .pin-10 {
    top: 39.453vw;
    left: 49.219vw;
  }

  .pin-11 {
    top: 34.635vw;
    left: 20.573vw;
  }

  .pin-12 {
    top: 40.104vw;
    left: 71.875vw;
  }

  .pin-13 {
    top: 36.198vw;
    left: 2.995vw;
  }

  .pin-14 {
    top: 28.646vw;
    left: 11.589vw;
  }

  .pin-15 {
    top: 35.547vw;
    left: 64.453vw;
  }

  .pin-16 {
    top: 36.979vw;
    left: 27.995vw;
  }

  .pin-17 {
    top: 33.333vw;
    left: 12.76vw;
  }

  .pin-18 {
    top: 32.292vw;
    left: 10.417vw;
  }

  .pin-19 {
    top: 35.026vw;
    left: 5.599vw;
  }

  .pin-20 {
    top: 41.016vw;
    left: 69.401vw;
  }

  .cart-pin .num {
    font-size: 9.06px;
  }

  .cart-pin-in-block .num {
    font-size: var(--font-size-md);
  }


  .cart-info {
    width: calc(45.573vw * 2 + 2.604vw);
    margin: 135px auto calc(151px - 64px + 22px);
  }

  .cart-info-city {
    flex-direction: column;

    padding: 16px;

    width: 45.573vw;

    margin-right: 2.604vw;
    margin-bottom: 32px;

    border-radius: 10px;
  }

  .cart-info-city:nth-child(3n) {
    margin-right: 2.604vw !important;
  }

  .cart-info-city:nth-child(2n) {
    margin-right: 0 !important;
  }

  .cart-info-text {
    width: 100%;
    gap: 8px;
  }

  .cart-info-text-title {
    font-size: var(--font-size-md);
    line-height: 125%;
    font-weight: 500;
  }

}

@media screen and (max-width: 800px) {
  .title-cart {
    width: 80.729vw;
    margin: 0 calc((100% - 80.729vw) / 2);
  }
}

@media screen and (max-width: 600px) {
  /* Титульный блок */
  .title-cart {
    top: calc(20px + 16px + 56px);

    font-size: var(--font-size-xl);
    line-height: 120%;

    max-width: 66vw;

    margin: 0 calc((100% - 66vw) / 2);
    position: relative;
  }

  .cart-block {
    display: none;
  }

  .cart-info {
    flex-direction: column;
    width: 88.889vw;
    margin: calc(20px + 16px + 56px + 30px) auto calc(32px - 28px + 22px);
  }
  
  .cart-info-text-t {
    gap: 10px;
  }

  .cart-info-city {
    width: 100%;

    margin-right: 0 !important;
    margin-bottom: 16px;

    gap: 10px;
  } 

  .cart-info-text {
    width: 100%;
  }

}


@media screen and (max-width: 432px) {
  /* Титульный блок */
  .title-cart {
    max-width: 302px;
    width: 302px;
    margin: 0 calc((100% - 302px) / 2);
  }

}