/* Deals with the loading overlay */
.body-loading {
    overflow: hidden;
    pointer-events: none;
}

.body-loading::before {
    content: 'Loading...';
    z-index: 99999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 2rem;
    font-weight: 200;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    animation: body-loading-animation 1s infinite;
}

@keyframes body-loading-animation {
    0% {
        content: 'Loading';
    }

    25% {
        content: 'Loading.';
    }

    50% {
        content: 'Loading..';
    }

    75% {
        content: 'Loading...';
    }

    100% {
        content: 'Loading';
    }
}

/* Deals with inactive websites */
body:is(.inactive) * {
    display: none;
}

body:is(.inactive)::after {
    content: 'This website has been disabled';
    z-index: 99999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 2rem;
    font-weight: 200;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}

/* Adds custom shadow on header */
header {
    position: sticky;
    z-index: 9999;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
}

/* Deals with the client hero banner */
.homepage-banner {
    height: 50vh;
    min-height: 400px;
    max-width: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.homepage-banner picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.homepage-banner-data {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-inline: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
}

.homepage-banner h1,
.homepage-banner p {
    text-shadow: 0 0 10px black;
}

.homepage-banner .btn {
    box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

/* Deals with the product card */
#products-row .card {
    overflow: hidden;
    height: 100%;
    transition: all 0.15s ease-in-out;
}

#products-row .card .card-img-top {
    height: 200px;
    object-fit: cover;
    transition: all .30s ease-in-out;
}

#products-row .card:hover {
    filter: brightness(.75);
    transform: scale(1.05);
}
/*
#products-row .card:hover .card-img-top {
   transform: scale(1.05);
}
*/

#products-row .card .card-body {
    z-index: 2;
}

#products-row .card .card-body .sale-badge {
    position: absolute;
    top: 10px;
    right: 10px;
}

#products-row .card .card-body .shortcut-add-to-cart {
    display: none;
}

/* Deals with the image preview remover */
.img-preview-remover {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.15s ease-in-out;
}

.img-preview-remover:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.5);
}

/* Deals with the product carousel */
#products-carousel .carousel-inner .carousel-item img,
#products-carousel .carousel-inner .carousel-item iframe {
    width: 100%;
    height: 500px;
    object-fit: contain;
    background-color: black;
}

@media (min-width: 1200px) {

    #products-carousel .carousel-inner .carousel-item img,
    #products-carousel .carousel-inner .carousel-item iframe {
        object-fit: cover;
    }
}

/* Deals with the product thumbnails on product page */
#carousel-thumbnails img,
#carousel-thumbnails .carousel-thumbnails-video {
    width: 100%;
    height: 80px;
    object-fit: cover;
    transition: all 0.15s ease-in-out;
    opacity: .5;
}

#carousel-thumbnails img:hover,
#carousel-thumbnails .carousel-thumbnails-video:hover {
    filter: brightness(.5);
    opacity: 1;
}

#carousel-thumbnails .active-carousel-thumbnail {
    opacity: 1;
}

#carousel-thumbnails .carousel-thumbnails-video {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#carousel-thumbnails .carousel-thumbnails-video i {
    z-index: 1;
}

#carousel-thumbnails .carousel-thumbnails-video i::before {
    text-shadow: 0 0 10px black;
}

#carousel-thumbnails .carousel-thumbnails-video .carousel-thumbnails-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(2px);
}

/* Deals with the toast */
.toast {
    z-index: 9999;
    position: fixed;
    top: 80px;
    right: 25px;
}

/* Make labels inside forms bold */
form label {
    font-weight: bold;
}

/* Deals with the breaking words inside tables */
table * {
    white-space: nowrap;
}

/* Deals with setting size for tables and making scrollable */
.table-container {
    height: calc(100vh - 64px - 48px - 38px - 6px);
    overflow: auto;
}

/* Deals with the table loading */
.table-container-loading {
    position: relative;
    overflow: hidden !important;
}

.table-container-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2.5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    color: white;
    font-size: 1.5rem;
    font-weight: 200;
    text-shadow: 0 0 10px black;
    animation: table-container-loading-animation 1s infinite;
}

@keyframes table-container-loading-animation {
    0% {
        content: 'Please wait';
    }

    25% {
        content: 'Please wait.';
    }

    50% {
        content: 'Please wait..';
    }

    75% {
        content: 'Please wait...';
    }

    100% {
        content: 'Please wait';
    }
}

/* Deals with making tables transparent inside standard card */
.table-container .table-responsive table th,
.table-container .table-responsive table td {
    background-color: transparent;
}

.table-container::-webkit-scrollbar {
    display: none;
}

.table-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Deals with floating cart icon */
.floating-cart-icon {
    z-index: 1030;
    position: fixed;
    bottom: 80px;
    right: 40px;
    width: fit-content;
    transition: right 0.15s ease-in-out;
}

.floating-download-icon {
    left: 40px;
}

@media (min-width: 576px) {
    .floating-cart-icon {
        right: 80px;
    }

    .floating-download-icon {
        left: 80px;
    }
}

.floating-cart-icon .cart-icon-container {
    position: relative;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.15s ease-in-out;
}

.floating-cart-icon .cart-icon-container:hover {
    filter: brightness(1.25);
}

.floating-cart-icon .cart-icon-container .cart-counter {
    position: absolute;
    top: 0;
    right: 0;
    width: 25px;
    height: 25px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .75rem;
    font-weight: bold;
}

/* Deals with description in switches (checkboxes) */
.form-check.form-switch:has(input[role='switch']) .form-text {
    transform: translateX(-40px);
}

/* Fixes footer on mobile */
@media (max-width: 575.98px) {
    footer>div {
        flex-direction: column-reverse;
    }

    #footer-copyright {
        margin-top: .5rem !important;
    }
}

/* Styles the Discord button */
.btn-discord {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #5865F2;
    --bs-btn-border-color: #5865F2;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #5865F2;
    --bs-btn-hover-border-color: #5865F2;
    --bs-btn-focus-shadow-rgb: 88, 101, 242;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #5865f2;
    --bs-btn-active-border-color: #5865F2;
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: #5865F2;
    --bs-btn-disabled-border-color: #5865F2;
}

.price-cell {
    cursor: pointer !important;
    background-color: #faf7e8;
    transition: background 0.2s;
}

.price-cell:hover {
    background: #f7e7b8;
}

.price-input {
    min-width: 65px !important;
    max-width: 85px !important;
    text-align: center !important;
    margin: auto !important;;
}

@media (max-width: 575.98px) {
    .price-input {
        min-width: 4rem !important;
    }
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: auto !important;
    }
}