/*
 Theme Name:   Understrap Child
 Theme URI:    https://understrap.com
 Description:  Understrap Child Theme
 Author:       the Understrap Contributors
 Author URI:   https://github.com/understrap/understrap-child/graphs/contributors
 Template:     understrap
 Version:      1.2.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  understrap-child
 Tags: one-column, custom-menu, featured-images, theme-options, translation-ready
 GitHub Theme URI: understrap/understrap-child
*/

/* General */
:root {
    --purple-primary: #29245c;
    /* Seats */
    --stachesepl-object-seat-taken-bg-color: #bcbcbc;
    --stachesepl-object-seat-taken-color: #bcbcbc;
    --stachesepl-object-seat-disabled-bg-color: black;
    --stachesepl-object-seat-disabled-color: black;
    --stachesepl-object-seat-selected-bg-color: #0dbc33;
    --stachesepl-object-seat-onsite-bg-color: #f9a852;
}

h1 {
    font-size: clamp(1rem, 6vw, 2.3rem)!important;
}
h2 {
    font-size: clamp(1.9rem, 6vw, 1.56rem)!important;
}


/* Events main page */
h1.woocommerce-products-header__title.page-title {
    font-size: 1.56rem;
}

.woocommerce .woocommerce-ordering,
.woocommerce-result-count {
    display: none;
}

.woocommerce ul.products li.product a img {
    border-radius: 1rem;
}

/* Seat planner & Event */
.woocommerce {
    /* Product title */
    ul.products li.product .woocommerce-loop-product__title {
        font-size: 1.56rem!important;
    }
    /* Product time picker */
    .stachesepl-date-time-input__icon {
        color: var(--purple-primary);
    }

    /* Product seat button */
    .stachesepl-select-seats-button {
        background-color: var(--purple-primary);
        border: 1px solid var(--purple-primary);

        &:hover {
            background-color: #fff;
            color: var(--purple-primary);
        }
    }
    /* Hide product price on event homepage */
    .product-type-auditorium .woocommerce-Price-amount, .product-type-auditorium .price  {
        display: none !important;
    }
}

/* Checkout page */
.woocommerce-checkout {
    .wc-block-components-title.wc-block-components-title {
        font-size: 1.56rem!important;
    }

    .wc-block-components-checkout-place-order-button {
        background-color: var(--purple-primary);
        color: #fff;
        border-radius: 0.5rem;

        &:hover {
            background-color: #fff;
            color: var(--purple-primary);
            border-color: var(--purple-primary);
        }
    }
    .wc-block-components-checkout-return-to-cart-button {
        color: var(--purple-primary);
    }

    .woocommerce .woocommerce-customer-details .woocommerce-column__title, .woocommerce-order-details__title {
        font-size: 1.56rem!important;
    }
}


/* Custom status seat colors */
.single-product .stachesepl-object-seat.selected {
    color: #fff !important;
    background-color: var(--stachesepl-object-seat-selected-bg-color) !important;
}

.stachesepl-object-seat.onsite {
    background-color: var(--stachesepl-object-seat-onsite-bg-color) !important;
    color: #000 !important;
}

/* Hide price on-site sale */
span.stachesepl-seat-tooltip-onsite + span.stachesepl-seat-tooltip-price {
    display: none !important;
}


/* Custom BTTR */

.upsell-msg {
    margin: 3.2rem 0;
    padding: 1.6rem;
    border: 2px solid rgb(41, 36, 92);
    border-radius: 1rem;
    margin-bottom: 3.2rem;
    display: flex;
    align-items: center;
    gap: 1.6rem;
    justify-content: space-between;
    max-width: 992px;
    margin: 3.2rem auto;

    @media (max-width: 576px) {
        flex-direction: column;
        align-items: start;
    }
}

.upsell-msg p {
    margin: 0;
}

.upsell-msg a {
    display: inline-block;
}

/* Woocommerce: Checkout button */

.wc-block-cart__submit-container {
    background: #161048;

    .wc-block-components-button__text {
        color: #fff;
    }
}

/* Woocommerce: Checkout notice Receiving QR codes */
.wc-block-components-checkout-step__description {
    font-style: italic;
    font-weight: bold;
}

/* hidden seats*/

.hidden-seat {
    pointer-events: none;
    visibility: hidden;
}
/* Shopping cart below header*/
/* Styling the container */
.header-ticket-cart {
    text-align: right;
    padding: 10px 20px;
    font-family: sans-serif;
}

/* Creating the Ticket Symbol using FontAwesome */
.ticket-icon::before {
    content: "";
    background: url(src/img/cart.svg) no-repeat;
    background-size: 40px;
    vertical-align: middle;
    display: block;
    width: 40px;
    height: 40px;
}

/* Style the count bubble */
.cart-count {
    background: #ff0000;
    color: #fff;
    border-radius: 50%;
    padding: 2px 7px;
    font-size: 12px;
    position: relative;
    top: -10px;
    left: -10px;
}

.cart-contents {
    text-decoration: none;
    color: #333;
    float: right;
}

/* Event detail */

.related.products{
    width: 100%;
    display: flex;
    flex-direction: column;
}

.hide-information-on-detail-page {
    display: none;
}

.wc-block-checkout__sidebar .wc-block-components-product-metadata__description {
    display: none;
}

#stripe-msg {
    padding: 0 16px;
}

.woocommerce .wc-bacs-bank-details-account-name {
    font-size: medium;
}

.stachesepl-timepicker__time-btn {
    visibility: hidden;
}

/* ====== Media Queries ============ */

@media only screen and (min-width: 1200px) {
    h1.woocommerce-products-header__title.page-title {
        font-size:  2.3rem!important;
    }
}

@media only screen and (max-width: 1200px) {
    .woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product {
        width: 43%;
        margin: 0 2em 0 0;
    }
}

@media only screen and (max-width: 768px) {
    /* Force the seat planner container to ignore theme padding */
    .stachesepl-wrapper,
    .stachesepl-container {
        width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        max-width: none !important;
    }

    /* Ensure the canvas scales to the new width */
    .stachesepl-canvas-wrapper {
        touch-action: pan-x pan-y; /* Improves touch scrolling */
    }
}

@media only screen and (max-width: 640px) {
    .woocommerce ul.products {
        display: flex;
        flex-direction: column;
    }
    .woocommerce ul.products li {
        width: 100%!important;
    }
}