/* main */
* {
    box-sizing: border-box;
    font-family: 'Montserrat';
    transition: all .5s;
}

*::selection{
    color: #fff;
    background: #32d1f9;
}

body {
    background: #F2F2F2;
    min-height: 100vh;
}

main {
    padding: 146px;
}

ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0px;
}

section {
    width: 100%;
}

p{
    margin: 0px;
    line-height: 1.6;
}

#app {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/*  */

.continer {
    max-width: 1360px;
    /* padding: ; */
}

a {
    color: #000;
    text-decoration: none;
}

/* text */

.text--xs{
    font-size: 14px;
}

.text--s{
    font-size: 16px;
}

.text--m{
    font-size: 18px;
}

.text--l{
    font-size: 21px;
}

.text--xl{
    font-size: 32px;
}

.text--xxl{
    font-size: 48px;
}

/* text color */

.text--blue{
    color: #05509b;
}

.text--red{
    color: #BE342B;
}

.text--green{
    color: #03873C;
}

.text--yellow{
    color: #BEBE2B;
}

/* .text--{
    color: #C1C8E4;
} */

.text--grey{
    color: #00000099;
}

/* text aling */

.text--center{
    text-align: center;
}

.text--thin{
    font-weight: 100;
}

/* flex */

.f {
    display: flex;
}

.f--row {
    flex-direction: row;
}

.f--col {
    flex-direction: column;
}

.f--bet{
    justify-content: space-between;
}

.f--nowrap{
    flex-wrap: nowrap;
}

.f--wrap{
    flex-wrap: wrap;
}


/* aling */

.aling-items--start{
    align-items: flex-start;
}

.aling-items--center{
    align-items: center;
}

/* gap */

.gap--none{
    gap: 0px !important;
}

.gap--xs{
    gap: 4px;
}

.gap--s{
    gap: 8px;
}

.gap--m{
    gap: 16px;
}

.gap--l{
    gap: 21px;
}

.gap--xl{
    gap: 32px;
}

.gap--xl{
    gap: 60px;
}


/* block */


.full{
    width: 100%;
}

.full--h{
    height: 100%;
}

.max{
    min-width: max-content;
}

.half{
    width: 50%;
}

.half--s{
    width: calc( 50% - 8px );
}

.half--m{
    width: calc( 50% - 16px );
}

.half--l{
    width: calc( 50% - 21px );
}

/* pos */

.sticky{
    position: sticky;
    top: 24px;
}

/* hover types */

.hover--shadow:hover{
    box-shadow: 0px 16px 24px -8px #10192126;
}

.hover--border-blue:hover{
    border: 1px solid #05509B;
}

/* cursor */

.cursor--pointer{
    cursor: pointer;
}

/* border */



.border--grey{
    border: 1px solid #C1C8E4;
}

.radius--s{
    border-radius: 4px;
}

.radius--m{
    border-radius: 8px;
}

.radius--l{
    border-radius: 16px;
}

.radius--xl{
    border-radius: 32px;
}

.radius--xxl{
    border-radius: 40px;
}
























































/* wraps */

.wrap--col {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
}

.wrap--col-l{
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: left;
}

.wrap--scol {
    display: flex;
    flex-direction: column;
}

.wrap--row {
    display: flex;
    flex-direction: row;
    gap: 24px;
}

.wrap--v-center {
    align-items: center;
}

.wrap--list {
    display: flex;
    flex-direction: row;
    gap: 16px;
    flex-wrap: wrap;
}

.nowrap {
    flex-wrap: nowrap !important;
}




.wrap--list-big {
    display: flex;
    flex-direction: row;
    gap: 24px;
    flex-wrap: wrap;
    width: 100%;
}

.wrap--section {}

.wrap--betrow {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}

.wrap--main {
    width: 100%;
    max-width: 1360px;
    min-height: calc(100vh - 126px);
    display: flex;
    flex-direction: row;
    gap: 60px;
    padding: 40px 0 24px 0;
    /* padding: 0px; */
}

.wrap--header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.wrap--footer {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-bottom: 16px;
}

/* blocks */


.block {
    border-radius: 40px;
    padding: 24px;
    background: #fff;
}

.block-s {
    width: 295px;
}

.block-m {
    width: 649px;
    padding: 24px 48px;
}

/* .block-m{

} */

.block--iframe-page {
    max-width: 100%;
    height: max-content;
    border: none;
}

.block--transparent {
    background: none;
}

.block--footer {
    padding: 0px;
    background: linear-gradient(89deg, #6DCADB 1.81%, #1FAAF1 98.45%);
}

.block--footer * {
    color: #fff;
}

/*  */

.block--secondary {
    border-radius: 16px;
    padding: 16px;
    background: #fff;
    border: 1px solid #C1C8E4;
}

.block--secondary-l {
    border-radius: 32px;
    padding: 23px;
    background: #fff;
    border: 1px solid #C1C8E4;
}

/*  */


.subblock__header {
    position: relative;
}


.subblock__header.active .subblock {
    opacity: 1;
    z-index: 999;
    top: calc(100% + 8px);
}

.subblock {
    z-index: -1;
    opacity: 0;
    position: absolute;
    top: calc(100%);
    right: 0px;
    border: 1px solid #D4E1ED;
}




/*  */

.icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon--m {
    min-width: 48px;
    min-height: 48px;
}

.icon--m>img {
    width: 24px;
    height: 24px;
}

.icon--l {
    min-width: 48px;
    min-height: 48px;
}

.icon--l>img {
    width: 100%;
    height: 100%;
}

/* header */

.header {
    width: 100%;
    position: relative;
    top: 16px;

}

.footer {
    width: 100%;
    overflow: hidden;
    /* position: absolute;
    bottom: 16px; */

}

.footer__copyright {
    width: 100%;
    font-size: 14px;
    background: #1FAAF1;
    padding: 16px 24px;
}

.footer__content {
    width: 100%;
    padding: 24px;
}

.footer__content span,
.footer__content a {
    font-size: 14px;
}

a.footer__phone {
    font-size: 32px;
}

a.footer__email {
    font-size: 18px;
}

.footer__phone:hover,
.footer__email:hover {
    color: #dbebfb;
}


/* logo */

.logo {
    min-height: 50px;
}

.logo>img {
    height: 100%;
    max-width: 100%;
}

.logo--footer {
    height: fit-content;
    max-width: 100%;
}



/* btns and tags */


.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    width: fit-content;
    min-width: 50px;
    min-height: 50px;
    border-radius: 40px;
    transition: all .3s;
    outline: none;
    border: none;
    cursor: pointer;
}

.btn>* {
    transition: all .1s;
}

.btn--simple {
    border: none;
    padding: 0px;
    background: none;
}

.btn--header {
    max-height: 50px;
    border: 1px solid #D4E1ED;
    color: #05509B;
}

.btn--header:active {
    background: #D4E1ED;
}

.btn--icon {
    padding: 12px;
}


.btn--header:hover {
    border: 1px solid #05509B;
}

.btn--header.active {
    background: #D4E1ED;
    border: 1px solid #05509B;
}

.btn--header.count {
    position: relative;
}

.btn--header.count::after {
    content: attr(data-count);
    position: absolute;
    top: -4px;
    right: -4px;
    width: fit-content;
    min-width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    background: #EE6262;
    border-radius: 12px;
}


.btn--header.bell.count>img {
    animation-name: bell;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.76, -0.01, 0.24, 0.99);
}



.btn--full {
    /* padding: 12px; */
    width: 100%;

    min-width: 50px;
    min-height: 50px;
    /* color: #05509B; */
    /* border: 1px solid #D4E1ED; */
    /* border-radius: 40px; */
}

.btn--second {
    border: 1px solid #05509B;
    background: #fff;
    color: #05509B;
}

.btn--second:hover,
.btn--second.active {
    border: 1px solid #fff;
    background: #05509B;
}

.btn--second:hover > span,
.btn--second.active > span {
    color: #fff;
}

.btn--second:hover>img,
.btn--second.active>img {
    filter: invert(1) grayscale(100%) contrast(1);
}

.btn--first {
    border: 1px solid #05509B;
    background: #05509B;
    color: #fff;
}

.btn--first:hover {
    border: 1px solid #1FAAF1;
    background: #1FAAF1;
    box-shadow: 0 13px 26px 0 #10192126;
}

.btn--third {
    background: #05509b00;
    color: #05509b;
}

.btn--third:hover {
    background: #d4e1ed;
    box-shadow: 0 13px 26px 0 #10192126;
}

.btn--error {
    border: 1px solid #be342b;
    background: #fff;
    color: #be342b;
}

.btn--error:hover,
.btn--error.active {
    border: 1px solid #fff;
    background: #be342b;
}

.btn--error:hover>span,
.btn--error.active>span {
    color: #fff;
}

.btn--error:hover>img,
.btn--error.active>img {
    filter: invert(1) grayscale(100%) contrast(1);
}



/* menu nav */

.nav__item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 18px;
    position: relative;
    min-height: 40px;
    cursor: pointer;
}

.nav__item--header>span {
    font-size: 21px;
    cursor: text;
}

.nav__item::after {
    content: '';
    position: absolute;
    left: -15px;
    width: calc(100% + 32px);
    height: 100%;
    z-index: 2;
    border-radius: 16px;
    transition: background .5s;
}

.nav__item:hover:not(.nav__item--header):after {
    background: #d4e1ed80;
}

input+.nav__item:not(.nav__item--header):after {
    left: 0px;
    width: calc(100% + 8px);
}

input:checked+.nav__item:not(.nav__item--header):after {
    background: #d4e1ed80;
}

.nav__item>* {
    z-index: 3;
}

.nav__item>span {
    padding: 8px 0px;
    width: 100%;
}

.nav__item>.nav__item__open-maker {
    transform: rotate(-90deg);
}

.nav__item.active>.nav__item__open-maker {
    transform: rotate(0deg);
}




/* home */

.greeting {
    font-family: 'Montserrat Bold';
    font-size: 36px;
    line-height: 36px;
}

.greeting span {
    font-size: 18px;
    line-height: 48px;
}



/* .greeting:fie{

} */

.section-h {
    font-size: 24px;
    font-weight: 400;
}


.section-h--big {
    font-size: 32px;
    font-weight: 400;
}

.section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 1004px;
}

.section--monopage {
    width: 100%;
    align-items: center;
    justify-content: center;
}

/* price-list__item */

.price-list{
    background: #fff;
    padding: 24px 32px;
    border-radius: 40px;
    width: min-content;
    display: flex;
    flex-direction: column;
    gap: 16px;

    width: 100%;
    max-width: 490px;
}

.price-list > hr {
    height: 1px;
    border: none;
    background: #C1C8E4;
}   

.price-list__header{
    font-family: 'Montserrat Bold';
    font-size: 32px;
    margin: 0px;
}

.price-list__subheader{
    font-size: 32px;
    margin: 0px;
}

.price-list__subheader > span {
    font-size: 21px;
    color: #05509b;
}

.price-list__addons{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 16px;
    list-style-type: '✔ ';
}

.price-list__addons > li {
    width: 100%;
    max-width: calc(50% - 24px);
    margin-left: 16px;
}

.price-list__order{
    display: flex;
    gap: 0 8px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.price-list__order__price{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.price-list__order__price  span {
    /* font-family: 'Montserrat Bold'; */
    font-size: 21px;
    font-weight: 900;
}

.price-list__order__price  span:first-child {
    font-size: 32px;
    font-weight: 900;
}


/* action block */

.action-block {
    background: #fff;
    padding: 24px 32px;
    border-radius: 40px;
    width: min-content;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 490px;
    min-width: 490px;
}


/* .action-block:last-child{
    max-width: none;
    width: 100%;
} */

.action-block--min {
    padding: 24px 24px;
    border-radius: 16px;
    width: fit-content;
    min-width: 0px;
}

.action-block--full{
    max-width: none;
    width: 100%;
}

.action-block__logo {
    height: 60px;
    width: 60px;
    min-width: 60px;
}

.action-block--min .action-block__logo {
    height: 24px;
    width: 24px;
    min-width: 24px;
    min-height: 24px;
}

.action-block__logo>img {
    width: 100%;
}


.action-block__arrow {
    position: relative;
    width: min-content;
    height: 14px;
    left: 0px;
}

.action-block__arrow>img {
    height: 100%;
}

.action-block__header,
.action-block__text {
    font-weight: 400;
}

.action-block__header {
    width: fit-content;
    font-size: 24px;
}

.action-block--info .action-block__header {
    width: max-content;
}


.action-block--min .action-block__header {
    font-size: 21px;
}

.action-block--info .action-block__header {
    font-size: 18px;
}

.action-block__wrap-header {
    display: flex;
    gap: 24px;

    align-items: center;
    justify-content: space-between;
}

.action-block__content {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}

.action-block__text {
    width: max-content;
    max-width: 380px;
}

.action-block:hover {
    box-shadow: 0px 16px 24px -8px #10192126;
}

.action-block:hover .action-block__arrow {
    left: 16px;
}

/* tag and btn */

.tag {
    padding: 16px 24px;
    border-radius: 60px;
    min-width: max-content;
    background: #F4F5F7;
    color: #05509B;
}

.tag--error {
    background: #FEEBE6;
    color: #BE342B;
}

.tag--valid {
    background: #D4EDD8;
    color: #03873C;
}

.tag--warning {
    background: #FEFEE6;
    color: #BEBE2B;
}

/* monoblock */

.monoblock {
    background: #fff;
    padding: 120px 60px;
    border-radius: 80px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* form */

.form {}

.input {
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* width: 100%; */
}

.input__lable {
    color: #343434;
}

.input__field {
    color: #343434;
}

.input .input__lable,
.input .input__field {
    font-size: 18px;
    font-weight: 400;
}

 .input__label--header {
    font-size: 24px;
    font-weight: 100;
    /* color: #343434; */
    color: #05509b;
}
 .input__lable--header--big {
    padding-top: 8px;
    margin-top: 16px;
    font-size: 32px;
    font-weight: 100;
    color: #05509b;
}



.input__message {
    font-size: 14px;
}

.input .input__field {
    padding: 12px 8px;
    width: 100%;
    max-width: 300px;
    border-radius: 8px;
    border: 1px solid #C1C8E4;
}

.input--full {
    width: 100%;
}

.input--full .input__field{
    max-width: none;
}


.input .input__field::placeholder {
    color: #C1C8E4;
}

.input .input__field:hover,
.input .input__field:active,
.input .input__field:focus {
    outline: none;
    border: 1px solid #05509b;
    background: #fff;
}


.input--text .input__field {}

.input--text .input__field {}


.input--integer .input__field {
    /* max-width: 300px; */
}

.input--select .input__field  {
    background: #fff;
    width: max-content;
    max-width: 270px;

    -webkit-appearance: none; /* Для Chrome и Safari */
    -moz-appearance: none; /* Для Firefox */
    appearance: none; /* Для всех современных браузеров */
}

.input--select .input__field + .input__icon {
    /* height: 100%;
    width: 10px;
    background: #000; */
}

.input--date .input__field{
    background: #fff;
    width: max-content;
    max-width: 270px !important;
}

.input__textarea {
    resize: vertical;
    min-height: 80px;
}


.input--info {
    display: flex;
    flex-direction: row;
    font-size: 18px;
    width: 100%;
}

.input--info .input__lable  {
    /* width: 100%; */
    /* max-width: 300px; */
    color: #000000b3;

}

.input--info .input__lable--wrap{
    min-width: 300px;
}

/* .input--info > span {
    white-space: nowrap;
} */

/* .input__info-text {
    width: max-content;
}
 */








.input--ckeckbox .input__label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-family: Arial, sans-serif;
    gap: 12px;
}

/* Скрываем оригинальный чекбокс */
.input--ckeckbox .input__field {
    display: none;
}

/* Кастомный чекбокс */
.input--ckeckbox .input__checkmark {
    width: 24px;
    height: 24px;
    border: 2px solid #05509B;
    border-radius: 8px;
    position: relative;
    transition: all 0.3s ease;
    background: white;
}

/* Анимация галочки */
.input--ckeckbox .input__checkmark::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    opacity: 0;
    transition: all 0.3s ease 0.1s;
}

/* Состояние отмеченного чекбокса */
.input__field:checked + .input__checkmark {
    background-color: #05509B;
    border-color: #05509B;
    animation: pulse 0.5s ease;
}

.input__field:checked + .input__checkmark::after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

/* Анимация пульсации */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Текст метки */
.input__header {
    font-size: 16px;
    user-select: none;
}







/* error */

.input__message--error {
    color: #BE342B;
}


/* Horizontal layout styles */
.input--horizontal {
    width: 100%;
      flex-direction: row;
      align-items: center;
      gap: 16px;
  }
  
  .input--horizontal .input__horizontal-label {
      flex: 0 0 40%;
      min-width: 40%;
      display: flex;
      flex-direction: row;
      gap: 8px;
  }
  
  .input--horizontal .input__horizontal-field {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 8px;
  }
  
  /* Adjust field widths in horizontal mode */
  .input--horizontal .input__field {
      max-width: none;
      width: 100%;
  }
  
  
  /* .input--horizontal.input--select .input__field {
      max-width: 270px;
      width: 100%;
  } */
  
  /* Horizontal info styles */
  .input--horizontal.input--info {
      align-items: center;
  }
  
  .input--horizontal.input--info .input__horizontal-label {
      margin-bottom: 0;
  }
  
  .input--horizontal.input--info .input__horizontal-field {
      display: flex;
      /* align-items: center; */
  }
  
  /* Checkbox horizontal alignment */
  .input--horizontal.input--ckeckbox {
      align-items: center;
  }
  
  .input--horizontal.input--ckeckbox .input__horizontal-label {
      margin-bottom: 0;
  }

/* list-block */

.list-block {
    background: #fff;
    padding: 32px 24px;
    border-radius: 40px;
    width: 1004px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.list-block>* {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
}

.list-block__logo {
    width: 40px;
    height: 40px;
}

.list-block__logo>img {
    width: 100%;
    height: 100%;
}


.list-block__header h3 {
    font-size: 21px;
    font-weight: 400;
}

.list-block__cont {
    display: flex;
    align-items: center;
    gap: 16px;
}

/*  */

.params{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.params--beet{
    display: flex;
    width: 100%;
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
    justify-content: space-between;
}

.params__col{
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

/* Dialog*/

.confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.confirm-dialog {
  /* background: white;
  padding: 1.5rem;
  border-radius: 8px; */
  max-width: 500px;
  width: 90%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  animation: dialogShow 0.3s ease;
}

.confirm-header {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 1rem;
}

.confirm-body {
    white-space: pre-line;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.confirm-footer {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-start;
}

.confirm-ok, .confirm-cancel {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.confirm-ok {
  background: #007bff;
  color: white;
}

.confirm-cancel {
  background: #6c757d;
  color: white;
}

/*  */