//@import url('https://fonts.googleapis.com/css?family=Open+Sans:300&subset=cyrillic,cyrillic-ext');
@import "../_partials/popup-order.less";
@font-face {
  font-family: "RubArialRegular";
  src: url("../../fonts/RubArialRegular/rub-arial-regular.woff2") format("woff2"),
      url("../../fonts/RubArialRegular/rub-arial-regular.woff") format("woff"),
      url("../../fonts/RubArialRegular/rub-arial-regular.ttf") format("ttf");
  font-display: block;
}
.rub-arial-regular {
  font-family: "RubArialRegular" !important;
}

@sizeH1: 37px;
@sizeCaption: 24px;
@sizeSubcaption: 18px;
@sizeText: 16px;
@black: #231f20;
@pink: #ec008c;

.h1,
h1 {
  font-size: @sizeH1;
  font-weight: bold;
  color: #000000;
  margin-top: 0;
  text-transform: uppercase;
}

.h2,
h2 {
  text-transform: uppercase;
  font-size: @sizeCaption;
  color: @black;
  font-weight: bold;
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 43px;
  text-align: center;
  line-height: 31px;
}

.subcaption {
  font-size: @sizeSubcaption;
  padding-top: 10px;
  text-align: center;
  text-transform: uppercase;
  &.subcaption-text {
    font-size: @sizeText;
    padding-top: 27px;
    text-transform: initial;
    div {
      margin-bottom: 11px;
    }
  }
}

.breadcrumbs-wrap {
  display: none;
}

.btn {
  border-radius: 0;
  color: white;
  text-align: center;
  border: none;
  outline: none !important;

  &.btn-esim-top {
    background: url(../../images/landings/esim/button.png) no-repeat 0 0;
    width: 237px;
    height: 63px;
  }
  &.btn-esim {
    background: url(../../images/landings/esim/button-sim.png) no-repeat 0 0;
    width: 196px;
    height: 34px;
    font-size: @sizeText;
    text-transform: uppercase;
  }
  &.btn-esim-form {
    background: url(../../images/landings/esim/button-form.png) no-repeat 0 0;
    width: 329px;
    height: 34px;
    font-size: @sizeText;
  }
  &:hover {
    color: black;
  }
}

.tti {
  text-transform: initial !important;
}

.block {
  position: relative;
  &:after {
    content: "";
    position: absolute;
    top: 100%;
    width: 100%;
    height: 4px;
    background: url(../../images/landings/esim/separator.jpg) no-repeat center center;
    z-index: 9;
  }
}

.full-width {
  .block:last-of-type:after {
    content: none;
  }
}

.cube {
  width: 7px;
  height: 7px;
  background: black;
  margin: 0 auto;
}

.top-block {
  position: relative;
  background: #fff url(../../images/landings/esim/top.jpg) no-repeat center center;
  min-height: 628px;
  .text-container {
    margin-left: 31px;
    padding-top: 48px;
    padding-left: 30px;
    position: relative;
    justify-content: space-between;
    display: flex;
    gap: 10px 30px;
    flex-wrap: wrap;
    &:before {
      content: "";
      display: inline-block;
      background: url(../../images/landings/esim/border.png) no-repeat center center;
      position: absolute;
      width: 307px;
      height: 450px;
      left: 0;
    }
  }
  .h1,
  h1 {
    padding-top: 102px;
    line-height: 1.2;
    margin-bottom: 20px;
  }
  .top-text {
    text-transform: uppercase;
    font-weight: 100;
    font-size: @sizeCaption;
    b {
      .value {
        font-size: @sizeH1;
      }
    }
  }
  .btn {
    margin-top: 114px;
    margin-left: -100px;
    font-size: 20px;
  }
  .discount-sticker{
    min-width:188px;
    max-width:188px;
    max-height:188px;
    min-height:188px;
    border: 6px solid #FFFFFF;
    background: linear-gradient(145.86deg, #F1ADFF 20.42%, #FF70DA 90.09%);
    box-shadow: 0px 4px 4px 0px #00000040;
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 27px;
    line-height: 120%;
    text-align: center;
    border-radius: 50%;
    transform: rotate(-13.46deg);
    position: relative;
    left: 3%;
    padding: 5px;
  }
}

.tariffs-block {
  background: #fff url(../../images/landings/esim/bg-sim.jpg) no-repeat bottom center;
  min-height: 463px;
  .tariffs-items {
    margin-top: 15px;
    padding: 0 20px;
  }
  .tariff-item {
    width: 50%;
    float: left;
    padding: 0;
    margin-bottom: 14px;
    text-align: center;
    .title {
      font-size: 21px;
      font-weight: bold;
      margin-bottom: 4px;
    }
    .price {
      .value {
        font-size: 27px;
        font-weight: bold;
      }
    }
    .img-wrapper {
      margin: 28px 0;
      &.img-big {
        margin: 12px 0 29px 0;
      }
    }
    .text {
      font-size: @sizeText;
    }
    .title,
    .price,
    .text {
      color: black;
    }
  }
}

.features-block {
  background: #fff url(../../images/landings/esim/bg-features.jpg) no-repeat bottom center;
  min-height: 384px;
  .features-list {
    display: inline-block;
    text-align: left;
    margin-top: 38px;
    margin-bottom: 42px;
    padding-left: 118px;
    .features-item {
      background: url(../../images/landings/esim/icon-li.png) no-repeat 0 center;
      padding-left: 67px;
      min-height: 45px;
      margin-bottom: 15px;
      line-height: 45px;
      font-size: @sizeText;
      b {
        font-size: 21px;
      }
      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }
}

.settings-block {
  .settings-bar {
    display: flex;
    margin: 30px auto;
    max-width: 1020px;

    span {
      color: #939598;
      border-bottom: 2px solid #939598;
      display: inline-block;
      width: 33.3%;
      text-align: center;
      padding: 10px;
      cursor: pointer;
      font-size: @sizeSubcaption;
      &:active ,
      &:hover ,
      &:focus ,
      &.active {
        color: black;
        border-color: @pink;
      }
    }
  }
  .item-text {
    display: none;
    font-size: @sizeText;
    max-width: 950px;
    margin: 0 auto;
    line-height: 1.7;
    padding-bottom: 10px;
    min-height: 278px;
    &.active {
      display: block;
    }
  }
}

.map-block {
  background: #fff url(../../images/landings/esim/bg-map.jpg) no-repeat top center;
  min-height: 943px;
  .map {
    margin: 12px auto;
    height: 460px;
    max-width: 960px;

    &.map-static {
      position: relative;
      background: url(../../images/landings/esim/map.png) no-repeat top center;
      max-width: 1076px;
      height: 579px;
      margin-top: -90px;
      background-size: contain;
    }
  }
  .map-items {
    text-align: left;
    display: flex;
    justify-content: center;
    .map-item {
      text-align: center;
      max-width: 285px;
      padding: 0 10px;
      .title {
        font-size: 21px;
        font-weight: bold;
        display: inline-block;
        margin-top: 12px;
        margin-bottom: 9px;
      }
      .text {
        margin-top: 14px;
      }
    }
  }
}

.tv-block {
  background: url(../../images/landings/esim/tv-bg.jpg) no-repeat bottom center #9ce0ff;
  padding-top: 5px;
  min-height: 476px;
  .advantages-list{
    list-style: none;
    padding: 5px 17px;
    float: left;
    li{
      font-size: 16px;
      line-height: 21px;
      color:#000;
      padding-left: 64px;
      width: 100%;
      margin: 29px 0;
      .wrap{
        vertical-align: middle;
        display: inline-block;
      }
      &:before{
        content:'';
        width: 64px;
        vertical-align: middle;
        margin-left: -64px;
        background: url(../../images/landings/esim/check-ic.svg) no-repeat left center;
        background-size: 45px;
        height: 45px;
        display: inline-block;
      }
    }
  }
  .price{
    color:#ffffff;
    text-align: center;
    font-weight: 600;
    float: left;
    line-height: 25px;
    min-height: 125px;
    position: relative;
    top: 105px;
    left: 33px;
    .value{
      font-size:131px;
    }
    .unit{
      font-size: 69px;
    }
    .period{
      font-size: 24.5px;
    }
  }
}

.order-block {
  .h2 {
    font-size: 30px;
    margin-top: 3px;
  }
  .esim-form {
    max-width: 100%;
    width: 600px;
    padding: 0 20px 20px;
    margin: 36px auto;
    position: relative;
    left: 40px;
    .form-group {
      margin-bottom: 8px;
    }
    .form-control {
      &[type="text"] {
        background: url(../../images/landings/esim/bg-input.png) no-repeat center center;
        max-width: 329px;
        margin: 0 auto;
        height: 34px;
        font-size: 16px;
        color: black;
        padding: 0 20px;
        border: none;
        box-shadow: none;
        border-radius: 0;
        display: inline-block;
        &::placeholder {
          color: black;
        }
      }
    }
    .form-group {
      [role="radiogroup"] {
        max-width: 329px;
        display: inline-block;
        padding-left: 6px;
        label {
          color: @black;
          cursor: pointer;
          margin-right: 25px;
          display: inline-block;
          &:last-of-type {
            margin-right: 0;
          }
          i {
            background: url(../../images/landings/esim/bg-input-checkbox.png) no-repeat center center;
            width: 34px;
            height: 34px;
            display: inline-block;
            margin-right: 10px;
            line-height: 34px;
            text-align: center;
          }
          input + i {
            &:after {
              content: "\00a0"; /**   in after */
              color: @pink;
              font-weight: bold;
              font-size: @sizeText;
              margin-left: -4px;
            }
          }
          input:checked + i {
            &:after {
              content: "\2713";
            }
          }
        }
      }
    }
    .control-label {
      color: black;
      font-family: 'Open Sans', sans-serif;
      font-size: 16px;
      min-width: 90px;
      text-align: right;
      padding-right: 15px;
      height: 34px;
      margin-bottom: 0;
      vertical-align: top;
      line-height: 27px;
    }
    .help-block.help-block-error {
      color: black;
      padding-left: 90px;
    }
    .ajax-send-btn.loading {
      color: transparent !important;
      border: 0 none;
      background: transparent url('../../images/horizontal_loader.gif') no-repeat center !important;
      outline: 0 none;
    }
  }
  .btn {
    margin-left: 90px;
  }
  .cnorder-info {
    margin-left: 90px;
    color: black;
    font-size: 10px;
    display: block;
    margin-bottom: 0;
    margin-right: 140px;
    a {
      color: @pink;
    }
  }
  .order-result {
    max-width: 529px;
    margin: 0 auto;
    padding: 20px;
    color: black;

    &.success {
      margin: 60px auto;
      text-align: center;
      border: 8px solid green;
    }
  }
}

.modal-leave-order {
  .modal-dialog {
    .modal-content {
      .modal-body {
        border-bottom: 1px solid transparent;
        form {
          font-size: @sizeText;

          input[type="text"].form-control{
            max-width: 329px;
            height: 34px;
            background: url(../../images/landings/esim/bg-input.png) no-repeat center center;
          }
          .btn-submit {
            max-width: 329px;
            height: 34px;
            background: url(../../images/landings/esim/button-form.png) no-repeat 0 0;
            &:hover{
              color: black;
            }
          }
          .form-group {
            [role="radiogroup"] {
              max-width: 329px;
              display: inline-block;
              padding-left: 6px;
              label {
                color: @black;
                cursor: pointer;
                margin-right: 25px;
                display: inline-block;
                &:last-of-type {
                  margin-right: 0;
                }
                i {
                  background: url(../../images/landings/esim/bg-input-checkbox.png) no-repeat center center;
                  width: 34px;
                  height: 34px;
                  display: inline-block;
                  margin-right: 10px;
                  line-height: 34px;
                  text-align: center;
                }
                input + i {
                  &:after {
                    content: "\00a0"; /**   in after */
                    color: @pink;
                    font-weight: bold;
                    font-size: @sizeText;
                    margin-left: -4px;
                  }
                }
                input:checked + i {
                  &:after {
                    content: "\2713";
                  }
                }
              }
            }
          }
        }
        .cnorder-info {
          display: block;
          margin-left: 90px;
          color: black;
          font-size: 10px;
          margin-bottom: 0;
          margin-right: 140px;
          a {
            color: @pink;
          }
        }
      }
    }
  }
}

@media (max-width: 1262px) {
  h1, .h1 {
    max-width: 550px;
    font-size: 30px;
  }

  .features-block .features-list {
    padding-left: 0;
  }

  .map-block .map.map-static {
    height: 550px;
  }

  .tv-block {
    .advantages-list{
      width:45%;
      li{
        br{
          display: none;
        }
      }
    }
  }
}

@media (max-width: 1030px) {
  .top-block {
    background-position: 0 center;
    .btn {
      margin-left: 0;
    }
  }

  .features-block .features-list .features-item {
    line-height: 23px;
  }

  .map-block .map-items {
    padding-bottom: 30px;
  }

  .map-block .map.map-static {
    margin-top: -30px;
    height: 420px;
  }
  .tv-block {
    .price{
      top: 150px;
      left: 19px;
    }
  }
}

@media (max-width: 767px) {
  .top-block {
    h1, .h1 {
      margin-bottom: 40px;
    }

    .top-text {
      b .value {
        font-size: @sizeCaption;
      }
      font-size: @sizeSubcaption;
    }
  }

  .tariffs-block .tariff-item .title {
    font-size: @sizeSubcaption;
  }

  .features-block .features-list {
    padding: 0 20px;
  }

  .settings-block {
    .settings-bar span {
      font-size: 12px;
    }
    .item-text {
      padding: 0 20px 30px;
    }
  }

  .map-block .map-items {
    flex-wrap: wrap;
    .map-item {
      max-width: 50%;
      margin-bottom: 20px;
    }
  }

  .map-block .map.map-static {
    margin-top: 0;
    height: 340px;
  }

  .order-block .esim-form {
    width: 560px;
    left: auto;
    .form-group [role="radiogroup"]{
      max-width: 320px;
      overflow: hidden;
      label{
        margin-right: 0;
      }
    }
  }

  .tv-block{
    background-size: 900px;
    background-position: 95% bottom;
    .advantages-list{
      margin-bottom: 130px;
      width:100%;
      float: none;
    }
    .price{
      top: -102px;
      left: 22%;
      width: 150px;
      float: none;
    }
  }

  .modal-leave-order {
    .modal-dialog {
      .modal-content {
        .modal-body {
          form {
            .field-esimbuynumbersform-type label {
              display: none;
            }
            input[type="text"].form-control{
              background: white;
              border: 1px solid #cb6ad5;
            }
            .btn-submit {
              width: 100%;
              background: #cb6ad5;
              border-radius: 17px;
            }
            .form-group [role="radiogroup"] label {
              margin-right: 0;
            }
            .cnorder-info {
              margin-bottom: 0;
              margin-right: 0;
              & + .cnorder-info {
                margin-bottom: 40px;
              }
            }
          }
        }
      }
    }
  }
}

[class*="ymaps-2-"] {
  background: none !important;
}

@media (max-width: 600px) {
  .top-block {
    border-top: 1px solid transparent;
    min-height: initial;
    background-size: cover;
    .text-container {
      margin-left: 20px;
      margin-right: 20px;
      padding-right: 30px;
      border: 3px solid white;
      margin-top: 40px;
      padding-top: 0;
      border-radius: 12px;
      padding-bottom: 40px;
      &:before {
        content: none;
      }
    }
    .h1, h1 {
      padding-top: 30px;
      font-size: 27px;
    }
    .btn {
      margin-top: 15px;
      margin-bottom: 25px;
    }
    .discount-sticker{
      min-width: 135px;
      max-width: 135px;
      min-height: 135px;
      max-height: 135px;
      padding: 0;
      border-width: 5px;
      font-size: 21px;
      font-weight: 600;
      top: 10px;
    }
  }

  .h2, h2, .subcaption {
    padding-left: 20px;
    padding-right: 20px;
  }

  .tariffs-block {
    background-size: cover;
    .tariff-item {
      width: 100%;
      margin-bottom: 40px;
    }
  }

  .settings-block {
    .settings-bar {
      flex-wrap: wrap;
      justify-content: center;
      span {
        width: 80%;
        font-size: @sizeSubcaption;
      }
    }
  }

  .map-block .map-items .map-item {
    max-width: 100%;
  }

  .map-block .map.map-static {
    height: 55vw;
  }

  .tv-block{
    background-position: -530px bottom;
    .advantages-list{
      margin-bottom: 95px;
    }
    .price{
      top: -5px;
      left: 79px;
      width: 170px;
      height: 170px;
      background: rgba(170,163,251,.3);
      border-radius: 50%;
      padding-top: 41px;
    }
  }

  .order-block {
    padding-top: 0;
    background: none;
    min-height: initial;
    .esim-form {
      width: 320px;
      label {
        width: 100%;
      }
      .form-control[type="text"] {
        border: 1px solid #cb6ad5;
        background: none;
      }
      .control-label {
        text-align: left;
      }
      .cnorder-info,
      .btn {
        margin-left: 0;
        margin-right: 0;
      }
      .help-block.help-block-error {
        padding-left: 0;
        padding-right: 0;
      }
      .btn.btn-esim-form {
        width: 100%;
        height: 29px;
        background-size: contain;
        line-height: 19px;
      }
      .field-esimbuynumbersform-type label {
        display: none;
      }
    }
  }
}

@esim-input-border: #cb6ad5;
@esim-grad-from:   #A8C6F2;
@esim-grad-to:     #C36BD1;
@esim-radius:      17px;

/* Поля ввода: белая заливка, общий бордер/радиус */
.order-block .esim-form input.form-control[type="text"],
.modal-leave-order input[type="text"].form-control {
  border: 2px solid transparent !important;
  border-radius: @esim-radius !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, @esim-grad-from, @esim-grad-to) border-box !important;
  box-shadow: none !important;
  height: 34px;
  padding: 0 20px;
}


/* Кнопки: градиент 2→3, белый бордер */
.order-block .btn.btn-esim-form,
.modal-leave-order .btn-submit,
.order-block .btn-esim-promocode {
  background: linear-gradient(135deg, @esim-grad-from, @esim-grad-to) !important;
  border: 2px solid #fff !important;
  border-radius: @esim-radius !important;
  color: #fff !important;
}

/* Узкая кнопка "Применить" для промокода */
#esimbuynumbersform-promocode-apply,
#esim-popup-promocode-apply {
  width: 155px;
  height: 34px;
  margin-left: 10px;
}
/* Нижний блок на странице */
#esimbuynumbersform-promocode-apply { width: 153px; }
/* Серый цвет кнопки при примененном промокоде */
#esimbuynumbersform-promocode-apply[disabled],
#esim-popup-promocode-apply[disabled] {
  background: #a7a9ac !important;
  border: 2px solid #fff !important;
  color: #fff !important;
}

/* Мобайл: инпут промокода и кнопка — на всю ширину */
@media (max-width: 767px) {
  .field-esimbuynumbersform-promocode .promocode-inline-row,
  .field-esim-popup-promocode .promocode-inline-row { display: block; width: 100%; }
  .field-esimbuynumbersform-promocode .promocode-input-wrap,
  .field-esim-popup-promocode .promocode-input-wrap { width: 100% !important; max-width: none !important; }
  .field-esimbuynumbersform-promocode .promocode-input-wrap .form-control,
  .field-esim-popup-promocode .promocode-input-wrap .form-control { max-width: none !important; }
  #esimbuynumbersform-promocode-apply,
  #esim-popup-promocode-apply { width: 100% !important; margin-left: 0 !important; margin-top: 8px; display: block; }
}

/* Ореола для чекбоксов/радио контейнеров */
.order-block .esim-form .checkbox,
.order-block .esim-form .radio,
.modal-leave-order .checkbox,
.modal-leave-order .radio {
  position: relative;
}
.order-block .esim-form .checkbox::before,
.order-block .esim-form .radio::before,
.modal-leave-order .checkbox::before,
.modal-leave-order .radio::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 10px;
  background: linear-gradient(to right, @esim-grad-from, @esim-grad-to);
  z-index: 0;
  opacity: .2;
  pointer-events: none;
}
.order-block .esim-form .checkbox > *,
.order-block .esim-form .radio > *,
.modal-leave-order .checkbox > *,
.modal-leave-order .radio > * {
  position: relative;
  z-index: 1;
}

/* Единый стиль самих чекбоксов/радио (вместо спрайтов) */
.order-block .esim-form .form-group [role="radiogroup"] label i,
.modal-leave-order .modal-dialog .modal-content .modal-body form .form-group [role="radiogroup"] label i,
.order-block .esim-form .checkbox label i,
.order-block .esim-form .radio label i,
.modal-leave-order .checkbox label i,
.modal-leave-order .radio label i {
  border: 2px solid transparent !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(to right, @esim-grad-from, @esim-grad-to) border-box !important;
  border-radius: 8px !important; // небольшой радиус
}

[class*="ymaps-2-"] {
  background: none !important;
}