*{
	box-sizing:border-box;
}

html,
body{
	margin:0;
	padding:0;
	min-height:100%;
}

body{
	background:#f7f7f7;
	color:#202020;
	font-family:Arial,Helvetica,sans-serif;
}

button{
	font-family:inherit;
	cursor:pointer;
}

img{
	max-width:100%;
}

#app{
	width:100%;
	min-height:100vh;
}

.view{
	display:none;
	width:100%;
	min-height:100vh;
}

.view.active{
	display:block;
}

.site-header{
	width:100%;
	height:72px;
	background:#fff;
	border-bottom:1px solid #e5e5e5;
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:0 24px;
	position:sticky;
	top:0;
	z-index:100;
}

.brand{
	display:flex;
	align-items:center;
	gap:10px;
}

.brand-logo{
	width:40px;
	height:40px;
	background:#111;
	color:#fff;
	border-radius:9px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:12px;
	font-weight:800;
	flex:none;
}

.brand-name{
	font-size:18px;
	font-weight:700;
	line-height:1;
}

.cart-button{
	position:relative;
	width:42px;
	height:42px;
	border:0;
	border-radius:50%;
	background:#f1f1f1;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:17px;
	padding:0;
}

.cart-icon{
	line-height:1;
}

.cart-count{
	position:absolute;
	top:-2px;
	right:-2px;
	min-width:18px;
	height:18px;
	padding:0 4px;
	background:#111;
	color:#fff;
	border-radius:20px;
	font-size:10px;
	font-weight:700;
	display:flex;
	align-items:center;
	justify-content:center;
}

.view-title{
	font-size:18px;
	font-weight:700;
	line-height:1;
}

.back-button{
	width:42px;
	height:42px;
	border:0;
	border-radius:50%;
	background:#f1f1f1;
	font-size:22px;
	line-height:1;
	padding:0;
	display:flex;
	align-items:center;
	justify-content:center;
}

.header-spacer{
	width:42px;
	height:42px;
	flex:none;
}

.page-container{
	width:100%;
	max-width:1200px;
	margin:0 auto;
	padding:40px 24px 70px;
}

@media(max-width:600px){

	.site-header{
		height:64px;
		padding:0 16px;
	}

	.brand-name{
		font-size:16px;
	}

	.page-container{
		padding:28px 16px 50px;
	}

}


.menu-heading{
	margin-bottom:30px;
}

.menu-heading h1{
	margin:0;
	font-size:38px;
	line-height:1.1;
	letter-spacing:-1px;
	font-weight:800;
}

.menu-heading h1 span{
	color:#777;
}

.menu-heading p{
	margin:12px 0 0;
	color:#777;
	font-size:15px;
}

.category-tabs{
	display:flex;
	gap:8px;
	margin-bottom:28px;
}

.category-tab{
	border:1px solid #ddd;
	background:#fff;
	color:#202020;
	padding:11px 18px;
	border-radius:30px;
	font-size:14px;
	font-weight:600;
	display:flex;
	align-items:center;
	gap:8px;
}

.category-tab.active{
	background:#111;
	border-color:#111;
	color:#fff;
}

.food-symbol{
	width:15px;
	height:15px;
	border:2px solid #198b35;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	flex:none;
	border-radius:2px;
}

.food-symbol:after{
	content:"";
	width:6px;
	height:6px;
	background:#198b35;
	border-radius:50%;
}

.food-symbol.nonveg{
	border-color:#c62828;
}

.food-symbol.nonveg:after{
	background:#c62828;
}

.food-symbol.egg{
	border-color:#d28b00;
}

.food-symbol.egg:after{
	background:#d28b00;
}

.menu-grid{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:20px;
}

.menu-card{
	background:#fff;
	border:1px solid #e9e9e9;
	border-radius:14px;
	overflow:hidden;
	cursor:pointer;
	transition:transform .15s ease,box-shadow .15s ease;
}

.menu-card:hover{
	transform:translateY(-3px);
	box-shadow:0 8px 25px rgba(0,0,0,.08);
}

.menu-card-image{
	display:block;
	width:100%;
	aspect-ratio:1.25/1;
	object-fit:cover;
	background:#eee;
}

.menu-card-content{
	padding:16px;
}

.menu-card-title-row{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:12px;
}

.menu-card-title{
	font-size:17px;
	font-weight:700;
	line-height:1.3;
	display:flex;
	align-items:center;
	gap:7px;
	min-width:0;
}

.menu-card-title-text{
	min-width:0;
}

.menu-card-price{
	font-size:15px;
	font-weight:700;
	white-space:nowrap;
}

.menu-card-description{
	margin-top:9px;
	font-size:13px;
	line-height:1.45;
	color:#777;
	display:-webkit-box;
	-webkit-line-clamp:3;
	-webkit-box-orient:vertical;
	overflow:hidden;
}

.menu-message{
	padding:50px 20px;
	text-align:center;
	color:#777;
	font-size:14px;
	display:none;
}

.menu-message.error{
	color:#c62828;
}

@media(max-width:1000px){
	.menu-grid{
		grid-template-columns:repeat(3,minmax(0,1fr));
	}
}

@media(max-width:700px){
	.menu-heading h1{
		font-size:30px;
	}

	.menu-grid{
		grid-template-columns:repeat(2,minmax(0,1fr));
		gap:12px;
	}

	.menu-card-content{
		padding:13px;
	}

	.menu-card-title{
		font-size:15px;
	}

	.menu-card-price{
		font-size:14px;
	}

	.menu-card-description{
		font-size:12px;
	}
}

@media(max-width:420px){
	.menu-grid{
		grid-template-columns:1fr;
	}

	.menu-card{
		display:grid;
		grid-template-columns:120px minmax(0,1fr);
	}

	.menu-card-image{
		height:100%;
		aspect-ratio:auto;
		min-height:135px;
	}

	.menu-card-content{
		display:flex;
		flex-direction:column;
		justify-content:center;
	}
}


.item-layout{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(400px,500px);
	gap:24px;
	align-items:start;
	padding: 10px;
}

.item-main{
	background:#fff;
	border-radius:14px;
	overflow:hidden;
}

.item-image-wrap{
	width:100%;
}

.item-image{
	display:block;
	width:100%;
	aspect-ratio:1.25/1;
	object-fit:cover;
	background:#eee;
}

.item-info{
	padding:24px;
}

.item-title{
	font-size:28px;
	font-weight:700;
	line-height:1.25;
}

.item-title-with-symbol{
	display:flex;
	align-items:center;
	gap:8px;
}

.item-description{
	margin-top:10px;
	color:#666;
	font-size:14px;
	line-height:1.55;
}

.item-options{
	background:#fff;
	border-radius:14px;
	overflow:hidden;
}

.item-option-group{
	padding:20px;
	border-bottom:1px solid #eee;
}

.item-option-header{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:15px;
	margin-bottom:8px;
}

.item-option-title{
	font-size:18px;
	font-weight:700;
}

.item-option-subtitle{
	margin-top:4px;
	font-size:13px;
	color:#777;
}

.item-option-limit{
	background:#f1f1f1;
	border-radius:5px;
	padding:5px 8px;
	font-size:10px;
	font-weight:700;
	color:#666;
	white-space:nowrap;
}

.item-option{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:15px;
	padding:14px 0;
	border-bottom:1px solid #eee;
	cursor:pointer;
}

.item-option:last-child{
	border-bottom:0;
}

.item-option-left{
	display:flex;
	align-items:center;
	gap:10px;
	min-width:0;
}

.item-option input{
	width:19px;
	height:19px;
	margin:0;
	flex:none;
	accent-color:#111;
	cursor:pointer;
}

.item-option-details{
	min-width:0;
}

.item-option-name{
	font-size:14px;
	line-height:1.35;
	display:flex;
	align-items:center;
	gap:7px;
}

.item-option-note{
	font-size:12px;
	color:#888;
	margin-top:4px;
}

.item-option-tags{
	display:flex;
	flex-wrap:wrap;
	gap:4px;
	margin-top:5px;
}

.item-option-tag{
	font-size:9px;
	font-weight:700;
	text-transform:uppercase;
	background:#f0f0f0;
	color:#666;
	padding:3px 6px;
	border-radius:4px;
}

.item-option-price{
	font-size:14px;
	font-weight:600;
	white-space:nowrap;
}

.item-validation{
	color:#c62828;
	font-size:12px;
	margin-top:8px;
}
#itemContent{
	padding-bottom:110px;
}
.item-bottom{
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	z-index:200;
	display:flex;
	align-items:center;
	gap:15px;
	padding:14px max(20px,calc((100vw - 1200px) / 2 + 20px));
	background:#fff;
	border-top:1px solid #ddd;
	box-shadow:0 -5px 20px rgba(0,0,0,.08);
}
.item-total{
	min-width:90px;
}

.item-total span{
	display:block;
	font-size:10px;
	color:#777;
	text-transform:uppercase;
}

.item-total strong{
	display:block;
	font-size:21px;
	margin-top:3px;
}

.add-to-cart-button{
	flex:1;
	border:0;
	background:#111;
	color:#fff;
	border-radius:9px;
	padding:15px;
	font-size:15px;
	font-weight:700;
	cursor:pointer;
}

@media(max-width:850px){

	.item-layout{
		grid-template-columns:1fr;
		gap:15px;
	}

}
@media(max-width:600px){

	#itemContent{
		padding-bottom:95px;
	}

	.item-bottom{
		padding:12px 16px;
	}

}
@media(max-width:600px){

	.item-layout{
		margin:0 -16px;
	}

	.item-main,
	.item-options{
		border-radius:0;
	}

	.item-info{
		padding:20px 16px;
	}

	.item-title{
		font-size:24px;
	}

	.item-option-group{
		padding:18px 16px;
	}

	.item-bottom{
		padding:12px 16px;
	}

}


.cart-page{
	width:100%;
	max-width:800px;
	margin:0 auto;
}

.cart-items{
	display:flex;
	flex-direction:column;
	gap:12px;
}

.cart-item{
	background:#fff;
	border:1px solid #e7e7e7;
	border-radius:14px;
	overflow:hidden;
}

.cart-item-main{
	display:flex;
	gap:16px;
	padding:16px;
}

.cart-item-image{
	width:100px;
	height:100px;
	border-radius:10px;
	object-fit:cover;
	background:#eee;
	flex:none;
}

.cart-item-details{
	flex:1;
	min-width:0;
}

.cart-item-header{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:15px;
}

.cart-item-title{
	font-size:17px;
	font-weight:700;
	line-height:1.3;
}

.cart-item-price{
	font-size:16px;
	font-weight:700;
	white-space:nowrap;
}

.cart-item-options{
	margin-top:9px;
	font-size:12px;
	color:#777;
	line-height:1.6;
}

.cart-item-option{
	display:block;
}

.cart-item-option-name{
	color:#555;
}

.cart-item-actions{
	display:flex;
	align-items:center;
	gap:8px;
	padding:10px 16px;
	background:#fafafa;
	border-top:1px solid #eee;
}

.cart-item-action{
	border:0;
	background:transparent;
	padding:5px 0;
	font-size:12px;
	font-weight:600;
	color:#444;
	cursor:pointer;
}

.cart-item-action.remove{
	color:#c62828;
}

.cart-item-action-divider{
	width:1px;
	height:15px;
	background:#ddd;
}

.empty-cart{
	display:none;
	text-align:center;
	padding:70px 20px;
	background:#fff;
	border-radius:14px;
	border:1px solid #eee;
}

.empty-cart-icon{
	font-size:35px;
	margin-bottom:15px;
}

.empty-cart h2{
	margin:0;
	font-size:22px;
}

.empty-cart p{
	margin:8px 0 25px;
	color:#777;
	font-size:14px;
}

.cart-summary{
	margin-top:20px;
	padding:20px;
	background:#fff;
	border-radius:14px;
	border:1px solid #eee;
}

.cart-summary-row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	font-size:14px;
	color:#666;
	padding:7px 0;
}

.cart-summary-row strong{
	color:#202020;
	font-size:15px;
}

.cart-total-row{
	border-top:1px solid #eee;
	margin-top:8px;
	padding-top:15px;
	color:#202020;
	font-size:17px;
	font-weight:700;
}

.cart-total-row strong{
	font-size:21px;
}

.cart-primary-button{
	width:100%;
	border:0;
	background:#111;
	color:#fff;
	border-radius:9px;
	padding:15px;
	font-size:15px;
	font-weight:700;
	cursor:pointer;
	margin-top:18px;
}

.cart-secondary-button{
	width:100%;
	border:1px solid #ddd;
	background:#fff;
	color:#202020;
	border-radius:9px;
	padding:14px;
	font-size:14px;
	font-weight:600;
	cursor:pointer;
	margin-top:9px;
}

.cart-primary-button:hover{
	background:#222;
}

.cart-secondary-button:hover{
	background:#f7f7f7;
}

@media(max-width:600px){

	.cart-page{
		margin:0;
	}

	.cart-item-main{
		padding:13px;
		gap:12px;
	}

	.cart-item-image{
		width:82px;
		height:82px;
	}

	.cart-item-title{
		font-size:15px;
	}

	.cart-item-price{
		font-size:14px;
	}

	.cart-item-actions{
		padding:9px 13px;
	}

	.cart-summary{
		border-radius:12px;
	}

}

.login-container,
.address-page{
	width:100%;
	max-width:520px;
	margin:0 auto;
}

.login-heading,
.address-heading{
	margin-bottom:28px;
}

.login-heading h1,
.address-heading h1{
	margin:0;
	font-size:30px;
	line-height:1.2;
}

.login-heading p,
.address-heading p{
	margin:8px 0 0;
	color:#777;
	font-size:14px;
}

.login-step label{
	display:block;
	margin-bottom:8px;
	font-size:13px;
	font-weight:600;
}

.phone-input{
	display:flex;
	align-items:center;
	border:1px solid #ddd;
	border-radius:9px;
	background:#fff;
	overflow:hidden;
}

.phone-input span{
	padding-left:14px;
	color:#777;
	font-size:15px;
}

.phone-input input{
	width:100%;
	border:0;
	outline:0;
	padding:14px 12px;
	font-size:16px;
	background:transparent;
}

.otp-input{
	display:block;
	width:100%;
	border:1px solid #ddd;
	border-radius:9px;
	background:#fff;
	padding:14px;
	font-size:22px;
	letter-spacing:8px;
	text-align:center;
	outline:0;
}

.otp-hint{
	margin-top:9px;
	font-size:12px;
	color:#777;
	text-align:center;
}

.login-error{
	min-height:18px;
	margin-top:7px;
	color:#c62828;
	font-size:12px;
}

.address-list{
	display:flex;
	flex-direction:column;
	gap:10px;
}

.address-card{
	position:relative;
	background:#fff;
	border:1px solid #ddd;
	border-radius:12px;
	padding:16px;
	cursor:pointer;
}

.address-card.selected{
	border:2px solid #111;
	padding:15px;
}

.address-card-header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
}
.address-card.disabled{
	opacity:.55;
	cursor:not-allowed;
	background:#f8f8f8;
}

.address-card.disabled .address-name{
	color:#777;
}

.address-distance{
	margin-top:9px;
	font-size:11px;
	color:#777;
}

.address-delivery-error{
	margin-top:8px;
	color:#c62828;
	font-size:11px;
	font-weight:600;
}

.address-name{
	font-size:16px;
	font-weight:700;
}

.address-default{
	font-size:9px;
	font-weight:700;
	text-transform:uppercase;
	background:#eee;
	padding:4px 7px;
	border-radius:4px;
}

.address-details{
	margin-top:8px;
	color:#666;
	font-size:13px;
	line-height:1.5;
}

.address-radio{
	position:absolute;
	top:17px;
	right:17px;
	width:18px;
	height:18px;
	accent-color:#111;
}

.add-address-button{
	width:100%;
	border:1px dashed #bbb;
	background:#fff;
	color:#333;
	border-radius:9px;
	padding:13px;
	font-size:14px;
	font-weight:600;
	margin-top:12px;
	cursor:pointer;
}

@media(max-width:600px){

	.login-heading h1,
	.address-heading h1{
		font-size:25px;
	}

}

.site-footer{
	max-width:1200px;
	margin:0 auto;
	padding:20px 24px 30px;
	text-align:center;
	color:#888;
	font-size:11px;
	line-height:1.6;
}

@media(max-width:600px){
	.site-footer{
		padding:15px 16px 25px;
		font-size:10px;
	}
}


.view-payment{
	background:#fff;
	display:none;
	align-items:center;
	justify-content:center;
}

.view-payment.active{
	display:flex;
}

.payment-redirect{
	width:100%;
	max-width:420px;
	padding:30px;
	text-align:center;
}

.payment-redirect-icon{
	width:64px;
	height:64px;
	margin:0 auto 24px;
	border-radius:50%;
	background:#111;
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:30px;
}

.payment-redirect h1{
	margin:0;
	font-size:25px;
	line-height:1.25;
}

.payment-redirect p{
	margin:12px 0 0;
	color:#777;
	font-size:14px;
	line-height:1.5;
}

.payment-loader{
	display:flex;
	justify-content:center;
	gap:5px;
	margin-top:25px;
}

.payment-loader span{
	width:6px;
	height:6px;
	background:#111;
	border-radius:50%;
	animation:paymentLoader .9s infinite ease-in-out;
}

.payment-loader span:nth-child(2){
	animation-delay:.15s;
}

.payment-loader span:nth-child(3){
	animation-delay:.3s;
}

@keyframes paymentLoader{

	0%,
	80%,
	100%{
		transform:scale(.6);
		opacity:.4;
	}

	40%{
		transform:scale(1);
		opacity:1;
	}

}