/* Checkbox */

.primary-checkbox,
.primary-radio {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 400;
    cursor: pointer;
    margin: 0;
}

.primary-checkbox input,
.primary-radio input {
    position: absolute;
    opacity: 0;
    visibility: hidden;
}

.primary-checkbox input:checked+.primary-checkbox__marker {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='3' width='18' height='18' rx='3' fill='white' stroke='%2330C2FF' stroke-width='2'/%3E%3Cpath d='M7.5 12L10.5 15L16.5 9' stroke='%2330C2FF' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
}

.primary-checkbox__marker {
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='3' width='18' height='18' rx='3' fill='white' stroke='%23757D8A' stroke-width='2'/%3E%3C/svg%3E%0A");
}

.primary-checkbox__text,
.primary-radio__text {
    font-size: 14px;
}

.primary-radio input:checked+.primary-radio__marker {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='7' fill='white' stroke='%2330C2FF' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='3' fill='%2330C2FF'/%3E%3C/svg%3E");
}

.primary-radio__marker {
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='7' fill='white' stroke='%23757D8A' stroke-width='2'/%3E%3C/svg%3E");
}

/* Radio */

/* Modal */

.primary-modal {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: none;
    flex-direction: column;
    align-items: center;
}

.primary-modal.open {
    display: flex;
}

.primary-modal::after,
.primary-modal::before {
    content: "";
    display: block;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto
}

.primary-modal-wrap {
    margin: 24px;
    max-height: calc(100vh);
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 980px;
    overflow: auto;
}

.primary-modal-close {
    position: absolute;
    width: 32px;
    height: 32px;
    top: 16px;
    right: 16px;
    border: none;
    background: transparent;
    z-index: 3;
    cursor: pointer;
}

.primary-modal-layer {
    background: rgba(0, 0, 0, 0.48);
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0
}

.primary-modal-content {
    border-radius: 8px;
    background: #fff;
}

@media (max-width: 767px) {
    .primary-modal-wrap {
        margin: 16px;
    }
}

/* Dropdown */

.primary-dropdown {
    position: relative;
}

.primary-dropdown__active {
    height: 40px;
    border-radius: 5px;
    border: 1px solid var(--icon-color-icon-secondary, #BFC1C7);
    background: #FFF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7.29297 9.79297C7.68389 9.40205 8.31601 9.40222 8.70703 9.79297L12.0127 13.0986L15.3057 9.91797C15.7047 9.53532 16.3358 9.54648 16.7197 9.94336C17.1034 10.3404 17.0922 10.9745 16.6953 11.3574L12.6953 15.2197C12.5003 15.4076 12.2499 15.5 12 15.5C11.7441 15.4999 11.4879 15.402 11.293 15.207L7.29297 11.207C6.90222 10.816 6.90205 10.1839 7.29297 9.79297Z' fill='%23008CDB'/%3E%3C/svg%3E");
    background-position: calc(100% - 8px) 8px;
    background-repeat: no-repeat;
    padding: 8px 40px 8px 12px;
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.primary-dropdown input.error~.primary-dropdown__active {
    border: 1px solid#e31e24;
}

.primary-dropdown__active.active+.primary-dropdown__list {
    display: block;
}

.primary-dropdown__list {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    top: calc(100% + 8px);
    border-radius: 3px;
    border: 1px solid #008CDB;
    background: #FFF;
    display: none;
    z-index: 2;
    overflow: auto;
}

.primary-dropdown__list-item {
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
}

.primary-dropdown__list-section {
    font-size: 14px;
    padding: 6px 12px;
    color: #2C2D2E;
    font-family: "HelveticaNeueCyr-Medium", Helvetica, Arial, sans-serif;
}

.primary-dropdown__list-item.active {
    color: #008CDB;
}

.primary-dropdown__list-item:hover {
    background: #DAF4FF;
}

/* Rating */

.primary-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 8px;
}

.primary-rating input[type="radio"] {
    display: none;
}

.primary-rating label {
    display: block;
    width: 24px;
    height: 24px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M11.1315 0.613636C11.4049 -0.204547 12.5951 -0.204544 12.8685 0.613639L15.0753 7.21879C15.1975 7.58469 15.5481 7.83243 15.9437 7.83243H23.0851C23.9697 7.83243 24.3375 8.93329 23.6218 9.43895L17.8444 13.5212C17.5243 13.7473 17.3904 14.1481 17.5126 14.514L19.7194 21.1192C19.9928 21.9374 19.0299 22.6177 18.3142 22.1121L12.5367 18.0299C12.2167 17.8037 11.7833 17.8037 11.4633 18.0299L5.68578 22.1121C4.97012 22.6177 4.00721 21.9374 4.28057 21.1192L6.48737 14.514C6.60962 14.1481 6.4757 13.7473 6.15564 13.5212L0.378169 9.43895C-0.337489 8.93328 0.0303129 7.83243 0.914915 7.83243H8.05626C8.45187 7.83243 8.80248 7.58469 8.92473 7.21879L11.1315 0.613636Z' fill='%23BFC1C7'/%3E%3C/svg%3E");
}

.primary-rating input[type="radio"]:checked~label {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M11.1315 0.613636C11.4049 -0.204547 12.5951 -0.204544 12.8685 0.613639L15.0753 7.21879C15.1975 7.58469 15.5481 7.83243 15.9437 7.83243H23.0851C23.9697 7.83243 24.3375 8.93329 23.6218 9.43895L17.8444 13.5212C17.5243 13.7473 17.3904 14.1481 17.5126 14.514L19.7194 21.1192C19.9928 21.9374 19.0299 22.6177 18.3142 22.1121L12.5367 18.0299C12.2167 17.8037 11.7833 17.8037 11.4633 18.0299L5.68578 22.1121C4.97012 22.6177 4.00721 21.9374 4.28057 21.1192L6.48737 14.514C6.60962 14.1481 6.4757 13.7473 6.15564 13.5212L0.378169 9.43895C-0.337489 8.93328 0.0303129 7.83243 0.914915 7.83243H8.05626C8.45187 7.83243 8.80248 7.58469 8.92473 7.21879L11.1315 0.613636Z' fill='%23FFD600'/%3E%3C/svg%3E");
}

.primary-rating:not(:hover) input[type="radio"]:checked~label,
.primary-rating:hover input[type="radio"]:hover~label {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M11.1315 0.613636C11.4049 -0.204547 12.5951 -0.204544 12.8685 0.613639L15.0753 7.21879C15.1975 7.58469 15.5481 7.83243 15.9437 7.83243H23.0851C23.9697 7.83243 24.3375 8.93329 23.6218 9.43895L17.8444 13.5212C17.5243 13.7473 17.3904 14.1481 17.5126 14.514L19.7194 21.1192C19.9928 21.9374 19.0299 22.6177 18.3142 22.1121L12.5367 18.0299C12.2167 17.8037 11.7833 17.8037 11.4633 18.0299L5.68578 22.1121C4.97012 22.6177 4.00721 21.9374 4.28057 21.1192L6.48737 14.514C6.60962 14.1481 6.4757 13.7473 6.15564 13.5212L0.378169 9.43895C-0.337489 8.93328 0.0303129 7.83243 0.914915 7.83243H8.05626C8.45187 7.83243 8.80248 7.58469 8.92473 7.21879L11.1315 0.613636Z' fill='%23FFD600'/%3E%3C/svg%3E");
}