.design-ctn {
    margin: 0 auto 180px auto;
    max-width: 1200px;
}

.progressbar-ctn {
    margin-bottom: 67px;
}

/*#region design instruct*/
.design-instruct {
    margin-bottom: 60px;
}

.design-instruct .instruct-header .toggle-btn,
.design-instruct .instruct-content {
    background-color: #F4F4F4;
    color: var(--text-main-color);
    -webkit-text-fill-color: var(--text-main-color);
}

.design-instruct .instruct-content ul {
    list-style-type: disc;
    list-style-position: inside;
    padding-left:0;
}

.design-instruct .instruct-content {
    padding: 28px 50px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.design-instruct .instruct-content .small {
    font-size: 14px;
}

.instruct-header {
    position: relative;
}

.instruct-header .toggle-btn {
    width: 100%;
    border: none;
    font-size: 18px;
    font-weight: 500;
    padding: 11.5px;
    border-radius: 10px 10px 0 0;
    outline: unset !important;
    cursor: pointer;
}

.instruct-header .toggle-btn.collapsed {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.instruct-header .icon {
    position: absolute;
    top: 12px;
    right: 20px;
    transition: transform 0.3s ease;

}

.instruct-header .icon i {
    font-size: 26px;
}

.instruct-header .toggle-btn.collapsed .icon {
    transform: rotate(180deg);
}

/*#endregion*/

/*#region design playground*/
.design-template-area {
    position: relative;
}

.design-playground {
    display: flex;
/*    flex-wrap: wrap;*/
    justify-content: space-between;
    margin-bottom: 28px;
}

.design-playground .design-template-area {
    min-width: 470px;
}

.design-playground .design-canvas-area {
    min-width: 700px;
    position: relative;
}

.design-playground .template-shop {
    padding: 30px;
    border: 1px solid #DEDEDE;
    border-radius: 20px;
}

.design-playground .template-shop .title {
    font-weight: 500;
    font-size: 25px;
    margin-bottom: 20px;
    line-height: 140%;
}

.design-playground .template-shop .filter {
    margin-bottom: 30px;
}

.design-playground .template-shop .filter-options {
    padding: 0 10px;
    margin-bottom: 20px;
}

.design-playground .template-shop .filter-options label {
    font-weight: 500;
    font-size: 16px;
    line-height: 160%;
    display: flex;
    align-items: center;    
}

.design-playground .template-shop .filter-options input[type=radio] {
    margin-right: 6px;
}

.design-playground .template-shop .design-templates {
    min-height: 370px;
    margin-bottom: 38px;
}

.design-playground .template-shop .template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
    gap: 20px 10px;
}

.design-playground .template-shop .template-grid .template-wrapper {
    max-width: 130px;
    height: 110px;
    border-radius: 10px;
    border: 2px solid #DEDEDE;
}
    .design-playground .template-shop .template-grid .template-wrapper:hover {
        cursor: pointer;
    }

    .design-playground .template-shop .template-grid .template-wrapper.is-selected {
        border-color: var(--text-second-color);
    }

.design-playground .template-shop .template-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.design-playground .canvas-ctrl-panel {
    text-align: right;
    padding-top: 20px;
}

.design-playground .canvas-ctrl-panel .template-code {
    display: inline;
    float: left;
}

.design-template-area .template-toggle {
    position: relative;
    display: none;
}

.design-template-area .template-toggle .toggle-btn.collapsed {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.design-template-area .template-toggle .toggle-btn {
    width: 100%;
    border: none;
    font-size: 18px;
    font-weight: 500;
    padding: 15px 12px;
    border-radius: 10px 10px 0 0;
    outline: unset !important;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid var(--text-second-color);
    color: var(--text-second-color);
}

.design-template-area .template-toggle .icon {
    position: absolute;
    top: 14px;
    right: 20px;
    transition: transform 0.3s ease;
    color: var(--text-second-color);
}

.design-template-area .template-toggle .icon i {
    font-size: 26px;
}

.design-template-area .template-toggle .toggle-btn.collapsed .icon {
    transform: rotate(180deg);
}

/*#endregion*/

/*#region design playground canvas*/
.image-editor-container {
    position: relative;
    max-width: 700px;
    aspect-ratio: 1/1;
    margin: 0;
}

.floating-zoom-level-container, #tip-container {
    display: none !important;
}


/*#endregion*/

/*#region paging*/
.design-playground .pagination {
    justify-content: center;
    gap: 10px;
}

.design-playground .pagination .page-link {
    width: 28px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Roboto";
    color: var(--text-main-color);
    border: none;
}

.design-playground .pagination li:not(:first-child, :last-child) .page-link {
    border-radius: 50%;
}

.design-playground .pagination .page-link.w-page-link--active {
    background-color: var(--text-second-color);
    color: #fff;
}

/*#endregion*/

@media only screen and (max-width: 1199px){
    .progressbar-ctn {
        margin-bottom: 40px;
    }

    .design-instruct .instruct-content {
        padding: 12px 20px;
    }

    .design-instruct .instruct-content ul {
        font-size: 14px;
    }

    .design-instruct .instruct-content .small {
        font-size: 12px;
    }

    .design-instruct {
        margin-bottom: 30px;
    }

    .design-ctn {
        padding: 0 20px;
        margin-bottom: 0;
    }

    .design-playground {
        justify-content: center;
        flex-direction: column;
        gap: 40px;
    }

    .design-playground .template-shop .filter-options label {
        font-size: 12px;
    }

    .design-playground .template-shop {
        border-top: 0;
        padding: 16px 20px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .design-playground .template-shop .template-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(93px, 1fr));
        gap: 8px 7px;
    }

    .design-playground .template-shop .template-grid .template-wrapper {
        max-width: 94px;
        height: 80px;
        border-radius: 10px;
        border: 2px solid #DEDEDE;
    }

    .design-playground .pagination .page-link {
        font-size: 16px;
        padding: 3px 9px;
    }

    .design-playground .design-canvas-area {
        margin: auto;
    }

    .design-playground .canvas-ctrl-panel {
        text-align: center;
        font-size: 14px;
    }
}

@media only screen and (max-width: 699px) {

    .design-playground > div:first-child,
    .design-playground > div:last-child {
        min-width: 335px;
    }

    .design-playground .template-shop .title {
        display: none;
    }

    .design-template-area .template-toggle {
        display: block;
    }

    .instruct-header .toggle-btn {
        padding: 9px;
    }

    .instruct-header .icon {
        top: 8px;
    }

    .design-playground .template-shop .filter-options {
        padding: 0;
        margin-bottom: 14px;
    }

    .design-playground .canvas-ctrl-panel .template-code {      
        float: unset;
        position: absolute;
        top: -30px;
        left: 0;
    }
}