.cso-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1290px;
    width: min(100%, calc(90vw - 0px * 2));
}

.cso-order-form {
    padding: 50px 0px 150px 0px;
}

.cso-order-form-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: #ffffff;
    padding: 20px;
    border-top: 1px solid #ebebeb;
}

.cso-button-primary {
    background: #fdc146;
    display: flex;
    padding: 5px 15px;
    align-items: center;
    gap: 10px;
    border-radius: 5px;
    border: 1px solid #fdc146;
    cursor: pointer;
}

.cso-button-secondary {
    background: #ffffff;
    display: flex;
    padding: 5px 15px;
    align-items: center;
    gap: 10px;
    border-radius: 5px;
    border: 1px solid #fdc146;
    cursor: pointer;
}

.cso-button-primary:disabled, .cso-button-secondary:disabled {
    cursor: not-allowed;
}

.cso-button-step-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cso-order-step-indicator-item > i > svg {
    width: 25px;
    height: auto;
    color: #6a6a6a8c;
}

.cso-order-step-indicator-item > i {
    display: flex;
    align-items: center;
    width: 40px;
    height: 40px;
    justify-content: center;
    border-radius: 60px;
}

.cso-order-step-indicator-item.active > i {
    background: #fdc146;
}

.cso-order-step-indicator-item.active > i > svg {
    color: #000000;
    width: 20px;
}

.cso-order-step-indicator-wrapp {
    display: flex;
    gap: 50px;
    border: 1px solid #ebebeb;
    padding: 10px;
    border-radius: 10px;
}

.cso-order-step-indicator-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.step-indicator-label-wrapp {
    display: none;
    flex-direction: column;
    gap: 5px;
}

.step-indicator-label-wrapp > span {
    line-height: 1em;
}

.cso-order-step-indicator-number {
    font-size: 12px;
    color: #7c7c7c;
}

.cso-order-step-indicator-label {
    color: #000;
    font-weight: 600;
    font-size: 14px;
}

.cso-order-step-indicator-item.active > .step-indicator-label-wrapp {
    display: flex;
}

.cso-order-form-header {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cso-order-form-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/*//////////////////////////////////////////////////////////////////////////////////////////////*/
/* CSS for tab step 1 */
/*//////////////////////////////////////////////////////////////////////////////////////////////*/
.cso-order-title {
    text-align: center;
}

.cso-order-form-step{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#tabContainer {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tab-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ebebeb;
}

.tab-item, .tab-item-catalog {
    padding: 5px 20px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
    border: 1px solid #000;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tab-item > svg {
    width: 20px;
    height: auto;
}

.tab-item:hover:not(.active), .tab-item-catalog:hover:not(.active) {
    background-color: #000;
    color: #fff;
}

.tab-item.active, .tab-item-catalog.active {
    background-color: #000;
    color: #fff;
}

.tab-content, .tab-content-catalog {
    display: none;
}

.tab-content.active, .tab-content-catalog.active {
    display: block;
}

.tab-nav-catalog {
    justify-content: start;
    border: none;
}

.cso-design-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
}

.cso-design-item > input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.cso-design-item {
    margin: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid #ebebeb;
    border-radius: 10px;
    overflow: hidden;
}

.cso-design-image > img {
    aspect-ratio: 4 / 3;
    object-fit: contain;
}

.cso-design-image {
    padding: 20px;
    border-bottom: 1px solid #ebebeb;
    position: relative;
}

.cso-design-title {
    padding: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cso-design-title > span {
    color: #000;
    font-weight: 600;
    line-height: 1em;
}

.cso-category-label {
    font-size: 12px;
    color: #9f9f9f;
    line-height: 1em;
}

.cso-design-category {
    display: flex;
    gap: 5px;
}

.cso-design-item:hover, .cso-design-item.active {
    border: 1px solid #fdc146;
}

.cso-design-item:hover .cso-design-image, .cso-design-item.active .cso-design-image {
    border-bottom: 1px solid #fdc146;
}

.cso-design-item:hover .cso-design-title, .cso-design-item.active .cso-design-title {
    background: #fdc146;
}

.cso-design-item:hover .cso-category-label, .cso-design-item.active .cso-category-label {
    color: #000;
}

.cso-design-item.active .cso-design-image::before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #fdc1462e;
    backdrop-filter: blur(1px);
}

.cso-design-item.active .cso-design-image::after {
    content: '';
    width: 50px;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m12.594%2023.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02%200%200%200-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z%22/%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M19.495%203.133a1%201%200%200%201%201.352.309l.99%201.51a1%201%200%200%201-.155%201.279l-.003.004l-.014.013l-.057.053l-.225.215a84%2084%200%200%200-3.62%203.736c-2.197%202.416-4.806%205.578-6.562%208.646c-.49.856-1.687%201.04-2.397.301l-6.485-6.738a1%201%200%200%201%20.051-1.436l1.96-1.768A1%201%200%200%201%205.6%209.2l3.309%202.481c5.169-5.097%208.1-7.053%2010.586-8.548m.21%202.216c-2.29%201.432-5.148%203.509-9.998%208.358A1%201%200%200%201%208.4%2013.8l-3.342-2.506l-.581.524l5.317%205.526c1.846-3.07%204.387-6.126%206.49-8.438a86%2086%200%200%201%203.425-3.552l-.003-.005Z%22/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: 2;
}

.cso-upload-design-wrapp {
    border: 2px dashed #ebebeb;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    padding: 40px;
    gap: 20px;
    align-items: center;
}

.cso-upload-design-wrapp > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cso-upload-design-wrapp > div > svg {
    color: #d1d1d1;
    width: 60px;
    height: auto;
}

/*//////////////////////////////////////////////////////////////////////////////////////////////*/
/* CSS for tab step 2*/
/*//////////////////////////////////////////////////////////////////////////////////////////////*/
.cso-dom-fields-wrapper {
    display: flex;
    align-items: start;
    width: 100%;
    gap: 10px;
}

.cso-dom-field-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cso-dom-field-button {
    width: 100%;
    display: flex;
    justify-content: center;
    color: #000;
    font-weight: 600;
}

.cso-data-order-manual {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.delete-data-order {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    background: no-repeat;
}

.delete-data-order > svg {
    color: red;
}

.cso-dom-td-center {
    text-align: center;
}

.cso-dom-td-button {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cso-dom-table-data > thead {
    background: #fdc146;
    color: #000;
}

input.cso-nameset-input {
    width: 180px;
}

.cso-table-data-info {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;

}

.cso-table-data-info > div {
    display: flex;
    flex-direction: column;
}