.support-popup-wrapper {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(44, 30, 57, 0.6);
    z-index: 100;
}
.support-popup-wrapper * {
    box-sizing: border-box;
}

.support-popup-wrapper.open {
    display: block;
}

.support-popup-wrapper * {
    box-sizing: border-box;
}

.support-popup {
    position: fixed;
    top: 0;
    right: 0;
    width: 512px;
    height: 100%;
    padding: 0;
    background-color: #FFFFFF;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(163, 160, 167, 0.4) #2C1E39;
    background-color: #2C1E39;
}

.support-popup-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 24px;
    height: 24px;
    background: 0 0 / 100% 100% no-repeat url(../img/close.png);
    cursor: pointer;
    z-index: 1;
}

.support-popup-header {
    padding: 28px 48px;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0.3px;
    color: #FFFFFF;
    background: calc(100% - 64px) 16px / 96px 88px no-repeat url(../img/cat.png);
}

/* FAQ */

.support-popup-faq {
    padding: 24px;
    margin: 0 24px;
    background-color: #FFFFFF;
    border: 1px solid #EFEDF2;
    border-radius: 16px;
}

.support-popup-faq-back {
    display: none;
    position: absolute;
    top: 22px;
    left: 24px;
    padding-left: 20px;
    font-weight: 600;
    font-size: 15px;
    line-height: 20px;
    color: #725496;
    background: 0 center / 16px 16px no-repeat url(../img/faq-b.png);
    cursor: pointer;
}

.support-popup-faq-search {
    display: block;
    width: 100%;
    padding: 11px 16px 11px 40px;
    border: 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    outline: none;
    color: #594C65;
    border: 1px solid #D8D5DA;
    border-radius: 16px;
    background: 16px center / 16px 16px no-repeat url(../img/search.png);
}

.support-popup-faq-s {
    display: none;
}

.support-popup-faq-search::placeholder {
    color: #D8D5DA;
}

.support-popup-faq-s {
    margin-top: 8px;
}

.support-popup-faq-item {
    border-bottom: 1px solid #EFEDF2;
}

.support-popup-faq-item.hidden {
    display: none;
}

.support-popup-faq-item:last-child {
    border-bottom: none;
}

.support-popup-faq-question {
    width: 100%;
    padding: 16px 32px 16px 0;
    background: right center / 16px 16px no-repeat url(../img/faq-q.png);
    font-weight: 600;
    font-size: 15px;
    line-height: 24px;
    color: #594C65;
    cursor: pointer;
}

.support-popup-faq-question span {
    color: #EA7C58
}

.support-popup-faq-answer {
    position: absolute;
    display: none;
    top: 72px;
    left: 0;
    width: 100%;
    min-height: calc(100% - 72px);
    overflow-x: none;
    overflow-y: auto;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: #88838D;
    padding: 0 24px;
    background-color: #FFFFFF;
}

.support-popup-faq-answer a {
    color: #9C7FBE;
    text-decoration: none;
}

.support-popup-faq-answer a:hover {
    color: #9C7FBE;
    text-decoration: underline;
}

.support-popup-faq-answer-h {
    width: 100%;
    margin-bottom: 16px;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: #2C1E39;
}
.support-popup-faq-answer-h p {
    margin: 16 0;
}

/* FORM */

.support-popup-form {
    padding: 24px;
    margin: 16px 24px 24px 24px;
    background-color: #FFFFFF;
    border: 1px solid #EFEDF2;
    border-radius: 16px;

    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #2C1E39;
}

.support-popup-form-subheader {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #88838D;
    margin-top: 4px;
    margin-bottom: 8px;
}

.support-popup-form-group {
    display: flex;
    width: 100%;
    flex-direction: row;
    gap: 8px 16px;
    margin-bottom: 24px;
}

.support-popup-form-input-wrapper {
    flex: 1;
}

.support-popup-form-input {
    position: relative;
    border: 1px solid #D8D5DA;
    border-radius: 16px;
    margin-top: 16px;
    padding: 10px 16px;
    color: #88838D;
}

.support-popup-form-input.error {
    border: 1px solid #F16031;
    color: #F16031;
}

.support-popup-form-error {
    display: none;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #F16031;
    margin: 4px 0 0 16px;
}
.support-popup-form-input.error + .support-popup-form-error {
    display: block;
}


.support-popup-form-input input,
.support-popup-form-input textarea {
    display: block;
    width: 100%;
    border: 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    outline: none;
    resize: none;
    color: #594C65;
    scrollbar-width: thin;
}

.support-popup-form-input input::placeholder,
.support-popup-form-input textarea::placeholder {
    color: #D8D5DA;
}

.support-popup-form-input-suffix {
    position: absolute;
    top: -10px;
    left: 14px;
    padding: 0 3px;
    background-color: #FFFFFF;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
}

.support-popup-form-input-file {
    position: relative;
	display: block;
}

.support-popup-form-input-file input {
    display: none;
}

.support-popup-form-input-file .support-popup-form-input-file-label {
	position: relative;
	display: inline-block;
    max-width: calc(100% - 20px);
    height: 24px;
    padding-left: 28px;
    background: 0 0 / 24px 24px no-repeat url(../img/file.png);
	cursor: pointer;
	outline: none;
    font-weight: 400;
    font-size: 12px;
    line-height: 24px;
    color: #88838D;
    overflow: hidden;
    text-overflow: ellipsis;
}

.support-popup-form-input-file.error .support-popup-form-input-file-label {
    color: #F16031;
}

.support-popup-form-input-file .support-popup-form-input-file-clear {
    display: none;
	position: relative;
    width: 12px;
    height: 12px;
    background: 0 0 / 12px 12px no-repeat url(../img/close-d.png);
	cursor: pointer;
	outline: none;
    float: right;
    margin-top: 6px;
}

.support-popup-form-input-file.added .support-popup-form-input-file-clear {
    display: inline-block;
}

.support-popup-form-button {
    width: 100%;
    margin-top: 24px;
    padding: 14px;
    background: #2C1E39;
    border: none;
    border-radius: 24px;

    font-weight: 600;
    font-size: 13px;
    line-height: 20px;
    color: #FBFAFC;
    cursor: pointer;
}

/* FAQ OPEN */

.support-popup.faq-open {
    scrollbar-color: rgba(163, 160, 167, 0.4) #FFF;
}

.support-popup.faq-open .support-popup-close {
    background: 0 0 / 100% 100% no-repeat url(../img/close-d.png);
}

.support-popup.faq-open .support-popup-faq {
    position: absolute;
    width: 100%;
    min-height: 100%;
    top: 0;
    left: 0;
    margin: 0;
    padding-top: 72px;
    border: none;
    border-radius: 0;
}

.support-popup.faq-open .support-popup-faq-back {
    display: block;
}

.support-popup.faq-open .support-popup-faq-s {
    display: block;
}

.support-popup-faq.item-open .support-popup-faq-item:not(.open) {
    display: none;
}

.support-popup-faq-item.open .support-popup-faq-answer {
    display: block;
}

.support-popup.faq-open .support-popup-form {
    display: none;
}

.support-popup-success-wrapper {
    display: none;
    position: fixed;
    right: 0;
    top: 0;
    width: 512px;
    height: 100%;
    background: rgba(44, 30, 57, 0.6);
}
.support-popup-success-wrapper.show {
    display: block;
}

.support-popup-success {
    margin: calc(50vh - 192px) 80px 0 80px;
    border-radius: 16px;
    padding: 120px 48px 48px 48px;
    background: center 48px / 48px 48px no-repeat url(../img/success.png);
    background-color: #FFFFFF;

    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    text-align: center;
    color: #88838D;
}

.support-popup-success-h {
    font-weight: 700;
    font-size: 28px;
    line-height: 40px;
    text-align: center;
    letter-spacing: 0.3px;
    color: #2C1E39;
    margin-bottom: 8px;
}

.support-popup-success-button {
    width: 147px;
    margin: 24px auto 0 auto;
    padding: 14px;
    background: #2C1E39;
    border: none;
    border-radius: 24px;

    font-weight: 600;
    font-size: 13px;
    line-height: 20px;
    color: #FBFAFC;
    cursor: pointer;
}

@media (max-height: 384px) {
    .support-popup-success {
        margin-top: 0;
    }
}

@media (max-width: 1023px) {
    .support-popup {
        width: 520px;
    }
    .support-popup-success-wrapper {
        width: 520px;
    }
}

@media (max-width: 767px) {
    .support-popup {
        width: 100%;
    }

    .support-popup-success-wrapper {
        width: 100%;
    }

    .support-popup-success {
        margin-left: 20px;
        margin-right: 20px;
    }

    .support-popup-form-group {
        flex-direction: column;
    }
}



.support-popup-form-input:hover:not(:has(>:disabled)):not(.error),
.support-popup-faq-search:hover {
    border: 1px solid #9C7FBE;
}

.support-popup-form-input:hover:not(:has(>:disabled)):not(.error) .support-popup-form-input-suffix {
    color: #9C7FBE;
}

.support-popup-form-input:focus,
.support-popup-form-input:focus-within,
.support-popup-faq-search:focus {
    box-shadow: 0px 2px 6px rgba(156, 127, 190, 0.26);
    border: 1px solid #9C7FBE;
}

.support-popup-form-input:has(>:disabled) {
    border: 1px solid #EFEDF2;
}

.support-popup-form-input:has(>:disabled) input {
    color: #A3A0A7;
}