/* Custom CSS extracted from inline <style> blocks in b.html */

/* Hidden templates (should not show until mounted in chat) */
#lottery-template {
  display: none;
}

#lottery {
  display: none;
}

/* container for mounted form stage (outside chat bubbles) */
.form-stage {
  margin: 16px auto;
  max-width: 900px;
}

/* --- Theme palette (WhatsApp + Зеленая Планета) --- */
:root {
  --wa-dark: #075e54;
  --wa-mid: #128c7e;
  --wa-green: #25d366;
  --wa-light: #dcf8c6;
  --wa-bg: #ece5dd;
}

body {
  background: var(--wa-bg);
}

/* headers / accents */
.chat-header,
.audio-header {
  background: var(--wa-dark) !important;
}

.chat-header-container-image-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-header-container-image-left .person-name {
  color: #fff;
}

/* buttons */
button,
.api-form1 .submit,
.cb-con .submit,
.cb-but,
.blg {
  background: var(--wa-green) !important;
}

button:hover {
  filter: brightness(0.95);
}

/* chat bubbles */
.box {
  border-color: rgba(7, 94, 84, 0.18);
}

.box:has(.answers) {
  background-color: var(--wa-green);
  color: #fff;
}

.box:has(.answers)::after {
  border-right-color: var(--wa-green);
}

/* ---- extracted block #1 ---- */
.verified-icon {
          display: inline-block;
          width: 1em;
          height: 1em;
          padding: 1px;
          color: transparent;
          background: url('../images/fff.svg.html') no-repeat 0 0;
          background-size: 100%;
          vertical-align: -4px;
          border: 2px solid #d7e3ec;
          margin-left: 8px;
        }

        .tgme_widget_message_user {
          float: left;
        }

        .tgme_widget_message_author,
        .tgme_widget_message_forwarded_from {
          font-size: 16px;
          line-height: 23px;
          margin: 1px 0;
          color: #2481cc;
          text-align: left;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-flex;
          display: flex;
        }

        .tgme_widget_message_bubble {
          position: relative;
          border: 2px solid #d7e3ec;
          border-radius: 0 10px 10px 10px;
          background: #fff;
          padding: 12px 17px;
        }

        .tgme_widget_message_bubble,
        .tgme_widget_message_inline_keyboard {
          margin-left: 51px;
        }

        .tgme_widget_message_bubble_tail {
          pointer-events: none;
          position: absolute;
          left: -8px;
          top: -1px;
        }

        .tgme_widget_message_footer {
          font-size: 14px;
          line-height: 19px;
          color: #738ca7;
          margin: 5px 0 0;
          overflow: hidden;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }

        .matreshka__wrapper {
          background-image: url('../images/bg1-100.webp');
          /*background-size: cover;*/
          background-position: center center;
          padding-bottom: 10px;
        }

        .matreshka__container {
        }

        .matreshka__item img {
          margin: 0px !important;
        }

        h2.matreshka__title {
          text-align: center;
        }

        h2.matreshka__title::after {
          display: none;
        }

        .matreshka__wrapper {
          max-height: 460px;
        }

        @media (max-width: 1023px) {
          .matreshka__wrapper {
            max-height: 440px;
            background-image: url('../images/bg3-100.webp.html');
          }
        }

        @media screen and (max-width: 768px) {
          .matreshka__wrapper {
            max-height: 430px;
          }
        }

        @media screen and (max-width: 480px) {
          .matreshka__wrapper {
            max-height: 322px;
          }
        }

        @media screen and (max-width: 415px) {
          .matreshka__wrapper {
            max-height: 291px;
          }
        }

        @media screen and (max-width: 400px) {
          .matreshka__wrapper {
            max-height: 284px;
          }
        }

        @media screen and (max-width: 390px) {
          .matreshka__wrapper {
            max-height: 290px;
          }
        }

        @media screen and (max-width: 350px) {
          .matreshka__wrapper {
            max-height: 250px;
          }
        }

        @media screen and (max-width: 321px) {
          .matreshka__wrapper {
            max-height: 260px;
          }
        }

/* ---- extracted block #2 ---- */
.matreshka__wrapper.go_go_dance .matreshka__item {
          -webkit-animation: shake 3s linear infinite;
          -moz-animation: shake 3s linear infinite;
          -ms-animation: shake 3s linear infinite;
          -o-animation: shake 3s linear infinite;
          animation: shake 3s linear infinite;
        }

        @-webkit-keyframes bounceAndRotate {
          0% {
            -webkit-transform: rotate(0deg);
          }

          25% {
            -webkit-transform: rotate(-5deg);
          }

          50% {
            -webkit-transform: rotate(0deg);
          }

          75% {
            -webkit-transform: rotate(5deg);
          }

          100% {
            -webkit-transform: rotate(0deg);
          }
        }

        @keyframes bounceAndRotate {
          0% {
            transform: rotate(0deg);
          }

          25% {
            transform: rotate(-5deg);
          }

          50% {
            transform: rotate(0deg);
          }

          75% {
            transform: rotate(5deg);
          }

          100% {
            transform: rotate(0deg);
          }
        }

        .matreshka__wrapper.go_go_dance:hover .matreshka__item {
          animation: shake 1.22s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
          transform: translate3d(0, 0, 0);
          backface-visibility: hidden;
          perspective: 1000px;
        }

        @keyframes shake {
          10%,
          90% {
            transform: translate3d(-1px, 0, 0);
          }

          20%,
          80% {
            transform: translate3d(2px, 0, 0);
          }

          30%,
          50%,
          70% {
            transform: translate3d(-3px, 0, 0);
          }

          40%,
          60% {
            transform: translate3d(3px, 0, 0);
          }
        }

        .promo-box {
          background: linear-gradient(to bottom, #1e1e1e, #333);
          color: #fff;
          padding: 30px 20px;
          border-radius: 12px;
          text-align: center;
          box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
          max-width: 600px;
          margin: 0 auto;
        }

        .promo-title {
          font-size: 24px;
          font-weight: bold;
          line-height: 1.4;
          margin: 0;
        }

        .product-name {
          color: #ffcc00;
          font-weight: 700;
        }

        .date {
          color: #f55d6f;
          font-weight: 600;
        }

        .highlight {
          display: inline-block;
          margin-top: 10px;
          font-size: 20px;
          color: #ffcc00;
          text-shadow: 1px 1px 3px #000;
        }

/* ---- extracted block #3 ---- */
.api-form1 * {
                }

                .api-form1 {
                  display: grid;
                  grid-template-columns: 40% 60%;
                  align-items: center;
                  max-width: 900px !important;
                  border: none !important;
                  background: #f3e8cb;
                  padding: 15px;
                  border-radius: 15px;
                }

                .product-image1 img {
                  display: block;
                  margin: 0 auto;
                  max-width: 280px !important;
                  width: 100% !important;
                }

                .api-form1 .form-body {
                  max-width: 494px !important;
                  margin: 0 auto 0 auto !important;
                }

                .api-form1 .form-body .text {
                  font-size: 20px !important;
                  font-weight: 400 !important;
                  line-height: 27.24px !important;
                  text-align: center !important;
                  color: #222222 !important;
                }

                .api-form1 .form-body .text .offer-name {
                  font-size: 20px !important;
                  font-weight: 600 !important;
                  line-height: 27.24px !important;
                  color: #ff396f !important;
                }

                .api-form1 .form-body .text .offer-name,
                .api-form1 .form-body .text .offer-price {
                  color: #ff396f !important;
                }

                .api-form1 .form-body .text .special_text {
                  font-size: 40px !important;
                  font-weight: 700 !important;
                  line-height: 54.47px !important;
                  text-align: center !important;
                  text-transform: uppercase !important;
                }

                .api-form1 .deadline1 {
                  font-size: 18px !important;
                  line-height: 24.51px;
                  font-weight: 400 !important;
                  text-align: center;
                }

                .time_remains {
                  font-size: 24px !important;
                  font-weight: 700 !important;
                  line-height: 22.68px !important;
                  color: #ff396f !important;
                }

                .api-form1 form {
                  margin: 20px auto 0 !important;
                }

                .form_control_vik_group input.form_control_vik.name,
                .form_control_vik_group input.form_control_vik.phone {
                  background: #ededed !important;
                  box-shadow: 0 2px 4px 0 #00000040 !important;
                  font-size: 18px !important;
                  font-weight: 400 !important;
                  line-height: 29.51px !important;
                  text-align: left !important;
                  border-width: 1px !important;
                  border-radius: 20px !important;
                  color: #9f9f9f !important;
                }

                .api-form1 .form_control_vik_group {
                  margin: 0 0 20px 0 !important;
                }

                .cta-btn1 a,
                .cb-con .submit,
                .api-form1 .submit,
                .cb-but,
                .blg {
                  font-size: 30px !important;
                  font-weight: 700 !important;
                  padding: 10px 0 10px 0 !important;
                  line-height: 40.85px !important;
                  background: #13a61a !important;
                  border-radius: 20px !important;
                  box-shadow: 0 2px 4px 0 #00000040 !important;
                }

                .api-form1 .footnote1 {
                  font-size: 12px !important;
                }

                .api-form1 .cta-form1 {
                  padding-right: 20px !important;
                }

                .api-form1 input {
                  background: #ededed !important;
                  box-shadow: 0 2px 4px 0 #00000040 !important;
                  font-size: 18px !important;
                  font-weight: 400 !important;
                  line-height: 29.51px !important;
                  text-align: left !important;
                  border-width: 1px !important;
                  border-radius: 20px !important;
                  color: #9f9f9f !important;
                  padding: 15px;
                  width: 100%;
                }

                .api-form1 button {
                  width: 100%;
                  font-size: 30px !important;
                  font-weight: 700 !important;
                  padding: 10px 0 10px 0 !important;
                  line-height: 40.85px !important;
                  border-radius: 25px !important;
                  border: 2px solid #075e54 !important;
                  box-shadow: 0 2px 4px 0 #00000040 !important;
                  background: linear-gradient(
                    0deg,
                    #075e54 0%,
                    #128c7e 25%,
                    #25d366 50%,
                    #128c7e 75%,
                    #075e54 100%
                  ) !important;
                  color: white;
                  height: 100%;
                }

                .api-form1 .product-image1 {
                  position: relative;
                }

                .product-banner1 {
                  opacity: 0.9 !important;
                  display: table !important;
                  width: 90px !important;
                  height: 90px !important;
                  line-height: 25px !important;
                  color: #fff !important;
                  font-size: 18px !important;
                  text-align: center !important;
                  background: url('../images/product-banner.png') no-repeat
                    center !important;
                  background-size: 100% !important;
                  position: absolute !important;
                  top: 0 !important;
                  right: 0 !important;
                  text-decoration: none !important;
                }

                .product-banner-text1 {
                  text-align: center !important;
                  margin: 0 !important;
                  font-weight: 700 !important;
                  color: #f2f2f2 !important;
                  display: table-cell !important;
                  font-size: 12px !important;
                  vertical-align: middle !important;
                  position: relative;
                }

                .container_sub_pod_list2 {
                  display: none;
                }

                /* @media (max-width: 1160px) {
                .container_sub_pod_list1 {
                  display: none;
                }
  
                .container_sub_pod_list2 {
                  display: block;
                }
              } */

                @media (max-width: 1500px) {
                  .api-form1 {
                    display: block;
                    align-items: center;
                    max-width: 100% !important;
                    margin: 0 auto;
                  }

                  .product-banner-text1 {
                    font-size: 10px !important;
                  }

                  .api-form1 .form-body {
                    max-width: 300px !important;
                    margin: 0 auto 0 auto !important;
                  }

                  .product-image1 img {
                    display: block;
                    margin: 0 auto;
                    max-width: 280px !important;
                    width: 100% !important;
                  }

                  .api-form1 .form-body .text {
                    /* font-family: Open Sans !important; */
                    font-size: 16px !important;
                    font-weight: 400 !important;
                    line-height: 21.79px !important;
                    text-align: center !important;
                    color: #222222 !important;
                  }

                  .api-form1 .form-body .text .offer-name {
                    /* font-family: Open Sans !important; */
                    font-size: 16px !important;
                    font-weight: 600 !important;
                    line-height: 21.79px !important;
                    color: #ff396f !important;
                  }

                  .api-form1 .form-body .text .offer-name,
                  .api-form1 .form-body .text .offer-price {
                    color: #ff396f !important;
                  }

                  .api-form1 .form-body .text .special_text {
                    font-size: 36px !important;
                    font-weight: 700 !important;
                    line-height: 49.03px !important;
                    text-align: center !important;
                    text-transform: uppercase !important;
                  }

                  .api-form1 .deadline1 {
                    margin: auto !important;
                    max-width: 300px !important;
                    font-size: 14px !important;
                    line-height: 19.51px;
                    font-weight: 400 !important;
                  }

                  .api-form1 .ftimer {
                    display: block;
                    text-align: center;
                  }

                  .api-form1 .msbr {
                    display: block;
                    text-align: center;
                  }

                  .time_remains {
                    font-size: 20px !important;
                    font-weight: 700 !important;
                    line-height: 22.68px !important;
                    color: #ff396f !important;
                  }

                  .api-form1 form {
                    margin: 20px auto 0 !important;
                  }

                  .form_control_vik_group input.form_control_vik.name,
                  .form_control_vik_group input.form_control_vik.phone {
                    background: #ededed !important;
                    box-shadow: 0 2px 4px 0 #00000040 !important;
                    font-family: Open Sans;
                    font-size: 14px !important;
                    font-weight: 400 !important;
                    line-height: 25.51px !important;
                    text-align: left !important;
                    border-width: 1px !important;
                    border-radius: 20px !important;
                  }

                  .api-form1 .form_control_vik_group {
                    margin: 0 0 20px 0 !important;
                  }

                  .cta-btn1 a,
                  .cb-con .submit,
                  .api-form1 .submit,
                  .cb-but,
                  .blg {
                    /* font-family: Open Sans !important; */
                    font-size: 20px !important;
                    font-weight: 700 !important;
                    padding: 10px 0 10px 0 !important;
                    line-height: 30.85px !important;
                    background: #13a61a !important;
                    border-radius: 20px !important;
                    box-shadow: 0 2px 4px 0 #00000040 !important;
                  }

                  .api-form1 .footnote1 {
                    font-size: 8px !important;
                  }

                  .api-form1 .cta-form1 {
                    padding-right: 0 !important;
                  }
                }

/* ---- extracted block #4 ---- */
.shakingbutton {
                      animation: shakinganime 5s infinite;
                    }

                    @keyframes shakinganime {
                      0% {
                        transform: translateX(0);
                      }

                      46% {
                        transform: translateX(0);
                      }

                      48% {
                        transform: translateX(-10px);
                      }

                      50% {
                        transform: translateX(10px);
                      }

                      52% {
                        transform: translateX(-10px);
                      }

                      54% {
                        transform: translateX(10px);
                      }

                      56% {
                        transform: translateX(-5px);
                      }

                      58% {
                        transform: translateX(5px);
                      }

                      60% {
                        transform: translateX(0);
                      }

                      100% {
                        transform: translateX(0);
                      }
                    }

/* ---- extracted block #5 ---- */
.shakingbutton {
                      animation: shakinganime 5s infinite;
                    }

                    @keyframes shakinganime {
                      0% {
                        transform: translateX(0);
                      }

                      46% {
                        transform: translateX(0);
                      }

                      48% {
                        transform: translateX(-10px);
                      }

                      50% {
                        transform: translateX(10px);
                      }

                      52% {
                        transform: translateX(-10px);
                      }

                      54% {
                        transform: translateX(10px);
                      }

                      56% {
                        transform: translateX(-5px);
                      }

                      58% {
                        transform: translateX(5px);
                      }

                      60% {
                        transform: translateX(0);
                      }

                      100% {
                        transform: translateX(0);
                      }
                    }

/* ---- extracted block #6 ---- */
.comments-block {
                  background: #f8fff7;
                  border-radius: 16px;
                  padding: 25px;
                  font-family: 'Arial', sans-serif;
                  color: #2e2e2e;
                  max-width: 800px;
                  margin: 0 auto;
                  box-shadow: 0 0 25px rgba(34, 139, 34, 0.15);
                }

                /* Один коментар */
                .comment-item {
                  display: flex;
                  align-items: flex-start;
                  gap: 15px;
                  margin-bottom: 25px;
                  border-bottom: 1px solid #d9f0d5;
                  padding-bottom: 20px;
                  animation: fadeInUp 0.6s ease both;
                }

                .comment-item:last-child {
                  border-bottom: none;
                }

                .ava-img {
                  width: 55px;
                  height: 55px;
                  border-radius: 50%;
                  border: 3px solid #80c683;
                  object-fit: cover;
                  flex-shrink: 0;
                }

                .comment-text {
                  background: #ffffff;
                  border-radius: 10px;
                  padding: 15px 18px;
                  flex: 1;
                  box-shadow: 0 0 8px rgba(128, 198, 131, 0.1);
                  border-left: 4px solid #7fcf83;
                }

                .comment-top {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  margin-bottom: 8px;
                }

                .comment-name {
                  font-weight: bold;
                  color: #2f7d32;
                  font-size: 16px;
                }

                .comment-bottom {
                  font-size: 15px;
                  line-height: 1.55;
                  color: #333;
                }

                .comment-bottom img {
                  margin-top: 12px;
                  border-radius: 10px;
                  border: 2px solid #cceccd;
                  width: 100%;
                  max-width: 300px;
                  display: block;
                }

                /* Плавна анімація появи */
                @keyframes fadeInUp {
                  from {
                    opacity: 0;
                    transform: translateY(10px);
                  }
                  to {
                    opacity: 1;
                    transform: translateY(0);
                  }
                }

/* ---- extracted block #7 ---- */
.b-top-bar-button .btn-main {
        display: none;
        padding: 7px 35px;
        text-align: center;
        font-family: Arial !important;
        border-radius: 50px;
        background: #398e3d !important;
        font-size: 16px !important;
        color: #fff !important;
        text-decoration: none;
        cursor: pointer;
        font-weight: 700;
      }

      .b-top-bar-button.sticky .btn-main {
        cursor: pointer;
        display: block;
        max-width: 250px;
        margin: 0 auto;
      }

      .b-top-bar-button {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        display: block;
      }

      .b-top-bar-button.sticky {
        position: fixed;
        background: #fff;
        z-index: 999;
        display: block;
      }

      .b-top-bar-button {
        padding: 0.6em 0;
      }

      @media screen and (min-width: 451px) {
        .l-wr-main {
          margin-top: 0;
        }
      }

      @media screen and (min-width: 992px) {
        .b-top-bar-button .btn-main {
        }
      }