.create-template-container{
    padding: 0 40px;
    position: relative;

    @media (max-width: 1400px){
        margin-bottom: 120px;
    }
    
    .create-template-content-container{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 32px;
        height: calc(100vh - 10px);
        
        @media (max-width: 890px) {
            flex-wrap: wrap;
            height: auto;
        }

        .product-selection-container{
            width: 612px;

            @media (max-width: 1400px){
                width: 50%;
            }
            
            @media (max-width: 1000px){
                width: 100%;
            }
            .products-container {
                display: flex;
                flex-wrap: wrap;
                gap: 12px;
                margin-bottom: 32px;

                @media (max-width: 700px) {
                    width: 100%;
                }
                
                .product-card {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    padding: 20px;
                    gap: 16px;
                    width: 100%;
                    max-width: 300px;
                    height: 84px;
                    border-radius: 8px;
                    border: 0.5px solid var(--border-color);
                    box-shadow: 2px 2px 4px 0px #0000000A;
                    transition: all 0.2s ease-in-out;

                    @media (max-width: 1400px) {
                        max-width: 100%;
                    }

                    @media (max-width: 890px) {
                        flex: 0 0 290px;
                    }
                    
                    @media (max-width: 700px) {
                        flex: 0 0 100%;
                    }
        
                    &:hover, &.active {
                        border-color: var(--primary-color);
                        background-color: var(--primary-color-hover);
                        cursor: pointer;
                    }
                    
                    img {
                        width: 44px;
                        height: 44px;
                        object-fit: contain;
                    }
                }
            }
            
            .size-selection-container {
                margin-top: 24px;
                
                // Typography styling for "Postcard Size" label
                > div:first-child {
                    margin-bottom: 16px;
                }
                
                .radio-buttons-container {
                    display: flex;
                    align-items: center;
                    gap: 32px;
                    flex-wrap: wrap;
                    
                    .radio-button-wrapper {
                        display: flex;
                        align-items: center;
                        gap: 8px;
                        cursor: pointer;
                        user-select: none;
                        transition: all 0.2s ease-in-out;
                        
                        // Hide the default radio input
                        .radio-input {
                            position: absolute;
                            opacity: 0;
                            cursor: pointer;
                            height: 0;
                            width: 0;
                        }
                        
                        // Custom radio button
                        .radio-button {
                            position: relative;
                            width: 16px;
                            height: 16px;
                            border: 1px solid #9CA3AF;
                            border-radius: 50%;
                            background-color: #ffffff;
                            transition: all 0.2s ease-in-out;
                            flex-shrink: 0;
                            
                            // Inner circle when selected
                            &::after {
                                content: '';
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                transform: translate(-50%, -50%) scale(0);
                                width: 6px;
                                height: 6px;
                                border-radius: 50%;
                                background-color: var(--notification-text-color);
                                transition: transform 0.2s ease-in-out;
                            }
                        }
                        
                        // Typography for the label
                        div {
                            margin: 0;
                            font-weight: 400;
                            color: var(--text-color, #1F2937);
                            transition: color 0.2s ease-in-out;
                        }
                        
                        // Hover state
                        // &:hover {
                        //     .radio-button {
                        //         border-color: var(--primary-color, #FF6B35);
                        //         box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
                        //     }
                        // }
                        
                        // Selected state
                        &.selected {
                            .radio-button {
                                border-color: var(--primary-color);
                                background-color: #ffffff;
                                border: 5px solid var(--primary-color);
                                
                                &::after {
                                    transform: translate(-50%, -50%) scale(1);
                                }
                            }
                            
                            div {
                                color: var(--primary-color);
                                font-weight: 500;
                            }
                        }
                        
                        // Focus state for accessibility
                        .radio-input:focus + .radio-button {
                            outline: none;
                        }
                        
                        // Active state
                        &:active .radio-button {
                            transform: scale(0.95);
                        }
                    }
                }
            }
        }


        .product-thumbnail-container{

            @media (max-width: 1400px){
                width: 50%;
            }
            
            @media (max-width: 1000px){
                width: 100%;
            }
            .product-thumbnail-card{
                border: 0.5px solid var(--border-color);
                padding: 28px;
                border-radius: 8px;

                // Slider Styles
                .thumbail-slider{

                    .thumbail-slider-image{
                        position: relative;
                        height: 586px;
                        width: 586px;

                        @media (max-width: 1400px) {
                            height: auto;
                            width: 100%;
                        }

                        @media (max-width: 1000px){
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }

                        .image-loader {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 100%;
                            height: 500px;

                            @media (max-width: 1400px) {
                                min-height: 400px;
                            }
                        }

                        img{
                            width: 100%;
                            max-width: 586px;
                            height: 100%;
                            max-height: 586px;
                            object-fit: contain;
                            border-radius: 8px;
                            transition: all 0.2s ease-in-out;
                            animation: fadeIn 0.2s ease-in-out;

                            &:focus{
                                outline: none;
                            }
                        }
                        .slider-arrow-left{
                            position: absolute;
                            cursor: pointer;
                            left: 15px;
                            top: 50%;
                            transform: translateY(-50%);
                            width: 40px;
                            height: 40px;
                            background-color: var(--notification-text-color);
                            border-radius: 50%;
                            box-shadow: 0px 4px 16px 0px #00000029;
                            
                            &.disabled {
                                opacity: 0.5;
                                cursor: not-allowed;
                                pointer-events: none;
                            }
                        }
                        .slider-arrow-right{
                            position: absolute;
                            cursor: pointer;
                            right: 15px;
                            top: 50%;
                            transform: translateY(-50%);
                            width: 40px;
                            height: 40px;
                            background-color: var(--notification-text-color);
                            border-radius: 50%;
                            box-shadow: 0px 4px 16px 0px #00000029;
                            
                            &.disabled {
                                opacity: 0.5;
                                cursor: not-allowed;
                                pointer-events: none;
                            }
                        }
                    }
                }
            }
            .product-thumbnail-details{
                display: flex;
                column-gap: 24px;
                margin-top: 17px;
                width: 643px;
                flex-wrap: wrap;
                row-gap: 10px;

                @media (max-width: 1400px){
                    width: 500px;
                    flex-wrap: wrap;
                }



                span{
                    font-weight: 400;
                }
            }
        }
    }
    
    .buttons-container{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
        margin-top: 24px;
        border-top: 0.5px solid var(--border-color);
        padding: 24px 40px;
        background-color: #ffffff;

        button{
            width: 100%;
            max-width: 157px;
            height: 50px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            background-color: var(--primary-color);
            color: var(--notification-text-color);
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: var(--font-family);
            
            &:disabled{
                opacity: 0.5;
                cursor: not-allowed;
            }
            
            &:focus{
                outline: none;
            }

            &:hover{
                background-color: #DD5026;
            }

            &:last-child{
                background-color: var(--secondary-color);
                color: #000;
                border: 0.5px solid var(--secondary-color);

                &:hover{
                    background-color: #fff;
                    border: 0.5px solid #00000029;
                }

            }
        }
    }
}


@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}