/* 
    --color-main: #5EAA81;
    --color-secondry: #FECD4C;
    --color-accent: #F4773D;
    --color-text: #060702;
    --color-bg: #ffffff;
    --color-mute: #939391; */
:root {
    --active-color: var(--color-accent);
}

/* reset css */
ul {
    padding: 0;
}

body {
    background-color: var(--color-bg);
}


.offers-swiper {
    background-color: var(--color-main);
}
.other-image .active {
    border: calc(var(--border-size)* 3) solid var(--active-color);
    padding: 0.1%;
}

.acordion-container :is(.acordion-header:not(.nav-sub-item-title), .acordion-header:not(.nav-sub-item-title) *) {
    background-color:var(--color-mute-light);
    color: var(--color-text);
}

.numbericUpDow {
    background-color: var(--color-main);
    border: none;
}

.acordion-container li .numbericUpDow {
    padding: 0.3rem;
    box-sizing: border-box;
    gap: 1%;
    justify-content: center;
}
@media (max-width: 1200px) {
    .acordion-container li .numbericUpDow {
        padding: 0.2rem;
    }
}

#check-out-container .check-out-image-section .checkOut-image-container img {
    border-radius: var(--rounded-pill);
}

.checkOut-image-container {
    margin-top: 10%;
}

.checkOut-offers {
    text-align: center;
}

    .checkOut-offers h4 {
        color: var(--color-accent);
    }

/* confirm page */
.confirm-page-title {
    margin: 2% auto;
    background-color: var(--color-gray);
    padding: 1%;
    width: 100%;
    border-radius: var(--rounded-main);
}

/* box */
.box {
    background-color: var(--color-bg);
    box-shadow: var(--shadow-style);
}

.od-btns-container > div {
    background-color: var(--color-secondry);
}

input[type='range'] {
    accent-color: var(--color-accent);
}

.tip-container {
    background-color: var(--color-bg);
    width: 100%;
}

    .tip-container .form-control {
        margin: 0;
    }

body:has(.error-page),
body:has(.order-end-container),
body:has(.login) {
    background-color: var(--color-secondry);
    background-image: url('../assets/img/simple line art vector food pattern.png');
    background-size: 10%;
    background-blend-mode: color-burn;
}

@media (max-width: 992px) {
    body:has(.error-page),
    body:has(.order-end-container) {
        background-size: 50%;
    }
}

.card {
    border-radius: var(--rounded-secondry);
    padding: 0;
}
.card-info .amenity {
    padding: 2% 5% 2% 2%;
    border-inline-end: var(--border-size) solid var(--color-mute);
}
.card-info .amenity:last-child {
    border-inline-end: none;
}
.card-info .amenity .amenity_image {
    border-radius: var(--rounded-pill);
    margin-inline-end:2%;
}



    .card.product-compact.box {
        box-shadow: var(--shadow-style);
        display: grid;
        grid-template-columns: 30% 1fr;
        padding: 1% 1% 1% 0;
        align-items:center;
    }
 .card-info{
    overflow: hidden;
}
.index-card .card-info{
    margin-top: -25%;
    /*background-color:  color-mix(in srgb, var(--color-mute-light), transparent 70%);*/
    position: relative;
    backdrop-filter: blur(5px);
    padding: var(--p-2);
    mask-image: linear-gradient(to top, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, black 80%, transparent 100%);
    background: linear-gradient(0deg,color-mix(in srgb, var(--color-mute-light), transparent 50%) 70%, transparent 100%);    
    box-sizing: border-box;
    width: 100%;
}
.index-card .card-des{
    margin-top: 5%;
}

.card-img-container {
    height: 100%;
}

.index-card .card-img-container {
    mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
}

.card.box {
    background-color: var(--color-mute-light);
}


    .card.box * {
        color: var(--color-text);
    }

.card-container .card .card-img-container {
    overflow: hidden;
    padding: var(--p-2);
    box-sizing: border-box;
}
.card-container .card .card-img-container img {
    border-radius: var(--rounded-main);
}

.offerdbox1.card.box {
    background-color: var(--color-accent);
}

    .offerdbox1.card.box * {
        background-color: var(--color-accent);
    }

.card-container .card .card-offer {
    text-align: center;
    width: 10%;
    z-index: 1;
}

@media (min-width: 1400px) {
    .card-container:has(.product-compact) {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 576px) {
    .card-container:has(.product-compact) {
        grid-template-columns: repeat(1, 1fr);
    }
}

.ct2-last-line h4 {
    /* color: var(--color-text); */
    font-weight: bold;
}

.ct2-last-line .btn:nth-child(1) {
    background-color: var(--color-secondry);
}

.ct2-last-line .btn:nth-child(2) {
    background-color: var(--color-accent);
}

.ct2-last-line .btn:nth-child(1):hover {
    background-color: var(--color-secondry-dark);
}

.ct2-last-line .btn:nth-child(2):hover {
    background-color: var(--color-accent-dark);
}

.chart-container {
    overflow: hidden;
}

.feature-item * {
    color: var(--color-bg);
}

.feature-item:nth-child(3n+1) {
    background-color: var(--color-main);
}

.feature-item:nth-child(3n+2) {
    background-color: var(--color-accent);
}

.feature-item:nth-child(3n+3) {
    background-color: var(--color-secondry);
}

.btn-box .btn-items .btn:nth-child(3n+1) {
    background-color: var(--color-main);
}

.btn-box .btn-items .btn:nth-child(3n+2) {
    background-color: var(--color-accent);
}

.btn-box .btn-items .btn:nth-child(3n+3) {
    background-color: var(--color-secondry);
}

.twoTextBlow .font-sm {
    color: var(--color-mute);
}

.acordion-container .acordion-header :is(.btn, .btn *) {
    background-color: var(--color-secondry);
}

.adminNav {
    background-color: var(--color-main);
}

.categury-swiper .swiper-slide {
    flex-direction: column;
}

    .categury-swiper .swiper-slide svg {
        font-size: calc(var(--img-width-xxl));
    }

    .categury-swiper .swiper-slide img {
        width: calc(var(--img-width-xxl) * 1.5);
    }

    .categury-swiper .swiper-slide :is(img,svg) {
        background-color: var(--color-gray);
        padding: var(--p-1);
        border-radius: var(--rounded-pill);
        transition: 0.3s;
    }

        .categury-swiper .swiper-slide :is(img,svg):hover {
            background-color: var(--color-secondry);
        }

.categury-swiper h3 {
    font-size: var(--font-size-sm);
    margin-top: 0.5rem;
}

/* .categury-swiper .swiper-slide:hover {
    background-color: var(--color-secondry);
} */


.card-offer * {
    color: var(--color-bg) !important;
}




.form-control input:focus {
    outline: none;
}

.numbericUpDow {
    background-color: var(--color-bg);
    border: var(--border-size) var(--color-mute) solid;
}

    .numbericUpDow > * {
        background-color: var(--color-bg);
        color: var(--color-text);
    }

        .numbericUpDow > *:hover {
            background-color: var(--color-gray);
            color: var(--color-text);
        }

#check-out-container .check-out-image-section {
/*    background-color: var(--color-secondry);
    background-image: url('../assets//img/simple line art vector food pattern.png');
    background-size: 40%;
    background-blend-mode: color-burn;
    border-radius: var(--rounded-secondry)*/
}

.error-page {
    height: 100%;
    display: grid;
    grid-template-rows: 50% 30% 20%;
    align-items: end;
    position: absolute;
}

.error-page-info {
    font-size: calc(var(--font-size-xxl) * 1.3);
    font-weight: bold;
}

.error-page-title {
    display: none;
}

.error-btn-container {
    /* align-self: flex-end; */
    margin-bottom: 2%;
}

@media (min-width: 992px) {
    .error-page {
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }

    .error-image {
        grid-column: 1;
        grid-row: 1/3;
    }

    .error-btn-container {
        align-self: start;
        justify-content: start;
    }
}
/*animetions*/
/*.lottie-animetion path{*/
/*    fill:var(--color-main);*/
/*}*/



/* dark theme */
[data-theme="dark"] .card.box {
    background-color: var(--color-mute-dark);
}
[data-theme="dark"] .nav-item:has(.iconify) * {
    color: var(--color-text);
}
[data-theme="dark"] :is(.acordion-container :is(.acordion-header:not(.nav-sub-item-title), .acordion-header:not(.nav-sub-item-title) *)) {
    background-color: var(--color-secondry);
    color: var(--color-bg);
}
[data-theme="dark"] option{
    color: var(--color-bg);
}
[data-theme="dark"] .pcnav-content ul li:hover {
    background-color: var(--color-mute-dark);
}