/* ==========================================
   AJ LEGACY RESTAURANT ENGINE
   Build 001
   STYLE.CSS
========================================== */


/* ==========================================
   ROOT
========================================== */

:root{
    --primary:#ff6b00;
    --secondary:#222222;
    --background:#f8f8f8;
    --white:#ffffff;
    --text:#333333;
    --border:#dddddd;
    --radius:15px;
}


/* ==========================================
   RESET
========================================== */

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


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

body{

    font-family:Arial,Helvetica,sans-serif;

    max-width:430px;

    width:100%;

    min-height:100vh;

    margin:0 auto;

}


/* ==========================================
   IMAGE
========================================== */

img{
    display:block;
    max-width:100%;
}


/* ==========================================
   LINK
========================================== */

a{
    text-decoration:none;
    color:inherit;
}


/* ==========================================
   BUTTON
========================================== */

button{
    cursor:pointer;
    border:none;
    outline:none;
    font-size:16px;
}


/* ==========================================
   SECTION
========================================== */

section{
    padding:20px;

}


/* ==========================================
   SPLASH SCREEN
========================================== */

#splashScreen{
    position:fixed;
    inset:0;
    background:var(--white);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:15px;
    z-index:9999;
}

#logoSplash{
    width:140px;
}

#restaurantNameSplash{
    font-size:24px;
    font-weight:bold;
    text-align:center;
}


/* ==========================================
   HOMEPAGE
========================================== */

#homepage{

    width:100%;

    padding-bottom:40px;

    background:#000;

}

main{

    display:block;

    background:#000;

}

/* ==========================================
   HEADER
========================================== */

#header{
    position:relative;
    text-align:center;
    padding:20px;
    background:#000000;
}

#heroBanner{
    position:relative;
    margin-top:20px;
}

#infoButton{
    position:absolute;
    top:15px;
    right:15px;
    padding:10px 18px;
    border-radius:30px;
    border:2px solid #2E7D32;
    background:rgba(0,0,0,.75);
    color:white;
    font-weight:bold;
    cursor:pointer;
 
}

#viewMenuBtn{
    position:absolute;
    left:50%;
    bottom:20px;
    transform:translateX(-50%);


    width:80%;
    padding:15px;
    border:none;
    border-radius:40px;
    background:#f39c12;
    color:white;
    font-size:18px;
    font-weight:bold;
    cursor:default;
}

#heroImage{
    width:100%;
    border-radius:20px;
    display:block;
}

#logo{
    width:150px;
    margin:0 auto 15px;
}

#restaurantName{
    font-size:28px;
    font-weight:bold;
    margin-bottom:10px;
}

#tagline{
    font-size:16px;
    color:#666;
}

#logo,
#restaurantName,
#tagline
	{
    	display:none;
	}


/* ==========================================
   CATEGORY
========================================== */

#categorySection{
    padding:20px;
background:#000000;
}

#categoryContainer{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.categoryCard{
    position:relative;
    background:#111;
    border-radius:22px;
    overflow:hidden;
    padding:0;
    cursor:pointer;
    border:2px solid #ff9d00;
    transition:.3s;
}

.categoryCard img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
aspect-ratio:13/16;
}

.categoryCard h3{
    display:none;
}

.categoryCard p{
    display:none;
}

.categoryCard:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 20px rgba(0,0,0,.4);
}

.menuCard{
    background:#ffffff;
    border-radius:18px;
    padding:18px;
    margin-bottom:14px;
    border:1px solid #eeeeee;
    box-shadow:0 5px 12px rgba(0,0,0,.08);
    transition:.25s;
}

.menuCard:active{
    transform:scale(.98);
}

.menuCard:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 18px rgba(0,0,0,.15);
}

.menuCard h3{
    font-size:20px;
    font-weight:700;
    color:#222;
    margin-bottom:8px;
}

.menuCard p{
    font-size:18px;
    color:#ff7a00;
    font-weight:bold;
}


/* ==========================================
   ABOUT
========================================== */

#aboutSection{
    padding:20px;
}

#aboutSection h2{
    margin-bottom:15px;
}

#aboutContainer{
    background:var(--white);
    border-radius:var(--radius);
    padding:20px;
    border:1px solid var(--border);
}


/* ==========================================
   GALLERY
========================================== */

#gallerySection{
    padding:20px;
}

#gallerySection h2{
    margin-bottom:15px;
}

#galleryContainer{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}


/* ==========================================
   REVIEW
========================================== */

#reviewSection{
    padding:20px;
}

#reviewSection h2{
    margin-bottom:15px;
}

#reviewContainer{
    display:flex;
    flex-direction:column;
    gap:15px;
}


/* ==========================================
   LOCATION
========================================== */

#locationSection{
    padding:20px;
}

#locationSection h2{
    margin-bottom:15px;
}

#locationContainer{
    background:var(--white);
    border-radius:var(--radius);
    overflow:hidden;
}


/* ==========================================
   CONTACT
========================================== */

#contactSection{
    padding:20px;
}

#contactSection h2{
    margin-bottom:15px;
}

#contactContainer{
    background:var(--white);
    border-radius:var(--radius);
    padding:20px;
    border:1px solid var(--border);
}


/* ==========================================
   POPUP
========================================== */

.popup{

    position:fixed;

    inset:0;

    display:none;

    justify-content:center;

    align-items:center;

    padding:15px;

    background:rgba(0,0,0,.75);

    z-index:9999;

}


/* ==========================================
   POPUP CONTENT
========================================== */

.popupContent{

    position:relative;

    width:380px;

    max-width:95vw;

    height:90vh;

    max-height:90vh;

    background:#181818;

    border:2px solid #1f9d55;

    border-radius:20px;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    box-shadow:0 15px 40px rgba(0,0,0,.5);

}

.popupContent button:not(.closePopup){
    width:100%;
    padding:14px;
    border:none;
    border-radius:12px;
    background:#222;
    color:white;
    font-size:17px;
    text-align:left;
    cursor:pointer;
    transition:.2s;
}

.popupContent button:hover{
    background:#1f9d55;
}

.popupContent button:last-child{
    background:#b22222;
    text-align:center;
}


/* ==========================================
   CLOSE POPUP
========================================== */

.closePopup{

    position:absolute;

    top:10px;

    right:10px;

    width:40px;

    height:40px;

    border:none;

    border-radius:50%;

    background:#d32f2f;

    color:#fff;

    font-size:26px;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:20;

}

/* ==========================================
   POPUP TITLE
========================================== */

.popupContent h2{
    text-align:center;
    margin-bottom:20px;
}


/* ==========================================
   INFO POPUP
========================================== */
#infoMenu
	{
    	display:flex;
    	gap:10px;
    	overflow-x:auto;
    	margin:20px 0;
    	padding-bottom:10px;
	}

#infoMenu button
	{
    	flex:0 0 auto;
    	padding:10px 18px;
    	border:none;
    	border-radius:25px;
    	background:#eeeeee;
    	color:#333;
    	font-size:15px;
    	font-weight:bold;
    	cursor:pointer;
    	transition:.2s;
	}

#infoMenu button:hover
	{
    	background:#f39c12;
    	color:#fff;
	}

#infoMenu button:active
	{
    	transform:scale(.97);
	background:#f39c12;
    	color:#ffffff;
	}

/* ==========================================
   ABOUT INFO
========================================== */
.aboutInfo
	{
    	text-align:center;
	}

.aboutChefImage
	{
    	width:140px;
    	height:140px;
    	border-radius:50%;
    	object-fit:cover;
    	margin:10px auto 20px;
	}

.aboutTagline
	{
    	color:#777;
    	margin-bottom:20px;
	}

.aboutText
	{
    	text-align:left;
    	line-height:1.7;
    	color:#555;
	}


/* ==========================================
   INFO GALLERY
========================================== */
.galleryGrid
	{
    	display:grid;
    	grid-template-columns:repeat(2,1fr);
    	gap:12px;
    	margin-top:15px;
	}

.galleryGrid img
	{
    	width:100%;
    	aspect-ratio:1/1;
    	object-fit:cover;
    	border-radius:15px;
    	cursor:pointer;
    	transition:.2s;
	}

.galleryGrid img:hover
	{
    	transform:scale(1.03);
	}


/* ==========================================
   INFO REVIEW
========================================== */
.reviewCard
	{
    	background:#ffffff;
    	border-radius:15px;
    	padding:18px;
    	margin-top:15px;
    	box-shadow:0 4px 10px rgba(0,0,0,.08);
	}

.reviewCard p
	{
   	 margin:12px 0;
    	line-height:1.6;
    	color:#555;
	}

.reviewCard span
	{
    	font-size:14px;
    	color:#888;
	}

/* ==========================================
   INFO LOCATION
========================================== */
.locationCard
	{
    	background:#ffffff;
    	border-radius:15px;
    	padding:20px;
    	text-align:center;
    	box-shadow:0 5px 12px rgba(0,0,0,.08);
	}

.locationCard h3
	{
    	margin-bottom:10px;
	}

.locationCard p
	{
    	color:#666;
    	margin-bottom:20px;
    	line-height:1.6;
	}

.mapBtn
	{
    	width:100%;
    	padding:14px;
    	border:none;
    	border-radius:30px;
    	background:#2E7D32;
    	color:#ffffff;
    	font-size:16px;
    	font-weight:bold;
    	cursor:pointer;
    	transition:.2s;
	}

.mapBtn:hover
	{
    	background:#388E3C;
	}

.mapBtn:active
	{
    	transform:scale(.98);
	}


/* ==========================================
   INFO CONTACT
========================================== */
.contactCard
	{
    	display:flex;
    	flex-direction:column;
    	gap:15px;
    	margin-top:20px;
	}

.contactBtn
	{
    	width:100%;
    	padding:15px;
    	border:none;
    	border-radius:30px;
    	color:#ffffff;
    	font-size:17px;
    	font-weight:bold;
    	cursor:pointer;
    	transition:.2s;
	}

.contactBtn:active
	{
    	transform:scale(.98);
	}

.whatsappBtn
	{
    	background:#25D366;
	}

.facebookBtn
	{
    	background:#1877F2;
	}

.instagramBtn
	{
    	background:#E1306C;
	}

.tiktokBtn
	{
    	background:#111111;
	}


/* ==========================================
   CATEGORY MENU
========================================== */

#categoryMenuContainer{

    display:flex;

    flex-direction:column;

    gap:10px;

    padding:14px 0 18px;

}


/* ==========================================
   PRODUCT
========================================== */
.productHero{

    position:relative;

}

.popularBadge{

    position:absolute;

    top:18px;

    left:18px;

    background:#ff6b00;

    color:#fff;

    padding:8px 18px;

    border-radius:30px;

    font-size:13px;

    font-weight:bold;

    letter-spacing:.5px;

    z-index:20;

}

.productBody{

    background:#fff;

    margin-top:-28px;

    position:relative;

    border-radius:28px 28px 0 0;

    padding:22px;

}

.productCategory{

    color:#ff6b00;

    font-size:20px;

    font-style:italic;

    margin-bottom:6px;

}



#productContainer{

    display:flex;

    flex-direction:column;

    gap:0;

}


/* ==========================================
   DRINK
========================================== */

#drinkContainer{
    display:flex;
    flex-direction:column;
    gap:12px;
}


/* ==========================================
   PRODUCT IMAGE
========================================== */

.productImage{

    width:100%;

    height:280px;

    display:block;

    object-fit:cover;

    border-radius:28px 28px 0 0;

}

/* ==========================================
   PRODUCT title
========================================== */
.productTitle{

    font-size:30px;

    font-weight:700;

    line-height:1.2;

    margin-bottom:8px;

    text-align:left;

}

/* ==========================================
   PRODUCT description
========================================== */
.productDescription{

    color:#777;

    font-size:17px;

    margin-bottom:25px;

    text-align:left;

}


/* ==========================================
   OPTION
========================================== */

#productOption{

    display:flex;

    gap:15px;

    margin-bottom:25px;

}

.optionCard{

    flex:1;

    border:2px solid #dddddd;

    border-radius:18px;

    padding:18px;

    cursor:pointer;

    text-align:center;

    transition:.25s;

    background:#ffffff;

}


.optionContent{

    flex:1;

}

.adminOptionRow{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    border:2px solid #dddddd;

    border-radius:18px;

    padding:18px;

    margin-bottom:10px;

    background:#ffffff;

}

.deleteOptionButton{

    width:42px;

    height:42px;

    border:none;

    border-radius:10px;

    background:#ff3b30;

    color:#ffffff;

    font-size:20px;

    cursor:pointer;

}

.deleteOptionButton:hover{

    background:#d70015;

}





.optionCard:hover{

    border-color:#ff6b00;

}

.optionCard input{

    accent-color:#ff6b00;

    transform:scale(1.3);

    margin-bottom:12px;

}

.optionCard:has(input:checked){

    border:2px solid #ff6b00;

    background:#fff4ea;

    box-shadow:0 5px 15px rgba(255,107,0,.18);

}


.optionName{

    font-size:18px;

    font-weight:bold;

}

.optionPrice{

    margin-top:8px;

    color:#ff6b00;

    font-size:20px;

    font-weight:bold;

}


/* ==========================================
   ADDON
========================================== */

#productAddon{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-bottom:25px;

}

.addonCard{

    display:flex;

    align-items:center;

    gap:12px;

    padding:15px;

    border:1px solid #dddddd;

    border-radius:15px;

    background:#ffffff;

    cursor:pointer;

}

.addonCard input{

    accent-color:#ff6b00;

    transform:scale(1.2);

}

.addonName{

    flex:1;

    font-weight:600;

}

.addonPrice{

    color:#ff6b00;

    font-weight:bold;

}

/* ==========================================
  remark
========================================== */
#productRemark{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:25px;

}

.remarkBtn{

    padding:12px 18px;

    border:1px solid #dddddd;

    border-radius:30px;

    background:#ffffff;

    color:#444;

    font-size:15px;

    cursor:pointer;

}


.remarkBtn.active{

    background:#ff6b00;

    color:#ffffff;

    border-color:#ff6b00;

}



/* ==========================================
   ADD TO CART BUTTON
========================================== */

#addCartBtn{

    width:100%;

    height:55px;

    margin-top:20px;

    border:none;

    border-radius:30px;

    background:#f39c12;

    color:#ffffff;

    font-size:20px;

    font-weight:bold;

    cursor:pointer;

    transition:.2s;

}

#addCartBtn:hover{

    background:#ffb000;

}

#addCartBtn:active{

    transform:scale(.98);

}


/* ==========================================
   CART
========================================== */

#cartContainer{

    flex:1;

    min-height:0;

    overflow-y:auto;

    overflow-x:hidden;

    -webkit-overflow-scrolling:touch;

    padding:10px;

}

.cartItem{
    background:var(--background);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:15px;
}

.cartTop{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:8px;
}
.cartBottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:10px;
}

.cartName{
    font-size:8px;
    font-weight:bold;
    margin-bottom:8px;
}

.cartOption{
    font-size:14px;
    color:#666666;
    margin-bottom:5px;
}

.cartPrice{
    font-size:18px;
    font-weight:bold;
    color:var(--primary);
    margin-top:10px;
}


/* ==========================================
   QUANTITY
========================================== */

.bottomOrder{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    margin:25px 0;

    gap:20px;

}

.qtyArea{

    flex:1;

}

.priceArea{

    flex:1;

    text-align:right;

}

.bottomTitle{

    font-size:15px;

    font-weight:bold;

    margin-bottom:10px;

}

.livePrice{

    font-size:42px;

    font-weight:bold;

    color:#ff6b00;

    line-height:1;

}



.qtyBox{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    gap:10px;

}

.qtyBtn{
    width:35px;
    height:35px;
    border-radius:8px;
    background:var(--primary);
    color:#ffffff;
    font-size:18px;
}

.qtyValue{
    min-width:30px;
    text-align:center;
    font-weight:bold;
}


/* ==========================================
   DELETE BUTTON
========================================== */

.deleteBtn{
    width:40px;
    height:40px;
    background:#ff4d4d;
    color:#ffffff;
    border-radius:8px;
    font-size:18px;
}


/* ==========================================
   CART TOTAL
========================================== */

#cartTotal{
    margin-top:20px;
    padding:15px;
    border-radius:var(--radius);
    background:var(--secondary);
    color:#ffffff;
    text-align:center;
    font-size:20px;
    font-weight:bold;
flex-shrink:0;
}


/* ==========================================
   ORDER FORM
========================================== */

#tableContainer,
#orderRemarkContainer{
    margin-top:20px;
}

#tableNumber,
#orderRemark{
    width:100%;
    padding:12px;
    margin-top:8px;
    border:1px solid var(--border);
    border-radius:10px;
    font-size:16px;
}

#orderRemark{
    resize:vertical;
}


/* ==========================================
   BUTTON
========================================== */

#addMoreMenuBtn,
#submitOrderBtn,
#confirmOrderBtn,
#backToCartBtn,
#closeSuccessBtn,
#clearCartBtn
	{
    	width:100%;
    	padding:14px;
    	margin-top:15px;
    	border-radius:12px;
    	font-size:16px;
    	font-weight:bold;
	}

#submitOrderBtn,
#confirmOrderBtn
	{
    	background:var(--primary);
    	color:#ffffff;
	}

#addMoreMenuBtn,
#backToCartBtn
	{
    	background:#eeeeee;
	}

#closeSuccessBtn
	{
    	background:#28a745;
    	color:#ffffff;
	}
#clearCartBtn
	{
    	background:#ff4d4d;
    	color:#ffffff;
	}


/* ==========================================
   ORDER RECEIVED
========================================== */

#orderReceivedBtn{

    width:100%;

    margin-top:20px;

    padding:16px;

    border:none;

    border-radius:12px;

    background:#28a745;

    color:#ffffff;

    font-size:18px;

    font-weight:bold;
display:none;

}

#orderReceivedBtn:active{

    transform:scale(.98);

}




/* ==========================================
   SUCCESS
========================================== */

#successPopup .popupContent{
    text-align:center;
}


/* ==========================================
   FOOTER
========================================== */

#footer {
    background: #000000;
    color: #ffffff;
    text-align: center;
    padding: 15px 0;
    margin: 0;
}


/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width:430px){
    #header{
        padding:25px 15px;
    }
    #restaurantName{
        font-size:24px;
    }
    #tagline{
        font-size:15px;
    }
    #categoryContainer{
        grid-template-columns:repeat(2,1fr);
        gap:12px;
    }
    .categoryCard{
        padding:0px;
    }
.categoryCard img{
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .popup{
        padding:15px;
    }
    .popupContent{

    max-height:90vh;
    padding:0;

}
    button{
        font-size:15px;
    }
}


/* ==========================================
   DESKTOP
========================================== */

@media (min-width:431px){
    body{
        box-shadow:0 8px 25px rgba(0,0,0,.35);
    }
}



/* ==========================================
   DRINK ROW
========================================== */

.drinkRow{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:12px 0;

    border-bottom:1px solid #dddddd;

}

.drinkName{

    flex:2;

    padding-left:10px;

    font-weight:bold;

}

.drinkPrice{

    width:90px;

    text-align:center;

    font-weight:bold;

    color:var(--primary);

}

.drinkQty{

    display:flex;

    align-items:center;

    gap:12px;

}


#addDrinkCartBtn{

    width:100%;

    margin-top:20px;

    padding:12px;

    background:#ff8800;

    color:#fff;

    border:none;

    border-radius:8px;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

}






.drinkHeader{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:8px 10px;

    margin-bottom:10px;

    font-weight:bold;

    border-bottom:2px solid #dddddd;

}

.drinkColName{

    flex:2;

}

.drinkColPrice{

    width:90px;

    text-align:center;

}

.drinkColQty{

    width:100px;

    text-align:center;

}

/*
.drinkCard{
 

    position:relative;
    display:flex;
    align-items:center;
    gap:8px;  			/* jarak gambar dgn nama */
    background:#ffffff;
    border-radius:10px;  	/* saiz bucu kotak */
    padding:0px 10px;   	/*tinggi kotak*/
    height:100px;		/*tinggi kotak*/
    margin:0px 12px;    	/* jarak kotak */
    border:1px solid #ececec;
    box-shadow:0 4px 14px rgba(0,0,0,.10);
    cursor:pointer;
    transition:.25s;


    display:flex;
    align-items:center;
    gap:0px;
    background:#fff;
    border-radius:12px;
    padding:10px;
    margin:0 12px 8px 12px;
    box-shadow:0 4px 12px rgba(0,0,0,.08);

}
*/
.drinkImage{

    width:90px;

    height:80px;

    object-fit:cover;

    border-radius:10px;

}

.drinkInfo{

    flex:1;

}

.drinkName{

    font-size:22px;

    font-weight:bold;

    margin-bottom:8px;

}

.drinkOption{

    display:inline-block;

    padding:5px 10px;

    background:#fff3e6;

    color:#ff6b00;

    border-radius:20px;

    font-size:13px;

}

.drinkRight{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:15px;

}

.drinkPrice{

    font-size:26px;

    font-weight:bold;

    color:#ff5a00;

}

.drinkQtyBox{

    display:flex;

    align-items:center;

    gap:10px;

}


/* ==========================================
   DRINK POPUP
========================================== */

.drinkCard{

    display:flex;
    align-items:center;
    gap:10px;
    background:#fff;
    border-radius:16px;
    padding:10px;

    margin:0 12px 0px 12px;

    box-shadow:0 4px 12px rgba(0,0,0,.08);

}

.drinkImage{

    width:80px;

    height:80px;

    border-radius:12px;

    object-fit:cover;

    flex-shrink:0;

}

.drinkInfo{

    flex:1;

}

.drinkName{

    font-size:18px;

    font-weight:700;

    color:#222;

    margin-bottom:6px;

}

.drinkOption{

    font-size:14px;

    color:#777;

}

.drinkRight{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:10px;

}

.drinkPrice{

    font-size:18px;

    font-weight:bold;

    color:#d35400;

}

.drinkQtyBox{

    display:flex;

    align-items:center;

    gap:10px;

}

.drinkCheckout{

    width:100%;

    margin-top:20px;

    padding:15px;

    border:none;

    border-radius:14px;

    background:#d35400;

    color:#fff;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

}


/* ==========================================
   floating current order 
========================================== */
.floatingCurrentOrder{

    position:fixed;

    bottom:95px;

    right:20px;

    width:55px;

    height:55px;

    border-radius:50%;

    background:#ff9800;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:26px;

    cursor:pointer;

    box-shadow:0 4px 10px rgba(0,0,0,.3);

    z-index:9999;

}

/* ==========================================
   categoryHeader
========================================== */

.categoryHeader{

    margin:0;

    padding:0;

}

.categoryCarousel{
    display:flex;
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    overscroll-behavior-x:contain;
    touch-action:pan-x;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}

.categoryCarousel::-webkit-scrollbar{ display:none; }

.categorySlide{
    flex:0 0 100%;
    width:100%;
    scroll-snap-align:start;
    scroll-snap-stop:always;
}


.categoryBanner{
    width:100%;
    height:auto;
    object-fit:cover;
    display:block;
}

.categoryDots{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:18px;
    padding:5px 10px;
    background:#171717;
}

#categoryDots .categoryDot{
    width:6px !important;
    height:6px !important;
    min-width:6px !important;
    min-height:6px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.42) !important;
    box-shadow:none !important;
    transition:background .15s ease, transform .15s ease;
}

#categoryDots .categoryDot.active{
    width:6px !important;
    background:#ffffff !important;
    transform:scale(1.25);
}
.categoryIcon{

    font-size:34px;

    margin-bottom:6px;

}

.categorySubtitle{
    color:#f3f3f3;
    font-size:15px;
    letter-spacing:.5px;
}


.categoryDivider{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin:15px 0;

}

.categoryDivider::before,
.categoryDivider::after{
    	content:"";
    	width:90px;
	background:linear-gradient(90deg,#d62828,#ffffff,#2e7d32);
	height:2px;

}

.categoryFooter{
    	text-align:center;
	color:#ddd;
	font-size:13px;
	margin-top:18px;
}


/* ===========================
   CATEGORY MENU NEW
=========================== */

.menuCardNew{

    position:relative;

    display:flex;

    align-items:center;

    gap:8px;  			/* jarak gambar dgn nama */

    background:#ffffff;

    border-radius:10px;  	/* saiz bucu kotak */

    padding:8px 10px;   	/*tinggi kotak*/
    height:100px;		/*tinggi kotak*/
    margin:0px 12px;    	/* jarak kotak */

    border:1px solid #ececec;

    box-shadow:0 4px 14px rgba(0,0,0,.10);

    cursor:pointer;

    transition:.25s;

}

.menuCardNew:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 18px rgba(0,0,0,.15);

}

.menuCardNew:hover{

    transform:translateY(-2px);

}

.menuImage{

    width:95px;

    height:80px;

    border-radius:10px;

    object-fit:cover;

    flex-shrink:0;

}

.menuInfo{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.menuName{

    font-size:18px;

    font-weight:700;

    color:#222;

    line-height:1.25;

    margin-bottom:6px;

}

.menuDesc{

    color:#666;

    font-size:13px;

    line-height:1.45;

    margin-bottom:10px;

}

.menuPrice{

    font-size:20px;

    font-weight:700;

    color:#c62828;

}

.weightPrice{

    display:block;
    font-size:13px;
    line-height:1.2;
    font-weight:700;
    color:#a63d2f;
    text-align:center;

}



.menuRight{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:12px;

    padding-top:10px;

}

.menuArrow{

    width:30px;

    height:30px;

    border-radius:50%;

    background:#ffffff;

    border:1px solid #e5e5e5;

    box-shadow:0 3px 8px rgba(0,0,0,.10);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#c62828;

    font-size:18px;

}

.menuNo{

    position:absolute;

    left:8px;

    top:8px;

    width:24px;

    height:24px;

    border-radius:8px;

    background:#f6b100;

    color:#ffffff;

    font-size:12px;

    font-weight:bold;

    display:flex;

    align-items:center;

    justify-content:center;

}

.popularBadge{

    display:inline-block;

    padding:4px 10px;

    background:#fff3e6;

    color:#ff7a00;

    border-radius:20px;

    font-size:12px;

    font-weight:bold;

}



/* ==========================================
   MY ORDER V2
========================================== */

.cartPopupContent{

    position:relative;

    width:380px;

    max-width:95vw;

    height:90vh;

    max-height:90vh;

    background:#181818;

    border:2px solid #1f9d55;

    border-radius:20px;

    display:flex;

    flex-direction:column;

    overflow:hidden;

}
.cartHeader{

    text-align:center;
    margin-bottom:15px;

}

.cartHeader h2{

    margin:0;
    font-size:28px;
    font-weight:700;

}

.cartDivider{

    width:80px;
    height:4px;
    background:#f7941d;
    border-radius:10px;
    margin:12px auto 0;

}

/* TOTAL */

#cartTotal{

    background:#fff8ef;
    border:2px solid #f7941d;
    border-radius:16px;
    padding:15px;
    margin:18px 0;
    text-align:center;
    font-size:22px;
    font-weight:bold;

}

/* ORDER SECTION */

.orderSection{
 flex-shrink:0;
    margin-top:20px;

}

.orderSection h3{

    text-align:center;
    margin-bottom:15px;

}

/* ORDER CARD */

.orderType{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;

}

.orderCard{

    border:2px solid #ddd;
    border-radius:16px;
    padding:15px;
    text-align:center;
    cursor:pointer;
    transition:.2s;

}

.orderCard input{

    display:none;

}

.orderIcon{

    display:block;
    font-size:28px;
    margin-bottom:8px;

}

.orderCard:has(input:checked){

    border:2px solid #f7941d;
    background:#fff4e8;

}

/* BOTTOM BUTTON */

.cartBottomAction{
    flex-shrink:0;
    display:flex;
    gap:10px;
    margin-top:15px;

}

.cartBottomAction button{

    flex:1;

}


/* ==========================================
   MY ORDER CARD V2
========================================== */

.cartItemNew{

    display:flex;
    align-items:flex-start;
    gap:12px;

    background:#fff;

    border-radius:18px;

    padding:12px;

    margin-bottom:15px;

    box-shadow:0 3px 10px rgba(0,0,0,.08);

}

.cartImage{

    width:80px;

    flex-shrink:0;

}

.cartImage img{

    width:80px;

    height:80px;

    object-fit:cover;

    border-radius:15px;

}

.cartNoImage{

    width:80px;

    height:80px;

    border-radius:15px;

    background:#f5f5f5;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:36px;

}

.cartCenter{

    flex:1;

}

.cartFoodName{

    font-size:18px;

    font-weight:700;

    color:#222;

    margin-bottom:3px;

}

.cartFoodOption{

    color:#666;

    font-size:14px;

    margin-bottom:5px;

}

.cartAddon{

    color:#ff6b00;

    font-size:13px;

    margin-bottom:3px;

}

.cartRemark{

    color:#888;

    font-size:13px;

    margin-bottom:8px;

}

.cartQtyRow{

    display:flex;

    align-items:center;

    gap:8px;

    margin-top:8px;

}

.cartQtyRow .qtyBtn{

    width:32px;

    height:32px;

    border:none;

    border-radius:8px;

    background:#f7941d;

    color:#fff;

    font-size:18px;

    cursor:pointer;

}

.cartQtyRow .qtyValue{

    min-width:25px;

    text-align:center;

    font-weight:bold;

}

.cartRight{

    width:90px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    align-items:flex-end;

}

.cartItemPrice{

    color:#f7941d;

    font-size:17px;

    font-weight:700;

    text-align:right;

}

.cartRight .deleteBtn{

    margin-top:25px;

    width:42px;

    height:42px;

    border:none;

    border-radius:10px;

    background:#ff4d4f;

    color:#fff;

    font-size:20px;

    cursor:pointer;

}

/* TOTAL */

.cartTotalBox{

    background:#fff4e8;

    border:2px solid #f7941d;

    border-radius:18px;

    padding:15px;

    text-align:center;

}

.cartTotalTitle{

    color:#888;

    font-size:14px;

    letter-spacing:1px;

}

.cartTotalValue{

    margin-top:5px;

    font-size:28px;

    font-weight:700;

    color:#f7941d;

}


/* ==========================================
   CART BODY V2
========================================== */

.cartBody{

    flex:1;

}

.cartTopRow{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:10px;

}

.cartTitle{

    flex:1;

    font-size:18px;

    font-weight:700;

    line-height:1.2;

    color:#222;

}

.cartPriceNew{

    color:#f26a00;

    font-size:22px;

    font-weight:700;

    white-space:nowrap;

}

.cartOptionNew{

    margin-top:6px;

    color:#777;

    font-size:15px;

    font-weight:600;

}

.cartBottomRow{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:15px;

}

.cartBottomRow .deleteBtn{

    width:46px;

    height:46px;

    border:none;

    border-radius:12px;

    background:#ff5b5b;

    color:#fff;

    font-size:20px;

}



/* ===========================
   ORDER SUMMARY
=========================== */

.summaryCard{
display:flex;
justify-content:space-between;
align-items:flex-start;
background:#fff;
border-radius:14px;
padding:12px;
margin-bottom:12px;
box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.summaryLeft{
display:flex;
gap:12px;
flex:1;
}

.summaryImg{
width:90px;
height:90px;
border-radius:10px;
object-fit:cover;
background:#f3f3f3;
flex-shrink:0;
}

.summaryInfo{
flex:1;
}

.summaryName{
font-size:16px;
font-weight:700;
color:#222;
margin-bottom:4px;
}

.summaryOption{
font-size:13px;
color:#666;
margin-bottom:5px;
}

.summaryAddon{
font-size:13px;
font-weight:600;
color:#e86a00;
margin-top:2px;
}

.summaryRemark{
font-size:13px;
color:#777;
font-style:italic;
margin-top:4px;
}

.summaryRight{
display:flex;
flex-direction:column;
justify-content:center;
align-items:flex-end;
gap:12px;
margin-top:18px;
margin-left:10px;
}

.summaryQty{
background:#ff7a00;
color:#fff;
padding:4px 12px;
border-radius:30px;
font-size:13px;
font-weight:bold;
}

.summaryPrice{
font-size:17px;
font-weight:bold;
color:#222;
}

/* ===========================
   ORDER INFO
=========================== */

.summaryBox{
background:#fff8ef;
border:1px solid #ffd3a3;
border-radius:14px;
padding:14px;
margin:18px 0;
line-height:1.8;
font-size:14px;
}

.summaryBoxTitle{
font-size:15px;
font-weight:bold;
margin-bottom:8px;
color:#ff7a00;
}

/* ===========================
   TOTAL
=========================== */

.summaryTotalBox{
background:#fff;
border-radius:14px;
padding:14px;
margin-bottom:18px;
box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.summaryRow{
display:flex;
justify-content:space-between;
margin:8px 0;
font-size:15px;
}

.summaryGrandTotal{
border-top:1px dashed #ddd;
padding-top:12px;
margin-top:12px;
font-size:20px;
font-weight:bold;
color:#ff7a00;
}

/* ===========================
   BUTTON
=========================== */

.confirmOrderBtn{
width:100%;
padding:15px;
border:none;
border-radius:12px;
background:#ff7a00;
color:#fff;
font-size:17px;
font-weight:bold;
cursor:pointer;
transition:.2s;
}

.confirmOrderBtn:hover{
opacity:.9;
transform:scale(.99);
}


.receivedBtn{

width:100%;

padding:12px;

margin:12px 0;

border:none;

border-radius:10px;

background:#28a745;

color:#fff;

font-size:15px;

font-weight:bold;

cursor:pointer;

}

.receivedBtn:hover{

opacity:.9;

}







.currentOrderCard{

background:#fff;

border-radius:14px;

padding:15px;

margin-bottom:18px;

box-shadow:0 2px 10px rgba(0,0,0,.08);

}

.orderHeader{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:10px;

}

.orderNo{

font-size:18px;

font-weight:bold;

color:#ff7a00;

}

.orderStatus{

font-size:14px;

font-weight:bold;

}

.orderInfo{

font-size:14px;

margin-bottom:6px;

}

.orderTime{

font-size:13px;

color:#777;

margin-bottom:10px;

}

.orderDivider{

height:1px;

background:#eee;

margin-bottom:10px;

}

.orderItem{

padding:6px 0;

border-bottom:1px dashed #eee;

}

.orderItem:last-child{

border-bottom:none;

}

.orderItemName{

font-weight:bold;

}

.orderItemQty{

font-size:13px;

color:#666;

}


.menuStatus{

    display:inline-block;
    margin-top:6px;
    padding:4px 10px;
    border-radius:20px;
    font-size:12px;
    font-weight:bold;

}

.menuStatus.out{

    background:#ffdddd;
    color:#d40000;

}

.menuStatus.soon{

    background:#fff3c4;
    color:#a56b00;

}

#moreButton{

    position:absolute;
    top:15px;
    right:15px;

    width:40px;
    height:40px;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:28px;
    cursor:pointer;

    border-radius:50%;

    transition:0.2s;

}

#moreButton:hover{

    background:#f2f2f2;

}




#adminLoginPopup input{

    width:100%;
    padding:12px;
    margin:8px 0;
    border:1px solid #ccc;
    border-radius:8px;
    font-size:16px;

}

#adminLoginPopup button{

    width:100%;
    margin-top:10px;

}


/* ==========================================
   CATEGORY SLIDER
========================================== */

.categorySlider{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 15px;

}

.categorySlider button{
    flex:0 0 28px !important;
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    padding:0 !important;
    border:none !important;
    border-radius:50% !important;
    background:#c62828 !important;
    color:#fff !important;
    font-size:12px !important;
    line-height:28px !important;
    text-align:center !important;

    font-weight:bold;

    cursor:pointer;

}

.categorySlider button:active{

    transform:scale(.95);

}


/* ==========================================
   INFO POPUP
========================================== */

.infoPopupContent{
    width:360px;
    max-width:92%;
    max-height:85vh;
    background:#151515;
    border:2px solid #2f8f46;
    border-radius:20px;
    padding:20px;
    overflow-y:auto;
    color:#fff;
    box-shadow:0 15px 40px rgba(0,0,0,.45);
}

#infoMenu{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:20px 0;
}

#infoMenu button{
    width:100%;
    padding:15px;
    border:none;
    border-radius:12px;
    background:#242424;
    color:white;
    font-size:17px;
    text-align:left;
    cursor:pointer;
}

#infoMenu button:hover{
    background:#1d6d3b;
}

#infoContent{
    margin-top:20px;
    line-height:1.7;
}


/* ==========================================
   INFO POPUP V2
========================================== */

.infoPopupContent{

    position:relative;

    width:380px;
    max-width:95%;
    max-height:90vh;

    background:#1b1b1b;

    border-radius:22px;

    overflow:hidden;

    display:flex;
    flex-direction:column;

    box-shadow:0 20px 50px rgba(0,0,0,.45);

}



/* ==========================
   HEADER
========================== */

.infoHeader{

    padding:25px 20px 15px;

    text-align:center;

    background:#242424;

    border-bottom:1px solid #333;

}

#infoLogo{

    width:75px;
    height:75px;

    object-fit:contain;

    margin-bottom:10px;

}

#infoRestaurantName{

    margin:0;

    color:#fff;

    font-size:24px;

    font-weight:700;

}

#infoTagline{

    margin-top:6px;

    color:#cfcfcf;

    font-size:14px;

}



/* ==========================
   TAB
========================== */

#infoMenu{

    display:flex;

    background:#2c2c2c;

}

.infoTab{

    flex:1;

    border:none;

    background:transparent;

    color:#ddd;

    padding:14px 5px;

    font-size:15px;

    cursor:pointer;

    transition:.25s;

}

.infoTab:hover{

    background:#3b3b3b;

}

.infoTab.active{

    background:#d4af37;

    color:#000;

    font-weight:bold;

}



/* ==========================
   CONTENT
========================== */

#infoContent{

    flex:1;

    overflow-y:auto;

    padding:20px;

    background:#ffffff;

    color:#222;

    line-height:1.7;

}



/* ==========================
   FOOTER
========================== */

.infoFooter{

    border-top:1px solid #ddd;

    background:#fafafa;

    display:flex;

    flex-direction:column;

}

.infoFooter button{

    border:none;

    background:none;

    padding:16px;

    text-align:left;

    font-size:16px;

    cursor:pointer;

    border-bottom:1px solid #ececec;

    transition:.2s;

}

.infoFooter button:hover{

    background:#f3f3f3;

}

.infoFooter button:last-child{

    border-bottom:none;

}


/* ==========================================
   INFO PANEL V3
========================================== */

.infoPanel{

    position:fixed;

    left:0;
    right:0;
    top:0;
    bottom:0;

    background:rgba(0,0,0,.70);

    display:none;

    justify-content:center;

    align-items:flex-start;

    overflow-x:hidden;
    overflow-y:auto;

    z-index:9999;

}


/* ==============================
   CONTAINER
============================== */

.infoContainer{

    position:relative;

    width:100%;
    max-width:430px;

    height:auto;
    min-height:100vh;
    min-height:100dvh;

    background:#ffffff;

    border-radius:0;

    display:flex;

    flex-direction:column;

    overflow:visible;

    animation:slideUp .30s ease;

}


/* ==============================
   ANIMATION
============================== */

@keyframes slideUp{

    from{

        transform:translateY(100%);

    }

    to{

        transform:translateY(0);

    }

}


/* ==============================
   CLOSE
============================== */

.infoClose{

    position:absolute;

    top:15px;

    right:18px;

    width:38px;

    height:38px;

    border:none;

    border-radius:50%;

    background:#ffffff;

    font-size:20px;

    cursor:pointer;

}


/* ==============================
   HEADER
============================== */

.infoHeader{

    background:#161616;

    color:#ffffff;

    padding:30px 20px 20px;

    text-align:center;

}


#infoLogo{

    width:90px;

    height:90px;

    object-fit:contain;

    margin:0 auto;

}


#infoRestaurantName{

    margin-top:12px;

    margin-bottom:5px;

    font-size:24px;

}


#infoTagline{

    color:#d4af37;

    font-size:15px;

}


/* ==============================
   TAB
============================== */

.infoTabs{

    display:flex;

    background:#222;

}


.infoTabs .tab{

    flex:1;

    border:none;

    background:none;

    color:#cccccc;

    padding:15px;

    cursor:pointer;

    font-size:15px;

}


.infoTabs .active{

    color:#d4af37;

    border-bottom:3px solid #d4af37;

}


/* ==============================
   CONTENT
============================== */

#infoContent{

    flex:none;

    overflow:visible;

    padding:20px;

    background:#fafafa;

}

.chefInfo{
    text-align:center;
}

/* ==========================================
   CHEF NAN PROFILE
========================================== */

.chefProfile{
    color:#262626;
    text-align:center;
}

.chefProfileHero{
    position:relative;
    width:100%;
    aspect-ratio:4/3;
    overflow:hidden;
    border:1px solid #d4af37;
    border-radius:18px;
    background:#171717;
    box-shadow:0 10px 26px rgba(0,0,0,.18);
}

.chefProfileImage{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 43%;
}

.chefProfileHero > span{
    position:absolute;
    right:10px;
    bottom:10px;
    padding:5px 9px;
    border:1px solid rgba(212,175,55,.75);
    border-radius:20px;
    background:rgba(15,15,15,.82);
    color:#f2d46f;
    font-size:10px;
    font-weight:800;
    letter-spacing:.4px;
    text-transform:uppercase;
}

.chefEyebrow{
    margin:20px 0 5px;
    color:#a47500;
    font-size:11px;
    font-weight:900;
    letter-spacing:1.4px;
}

#infoContent .chefProfileName{
    margin:0;
    color:#171717;
    font-size:30px;
    line-height:1.1;
}

.chefProfileTitle{
    margin:7px auto 16px;
    color:#666666;
    font-size:13px;
    font-weight:700;
    line-height:1.45;
}

.chefQuote{
    margin:0 0 16px;
    padding:14px 15px;
    border-left:4px solid #d4af37;
    border-radius:0 12px 12px 0;
    background:#171717;
    color:#f5f5f5;
    font-size:14px;
    font-style:italic;
    line-height:1.55;
    text-align:left;
}

.chefProfileText{
    color:#555555;
    font-size:14px;
    line-height:1.7;
    text-align:left;
}

.chefSpecialtyGrid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin:17px 0 22px;
}

.chefSpecialty{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:58px;
    padding:9px;
    border:1px solid #ead99c;
    border-radius:11px;
    background:linear-gradient(145deg,#fffdf5,#f7eed1);
    color:#594500;
    font-size:12px;
    font-weight:800;
    line-height:1.3;
}

.chefSectionHeading{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:9px;
    margin:3px 0 13px;
}

.chefSectionHeading span{
    height:1px;
    background:#d4af37;
}

.chefSectionHeading h3{
    color:#222222;
    font-size:13px;
    letter-spacing:.4px;
    text-transform:uppercase;
}

.chefJourney{
    margin-bottom:23px;
}

.chefJourneyRow{
    display:grid;
    grid-template-columns:15px 1fr;
    gap:9px;
    padding:9px 0;
    border-bottom:1px solid #eeeeee;
    text-align:left;
}

.chefJourneyRow:last-child{
    border-bottom:0;
}

.chefJourneyDot{
    width:10px;
    height:10px;
    margin-top:5px;
    border:2px solid #d4af37;
    border-radius:50%;
    background:#171717;
}

.chefJourneyRow strong{
    display:block;
    color:#222222;
    font-size:13px;
}

.chefJourneyRow p{
    margin-top:3px;
    color:#6a6a6a;
    font-size:12px;
}

.chefMediaGrid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
}

#infoContent .chefMediaItem{
    width:100%;
    aspect-ratio:4/5;
    padding:0;
    overflow:hidden;
    border:1px solid #d4af37;
    border-radius:10px;
    background:#171717;
    box-shadow:0 4px 10px rgba(0,0,0,.12);
}

.chefMediaItem img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.chefMediaItem:active{
    transform:scale(.98);
}

.adminMode .chefMediaItem{
    overflow:visible !important;
}

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


/* ==============================
   FOOTER
============================== */

.infoFooter{

    background:#ffffff;

    border-top:1px solid #dddddd;

}


.infoFooter button{

    width:100%;

    border:none;

    background:none;

    padding:18px;

    text-align:left;

    font-size:16px;

    cursor:pointer;

    border-bottom:1px solid #eeeeee;

}


.infoFooter button:hover{

    background:#f5f5f5;

}


/* ==========================================
   ADMIN MODE
========================================== */

.adminMode{

    --adminMode:1;

}

/* ==========================================
   ADMIN MODE TEST
========================================== */

.adminMode #header{

    border:4px solid red;

}

.inlineEditable{

    cursor:text;

}

.adminMode .inlineEditable:hover{

    background:#fff7cc;
    outline:1px dashed #ff9800;

}

.inlineEditor{

    width:100%;
    padding:6px 8px;

    border:1px solid #ff9800;
    border-radius:6px;

    font-size:inherit;
    font-family:inherit;

    outline:none;
    background:#ffffff;

}


.deleteMenuButton{

    width:100%;

    height:50px;

    margin-top:15px;

    border:none;

    border-radius:12px;

    background:#d70015;

    color:#ffffff;

    font-size:17px;

    font-weight:bold;

    cursor:pointer;

}


.addMenuCard{

    margin:15px;

    padding:18px;

    border:2px dashed #999;

    border-radius:16px;

    text-align:center;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    background:#fafafa;

}


.deleteCategoryCard{

    margin:15px;

    padding:18px;

    border-radius:16px;

    text-align:center;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    background:#d70015;

    color:#ffffff;

}


.addCategoryCard{

    border:2px dashed #999;

}

.addCategoryIcon{

    font-size:48px;

    margin:20px 0;

}


.addCategoryCard{

    display:flex !important;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    min-height:220px;

    background:#ffffff;

    border:2px dashed #ff9800;

}

.addCategoryCard h3{

    display:block !important;

    margin-top:12px;

    color:#222;

    font-size:18px;

    font-weight:bold;

}

.addCategoryCard img{

    display:none;

}

.addCategoryIcon{

    display:flex;

    justify-content:center;

    align-items:center;

    width:80px;

    height:80px;

    border-radius:50%;

    background:#ff9800;

    color:#fff;

    font-size:42px;

}



.deleteCategoryButton{

    position:absolute;

    top:8px;

    right:8px;

    width:36px;

    height:36px;

    border:none;

    border-radius:50%;

    background:#d70015;

    color:#fff;

    font-size:18px;

    cursor:pointer;

    z-index:999;

}
.categoryCard{

    position:relative;

}


#productContainer{

    flex:1;

    overflow-y:auto;

    min-height:0;

    -webkit-overflow-scrolling:touch;

}

#categoryMenuContainer{

    flex:1;

    overflow-y:auto;

    min-height:0;

    -webkit-overflow-scrolling:touch;

}


#summaryContainer{

    flex:1;

    min-height:0;

    overflow-y:auto;

    -webkit-overflow-scrolling:touch;

}


/* ==========================================
   UNIVERSAL POPUP BODY
========================================== */

#summaryContainer,
#currentOrderContent,
#productContainer,
#categoryMenuContainer,
#cartContainer,
#drinkContainer{

    flex:1;

    min-height:0;

    overflow-y:auto;

    -webkit-overflow-scrolling:touch;

}


/* ==========================================
   POPUP FOOTER
========================================== */

.popupFooter{

    flex-shrink:0;

    padding:15px;

    background:#181818;

    border-top:1px solid #333;

}

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

.popupBody{

    flex:1;

    min-height:0;

    overflow-y:auto;

    overflow-x:hidden;

    -webkit-overflow-scrolling:touch;

}


html,
body,
main,
#homepage,
#footer{

    background:#000;

}


/* ==========================================
   FULL PAGE SCROLL
   Category, product and order screens use the
   browser/page scrollbar instead of a small
   scrollbar inside a fixed-height phone modal.
========================================== */

#categoryPopup,
#productPopup,
#drinkPopup,
#cartPopup,
#summaryPopup,
#currentOrderPopup{

    align-items:flex-start;

    overflow-x:hidden;

    overflow-y:auto;

    padding:0 15px;

    background:#000;

}

#categoryPopup .popupContent,
#productPopup .popupContent,
#drinkPopup .popupContent,
#cartPopup .popupContent,
#summaryPopup .popupContent,
#currentOrderPopup .popupContent{

    width:430px;

    max-width:100%;

    height:auto;

    min-height:100vh;

    min-height:100dvh;

    max-height:none;

    border-top:0;

    border-bottom:0;

    border-radius:0;

    overflow:visible;

}

#categoryPopup .popupBody,
#productPopup .popupBody,
#drinkPopup .popupBody,
#cartPopup .popupBody,
#summaryPopup .popupBody,
#currentOrderPopup .popupBody,
#categoryMenuContainer,
#productContainer,
#drinkContainer,
#cartContainer,
#summaryContainer,
#currentOrderContent{

    flex:none;

    min-height:auto;

    overflow:visible;

}

@media(max-width:480px){

    #categoryPopup,
    #productPopup,
    #drinkPopup,
    #cartPopup,
    #summaryPopup,
    #currentOrderPopup{

        padding:0;

    }

}

/* ==========================================
   MOBILE LAYOUT REFINEMENT - SEPT 2026
   Compact detail, readable cart form and
   consistent insets inside the green frame.
========================================== */

/* 1. Product detail stays within one phone viewport. */
#productPopup{
    align-items:flex-start;
    overflow:hidden;
}

#productPopup .popupContent{
    height:100vh;
    height:100dvh;
    min-height:0;
    max-height:100dvh;
    overflow:hidden;
}

#productPopup #productContainer{
    display:flex;
    flex:1;
    flex-direction:column;
    height:100%;
    min-height:0;
    overflow:hidden;
}

#productPopup .productHero{
    flex:1 1 0;
    min-height:220px;
    overflow:hidden;
}

#productPopup .productImage{
    height:100%;
    min-height:220px;
    max-height:none;
    border-radius:0;
}

#productPopup .productBody{
    display:flex;
    flex:0 0 auto;
    flex-direction:column;
    min-height:0;
    margin-top:-14px;
    padding:10px 13px 8px;
    border-radius:20px 20px 0 0;
    overflow:hidden;
}

#productPopup .productTitle{
    margin:0 0 4px;
    font-size:clamp(18px,4.8vw,22px);
    line-height:1.12;
    text-align:center;
}

#productPopup .productIngredients{
    margin:0 0 6px;
    padding:6px 9px;
    border:1px solid #e3e3e3;
    border-radius:9px;
    background:#f8f8f8;
    text-align:center;
}

#productPopup .productIngredientsLabel{
    margin-bottom:2px;
    color:#555;
    font-size:10px;
    font-weight:800;
    letter-spacing:.35px;
}

#productPopup .productDescription{
    min-height:15px;
    margin:0;
    font-size:12px;
    line-height:1.25;
    text-align:center;
}

#productPopup .productStatusRow{
    margin-bottom:5px;
}

#productPopup .statusLabel,
#productPopup .sectionTitle,
#productPopup .bottomTitle{
    font-size:12px;
    line-height:1.15;
}

#productPopup .statusButton{
    min-height:32px;
    padding:6px 10px;
    font-size:13px;
    text-align:center;
}

#productPopup #productOption{
    gap:7px;
    margin-bottom:7px;
}

#productPopup .optionCard,
#productPopup .adminOptionRow{
    min-height:52px;
    margin-bottom:5px;
    padding:6px 8px;
    border-radius:11px;
}

#productPopup .optionCard input{
    margin-bottom:3px;
    transform:scale(1);
}

#productPopup .optionName{
    font-size:13px;
    line-height:1.15;
}

#productPopup .optionPrice{
    margin-top:2px;
    font-size:14px;
}

#productPopup .deleteOptionButton{
    width:34px !important;
    height:34px;
    padding:0 !important;
    font-size:14px;
}

#productPopup .addOptionButton{
    min-height:32px;
    padding:6px 10px;
    font-size:13px;
    text-align:center;
}

#productPopup #productAddon{
    gap:5px;
    margin-bottom:6px;
}

#productPopup .addonCard{
    gap:7px;
    min-height:34px;
    padding:5px 8px;
    border-radius:9px;
    font-size:12px;
}

#productPopup #productRemark{
    gap:5px;
    margin-bottom:6px;
}

#productPopup .remarkBtn{
    width:auto;
    min-height:30px;
    padding:5px 9px;
    border:1px solid #d8d8d8 !important;
    border-radius:9px;
    background:#ffffff !important;
    color:#444444 !important;
    font-size:12px;
}

#productPopup #productRemark .remarkBtn.active{
    border-color:#ff6b00 !important;
    background:#ff6b00 !important;
    color:#ffffff !important;
}

#productPopup .bottomOrder{
    align-items:center;
    gap:10px;
    margin:5px 0;
}

#productPopup .bottomTitle{
    margin-bottom:4px;
}

#productPopup .qtyBox{
    gap:5px;
}

#productPopup .qtyBtn,
#cartPopup .qtyBtn{
    width:34px !important;
    height:34px;
    padding:0 !important;
    font-size:16px;
    text-align:center;
}

#productPopup .qtyValue{
    min-width:24px;
    font-size:14px;
}

#productPopup .livePrice{
    font-size:25px;
}

#productPopup #addCartBtn,
#productPopup .deleteMenuButton{
    height:38px;
    min-height:38px;
    margin-top:5px;
    padding:7px 10px;
    border-radius:10px;
    font-size:14px;
    text-align:center;
}

#productPopup .closePopup{
    top:8px;
    right:8px;
    width:36px;
    height:36px;
    font-size:22px;
}

/* 2. My Order uses a light, high-contrast and compact layout. */
#cartPopup .cartPopupContent{
    background:#f4f5f2;
    color:#222;
}

#cartPopup .cartHeader{
    padding:12px 12px 0;
    margin-bottom:5px;
}

#cartPopup .cartHeader h2{
    color:#222;
    font-size:22px;
}

#cartPopup .cartDivider{
    width:56px;
    height:3px;
    margin-top:6px;
}

#cartPopup #cartContainer{
    padding:6px 11px 0;
}

#cartPopup .cartItemNew{
    gap:8px;
    padding:8px;
    margin-bottom:7px;
    border-radius:13px;
}

#cartPopup .cartImage,
#cartPopup .cartImage img,
#cartPopup .cartNoImage{
    width:58px;
    height:58px;
    border-radius:10px;
}

#cartPopup .cartNoImage{
    font-size:25px;
}

#cartPopup .cartTitle{
    font-size:14px;
}

#cartPopup .cartPriceNew{
    font-size:16px;
}

#cartPopup .cartOptionNew{
    margin-top:3px;
    font-size:12px;
}

#cartPopup .cartAddon,
#cartPopup .cartRemark{
    margin-bottom:2px;
    font-size:11px;
}

#cartPopup .cartBottomRow{
    margin-top:5px;
}

#cartPopup .cartBottomRow .deleteBtn{
    width:34px !important;
    height:34px;
    margin:0;
    padding:0 !important;
    font-size:15px;
}

#cartPopup #cartTotal{
    margin:7px 11px;
    padding:0;
    border:0;
    background:transparent;
    color:#222;
}

#cartPopup .cartTotalBox{
    padding:8px;
    border-width:1px;
    border-radius:12px;
}

#cartPopup .cartTotalTitle{
    font-size:11px;
}

#cartPopup .cartPackagingRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:6px;
    padding-bottom:6px;
    border-bottom:1px solid #ead7b6;
    color:#555555;
    font-size:12px;
}

#cartPopup .cartPackagingRow strong{
    color:#d06a00;
    white-space:nowrap;
}

#cartPopup .cartTotalValue{
    margin-top:2px;
    font-size:21px;
}

#cartPopup .orderSection{
    margin:3px 11px 0;
}

#cartPopup .orderSection h3{
    margin-bottom:6px;
    color:#222;
    font-size:16px;
}

#cartPopup .orderType{
    gap:7px;
}

#cartPopup .orderCard{
    min-height:70px;
    padding:7px 5px;
    border-radius:12px;
    background:#fff;
    color:#222;
    font-size:13px;
}

#cartPopup .orderIcon{
    margin-bottom:2px;
    font-size:22px;
}

#cartPopup #submitOrderBtn{
    width:calc(100% - 22px);
    min-height:40px;
    margin:9px 11px 0;
    padding:8px 12px;
    font-size:14px;
    text-align:center;
}

#cartPopup .cartBottomAction{
    gap:7px;
    margin:8px 11px 11px;
}

#cartPopup .cartBottomAction button{
    min-height:38px;
    margin-top:0;
    padding:7px 8px;
    font-size:13px;
    text-align:center;
}

#cartPopup #addMoreMenuBtn{
    color:#222 !important;
}

/* 3. Full-width, readable controls for every order type. */
#cartPopup #orderExtra{
    margin-top:7px;
    color:#222;
    font-size:13px;
}

#cartPopup .orderExtraField,
#cartPopup .bookingFields{
    display:flex;
    flex-direction:column;
    gap:4px;
    width:100%;
}

#cartPopup .bookingFields{
    gap:7px;
}

#cartPopup .orderExtraField label,
#cartPopup .orderExtraLabel{
    display:block;
    font-weight:700;
}

#cartPopup #orderExtra input[type="number"],
#cartPopup #orderExtra input[type="date"],
#cartPopup #orderExtra input[type="time"]{
    display:block;
    width:100%;
    min-height:38px;
    margin:0;
    padding:7px 10px;
    border:1px solid #c9cbc8;
    border-radius:9px;
    background:#fff;
    color:#222;
    font-size:14px;
}

#cartPopup .collectionChoices{
    display:flex;
    flex-direction:column;
    gap:4px;
}

#cartPopup .collectionChoice{
    display:flex;
    align-items:center;
    gap:8px;
    min-height:34px;
    padding:6px 9px;
    border:1px solid #d4d6d2;
    border-radius:9px;
    background:#fff;
    font-weight:400;
}

#cartPopup .collectionChoice input{
    flex:0 0 auto;
}

#cartPopup .takeawayTableField{
    margin-top:5px;
}

#cartPopup .packagingNote{
    margin-top:5px;
    color:#555;
    font-size:12px;
    line-height:1.3;
}

/* 4. Summary cards remain comfortably inside the green frame. */
#summaryPopup .popupContent{
    background:#f4f5f2;
    color:#222;
}

#summaryPopup .popupContent > h2{
    margin:12px 44px 8px;
    color:#222;
    font-size:22px;
}

#summaryPopup #summaryContainer{
    padding:7px 11px 10px;
}

#summaryPopup .summaryCard{
    gap:7px;
    padding:9px;
    margin-bottom:8px;
    border-radius:12px;
}

#summaryPopup .summaryLeft{
    gap:8px;
    min-width:0;
}

#summaryPopup .summaryImg{
    width:68px;
    height:68px;
    border-radius:9px;
}

#summaryPopup .summaryInfo{
    min-width:0;
}

#summaryPopup .summaryName{
    font-size:14px;
    line-height:1.2;
}

#summaryPopup .summaryOption,
#summaryPopup .summaryAddon,
#summaryPopup .summaryRemark{
    margin:2px 0 0;
    font-size:11px;
    line-height:1.25;
}

#summaryPopup .summaryRight{
    gap:7px;
    margin:7px 0 0 4px;
}

#summaryPopup .summaryQty{
    padding:3px 8px;
    font-size:11px;
}

#summaryPopup .summaryPrice{
    font-size:14px;
    white-space:nowrap;
}

#summaryPopup .summaryBox,
#summaryPopup .summaryTotalBox{
    margin:9px 0;
    padding:10px;
    border-radius:12px;
    font-size:13px;
    line-height:1.55;
}

#summaryPopup .summaryBoxTitle{
    margin-bottom:4px;
    font-size:14px;
}

#summaryPopup .summaryRow{
    margin:5px 0;
    font-size:13px;
}

#summaryPopup .summaryGrandTotal{
    margin-top:7px;
    padding-top:8px;
    font-size:17px;
}

#summaryPopup .popupFooter{
    padding:8px 11px 11px;
    background:#f4f5f2;
    border-top:1px solid #d9dbd7;
}

#summaryPopup .popupFooter button{
    min-height:40px;
    margin-top:6px;
    padding:8px 10px;
    font-size:14px;
    text-align:center;
}

#summaryPopup #backToCartBtn{
    color:#222 !important;
}

@media(max-width:480px){
    #cartPopup .popupContent,
    #summaryPopup .popupContent{
        width:100%;
    }
}

@media(max-height:700px) and (max-width:480px){
    #productPopup .productHero{
        min-height:160px;
    }

    #productPopup .productImage{
        height:100%;
        min-height:160px;
    }

    #productPopup .productBody{
        padding-top:8px;
    }

    #productPopup .optionCard,
    #productPopup .adminOptionRow{
        min-height:45px;
    }
}

/* ==========================================
   ADMIN LOGIN PANEL
========================================== */

#adminLoginPopup{
    align-items:center;
    padding:18px;
}

#adminLoginPopup .popupContent{
    width:380px;
    max-width:100%;
    height:auto;
    min-height:0;
    max-height:none;
    padding:24px 18px 18px;
    background:#ffffff;
    color:#222222;
    border-radius:18px;
    overflow:visible;
}

#adminLoginPopup .popupContent h2{
    margin:0 45px 14px;
    color:#222222;
    font-size:22px;
}

#adminLoginPopup input{
    min-height:46px;
    margin:6px 0;
    background:#ffffff;
    color:#222222;
}

#adminLoginPopup .popupContent button:not(.closePopup){
    min-height:46px;
    margin-top:9px;
    padding:10px 14px;
    text-align:center;
}

#adminLoginPopup .closePopup{
    top:10px;
    right:10px;
    width:40px !important;
    min-width:40px;
    height:40px !important;
    min-height:40px;
    margin:0 !important;
    padding:0 !important;
    border-radius:50% !important;
    background:#d32f2f;
    color:#ffffff;
    font-size:25px;
    line-height:1;
    text-align:center;
    flex:0 0 40px;
}

/* ==========================================
   SIDE MENU INLINE EDITING
========================================== */

.infoAdminField,
.infoAdminFields{
    display:none;
}

.adminMode .infoInlineEditable{
    min-height:30px;
    padding:4px 6px;
    border:1px dashed #f39c12;
    border-radius:7px;
    cursor:text;
}

.adminMode .infoEditableImage{
    outline:3px dashed #f39c12;
    outline-offset:3px;
    cursor:pointer;
}

.adminMode .infoAdminField,
.adminMode .infoAdminFields{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:14px;
    padding:12px;
    border:1px solid #dddddd;
    border-radius:10px;
    background:#ffffff;
    color:#222222;
}

.adminMode .infoAdminFields label{
    display:flex;
    flex-direction:column;
    gap:4px;
    font-size:13px;
    font-weight:bold;
}

.adminMode .infoAdminFields .infoInlineEditable,
.adminMode .infoAdminField .infoInlineEditable{
    overflow-wrap:anywhere;
    font-weight:normal;
}

.infoInlineEditor{
    display:block;
    width:100%;
    min-height:40px;
    padding:8px 10px;
    border:2px solid #f39c12;
    border-radius:7px;
    background:#ffffff;
    color:#222222;
    font:inherit;
    line-height:1.45;
}

textarea.infoInlineEditor{
    min-height:120px;
    resize:vertical;
}

.infoEditHint{
    margin:14px 0 4px;
    padding:9px 10px;
    border-radius:8px;
    background:#fff3df;
    color:#8a5200;
    font-size:13px;
    text-align:center;
}

/* ==========================================
   GALLERY V2 — 5 COLUMNS + INLINE ADMIN
========================================== */

#infoContent .galleryGrid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:5px;
    margin-top:14px;
}

.galleryItem{
    position:relative;
    min-width:0;
    aspect-ratio:1/1;
    border-radius:7px;
    overflow:hidden;
    background:#e8e8e8;
    touch-action:auto;
}

.galleryItem > img{
    width:100% !important;
    height:100% !important;
    aspect-ratio:1/1;
    object-fit:cover;
    border-radius:7px !important;
    cursor:zoom-in;
}

.galleryItem.dragging{
    opacity:.55;
    outline:2px solid #f4b000;
    touch-action:none;
}

.galleryAdminActions{
    position:absolute;
    left:2px;
    right:2px;
    bottom:2px;
    display:flex;
    justify-content:space-between;
    gap:2px;
    z-index:2;
}

#infoContent .galleryAdminActions button{
    width:19px !important;
    height:19px !important;
    min-width:19px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:50% !important;
    background:rgba(0,0,0,.76) !important;
    color:#fff !important;
    font-size:12px !important;
    line-height:19px !important;
    text-align:center !important;
}

#infoContent .galleryAdminActions button:last-child{
    background:#c62828 !important;
}

.galleryDragHandle{
    position:absolute;
    top:2px;
    right:2px;
    min-width:19px;
    height:19px;
    border-radius:10px;
    background:rgba(0,0,0,.76);
    color:#fff;
    font-size:11px;
    line-height:19px;
    text-align:center;
    cursor:grab;
}

#infoContent .galleryAddButton{
    display:block;
    width:100% !important;
    margin:12px 0 0;
    padding:11px !important;
    border-radius:9px !important;
    background:#f4b000 !important;
    color:#171717 !important;
    text-align:center !important;
    font-weight:800;
}

.galleryLightbox{
    position:fixed;
    inset:0;
    z-index:12000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(0,0,0,.92);
}

.galleryLightbox img{
    display:block;
    max-width:100%;
    max-height:90vh;
    object-fit:contain;
    border-radius:8px;
}

.galleryLightboxClose{
    position:absolute;
    top:16px;
    right:18px;
    width:36px;
    height:36px;
    padding:0;
    border-radius:50%;
    background:#fff;
    color:#111;
    font-size:27px;
    line-height:34px;
    z-index:2;
}

/* ==========================================
   JACK WAITER
========================================== */

.jackWaiterButton{
    position:fixed;
    right:max(16px,calc((100vw - 430px)/2 + 16px));
    bottom:76px;
    z-index:8500;
    display:none;
    width:62px;
    height:62px;
    padding:3px 2px 2px;
    border:2px solid #f4b000;
    border-radius:50%;
    background:#171717;
    color:#fff;
    box-shadow:0 7px 22px rgba(0,0,0,.34);
    text-align:center;
}

.jackWaiterIcon{display:block;font-size:29px;line-height:31px}
.jackWaiterLabel{display:block;color:#f4b000;font-size:10px;font-weight:900;letter-spacing:.8px}
.jackWaiterBadge{
    position:absolute;
    top:-5px;
    right:-4px;
    display:none;
    min-width:20px;
    height:20px;
    padding:0 5px;
    border-radius:10px;
    background:#c62828;
    color:#fff;
    font-size:11px;
    font-weight:800;
    line-height:20px;
}

.missRoseTestBadge{position:absolute;left:-7px;bottom:-7px;display:none;padding:3px 6px;border-radius:8px;background:#1565c0;color:#fff;font-size:8px;font-weight:900;letter-spacing:.5px}
.missRoseAdminControl{display:none;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid #ddd;background:#fff8df}
.missRoseAdminControl strong,.missRoseAdminControl small{display:block}.missRoseAdminControl small{margin-top:3px;color:#775d10;font-size:11px}
.missRoseSwitch{position:relative;flex:0 0 48px;width:48px;height:27px}.missRoseSwitch input{position:absolute;opacity:0;pointer-events:none}
.missRoseSwitch span{position:absolute;inset:0;border-radius:15px;background:#999;cursor:pointer;transition:.2s}
.missRoseSwitch span:before{content:"";position:absolute;width:21px;height:21px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3);transition:.2s}
.missRoseSwitch input:checked+span{background:#16884a}.missRoseSwitch input:checked+span:before{transform:translateX(21px)}

.jackWaiterPanel{
    position:fixed;
    right:max(10px,calc((100vw - 430px)/2 + 10px));
    bottom:72px;
    z-index:11000;
    display:none;
    flex-direction:column;
    width:min(410px,calc(100vw - 20px));
    height:min(620px,calc(100dvh - 95px));
    overflow:hidden;
    border:1px solid #333;
    border-radius:18px;
    background:#f4f4f4;
    box-shadow:0 18px 55px rgba(0,0,0,.48);
}

.jackWaiterPanel.open{display:flex}
.jackWaiterHeader{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;background:#171717;color:#fff}
.jackWaiterIdentity{display:flex;align-items:center;gap:9px}
.jackWaiterAvatar{display:grid;place-items:center;width:39px;height:39px;border-radius:50%;background:#fff;font-size:23px}
.jackWaiterIdentity strong,.jackWaiterIdentity small{display:block}
.jackWaiterIdentity small{margin-top:2px;color:#f4b000;font-size:11px}
.jackWaiterHeader > button{width:31px;height:31px;padding:0;border-radius:50%;background:#333;color:#fff;font-size:22px}
.jackMessages{flex:1;overflow-y:auto;padding:13px;background:#ece8df}
.jackMessage{max-width:86%;margin:0 0 9px;padding:9px 11px;border-radius:13px;font-size:14px;line-height:1.42;white-space:pre-line}
.jackMessage.bot{margin-right:auto;border-bottom-left-radius:3px;background:#fff;color:#222}
.jackMessage.user{margin-left:auto;border-bottom-right-radius:3px;background:#dcf8c6;color:#172217}
.jackMessage.system{max-width:100%;background:#fff7d8;color:#4d3c00}
.jackQuickActions{display:flex;gap:7px;padding:9px 10px;background:#fff;border-top:1px solid #ddd}
.jackQuickActions{flex-wrap:wrap;max-height:150px;overflow-y:auto}
.jackQuickActions button,.jackChoiceButton{flex:1 1 30%;min-width:92px;padding:9px 8px;border:1px solid #d29b00;border-radius:9px;background:#fff8df;color:#3c2d00;font-size:13px;font-weight:800;text-align:center}
.jackInputBar{display:flex;align-items:center;gap:7px;padding:9px 10px;background:#fff;border-top:1px solid #ddd}
.jackInputBar input{flex:1;min-width:0;padding:10px 11px;border:1px solid #ccc;border-radius:20px;font-size:14px}
.jackInputBar button{flex:0 0 38px;width:38px;height:38px;padding:0;border-radius:50%;background:#c62828;color:#fff;text-align:center}
.jackInputBar button.listening{background:#16884a;animation:jackPulse 1s infinite}
.jackResultCard{margin-top:7px;padding:9px;border:1px solid #e1d28a;border-radius:9px;background:#fff}
.jackResultCard{display:flex;align-items:center;gap:9px}
.jackResultCard>img{flex:0 0 58px;width:58px;height:58px;border-radius:8px;object-fit:cover}
.jackResultInfo{flex:1;min-width:0}
.jackResultCard strong,.jackResultCard small{display:block}
.jackResultCard small{margin:3px 0 7px;color:#666}
.jackResultCard.unavailable{opacity:.55}
.jackResultCard button,.jackSummaryActions button{margin:3px 3px 0 0;padding:7px 9px;border-radius:7px;background:#171717;color:#fff;font-size:12px}
.jackSummaryActions .confirm{background:#16884a}
.roseSummaryLine{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid #e6dca9}
.roseSummaryLine span{min-width:0}.roseSummaryLine small{display:block;color:#777}.roseSummaryLine>strong{white-space:nowrap}
.roseSummaryTotal{display:flex;justify-content:space-between;margin-top:10px;padding-top:9px;border-top:2px solid #d3b342;font-size:16px}

@keyframes jackPulse{50%{transform:scale(1.08)}}

@media(max-width:430px){
    .jackWaiterPanel{right:5px;bottom:5px;width:calc(100vw - 10px);height:calc(100dvh - 10px);border-radius:15px}
}

.reviewStars{
    color:#f39c12;
    font-weight:bold;
}

.reviewCard a{
    color:#1565c0;
    text-decoration:underline;
    overflow-wrap:anywhere;
    word-break:break-word;
}

/* ==========================================
   REVIEW ADMIN + OPERATION HOURS
========================================== */

.reviewAdminActions{
    display:flex;
    gap:8px;
    margin-top:12px;
    padding-top:10px;
    border-top:1px solid #eeeeee;
}

#infoContent .reviewAdminActions button,
#infoContent .reviewAddButton{
    min-height:38px;
    padding:8px 12px;
    border:0;
    border-radius:9px;
    font-size:13px;
    font-weight:800;
    text-align:center;
}

#infoContent .reviewAdminActions button{
    flex:1;
    background:#202020;
    color:#ffffff;
}

#infoContent .reviewAdminActions button:last-child{
    background:#c62828;
}

#infoContent .reviewAddButton{
    display:block;
    width:100%;
    margin-top:14px;
    background:#f4b000;
    color:#171717;
}

.businessHoursCard{
    margin-top:14px;
    overflow:hidden;
    border:1px solid #e0e0e0;
    border-radius:14px;
    background:#ffffff;
    box-shadow:0 4px 12px rgba(0,0,0,.06);
}

.businessHourRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:52px;
    padding:10px 12px;
    border-bottom:1px solid #eeeeee;
}

.businessHourRow:last-child{
    border-bottom:0;
}

.businessHourRow > strong{
    flex:1;
    color:#222222;
    font-size:14px;
}

.businessHourTime{
    color:#258238;
    font-size:13px;
    font-weight:800;
    white-space:nowrap;
}

.businessHourRow.closed .businessHourTime{
    color:#c62828;
}

.businessHourAdmin{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:5px;
    min-width:0;
}

#infoContent .businessDayToggle{
    width:68px;
    min-height:34px;
    padding:6px;
    border:0;
    border-radius:8px;
    background:#258238;
    color:#ffffff;
    font-size:11px;
    font-weight:800;
    text-align:center;
}

#infoContent .businessHourRow.closed .businessDayToggle{
    background:#c62828;
}

.businessHourAdmin input[type="time"]{
    width:86px;
    min-width:0;
    height:34px;
    padding:4px;
    border:1px solid #cccccc;
    border-radius:7px;
    background:#ffffff;
    color:#222222;
    font-size:12px;
}

@media(max-width:380px){
    .businessHourRow{
        align-items:flex-start;
        flex-direction:column;
    }

    .businessHourAdmin{
        width:100%;
        justify-content:flex-start;
    }
}