#phone {
      border: 1px solid #FFF;
      flex: 1;
      outline: 0;
      color: #222;
      letter-spacing: 0.02em;
      min-width: 0;
      border-radius: 8px !important;
      height: 100%;
  }

  #phone.error {
      border: 1px solid #C00 !important;
  }

  #phone::placeholder {
      color: #ccc;
  }

  .plustenoff {
      display: none;
  }

  .green {
      color: #28a745 !important;
  }

  fieldset {
      min-width: fit-content !important;
  }

  .state-autofill-catcher {
      position: absolute;
      left: 0;
      top: 0;
      width: 1px;
      height: 1px;
      opacity: 0.01;
      pointer-events: none;
      border: 0;
      padding: 0;
      font-size: 16px;
  }

  input.error,
  select.error {
      border: 1px solid #C00 !important;
      background-image: none !important;
  }

  input.valid,
  select.valid {
      border: 1px solid #00d04f !important;
      background-image: none !important;
  }

  #payment-form input.has-error,
  #payment-form select.has-error,
  #payment-form .input-flds.has-error,
  #payment-form .selcet-fld.has-error,
  #payment-form input.no-error,
  #payment-form select.no-error,
  #payment-form .input-flds.no-error,
  #payment-form .selcet-fld.no-error {
      background-image: none !important;
  }

  .frm-flds:has(input.error)::after,
  .frm-flds:has(select.error)::after,
  .frm-flds:has(input.valid)::after,
  .frm-flds:has(select.valid)::after {
      position: absolute;
      content: '';
      top: calc(50% + var(--validation-icon-y-offset, 0px));
      right: var(--validation-icon-right, 22px);
      height: 20px;
      width: 19px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      pointer-events: none;
      transform: translateY(-50%);
      z-index: 3;
  }

  .frm-flds:has(input.error)::after,
  .frm-flds:has(select.error)::after {
      background-image: url('/assets/assets/error-input.webp?v=2');
  }

  .frm-flds:has(input.valid)::after,
  .frm-flds:has(select.valid)::after {
      background-image: url('/_img/tick-input.png?v=2.4');
  }

  #payment-form .frm-flds.validation-has-error::after,
  #payment-form .frm-flds.validation-no-error::after,
  #payment-form .frm-flds:has(input.has-error)::after,
  #payment-form .frm-flds:has(select.has-error)::after,
  #payment-form .frm-flds:has(input.no-error)::after,
  #payment-form .frm-flds:has(select.no-error)::after {
      content: "";
      position: absolute;
      top: calc(50% + var(--validation-icon-y-offset, 0px));
      right: var(--validation-icon-right, 22px);
      width: 19px;
      height: 20px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      pointer-events: none;
      transform: translateY(-50%);
      z-index: 3;
  }

  #payment-form .frm-flds.validation-has-error::after,
  #payment-form .frm-flds:has(input.has-error)::after,
  #payment-form .frm-flds:has(select.has-error)::after {
      background-image: url('/assets/assets/error-input.webp?v=2');
  }

  #payment-form .frm-flds.validation-no-error::after,
  #payment-form .frm-flds:has(input.no-error)::after,
  #payment-form .frm-flds:has(select.no-error)::after {
      background-image: url('/_img/tick-input.png?v=2.4');
  }

  #payment-form .payment-flds-box.credit-card .frm-flds {
      --validation-icon-right: 25px;
      --validation-icon-y-offset: 5px;
  }

  #payment-form .payment-flds-box.credit-card .frm-flds.validation-has-error::after,
  #payment-form .payment-flds-box.credit-card .frm-flds.validation-no-error::after,
  #payment-form .payment-flds-box.credit-card .frm-flds:has(input.error)::after,
  #payment-form .payment-flds-box.credit-card .frm-flds:has(input.valid)::after,
  #payment-form .payment-flds-box.credit-card .frm-flds:has(input.has-error)::after,
  #payment-form .payment-flds-box.credit-card .frm-flds:has(input.no-error)::after {
      top: calc(50% + 5px);
      right: 25px;
      transform: translateY(-50%);
  }

  .phone-wrapper {
      display: flex;
      align-items: stretch;
      border: 1.5px solid #a7abad;
      border-radius: 8px;
      overflow: visible;
      background: #fff;
      transition: border-color 0.2s;
      height: calc(3.5rem + 2px);
  }

  .phone-wrapper:focus-within {
      border-color: #4a90e2;
      box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.15);
  }

  /* Flag dropdown */
  .flag-select {
      position: relative;
      display: flex;
      align-items: center;
      border-right: 1.5px solid #e0e0e0;
      border-radius: 8px 0 0 8px;
      background: #f8f8f8;
      cursor: pointer;
      user-select: none;
      padding: 0 10px;
      gap: 6px;
      min-width: 72px;
      transition: background 0.15s;
  }

  .flag-select:hover {
      background: #efefef;
  }

  .flag-icon {
      font-size: 1.35rem;
      line-height: 1;
  }

  .flag-code {
      font-size: 0.78rem;
      color: #555;
      font-weight: 600;
  }

  .flag-chevron {
      font-size: 0.55rem;
      color: #888;
      margin-left: 2px;
  }

  .flag-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 4px);
      left: -1px;
      background: #fff;
      border: 1.5px solid #ddd;
      border-radius: 8px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
      z-index: 100;
      overflow: hidden;
      min-width: 140px;
  }

  .flag-dropdown.open {
      display: block;
  }

  .flag-option {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 14px;
      cursor: pointer;
      transition: background 0.12s;
      font-size: 0.88rem;
      color: #333;
  }

  .flag-option:hover {
      background: #f0f5ff;
  }

  .flag-option.active {
      background: #e8f0fe;
      font-weight: 600;
  }

  .flag-option .flag-icon {
      font-size: 1.2rem;
  }

  .flag-icon img {
      width: 24px;
      height: auto;
  }

  .deal img {
      width: 18px;
  }

  .price .new {
      font-size: 18px;
      font-weight: 700;
      font-family: "Inter", sans-serif;
      display: block;
      float: none;
      clear: both;
      text-align: right;
  }

  .price .old {
      color: #000;
      margin-right: 5px;
      position: relative;
      font-size: 17px;
      font-family: "Inter", sans-serif;
      display: block;
      width: max-content;
      float: right;
  }

  .price .old::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 1.5px;
      top: 48%;
      left: 0;
      background-color: #d35400;
      transform: rotate(353deg);
  }

  .tag.popular {
      color: #0a84ff;
      font-weight: 600;
  }

  p.best-deal.deal {
      color: #BC1111;
  }

  @media (max-width: 500px) {
      .tab-option span {
          font-size: 12px;
      }
  }

  @media (max-width: 1021px) {
      .plan-header ul li {
          font-size: 11px;
      }
  }

  @media (max-width: 500px) {
      .plan-header ul li {
          font-size: 11px;
      }
  }

  @media (max-width: 1021px) {
      .plan {
          padding: 10px;
      }
  }

  @media (max-width: 500px) {
      .plan {
          padding: 10px;
      }
  }

  @media (max-width: 1021px) {
      p.sub {
          font-size: 13px;
      }
  }

  @media (max-width: 500px) {
      p.sub {
          font-size: 13px;
      }
  }

  @media (max-width: 420px) {

      .plan-header h3,
      p.sub {
          font-size: 12px;
      }
  }

  @media (max-width: 1021px) {
      .deal {
          font-size: 10px;
      }
  }

  @media (max-width: 500px) {
      .deal {
          font-size: 9px;
      }
  }

  @media (max-width: 1021px) {
      .price .old {
          font-size: 14px;
      }
  }

  @media (max-width: 500px) {
      .price .old {
          font-size: 12px;
      }
  }

  @media (max-width: 1021px) {
      .price .new {
          font-size: 16px;
      }
  }

  @media (max-width: 500px) {
      .price .new {
          font-size: 14px;
      }
  }

  @media (max-width: 1021px) {
      .save {
          font-size: 12px;
      }
  }

  @media (max-width: 500px) {
      .save {
          font-size: 12px;
      }
  }

  @media (max-width: 420px) {
      p.save {
          font-size: 10px;
      }
  }

  @media (max-width: 1021px) {
      .deal img {
          width: 14px;
      }
  }

  @media (max-width: 420px) {
      .deal img {
          width: 16px;
      }
  }