/* ORDER DETAILS  */

#orderWrapper {
    color: #000;
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    padding-bottom: 40px;

    #orderHeader,
    #orderFooter {
        background: #f5f5f5;
        border-radius: 10px;
        display: flex;
        text-align: center;
        
        &>div {
            flex: 1;
            padding: 15px 0;
            
            &+div {
                border-left: 2px solid #e7e7e7;
            }
            
            strong {
                color: #08438F;
                font-weight: 700;
                margin: 0 4px;
            }
        }
    }
    
    #orderItems {
        &>div {
            align-items: center;
            border-bottom: 2px solid #d7dfe9;
            display: flex;
            padding: 15px 20px;
            
            &>div:nth-child(1) {
                flex: 0 0 150px;
                text-align: center;
            }
            
            &>div:nth-child(2) {
                flex: 1;
            }

            &>div:nth-child(3),
            &>div:nth-child(4),
            &>div:nth-child(5) {
                border-left: 2px solid #d7dfe9;
                flex: 0 0 150px;
                font-feature-settings: 'tnum';
                padding: 0 15px;
                text-align: center;
            }
            
            &>div:nth-child(5) {
                font-weight: 700;
            }
        }
    }
    
    #orderTotals {
        margin-top: 40px;
        padding: 0 40px;
        
        &>div {
            display: flex;
            gap: 20px;
            margin: 5px 0;
            
            &.hl {
                color: #08438F;
                font-weight: 700;
            }
            
            &>div {
                text-align: right;
                
                &:first-child {
                    flex: 1;
                }
                
                &:last-child {
                    flex: 0 0 130px;
                    font-feature-settings: 'tnum';
                }
            }
        }
    }
    
    #orderFooter {
        margin-top: 30px;
    }
}


/* MOBILE */

@media screen and (max-width:800px) 
{   
    #orderWrapper {
        #orderHeader,
        #orderFooter {
            flex-direction: column;
            padding: 15px 0;
            row-gap: 10px;
            
            &>div {
                padding: 0;
            }
        }
        
        #orderItems {
            &>div {
                flex-wrap: wrap;
                padding-left: 0;
                padding-right: 0;
                row-gap: 10px;
                
                &>div {
                    &:nth-child(1) {
                        flex: 0 0 100%;
                        text-align: center;
                    }
                    
                    &:nth-child(2) {
                        flex: 0 0 100%;
                        text-align: center;
                    }
                    
                    &:nth-child(3) {
                        border-left-width: 0;
                    }
                    
                    &:nth-child(3),
                    &:nth-child(4),
                    &:nth-child(5) {
                        flex: 1;    
                    }
                }
            }
        }
        
        #orderTotals {
            padding: 0;
        
            &>div>div {
                &:first-child,
                &:last-child {
                    flex: 1;
                    text-align: center;
                }
            }
        }
    }
}