/* cyrillic-ext */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIuaomQNQcsA88c7O9yZ4KMCoOg4Koz4yOqhMva.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIuaomQNQcsA88c7O9yZ4KMCoOg4Koz4yGqhMva.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIuaomQNQcsA88c7O9yZ4KMCoOg4Koz4yCqhMva.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIuaomQNQcsA88c7O9yZ4KMCoOg4Koz4y6qhA.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko70yyygA.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko50yyygA.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko40yyygA.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.general-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;

  background: rgba(0, 0, 0, 0.72);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}

.general-popup-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.general-popup {
  position: relative;

  width: min(460px, 100%);
  max-height: calc(100vh - 48px);

  overflow-y: auto;
  overflow-x: hidden;

  background: #0b0b0b;
  border: 1px solid #2c2c2c;
  border-radius: 14px;

  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);

  transform: translateY(16px) scale(0.98);
  opacity: 0;

  transition:
    transform 0.22s ease,
    opacity 0.22s ease;
}

.general-popup-overlay.active .general-popup {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.general-popup::-webkit-scrollbar {
  width: 7px;
}

.general-popup::-webkit-scrollbar-track {
  background: transparent;
}

.general-popup::-webkit-scrollbar-thumb {
  background: #2c2c2c;
  border-radius: 20px;
}

.general-popup::-webkit-scrollbar-thumb:hover {
  background: #8f8f8f;
}

.general-popup-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  padding: 0;

  background: #151515;
  border: 1px solid #2c2c2c;
  border-radius: 8px;

  color: #c7c7c7;

  cursor: pointer;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.general-popup-close:hover {
  background: #020201;
  border-color: #c9a000;
  color: #f4c400;
}

.general-popup-close svg {
  width: 17px;
  height: 17px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.general-popup-image-wrapper {
  display: none;

  width: 100%;
  height: 220px;

  overflow: hidden;

  background: #020201;
  border-bottom: 1px solid #2c2c2c;
}

.general-popup-image-wrapper.active {
  display: block;
}

.general-popup-image-wrapper img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.general-popup-content {
  padding: 28px;
}

.general-popup-title {
  padding-right: 42px;

  color: #f5f5f5;

  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
}

.general-popup-title:empty {
  display: none;
}

.general-popup-text {
  margin-top: 10px;

  color: #c7c7c7;

  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
}

.general-popup-text:empty {
  display: none;
}

.general-popup-fields {
  display: flex;
  flex-direction: column;

  gap: 16px;

  margin-top: 20px;
}

.general-popup-fields:empty {
  display: none;
}

.general-popup-field {
  display: flex;
  flex-direction: column;

  width: 100%;
  min-width: 0;
}

.general-popup-label {
  display: block;

  margin-bottom: 8px;

  color: #c7c7c7;

  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
}

.general-popup-input {
  width: 100%;
  min-width: 0;

  padding: 11px 12px;

  outline: none;

  background: #020201;

  border: 1px solid #2c2c2c;
  border-radius: 8px;

  color: #f5f5f5;

  font-family: inherit;
  font-size: 13px;
  font-weight: 500;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.general-popup-input::placeholder {
  color: #8f8f8f;
}

.general-popup-input:hover {
  border-color: #8f8f8f;
}

.general-popup-input:focus {
  border-color: #c9a000;
  box-shadow: 0 0 0 3px rgba(244, 196, 0, 0.08);
}

.general-popup-input.error {
  border-color: #d84b4b;
  box-shadow: 0 0 0 3px rgba(216, 75, 75, 0.08);
}

.general-popup-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.general-popup-input[readonly] {
  opacity: 0.8;
}

textarea.general-popup-input {
  min-height: 100px;

  resize: vertical;

  line-height: 1.6;
}

select.general-popup-input {
  appearance: none;
  -webkit-appearance: none;

  cursor: pointer;

  background-image: linear-gradient(45deg, transparent 50%, #c7c7c7 50%), linear-gradient(135deg, #c7c7c7 50%, transparent 50%);

  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 11px) 50%;

  background-size:
    5px 5px,
    5px 5px;

  background-repeat: no-repeat;

  padding-right: 34px;
}

select.general-popup-input option {
  background: #0b0b0b;
  color: #f5f5f5;
}

.general-popup-field input[type="checkbox"].general-popup-input {
  width: 18px;
  height: 18px;

  padding: 0;

  accent-color: #f4c400;

  cursor: pointer;
}

.general-popup-error {
  display: none;

  margin-top: 7px;

  color: #e26060;

  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

.general-popup-error.active {
  display: block;
}

.general-popup-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 10px;

  margin-top: 24px;
}

.general-popup-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 38px;

  padding: 9px 15px;

  border-radius: 7px;

  font-family: inherit;
  font-size: 11px;
  font-weight: 800;

  cursor: pointer;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease;
}

.general-popup-button:active {
  transform: scale(0.98);
}

.general-popup-button.secondary {
  background: #151515;
  border: 1px solid #2c2c2c;
  color: #c7c7c7;
}

.general-popup-button.secondary:hover {
  background: #020201;
  border-color: #8f8f8f;
  color: #f5f5f5;
}

.general-popup-button.primary {
  background: transparent;
  border: 1px solid #c9a000;
  color: #f4c400;
}

.general-popup-button.primary:hover {
  background: #f4c400;
  border-color: #f4c400;
  color: #111;
}

body.general-popup-open {
  overflow: hidden;
}

@media (max-width: 600px) {
  .general-popup-overlay {
    align-items: flex-end;

    padding: 12px;
  }

  .general-popup {
    width: 100%;
    max-height: calc(100vh - 24px);

    border-radius: 14px;
  }

  .general-popup-image-wrapper {
    height: 190px;
  }

  .general-popup-content {
    padding: 22px;
  }

  .general-popup-title {
    font-size: 17px;
  }

  .general-popup-actions {
    flex-direction: column-reverse;

    gap: 8px;
  }

  .general-popup-button {
    width: 100%;
  }
}