@import "import.helpers.less";
@import "import.html-style.less";

body {
    background: #ececec;
}

.stec-block-action {
    position: absolute;
    width: 100%;
    height: 100%;
    left:0;
    top:0;
    background: rgba(255,255,255,0.7);
    z-index: 10;

    .stec-preloader {
        position: absolute;
        height: inherit;
    }
}

.stec-order-details {
    width: 100%;
    max-width: 1280px;
    margin:50px auto;
    overflow: hidden;
    box-sizing: border-box;
    font-family: Arial;
    border-radius: 3px; 

    .stec-order-details-wrap {
        background: #fff;
        padding: 20px;
        overflow: hidden;
    }

    a {
        text-decoration: underline;
        color:#007bb5;
    }

    p {
        margin:0;
        padding:0;
        line-height: 1.6;
        box-sizing: border-box;
    }

    ul, li {
        list-style: none;
        padding:0;
        margin:0;
    }

    .stec-order-details-flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        float: left;
    }

    .stec-order-details-separator {
        width: 100%;
        float: left;
        clear:both;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        margin: 15px 0;
    }

    .stec-order-details-header {
        font-size: 20px;
        font-weight: bold;
        color:#333;
        line-height: 1.2;
    }

    .stec-order-details-status {
        background: #ff9933;
        font-size: 12px;
        text-transform: uppercase;
        color:#fff;
        padding: 8px 15px;
        border-radius: 3px;

        &.completed {
            background: #84bd00;
        }

        &.failed,
        &.refunded,
        &.cancelled {
            background: #f15e6e;
        }
    }

    .stec-order-details-billing {
        width: 100%;
        float: left;

        .stec-order-details-billing-name {
            font-size: 16px;
            color:#333;
            line-height: 1.2;
            font-weight: bold;
        }

        .stec-order-details-billing-email {
            font-size: 16px;
            line-height: 1.2;
        }

        .stec-order-details-billing-date {
            color:#212121;
            font-size: 14px;
        }
    }

    .stec-order-details-items {
        width: 100%;
        float: left;

        .stec-order-details-item {

            position: relative;
            overflow: hidden;

            .stec-order-details-item-mark {
                float: right;
                margin: 10px 0;
                text-transform: uppercase;
                font-size: 10px;

                &:not(.active) {
                    display: none;
                }

                border-color:#007bb5;
                color:#007bb5;
                
                &:focus {
                    outline: none;
                }

                &[data-mark-scanned='0'] {
                    border-color:#f15e6e;
                    color:#f15e6e;
                }
            }


            .stec-order-details-item-title {
                font-weight: bold;
                font-size: 16px;
                color:#333;

                > span {
                    float: right;
                }
            }

            .stec-order-details-item-event-title {
                font-size: 14px;
                color:#007bb5;
                line-height: 1.2;
                margin-top: 5px;
            }
            .stec-order-details-item-event-date {
                font-size: 14px;
                color:#212121;
                line-height: 1.6;
            }

            &:not(:last-child) {
                border-bottom: 1px solid rgba(0,0,0,0.1);
                margin-bottom: 5px;
                padding-bottom: 10px;
            }

        }

        margin-bottom: 15px;
    }

    .stec-order-details-order-total {
        background: #000; 
        float: left; 
        width: 100%;
        color:#fff;
        padding: 15px;
        font-size: 16px;

        font-weight: bold; 
        > span { 
            float: right;
            font-weight: bold; 
        } 
    } 

    .stec-order-details-admin-url {
        font-size: 16px;
        float: left;
        margin-top: 10px;
    }


    .stec-style-full-width {
        position: relative;
        width: 100%;
        float: left;
        margin-top: 10px;

        .stec-preloader {
            width: auto;
            float: right;
        }

        .stec-order-details-mark-all {
            width: auto;
            text-transform: uppercase;
            font-size: 12px;
            float: right;

            &:not(.active) {
                display: none;
            }
        }
    }
} 

.stec-preloader {
    box-sizing: border-box;
    .flexbox(center,
    center);
    width: 100%;
    float: left;
    &::before {
        content: "";
        float: left;
        box-sizing: border-box;
        height: 30px;
        width: 30px;
        -webkit-animation: stec-preloader-anim 0.8s infinite linear;
        animation: stec-preloader-anim 0.8s infinite linear;
        border: 4px solid #52617a;
        border-right-color: transparent;
        border-radius: 50%;
        margin-left: 5px;
        margin-top: 5px;
    }
}

@-webkit-keyframes stec-preloader-anim {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes stec-preloader-anim {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

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

    .stec-order-details {
        float: left;
        min-width: 300px;
        .stec-order-details-header {
            font-size: 20px;
        }

        .stec-order-details-status {
            font-size: 12px;
        }

        .stec-order-details-items {

            margin-bottom: 0;

            .stec-order-details-item {

                position: relative;
                padding-bottom: 40px !important;

                &:not(:last-child) {
                    margin-bottom: 10px !important;
                };

                .stec-order-details-item-title {
                    font-size: 16px;

                    > span {
                        position: absolute;
                        bottom: 5px;
                        left: 0;
                        font-size: 18px;
                    }
                }
                .stec-order-details-item-event-title {
                    font-size: 14px;
                }
                .stec-order-details-item-event-date {
                    font-size: 12px;
                }
            }
        }

    }
}