/* Base Styles */
body {
  font-family: "IBM Plex Sans Arabic", sans-serif;
}
a,
button {
  cursor: pointer;
  background-color: transparent;
  border: 0;
  outline: none;
  display: flex;
  padding: 0;
  margin: 0;
  &:focus {
    outline: none;
    box-shadow: none;
  }
}
.gap-1 {
  gap: 5px;
}
.gap-2 {
  gap: 10px;
}
.gap-3 {
  gap: 15px;
}
.modal-content {
  border-radius: 20px 20px 0 0 !important;
  border: 0 !important;
}

.bg-dark {
  background-color: #000 !important;
}

.be-toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 25px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  @media (max-width: 768px) {
    width: 35px;
    height: 20px;
  }
}
.be-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.be-toggle .be-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #dbe0e9;
  border-radius: 35px;
  transition: 0.4s;
}
.be-toggle .be-toggle-slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  transition: 0.4s;
  @media (max-width: 768px) {
    width: 14px;
    height: 14px;
  }
}
.be-toggle input:checked + .be-toggle-slider {
  background-color: #8b89c2;
}
.be-toggle input:checked + .be-toggle-slider::before {
  transform: translate(14px, -50%);
  @media (max-width: 768px) {
    transform: translate(12px, -50%);
  }
}
.be-toggle.be-border .be-toggle-slider {
  border: 1px solid #0f0c36;
  background-color: transparent;
}
.be-toggle.be-border .be-toggle-slider::before {
  background-color: #0f0c36;
}
.be-toggle.be-border input:checked + .be-toggle-slider {
  background-color: #0f0c36;
}
.be-toggle.be-border input:checked + .be-toggle-slider::before {
  background-color: #fff;
  transform: translate(20px, -50%);
}

/* .modal.fade .modal-dialog {
  transform: translateY(100%);
  transition: transform 0.4s ease-out;
}

.modal.show .modal-dialog {
  transform: translateY(0);
} */

.modal-header {
  h4,
  h6 {
    @media (max-width: 768px) {
      font-size: 14px !important;
    }
  }
}

/* Nav Tabs */
.style-tabs {
  justify-content: center;
  border: 0;
  border: 1px solid #0f0c36;
  border-radius: 20px !important;
  margin: auto;
  width: fit-content;
  gap: 10px;
  padding: 10px;
  @media (max-width: 768px) {
    gap: 2px;
    padding: 5px;
  }
  li {
    a {
      border: 0 !important;
      background-color: transparent;
      color: #0f0c36;
      padding: 10px 25px;
      border-radius: 20px !important;
      font-family: "IBM Plex Sans Arabic", sans-serif;
      @media (max-width: 768px) {
        font-size: 14px;
        padding: 8px 25px !important;
      }
      &.active {
        background-color: #0f0c36 !important;
        color: #fff !important;
      }
    }
  }
}

/* Subscription Page */
.subscription-page {
  /* Subscription Header */
  .subscription-header {
    text-align: center;
    padding: 50px 10px 20px;
    @media (max-width: 767px) {
      padding: 20px;
    }
    h1 {
      font-size: clamp(1.06rem, 2.5vw, 1.31rem);
      color: #0f0c36;
      font-weight: 600;
    }
    p {
      @media (max-width: 767px) {
        margin-bottom: 0;
      }
      font-size: clamp(
        12.68px,
        calc(12.68px + 1.32 * (100vw - 680px) / 520),
        14px
      );
      @media (min-width: 1440px) {
        font-size: clamp(
          14px,
          calc(14px + 3.01 * (100vw - 1440px) / 160),
          17.01px
        );
      }
      color: #606e84;
    }
  }
  /* Subscription Body */
  .subscription-body {
    .tab-content {
      @media (max-width: 767px) {
        padding: 0 !important;
        padding-bottom: 15px !important;
      }
    }
    /* overflow: hidden; */
    .plans-grid-wrapper {
      /* overflow-x: auto; */
      /* -webkit-overflow-scrolling: touch; */
      /* scrollbar-width: none; */
      /* &::-webkit-scrollbar {
        display: none;
      } */

      /* @media (min-width: 1201px) {
        overflow-x: visible;
      } */
      .plans-subscription {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        padding: 20px 40px;
        @media (max-width: 768px) {
          grid-template-columns: 1fr;
          padding: 0 20px;
          gap: 15px;
        }
        /* @media (max-width: 1050px) {
          grid-template-columns: repeat(4, minmax(320px, 1fr));
          padding: 20px 20px;
        } */
        .card-plan {
          background: #fff;
          border: 1px solid #dbe0e9;
          border-radius: 15px;
          padding: 50px 30px;
          position: relative;
          transition: all 0.3s ease;
          &.free-plan {
            background-color: #bce4e733;
            border: 1px solid #bce4e7;
          }
          &.start-plan {
            background-color: #ffeb9533;
            border: 1px solid #ffeb95;
          }
          &.smart-plan {
            background-color: #8b89c233;
            border: 1px solid #8b89c2;
          }
          &.plus-plan {
            background-color: #e2c8e133;
            border: 1px solid #e2c8e1;
          }
          @media (min-width: 1050px) and (max-width: 1300px) {
            padding: 50px 15px;
          }
          @media (min-width: 768px) {
            &:hover {
              transform: translateY(-3px);
            }
          }
          .popular-plan {
            position: absolute;
            top: -20px;
            left: 35px;
            background-color: #ffeb95;
            color: #000;
            border-radius: 20px;
            padding: 8px 30px;
            font-size: clamp(
              10.84px,
              calc(10.84px + 1.16 * (100vw - 680px) / 520),
              12px
            );
            @media (min-width: 1440px) {
              font-size: clamp(
                12px,
                calc(12px + 2.63 * (100vw - 1440px) / 160),
                14.63px
              );
            }
            font-weight: 400;
            @media (max-width: 768px) {
              display: none;
            }
            html[dir="ltr"] & {
              left: auto;
              right: 35px;
            }
          }
          .ca-head {
            @media (max-width: 768px) {
              display: flex;
              align-items: center;
              justify-content: space-between;
            }
            .head-card {
              @media (max-width: 768px) {
                flex: 1;
              }
              .tb-header-icon {
                @media (max-width: 768px) {
                  display: flex;
                  align-items: center;
                  gap: 10px;
                }
                svg {
                  @media (max-width: 768px) {
                    width: 22px;
                    height: 22px;
                  }
                }
                h5 {
                  font-size: clamp(
                    25.52px,
                    calc(25.52px + 2.48 * (100vw - 680px) / 520),
                    28px
                  );
                  @media (min-width: 1440px) {
                    font-size: clamp(
                      28px,
                      calc(28px + 5.64 * (100vw - 1440px) / 160),
                      33.64px
                    );
                  }
                  font-weight: 600;
                  margin: 25px 0;
                  margin-bottom: 10px;
                  font-family: inherit !important;
                  @media (max-width: 768px) {
                    font-size: 13px;
                    font-weight: 400;
                    margin: 0;
                  }
                }
              }
              .t-prices {
                gap: 7px;
                .monthly {
                  position: relative;
                  top: 10px;
                  @media (max-width: 768px) {
                    top: 4px;
                    display: none;
                  }
                  span {
                    font-size: clamp(
                      16.35px,
                      calc(16.35px + 1.65 * (100vw - 680px) / 520),
                      18px
                    );
                    @media (min-width: 1440px) {
                      font-size: clamp(
                        18px,
                        calc(18px + 3.76 * (100vw - 1440px) / 160),
                        21.76px
                      );
                    }
                    color: #0f0c36;
                    font-family: inherit !important;
                    display: inline-block;
                    @media (max-width: 768px) {
                      font-size: 15px;
                    }
                    html[dir="rtl"] & {
                      direction: ltr;
                    }
                    html[dir="ltr"] & {
                      direction: rtl;
                    }
                  }
                }
                .p-price {
                  gap: 10px;
                  strong {
                    color: #0f0c36;
                    font-size: clamp(
                      53.05px,
                      calc(53.05px + 4.95 * (100vw - 680px) / 520),
                      58px
                    );
                    @media (min-width: 1440px) {
                      font-size: clamp(
                        58px,
                        calc(58px + 11.29 * (100vw - 1440px) / 160),
                        69.29px
                      );
                    }
                    font-weight: 600;
                    font-family: inherit !important;
                    @media (max-width: 768px) {
                      font-size: 29px;
                    }
                  }
                  svg {
                    position: relative;
                    top: 10px;
                    @media (max-width: 768px) {
                      width: 20px;
                      height: 20px;
                      top: 4px;
                    }
                  }
                }
              }
            }
            .po-now {
              @media (max-width: 768px) {
                /* flex: 1; */
              }
              .plan-period {
                display: block;
                font-size: clamp(
                  12.68px,
                  calc(12.68px + 1.32 * (100vw - 680px) / 520),
                  14px
                );
                @media (min-width: 1440px) {
                  font-size: clamp(
                    14px,
                    calc(14px + 3.01 * (100vw - 1440px) / 160),
                    17.01px
                  );
                }
                color: #8b89c2;
                text-align: center;
                margin-bottom: 20px;
                margin-top: 15px;
                @media (max-width: 768px) {
                  display: none;
                }
              }
              .plan-btn {
                width: 100%;
                border-radius: 100px;
                background-color: transparent;
                border: 1px solid #0f0c36;
                color: #0f0c36;
                font-weight: 400;
                font-size: clamp(
                  16.35px,
                  calc(16.35px + 1.65 * (100vw - 680px) / 520),
                  18px
                );
                @media (min-width: 1440px) {
                  font-size: clamp(
                    18px,
                    calc(18px + 3.76 * (100vw - 1440px) / 160),
                    21.76px
                  );
                }
                padding-inline: 10px;
                height: 55px;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                cursor: pointer;
                transition: all 0.3s ease;
                outline: none;
                &:hover {
                  background-color: #0f0c36;
                  color: #fff;
                  svg {
                    path {
                      fill: #fff;
                    }
                  }
                }
                @media (max-width: 768px) {
                  height: 35px;
                  width: 105px;
                  font-size: 11px;
                  padding-inline: 10px;
                  gap: 5px;
                  svg {
                    width: 15px;
                    height: 15px;
                  }
                }
              }
            }
          }
          .btn-collapse-plan-mobile {
            transition: margin-top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            @media (min-width: 769px) {
              display: none;
            }
            &:hover {
              background-color: transparent;
              transform: none !important;
            }
            svg {
              transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            }
            &.active {
              margin-top: 10px;
              svg {
                transform: rotate(180deg);
              }
            }
          }
          .block-plan {
            transition:
              max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.35s ease-in-out;
            @media (max-width: 768px) {
              max-height: 0;
              overflow: hidden;
              opacity: 0;
              &.active {
                max-height: 1000px;
                opacity: 1;
              }
            }
            .features-list {
              list-style: none;
              padding: 0;
              margin: 0;
              margin-top: 30px;
              display: flex;
              flex-direction: column;
              gap: 20px;
              li {
                display: flex;
                align-items: center;
                gap: 10px;
                font-size: clamp(
                  12.68px,
                  calc(12.68px + 1.32 * (100vw - 680px) / 520),
                  14px
                );
                @media (min-width: 1440px) {
                  font-size: clamp(
                    14px,
                    calc(14px + 3.01 * (100vw - 1440px) / 160),
                    17.01px
                  );
                }
                color: #0f0c36;
              }
            }
          }
        }
      }
    }
  }
  /* Footer CTA */
  .footer-cta {
    text-align: center;
    padding: 10px 20px;
    @media (max-width: 768px) {
      position: sticky;
      bottom: 0;
      background-color: #fff;
    }
    p {
      color: #606e84;
      margin: 0;
    }
    .compare-btn {
      display: inline-block;
      margin-top: 10px;
      background: #fff;
      border: 1px solid #0f0c36;
      color: #0f0c36;
      padding: 13px 60px;
      border-radius: 100px;
      font-size: clamp(
        12.68px,
        calc(12.68px + 1.32 * (100vw - 680px) / 520),
        14px
      );
      @media (min-width: 1440px) {
        font-size: clamp(
          14px,
          calc(14px + 3.01 * (100vw - 1440px) / 160),
          17.01px
        );
      }
      font-weight: 400;
      cursor: pointer;
      outline: none;
      transition:
        background 0.2s,
        transform 0.15s;
      &:hover {
        background: #0f0c36;
        color: #fff;
      }
      @media (max-width: 768px) {
        width: 100%;
      }
    }
  }
}

/* Footer */
.footer-content-inner {
  padding: 1.2rem 2rem;
  text-align: center;
  @media (max-width: 440px) {
    opacity: 0;
  }
  font-size: clamp(
    9.45px,
    calc(9.45px + 1.03 * (100vw - 680px) / 520),
    10.48px
  );
  @media (min-width: 1440px) {
    font-size: clamp(
      10.48px,
      calc(10.48px + 2.35 * (100vw - 1440px) / 160),
      12.83px
    );
  }
  color: #0f0c36;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.2rem;
  a {
    color: #606e84;
    text-decoration: underline;
    border-right: 1px solid #606e84;
    padding-right: 10px;
    html[dir="ltr"] & {
      border-right: none;
      border-left: 1px solid #606e84;
      padding-right: 0;
      padding-left: 10px;
    }
    &:hover {
      color: #0f0c36;
    }
  }
}

/* Price Comparison Modal */
.price-comparison-modal {
  .modal-dialog {
    max-width: 85% !important;
    margin: 0 auto 0 !important;
    align-items: end !important;
    min-height: 100% !important;
    @media (max-width: 1290px) {
      max-width: 100% !important;
    }
    .modal-header {
      padding: 30px;
      @media (max-width: 768px) {
        padding: 25px;
        padding-top: 15px;
      }
      h4 {
        font-size: clamp(
          16.35px,
          calc(16.35px + 1.65 * (100vw - 680px) / 520),
          18px
        );
        @media (min-width: 1440px) {
          font-size: clamp(
            18px,
            calc(18px + 3.76 * (100vw - 1440px) / 160),
            21.76px
          );
        }
        font-weight: 500;
        color: #0f0c36;
        font-family: inherit !important;
      }
    }
    .modal-body {
      padding-inline: 35px !important;
      padding-block: 0;
      .tab-content-comparison {
        .footer-cta {
          position: sticky;
          bottom: 0;
          background-color: #fff;
          padding: 10px 20px;
          button {
            width: 100%;
            padding: 0 20px;
            height: 55px;
            font-size: clamp(
              10.84px,
              calc(10.84px + 1.16 * (100vw - 680px) / 520),
              12px
            );
            @media (min-width: 1440px) {
              font-size: clamp(
                12px,
                calc(12px + 2.63 * (100vw - 1440px) / 160),
                14.63px
              );
            }
            font-weight: 400;
            cursor: pointer;
            outline: none;
            transition: all 0.3s ease;
            border-radius: 100px;
            border: 1px solid #0f0c36;
            background-color: transparent;
            color: #0f0c36;
            @media (max-width: 768px) {
              height: 44px;
            }
          }
          @media (min-width: 768px) {
            display: none !important;
          }
        }
      }
      @media (max-width: 768px) {
        padding-inline: 20px !important;
      }
      .tab-comparison-modal {
        display: none !important;
        @media (max-width: 768px) {
          display: flex !important;
        }
      }
      .pre-pad {
        @media (max-width: 768px) {
          padding: 0 20px !important;
        }
      }
      .plans-subscription {
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: flex-end;
        @media (max-width: 768px) {
          padding: 0 20px;
        }
        .flex-space {
          flex: 2;
        }
        .card-plan {
          /* min-width: 270px; */
          flex: 1;
          background: #fff;
          border: 1px solid #dbe0e9;
          border-radius: 25px 25px 0 0;
          padding: 30px 0;
          position: relative;
          text-align: center;
          transition: all 0.3s ease;
          .popular-plan {
            position: absolute;
            top: -18px;
            left: 25px;
            background-color: #ffeb95;
            color: #000;
            border-radius: 15px;
            padding: 6px 15px;
            font-size: clamp(
              9.93px,
              calc(9.93px + 1.07 * (100vw - 680px) / 520),
              11px
            );
            @media (min-width: 1440px) {
              font-size: clamp(
                11px,
                calc(11px + 2.45 * (100vw - 1440px) / 160),
                13.45px
              );
            }
            font-weight: 400;
            @media (max-width: 768px) {
              display: none;
            }
            html[dir="ltr"] & {
              left: auto;
              right: 25px;
            }
          }
          .head-card {
            h5 {
              font-size: clamp(
                20.94px,
                calc(20.94px + 2.06 * (100vw - 680px) / 520),
                23px
              );
              @media (min-width: 1440px) {
                font-size: clamp(
                  23px,
                  calc(23px + 4.7 * (100vw - 1440px) / 160),
                  27.7px
                );
              }
              font-weight: 600;
              margin: 15px 0;
              font-family: inherit !important;
            }
            .t-prices {
              gap: 7px;
              .monthly {
                span {
                  font-size: clamp(
                    18.18px,
                    calc(18.18px + 1.82 * (100vw - 680px) / 520),
                    20px
                  );
                  @media (min-width: 1440px) {
                    font-size: clamp(
                      20px,
                      calc(20px + 4.14 * (100vw - 1440px) / 160),
                      24.14px
                    );
                  }
                  color: #0f0c36;
                  font-family: inherit !important;
                  display: inline-block;
                  html[dir="rtl"] & {
                    direction: ltr;
                  }
                  html[dir="ltr"] & {
                    direction: rtl;
                  }
                }
              }
              .p-price {
                gap: 8px;
                strong {
                  color: #0f0c36;
                  font-size: clamp(
                    20.94px,
                    calc(20.94px + 2.06 * (100vw - 680px) / 520),
                    23px
                  );
                  @media (min-width: 1440px) {
                    font-size: clamp(
                      23px,
                      calc(23px + 4.7 * (100vw - 1440px) / 160),
                      27.7px
                    );
                  }
                  font-weight: 400;
                  font-family: inherit !important;
                }
              }
            }
          }
        }
        @media (max-width: 1290px) {
          padding: 0px;
          .flex-space {
            flex: none;
          }
          .card-plan {
            padding: 30px 5px;
            .head-card {
              .t-b-icon-text {
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: row-reverse;
                gap: 10px;
                h5 {
                  font-size: 17px;
                }
                svg {
                  width: 30px;
                  height: 30px;
                }
              }
              .t-prices {
                .monthly {
                  span {
                    font-size: 17px;
                  }
                }
                .p-price {
                  strong {
                    font-size: 17px;
                  }
                  svg {
                    width: 20px;
                    height: 20px;
                  }
                }
              }
            }
          }
        }
      }
      .list-collapsable {
        max-height: 500px;
        overflow-y: auto;
        /* @media (max-width: 768px) {
          padding: 0 20px !important;
          overflow-x: hidden;
        } */
        .panel {
          margin-top: 10px;
          .panel-heading {
            background-color: #dbe0e9;
            border-radius: 15px;
            padding: 20px 25px;
            cursor: pointer;
            @media (max-width: 768px) {
              padding: 15px;
              border-radius: 100px;
            }
            h4 {
              font-size: clamp(
                12.68px,
                calc(12.68px + 1.32 * (100vw - 680px) / 520),
                14px
              );
              @media (min-width: 1440px) {
                font-size: clamp(
                  14px,
                  calc(14px + 3.01 * (100vw - 1440px) / 160),
                  17.01px
                );
              }
              font-weight: 600;
              font-family: inherit !important;
              @media (max-width: 768px) {
                font-size: 12px;
              }
            }
            svg {
              transition: transform 0.3s ease;
              @media (max-width: 768px) {
                width: 13px;
                height: 13px;
              }
            }

            &[aria-expanded="true"] {
              svg {
                transform: rotate(180deg);
              }
            }
          }
          .panel-collapse {
            &.show {
              display: block !important;
            }
            .panel-body {
              .p-dix {
                padding: 20px 25px;
                border-radius: 20px;
                &:nth-child(even) {
                  background-color: #eff3fa;
                }
                h4 {
                  flex: 2;
                  font-size: clamp(
                    11.76px,
                    calc(11.76px + 1.24 * (100vw - 680px) / 520),
                    13px
                  );
                  @media (min-width: 1440px) {
                    font-size: clamp(
                      13px,
                      calc(13px + 2.82 * (100vw - 1440px) / 160),
                      15.82px
                    );
                  }
                  font-weight: 400;
                  font-family: inherit !important;
                }
                span {
                  flex: 1;
                  text-align: center;
                  font-size: clamp(
                    9.93px,
                    calc(9.93px + 1.07 * (100vw - 680px) / 520),
                    11px
                  );
                  @media (min-width: 1440px) {
                    font-size: clamp(
                      11px,
                      calc(11px + 2.45 * (100vw - 1440px) / 160),
                      13.45px
                    );
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

/* Choose Device Modal */
.choose-device-modal {
  scrollbar-width: none;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
  }
  .modal-dialog {
    /* max-width: 1100px; */
    max-width: 80% !important;
    margin: 0 auto;
    align-items: end;
    min-height: 100%;
    overflow: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    @media (max-width: 1290px) and (min-width: 768px) {
      padding-bottom: 50px;
    }
    @media (max-width: 767px) {
      max-width: 100% !important;
    }

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

    .modal-content {
      max-height: 90vh;
      overflow: hidden;
      .modal-body {
        padding: 10px 0;
        /* padding-bottom: 50px; */
        overflow-y: auto;
        /* max-height: 650px; */
        /* overflow-y: auto; */
        @media (max-width: 1290px) {
          padding-inline: 0;
          /* max-height: 500px; */
        }
        .tab-content {
          @media (max-width: 768px) {
            padding: 0 !important;
          }
        }
        .list-device {
          display: grid;
          grid-template-columns: 1fr;
          gap: 20px;
          padding: 20px;
          /* padding-bottom: 70px; */
          @media (min-width: 640px) {
            grid-template-columns: repeat(2, 1fr);
          }
          @media (min-width: 768px) {
            grid-template-columns: repeat(3, 1fr);
          }
          @media (min-width: 1024px) {
            grid-template-columns: repeat(4, 1fr);
          }
          @media (max-width: 768px) {
            gap: 15px;
            padding-block: 0;
            /* max-height: 480px; */
          }
          .card-device {
            border-radius: 20px;
            border: 1px solid #e6e6e7;
            overflow: hidden;
            @media (max-width: 768px) {
              border: 0;
              box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.05);
            }
            .content-device {
              @media (max-width: 768px) {
                display: flex;
                align-items: center;
                padding: 10px 12px;
                gap: 10px;
              }
              .head-device {
                text-align: center;
                width: 150px;
                height: 150px;
                margin: auto;
                padding-top: 25px;
                @media (max-width: 768px) {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  width: 90px;
                  height: 65px;
                  padding-top: 0;
                }
                img {
                  width: 100%;
                  height: 100%;
                  object-fit: contain;
                }
              }
              .body-device {
                padding: 0 20px;
                margin-bottom: 25px;
                @media (max-width: 768px) {
                  flex: 1;
                  padding: 0;
                  margin-bottom: 10px;
                }
                h4 {
                  font-size: clamp(
                    14.51px,
                    calc(14.51px + 1.49 * (100vw - 680px) / 520),
                    16px
                  );
                  @media (min-width: 1440px) {
                    font-size: clamp(
                      16px,
                      calc(16px + 3.39 * (100vw - 1440px) / 160),
                      19.39px
                    );
                  }
                  font-weight: 700;
                  margin-bottom: 50px;
                  margin-top: 20px;
                  text-align: center;
                  @media (max-width: 768px) {
                    text-align: start;
                    margin-bottom: 20px;
                    font-size: 12px;
                  }
                }
                .price-device {
                  @media (max-width: 768px) {
                    flex-direction: row-reverse;
                  }
                  .counter-device {
                    gap: 15px;
                    @media (max-width: 768px) {
                      gap: 12px;
                    }
                    button {
                      width: 28px;
                      height: 28px;
                      border-radius: 50%;
                      border: 1px solid #0f0c36;
                      background-color: transparent;
                      color: #0f0c36;
                      font-size: clamp(
                        11.76px,
                        calc(11.76px + 1.24 * (100vw - 680px) / 520),
                        13px
                      );
                      @media (min-width: 1440px) {
                        font-size: clamp(
                          13px,
                          calc(13px + 2.82 * (100vw - 1440px) / 160),
                          15.82px
                        );
                      }
                      font-weight: 400;
                      cursor: pointer;
                      outline: none;
                      transition: all 0.3s ease;
                      align-items: center;
                      justify-content: center;
                    }
                  }
                  strong {
                    color: #0f0c36;
                    font-size: clamp(
                      11.76px,
                      calc(11.76px + 1.24 * (100vw - 680px) / 520),
                      13px
                    );
                    @media (min-width: 1440px) {
                      font-size: clamp(
                        13px,
                        calc(13px + 2.82 * (100vw - 1440px) / 160),
                        15.82px
                      );
                    }
                    font-weight: 400;
                    @media (max-width: 768px) {
                      font-size: 12px;
                    }
                  }
                }
              }
            }
            .footer-device {
              display: none;
              .btn-device {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                padding: 0 20px;
                height: 55px;
                font-size: clamp(
                  12.68px,
                  calc(12.68px + 1.32 * (100vw - 680px) / 520),
                  14px
                );
                @media (min-width: 1440px) {
                  font-size: clamp(
                    14px,
                    calc(14px + 3.01 * (100vw - 1440px) / 160),
                    17.01px
                  );
                }
                font-weight: 400;
                cursor: pointer;
                outline: none;
                transition: all 0.3s ease;
                &.add {
                  background-color: #0f0c36;
                  border: 1px solid #0f0c36;
                  color: #fff;
                }
                &.done {
                  background-color: #08aa7f;
                  border: 1px solid #08aa7f;
                  color: #fff;
                }
              }
            }
          }
        }
      }

      .end-footer-modal {
        position: relative;
        width: 100%;
        background-color: #fff;
        padding: 15px;
        border: 0;
        button {
          @media (max-width: 768px) {
            height: 44px;
            margin: 0 !important;
          }
        }
        .btn-continue {
          @media (max-width: 768px) {
          }
        }
        .btn-skip {
          @media (max-width: 768px) {
            flex: initial !important;
            padding-inline: 28px !important;
          }
        }
      }
    }
  }
}

.end-footer-modal {
  margin-top: 30px;
  gap: 10px;
  button {
    height: 60px;
    width: 240px;
    border-radius: 100px;
    font-size: clamp(
      12.68px,
      calc(12.68px + 1.32 * (100vw - 680px) / 520),
      14px
    );
    @media (min-width: 1440px) {
      font-size: clamp(
        14px,
        calc(14px + 3.01 * (100vw - 1440px) / 160),
        17.01px
      );
    }
    font-weight: 400;
    outline: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    @media (max-width: 768px) {
      width: 100%;
      flex: none !important;
      font-size: 11px;
    }
    &:hover {
      transform: scale(0.98);
    }
    &.btn-continue {
      background-color: #0f0c36;
      border: 1px solid #0f0c36;
      color: #fff;
      position: relative;
      svg {
        html[dir="ltr"] & {
          rotate: 180deg;
        }
      }
      strong {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        font-size: clamp(
          9.01px,
          calc(9.01px + 0.99 * (100vw - 680px) / 520),
          10px
        );
        @media (min-width: 1440px) {
          font-size: clamp(
            10px,
            calc(10px + 2.26 * (100vw - 1440px) / 160),
            12.26px
          );
        }
        background-color: #e42219;
        display: none;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: #fff;
        position: absolute;
        top: -11px;
        inset-inline-start: 0px;
      }
    }
    &.btn-skip {
      background-color: transparent;
      border: 1px solid #0f0c36;
      color: #0f0c36;
    }
  }
  @media (max-width: 768px) {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    background-color: #fff;
    padding: 20px 25px;
    box-shadow: 0 -4px 15px 0 rgba(0, 0, 0, 0.05);
    border-radius: 10px 10px 0 0;
    z-index: 9;
    margin: 0 !important;
    /* flex-direction: column; */
    button {
      width: auto !important;
      flex: 1 !important;
      padding-inline: 10px !important;
      height: 44px;
    }
  }
}

/* @supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (pointer: coarse) {
    .choose-device-modal .modal-content,
    .choose-device-modal .modal-dialog {
      padding-bottom: calc(15px + env(safe-area-inset-bottom));
    }
  }
} */

.end-footer-logos {
  @media (max-width: 768px) {
    display: none !important;
  }
  p {
    font-size: clamp(
      10.84px,
      calc(10.84px + 1.16 * (100vw - 680px) / 520),
      12px
    );
    @media (min-width: 1440px) {
      font-size: clamp(
        12px,
        calc(12px + 2.63 * (100vw - 1440px) / 160),
        14.63px
      );
    }
    color: #000;
  }
}

.inpay-logos {
  display: none !important;
  @media (max-width: 768px) {
    display: block !important;
  }
  .i-logo-center {
    svg {
      border: 1px solid #fff;
      border-radius: 50%;
      &:last-child {
        margin-inline-start: -15px;
      }
    }
  }
  p {
    font-size: clamp(10px, calc(7.17px + 0.83 * (100vw - 680px) / 520), 8px);
    @media (min-width: 1440px) {
      font-size: clamp(8px, calc(8px + 1.88 * (100vw - 1440px) / 160), 9.88px);
    }
    color: #000;
  }
}

.logos-installments {
  @media (min-width: 768px) {
    display: none !important;
  }
  .gap-3 {
    gap: 25px;
  }
  p {
    font-size: clamp(7.17px, calc(7.17px + 0.83 * (100vw - 680px) / 520), 8px);
    @media (min-width: 1440px) {
      font-size: clamp(8px, calc(8px + 1.88 * (100vw - 1440px) / 160), 9.88px);
    }
  }
  .logos-in {
    position: relative;
    display: flex;
    align-items: center;
    svg {
      position: relative;
      border: 1px solid #fff;
      border-radius: 50%;
      &:nth-child(1) {
        z-index: 9;
      }
      &:nth-child(2) {
        position: absolute;
        top: 50%;
        inset-inline-start: 15px;
        transform: translateY(-50%);
      }
    }
  }
}

.form-add {
  label {
    font-size: clamp(
      12.68px,
      calc(12.68px + 1.32 * (100vw - 680px) / 520),
      14px
    );
    @media (min-width: 1440px) {
      font-size: clamp(
        14px,
        calc(14px + 3.01 * (100vw - 1440px) / 160),
        17.01px
      );
    }
    color: #0f0c36;
    display: block;
    margin-bottom: 8px;
  }

  input {
    width: 100%;
    height: 60px;
    border-radius: 100px;
    border: 1px solid #dbe0e9;
    padding: 0 20px;
    font-size: clamp(
      12.68px,
      calc(12.68px + 1.32 * (100vw - 680px) / 520),
      14px
    );
    @media (min-width: 1440px) {
      font-size: clamp(
        14px,
        calc(14px + 3.01 * (100vw - 1440px) / 160),
        17.01px
      );
    }
    font-weight: 400;
    outline: none;
    transition: all 0.3s ease;
    background-color: #fff;
    @media (max-width: 768px) {
      font-size: 11px;
      height: 44px;
    }

    &::placeholder {
      color: #dbe0e9;
      transition: opacity 0.3s ease;
      @media (max-width: 768px) {
        font-size: 10px;
      }
    }

    &:focus {
      border-color: #0f0c36;
      &::placeholder {
        opacity: 0;
      }
    }

    &:not([type="date"]) {
      &:not(:placeholder-shown) {
        border-color: #0f0c36;
      }
    }

    &[type="date"] {
      color: #dbe0e9;
      html[dir="rtl"] & {
        text-align: right;
      }

      &:invalid {
        border-color: #dbe0e9;
      }

      &:focus {
        border-color: #0f0c36;
        color: #0f0c36;
      }

      &:valid {
        border-color: #0f0c36;
        color: #0f0c36;
      }
    }
  }
}

.add-form-payment {
  border-bottom: 1px solid #dbe0e9;
  margin-bottom: 30px;
  .form-add {
    input {
      flex: 2;
    }
    button {
      background-color: #0f0c36;
      border: 1px solid #0f0c36;
      color: #fff;
      height: 60px;
      border-radius: 20px;
      font-size: clamp(
        12.68px,
        calc(12.68px + 1.32 * (100vw - 680px) / 520),
        14px
      );
      @media (min-width: 1440px) {
        font-size: clamp(
          14px,
          calc(14px + 3.01 * (100vw - 1440px) / 160),
          17.01px
        );
      }
      font-weight: 400;
      outline: none;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      flex: 1;
      @media (max-width: 768px) {
        font-size: 11px;
        height: 44px;
      }
    }
  }
}

.form-bank-bird {
  .list-filed {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    .input-filed,
    .attach-receipt {
      grid-column: auto;
    }
    @media (min-width: 768px) {
      grid-template-columns: repeat(2, 1fr);

      .input-filed {
        grid-column: span 1;
      }

      .attach-receipt {
        grid-column: 1 / -1;
      }
    }
    h6 {
      font-size: clamp(
        12.68px,
        calc(12.68px + 1.32 * (100vw - 680px) / 520),
        14px
      );
      @media (min-width: 1440px) {
        font-size: clamp(
          14px,
          calc(14px + 3.01 * (100vw - 1440px) / 160),
          17.01px
        );
      }
      font-weight: 700;
      color: #0f0c36;
      @media (max-width: 580px) {
        font-size: 12px;
      }
    }
    .input-filed {
      label {
        font-size: clamp(
          12.68px,
          calc(12.68px + 1.32 * (100vw - 680px) / 520),
          14px
        );
        @media (min-width: 1440px) {
          font-size: clamp(
            14px,
            calc(14px + 3.01 * (100vw - 1440px) / 160),
            17.01px
          );
        }
        color: #0f0c36;
        display: block;
        margin-bottom: 8px;
        @media (max-width: 580px) {
          font-size: 12px;
        }
      }
      .in-border {
        width: 100%;
        height: 60px;
        border-radius: 100px;
        border: 0px solid #dbe0e9;
        padding: 0 20px;
        font-size: clamp(
          12.68px,
          calc(12.68px + 1.32 * (100vw - 680px) / 520),
          14px
        );
        @media (min-width: 1440px) {
          font-size: clamp(
            14px,
            calc(14px + 3.01 * (100vw - 1440px) / 160),
            17.01px
          );
        }
        font-weight: 400;
        outline: none;
        transition: all 0.3s ease;
        background-color: #f7f7f7;
        @media (max-width: 580px) {
          font-size: 12px;
          height: 44px;
          svg {
            width: 18px;
            height: 18px;
          }
        }
      }
    }
  }
}

.attach-receipt {
  .head-receipt {
    h5 {
      font-size: clamp(
        14.51px,
        calc(14.51px + 1.49 * (100vw - 680px) / 520),
        16px
      );
      @media (min-width: 1440px) {
        font-size: clamp(
          16px,
          calc(16px + 3.39 * (100vw - 1440px) / 160),
          19.39px
        );
      }
      font-weight: 700;
      color: #0f0c36;
      @media (max-width: 768px) {
        font-size: 11px;
      }
    }
    p {
      font-size: clamp(
        12.68px,
        calc(12.68px + 1.32 * (100vw - 680px) / 520),
        14px
      );
      @media (min-width: 1440px) {
        font-size: clamp(
          14px,
          calc(14px + 3.01 * (100vw - 1440px) / 160),
          17.01px
        );
      }
      color: #0f0c36;
      @media (max-width: 768px) {
        font-size: 11px;
      }
    }
  }
}

/* Upload Image */
.upload-container {
  width: 100%;
  margin: 30px auto;
  margin-bottom: 0;
  position: relative;
  min-height: 200px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #dbe0e9;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  @media (max-width: 580px) {
    min-height: 120px;
    border-radius: 20px;
    margin-top: 15px;
  }

  .preview-wrapper {
    display: none;

    position: absolute;
    top: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    z-index: 9;

    #imagePreview {
      width: 100%;
      display: block;
      max-height: 100%;
      object-fit: cover;
    }

    .remove-btn {
      position: absolute;
      top: 0px;
      right: 0px;
      background: #ff4d4d;
      color: #fff;
      border: none;
      border-radius: 0;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .drop-zone {
    cursor: pointer;
    svg {
      @media (max-width: 580px) {
        width: 30px;
        height: 30px;
      }
    }
    p {
      color: #8193af;
      font-size: clamp(
        12.68px,
        calc(12.68px + 1.32 * (100vw - 680px) / 520),
        14px
      );
      @media (min-width: 1440px) {
        font-size: clamp(
          14px,
          calc(14px + 3.01 * (100vw - 1440px) / 160),
          17.01px
        );
      }
      @media (max-width: 580px) {
        font-size: 10px;
      }
    }
    input {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
    }
  }

  #fileInput {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    z-index: 8;
    opacity: 0;
    cursor: pointer;
  }
}

/* Payment Checkout Modal */
.payment-checkout-modal {
  .modal-dialog {
    max-width: 1000px;
    margin: 1.75rem auto 0;
    align-items: end;
    min-height: calc(100% - (1.75rem));
    @media (max-width: 1290px) and (min-width: 768px) {
      padding-bottom: 50px;
    }
    .modal-body {
      padding: 35px;
      /* overflow-y: auto; */
      /* max-height: 700px; */
      @media (max-width: 768px) {
        padding: 20px 0;
        /* padding-bottom: 180px; */
      }
      .head-stak {
        h4 {
          font-size: clamp(
            14.51px,
            calc(14.51px + 1.49 * (100vw - 680px) / 520),
            16px
          );
          @media (min-width: 1440px) {
            font-size: clamp(
              16px,
              calc(16px + 3.39 * (100vw - 1440px) / 160),
              19.39px
            );
          }
          font-weight: bold !important;
          @media (max-width: 768px) {
            text-align: center;
          }
        }
        padding: 20px 30px;
        padding-bottom: 0;
        @media (max-width: 768px) {
          padding: 5px 20px;
        }
      }
      .ch-padding {
        max-height: 500px;
        overflow-y: auto;
        padding: 20px 30px;
        @media (max-width: 768px) {
          padding: 5px 20px;
        }
      }
      .end-footer-modal {
        position: sticky;
        bottom: 0;
        padding: 20px 30px;
        background-color: #fff;
        margin-top: 15px !important;
        border-radius: 20px 20px 0 0;
        @media (max-width: 768px) {
          padding: 20px;
        }
      }
      .panel {
        background-color: #dbe0e9;
        padding: 20px;
        border-radius: 10px;
        @media (max-width: 768px) {
          padding: 13px 20px;
        }
        .block-total-price {
          .head-total-price {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            h4 {
              font-size: clamp(
                12.68px,
                calc(12.68px + 1.32 * (100vw - 680px) / 520),
                14px
              );
              @media (min-width: 1440px) {
                font-size: clamp(
                  14px,
                  calc(14px + 3.01 * (100vw - 1440px) / 160),
                  17.01px
                );
              }
              font-weight: 600 !important;
              color: #0f0c36;
              margin: 0;
              font-family: "IBM Plex Sans Arabic";
              @media (max-width: 768px) {
                font-size: 12px;
              }
            }
            span {
              text-decoration: underline;
              font-size: clamp(
                11.76px,
                calc(11.76px + 1.24 * (100vw - 680px) / 520),
                13px
              );
              @media (min-width: 1440px) {
                font-size: clamp(
                  13px,
                  calc(13px + 2.82 * (100vw - 1440px) / 160),
                  15.82px
                );
              }
              font-weight: 600 !important;
              color: #0f0c36;
              font-family: "IBM Plex Sans Arabic";
              @media (max-width: 768px) {
                font-size: 10px;
                font-weight: normal !important;
              }
            }
            .t-prices {
              strong {
                font-weight: 600;
                font-size: clamp(
                  14.51px,
                  calc(14.51px + 1.49 * (100vw - 680px) / 520),
                  16px
                );
                @media (min-width: 1440px) {
                  font-size: clamp(
                    16px,
                    calc(16px + 3.39 * (100vw - 1440px) / 160),
                    19.39px
                  );
                }
                color: #0f0c36;
                display: inline-block;
                font-family: "IBM Plex Sans Arabic";
                @media (max-width: 768px) {
                  font-size: 14px;
                }
              }
              span {
                font-weight: 400 !important;
                font-size: clamp(
                  12.68px,
                  calc(12.68px + 1.32 * (100vw - 680px) / 520),
                  14px
                );
                @media (min-width: 1440px) {
                  font-size: clamp(
                    14px,
                    calc(14px + 3.01 * (100vw - 1440px) / 160),
                    17.01px
                  );
                }
                color: #0f0c36;
                display: inline-block;
                position: relative;
                font-family: "IBM Plex Sans Arabic";
                top: 1.5px;
                @media (max-width: 768px) {
                  font-size: 12px;
                  top: 0;
                }
              }
            }
          }
          .btn-toggle-total-price {
            transition: transform 0.3s ease;
            cursor: pointer;
            width: 27px;
            height: 27px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #0f0c36;
            @media (max-width: 768px) {
              display: none;
            }
            &.active {
              transform: rotate(180deg);
            }
          }
        }
        .panel-collapse {
          .price-details {
            .price-item {
              padding-inline-end: 33px;
              margin-top: 15px;
              font-size: clamp(
                10.84px,
                calc(10.84px + 1.16 * (100vw - 680px) / 520),
                12px
              );
              @media (min-width: 1440px) {
                font-size: clamp(
                  12px,
                  calc(12px + 2.63 * (100vw - 1440px) / 160),
                  14.63px
                );
              }
              @media (max-width: 768px) {
                padding-inline-end: 0px;
              }
            }
          }
        }
      }
      .tax-invoice {
        margin: 20px 0;
        padding: 20px 0;
        border-top: 1px solid #dbe0e9;
        border-bottom: 1px solid #dbe0e9;
        span {
          font-size: clamp(
            12.68px,
            calc(12.68px + 1.32 * (100vw - 680px) / 520),
            14px
          );
          @media (min-width: 1440px) {
            font-size: clamp(
              14px,
              calc(14px + 3.01 * (100vw - 1440px) / 160),
              17.01px
            );
          }
          color: #0f0c36;
          @media (max-width: 580px) {
            font-size: 14px;
          }
        }
      }
      #setup-tax-number-wrapper {
        @media (max-width: 768px) {
          margin-top: 0 !important;
        }
        input {
          height: 60px;
          border-radius: 100px;
          padding: 0 20px;
          margin: 15px 0;
          box-shadow: none !important;
          outline: none !important;
          @media (max-width: 768px) {
            font-size: 11px;
            height: 44px;
          }
          &::placeholder {
            color: #dbe0e9;
            transition: opacity 0.3s ease;
          }

          &:focus {
            border-color: #0f0c36;
            &::placeholder {
              opacity: 0;
            }
          }
        }
      }
      .form-btn {
        button {
          height: 60px;
          width: 140px;
          border-radius: 100px;
          font-size: clamp(
            12.68px,
            calc(12.68px + 1.32 * (100vw - 680px) / 520),
            14px
          );
          @media (min-width: 1440px) {
            font-size: clamp(
              14px,
              calc(14px + 3.01 * (100vw - 1440px) / 160),
              17.01px
            );
          }
          font-weight: 400;
          outline: none;
          transition: all 0.3s ease;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid #0f0c36;
          color: #0f0c36;
          @media (max-width: 768px) {
            font-size: 11px;
            height: 44px;
          }
          &:hover {
            transform: scale(0.98);
            background-color: #0f0c36;
            color: #fff;
          }
        }
      }
      .choose-of-list {
        padding: 10px;
        margin: 20px 0;
        /* border-top: 1px solid #dbe0e9; */
        border-bottom: 1px solid #dbe0e9;
        padding-bottom: 30px;
        @media (max-width: 768px) {
          padding: 20px 0;
          border-top: 0;
          padding-top: 0;
        }
        h4 {
          font-size: clamp(
            12.68px,
            calc(12.68px + 1.32 * (100vw - 680px) / 520),
            14px
          );
          @media (min-width: 1440px) {
            font-size: clamp(
              14px,
              calc(14px + 3.01 * (100vw - 1440px) / 160),
              17.01px
            );
          }
          color: #0f0c36;
        }
        .list-payment {
          display: grid;
          /* grid-template-columns: repeat(5, 1fr); */
          /* grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); */
          grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
          margin-top: 20px;
          /* @media (max-width: 768px) {
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
          } */
          @media (max-width: 440px) {
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
          }
          .radioButton {
            cursor: pointer;
            border: 1px solid #8b89c2;
            border-radius: 10px;
            padding: 10px;
            height: 75px;
            justify-content: center;
            background-color: #fff;
            transition: all 0.2s ease-in-out;
            @media (max-width: 600px) {
              height: 50px;
            }

            svg {
              @media (max-width: 600px) {
                width: 40px;
                height: 40px;
              }
            }

            input[type="radio"] {
              position: absolute;
              opacity: 0;
              width: 0;
              height: 0;
            }

            &:has(input:checked) {
              border: 1px solid #e5e5f7;
              background-color: #e5e5f7;
              /* box-shadow: 0 2px 8px rgba(15, 12, 54, 0.05); */
            }
          }
        }
      }
    }
  }
}

.mo-invoice {
  margin: 20px 0;
  padding: 20px 0;
  border-top: 1px solid #dbe0e9;
  border-bottom: 1px solid #dbe0e9;
  @media (max-width: 768px) {
    border: 0 !important;
    padding: 0 !important;
  }
  .tmr {
    display: grid;
    grid-template-areas:
      "taxToggle"
      "taxInput"
      "couponToggle"
      "couponAction";
    @media (min-width: 992px) {
      grid-template-columns: 1fr 1fr;

      grid-template-areas:
        "couponToggle taxToggle"
        "couponAction couponAction"
        "taxInput taxInput";
    }
    .tax-coupon {
      grid-area: couponToggle;
      @media (max-width: 768px) {
        border-top: 1px solid #dbe0e9 !important;
        padding: 15px 0 !important;
        /* padding-top: 0 !important; */
      }
      span {
        @media (max-width: 580px) {
          font-size: 14px;
        }
      }
    }
    #setup-coupon-wrapper {
      grid-area: couponAction;
      @media (max-width: 768px) {
        margin-top: 0 !important;
      }
    }
    .tax-invoice {
      grid-area: taxToggle;
      @media (max-width: 768px) {
        /* border-top: 1px solid #dbe0e9 !important; */
        padding: 15px 0 !important;
        padding-top: 0 !important;
      }
    }
    #setup-tax-number-wrapper {
      grid-area: taxInput;
    }
    @media (max-width: 768px) {
      flex-direction: column;
      align-items: start !important;
    }
  }
  .tax-invoice {
    margin: 0px 0 !important;
    padding: 0px 0 !important;
    border-top: 0px solid #dbe0e9 !important;
    border-bottom: 0px solid #dbe0e9 !important;
    flex: 1;
  }
}

/*  */
.payment-success-modal {
  .modal-content {
    border-radius: 0 !important;
  }
  .modal-body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }
}

.con-success-page {
  position: relative;
  .box-success {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 9;
    @media (max-width: 768px) {
      width: 100%;
    }
    .check-icon {
      svg {
        @media (max-width: 768px) {
          width: 100px;
          height: 100px;
        }
      }
    }
    .info-success {
      h4 {
        @media (max-width: 768px) {
          font-size: 17px;
        }
      }
      p {
        @media (max-width: 768px) {
          font-size: 12px;
        }
      }
      .num-pay {
        border: 1px dashed #0f0c36;
        border-radius: 10px;
        padding: 5px 10px;
        margin: 10px auto;
        .p-1 {
          width: 100%;
          span {
            text-align: start;
            color: #606e84;
            font-size: clamp(
              10.84px,
              calc(10.84px + 1.16 * (100vw - 680px) / 520),
              12px
            );
            @media (min-width: 1440px) {
              font-size: clamp(
                12px,
                calc(12px + 2.63 * (100vw - 1440px) / 160),
                14.63px
              );
            }
          }
          @media (max-width: 768px) {
            flex-direction: column;
            flex: 1;
            align-items: flex-start !important;
          }
        }
      }
    }
    .btn-continue {
      height: 60px;
      width: 240px;
      border-radius: 100px;
      font-size: clamp(
        12.68px,
        calc(12.68px + 1.32 * (100vw - 680px) / 520),
        14px
      );
      @media (min-width: 1440px) {
        font-size: clamp(
          14px,
          calc(14px + 3.01 * (100vw - 1440px) / 160),
          17.01px
        );
      }
      font-weight: 400;
      outline: none;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      background-color: #0f0c36;
      border: 1px solid #0f0c36;
      color: #fff;
      margin: 20px auto;
      @media (max-width: 768px) {
        width: 100%;
        font-size: 11px;
      }
      svg {
        html[dir="ltr"] & {
          rotate: 180deg;
        }
      }
      &:hover {
        transform: scale(0.98);
        background-color: transparent;
        color: #0f0c36;
        svg {
          path {
            fill: #0f0c36;
          }
        }
      }
    }
  }
  .shape-svg {
    position: absolute;
    bottom: 0;
    left: 0;
    @media (max-width: 768px) {
      display: none;
    }
  }
}

/* Media */
@media (max-width: 768px) {
  /* Subscription Page */
  .price-comparison-modal {
    .modal-dialog {
      .modal-header {
        justify-content: center !important;
        button,
        span {
          display: none !important;
        }
      }
      .modal-body {
        padding: 0 !important;
        .tab-comparison-modal {
          flex-wrap: nowrap;
          overflow-x: auto;
          justify-content: start;
          width: 90%;
          li {
            flex: 1;
            a {
              padding: 10px 20px;
              font-size: 10px;
              white-space: nowrap;
              text-align: center;
              @media (max-width: 768px) {
                padding: 8px 15px !important;
              }
            }
          }
        }
      }
    }
  }
  .modal-dialog {
    max-width: 100% !important;
    width: 100% !important;
    margin: auto;
    align-items: end;
    top: 0;
    transform: none;
    min-height: 100%;
  }
}

.inp-password-review {
  position: relative;
  .pass-instructions {
    background-color: #fff;
    box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    padding: 25px 30px;
    max-width: min(420px, calc(100vw - 24px));
    position: fixed;
    z-index: 9999;
    @media (max-width: 767px) {
      border-radius: 10px;
      padding: 15px 10px;
    }
    &:before {
      content: "";
      position: absolute;
      top: -8px;
      bottom: auto;
      left: 0;
      right: 0;
      margin: auto;
      width: 16px;
      height: 16px;
      background-color: #fff;
      box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.05);
      transform: rotate(45deg);
      z-index: -1;
    }
    &.pi-above:before {
      top: auto;
      bottom: -8px;
    }
    &.pi-side:before {
      top: var(--pi-arrow-top, 20px);
      bottom: auto;
      left: auto;
      right: auto;
      margin: 0;
    }
    &.pi-side-right:before {
      left: -8px;
      right: auto;
    }
    &.pi-side-left:before {
      right: -8px;
      left: auto;
    }
    .pi-title {
      font-size: clamp(
        7.76px,
        calc(7.76px + 1.24 * (100vw - 680px) / 520),
        9px
      );
      @media (min-width: 1440px) {
        font-size: clamp(
          9px,
          calc(9px + 2.82 * (100vw - 1440px) / 160),
          11.82px
        );
      }
      color: #0f0c36 !important;
      margin-bottom: 17px;
      margin-top: 0px;
      @media (max-width: 767px) {
        font-size: 11px !important;
        margin-bottom: 15px;
      }
    }
    .pi-bar-wrap {
      background-color: #dbe0e9;
      border-radius: 5px;
      overflow: hidden;
      span {
        height: 3px;
        display: block;
      }
    }
    .pi-strength-lbl {
      font-size: clamp(
        7.76px,
        calc(7.76px + 1.24 * (100vw - 680px) / 520),
        9px
      );
      @media (min-width: 1440px) {
        font-size: clamp(
          9px,
          calc(9px + 2.82 * (100vw - 1440px) / 160),
          11.82px
        );
      }
      /* color: #0f0c36 !important; */
      margin-bottom: 20px;
      margin-top: 17px;
      @media (max-width: 767px) {
        font-size: 11px !important;
        margin-bottom: 15px;
        margin-top: 15px;
      }
    }
    .pi-rules-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
      li {
        display: flex;
        align-items: center;
        gap: 5px;
        span {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 15px;
          @media (max-width: 767px) {
            font-size: 11px;
          }
          svg {
            @media (max-width: 767px) {
              width: 16px;
              height: 16px;
            }
          }
        }
        strong {
          font-weight: normal;
          color: #0f0c36;
          font-size: clamp(
            5.93px,
            calc(5.93px + 1.07 * (100vw - 680px) / 520),
            7px
          );
          @media (min-width: 1440px) {
            font-size: clamp(
              7px,
              calc(7px + 2.45 * (100vw - 1440px) / 160),
              9.45px
            );
          }
        }
      }
    }
  }
}

.modal-backdrop {
  display: none;
}

.modal {
  animation: none !important;
}

#card-payment-id,
#iframe {
  height: 340px !important;
}

.btn-apple-pay #iframe {
  height: 25px !important;
}

.btn-apple-pay #btnSubmitApplePay {
  background-color: #1d2124 !important;
}

input {
  &:focus,
  &:not(:placeholder-shown) {
    border-color: #0f0c36 !important;
  }
}