.container--calc {
    display: flex;
    flex-direction: row;
    background: #0000000a;
    border-radius: var(--hg);
        padding: calc(var(--hg)*2);
        gap: calc(var(--hg)*2);

}


.container--confirm {
    display: flex;
    align-items: flex-start; /* важно: выравнивание сверху */
    gap: var(--hg);
    padding: calc(var(--hg) * 2);
    overflow: visible;

}

.container--done {
display: flex
;
    align-items: center;
    height: 100vh;
    flex-direction: column;
    justify-content: space-evenly;

}

.container--faq {
    display: flex;
    flex-direction: row;
    border-radius: var(--hg);
    gap: calc(var(--hg)*2);;
    padding: calc(var(--hg)*2);
    
}


.container--footer {
    border-radius: var(--hg);
    gap: calc(var(--hg)*2);
    background-color: var(--Third, rgb(20, 40, 65));
    padding: calc(var(--hg)*2);
    width: 100%;
}

.container--hero {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: var(--hg);
    padding-left: calc(var(--hg) * 2);
    padding-right: calc(var(--hg) * 2);
}

.logo {
    background-image: url('img/logo.svg');
    width: 240px;
    height: 112px;
    background-size: contain;
    background-repeat: no-repeat;
}

.logo--footer {
    background-image: url('../img/logo_footer.svg');

    width: auto;
    height: 6rem;
    background-size: contain;
    background-repeat: no-repeat;
}

.chip {
    display: flex;
    align-items: center;
    gap: var(--xs);
padding: calc(var(--xs) / 2);
    background: #00000010;
    border-radius: var(--hg);
    border: 1px solid #00000010;
    width: fit-content;
}


.panel {
       background-color: var(--white);
    border-radius: var(--xxl);
    border: solid 1px #00000015;
    overflow: hidden;
    display: flex;
    align-items: stretch; 
}

.card {
    background-color: var(--white);
    border-radius: var(--xxl);
    border: solid 1px #00000015;
    overflow: hidden;
    display: flex;
    align-items: stretch;

}

.card {
    position: relative;
    transition: transform 0.5s ease-out,
                box-shadow 0.5s ease-out,
                border-image 0.5s ease-out;

    overflow: hidden;
    transform-style: preserve-3d;

    box-shadow: 0 0 0 rgba(224, 224, 224, 0.959);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 0;
    border-image-outset: 0px;
    border-image: initial;




}

.card:hover {
    box-shadow: 0px 20px 100px #dddddd;
    z-index: 1;
    
}

.card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -500%;
    width: 500%;
    height: 50%;
    background: linear-gradient(90deg,
                transparent,
                rgba(255, 255, 255, 0.2),
                transparent);
    transform: translateX(0) rotate(-45deg);
    transition: transform 0.7s ease-out;
    pointer-events: none;
    opacity: 0.7;
    z-index: 1;

}

.card:hover::after {
    transform: translateX(70%) rotate(-45deg);
}

.card__vertical {
    background-color: var(--white);
    border-radius: var(--xxl);
    border: solid 1px #00000015;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 32rem;
    justify-content: space-between;
}

/* Кнопки */


.btn {

    display: flex;
    flex-direction: row;
    padding: var(--lg);
    border-radius: calc(var(--hg)*2);
    gap: var(--md);
    display: flex;
        align-items: center;
        border: none;
}

.btn {
    position: relative;
    overflow: hidden;
    z-index: 0;
    transition: box-shadow 0.3s ease;
}

.btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -200%;
    width: 350%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: translateX(0) rotate(-25deg);
    transition: transform 0.7s ease-out;
    opacity: 0.7;
    pointer-events: none;
    z-index: 1;
}

.btn:hover::after {
    transform: translateX(50%) rotate(-25deg);
}


.btn--primary {
    background: var(--dark__blue);
    color: var(--white);
    margin-top: var(--md);
    width: 100%;
}

.btn--third {
    background: var(--white);
    color: var(--dark__blue);
}

.btn--secondary {
    background: var(--red);
    color: var(--white);
    width: fit-content;
}



/* Цвета */
.darkblue {
    color: var(--dark__blue);
}

.blue {
    color: var(--blue);
}

.green {
    color: var(--green);
}

.darkgreen {
    color: var(--dark__green);
}

.red {
    color: var(--red);
}

.white {
    color: var(--white);
}

.black {
    color: var(--black);

}

.grey {
    background: #00000005;

}


.prices__first {
    background-color: var(--white);
    border-radius: var(--xxl);
    border: solid 1px #00000015;
    overflow: hidden;
    display: flex;
    flex-direction: column;

}

.prices__second {
    background-color: var(--white);
    border-radius: var(--xxl);
    border: solid 1px #00000015;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 24rem;
}


.checkbox {
  display: flex;
  align-items: center;
  padding: var(--md);
  border-radius: var(--xxl);
  color: var(--bacl); /* Проверь — возможно, нужно var(--black) или --text-color */
  font-family: var(--secondary-font);
  font-size: var(--sm);
  border: 1px solid #dbdbdb;
  gap: 12px;
  font-weight: var(--bd);
  flex-direction: row;
  position: relative;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.checkbox:focus-within {
  outline: none;
  border-color: var(--blue, #0C87D4);
  box-shadow: 0 0 0 2px rgba(12, 135, 212, 0.2);
}

.checkbox::before {
display: none;
}



input[type="radio"]:checked + .checkbox::before {
  background-color: var(--blue, #0C87D4);
  border-color: var(--blue, #0C87D4);
}


input[type="date"].form__input {
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid #dbdbdb;
  border-radius: var(--xxl);
  padding: var(--md);
  font-family: var(--secondary-font);
  font-size: var(--sm);
  font-weight: var(--bd);
  color: var(--bacl);
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  width: 100%;
}

input[type="date"].form__input:focus {
  outline: none;
  border-color: var(--Primary, rgb(12, 135, 212));
  background-color: #f0faff;
}

input[type="date"].form__input::-webkit-calendar-picker-indicator {
  filter: invert(50%);
  cursor: pointer;
}


input[type="text"].form__input {
  appearance: none;
  background: #fff;
  border: 1px solid #dbdbdb;
  border-radius: var(--xxl);
  padding: var(--md);
  font-family: var(--secondary-font);
  font-size: var(--sm);
  font-weight: var(--bd);
  color: var(--bacl);
  display: flex;
  align-items: center;
  cursor: text;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  width: 100%;
}

input[type="text"].form__input:focus {
  outline: none;
  border-color: var(--Primary, rgb(12, 135, 212));
  background-color: #f0faff;
}


.form__input input[type="text"],
.form__input input[type="tel"],
.form__input input[type="email"] {
  appearance: none;
  background: #fff;
  border: 1px solid #dbdbdb;
  border-radius: var(--xxl);
  padding: var(--md);
  font-family: var(--secondary-font);
  font-size: var(--sm);
  font-weight: var(--bd);
  color: var(--bacl);
  width: 100%;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.form__input input:focus {
  outline: none;
  border-color: var(--Primary, rgb(12, 135, 212));
  background-color: #f0faff;
}

.form__input {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  gap: 0.5rem;
}

.form__input .num {
  background: #f5f5f5;
  padding: 0.75rem 1rem;
  border-radius: var(--xxl);
  font-weight: var(--bd);
  font-family: var(--secondary-font);
  font-size: var(--sm);
  color: var(--bacl);
  border: 1px solid #dbdbdb;
}




.print {
        display: flex
;
    border-bottom: 1px dashed #0000001f;
    padding-bottom: var(--md);
}


.print__side {
  position: static;
}


.done {
      display: flex
;
    padding: var(--hg);
    background-color: #cff0ff;
    border-radius: calc(var(--hg) * 4);
    width: 7rem;
    height: 7rem;
    justify-content: center;
    align-items: center;
}


.animated-bg {
  background:
    radial-gradient(circle at center, #d8f3ff, #ffffff, #fff, #e0faff),
    linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 90%);
  background-repeat: no-repeat;
  background-size: 200% 200%, 100% 100%;
  animation: gradientPulse 12s ease-in-out infinite;
}


@keyframes gradientPulse {
  0% {
    background-position: 50% 50%;
  }
  50% {
    background-position: 60% 40%;
  }
  100% {
    background-position: 50% 50%;
  }
}


.aside--calc {
        background: url(../img/form-bg.png) no-repeat;
        width: 140%;
    height: 100%;
}

p {
      margin: 0;
    font-size: var(--sm);
    line-height: var(--xxl);
    font-family: var(--secondary-font);
}


h1 {
      margin: 0;
    font-size: var(--xxl);
    line-height: var(--xxl);
    font-family: var(--secondary-font);


}


h2 {
      margin: 0;
    font-size: var(--lg);
    line-height: var(--xxl);
    font-family: var(--secondary-font);


}


li {
      font-size: var(--sm);
    line-height: var(--xxl);
    font-family: var(--secondary-font);
    list-style: disc;
    margin-left: var(--xxl);
}

.service-long-description {
  margin-bottom: var(--hg);
}