@-webkit-keyframes move-gradient-3colors {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(66.7%)
    }
}

@keyframes move-gradient-3colors {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(66.7%)
    }
}

@-webkit-keyframes skeletonFlare {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(200%)
    }
}

@keyframes skeletonFlare {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(200%)
    }
}

#calculator {
    align-items: center;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%
}

.section-title {
    font-size: 43px!important
}

.button-bg-gradient-4colors:before {
    background: linear-gradient(to right,var(--color-brand-blue) 0,var(--color-brand-green) 25%,var(--color-brand-blue) 50%,var(--color-brand-green) 75%,var(--color-brand-green) 100%)
}

.main {
    align-items: center;
    display: flex;
    flex-direction: column;
    max-width: var(--width-small-section);
    padding: 0 44px;
    width: 100%
}

.main .main-title {
    margin-top: 65px
}

.main .section-description {
    margin-top: 10px
}

.section-tariffs {
    margin-bottom: 50px;
    max-width: 1047px;
    width: 100%
}

.section-title {
    font-size: 43px
}

.tariffs-duration__container {
    -moz-column-gap: 10px;
    column-gap: 10px;
    display: grid;
    grid-template: "periods country currency" auto/1fr 220px 54px;
    margin-top: 30px;
    position: relative;
    width: 100%
}

.meta-warning {
    color: var(--color-section-description);
    margin-top: 30px
}

@media (max-width: 764px) {
    .meta-warning {
        margin:13px auto 0;
        max-width: 321px
    }
}

.tariffs-list-separator {
    display: none
}

.tariffs-list {
    justify-content: start!important;
    margin: 30px auto 0
}

.tariffs-item.discounts {
    background: #fff;
    outline: 9px solid #f1f4f8;
    outline-offset: -9px;
    padding-right: 17px;
    position: relative
}

.tariffs-item.discounts>svg {
    min-height: 30px;
    min-width: 30px
}

.tariffs-item {
    cursor: pointer;
    position: relative
}

.tariffs-item:hover {
    background-color: var(--color-block-bg-hover);
    outline-color: var(--color-block-bg-hover)
}

.tariffs-item h3,.tariffs-item p,.tariffs-item svg {
    position: relative;
    z-index: 10
}

.tariffs-item:before {
    background: linear-gradient(to bottom,var(--color-brand-green) 0,var(--color-brand-blue) 100%);
    border-radius: 46px;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: inherit;
    width: 100%;
    z-index: -1
}

.tariffs-item.discounts:before {
    background: linear-gradient(90deg,#fcdfc5 5.28%,#c6c5fc 104.2%)
}

.tariffs-item.discounts.tariffs-item_active {
    border: 0
}

.tariffs-item_active {
    cursor: default
}

.tariffs-item_disabled {
    cursor: not-allowed
}

.tariffs-item_active:before {
    opacity: 1;
    z-index: 5
}

.tariffs-item__title {
    position: relative;
    z-index: 10
}

.tariffs-item__text {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
}

.tariffs-item__text a {
    color: navy;
    text-decoration: underline;
    transition: .25s
}

.tariffs-item__text a:hover {
    color: #04b
}

.tariffs-item__icon {
    height: 45px;
    width: 45px
}

.tariffs-item__icon circle,.tariffs-item__icon path,.tariffs-item__icon rect {
    transition: .2s
}

.tariffs-item_active svg[data-icon="Telegram Bot"] path,.tariffs-item_active svg[data-icon="Telegram personal"] path,.tariffs-item_active svg[data-icon="WhatsApp Business API"] path:first-of-type,.tariffs-item_active svg[data-icon=Avito] circle:first-of-type,.tariffs-item_active svg[data-icon=Viber] path,.tariffs-item_active svg[data-icon=Vkontakte] path,.tariffs-item_active svg[data-icon=WhatsApp] path,.tariffs-item_active svg[data-icon=Yclients] path:not(path:first-of-type),.tariffs-item_active svg[data-icon=altegio] path,.tariffs-item_active svg[data-icon=caWhatsApp] path,.tariffs-item_active svg[data-icon=email] path,.tariffs-item_active svg[data-icon=facebook] path,.tariffs-item_active svg[data-icon=instagram] path {
    fill: var(--color-brand-green)
}

.tariffs-item_active svg[data-icon="API Only"] rect,.tariffs-item_active svg[data-icon="Telegram Bot"] rect,.tariffs-item_active svg[data-icon="Telegram personal"] rect,.tariffs-item_active svg[data-icon="WhatsApp Business API"] path:last-of-type,.tariffs-item_active svg[data-icon="WhatsApp Business API"] rect,.tariffs-item_active svg[data-icon=AmoCRM] path,.tariffs-item_active svg[data-icon=Avito] circle:not(circle:first-child),.tariffs-item_active svg[data-icon=Bitrix24] path,.tariffs-item_active svg[data-icon=Viber] rect,.tariffs-item_active svg[data-icon=Vkontakte] rect,.tariffs-item_active svg[data-icon=WhatsApp] rect,.tariffs-item_active svg[data-icon=Yclients] path:first-of-type,.tariffs-item_active svg[data-icon=altegio] rect,.tariffs-item_active svg[data-icon=caWhatsApp] rect,.tariffs-item_active svg[data-icon=email] rect,.tariffs-item_active svg[data-icon=facebook] rect,.tariffs-item_active svg[data-icon=instagram] rect {
    fill: #252b36
}

.tariffs-item_active img {
    z-index: 10;
    filter: grayscale(1);
}

.tariffs-item_active svg[data-icon="API Only"] path {
    fill: #f7dcca
}

.tariffs-item_active svg[data-icon=Avito] circle:first-of-type {
    stroke: #252b36
}

.custom-tariff-duration {
    align-items: center;
    bottom: 43px;
    display: flex;
    height: 26px;
    justify-content: space-between;
    opacity: 0;
    position: absolute;
    right: 25px;
    transition: .2s;
    width: 102px;
    z-index: -1
}

.tariffs-item_active .custom-tariff-duration {
    opacity: 1;
    z-index: 10
}

.custom-tariff-duration__next-button svg,.custom-tariff-duration__prev-button svg {
    fill: #252b36;
    height: 13px;
    width: 7px
}

.custom-tariff-duration__prev-button {
    padding: 3px 5px;
    transform: rotate(180deg)
}

.custom-tariff-duration__next-button {
    padding: 3px 5px
}

.custom-tariff-duration__input {
    background: #fff;
    border-radius: 8px;
    height: 26px;
    text-align: center;
    width: 64px
}

.tariffs-currency-container {
    grid-area: currency;
    position: relative
}

.tariffs-currency-container .tariffs-currency__current {
    align-items: center;
    background-color: var(--color-section-bg-opaque);
    border-radius: 21px;
    cursor: pointer;
    display: flex;
    height: 54px;
    justify-content: center;
    transition: var(--transition-primary);
    width: 54px
}

.tariffs-currency-container .tariffs-currency__current_disabled {
    cursor: auto
}

.tariffs-currency-container .tariffs-currency__current:not(.tariffs-currency-container .tariffs-currency__current_disabled):hover {
    background-color: #dee1e7
}

.tariffs-currency-container .tariffs-currency-list {
    background-color: #fff;
    border-radius: 21px;
    filter: drop-shadow(0 2px 16px rgba(0,0,0,.1));
    left: 0;
    overflow: hidden;
    position: absolute;
    top: calc(100% + 6px);
    width: 254px;
    z-index: 20
}

@media (max-width: 1479px) {
    .tariffs-currency-container .tariffs-currency-list {
        left:auto;
        right: 0
    }
}

@media (max-width: 1151px) {
    .tariffs-currency-container .tariffs-currency-list {
        top:74px
    }
}

.tariffs-currency-container .tariffs-currency-list .tariffs-currency-item {
    align-items: center;
    -moz-column-gap: 10px;
    column-gap: 10px;
    cursor: pointer;
    display: flex;
    height: 58px;
    padding: 0 13px;
    position: relative;
    transition: .25s;
    width: 100%
}

@media (max-width: 1479px) {
    .tariffs-currency-container .tariffs-currency-list .tariffs-currency-item {
        flex-direction:row-reverse;
        justify-content: space-between
    }
}

.tariffs-currency-container .tariffs-currency-list .tariffs-currency-item:hover {
    background-color: #f7f8fa
}

.tariffs-currency-container .tariffs-currency-list .tariffs-currency-item:first-child {
    border-radius: 21px 21px 0 0
}

.tariffs-currency-container .tariffs-currency-list .tariffs-currency-item svg {
    flex-shrink: 0
}

.tariffs-currency-container .tariffs-currency-list .tariffs-currency-item div {
    background-color: rgba(0,0,0,.1);
    bottom: 0;
    height: 1px;
    left: 13px;
    position: absolute;
    width: calc(100% - 26px)
}

.tariffs-currency-container .tariffs-currency-list .tariffs-currency-item .tariffs-currency-item__text {
    color: rgba(0,0,0,.5);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2em
}

.tariffs-currency-container .tariffs-currency-list .tariffs-currency-item_selected {
    cursor: default
}

.tariffs-currency-container .tariffs-currency-list .tariffs-currency-item_selected svg {
    opacity: .28
}

.tariffs-currency-container .tariffs-currency-list .tariffs-currency-item_selected:hover {
    background-color: initial
}

.total__cashback {
    color: rgba(37,43,54,.51);
    display: block;
    font-weight: 500;
    margin-top: 8px
}

.total__cashback strong {
    font-weight: 600
}

.tariffs-item__trash-button {
    bottom: 42px;
    cursor: pointer;
    position: absolute;
    right: 38px;
    z-index: 40
}

.tariffs-item__trash-button>img {
    display: block
}

.triffs-item-price {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-right: 2.375rem;
    margin-top: 20px
}

.calculator-container {
    background: #fff;
    border-top: 1px solid #e4e4e4;
    bottom: 0;
    color: var(--color-headers-text);
    margin: 12px 0;
    min-height: 146px;
    position: -webkit-sticky;
    position: sticky;
    width: 100%;
    z-index: 400
}

.calculator {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1300px;
    min-height: 133px;
    padding: 20px 170px
}

.total__text {
    font-size: 43px
}

.total__text strong {
    font-size: 43px;
    font-weight: 700
}

.details-list {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-right: 2rem;
    margin-top: 12px
}

.details-list-item {
    align-items: center;
    display: flex;
    gap: 10px
}

.details-list-item__icon-wrapper {
    height: 32px;
    width: 32px
}

.details-list-item__price {
    font-weight: 500
}

.details-list__item-separator {
    background: #e4e4e4;
    height: 27px;
    width: 1px
}

.calculator__pay-button {
    border-radius: 33px;
    font-weight: 500;
    height: 48px;
    margin: 10px 0;
    padding-left: 40px;
    position: relative;
    text-align: start;
    width: 157px
}

.calculator__pay-button svg {
    fill: #252b36;
    height: 13px;
    position: absolute;
    right: 20px;
    top: 18px;
    width: 7px
}

.details-list-item>svg {
    height: 26px;
    width: 26px
}

@media (max-width: 1151px) {
    .section-tariffs {
        max-width:686px
    }

    .tariffs-duration__container {
        grid-template: "periods periods" auto "country currency" auto/1fr 54px;
        row-gap: 27px
    }

    .tariffs-list {
        -moz-column-gap: 44px;
        column-gap: 44px;
        row-gap: 22px
    }
}

@media (max-width: 1050px) {
    .section-title {
        font-size:35px
    }

    .calculator {
        padding: 20px 71px 20px 44px
    }
}

@media (max-width: 790px) {
    .main {
        padding:0 30.5px
    }
}

@media (max-width: 764px) {
    .section-tariffs {
        max-width:439px
    }

    .tariffs-list {
        max-width: 321px;
        row-gap: 13px
    }

    .tariffs-list-separator {
        background: rgba(0,0,0,.2);
        display: block;
        height: 1px;
        margin: 13px auto 0;
        width: 321px
    }

    .tariffs-list:last-child {
        margin-top: 13px
    }

    .calculator {
        padding: 15px 29px 15px 44px
    }

    .total__text,.total__text strong {
        font-size: 35px
    }

    .details-list {
        gap: 10px;
        margin-top: 20px
    }

    .details-list-item {
        gap: 12px
    }

    .details-list-item__price {
        font-size: 14px
    }

    .details-list-item__icon-wrapper {
        height: 26px;
        width: 26px
    }
}

@media (max-width: 518px) {
    .tariffs-duration-item {
        width:calc(50% - 6.5px)
    }
}

@media (max-width: 499px) {
    .main {
        padding:0 16px
    }

    .section-tariffs {
        max-width: 321px
    }

    .calculator {
        flex-wrap: wrap;
        padding: 15px 29px 15px 44px;
        row-gap: 22px
    }
}

.cart .tariffs-item__icon {
    flex-shrink: 0;
    height: 20px;
    width: 19px
}

.tooltip {
    max-width: 290px;
}




.tariffs-item .tariffs-item__trash-button {
    opacity: 0;
    visibility: hidden;
    transform: scale(.9);
    transition: .35s ease;
}
.tariffs-item.tariffs-item_active .tariffs-item__trash-button {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition: .35s ease;
}


.page-calc {margin-top: 20px;padding: 0 15px;}
/* Демо блок */
.demo-block {
  background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 20px;
  color: white;
  text-align: center;
  -webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.demo-block h2 {
  font-size: 32px;
  margin-bottom: 15px;
}

.demo-block p {
  font-size: 18px;
  margin-bottom: 20px;
  opacity: 0.95;
}

.demo-block .demo-features {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 30px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 20px;
}

.demo-feature {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
}

.demo-feature svg {
  width: 24px;
  height: 24px;
}

.demo-btn {
  background: white;
  color: #19547b;
  border: none;
  padding: 15px 40px;
  border-radius: 50px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  -webkit-transition:
    -webkit-transform 0.2s,
    -webkit-box-shadow 0.2s;
  transition:
    -webkit-transform 0.2s,
    -webkit-box-shadow 0.2s;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    -webkit-transform 0.2s,
    -webkit-box-shadow 0.2s;
  margin-top: 20px;
}

.demo-btn:hover {
  -webkit-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  transform: translateY(-2px);
  -webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Секции калькулятора */
.calculator-section {
  background: white;
  border-radius: 20px;
  margin-bottom: 20px;
  padding: 20px 30px;
  border: 1px solid rgba(0, 0, 0, 0.1882352941);
  width: 100%;
  box-sizing: border-box;
  padding-top: 30px;
}

.section-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.section-number {
  background: #d6e7fd;
  color: #000;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  line-height: 1;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
}

.section-header h2 {
  font-size: 24px;
  color: #2d3748;
  margin: 0;
}

/* Категории мессенджеров */
.messenger-category {
  margin-bottom: 35px;
}

.category-title {
  font-size: 16px;
  font-weight: 600;
  color: #4a5568;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e2e8f0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.category-toggle {
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  flex-shrink: 0;
}

.category-toggle::before {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
}

.category-toggle.collapsed::before {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.category-toggle.collapsed .category-title {
  margin-bottom: 0;
}

.messenger-category.collapsed .messengers-grid,
.messenger-category.collapsed .calculator-section__tags,
.messenger-category.collapsed .info-note {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  margin: 0;
  visibility: hidden;
  padding: 0;
}

.messengers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  max-height: 5000px;
  opacity: 1;
  overflow: visible;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.calculator-section__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  max-height: 500px;
  opacity: 1;
  overflow: visible;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

/* Карточка мессенджера */
.messenger-card {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 15px;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  position: relative;
  background: white;
  background-color: #f1f4f8;
  display: flex;
  flex-direction: column;
}
.messenger-card .disclamer {
  display: block;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: rgba(255, 50, 50, 0.041);
  font-size: 12px;
  padding: 10px;
  border-radius: 10px;
}

.messenger-card:hover {
  border-color: #667eea;
  -webkit-transform: translateY(-4px);
  -ms-transform: translateY(-4px);
  transform: translateY(-4px);
  -webkit-box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
}

.messenger-card.selected {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #c5fce7),
    to(#d6e7fd)
  );
  background: linear-gradient(to bottom, #c5fce7 0, #d6e7fd 100%);
}

.messenger-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.messenger-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 28px;
  font-size: 0;
  background-color: rgba(0, 0, 0, 0.062745098);
  border-radius: 50%;
}

.messenger-image {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  object-fit: cover;
  background-color: rgba(0, 0, 0, 0.062745098);
}

.messenger-info h3 {
  margin-top: 0;
  font-size: 18px;
  color: #2d3748;
  margin-bottom: 5px;
}

.messenger-description {
  font-size: 13px;
  color: #718096;
  margin: 0;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.description-tooltip {
  position: fixed;
  max-width: 320px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #1f2937;
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  z-index: 999;
}

.description-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

.messenger-pricing {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
}

.price-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.price-original {
  text-decoration: line-through;
  color: #a0aec0;
  font-size: 16px;
}

.price-current {
  font-size: 24px;
  font-weight: 700;
  color: #000;
position: relative;
}



.discount-badge {
  background: #10b981;
  display: none;
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

/* Количество для номерных каналов */
.quantity-control {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}
.quantity-control p {
  display: block;
  font-size: 12px;
  margin: 0;
  margin-right: auto;
}

.quantity-control button {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: white;
  color: #667eea;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.quantity-control button:first-of-type {
  margin-left: 10px;
}

.quantity-control button:hover {
  background: #667eea;
  color: white;
}

.quantity-control button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.quantity-value {
  font-size: 20px;
  font-weight: 600;
  color: #2d3748;
  min-width: 40px;
  text-align: center;
}

.quantity-input {
  width: 56px;
  height: 30px;
  border: 1px solid #d0d7e2;
  border-radius: 8px;
  background: #fff;
  color: #2d3748;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  margin: 0 8px;
}

.quantity-input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.15);
}

.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity-input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Период */
.period-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.period-card {
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  padding: 25px;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  position: relative;
}

.period-card:hover {
  border-color: #667eea;
  -webkit-transform: translateY(-4px);
  -ms-transform: translateY(-4px);
  transform: translateY(-4px);
  -webkit-box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
}

.period-card.selected {
  background: linear-gradient(to bottom, #c5fce7 0, #d6e7fd 100%);
}

.period-card.selected::after {
  content: "✓";
  position: absolute;
  top: 15px;
  right: 15px;
  background: #667eea;
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-weight: bold;
}

.period-title {
  font-size: 24px;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 10px;
}

.period-discount {
  background: #10b981;
  color: white;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
}

.period-discount.no-discount {
  background: #718096;
}

/* Итоговая корзина */
.summary-section {
  background: white;
  border-radius: 20px;
  padding: 20px;
  -webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  height: fit-content;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 80px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.mobile-summary-backdrop,
.mobile-summary-close,
.mobile-summary-bar {
  display: none;
}

.summary-section.is-updating > * {
  animation: summaryFade 0.28s ease;
}

@keyframes summaryFade {
  from {
    opacity: 0.45;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.summary-header {
  font-size: 28px;
  font-weight: 700;
  color: #2d3748;
  margin-top: 0;
  margin-bottom: 10px;
  padding-bottom: 15px;
  border-bottom: 2px solid #e2e8f0;
  text-align: center;
}

.summary-header-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
}

.trial-banner {
  display: inline-block;
  background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
  color: white;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  -webkit-box-shadow: 0 4px 12px rgba(25, 84, 123, 0.2);
  box-shadow: 0 4px 12px rgba(25, 84, 123, 0.2);
  width: fit-content;
  margin: 0 auto;
}

.summary-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f7fafc;
  gap: 15px;
}



.summary-item-name {
  font-size: 14px;
  color: #4a5568;
}

.summary-item-price {
  font-size: 14px;
  font-weight: 600;
  color: #2d3748;
  text-align: right;
  min-width: 72px;
}

.summary-item__wrapper {
  max-height: 240px;
  overflow-y: auto;
  margin-bottom: 15px;
}

.summary-item__wrapper::-webkit-scrollbar {
  width: 6px;
}

.summary-item__wrapper::-webkit-scrollbar-track {
  background: #f7fafc;
  border-radius: 3px;
}

.summary-item__wrapper::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 3px;
}

.summary-item__wrapper::-webkit-scrollbar-thumb:hover {
  background: #a0aec0;
}

.summary-discount {
  border-radius: 12px;
  margin: 20px 0;
margin-top: 0;
}

.discount-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
}

.discount-row:last-child {
  margin-bottom: 0;
}

.discount-label {
  color: rgba(0, 0, 0, 0.5019607843);
  font-weight: 500;
}

.discount-value {
  font-weight: 700;
white-space: nowrap;
text-align: right;
}

.summary-total {
  padding-top: 10px;
  border-top: 2px solid #e2e8f0;
}

.total-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 5px;
    
}

.total-row:last-child {
border: 1px solid #c0dbff;
    border-radius: 12px;
    padding: 10px;
    background: #c0dbff36;
}

.total-label {
  font-size: 16px;
  color: #4a5568;
}

.total-original {
  font-size: 18px;
  color: #a0aec0;
  text-decoration: line-through;
}

.total-final {
  font-size: 24px;
  font-weight: 700;
  color: #000;
  -webkit-background-clip: text;
  background-clip: text;
}

.trial-payment-info {
  background: linear-gradient(135deg, #f0f7ff 0%, #e6f2ff 100%);
  border: 1px solid #bcd6f7;
  border-radius: 12px;
  padding: 10px;
  margin: 5px 0;
}

.trial-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 8px 0;
}

.trial-row:first-child {
  padding-bottom: 10px;
  border-bottom: 1px solid #bcd6f7;
}

.trial-label {
  font-size: 14px;
  color: #4a5568;
  font-weight: 500;
}

.trial-price {
  font-size: 14px;
  color: #4a5568;
  font-weight: 600;
}

.trial-price.trial-final {
  font-size: 16px;
  font-weight: 700;
  color: #19547b;
}

.checkout-btn {
text-align: center;
  width: 100%;
  border: none;
  padding: 18px;
  border-radius: 12px;
  font-size: 18px;
  color: #000;
  font-weight: 600;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  margin-top: 20px;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #c5fce7),
    to(#d6e7fd)
  );
  background: linear-gradient(to bottom, #c5fce7 0, #d6e7fd 100%);
}

.checkout-btn:hover {
  -webkit-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  transform: translateY(-2px);
}

.checkout-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
}

.reset-btn {
  width: 100%;
  margin-top: 10px;
  border: 1px solid #d1d9e6;
  background: #fff;
  color: #2d3748;
  border-radius: 12px;
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.reset-btn:hover {
  border-color: #aab8d0;
  background: #f7f9fc;
}

.empty-cart {
  margin-top: 20px;
  text-align: center;
  color: #a0aec0;
}

.empty-cart svg {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
  opacity: 0.5;
}

/* Адаптив */
@media (max-width: 768px) {
  .header h1 {
    font-size: 32px;
  }
  .calculator-section {
    padding: 25px;
  }
  .section-header h2 {
    font-size: 22px;
  }
  .messengers-grid {
    grid-template-columns: 1fr;
  }
  body {
    padding-bottom: 86px;
  }
  .summary-section {
    position: fixed;
    inset: 0;
    z-index: 1200;
    border-radius: 0;
    top: 0;
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    overflow-y: auto;
    transition:
      transform 0.28s ease,
      opacity 0.28s ease;
    padding: 64px 16px 24px;
    width: 100%;
    box-sizing: border-box;
    height: 100%;
    max-width: none;
    
  }
  .summary-section.mobile-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .mobile-summary-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.38);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 1150;
  }
  .mobile-summary-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
  }
  .mobile-summary-close {
    display: block;
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 1250;
    border: none;
    border-radius: 999px;
    background: #f1f4f8;
    color: #0f172a;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .mobile-summary-close.visible {
    opacity: 1;
    pointer-events: auto;
  }
  .mobile-summary-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 1100;
    border: none;
    border-radius: 14px;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    background: linear-gradient(to bottom, #c5fce7 0, #d6e7fd 100%);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
    text-align: left;
    cursor: pointer;
max-width: calc(100% - 90px);
  }
  .mobile-summary-bar__label {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
  }
  .mobile-summary-bar__price {
    font-size: 22px;
    font-weight: 700;
    color: #020617;
  }
  body.mobile-checkout-open .mobile-summary-bar {
    opacity: 0;
    pointer-events: none;
  }
  body.mobile-checkout-open {
    overflow: hidden;
  }
}
/* Дополнительные стили */
.info-note {
  background: #f1f4f8;
  padding: 15px 20px;
  border-radius: 8px;
  margin-top: 20px;
  font-size: 14px;
  color: #000;
  max-height: 500px;
  opacity: 1;
  overflow: visible;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.currency-symbol {
  font-size: 14px;
}

.calculator-section__tag {
  box-sizing: border-box;
  font-size: 14px;
  display: block;
  padding: 5px 10px;
  color: #000;
  background: #c0dbff;

  border-radius: 10px;
}

.info-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0;
}
.info-items span {
  font-size: 14px;
  display: block;
  padding: 5px 10px;
  color: #000;
  background: #c0dbff;
  border-radius: 10px;
}

.calc-wrapper {
  display: flex;
  align-items: stretch;
  gap: 30px;
}

@media(max-width:768px) {
    .calc-wrapper {
        display: flex;
        flex-direction: column;
    }
}

.calc-header h1 {
font-size: 32px;
font-weight: 500;
margin: 0;
margin-bottom: 10px;
}
.calc-header p {
margin: 0;
display: block;
font-size: 18px;
font-weight: 500px;
opacity: .9;
}
.calc-header {margin-bottom: 30px;}

.calc-main-section {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.for-free {
  display: block;
  padding: 10px 15px;
  font-size: 18px;
  font-weight: 400;
  background-color: #10b981;
  color: #fff;
  border-radius: 16px;
  box-sizing: border-box;
  width: fit-content;
  margin-bottom: 15px;
}
.for-free b {
  font-weight: 600;
}

@media(min-width:769px) {
.summary-item{
box-sizing: border-box;
    font-size: 14px;
    display: block;
    padding: 5px 10px;
    color: #000;
    background: #c0dbff;
    border-radius: 10px;
width: fit-content;
}

.summary-item-name {
font-size: 12px;}

.summary-item-price {display: none;}

.summary-item__wrapper {display: flex; flex-wrap: wrap; gap: 5px;}
}