/* Common Styles for All */
/* Header */

.header-logo {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 0px; 
    object-fit: cover;
} 

.user-avatar-header {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 2px; 
    object-fit: cover;
}  

/*=========================== BODY ===========================*/

/* ------------------ Basics --------------------- */

body{
    position: relative; /* required */
    padding-top: 50px;
    /* background: #fffdf8; */
}

/* 412 , 360*/
.container{
    max-width: 800px;
    min-height: 600px;
    margin:auto;
}

.hidden{
    display: none;
}

.overlay{
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.58);
    z-index: 100;
    cursor: pointer;
}

/* .notification{
    max-height:650px; 
    position:fixed; 
    left:50%; 
    transform:translateX(-50%); 
    top:50%; 
    transform:translateY(-50%); 
    z-index:102; 
    background:white;
    border-radius:5px;
} */

.notification{
    position:fixed;
    top:40%; 
    transform:translateY(-50%); 
    /* justify-content: center; */
    /* align-items: center; */
    /* text-align: center; */
    z-index:102;
    /* background:white;
    border-radius:5px; */
}

/* Remove the bottom margin of forms. */
form{
    margin: 0px;
    padding: 0px;
}

.card{
    background: #f8f9fa;
    max-width: 400px;
    margin: auto;
    border: 0;
}

.card-link{
    bottom: 0px;
    transition: 0.3s;
}

.card-link:hover{
    bottom: 5px;
}

.card-header{
    border: 0;
    color: white;
    /* background: darkorange; */
    background: mediumturquoise;
    padding-top: 18px;
}

.card-body{
    border:0;
    padding:10px;
}

.card-footer{
    border: 0;
    background:#fffafa;
}

/* Remove the inherent padding and margin to avoid unexpected formating errors. */
.row{
    margin: 0;
    padding: 0;
}

/* table th{
    font-weight: 400;
}

table td{
    font-weight: 300;
} */

.go-to-top{
    display: none;
    position: fixed;
    bottom: 180px;
    right: 20px;
    z-index: 99;
    font-size: 12px;
    border: none;
    outline: none;
    background-color: lightcoral;
    color: white;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    opacity: 0.6;
}

.go-to-top:hover{
    background-color: red;
}

.page-title{
    /* color: white; */
    background: aliceblue;
    text-align: center;
}

.btn-lightgrey{
    background:#e8e8e8; 
    border:1px solid lightgrey;
}

.btn-lightgrey:hover{
    background: lightgrey; 
    border: 1px solid lightgrey;
}

.block-ellipsis{
    display: block;
    display: -webkit-box;
    max-width: 100%;
    margin: 0 0;
    line-height: 1.5;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hidden-block{
    display:none; 
    background-color:#efefef; 
}

.currency{
    color:red;
    font-size: 12px;
    font-weight: 300;
}

.currency-del{
    color:grey;
    font-size: 12px;
    font-weight: 300;
}

.price{
    color:red;
}

.price-del{
    color:grey;
    font-size: 14px;
    font-weight: 300;
}

del{
    color:gray;
}

.center {
    text-align: center;
}

.top-center {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.top-left {
    position: absolute;
    top: 20px;
    left: 20px;
}

.a{
    text-decoration:none;
}

.input-shadow{
    border-width:1px; 
    border-color:lightgrey;
}

.cursor-pointer {
    cursor: pointer;
}

.round-img {
    display: inline-block;
    border-radius: 50%; 
    object-fit: cover;
} 

/* ----------------------- Pagination ---------------------- */
  
.pagination {
    display: inline-block;
}
  
.pagination a {
    color: black;
    float: left;
    width: 38px;
    height: 38px;
    padding: 6px 0px;
    text-decoration: none;
    transition: background-color .3s;
    border: 0;
    margin: 0px;
}
  
.pagination a.active {
    background-color: darkorange;
    color: white;
    border: 0;
}
  
.pagination a:hover:not(.active) {
      background-color: #ddd;
}


/* ------------------ Carousel --------------------- */
.carousel{
    width: 100%;
    height:auto;
    text-align: center;
    vertical-align: middle;
    margin: 0;
}

.carousel-inner{
    width: 100%;
    height: auto;
    text-align: center;
    vertical-align: middle;
    background-color: lightgray;
} 

.carousel-img{
    width: 100%;
    height: 100%;
    display: inline-block;
    border-radius: 0; 
    object-fit: cover;
}

/* ======================== Store ======================== */
.store-logo{
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 1px solid #fafafa;
    border-radius: 2px; 
    object-fit: cover;
}


.blink {
    animation: blinker 2s linear infinite;
}
  
@keyframes blinker {
    50% {
        opacity: 0;
    }
}

/* ======================== Cart ======================== */
#cart_time_info{
    z-index: 101;
}

/* ======================== Item ======================== */

/* .discount-badge{
    font-size: 14px;
    color: white;
    background: limegreen;
    border-radius: 6px; 
    padding: 0px 4px;
} */

.discount-badge{
    font-size: 14px;
    color: limegreen;
    /* background: limegreen; */
    border-radius: 6px; 
    border: 1px solid limegreen;
    padding: 0px 4px;
}

.veg-badge{
    font-size: 14px;
    color: white;
    background: ForestGreen;
    border-radius: 6px; 
    padding: 0px 4px;
}


/* ------------------ Product Category & Scrollspy --------------------- */

.cat-list{
    position: -webkit-sticky; /* Safari */
    position: sticky; /* Supported in latest version of Chrome, Firefox, Safari, Opera and Edge browsers */
    top: 52px;
    height:612px;
    font-size:15px;
    overflow:auto;
    background:#f8f8ff;
}

.cat-items{
    padding-top: 52px;
}

/* :active MUST come after hover */
a.cat-item{
    color:black; 
    background:#f8f8fa; 
    padding:15px 4px; 
    border:1px solid #f5f5f5;
}

.cat-qty{
    position:absolute; 
    top:2px; 
    right:2px;
    font-size:10px; 
    color:white; 
    height:14px; 
    width:14px; 
    background:darkorange; 
    border-radius:50%; 
    text-align:center;
}

/* ======================== Product Item ======================== */
/* ----- Item Label ----- */
.cat-items-card{
    border:1px solid #f6f6f6; 
    border-radius:4px;
}

.item-card{
    border: 1px solid #fbfbfb; 
    border-radius: 5px;
    background-color: white;
}

.item-card:hover{
    cursor: pointer;
    background: #ffefef;
    background: white;
}

.item-image-list{
    display: inline-block;
    width: 80px;
    height: 80px;
    border-radius: 2px; 
    object-fit: cover;
    border: 1px solid #fffbf8;
}

.item-name-block{
    color:black; 
    height:26px;
}

.item-desc-block{
    height:26px; 
    padding-top:2px;
    font-weight: 300;
}

.item-price-block{
    height:26px;
}


/* ----- Item Details Card ----- */
.item-details{
    /* max-width:600px;  */
    max-height:650px; 
    position:fixed; 
    bottom:0; 
    left:50%; 
    transform:translateX(-50%); 
    z-index:102; 
    background:#fffdf8;
}

.item-detail-card{
    max-height:580px; 
    max-width:500px; 
    overflow:auto;
}

.item-img-detail{
    display: inline-block;
    width: 100%;
    border-radius: 10px 10px 0px 0px; 
    object-fit: cover;
}

.option-selection{
    color: dodgerblue;
    font-size:12px; 
    padding: 0px 4px;
    border:1px solid dodgerblue; 
    border-radius:6px;
}

.opt-group{
    border:1px solid #f8f8f8;
    background: white;
}

.opt-header{
    border-bottom:1px solid lightgrey;
}


.save-badge{
    font-size: 14px;
    font-weight: 300;
    color: white;
    background: gold;
    border-radius: 6px; 
    padding: 0px 4px;
}

.minus, .plus, .minus-cart, .plus-cart{
    cursor:pointer; 
    background:#f2f2f2;
    border-radius:4px;
    padding:2px 10px 2px 10px;
    border:1px solid #ddd;
    display: inline-block;
    vertical-align: middle;
    text-align: center; 
}

.input-item-qty{
    width: 50px;
    text-align: center;
    border:1px solid #ddd;
    border-radius:4px;
    display: inline-block;
    vertical-align: middle;
    background-color: white;
} 

.plus-store, .minus-store{
    cursor:pointer;
    font-size:20px; 
    color:darkorange;
}

.cart-item-qty{
    width:30px; 
    border:0; 
    font-size:14px; 
    background-color:unset;
}

.cart-opt-sel{
    font-size:14px; 
    float:right; 
    padding-top:2px;
}