/*
Theme Name: eventaly

WooCommerce styles override
*/

/**
 * Shop tables
 */

.order-table {
    overflow-y: auto;
    max-width: 100%;
}

table.shop_table_responsive {
    thead {
        display: none;
    }

    tbody th {
        display: none;
    }

    tr {

        td {
            display: flex;
            flex-flow: row wrap;
            justify-content: flex-end;
            width: 100%;
            text-align: right;

            .actions {
                display: flex;
                flex-flow: row;
                justify-content: flex-end;
                gap: 0.2rem;
            }

            &::before {
                margin-right: auto;
                content: attr(data-title) ": ";
            }

            &.product-remove {

                a {
                    text-align: left;
                }

                &::before {
                    display: none;
                }
            }

            &.actions::before,
            &.download-actions::before {
                display: none;
            }

            &.download-actions .button {
                display: block;
                text-align: center;
            }
        }
    }

    @media screen and (min-width: 48em) {

        thead {
            display: table-header-group;
        }

        tbody th {
            display: table-cell;
        }

        tr {
            th,
            td {
                width: auto;
                text-align: left;
            }

            td {
                display: table-cell;

                &::before {
                    display: none;
                }

                .actions {
                    justify-content: flex-start;
                }
            }
        }
    }
}

/**
 * Products
ul.products {
    margin: 0;
    padding: 0;

    li.product {
        position: relative;
        margin-bottom: 2em;
        list-style: none;

        img {
            display: block;
        }

        .button {
            display: block;
        }
    }

    @media screen and (min-width: 48em) {

        li.product {
            float: left;
            width: 30.79667%;
            margin-right: 3.8%;

            &.first {
                clear: both;
            }

            &.last {
                margin-right: 0;
            }
        }

    }
}
 */

/**
 * Single product
 */
.single-product {
    div.product {
        position: relative;

        .woocommerce-product-gallery {
            position: relative;
            float: left;

            .woocommerce-product-gallery__trigger {
                position: absolute;
                z-index: 99;
                top: 2em;
                right: 1em;
                display: block;
            }

            .flex-viewport {
                margin-bottom: 1em;
            }

            .flex-control-thumbs {
                margin: 0;
                padding: 0;

                li {
                    float: left;
                    list-style: none;
                    cursor: pointer;

                    img {
                        opacity: 0.5;
                    }

                    img.flex-active {
                        opacity: 1;
                    }

                    &:hover img {
                        opacity: 1;
                    }
                }
            }

        }
    }
}

.stock {
    &:empty::before {
        display: none;
    }

    .stock.in-stock {
        color: #0f834d;
    }

    .stock.out-of-stock {
        color: #e2401c;
    }
}

/**
 * Checkout
 */
@media screen and (min-width: 768px) {

    .col2-set .form-row-first {
        float: left;
        margin-right: 3.8%;
    }

    .col2-set .form-row-last {
        float: right;
        margin-right: 0;
    }

    .col2-set .form-row-first,
    .col2-set .form-row-last {
        width: 48.1%;
    }
}

/**
 * General WooCommerce components
 */

/**
 * Header cart
 */
.site-header-cart {
    position: relative;
    margin: 0;
    padding: 0;

    .cart-contents {
        text-decoration: none;
    }

    .widget_shopping_cart {
        display: none;
    }

    .product_list_widget {
        margin: 0;
        padding: 0;
    }
}


/**
 * Tabs
 */
.woocommerce-tabs {
    ul.tabs {
        margin: 0;
        padding: 0;
        list-style: none;
        text-align: left;

        li {
            position: relative;
            display: block;
            margin: 0;

            a {
                display: block;
                padding: 1em 0;
            }
        }
    }

    .panel h2:first-of-type {
        margin-bottom: 1em;
    }
}

/**
 * Password strength meter
 */
.woocommerce-password-strength {
    text-align: right;

    &.strong {
        color: #0f834d;
    }

    &.short {
        color: #e2401c;
    }

    &.bad {
        color: #e2401c;
    }

    &.good {
        color: #3d9cd2;
    }
}

/**
 * Forms
 */
.form-row.woocommerce-validated input.input-text {
    box-shadow: inset 2px 0 0 #0f834d;
}

.form-row.woocommerce-invalid input.input-text {
    box-shadow: inset 2px 0 0 #e2401c;
}

.required {
    color: #f00;
}

/**
 * Notices
 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
    padding: 0.5rem;
    color: var(--colour-white);
    background-color: var(--colour-base);
}


.woocommerce-error {
    background-color: var(--colour-red);
}

.woocommerce-info {
    border-radius: 0.5rem;
    margin-block: 1rem;
}

.demo_store {
    position: fixed;
    z-index: 9999;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 1em;
    background-color: #3d9cd2;
}

@media screen and (min-width: 48em) {

    /**
     * Header cart
     */
    .site-header-cart .widget_shopping_cart {
        position: absolute;
        z-index: 999999;
        top: 100%;
        left: -999em;
        display: block;
        width: 100%;
        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    }

    .site-header-cart:hover .widget_shopping_cart,
    .site-header-cart.focus .widget_shopping_cart {
        left: 0;
        display: block;
    }
}

/**
 * WooCommerce widgets
 */


.woocommerce-table {
    width: min(80vw, 40rem);
    padding: 1rem;
    background: var(--colour-light-grey);

    thead, tfoot {
        text-align: left;
    }

    tbody {
        vertical-align: top;
    }

}