body {
      font-family: "Montserrat", Arial, sans-serif;
      font-weight: 400;
      font-size: 20px;
      margin: 0 auto;
      padding: 0;
      color: #fff;
      background: #202020;
    }

    input {
      max-width: 255px;
      background-color: #fff;
      border: 1px solid #fff;
      border-radius: 5px;
      padding: 10px;
      color: #202020;
    }

    p {
      margin: 0;
    }

    .container {
      margin: 20px;
      max-width: 1146px;
    }

    .text-xl {
      font-size: 24px;
      font-weight: 700;
    }

    .text-bold {
      font-weight: 700;
    }

    .text-sm-white {
      font-size: 18px;
    }

    .text-sm-gray {
      font-size: 18px;
      color: #adadad;
    }

    .form-container {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .form {
      margin: 0;
      padding: 40px;
      display: grid;
      gap: 26px;
      background: rgba(255, 255, 255, 0.03);
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .form-input {
      display: grid;
      grid-template-columns: 255px 1fr;
      align-items: center;
      gap: 50px;
    }

    .form-input label {
      justify-self: start;
    }

    .form-input input {
      width: 100%;
      background-color: #fff;
      border: 1px solid #fff;
      border-radius: 5px;
      padding: 10px;
      color: #202020;
      font-size: 16px;
      outline: none;
    }

    .form-radio {
      display: flex;
      align-items: start;
      gap: 50px;
    }

    .form-radio p {
      margin: 0;
      padding-top: 5px;
    }

    .radio-group {
      display: grid;
      grid-template-columns: 23px 1fr;
      gap: 10px;
    }

    .radio-item {
      margin: 0;
      padding: 0;
      border: 0;
      appearance: none;
      width: 23px;
      height: 23px;
      border-radius: 5px;
      cursor: pointer;
      transition: 0.3s opacity;
      place-content: center;
      display: grid;
      position: relative;
      transition: 0.3s;
      -webkit-appearance: none;
    }

    .radio-item:focus,
    .input-item:focus {
      border: 1px solid #adadad;
    }

    .radio-item:checked {
      background-color: #319ae7;
    }

    .radio-item:checked:before {
      content: "";
      width: 20px;
      height: 20px;
      border-radius: 4px;
      border: none;
      background-color: transparent;
      background-image: url('data:image/svg+xml;utf8,');
      background-repeat: no-repeat;
      background-position: center;
    }

    .form-radio-text {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: fit-content;
    }

    .radio-input-button {
      appearance: none;
      position: relative;

      width: 182px;
      height: 60px;
      background: #ffffff;
      border-radius: 5px;
      border: 1px solid #ffffff;
      transition: 500ms;
      margin: 0;
      padding: 0;
      cursor: pointer;
    }

    .wide-button {
      width: 250px;
    }

    .radio-input-button:checked {
      background: #202020;
    }

    .radio-label-text {
      position: absolute;
      color: #8d8d8d;
      cursor: pointer;
      z-index: 1;
    }

    input::placeholder {
      color: #999;
    }

    .button {
      font-family: "Montserrat", Arial, sans-serif;
      width: 278px;
      padding: 19px 70px;
      text-transform: uppercase;
      background: #319ae7;
      color: #fff;
      border-radius: 5px;
      font-size: 20px;
      transition: 500ms;
      cursor: pointer;
    }

    .button:hover {
      border: 1px solid rgba(255, 255, 255, 0.5);
    }

    .button:active {
      background: #1d7fc5;
    }

    .result {
      display: grid;
      grid-template-columns: 255px 1fr 1fr;

      padding: 40px;
      background: rgba(255, 255, 255, 0.03);
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .col-end {
      justify-self: end;
    }

    .details {
      display: grid;
      grid-template-columns: 255px 1fr 1fr 1fr;
      grid-template-rows: repeat(12, 1fr);

      gap: 10px;
      padding: 40px;
      background: rgba(255, 255, 255, 0.03);
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .details p {
      white-space: nowrap;
    }

    .title {
      width: 255px;
    }

    @media (max-width: 1100px) {
      .title {
        width: 190px;
        min-width: 190px;
      }

      .form-radio {
        gap: 10px;
      }

      .form-input {
        grid-template-columns: 190px 1fr;
        gap: 10px;
      }

      .radio-input-button {
        width: 120px;
        height: 50px;
      }

      .radio-label-text {
        font-size: 14px;
      }

      .wide-button {
        width: 160px;
      }

      .result {
        grid-template-columns: 0 58% 1fr;
        background: linear-gradient(
          90deg,
          rgba(0, 0, 0, 0) 0%,
          rgba(49, 154, 231, 0.14) 98.75%
        );
        border: 1px solid rgba(255, 255, 255, 0.3);
      }

      .details {
        margin-left: -10px;
        grid-template-columns: 0 120px 1fr 1fr;
        grid-row-gap: 0;
      }

      .details-title {
        visibility: hidden;
      }
    }

    @media (max-width: 600px) {
      .button {
        font-size: 16px;
        height: 48px;
        padding: 0;
      }

      .col-end {
        font-size: 12px;
      }

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

      .text-sm-gray,
      .text-xl {
        font-size: 12px;
      }

      .form-container {
        font-size: 14px;
      }

      .form,
      .result,
      .details {
        border: none;
        background: #202020;
      }

      .form {
        width: 100%;
        padding: 0;
        border: none;
      }

      .form-input {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .form-radio {
        flex-direction: column;
        gap: 10px;
      }

      .form-radio-items {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
        font-size: 12px;
        justify-items: stretch;
      }
      .form-radio-text {
        width: 100%;
        .radio-label-text {
          font-size: 12px;
        }
      }

      .radio-input-button {
        width: 100%;
        height: 34px;
      }

      .result {
        padding: 15px 10px;
        grid-template-columns: 0 58% 1fr;
        background: linear-gradient(
          90deg,
          rgba(0, 0, 0, 0) 0%,
          rgba(49, 154, 231, 0.14) 98.75%
        );
        border: 1px solid rgba(255, 255, 255, 0.3);
      }

      .details {
        margin-left: -10px;
        width: 100%;
        padding: 0;
        grid-template-columns: 0 120px 1fr 1fr;
        grid-row-gap: 5px;
      }

      .details-title {
        visibility: hidden;
      }
    }
  
  
    const totalPriceElement = document.getElementById("total-price");
    const priceYenElement = document.getElementById("price-yen");
    const priceRubElement = document.getElementById("price-rub");
    const extraFeeElement = document.getElementById("extra-fee");
    const deliveryElement = document.getElementById("delivery");
    const expensesJapanYenElement =
      document.getElementById("expenses-japan-yen");
    const expensesJapanRubElement =
      document.getElementById("expenses-japan-rub");
    const freightYenElement = document.getElementById("freight-yen");
    const freightRubElement = document.getElementById("freight-rub");
    const taxTotalElement = document.getElementById("tax-total");
    const taxElement = document.getElementById("tax");
    const recyclingFeeElement = document.getElementById("recycling-fee");
    const customFeeElement = document.getElementById("custom-fee");
    const servicesTotalElement = document.getElementById("services-total");
    const brokerServicesElement = document.getElementById("broker-services");
    const companyFeeElement = document.getElementById("company-fee");

    // const data = {
    //   price: "2500300",
    //   bodyType: "car",
    //   engineType: "gasoline",
    //   engineVolume: "2000",
    //   power: "152",
    //   age: "3-to-5",
    //   clientType: "legal",
    // };

    // const {
    //   price,
    //   bodyType,
    //   engineType,
    //   engineVolume,
    //   power,
    //   age,
    //   clientType,
    // } = data;

    // доплата по стоимости

    const getExtrafeeRate = (vehiclePrice) => {
      const feeStructure = [
        { lower: 0, upper: 1000000, fee: 0 },
        { lower: 1000001, upper: 2000000, fee: 20000 },
        { lower: 2000001, upper: 2500000, fee: 30000 },
        { lower: 2500001, upper: 3000000, fee: 40000 },
        { lower: 3000001, upper: 3500000, fee: 50000 },
        { lower: 3500001, upper: 4000000, fee: 60000 },
        { lower: 4000001, upper: 4500000, fee: 70000 },
        { lower: 4500001, upper: 5000000, fee: 85000 },
        { lower: 5000001, upper: 5500000, fee: 100000 },
      ];

      const feeEntry = feeStructure.find(
        ({ lower, upper }) => lower  {
      if (bodyType === "car") {
        const yenAmount = 51000;
        const rubAmount = Math.round(yenAmount / exchangeRates.JPY);
        return {
          original: `${yenAmount.toLocaleString()} ¥`,
          converted: `${rubAmount.toLocaleString()} ₽`,
          value: rubAmount,
        };
      } else {
        const usdAmount = 800;
        const rubAmount = Math.round(usdAmount / exchangeRates.USD);
        return {
          original: `${usdAmount.toLocaleString()} $`,
          converted: `${rubAmount.toLocaleString()} ₽`,
          value: rubAmount,
        };
      }
    };

    // ---- ТАМОЖЕННАЯ ПОШЛИНА ----

    // пошлина
    const getTax = (age, engineVolume, price, bodyType) => {
      // ставки для распилов
      const cutCarRates = {
        cutCar: 59000,
        cutJeep: 59000,
        constructorCar: 62000,
        constructorJeep: 126000,
      };

      if (bodyType in cutCarRates) {
        return cutCarRates[bodyType];
      }

      // ставки авто до 3 лет
      const carRatesUnderThree = [
        { min: 0, max: 8500, rate: 54, minEuro: 2.5 },
        { min: 8500, max: 16700, rate: 48, minEuro: 3.5 },
        { min: 16700, max: 42300, rate: 48, minEuro: 5.5 },
        { min: 42300, max: 84500, rate: 48, minEuro: 7.5 },
        { min: 84500, max: 169000, rate: 48, minEuro: 15 },
        { min: 169000, max: Infinity, rate: 48, minEuro: 20 },
      ];

      // ставки авто от 3 до 5 лет
      const ratesThreeToFive = [
        { min: 0, max: 1000, rate: 1.5 },
        { min: 1001, max: 1500, rate: 1.7 },
        { min: 1501, max: 1800, rate: 2.5 },
        { min: 1801, max: 2300, rate: 2.7 },
        { min: 2301, max: 3000, rate: 3.0 },
        { min: 3001, max: Infinity, rate: 3.6 },
      ];

      // ставки авто от 5 до 7 лет
      const ratesFiveToSeven = [
        { min: 0, max: 1000, rate: 3.0 },
        { min: 1001, max: 1500, rate: 3.2 },
        { min: 1501, max: 1800, rate: 3.5 },
        { min: 1801, max: 2300, rate: 4.8 },
        { min: 2301, max: 3000, rate: 5.0 },
        { min: 3001, max: Infinity, rate: 5.7 },
      ];

      // ставки авто старше 7 лет
      const ratesOverSeven = [
        { min: 0, max: 1000, rate: 3.0 },
        { min: 1001, max: 1500, rate: 3.2 },
        { min: 1501, max: 1800, rate: 3.5 },
        { min: 1801, max: 2500, rate: 4.8 },
        { min: 2501, max: 3000, rate: 5.0 },
        { min: 3001, max: Infinity, rate: 5.7 },
      ];

      let rates;

      if (age === "less-3") {
        // Конвертируем цену из йен в евро
        const priceEuro = Math.round(
          (price * exchangeRates.EUR) / exchangeRates.JPY
        );

        // Находим подходящий диапазон цены
        const taxRate = carRatesUnderThree.find(
          (rate) => priceEuro > rate.min && priceEuro = min && engineVolume  {
      const parsedPrice = parseFloat(price);
      const customsFees = [
        { min: 200001, max: 450000, fee: 2134 },
        { min: 450001, max: 1200000, fee: 4269 },
        { min: 1200001, max: 2700000, fee: 11746 },
        { min: 2700001, max: 4200000, fee: 16524 },
        { min: 4200001, max: 5500000, fee: 21344 },
        { min: 5500001, max: 7000000, fee: 27540 },
        { min: 7000001, max: Infinity, fee: 30000 },
      ];

      for (const { min, max, fee } of customsFees) {
        if (parsedPrice >= min && parsedPrice  {
      const recyclingFeeRates = [
        { min: 0, max: 1000, lessThanThree: 180200, overThree: 460000 },
        { min: 1000, max: 2000, lessThanThree: 667400, overThree: 1174000 },
        {
          min: 2000,
          max: 3000,
          lessThanThree: 1875400,
          overThree: 2839400,
        },
        {
          min: 3000,
          max: 3500,
          lessThanThree: 2153400,
          overThree: 3296800,
        },
        {
          min: 3500,
          max: Infinity,
          lessThanThree: 2742200,
          overThree: 3604800,
        },
      ];
      // Для физических лиц с любыми типами двигателей авто
      if (clientType === "individual") {
        return vehicleAge === "less-3" ? 3400 : 5200;
      }

      // Для юр.лиц и электромобилей
      if (clientType === "legal" && engineType === "electric") {
        return vehicleAge === "less-3" ? 667400 : 1174000;
      }

      // Для юр.лиц с бензиновыми/дизельными авто - ставка по таблице
      if (
        clientType === "legal" &&
        (engineType === "gasoline" || engineType === "diesel")
      ) {
        const rate = recyclingFeeRates.find(
          (rate) => engineVolume > rate.min && engineVolume  {
      const parsedPower = parseFloat(power);
      const powerRates = [
        { min: 0, max: 90, rate: 0 },
        { min: 90, max: 150, rate: 60 },
        { min: 150, max: 200, rate: 579 },
        { min: 200, max: 300, rate: 948 },
        { min: 300, max: 400, rate: 1617 },
        { min: 400, max: 500, rate: 1673 },
        { min: 500, max: Infinity, rate: 1728 },
      ];

      for (const { min, max, rate } of powerRates) {
        if (parsedPower >= min && parsedPower < max) {
          return rate;
        }
      }
      return 0;
    };

    // ---- ОФОРМЛЕНИЕ ----

    const getBrokerServices = (bodyType) => {
      return bodyType === "car" ? 70000 : 65000;
    };

    // комиссия компании
    const getCompanyFee = (price, bodyType) => {
      if (bodyType !== "car") return 60000;

      const priceNum = parseFloat(price);
      if (priceNum < 1000000) return 50000;
      if (priceNum < 2000000) return 60000;
      return 70000;
    };

    let exchangeRates;

    // Загружаем курсы валют
    fetch("https://www.cbr-xml-daily.ru/latest.js")
      .then((res) => res.json())
      .then((data) => {
        exchangeRates = data.rates;
        console.log("Курсы валют:", data.rates);
      })
      .catch((err) => console.error(err));

    const calculateAndDisplayResults = (formData) => {
      const {
        price,
        bodyType,
        engineType,
        engineVolume,
        power,
        age,
        clientType,
      } = formData;

      // доплата по стоимости
      const extraFee = getExtrafeeRate(price);

      // расходы по Японии
      const expensesJapanObject = getExpensesJapan(bodyType);
      const expensesJapan = expensesJapanObject.value;

      // фрахт
      const freightObject = getFreight(bodyType);
      const freight = freightObject.value;

      // доставка общая
      const delivery = expensesJapan + freight;

      // пошлина
      const tax = getTax(age, engineVolume, price, bodyType);

      // таможенный сбор
      const customFee = getCustomFee(price);

      // утилизационный сбор
      const recyclingFee = getRecyclingFee(
        age,
        clientType,
        engineType,
        engineVolume
      );

      // акциз на электро
      const excise = getExciseTax(power) * power;

      // НДС налог
      const taxVat = parseFloat(price) * 0.2;

      // Пошлина 15%
      const taxElectro = parseFloat(price) * 0.15;

      // таможенные пошлины (общая сумма)
      const taxTotal = tax + customFee + recyclingFee;

      // услуги брокера
      const brokerServices = getBrokerServices(bodyType);

      // комиссия компании
      const companyFee = getCompanyFee(price);

      // оформление (общая сумма)
      const servicesTotal = brokerServices + companyFee;

      const priceRub = Math.round(price / exchangeRates.JPY);

      // Сборка конструктора
      const assemblig = 23000;

      // общая стоимость
      const valuesToSumCutCar = [
        parseFloat(price),
        expensesJapan,
        freight,
        tax,
        assemblig,
        brokerServices,
        companyFee,
      ];
      console.log("valuesToSumCutCar", valuesToSumCutCar);

      const valuesToSumCar = [
        parseFloat(price),
        extraFee,
        expensesJapan,
        freight,
        customFee,
        recyclingFee,
        tax,
        brokerServices,
        companyFee,
      ];
      console.log("valuesToSumCar", valuesToSumCar);

      const valuesToSumElectro = [
        parseFloat(price),
        extraFee,
        expensesJapan,
        freight,
        excise,
        taxVat,
        customFee,
        taxElectro,
        recyclingFee,
        brokerServices,
        companyFee,
      ];
      console.log("valuesToSumElectro", valuesToSumElectro);

      const valuesToSum = (bodyType, engineType) => {
        if (bodyType === "car") {
          return engineType === "electric"
            ? valuesToSumElectro
            : valuesToSumCar;
        } else {
          return valuesToSumCutCar;
        }
      };

      const totalValues = valuesToSum(bodyType, engineType);
      const totalPrice = totalValues.reduce((acc, value) => acc + value, 0);

      // отображаем данные в html
      extraFeeElement.textContent = `${extraFee.toLocaleString()} ₽`;
      deliveryElement.textContent = `${delivery.toLocaleString()} ₽`;
      taxTotalElement.textContent = `${taxTotal.toLocaleString()} ₽`;
      taxElement.textContent = `${tax.toLocaleString()} ₽`;
      recyclingFeeElement.textContent = `${recyclingFee.toLocaleString()} ₽`;
      customFeeElement.textContent = `${customFee.toLocaleString()} ₽`;
      servicesTotalElement.textContent = `${servicesTotal.toLocaleString()} ₽`;
      brokerServicesElement.textContent = `${brokerServices.toLocaleString()} ₽`;
      companyFeeElement.textContent = `${companyFee.toLocaleString()} ₽`;
      totalPriceElement.textContent = `${totalPrice.toLocaleString()} ₽`;

      priceYenElement.textContent = `${price.toLocaleString()} ¥`;
      priceRubElement.textContent = `${priceRub.toLocaleString()} ₽`;
      expensesJapanYenElement.textContent = `${expensesJapanObject.original.toLocaleString()}`;
      expensesJapanRubElement.textContent = `${expensesJapanObject.converted.toLocaleString()}`;
      freightYenElement.textContent = `${freightObject.original.toLocaleString()}`;
      freightRubElement.textContent = `${freightObject.converted.toLocaleString()}`;
    };

    const formElement = document.getElementById("form");

    formElement.addEventListener("submit", function (event) {
      event.preventDefault();

      const formData = new FormData(this);
      const data = {};

      formData.forEach((value, key) => {
        data[key] = value;
      });

      // Проверяем заполнение обязательных полей
      if (
        !data.price ||
        !data.bodyType ||
        !data.engineVolume ||
        !data.age ||
        !data.clientType
      ) {
        alert("Пожалуйста, заполните все обязательные поля");
        return;
      }

      calculateAndDisplayResults(data);
    });