/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://example.com/
Description: My custom child theme for Twenty Twenty-Five
Author: Vishnu
Template: twentytwentyfive
Version: 1.0
*/

/* Custom styles here */
body {
  background-color: #f8f8f8;
}

.overlay-header{
	top: 0;
/*     position: fixed; */
	z-index: 2;
    position: relative;
    width: 100%;
	background: #3e3e3ea8;
	background: #000;
/*     backdrop-filter: blur(5px); */
	color:#fff;
}

#modal-1{
	height: fit-content;
}

.wp-block-button.header-btn a {
    display: flex;
    align-items: center;
    gap:4px;
	background:#ff5722;
}

.wp-block-button.header-btn a svg{
    font-size:18px;
}

.header-notification {
    position: relative;
    top: 4px;
    z-index: 1;
    background: white;
	width: 100%;
}

@keyframes rotateFlash {
  0%   { transform: rotate(0deg); opacity: 0; }
  50%  { transform: rotate(45deg); opacity: 1; }
  100% { transform: rotate(0deg); opacity: 1; }
}

.btn-notification-selector svg {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

.btn-notification-selector svg.visible {
  animation: rotateFlash 0.4s ease;
  opacity: 1;
  position: relative;
  pointer-events: auto;
}


.header-notification > div{
    position: absolute;
    top: 0;
    background: #ffffff99;
    backdrop-filter: blur(10px);
	border-radius: 15px;
	box-shadow: 0 0 8px 0px #00000050;
}

.header-notification ul :last-child {
    border: none;
}

.header-notification li {
    border-bottom: 1px solid black;
    padding: 10px 20px;
    margin: 0;
	color:black;
}

.header-notification li h1, h2, h3, h4, h5, h6 {
    margin: 0 0 6px;
    font-size: 14px;
}

.order-online-section{
	justify-content: center;
}

.order-online-section .home-doordash{
	max-width:250px;
}

.order-online-section .home-ubereats{
	max-width:250px;
}

.header-notification li div {
    font-size: 12px;
}

.single-product-post{
	box-shadow: 0 0 8px #00000025;
}

.news-page-list li > div{
	box-shadow: 0 0 8px #8080806b;
}

#branch-popup ul#branch-list {
    display: flex;
    list-style: none;
    padding: 0;
    gap: 10px;
}

#branch-popup ul#branch-list li {
    background:#d9d9d9;
    padding:5px 15px;
    border-radius:15px;
    cursor:pointer;
}

#branch-popup ul#branch-list li.selected {
    background:#000000;
    color:white;
    font-weight:600;
}

.about-us-slider .n2-ss-slider-2.n2-ow {
    border-radius: 50px !important;
}

.badge-primary {
    color: #fff;
    background-color: #757575;
}

.badge {
    display: inline-block;
    padding: .25em .4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
}

.badge-pill {
    padding-right: .6em;
    padding-left: .6em;
    border-radius: 10rem;
}

.product-list {
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    gap: 10px;
}

.product-list > a {
	text-decoration:none;
}

.product-list .product-item {
    display: flex;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 13px 0px #0000001a;
    flex-direction: column;
    justify-content: flex-start;
	max-width: 250px;
}

.product-list .product-item p.price::before{
	content:"$";
}

.product-list .product-item img {
    width: 100%;
    height: 200px;
	border-radius: 10px;
	object-fit: cover;
	border-style: inset;
    border-color: #00000012;
}

.product-list .product-item h3 {
    font-size: 18px;
    font-weight: 600;
    margin-top: 6px;
	margin-bottom: 0;
}

.product-list .product-item .detail{
	font-size: 13px;
    color: black;
}

.product-list .product-item p.price {
    font-size: 15px;
    margin:0px;
	display: flex;
    align-items: center;
    gap: 5px;
	font-weight: 500;
}

.d-none{
	display:none!important;
}



@media(max-width: 768px){
    .header {
        flex-direction: column;
    }

	.product-list {
		grid-template-columns: auto;
		justify-content:center;
	}

}