<template>
  <section class="comparisonBanner">
    <div class="container">
      <div class="why-cooper-heading">
        <h1>PRODUCT COMPARISON</h1>
      </div>
    </div>
  </section>
  <section class="product-comparison">
    <div class="container">
      <div class="product-heading">
        <p>
          Every Cooper tyre is engineered for specific needs, yet all deliver
          Total Performance. Compare their unique features and strengths below.
        </p>
      </div>
      <h2 class="sub-heading">TYRE COMPARISON</h2>
      <div class="compare-product">
        <div class="product-features">
          <div class="empty-space">
            Specifications
          </div>
          <div class="products-points staticBox d-flex justify-content-start"
            v-for="(point, index) in tyreSpecifications" :key="index">
            <span>{{ point }}</span>
          </div>
        </div>

        <!-- Product Data Section -->
        <template v-if="showProductArr">
          <div class="product-data" v-for="(data, mainIndex) in showProductArr" :key="mainIndex">
            <div class="img-info inner-selection">
              <div class="product-img" :class="data.warranty == true ? ' warranty-tag' : ''" v-if="data.image">
                <img :src="data.image[0]" alt="Tyre Image" />
              </div>
              <div class="cross-img">
                <span @click="deleteProduct(mainIndex)">
                  <img src="../assets/img/close.svg" alt="Delete" />
                </span>
              </div>
              <h4>{{ data.title }}</h4>
              <select @change="onVariationChange($event, mainIndex)">
                <option disabled :value="data?.sizes">Select Variation</option>
                <option :selected="option?.variantionId == data?.variantionId"
                  v-for="(option, index) in data?.variantsArr" :value="index" :key="i">
                  {{ option.sizes }}
                </option>
              </select>
            </div>

            <div>
              <div class="products-points tyre-spec">
                <span>{{
                  data?.variantField?.tyre_variant_appr_rim_width
                }}</span>
              </div>
              <div class="products-points tyre-spec">
                <span>{{ data?.variantField?.tyre_variant_utqg }}</span>
              </div>
              <div class="products-points tyre-spec">
                <span>{{ data?.variantField?.tyre_variant_od }}</span>
              </div>
              <div class="products-points tyre-spec">
                <span>{{ data?.variantField?.tyre_variant_loadindex }}</span>
              </div>
              <div class="products-points tyre-spec">

                <span>{{ data?.variantField?.tyre_variant_tread_depth }}</span>
              </div>
              <div class="products-points tyre-spec">
                <span>{{ data?.variantField?.tyre_variant_warranty }}</span>
              </div>
              <div class="products-points tyre-spec">
                <span>{{ data?.variantField?.tyre_variant_rimsize }}</span>
              </div>
            </div>
          </div>
        </template>
        <!-- Add Product Section -->
        <div class="product-data add_Product" v-if="showProductArr.length < 4">
          <div class="img-info outside-select ">
            <div class="product-selections" v-if="showDropdown && !showAddIcon && !isLoader">
              <div>
                <select v-model="selectedVariation" @change="onProductChange($event)">
                  <option disabled value="Select Product">
                    Select Product
                  </option>
                  <option v-for="(option, index) in productData" :value="index" :key="index">
                    {{ option.title }}
                  </option>
                </select>
              </div>
              <div>
                <select class="selector" v-model="selectedVariatedTxt" :disabled="!variantsData?.length"
                  :class="!variantsData?.length ? 'disable' : ''" @change="onVariationChange($event, 'i')">
                  <option disabled value="Select Variation">
                    Select Variation
                  </option>
                  <option v-for="(option, index) in variantsData" :value="index" :key="index">
                    {{ option.sizes }}
                  </option>
                </select>
              </div>
            </div>
            <div class="loading-container" v-if="isLoader">
              <div class="loading-container-spinner"></div>
              <div>Loading...</div>
            </div>
            <div v-if="showAddIcon" class="plus-icon">
              <div class="add-img" @click="addProduct()">
                <span>
                  <img src="../assets/img/add.svg" alt="Add Product" />
                </span>
              </div>
              <h5>Add a Product</h5>
            </div>
          </div>
          <div class="products-points add_column" v-for="(spec, i) in tyreSpecifications" :key="i">
            <span>—</span>
          </div>
        </div>
        <div class="product-data add_Product disableBox" v-if="showProductArr?.length < 3 && staticBox">
          <div class="img-info outside-select ">
            <div class="plus-icon">
              <div class="add-img">
                <span>
                  <img src="../assets/img/add.svg" alt="Add Product" />
                </span>
              </div>
              <h5>Add a Product</h5>
            </div>
          </div>
          <div class="products-points add_column" v-for="(spec, i) in tyreSpecifications" :key="i">
            <span>—</span>
          </div>
        </div>
        <div class="response-container fullPageLoader" v-if="isVariantFieldLoader">
          <div class="loading-container">
            <div class="loading-container-spinner"></div>
            <div>Loading...</div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
const productBaseUrl =
  "https://coopertiredev.demandtech.org/wp-json/cooper/v1/";
const VariationsBaseUrl = `${productBaseUrl}getVariants`;
const VariationsDetailBaseUrl = `${productBaseUrl}getVariantsDetail`;

export default {
  data() {
    return {
      specifications: [
        "APPROVED RIM WIDTH",
        "UTQG",
        "OD MM",
        "SPEED & LOAD INDEX",
        "TREAD DEPTH (MM) ACTIONS",
        "WARRANTY (KM)",
        "SIZE 245/75R16",
      ],
      selectedProductIndex: Array(4).fill(""),
      selectedVaraitionsIndex: Array(4).fill(""),
      productData: [],
      loading: true,
      selectedData: [],
      productIds: Array(4).fill([]), // Initialize with empty arrays
      varitionDetails: Array(4).fill([]), // Initialize with empty arrays
      variantsData: [],
      defaultObj: {},
      showProductArr: [],
      showAddIcon: true,
      selectedVariation: "Select Product",
      selectedVariatedTxt: "Select Variation",
      isLoader: false,
      showDropdown: false,
      showVariantDrop: false,
      showVariantLoader: false,
      isVariantFieldLoader: false,
      filterId: '',
      onlyVariantionId: [],
      staticBox: false,
    };
  },
  computed: {
    tyreSpecifications() {
      return this.specifications;
    },
    product() {
      return this.selectedData;
    },
    detailVariations() {
      return this.varitionDetails;
    },
  },
  mounted() {
    this.$nextTick(() => {
      const productPoints = this.$refs.productPoints[0];
      const addColumns = this.$refs.addColumn;
      if (productPoints && addColumns) {
        const height = productPoints.clientHeight;
        addColumns.forEach(column => {
          column.style.height = `${height}px`;
          column.classList.add('add_column');
        });
      }
    });
  },
  methods: {
    deleteProduct(index) {
      this.showAddIcon = true;
      this.showProductArr.splice(index, 1);
      this.loading = false;
      this.showDropdown = false;
      this.staticBox = false;
      this.selectedVariation = "Select Product";
      this.selectedVariatedTxt = "Select Variation";
    },

    addProduct() {
      this.showAddIcon = false;
      this.staticBox = true
      if (this.productData?.length) {
        this.isLoader = false;
        this.showDropdown = true;
      } else {
        this.isLoader = true;
      }
    },

    async fetchProducts() {
      try {
        const response = await fetch(`${productBaseUrl}getproducts`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
        });

        if (!response.ok) throw new Error("Failed to fetch products");
        this.productData = await response.json();
        if (this.productData?.length) {
          this.isLoader = false;
          this.showDropdown = true;
        }
      } catch (error) {
        console.error("Error fetching products:", error.message || error);
      }
    },

    async onProductChange(event) {
      const index = event.target.value;
      this.isLoader = true
      const selectedProd = this.productData[index];
      let productId;
      if (selectedProd != undefined) {
        this.defaultObj = { ...selectedProd };
        productId = this.defaultObj?.product_id;
      }
      try {
        const response = await fetch(VariationsBaseUrl, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ productId }),
        });

        if (!response.ok) throw new Error("Failed to fetch variations");
        let result = await response.json();
        this.variantsData = result.filter((ele) => ele?.sizes != "");
        // if (this.onlyVariantionId?.length) {
        //   this.variantsData.forEach((element, index) => {
        //     let checkConditon = this.onlyVariantionId.includes(element?.variantionId)
        //     if (checkConditon) {
        //       this.variantsData[index]["selected"] = true
        //     }
        //   });
        // }
        if (this.variantsData?.length) {
          this.showVariantDrop = true;
          this.showVariantLoader = false;
          this.isLoader = false
          this.defaultObj["variantsArr"] = this.variantsData;
        }
      } catch (error) {
        console.error("Error fetching variations:", error.message || error);
      }
    },

    async onVariationChange(event, condition) {
      const index = event.target.value;
      let selectVariantObj;
      if (condition == "i") {
        this.isLoader = true;
        this.showDropdown = false;
        selectVariantObj = this.variantsData[index];
        this.filterId = this.variantsData[index]
      } else {
        this.isVariantFieldLoader = true;
        let particularProd = this.showProductArr[condition];
        let particularVariant = particularProd?.variantsArr;
        selectVariantObj = particularVariant[index];
      }
      this.defaultObj = { ...this.defaultObj, ...selectVariantObj };
      this.onlyVariantionId.push(selectVariantObj?.variantionId);
      if (!selectVariantObj?.variantionId) {
        console.error("Variation ID is not defined");
        return;
      }

      try {
        const response = await fetch(VariationsDetailBaseUrl, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ variantId: selectVariantObj?.variantionId }),
        });

        if (!response.ok) {
          throw new Error("Failed to fetch variation details");
        }
        let result = await response.json();
        let variantField = result[0];
        if (variantField != undefined) {
          if (condition == "i") {
            this.variantsData = [];
            this.showAddIcon = true;
            (this.showDropdown = false), (this.isLoader = false);
            this.defaultObj = { ...this.defaultObj, variantField };
            this.showProductArr.push(this.defaultObj);
            this.selectedVariation = "Select Product";
            this.selectedVariatedTxt = "Select Variation";
            this.staticBox = false;
          } else {
            this.isVariantFieldLoader = false;
            let initialData = this.showProductArr[condition];
            initialData["variantField"] = variantField;
            this.showProductArr.splice(condition, 1, initialData);
          }
        }

        // this.varitionDetails[index] = await response.json();
      } catch (error) {
        console.error(
          "Error fetching variation details:",
          error.message || error
        );
      }
    },
  },
  created() {
    this.fetchProducts(); // Fetch products when the component is created
  },
};

</script>
<style>
.product-comparison .container {
  padding: 0px;
}

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

.staticBox {
  padding-left: 20px !important;
}

.comparisonBanner {
  background-image: url("https://coopertiredev.demandtech.org/wp-content/uploads/2024/06/global_banner_bg-scaled.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 0px;
}

.why-cooper-heading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  flex-direction: column;
}

.comparisonBanner .why-cooper-heading h1 {
  color: #ffff;
  font-weight: 700;
  font-size: 48px;
  line-height: 37px;
  text-transform: uppercase;
}

.plus-icon h5 {
  font-size: 20px;
  line-height: 37px;
  font-weight: 400;
}

section.product-comparison {
  margin: 40px 0 152px 0;
}

.product-heading p {
  font-size: 16px;
  color: #333333;
  text-align: center;
  line-height: 24px;
  width: 666px;
  margin: 0 auto;
}

.sub-heading {
  font-size: 30px;
  line-height: 60px;
  color: #333333;
  font-weight: 600;
  margin: 87px 0 84px 0;
}

.products-points {
  padding: 5px;
  min-height: 65px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* padding-left: 19px; */
}

.products-points span {
  color: #666666;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
}

.tyre-spec span {
  font-weight: 500;
}

.product-features .products-points:nth-child(even) {
  background-color: #F5F5F5;
}

.product-data .products-points:nth-child(odd) {
  background-color: #F5F5F5;
}

.add_Product .products-points:nth-child(even) {
  background-color: #F5F5F5;
}

.add_Product .products-points:nth-child(odd) {
  background-color: #FFFFFF;
}

.compare-product {
  display: flex;
  border: 1px solid #CCCCCC;
  position: relative;
}

.product-features {
  width: 100%;
  max-width: 352px;
  display: inline-block;
  vertical-align: top;
}

.empty-space {
  height: 200px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  color: #666;
  font-size: 28px;
  line-height: 24px;
  font-weight: 700;
}

.product-data {
  width: 100%;
  border-left: 1px solid #CCCCCC;
  max-width: 242px;
}

.add_Product {
  max-width: 100%;
}

.img-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 50px 20px 40px;
  height: 100%;
  max-height: 200px;
}

.img-info select {
  width: 100%;
  max-width: 87%;
  height: 44px;
  font-size: 20px;
  /* background-color: #F5F5F5; */
  /* text-align: center; */
  padding: 0px 20px;
  border: none;
  appearance: none;
  color: #333333;
  border-radius: 5px;
}

.outside-select select {
  margin-top: 10px;
}

.img-info select {
  background: #F5F5F5 url("https://coopertiredev.demandtech.org/wp-content/uploads/2024/09/selectArrow.png") no-repeat;
  background-position: 94%, 0%;
  width: 16rem;
  background-size: 25px;
}

.img-info h4 {
  color: #252525;
  text-transform: uppercase;
  line-height: 24px;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px;
}

.product-img {
  width: auto;
  height: 91px;
  margin-bottom: 10px;
}

.product-img img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.cross-img {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
  background-color: #FFFFFF;
  border-radius: 50px;
  padding: 5px;
  box-shadow: 0px 2px 6px #00000014;
}

.plus-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.add-img {
  /* height: 48px;
  width: 48px; */
  cursor: pointer;
  height: 110px;
  width: 110px;
  cursor: pointer;
  border: 1px dashed #24272c;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.add-img span {
  height: 4rem;
  width: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-img img {
  height: 100%;
  width: 100%;
}

.add-img h5 {
  font-size: 20px;
  line-height: 37px;
  color: #333333;
  margin-bottom: 20px;
}

/*
.add_Product .add_column {
} */
.add_Product {
  border-left: 1px solid #CCCCCC;
  display: inline-block;
  width: calc(100% - 357px);
  vertical-align: top;
}

.rigthBorder {
  border-right: 1px solid #CCCCCC;
}

.loading-container .loading-container-spinner {
  -webkit-animation: spinner 1.5s linear infinite;
  animation: spinner 1.5s linear infinite;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='30' height='30' xmlns='http://www.w3.org/2000/svg' class='icon'%3E%3Cpath d='M15.061 7.495c-4.154 0-7.531 3.375-7.531 7.525s3.377 7.525 7.531 7.525 7.531-3.375 7.531-7.525-3.377-7.525-7.53-7.525zm0 .94a6.58 6.58 0 0 1 6.59 6.585 6.58 6.58 0 0 1-6.59 6.585 6.58 6.58 0 0 1-6.59-6.585 6.58 6.58 0 0 1 6.59-6.584z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.061 18.402c-.849 0-1.595.635-2.105 1.656l-.67 1.337.843.42.669-1.337c.42-.838.893-1.135 1.263-1.135.37 0 .844.297 1.263 1.135l.67 1.338.842-.42-.67-1.338c-.51-1.02-1.256-1.656-2.105-1.656zm3.219-2.336c-.263.806.111 1.711.924 2.512l1.067 1.05.66-.671-1.066-1.05c-.668-.657-.805-1.199-.69-1.55.114-.352.543-.71 1.47-.85l1.48-.223-.14-.93-1.48.223c-1.128.17-1.963.682-2.226 1.489zm-1.23-3.781c.687.499 1.664.423 2.677-.102l1.328-.69-.433-.834-1.329.689c-.832.432-1.39.394-1.69.176-.299-.217-.507-.735-.354-1.66l.246-1.475-.929-.154-.245 1.475c-.188 1.125.042 2.077.729 2.575zm-3.978 0c.687-.498.916-1.45.73-2.575l-.246-1.475-.929.154.246 1.475c.153.925-.055 1.443-.354 1.66-.3.218-.858.256-1.69-.176l-1.328-.69-.434.836 1.328.689c1.013.525 1.99.6 2.677.102zm-1.229 3.781c-.263-.807-1.098-1.32-2.226-1.49l-1.48-.222-.14.93 1.48.223c.927.14 1.356.498 1.47.85.115.351-.021.893-.69 1.55l-1.066 1.05.66.67 1.067-1.049c.813-.8 1.187-1.705.925-2.512z'/%3E%3Cpath d='M15.06 12.668a2.36 2.36 0 0 0-2.353 2.352 2.36 2.36 0 0 0 2.354 2.352 2.36 2.36 0 0 0 2.354-2.352 2.36 2.36 0 0 0-2.354-2.351zm0 .941c.786 0 1.413.626 1.413 1.411s-.627 1.41-1.412 1.41a1.404 1.404 0 0 1-1.412-1.41c0-.785.627-1.41 1.412-1.41zm.382-1.839a.47.47 0 1 0-.76-.553.47.47 0 0 0 .76.553zm-3.357 1.885a.47.47 0 1 0-.762.553.47.47 0 0 0 .762-.553zm.758 3.771a.471.471 0 1 0 .291.896.471.471 0 0 0-.29-.897zm3.825.447a.47.47 0 0 0 .803.332.47.47 0 1 0-.803-.332zm1.61-3.498a.47.47 0 1 0 .29-.894.47.47 0 0 0-.29.894z'/%3E%3Cpath d='M13.872 1.433C6.368 2.09.808 8.712 1.465 16.21c.656 7.498 7.282 13.053 14.786 12.397 7.504-.656 13.066-7.276 12.41-14.775-.658-7.498-7.286-13.055-14.79-12.399zm.083.937c6.997-.611 13.155 4.552 13.768 11.543.612 6.992-4.555 13.145-11.553 13.757-6.997.612-13.155-4.551-13.767-11.543C1.79 9.135 6.957 2.982 13.955 2.37z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.565 1.391a.47.47 0 0 0-.373.718l.699 1.163a.47.47 0 1 0 .807-.483l-.699-1.165a.47.47 0 0 0-.434-.233zm-4.451.954a.47.47 0 0 0-.289.841l1.054.854a.472.472 0 0 0 .594-.73l-1.056-.855a.471.471 0 0 0-.303-.11zM6.21 4.772a.47.47 0 0 0-.121.916l1.283.443a.471.471 0 1 0 .307-.889l-1.283-.443a.471.471 0 0 0-.186-.028zM4.778 8.356l-1.359.021a.471.471 0 1 0 .017.94l1.357-.02a.471.471 0 1 0-.015-.941zm-1.491 3.882a.472.472 0 0 0-.17.032l-1.268.487a.47.47 0 1 0 .337.878l1.267-.487a.471.471 0 0 0-.166-.911zM3.182 16.4a.471.471 0 0 0-.286.12l-1.025.89a.47.47 0 1 0 .616.709l1.026-.89a.47.47 0 0 0-.33-.828zm1.372 3.94a.47.47 0 0 0-.412.248l-.658 1.185a.47.47 0 1 0 .822.457l.66-1.187a.47.47 0 0 0-.412-.703zm2.59 3.24a.47.47 0 0 0-.437.403l-.214 1.34a.47.47 0 1 0 .929.148l.213-1.34a.47.47 0 0 0-.49-.55zm7.704 2.954a.47.47 0 0 0-.42.719l.698 1.163a.47.47 0 0 0 .653.175.47.47 0 0 0 .154-.658l-.699-1.163a.47.47 0 0 0-.386-.235zm4.093-.642a.47.47 0 0 0-.288.841l1.053.854a.473.473 0 0 0 .749-.231.471.471 0 0 0-.155-.5l-1.056-.854a.471.471 0 0 0-.303-.11zm3.672-2.01a.471.471 0 0 0-.17.916l1.284.443a.472.472 0 0 0 .631-.472.471.471 0 0 0-.324-.417l-1.283-.443a.471.471 0 0 0-.138-.028zm4.074-3.158-1.357.021a.471.471 0 1 0 .017.94l1.357-.02a.471.471 0 1 0-.017-.941zm1.422-4.351a.47.47 0 0 0-.17.032l-1.268.485a.468.468 0 0 0-.285.613.473.473 0 0 0 .621.265l1.269-.485a.471.471 0 0 0-.167-.91zm-.139-4.57a.471.471 0 0 0-.334.12l-1.024.888a.47.47 0 1 0 .616.711l1.026-.89a.47.47 0 0 0-.285-.83zm-1.742-4.239a.471.471 0 0 0-.41.248l-.659 1.185a.47.47 0 1 0 .822.457l.66-1.186a.47.47 0 0 0-.413-.704zM23.14 4.169a.471.471 0 0 0-.439.402l-.213 1.34a.47.47 0 1 0 .93.147l.214-1.34a.47.47 0 0 0-.491-.549zm-4.019-2.146a.471.471 0 0 0-.457.568l.257 1.332a.47.47 0 1 0 .925-.18l-.258-1.332a.47.47 0 0 0-.467-.388zm-8.386 23.709a.47.47 0 0 0-.458.566l.26 1.332a.471.471 0 1 0 .923-.179l-.258-1.332a.47.47 0 0 0-.467-.387z'/%3E%3C/svg%3E");
  background-size: cover;
  height: 50px;
  margin: 0 auto;
  width: 50px;
}

.fullPageLoader {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: #252525; */
  z-index: 99;
}

.fullPageLoader::before {
  content: "";
  opacity: 0.5;
  top: 0;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.selector.disable {
  background-color: #E4E4E4;
  cursor: not-allowed;
}

.inner-selection .warranty-tag {
  position: relative;

  &::before {
    position: absolute;
    content: '80,000 KM WARRANTY';
    width: 79px;
    height: 34px;
    background-color: #1F255B;
    color: #fff;
    text-align: center;
    LEFT: -49PX;
    top: -13px;
    border-radius: 10px;
    font-size: 10px;
    line-height: 11px;
    font-weight: 600;
    padding: 6px 7px;
  }
}

@media screen and (max-width: 1400px) {
  .products-points span {
    font-size: 14px;
  }

  .img-info select {
    font-size: 16px;
  }

  .add_Product {
    border-left: 1px solid #CCCCCC;
    display: inline-block;
    width: calc(100% - 319px);
    vertical-align: top;
  }

  .img-info select {
    width: 12rem;
  }

  .product-data {
    width: 210px;
  }

  .add_Product {
    width: 100%;
  }
}

.disableBox {
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 99;
    cursor: not-allowed;
  }
}

@media screen and (max-width: 1200px) {
  .img-info {
    max-height: 296px;
  }

  section.product-comparison {
    margin: 40px 0 72px;
  }

  .product-heading p {
    font-size: 14px;
    line-height: 20px;
  }

  .sub-heading {
    margin: 30px 0;
    text-align: center;
  }

  .product-features {
    max-width: 100%;
  }

  .compare-product {
    overflow: auto;
    overflow-y: auto;
    width: 100%;
  }

  .products-points span {
    white-space: nowrap;
    line-height: 16px;
    font-size: 14px;
  }

  .products-points {
    padding: 28.5px 15px;
  }

  .product-data {
    width: 100%;
    min-width: 34%;
  }

  .img-info h4 {
    font-size: 19px;
  }

  .img-info select {
    height: 30px;
    padding: 0 20px;
    max-width: 76%;
  }

  .outside-select select {
    max-width: 90%;
  }

  .empty-space,
  .add_Product .img-info {
    height: 295px;
  }

  .add_Product .add_column {
    height: 3.127rem;
  }

  .product-heading p {
    width: auto;
  }
}

@media screen and (max-width: 991px) {
  .product-data {
    min-width: 30%;
  }
}

@media screen and (max-width: 767px) {
  .product-data {
    min-width: 68%;
  }

  .product-comparison .container {
    padding: 15px;
  }
}

@media screen and (max-width: 576px) {
  .img-info select {
    max-width: 76%;
    padding: 0 12px;
  }

  .products-points span {
    font-size: 12px;
  }

  .product-data {
    min-width: 50%;
  }

  .img-info h4 {
    font-size: 15px;
  }

  .products-points {
    padding: 28.5px 10px;
  }

  .product-heading p {
    font-size: 11px;
    line-height: 18px;
    /* width: 392px; */
  }

  .inner-selection select {
    max-width: 100%;
    padding: 0px 8px;
  }
}

@media screen and (max-width: 379px) {
  .img-info select {
    max-width: 65%;
    padding: 0 6px;
    font-size: 13px;
  }

  .inner-selection select {
    max-width: 86%;
    padding: 0px 8px;
  }

  .empty-space,
  .add_Product .img-info {
    padding-left: 0px;
  }
}
</style>