:root {
  --pgf-color-white: #ffffff;
  --pgf-color-white-50: #f5f5f5;
  --pgf-color-black: #000000;
  --pgf-color-black-alpha2: #00000005;
  --pgf-color-black-alpha6: #0000000f;
  --pgf-color-black-alpha88: #000000e0;
  --pgf-color-black-100: #111111;
  --pgf-color-black-200: #222222;
  --pgf-color-black-300: #252525;

  --pgf-color-primary: #1f4bcf;
  --pgf-color-primary-alpha03: #1f4bcf4d;
  --pgf-color-primary-200: #abbdf2;
  --pgf-color-secondary: #ffbb00;
  --pgf-color-error: #ba271e;

  --pgf-color-gray-100: #dfe1e4;
  --pgf-color-gray-200: #dedede;
  --pgf-color-gray-300: #f0f0f0;
  --pgf-color-gray-400: #e2e2e2;
  --pgf-color-gray-500: #dfdfdf;
  --pgf-color-gray-600: #d9d9d9;

  --pgf-color-midnight: #131b34;
  --pgf-color-red: #d1362a;
  --pgf-color-pink-100: #fbebea;

  --pgf-color-title: var(--pgf-color-midnight);
  --pgf-color-bg-button-primary: var(--pgf-color-primary);
  --pgf-color-bg-button-primary--disabled: var(--pgf-color-primary-200);
  --pgf-color-border-input: var(--pgf-color-gray-400);
  --pgf-color-border-list-item: #ededed;
  --pgf-color-bg-select-item: var(--pgf-color-white);
  --pgf-color-bg-select-item--hover: var(--pgf-color-white-50);
  --pgf-color-bg-select-item--selected: #edf1fc;
}

#pgf-top-bar,
#pgf-popup,
#pgf-drawer,
#pgf-other-vendors-button,
#pgf-other-vendors-postal-code-form,
#pgf-delivery-area-form {
  *:not(
      .dokan-form-group,
      .dokan-w3,
      .dokan-w6,
      .dokan-control-label,
      .dokan-text-left,
      .dokan-btn,
      .dokan-btn-theme
    ) {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    min-height: 0;
  }

  .pgf-selectize.selectize-control:is(.single, .multi) {
    .selectize-input,
    .selectize-input > input {
      padding: 7px 12px;
      border: 1px solid var(--pgf-color-border-input);
      background-color: var(--pgf-color-white);
      border-radius: 6px;
      font-size: 16px;
      line-height: 24px;
      height: unset;
      background-image: none;
      box-shadow: none;
    }

    .selectize-input.focus {
      box-shadow: none;
      outline: 2px solid var(--pgf-color-border-input);
      outline-offset: -2px;
    }

    .pgf-selectize-dropdown {
      border: none;
      background: var(--pgf-color-white);
      box-shadow: 0px 9px 28px 8px #0000000d, 0px 3px 6px -4px #0000001f,
        0px 6px 16px 0px #00000014;

      border-radius: 6px;
      top: calc(100% + 4px) !important;
      overflow: hidden;
    }

    .pgf-selectize-dropdown .selectize-dropdown-content {
      padding: 4px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .pgf-selectize-option {
      font-size: 16px;
      line-height: 24px;
      padding: 5px 12px;
      color: var(--pgf-color-title);
      background-color: var(--pgf-color-white);
      border-radius: 4px;
      font-weight: 400;
      flex-shrink: 0;
    }

    .pgf-selectize-option.selected {
      color: var(--pgf-color-primary);
      background-color: var(--pgf-color-bg-select-item--selected);
      font-weight: 600;
      padding-right: 32px;
      position: relative;
    }

    .pgf-selectize-option.selected::after {
      content: "";
      display: block;
      position: absolute;
      width: 20px;
      height: 20px;
      top: 7px;
      right: 12px;
      background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_364_2526' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='20' height='20'%3E%3Crect width='20' height='20' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_364_2526)'%3E%3Cpath d='M7.95794 12.625L15.0204 5.5625C15.1871 5.39583 15.3815 5.3125 15.6038 5.3125C15.826 5.3125 16.0204 5.39583 16.1871 5.5625C16.3538 5.72917 16.4371 5.92708 16.4371 6.15625C16.4371 6.38542 16.3538 6.58333 16.1871 6.75L8.54127 14.4167C8.3746 14.5833 8.18016 14.6667 7.95794 14.6667C7.73571 14.6667 7.54127 14.5833 7.3746 14.4167L3.79127 10.8333C3.6246 10.6667 3.54474 10.4687 3.55169 10.2396C3.55863 10.0104 3.64544 9.8125 3.8121 9.64583C3.97877 9.47917 4.17669 9.39583 4.40585 9.39583C4.63502 9.39583 4.83294 9.47917 4.9996 9.64583L7.95794 12.625Z' fill='%231F4BCF'/%3E%3C/g%3E%3C/svg%3E%0A");
      background-repeat: no-repeat;
      background-size: contain;
    }

    .pgf-selectize-option.active:not(.selected) {
      background-color: var(--pgf-color-bg-select-item--hover);
    }
  }

  .pgf-selectize.selectize-control.pgf-selectize--error {
    .selectize-input,
    .selectize-input > input {
      border: 1px solid var(--pgf-color-error);
      box-shadow: none;
    }
  }

  .pgf-select-group {
    display: flex;
    flex-direction: column;

    .pgf-selectize {
      .selectize-input {
        width: 100%;
        padding: 6px 8px;
        border: 1px solid var(--pgf-color-gray-500, #dfdfdf);
        border-radius: 8px;
        transition: border 0.1s;
      }

      .selectize-input:has(.item) {
        padding: 2px 8px 6px;
      }
    }

    .item + input[type="select-one"] {
      margin-top: 4px !important;
    }

    .item {
      margin-top: 4px;
      margin-right: 4px;
      padding: 1px 8px;
      background-color: var(--pgf-color-white-50, #f5f5f5);
      border-radius: 4px;
      align-items: center;

      border: unset;
      text-shadow: unset;
      background-image: unset;
      background-repeat: repeat-x;
      box-shadow: unset;

      color: var(--pgf-color-midnight, #131b34);
      font-family: inherit;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
    }

    .item:hover {
      background-color: var(--pgf-color-pink-100, #fbebea);
    }

    .item .remove {
      --_icon-close: url("../icons/close-rounded.svg");
      border: unset;
      margin: unset;
      position: relative;
      color: transparent;
      mask: var(--_icon-close) no-repeat center;
      -webkit-mask: var(--_icon-close) no-repeat center;
      mask-size: cover;
      -webkit-mask-size: cover;
      background-color: #878787;
      mask-size: 12px;
      width: 24px;
      height: 24px;
    }

    .item .remove:hover {
      background-color: #d1362a;
    }

    .selectize-dropdown {
      padding: 4px;
    }

    .selectize-dropdown-content {
      padding: unset;
      scrollbar-width: thin;
      scrollbar-color: var(--pgf-color-gray-600, #d9d9d9) transparent;
    }

    .pgf-selectize-option:focus-visible {
      outline: 1px solid #1f4bcf;
      outline-offset: -2px;
    }

    .pgf-form-error {
      color: var(--pgf-color-error);
      font-size: 12px;
      line-height: 18px;
      margin-top: 0;
      margin-bottom: 0;
      display: block;
      margin-top: 4px;
    }
  }
}