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

$resizerId: "[data-cms-tool='cms-element-resizer']";
$resizeActive: '[data-cms-element-resizer="true"]';

[data-div-type="element"] {
  &[data-element-type="coupon"] {
    width: var(--_sf-el-wh-st-mx,
        calc(1% * var(--_mob-ctm-ele-nw-wh-vl,
            var(--_tab-ctm-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))))));
    margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));

    &>div {
      &.wrapper {
        width: 100%;
      }
    }

    .coupon_code {
      background-color: var(--_ctm-mob-dn-cn-cr-bd-cr,
          var(--_ctm-tab-dn-cn-cr-bd-cr, var(--_ctm-dn-cn-cr-bd-cr)));
      border-color: var(--_ctm-mob-dn-cn-cr-br-cr,
          var(--_ctm-tab-dn-cn-cr-br-cr, var(--_ctm-dn-cn-cr-br-cr)));
      border-style: var(--_ctm-mob-dn-cn-cr-br-se,
          var(--_ctm-tab-dn-cn-cr-br-se, var(--_ctm-dn-cn-cr-br-se)));
      border-width: var(--_ctm-mob-dn-cn-cr-br-wh,
          var(--_ctm-tab-dn-cn-cr-br-wh, var(--_ctm-dn-cn-cr-br-wh)));
      border-radius: var(--_ctm-mob-dn-cn-cr-br-rs,
          var(--_ctm-tab-dn-cn-cr-br-rs, var(--_ctm-dn-cn-cr-br-rs)));
      box-shadow: var(var(--_ctm-mob-dn-cn-cr-sw-ae,
            var(--_ctm-tab-dn-cn-cr-sw-ae, var(--_ctm-dn-cn-cr-sw-ae, none))) var(--_ctm-mob-dn-cn-cr-sw-br,
            var(--_ctm-tab-dn-cn-cr-sw-br, var(--_ctm-dn-cn-cr-sw-br, none))) var(--_ctm-mob-dn-cn-cr-sw-sd,
            var(--_ctm-tab-dn-cn-cr-sw-sd, var(--_ctm-dn-cn-cr-sw-sd, none))) var(--_ctm-mob-dn-cn-cr-sw-cr,
            var(--_ctm-tab-dn-cn-cr-sw-cr, var(--_ctm-dn-cn-cr-sw-cr, none))));
      width: 100%;
      // max-width: 400px;
      overflow: hidden;
      height: auto;
      position: sticky;
      top: 10px;

      // margin-bottom: 24px;
      .coupon_code_header {
        // font-size: 16px;
        font-family: var(--_ctm-mob-dn-cn-hr-ft-fy,
            var(--_ctm-tab-dn-cn-hr-ft-fy, var(--_ctm-dn-cn-hr-ft-fy)));
        text-transform: var(--_ctm-mob-dn-cn-hr-tt-tm,
            var(--_ctm-tab-dn-cn-hr-tt-tm, var(--_ctm-dn-cn-hr-tt-tm)));
        word-wrap: var(--_ctm-mob-dn-cn-hr-wd-wp,
            var(--_ctm-tab-dn-cn-hr-wd-wp, var(--_ctm-dn-cn-hr-wd-wp)));
        word-break: var(--_ctm-mob-dn-cn-hr-wd-bk,
            var(--_ctm-tab-dn-cn-hr-wd-bk, var(--_ctm-dn-cn-hr-wd-bk)));
        color: var(--_ctm-mob-dn-cn-hr-cr, var(--_ctm-tab-dn-cn-hr-cr, var(--_ctm-dn-cn-hr-cr)));
        font-weight: var(--_ctm-mob-dn-cn-hr-ft-wt,
            var(--_ctm-tab-dn-cn-hr-ft-wt, var(--_ctm-dn-cn-hr-ft-wt)));
        font-size: var(--_ctm-mob-dn-cn-hr-ft-se,
            var(--_ctm-tab-dn-cn-hr-ft-se, var(--_ctm-dn-cn-hr-ft-se)));
        text-decoration: var(--_ctm-mob-dn-cn-hr-ue,
            var(--_ctm-tab-dn-cn-hr-ue, var(--_ctm-dn-cn-hr-ue)));
        letter-spacing: var(--_ctm-mob-dn-cn-hr-lr-sg,
            var(--_ctm-tab-dn-cn-hr-lr-sg, var(--_ctm-dn-cn-hr-lr-sg)));
        line-height: var(--_ctm-mob-dn-cn-hr-le-ht,
            var(--_ctm-tab-dn-cn-hr-le-ht, var(--_ctm-dn-cn-hr-le-ht)));
        font-style: var(--_ctm-mob-dn-cn-hr-ft-se-ic,
            var(--_ctm-tab-dn-cn-hr-ft-se-ic, var(--_ctm-dn-cn-hr-ft-se-ic)));
        text-align: var(--_ctm-mob-dn-cn-hr-tt-an,
            var(--_ctm-tab-dn-cn-hr-tt-an, var(--_ctm-dn-cn-hr-tt-an)));
        background-color: var(--_ctm-mob-dn-cn-hr-bd-cr,
            var(--_ctm-tab-dn-cn-hr-bd-cr, var(--_ctm-dn-cn-hr-bd-cr)));
        border-color: var(--_ctm-mob-dn-cn-hr-br-cr,
            var(--_ctm-tab-dn-cn-hr-br-cr, var(--_ctm-dn-cn-hr-br-cr)));
        border-style: var(--_ctm-mob-dn-cn-hr-br-se,
            var(--_ctm-tab-dn-cn-hr-br-se, var(--_ctm-dn-cn-hr-br-se)));
        border-width: var(--_ctm-mob-dn-cn-hr-br-wh,
            var(--_ctm-tab-dn-cn-hr-br-wh, var(--_ctm-dn-cn-hr-br-wh)));
        padding: var(--_ctm-mob-dn-cn-hr-pg, var(--_ctm-tab-dn-cn-hr-pg, var(--_ctm-dn-cn-hr-pg)));

        &.divider {
          border-bottom: 1px dashed var(--_gray-300);
        }
      }

      .coupon_code_body {
        padding: var(--_ctm-mob-dn-cn-wt-cr-pg,
            var(--_ctm-tab-dn-cn-wt-cr-pg, var(--_ctm-dn-cn-wt-cr-pg)));

        .apply_coupon_code_body {
          // padding-top: 16px;
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: var(--_ctm-mob-dn-cn-wt-cr-im-gp,
              var(--_ctm-tab-dn-cn-wt-cr-im-gp, var(--_ctm-dn-cn-wt-cr-im-gp)));

          .apply_coupon_code_flex {
            display: flex;
            gap: var(--_ctm-mob-dn-cn-wt-cr-im-gp,
                var(--_ctm-tab-dn-cn-wt-cr-im-gp, var(--_ctm-dn-cn-wt-cr-im-gp)));

            .cpn__sale__icon {
              margin-top: 4px;

              .icon {
                svg {
                  width: var(--_ctm-mob-dn-cn-wt-in-se,
                      var(--_ctm-tab-dn-cn-wt-in-se, var(--_ctm-dn-cn-wt-in-se)));
                  height: var(--_ctm-mob-dn-cn-wt-in-se,
                      var(--_ctm-tab-dn-cn-wt-in-se, var(--_ctm-dn-cn-wt-in-se)));

                  path {
                    stroke: var(--_ctm-mob-dn-cn-wt-in-c1,
                        var(--_ctm-tab-dn-cn-wt-in-c1, var(--_ctm-dn-cn-wt-in-c1)));
                    // Overrides the stroke-width presentation attribute baked into the icon markup.
                    stroke-width: prepareMediaVariable(--_ctm-dn-cn-wt-se-wh, 1.25);
                  }
                }
              }
            }

            .apply_coupon_code {
              display: flex;
              flex-direction: column;
              justify-content: center;
              gap: 4px;

              .cpn_sale_text {
                // font-size: 14px;
                font-family: var(--_ctm-mob-dn-cn-wt-te-ft-fy,
                    var(--_ctm-tab-dn-cn-wt-te-ft-fy, var(--_ctm-dn-cn-wt-te-ft-fy)));
                text-transform: var(--_ctm-mob-dn-cn-wt-te-tt-tm,
                    var(--_ctm-tab-dn-cn-wt-te-tt-tm, var(--_ctm-dn-cn-wt-te-tt-tm)));
                word-wrap: var(--_ctm-mob-dn-cn-wt-te-wd-wp,
                    var(--_ctm-tab-dn-cn-wt-te-wd-wp, var(--_ctm-dn-cn-wt-te-wd-wp)));
                word-break: var(--_ctm-mob-dn-cn-wt-te-wd-bk,
                    var(--_ctm-tab-dn-cn-wt-te-wd-bk, var(--_ctm-dn-cn-wt-te-wd-bk)));
                color: var(--_ctm-mob-dn-cn-wt-te-cr,
                    var(--_ctm-tab-dn-cn-wt-te-cr, var(--_ctm-dn-cn-wt-te-cr)));
                font-weight: var(--_ctm-mob-dn-cn-wt-te-ft-wt,
                    var(--_ctm-tab-dn-cn-wt-te-ft-wt, var(--_ctm-dn-cn-wt-te-ft-wt)));
                font-size: var(--_ctm-mob-dn-cn-wt-te-ft-se,
                    var(--_ctm-tab-dn-cn-wt-te-ft-se, var(--_ctm-dn-cn-wt-te-ft-se)));
                text-decoration: var(--_ctm-mob-dn-cn-wt-te-ue,
                    var(--_ctm-tab-dn-cn-wt-te-ue, var(--_ctm-dn-cn-wt-te-ue)));
                letter-spacing: var(--_ctm-mob-dn-cn-wt-te-lr-sg,
                    var(--_ctm-tab-dn-cn-wt-te-lr-sg, var(--_ctm-dn-cn-wt-te-lr-sg)));
                line-height: var(--_ctm-mob-dn-cn-wt-te-le-ht,
                    var(--_ctm-tab-dn-cn-wt-te-le-ht, var(--_ctm-dn-cn-wt-te-le-ht)));
                font-style: var(--_ctm-mob-dn-cn-wt-te-ft-se-ic,
                    var(--_ctm-tab-dn-cn-wt-te-ft-se-ic, var(--_ctm-dn-cn-wt-te-ft-se-ic)));
                text-align: var(--_ctm-mob-dn-cn-wt-te-tt-an,
                    var(--_ctm-tab-dn-cn-wt-te-tt-an, var(--_ctm-dn-cn-wt-te-tt-an)));
                // font-size: 16px;
                // font-weight: 600;
                // color: var(--_gray-900);
                // line-height: 20px;
              }

              .cpn_sale_desc {
                font-family: var(--_ctm-mob-dn-cn-wt-dn-ft-fy,
                    var(--_ctm-tab-dn-cn-wt-dn-ft-fy, var(--_ctm-dn-cn-wt-dn-ft-fy)));
                text-transform: var(--_ctm-mob-dn-cn-wt-dn-tt-tm,
                    var(--_ctm-tab-dn-cn-wt-dn-tt-tm, var(--_ctm-dn-cn-wt-dn-tt-tm)));
                word-wrap: var(--_ctm-mob-dn-cn-wt-dn-wd-wp,
                    var(--_ctm-tab-dn-cn-wt-dn-wd-wp, var(--_ctm-dn-cn-wt-dn-wd-wp)));
                word-break: var(--_ctm-mob-dn-cn-wt-dn-wd-bk,
                    var(--_ctm-tab-dn-cn-wt-dn-wd-bk, var(--_ctm-dn-cn-wt-dn-wd-bk)));
                color: var(--_ctm-mob-dn-cn-wt-dn-cr,
                    var(--_ctm-tab-dn-cn-wt-dn-cr, var(--_ctm-dn-cn-wt-dn-cr)));
                font-weight: var(--_ctm-mob-dn-cn-wt-dn-ft-wt,
                    var(--_ctm-tab-dn-cn-wt-dn-ft-wt, var(--_ctm-dn-cn-wt-dn-ft-wt)));
                // font-size: 14px;
                font-size: var(--_ctm-mob-dn-cn-wt-dn-ft-se,
                    var(--_ctm-tab-dn-cn-wt-dn-ft-se, var(--_ctm-dn-cn-wt-dn-ft-se)));
                text-decoration: var(--_ctm-mob-dn-cn-wt-dn-ue,
                    var(--_ctm-tab-dn-cn-wt-dn-ue, var(--_ctm-dn-cn-wt-dn-ue)));
                letter-spacing: var(--_ctm-mob-dn-cn-wt-dn-lr-sg,
                    var(--_ctm-tab-dn-cn-wt-dn-lr-sg, var(--_ctm-dn-cn-wt-dn-lr-sg)));
                line-height: var(--_ctm-mob-dn-cn-wt-dn-le-ht,
                    var(--_ctm-tab-dn-cn-wt-dn-le-ht, var(--_ctm-dn-cn-wt-dn-le-ht)));
                font-style: var(--_ctm-mob-dn-cn-wt-dn-ft-se-ic,
                    var(--_ctm-tab-dn-cn-wt-dn-ft-se-ic, var(--_ctm-dn-cn-wt-dn-ft-se-ic)));
                text-align: var(--_ctm-mob-dn-cn-wt-dn-tt-an,
                    var(--_ctm-tab-dn-cn-wt-dn-tt-an, var(--_ctm-dn-cn-wt-dn-tt-an)));

                // font-size: 14px;
                // font-weight: 400;
                // color: var(--_gray-500);
                // line-height: 20px;
                .login_link {
                  font-family: var(--_ctm-mob-dn-cn-wt-ft-fy-dc,
                      var(--_ctm-tab-dn-cn-wt-ft-fy-dc, var(--_ctm-dn-cn-wt-ft-fy-dc)));
                  text-transform: var(--_ctm-mob-dn-cn-wt-tt-tm-dc,
                      var(--_ctm-tab-dn-cn-wt-tt-tm-dc, var(--_ctm-dn-cn-wt-tt-tm-dc)));
                  word-wrap: var(--_ctm-mob-dn-cn-wt-wd-wp-dc,
                      var(--_ctm-tab-dn-cn-wt-wd-wp-dc, var(--_ctm-dn-cn-wt-wd-wp-dc)));
                  word-break: var(--_ctm-mob-dn-cn-wt-wd-bk-dc,
                      var(--_ctm-tab-dn-cn-wt-wd-bk-dc, var(--_ctm-dn-cn-wt-wd-bk-dc)));
                  color: var(--_thm-cs-tt-ls-as);
                  font-weight: var(--_ctm-mob-dn-cn-wt-ft-wt-dc,
                      var(--_ctm-tab-dn-cn-wt-ft-wt-dc, var(--_ctm-dn-cn-wt-ft-wt-dc)));
                  font-size: 14px;
                  // font-size: var(
                  //   --_ctm-mob-dn-cn-wt-ft-se-dc,
                  //   var(--_ctm-tab-dn-cn-wt-ft-se-dc, var(--_ctm-dn-cn-wt-ft-se-dc))
                  // );
                  text-decoration: var(--_ctm-mob-dn-cn-wt-ue-dc,
                      var(--_ctm-tab-dn-cn-wt-ue-dc, var(--_ctm-dn-cn-wt-ue-dc)));
                  letter-spacing: var(--_ctm-mob-dn-cn-wt-lr-sg-dc,
                      var(--_ctm-tab-dn-cn-wt-lr-sg-dc, var(--_ctm-dn-cn-wt-lr-sg-dc)));
                  line-height: var(--_ctm-mob-dn-cn-wt-le-ht-dc,
                      var(--_ctm-tab-dn-cn-wt-le-ht-dc, var(--_ctm-dn-cn-wt-le-ht-dc)));
                  font-style: var(--_ctm-mob-dn-cn-wt-ft-se-ic-dc,
                      var(--_ctm-tab-dn-cn-wt-ft-se-ic-dc, var(--_ctm-dn-cn-wt-ft-se-ic-dc)));
                  text-align: var(--_ctm-mob-dn-cn-wt-tt-an-dc,
                      var(--_ctm-tab-dn-cn-wt-tt-an-dc, var(--_ctm-dn-cn-wt-tt-an-dc)));
                  // color: var(--_primary-400);
                  // font-weight: 700;
                }
              }
            }
          }

          .apply_coupon_code_btn {
            padding: 12px;
            white-space: nowrap;
          }

          .btn__with__text[data-btn-name="applyButton"] {
            width: 100%;

            &[data-show-shadow="false"] {
              --_show-shadow: none;
            }

            &[data-icon-position="left"] {
              --_sf-fd-bn: row;
            }

            &[data-icon-position="right"] {
              --_sf-fd-bn: row-reverse;
            }

            &[data-icon-position="center"] {
              --_sf-fd-bn: row;
            }

            &[data-element-style="Icon"] {
              &[data-icon-position="left"] {
                .add_order_button {
                  justify-content: start;
                }
              }

              &[data-icon-position="right"] {
                .add_order_button {
                  justify-content: end;
                }
              }

              &[data-icon-position="center"] {
                .add_order_button {
                  justify-content: center;
                }
              }
            }

            &:hover {
              --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-bd-cr)};
              --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-br-cr)};
              --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-br-se)};
              --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-br-wh)};
              --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-br-rs)};
              --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-at)};
              --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-gp)};

              // for shadow
              --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-sw-ae)};
              --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-sw-br)};
              --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-sw-hr)};
              --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-as-ay-bn-hr-se-sw-cr)};
              // for font

              --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-cr)};
              --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ft-fy)};
              --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ft-se)};
              --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ft-wt)};
              --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ft-se-ic)};
              --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-tt-an)};
              --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-lr-sg)};
              --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-le-ht)};

              --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-in-se)};
              --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-in-se)};
              --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-in-c1)};
              --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ue)};

              // for pading and width
              --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-pg)};
              --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-wh)};

              &[data-hover-show-shadow="false"] {
                --_hover-show-shadow: none;
              }

              &[data-hover-show-icon="false"] {
                --_hover-show-icon: none;
              }
            }

            background-color: var(--_sf-hr-bd-cr,
              prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-bd-cr));

            padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-pg));
            width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-wh));
            display: flex;
            flex-direction: var(--_sf-fd-bn);
            align-items: center;

            justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-at));
            gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-gp));

            border-radius: var(--_sf-hr-br-rs,
              prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-br-rs));

            box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-sw-cr));
            width: 140px;
            display: flex;

            &[data-show-border="true"] {
              // width: 100%;
              border-color: var(--_sf-hr-br-cr,
                  prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-br-cr));

              border-style: var(--_sf-hr-br-se,
                  prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-br-se));

              border-width: var(--_sf-hr-br-wh,
                  prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-br-wh));
            }

            .txt {
              display: flex;

              color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-cr));

              font-family: var(--_sf-hr-ft-fy,
                  prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-ft-fy));
              text-transform: var(--_sf-hr-tt-tm,
                  prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-tt-tm));
              word-wrap: var(--_sf-hr-wd-wp,
                  prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-wd-wp));
              word-break: var(--_sf-hr-wd-bk,
                  prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-wd-bk));
              &.flex__overflow {
                white-space: normal;
                @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
              }

              font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-ft-se));

              font-weight: var(--_sf-hr-ft-wt,
                  prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-ft-wt));

              font-style: var(--_sf-hr-ft-se-ic,
                  prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-ft-se-ic));

              text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-tt-an));

              letter-spacing: var(--_sf-hr-lr-sg,
                  prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-lr-sg));

              line-height: var(--_sf-hr-le-ht,
                  prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-le-ht));

              text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
            }

            .icon {
              display: var(--_hover-show-icon, var(--_show-icon, flex));

              svg {
                width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-in-se));
                height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-in-se));

                path {
                  stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-in-c1));
                  // Overrides the stroke-width presentation attribute baked into the icon markup.
                  stroke-width: prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-se-wh, 1.25);
                }
              }
            }

            [data-element-style="Text"] {
              display: inline-block;
              width: 100%;
            }

            &[data-show-icon="false"] {
              --_show-icon: none;
            }

            .icon--hover {
              // position: absolute;
              // inset: 0;
              // opacity: 0;
              display: none;
              transition: opacity 0.2s ease;
            }

            &:hover .icon--hover {
              // opacity: 1;
              display: flex;
            }

            &:hover .icon--default {
              // opacity: 0;
              display: none;
            }
          }
        }

        .coupon_code_apply_section {
          display: flex;
          flex-direction: column;
          gap: 16px;

          .coupon_code_fields_wrapper {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;

            input {
              // border: 1px solid #d0d5dd;
              // padding: 12px;
              // width: 100%;
              // border-radius: 4px;
              font-family: var(--_ctm-mob-dn-cn-wt-it-fd-ft-fy,
                  var(--_ctm-tab-dn-cn-wt-it-fd-ft-fy, var(--_ctm-dn-cn-wt-it-fd-ft-fy)));
              text-transform: var(--_ctm-mob-dn-cn-wt-it-fd-tt-tm,
                  var(--_ctm-tab-dn-cn-wt-it-fd-tt-tm, var(--_ctm-dn-cn-wt-it-fd-tt-tm)));
              word-wrap: var(--_ctm-mob-dn-cn-wt-it-fd-wd-wp,
                  var(--_ctm-tab-dn-cn-wt-it-fd-wd-wp, var(--_ctm-dn-cn-wt-it-fd-wd-wp)));
              word-break: var(--_ctm-mob-dn-cn-wt-it-fd-wd-bk,
                  var(--_ctm-tab-dn-cn-wt-it-fd-wd-bk, var(--_ctm-dn-cn-wt-it-fd-wd-bk)));
              color: var(--_ctm-mob-dn-cn-wt-it-fd-cr,
                  var(--_ctm-tab-dn-cn-wt-it-fd-cr, var(--_ctm-dn-cn-wt-it-fd-cr)));
              font-weight: var(--_ctm-mob-dn-cn-wt-it-fd-ft-wt,
                  var(--_ctm-tab-dn-cn-wt-it-fd-ft-wt, var(--_ctm-dn-cn-wt-it-fd-ft-wt)));
              font-size: var(--_ctm-mob-dn-cn-wt-it-fd-ft-se,
                  var(--_ctm-tab-dn-cn-wt-it-fd-ft-se, var(--_ctm-dn-cn-wt-it-fd-ft-se)));
              text-decoration: var(--_ctm-mob-dn-cn-wt-it-fd-ue,
                  var(--_ctm-tab-dn-cn-wt-it-fd-ue, var(--_ctm-dn-cn-wt-it-fd-ue)));
              letter-spacing: var(--_ctm-mob-dn-cn-wt-it-fd-lr-sg,
                  var(--_ctm-tab-dn-cn-wt-it-fd-lr-sg, var(--_ctm-dn-cn-wt-it-fd-lr-sg)));
              line-height: var(--_ctm-mob-dn-cn-wt-it-fd-le-ht,
                  var(--_ctm-tab-dn-cn-wt-it-fd-le-ht, var(--_ctm-dn-cn-wt-it-fd-le-ht)));
              font-style: var(--_ctm-mob-dn-cn-wt-it-fd-ft-se-ic,
                  var(--_ctm-tab-dn-cn-wt-it-fd-ft-se-ic, var(--_ctm-dn-cn-wt-it-fd-ft-se-ic)));
              text-align: var(--_ctm-mob-dn-cn-wt-it-fd-tt-an,
                  var(--_ctm-tab-dn-cn-wt-it-fd-tt-an, var(--_ctm-dn-cn-wt-it-fd-tt-an)));
              background-color: var(--_ctm-mob-dn-cn-wt-it-fd-bd-cr,
                  var(--_ctm-tab-dn-cn-wt-it-fd-bd-cr, var(--_ctm-dn-cn-wt-it-fd-bd-cr)));
              padding: var(--_ctm-mob-dn-cn-wt-it-fd-pg,
                  var(--_ctm-tab-dn-cn-wt-it-fd-pg, var(--_ctm-dn-cn-wt-it-fd-pg)));
              gap: var(--_ctm-mob-dn-cn-wt-it-fd-im-gp,
                  var(--_ctm-tab-dn-cn-wt-it-fd-im-gp, var(--_ctm-dn-cn-wt-it-fd-im-gp)));
              border-color: var(--_ctm-mob-dn-cn-wt-it-fd-br-cr,
                  var(--_ctm-tab-dn-cn-wt-it-fd-br-cr, var(--_ctm-dn-cn-wt-it-fd-br-cr)));
              border-style: var(--_ctm-mob-dn-cn-wt-it-fd-br-se,
                  var(--_ctm-tab-dn-cn-wt-it-fd-br-se, var(--_ctm-dn-cn-wt-it-fd-br-se)));
              border-width: var(--_ctm-mob-dn-cn-wt-it-fd-br-wh,
                  var(--_ctm-tab-dn-cn-wt-it-fd-br-wh, var(--_ctm-dn-cn-wt-it-fd-br-wh)));
              border-radius: var(--_ctm-mob-dn-cn-wt-it-fd-br-rs,
                  var(--_ctm-tab-dn-cn-wt-it-fd-br-rs, var(--_ctm-dn-cn-wt-it-fd-br-rs)));
              box-shadow: var(--_ctm-mob-dn-cn-wt-it-fd-sw-ae,
                  var(--_ctm-tab-dn-cn-wt-it-fd-sw-ae, var(--_ctm-dn-cn-wt-it-fd-sw-ae))) var(--_ctm-mob-dn-cn-wt-it-fd-sw-br,
                  var(--_ctm-tab-dn-cn-wt-it-fd-sw-br, var(--_ctm-dn-cn-wt-it-fd-sw-br))) var(--_ctm-mob-dn-cn-wt-it-fd-sw-sd,
                  var(--_ctm-tab-dn-cn-wt-it-fd-sw-sd, var(--_ctm-dn-cn-wt-it-fd-sw-sd))) var(--_ctm-mob-dn-cn-wt-it-fd-sw-cr,
                  var(--_ctm-tab-dn-cn-wt-it-fd-sw-cr, var(--_ctm-dn-cn-wt-it-fd-sw-cr)));
              transition:
                outline 0.2s ease,
                border 0.2s ease;

              &:focus {
                outline: 0 none;
                outline-offset: 0;
                box-shadow:
                  0px 1px 2px rgba(16, 24, 40, 0.05),
                  0px 0px 0px 2px var(--_primary-100);
                border: 1px solid var(--_primary-300);
              }
            }

            .btn__with__text[data-btn-name="applyButton"] {
              width: 100%;

              &[data-show-shadow="false"] {
                --_show-shadow: none;
              }

              &[data-icon-position="left"] {
                --_sf-fd-bn: row;
              }

              &[data-icon-position="right"] {
                --_sf-fd-bn: row-reverse;
              }

              &[data-icon-position="center"] {
                --_sf-fd-bn: row;
              }

              &:hover {
                --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-bd-cr)};
                --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-br-cr)};
                --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-br-se)};
                --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-br-wh)};
                --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-br-rs)};
                --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-at)};
                --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-gp)};

                // for shadow
                --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-sw-ae)};
                --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-sw-br)};
                --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-sw-hr)};
                --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-as-ay-bn-hr-se-sw-cr)};
                // for font

                --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-cr)};
                --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ft-fy)};
                --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ft-se)};
                --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ft-wt)};
                --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ft-se-ic)};
                --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-tt-an)};
                --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-lr-sg)};
                --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-le-ht)};

                --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-in-se)};
                --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-in-se)};
                --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-in-c1)};
                --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-ue)};

                // for pading and width
                --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-pg)};
                --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-as-ay-bn-hr-se-wh)};

                &[data-hover-show-shadow="false"] {
                  --_hover-show-shadow: none;
                }

                &[data-hover-show-icon="false"] {
                  --_hover-show-icon: none;
                }
              }

              background-color: var(--_sf-hr-bd-cr,
                prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-bd-cr));

              padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-pg));
              // width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-wh));
              display: flex;
              flex-direction: var(--_sf-fd-bn);
              align-items: center;

              justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-at));
              gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-gp));

              border-radius: var(--_sf-hr-br-rs,
                prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-br-rs));

              box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-sw-cr));
              width: 140px;
              display: flex;

              &[data-show-border="true"] {
                // width: 100%;
                border-color: var(--_sf-hr-br-cr,
                    prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-br-cr));

                border-style: var(--_sf-hr-br-se,
                    prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-br-se));

                border-width: var(--_sf-hr-br-wh,
                    prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-br-wh));
              }

              .txt {
                display: flex;
                white-space: nowrap;
                color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-cr));

                font-family: var(--_sf-hr-ft-fy,
                    prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-ft-fy));
                text-transform: var(--_sf-hr-tt-tm,
                    prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-tt-tm));
                word-wrap: var(--_sf-hr-wd-wp,
                    prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-wd-wp));
                word-break: var(--_sf-hr-wd-bk,
                    prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-wd-bk));
                &.flex__overflow {
                  white-space: normal;
                  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
                }

                font-size: var(--_sf-hr-ft-se,
                    prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-ft-se));

                font-weight: var(--_sf-hr-ft-wt,
                    prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-ft-wt));

                font-style: var(--_sf-hr-ft-se-ic,
                    prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-ft-se-ic));

                text-align: var(--_sf-hr-tt-an,
                    prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-tt-an));

                letter-spacing: var(--_sf-hr-lr-sg,
                    prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-lr-sg));

                line-height: var(--_sf-hr-le-ht,
                    prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-le-ht));

                text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
              }

              .icon {
                display: var(--_hover-show-icon, var(--_show-icon, flex));

                svg {
                  width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-in-se));
                  height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-in-se));

                  path {
                    stroke: var(--_sf-hr-in-c1,
                        prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-in-c1));
                    // Overrides the stroke-width presentation attribute baked into the icon markup.
                    stroke-width: prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-se-wh, 1.25);
                  }
                }
              }

              [data-element-style="Text"] {
                display: inline-block;
                width: 100%;
              }

              .icon--hover {
                // position: absolute;
                // inset: 0;
                // opacity: 0;
                display: none;
                transition: opacity 0.2s ease;
              }

              &:hover .icon--hover {
                // opacity: 1;
                display: flex;
              }

              &:hover .icon--default {
                // opacity: 0;
                display: none;
              }
            }

            .coupon-search-btn {
              white-space: nowrap;
              padding: prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-pg);

              &:disabled {
                cursor: not-allowed;
                opacity: 0.5;
              }
            }
          }

          .couponCode_divider {
            border: 1px dashed #d0d5dd;
          }

          .coupon-list {
            display: flex;
            flex-direction: column;
            gap: 24px;

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

              input {
                width: 18px;
                display: flex;
                flex-direction: column;
                position: relative;
                top: -9px;
              }

              input[type="checkbox"] {
                accent-color: rgb(36 61 198);
              }

              .coupon-info {
                display: flex;
                flex-direction: column;
                gap: 6px;

                .coupon-title {
                  // font-size: 16px;
                  // font-weight: 700;
                  // line-height: 24px;
                  // color: #101828;
                  font-family: var(--_ctm-mob-dn-cn-wt-cn-tt-ft-fy,
                      var(--_ctm-tab-dn-cn-wt-cn-tt-ft-fy, var(--_ctm-dn-cn-wt-cn-tt-ft-fy)));
                  text-transform: var(--_ctm-mob-dn-cn-wt-cn-tt-tt-tm,
                      var(--_ctm-tab-dn-cn-wt-cn-tt-tt-tm, var(--_ctm-dn-cn-wt-cn-tt-tt-tm)));
                  word-wrap: var(--_ctm-mob-dn-cn-wt-cn-tt-wd-wp,
                      var(--_ctm-tab-dn-cn-wt-cn-tt-wd-wp, var(--_ctm-dn-cn-wt-cn-tt-wd-wp)));
                  word-break: var(--_ctm-mob-dn-cn-wt-cn-tt-wd-bk,
                      var(--_ctm-tab-dn-cn-wt-cn-tt-wd-bk, var(--_ctm-dn-cn-wt-cn-tt-wd-bk)));
                  color: var(--_ctm-mob-dn-cn-wt-cn-tt-cr,
                      var(--_ctm-tab-dn-cn-wt-cn-tt-cr, var(--_ctm-dn-cn-wt-cn-tt-cr)));
                  font-weight: var(--_ctm-mob-dn-cn-wt-cn-tt-ft-wt,
                      var(--_ctm-tab-dn-cn-wt-cn-tt-ft-wt, var(--_ctm-dn-cn-wt-cn-tt-ft-wt)));
                  font-size: var(--_ctm-mob-dn-cn-wt-cn-tt-ft-se,
                      var(--_ctm-tab-dn-cn-wt-cn-tt-ft-se, var(--_ctm-dn-cn-wt-cn-tt-ft-se)));
                  text-decoration: var(--_ctm-mob-dn-cn-wt-cn-tt-ue,
                      var(--_ctm-tab-dn-cn-wt-cn-tt-ue, var(--_ctm-dn-cn-wt-cn-tt-ue)));
                  letter-spacing: var(--_ctm-mob-dn-cn-wt-cn-tt-lr-sg,
                      var(--_ctm-tab-dn-cn-wt-cn-tt-lr-sg, var(--_ctm-dn-cn-wt-cn-tt-lr-sg)));
                  line-height: var(--_ctm-mob-dn-cn-wt-cn-tt-le-ht,
                      var(--_ctm-tab-dn-cn-wt-cn-tt-le-ht, var(--_ctm-dn-cn-wt-cn-tt-le-ht)));
                  font-style: var(--_ctm-mob-dn-cn-wt-cn-tt-ft-se-ic,
                      var(--_ctm-tab-dn-cn-wt-cn-tt-ft-se-ic, var(--_ctm-dn-cn-wt-cn-tt-ft-se-ic)));
                  text-align: var(--_ctm-mob-dn-cn-wt-cn-tt-tt-an,
                      var(--_ctm-tab-dn-cn-wt-cn-tt-tt-an, var(--_ctm-dn-cn-wt-cn-tt-tt-an)));
                }

                .coupon-currency {
                  display: flex;
                  align-items: center;
                  gap: 8px;

                  .coupon-desc {
                    // font-size: 14px;
                    // font-weight: 400;
                    // line-height: 20px;
                    // color: #667085;
                    font-family: var(--_ctm-mob-dn-cn-wt-sd-te-ft-fy,
                        var(--_ctm-tab-dn-cn-wt-sd-te-ft-fy, var(--_ctm-dn-cn-wt-sd-te-ft-fy)));
                    text-transform: var(--_ctm-mob-dn-cn-wt-sd-te-tt-tm,
                        var(--_ctm-tab-dn-cn-wt-sd-te-tt-tm, var(--_ctm-dn-cn-wt-sd-te-tt-tm)));
                    word-wrap: var(--_ctm-mob-dn-cn-wt-sd-te-wd-wp,
                        var(--_ctm-tab-dn-cn-wt-sd-te-wd-wp, var(--_ctm-dn-cn-wt-sd-te-wd-wp)));
                    word-break: var(--_ctm-mob-dn-cn-wt-sd-te-wd-bk,
                        var(--_ctm-tab-dn-cn-wt-sd-te-wd-bk, var(--_ctm-dn-cn-wt-sd-te-wd-bk)));
                    color: var(--_ctm-mob-dn-cn-wt-sd-te-cr,
                        var(--_ctm-tab-dn-cn-wt-sd-te-cr, var(--_ctm-dn-cn-wt-sd-te-cr)));
                    font-weight: var(--_ctm-mob-dn-cn-wt-sd-te-ft-wt,
                        var(--_ctm-tab-dn-cn-wt-sd-te-ft-wt, var(--_ctm-dn-cn-wt-sd-te-ft-wt)));
                    font-size: var(--_ctm-mob-dn-cn-wt-sd-te-ft-se,
                        var(--_ctm-tab-dn-cn-wt-sd-te-ft-se, var(--_ctm-dn-cn-wt-sd-te-ft-se)));
                    text-decoration: var(--_ctm-mob-dn-cn-wt-sd-te-ue,
                        var(--_ctm-tab-dn-cn-wt-sd-te-ue, var(--_ctm-dn-cn-wt-sd-te-ue)));
                    letter-spacing: var(--_ctm-mob-dn-cn-wt-sd-te-lr-sg,
                        var(--_ctm-tab-dn-cn-wt-sd-te-lr-sg, var(--_ctm-dn-cn-wt-sd-te-lr-sg)));
                    line-height: var(--_ctm-mob-dn-cn-wt-sd-te-le-ht,
                        var(--_ctm-tab-dn-cn-wt-sd-te-le-ht, var(--_ctm-dn-cn-wt-sd-te-le-ht)));
                    font-style: var(--_ctm-mob-dn-cn-wt-sd-te-ft-se-ic,
                        var(--_ctm-tab-dn-cn-wt-sd-te-ft-se-ic, var(--_ctm-dn-cn-wt-sd-te-ft-se-ic)));
                    text-align: var(--_ctm-mob-dn-cn-wt-sd-te-tt-an,
                        var(--_ctm-tab-dn-cn-wt-sd-te-tt-an, var(--_ctm-dn-cn-wt-sd-te-tt-an)));
                  }

                  .currency_span {
                    // font-size: 14px;
                    // font-weight: 400;
                    // line-height: 20px;
                    // color: #667085;
                    font-family: var(--_ctm-mob-dn-cn-wt-pe-ft-fy,
                        var(--_ctm-tab-dn-cn-wt-pe-ft-fy, var(--_ctm-dn-cn-wt-pe-ft-fy)));
                    text-transform: var(--_ctm-mob-dn-cn-wt-pe-tt-tm,
                        var(--_ctm-tab-dn-cn-wt-pe-tt-tm, var(--_ctm-dn-cn-wt-pe-tt-tm)));
                    word-wrap: var(--_ctm-mob-dn-cn-wt-pe-wd-wp,
                        var(--_ctm-tab-dn-cn-wt-pe-wd-wp, var(--_ctm-dn-cn-wt-pe-wd-wp)));
                    word-break: var(--_ctm-mob-dn-cn-wt-pe-wd-bk,
                        var(--_ctm-tab-dn-cn-wt-pe-wd-bk, var(--_ctm-dn-cn-wt-pe-wd-bk)));
                    color: var(--_ctm-mob-dn-cn-wt-pe-cr,
                        var(--_ctm-tab-dn-cn-wt-pe-cr, var(--_ctm-dn-cn-wt-pe-cr)));
                    font-weight: var(--_ctm-mob-dn-cn-wt-pe-ft-wt,
                        var(--_ctm-tab-dn-cn-wt-pe-ft-wt, var(--_ctm-dn-cn-wt-pe-ft-wt)));
                    font-size: var(--_ctm-mob-dn-cn-wt-pe-ft-se,
                        var(--_ctm-tab-dn-cn-wt-pe-ft-se, var(--_ctm-dn-cn-wt-pe-ft-se)));
                    text-decoration: var(--_ctm-mob-dn-cn-wt-pe-ue,
                        var(--_ctm-tab-dn-cn-wt-pe-ue, var(--_ctm-dn-cn-wt-pe-ue)));
                    letter-spacing: var(--_ctm-mob-dn-cn-wt-pe-lr-sg,
                        var(--_ctm-tab-dn-cn-wt-pe-lr-sg, var(--_ctm-dn-cn-wt-pe-lr-sg)));
                    line-height: var(--_ctm-mob-dn-cn-wt-pe-le-ht,
                        var(--_ctm-tab-dn-cn-wt-pe-le-ht, var(--_ctm-dn-cn-wt-pe-le-ht)));
                    font-style: var(--_ctm-mob-dn-cn-wt-pe-ft-se-ic,
                        var(--_ctm-tab-dn-cn-wt-pe-ft-se-ic, var(--_ctm-dn-cn-wt-pe-ft-se-ic)));
                    text-align: var(--_ctm-mob-dn-cn-wt-pe-tt-an,
                        var(--_ctm-tab-dn-cn-wt-pe-tt-an, var(--_ctm-dn-cn-wt-pe-tt-an)));
                  }
                }
              }

              .btn__with__text[data-btn-name="removeButton"] {
                // width: 100%;

                &[data-show-shadow="false"] {
                  --_show-shadow: none;
                }

                &[data-icon-position="left"] {
                  --_sf-fd-bn: row;
                }

                &[data-icon-position="right"] {
                  --_sf-fd-bn: row-reverse;
                }

                &[data-icon-position="center"] {
                  --_sf-fd-bn: row;
                }

                &:hover {
                  --_sf-hr-bd-cr: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-bd-cr)};
                  --_sf-hr-br-cr: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-br-cr)};
                  --_sf-hr-br-se: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-br-se)};
                  --_sf-hr-br-wh: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-br-wh)};
                  --_sf-hr-br-rs: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-br-rs)};
                  --_sf-hr-at: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-at)};
                  --_sf-hr-gp: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-gp)};

                  // for shadow
                  --_sf-hr-sw-ae: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-sw-ae)};
                  --_sf-hr-sw-br: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-sw-br)};
                  --_sf-hr-sw-hr: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-sw-hr)};
                  --_sf-hr-sw-cr: #{prepareMediaVariable (--_ctm-dn-as-re-bn-hr-se-sw-cr)};
                  // for font

                  --_sf-hr-cr: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-cr)};
                  --_sf-hr-ft-fy: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-ft-fy)};
                  --_sf-hr-ft-se: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-ft-se)};
                  --_sf-hr-ft-wt: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-ft-wt)};
                  --_sf-hr-ft-se-ic: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-ft-se-ic)};
                  --_sf-hr-tt-an: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-tt-an)};
                  --_sf-hr-lr-sg: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-lr-sg)};
                  --_sf-hr-le-ht: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-le-ht)};

                  --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-in-se)};
                  --_sf-hr-in-se: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-in-se)};
                  --_sf-hr-in-c1: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-in-c1)};
                  --_sf-hr-ue: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-ue)};

                  // for pading and width
                  --_sf-hr-pg: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-pg)};
                  --_sf-hr-wh: #{prepareMediaVariable(--_ctm-dn-as-re-bn-hr-se-wh)};

                  &[data-hover-show-shadow="false"] {
                    --_hover-show-shadow: none;
                  }

                  &[data-hover-show-icon="false"] {
                    --_hover-show-icon: none;
                  }
                }

                background-color: var(--_sf-hr-bd-cr,
                  prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-bd-cr));

                padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-pg));
                width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-wh));
                display: flex;
                flex-direction: var(--_sf-fd-bn);
                align-items: center;

                justify-content: var(--_sf-hr-at,
                  prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-at));
                gap: var(--_sf-hr-gp, prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-gp));

                border-radius: var(--_sf-hr-br-rs,
                  prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-br-rs));

                box-shadow: var(--_sf-hr-sw-ae,
                  prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-sw-ae)) var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-sw-br)) var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-sw-sd)) var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-sw-cr));
                width: 140px;
                display: flex;
                height: 48px;

                &[data-show-border="true"] {
                  // width: 100%;
                  border-color: var(--_sf-hr-br-cr,
                      prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-br-cr));

                  border-style: var(--_sf-hr-br-se,
                      prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-br-se));

                  border-width: var(--_sf-hr-br-wh,
                      prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-br-wh));
                }

                .txt {
                  display: flex;

                  color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-cr));

                  font-family: var(--_sf-hr-ft-fy,
                      prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-ft-fy));
                  text-transform: var(--_sf-hr-tt-tm,
                      prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-tt-tm));
                  word-wrap: var(--_sf-hr-wd-wp,
                      prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-wd-wp));
                  word-break: var(--_sf-hr-wd-bk,
                      prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-wd-bk));
                  &.flex__overflow {
                    white-space: normal;
                    @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
                  }

                  font-size: var(--_sf-hr-ft-se,
                      prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-ft-se));

                  font-weight: var(--_sf-hr-ft-wt,
                      prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-ft-wt));

                  font-style: var(--_sf-hr-ft-se-ic,
                      prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-ft-se-ic));

                  text-align: var(--_sf-hr-tt-an,
                      prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-tt-an));

                  letter-spacing: var(--_sf-hr-lr-sg,
                      prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-lr-sg));

                  line-height: var(--_sf-hr-le-ht,
                      prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-le-ht));

                  text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
                }

                .icon {
                  display: var(--_hover-show-icon, var(--_show-icon, flex));

                  svg {
                    width: var(--_sf-hr-in-se,
                        prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-in-se));
                    height: var(--_sf-hr-in-se,
                        prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-in-se));

                    path {
                      stroke: var(--_sf-hr-in-c1,
                          prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-in-c1));
                      // Overrides the stroke-width presentation attribute baked into the icon markup.
                      stroke-width: prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-se-wh, 1.25);
                    }
                  }
                }

                [data-element-style="Text"] {
                  display: inline-block;
                  width: 100%;
                }

                .icon--hover {
                  // position: absolute;
                  // inset: 0;
                  // opacity: 0;
                  display: none;
                  transition: opacity 0.2s ease;
                }

                &:hover .icon--hover {
                  // opacity: 1;
                  display: flex;
                }

                &:hover .icon--default {
                  // opacity: 0;
                  display: none;
                }
              }

              .remove-btn {
                padding: prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-pg);
              }
            }
          }

          .coupon-footer-section {
            display: flex;
            justify-content: space-between;

            .coupon-savings {
              .title {
                font-size: 14px;
                font-weight: 400;
                line-height: 20px;
                color: #344054;
              }

              .price {
                font-size: 16px;
                font-weight: 700;
                line-height: 24px;
                color: #101828;
              }
            }

            .apply-coupon-primary-btn {
              width: 158px;
              height: 48px;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }
}

// .coupon_code {
//   border: 1px solid var(--_gray-300);
//   border-radius: 4px;
//   .coupon_code_header {
//     background-color: var(--_gray-100);
//     padding: 12px 12px 14px 12px;
//     border-bottom: 0.5px solid var(--_gray-300);
//     h3 {
//       font-size: 16px;
//       color: var(--_gray-900);
//     }
//   }
//   .coupon_code_body {
//     display: flex;
//     flex-direction: column;
//     gap: 16px;
//     padding: 16px;

//     .coupon_code_apply_section {
//       .coupon_code_fields_wrapper {
//         display: flex;
//         gap: 12px;
//         &.divider {
//           padding-bottom: 16px;
//           border-bottom: 1px dashed var(--_gray-300);
//         }
//         .coupon-search-input {
//           padding: 10px 16px;
//           border: 1px solid var(--_gray-300);
//           border-radius: 4px;
//           height: 40px;
//           &:focus {
//             outline: 2px solid var(--_gray-100);
//           }
//         }
//         .coupon-search-btn {
//           padding: 10px 16px 12px 16px;
//           white-space: nowrap;
//           height: 40px;
//         }
//       }
//       .coupon-list {
//         .coupon-item {
//           .coupon-info {
//             .coupon-title {
//               font-size: 16px;
//               font-weight: 700;
//               color: var(--_gray-900);
//             }
//             .coupon-desc {
//               font-size: 14px;
//               font-weight: 400;
//               color: var(--_gray-600);
//             }
//             .remove-btn {
//               padding: 12px;
//               color: var(--_gray-900);
//             }
//           }
//         }
//       }
//     }
//     .apply_coupon_code_body {
//       display: flex;
//       align-items: center;
//       justify-content: space-between;
//       gap: 12px;
//       &:not(:last-child) {
//         margin-bottom: 12px;
//       }
//       .apply_coupon_code_flex {
//         display: flex;
//         gap: 12px;
//         .cpn__sale__icon {
//           margin-top: 4px;
//         }
//         .apply_coupon_code {
//           display: flex;
//           flex-direction: column;
//           .cpn_sale_text {
//             font-size: 14px;
//             font-weight: 400;
//             color: var(--_gray-900);
//           }
//         }
//       }
//       .cpn_sale_desc {
//         font-size: 14px;
//         font-weight: 400;
//         color: var(--_gray-600);
//       }
//       .apply_coupon_code_btn {
//         padding: 8px 16px;
//       }
//       .remove_coupon_code_btn {
//         padding: 8px 16px;
//         border: 1px solid var(--_gray-300);
//         border-radius: 4px;
//         color: var(--_gray-900);
//         &:hover {
//           background-color: var(--_gray-100);
//         }
//       }
//     }
//   }
// }