@import "default.css";
@import "modals.css";
@import "navbar.css";
@import "login.css";
@import "product-card.css";
@import "product-detail.css";
@import "users.css";
@import "cart.css";
@import "footer.css";
@import "shopping_method.css";

:root {
    --colour-white: #ffffff;
    --colour-main-green: rgb(173, 173, 56);
    --colour-dark-green: #2C3322;

    /*--font-abril-fatface: 'Abril Fatface', cursive;*/
    /*--font-inter: 'Inter', sans-serif;*/
    /*--font-poppins: 'Poppins', sans-serif;*/
    --font-montserrat: 'Montserrat', sans-serif;
    --font-roboto: 'Roboto', sans-serif;

}

/*  FONTS */
/*@font-face{*/
/*    font-family: next-art;*/
/*    src: url('/../fonts/next-art/NEXT-ART--Regular.otf') format('opentype');*/
/*}*/

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html {
    /*font-family: Arial, Helvetica, sans-serif;*/
    /*font-size: 16px;*/
    scroll-behavior: smooth;
}

body {
    background-color: black;
    font-family: var(--font-montserrat);
    color: var(--colour-white);
}

ul, ol{
    list-style: none;
}

.container-main{
    max-width: 1700px;
    margin: 0 auto;
}
.btn-main {
    border-radius: 7px;
    border: none;
    padding: 1rem 2rem;
    display: block;
    text-align: center;
    color: var(--colour-white);
    min-width: 220px;
    max-width: fit-content;
}

.btn-popup__close{
    padding: 5px;
    border-radius: 5px;
    border: 1px solid black;
    margin: 3px;
}
.btn-main__coloured {
    background-color: var(--colour-main-green);
}
.btn-secondary__coloured{
    background-color: #000000;
    color: var(--colour-white);
}
.btn-main__pop-up{
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
}

.postcode-change__verification{
    background-color: var(--colour-main-green);
    color: white;
    right: 5px; top: 40%;
    transform: translateY(-40%);

    border-radius: 3px;
}

.icon__tent{
    background-image: url('/uploads/public/images/assets/logo.svg');
}

.filter-truck__selected{
    background-image: url('/uploads/public/images/assets/filter-truck-selected.svg');
}

.icon__shopping-mode{
    background-image: url('/uploads/public/images/assets/shopping_mode.svg');
}

.shopping-method__icon-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--colour-main-green);
    padding: 4px;
    border-radius: 5px;
}
.category-filter{
    border: 1px solid var(--colour-main-green);
    padding: 10px 20px;
    border-radius: 5px;
    text-align: center;
    white-space: nowrap;
}
.category-filter.selected{
    background: var(--colour-main-green);
}

.filter-menu{
    max-width: 430px;
    min-width: 250px;
    height: fit-content;
    background-color: white;
    padding: 1rem 0 2rem 2rem;
    color: black;
    position: sticky;
    top: 5rem;
    max-height: 85vh;
    overflow: hidden;
}
.filter-mobile{
    background: #fff;
    width: 50px;
    aspect-ratio: 1;
    border-radius: 10px;
    margin-bottom: .5rem;
}

.shop-type-filter{
    margin: .5rem 0;
}
/* reviews */

.anim-scale-up{
    animation-name: scale-up;
    animation-duration: 500ms;
    animation-timing-function: ease-in-out;
}

.confetti{
    inset: 50%;
}

.confetti > span{
    position: absolute;
    aspect-ratio: 1;
    opacity: 0;
    transform-style: preserve-3d;
}

.explosion{
    animation: confettiSettle 5s cubic-bezier(0,.7,1,1);
}

.explosion > span{
    animation: confettiExplode 5s;
    transition: all 2s ease-in-out;
}

@keyframes confettiExplode{
    25%{
        opacity: 1;
        translate: 0 -150px;
    }
    100%{
        translate: 0 -150px;
    }
}

@keyframes confettiSettle {
    70%{
        opacity: 1;
    }
    99%{
        translate: 0 120px;
        opacity: 0;
    }
    100%{
        translate: 0 0;
        opacity: 0;
    }
}

@keyframes scale-up {
    50%{
        scale: 1.2
    }
    100%{
        scale: 1;
    }
}

.warning-msg{
    color: crimson;
    font-weight: 500;
    font-size: 1rem;
}

.forgotten-pwd__wrapper{
    max-width: 500px;
}

.mobile-search-bar > div{
    width: 90%;
}

.user-error-msg{
    padding: 10px;
    font-size: 1.1rem;
    background-color: lightsalmon;
    animation: moveInLeft 1s ease-in;
}

@keyframes moveInLeft {
    0%{
        opacity: 0;
        transform: translateX(-100%);
    }

    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes moveInRight {
    0%{
        opacity: 0;
        transform: translateX(100%);
    }

    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes moveOutRight {
    0%{
        opacity: 1;
        transform: translateX(0);
    }

    100%{
        opacity: 0;
        transform: translateX(100%);
    }
}

.footer-cards__icon{
    width: 225px;
}

.promo-banner{
    background-color: rgba(197, 14, 14, 1);
    width: 100%;
    padding: 1rem;
}

.promo-banner__text{
    font-size: 1rem;
}

.promo-banner__text-accent{
    font-size: 1.2rem;
    font-weight: 600;
}

.btn--disabled{
    background-color: #cccccc;
    cursor: not-allowed;
    user-select: none;
}

#filter-menu-search input[type="text"]{
    border: 1px solid black;
    padding: 8px 14px;
    margin: .5rem 0 0;
}

.filter-menu-wrapper-mobile{
    top: -.5rem;
}

.shopping-method__link{
    padding: 4px 18px;
    border-radius: 22px;
    border: 1px solid var(--colour-main-green);
    background: rgba(173, 173, 56, .14) ;
}

.shopping-method__wording{
    font-size: .75rem;
    font-weight: 500;
}

/*    MEDIA QUERIES    */

@media screen and (max-width: 500px)
{
    .footer-cards__icon{
        width: 150px;
    }

    .forgotten-pwd__wrapper{
        max-width: 100%;
    }

    .promo-banner__text{
        font-size: .9rem;
    }
    .promo-banner__text-accent{
        font-size: 1rem;
        font-weight: 600;
    }
}

@media screen and (min-width: 501px){
    .category-filter:hover{
        background: var(--colour-main-green);
    }

}

/* change of navbar */

@media screen and (max-width: 1099px)
{
    .filter-menu{
        display: none;
    }
}

@media screen and (min-width: 1100px)
{
    .filter-mobile,
    .filter-menu-wrapper-mobile{
        display: none;
    }
}

@media screen and (max-width: 993px)
{
.product-card__title {
        font-size: .85rem;
    }
}

@media screen and (max-width: 500px)
{
    .product-card__title {
        font-size: .8rem;
        line-height: 1rem;
    }
    .category-filter{
        padding: 5px 10px;
        font-size: .7rem;
    }
}
@media screen and (min-width: 501px) and (max-width: 1450px)
{
    .product-card__title {
        font-size: 1rem;
    }

}

/*@media screen and (max-width: 1587px)*/
/*{*/
/*    .click-collect__grid{*/
/*        gap: 0 10px;*/
/*    }*/
/*}*/