@font-face {
    font-family: 'mandatoryregular';
    src: url('mandator-webfont.woff2') format('woff2'),
         url('mandator-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

#verto_main-loop {
    padding: 10px;
    
    /* Two Column Layout: Products Left, Input Right */
    #verto__main-layout-row {
        display: flex;
        margin: 2rem 0;    

        /* Right Column: Input Form */
        #verto__input-column, #verto_main-loop-section {
            background: #4A4A4A;
        }

        /* Input Column */
        #verto__input-column {
            flex: 0 0 400px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 2rem;
            
            #main__loop-message {
                margin-bottom: 1.5rem;
                text-align: center;
            }
            h4#main__loop-message {
                text-align: center;
                margin: 0 0 1em 0;
                font-size: 1.5em;
                color: #DCA54A;
                font-weight: bold;
            }
            #verto_main-loop-submit-gp {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 1rem;
                width: 100%;
                
                #verto_main-loop-input {
                    height: 70px;
                    width: 100%;
                    max-width: 300px;
                    border: 0;
                    background: #fff;
                    font-size: xx-large;
                    font-family: 'mandatoryregular';
                    text-align: center;
                    border-radius: 8px;
                    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
                    
                    &:focus {
                        outline: 0;
                        -webkit-box-shadow: none;
                        box-shadow: none;
                    }
                }
            }
        }

        /* Left Column: Products with Scrollbar */
        #verto__products-column {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 330px;
            max-height: 330px;
            overflow-y: auto;
            overflow-x: hidden;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
            cursor: grab;
            
            &:active {
                cursor: grabbing;
            }
            
            /* Custom Scrollbar for Products Column */
            &::-webkit-scrollbar {
                width: 14px;
            }
            
            &::-webkit-scrollbar-track {
                background: #f1f1f1;
                border-radius: 10px;
            }
            
            &::-webkit-scrollbar-thumb {
                background: #DCA54A;
                border-radius: 10px;
                
                &:hover {
                    background: #DCA54A;
                }
            }
            
            /* Grid Item Styling */
            #verto_main-loop-section {
                display: grid !important;
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 1rem;
                width: 100% !important;
                max-width: 100% !important;
                padding: 10px;
                
                label {
                    margin: 0;
                    cursor: pointer;
                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                    background-color: #fff;
                    
                    /* Hover State */
                    &:hover {
                        .product-grid__image-wrapper img {
                            transform: scale(1.08);
                        }
                        
                        .product-grid__overlay {
                            opacity: 0.3;
                        }
                        
                        .product-grid__title {
                            color: #DCA54A;
                        }
                    }
    
                    > input[type=radio] {
                        display: none;
                        /* Checked State */
                        &:checked {
                            + .product-grid__image-wrapper {
                                .product-grid__overlay {
                                    opacity: 1;
                                }
                                
                                .product-grid__checkmark {
                                    transform: scale(1) rotate(0deg);
                                }
                                
                                img {
                                    transform: scale(1.05);
                                }
                            }
                            
                            ~ .product-grid__title {
                                color: #DCA54A;
                                font-weight: 700;
                            }
                        }
                    }
    
                    /* Image Wrapper */
                    .product-grid__image-wrapper {
                        position: relative;
                        width: 100%;
                        padding-bottom: 75%;
                        overflow: hidden;
                        background: #f5f5f5;
                        
                        img {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                        }
                        /* Overlay */
                        .product-grid__overlay {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 100%);
                            opacity: 0;
                            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            /* Checkmark */
                            .product-grid__checkmark {
                                width: 50px;
                                height: 50px;
                                background: #ffc904;
                                border-radius: 50%;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                color: #000;
                                transform: scale(0) rotate(-180deg);
                                transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
                                box-shadow: 0 4px 20px rgba(255, 201, 4, 0.4);
                                
                                svg {
                                    width: 28px;
                                    height: 28px;
                                }
                            }
                        }
                    }
                    /* Title */
                    .product-grid__title {
                        padding: 1rem 0.5rem;
                        text-align: center;
                        font-size: 1rem;
                        font-weight: 600;
                        color: #333;
                        text-transform: capitalize;
                        transition: all 0.3s ease;
                    }
                }
            }
        }        

    }
    /* UK Number Plate Preview - Centered Below Two-Column Layout */
    #verto__plate-preview-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1em;
        width: 100%;

        #verto__plate-preview {
            background: #ffd800;
            border: 3px solid #000;
            border-radius: 6px;
            padding: 0.75em 0.5em;
            box-shadow: 
                0 2px 4px rgba(0, 0, 0, 0.2),
                inset 0 -2px 4px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            gap: 0.75em;
            min-width: 520px;
            max-width: 520px;
            position: relative;
            
            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                border-radius: 4px;
                background: linear-gradient(
                    180deg,
                    rgba(255, 255, 255, 0.3) 0%,
                    rgba(255, 255, 255, 0) 50%,
                    rgba(0, 0, 0, 0.05) 100%
                );
                pointer-events: none;
            }
            
            /* UK Number Plates - Yellow with EU strip (default) */
            &.plate-type-uk-standard-plates {
                background: #ffd800;
                border-color: #000;
                
                .plate-preview__text {
                    color: #000;
                }
            }
            
            /* Classic Number Plates - Black background, white text, 2 lines (3+3 chars), no EU strip */
            &.plate-type-classic-number-plates {
                background: #000;
                border-color: #fff;
                flex-direction: column;
                padding: 0.5em;
                min-width: 280px;
                max-width: 280px;
                
                .plate-preview__text {
                    color: #fff;
                    font-size: 3rem;
                    line-height: 1.2;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    width: 100%;
                }
            }
            
            /* Japanese Number Plates - Yellow background, black text, 2 lines (4+3 chars), no EU strip */
            &.plate-type-japanese-number-plates {
                background: #ffd800;
                border-color: #000;
                flex-direction: column;
                padding: 0.5em;
                min-width: 280px;
                max-width: 280px;
                
                .plate-preview__text {
                    color: #000;
                    font-size: 3rem;
                    line-height: 1.2;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    width: 100%;
                }
            }
            
            /* Motorbikes Plates - Yellow background, black text, 2 lines (3+3 chars), no EU strip */
            &.plate-type-motorbikes-plates {
                background: #ffd800;
                border-color: #000;
                flex-direction: column;
                padding: 0.5em;
                min-width: 280px;
                max-width: 280px;
                
                .plate-preview__text {
                    color: #000;
                    font-size: 3rem;
                    line-height: 1.2;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    width: 100%;
                }
            }
            
            /* Short Plates - Smaller width, yellow background, black text, NO EU strip */
            &.plate-type-short-plates {
                background: #ffd800;
                border-color: #000;
                max-width: 400px;
                min-width: 400px;
                
                .plate-preview__text {
                    color: #000;
                    font-size: 4rem;
                }
            }
            
            /* Hex Style Number Plates - Yellow background, black text, hexagonal shape, no EU strip */
            &.plate-type-hex-style-number-plates {
                background: #000;
                border-radius: 0;
                clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
                border: none;
                padding: 10px;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
                
                &::before {
                    content: '';
                    position: absolute;
                    top: 3px;
                    left: 3px;
                    right: 3px;
                    bottom: 3px;
                    background: #ffd800;
                    clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
                    z-index: 0;
                }
                
                &::after {
                    display: none;
                }
                
                /* .plate-preview__text {
                    color: #000;
                    position: relative;
                    z-index: 1;
                } */
            }
        }

        .plate-preview__text {
            flex: 1;
            text-align: center;
            font-size: 5rem;
            font-weight: bold;
            color: #000;
            font-family: 'mandatoryregular', 'Arial Black', sans-serif;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            line-height: 1;
            position: relative;
            z-index: 1;
        }
    }
}

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

    #verto_main-loop { 
        #verto__main-layout-row {
            /* flex-direction: column;
            margin-bottom: 0; */

            #verto__input-column {            
                width: 100%;
                padding: 1.5rem;
                flex: 0 0 300px;

                #verto_main-loop-submit-gp #verto_main-loop-input {
                    max-width: 100%;
                }
            }
            
            #verto__products-column {
                min-height: auto;
                max-height: 350px;
                border-right: none;
                width: 100%;
    
                #verto_main-loop-section {
                    grid-template-columns: repeat(3, 1fr);
                }        
            }        
        }  
        
        /* Tablet adjustments for different plate types */
        #verto__plate-preview {
            &.plate-type-japanese-number-plates {
                min-width: 240px;
                max-width: 240px;
                
                .plate-preview__text {
                    font-size: 2.5rem;
                }
            }
            
            &.plate-type-motorbikes-plates {
                min-width: 240px;
                max-width: 240px;
                
                .plate-preview__text {
                    font-size: 2.5rem;
                }
            }
            
            &.plate-type-classic-number-plates {
                min-width: 240px;
                max-width: 240px;
                
                .plate-preview__text {
                    font-size: 2.5rem;
                }
            }
            
            &.plate-type-short-plates {
                min-width: 350px;
                max-width: 350px;
                
                .plate-preview__text {
                    font-size: 3.5rem;
                }
            }
        }
    }
}

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

    #verto_main-loop {      

        padding: 0;

        /* Stack layout vertically */
        #verto__main-layout-row {
            flex-direction: column;
            margin-bottom: 0;
            
            /* Input column */
            #verto__input-column {
                padding: 1.5rem 1rem;
                width: 100%;
                box-sizing: border-box;
                max-height: fit-content;
                h4#main__loop-message,
                p#verto_main-loop-above {
                    font-size: large;
                }
                #verto_main-loop-submit-gp {
                    width: 100%;
                    -webkit-box-orient: vertical;
                    -webkit-box-direction: normal;
                    -webkit-flex-direction: column;
                    -ms-flex-direction: column;
                    flex-direction: column;
                    
                    #verto_main-loop-input {
                        width: 90% !important;
                        height: 60px;
                        max-width: 100%;
                        font-size: 1.5rem;
                    }
                    
                    #verto__main-loop-submit {
                        margin-top: 0.5em;
                        font-size: 1rem;
                    }
                }
            }

            /* Products column with horizontal scroll */
            #verto__products-column {
                min-height: 0;
                max-height: none;
                overflow-y: visible;
                overflow-x: visible;
                border-right: none;
                width: 100%;

                #verto_main-loop-section {
                    display: flex !important;
                    flex-direction: row !important;
                    flex-wrap: nowrap !important;
                    grid-template-columns: none !important;
                    overflow-x: auto;
                    overflow-y: hidden;
                    scroll-snap-type: x mandatory;
                    -webkit-overflow-scrolling: touch;
                    scroll-behavior: smooth;
                    gap: 0.75rem;
                    padding: 0.7rem;
                    width: 100% !important;
                    
                    /* Hide scrollbar but keep functionality */
                    &::-webkit-scrollbar {
                        height: 14px;
                    }
                    
                    &::-webkit-scrollbar-track {
                        background: #f1f1f1;
                        border-radius: 10px;
                    }
                    
                    &::-webkit-scrollbar-thumb {
                        background: #DCA54A;
                        border-radius: 10px;
                    }
                    
                    label.product-grid {
                        display: flex !important;
                        flex-direction: column !important;
                        min-width: calc(33.333% - 0.5rem) !important;
                        max-width: calc(33.333% - 0.5rem) !important;
                        flex: 0 0 calc(33.333% - 0.5rem) !important;
                        scroll-snap-align: center;
                        .product-grid__image-wrapper {
                            padding-bottom: 100%;
                            .product-grid__checkmark {
                                width: 35px;
                                height: 35px;
                                
                                svg {
                                    width: 18px;
                                    height: 18px;
                                }
                            }
                        }
                        .product-grid__title {
                            font-size: 0.75rem;
                            padding: 0.5rem 0.25rem;
                        }                    
                    }
                }
            }
            
        }
            
        /* Plate preview */        
        #verto__plate-preview-wrapper {
            margin: 1rem 0;
            padding: 0.5em;
            #verto__plate-preview {
                min-width: 50%;
                max-width: 95%;

                .plate-preview__text {
                    font-size: 2rem;
                    letter-spacing: 0.1em;
                }
                
                &.plate-type-motorbikes-plates,
                &.plate-type-japanese-number-plates,
                &.plate-type-classic-number-plates {
                    min-width: 30%;
                    max-width: 60%;
                    
                    .plate-preview__text {
                        font-size: 1.5rem;
                    }
                }
                                
                &.plate-type-short-plates {
                    min-width: 85%;
                    max-width: 85%;
                    
                    .plate-preview__text {
                        font-size: 1.85rem;
                    }
                }
                
                &.plate-type-hex-style-number-plates {
                    padding: 0.75em 1.5em;
                    
                    .plate-preview__text {
                        font-size: 1.75rem;
                    }
                }
            }
        }    
    }    
}