@use "./functions.scss" as *;
// .employee_bulk_order_header {
//   display: flex;
//   justify-self: end;
//   gap: 10px;
//   .single_payment_action {
//     display: flex;
//     align-items: center;
//     gap: 6px;
//   }
//   .svg_icon {
//     display: flex;
//     align-items: center;
//   }
// }

.employee-bulk-order-section {
  height: 100%;
  width: 100%;
  overflow: auto;
  .employee-products {
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: right;
    padding-left: 30px;
    .products_header {
      width: 100%;
      .hr_line {
        position: relative;
        text-align: center;
        display: inline-block;
        padding: 0 10px;
        font-size: 24px;
        z-index: -1;
        width: 100%;
        &::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 0;
          width: 100%;
          height: 1px;
          background: var(--_gray-200); /* line color */
          z-index: -1;
        }
        span {
          padding: 8px 12px;
          display: inline-block;
          background: var(--_base-white);
          font-size: 14px;
        }
      }
    }
  }
  .employee-content-section {
    display: flex;
    height: calc(100% - 70px);
    width: 100%;
    .employees-section-title {
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      font-weight: 600;
      font-size: 14px;
      margin-right: 10px;
      display: flex;
      justify-content: center;
      overflow: visible;
      position: sticky;
      top: 0;
      height: 100%;
      position: relative;
      &:before,
      &:after {
        content: "";
        width: 1px;
        height: calc(50% - 50px);
        background: #eaecf0;
        position: relative;
        left: -10px;
      }
      &:before {
        top: -14px;
      }
      &:after {
        top: 14px;
      }
      .title {
        background: #ffffff;
        height: max-content;
      }
    }
    .employee-content {
      width: calc(100% - 29px);
      display: flex;
      .em_content {
        // display: flex;
        .add-entity-section {
          width: 250px;
          height: 88px;
          position: relative;
          border: 1px solid var(--_gray-200);
          border-bottom: none;
          border-right: none;
          border-radius: 6px;
          .svg_icon {
            position: absolute;
            display: flex;
            align-items: center;
            background: #243dc6;
            width: 20px;
            height: 20px;
            justify-content: center;
            border-radius: 50%;
            cursor: pointer;
            svg {
              path {
                stroke: #fff;
              }
            }
          }
          .em_add-product {
            position: absolute;
            right: 0;
            .dropdown-with-input-section {
              border: 0;
              background-color: transparent;
              .dropdown-input-section {
                width: 0;
                height: 0;
                border: 0;

                &:focus-within {
                  border: 0;
                  outline: 0;
                }
              }
            }
            .svg_icon {
              right: -10px;
              top: -10px;
            }
          }
          .em_add-employee {
            position: absolute;
            bottom: 0;
            .dropdown-with-input-section {
              border: 0;
              background-color: transparent;
              &:focus-within {
                border: 0;
                outline: 0;
              }
            }
            .dropdown-menu {
              top: 38px;
            }
            .svg_icon {
              left: -10px;
              bottom: -10px;
            }
          }
          .em_add-product-disabled {
            pointer-events: none;
            opacity: 0.5;
            cursor: default;
          }
        }
        .employees-section {
          height: calc(100% - 88px);
          overflow: auto;
          width: 250px;
          border: 1px solid var(--_gray-200);
          border-top: 0;
          border-right: 0;

          .employee_card {
            padding: 12px;
            // display: grid;
            gap: 12px;
            border-bottom: 1px solid var(--_gray-200);
            cursor: pointer;
            &:not(&.selected):hover {
              background-color: var(--_primary-25);
            }
            &:first-child {
              border-top: 1px solid var(--_gray-200);
            }
            // height: 112px;
            width: 100%;
            .em_data {
              display: flex;
              // align-items: baseline;
              gap: 10px;
              margin-bottom: 6px;
              .em_profile {
                width: 32px;
                height: 32px;
                background: var(--_gray-200);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 14px;
                font-weight: 600;
                flex-shrink: 0;
                overflow: hidden;
                img {
                  max-width: 100%;
                  max-height: 100%;
                  object-fit: contain;
                }
              }
              .em_info {
                display: grid;
                gap: 4px;
                .em_name_section {
                  display: flex;
                  align-items: center;
                  .em_name {
                    width: 158px;
                    color: var(--_gray-900);
                    font-size: 14px;
                    font-weight: 600;
                  }
                  .svg_icon {
                    display: flex;
                    cursor: pointer;
                    &:hover {
                      svg path {
                        stroke: var(--_error-700);
                      }
                    }
                  }
                }
                .em_code {
                  width: 158px;
                  color: var(--_gray-600);
                  font-size: 12px;
                }
              }
              .em_profile_text {
                width: 100%;
                text-align: center;
              }
            }
            .em_entity-status {
              display: flex;
              gap: 10px;
              margin-left: 14px;
              margin-top: 12px;
            }
            .emp_action_btns {
              display: flex;
              gap: 8px;
              margin-top: 12px;
              .discard_btn {
                padding: 8px 16px;
                border-radius: 4px;
                width: 100%;
                &:hover {
                  background-color: var(--_gray-200);
                }
              }
              .save_btn {
                padding: 8px 16px;
                border-radius: 4px;
                width: 100%;
                color: var(--_primary-400);
                border: 1px solid var(--_primary-400);
                &:hover {
                  background-color: var(--_primary-50);
                }
              }
            }
          }
        }
        .employee_card.selected {
          background: var(--_primary-50);
          border-bottom: 2px solid var(--_primary-400);
        }
        .em_empty_section {
          width: 100%;
          height: 100%;
          text-align: center;
          display: grid;
          align-items: anchor-center;
          color: #475467;
          border-top: 1px solid var(--_gray-200);
        }
      }
      .products-section {
        width: calc(100% - 250px);
        height: 100%;
        border: 1px solid var(--_gray-200);
        border-right: 0;
        display: flex;
        overflow-x: auto;
        .em_product {
          min-width: 320px;
          width: 320px;
          height: 100%;
          border: 1px solid var(--_gray-200);
          border-left: 0;
          border-top: 0;
          display: flex;
          flex-direction: column;
          &:hover {
            box-shadow: 0 0 10px rgb(0, 0, 0, 0.2);
          }
          .em_product-data {
            width: 100%;
            border-bottom: 1px solid var(--_gray-200);
            .em_product-info {
              border-bottom: 1px solid var(--_gray-200);
              height: 68px;
              .product-card {
                display: grid;
                width: 100%;
                gap: 8px;
                grid-template-columns: 40px auto;
                .image-section {
                  border-radius: 50%;
                  width: 32px;
                  height: 32px;
                  overflow: hidden;
                  background: var(--_gray-100);
                  img {
                    width: 100%;
                    border-radius: 2px;
                  }
                }
                .product-card-info {
                  display: flex;
                  justify-content: space-between;
                  align-items: start;
                  gap: 12px;
                  width: 100%;
                }
                .info-section {
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  .header {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    position: relative;
                    .product-name {
                      font-weight: 600;
                      font-size: 16px;
                      color: #1a1a1a;
                    }
                  }
                  .em_p_code_s {
                    display: flex;
                    gap: 4px;
                    font-size: 12px;
                  }
                  .item-number,
                  .quota {
                    font-size: 14px;
                    color: #6b7280;
                    margin-top: 2px;
                  }

                  .item-number span,
                  .quota span {
                    margin-left: 4px;
                  }
                }
                .svg_icon {
                  cursor: pointer;
                  &:hover {
                    svg path {
                      stroke: var(--_error-700);
                    }
                  }
                }
              }
            }
            .selecte_variants_for_cart {
              height: 68px;
              overflow: auto;
              padding: 8px;
              color: var(--_gray-600);
              .variant_info {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100%;
                border-radius: 4px;
                &:has(.error) {
                  color: var(--_gray-400);
                  background-color: var(--_base-white);
                }
                &.error {
                  color: var(--_error-700);
                  background-color: var(--_error-50);
                }
              }
              .variantOptionValues {
                height: 24px;
                color: #475467;
                font-size: 14px;
                margin-bottom: 1px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 4px 8px;
                cursor: pointer;
                &.active_vr {
                  background-color: var(--_primary-25);
                  color: var(--_primary-500);
                  border-radius: 4px !important;
                  line-height: 14px;
                }
                &:hover {
                  color: var(--_primary-400);
                  .variantOptionValues_actions {
                    opacity: 1;
                  }

                  .svg_icon {
                    svg path {
                      stroke: var(--_error-700);
                    }
                  }
                }
                .variantOptionValues_text {
                  width: calc(100% - 40px);
                  padding-right: 4px;
                }
                .variantOptionValues_actions {
                  display: flex;
                  gap: 8px;
                  align-items: center;
                  // width: 40px;
                  opacity: 0;
                  .svg_icon {
                    display: flex;
                    svg {
                      width: 18px;
                      height: 18px;
                    }
                  }
                }
              }
            }
            .em_product-variant,
            .em_product-info {
              // height: 50%;
              padding: 8px;
            }
            .em_product-variant {
              height: 68px;
              .em_variant-status {
                display: flex;
                gap: 10px;
              }
            }
          }
          .validation-info {
            background-color: var(--_error-50);
            color: var(--_error-700);
            font-size: 14px;
            text-align: center;
            padding-block: 4px 6px;
            margin-top: -1px;
          }
          .em_pr_actions {
            display: flex;
            justify-content: end;
            gap: 8px;
            height: 40px;
            align-items: center;
            border-bottom: 1px solid #d0d5dd;
            padding: 0 12px;
            .action {
              font-size: 14px;
              cursor: pointer;
            }
            .discard {
              color: #475467;
            }
            .save {
              color: #243dc6;
            }
          }
          .qty_exist_info {
            background-color: var(--_warning-50);
            color: var(--_warning-500);
            padding: 0px 8px 4px 8px;
            text-align: center;
            border-bottom: 1px solid var(--_warning-200);
          }
          .product-option-details {
            height: calc(100% - 214px);
            width: 100%;
            overflow: auto;
            padding: 8px;
            flex-grow: 1;
            overflow-y: auto;
            .em_product_options {
              display: flex;
              flex-direction: column;
              gap: 12px;
              .em_p_variant_options {
                display: flex;
                flex-direction: column;
                gap: 16px;
                .em_p_opt {
                  margin-bottom: 4px;
                  .em_opt_name {
                    font-size: 12px;
                    color: #101828;
                    font-weight: 500;
                    display: block;
                    margin-bottom: 6px;
                  }
                  .em_p_opt_values {
                    display: flex;
                    gap: 8px;
                    align-items: center;
                    // padding: 8px 0;

                    .em_opt_val {
                      cursor: pointer;
                      &:hover {
                        // scale: 1.01;
                        transition: all 0.2s;
                      }
                    }
                    .em_opt_val.selected {
                      border: 1px solid var(--_primary-400);
                      color: var(--_primary-400);
                      font-weight: 600;
                    }
                    .em_opt_val.not-avl {
                      position: relative;
                      overflow: hidden;
                      cursor: not-allowed;
                      pointer-events: none;
                      &:after {
                        content: "";
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        left: 0;
                        top: 0;
                        background: url(https://sellerscommerce.sirv.com/00000000-0000-0000-0000-000000000000/development/Line%207.png);
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                        overflow: hidden;
                      }
                    }
                    .em_opt_val_swatch {
                      min-width: 28px;
                      min-height: 28px;
                      float: left;
                      margin: 0px 4px 4px 0px;
                      border-radius: 50%;
                      background-size: 100% 100%;
                      background-repeat: no-repeat;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      &.selected {
                        min-width: 45px;
                        border-radius: 20px;
                        outline: 1px solid var(--_primary-400);
                        border: 2px solid var(--_base-white);
                      }
                    }
                    .em_opt_val_single {
                      min-width: 32px;
                      min-height: 32px;
                      max-width: max-content;
                      padding-inline: 6px;
                      text-align: center;
                      border-radius: 6px;
                      float: left;
                      border: 1px solid #d0d5dd;
                      font-size: 16px;
                      font-weight: 400;
                      color: var(--_gray-600);
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    }
                    .em_opt_val_single.selected {
                      background: var(--_primary-25);
                    }

                    // .em_opt_val_swatch.selected  {

                    // }
                  }
                }
              }
            }
          }
          .product-qty-section {
            height: 56.74px;
            display: flex;
            gap: 8px;
            padding: 8px;
            border-top: 1px solid #dde0e6;
            input {
              height: 100%;
              width: 50%;
              border: 1px solid #d0d5dd;
              border-radius: 4px;
              text-align: center;
              font-weight: 600;
              font-size: 16px;
              color: #101828;
              &:focus {
                border: 1px solid var(--_primary-300);
                outline: 2px solid var(--_primary-100);
              }
            }
            .add_to_cart_btn_for_employee_bulk {
              height: 100%;
              width: 50%;
              background: var(--_primary-400);
              border-radius: 4px;
              color: var(--_base-white);
              font-size: 16px;
              &:hover {
                background-color: var(--_primary-500);
              }
            }
          }
          .invalid_qty {
            border: #f51605 1px solid !important;
          }
        }
        .invalid_em_pr {
          border: #f51605 1px solid !important;
        }
      }
    }
  }

  .employee_product_actions_sec {
    width: 50%;
    display: flex;
    justify-content: right;
    gap: 12px;
    .employee_product_action {
      padding: 12px 16px;
      color: var(--_gray-600);
      border-radius: 6px;
      cursor: pointer;
      &:hover {
        background-color: var(--_primary-25);
      }
    }

    .employee_product_action_save {
      color: var(--_primary-400);
      padding: 12px 16px;
      border-radius: 6px;
      cursor: pointer;

      &:hover {
        background-color: var(--_primary-25);
      }
    }
  }

  .icon_with_label_section {
    display: flex;
    gap: 4px;
    .svg_icon {
      svg path {
        stroke: var(--_primary-400);
      }
    }
    .label_elm {
      color: var(--_primary-400);
      font-size: 14px;
      text-decoration: underline;
    }
  }

  // checkout styles
  .emp_bulk_order_chk {
    .em_chk_wrapper {
      height: 100%;
      width: 100%;
      background-color: var(--_gray-50);
      .em_quota_container {
        display: flex;
        flex-direction: column;
        position: sticky;
        top: 0;
        z-index: 10;

        // employee checkout flow start
        .quota-bar-container {
          display: flex;
          align-items: center;
          padding: 10px 16px;
          background-color: #fff;
          border-bottom: 1px solid #ddd;
          font-size: 14px;
          white-space: nowrap;

          .quota-label {
            font-weight: 500;
            margin-right: 10px;
            color: #333;
          }

          .scroll-btn {
            background: none;
            border: none;
            font-size: 16px;
            padding: 4px 8px;
            cursor: pointer;
            color: #555;
            display: flex;

            &:hover {
              color: #000;
            }
          }

          .quota-scroll {
            display: flex;
            overflow-x: auto;
            scrollbar-width: none; // Firefox
            -ms-overflow-style: none; // IE 10+
            flex: 1;

            &::-webkit-scrollbar {
              display: none;
            }
          }

          .quota-item {
            display: flex;
            align-items: center;
            gap: 4px;
            color: #444;
            &:not(:last-child):after {
              content: "";
              display: inline-block;
              height: 20px;
              width: 1px;
              background: var(--_gray-300);
              margin-inline: 24px;
            }

            .quota-name {
              font-weight: 600;
            }

            .quota-count {
              color: #222;
            }

            .quota-expiry {
              font-size: 12px;
              color: #999;
              margin-left: 4px;
            }
          }
        }

        .user-info-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 12px 16px;
          background-color: #fff;
          border-bottom: 1px solid #ddd;
          font-size: 14px;

          .user-info-left {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            svg {
              display: flex;
            }

            .user-name {
              font-weight: 600;
              color: var(--_gray-900);
              border-right: 1px solid var(--_gray-400);
              padding-right: 16px;
              margin-right: 16px;
            }

            .user-item {
              display: flex;
              align-items: center;
              & > span {
                display: inline-block;
                margin-right: 4px;
              }
              color: #555;
              &:not(:last-child):after {
                content: "";
                display: inline-block;
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background-color: var(--_gray-400);
                margin-inline: 16px;
              }

              .icon {
                margin-right: 6px;
                color: #888;
              }
            }
          }
          .user-info-right {
            .save-btn {
              padding: 8px 16px;
              border-radius: 4px;
              background-color: var(--_primary-500);
              color: var(--_base-white);
              font-weight: 500;
              font-size: 14px;
            }
          }

          .trigger-btn {
            display: flex;
            padding: 6px;
            border-radius: 4px;
            color: var(--_gray-600);
            &:hover {
              background: var(--_error-50);
              color: var(--_error-700);
            }
          }

          .user-info-right {
            display: flex;
            align-items: center;
            gap: 8px;

            .nav-button,
            .close-button {
              background: none;
              border: none;
              font-size: 16px;
              cursor: pointer;
              color: #555;
              padding: 4px 8px;

              &:hover {
                color: #000;
              }
            }

            .close-button {
              font-size: 20px;
            }
          }
        }

        .gallery-container {
          display: flex;
          align-items: center;
          padding: 8px 12px;
          background-color: #fff;
          border-top: 1px solid #ddd;
          border-bottom: 1px solid #ddd;
        }

        .nav-arrow {
          background: none;
          border: none;
          font-size: 18px;
          padding: 8px;
          cursor: pointer;
          color: #666;

          &:hover {
            color: #000;
          }
        }

        .gallery-scroll {
          display: flex;
          overflow-x: auto;
          gap: 16px;
          padding: 0 8px;
          scrollbar-width: none;
          -ms-overflow-style: none;
          flex: 1;

          &::-webkit-scrollbar {
            display: none;
          }
        }

        .gallery-item {
          min-width: 250px;
          background: var(--_base-white);
          border-radius: 4px;
          padding: 8px;
          cursor: pointer;
          border: 2px solid transparent;
          transition: border 0.2s ease;
          display: flex;
          gap: 8px;

          &.active {
            border-color: #3b82f6;
            background-color: #eef4ff;
          }

          .item-img {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 4px;
            background-color: var(--_gray-100);
          }

          .item-info {
            margin-top: 6px;
            font-size: 12px;
            color: #333;
            display: flex;
            align-items: center;
            color: #333;
            display: flex;
            align-items: start;
            flex-direction: column;
            justify-content: start;

            .item-title {
              font-weight: 600;
            }

            .item-id {
              color: #777;
              font-size: 11px;
            }

            .item-quota,
            .item-stock {
              font-size: 11px;
              color: #555;
              margin-top: 2px;
            }
          }
        }
        // employee checkout flow end
      }
      .em_chk_container {
        display: flex;
        gap: 24px;
        margin: 0 auto;
        padding: 16px;
        width: 100%;
        height: 100%;
        background-color: var(--_base-white);

        .chk_section {
          // emp checkout started
          width: calc(100% - 400px);
          .chk_checkout_accordion {
            display: flex;
            padding: var(--_ctm-lt-pg);
            flex-direction: column;
            gap: 4px;
            word-break: keep-all;
            padding-bottom: 24px;

            .chk_checkout_title {
              color: var(--_gray-900);
              font-size: 24px;
              font-weight: 700;
              line-height: 32px;
            }

            .accordion {
              border-radius: 4px;
              display: flex;
              // gap: var(--_ctm-lt-an-hg-ad-ve-gp);
              flex-direction: column;
              transition: max-height 800ms ease-in;
              &.open {
                transition: max-height 800ms ease-in;
                .accordion-header {
                  background-color: var(--_gray-200);
                }
                .accordion-body {
                  transition: max-height 800ms ease-in;
                  max-height: 2000px;
                  padding-block: 12px 24px;
                  .shipping-address {
                    max-height: fit-content;
                    transition: max-height 800ms ease-in;
                  }
                }
              }

              // accordion heaer
              .accordion-header {
                padding: 12px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                cursor: pointer;
                background-color: #f5f5f5;
                border-color: #f5f5f5;
                border-radius: 4px;
                height: 55px;

                .accordion-title {
                  margin-right: 1rem;
                  white-space: nowrap;
                  display: flex;
                  align-items: center;
                  gap: 12px;
                  font-size: 16px;
                  font-weight: 600;
                  line-height: 24px;

                  span {
                    display: flex;
                  }
                }
                .edit-btn {
                  cursor: pointer;
                  color: var(--_primary-400);

                  &:hover {
                    color: var(--_primary-500);
                  }
                }
              }

              // accordion body
              .accordion-body {
                transition: max-height 800ms ease-in;

                max-height: 0px;
                overflow: hidden;
                padding: 0;
                // shipping address
                .shipping-address {
                  transition: max-height 800ms ease-in;
                  max-height: 0;
                  display: flex;
                  flex-direction: column;
                  gap: 16px;

                  .btn_link {
                    color: var(--_primary-400);
                    &:hover {
                      text-decoration: underline;
                    }
                  }

                  .chk_saved_address_button {
                    cursor: pointer;
                    border-radius: 6px;
                    color: var(--_primary-400);
                    display: flex;
                    align-items: center;
                    gap: 4px;
                  }

                  .shipping_address_container {
                    display: flex;
                    flex-direction: column;
                    gap: 24px;
                    max-width: 485px;
                  }

                  .shipping_address_heading_container {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-weight: 600;
                    color: var(--_gray-900);
                    .icon {
                      display: flex;
                      align-items: center;
                      cursor: pointer;
                    }
                  }

                  form {
                    display: flex;
                    flex-direction: column;
                    gap: 0.75rem;
                    // max-width: 85%;

                    @media (max-width: 500px) {
                      max-width: 100%;
                    }
                  }

                  .chk_shipping_address_form_group {
                    display: flex;
                    justify-content: space-between;
                    flex-direction: row;
                    gap: 12px;
                  }

                  .chk_shipping_address_input_container {
                    display: flex;
                    width: 100%;
                  }

                  .chk_shipping_address_input_wrapper {
                    display: flex;
                    flex-direction: column;
                    gap: 16px;
                    width: 100%;
                  }

                  .chk_shipping_address_form_label {
                    color: var(--_gray-600);
                    font-size: 14px;
                    padding-bottom: 6px;
                  }

                  .chk_shiping_address_form_input {
                    padding: 8px 12px;
                    width: -webkit-fill-available;
                    background-color: var(--_base-white);
                    color: var(--_gray-600);
                    border: 1px solid var(--_gray-300);
                    border-radius: 6px;
                    height: 40px;

                    &:focus-within {
                      border: 1px solid var(--_primary-300);
                      outline: 2px solid var(--_primary-100);
                    }
                  }

                  input[type="checkbox"] {
                    width: auto;
                  }

                  .error-msg {
                    font-size: 12px;
                    color: #ff0000;
                  }
                  label {
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    font-size: 14px;
                  }

                  .checkbox-group {
                    display: flex;
                    align-items: center;
                    justify-content: start;
                    gap: 8px;
                  }

                  .chk_shipping_address_use_as_billing_address_chkbx {
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    color: var(--_gray-600);
                    font-size: 14px;

                    .custom-checkbox {
                      width: 20px;
                      height: 20px;
                      border: 1px solid #d0d5dd;
                      border-radius: 4px;
                      position: relative;
                      background-color: #fff;
                      transition: all 0.2s ease;

                      &::after {
                        content: "";
                        position: absolute;
                        display: none;
                        left: 5px;
                        top: 0.5px;
                        width: 5px;
                        height: 10px;
                        border: solid #fff;
                        border-width: 0 2px 2px 0;
                        transform: rotate(45deg);
                      }
                    }
                  }

                  input[type="checkbox"]:checked + label {
                    .custom-checkbox {
                      background-color: #004dff;
                      border-color: #004dff;

                      &::after {
                        display: block;
                      }
                    }
                  }
                }

                .summary {
                  .chk_shipping_method_label {
                    display: flex;
                    align-items: center;
                    gap: 4px;
                    color: var(--_gray-500);
                  }

                  .chk_shipping_method_heading {
                    color: var(--_gray-500);
                    font-weight: 600;
                  }
                }

                .chk_multi_address {
                  display: flex;
                  flex-direction: column;
                  width: 100%;
                  gap: 48px;

                  &_product_container {
                    display: flex;
                    flex-direction: column;
                    gap: 16px;
                    width: 100%;
                  }

                  &_product_info_container {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: flex-start;
                    width: 100%;

                    @media (max-width: 500px) {
                      flex-direction: column;
                    }
                  }

                  &_product_left_container {
                    display: flex;
                    flex: 1 0 0;
                    width: 100%;
                    gap: var(--_ctm-lt-me-as-pt-io-vl-gp);
                  }

                  &_product_image {
                    height: var(--_ctm-lt-me-as-pt-ie-ht);
                    width: var(--_ctm-lt-me-as-pt-ie-wh);
                    border: 1px solid var(--_gray-100);
                    border-radius: 6px;
                  }

                  &_product_info_wrapper {
                    display: flex;
                    flex-direction: column;
                    gap: calc(var(--_ctm-lt-me-as-pt-io-hl-gp) / 4);

                    .chk_multi_address_product_name {
                      color: var(--_gray-900);
                      font-size: 18px;
                      font-weight: 700;
                      line-height: 28px;
                    }

                    .chk_multi_address_product_info {
                      color: var(--_gray-600);
                      font-size: 14px;
                      list-style: 20px;
                    }
                  }

                  &_product_right_container {
                    display: flex;
                    flex-direction: row;
                    gap: 30px;
                    align-items: center;

                    @media (max-width: 500px) {
                      align-self: flex-end;
                    }

                    .chk_multi_address_product_price {
                      color: var(--_gray-900);
                      font-size: 20px;
                      font-weight: 700;
                    }
                  }

                  &_qty_wrapper {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    gap: 4px;

                    .chk_multi_address_product_info {
                      color: var(--_gray-600);
                      font-size: 12px;
                      line-height: 18px;
                    }

                    .chk_multi_address_product_qty {
                      color: var(--_gray-900);
                      font-size: 12px;
                      font-weight: 700;
                    }
                  }

                  &_shipping_option_container {
                    display: flex;
                    flex-direction: column;
                    gap: 6px;

                    @media (max-width: 500px) {
                      flex-direction: row;
                    }
                  }

                  &_shiping_option_heading_wrapper {
                    display: grid;
                    grid-template-columns: 0.5fr 2fr 2fr 20px;
                    gap: var(--_ctm-lt-me-as-pt-io-vl-gp);
                    white-space: nowrap;
                    align-items: center;

                    @media (max-width: 500px) {
                      grid-template-columns: auto;
                    }

                    .chk_multi_address_product_label {
                      color: var(--_gray-600);
                      font-size: 12px;
                    }
                  }

                  .chk_multi_address_icon {
                    svg {
                      width: var(--_ctm-dn-me-sg-as-dn-dd-in-in-se);
                      height: var(--_ctm-dn-me-sg-as-dn-dd-in-in-se);
                      path {
                        stroke: var(--_ctm-dn-me-sg-as-dn-dd-in-in-c1);
                        // Overrides the stroke-width presentation attribute baked into the icon markup.
                        stroke-width: prepareMediaVariable(--_ctm-dn-me-sg-as-dn-dd-in-se-wh, 1.25);
                      }
                    }
                    &:hover {
                      cursor: pointer;
                      svg {
                        path {
                          stroke: var(--_error-700);
                        }
                      }
                    }
                  }
                  .chk_shiping_address_form_input {
                    padding: 8px 12px;
                    width: -webkit-fill-available;
                    border: 1px solid var(--_gray-300);
                    border-radius: 6px;
                    height: 40px;
                    background-color: var(--_base-white);

                    &:focus-within {
                      border: 1px solid var(--_primary-300);
                      outline: 2px solid var(--_primary-100);
                    }

                    .custom-arrows {
                      position: absolute;
                      right: 6px;
                      top: 50%;
                      transform: translateY(-50%);
                      display: flex;
                      flex-direction: column;

                      .arrow {
                        all: unset;
                        cursor: pointer;
                        font-size: 10px;
                        line-height: 1;
                      }
                    }

                    // .input-field {
                    //   padding: 8px 12px;
                    //   width: -webkit-fill-available;
                    //   border: 1px solid var(--_gray-300);
                    //   border-radius: 6px;
                    //   height: 40px;
                    //   background-color: var(--_base-white);

                    //   &:focus-within {
                    //     border: 1px solid var(--_primary-300);
                    //     outline: 2px solid var(--_primary-100);
                    //   }
                    // }
                  }
                }

                .shipping-method {
                  display: flex;
                  flex-direction: column;
                  gap: var(--_ctm-lt-sg-md-le-gp);

                  &__grid {
                    display: grid;
                    grid-template-columns: 1fr;
                    gap: var(--_ctm-lt-sg-md-le-gp);

                    @media (min-width: 768px) {
                      grid-template-columns: 1fr 1fr;
                      gap: 32px;
                    }
                  }

                  &__group {
                    display: flex;
                    flex-direction: column;
                    gap: 8px;

                    .chk_shipping_method_heading {
                      color: var(--_gray-700);
                      font-weight: 700;
                      font-size: 16px;
                    }
                  }

                  &__options {
                    display: flex;
                    flex-direction: column;
                    gap: 12px;
                  }

                  &__option {
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                    transition: all 0.2s ease;

                    .custom_radio {
                      width: 20px;
                      margin-right: 12px;
                      height: 20px;
                      border: 1px solid transparent; /* blue ring */
                      border-radius: 50%;
                      display: inline-block;
                      box-sizing: border-box;
                      background-color: white;
                      transition: all 0.2s ease;

                      input[type="radio"]:checked + .radio-style {
                        background-color: var(--_thm-py-bs-dt-se-bd-cr);
                        border: 6px solid;
                      }
                    }

                    .chk_shipping_method_label {
                      color: var(--_gray-600);
                      font-family: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-cr);
                      font-size: 14px;
                      font-style: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-se-ic);
                      font-weight: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ft-wt);
                      line-height: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-le-ht);
                      letter-spacing: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-lr-sg);
                      text-decoration: var(--_ctm-dn-sg-md-dn-sg-md-ll-dn-ue);
                    }

                    .chk_shipping_method_value {
                      color: var(--_gray-900);
                      font-family: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-fy);
                      font-size: 14px;
                      font-style: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-se-ic);
                      font-weight: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ft-wt);
                      line-height: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-le-ht);
                      letter-spacing: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-lr-sg);
                      text-decoration: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-ue);
                    }

                    // input[type="radio"] {
                    //   margin-right: 12px;
                    //   width: 16px;
                    //   height: 16px;
                    //   accent-color: #2563eb;
                    //   cursor: pointer;
                    //   // display: none;
                    // }

                    .custom_radio {
                      position: relative;
                      input[type="radio"] {
                        margin-right: 12px;
                        width: 16px;
                        height: 16px;
                        accent-color: var(--_thm-py-bs-dt-se-tt-cr);
                        cursor: pointer;
                        display: none;
                      }
                      .radio-style {
                        width: 20px;
                        height: 20px;
                        border-radius: 50%;
                        border: 1px solid #d0d5dd;
                        background: white;
                        display: inline-block;
                        box-sizing: border-box;
                        transition: all 0.2s;
                      }
                      input[type="radio"]:checked + .radio-style {
                        background-color: var(--_base-white);
                        border: 5px solid var(--_thm-py-bs-dt-se-br-cr);
                      }
                    }

                    &.selected {
                      background-color: var(--_base-white);
                      border-color: var(--_thm-py-bs-dt-se-br-cr);
                    }
                  }

                  // order level shipping
                  .order_level_shipping {
                    display: flex;
                    gap: 24px;
                    .order_level_shipping_img {
                      width: 120px;
                      height: 120px;
                      background-color: var(--_gray-100);
                      border-radius: 6px;
                    }
                  }
                }

                // payment options
                .chk_payment-options {
                  display: flex;
                  flex-direction: column;
                  gap: var(--_ctm-lt-pt-os-gp-bn-cs);
                  .gift_crd_chk_payment_option {
                    border: 1px solid var(--_gray-300);
                    border-radius: 4px;
                    margin-bottom: 12px;
                    .add_gift_card {
                      display: flex;
                      gap: 12px;
                      padding: 16px;

                      .gc_icon {
                        svg {
                          width: 18px;
                          height: 14px;
                        }
                      }

                      .gc_info {
                        display: flex;
                        justify-content: space-between;
                        width: 100%;
                        gap: 6px;

                        .gc_title {
                          font-size: 14px;
                          font-weight: 600;
                        }
                      }
                      .gc_tertiary_btn {
                        color: var(--_primary-400);

                        &:hover {
                          color: var(--_primary-500);
                          text-decoration: underline;
                        }
                      }
                    }
                    .chk_gft_crd_wrapper {
                      display: flex;
                      justify-content: space-between;
                      align-items: center;
                      padding: 16px;
                      & > button {
                        color: var(--_primary-400);
                        &:hover {
                          text-decoration: underline;
                        }
                      }
                      &_item {
                        display: flex;
                        align-items: center;
                        gap: 16px;
                        &_icon {
                          width: 40px;
                          height: 40px;
                          border: 1px solid var(--_gray-200);
                          border-radius: 6px;
                          display: flex;
                          justify-content: center;
                          align-items: center;
                        }
                        &_info {
                          display: flex;
                          flex-direction: column;
                          &_title {
                            font-size: 14px;
                            margin-bottom: 4px;
                            font-weight: 600;
                          }
                          &_desc {
                            display: flex;
                            &_value {
                              font-size: 12px;
                              color: var(--_gray-600);
                            }
                            &_label {
                              font-size: 12px;
                              color: var(--_gray-900);
                            }
                          }
                        }
                        &_pin {
                          margin-left: 36px;
                          input[type="number"] {
                            border: 1px solid var(--_gray-300);
                            border-radius: 4px;
                            background-color: var(--_base-white);
                            width: 95px;
                            height: 44px;
                            padding-inline: 10px;
                            &:disabled {
                              opacity: 0.8;
                              cursor: not-allowed;
                            }
                            &:focus {
                              outline: 2px solid var(--_primary-100);
                              border: 1px solid var(--_primary-300);
                            }
                          }
                        }
                      }

                      &_input {
                        border: 1px solid var(--_gray-300);
                        border-radius: 4px;
                        background-color: var(--_base-white);
                        height: 44px;
                        width: 120px;
                        display: flex;
                        align-items: center;
                        gap: 8px;
                        padding-left: 10px;
                        input[type="number"] {
                          background-color: var(--_base-white);
                          padding-right: 10px;
                          &:disabled {
                            opacity: 0.8;
                            cursor: not-allowed;
                          }
                        }
                        &:focus-within {
                          outline: 2px solid var(--_primary-100);
                          border: 1px solid var(--_primary-300);
                        }
                      }
                    }
                  }
                  .payment_program {
                    // padding: 0 12px;
                    .payment_program_header {
                      display: flex;
                      justify-content: space-between;
                      gap: 8px;
                      align-items: center;

                      margin-bottom: 16px;

                      .payment_program_header_label {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        &_title {
                          font-size: 14px;
                          font-weight: 600;
                          color: var(--_gray-600);
                        }
                        .payment_program_header_pds {
                          &_label {
                            font-size: 14px;
                            color: var(--_gray-600);
                          }
                          &_value {
                            font-size: 14px;
                            color: var(--_gray-900);
                          }
                        }
                      }
                    }
                  }

                  .chk_payment_option_wrapper {
                    display: flex;
                    flex-direction: column;
                    border: 1px solid var(--_gray-300);
                    margin-bottom: 12px;
                    border-radius: 4px;
                    overflow: hidden;

                    .pp_pmnt_method_groups {
                      .pp_ppm_section {
                        background: var(---base-white);
                        border-bottom: 1px solid var(--_gray-300);
                        padding: 12px 16px;
                        font-size: 12px;
                        display: flex;
                        justify-content: space-between;
                        gap: 8px;
                        &:not(:first-child) {
                          border-top: 1px solid var(--_gray-200);
                        }
                        .pp_ppm_section_label {
                          font-size: 14px;
                          font-weight: 700;
                          color: var(--_gray-900);
                        }
                        .pp_ppm_section_value {
                          font-size: 14px;
                          font-weight: 700;
                          color: var(--_gray-600);
                          .pp_ppm_section_value_lable {
                            font-weight: 500;
                            color: var(--_gray-500);
                          }
                        }
                      }
                      .payment_methods {
                        // padding: 12px;
                        display: grid;
                        gap: 8px;
                        .chk_payment_option {
                          .chk_payment_options_heading {
                            padding: 16px;
                            display: flex;
                            justify-content: space-between;
                          }
                          .chk_payment_section_wrapper {
                            width: 100%;
                            display: flex;
                            justify-content: space-between;
                            padding: 16px;

                            .chk_payment_section {
                              display: flex;
                              justify-content: space-between;
                              align-items: center;
                              width: 100%;
                              .chk_payment_section_col_left {
                                display: flex;
                                gap: 12px;
                                svg {
                                  width: 24px;
                                  height: 24px;
                                }
                                .chk_payment_section_method {
                                  display: flex;
                                  flex-direction: column;
                                  .chk_payment_section_method_name {
                                    font-size: 14px;
                                    font-weight: 700;
                                    line-height: 20px;
                                    color: var(--_gray-700);
                                  }
                                  & > div {
                                    display: flex;
                                    .label {
                                      font-size: 12px;
                                      color: var(--_gray-500);
                                    }
                                    .price {
                                      font-size: 12px;
                                      color: var(--_gray-900);
                                    }
                                  }
                                }
                              }
                              &_col_right {
                                .chk_currency_inp {
                                  height: 44px;
                                  border: 1px solid var(--_gray-200);
                                  border-radius: 4px;
                                  background-color: var(--_base-white);
                                  display: flex;
                                  width: 120px;
                                  overflow: hidden;
                                  align-items: center;
                                  padding-inline: 12px;
                                  gap: 12px;
                                  &:focus-within {
                                    border: 1px solid var(--_primary-200);
                                    outline: 2px solid var(--_primary-50);
                                  }
                                  input {
                                    height: inherit;
                                    &:disabled {
                                      opacity: 0.8;
                                      cursor: not-allowed;
                                    }
                                  }
                                }
                              }
                            }

                            .chk_payment_options_heading {
                              color: var(--_gray-900);
                              font-size: 16px;
                              font-weight: 700;
                            }

                            // gift card styles

                            // payment other options styles
                            .chk_pmnt_other_options {
                              display: flex;
                              justify-content: space-between;
                              gap: 80px;
                              padding: 16px;
                              .chk_pmnt_other_options_left_container {
                                display: flex;
                                gap: 12px;
                                .chk_pmnt_option_info_wrapper {
                                  display: flex;
                                  gap: 12px;
                                  .cards {
                                    display: flex;
                                    flex-direction: column;
                                    gap: 8px;
                                    .chk_payment_options_name {
                                      font-weight: 600;
                                    }
                                    span {
                                      font-size: 12px;
                                      .chk_payment_options_label {
                                        color: var(--_gray-600);
                                      }
                                      .chk_payment_options_value {
                                        color: var(--_gray-900);
                                      }
                                    }
                                  }
                                }
                              }
                              .chk_pmnt_other_options_container {
                                padding: 16px;
                              }
                            }

                            &__other_option_wrapper {
                              display: flex;
                              width: 100%;
                              justify-content: space-between;
                              padding: 16px;

                              @media (max-width: 500px) {
                                flex-direction: column;
                              }
                            }

                            &_left_container {
                              display: flex;
                              gap: 12px;
                              align-items: flex-start;
                              .chk_payment_option__info_wrapper {
                                display: flex;
                                gap: 0px;
                              }

                              @media (max-width: 500px) {
                                flex-wrap: wrap;
                              }
                            }

                            &__left_wrapper {
                              display: flex;
                              flex-direction: column;
                              align-items: flex-start;
                              gap: 16px;
                            }

                            &__card_icon {
                              width: 60px;
                              height: 40px;
                            }

                            &__info_wrapper {
                              display: flex;
                              flex-direction: column;

                              .chk_payment_options_name {
                                color: var(--_ctm-dn-pt-os-dn-pt-ne-dn-cr);
                                font-family: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-fy);
                                font-size: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se);
                                font-style: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-se-ic);
                                font-weight: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ft-wt);
                                line-height: var(--_ctm-dn-pt-os-dn-pt-ne-dn-le-ht);
                                letter-spacing: var(--_ctm-dn-pt-os-dn-pt-ne-dn-lr-sg);
                                text-decoration: var(--_ctm-dn-pt-os-dn-pt-ne-dn-ue);
                              }

                              .chk_payment_options_label {
                                color: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-cr);
                                font-family: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-fy);
                                font-size: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se);
                                font-style: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se-ic);
                                font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-wt);
                                line-height: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-le-ht);
                                letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-lr-sg);
                                text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ue);
                              }

                              .chk_payment_options_value {
                                color: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-cr);
                                font-family: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-fy);
                                font-size: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se);
                                font-style: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se-ic);
                                font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-wt);
                                line-height: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-le-ht);
                                letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-lr-sg);
                                text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ue);
                              }
                            }

                            &_right_container {
                              display: flex;
                              gap: 6px;
                              align-items: flex-start;

                              @media (max-width: 500px) {
                                justify-content: flex-end;
                              }
                            }

                            &_input {
                              display: flex;
                              padding: 9px 12px;
                              align-items: center;
                              max-width: 96px;
                              background-color: var(--_base-white);
                              border: 1px solid var(--_gray-300);
                              border-radius: 6px;
                              color: var(--_gray-700);

                              &:focus-within {
                                border: 1px solid var(--_primary-300);
                                outline: 2px solid var(--_primary-100);
                              }

                              .icon {
                                svg {
                                  path {
                                    stroke: var(--_primary-400);
                                  }
                                }
                              }

                              .input_field {
                                background-color: var(--_base-white);
                                border: 1px solid var(--_gray-300);
                                border-radius: 6px;
                                color: var(--_gray-700);

                                &:focus-within {
                                  border: 1px solid var(--_primary-300);
                                  outline: 2px solid var(--_primary-100);
                                }
                              }
                            }
                          }
                        }
                        .add_new_credit_card {
                          padding: 16px 16px 0px 16px;
                          display: flex;
                          justify-content: space-between;
                          .cc_tertiary_btn {
                            color: var(--_primary-400);
                            &:hover {
                              text-decoration: underline;
                            }
                          }
                        }

                        .chk_payment_cred_section {
                          display: flex;
                          justify-content: space-between;
                          align-items: center;
                          padding: 16px 16px 8px 16px;

                          .chk_currency_inp {
                            height: 44px;
                            border: 1px solid var(--_gray-200);
                            border-radius: 4px;
                            background-color: var(--_base-white);
                            display: flex;
                            width: 120px;
                            overflow: hidden;
                            align-items: center;
                            padding-inline: 12px;
                            gap: 12px;
                            &:focus-within {
                              border: 1px solid var(--_primary-200);
                              outline: 2px solid var(--_primary-50);
                            }
                            input {
                              height: inherit;
                            }
                          }
                          .chk_payment_cred_section_col_left {
                            .chk_payment_cred_section_col_left_crd_details {
                              display: flex;
                              gap: 80px;
                              align-items: center;
                              & > div {
                                display: flex;
                                gap: 12px;
                                .card_icon {
                                  width: 60px;
                                  height: 40px;
                                  border-radius: 4px;
                                }
                                .card_details {
                                  .card_details_num {
                                    font-size: 12px;
                                    font-weight: 600;
                                    color: var(--_gray-900);
                                  }
                                  & > div {
                                    display: flex;
                                    .card_details_label {
                                      font-size: 12px;
                                      color: var(--_gray-500);
                                    }
                                    .card_details_value {
                                      font-size: 12px;
                                      color: var(--_gray-900);
                                    }
                                  }
                                }
                              }
                            }
                          }
                        }

                        .chk_payment_remove_card {
                          padding-inline: 16px;
                          margin-bottom: 16px;
                          .error_msg {
                            font-size: 12px;
                            color: var(--_error-700);
                          }
                        }
                      }
                    }
                  }

                  .chk_billing_address {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    background-color: var(--_base-white);
                    box-shadow: var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-ae)
                      var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-br)
                      var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-sd)
                      var(--_ctm-dn-pt-os-dn-pt-os-cr-dn-sw-cr);

                    &_form_container {
                      border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
                      padding-top: 24px;
                      display: flex;
                      flex-direction: column;
                      gap: 24px;
                    }

                    .chk_payment_options_heading {
                      font-size: 16px;
                      color: var(--_gray-900);
                      font-weight: 600;
                      &.pl_0 {
                        padding-left: 0px;
                      }
                    }

                    &_form_wrapper {
                      display: flex;
                      flex-direction: column;
                      gap: 24px;
                      border-radius: var(--_ctm-dn-pt-os-cr-dn-br-rs);
                    }

                    .shipping_address_container {
                      display: flex;
                      flex-direction: column;
                      gap: 24px;
                    }

                    .shipping_address_heading_container {
                      display: flex;
                      justify-content: space-between;
                      align-items: center;

                      .chk_heading_info {
                        color: var(--_ctm-dn-sg-md-dn-hg-dn-cr);
                        font-family: var(--_ctm-dn-sg-md-dn-hg-dn-ft-fy);
                        font-size: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se);
                        font-style: var(--_ctm-dn-sg-md-dn-hg-dn-ft-se-ic);
                        font-weight: var(--_ctm-dn-sg-md-dn-hg-dn-ft-wt);
                        line-height: var(--_ctm-dn-sg-md-dn-hg-dn-le-ht);
                        letter-spacing: var(--_ctm-dn-sg-md-dn-hg-dn-lr-sg);
                        text-decoration: var(--_ctm-dn-sg-md-dn-hg-dn-ue);
                      }
                      .icon {
                        cursor: pointer;
                      }
                    }

                    form {
                      display: flex;
                      flex-direction: column;
                      gap: 0.75rem;
                      max-width: 85%;

                      @media (max-width: 500px) {
                        max-width: 100%;
                      }
                    }

                    .chk_shipping_address_form_group {
                      display: flex;
                      justify-content: space-between;
                      flex-direction: row;
                      gap: 12px;
                    }

                    .chk_shipping_address_input_container {
                      display: flex;
                      width: 100%;
                    }

                    .chk_shipping_address_input_wrapper {
                      display: flex;
                      flex-direction: column;
                      gap: var(--_ctm-lt-ll-ad-it-gp);
                      width: 100%;
                    }

                    .chk_shipping_address_form_label {
                      color: var(--_gray-600);
                      font-size: 14px;
                    }

                    .chk_shiping_address_form_input {
                      padding: 8px 12px;
                      width: -webkit-fill-available;
                      height: 40px;
                      background-color: var(--_base-white);
                      border-radius: 6px;
                      border: 1px solid var(--_gray-300);

                      &:focus-within {
                        border: 1px solid var(--_primary-300);
                        outline: 2px solid var(--_primary-100);
                      }

                      // .input-field {
                      //   padding: 8px 12px;
                      //   width: -webkit-fill-available;
                      //   background-color: var(--_base-white);
                      //   border-radius: 6px;
                      //   border: 1px solid var(--_gray-300);

                      //   &:focus-within {
                      //     border: 1px solid var(--_primary-300);
                      //     outline: 2px solid var(--_primary-100);
                      //   }
                      // }
                    }

                    input[type="checkbox"] {
                      width: auto;
                    }

                    .error-msg {
                      font-size: 12px;
                      color: #ff0000;
                    }

                    .chk_shipping_address_use_as_billing_address_chkbx {
                      display: flex;
                      align-items: center;
                      gap: 0.5rem;
                      color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
                      font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
                      font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
                      font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
                      font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
                      line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht);
                      letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg);
                      text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);

                      .custom-checkbox {
                        width: 20px;
                        height: 20px;
                        border: 1px solid #d0d5dd;
                        border-radius: 4px;
                        position: relative;
                        background-color: #fff;
                        transition: all 0.2s ease;

                        &::after {
                          content: "";
                          position: absolute;
                          display: none;
                          left: 5px;
                          top: 0.5px;
                          width: 5px;
                          height: 10px;
                          border: solid #fff;
                          border-width: 0 2px 2px 0;
                          transform: rotate(45deg);
                        }
                      }
                    }

                    input[type="checkbox"]:checked + label {
                      .custom-checkbox {
                        background-color: #004dff;
                        border-color: #004dff;

                        &::after {
                          display: block;
                        }
                      }
                    }

                    .checkbox-group {
                      display: flex;
                      align-items: center;
                      justify-content: start;
                      gap: 8px;
                    }

                    &_same_as_billing_address_chkbx {
                      color: var(--_ctm-dn-se-sg-as-dn-cx-dn-cr);
                      font-family: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-fy);
                      font-size: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se);
                      font-style: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-se-ic);
                      font-weight: var(--_ctm-dn-se-sg-as-dn-cx-dn-ft-wt);
                      line-height: var(--_ctm-dn-se-sg-as-dn-cx-dn-le-ht);
                      letter-spacing: var(--_ctm-dn-se-sg-as-dn-cx-dn-lr-sg);
                      text-decoration: var(--_ctm-dn-se-sg-as-dn-cx-dn-ue);
                    }

                    &_button_wrapper {
                      display: flex;
                      align-items: center;
                      gap: 16px;
                    }
                  }

                  .payment_heading {
                    padding: 12px;
                    display: flex;
                    justify-content: space-between;
                    border-bottom: 1px solid var(--_gray-100);
                    font-weight: 600;
                    .gc_tertiary_btn {
                      color: var(--_primary-400);
                      &:hover {
                        text-decoration: underline;
                      }
                    }
                  }

                  .chk_payment_gift_card {
                    border: 1px solid var(--_gray-200);
                    border-radius: 6px;

                    .chk_payment_options_heading {
                      padding: 16px;
                      border-bottom: 1px solid var(--_gray-200);
                      display: flex;
                      justify-content: space-between;
                      .payment_options_heading {
                        font-size: 14px;
                        font-weight: 600;
                      }
                      .chk_primary_btn_link {
                        color: var(--_primary-400);
                        &:hover {
                          text-decoration: underline;
                        }
                      }
                    }
                    // gift card styles

                    // .chk_gft_crd_wrapper {
                    //   &_btn {
                    //     text-align: left;
                    //     margin-bottom: 16px;
                    //     color: var(--_primary-400);
                    //     &:hover {
                    //       text-decoration: underline;
                    //     }
                    //   }
                    // }
                  }

                  .chk_gft_crd_container {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    gap: var(--_ctm-lt-pt-os-cr-hl-gp);
                    background-color: var(--_base-white);
                    border: 1px solid var(--_gray-300);
                    border-radius: 4px;
                    overflow: hidden;

                    .chk_gft_crd_option_heading {
                      display: flex;
                      justify-content: space-between;
                      align-items: center;
                      padding: 8px 12px;
                      border-bottom: 1px solid var(--_gray-300);
                    }

                    // gift card styles
                    .chk_gft_crd_wrapper {
                      display: flex;
                      justify-content: space-between;
                      align-items: center;
                      padding: 16px 16px 0 16px;
                      &_item {
                        display: flex;
                        align-items: center;
                        gap: 16px;
                        &_icon {
                          width: 40px;
                          height: 40px;
                          border: 1px solid var(--_gray-200);
                          border-radius: 6px;
                          display: flex;
                          justify-content: center;
                          align-items: center;
                        }
                        &_info {
                          display: flex;
                          flex-direction: column;
                          &_title {
                            font-size: 14px;
                            margin-bottom: 4px;
                            font-weight: 600;
                          }
                          &_desc {
                            display: flex;
                            &_value {
                              font-size: 12px;
                              color: var(--_gray-600);
                            }
                            &_label {
                              font-size: 12px;
                              color: var(--_gray-900);
                            }
                          }
                        }
                        &_pin {
                          margin-left: 36px;
                          input[type="number"] {
                            border: 1px solid var(--_gray-300);
                            border-radius: 4px;
                            background-color: var(--_base-white);
                            width: 95px;
                            height: 44px;
                            padding-inline: 10px;
                            &:focus {
                              outline: 2px solid var(--_primary-100);
                              border: 1px solid var(--_primary-300);
                            }
                          }
                        }
                      }

                      &_input {
                        border: 1px solid var(--_gray-300);
                        border-radius: 4px;
                        background-color: var(--_base-white);
                        height: 44px;
                        width: 120px;
                        display: flex;
                        align-items: center;
                        gap: 8px;
                        padding-left: 10px;
                        input[type="number"] {
                          background-color: var(--_base-white);
                          padding-right: 10px;
                        }
                        &:focus-within {
                          outline: 2px solid var(--_primary-100);
                          border: 1px solid var(--_primary-300);
                        }
                      }

                      .chk_gft_crd_wrapper_btn {
                        color: var(--_primary-400);
                        &:hover {
                          text-decoration: un;
                        }
                      }
                    }

                    // payment other options styles
                    .chk_pmnt_other_options {
                      display: flex;
                      justify-content: space-between;
                      gap: 80px;
                      padding: 16px;
                      .chk_pmnt_other_options_left_container {
                        display: flex;
                        gap: 12px;
                        .chk_pmnt_option_info_wrapper {
                          display: flex;
                          gap: 12px;
                          .cards {
                            display: flex;
                            flex-direction: column;
                            gap: 8px;
                            .chk_payment_options_name {
                              font-weight: 600;
                            }
                            span {
                              font-size: 12px;
                              .chk_payment_options_label {
                                color: var(--_gray-600);
                              }
                              .chk_payment_options_value {
                                color: var(--_gray-900);
                              }
                            }
                          }
                        }
                      }
                      .chk_pmnt_other_options_container {
                        padding: 16px;
                      }
                    }

                    &__other_option_wrapper {
                      display: flex;
                      width: 100%;
                      justify-content: space-between;
                      padding: 16px;

                      @media (max-width: 500px) {
                        flex-direction: column;
                      }
                    }

                    &_left_container {
                      display: flex;
                      gap: 12px;
                      align-items: flex-start;
                      & > div {
                        display: flex;
                        gap: 12px;
                      }

                      @media (max-width: 500px) {
                        flex-wrap: wrap;
                      }
                    }

                    &__left_wrapper {
                      display: flex;
                      flex-direction: column;
                      align-items: flex-start;
                      gap: 16px;
                    }

                    &__card_icon {
                      width: 60px;
                      height: 40px;
                    }

                    &__info_wrapper {
                      display: flex;
                      flex-direction: column;

                      .chk_payment_options_name {
                        color: var(--_gray-900);
                        font-size: 16px;
                        font-weight: 600;
                      }

                      .chk_payment_options_label {
                        color: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-cr);
                        font-family: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-fy);
                        font-size: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se);
                        font-style: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-se-ic);
                        font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ft-wt);
                        line-height: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-le-ht);
                        letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-lr-sg);
                        text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-ue);
                      }

                      .chk_payment_options_value {
                        color: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-cr);
                        font-family: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-fy);
                        font-size: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se);
                        font-style: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-se-ic);
                        font-weight: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ft-wt);
                        line-height: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-le-ht);
                        letter-spacing: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-lr-sg);
                        text-decoration: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-ue);
                      }
                    }

                    &_right_container {
                      display: flex;
                      gap: 6px;
                      align-items: flex-start;

                      @media (max-width: 500px) {
                        justify-content: flex-end;
                      }
                    }

                    &_input {
                      display: flex;
                      padding: 8px 12px;
                      width: -webkit-fill-available;
                      background-color: var(--_base-white);
                      border-radius: 6px;
                      border: 1px solid var(--_gray-300);

                      &:focus-within {
                        border: 1px solid var(--_primary-300);
                        outline: 2px solid var(--_primary-100);
                      }

                      .icon {
                        svg {
                          path {
                            stroke: var(--_primary-400);
                          }
                        }
                      }

                      .input_field {
                        padding: 8px 12px;
                        width: -webkit-fill-available;
                        background-color: var(--_base-white);
                        border-radius: 6px;
                        border: 1px solid var(--_gray-300);

                        &:focus-within {
                          border: 1px solid var(--_primary-300);
                          outline: 2px solid var(--_primary-100);
                        }
                      }
                    }
                  }
                }

                .react-international-phone-country-selector-button {
                  border: none !important;
                  height: auto !important;
                }

                .react-international-phone-input {
                  height: auto;
                  border: none !important;
                  color: var(--_ctm-dn-it-bx-dn-cr);
                  font-family: var(--_ctm-dn-it-bx-dn-ft-fy);
                  font-size: var(--_ctm-dn-it-bx-dn-ft-se);
                  font-style: var(--_ctm-dn-it-bx-dn-ft-se-ic);
                  font-weight: var(--_ctm-dn-it-bx-dn-ft-wt);
                  line-height: var(--_ctm-dn-it-bx-dn-le-ht);
                  letter-spacing: var(--_ctm-dn-it-bx-dn-lr-sg);
                  box-shadow: var(--_ctm-dn-it-bx-dn-sw-ae) var(--_ctm-dn-it-bx-dn-sw-br)
                    var(--_ctm-dn-it-bx-dn-sw-sd) var(--_ctm-dn-it-bx-dn-sw-cr);
                  text-align: var(--_ctm-dn-it-bx-dn-tt-an);
                  text-decoration: var(--_ctm-dn-it-bx-dn-ue);
                }

                .chk_checkbox_wrapper {
                  display: flex;
                  width: fit-content;
                  align-items: center;
                  gap: 12px;

                  input[type="checkbox"] {
                    display: none;
                  }
                  .payment_program_title {
                    font-size: 14px;
                    font-weight: 500;
                    color: var(--_gray-900);
                  }

                  .chk_payment_options_use_as_billing_address_chkbx {
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                    gap: 10px;
                    color: var(--_ctm-dn-pt-os-dn-cx-ll-dn-cr);
                    font-family: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-fy);
                    font-size: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se);
                    font-style: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se-ic);
                    font-weight: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-wt);
                    line-height: var(--_ctm-dn-pt-os-dn-cx-ll-dn-le-ht);
                    letter-spacing: var(--_ctm-dn-pt-os-dn-cx-ll-dn-lr-sg);
                    text-decoration: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ue);

                    .custom-checkbox {
                      width: 20px;
                      height: 20px;
                      border: 1px solid #d0d5dd;
                      border-radius: 4px;
                      position: relative;
                      background-color: #fff;
                      transition: all 0.2s ease;

                      &::after {
                        content: "";
                        position: absolute;
                        display: none;
                        left: 5px;
                        top: 0.5px;
                        width: 5px;
                        height: 10px;
                        border: solid #fff;
                        border-width: 0 2px 2px 0;
                        transform: rotate(45deg);
                      }
                    }
                  }

                  .chk_shipping_address_use_as_billing_address_chkbx {
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                    gap: 10px;
                    color: var(--_ctm-dn-pt-os-dn-cx-ll-dn-cr);
                    font-family: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-fy);
                    font-size: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se);
                    font-style: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-se-ic);
                    font-weight: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ft-wt);
                    line-height: var(--_ctm-dn-pt-os-dn-cx-ll-dn-le-ht);
                    letter-spacing: var(--_ctm-dn-pt-os-dn-cx-ll-dn-lr-sg);
                    text-decoration: var(--_ctm-dn-pt-os-dn-cx-ll-dn-ue);

                    .custom-checkbox {
                      width: 20px;
                      height: 20px;
                      border: 1px solid #d0d5dd;
                      border-radius: 4px;
                      position: relative;
                      background-color: #fff;
                      transition: all 0.2s ease;

                      &::after {
                        content: "";
                        position: absolute;
                        display: none;
                        left: 5px;
                        top: 0.5px;
                        width: 5px;
                        height: 10px;
                        border: solid #fff;
                        border-width: 0 2px 2px 0;
                        transform: rotate(45deg);
                      }
                    }
                  }

                  input[type="checkbox"]:checked + label {
                    .custom-checkbox {
                      background-color: #004dff;
                      border-color: #004dff;

                      &::after {
                        display: block;
                      }
                    }
                  }
                }
                .chk_address_actions {
                  display: flex;
                  gap: 12px;
                }
                .chk_payment-card__note {
                  padding: 8px 6px;
                  display: flex;
                  align-items: center;
                  gap: 6px;
                  padding: 8px 16px;
                  background-color: var(--_warning-100);
                  color: var(--_warning-700);

                  .icon {
                    svg {
                      width: var(--_ctm-dn-pt-os-dn-ne-dn-in-se);
                      height: var(--_ctm-dn-pt-os-dn-ne-dn-in-se);
                      path {
                        stroke: var(--_ctm-dn-pt-os-dn-ne-dn-in-c1);
                        // Overrides the stroke-width presentation attribute baked into the icon markup.
                        stroke-width: prepareMediaVariable(--_ctm-dn-pt-os-dn-ne-dn-se-wh, 1.25);
                      }
                    }
                  }
                }

                .accordion-summary {
                  flex: 1;
                  display: flex;
                  flex-direction: column;
                  gap: 0.25rem;

                  .summary-content {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    gap: 0.5rem;

                    .chk_shipping-summary {
                      display: flex;
                      flex-direction: column;
                      gap: var(--_ctm-lt-sd-sg-as-le-gp);
                      max-width: 700px;

                      .chk_address {
                        display: flex;
                        flex-direction: column;
                        gap: calc(var(--_ctm-lt-sd-sg-as-le-gp) / 2);

                        .chk_saved_address_name {
                          color: var(--_gray-700);
                          font-size: 16px;
                          font-weight: 600;
                        }

                        .chk_saved_address {
                          color: var(--_gray-600);
                          font-size: 12px;
                        }

                        .chk_saved_address_label {
                          color: var(--_gray-500);
                          font-size: 12px;
                        }

                        .chk_saved_address_value {
                          color: var(--_gray-700);
                          font-size: 12px;
                        }
                      }

                      .contact {
                        font-size: 0.875rem;
                        color: var(--_gray-700);
                        line-height: 1.4;
                      }
                    }

                    .right-btn {
                      display: none;
                      gap: 24px;

                      &:has(.chk_saved_address_button.selected) {
                        display: flex !important;
                      }
                      .chk_saved_address_button {
                        display: flex;
                        align-items: center;
                        gap: 4px;
                        color: var(--_primary-400);
                      }
                    }

                    &:hover {
                      .right-btn {
                        display: flex;
                      }
                    }
                  }
                }
              }
            }
          }

          // credit card form syles
          .chk_cred_form_details {
            border-top: 1px solid var(--_gray-100);
            padding: 16px;
            .chk_basic_form_title {
              font-size: 14px;
              margin-bottom: 16px;
              font-weight: 600;
            }
            .chk_form_fields {
              h3 {
                font-size: 14px;
                margin-bottom: 8px;
              }
              display: flex;
              flex-direction: column;
              gap: 24px;
              width: 500px;
              .chk_form_field {
                width: 100%;
                &.expiry_details {
                  width: 80px;
                }

                display: flex;
                flex-direction: column;
                gap: 6px;
                width: 100%;

                .chk_form_field_label {
                  font-size: 14px;
                  color: var(--_gray-600);
                }
                .chk_form_field_inp {
                  height: 40px;
                  border: 1px solid var(--_gray-300);
                  border-radius: 4px;
                  padding-inline: 10px;
                  &:placeholder-shown {
                    color: var(--_gray-400);
                    padding-left: 16px;
                  }
                  &:focus {
                    border: 1px solid var(--_primary-300);
                    outline: 2px solid var(--_primary-100);
                  }
                }
                .error_msg {
                  display: block;
                  color: var(--_error-700);
                  font-size: 12px;
                }
              }

              .checkbox {
                width: auto;

                label {
                  display: flex;
                  align-items: center;
                  gap: 8px;
                  cursor: pointer;
                  position: relative;
                  user-select: none;

                  input[type="checkbox"] {
                    display: none;

                    &:checked + .custom-checkbox::after {
                      opacity: 1;
                    }
                  }

                  .custom-checkbox {
                    width: 16px;
                    height: 16px;
                    border: 2px solid var(--_primary-400);
                    border-radius: 4px;
                    position: relative;
                    display: inline-block;
                    box-sizing: border-box;

                    &::after {
                      content: "";
                      position: absolute;
                      left: 3px;
                      top: 0px;
                      width: 4px;
                      height: 8px;
                      border: solid var(--_primary-400);
                      border-width: 0 1px 1px 0;
                      transform: rotate(45deg);
                      opacity: 0;
                      transition: opacity 0.2s ease-in-out;
                    }
                  }
                }
              }
              .expiry_details {
                display: flex;
                gap: 12px;
                .cvv_inp {
                  width: 110px;
                }
              }
            }
          }

          // giftcard form styles
          .chk_gift_card_details {
            border-top: 1px solid var(--_gray-300);
            padding: 16px;
            .chk_gift_card_form {
              display: flex;
              flex-direction: column;
              gap: 16px;
              max-width: 480px;
              .chk_gift_cart_form_title {
                font-size: 14px;
                font-weight: 600;
              }

              .chk_gift_form_fields {
                display: flex;
                gap: 12px;
                width: 100%;
                .chk_gift_inp_field {
                  display: flex;
                  flex-direction: column;
                  gap: 6px;
                  width: 100%;
                  label {
                    color: var(--_gray-600);
                  }
                  .chk_gift_inp {
                    border: 1px solid var(--_gray-300);
                    border-radius: 6px;
                    height: 40px;
                    padding-inline: 10px;
                    &:placeholder-shown {
                      padding-left: 10px;
                      color: var(--_gray-400);
                    }
                    &:focus {
                      border: 1px solid var(--_primary-300);
                      outline: 2px solid var(--_primary-100);
                    }
                  }
                  &.pin {
                    width: 110px;
                  }
                  .error_msg {
                    display: block;
                    color: var(--_error-700);
                    font-size: 12px;
                  }
                }
                .error_msg {
                  color: var(--_error-700);
                  font-size: 14px;
                }
              }
            }
          }
          .chk_form_actions {
            display: flex;
            gap: 12px;
            .chk_sav_btn {
              padding: 12px 16px;
              background-color: var(--_primary-400);
              border-radius: 6px;
              color: var(--_base-white);
              &:hover {
                background-color: var(--_primary-500);
              }
            }
            .chk_can_btn {
              padding: 12px 16px;
              background-color: transparent;
              border-radius: 6px;
              color: var(--_gray-600);
              padding-inline: 10px;
              &:hover {
                background-color: var(--_gray-50);
                color: var(--_gray-900);
              }
            }
          }
          .tertiary_primary_btn {
            font-size: 12px;
            color: var(--_primary-400);
            display: inline-flex;
            width: fit-content;
            &:hover {
              color: var(--_primary-500);
              text-decoration: underline;
            }
          }
          .chk_primary_bnt {
            padding: 12px 24px;
            background-color: var(--_primary-400);
            color: var(--_base-white);
            font-weight: 600;
            border-radius: 6px;
            width: max-content;
            &:hover {
              background-color: var(--_primary-500);
            }
          }
          .chk_secondary_bnt {
            padding: 16px 24px;
            background-color: transparent;
            color: var(--_gray-600);
            font-weight: 600;
            border-radius: 6px;

            &:hover {
              background-color: var(--_gray-50);
              color: var(--_gray-900);
            }
          }
          // emp checkout end
        }

        // summary started for checkout
        .summary_container {
          width: 400px;
          height: 100%;
          // order summary styles started

          .cart_summary_wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            align-self: stretch;
            border-radius: 4px;
            border: 0.5px solid #d0d5dd;
            background: #fff;
            word-break: keep-all;
            overflow: hidden;
            width: 380px;

            .cart_summary_heading_wrapper {
              display: flex;
              padding: 12px;
              align-items: center;
              gap: 12px;
              align-self: stretch;
              background: #f5f5f5;
              border-bottom: 1px solid #d0d5dd;
              border-radius: 4px 4px 0 0;
              .icon svg {
                path {
                  stroke: #d0d5dd;
                }
              }

              .iconDesc svg {
                path {
                  stroke: #101828;
                }
              }

              .cart_summary_heading {
                width: 100%;
                height: auto;
                max-height: 48px;
                display: flex;
                align-items: center;
                color: #101828;
                font-size: 16px;
                font-weight: 600;
              }
            }

            .cart_summary_content_wrapper {
              padding: 16px;
              display: flex;
              flex-direction: column;
              width: 100%;
              gap: 16px;
              .cart_summary_products_container {
                display: flex;
                width: 100%;
                flex-direction: column;
                gap: 12px;
                // gap: var(--_ctm-lt-im-gp);

                .cart_summary_product_info_wrapper {
                  display: flex;
                  align-items: flex-start;
                  justify-content: space-between;
                  gap: 24px;

                  .cart_summary_product_info_wrapper {
                    display: flex;
                    gap: 12px;
                    align-items: flex-start;

                    .cart_summary_product_img {
                      width: 69px;
                      height: 80px;
                      background-color: var(--_base-white);
                      border-radius: 4px;
                    }

                    .cart_summary_product_content_wrapper {
                      display: flex;
                      flex-direction: column;
                      gap: 4px;
                      // gap: calc(var(--_ctm-lt-im-gp) / 4);

                      .cart_summary_product_content {
                        display: flex;
                        flex-direction: column;
                        // pt-wt-pt-qy-ft-fy
                        .cart_summary_heading_text {
                          color: var(--_gray-600);
                          font-weight: 600;
                          font-size: 14px;
                        }

                        .cart_summary_qty_text {
                          font-size: 12px;
                          font-weight: 400;
                          color: var(--_gray-400);
                        }
                        .cart_summary_qty_value {
                          font-size: 12px;
                          font-weight: 400;
                          color: var(--_gray-900);
                        }

                        .cart_summary_estimatedDate_text {
                          font-family: var(
                            --_ctm-mob-dn-pt-wt-pt-ed-de-ft-fy,
                            var(
                              --_ctm-tab-dn-pt-wt-pt-ed-de-ft-fy,
                              var(--_ctm-dn-pt-wt-pt-ed-de-ft-fy)
                            )
                          );
                          color: var(
                            --_ctm-mob-dn-pt-wt-pt-ed-de-cr,
                            var(--_ctm-tab-dn-pt-wt-pt-ed-de-cr, var(--_ctm-dn-pt-wt-pt-ed-de-cr))
                          );
                          font-weight: var(
                            --_ctm-mob-dn-pt-wt-pt-ed-de-ft-wt,
                            var(
                              --_ctm-tab-dn-pt-wt-pt-ed-de-ft-wt,
                              var(--_ctm-dn-pt-wt-pt-ed-de-ft-wt)
                            )
                          );
                          font-size: var(
                            --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se,
                            var(
                              --_ctm-tab-dn-pt-wt-pt-ed-de-ft-se,
                              var(--_ctm-dn-pt-wt-pt-ed-de-ft-se)
                            )
                          );
                          text-decoration: var(
                            --_ctm-mob-dn-pt-wt-pt-ed-de-ue,
                            var(--_ctm-tab-dn-pt-wt-pt-ed-de-ue, var(--_ctm-dn-pt-wt-pt-ed-de-ue))
                          );
                          letter-spacing: var(
                            --_ctm-mob-dn-pt-wt-pt-ed-de-lr-sg,
                            var(
                              --_ctm-tab-dn-pt-wt-pt-ed-de-lr-sg,
                              var(--_ctm-dn-pt-wt-pt-ed-de-lr-sg)
                            )
                          );
                          line-height: var(
                            --_ctm-mob-dn-pt-wt-pt-ed-de-le-ht,
                            var(
                              --_ctm-tab-dn-pt-wt-pt-ed-de-le-ht,
                              var(--_ctm-dn-pt-wt-pt-ed-de-le-ht)
                            )
                          );
                          font-style: var(
                            --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se-ic,
                            var(
                              --_ctm-tab-dn-pt-wt-pt-ed-de-ft-se-ic,
                              var(--_ctm-dn-pt-wt-pt-ed-de-ft-se-ic)
                            )
                          );
                          text-align: var(
                            --_ctm-mob-dn-pt-wt-pt-ed-de-tt-an,
                            var(
                              --_ctm-tab-dn-pt-wt-pt-ed-de-tt-an,
                              var(--_ctm-dn-pt-wt-pt-ed-de-tt-an)
                            )
                          );
                        }
                        .cart_summary_estimatedDate_value {
                          font-family: var(
                            --_ctm-mob-dn-pt-wt-pt-ed-de-ft-fy-dc,
                            var(
                              --_ctm-tab-dn-pt-wt-pt-ed-de-ft-fy-dc,
                              var(--_ctm-dn-pt-wt-pt-ed-de-ft-fy-dc)
                            )
                          );
                          color: var(
                            --_ctm-mob-dn-pt-wt-pt-ed-de-cr-dc,
                            var(
                              --_ctm-tab-dn-pt-wt-pt-ed-de-cr-dc,
                              var(--_ctm-dn-pt-wt-pt-ed-de-cr-dc)
                            )
                          );
                          font-weight: var(
                            --_ctm-mob-dn-pt-wt-pt-ed-de-ft-wt-dc,
                            var(
                              --_ctm-tab-dn-pt-wt-pt-ed-de-ft-wt-dc,
                              var(--_ctm-dn-pt-wt-pt-ed-de-ft-wt-dc)
                            )
                          );
                          font-size: var(
                            --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se-dc,
                            var(
                              --_ctm-tab-dn-pt-wt-pt-ed-de-ft-se-dc,
                              var(--_ctm-dn-pt-wt-pt-ed-de-ft-se-dc)
                            )
                          );
                          text-decoration: var(
                            --_ctm-mob-dn-pt-wt-pt-ed-de-ue-dc,
                            var(
                              --_ctm-tab-dn-pt-wt-pt-ed-de-ue-dc,
                              var(--_ctm-dn-pt-wt-pt-ed-de-ue-dc)
                            )
                          );
                          letter-spacing: var(
                            --_ctm-mob-dn-pt-wt-pt-ed-de-lr-sg-dc,
                            var(
                              --_ctm-tab-dn-pt-wt-pt-ed-de-lr-sg-dc,
                              var(--_ctm-dn-pt-wt-pt-ed-de-lr-sg-dc)
                            )
                          );
                          line-height: var(
                            --_ctm-mob-dn-pt-wt-pt-ed-de-le-ht-dc,
                            var(
                              --_ctm-tab-dn-pt-wt-pt-ed-de-le-ht-dc,
                              var(--_ctm-dn-pt-wt-pt-ed-de-le-ht-dc)
                            )
                          );
                          font-style: var(
                            --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se-ic-dc,
                            var(
                              --_ctm-tab-dn-pt-wt-pt-ed-de-ft-se-ic-dc,
                              var(--_ctm-dn-pt-wt-pt-ed-de-ft-se-ic-dc)
                            )
                          );
                          text-align: var(
                            --_ctm-mob-dn-pt-wt-pt-ed-de-tt-an-dc,
                            var(
                              --_ctm-tab-dn-pt-wt-pt-ed-de-tt-an-dc,
                              var(--_ctm-dn-pt-wt-pt-ed-de-tt-an-dc)
                            )
                          );
                        }
                      }
                    }
                  }
                }
              }

              .coupon_code_wrapper {
                display: flex;
                flex-direction: column;
                gap: 12px;
                width: 100%;

                .coupon_code_btn_wrapper {
                  display: flex;
                  justify-content: space-between;
                  width: 100%;
                }

                .coupon_code_input {
                  width: 100%;
                  padding: 8px 12px;
                  border-radius: 6px;
                  border: 1px solid #d0d5dd;
                  background-color: #ffffff;
                  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
                  font-size: 16px;
                  line-height: 24px;
                  height: 40px;
                  &::placeholder {
                    font-size: 14px;
                  }
                }

                .success_message {
                  display: flex;
                  flex: 1 0 0;
                  flex-wrap: wrap;
                  color: green;
                }

                .error_message {
                  display: flex;
                  flex: 1 0 0;
                  flex-wrap: wrap;
                  color: red;
                }
              }
              .subtotal_wrapper {
                display: flex;
                align-items: center;
                gap: 16px;
                align-self: stretch;
                justify-content: space-between;
                .cart_summary_number_text {
                  color: #667085;
                  font-weight: 400;
                  font-size: 14px;
                  text-align: left;
                }
                .cart_summary_number_value {
                  color: #101828;
                  font-size: 14px;
                  font-weight: 600;
                }
              }
              .cart_summary_content_details_wrapper {
                display: flex;
                flex-direction: column;
                gap: 8px;
                .cart_summary_shippingLabel_text {
                  color: #667085;
                  font-weight: 400;
                  font-size: 14px;
                  text-align: left;
                }
                .cart_summary_shippingLabel_value {
                  color: #101828;
                  font-size: 14px;
                  font-weight: 600;
                }
                .cart_summary_tax_text {
                  color: #667085;
                  font-weight: 400;
                  font-size: 14px;
                  text-align: left;
                }
                .cart_summary_tax_value {
                  color: #101828;
                  font-size: 14px;
                  font-weight: 600;
                }
              }
              .cart_summary_total_wrapper {
                display: flex;
                flex-direction: column;
                gap: 8px;
                border-top: 1px dashed var(--_gray-300);
                padding-top: 12px;
                .subtotal_wrapper {
                  display: flex;
                  align-items: center;
                  gap: 16px;
                  align-self: stretch;
                  justify-content: space-between;

                  .cart_summary_subTotal_text {
                    font-size: 16px;
                    font-weight: 600;
                    color: #101828;
                  }
                  .cart_summary_subTotal_value {
                    font-size: 16px;
                    font-weight: 600;
                    color: #101828;
                  }

                  .cart_summary_total_text {
                    font-size: 16px;
                    font-weight: 600;
                    color: #101828;
                  }
                  .cart_summary_total_value {
                    font-size: 20px;
                    font-weight: 600;
                    color: #101828;
                  }
                }
              }
            }

            .cart_summary_heading_text {
              font-size: 16px;
              font-weight: 600;
              color: var(--_gray-900);
            }

            .cart_summary_primary_text {
              font-size: 16px;
              font-weight: 600;
              color: var(--_gray-900);
            }
            .cart_summary_product_text {
              font-size: 14px;
              color: var(--_gray-600);
            }
            .cart_summary_secondary_text {
              color: var(--_ctm-dn-sy-tt-dn-cr);
              font-family: var(--_ctm-dn-sy-tt-dn-ft-fy);
              font-size: var(--_ctm-dn-sy-tt-dn-ft-se);
              font-style: var(--_ctm-dn-sy-tt-dn-ft-se-ic);
              font-weight: var(--_ctm-dn-sy-tt-dn-ft-wt);
              line-height: var(--_ctm-dn-sy-tt-dn-le-ht);
              letter-spacing: var(--_ctm-dn-sy-tt-dn-lr-sg);
              text-align: var(--_ctm-dn-sy-tt-dn-tt-an);
              text-decoration: var(--_ctm-dn-sy-tt-dn-ue);
            }

            .cart_summary_primary_btn_wrapper {
              padding: 12px;
              width: 100%;
              height: auto;
              min-height: 48px;
              background: #243dc6;
              border-radius: 4px;
              border: 1px solid #243dc6;
              color: #fff;
              text-align: center;
              font-size: 16px;
              font-weight: 600;

              &:hover {
                padding: 12px;
                width: 100%;
                height: auto;
                min-height: 48px;
                background: #243dc6;
                border-radius: 4px;
                border: 1px solid #243dc6;
                color: #fff;
                text-align: center;
                font-size: 16px;
                font-weight: 600;
              }
            }
            .cart_summary_placeOrder_btn_wrapper {
              padding: 12px;
              width: 100%;
              height: auto;
              min-height: 48px;
              background: #243dc6;
              border-radius: 4px;
              border: 1px solid #243dc6;
              color: #fff;
              text-align: center;
              font-size: 16px;
              font-weight: 600;
              &:hover {
                padding: 12px;
                width: 100%;
                height: auto;
                min-height: 48px;
                background: #243dc6;
                border-radius: 4px;
                border: 1px solid #243dc6;
                color: #fff;
                text-align: center;
                font-size: 16px;
                font-weight: 600;
              }
            }

            .submit_quotes {
              padding: 12px;
              width: 100%;
              height: auto;
              min-height: 48px;
              background: #fff;
              border-radius: 4px;
              border: 1px solid #101828;
              color: #101828;
              text-align: center;
              font-size: 16px;
              font-weight: 600;
              &:hover {
                padding: 12px;
                width: 100%;
                height: auto;
                min-height: 48px;
                background: #fff;
                border-radius: 4px;
                border: 1px solid #101828;
                color: #101828;
                text-align: center;
                font-size: 16px;
                font-weight: 600;
              }
            }

            .cart_summary_secondary_btn_wrapper {
              color: #243dc6;
              font-size: 14px;
              font-weight: 400;
            }
            .coupon_code_text {
              color: #243dc6;
              font-size: 14px;
              font-weight: 400;
            }
          }
        }
      }
    }
  }

  // link styles
  .btn {
    &:hover {
      text-decoration: underline;
    }
    &.link {
      color: var(--_primary-400);
    }
    &.primary {
      padding: 12px 24px;
      background-color: var(--_primary-400);
      border-radius: 4px;
      color: var(--_base-white);
      font-size: 16px;
      font-weight: 600;
    }
  }

  // order success for employee buy for
  // order status styles started
  .order-confirmation {
    display: flex;
    flex-direction: column;
    gap: 24px;
    border: 1px solid #eaecf0;
    border-radius: 6px;
    padding: 16px;
    color: #333333;
    .each-order {
      border: 1px solid var(--_gray-200);
      border-radius: 8px;
      padding: 16px;
      .order-header {
        border-bottom: 1px solid #eaecf0;
        padding-bottom: 24px;
        .user-info {
          display: flex;
          flex-direction: column;
          padding-bottom: 12px;
          margin-bottom: 12px;
          border-bottom: 1px solid var(--_gray-200);
          h3 {
            font-size: 20px;
            font-weight: 700;
            color: var(--_gray-900);
            line-height: 30px;
            margin-bottom: 6px;
            span {
              margin-left: 6px;
              svg {
                path {
                  stroke: #475467;
                }
              }
            }
          }
          .user-meta-list {
            display: flex;
            align-items: center;
            gap: 12px;
            .meta-item {
              display: flex;
              flex-direction: row;
              align-items: center;
              .meta-icon {
                display: flex;
                svg {
                  width: 18px;
                  height: 18px;
                }
                padding-right: 6px;
              }
              .meta-text {
                font-size: 12px;
                font-weight: 400;
                color: #475467;
                line-height: 18px;
              }
              &:not(:first-child)::before {
                content: "";
                display: inline-block;
                width: 5px;
                height: 5px;
                background: #d0d5dd;
                border-radius: 50%;
                margin-right: 12px;
              }
            }
          }
        }
      }

      .order-successful,
      .order-pending,
      .order-failed {
        display: flex;
        align-items: center;
        // background: #f0fdf4;
        // border-radius: 6px;
        // padding: 16px;
        // margin-bottom: 24px;
        background-color: #f6fef9;
        border-radius: 6px;
        border: 1px solid #d0d5dd;
        padding: 12px;
        margin-block: 16px;

        .check-icon {
          font-size: 28px;
          margin-right: 12px;
        }

        .success-text {
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 8px;
          .success_toast_header {
            display: flex;
            gap: 6px;
            align-items: center;
            .success__dropdown__icon {
              display: flex;
              svg {
                width: 24px;
                height: 24px;
                path {
                  stroke: #099250;
                  fill: #fff;
                }
              }
            }
            h2 {
              color: #101828;
              font-size: 20px;
              font-weight: 600;
              line-height: 32px;
            }
          }

          p {
            color: #475467;
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
          }
        }
      }
      .order-failed {
        background-color: var(--_error-100);
        border: 1px solid var(--_error-200);
        .success__dropdown__icon {
          svg path {
            stroke: var(--_error-700) !important;
          }
        }
      }
      .order-pending {
        background-color: #f5f6f9;
        border: 1px solid #c5d2fc;
        svg path {
          stroke: var(--_primary-700);
        }
      }
      .error_toast_message_wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fffbfa;
        border-radius: 6px;
        border: 1px solid #fda29b;
        padding: 12px;
        .error_toast_message_left_section {
          display: flex;
          flex-direction: column;
          gap: 8px;
          .error_toast_message_header {
            display: flex;
            gap: 8px;
            align-items: center;
            h2 {
              color: #101828;
              font-size: 24px;
              font-weight: 600;
              line-height: 32px;
            }
            .error__dropdown__icon {
              svg {
                width: 32px;
                height: 32px;
                path {
                  stroke: #d92d20;
                  fill: #ffffff;
                  stroke-width: 0.8;
                }
              }
            }
          }
          p {
            color: #475467;
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
          }
        }
        .error_message_btn {
          background-color: #243dc6;
          color: #ffffff;
          border-radius: 6px;
          font-size: 16px;
          font-weight: 600;
          padding: 12px 24px;
        }
      }

      .order-details-wrapper {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 48px;
        padding-bottom: 24px;
      }

      .order-info-section {
        display: flex;
        flex-direction: column;
        gap: 16px;
        .order_info_header {
          font-size: 14px;
          font-weight: 600;
          color: #101828;
          padding: 12px 16px;
          border: 1px solid #eaecf0;
          border-radius: 6px;
          background: #f5f5f5;
          span {
            font-size: 14px;
            font-weight: 600;
            color: var(--_gray-600);
          }
        }
      }
      .quick-actions-section {
        display: flex;
        flex-direction: column;
        gap: 16px;
        .quick_actions_header {
          font-size: 14px;
          font-weight: 600;
          color: #101828;
          padding: 12px 16px;
          border: 1px solid #eaecf0;
          border-radius: 6px;
          background: #f5f5f5;
          span {
            font-size: 14px;
            font-weight: 600;
            color: var(--_gray-600);
          }
        }
      }

      .order-info {
        display: flex;
        flex-direction: column;
        /* space between the two rows */
        .order-row {
          display: grid;
          gap: 12px 24px;
          /* 12px vertical, 24px horizontal */

          /* First row: two equal columns + bottom border */
          &:first-child {
            grid-template-columns: repeat(2, 1fr);
            border-bottom: 1px dashed var(--_gray-400);
            padding-bottom: 24px;
          }

          /* Second row: three equal columns */
          &:nth-child(2) {
            grid-template-columns: repeat(3, 1fr);
            margin-top: 24px;
          }

          /* Each individual info‐cell styling */
          > div {
            strong {
              display: block;
              font-size: 14px;
              color: var(--_gray-500);
              line-height: 20px;
              margin-bottom: 4px;
              font-weight: 400;
            }

            p {
              margin: 0;
              margin-bottom: 4px;
              font-size: 20px;
              font-weight: 600;
              color: var(--_gray-900);
              line-height: 30px;
            }
            .delivery_address {
              font-size: 14px;
              font-weight: 400;
              color: var(--_gray-400);
              line-height: 20px;
            }
            .shipping-type {
              font-size: 14px;
              font-weight: 400;
              color: var(--_gray-900);
              line-height: 20px;
            }

            .status {
              margin-left: 6px;
              padding: 2px 8px;
              border-radius: 4px;
              font-size: 12px;
              font-weight: 500;
              line-height: 18px;

              display: inline-flex;
              align-items: center;
              gap: 8px;
              &::before {
                content: "";
                display: inline-block;
                width: 6px;
                height: 6px;
                border-radius: 50%;
              }
              &.success {
                background-color: var(--_success-200);
                &::before {
                  background-color: var(--_success-700);
                }
              }
              &.failed {
                background-color: var(--_error-100);
                &::before {
                  background-color: var(--_error-700);
                }
              }
            }

            .link-button {
              color: #243dc6;
              font-size: 14px;
              font-weight: 400;
              line-height: 20px;
            }

            .submitted {
              font-size: 12px;
              font-weight: 500;
              line-height: 18px;
              background: #eff8ff;
              color: #0040c1;
              display: inline-block;
              height: 22px;
              &::before {
                content: "";
                display: inline-block;
                width: 6px;
                height: 6px;
                background-color: #0040c1;
                border-radius: 50%;
                margin-right: 6px;
                vertical-align: middle;
                margin-top: -1px;
              }
            }

            .order-date {
              font-size: 14px;
              font-weight: 400;
              color: var(--_gray-400);
              line-height: 20px;
            }

            .inclusive-tax {
              margin-left: 4px;
              font-size: 0.7rem;
              color: #6b7280;
            }
          }
        }
      }

      .quick-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 8px;
        color: #243dc6;
        .action-button {
          padding: 8px;
          font-size: 14px;
          border-radius: 4px;
          background: none;
          color: #243dc6;
          cursor: pointer;
          text-align: start;

          &:hover {
            color: #0d60e5;
          }
        }
      }

      .cart-items {
        h3 {
          font-size: 14px;
          color: #667085;
          margin-bottom: 24px;
          line-height: 20px;
          font-weight: 400;
        }

        .items-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 24px;
          margin-bottom: 24px;
        }

        .item-card {
          gap: 12px;
          display: flex;
          align-items: flex-start;

          img {
            width: 69px;
            height: 80px;
            object-fit: cover;
            border-radius: 4px;
            display: flex;
            align-items: flex-start;
          }

          .item-details {
            flex: 1;

            .item-name {
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
              margin: 0 0 4px;
              font-size: 14px;
              font-weight: 600;
              color: var(--_gray-900);
              line-height: 20px;
            }

            .item-specs {
              font-size: 12px;
              color: #475467;
              font-weight: 400;
            }
            .item-qty {
              font-size: 12px;
              font-weight: 400;
              color: #475467;
              span {
                font-size: 12px;
                font-weight: 400;
                color: #101828;
              }
            }
            .estimated-delivery {
              margin: 0;
              font-size: 12px;
              color: var(--_gray-600);
              line-height: 18px;
            }

            .delivery-date {
              margin: 0;
              font-size: 12px;
              font-weight: bold;
              color: #101828;
            }
          }

          .item-price {
            font-size: 12px;
            font-weight: 600;
            color: #1e293b;
            margin-left: 12px;
          }
        }

        .show-more-wrapper {
          margin: 32px 16px 16px 0px;
          button {
            padding: 12px 16px;
            color: var(--_primary-400);
            font-weight: 600;
            border-radius: 6px;
            &:hover {
              background-color: var(--_primary-25);
            }
          }
        }
      }

      .order-attributes {
        border-top: 1px solid #eaecf0;
        padding-top: 24px;

        h4 {
          font-size: 14px;
          font-weight: 400;
          color: var(--_gray-500);
          line-height: 20px;
        }

        p {
          font-size: 14px;
          font-weight: 600;
          line-height: 20px;
          color: var(--_gray-900);
        }
      }

      @media (max-width: 768px) {
        .order-details-wrapper {
          grid-template-columns: 1fr;
        }

        .items-grid {
          grid-template-columns: 1fr;
        }
      }
    }
  }
}