@use "sass:map";
@use "sass:list";
@use "./functions.scss" as *;

$primary-color: var(--_primary-400);
$secondary-color: var(--_gray-300);
$light-color: #f5f5f5;
$dark-color: #343a40;

$activeElementSelector: "[data-has-clicked='true']";
[data-div-type="element"] {
  &[data-element-type="shipping-payment"] {
    width: calc(
      1% *
        var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, auto)))
    );
    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn, var(--_ctm-lt-mn))));
    & > div {
      &.wrapper {
        width: 100%;
        min-height: prepareMediaVariable(--_ctm-lt-mn-ht);
        padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));

        background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
        background-image: var(--_ctm-mob-dn-bd-ie, var(--_ctm-tab-dn-bd-ie, var(--_ctm-dn-bd-ie)));
        background-attachment: var(
          --_ctm-mob-dn-bd-at,
          var(--_ctm-tab-dn-bd-at, var(--_ctm-dn-bd-at))
        );
        background-position: var(
          --_ctm-mob-dn-bd-pn,
          var(--_ctm-tab-dn-bd-pn, var(--_ctm-dn-bd-pn))
        );
        background-repeat: var(--_ctm-mob-dn-bd-rt, var(--_ctm-tab-dn-bd-rt, var(--_ctm-dn-bd-rt)));
        background-size: var(--_ctm-mob-dn-bd-se, var(--_ctm-tab-dn-bd-se, var(--_ctm-dn-bd-se)));
        border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
        border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)));
        border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
        border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
        box-shadow: var(
          --_hover-show-shadow,
          var(
            --_sf-hr-bx-sw,
            var(
              --_show-shadow,
              var(
                  --_ctm-mob-dn-dt-se-sw-ae,
                  var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))
                )
                var(
                  --_ctm-mob-dn-dt-se-sw-br,
                  var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
                )
                var(
                  --_ctm-mob-dn-dt-se-sw-sd,
                  var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
                )
                var(
                  --_ctm-mob-dn-dt-se-sw-cr,
                  var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
                )
            )
          )
        );
      }

      .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);
                  text-transform: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-tt-tm);
                  word-wrap: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-wd-wp);
                  word-break: var(--_ctm-dn-sg-md-dn-sg-md-ve-dn-wd-bk);
                  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: #2563eb;
                    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 {
                    //     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);
                    //         }
                    //       }
                    //     }
                    //   }
                    // }
                    .chk_payment_section {
                      display: flex;
                      justify-content: space-between;
                      align-items: center;
                      width: 100%;
                      padding: 16px;
                      .chk_payment_section_col_left {
                        display: flex;
                        gap: 12px;
                        svg {
                          width: 24px;
                          height: 24px;
                        }
                        .chk_payment_section_method {
                          display: flex;
                          flex-direction: column;
                          gap: 12px;
                          .chk_payment_section_method_name {
                            font-size: 14px;
                            font-weight: 700;
                            line-height: 20px;
                            color: var(--_gray-700);
                          }
                          .po-container {
                            .po-grid {
                              display: flex;
                              gap: 8px;
                              & > div {
                                border: 1px solid var(--_gray-300);
                                background-color: var(--_base-white);
                                border-radius: 4px;
                                width: 90px;
                                height: 28px;
                                overflow: hidden;
                                input {
                                  padding-inline: 10px;
                                  height: 100%;
                                }
                              }
                            }
                          }
                          & > div {
                            display: flex;
                            gap: 16px;
                            .label {
                              font-size: 12px;
                              color: var(--_gray-500);
                            }
                            .price {
                              font-size: 12px;
                              color: var(--_gray-900);
                            }
                          }
                        }
                      }
                      &_col_right {
                        .chk_currency_inp_sec {
                          display: flex;
                          justify-content: end;
                          .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;
                              }
                            }
                          }
                        }
                        .cur_conversion {
                          font-size: 12px;
                        }
                      }

                      .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);
                          text-transform: var(--_ctm-dn-pt-os-dn-pt-ne-dn-tt-tm);
                          word-wrap: var(--_ctm-dn-pt-os-dn-pt-ne-dn-wd-wp);
                          word-break: var(--_ctm-dn-pt-os-dn-pt-ne-dn-wd-bk);
                          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);
                          text-transform: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-tt-tm);
                          word-wrap: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-wd-wp);
                          word-break: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-wd-bk);
                          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);
                          text-transform: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-tt-tm);
                          word-wrap: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-wd-wp);
                          word-break: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-wd-bk);
                          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);
                    text-transform: var(--_ctm-dn-sg-md-dn-hg-dn-tt-tm);
                    word-wrap: var(--_ctm-dn-sg-md-dn-hg-dn-wd-wp);
                    word-break: var(--_ctm-dn-sg-md-dn-hg-dn-wd-bk);
                    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);
                  text-transform: var(--_ctm-dn-se-sg-as-dn-cx-dn-tt-tm);
                  word-wrap: var(--_ctm-dn-se-sg-as-dn-cx-dn-wd-wp);
                  word-break: var(--_ctm-dn-se-sg-as-dn-cx-dn-wd-bk);
                  &.flex__overflow {
                    white-space: normal;
                    @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
                  }
                  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);
                  text-transform: var(--_ctm-dn-se-sg-as-dn-cx-dn-tt-tm);
                  word-wrap: var(--_ctm-dn-se-sg-as-dn-cx-dn-wd-wp);
                  word-break: var(--_ctm-dn-se-sg-as-dn-cx-dn-wd-bk);
                  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);
                    text-transform: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-tt-tm);
                    word-wrap: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-wd-wp);
                    word-break: var(--_ctm-dn-pt-os-dn-pt-os-ll-dn-wd-bk);
                    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);
                    text-transform: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-tt-tm);
                    word-wrap: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-wd-wp);
                    word-break: var(--_ctm-dn-pt-os-dn-pt-os-ve-dn-wd-bk);
                    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);
              text-transform: var(--_ctm-dn-it-bx-dn-tt-tm);
              word-wrap: var(--_ctm-dn-it-bx-dn-wd-wp);
              word-break: var(--_ctm-dn-it-bx-dn-wd-bk);
              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);
                text-transform: var(--_ctm-dn-pt-os-dn-cx-ll-dn-tt-tm);
                word-wrap: var(--_ctm-dn-pt-os-dn-cx-ll-dn-wd-wp);
                word-break: var(--_ctm-dn-pt-os-dn-cx-ll-dn-wd-bk);
                &.flex__overflow {
                  white-space: normal;
                  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
                }
                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);
                text-transform: var(--_ctm-dn-pt-os-dn-cx-ll-dn-tt-tm);
                word-wrap: var(--_ctm-dn-pt-os-dn-cx-ll-dn-wd-wp);
                word-break: var(--_ctm-dn-pt-os-dn-cx-ll-dn-wd-bk);
                &.flex__overflow {
                  white-space: normal;
                  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
                }
                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);
                    gap: 12px;

                    .chk_saved_address_name {
                      color: var(--_gray-900);
                      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-900);
                      font-size: 12px;
                    }
                    .address_skeletons {
                      display: flex;
                      gap: 8px;
                      margin-bottom: 4px;
                    }
                  }

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

                .right-btn {
                  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%;
            .est__dropdown {
              align-items: start;
              .est__dropdown__button {
                width: 100%;
                .value__selected {
                  align-items: center;
                  justify-content: start;
                }
              }
            }
            &.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);
        }
      }
    }

    .add_credit_card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px;

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

      .cc_info {
        display: flex;
        align-items: center;
        // flex-direction: column;
        gap: 6px;
        justify-content: space-between;
        width: 100%;

        .cc_title {
          font-size: 14px;
          font-weight: 600;
        }
        .chk_payment_cred_section_col_right {
          .chk_currency_inp_sec {
            display: flex;
            justify-content: end;
            .chk_currency_inp {
              border: 1px solid var(--_gray-200);
              min-width: 100px;
              display: flex;
              gap: 12px;
              height: 40px;
              border-radius: 4px;
              align-items: center;
              max-width: 120px;
              padding-inline: 12px;
            }
          }
          .cur_conversion {
            font-size: 14px;
          }
        }
      }
    }
    .add_new_credit_card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-inline: 16px;
    }
    .cc_tertiary_btn {
      color: var(--_primary-400);

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

    // &[data-view-state="full"] {
    //   width: auto;
    //   margin: 0;
    //   justify-self: stretch !important;
    //   align-self: stretch !important;
    //   cursor: auto;
    //   &:is(#{$activeElementSelector}) {
    //     & > div {
    //       &[data-div-type="wrapper__layer"] {
    //         --_sf-vt-zz: visible;
    //         --_sf-op-zz: 1;
    //       }
    //     }
    //   }
    // }
  }
}