:root {
   --manrope: 'Manrope', sans-serif;
   --white: white;
   --white-60: rgba(255, 255, 255, 0.6);
   --white-20: rgba(255, 255, 255, 0.2);
   --blue: #09f;
   --dark-blue: #02416b;
}
.calculator {
   margin: 80px 0;
   width: 100%;
   max-width: 1680px;
   margin-inline: auto;
}
@media screen and (max-width: 1760px) {
   .calculator {
      width: calc(100% - 80px);
   }
}
@media (width<=767.98px) {
   .calculator {
      width: calc(100% - 24px);
   }
}
.calculator {
   border-radius: 12px;
   background: linear-gradient(106deg, #20293d, #0c1321);
   padding: 40px;
   display: flex;
   flex-direction: column;
   gap: 40px;
}
@media (width<=767.98px) {
   .calculator {
      padding: 24px 12px;
   }
}
.calculator__title {
   width: 100%;
   display: flex;
   gap: 32px;
   align-items: center;
   justify-content: space-between;
}
.calculator__title h3 {
   color: var(--white, #fff);
   font-family: Manrope;
   font-size: 32px;
   font-style: normal;
   font-weight: 700;
   line-height: 100%;
}
.calculator__title .utils {
   display: flex;
   gap: 8px;
   align-items: center;
}
.calculator__title .utils button {
   width: fit-content;
   background-color: transparent;
   display: flex;
   align-items: center;
   gap: 4px;
   border: none;
   padding: 4px 12px;
   border-radius: 4px;
   color: var(--white, #fff);
   font-family: Manrope;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
   transition: 0.3s ease all;
}
.calculator__title .utils button.recalculate {
   background-color: var(--blue);
}
@media (hover: hover) {
   .calculator__title .utils button.recalculate:hover {
      cursor: pointer;
      background-color: var(--dark-blue);
   }
}
.calculator__title .utils button.recalculate:focus-visible {
   background-color: var(--dark-blue);
}
.calculator__title .utils button.reset {
   border: 1px solid var(--white);
}
@media (hover: hover) {
   .calculator__title .utils button.reset:hover {
      cursor: pointer;
      border-color: var(--dark-blue);
      background-color: var(--dark-blue);
   }
}
.calculator__title .utils button.reset:focus-visible {
   border-color: var(--dark-blue);
   background-color: var(--dark-blue);
}
.calculator__grid {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 32px;
}
@media screen and (max-width: 1310px) {
   .calculator__grid {
      grid-template-columns: 1fr 1fr;
      gap: 24px;
   }
}
@media (width<=767.98px) {
   .calculator__grid {
      display: flex;
      flex-direction: column;
      gap: 40px;
   }
}
.calculator__grid .inputs {
   display: flex;
   flex-direction: column;
   width: 100%;
   gap: 16px;
}
.calculator__grid .list {
   display: flex;
   flex-direction: column;
   width: 100%;
   gap: 16px;
   padding-top: 16px;
}
@media (width<=767.98px) {
   .calculator__grid .list {
      padding-top: 0;
   }
}
.calculator__grid .details {
   display: flex;
   flex-direction: column;
   gap: 16px;
   width: 100%;
}
.calculator__grid .details .item {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
}
.calculator__grid .details .item p {
   color: var(--white, #fff);
   font-family: Manrope;
   font-size: 16px;
   font-style: normal;
   font-weight: 700;
   line-height: 100%;
}
.calculator__grid .details .item .price {
   padding: 8px 12px;
   border-radius: 4px;
   background-color: var(--dark-blue);
   display: flex;
   flex-direction: column;
   flex-grow: 0;
   flex-shrink: 0;
   min-width: 62px;
   align-items: center;
   justify-content: center;
   color: var(--white, #fff);
   font-family: Manrope;
   font-size: 16px;
   font-style: normal;
   font-weight: 700;
   line-height: 100%;
}
.calculator__grid .total {
   display: flex;
   flex-direction: column;
   gap: 24px;
   width: 100%;
}
@media screen and (max-width: 1310px) {
   .calculator__grid .total {
      grid-column: span 2;
   }
}
.calculator__grid .total--sum {
   display: flex;
   flex-direction: column;
   gap: 8px;
}
.calculator__grid .total--sum .title {
   color: var(--white, #fff);
   font-family: Manrope;
   font-size: 32px;
   font-style: normal;
   font-weight: 700;
   line-height: 100%;
}
.calculator__grid .total--sum .sum {
   border-radius: 16px;
   background: var(--dark-blue, #02416b);
   padding: 24px;
   color: #fff;
   font-family: Manrope;
   font-size: 48px;
   font-style: normal;
   font-weight: 700;
   line-height: 100%;
   text-align: center;
}
.calculator__grid .total-text-block {
   display: flex;
   flex-direction: column;
   gap: 8px;
}
.calculator__grid .total-text-block p {
   color: #fff9;
   font-family: Manrope;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: 120%;
}
.ui-checkbox input[type='checkbox'] {
   opacity: 0;
   position: absolute;
   z-index: -1000;
}
.ui-checkbox input[type='checkbox']:checked + .ui-checkbox___custom {
   background-color: red;
}
.ui-checkbox .ui-checkbox___custom {
   width: 20px;
   height: 20px;
   border-radius: 4px;
   border: 1px solid red;
}
.dropdown-label {
   display: flex;
   flex-direction: column;
   gap: 4px;
   width: 100%;
}
.dropdown-label.hidden {
   display: none;
}
.dropdown-label > p {
   color: var(--white, #fff);
   font-family: Manrope;
   font-size: 12px;
   font-style: normal;
   font-weight: 600;
   line-height: 100%;
}
.ui-dropdown {
   width: 100%;
   display: flex;
   flex-direction: column;
   position: relative;
}
.ui-dropdown > input {
   opacity: 0;
   visibility: hidden;
   position: absolute;
   display: none;
}
.ui-dropdown__head {
   width: 100%;
   background-color: transparent;
   border: none;
   border-radius: 4px;
   background-color: var(--white-20);
   padding: 16px;
   display: flex;
   align-items: center;
   gap: 2rem;
   justify-content: space-between;
   transition: 0.3s ease all;
}
.ui-dropdown__head svg {
   color: var(--white);
   transition: inherit;
}
.ui-dropdown__head .text {
   transition: inherit;
   color: var(--white-60);
   font-family: var(--manrope);
   font-size: 16px;
   font-style: normal;
   font-weight: 700;
   line-height: 100%;
}
@media (hover: hover) {
   .ui-dropdown__head:hover {
      cursor: pointer;
      background-color: var(--dark-blue);
   }
}
.ui-dropdown__head:focus-visible {
   background-color: var(--dark-blue);
}
.ui-dropdown__head.choosen .text {
   color: var(--white);
}
.ui-dropdown__head.active svg {
   rotate: 180deg;
}
.ui-dropdown__body {
   position: absolute;
   top: 0;
   z-index: 2;
   display: flex;
   flex-direction: column;
   background-color: #34373f;
   width: 100%;
   left: 0;
   border-radius: 4px;
   overflow: auto;
   max-height: 200px;
}
.ui-dropdown__body .search__field {
   width: 100%;
   display: flex;
   position: sticky;
   top: 0;
   padding: 0 0 4px;
   z-index: 10;
   background-color: #494b53;
}
.ui-dropdown__body .search__field input {
   width: 100%;
   background-color: transparent;
   outline: none;
   border: none;
   padding: 8px 16px;
   font-family: var(--manrope);
   font-size: 16px;
   font-style: normal;
   font-weight: 700;
   line-height: 100%;
   color: var(--white);
}
.ui-dropdown__body > button {
   border-radius: 4px;
   background: transparent;
   border: none;
   text-align: left;
   font-family: var(--manrope);
   font-size: 16px;
   font-style: normal;
   font-weight: 700;
   line-height: 100%;
   color: var(--white);
}
.ui-dropdown__body > button:first-of-type {
   padding: 12px 16px 4px;
}
.ui-dropdown__body > button {
   padding: 4px 16px;
}
.ui-dropdown__body > button:last-of-type {
   padding: 4px 16px 12px;
}
@media (hover: hover) {
   .ui-dropdown__body > button:hover {
      cursor: pointer;
      background-color: var(--blue);
   }
}
.ui-dropdown__body > button:focus-visible {
   background-color: var(--blue);
}
.ui-dropdown__body .dropdown-empty {
   padding: 4px 16px;
   font-family: var(--manrope);
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: 100%;
   color: var(--white-60);
}
.ui-input {
   width: 100%;
   background-color: transparent;
   border: none;
   border-radius: 4px;
   background-color: var(--white-20);
   padding: 16px;
   display: flex;
   align-items: center;
   gap: 2rem;
   justify-content: space-between;
   transition: 0.3s ease all;
}
.ui-input svg {
   color: var(--white);
   transition: inherit;
}
.ui-input {
   transition: inherit;
   color: var(--white);
   font-family: var(--manrope);
   font-size: 16px;
   font-style: normal;
   font-weight: 700;
   line-height: 100%;
}
.ui-input::placeholder {
   color: var(--white-60);
}
@media (hover: hover) {
   .ui-input:hover {
      cursor: pointer;
      background-color: var(--dark-blue);
      color: var(--white);
   }
}
.ui-input:focus-visible {
   background-color: var(--dark-blue);
   color: var(--white);
}
.ui-input.choosen .text {
   color: var(--white);
}
.ui-input.active svg {
   rotate: 180deg;
}
.ui-input:focus,
.ui-input:focus-visible {
   border: none;
   outline: none;
}
.ui-switcher {
   display: flex;
   align-items: center;
   width: 100%;
   gap: 8px;
   flex-wrap: wrap;
}
@media (hover: hover) {
   .ui-switcher:hover {
      cursor: pointer;
   }
   .ui-switcher:hover .switch {
      scale: 1.4;
      background-color: var(--dark-blue);
   }
}
.ui-switcher:focus-visible .switch {
   scale: 1.4;
   background-color: var(--dark-blue);
}
.ui-switcher p {
   color: var(--white, #fff);
   font-family: Manrope;
   font-size: 16px;
   font-style: normal;
   font-weight: 700;
   line-height: 100%;
}
.ui-switcher .price {
   margin-left: auto;
   padding: 8px 12px;
   border-radius: 4px;
   background-color: var(--dark-blue);
   display: flex;
   flex-direction: column;
   flex-grow: 0;
   flex-shrink: 0;
   min-width: 62px;
   align-items: center;
   justify-content: center;
   color: var(--white, #fff);
   font-family: Manrope;
   font-size: 16px;
   font-style: normal;
   font-weight: 700;
   line-height: 100%;
   scale: 0;
   transition: 0.4s ease all;
}
.ui-switcher input {
   opacity: 0;
   display: none;
   position: absolute;
   z-index: -100;
}
.ui-switcher .switch {
   width: 32px;
   height: 16px;
   padding: 2px;
   border-radius: 200px;
   position: relative;
   background-color: #34373f;
   transition: 0.3s ease all;
}
.ui-switcher .switch:before {
   position: absolute;
   width: 12px;
   height: 12px;
   background-color: var(--white);
   z-index: 2;
   content: '';
   border-radius: 100%;
   transform: translate(0);
   transition: 0.6s ease all;
}
.ui-switcher:has(input:checked) .switch {
   background-color: var(--blue);
}
.ui-switcher:has(input:checked) .switch:before {
   transform: translate(16px);
}
.ui-switcher:has(input:checked) .price {
   scale: 1;
}